FrameSelection - headless drag-to-select component + composable

[michaelbany]

Hey! I wanted to share a small utility I’ve been using across some of my apps — it’s a headless component + composable pair that enables selecting items using a drag rectangle (like in file explorers).

I designed it to be extremely simple and plug-and-play. Here's how it looks in practice:

<FrameSelection
  @selecting="(value: boolean) => (isSelecting = value)"
  @update:selection="handleFrameSelection"
  :disabled="props.preventSelect"
>
  <div class="grid gap-4 justify-between w-full">
    <template v-for="item in items" :key="item.id">
      <FrameSelectionItem :selection-key="item.id">
        <FolderComponent
          v-bind="item"
          :selected="isSelected(item)"
          @select="(e) => handleSelectItem(item, e)"
          @click="emit('click', item.item)"
          :prevent-select="props.preventSelect"
        />
      </FrameSelectionItem>
    </template>
  </div>
</FrameSelection>

You simply wrap the block of items and you get this behavior:

---

I also pair it with a composable called useSelect() which handles selection logic like ctrl/cmd toggles, shift range selection, and general state management. It’s fully decoupled from the DOM or item structure — just a generic utility to manage selectedItems.

You can combine the composable with the frame component like this:

const { selected, select, setSelected, clear, isSelected } =
  useSelect<FolderOrDocument>(items);

const isFrameSelecting = ref(false);

const handleFrameSelection = (selection: any) => {
  if (props.preventSelect) return;

  const { selectedKeys } = selection;
  const items = props.items.filter((item) =>
    selectedKeys.includes(item.id)
  );

  setSelected(items);
};

const handleSelectItem = (item: FolderOrDocument, e: PointerEvent) => {
  if (e.shiftKey) {
    select(item, 'shift');
  } else if (e.ctrlKey || e.metaKey) {
    select(item, 'ctrl');
  } else {
    select(item);
  }
};

const handleDeselect = () => {
  if (isFrameSelecting.value) return;
  clear();
};

Would this kind of thing be a good fit as a shadcn-vue utility or extension?
I know it's not a Radix UI primitive, but I figured this pattern could be useful for things like file managers, table UIs, asset galleries, and similar use cases.

Let me know what do you think!
Here are the links to the component and composable.

Feel free to clone the repo - there are a few other experiments in there that extend or complement the shadcn/radix stack. You might find something useful or inspiring. 😄

Cheers;