@destyler/combobox 0.0.3 → 0.0.4

package/dist/component.cjs

@@ -4,11 +4,14 @@ const vue = require('vue');
 const primitive = require('@destyler/primitive');
 const composition = require('@destyler/composition');
 const popper = require('@destyler/popper');
+const component$2 = require('@destyler/popper/component');
 const shared = require('@destyler/shared');
 const isEqual = require('fast-deep-equal');
+const component = require('@destyler/visually-hidden/component');
+const composition$1 = require('@destyler/collection/composition');
 const collection = require('@destyler/collection');
-const component = require('@destyler/visually-hidden/dist/component');
 const dismissableLayer = require('@destyler/dismissable-layer');
+const component$1 = require('@destyler/dismissable-layer/component');
 const directives = require('@destyler/directives');
 const presence = require('@destyler/presence');
 const teleport = require('@destyler/teleport');
@@ -17,21 +20,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 const isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
 
-const destylerComboboxAnchorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxAnchorProps = {
+  ...primitive.primitiveProps
 };
-const DestylerComboboxAnchor = vue.defineComponent({
+const ComboboxAnchor = vue.defineComponent({
   name: "DestylerComboboxAnchor",
-  props: destylerComboboxAnchorProps,
+  props: comboboxAnchorProps,
   setup() {
     const { forwardRef } = composition.useForwardExpose();
     return {
@@ -39,10 +33,10 @@ const DestylerComboboxAnchor = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(popper.DestylerPopperAnchor, {
+    return vue.h(popper.PopperAnchor, {
       asChild: true
     }, () => {
-      return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      return vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
         ref: (el) => this.forwardRef(el),
         as: this.$props.as,
         asChild: this.$props.asChild
@@ -53,68 +47,124 @@ const DestylerComboboxAnchor = vue.defineComponent({
   }
 });
 
-const destylerComboboxRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxRootProps = {
+  ...primitive.primitiveProps,
+  /**
+   * The controlled value of the Combobox. Can be binded-with with `v-model`.
+   *
+   * @default undefined
+   */
   modelValue: {
-    type: [String, Number, Boolean, Object],
-    required: false
+    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],
-    required: false
+    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
+    required: false,
+    default: false
   },
+  /**
+   * When `true`, prevents the user from interacting with Combobox.
+   *
+   * @default false
+   */
   disabled: {
     type: Boolean,
-    required: false
+    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] = shared.createContext("DestylerComboboxRoot");
-const DestylerComboboxRoot = vue.defineComponent({
+const ComboboxRoot = vue.defineComponent({
   name: "DestylerComboboxRoot",
-  props: destylerComboboxRootProps,
-  emits: ["update:modelValue", "update:open", "update:searchTerm"],
+  props: comboboxRootProps,
+  emits: comboboxRootEmits,
+  slots: Object,
   setup(props, { emit }) {
     const { multiple, disabled, dir: propDir } = vue.toRefs(props);
     const dir = composition.useDirection(propDir);
@@ -132,11 +182,11 @@ const DestylerComboboxRoot = vue.defineComponent({
       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");
+    const { getItems, reactiveItems, itemMapSize } = composition$1.createCollection("data-destyler-combobox-item");
+    const isUserInputted = vue.ref(false);
     async function onOpenChange(val) {
       open.value = val;
       await vue.nextTick();
@@ -163,20 +213,22 @@ const DestylerComboboxRoot = vue.defineComponent({
         onOpenChange(false);
       }
     }
-    const options = shared.computedWithControl(() => itemMapSize.value, () => {
-      return getItems().map((i) => i.value);
-    });
+    const options = vue.ref([]);
+    vue.watch(() => itemMapSize.value, () => {
+      options.value = getItems().map((i) => i.value);
+    }, { immediate: true });
     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()));
+        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) {
+      if (!multiple.value && modelValue.value && !Array.isArray(modelValue.value)) {
         if (props.displayValue)
           searchTerm.value = props.displayValue(modelValue.value);
         else if (typeof modelValue.value !== "object")
@@ -191,7 +243,9 @@ const DestylerComboboxRoot = vue.defineComponent({
     const selectedElement = vue.computed(() => {
       return reactiveItems.value.find((i) => i.value === selectedValue.value)?.ref;
     });
-    vue.watch(modelValue, async () => {
+    const stringifiedModelValue = vue.computed(() => JSON.stringify(modelValue.value));
+    vue.watch(stringifiedModelValue, async () => {
+      await vue.nextTick();
       await vue.nextTick();
       resetSearchTerm();
     }, { immediate: true });
@@ -216,7 +270,7 @@ const DestylerComboboxRoot = vue.defineComponent({
       open,
       onOpenChange,
       filteredOptions,
-      contentId: composition.useId(),
+      contentId: "",
       inputElement,
       onInputElementChange: (val) => inputElement.value = val,
       onInputNavigation: async (val) => {
@@ -250,9 +304,9 @@ const DestylerComboboxRoot = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(popper.DestylerPopperRoot, {}, {
+    return vue.h(popper.PopperRoot, null, {
       default: () => {
-        return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+        return vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, {
           ref: (el) => this.forwardRef(el),
           style: {
             pointerEvents: this.open ? "auto" : void 0
@@ -264,7 +318,7 @@ const DestylerComboboxRoot = vue.defineComponent({
           default: () => {
             return [
               this.$slots.default?.({ open: this.open, modelValue: this.modelValue }),
-              this.isFormControl && this.$props.name ? vue.h(component.DestylerVisuallyhiddenInput, {
+              this.isFormControl && this.$props.name ? vue.h(component.VisuallyHiddenInput, {
                 name: this.$props.name,
                 value: this.modelValue
               }) : null
@@ -276,111 +330,47 @@ const DestylerComboboxRoot = vue.defineComponent({
   }
 });
 
-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
-  },
+const comboboxContentImplProps = {
+  ...dismissableLayer.dismissableLayerProps,
+  ...popper.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 = {
+  ...component$1.dismissableLayerEmits
+};
 const [injectComboboxContentContext, provideComboboxContentContext] = shared.createContext("DestylerComboboxContent");
-const DestylerComboboxContentImpl = vue.defineComponent({
+const ComboboxContentImpl = vue.defineComponent({
   name: "DestylerComboboxContentImpl",
-  props: destylerComboboxContentImplProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: comboboxContentImplProps,
+  emits: comboboxContentImplEmits,
   setup(props) {
     const { position } = vue.toRefs(props);
     const rootContext = injectComboboxRootContext();
@@ -402,26 +392,27 @@ const DestylerComboboxContentImpl = vue.defineComponent({
     });
     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)"
+      "--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 vue.h(collection.DestylerCollectionSlot, null, {
+    return vue.h(collection.CollectionSlot, null, {
       default: () => {
         return [
-          this.$props.dismissable ? vue.h(dismissableLayer.DestylerDismissableLayer, vue.mergeProps(this.$attrs, this.forwardedProps, {
+          this.$props.dismissable ? vue.h(dismissableLayer.DismissableLayer, {
             asChild: true,
             disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
             onDismiss: () => {
@@ -443,9 +434,9 @@ const DestylerComboboxContentImpl = vue.defineComponent({
                 event.preventDefault();
               this.$emit("pointerDownOutside", event);
             }
-          }), {
+          }, {
             default: () => {
-              return vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.DestylerPopperContent : primitive.DestylerPrimitive, {
+              return vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.PopperContent : primitive.Primitive, vue.mergeProps(this.$attrs, this.forwardedProps, {
                 "ref": (el) => this.forwardRef(el),
                 "role": "listbox",
                 "data-state": this.rootContext.open.value ? "open" : "closed",
@@ -458,13 +449,13 @@ const DestylerComboboxContentImpl = vue.defineComponent({
                 "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, {
+          }) : vue.withDirectives(vue.h(this.$props.position === "popper" ? popper.PopperContent : primitive.Primitive, vue.mergeProps(this.$attrs, this.pickedProps, {
             "ref": (el) => this.forwardRef(el),
             "role": "listbox",
             "data-state": this.rootContext.open.value ? "open" : "closed",
@@ -477,7 +468,7 @@ const DestylerComboboxContentImpl = vue.defineComponent({
             "onPointerleave": () => {
               this.handleLeave();
             }
-          }, {
+          }), {
             default: () => this.$slots.default?.()
           }), [
             [directives.BindOnceDirective, { id: this.rootContext.contentId }]
@@ -488,31 +479,12 @@ const DestylerComboboxContentImpl = vue.defineComponent({
   }
 });
 
-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 comboboxArrowProps = {
+  ...component$2.popperArrowProps
 };
-const DestylerComboboxArrow = vue.defineComponent({
+const ComboboxArrow = vue.defineComponent({
   name: "DestylerComboboxArrow",
-  props: destylerComboboxArrowProps,
+  props: comboboxArrowProps,
   setup() {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -524,25 +496,25 @@ const DestylerComboboxArrow = vue.defineComponent({
   },
   render() {
     if (this.rootContext.open.value && this.contentContext.position.value === "popper")
-      return vue.h(popper.DestylerPopperArrow, this.$props, () => this.$slots.default?.());
+      return vue.h(popper.PopperArrow, this.$props, () => this.$slots.default?.());
+    else
+      return null;
   }
 });
 
-const destylerComboboxCancelProps = {
+const comboboxCancelProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerComboboxCancel = vue.defineComponent({
+const ComboboxCancel = vue.defineComponent({
   name: "DestylerComboboxCancel",
-  props: destylerComboboxCancelProps,
+  props: comboboxCancelProps,
   setup() {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -556,7 +528,7 @@ const DestylerComboboxCancel = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       type: this.$props.as === "button" ? "button" : void 0,
       tabindex: "-1",
       onClick: () => {
@@ -566,21 +538,29 @@ const DestylerComboboxCancel = vue.defineComponent({
   }
 });
 
-const destylerComboboxContentProps = {
-  ...destylerComboboxContentImplProps,
+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 DestylerComboboxContent = vue.defineComponent({
+const comboboxContentEmits = {
+  ...comboboxContentImplEmits
+};
+const ComboboxContent = vue.defineComponent({
   name: "DestylerComboboxContent",
-  props: destylerComboboxContentProps,
-  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  props: comboboxContentProps,
+  emits: comboboxContentEmits,
   setup(props, { emit }) {
     const forwarded = composition.useForwardPropsEmits(props, emit);
     const { forwardRef } = composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
+    rootContext.contentId || (rootContext.contentId = composition.useId(void 0, "destyler-combobox-content"));
     return {
       forwardRef,
       forwarded,
@@ -588,29 +568,20 @@ const DestylerComboboxContent = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(presence.DestylerPresence, {
+    return vue.h(presence.Presence, {
       present: this.$props.forceMount || this.rootContext.open.value
-    }, () => vue.h(DestylerComboboxContentImpl, vue.mergeProps(this.$attrs, this.forwarded, {
+    }, () => vue.h(ComboboxContentImpl, vue.mergeProps(this.$attrs, this.forwarded, {
       ref: (el) => this.forwardRef(el)
     }), () => this.$slots.default?.()));
   }
 });
 
-const destylerComboboxEmptyProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "button"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxEmptyProps = {
+  ...primitive.primitiveProps
 };
-const DestylerComboboxEmpty = vue.defineComponent({
+const ComboboxEmpty = vue.defineComponent({
   name: "DestylerComboboxEmpty",
-  props: destylerComboboxEmptyProps,
+  props: comboboxEmptyProps,
   setup() {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -622,32 +593,23 @@ const DestylerComboboxEmpty = vue.defineComponent({
   },
   render() {
     if (this.isEmpty) {
-      return vue.h(primitive.DestylerPrimitive, this.$props, {
+      return vue.h(primitive.Primitive, 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 comboboxGroupProps = {
+  ...primitive.primitiveProps
 };
 const [injectComboboxGroupContext, provideComboboxGroupContext] = shared.createContext("DestylerComboboxGroup");
-const DestylerComboboxGroup = vue.defineComponent({
+const ComboboxGroup = vue.defineComponent({
   name: "DestylerComboboxGroup",
-  props: destylerComboboxGroupProps,
+  props: comboboxGroupProps,
   setup() {
     const { currentRef, currentElement } = composition.useForwardExpose();
-    const id = composition.useId();
+    const id = composition.useId(void 0, "destyler-combobox-group");
     const rootContext = injectComboboxRootContext();
     const hasOptions = vue.ref(false);
     function checkCollectionItem() {
@@ -658,12 +620,16 @@ const DestylerComboboxGroup = vue.defineComponent({
     }
     composition.useMutationObserver(currentElement, () => {
       checkCollectionItem();
-    }, { childList: true });
+    }, {
+      childList: true
+    });
     vue.watch(() => rootContext.searchTerm.value, () => {
       vue.nextTick(() => {
         checkCollectionItem();
       });
-    }, { immediate: true });
+    }, {
+      immediate: true
+    });
     provideComboboxGroupContext({
       id
     });
@@ -674,7 +640,7 @@ const DestylerComboboxGroup = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       "ref": "currentRef",
       "role": "group",
       "aria-labelledby": this.id,
@@ -685,34 +651,45 @@ const DestylerComboboxGroup = vue.defineComponent({
   }
 });
 
-const destylerComboboxInputProps = {
+const comboboxInputProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default input
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "input"
   },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+  /**
+   * 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 DestylerComboboxInput = vue.defineComponent({
+const ComboboxInput = vue.defineComponent({
   name: "DestylerComboboxInput",
-  props: destylerComboboxInputProps,
+  props: comboboxInputProps,
   setup(props) {
     const rootContext = injectComboboxRootContext();
     const { forwardRef, currentElement } = composition.useForwardExpose();
@@ -754,7 +731,7 @@ const DestylerComboboxInput = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, {
+    return vue.h(primitive.Primitive, {
       "ref": (el) => this.forwardRef(el),
       "as": this.$props.as,
       "asChild": this.$props.asChild,
@@ -794,41 +771,45 @@ const DestylerComboboxInput = vue.defineComponent({
 });
 
 const COMBOBOX_SELECT = "combobox.select";
-const destylerComboboxItemProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxItemProps = {
+  ...primitive.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] = shared.createContext("DestylerComboboxItem");
-const DestylerComboboxItem = vue.defineComponent({
+const ComboboxItem = vue.defineComponent({
   name: "DestylerComboboxItem",
-  props: destylerComboboxItemProps,
-  emits: ["select"],
+  props: comboboxItemProps,
+  emits: comboboxItemEmits,
   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)
+      () => rootContext.multiple.value && Array.isArray(rootContext.modelValue.value) ? rootContext.modelValue.value?.some((val) => isEqual__default(val, 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 textId = composition.useId(void 0, "destyler-combobox-item");
     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);
@@ -868,9 +849,9 @@ const DestylerComboboxItem = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(collection.DestylerCollectionItem, null, {
+    return vue.h(collection.CollectionItem, null, {
       default: () => {
-        return vue.h(primitive.DestylerPrimitive, {
+        return vue.h(primitive.Primitive, {
           "ref": (el) => this.forwardRef(el),
           "role": "option",
           "tabindex": "-1",
@@ -898,21 +879,19 @@ const DestylerComboboxItem = vue.defineComponent({
   }
 });
 
-const destylerComboboxItemIndicatorProps = {
+const comboboxItemIndicatorProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default span
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "span"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
   }
 };
-const DestylerComboboxItemIndicator = vue.defineComponent({
+const ComboboxItemIndicator = vue.defineComponent({
   name: "DestylerComboboxItemIndicator",
-  props: destylerComboboxItemIndicatorProps,
+  props: comboboxItemIndicatorProps,
   setup() {
     composition.useForwardExpose();
     const itemContext = injectComboboxItemContext();
@@ -922,7 +901,7 @@ const DestylerComboboxItemIndicator = vue.defineComponent({
   },
   render() {
     if (this.itemContext.isSelected.value) {
-      return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+      return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
         "aria-hidden": ""
       }), {
         default: () => this.$slots.default?.()
@@ -931,25 +910,19 @@ const DestylerComboboxItemIndicator = vue.defineComponent({
   }
 });
 
-const destylerComboboxLabelProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+const comboboxLabelProps = {
+  ...primitive.primitiveProps,
+  /**
+   * The id of the element the label is associated with.
+   */
   for: {
     type: String,
     required: false
   }
 };
-const DestylerComboboxLabel = vue.defineComponent({
+const ComboboxLabel = vue.defineComponent({
   name: "DestylerComboboxLabel",
-  props: destylerComboboxLabelProps,
+  props: comboboxLabelProps,
   setup() {
     composition.useForwardExpose();
     const groupContext = injectComboboxGroupContext({ id: "" });
@@ -958,7 +931,7 @@ const DestylerComboboxLabel = vue.defineComponent({
     };
   },
   render() {
-    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, this.$props, {
+    return vue.withDirectives(vue.h(primitive.Primitive, this.$props, {
       default: () => this.$slots.default?.()
     }), [
       [directives.BindOnceDirective, { id: this.groupContext.id }]
@@ -966,77 +939,55 @@ const DestylerComboboxLabel = vue.defineComponent({
   }
 });
 
-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 comboboxPortalProps = {
+  ...teleport.teleportPrimitiveProps
 };
-const DestylerComboboxPortal = vue.defineComponent({
+const ComboboxPortal = vue.defineComponent({
   name: "DestylerComboboxPortal",
-  props: destylerComboboxPortalProps,
+  props: comboboxPortalProps,
   render() {
-    return vue.h(teleport.DestylerTeleport, this.$props, {
+    return vue.h(teleport.TeleportPrimitive, this.$props, {
       default: () => this.$slots.default?.()
     });
   }
 });
 
-const destylerComboboxSeparatorProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
+const comboboxSeparatorProps = {
+  ...primitive.primitiveProps
 };
-const DestylerComboboxSeparator = vue.defineComponent({
+const ComboboxSeparator = vue.defineComponent({
   name: "DestylerComboboxSeparator",
-  props: destylerComboboxSeparatorProps,
+  props: comboboxSeparatorProps,
   setup() {
     composition.useForwardExpose();
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       "aria-hidden": ""
-    }));
+    }), () => this.$slots.default?.());
   }
 });
 
-const destylerComboboxTriggerProps = {
+const comboboxTriggerProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
   as: {
-    type: [String, Object],
-    required: false,
+    ...primitive.primitiveProps.as,
     default: "button"
   },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
+  /**
+   * When `true`, prevents the user from interacting with item.
+   */
   disabled: {
     type: Boolean,
     required: false
   }
 };
-const DestylerComboboxTrigger = vue.defineComponent({
+const ComboboxTrigger = vue.defineComponent({
   name: "DestylerComboboxTrigger",
-  props: destylerComboboxTriggerProps,
+  props: comboboxTriggerProps,
   setup(props) {
     composition.useForwardExpose();
     const rootContext = injectComboboxRootContext();
@@ -1047,7 +998,7 @@ const DestylerComboboxTrigger = vue.defineComponent({
     };
   },
   render() {
-    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
       "type": this.$props.as === "button" ? "button" : void 0,
       "tabindex": "-1",
       "aria-label": "Show popup",
@@ -1067,21 +1018,19 @@ const DestylerComboboxTrigger = vue.defineComponent({
   }
 });
 
-const destylerComboboxViewportProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
+const comboboxViewportProps = {
+  ...primitive.primitiveProps,
+  /**
+   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy.
+   */
+  nonce: {
+    type: String,
+    required: false
   }
 };
-const DestylerComboboxViewport = vue.defineComponent({
+const ComboboxViewport = vue.defineComponent({
   name: "DestylerComboboxViewport",
-  props: destylerComboboxViewportProps,
+  props: comboboxViewportProps,
   inheritAttrs: false,
   setup() {
     const { forwardRef } = composition.useForwardExpose();
@@ -1091,7 +1040,7 @@ const DestylerComboboxViewport = vue.defineComponent({
   },
   render() {
     return [
-      vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      vue.h(primitive.Primitive, vue.mergeProps(this.$attrs, this.$props, {
         "ref": (el) => this.forwardRef(el),
         "data-destyler-combobox-viewport": "",
         "role": "presentation",
@@ -1101,8 +1050,9 @@ const DestylerComboboxViewport = vue.defineComponent({
           overflow: "auto"
         }
       }), () => this.$slots.default?.()),
-      vue.h(primitive.DestylerPrimitive, {
-        as: "style"
+      vue.h(primitive.Primitive, {
+        as: "style",
+        nonce: this.$props.nonce
       }, () => `
       /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */
       [data-destyler-combobox-viewport] {
@@ -1118,19 +1068,39 @@ const DestylerComboboxViewport = vue.defineComponent({
   }
 });
 
-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;
+exports.ComboboxAnchor = ComboboxAnchor;
+exports.ComboboxArrow = ComboboxArrow;
+exports.ComboboxCancel = ComboboxCancel;
+exports.ComboboxContent = ComboboxContent;
+exports.ComboboxContentImpl = ComboboxContentImpl;
+exports.ComboboxEmpty = ComboboxEmpty;
+exports.ComboboxGroup = ComboboxGroup;
+exports.ComboboxInput = ComboboxInput;
+exports.ComboboxItem = ComboboxItem;
+exports.ComboboxItemIndicator = ComboboxItemIndicator;
+exports.ComboboxLabel = ComboboxLabel;
+exports.ComboboxPortal = ComboboxPortal;
+exports.ComboboxRoot = ComboboxRoot;
+exports.ComboboxSeparator = ComboboxSeparator;
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxViewport = ComboboxViewport;
+exports.comboboxAnchorProps = comboboxAnchorProps;
+exports.comboboxArrowProps = comboboxArrowProps;
+exports.comboboxCancelProps = comboboxCancelProps;
+exports.comboboxContentEmits = comboboxContentEmits;
+exports.comboboxContentImplEmits = comboboxContentImplEmits;
+exports.comboboxContentImplProps = comboboxContentImplProps;
+exports.comboboxContentProps = comboboxContentProps;
+exports.comboboxEmptyProps = comboboxEmptyProps;
+exports.comboboxGroupProps = comboboxGroupProps;
+exports.comboboxInputProps = comboboxInputProps;
+exports.comboboxItemEmits = comboboxItemEmits;
+exports.comboboxItemIndicatorProps = comboboxItemIndicatorProps;
+exports.comboboxItemProps = comboboxItemProps;
+exports.comboboxLabelProps = comboboxLabelProps;
+exports.comboboxPortalProps = comboboxPortalProps;
+exports.comboboxRootEmits = comboboxRootEmits;
+exports.comboboxRootProps = comboboxRootProps;
+exports.comboboxSeparatorProps = comboboxSeparatorProps;
+exports.comboboxTriggerProps = comboboxTriggerProps;
+exports.comboboxViewportProps = comboboxViewportProps;