@volverjs/ui-vue 0.0.10-beta.47 → 0.0.10-beta.48

package/dist/components/VvInputText/VvInputText.es.js

@@ -1,10 +1,9 @@
-import { unref, computed, isRef, defineComponent, h, inject, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, Fragment, useAttrs, onMounted, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, withModifiers, createSlots, renderList } from "vue";
+import { unref, computed, isRef, defineComponent, h, useId, provide, Fragment, ref, toRefs, useAttrs, useTemplateRef, onMounted, watch, nextTick, openBlock, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, mergeProps, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, createCommentVNode, vShow, inject, createBlock, createTextVNode, toDisplayString, mergeDefaults, useSlots, withModifiers, createSlots, renderList } from "vue";
 import { useIMask } from "vue-imask";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
-import { uid } from "uid";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useStorage, useElementVisibility } from "@vueuse/core";
 import mitt from "mitt";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
 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));
 }
@@ -129,22 +128,6 @@ function HintSlotFactory(propsOrRef, slots) {
     HintSlot
   };
 }
-const ACTION_ICONS = {
-  showPassword: "eye-on",
-  hidePassword: "eye-off",
-  showDatePicker: "calendar",
-  showTimePicker: "time",
-  showColorPicker: "color",
-  clear: "close",
-  add: "add",
-  remove: "trash",
-  edit: "edit",
-  download: "download"
-};
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
 var StorageType = /* @__PURE__ */ ((StorageType2) => {
   StorageType2["local"] = "local";
   StorageType2["session"] = "session";
@@ -217,381 +200,47 @@ const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
 const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
   "dropdownAction"
 );
-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__$4 = {
-  name: "VvIcon"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
-  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 == 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);
-    }
-    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 useComponentIcon(icon, iconPosition) {
-  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;
-  });
-  const hasIconBefore = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
-  );
-  const hasIconAfter = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
-  );
-  const hasIconLeft = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
-  );
-  const hasIconRight = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
-  );
-  const hasIconTop = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
-  );
-  const hasIconBottom = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
-  );
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
-const VvInputPasswordAction = defineComponent({
-  components: {
-    VvIcon: _sfc_main$4
+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]
   },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    labelShow: {
-      type: String,
-      default: "Show password"
-    },
-    labelHide: {
-      type: String,
-      default: "Hide password"
-    },
-    iconShow: {
-      type: [String, Object],
-      default: ACTION_ICONS.showPassword
-    },
-    iconHide: {
-      type: [String, Object],
-      default: ACTION_ICONS.hidePassword
-    }
-  },
-  emits: ["toggle-password"],
-  setup(props, { emit }) {
-    const active = ref(false);
-    const activeIcon = computed(
-      () => active.value ? props.iconHide : props.iconShow
-    );
-    const { hasIcon } = useComponentIcon(activeIcon);
-    function onClick(e) {
-      e == null ? void 0 : e.stopPropagation();
-      if (!props.disabled) {
-        active.value = !active.value;
-        emit("toggle-password", active.value);
-      }
-    }
-    return {
-      active,
-      activeIcon,
-      hasIcon,
-      onClick
-    };
-  },
-  render() {
-    const icon = this.hasIcon ? h(_sfc_main$4, {
-      ...this.hasIcon,
-      class: "vv-input-text__icon"
-    }) : void 0;
-    return h(
-      "button",
-      {
-        disabled: this.disabled,
-        class: "vv-input-text__action",
-        ariaLabel: this.active ? this.labelHide : this.labelShow,
-        type: "button",
-        onClick: this.onClick
-      },
-      icon
-    );
-  }
-});
-const VvInputStepAction = defineComponent({
-  components: {
-    VvIcon: _sfc_main$4
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String
-    },
-    mode: {
-      type: String,
-      validator: (v) => ["up", "down"].includes(v),
-      default: "up"
-    }
-  },
-  emits: ["step-up", "step-down"],
-  setup(props, { emit }) {
-    const isUp = computed(() => props.mode === "up");
-    const onClick = (e) => {
-      e == null ? void 0 : e.stopPropagation();
-      if (!props.disabled) {
-        emit(isUp.value ? "step-up" : "step-down");
-      }
-    };
-    return {
-      isUp,
-      onClick
-    };
-  },
-  render() {
-    return h("button", {
-      class: [
-        "vv-input-text__action vv-input-text__action-chevron",
-        this.isUp && "vv-input-text__action-chevron-up"
-      ],
-      disabled: this.disabled,
-      ariaLabel: this.label,
-      type: "button",
-      onClick: this.onClick
-    });
-  }
-});
-const VvInputClearAction = defineComponent({
-  components: {
-    VvIcon: _sfc_main$4
-  },
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    label: {
-      type: String,
-      default: "Clear"
-    },
-    icon: {
-      type: [String, Object],
-      default: "close"
-    }
-  },
-  emits: ["clear"],
-  setup(props, { emit }) {
-    const { hasIcon } = useComponentIcon(computed(() => props.icon));
-    function onClick(e) {
-      e == null ? void 0 : e.stopPropagation();
-      if (!props.disabled) {
-        emit("clear");
-      }
-    }
-    return {
-      hasIcon,
-      onClick
-    };
-  },
-  render() {
-    const icon = this.hasIcon ? h(_sfc_main$4, {
-      ...this.hasIcon,
-      class: "vv-input-text__icon"
-    }) : void 0;
-    return h(
-      "button",
-      {
-        disabled: this.disabled,
-        class: "vv-input-text__action",
-        ariaLabel: this.label,
-        type: "button",
-        onClick: this.onClick
-      },
-      icon
-    );
-  }
-});
-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 ValidProps = {
-  /**
-   * Valid status
-   */
-  valid: { type: Boolean, default: false },
-  /**
-   * Valid label
-   */
-  validLabel: { type: [String, Array], default: void 0 }
-};
-const InvalidProps = {
-  /**
-   * Invalid status
-   */
-  invalid: {
-    type: Boolean,
-    default: false
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: String,
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const ValidProps = {
+  /**
+   * Valid status
+   */
+  valid: { type: Boolean, default: false },
+  /**
+   * Valid label
+   */
+  validLabel: { type: [String, Array], default: void 0 }
+};
+const InvalidProps = {
+  /**
+   * Invalid status
+   */
+  invalid: {
+    type: Boolean,
+    default: false
   },
   /**
    * Invalid label
@@ -965,306 +614,26 @@ const StorageProps = {
   },
   storageKey: String
 };
-const INPUT_TYPES = {
-  TEXT: "text",
-  PASSWORD: "password",
-  NUMBER: "number",
-  EMAIL: "email",
-  TEL: "tel",
-  URL: "url",
-  COLOR: "color",
-  SEARCH: "search",
-  DATE: "date",
-  TIME: "time",
-  DATETIME_LOCAL: "datetime-local",
-  MONTH: "month",
-  WEEK: "week"
-};
-const VvInputTextEvents = [
-  "update:modelValue",
-  "update:masked",
-  "accept",
-  "accept:typed",
-  "accept:masked",
-  "accept:unmasked",
-  "complete",
-  "complete:typed",
-  "complete:masked",
-  "complete:unmasked",
-  "focus",
-  "blur",
-  "keyup",
-  "keydown",
-  "keypress"
-];
-const VvInputTextProps = {
-  ...InputTextareaProps,
-  ...StorageProps,
-  /**
-   * Input value
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
-   */
-  modelValue: [String, Number],
+const VvDropdownProps = {
+  ...IdProps,
+  ...DropdownProps,
+  ...ModifiersProps,
   /**
-   * Type of form control
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+   * Show / hide dropdown programmatically
    */
-  type: {
-    type: String,
-    default: INPUT_TYPES.TEXT,
-    validator: (value) => Object.values(INPUT_TYPES).includes(value)
+  modelValue: {
+    type: Boolean,
+    default: void 0
   },
   /**
-   * Minimum value
-   * Available for input types: date, month, week, time, datetime-local, number, range.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-   */
-  min: [Number, Date, String],
-  /**
-   * Maximum value
-   * Available for input types: date, month, week, time, datetime-local, number, range.
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-   */
-  max: [Number, Date, String],
-  /**
-   * Incremental values that are valid
-   * Available for input types: date, month, week, time, datetime-local and number
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-   */
-  step: { type: [String, Number], default: 1 },
-  /**
-   * Pattern the value must match to be valid
-   * Available for input types: text, search, url, tel, email and password
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   * Dropdown trigger element
    */
-  pattern: String,
+  reference: {
+    type: Object,
+    default: null
+  },
   /**
-   * Whether to allow multiple values
-   * Available for input type email
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
-   */
-  multiple: Boolean,
-  /**
-   * VvIcon name for show password button
-   * @see VVIcon
-   */
-  iconShowPassword: {
-    type: [String, Object],
-    default: ACTION_ICONS.showPassword
-  },
-  /**
-   * VvIcon name for hide password button
-   * @see VVIcon
-   */
-  iconHidePassword: {
-    type: [String, Object],
-    default: ACTION_ICONS.hidePassword
-  },
-  /**
-   * VvIcon name for clear button
-   * @see VVIcon
-   */
-  iconClear: {
-    type: [String, Object],
-    default: ACTION_ICONS.clear
-  },
-  /**
-   * VvIcon name for remove suggestion button
-   * @see VVIcon
-   */
-  iconRemoveSuggestion: {
-    type: [String, Object],
-    default: ACTION_ICONS.remove
-  },
-  /**
-   * Label for step up button
-   */
-  labelStepUp: {
-    type: String,
-    default: "Increase value"
-  },
-  /**
-   * Label for step down button
-   */
-  labelStepDown: {
-    type: String,
-    default: "Decrease value"
-  },
-  /**
-   * Label for show password button
-   */
-  labelShowPassword: {
-    type: String,
-    default: "Show password"
-  },
-  /**
-   * Label for hide password button
-   */
-  labelHidePassword: {
-    type: String,
-    default: "Hide password"
-  },
-  /**
-   * Label for clear button
-   */
-  labelClear: {
-    type: String,
-    default: "Clear"
-  },
-  /**
-   * Label for remove suggestion button
-   */
-  labelRemoveSuggestion: {
-    type: String,
-    default: "Remove suggestion"
-  },
-  /**
-   * iMask options
-   * @see https://imask.js.org/guide.html
-   */
-  iMask: {
-    type: Object,
-    default: void 0
-  },
-  /**
-   * Masked value
-   */
-  masked: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * Adjust input width to content
-   */
-  autoWidth: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Hide type number, password and search actions
-   */
-  hideActions: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Add unit label to input
-   */
-  unit: {
-    type: String
-  },
-  /**
-   * Select input text on focus
-   */
-  selectOnFocus: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Maximum number of suggestions
-   */
-  maxSuggestions: {
-    type: Number,
-    default: 5
-  }
-};
-function VvInputTextActionsFactory(type, parentProps) {
-  return {
-    name: "VvInputTextActions",
-    components: {
-      VvIcon: _sfc_main$4,
-      VvInputPasswordAction,
-      VvInputStepAction,
-      VvInputClearAction
-    },
-    setup() {
-      const isDisabled = computed(() => {
-        return parentProps.disabled || parentProps.readonly;
-      });
-      return {
-        isDisabled,
-        labelStepUp: parentProps.labelStepUp,
-        labelStepDown: parentProps.labelStepDown,
-        labelShowPassword: parentProps.labelShowPassword,
-        labelHidePassword: parentProps.labelHidePassword,
-        labelClear: parentProps.labelClear,
-        iconShowPassword: parentProps.iconShowPassword,
-        iconHidePassword: parentProps.iconHidePassword
-      };
-    },
-    render() {
-      let actions = null;
-      switch (type) {
-        case INPUT_TYPES.SEARCH: {
-          const { onClear } = this.$attrs;
-          actions = [
-            h(VvInputClearAction, {
-              disabled: this.isDisabled,
-              label: this.labelShowPassword,
-              onClear
-            })
-          ];
-          break;
-        }
-        case INPUT_TYPES.PASSWORD: {
-          const { onTogglePassword } = this.$attrs;
-          actions = [
-            h(VvInputPasswordAction, {
-              disabled: this.isDisabled,
-              onTogglePassword,
-              labelShow: this.labelShowPassword,
-              labelHide: this.labelHidePassword,
-              iconShow: this.iconShowPassword,
-              iconHide: this.iconHidePassword
-            })
-          ];
-          break;
-        }
-        case INPUT_TYPES.NUMBER: {
-          const { onStepUp, onStepDown } = this.$attrs;
-          actions = [
-            h(VvInputStepAction, {
-              mode: "up",
-              disabled: this.isDisabled || parentProps.max !== void 0 && parentProps.modelValue === parentProps.max,
-              label: this.labelStepUp,
-              onStepUp,
-              onStepDown
-            }),
-            h(VvInputStepAction, {
-              mode: "down",
-              disabled: this.isDisabled || parentProps.min !== void 0 && parentProps.modelValue === parentProps.min,
-              label: this.labelStepDown,
-              onStepUp,
-              onStepDown
-            })
-          ];
-          break;
-        }
-      }
-      return Array.isArray(actions) ? h("div", { class: "vv-input-text__actions-group" }, actions) : actions;
-    }
-  };
-}
-const VvDropdownProps = {
-  ...IdProps,
-  ...DropdownProps,
-  ...ModifiersProps,
-  /**
-   * Show / hide dropdown programmatically
-   */
-  modelValue: {
-    type: Boolean,
-    default: void 0
-  },
-  /**
-   * Dropdown trigger element
-   */
-  reference: {
-    type: Object,
-    default: null
-  },
-  /**
-   * Dropdown role
+   * Dropdown role
    */
   role: {
     type: String,
@@ -1298,9 +667,9 @@ const VvDropdownOptionProps = {
   }
 };
 function useUniqueId(id) {
-  return computed(() => String((id == null ? void 0 : id.value) || uid()));
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
 }
-function useProvideDropdownTrigger({
+function useDropdownProvideTrigger({
   reference,
   id,
   expanded,
@@ -1328,7 +697,7 @@ function useProvideDropdownTrigger({
     component
   };
 }
-function useProvideDropdownItem({
+function useDropdownProvideItem({
   role,
   ...others
 }) {
@@ -1341,7 +710,7 @@ function useProvideDropdownItem({
   });
   return { itemRole };
 }
-function useProvideDropdownAction({
+function useDropdownProvideAction({
   expanded
 }) {
   provide(INJECTION_KEY_DROPDOWN_ACTION, {
@@ -1349,13 +718,36 @@ function useProvideDropdownAction({
     expanded
   });
 }
+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 _hoisted_1$2 = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$3 = {
+const __default__$4 = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
@@ -1382,10 +774,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const maxWidth = ref("auto");
     const maxHeight = ref("auto");
-    const localReferenceEl = ref(null);
+    const localReferenceEl = ref();
     const floatingEl = ref();
-    const arrowEl = ref(null);
-    const listEl = ref(null);
+    const arrowEl = useTemplateRef("arrowEl");
+    const listEl = useTemplateRef("listEl");
     const referenceEl = computed({
       get: () => props.reference ?? localReferenceEl.value,
       set: (newValue) => {
@@ -1582,7 +974,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       "aria-haspopup": true,
       "aria-expanded": expanded.value
     }));
-    const { component: VvDropdownTriggerProvider, bus } = useProvideDropdownTrigger({
+    const { component: VvDropdownTriggerProvider, bus } = useDropdownProvideTrigger({
       reference: referenceEl,
       id: hasId,
       expanded,
@@ -1659,7 +1051,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       });
     }
     const hovered = useElementHover(floatingEl);
-    const { itemRole } = useProvideDropdownItem({
+    const { itemRole } = useDropdownProvideItem({
       role,
       expanded,
       focused,
@@ -1788,17 +1180,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 function useInjectedDropdownItem() {
   return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-const __default__$2 = {
+const __default__$3 = {
   name: "VvDropdownItem"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
-  props: VvDropdownItemProps,
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  props: VvDropdownItemProps,
   setup(__props) {
     const props = __props;
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
-    useProvideDropdownAction({ expanded });
+    useDropdownProvideAction({ expanded });
     const hovered = useElementHover(element);
     const { focused } = useFocus(element);
     const { focused: focusedWithin } = useFocusWithin(element);
@@ -1825,11 +1217,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1 = ["title"];
-const __default__$1 = {
+const __default__$2 = {
   name: "VvDropdownOption"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
   props: VvDropdownOptionProps,
   setup(__props) {
     const props = __props;
@@ -1853,7 +1245,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return "";
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$2, {
+      return openBlock(), createBlock(_sfc_main$3, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -1881,6 +1273,613 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const ACTION_ICONS = {
+  showPassword: "eye-on",
+  hidePassword: "eye-off",
+  showDatePicker: "calendar",
+  showTimePicker: "time",
+  showColorPicker: "color",
+  clear: "close",
+  add: "add",
+  remove: "trash",
+  edit: "edit",
+  download: "download"
+};
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+const __default__$1 = {
+  name: "VvIcon"
+};
+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 == 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);
+    }
+    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);
+    };
+  }
+});
+const INPUT_TYPES = {
+  TEXT: "text",
+  PASSWORD: "password",
+  NUMBER: "number",
+  EMAIL: "email",
+  TEL: "tel",
+  URL: "url",
+  COLOR: "color",
+  SEARCH: "search",
+  DATE: "date",
+  TIME: "time",
+  DATETIME_LOCAL: "datetime-local",
+  MONTH: "month",
+  WEEK: "week"
+};
+const VvInputTextEvents = [
+  "update:modelValue",
+  "update:masked",
+  "accept",
+  "accept:typed",
+  "accept:masked",
+  "accept:unmasked",
+  "complete",
+  "complete:typed",
+  "complete:masked",
+  "complete:unmasked",
+  "focus",
+  "blur",
+  "keyup",
+  "keydown",
+  "keypress"
+];
+const VvInputTextProps = {
+  ...InputTextareaProps,
+  ...StorageProps,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
+  modelValue: [String, Number],
+  /**
+   * Type of form control
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+   */
+  type: {
+    type: String,
+    default: INPUT_TYPES.TEXT,
+    validator: (value) => Object.values(INPUT_TYPES).includes(value)
+  },
+  /**
+   * Minimum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+   */
+  min: [Number, Date, String],
+  /**
+   * Maximum value
+   * Available for input types: date, month, week, time, datetime-local, number, range.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+   */
+  max: [Number, Date, String],
+  /**
+   * Incremental values that are valid
+   * Available for input types: date, month, week, time, datetime-local and number
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+   */
+  step: { type: [String, Number], default: 1 },
+  /**
+   * Pattern the value must match to be valid
+   * Available for input types: text, search, url, tel, email and password
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+   */
+  pattern: String,
+  /**
+   * Whether to allow multiple values
+   * Available for input type email
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+   */
+  multiple: Boolean,
+  /**
+   * VvIcon name for show password button
+   * @see VVIcon
+   */
+  iconShowPassword: {
+    type: [String, Object],
+    default: ACTION_ICONS.showPassword
+  },
+  /**
+   * VvIcon name for hide password button
+   * @see VVIcon
+   */
+  iconHidePassword: {
+    type: [String, Object],
+    default: ACTION_ICONS.hidePassword
+  },
+  /**
+   * VvIcon name for clear button
+   * @see VVIcon
+   */
+  iconClear: {
+    type: [String, Object],
+    default: ACTION_ICONS.clear
+  },
+  /**
+   * VvIcon name for remove suggestion button
+   * @see VVIcon
+   */
+  iconRemoveSuggestion: {
+    type: [String, Object],
+    default: ACTION_ICONS.remove
+  },
+  /**
+   * Label for step up button
+   */
+  labelStepUp: {
+    type: String,
+    default: "Increase value"
+  },
+  /**
+   * Label for step down button
+   */
+  labelStepDown: {
+    type: String,
+    default: "Decrease value"
+  },
+  /**
+   * Label for show password button
+   */
+  labelShowPassword: {
+    type: String,
+    default: "Show password"
+  },
+  /**
+   * Label for hide password button
+   */
+  labelHidePassword: {
+    type: String,
+    default: "Hide password"
+  },
+  /**
+   * Label for clear button
+   */
+  labelClear: {
+    type: String,
+    default: "Clear"
+  },
+  /**
+   * Label for remove suggestion button
+   */
+  labelRemoveSuggestion: {
+    type: String,
+    default: "Remove suggestion"
+  },
+  /**
+   * iMask options
+   * @see https://imask.js.org/guide.html
+   */
+  iMask: {
+    type: Object,
+    default: void 0
+  },
+  /**
+   * Masked value
+   */
+  masked: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * Adjust input width to content
+   */
+  autoWidth: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Hide type number, password and search actions
+   */
+  hideActions: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Add unit label to input
+   */
+  unit: {
+    type: String
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Maximum number of suggestions
+   */
+  maxSuggestions: {
+    type: Number,
+    default: 5
+  }
+};
+function useComponentIcon(icon, iconPosition) {
+  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;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+const VvInputClearAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$1
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      type: [String, Object],
+      default: "close"
+    }
+  },
+  emits: ["clear"],
+  setup(props, { emit }) {
+    const { hasIcon } = useComponentIcon(computed(() => props.icon));
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        emit("clear");
+      }
+    }
+    return {
+      hasIcon,
+      onClick
+    };
+  },
+  render() {
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
+      class: "vv-input-text__icon"
+    }) : void 0;
+    return h(
+      "button",
+      {
+        disabled: this.disabled,
+        class: "vv-input-text__action",
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      icon
+    );
+  }
+});
+const VvInputPasswordAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$1
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    labelShow: {
+      type: String,
+      default: "Show password"
+    },
+    labelHide: {
+      type: String,
+      default: "Hide password"
+    },
+    iconShow: {
+      type: [String, Object],
+      default: ACTION_ICONS.showPassword
+    },
+    iconHide: {
+      type: [String, Object],
+      default: ACTION_ICONS.hidePassword
+    }
+  },
+  emits: ["toggle-password"],
+  setup(props, { emit }) {
+    const active = ref(false);
+    const activeIcon = computed(
+      () => active.value ? props.iconHide : props.iconShow
+    );
+    const { hasIcon } = useComponentIcon(activeIcon);
+    function onClick(e) {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        active.value = !active.value;
+        emit("toggle-password", active.value);
+      }
+    }
+    return {
+      active,
+      activeIcon,
+      hasIcon,
+      onClick
+    };
+  },
+  render() {
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
+      class: "vv-input-text__icon"
+    }) : void 0;
+    return h(
+      "button",
+      {
+        disabled: this.disabled,
+        class: "vv-input-text__action",
+        ariaLabel: this.active ? this.labelHide : this.labelShow,
+        type: "button",
+        onClick: this.onClick
+      },
+      icon
+    );
+  }
+});
+const VvInputStepAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$1
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String
+    },
+    mode: {
+      type: String,
+      validator: (v) => ["up", "down"].includes(v),
+      default: "up"
+    }
+  },
+  emits: ["step-up", "step-down"],
+  setup(props, { emit }) {
+    const isUp = computed(() => props.mode === "up");
+    const onClick = (e) => {
+      e == null ? void 0 : e.stopPropagation();
+      if (!props.disabled) {
+        emit(isUp.value ? "step-up" : "step-down");
+      }
+    };
+    return {
+      isUp,
+      onClick
+    };
+  },
+  render() {
+    return h("button", {
+      class: [
+        "vv-input-text__action vv-input-text__action-chevron",
+        this.isUp && "vv-input-text__action-chevron-up"
+      ],
+      disabled: this.disabled,
+      ariaLabel: this.label,
+      type: "button",
+      onClick: this.onClick
+    });
+  }
+});
+function VvInputTextActionsFactory(type, parentProps) {
+  return {
+    name: "VvInputTextActions",
+    components: {
+      VvIcon: _sfc_main$1,
+      VvInputPasswordAction,
+      VvInputStepAction,
+      VvInputClearAction
+    },
+    setup() {
+      const isDisabled = computed(() => {
+        return parentProps.disabled || parentProps.readonly;
+      });
+      return {
+        isDisabled,
+        labelStepUp: parentProps.labelStepUp,
+        labelStepDown: parentProps.labelStepDown,
+        labelShowPassword: parentProps.labelShowPassword,
+        labelHidePassword: parentProps.labelHidePassword,
+        labelClear: parentProps.labelClear,
+        iconShowPassword: parentProps.iconShowPassword,
+        iconHidePassword: parentProps.iconHidePassword
+      };
+    },
+    render() {
+      let actions = null;
+      switch (type) {
+        case INPUT_TYPES.SEARCH: {
+          const { onClear } = this.$attrs;
+          actions = [
+            h(VvInputClearAction, {
+              disabled: this.isDisabled,
+              label: this.labelShowPassword,
+              onClear
+            })
+          ];
+          break;
+        }
+        case INPUT_TYPES.PASSWORD: {
+          const { onTogglePassword } = this.$attrs;
+          actions = [
+            h(VvInputPasswordAction, {
+              disabled: this.isDisabled,
+              onTogglePassword,
+              labelShow: this.labelShowPassword,
+              labelHide: this.labelHidePassword,
+              iconShow: this.iconShowPassword,
+              iconHide: this.iconHidePassword
+            })
+          ];
+          break;
+        }
+        case INPUT_TYPES.NUMBER: {
+          const { onStepUp, onStepDown } = this.$attrs;
+          actions = [
+            h(VvInputStepAction, {
+              mode: "up",
+              disabled: this.isDisabled || parentProps.max !== void 0 && parentProps.modelValue === parentProps.max,
+              label: this.labelStepUp,
+              onStepUp,
+              onStepDown
+            }),
+            h(VvInputStepAction, {
+              mode: "down",
+              disabled: this.isDisabled || parentProps.min !== void 0 && parentProps.modelValue === parentProps.min,
+              label: this.labelStepDown,
+              onStepUp,
+              onStepDown
+            })
+          ];
+          break;
+        }
+      }
+      return Array.isArray(actions) ? h("div", { class: "vv-input-text__actions-group" }, actions) : actions;
+    }
+  };
+}
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -2254,9 +2253,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     const inputEl = el;
-    const innerEl = ref();
-    const wrapperEl = ref();
-    const dropdownEl = ref();
+    const innerEl = useTemplateRef("innerEl");
+    const wrapperEl = useTemplateRef("wrapperEl");
+    const dropdownEl = useTemplateRef("dropdownEl");
     __expose({ $inner: innerEl });
     const { focused } = useComponentFocus(inputEl, emit);
     const isFocused = computed(
@@ -2542,7 +2541,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 },
                 [
                   unref(hasIconBefore) ? (openBlock(), createBlock(
-                    _sfc_main$4,
+                    _sfc_main$1,
                     mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
                     null,
                     16
@@ -2572,7 +2571,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 /* NEED_PATCH */
               ),
               unref(iconAfter) ? (openBlock(), createBlock(
-                _sfc_main$4,
+                _sfc_main$1,
                 mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
                 null,
                 16
@@ -2640,7 +2639,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: "3"
             } : void 0
           ]), 1032, ["id"]),
-          unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$3, {
+          unref(hasSuggestions) ? (openBlock(), createBlock(_sfc_main$4, {
             key: 1,
             ref_key: "dropdownEl",
             ref: dropdownEl,
@@ -2653,7 +2652,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 Fragment,
                 null,
                 renderList(unref(filteredSuggestions), (value) => {
-                  return openBlock(), createBlock(_sfc_main$1, {
+                  return openBlock(), createBlock(_sfc_main$2, {
                     key: value,
                     onClick: withModifiers(($event) => onSuggestionSelect(value), ["stop"])
                   }, {
@@ -2676,7 +2675,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         onClick: withModifiers(($event) => onSuggestionRemove(value), ["stop"])
                       }, [
                         createVNode(
-                          _sfc_main$4,
+                          _sfc_main$1,
                           mergeProps({ ref_for: true }, unref(hasIconRemoveSuggestion)),
                           null,
                           16