@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.21

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

@@ -1,7 +1,7 @@
-import { unref, computed, isRef, defineComponent, h, inject, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, onMounted, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withModifiers, createTextVNode, createVNode, createSlots, withCtx } from "vue";
+import { unref, computed, isRef, defineComponent, h, inject, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, onMounted, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withModifiers, createTextVNode, createVNode, createSlots, withCtx } from "vue";
 import { useIMask } from "vue-imask";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { nanoid } from "nanoid";
+import { uid } from "uid";
 import { useFocus, useElementVisibility } from "@vueuse/core";
 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));
@@ -127,99 +127,21 @@ function HintSlotFactory(propsOrRef, slots) {
     HintSlot
   };
 }
-const VvIconProps = {
-  /**
-   * Color
-   */
-  color: String,
-  /**
-   * Width
-   */
-  width: {
-    type: [String, Number]
-  },
-  /**
-   * Height
-   */
-  height: {
-    type: [String, Number]
-  },
-  /**
-   * 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
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   * 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
-   */
-  provider: {
-    type: String
-  },
-  /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
-   */
-  prefix: {
-    type: String,
-    default: "normal"
-  },
-  /**
-   * Url remote SVG icon
-   */
-  src: String,
-  /**
-   * Horizontal flip
-   */
-  horizontalFlip: Boolean,
-  /**
-   * Vertical flip
-   */
-  verticalFlip: Boolean,
-  /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  flip: String,
-  /**
-   * 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
-   */
-  mode: String,
-  /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
-   */
-  inline: Boolean,
-  /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  rotate: [Number, String],
-  /**
-   * A callback that is called when icon data has been loaded
-   */
-  onLoad: Function,
-  /**
-   * SVG icon string
-   */
-  svg: String,
-  /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
+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 Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
@@ -255,6 +177,13 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   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";
@@ -294,7 +223,24 @@ const __default__$1 = {
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
-  props: VvIconProps,
+  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(() => {
@@ -381,7 +327,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
@@ -402,6 +348,7 @@ const LinkProps = {
    */
   target: {
     type: String,
+    default: void 0,
     validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
@@ -416,27 +363,33 @@ const ValidProps = {
   /**
    * Valid status
    */
-  valid: Boolean,
+  valid: { type: Boolean, default: false },
   /**
    * Valid label
    */
-  validLabel: [String, Array]
+  validLabel: { type: [String, Array], default: void 0 }
 };
 const InvalidProps = {
   /**
    * Invalid status
    */
-  invalid: Boolean,
+  invalid: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Invalid label
    */
-  invalidLabel: [String, Array]
+  invalidLabel: { type: [String, Array], default: void 0 }
 };
 const LoadingProps = {
   /**
    * Loading status
    */
-  loading: Boolean,
+  loading: {
+    type: Boolean,
+    default: false
+  },
   /**
    * Loading label
    */
@@ -449,37 +402,64 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  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: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ReadonlyProps = {
   /**
    * The value is not editable
    */
-  readonly: Boolean
+  readonly: {
+    type: Boolean,
+    default: false
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const HintProps = {
   hintLabel: { type: String, default: "" }
@@ -498,14 +478,20 @@ const DebounceProps = {
   /**
    * Milliseconds to wait before emitting the input event
    */
-  debounce: [Number, String]
+  debounce: {
+    type: [Number, String],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -526,7 +512,10 @@ const FloatingLabelProps = {
   /**
    * If true the label will be floating
    */
-  floating: Boolean
+  floating: {
+    type: Boolean,
+    default: false
+  }
 };
 const IdProps = {
   /**
@@ -556,7 +545,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -624,7 +614,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 const IdNameProps = {
@@ -641,7 +632,10 @@ const AutofocusProps = {
    * Global attribute autofocus
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
    */
-  autofocus: Boolean
+  autofocus: {
+    type: Boolean,
+    default: false
+  }
 };
 const AutocompleteProps = {
   /**
@@ -673,34 +667,41 @@ const InputTextareaProps = {
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    */
-  minlength: [String, Number],
+  minlength: { type: [String, Number], default: void 0 },
   /**
    * Input / Textarea maxlength
    * Maximum length (number of characters) of value
    * Available for input types: text, search, url, tel, email, password
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
    */
-  maxlength: [String, Number],
+  maxlength: { type: [String, Number], default: void 0 },
   /**
    * Input / Textarea placeholder
    * Text that appears in the form control when it has no value set
    * Available for input types: text, search, url, tel, email, password, number
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
    */
-  placeholder: String,
+  placeholder: {
+    type: String,
+    default: void 0
+  },
   /**
    * Input / Textarea required
    * A value is required or must be check for the form to be submittable
    * Available for all input types except color
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
    */
-  required: Boolean
+  required: {
+    type: Boolean,
+    default: false
+  }
 };
 ({
   ...DisabledProps,
   ...LabelProps,
   ...PressedProps,
   ...ActiveProps,
+  ...CurrentProps,
   ...LinkProps,
   /**
    * Button type
@@ -716,6 +717,13 @@ const InputTextareaProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
 const INPUT_TYPES = {
@@ -733,14 +741,6 @@ const INPUT_TYPES = {
   MONTH: "month",
   WEEK: "week"
 };
-const TYPES_ICON = {
-  PASSWORD_SHOW: "eye-on",
-  PASSWORD_HIDE: "eye-off",
-  DATE: "calendar",
-  TIME: "time",
-  COLOR: "color",
-  SEARCH: "close"
-};
 const VvInputTextEvents = [
   "update:modelValue",
   "update:masked",
@@ -809,24 +809,24 @@ const VvInputTextProps = {
    * @see VVIcon
    */
   iconShowPassword: {
-    type: String,
-    default: TYPES_ICON.PASSWORD_SHOW
+    type: [String, Object],
+    default: ACTION_ICONS.showPassword
   },
   /**
    * VvIcon name for hide password button
    * @see VVIcon
    */
   iconHidePassword: {
-    type: String,
-    default: TYPES_ICON.PASSWORD_HIDE
+    type: [String, Object],
+    default: ACTION_ICONS.hidePassword
   },
   /**
    * VvIcon name for clear button
    * @see VVIcon
    */
   iconClear: {
-    type: String,
-    default: TYPES_ICON.SEARCH
+    type: [String, Object],
+    default: ACTION_ICONS.clear
   },
   /**
    * Label for step up button
@@ -906,6 +906,41 @@ const VvInputTextProps = {
     default: false
   }
 };
+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$1
@@ -924,12 +959,12 @@ const VvInputPasswordAction = defineComponent({
       default: "Hide password"
     },
     iconShow: {
-      type: String,
-      default: TYPES_ICON.PASSWORD_SHOW
+      type: [String, Object],
+      default: ACTION_ICONS.showPassword
     },
     iconHide: {
-      type: String,
-      default: TYPES_ICON.PASSWORD_HIDE
+      type: [String, Object],
+      default: ACTION_ICONS.hidePassword
     }
   },
   emits: ["toggle-password"],
@@ -938,6 +973,7 @@ const VvInputPasswordAction = defineComponent({
     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) {
@@ -948,14 +984,15 @@ const VvInputPasswordAction = defineComponent({
     return {
       active,
       activeIcon,
+      hasIcon,
       onClick
     };
   },
   render() {
-    const icon = h(_sfc_main$1, {
-      name: this.activeIcon,
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
       class: "vv-input-text__icon"
-    });
+    }) : void 0;
     return h(
       "button",
       {
@@ -1028,12 +1065,13 @@ const VvInputClearAction = defineComponent({
       default: "Clear"
     },
     icon: {
-      type: String,
+      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) {
@@ -1041,14 +1079,15 @@ const VvInputClearAction = defineComponent({
       }
     }
     return {
+      hasIcon,
       onClick
     };
   },
   render() {
-    const icon = h(_sfc_main$1, {
-      name: this.icon,
+    const icon = this.hasIcon ? h(_sfc_main$1, {
+      ...this.hasIcon,
       class: "vv-input-text__icon"
-    });
+    }) : void 0;
     return h(
       "button",
       {
@@ -1192,7 +1231,7 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
 function useDebouncedInput(modelValue, emit, ms = 0, {
   getter = (value) => value,
   setter = (value) => value
@@ -1222,41 +1261,6 @@ 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 useTextCount(text, options) {
   const length = computed(() => {
     return (unref(text) ?? "").length;
@@ -1297,17 +1301,16 @@ const _hoisted_3 = {
   key: 0,
   class: "vv-input-text__input-before"
 };
-const _hoisted_4 = ["onClick"];
-const _hoisted_5 = ["id"];
-const _hoisted_6 = {
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
   key: 1,
   class: "vv-input-text__unit"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 5,
   class: "vv-input-text__input-after"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 6,
   class: "vv-input-text__limit"
 };
@@ -1318,8 +1321,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvInputTextProps,
   emits: VvInputTextEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvInputText",
@@ -1482,7 +1486,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return;
         }
         inputEl.value.stepUp();
-        localModelValue.value = unref(inputEl).value;
+        localModelValue.value = Number(unref(inputEl).value);
       }
     };
     const onStepDown = () => {
@@ -1492,31 +1496,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return;
         }
         inputEl.value.stepDown();
-        localModelValue.value = unref(inputEl).value;
+        localModelValue.value = Number(unref(inputEl).value);
       }
     };
     const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
     const onClear = () => {
       localModelValue.value = "";
     };
-    const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-      icon,
-      iconPosition
-    );
-    const defaultAfterIcon = computed(() => {
+    const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition);
+    const iconAfter = computed(() => {
+      if (hasIconAfter.value !== void 0) {
+        return hasIconAfter.value;
+      }
       switch (props.type) {
         case INPUT_TYPES.COLOR:
-          return { name: TYPES_ICON.COLOR };
+          return { name: ACTION_ICONS.showColorPicker };
         case INPUT_TYPES.DATE:
         case INPUT_TYPES.DATETIME_LOCAL:
         case INPUT_TYPES.WEEK:
         case INPUT_TYPES.MONTH:
-          return { name: TYPES_ICON.DATE };
+          return { name: ACTION_ICONS.showDatePicker };
         case INPUT_TYPES.TIME:
-          return { name: TYPES_ICON.TIME };
-        default:
-          return "";
+          return { name: ACTION_ICONS.showTimePicker };
       }
+      return void 0;
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
       mode: count.value,
@@ -1547,8 +1550,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         loading: loading.value,
         disabled: props.disabled,
         readonly: props.readonly,
-        "icon-before": hasIconBefore.value,
-        "icon-after": hasIconAfter.value || !isEmpty(defaultAfterIcon),
+        "icon-before": !!hasIconBefore.value,
+        "icon-after": !!iconAfter.value,
         floating: props.floating && !isEmpty(props.label),
         dirty: isDirty.value,
         focus: isFocused.value,
@@ -1656,101 +1659,136 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("keydown", event);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        unref(label) ? (openBlock(), createElementBlock("label", {
-          key: 0,
-          for: unref(hasId),
-          class: "vv-input-text__label"
-        }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2, [
-          _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", {
-            ref_key: "innerEl",
-            ref: innerEl,
-            class: "vv-input-text__inner",
-            onClick: withModifiers(onClickInner, ["stop"])
-          }, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
-              key: 0,
-              class: "vv-input-text__icon"
-            }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            createElementVNode("input", mergeProps({
-              id: unref(hasId),
-              ref_key: "inputEl",
-              ref: inputEl
-            }, unref(hasAttrs), {
-              style: unref(hasStyle),
-              onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
-              onKeydown: onKeyDown,
-              onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
-            }), null, 16, _hoisted_5),
-            (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_6, [
-              renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-                createTextVNode(toDisplayString(_ctx.unit), 1)
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          unref(label) ? (openBlock(), createElementBlock("label", {
+            key: 0,
+            for: unref(hasId),
+            class: "vv-input-text__label"
+          }, toDisplayString(unref(label)), 9, _hoisted_1)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2, [
+            _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              createCommentVNode(" @slot Slot before input icon "),
+              renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            createElementVNode(
+              "div",
+              {
+                ref_key: "innerEl",
+                ref: innerEl,
+                class: "vv-input-text__inner",
+                onClick: withModifiers(onClickInner, ["stop"])
+              },
+              [
+                unref(hasIconBefore) ? (openBlock(), createBlock(
+                  _sfc_main$1,
+                  mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-input-text__icon" }),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                )) : createCommentVNode("v-if", true),
+                createElementVNode("input", mergeProps({
+                  id: unref(hasId),
+                  ref_key: "inputEl",
+                  ref: inputEl
+                }, unref(hasAttrs), {
+                  style: unref(hasStyle),
+                  onKeyup: _cache[0] || (_cache[0] = ($event) => emit("keyup", $event)),
+                  onKeydown: onKeyDown,
+                  onKeypress: _cache[1] || (_cache[1] = ($event) => emit("keypress", $event))
+                }), null, 16, _hoisted_4),
+                (_ctx.unit || _ctx.$slots.unit) && unref(isDirty) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  createCommentVNode(" @slot Slot to replace unit"),
+                  renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                    createTextVNode(
+                      toDisplayString(_ctx.unit),
+                      1
+                      /* TEXT */
+                    )
+                  ])
+                ])) : createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            ),
+            createCommentVNode(" @slot Slot to replace right icon "),
+            unref(iconAfter) ? (openBlock(), createBlock(
+              _sfc_main$1,
+              mergeProps({ key: 1 }, unref(iconAfter), { class: "vv-input-text__icon vv-input-text__icon-after" }),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
+              key: 2,
+              onTogglePassword
+            })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
+              key: 3,
+              onStepUp,
+              onStepDown
+            })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
+              key: 4,
+              onClear
+            })) : createCommentVNode("v-if", true),
+            createCommentVNode(" @slot Slot after input "),
+            _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              createCommentVNode(" @slot Slot before input icon "),
+              renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
+            ])) : createCommentVNode("v-if", true),
+            unref(count) ? (openBlock(), createElementBlock("span", _hoisted_7, [
+              createCommentVNode(" @slot Slot to replace count "),
+              renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
+                createTextVNode(
+                  toDisplayString(unref(countFormatted)),
+                  1
+                  /* TEXT */
+                )
               ])
-            ])) : createCommentVNode("", true)
-          ], 8, _hoisted_4),
-          unref(hasIconAfter) || unref(defaultAfterIcon) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
-            key: 1,
-            class: "vv-input-text__icon vv-input-text__icon-after"
-          }, unref(hasIconAfter) ? unref(hasIcon) : unref(defaultAfterIcon)), null, 16)) : unref(isPassword) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(PasswordInputActions), {
-            key: 2,
-            onTogglePassword
-          })) : unref(isNumber) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(NumberInputActions), {
-            key: 3,
-            onStepUp,
-            onStepDown
-          })) : unref(isSearch) && !_ctx.hideActions && unref(isClickable) ? (openBlock(), createBlock(unref(SearchInputActions), {
-            key: 4,
-            onClear
-          })) : createCommentVNode("", true),
-          _ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_7, [
-            renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps(unref(slotProps))))
-          ])) : createCommentVNode("", true),
-          unref(count) ? (openBlock(), createElementBlock("span", _hoisted_8, [
-            renderSlot(_ctx.$slots, "count", normalizeProps(guardReactiveProps(unref(slotProps))), () => [
-              createTextVNode(toDisplayString(unref(countFormatted)), 1)
-            ])
-          ])) : createCommentVNode("", true)
-        ]),
-        createVNode(unref(HintSlot), {
-          id: unref(hasHintId),
-          class: "vv-input-text__hint"
-        }, createSlots({ _: 2 }, [
-          _ctx.$slots.hint ? {
-            name: "hint",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "0"
-          } : void 0,
-          _ctx.$slots.loading ? {
-            name: "loading",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "1"
-          } : void 0,
-          _ctx.$slots.valid ? {
-            name: "valid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "2"
-          } : void 0,
-          _ctx.$slots.invalid ? {
-            name: "invalid",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
-            ]),
-            key: "3"
-          } : void 0
-        ]), 1032, ["id"])
-      ], 2);
+            ])) : createCommentVNode("v-if", true)
+          ]),
+          createVNode(unref(HintSlot), {
+            id: unref(hasHintId),
+            class: "vv-input-text__hint"
+          }, createSlots({
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.hint ? {
+              name: "hint",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.valid ? {
+              name: "valid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "valid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.invalid ? {
+              name: "invalid",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "invalid", normalizeProps(guardReactiveProps(unref(hintSlotScope))))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1032, ["id"])
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });