@destyler/combobox 0.0.1-beta.20

package/dist/component.cjs

@@ -0,0 +1,1152 @@
+'use strict';
+
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const popper = require('@destyler/popper');
+const shared = require('@destyler/shared');
+const isEqual = require('fast-deep-equal');
+const collection = require('@destyler/collection');
+const component = require('@destyler/visually-hidden/dist/component');
+const dismissableLayer = require('@destyler/dismissable-layer');
+const directives = require('@destyler/directives');
+const presence = require('@destyler/presence');
+const teleport = require('@destyler/teleport');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
+
+const destylerComboboxAnchorProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerComboboxAnchor = vue.defineComponent({
+  name: "DestylerComboboxAnchor",
+  props: destylerComboboxAnchorProps,
+  setup() {
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(popper.DestylerPopperAnchor, {
+      asChild: true
+    }, {
+      default: () => {
+        return vue.h(primitive.DestylerPrimitive, vue.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] = shared.createContext("DestylerComboboxRoot");
+const DestylerComboboxRoot = vue.defineComponent({
+  name: "DestylerComboboxRoot",
+  props: destylerComboboxRootProps,
+  emits: ["update:modelValue", "update:open", "update:searchTerm"],
+  setup(props, { emit }) {
+    const { multiple, disabled, dir: propDir } = vue.toRefs(props);
+    const dir = composition.useDirection(propDir);
+    const searchTerm = composition.useVModel(props, "searchTerm", emit, {
+      defaultValue: "",
+      passive: props.searchTerm === void 0
+    });
+    const modelValue = composition.useVModel(props, "modelValue", emit, {
+      defaultValue: props.defaultValue ?? multiple.value ? [] : void 0,
+      passive: props.modelValue === void 0,
+      deep: true
+    });
+    const open = composition.useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const selectedValue = vue.ref();
+    const isUserInputted = vue.ref(false);
+    const inputElement = vue.ref();
+    const contentElement = vue.ref();
+    const { forwardRef, currentElement: parentElement } = composition.useForwardExpose();
+    const { getItems, reactiveItems, itemMapSize } = collection.createCollection("data-destyler-combobox-item");
+    async function onOpenChange(val) {
+      open.value = val;
+      await vue.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__default(i, val));
+        index === -1 ? modelValue.value.push(val) : modelValue.value.splice(index, 1);
+      } else {
+        modelValue.value = val;
+        onOpenChange(false);
+      }
+    }
+    const options = shared.computedWithControl(() => itemMapSize.value, () => {
+      return getItems().map((i) => i.value);
+    });
+    const filteredOptions = vue.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 = vue.computed(() => filteredOptions.value.findIndex((i) => isEqual__default(i, selectedValue.value)));
+    const selectedElement = vue.computed(() => {
+      return reactiveItems.value.find((i) => i.value === selectedValue.value)?.ref;
+    });
+    vue.watch(modelValue, async () => {
+      await vue.nextTick();
+      resetSearchTerm();
+    }, { immediate: true });
+    vue.watch(() => filteredOptions.value.length, async (length) => {
+      await vue.nextTick();
+      await vue.nextTick();
+      if (length && activeIndex.value === -1)
+        selectedValue.value = filteredOptions.value[0];
+    });
+    const isFormControl = composition.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: composition.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 vue.h(popper.DestylerPopperRoot, {}, {
+      default: () => {
+        return vue.h(primitive.DestylerPrimitive, vue.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 ? vue.h(component.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] = shared.createContext("DestylerComboboxContent");
+const DestylerComboboxContentImpl = vue.defineComponent({
+  name: "DestylerComboboxContentImpl",
+  props: destylerComboboxContentImplProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(props) {
+    const { position } = vue.toRefs(props);
+    const rootContext = injectComboboxRootContext();
+    composition.useBodyScrollLock(props.bodyLock);
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    composition.useHideOthers(currentElement);
+    const pickedProps = vue.computed(() => {
+      if (props.position === "popper")
+        return props;
+      else
+        return {};
+    });
+    const forwardedProps = composition.useForwardProps(pickedProps.value);
+    function handleLeave() {
+      rootContext.onSelectedValueChange("");
+    }
+    vue.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 vue.h(collection.DestylerCollectionSlot, null, {
+      default: () => {
+        return [
+          this.$props.dismissable ? vue.h(dismissableLayer.DestylerDismissableLayer, vue.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 vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.DestylerPopperContent : primitive.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?.()
+              }), [
+                [directives.BindOnceDirective, { id: this.rootContext.contentId }]
+              ]);
+            }
+          }) : vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.DestylerPopperContent : primitive.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?.()
+          }), [
+            [directives.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 = vue.defineComponent({
+  name: "DestylerComboboxArrow",
+  props: destylerComboboxArrowProps,
+  setup() {
+    composition.useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    const contentContext = injectComboboxContentContext();
+    return {
+      rootContext,
+      contentContext
+    };
+  },
+  render() {
+    if (this.rootContext.open.value && this.contentContext.position.value === "popper") {
+      return vue.h(popper.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 = vue.defineComponent({
+  name: "DestylerComboboxCancel",
+  props: destylerComboboxCancelProps,
+  setup() {
+    composition.useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    function handleClick() {
+      rootContext.searchTerm.value = "";
+      rootContext.inputElement.value?.focus();
+    }
+    return {
+      rootContext,
+      handleClick
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.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 = vue.defineComponent({
+  name: "DestylerComboboxContent",
+  props: destylerComboboxContentProps,
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(props, { emit }) {
+    const forwarded = composition.useForwardPropsEmits(props, emit);
+    const { forwardRef } = composition.useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    return {
+      forwardRef,
+      forwarded,
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(presence.DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, {
+      default: () => {
+        return vue.h(DestylerComboboxContentImpl, vue.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 = vue.defineComponent({
+  name: "DestylerComboboxEmpty",
+  props: destylerComboboxEmptyProps,
+  setup() {
+    composition.useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    const isEmpty = vue.computed(() => rootContext.filteredOptions.value.length === 0);
+    return {
+      rootContext,
+      isEmpty
+    };
+  },
+  render() {
+    if (this.isEmpty) {
+      return vue.h(primitive.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] = shared.createContext("DestylerComboboxGroup");
+const DestylerComboboxGroup = vue.defineComponent({
+  name: "DestylerComboboxGroup",
+  props: destylerComboboxGroupProps,
+  setup() {
+    const { currentRef, currentElement } = composition.useForwardExpose();
+    const id = composition.useId();
+    const rootContext = injectComboboxRootContext();
+    const hasOptions = vue.ref(false);
+    function checkCollectionItem() {
+      if (!currentElement.value)
+        return;
+      const collectionItem = currentElement.value.querySelectorAll("[data-destyler-combobox-item]:not([data-hidden])");
+      hasOptions.value = !!collectionItem.length;
+    }
+    composition.useMutationObserver(currentElement, () => {
+      checkCollectionItem();
+    }, { childList: true });
+    vue.watch(() => rootContext.searchTerm.value, () => {
+      vue.nextTick(() => {
+        checkCollectionItem();
+      });
+    }, { immediate: true });
+    provideComboboxGroupContext({
+      id
+    });
+    return {
+      currentRef,
+      hasOptions,
+      id
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.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 = vue.defineComponent({
+  name: "DestylerComboboxInput",
+  props: destylerComboboxInputProps,
+  setup(props) {
+    const rootContext = injectComboboxRootContext();
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    vue.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 = vue.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 vue.h(primitive.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": vue.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] = shared.createContext("DestylerComboboxItem");
+const DestylerComboboxItem = vue.defineComponent({
+  name: "DestylerComboboxItem",
+  props: destylerComboboxItemProps,
+  emits: ["select"],
+  setup(props, { emit }) {
+    const { disabled } = vue.toRefs(props);
+    const rootContext = injectComboboxRootContext();
+    injectComboboxGroupContext({ id: "", options: vue.ref([]) });
+    const { forwardRef } = composition.useForwardExpose();
+    const isSelected = vue.computed(
+      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.includes(props.value) : isEqual__default(rootContext.modelValue?.value, props.value)
+    );
+    const isFocused = vue.computed(() => isEqual__default(rootContext.selectedValue.value, props.value));
+    const textId = composition.useId();
+    const isInOption = vue.computed(() => rootContext.isUserInputted.value ? rootContext.searchTerm.value === "" || !!rootContext.filteredOptions.value.find((i) => isEqual__default(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 };
+      shared.handleAndDispatchCustomEvent(COMBOBOX_SELECT, handleSelect, eventDetail);
+    }
+    async function handlePointerMove(event) {
+      await vue.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 vue.h(collection.DestylerCollectionItem, null, {
+      default: () => {
+        return vue.h(primitive.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 = vue.defineComponent({
+  name: "DestylerComboboxItemIndicator",
+  props: destylerComboboxItemIndicatorProps,
+  setup() {
+    composition.useForwardExpose();
+    const itemContext = injectComboboxItemContext();
+    return {
+      itemContext
+    };
+  },
+  render() {
+    if (this.itemContext.isSelected.value) {
+      return vue.h(primitive.DestylerPrimitive, vue.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 = vue.defineComponent({
+  name: "DestylerComboboxLabel",
+  props: destylerComboboxLabelProps,
+  setup() {
+    composition.useForwardExpose();
+    const groupContext = injectComboboxGroupContext({ id: "" });
+    return {
+      groupContext
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, this.$props, {
+      default: () => this.$slots.default?.()
+    }), [
+      [directives.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 = vue.defineComponent({
+  name: "DestylerComboboxPortal",
+  props: destylerComboboxPortalProps,
+  render() {
+    return vue.h(teleport.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 = vue.defineComponent({
+  name: "DestylerComboboxSeparator",
+  props: destylerComboboxSeparatorProps,
+  setup() {
+    composition.useForwardExpose();
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.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 = vue.defineComponent({
+  name: "DestylerComboboxTrigger",
+  props: destylerComboboxTriggerProps,
+  setup(props) {
+    composition.useForwardExpose();
+    const rootContext = injectComboboxRootContext();
+    const disabled = vue.computed(() => props.disabled || rootContext.disabled.value || false);
+    return {
+      rootContext,
+      disabled
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.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 = vue.defineComponent({
+  name: "DestylerComboboxViewport",
+  props: destylerComboboxViewportProps,
+  setup() {
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      forwardRef
+    };
+  },
+  render() {
+    return [
+      vue.h(primitive.DestylerPrimitive, {
+        "ref": (el) => this.forwardRef(el),
+        "data-destyler-combobox-viewport": "",
+        "role": "presentation",
+        "style": {
+          position: "relative",
+          flex: 1,
+          overflow: "auto"
+        }
+      }, {
+        default: () => this.$slots.default?.()
+      }),
+      vue.h(primitive.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;
+        }
+        `
+      })
+    ];
+  }
+});
+
+exports.DestylerComboboxAnchor = DestylerComboboxAnchor;
+exports.DestylerComboboxArrow = DestylerComboboxArrow;
+exports.DestylerComboboxCancel = DestylerComboboxCancel;
+exports.DestylerComboboxContent = DestylerComboboxContent;
+exports.DestylerComboboxContentImpl = DestylerComboboxContentImpl;
+exports.DestylerComboboxEmpty = DestylerComboboxEmpty;
+exports.DestylerComboboxGroup = DestylerComboboxGroup;
+exports.DestylerComboboxInput = DestylerComboboxInput;
+exports.DestylerComboboxItem = DestylerComboboxItem;
+exports.DestylerComboboxItemIndicator = DestylerComboboxItemIndicator;
+exports.DestylerComboboxLabel = DestylerComboboxLabel;
+exports.DestylerComboboxPortal = DestylerComboboxPortal;
+exports.DestylerComboboxRoot = DestylerComboboxRoot;
+exports.DestylerComboboxSeparator = DestylerComboboxSeparator;
+exports.DestylerComboboxTrigger = DestylerComboboxTrigger;
+exports.DestylerComboboxViewport = DestylerComboboxViewport;