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

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

@@ -1,5 +1,5 @@
-import { unref, computed, defineComponent, h, inject, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, useSlots, createElementBlock, normalizeClass, toDisplayString, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, withModifiers, withDirectives, isRef, vModelDynamic, createTextVNode, createVNode, createSlots, withCtx } from "vue";
-import { Mask } from "maska";
+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 { useIMask } from "vue-imask";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { nanoid } from "nanoid";
 import { useFocus, useElementVisibility } from "@vueuse/core";
@@ -15,19 +15,27 @@ function joinLines(items) {
   }
   return items;
 }
-function HintSlotFactory(props, slots) {
-  const invalidLabel = computed(() => joinLines(props.invalidLabel));
-  const validLabel = computed(() => joinLines(props.validLabel));
-  const loadingLabel = computed(() => props.loadingLabel);
-  const hintLabel = computed(() => props.hintLabel);
+function HintSlotFactory(propsOrRef, slots) {
+  const props = computed(() => {
+    if (isRef(propsOrRef)) {
+      return propsOrRef.value;
+    }
+    return propsOrRef;
+  });
+  const invalidLabel = computed(() => joinLines(props.value.invalidLabel));
+  const validLabel = computed(() => joinLines(props.value.validLabel));
+  const loadingLabel = computed(() => props.value.loadingLabel);
+  const hintLabel = computed(() => props.value.hintLabel);
   const hasLoadingLabelOrSlot = computed(
-    () => Boolean(props.loading && (slots.loading || loadingLabel.value))
+    () => Boolean(props.value.loading && (slots.loading || loadingLabel.value))
   );
   const hasInvalidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && Boolean(props.invalid && (slots.invalid || invalidLabel.value))
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
   );
   const hasValidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.valid && (slots.valid || validLabel.value))
+    () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && Boolean(props.value.valid && (slots.valid || validLabel.value))
   );
   const hasHintLabelOrSlot = computed(
     () => !hasLoadingLabelOrSlot.value && !hasInvalidLabelOrSlot.value && !hasValidLabelOrSlot.value && Boolean(slots.hint || hintLabel.value)
@@ -36,10 +44,10 @@ function HintSlotFactory(props, slots) {
     () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
   );
   const hintSlotScope = computed(() => ({
-    modelValue: props.modelValue,
-    valid: props.valid,
-    invalid: props.invalid,
-    loading: props.loading
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
   }));
   const HintSlot = defineComponent({
     name: "HintSlot",
@@ -213,6 +221,11 @@ const VvIconProps = {
     type: [String, Array]
   }
 };
+var Strategy = /* @__PURE__ */ ((Strategy2) => {
+  Strategy2["absolute"] = "absolute";
+  Strategy2["fixed"] = "fixed";
+  return Strategy2;
+})(Strategy || {});
 var Side = /* @__PURE__ */ ((Side2) => {
   Side2["left"] = "left";
   Side2["right"] = "right";
@@ -529,19 +542,15 @@ const IdProps = {
   placement: {
     type: String,
     default: Side.bottom,
-    validator: (value) => {
-      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
-    }
+    validator: (value) => Object.values(Side).includes(value) || Object.values(Placement).includes(value)
   },
   /**
    * Dropdown strategy
    */
   strategy: {
     type: String,
-    default: "absolute",
-    validator: (value) => {
-      return ["fixed", "absolute"].includes(value);
-    }
+    default: void 0,
+    validator: (value) => Object.values(Strategy).includes(value)
   },
   /**
    * Dropdown show / hide transition name
@@ -700,6 +709,13 @@ const InputTextareaProps = {
     type: String,
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
+  },
+  /**
+   * Button aria-label
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
   }
 });
 const INPUT_TYPES = {
@@ -725,7 +741,23 @@ const TYPES_ICON = {
   COLOR: "color",
   SEARCH: "close"
 };
-const VvInputTextEvents = ["update:modelValue", "focus", "blur", "keyup"];
+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,
   /**
@@ -832,44 +864,19 @@ const VvInputTextProps = {
     default: "Clear"
   },
   /**
-   * Input mask, only for text type
-   * @see https://beholdr.github.io/maska/
-   */
-  mask: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * Show mask before typing
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-   */
-  maskEager: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Write values reverse (ex. for numbers)
-   * @see https://beholdr.github.io/maska/#/?id=maskinput-options
-   */
-  maskReversed: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * Add mask custom tokens
-   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+   * iMask options
+   * @see https://imask.js.org/guide.html
    */
-  maskTokens: {
+  iMask: {
     type: Object,
     default: void 0
   },
   /**
-   * Replace default tokens
-   * @see https://beholdr.github.io/maska/#/?id=custom-tokens
+   * Masked value
    */
-  maskTokensReplace: {
-    type: Boolean,
-    default: false
+  masked: {
+    type: String,
+    default: void 0
   },
   /**
    * Adjust input width to content
@@ -890,6 +897,13 @@ const VvInputTextProps = {
    */
   unit: {
     type: String
+  },
+  /**
+   * Select input text on focus
+   */
+  selectOnFocus: {
+    type: Boolean,
+    default: false
   }
 };
 const VvInputPasswordAction = defineComponent({
@@ -1125,6 +1139,59 @@ function VvInputTextActionsFactory(type, parentProps) {
     }
   };
 }
+function useDefaults(componentName, propsDefinition, props) {
+  const volver = useVolver();
+  const volverComponentDefaults = computed(() => {
+    var _a;
+    if (!volver || !((_a = volver.defaults.value) == null ? void 0 : _a[componentName])) {
+      return void 0;
+    }
+    return volver.defaults.value[componentName];
+  });
+  return computed(() => {
+    if (volverComponentDefaults.value === void 0) {
+      return props;
+    }
+    const componentDefaults = volverComponentDefaults.value;
+    const simplifiedPropsDefinition = propsDefinition;
+    const simplifiedProps = props;
+    return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+      const propValue = simplifiedProps[key];
+      acc[key] = propValue;
+      if (key in componentDefaults) {
+        if (Array.isArray(simplifiedPropsDefinition[key])) {
+          const typeArray = simplifiedPropsDefinition[key];
+          if (typeArray.length) {
+            const typeFunction = typeArray[0];
+            if (typeFunction === propValue) {
+              acc[key] = componentDefaults[key];
+            }
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "function") {
+          const typeFunction = simplifiedPropsDefinition[key];
+          if (typeFunction() === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+        if (typeof simplifiedPropsDefinition[key] === "object") {
+          let defaultValue = simplifiedPropsDefinition[key].default;
+          if (typeof defaultValue === "function") {
+            defaultValue = defaultValue();
+          }
+          if (typeof defaultValue === "object") {
+            if (JSON.stringify(defaultValue) === JSON.stringify(propValue)) {
+              acc[key] = componentDefaults[key];
+            }
+          } else if (defaultValue === propValue) {
+            acc[key] = componentDefaults[key];
+          }
+        }
+      }
+      return acc;
+    }, {});
+  });
+}
 const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
 function useDebouncedInput(modelValue, emit, ms = 0, {
   getter = (value) => value,
@@ -1254,9 +1321,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const slots = useSlots();
-    const inputEl = ref();
-    const innerEl = ref();
-    __expose({ $inner: innerEl });
+    const propsDefaults = useDefaults(
+      "VvInputText",
+      VvInputTextProps,
+      props
+    );
     const {
       id,
       icon,
@@ -1266,39 +1335,131 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       count,
       valid,
       invalid,
-      loading
+      loading,
+      debounce,
+      maxlength,
+      minlength,
+      type,
+      iMask,
+      step
     } = toRefs(props);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
     const inputTextPlaceholder = computed(
       () => props.floating && isEmpty(props.placeholder) ? " " : props.placeholder
     );
-    const localModelValue = useDebouncedInput(
-      modelValue,
-      emit,
-      props.debounce,
+    const maskReady = ref(false);
+    const { el, mask, typed, masked, unmasked } = useIMask(
+      computed(
+        () => (iMask == null ? void 0 : iMask.value) ?? {
+          mask: /./
+        }
+      ),
       {
-        getter: (value) => {
-          if (mask.value) {
-            return mask.value.masked(value ?? "");
+        emit,
+        onAccept: () => {
+          if (!maskReady.value) {
+            return;
           }
-          return value;
-        },
-        setter: (value) => {
-          if (mask.value) {
-            value = mask.value.unmasked(value);
+          emit("update:masked", masked.value);
+          if (type.value === INPUT_TYPES.NUMBER) {
+            if (masked.value === "") {
+              if (localModelValue.value === null || localModelValue.value === void 0) {
+                return;
+              }
+              localModelValue.value = void 0;
+              return;
+            }
+            if (typeof typed.value !== "number") {
+              localModelValue.value = Number(typed.value);
+              return;
+            }
+            localModelValue.value = typed.value;
+            return;
           }
-          if (props.type === INPUT_TYPES.NUMBER) {
-            return Number(value);
+          if (type.value === INPUT_TYPES.DATE) {
+            if (el.value instanceof HTMLInputElement && el.value.type === "date") {
+              localModelValue.value = el.value.value;
+              return;
+            }
+            let date = typed.value;
+            if (date === null || date === "") {
+              if (!localModelValue.value) {
+                return;
+              }
+              localModelValue.value = "";
+              return;
+            }
+            if (!(date instanceof Date)) {
+              date = new Date(date);
+            }
+            localModelValue.value = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}`;
+            return;
           }
-          return value;
+          if (type.value === INPUT_TYPES.DATETIME_LOCAL) {
+            if (el.value instanceof HTMLInputElement && el.value.type === "datetime-local") {
+              localModelValue.value = el.value.value;
+              return;
+            }
+            let date = typed.value;
+            if (date === null || date === "") {
+              if (!localModelValue.value) {
+                return;
+              }
+              localModelValue.value = "";
+              return;
+            }
+            if (!(typed.value instanceof Date)) {
+              date = new Date(date);
+            }
+            localModelValue.value = `${date.getFullYear()}-${("0" + (date.getMonth() + 1)).slice(-2)}-${("0" + date.getDate()).slice(-2)}T${("0" + date.getHours()).slice(-2)}:${("0" + date.getMinutes()).slice(-2)}`;
+            return;
+          }
+          if (!localModelValue.value && !unmasked.value) {
+            return;
+          }
+          localModelValue.value = unmasked.value;
+        }
+      }
+    );
+    onMounted(() => {
+      if (mask.value) {
+        maskReady.value = true;
+        typed.value = localModelValue.value ?? "";
+      }
+    });
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        var _a;
+        if (mask.value) {
+          typed.value = newValue && ((_a = iMask == null ? void 0 : iMask.value) == null ? void 0 : _a.mask) === Date ? new Date(newValue) : newValue ?? "";
         }
       }
     );
+    watch(
+      () => props.masked,
+      (newValue) => {
+        masked.value = newValue ?? "";
+      }
+    );
+    const inputEl = el;
+    const innerEl = ref();
+    __expose({ $inner: innerEl });
+    const localModelValue = useDebouncedInput(
+      modelValue,
+      emit,
+      (debounce == null ? void 0 : debounce.value) ?? 0
+    );
     const { focused } = useComponentFocus(inputEl, emit);
     const isFocused = computed(
       () => focused.value && !props.disabled && !props.readonly
     );
+    watch(isFocused, (newValue) => {
+      if (newValue && propsDefaults.value.selectOnFocus && inputEl.value) {
+        inputEl.value.select();
+      }
+    });
     const isVisible = useElementVisibility(inputEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus && !props.disabled && !props.readonly) {
@@ -1316,19 +1477,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isNumber = computed(() => props.type === INPUT_TYPES.NUMBER);
     const onStepUp = () => {
       if (isClickable.value) {
+        if (iMask == null ? void 0 : iMask.value) {
+          typed.value = typed.value + Number((step == null ? void 0 : step.value) ?? 1);
+          return;
+        }
         inputEl.value.stepUp();
         localModelValue.value = unref(inputEl).value;
       }
     };
     const onStepDown = () => {
       if (isClickable.value) {
+        if (iMask == null ? void 0 : iMask.value) {
+          typed.value = typed.value - Number((step == null ? void 0 : step.value) ?? 1);
+          return;
+        }
         inputEl.value.stepDown();
         localModelValue.value = unref(inputEl).value;
       }
     };
     const isSearch = computed(() => props.type === INPUT_TYPES.SEARCH);
     const onClear = () => {
-      localModelValue.value = void 0;
+      localModelValue.value = "";
     };
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
@@ -1350,9 +1519,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const { formatted: countFormatted } = useTextCount(localModelValue, {
-      mode: props.count,
-      upperLimit: Number(props.maxlength),
-      lowerLimit: Number(props.minlength)
+      mode: count.value,
+      upperLimit: Number(maxlength == null ? void 0 : maxlength.value),
+      lowerLimit: Number(minlength == null ? void 0 : minlength.value)
     });
     const isClickable = computed(() => !props.disabled && !props.readonly);
     const hasTabindex = computed(
@@ -1387,17 +1556,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     const hasAttrs = computed(() => {
-      const type = (() => {
+      const type2 = (() => {
         if (isPassword.value && showPassword.value) {
           return INPUT_TYPES.TEXT;
         }
         if (isDateTime.value && !isDirty.value && !focused.value) {
           return INPUT_TYPES.TEXT;
         }
+        if (iMask == null ? void 0 : iMask.value) {
+          return INPUT_TYPES.TEXT;
+        }
         return props.type;
       })();
       const toReturn = {
-        type,
+        type: type2,
         name: props.name,
         tabindex: hasTabindex.value,
         disabled: props.disabled,
@@ -1408,20 +1580,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
         "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
       };
-      if (type === INPUT_TYPES.DATE || type === INPUT_TYPES.MONTH || type === INPUT_TYPES.WEEK || type === INPUT_TYPES.TIME || type === INPUT_TYPES.DATETIME_LOCAL || type === INPUT_TYPES.NUMBER) {
+      if (type2 === INPUT_TYPES.DATE || type2 === INPUT_TYPES.MONTH || type2 === INPUT_TYPES.WEEK || type2 === INPUT_TYPES.TIME || type2 === INPUT_TYPES.DATETIME_LOCAL || type2 === INPUT_TYPES.NUMBER) {
         toReturn.step = props.step;
         toReturn.max = props.max !== void 0 ? String(props.max) : void 0;
         toReturn.min = props.min !== void 0 ? String(props.min) : void 0;
       }
-      if (type === INPUT_TYPES.TEXT || type === INPUT_TYPES.SEARCH || type === INPUT_TYPES.URL || type === INPUT_TYPES.TEL || type === INPUT_TYPES.EMAIL || type === INPUT_TYPES.PASSWORD || type === INPUT_TYPES.NUMBER) {
+      if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD || type2 === INPUT_TYPES.NUMBER) {
         toReturn.placeholder = inputTextPlaceholder.value;
       }
-      if (type === INPUT_TYPES.TEXT || type === INPUT_TYPES.SEARCH || type === INPUT_TYPES.URL || type === INPUT_TYPES.TEL || type === INPUT_TYPES.EMAIL || type === INPUT_TYPES.PASSWORD) {
+      if (type2 === INPUT_TYPES.TEXT || type2 === INPUT_TYPES.SEARCH || type2 === INPUT_TYPES.URL || type2 === INPUT_TYPES.TEL || type2 === INPUT_TYPES.EMAIL || type2 === INPUT_TYPES.PASSWORD) {
         toReturn.minlength = props.minlength;
         toReturn.maxlength = props.maxlength;
         toReturn.pattern = props.pattern;
       }
-      if (type === INPUT_TYPES.EMAIL) {
+      if (type2 === INPUT_TYPES.EMAIL) {
         toReturn.multiple = props.multiple;
       }
       return toReturn;
@@ -1440,7 +1612,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const PasswordInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.PASSWORD,
       props
@@ -1453,31 +1625,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       INPUT_TYPES.SEARCH,
       props
     );
-    const mask = ref();
-    watch(
-      [
-        () => props.mask,
-        () => props.type,
-        () => props.maskEager,
-        () => props.maskReversed,
-        () => props.maskTokens,
-        () => props.maskTokensReplace
-      ],
-      ([newMask, newType, eager, reversed, tokens, tokensReplace]) => {
-        if (newMask && newType === INPUT_TYPES.TEXT) {
-          mask.value = new Mask({
-            mask: newMask,
-            eager,
-            reversed,
-            tokens,
-            tokensReplace
-          });
-          return;
-        }
-        mask.value = void 0;
-      },
-      { immediate: true }
-    );
     const onClickInner = () => {
       if (isClickable.value) {
         focused.value = true;
@@ -1491,6 +1638,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         width: localModelValue.value !== void 0 ? `${String(localModelValue.value).length + 1}ch` : void 0
       };
     });
+    const onKeyDown = (event) => {
+      switch (event.code) {
+        case "ArrowUp":
+          if (isNumber.value) {
+            onStepUp();
+            event.preventDefault();
+          }
+          break;
+        case "ArrowDown":
+          if (isNumber.value) {
+            onStepDown();
+            event.preventDefault();
+          }
+          break;
+      }
+      emit("keydown", event);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref(bemCssClasses))
@@ -1514,17 +1678,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 0,
               class: "vv-input-text__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
-            withDirectives(createElementVNode("input", mergeProps({
+            createElementVNode("input", mergeProps({
               id: unref(hasId),
               ref_key: "inputEl",
-              ref: inputEl,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(localModelValue) ? localModelValue.value = $event : null)
+              ref: inputEl
             }, unref(hasAttrs), {
               style: unref(hasStyle),
-              onKeyup: _cache[1] || (_cache[1] = ($event) => emit("keyup", $event))
-            }), null, 16, _hoisted_5), [
-              [vModelDynamic, unref(localModelValue)]
-            ]),
+              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)