@sewadah/selaras 0.1.1

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -0,0 +1,590 @@
+<script setup>
+import {
+  ComboboxAnchor,
+  ComboboxArrow,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+  TagsInputRoot,
+  useDirection
+} from "reka-ui";
+import { computed, ref } from "vue";
+import Button from "../components/Button.vue";
+import Chip from "../components/Chip.vue";
+import Icon from "../components/Icon.vue";
+import Modal from "../components/Modal.vue";
+import Tooltip from "../components/Tooltip.vue";
+import { useComboboxSelect } from "../composables/use-combobox-select";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useIsMobile } from "../composables/use-media-query";
+import { useMessages } from "../composables/use-messages";
+import { selectTheme } from "../theme/select";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import ComboboxSelectBody from "./ComboboxSelectBody.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  items: { type: Array, required: true },
+  valueKey: { type: String, required: false },
+  labelKey: { type: String, required: false },
+  modelValue: { type: [String, Array], required: false },
+  multiple: { type: Boolean, required: false },
+  searchable: { type: Boolean, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  displayMode: { type: String, required: false, default: "comma" },
+  maxChips: { type: Number, required: false, default: 3 },
+  loading: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  invalid: { type: Boolean, required: false },
+  color: { type: null, required: false, default: "primary" },
+  clearable: { type: Boolean, required: false },
+  dropdown: { type: Boolean, required: false },
+  creatable: { type: Boolean, required: false },
+  forceSelection: { type: Boolean, required: false },
+  searchTerm: { type: String, required: false },
+  resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
+  resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
+  arrow: { type: Boolean, required: false, default: false },
+  mobileModal: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
+const {
+  flatOptions,
+  selectedOptions,
+  visibleOptions,
+  overflowOptions,
+  commaText,
+  resolveOption,
+  toOption,
+  setValue,
+  removeValue,
+  hasMatchingOption,
+  commitCreatableText
+} = useComboboxSelect(props, emit, { creatable: props.creatable });
+function clear() {
+  setValue(props.multiple ? [] : void 0);
+}
+const selectedChipValue = ref();
+const dir = useDirection();
+function onTriggerKeydown(event) {
+  if (!props.multiple || props.displayMode !== "chip")
+    return;
+  const chips = visibleOptions.value;
+  if (!chips.length)
+    return;
+  const lastValue = chips.at(-1).value;
+  switch (event.key) {
+    case "Delete":
+    case "Backspace": {
+      if (selectedChipValue.value !== void 0) {
+        const index = chips.findIndex((o) => o.value === selectedChipValue.value);
+        const removedValue = selectedChipValue.value;
+        const remaining = chips.filter((o) => o.value !== removedValue);
+        selectedChipValue.value = remaining[Math.min(index, remaining.length - 1)]?.value;
+        removeValue(removedValue);
+        event.preventDefault();
+      } else if (event.key === "Backspace") {
+        selectedChipValue.value = lastValue;
+        event.preventDefault();
+      }
+      break;
+    }
+    case "Home":
+    case "End":
+    case "ArrowRight":
+    case "ArrowLeft": {
+      const isForwardKey = dir.value === "rtl" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+      const isNext = isForwardKey || event.key === "End";
+      if (event.key === "Home") {
+        selectedChipValue.value = chips[0].value;
+      } else if (event.key === "End") {
+        selectedChipValue.value = lastValue;
+      } else if (!selectedChipValue.value) {
+        if (!isNext)
+          selectedChipValue.value = lastValue;
+      } else {
+        const index = chips.findIndex((o) => o.value === selectedChipValue.value);
+        const nextIndex = index + (isNext ? 1 : -1);
+        selectedChipValue.value = nextIndex >= chips.length ? void 0 : chips[Math.max(0, nextIndex)]?.value;
+      }
+      event.preventDefault();
+      break;
+    }
+    case "ArrowUp":
+    case "ArrowDown": {
+      if (selectedChipValue.value !== void 0)
+        event.preventDefault();
+      break;
+    }
+    default: {
+      selectedChipValue.value = void 0;
+    }
+  }
+}
+const internalSearchText = ref(props.searchTerm ?? "");
+const searchText = computed({
+  get: () => props.searchTerm ?? internalSearchText.value,
+  set: (value) => {
+    internalSearchText.value = value;
+    emit("update:searchTerm", value);
+  }
+});
+function revertUnmatchedText() {
+  if (!props.forceSelection || !searchText.value || hasMatchingOption(searchText.value))
+    return false;
+  searchText.value = "";
+  return true;
+}
+function onSearchKeydown(event) {
+  if (event.key !== "Enter")
+    return;
+  if (revertUnmatchedText())
+    return;
+  if (commitCreatableText(searchText.value))
+    searchText.value = "";
+}
+function onSearchBlur() {
+  if (revertUnmatchedText())
+    return;
+  if (commitCreatableText(searchText.value))
+    searchText.value = "";
+}
+function onDropdownClick() {
+  searchText.value = "";
+}
+function displayValue(value) {
+  if (!props.creatable || props.multiple || !value || Array.isArray(value))
+    return "";
+  return resolveOption(value).label;
+}
+const virtualizeConfig = computed(() => {
+  if (!props.virtualize)
+    return null;
+  const opts = props.virtualize === true ? {} : props.virtualize;
+  return { estimateSize: opts.estimateSize ?? 32, overscan: opts.overscan ?? 8 };
+});
+const virtualizedOptions = computed(() => {
+  if (!props.searchable || !searchText.value)
+    return flatOptions.value;
+  const needle = searchText.value.toLowerCase();
+  return flatOptions.value.filter((option) => option.label.toLowerCase().includes(needle));
+});
+function groupOptions(group) {
+  return group.items.map(toOption);
+}
+const field = useFormField();
+const selectId = computed(() => props.id ?? field?.id);
+const selectInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const describedBy = computed(() => field?.describedBy.value);
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("select", selectTheme);
+const ui = computed(() => theme.value({ size: effectiveSize.value, color: props.color, invalid: selectInvalid.value }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const valueProps = computed(() => resolveSlot(ui.value.value, props.ui?.value));
+const commaValueProps = computed(() => {
+  const override = props.ui?.value;
+  const overrideClass = typeof override === "string" ? override : override?.class;
+  return resolveSlot(ui.value.value, {
+    ...typeof override === "object" && override !== null ? override : {},
+    class: [overrideClass, "flex-initial min-w-0"].filter(Boolean).join(" ")
+  });
+});
+const chipOverflowProps = computed(() => resolveSlot(ui.value.chipOverflow, props.ui?.chipOverflow));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const clearProps = computed(() => resolveSlot(ui.value.clear, props.ui?.clear));
+const dropdownProps = computed(() => resolveSlot(ui.value.dropdown, props.ui?.dropdown));
+const searchWrapperProps = computed(() => resolveSlot(ui.value.searchWrapper, props.ui?.searchWrapper));
+const searchInputProps = computed(() => resolveSlot(ui.value.searchInput, props.ui?.searchInput));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
+const groupProps = computed(() => resolveSlot(ui.value.group, props.ui?.group));
+const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
+const itemIndicatorProps = computed(() => resolveSlot(ui.value.itemIndicator, props.ui?.itemIndicator));
+const emptyProps = computed(() => resolveSlot(ui.value.empty, props.ui?.empty));
+const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
+const internalOpen = ref(false);
+const isMobile = useIsMobile();
+const showMobileModal = computed(() => props.mobileModal && isMobile.value);
+const bodyProps = computed(() => ({
+  searchable: props.searchable,
+  creatable: props.creatable,
+  searchText: searchText.value,
+  displayValue,
+  items: props.items,
+  flatOptions: flatOptions.value,
+  virtualizeConfig: virtualizeConfig.value,
+  virtualizedOptions: virtualizedOptions.value,
+  toOption,
+  groupOptions,
+  onSearchKeydown,
+  onSearchBlur,
+  searchWrapperProps: searchWrapperProps.value,
+  searchInputProps: searchInputProps.value,
+  viewportProps: viewportProps.value,
+  emptyProps: emptyProps.value,
+  groupProps: groupProps.value,
+  itemProps: itemProps.value,
+  itemIndicatorProps: itemIndicatorProps.value
+}));
+</script>
+
+<template>
+  <ComboboxRoot
+    :open="internalOpen"
+    :model-value="modelValue"
+    :multiple="multiple"
+    :disabled="disabled"
+    :name="name ?? field?.name"
+    :ignore-filter="!searchable"
+    :reset-search-term-on-blur="resetSearchTermOnBlur"
+    :reset-search-term-on-select="resetSearchTermOnSelect"
+    v-bind="rootProps"
+    @update:open="internalOpen = $event"
+    @update:model-value="(value) => emit('update:modelValue', value)"
+  >
+    <ComboboxAnchor>
+      <!--
+        Select (creatable=false): a button trigger, opened by clicking anywhere
+        on it - the search input (if any) lives inside the popover instead.
+        Autocomplete (creatable=true): the input itself IS the trigger, so
+        typing is always available without opening anything first.
+      -->
+      <div
+        v-if="creatable"
+        :id="selectId"
+        data-ui-group-item
+        :aria-invalid="selectInvalid || void 0"
+        :aria-describedby="describedBy"
+        :aria-busy="loading || void 0"
+        v-bind="triggerProps"
+      >
+        <!--
+          TagsInputRoot doesn't own selection truth here - it only reads
+          visibleOptions to render chips and provides real per-chip keyboard
+          navigation (ArrowLeft/Right moves a virtual "selected" tag without
+          ever moving real DOM focus off the input; Backspace/Delete removes
+          it) via TagsInputInput's keydown handling. @remove-tag is the only
+          way its state flows back to us - removeValue is what actually
+          mutates the real modelValue.
+        -->
+        <TagsInputRoot
+          v-if="multiple && displayMode === 'chip'"
+          :model-value="visibleOptions.map((o) => o.value)"
+          delimiter=""
+          as-child
+          @remove-tag="removeValue"
+        >
+          <!--
+            as-child projects Chip itself as the tag element - TagsInputItem
+            still owns collection registration/arrow-key nav via whatever
+            it clones its props onto. TagsInputItemDelete keeps its own
+            <button> (safe here - this branch's own wrapper is a <div>,
+            not a button) by filling Chip's #remove slot instead of its
+            remove-icon slot, so Chip never renders a second, nested
+            interactive control for it to conflict with.
+          -->
+          <TagsInputItem
+            v-for="option in visibleOptions"
+            :key="option.value"
+            :value="option.value"
+            as-child
+          >
+            <Chip
+              size="sm"
+              color="primary"
+              variant="soft"
+              removable
+              :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--ui-primary)]' }"
+            >
+              <TagsInputItemText as="span">
+                <slot name="item" :item="option.raw">
+                  {{ option.label }}
+                </slot>
+              </TagsInputItemText>
+              <template #remove="{ class: removeClass }">
+                <TagsInputItemDelete :class="removeClass" :aria-label="messages.removeItem(option.label)">
+                  <Icon :name="icons.close" class="size-3" />
+                </TagsInputItemDelete>
+              </template>
+            </Chip>
+          </TagsInputItem>
+          <ComboboxInput v-model="searchText" as-child>
+            <TagsInputInput
+              :display-value="displayValue"
+              :placeholder="placeholder"
+              v-bind="searchInputProps"
+              @keydown="onSearchKeydown"
+              @blur="onSearchBlur"
+            />
+          </ComboboxInput>
+        </TagsInputRoot>
+        <ComboboxInput
+          v-else
+          v-model="searchText"
+          :display-value="displayValue"
+          :placeholder="placeholder"
+          v-bind="searchInputProps"
+          @keydown="onSearchKeydown"
+          @blur="onSearchBlur"
+        />
+        <Tooltip v-if="overflowOptions.length" :text="overflowOptions.map((o) => o.label).join(', ')">
+          <span v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+        </Tooltip>
+        <!--
+          A plain Button, not ComboboxCancel as-child - this trigger is a
+          <div>, so unlike the non-creatable branch below there's no real
+          HTML-nesting reason to avoid a real <button> here. Dropped anyway
+          to keep both branches' clear button identical; ComboboxCancel's
+          own click-driven modelValue/search reset isn't needed since our
+          own clear() (via setValue) already covers it, and ComboboxInput's
+          display-value re-syncs the visible text once modelValue changes.
+          tabindex="-1" replicates the one bit of its behavior this used.
+        -->
+        <Button
+          v-if="clearable && !disabled && selectedOptions.length"
+          :size="clearSize"
+          variant="text"
+          color="neutral"
+          tabindex="-1"
+          :aria-label="messages.clear"
+          v-bind="clearProps"
+          @click.stop="clear"
+        >
+          <template #icon="{ class: iconClass }">
+            <slot name="clear-icon">
+              <Icon :name="icons.close" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+        <slot v-if="loading" name="loading-icon">
+          <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+        </slot>
+        <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
+        <ComboboxTrigger v-if="dropdown" v-bind="dropdownProps" @click="onDropdownClick">
+          <slot name="dropdown-icon">
+            <Icon :name="icons.chevronDown" class="size-4" />
+          </slot>
+        </ComboboxTrigger>
+      </div>
+
+      <ComboboxTrigger
+        v-else
+        :id="selectId"
+        data-ui-group-item
+        :aria-invalid="selectInvalid || void 0"
+        :aria-describedby="describedBy"
+        :aria-busy="loading || void 0"
+        v-bind="triggerProps"
+        tabindex="0"
+        @keydown="onTriggerKeydown"
+        @blur="selectedChipValue = void 0"
+      >
+        <template v-if="multiple">
+          <!--
+            Both branches wrap their content (chips, or the comma-joined
+            text) together with the +N more tooltip in one flex-1 container -
+            that's what pushes the chevron to the trigger's far right edge,
+            while the tooltip itself stays immediately next to the visible
+            content rather than getting shoved all the way to the end too.
+          -->
+          <div v-if="displayMode === 'chip'" class="flex flex-1 flex-wrap items-center gap-1.5">
+            <Chip
+              v-for="option in visibleOptions"
+              :key="option.value"
+              size="sm"
+              color="primary"
+              variant="soft"
+              removable
+              :data-state="option.value === selectedChipValue ? 'active' : 'inactive'"
+              :aria-current="option.value === selectedChipValue || void 0"
+              :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--ui-primary)]' }"
+            >
+              <slot name="item" :item="option.raw">
+                {{ option.label }}
+              </slot>
+              <!-- role="button", not a real <button> - this trigger already IS a <button> (ComboboxTrigger), see the clear button below for why. -->
+              <template #remove="{ class: removeClass }">
+                <span role="button" tabindex="-1" :class="removeClass" :aria-label="messages.removeItem(option.label)" @click.stop="removeValue(option.value)">
+                  <Icon :name="icons.close" class="size-3" />
+                </span>
+              </template>
+            </Chip>
+            <span v-if="!selectedOptions.length" v-bind="valueProps" data-placeholder="">
+              {{ placeholder }}
+            </span>
+            <Tooltip v-if="overflowOptions.length" :text="overflowOptions.map((o) => o.label).join(', ')">
+              <span v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+            </Tooltip>
+          </div>
+          <div v-else class="flex flex-1 items-center gap-1.5">
+            <span v-bind="commaValueProps" :data-placeholder="!selectedOptions.length || void 0">
+              {{ commaText || placeholder }}
+            </span>
+            <Tooltip v-if="overflowOptions.length" :text="overflowOptions.map((o) => o.label).join(', ')">
+              <span v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+            </Tooltip>
+          </div>
+        </template>
+        <span v-else v-bind="valueProps" :data-placeholder="!selectedOptions.length || void 0">
+          <slot name="value" :selected="selectedOptions[0]">{{ selectedOptions[0]?.label || placeholder }}</slot>
+        </span>
+
+        <!--
+          as="span", not a real <button> - this trigger already IS a
+          <button> (ComboboxTrigger defaults as="button"), and HTML doesn't
+          allow nesting one inside another: the browser's own HTML parser
+          silently closes the outer button as soon as it hits the inner
+          one, which during SSR corrupts the whole trigger - everything
+          from this point on ends up as a sibling *outside* it once
+          hydration parses the server markup. role="button" replaces the
+          semantics a real <button> would have carried; tabindex="-1" was
+          already set here regardless, so nothing about keyboard
+          reachability changes.
+        -->
+        <Button
+          v-if="clearable && !disabled && selectedOptions.length"
+          as="span"
+          role="button"
+          :size="clearSize"
+          variant="text"
+          color="neutral"
+          tabindex="-1"
+          :aria-label="messages.clear"
+          v-bind="clearProps"
+          @click.stop="clear"
+        >
+          <template #icon="{ class: iconClass }">
+            <slot name="clear-icon">
+              <Icon :name="icons.close" :class="iconClass" />
+            </slot>
+          </template>
+        </Button>
+        <template v-if="loading">
+          <slot name="loading-icon">
+            <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+          </slot>
+        </template>
+        <template v-else>
+          <slot name="dropdown-icon">
+            <Icon :name="icons.chevronDown" class="size-4" v-bind="iconProps" />
+          </slot>
+        </template>
+        <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal v-if="!showMobileModal">
+      <ComboboxContent position="popper" :side-offset="4" v-bind="contentProps">
+        <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
+          <template #header>
+            <slot name="header" />
+          </template>
+          <template #filter-icon>
+            <slot name="filter-icon" />
+          </template>
+          <template #empty>
+            <slot name="empty" />
+          </template>
+          <template #empty-filter>
+            <slot name="empty-filter" />
+          </template>
+          <template #item="scope">
+            <slot name="item" v-bind="scope" />
+          </template>
+          <template #group="scope">
+            <slot name="group" v-bind="scope" />
+          </template>
+          <template #footer>
+            <slot name="footer" />
+          </template>
+        </ComboboxSelectBody>
+        <ComboboxArrow v-if="arrow" v-bind="arrowProps" />
+      </ComboboxContent>
+    </ComboboxPortal>
+    <!--
+      Below 768px, presents the exact same ComboboxSelectBody - the same
+      Root-injected filtering/selection/keyboard behavior, unchanged -
+      inside a centered Modal instead of the small anchored popover above.
+      No ComboboxPortal here: Modal's own DialogPortal already teleports
+      #content as a whole, nesting a second teleport inside it would be
+      redundant. ComboboxContent still wraps it (no `position` prop, so
+      Reka renders it as a plain unstyled box rather than applying its own
+      Floating-UI positioning - confirmed by reading ComboboxContentImpl
+      directly) since ComboboxViewport/ComboboxItem's own context still
+      expects a ComboboxContent ancestor. `title`/`description` are
+      passed explicitly here - Modal's own dev-mode a11y warning is
+      satisfied merely by the content slot existing, so it won't catch a
+      name-less dialog on its own; Modal registers both with Reka
+      (visually hidden) even though the content slot replaces its own
+      visible header.
+    -->
+    <!--
+      auto-focus="!creatable" - Select's own trigger is a one-off tap (a
+      button; once the modal opens, the next interaction is tapping an
+      item, or typing into a *different* search box that lives inside the
+      modal itself), so Reka's default open-autofocus is fine, even
+      helpful for a keyboard user. Autocomplete's trigger *is* the search
+      input itself, typed into continuously while the modal stays open -
+      Reka's default there stole focus away on the very first keystroke
+      (confirmed live: opening via typing immediately re-focused the
+      modal's own content, silently dropping every character typed
+      afterward) - the same class of bug DatePicker's own range-mode
+      autofocus interference was, just triggered by every keystroke
+      instead of a single click.
+      :ui content - overrides Modal's own default rounded-lg down to
+      rounded-md, matching every other floating panel in this library
+      (Select/Autocomplete/DatePicker's own desktop popovers all use
+      rounded-md) - rounded-lg reads noticeably heavier/rounder than the
+      desktop equivalent for what's otherwise the same surface.
+    -->
+    <Modal
+      v-else :open="internalOpen" :title="placeholder || messages.search" :description="messages.searchDescription"
+      :auto-focus="!creatable" :ui="{ content: 'rounded-[var(--ui-radius-md)]' }"
+      @update:open="internalOpen = $event"
+    >
+      <template #content>
+        <ComboboxContent v-bind="mobileContentProps">
+          <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
+            <template #header>
+              <slot name="header" />
+            </template>
+            <template #filter-icon>
+              <slot name="filter-icon" />
+            </template>
+            <template #empty>
+              <slot name="empty" />
+            </template>
+            <template #empty-filter>
+              <slot name="empty-filter" />
+            </template>
+            <template #item="scope">
+              <slot name="item" v-bind="scope" />
+            </template>
+            <template #group="scope">
+              <slot name="group" v-bind="scope" />
+            </template>
+            <template #footer>
+              <slot name="footer" />
+            </template>
+          </ComboboxSelectBody>
+        </ComboboxContent>
+      </template>
+    </Modal>
+  </ComboboxRoot>
+</template>