@volverjs/ui-vue 0.0.10-beta.24 → 0.0.10-beta.26

package/dist/components/VvDropdownItem/VvDropdownItem.es.js

@@ -1,18 +1,337 @@
 import { inject, provide, ref, defineComponent, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["before"] = "before";
+  Position2["after"] = "after";
+  return Position2;
+})(Position || {});
+var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
+  ButtonType2["button"] = "button";
+  ButtonType2["submit"] = "submit";
+  ButtonType2["reset"] = "reset";
+  return ButtonType2;
+})(ButtonType || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["button"] = "button";
   ActionRoles2["link"] = "link";
   ActionRoles2["menuitem"] = "menuitem";
   return ActionRoles2;
 })(ActionRoles || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
 const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
   "dropdownItem"
 );
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: String,
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: {
+    type: Boolean,
+    default: false
+  }
+};
+const CurrentProps = {
+  /**
+   * Whether the item is current
+   */
+  current: {
+    type: Boolean,
+    default: false
+  }
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: {
+    type: Boolean,
+    default: false
+  }
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
+};
+({
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
+  /**
+   * VvIcon position
+   */
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+});
+const IdProps = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+const DropdownProps = {
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean,
+    default: false
+  }
+};
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...CurrentProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
+({
+  ...IdProps,
+  ...DropdownProps,
+  ...ModifiersProps,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
+  }
+});
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
 function useInjectedDropdownItem() {
   return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
@@ -29,7 +348,9 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
+  props: VvDropdownItemProps,
   setup(__props) {
+    const props = __props;
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
     useProvideDropdownAction({ expanded });
@@ -37,7 +358,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
     watch(hovered, (newValue) => {
-      if (newValue) {
+      if (newValue && props.focusOnHover) {
         focused.value = true;
       }
     });

package/dist/components/VvDropdownItem/VvDropdownItem.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,(function(e,o,n){"use strict";var t=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(t||{});const u=Symbol.for("dropdownItem"),r=Symbol.for("dropdownAction");return e.defineComponent({name:"VvDropdownItem",setup(o){const{role:d,expanded:i}=e.inject(u,{}),l=e.ref(null);!function({expanded:o}){e.provide(r,{role:e.ref(t.menuitem),expanded:o})}({expanded:i});const f=n.useElementHover(l),{focused:s}=n.useFocus(l),{focused:c}=n.useFocusWithin(l);return e.watch(f,(e=>{e&&(s.value=!0)})),(o,n)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(d)},{ref_key:"element",ref:l,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(c)}]}),[e.renderSlot(o.$slots,"default")],16))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,(function(e,o,t){"use strict";var n=(e=>(e.local="local",e.session="session",e))(n||{}),r=(e=>(e.absolute="absolute",e.fixed="fixed",e))(r||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),u=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(u||{}),i=(e=>(e.before="before",e.after="after",e))(i||{}),s=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(s||{}),a=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(a||{}),d=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(d||{}),f=(e=>(e.listbox="listbox",e.menu="menu",e))(f||{});const m=Symbol.for("dropdownItem"),b=Symbol.for("dropdownAction");Boolean,Boolean,Boolean,Boolean;i.before;l.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;s.button,a.button,n.local,Boolean,f.menu;const c={focusOnHover:{type:Boolean,default:!1}};return e.defineComponent({name:"VvDropdownItem",props:c,setup(o){const n=o,{role:r,expanded:l}=e.inject(m,{}),u=e.ref(null);!function({expanded:o}){e.provide(b,{role:e.ref(d.menuitem),expanded:o})}({expanded:l});const i=t.useElementHover(u),{focused:s}=t.useFocus(u),{focused:a}=t.useFocusWithin(u);return e.watch(i,(e=>{e&&n.focusOnHover&&(s.value=!0)})),(o,t)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(r)},{ref_key:"element",ref:u,class:["vv-dropdown__item",{"focus-visible":e.unref(s)||e.unref(a)}]}),[e.renderSlot(o.$slots,"default")],16))}})}));

package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js

@@ -1,4 +1,9 @@
 import { defineComponent, openBlock, createElementBlock, toDisplayString } from "vue";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -40,13 +45,6 @@ var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
   ActionTag2["button"] = "button";
   return ActionTag2;
 })(ActionTag || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -62,11 +60,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -262,6 +256,14 @@ const LabelProps = {
     default: ActionTag.button
   }
 });
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 const _hoisted_1 = {
   class: "vv-dropdown-optgroup",
   role: "presentation",

package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js

@@ -1 +1 @@
-!function(o,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):(o="undefined"!=typeof globalThis?globalThis:o||self).VvDropdownOptgroup=e(o.vue)}(this,(function(o){"use strict";var e=(o=>(o.left="left",o.right="right",o.top="top",o.bottom="bottom",o))(e||{}),t=(o=>(o.before="before",o.after="after",o))(t||{}),n=(o=>(o.button="button",o.submit="submit",o.reset="reset",o))(n||{}),r=(o=>(o.nuxtLink="nuxt-link",o.routerLink="router-link",o.a="a",o.button="button",o))(r||{});Boolean,Boolean,Boolean,Boolean;const l={label:{type:[String,Number],default:void 0}};t.before,e.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,n.button,r.button;const u={class:"vv-dropdown-optgroup",role:"presentation",tabindex:"-1"};return o.defineComponent({name:"VvDropdownOptgroup",props:{...l},setup(e){const t=e;return(e,n)=>(o.openBlock(),o.createElementBlock("li",u,o.toDisplayString(t.label),1))}})}));
+!function(o,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):(o="undefined"!=typeof globalThis?globalThis:o||self).VvDropdownOptgroup=e(o.vue)}(this,(function(o){"use strict";var e=(o=>(o.local="local",o.session="session",o))(e||{}),t=(o=>(o.left="left",o.right="right",o.top="top",o.bottom="bottom",o))(t||{}),n=(o=>(o.before="before",o.after="after",o))(n||{}),l=(o=>(o.button="button",o.submit="submit",o.reset="reset",o))(l||{}),r=(o=>(o.nuxtLink="nuxt-link",o.routerLink="router-link",o.a="a",o.button="button",o))(r||{});Boolean,Boolean,Boolean,Boolean;const a={label:{type:[String,Number],default:void 0}};n.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,l.button,r.button,e.local;const u={class:"vv-dropdown-optgroup",role:"presentation",tabindex:"-1"};return o.defineComponent({name:"VvDropdownOptgroup",props:{...a},setup(e){const t=e;return(e,n)=>(o.openBlock(),o.createElementBlock("li",u,o.toDisplayString(t.label),1))}})}));

package/dist/components/VvDropdownOption/VvDropdownOption.es.js

@@ -1,6 +1,11 @@
 import { inject, provide, ref, defineComponent, watch, openBlock, createElementBlock, mergeProps, unref, renderSlot, computed, toRefs, createBlock, normalizeClass, withCtx, createElementVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from "vue";
 import "mitt";
 import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -48,64 +53,17 @@ var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["menuitem"] = "menuitem";
   return ActionRoles2;
 })(ActionRoles || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
+  DropdownRole2["listbox"] = "listbox";
+  DropdownRole2["menu"] = "menu";
+  return DropdownRole2;
+})(DropdownRole || {});
 const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
   "dropdownItem"
 );
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
-function useInjectedDropdownItem() {
-  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
-}
-function useProvideDropdownAction({
-  expanded
-}) {
-  provide(INJECTION_KEY_DROPDOWN_ACTION, {
-    role: ref(ActionRoles.menuitem),
-    expanded
-  });
-}
-const __default__$1 = {
-  name: "VvDropdownItem"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  setup(__props) {
-    const { role, expanded } = useInjectedDropdownItem();
-    const element = ref(null);
-    useProvideDropdownAction({ expanded });
-    const hovered = useElementHover(element);
-    const { focused } = useFocus(element);
-    const { focused: focusedWithin } = useFocusWithin(element);
-    watch(hovered, (newValue) => {
-      if (newValue) {
-        focused.value = true;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        mergeProps({ role: unref(role) }, {
-          ref_key: "element",
-          ref: element,
-          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
-        }),
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        16
-        /* FULL_PROPS */
-      );
-    };
-  }
-});
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -121,11 +79,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    default: void 0,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -221,7 +175,14 @@ const UnselectableProps = {
    */
   unselectable: { type: Boolean, default: true }
 };
-({
+const IdProps = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+const DropdownProps = {
   /**
    * Dropdown placement
    */
@@ -314,7 +275,7 @@ const UnselectableProps = {
     type: Boolean,
     default: false
   }
-});
+};
 ({
   ...DisabledProps,
   ...LabelProps,
@@ -345,6 +306,113 @@ const UnselectableProps = {
     default: ActionTag.button
   }
 });
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
+({
+  ...IdProps,
+  ...DropdownProps,
+  ...ModifiersProps,
+  /**
+   * Show / hide dropdown programmatically
+   */
+  modelValue: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * Dropdown trigger element
+   */
+  reference: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Dropdown role
+   */
+  role: {
+    type: String,
+    default: DropdownRole.menu,
+    validator: (value) => Object.values(DropdownRole).includes(value)
+  }
+});
+const VvDropdownItemProps = {
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
+const VvDropdownOptionProps = {
+  ...DisabledProps,
+  ...SelectedProps,
+  ...UnselectableProps,
+  ...ModifiersProps,
+  deselectHintLabel: {
+    type: String
+  },
+  selectHintLabel: {
+    type: String
+  },
+  selectedHintLabel: {
+    type: String
+  },
+  focusOnHover: {
+    type: Boolean,
+    default: false
+  }
+};
+function useInjectedDropdownItem() {
+  return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
+}
+function useProvideDropdownAction({
+  expanded
+}) {
+  provide(INJECTION_KEY_DROPDOWN_ACTION, {
+    role: ref(ActionRoles.menuitem),
+    expanded
+  });
+}
+const __default__$1 = {
+  name: "VvDropdownItem"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvDropdownItemProps,
+  setup(__props) {
+    const props = __props;
+    const { role, expanded } = useInjectedDropdownItem();
+    const element = ref(null);
+    useProvideDropdownAction({ expanded });
+    const hovered = useElementHover(element);
+    const { focused } = useFocus(element);
+    const { focused: focusedWithin } = useFocusWithin(element);
+    watch(hovered, (newValue) => {
+      if (newValue && props.focusOnHover) {
+        focused.value = true;
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        mergeProps({ role: unref(role) }, {
+          ref_key: "element",
+          ref: element,
+          class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
+        }),
+        [
+          renderSlot(_ctx.$slots, "default")
+        ],
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
 function useModifiers(prefix, modifiers, others) {
   return computed(() => {
     const toReturn = {
@@ -374,21 +442,7 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: {
-    ...DisabledProps,
-    ...SelectedProps,
-    ...UnselectableProps,
-    ...ModifiersProps,
-    deselectHintLabel: {
-      type: String
-    },
-    selectHintLabel: {
-      type: String
-    },
-    selectedHintLabel: {
-      type: String
-    }
-  },
+  props: VvDropdownOptionProps,
   setup(__props) {
     const props = __props;
     const { modifiers } = toRefs(props);
@@ -414,7 +468,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
-        "aria-disabled": _ctx.disabled
+        "aria-disabled": _ctx.disabled,
+        "focus-on-hover": _ctx.focusOnHover
       }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default"),
@@ -433,7 +488,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
+      }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
     };
   }
 });