@destyler/combobox 0.0.6 → 0.0.7-beta.1

package/dist/component.mjs

@@ -1,1064 +0,0 @@
-import { defineComponent, h, mergeProps, toRefs, ref, watch, computed, nextTick, onMounted, withDirectives, withKeys } from 'vue';
-import { primitiveProps, Primitive } from '@destyler/primitive';
-import { useForwardExpose, useDirection, useVModel, useFormControl, useBodyScrollLock, useHideOthers, useForwardProps, useForwardPropsEmits, useId, useMutationObserver } from '@destyler/composition';
-import { PopperAnchor, PopperRoot, popperContentProps, PopperContent, PopperArrow } from '@destyler/popper';
-import { popperArrowProps } from '@destyler/popper/component';
-import { createContext, isEqual, handleAndDispatchCustomEvent } from '@destyler/shared';
-import { VisuallyHiddenInput } from '@destyler/visually-hidden/component';
-import { createCollection } from '@destyler/collection/composition';
-import { CollectionSlot, CollectionItem } from '@destyler/collection';
-import { dismissableLayerProps, DismissableLayer } from '@destyler/dismissable-layer';
-import { dismissableLayerEmits } from '@destyler/dismissable-layer/component';
-import { BindOnceDirective } from '@destyler/directives';
-import { Presence } from '@destyler/presence';
-import { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
-
-const comboboxAnchorProps = {
-  ...primitiveProps
-};
-const ComboboxAnchor = defineComponent({
-  name: "DestylerComboboxAnchor",
-  props: comboboxAnchorProps,
-  setup() {
-    const { forwardRef } = useForwardExpose();
-    return {
-      forwardRef
-    };
-  },
-  render() {
-    return h(PopperAnchor, {
-      asChild: true
-    }, () => {
-      return h(Primitive, mergeProps(this.$attrs, {
-        ref: (el) => this.forwardRef(el),
-        as: this.$props.as,
-        asChild: this.$props.asChild
-      }), {
-        default: () => this.$slots.default?.()
-      });
-    });
-  }
-});
-
-const comboboxRootProps = {
-  ...primitiveProps,
-  /**
-   * The controlled value of the Combobox. Can be binded-with with `v-model`.
-   *
-   * @default undefined
-   */
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    required: false,
-    default: void 0
-  },
-  /**
-   * The value of the combobox when initially rendered.
-   * Use when you do not need to control the state of the Combobox
-   *
-   * @default undefined
-   */
-  defaultValue: {
-    type: [String, Number, Boolean, Object, Array],
-    required: false,
-    default: void 0
-  },
-  /**
-   * The controlled open state of the Combobox. Can be binded-with with `v-model:open`.
-   *
-   * @default undefined
-   */
-  open: {
-    type: Boolean,
-    required: false,
-    default: void 0
-  },
-  /**
-   * The open state of the combobox when it is initially rendered.
-   * Use when you do not need to control its open state.
-   */
-  defaultOpen: {
-    type: Boolean,
-    required: false
-  },
-  /**
-   * The controlled search term of the Combobox.
-   * Can be binded-with with `v-model:searchTerm`.
-   */
-  searchTerm: {
-    type: String,
-    required: false
-  },
-  /**
-   * Whether multiple options can be selected or not.
-   *
-   * @default false
-   */
-  multiple: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * When `true`, prevents the user from interacting with Combobox.
-   *
-   * @default false
-   */
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  /**
-   * The name of the Combobox. Submitted with its owning form as part of a name/value pair.
-   */
-  name: {
-    type: String,
-    required: false
-  },
-  /**
-   * The reading direction of the combobox when applicable.
-   */
-  dir: {
-    type: String,
-    required: false
-  },
-  /**
-   * The custom filter function for filtering `ComboboxItem`.
-   */
-  filterFunction: {
-    type: Function,
-    required: false
-  },
-  /**
-   * The display value of input for selected item. Does not work with `multiple`.
-   */
-  displayValue: {
-    type: Function,
-    required: false
-  }
-};
-const comboboxRootEmits = {
-  /**
-   * Event handler called when the value changes.
-   */
-  "update:modelValue": (_value) => true,
-  /**
-   * Event handler called when the open state of the combobox changes.
-   */
-  "update:open": (_value) => true,
-  /**
-   * Event handler called when the searchTerm of the combobox changes.
-   */
-  "update:searchTerm": (_value) => true
-};
-const [injectComboboxRootContext, provideComboboxRootContext] = createContext("DestylerComboboxRoot");
-const ComboboxRoot = defineComponent({
-  name: "DestylerComboboxRoot",
-  props: comboboxRootProps,
-  emits: comboboxRootEmits,
-  slots: Object,
-  setup(props, { emit }) {
-    const { multiple, disabled, dir: propDir } = toRefs(props);
-    const dir = useDirection(propDir);
-    const searchTerm = useVModel(props, "searchTerm", emit, {
-      defaultValue: "",
-      passive: props.searchTerm === void 0
-    });
-    const modelValue = useVModel(props, "modelValue", emit, {
-      defaultValue: props.defaultValue ?? multiple.value ? [] : void 0,
-      passive: props.modelValue === void 0,
-      deep: true
-    });
-    const open = useVModel(props, "open", emit, {
-      defaultValue: props.defaultOpen,
-      passive: props.open === void 0
-    });
-    const selectedValue = ref();
-    const inputElement = ref();
-    const contentElement = ref();
-    const { forwardRef, currentElement: parentElement } = useForwardExpose();
-    const { getItems, reactiveItems, itemMapSize } = createCollection("data-destyler-combobox-item");
-    const isUserInputted = ref(false);
-    async function onOpenChange(val) {
-      open.value = val;
-      await nextTick();
-      if (val) {
-        if (modelValue.value) {
-          if (Array.isArray(modelValue.value) && multiple.value)
-            selectedValue.value = getItems().find((i) => i.ref?.dataset?.state === "checked")?.value;
-          else
-            selectedValue.value = modelValue.value;
-        }
-        inputElement.value?.focus();
-        scrollSelectedValueIntoView();
-      } else {
-        isUserInputted.value = false;
-        resetSearchTerm();
-      }
-    }
-    function onValueChange(val) {
-      if (Array.isArray(modelValue.value) && multiple.value) {
-        const index = modelValue.value.findIndex((i) => isEqual(i, val));
-        index === -1 ? modelValue.value.push(val) : modelValue.value.splice(index, 1);
-      } else {
-        modelValue.value = val;
-        onOpenChange(false);
-      }
-    }
-    const options = ref([]);
-    watch(() => itemMapSize.value, () => {
-      options.value = getItems().map((i) => i.value);
-    }, { immediate: true });
-    const filteredOptions = computed(() => {
-      if (isUserInputted.value) {
-        if (props.filterFunction)
-          return props.filterFunction(options.value, searchTerm.value);
-        const optionsWithTypeString = options.value.filter((i) => typeof i === "string");
-        if (optionsWithTypeString.length)
-          return optionsWithTypeString.filter((i) => i.toLowerCase().includes(searchTerm.value?.toLowerCase()));
-      }
-      return options.value;
-    });
-    function resetSearchTerm() {
-      if (!multiple.value && modelValue.value && !Array.isArray(modelValue.value)) {
-        if (props.displayValue)
-          searchTerm.value = props.displayValue(modelValue.value);
-        else if (typeof modelValue.value !== "object")
-          searchTerm.value = modelValue.value.toString();
-        else
-          searchTerm.value = "";
-      } else {
-        searchTerm.value = "";
-      }
-    }
-    const activeIndex = computed(() => filteredOptions.value.findIndex((i) => isEqual(i, selectedValue.value)));
-    const selectedElement = computed(() => {
-      return reactiveItems.value.find((i) => i.value === selectedValue.value)?.ref;
-    });
-    const stringifiedModelValue = computed(() => JSON.stringify(modelValue.value));
-    watch(stringifiedModelValue, async () => {
-      await nextTick();
-      await nextTick();
-      resetSearchTerm();
-    }, { immediate: true });
-    watch(() => filteredOptions.value.length, async (length) => {
-      await nextTick();
-      await nextTick();
-      if (length && activeIndex.value === -1)
-        selectedValue.value = filteredOptions.value[0];
-    });
-    const isFormControl = useFormControl(parentElement);
-    function scrollSelectedValueIntoView() {
-      if (selectedElement.value instanceof Element)
-        selectedElement.value.scrollIntoView({ block: "nearest" });
-    }
-    provideComboboxRootContext({
-      searchTerm,
-      modelValue,
-      onValueChange,
-      isUserInputted,
-      multiple,
-      disabled,
-      open,
-      onOpenChange,
-      filteredOptions,
-      contentId: "",
-      inputElement,
-      onInputElementChange: (val) => inputElement.value = val,
-      onInputNavigation: async (val) => {
-        const index = activeIndex.value;
-        if (index === 0 && val === "up" || index === filteredOptions.value.length - 1 && val === "down")
-          return;
-        if (index === -1 && filteredOptions.value.length || val === "home")
-          selectedValue.value = filteredOptions.value[0];
-        else if (val === "end")
-          selectedValue.value = filteredOptions.value[filteredOptions.value.length - 1];
-        else
-          selectedValue.value = filteredOptions.value[val === "up" ? index - 1 : index + 1];
-        scrollSelectedValueIntoView();
-      },
-      onInputEnter: async () => {
-        if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element)
-          selectedElement.value?.click();
-      },
-      selectedValue,
-      onSelectedValueChange: (val) => selectedValue.value = val,
-      parentElement,
-      contentElement,
-      onContentElementChange: (val) => contentElement.value = val
-    });
-    return {
-      forwardRef,
-      isFormControl,
-      open,
-      modelValue,
-      dir
-    };
-  },
-  render() {
-    return h(PopperRoot, null, {
-      default: () => {
-        return h(Primitive, mergeProps(this.$attrs, {
-          ref: (el) => this.forwardRef(el),
-          style: {
-            pointerEvents: this.open ? "auto" : void 0
-          },
-          as: this.$props.as,
-          asChild: this.$props.asChild,
-          dir: this.dir
-        }), {
-          default: () => {
-            return [
-              this.$slots.default?.({ open: this.open, modelValue: this.modelValue }),
-              this.isFormControl && this.$props.name ? h(VisuallyHiddenInput, {
-                name: this.$props.name,
-                value: this.modelValue
-              }) : null
-            ];
-          }
-        });
-      }
-    });
-  }
-});
-
-const comboboxContentImplProps = {
-  ...dismissableLayerProps,
-  ...popperContentProps,
-  /**
-   * The positioning mode to use, <br>
-   * `inline` is the default and you can control the position using CSS. <br>
-   * `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
-   *
-   * @default inline
-   */
-  position: {
-    type: String,
-    required: false,
-    default: "inline"
-  },
-  /**
-   * The document.body will be lock, and scrolling will be disabled.
-   */
-  bodyLock: {
-    type: Boolean,
-    required: false
-  },
-  /**
-   * Allow component to be dismissableLayer.
-   *
-   * @default true
-   */
-  dismissable: {
-    type: Boolean,
-    required: false,
-    default: true
-  }
-};
-const comboboxContentImplEmits = {
-  ...dismissableLayerEmits
-};
-const [injectComboboxContentContext, provideComboboxContentContext] = createContext("DestylerComboboxContent");
-const ComboboxContentImpl = defineComponent({
-  name: "DestylerComboboxContentImpl",
-  props: comboboxContentImplProps,
-  emits: comboboxContentImplEmits,
-  setup(props) {
-    const { position } = toRefs(props);
-    const rootContext = injectComboboxRootContext();
-    useBodyScrollLock(props.bodyLock);
-    const { forwardRef, currentElement } = useForwardExpose();
-    useHideOthers(currentElement);
-    const pickedProps = computed(() => {
-      if (props.position === "popper")
-        return props;
-      else
-        return {};
-    });
-    const forwardedProps = useForwardProps(pickedProps.value);
-    function handleLeave() {
-      rootContext.onSelectedValueChange("");
-    }
-    onMounted(() => {
-      rootContext.onContentElementChange(currentElement.value);
-    });
-    const popperStyle = {
-      "boxSizing": "border-box",
-      "--destyler-combobox-content-transform-origin": "var(--destyler-popper-transform-origin)",
-      "--destyler-combobox-content-available-width": "var(--destyler-popper-available-width)",
-      "--destyler-combobox-content-available-height": "var(--destyler-popper-available-height)",
-      "--destyler-combobox-trigger-width": "var(--destyler-popper-anchor-width)",
-      "--destyler-combobox-trigger-height": "var(--destyler-popper-anchor-height)"
-    };
-    provideComboboxContentContext({ position });
-    return {
-      rootContext,
-      popperStyle,
-      forwardedProps,
-      pickedProps,
-      forwardRef,
-      handleLeave
-    };
-  },
-  render() {
-    return h(CollectionSlot, null, {
-      default: () => {
-        return [
-          this.$props.dismissable ? h(DismissableLayer, {
-            asChild: true,
-            disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
-            onDismiss: () => {
-              this.rootContext.onOpenChange(false);
-            },
-            onFocusOutside: (event) => {
-              if (this.rootContext.parentElement.value?.contains(event.target))
-                event.preventDefault();
-              this.$emit("focusOutside", event);
-            },
-            onInteractOutside: (event) => {
-              this.$emit("interactOutside", event);
-            },
-            onEscapeKeyDown: (event) => {
-              this.$emit("escapeKeyDown", event);
-            },
-            onPointerDownOutside: (event) => {
-              if (this.rootContext.parentElement.value?.contains(event.target))
-                event.preventDefault();
-              this.$emit("pointerDownOutside", event);
-            }
-          }, {
-            default: () => {
-              return withDirectives(h(this.$props.position === "popper" ? PopperContent : Primitive, mergeProps(this.$attrs, this.forwardedProps, {
-                "ref": (el) => this.forwardRef(el),
-                "role": "listbox",
-                "data-state": this.rootContext.open.value ? "open" : "closed",
-                "style": {
-                  display: "flex",
-                  flexDirection: "column",
-                  outline: "none",
-                  ...this.$props.position === "popper" ? this.popperStyle : {}
-                },
-                "onPointerleave": () => {
-                  this.handleLeave();
-                }
-              }), {
-                default: () => this.$slots.default?.()
-              }), [
-                [BindOnceDirective, { id: this.rootContext.contentId }]
-              ]);
-            }
-          }) : withDirectives(h(this.$props.position === "popper" ? PopperContent : Primitive, mergeProps(this.$attrs, this.pickedProps, {
-            "ref": (el) => this.forwardRef(el),
-            "role": "listbox",
-            "data-state": this.rootContext.open.value ? "open" : "closed",
-            "style": {
-              display: "flex",
-              flexDirection: "column",
-              outline: "none",
-              ...this.$props.position === "popper" ? this.popperStyle : {}
-            },
-            "onPointerleave": () => {
-              this.handleLeave();
-            }
-          }), {
-            default: () => this.$slots.default?.()
-          }), [
-            [BindOnceDirective, { id: this.rootContext.contentId }]
-          ])
-        ];
-      }
-    });
-  }
-});
-
-const comboboxArrowProps = {
-  ...popperArrowProps
-};
-const ComboboxArrow = defineComponent({
-  name: "DestylerComboboxArrow",
-  props: comboboxArrowProps,
-  setup() {
-    useForwardExpose();
-    const rootContext = injectComboboxRootContext();
-    const contentContext = injectComboboxContentContext();
-    return {
-      rootContext,
-      contentContext
-    };
-  },
-  render() {
-    if (this.rootContext.open.value && this.contentContext.position.value === "popper")
-      return h(PopperArrow, this.$props, () => this.$slots.default?.());
-    else
-      return null;
-  }
-});
-
-const comboboxCancelProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  }
-};
-const ComboboxCancel = defineComponent({
-  name: "DestylerComboboxCancel",
-  props: comboboxCancelProps,
-  setup() {
-    useForwardExpose();
-    const rootContext = injectComboboxRootContext();
-    function handleClick() {
-      rootContext.searchTerm.value = "";
-      rootContext.inputElement.value?.focus();
-    }
-    return {
-      rootContext,
-      handleClick
-    };
-  },
-  render() {
-    return h(Primitive, mergeProps(this.$props, {
-      type: this.$props.as === "button" ? "button" : void 0,
-      tabindex: "-1",
-      onClick: () => {
-        this.handleClick();
-      }
-    }), () => this.$slots.default?.());
-  }
-});
-
-const comboboxContentProps = {
-  ...comboboxContentImplProps,
-  /**
-   * Used to force mounting when more control is needed.
-   * Useful when controlling animation with Vue animation libraries.
-   */
-  forceMount: {
-    type: Boolean,
-    required: false
-  }
-};
-const comboboxContentEmits = {
-  ...comboboxContentImplEmits
-};
-const ComboboxContent = defineComponent({
-  name: "DestylerComboboxContent",
-  props: comboboxContentProps,
-  emits: comboboxContentEmits,
-  setup(props, { emit }) {
-    const forwarded = useForwardPropsEmits(props, emit);
-    const { forwardRef } = useForwardExpose();
-    const rootContext = injectComboboxRootContext();
-    rootContext.contentId || (rootContext.contentId = useId(void 0, "destyler-combobox-content"));
-    return {
-      forwardRef,
-      forwarded,
-      rootContext
-    };
-  },
-  render() {
-    return h(Presence, {
-      present: this.$props.forceMount || this.rootContext.open.value
-    }, () => h(ComboboxContentImpl, mergeProps(this.$attrs, this.forwarded, {
-      ref: (el) => this.forwardRef(el)
-    }), () => this.$slots.default?.()));
-  }
-});
-
-const comboboxEmptyProps = {
-  ...primitiveProps
-};
-const ComboboxEmpty = defineComponent({
-  name: "DestylerComboboxEmpty",
-  props: comboboxEmptyProps,
-  setup() {
-    useForwardExpose();
-    const rootContext = injectComboboxRootContext();
-    const isEmpty = computed(() => rootContext.filteredOptions.value.length === 0);
-    return {
-      rootContext,
-      isEmpty
-    };
-  },
-  render() {
-    if (this.isEmpty) {
-      return h(Primitive, this.$props, {
-        default: () => this.$slots.default ? this.$slots.default?.() : "No options"
-      });
-    }
-  }
-});
-
-const comboboxGroupProps = {
-  ...primitiveProps
-};
-const [injectComboboxGroupContext, provideComboboxGroupContext] = createContext("DestylerComboboxGroup");
-const ComboboxGroup = defineComponent({
-  name: "DestylerComboboxGroup",
-  props: comboboxGroupProps,
-  setup() {
-    const { currentRef, currentElement } = useForwardExpose();
-    const id = useId(void 0, "destyler-combobox-group");
-    const rootContext = injectComboboxRootContext();
-    const hasOptions = ref(false);
-    function checkCollectionItem() {
-      if (!currentElement.value)
-        return;
-      const collectionItem = currentElement.value.querySelectorAll("[data-destyler-combobox-item]:not([data-hidden])");
-      hasOptions.value = !!collectionItem.length;
-    }
-    useMutationObserver(currentElement, () => {
-      checkCollectionItem();
-    }, {
-      childList: true
-    });
-    watch(() => rootContext.searchTerm.value, () => {
-      nextTick(() => {
-        checkCollectionItem();
-      });
-    }, {
-      immediate: true
-    });
-    provideComboboxGroupContext({
-      id
-    });
-    return {
-      currentRef,
-      hasOptions,
-      id
-    };
-  },
-  render() {
-    return h(Primitive, mergeProps(this.$props, {
-      "ref": "currentRef",
-      "role": "group",
-      "aria-labelledby": this.id,
-      ...this.hasOptions ? {} : { style: { display: "none" } }
-    }), {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const comboboxInputProps = {
-  ...primitiveProps,
-  /**
-   * @default input
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "input"
-  },
-  /**
-   * Native input type
-   *
-   * @default text
-   */
-  type: {
-    type: String,
-    required: false,
-    default: "text"
-  },
-  /**
-   * When `true`, prevents the user from interacting with item
-   */
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  /**
-   * Focus on element when mounted.
-   *
-   * @default false
-   */
-  autoFocus: {
-    type: Boolean,
-    required: false
-  }
-};
-const ComboboxInput = defineComponent({
-  name: "DestylerComboboxInput",
-  props: comboboxInputProps,
-  setup(props) {
-    const rootContext = injectComboboxRootContext();
-    const { forwardRef, currentElement } = useForwardExpose();
-    onMounted(() => {
-      const inputEl = currentElement.value.nodeName === "INPUT" ? currentElement.value : currentElement.value.querySelector("input");
-      if (!inputEl)
-        return;
-      rootContext.onInputElementChange(inputEl);
-      setTimeout(() => {
-        if (props.autoFocus)
-          inputEl?.focus();
-      }, 1);
-    });
-    const disabled = computed(() => props.disabled || rootContext.disabled.value || false);
-    function handleKeyDown(ev) {
-      if (!rootContext.open.value)
-        rootContext.onOpenChange(true);
-      else
-        rootContext.onInputNavigation(ev.key === "ArrowUp" ? "up" : "down");
-    }
-    function handleHomeEnd(ev) {
-      if (!rootContext.open.value)
-        return;
-      rootContext.onInputNavigation(ev.key === "Home" ? "home" : "end");
-    }
-    function handleInput(event) {
-      rootContext.searchTerm.value = event.target?.value;
-      if (!rootContext.open.value)
-        rootContext.onOpenChange(true);
-      rootContext.isUserInputted.value = true;
-    }
-    return {
-      disabled,
-      rootContext,
-      forwardRef,
-      handleInput,
-      handleKeyDown,
-      handleHomeEnd
-    };
-  },
-  render() {
-    return h(Primitive, {
-      "ref": (el) => this.forwardRef(el),
-      "as": this.$props.as,
-      "asChild": this.$props.asChild,
-      "type": this.$props.type,
-      "disabled": this.disabled,
-      "value": this.rootContext.searchTerm.value,
-      "aria-expanded": this.rootContext.open.value,
-      "aria-controls": this.rootContext.contentId,
-      "aria-disabled": this.disabled ?? void 0,
-      "aria-autocomplete": "list",
-      "role": "combobox",
-      "autocomplete": "false",
-      "onInput": (event) => {
-        this.handleInput(event);
-      },
-      "onKeydown": withKeys((event) => {
-        switch (event.key) {
-          case "ArrowUp":
-          case "ArrowDown":
-            event.preventDefault();
-            this.handleKeyDown(event);
-            break;
-          case "Home":
-          case "End":
-            event.preventDefault();
-            this.handleHomeEnd(event);
-            break;
-          case "Enter":
-            this.rootContext.onInputEnter();
-            break;
-        }
-      }, ["down", "up", "enter", "home", "end"])
-    }, {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const COMBOBOX_SELECT = "combobox.select";
-const comboboxItemProps = {
-  ...primitiveProps,
-  /**
-   * The value given as data when submitted with a `name`.
-   */
-  value: {
-    type: [String, Number, Boolean, Object],
-    required: true
-  },
-  /**
-   * When true, prevents the user from interacting with the `item`.
-   */
-  disabled: {
-    type: Boolean,
-    required: false
-  }
-};
-const comboboxItemEmits = {
-  /**
-   * Event handler called when the selecting item. <br>
-   * It can be prevented by calling `event.preventDefault`.
-   */
-  select: (_ev) => true
-};
-const [injectComboboxItemContext, provideComboboxItemContext] = createContext("DestylerComboboxItem");
-const ComboboxItem = defineComponent({
-  name: "DestylerComboboxItem",
-  props: comboboxItemProps,
-  emits: comboboxItemEmits,
-  setup(props, { emit }) {
-    const { disabled } = toRefs(props);
-    const rootContext = injectComboboxRootContext();
-    injectComboboxGroupContext({ id: "", options: ref([]) });
-    const { forwardRef } = useForwardExpose();
-    const isSelected = computed(
-      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.some((val) => isEqual(val, props.value)) : isEqual(rootContext.modelValue?.value, props.value)
-    );
-    const isFocused = computed(() => isEqual(rootContext.selectedValue.value, props.value));
-    const textId = useId(void 0, "destyler-combobox-item");
-    const isInOption = computed(() => rootContext.isUserInputted.value ? rootContext.searchTerm.value === "" || !!rootContext.filteredOptions.value.find((i) => isEqual(i, props.value)) : true);
-    async function handleSelect(ev) {
-      emit("select", ev);
-      if (ev?.defaultPrevented)
-        return;
-      if (!disabled.value && ev)
-        rootContext.onValueChange(props.value);
-    }
-    function handleSelectCustomEvent(ev) {
-      if (!ev)
-        return;
-      const eventDetail = { originalEvent: ev, value: props.value };
-      handleAndDispatchCustomEvent(COMBOBOX_SELECT, handleSelect, eventDetail);
-    }
-    async function handlePointerMove(event) {
-      await nextTick();
-      if (event.defaultPrevented)
-        return;
-      rootContext.onSelectedValueChange(props.value);
-    }
-    if (props.value === "") {
-      throw new Error(
-        "A <DestylerSelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
-      );
-    }
-    provideComboboxItemContext({
-      isSelected
-    });
-    return {
-      forwardRef,
-      textId,
-      isFocused,
-      isSelected,
-      isInOption,
-      handleSelectCustomEvent,
-      handlePointerMove
-    };
-  },
-  render() {
-    return h(CollectionItem, null, {
-      default: () => {
-        return h(Primitive, {
-          "ref": (el) => this.forwardRef(el),
-          "role": "option",
-          "tabindex": "-1",
-          "aria-labelledby": this.textId,
-          "data-highlighted": this.isFocused ? "" : void 0,
-          "aria-selected": this.isSelected,
-          "data-state": this.isSelected ? "checked" : "unchecked",
-          "aria-disabled": this.$props.disabled || void 0,
-          "data-disabled": this.$props.disabled ? "" : void 0,
-          "as": this.$props.as,
-          "asChild": this.$props.asChild,
-          "data-hidden": !this.isInOption ? true : void 0,
-          "onClick": (event) => {
-            this.handleSelectCustomEvent(event);
-          },
-          "onPointermove": (event) => {
-            this.handlePointerMove(event);
-          },
-          ...this.isInOption ? {} : { style: { display: "none" } }
-        }, {
-          default: () => this.$slots.default ? this.$slots.default?.() : this.$props.value
-        });
-      }
-    });
-  }
-});
-
-const comboboxItemIndicatorProps = {
-  ...primitiveProps,
-  /**
-   * @default span
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "span"
-  }
-};
-const ComboboxItemIndicator = defineComponent({
-  name: "DestylerComboboxItemIndicator",
-  props: comboboxItemIndicatorProps,
-  setup() {
-    useForwardExpose();
-    const itemContext = injectComboboxItemContext();
-    return {
-      itemContext
-    };
-  },
-  render() {
-    if (this.itemContext.isSelected.value) {
-      return h(Primitive, mergeProps(this.$props, {
-        "aria-hidden": ""
-      }), {
-        default: () => this.$slots.default?.()
-      });
-    }
-  }
-});
-
-const comboboxLabelProps = {
-  ...primitiveProps,
-  /**
-   * The id of the element the label is associated with.
-   */
-  for: {
-    type: String,
-    required: false
-  }
-};
-const ComboboxLabel = defineComponent({
-  name: "DestylerComboboxLabel",
-  props: comboboxLabelProps,
-  setup() {
-    useForwardExpose();
-    const groupContext = injectComboboxGroupContext({ id: "" });
-    return {
-      groupContext
-    };
-  },
-  render() {
-    return withDirectives(h(Primitive, this.$props, {
-      default: () => this.$slots.default?.()
-    }), [
-      [BindOnceDirective, { id: this.groupContext.id }]
-    ]);
-  }
-});
-
-const comboboxPortalProps = {
-  ...teleportPrimitiveProps
-};
-const ComboboxPortal = defineComponent({
-  name: "DestylerComboboxPortal",
-  props: comboboxPortalProps,
-  render() {
-    return h(TeleportPrimitive, this.$props, {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const comboboxSeparatorProps = {
-  ...primitiveProps
-};
-const ComboboxSeparator = defineComponent({
-  name: "DestylerComboboxSeparator",
-  props: comboboxSeparatorProps,
-  setup() {
-    useForwardExpose();
-  },
-  render() {
-    return h(Primitive, mergeProps(this.$props, {
-      "aria-hidden": ""
-    }), () => this.$slots.default?.());
-  }
-});
-
-const comboboxTriggerProps = {
-  ...primitiveProps,
-  /**
-   * @default button
-   */
-  as: {
-    ...primitiveProps.as,
-    default: "button"
-  },
-  /**
-   * When `true`, prevents the user from interacting with item.
-   */
-  disabled: {
-    type: Boolean,
-    required: false
-  }
-};
-const ComboboxTrigger = defineComponent({
-  name: "DestylerComboboxTrigger",
-  props: comboboxTriggerProps,
-  setup(props) {
-    useForwardExpose();
-    const rootContext = injectComboboxRootContext();
-    const disabled = computed(() => props.disabled || rootContext.disabled.value || false);
-    return {
-      rootContext,
-      disabled
-    };
-  },
-  render() {
-    return h(Primitive, mergeProps(this.$props, {
-      "type": this.$props.as === "button" ? "button" : void 0,
-      "tabindex": "-1",
-      "aria-label": "Show popup",
-      "aria-haspopup": "listbox",
-      "aria-expanded": this.rootContext.open.value,
-      "aria-controls": this.rootContext.contentId,
-      "data-state": this.rootContext.open.value ? "open" : "closed",
-      "disabled": this.disabled,
-      "data-disabled": this.disabled ? "" : void 0,
-      "aria-disabled": this.disabled ?? void 0,
-      "onClick": () => {
-        this.rootContext.onOpenChange(!this.rootContext.open.value);
-      }
-    }), {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const comboboxViewportProps = {
-  ...primitiveProps,
-  /**
-   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy.
-   */
-  nonce: {
-    type: String,
-    required: false
-  }
-};
-const ComboboxViewport = defineComponent({
-  name: "DestylerComboboxViewport",
-  props: comboboxViewportProps,
-  inheritAttrs: false,
-  setup() {
-    const { forwardRef } = useForwardExpose();
-    return {
-      forwardRef
-    };
-  },
-  render() {
-    return [
-      h(Primitive, mergeProps(this.$attrs, this.$props, {
-        "ref": (el) => this.forwardRef(el),
-        "data-destyler-combobox-viewport": "",
-        "role": "presentation",
-        "style": {
-          position: "relative",
-          flex: 1,
-          overflow: "auto"
-        }
-      }), () => this.$slots.default?.()),
-      h(Primitive, {
-        as: "style",
-        nonce: this.$props.nonce
-      }, () => `
-      /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
-      [data-destyler-combobox-viewport] {
-        scrollbar-width:none;
-        -ms-overflow-style: none;
-        -webkit-overflow-scrolling: touch;
-      }
-      [data-destyler-combobox-viewport]::-webkit-scrollbar {
-        display: none;
-      }
-      `)
-    ];
-  }
-});
-
-export { ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxContentImpl, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, comboboxAnchorProps, comboboxArrowProps, comboboxCancelProps, comboboxContentEmits, comboboxContentImplEmits, comboboxContentImplProps, comboboxContentProps, comboboxEmptyProps, comboboxGroupProps, comboboxInputProps, comboboxItemEmits, comboboxItemIndicatorProps, comboboxItemProps, comboboxLabelProps, comboboxPortalProps, comboboxRootEmits, comboboxRootProps, comboboxSeparatorProps, comboboxTriggerProps, comboboxViewportProps };