@destyler/combobox 0.0.1-beta.20

package/dist/component.mjs

@@ -0,0 +1,1131 @@
+import { defineComponent, h, mergeProps, toRefs, ref, computed, watch, nextTick, onMounted, withDirectives, withKeys } from 'vue';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { useForwardExpose, useDirection, useVModel, useFormControl, useId, useBodyScrollLock, useHideOthers, useForwardProps, useForwardPropsEmits, useMutationObserver } from '@destyler/composition';
+import { DestylerPopperAnchor, DestylerPopperRoot, DestylerPopperContent, DestylerPopperArrow } from '@destyler/popper';
+import { createContext, computedWithControl, handleAndDispatchCustomEvent } from '@destyler/shared';
+import isEqual from 'fast-deep-equal';
+import { createCollection, DestylerCollectionSlot, DestylerCollectionItem } from '@destyler/collection';
+import { DestylerVisuallyhiddenInput } from '@destyler/visually-hidden/dist/component';
+import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
+import { BindOnceDirective } from '@destyler/directives';
+import { DestylerPresence } from '@destyler/presence';
+import { DestylerTeleport } from '@destyler/teleport';
+
+const destylerComboboxAnchorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxAnchor = defineComponent({
+  name: "DestylerComboboxAnchor",
+  props: destylerComboboxAnchorProps,
+  setup() {
+    const { forwardRef } = useForwardExpose();
+    return {
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerPopperAnchor, {
+      asChild: true
+    }, {
+      default: () => {
+        return h(DestylerPrimitive, mergeProps(this.$attrs, {
+          ref: (el) => this.forwardRef(el),
+          as: this.$props.as,
+          asChild: this.$props.asChild
+        }), {
+          default: () => this.$slots.default?.()
+        });
+      }
+    });
+  }
+});
+
+const destylerComboboxRootProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  modelValue: {
+    type: [String, Number, Boolean, Object],
+    required: false
+  },
+  defaultValue: {
+    type: [String, Number, Boolean, Object],
+    required: false
+  },
+  open: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  defaultOpen: {
+    type: Boolean,
+    required: false
+  },
+  searchTerm: {
+    type: String,
+    required: false
+  },
+  multiple: {
+    type: Boolean,
+    required: false
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  },
+  name: {
+    type: String,
+    required: false
+  },
+  dir: {
+    type: String,
+    required: false
+  },
+  filterFunction: {
+    type: Function,
+    required: false
+  },
+  displayValue: {
+    type: Function,
+    required: false
+  }
+};
+const [injectComboboxRootContext, provideComboboxRootContext] = createContext("DestylerComboboxRoot");
+const DestylerComboboxRoot = defineComponent({
+  name: "DestylerComboboxRoot",
+  props: destylerComboboxRootProps,
+  emits: ["update:modelValue", "update:open", "update:searchTerm"],
+  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 isUserInputted = ref(false);
+    const inputElement = ref();
+    const contentElement = ref();
+    const { forwardRef, currentElement: parentElement } = useForwardExpose();
+    const { getItems, reactiveItems, itemMapSize } = createCollection("data-destyler-combobox-item");
+    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 = computedWithControl(() => itemMapSize.value, () => {
+      return getItems().map((i) => i.value);
+    });
+    const filteredOptions = computed(() => {
+      if (isUserInputted.value) {
+        if (props.filterFunction)
+          return props.filterFunction(options.value, searchTerm.value);
+        else if (typeof options.value[0] === "string")
+          return options.value.filter((i) => i.toLowerCase().includes(searchTerm.value?.toLowerCase()));
+      }
+      return options.value;
+    });
+    function resetSearchTerm() {
+      if (!multiple.value && 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;
+    });
+    watch(modelValue, async () => {
+      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: useId(),
+      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(DestylerPopperRoot, {}, {
+      default: () => {
+        return h(DestylerPrimitive, 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(DestylerVisuallyhiddenInput, {
+                name: this.$props.name,
+                value: this.modelValue
+              }) : null
+            ];
+          }
+        });
+      }
+    });
+  }
+});
+
+const destylerComboboxContentImplProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  side: {
+    type: String,
+    required: false,
+    default: "bottom"
+  },
+  sideOffset: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  align: {
+    type: String,
+    required: false,
+    default: "center"
+  },
+  alignOffset: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  avoidCollisions: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  collisionBoundary: {
+    type: [Object, Array, null],
+    required: false,
+    default: () => []
+  },
+  collisionPadding: {
+    type: [Number, Object],
+    required: false,
+    default: 0
+  },
+  arrowPadding: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  sticky: {
+    type: String,
+    required: false,
+    default: "partial"
+  },
+  hideWhenDetached: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  updatePositionStrategy: {
+    type: String,
+    required: false,
+    default: "optimized"
+  },
+  onPlaced: {
+    type: Function,
+    required: false
+  },
+  prioritizePosition: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  disableOutsidePointerEvents: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  isDismissable: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
+  position: {
+    type: String,
+    required: false,
+    default: "inline"
+  },
+  bodyLock: {
+    type: Boolean,
+    required: false
+  },
+  dismissable: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+};
+const [injectComboboxContentContext, provideComboboxContentContext] = createContext("DestylerComboboxContent");
+const DestylerComboboxContentImpl = defineComponent({
+  name: "DestylerComboboxContentImpl",
+  props: destylerComboboxContentImplProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  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,
+      forwardRef,
+      handleLeave
+    };
+  },
+  render() {
+    return h(DestylerCollectionSlot, null, {
+      default: () => {
+        return [
+          this.$props.dismissable ? h(DestylerDismissableLayer, mergeProps(this.$attrs, this.forwardedProps, {
+            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" ? DestylerPopperContent : DestylerPrimitive, {
+                "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" ? DestylerPopperContent : DestylerPrimitive, {
+            "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 destylerComboboxArrowProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  width: {
+    type: Number,
+    required: false,
+    default: 10
+  },
+  height: {
+    type: Number,
+    required: false,
+    default: 5
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "svg"
+  }
+};
+const DestylerComboboxArrow = defineComponent({
+  name: "DestylerComboboxArrow",
+  props: destylerComboboxArrowProps,
+  setup() {
+    useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    const contentContext = injectComboboxContentContext();
+    return {
+      rootContext,
+      contentContext
+    };
+  },
+  render() {
+    if (this.rootContext.open.value && this.contentContext.position.value === "popper") {
+      return h(DestylerPopperArrow, this.$props, {
+        default: () => this.$slots.default?.()
+      });
+    }
+  }
+});
+
+const destylerComboboxCancelProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxCancel = defineComponent({
+  name: "DestylerComboboxCancel",
+  props: destylerComboboxCancelProps,
+  setup() {
+    useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    function handleClick() {
+      rootContext.searchTerm.value = "";
+      rootContext.inputElement.value?.focus();
+    }
+    return {
+      rootContext,
+      handleClick
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, mergeProps(this.$props, {
+      type: this.$props.as === "button" ? "button" : void 0,
+      tabindex: "-1",
+      onClick: () => {
+        this.handleClick();
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerComboboxContentProps = {
+  ...destylerComboboxContentImplProps,
+  forceMount: {
+    type: Boolean,
+    required: false
+  }
+};
+const DestylerComboboxContent = defineComponent({
+  name: "DestylerComboboxContent",
+  props: destylerComboboxContentProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(props, { emit }) {
+    const forwarded = useForwardPropsEmits(props, emit);
+    const { forwardRef } = useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    return {
+      forwardRef,
+      forwarded,
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, {
+      default: () => {
+        return h(DestylerComboboxContentImpl, mergeProps(this.$attrs, this.forwarded, {
+          ref: (el) => this.forwardRef(el)
+        }), {
+          default: () => this.$slots.default?.()
+        });
+      }
+    });
+  }
+});
+
+const destylerComboboxEmptyProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxEmpty = defineComponent({
+  name: "DestylerComboboxEmpty",
+  props: destylerComboboxEmptyProps,
+  setup() {
+    useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    const isEmpty = computed(() => rootContext.filteredOptions.value.length === 0);
+    return {
+      rootContext,
+      isEmpty
+    };
+  },
+  render() {
+    if (this.isEmpty) {
+      return h(DestylerPrimitive, this.$props, {
+        default: () => this.$slots.default ? this.$slots.default?.() : "No options"
+      });
+    }
+  }
+});
+
+const destylerComboboxGroupProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const [injectComboboxGroupContext, provideComboboxGroupContext] = createContext("DestylerComboboxGroup");
+const DestylerComboboxGroup = defineComponent({
+  name: "DestylerComboboxGroup",
+  props: destylerComboboxGroupProps,
+  setup() {
+    const { currentRef, currentElement } = useForwardExpose();
+    const id = useId();
+    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(DestylerPrimitive, mergeProps(this.$props, {
+      "ref": "currentRef",
+      "role": "group",
+      "aria-labelledby": this.id,
+      ...this.hasOptions ? {} : { style: { display: "none" } }
+    }), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerComboboxInputProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "input"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  type: {
+    type: String,
+    required: false,
+    default: "text"
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  },
+  autoFocus: {
+    type: Boolean,
+    required: false
+  }
+};
+const DestylerComboboxInput = defineComponent({
+  name: "DestylerComboboxInput",
+  props: destylerComboboxInputProps,
+  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(DestylerPrimitive, {
+      "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 destylerComboboxItemProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  value: {
+    type: [String, Number, Boolean, Object],
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  }
+};
+const [injectComboboxItemContext, provideComboboxItemContext] = createContext("DestylerComboboxItem");
+const DestylerComboboxItem = defineComponent({
+  name: "DestylerComboboxItem",
+  props: destylerComboboxItemProps,
+  emits: ["select"],
+  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?.includes(props.value) : isEqual(rootContext.modelValue?.value, props.value)
+    );
+    const isFocused = computed(() => isEqual(rootContext.selectedValue.value, props.value));
+    const textId = useId();
+    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(DestylerCollectionItem, null, {
+      default: () => {
+        return h(DestylerPrimitive, {
+          "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 destylerComboboxItemIndicatorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "span"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxItemIndicator = defineComponent({
+  name: "DestylerComboboxItemIndicator",
+  props: destylerComboboxItemIndicatorProps,
+  setup() {
+    useForwardExpose();
+    const itemContext = injectComboboxItemContext();
+    return {
+      itemContext
+    };
+  },
+  render() {
+    if (this.itemContext.isSelected.value) {
+      return h(DestylerPrimitive, mergeProps(this.$props, {
+        "aria-hidden": ""
+      }), {
+        default: () => this.$slots.default?.()
+      });
+    }
+  }
+});
+
+const destylerComboboxLabelProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  for: {
+    type: String,
+    required: false
+  }
+};
+const DestylerComboboxLabel = defineComponent({
+  name: "DestylerComboboxLabel",
+  props: destylerComboboxLabelProps,
+  setup() {
+    useForwardExpose();
+    const groupContext = injectComboboxGroupContext({ id: "" });
+    return {
+      groupContext
+    };
+  },
+  render() {
+    return withDirectives(h(DestylerPrimitive, this.$props, {
+      default: () => this.$slots.default?.()
+    }), [
+      [BindOnceDirective, { id: this.groupContext.id }]
+    ]);
+  }
+});
+
+const destylerComboboxPortalProps = {
+  to: {
+    type: [String, Object],
+    required: false,
+    default: "body"
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  forceMount: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxPortal = defineComponent({
+  name: "DestylerComboboxPortal",
+  props: destylerComboboxPortalProps,
+  render() {
+    return h(DestylerTeleport, this.$props, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerComboboxSeparatorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxSeparator = defineComponent({
+  name: "DestylerComboboxSeparator",
+  props: destylerComboboxSeparatorProps,
+  setup() {
+    useForwardExpose();
+  },
+  render() {
+    return h(DestylerPrimitive, mergeProps(this.$props, {
+      "aria-hidden": ""
+    }));
+  }
+});
+
+const destylerComboboxTriggerProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    required: false
+  }
+};
+const DestylerComboboxTrigger = defineComponent({
+  name: "DestylerComboboxTrigger",
+  props: destylerComboboxTriggerProps,
+  setup(props) {
+    useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    const disabled = computed(() => props.disabled || rootContext.disabled.value || false);
+    return {
+      rootContext,
+      disabled
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, 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 destylerComboboxViewportProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxViewport = defineComponent({
+  name: "DestylerComboboxViewport",
+  props: destylerComboboxViewportProps,
+  setup() {
+    const { forwardRef } = useForwardExpose();
+    return {
+      forwardRef
+    };
+  },
+  render() {
+    return [
+      h(DestylerPrimitive, {
+        "ref": (el) => this.forwardRef(el),
+        "data-destyler-combobox-viewport": "",
+        "role": "presentation",
+        "style": {
+          position: "relative",
+          flex: 1,
+          overflow: "auto"
+        }
+      }, {
+        default: () => this.$slots.default?.()
+      }),
+      h(DestylerPrimitive, {
+        as: "style"
+      }, {
+        default: () => `
+        /* 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 { DestylerComboboxAnchor, DestylerComboboxArrow, DestylerComboboxCancel, DestylerComboboxContent, DestylerComboboxContentImpl, DestylerComboboxEmpty, DestylerComboboxGroup, DestylerComboboxInput, DestylerComboboxItem, DestylerComboboxItemIndicator, DestylerComboboxLabel, DestylerComboboxPortal, DestylerComboboxRoot, DestylerComboboxSeparator, DestylerComboboxTrigger, DestylerComboboxViewport };