@volverjs/ui-vue 0.0.10-beta.9 → 0.0.11

package/dist/components/VvSelect/VvSelect.es.js

@@ -1,278 +1,336 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, isRef, h, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withDirectives, Fragment, renderList, vModelSelect, createVNode, createSlots, withCtx } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
+import { computed, isRef, defineComponent, h, inject, unref, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, watch, useId, useSlots, createElementBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, renderSlot, normalizeProps, guardReactiveProps, withDirectives, Fragment, renderList, vModelSelect, createSlots, withCtx } from "vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
 import { useFocus, useElementVisibility } from "@vueuse/core";
-import { get } from "ts-dot-prop";
-const VvIconProps = {
+import { getProperty } from "dot-prop";
+const ACTION_ICONS = {
+  clear: "close"
+};
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+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 || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const ValidProps = {
   /**
-   * Color
+   * Valid status
    */
-  color: String,
+  valid: { type: Boolean, default: false },
   /**
-   * Width
+   * Valid label
    */
-  width: {
-    type: [String, Number]
+  validLabel: { type: [String, Array], default: void 0 }
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
+  invalid: {
+    type: Boolean,
+    default: false
   },
   /**
-   * Height
+   * Invalid label
+   */
+  invalidLabel: { type: [String, Array], default: void 0 }
+};
+const LoadingProps = {
+  /**
+   * Loading status
    */
-  height: {
-    type: [String, Number]
+  loading: {
+    type: Boolean,
+    default: false
   },
   /**
-   * Icon name
-   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   * Loading label
    */
-  name: {
+  loadingLabel: {
     type: String,
-    required: true
+    default: "Loading..."
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+const ClearProps = {
+  /**
+   * If true, the clear button will be shown
+   */
+  showClearAction: {
+    type: Boolean,
+    default: false
   },
   /**
-   * By default 'vv'
-   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   * VvIcon name for clear button
+   * @see VvIcon
    */
-  provider: {
-    type: String
+  iconClear: {
+    type: [String, Object],
+    default: ACTION_ICONS.clear
   },
   /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
+   * Label for clear button
    */
-  prefix: {
+  labelClear: {
     type: String,
-    default: "normal"
+    default: "Clear"
+  }
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
+};
+const ReadonlyProps = {
+  /**
+   * The value is not editable
+   */
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
+};
+const HintProps = {
+  hintLabel: { type: String, default: "" }
+};
+const OptionsProps = {
+  /**
+   * List of options, can be string[] or object[]
+   */
+  options: {
+    type: Array,
+    default: () => []
   },
   /**
-   * Url remote SVG icon
+   * Used when options are objects: key to use for option label
    */
-  src: String,
+  labelKey: { type: [String, Function], default: "label" },
   /**
-   * Horizontal flip
+   * Used when options are objects: key to use for option label
    */
-  horizontalFlip: Boolean,
+  valueKey: { type: [String, Function], default: "value" },
   /**
-   * Vertical flip
+   * Used when options are objects: key to use for option disabled
    */
-  verticalFlip: Boolean,
+  disabledKey: { type: [String, Function], default: "disabled" }
+};
+const IconProps = {
   /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   * VvIcon name or props
+   * @see VvIcon
    */
-  flip: String,
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
-   * Icon render mode
-   * 'style' = 'bg' or 'mask', depending on icon content
-   * 'bg' = span with style using `background`
-   * 'mask' = span with style using `mask`
-   * 'svg' = svg
-   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   * VvIcon position
    */
-  mode: String,
+  iconPosition: {
+    type: String,
+    default: Position.before,
+    validation: (value) => Object.values(Position).includes(value)
+  }
+};
+const TabindexProps = {
   /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
-  inline: Boolean,
+  tabindex: { type: [String, Number], default: 0 }
+};
+const FloatingLabelProps = {
   /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   * If true the label will be floating
    */
-  rotate: [Number, String],
+  floating: {
+    type: Boolean,
+    default: false
+  }
+};
+const UnselectableProps = {
   /**
-   * A callback that is called when icon data has been loaded
+   * If true the input will be unselectable
    */
-  onLoad: Function,
+  unselectable: { type: Boolean, default: true }
+};
+const IdProps = {
   /**
-   * SVG icon string
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
-  svg: String,
+  id: [String, Number]
+};
+({
   /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
+   * Dropdown placement
    */
-  modifiers: {
-    type: [String, Array]
+  placement: {
+    default: Side.bottom
   }
+});
+const IdNameProps = {
+  ...IdProps,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
+  name: { type: String, required: true }
 };
-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 AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
-const INJECTION_KEY_VOLVER = Symbol.for("volver");
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
-}
-function useModifiers(prefix, modifiers, others) {
-  return computed(() => {
-    const toReturn = {
-      [prefix]: true
-    };
-    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
-    if (modifiersArray) {
-      if (Array.isArray(modifiersArray)) {
-        modifiersArray.forEach((modifier) => {
-          if (modifier) {
-            toReturn[`${prefix}--${modifier}`] = true;
-          }
-        });
-      }
-    }
-    if (others) {
-      Object.keys(others.value).forEach((key) => {
-        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
-      });
-    }
-    return toReturn;
-  });
-}
-const __default__$1 = {
-  name: "VvIcon"
+const AutofocusProps = {
+  /**
+   * Global attribute autofocus
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  props: VvIconProps,
-  setup(__props) {
-    const props = __props;
-    const hasRotate = computed(() => {
-      if (typeof props.rotate === "string") {
-        return parseFloat(props.rotate);
-      }
-      return props.rotate;
-    });
-    const show = ref(true);
-    const volver = useVolver();
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-icon", modifiers);
-    const provider = computed(() => {
-      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
-    });
-    const icon = computed(() => {
-      const name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
-        return iconName;
-      }
-      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
-        (iconsCollection2) => {
-          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
-        }
-      );
-      if (iconsCollection) {
-        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
-      }
-      return name;
-    });
-    function getSvgContent(svg) {
-      let dom;
-      if (typeof window === "undefined") {
-        const { JSDOM } = require("jsdom");
-        dom = new JSDOM().window;
-      }
-      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
-      const svgDomString = domParser.parseFromString(svg, "text/html");
-      const svgEl = svgDomString.querySelector("svg");
-      return svgEl;
-    }
-    function addIconFromSvg(svg) {
-      const svgContentEl = getSvgContent(svg);
-      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
-      if (svgContentEl && svgContent) {
-        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
-          body: svgContent,
-          // Set height and width from svg content
-          height: svgContentEl.viewBox.baseVal.height,
-          width: svgContentEl.viewBox.baseVal.width
-        });
-      }
-    }
-    if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
-        show.value = false;
-        volver.fetchIcon(props.src).then((svg) => {
-          if (svg) {
-            addIconFromSvg(svg);
-            show.value = true;
-          }
-        }).catch((e) => {
-          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
-        });
-      }
-    }
-    if (props.svg) {
-      addIconFromSvg(props.svg);
+const AutocompleteProps = {
+  /**
+   * Global attribute autocomplete
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autocomplete: { type: String, default: "off" }
+};
+({
+  /**
+   * Button type
+   */
+  type: {
+    default: ButtonType.button
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    default: ActionTag.button
+  }
+});
+({
+  storageType: {
+    default: StorageType.local
+  }
+});
+const VvSelectProps = {
+  ...IdNameProps,
+  ...AutofocusProps,
+  ...AutocompleteProps,
+  ...TabindexProps,
+  ...ValidProps,
+  ...InvalidProps,
+  ...HintProps,
+  ...LoadingProps,
+  ...DisabledProps,
+  ...ReadonlyProps,
+  ...ModifiersProps,
+  ...OptionsProps,
+  ...IconProps,
+  ...FloatingLabelProps,
+  ...UnselectableProps,
+  ...LabelProps,
+  ...ClearProps,
+  /**
+   * This Boolean attribute indicates that multiple options can be selected in the list.
+   * If it is not specified, then only one option can be selected at a time.
+   * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
+   */
+  multiple: Boolean,
+  /**
+   * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
+   */
+  required: Boolean,
+  /**
+   * If the control is presented as a scrolling list box (e.g. when multiple is specified),
+   * this attribute represents the number of rows in the list that should be visible at one time.
+   * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
+   */
+  size: [String, Number],
+  /**
+   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: void 0
+  },
+  /**
+   * Select first option automatically
+   */
+  autoselectFirst: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Select placeholder
+   */
+  placeholder: String
+};
+function useVvSelectProps() {
+  return {
+    ...VvSelectProps,
+    options: {
+      ...VvSelectProps.options,
+      type: Array,
+      default: () => []
     }
-    return (_ctx, _cache) => {
-      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
-        key: 0,
-        class: unref(bemCssClasses)
-      }, {
-        inline: _ctx.inline,
-        width: _ctx.width,
-        height: _ctx.height,
-        horizontalFlip: _ctx.horizontalFlip,
-        verticalFlip: _ctx.verticalFlip,
-        flip: _ctx.flip,
-        rotate: unref(hasRotate),
-        color: _ctx.color,
-        onLoad: _ctx.onLoad,
-        icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-function isEmpty(value) {
-  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
+  };
 }
 function isString(value) {
-  return typeof value === "string" || value instanceof String;
+  return typeof value === "string";
 }
 function joinLines(items) {
   if (Array.isArray(items)) {
@@ -336,7 +394,6 @@ function HintSlotFactory(propsOrRef, slots) {
       };
     },
     render() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (this.isVisible) {
         let role;
         if (this.hasInvalidLabelOrSlot) {
@@ -351,7 +408,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+            this.$slots.loading?.() ?? this.loadingLabel
           );
         }
         if (this.hasInvalidLabelOrSlot) {
@@ -360,7 +417,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+            this.$slots.invalid?.() ?? this.$slots.invalid ?? this.invalidLabel
           );
         }
         if (this.hasValidLabelOrSlot) {
@@ -369,7 +426,7 @@ function HintSlotFactory(propsOrRef, slots) {
             {
               role
             },
-            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+            this.$slots.valid?.() ?? this.validLabel
           );
         }
         return h(
@@ -377,7 +434,7 @@ function HintSlotFactory(propsOrRef, slots) {
           {
             role
           },
-          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+          this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel
         );
       }
       return null;
@@ -392,372 +449,237 @@ function HintSlotFactory(propsOrRef, slots) {
     HintSlot
   };
 }
-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: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
-  /**
-   * Anchor rel
-   */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  }
-};
-const ValidProps = {
-  /**
-   * Valid status
-   */
-  valid: Boolean,
-  /**
-   * Valid label
-   */
-  validLabel: [String, Array]
-};
-const InvalidProps = {
-  /**
-   * Invalid status
-   */
-  invalid: Boolean,
-  /**
-   * Invalid label
-   */
-  invalidLabel: [String, Array]
-};
-const LoadingProps = {
-  /**
-   * Loading status
-   */
-  loading: Boolean,
-  /**
-   * Loading label
-   */
-  loadingLabel: {
-    type: String,
-    default: "Loading..."
-  }
-};
-const DisabledProps = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: Boolean
-};
-const ActiveProps = {
-  /**
-   * Whether the item is active
-   */
-  active: Boolean
-};
-const CurrentProps = {
-  /**
-   * Whether the item is current
-   */
-  current: Boolean
-};
-const PressedProps = {
-  /**
-   * Whether the item is pressed
-   */
-  pressed: Boolean
-};
-const LabelProps = {
-  /**
-   * The item label
-   */
-  label: [String, Number]
-};
-const ReadonlyProps = {
-  /**
-   * The value is not editable
-   */
-  readonly: Boolean
-};
-const ModifiersProps = {
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: [String, Array]
-};
-const HintProps = {
-  hintLabel: { type: String, default: "" }
-};
-const OptionsProps = {
-  /**
-   * List of options, can be string[] or object[]
-   */
-  options: {
-    type: Array,
-    default: () => []
-  },
-  /**
-   * Used when options are objects: key to use for option label
-   */
-  labelKey: { type: [String, Function], default: "label" },
-  /**
-   * Used when options are objects: key to use for option label
-   */
-  valueKey: { type: [String, Function], default: "value" },
-  /**
-   * Used when options are objects: key to use for option disabled
-   */
-  disabledKey: { type: [String, Function], default: "disabled" }
-};
-const IconProps = {
-  /**
-   * VvIcon name or props
-   * @see VVIcon
-   */
-  icon: { type: [String, Object] },
-  /**
-   * VvIcon position
-   */
-  iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
-  }
-};
-const TabindexProps = {
-  /**
-   * Global attribute tabindex
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
-   */
-  tabindex: { type: [String, Number], default: 0 }
-};
-const FloatingLabelProps = {
-  /**
-   * If true the label will be floating
-   */
-  floating: Boolean
-};
-const UnselectableProps = {
-  /**
-   * If true the input will be unselectable
-   */
-  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]
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER, void 0);
+}
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
+  });
+}
+const __default__$1 = {
+  name: "VvIcon"
 };
-({
-  /**
-   * 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
-  },
-  /**
-   * 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
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return Number.parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || volver?.iconsProvider;
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconLoaded(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver?.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconLoaded(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
+    }
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = svgContentEl?.innerHTML.trim() || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`Error during fetch icon: ${e?.message}`);
+        });
+      }
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: __props.inline,
+        width: __props.width,
+        height: __props.height,
+        horizontalFlip: __props.horizontalFlip,
+        verticalFlip: __props.verticalFlip,
+        flip: __props.flip,
+        rotate: unref(hasRotate),
+        color: __props.color,
+        icon: unref(icon)
+      }, { onLoad: __props.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
+    };
   }
 });
-const IdNameProps = {
-  ...IdProps,
-  /**
-   * Input / Textarea name
-   * Name of the form control. Submitted with the form as part of a name/value pair
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
-   */
-  name: { type: String, required: true }
-};
-const AutofocusProps = {
-  /**
-   * Global attribute autofocus
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
-   */
-  autofocus: Boolean
-};
-const AutocompleteProps = {
-  /**
-   * Global attribute autocomplete
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
-   */
-  autocomplete: { type: String, default: "off" }
-};
-({
-  ...DisabledProps,
-  ...LabelProps,
-  ...PressedProps,
-  ...ActiveProps,
-  ...CurrentProps,
-  ...LinkProps,
-  /**
-   * Button type
-   */
-  type: {
-    type: String,
-    default: ButtonType.button,
-    validator: (value) => Object.values(ButtonType).includes(value)
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof icon?.value === "string") {
+      return { name: icon?.value };
+    }
+    return icon?.value;
+  });
+  const hasIconBefore = computed(
+    () => iconPosition?.value === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => iconPosition?.value === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => iconPosition?.value === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => iconPosition?.value === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => iconPosition?.value === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+const VvInputClearAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$1
   },
-  /**
-   * Button aria-label
-   */
-  ariaLabel: {
-    type: String,
-    default: void 0
+  props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      type: [String, Object],
+      default: "close"
+    }
   },
-  /**
-   * Default tag for the action
-   */
-  defaultTag: {
-    type: String,
-    default: ActionTag.button
+  emits: ["clear"],
+  setup(props, { emit }) {
+    const { hasIcon } = useComponentIcon(computed(() => props.icon));
+    function onClick(e) {
+      e?.stopPropagation();
+      if (!props.disabled) {
+        emit("clear");
+      }
+    }
+    return {
+      hasIcon,
+      onClick
+    };
+  },
+  render() {
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
+      class: `vv-${this.inputType}__icon`
+    }) : void 0;
+    return h(
+      "button",
+      {
+        disabled: this.disabled,
+        class: `vv-${this.inputType}__action`,
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      icon
+    );
   }
 });
-const VvSelectProps = {
-  ...IdNameProps,
-  ...AutofocusProps,
-  ...AutocompleteProps,
-  ...TabindexProps,
-  ...ValidProps,
-  ...InvalidProps,
-  ...HintProps,
-  ...LoadingProps,
-  ...DisabledProps,
-  ...ReadonlyProps,
-  ...ModifiersProps,
-  ...OptionsProps,
-  ...IconProps,
-  ...FloatingLabelProps,
-  ...UnselectableProps,
-  ...LabelProps,
-  /**
-   * This Boolean attribute indicates that multiple options can be selected in the list.
-   * If it is not specified, then only one option can be selected at a time.
-   * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
-   */
-  multiple: Boolean,
-  /**
-   * A Boolean attribute indicating that an option with a non-empty string value must be selected.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
-   */
-  required: Boolean,
-  /**
-   * If the control is presented as a scrolling list box (e.g. when multiple is specified),
-   * this attribute represents the number of rows in the list that should be visible at one time.
-   * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
-   */
-  size: [String, Number],
-  /**
-   * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-   */
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: void 0
-  },
-  /**
-   * Select placeholder
-   */
-  placeholder: String
-};
-const VvSelectEmits = ["update:modelValue", "focus", "blur"];
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
-    var _a;
-    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+    if (!volver || !volver.defaults.value?.[componentName]) {
       return void 0;
     }
     return volver.defaults.value[componentName];
@@ -806,7 +728,6 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 function useComponentFocus(inputTemplateRef, emit) {
   const { focused } = useFocus(inputTemplateRef);
   watch(focused, (newValue) => {
@@ -816,64 +737,48 @@ function useComponentFocus(inputTemplateRef, emit) {
     focused
   };
 }
-function useComponentIcon(icon, iconPosition) {
-  const hasIconBefore = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.before)
-  );
-  const hasIconAfter = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Position.after)
-  );
-  const hasIconLeft = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.left)
-  );
-  const hasIconRight = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.right)
-  );
-  const hasIconTop = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.top)
-  );
-  const hasIconBottom = computed(
-    () => Boolean((icon == null ? void 0 : icon.value) && iconPosition.value === Side.bottom)
-  );
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
+function useUniqueId(id) {
+  return computed(() => String(id?.value || useId()));
 }
 function useOptions(props) {
   const { options, labelKey, valueKey, disabledKey } = toRefs(props);
   const getOptionLabel = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return option;
+    }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
     return String(
-      typeof labelKey.value === "function" ? labelKey.value(option) : get(option, labelKey.value)
+      labelKey.value ? getProperty(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return option;
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    }
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? getProperty(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return false;
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    }
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? Boolean(getProperty(option, disabledKey.value)) : false;
   };
   const getOptionGrouped = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option == "string") {
       return [];
-    return option.options || [];
+    }
+    if (typeof option === "object" && option && "options" in option) {
+      return option.options;
+    }
+    return [];
   };
   return {
     options,
@@ -896,7 +801,7 @@ const _hoisted_7 = ["disabled", "value"];
 const _hoisted_8 = ["disabled", "label"];
 const _hoisted_9 = ["disabled", "value"];
 const _hoisted_10 = {
-  key: 1,
+  key: 2,
   class: "vv-select__input-after"
 };
 const __default__ = {
@@ -904,23 +809,32 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: VvSelectProps,
-  emits: VvSelectEmits,
-  setup(__props, { emit }) {
+  props: useVvSelectProps(),
+  emits: ["update:modelValue", "focus", "blur", "clear"],
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
+    const VvSelectProps2 = useVvSelectProps();
     const propsDefaults = useDefaults(
       "VvSelect",
-      VvSelectProps,
+      VvSelectProps2,
       props
     );
-    const select = ref();
+    const selectEl = ref();
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
     } = HintSlotFactory(propsDefaults, slots);
+    const { focused } = useComponentFocus(selectEl, emit);
+    function isGroup(option) {
+      if (typeof option === "string") {
+        return false;
+      }
+      return option.options?.length;
+    }
     const {
       id,
       modifiers,
@@ -936,22 +850,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
-    const { focused } = useComponentFocus(select, emit);
-    const isVisible = useElementVisibility(select);
+    const isDisabledOrReadonly = computed(() => props.disabled || props.readonly);
+    const hasTabindex = computed(() => {
+      return isDisabledOrReadonly.value ? -1 : props.tabindex;
+    });
+    const localModelValue = computed({
+      get: () => {
+        return props.modelValue;
+      },
+      set: (newValue) => {
+        if (Array.isArray(newValue)) {
+          newValue = newValue.filter((item) => item !== void 0);
+          if (newValue.length === 0 && !props.unselectable && selectEl.value) {
+            selectEl.value.value = String(props.modelValue);
+            return;
+          }
+        }
+        emit("update:modelValue", newValue);
+      }
+    });
+    const isDirty = computed(() => {
+      if (Array.isArray(localModelValue.value)) {
+        return localModelValue.value.length > 0;
+      }
+      return localModelValue.value !== void 0 && localModelValue.value !== null;
+    });
+    const isUnselectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      return props.unselectable;
+    });
+    const isVisible = useElementVisibility(selectEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
         focused.value = true;
       }
     });
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const isDirty = computed(() => !isEmpty(props.modelValue));
-    const isDisabled = computed(() => props.disabled || props.readonly);
-    const hasTabindex = computed(() => {
-      return isDisabled.value ? -1 : props.tabindex;
-    });
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
     const isInvalid = computed(() => {
       if (props.invalid === true) {
         return true;
@@ -965,28 +901,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       "vv-select",
       modifiers,
       computed(() => ({
-        valid: valid.value,
-        invalid: invalid.value,
-        loading: loading.value,
-        disabled: disabled.value,
-        readonly: readonly.value,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value,
-        dirty: isDirty.value,
-        focus: focused.value,
-        floating: floating.value,
-        multiple: multiple.value
+        "valid": valid.value,
+        "invalid": invalid.value,
+        "loading": loading.value,
+        "disabled": disabled.value,
+        "readonly": readonly.value,
+        "icon-before": hasIconBefore.value !== void 0,
+        "icon-after": hasIconAfter.value !== void 0,
+        "dirty": isDirty.value,
+        "focus": focused.value && !isDisabledOrReadonly.value,
+        "floating": floating.value,
+        "multiple": multiple.value
       }))
     );
+    const {
+      getOptionLabel,
+      getOptionValue,
+      isOptionDisabled,
+      getOptionGrouped
+    } = useOptions(props);
+    watch(
+      () => props.options,
+      (newValue) => {
+        if (newValue?.length && props.autoselectFirst && !isDirty.value) {
+          const firstOptionValue = getOptionValue(newValue[0]);
+          localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue;
+        }
+      },
+      { immediate: true }
+    );
+    function onClear() {
+      if (Array.isArray(localModelValue.value)) {
+        localModelValue.value = [];
+      } else {
+        localModelValue.value = void 0;
+      }
+      emit("clear");
+    }
     const hasAttrs = computed(() => {
       return {
-        name: props.name,
-        tabindex: hasTabindex.value,
-        disabled: isDisabled.value,
-        required: props.required,
-        size: props.size,
-        autocomplete: props.autocomplete,
-        multiple: props.multiple,
+        "name": props.name,
+        "tabindex": hasTabindex.value,
+        "disabled": isDisabledOrReadonly.value,
+        "required": props.required,
+        "size": props.size,
+        "autocomplete": props.autocomplete,
+        "multiple": props.multiple,
         "aria-invalid": isInvalid.value,
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
         "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
@@ -997,28 +957,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       modelValue: props.modelValue
     }));
-    const {
-      getOptionLabel,
-      getOptionValue,
-      isOptionDisabled,
-      getOptionGrouped
-    } = useOptions(props);
-    const localModelValue = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (newValue) => {
-        if (Array.isArray(newValue)) {
-          newValue = newValue.filter((item) => item !== void 0);
-        }
-        emit("update:modelValue", newValue);
-      }
-    });
-    const isGroup = (option) => {
-      if (typeof option === "string")
-        return false;
-      return option && option.options && option.options.length > 0;
-    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(
         "div",
@@ -1037,25 +975,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_4, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
                 _sfc_main$1,
-                mergeProps({
-                  key: 0,
-                  class: "vv-select__icon"
-                }, unref(hasIcon)),
+                mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
                 null,
                 16
                 /* FULL_PROPS */
               )) : createCommentVNode("v-if", true),
               withDirectives(createElementVNode("select", mergeProps({
                 id: unref(hasId),
-                ref_key: "select",
-                ref: select,
+                ref_key: "selectEl",
+                ref: selectEl
+              }, unref(hasAttrs), {
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
-              }, unref(hasAttrs)), [
+              }), [
                 _ctx.placeholder ? (openBlock(), createElementBlock("option", {
                   key: 0,
                   value: void 0,
-                  disabled: !_ctx.unselectable,
-                  hidden: !_ctx.unselectable
+                  disabled: !unref(isUnselectable),
+                  hidden: !unref(isUnselectable)
                 }, toDisplayString(_ctx.placeholder), 9, _hoisted_6)) : createCommentVNode("v-if", true),
                 (openBlock(true), createElementBlock(
                   Fragment,
@@ -1101,15 +1037,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               unref(hasIconAfter) ? (openBlock(), createBlock(
                 _sfc_main$1,
-                mergeProps({
-                  key: 1,
-                  class: "vv-select__icon vv-select__icon-after"
-                }, unref(hasIcon)),
+                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */
               )) : createCommentVNode("v-if", true)
             ]),
+            unref(isUnselectable) && unref(propsDefaults).showClearAction ? (openBlock(), createBlock(unref(VvInputClearAction), {
+              key: 1,
+              "input-type": "select",
+              label: _ctx.labelClear,
+              icon: _ctx.iconClear,
+              disabled: !unref(isDirty),
+              onClear
+            }, null, 8, ["label", "icon", "disabled"])) : createCommentVNode("v-if", true),
             _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_10, [
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
             ])) : createCommentVNode("v-if", true)