@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.40

package/dist/components/VvCheckbox/VvCheckbox.es.js

@@ -1,5 +1,214 @@
-import { unref, inject, computed, toRef, toRefs, isRef, defineComponent, h, useSlots, ref, watchEffect, watch, onMounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
+import { computed, isRef, defineComponent, h, inject, toRef, toRefs, unref, useSlots, ref, watchEffect, watch, onMounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
 import { uid } from "uid";
+function equals(obj1, obj2, field) {
+  if (field) {
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  }
+  return deepEquals(obj1, obj2);
+}
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length !== b.length)
+        return false;
+      for (i = length; i-- !== 0; ) {
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      }
+      return true;
+    }
+    if (arrA !== arrB)
+      return false;
+    const dateA = a instanceof Date;
+    const dateB = b instanceof Date;
+    if (dateA !== dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() === b.getTime();
+    const regexpA = a instanceof RegExp;
+    const regexpB = b instanceof RegExp;
+    if (regexpA !== regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() === b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; ) {
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    }
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return Number.isNaN(a) && Number.isNaN(b);
+}
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (!field.includes(".")) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    return null;
+  }
+}
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function isString(value) {
+  return typeof value === "string" || value instanceof String;
+}
+function joinLines(items) {
+  if (Array.isArray(items)) {
+    return items.filter((item) => isString(item)).join(" ");
+  }
+  return items;
+}
+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.value.loading && (slots.loading || loadingLabel.value))
+  );
+  const hasInvalidLabelOrSlot = computed(
+    () => !hasLoadingLabelOrSlot.value && Boolean(
+      props.value.invalid && (slots.invalid || invalidLabel.value)
+    )
+  );
+  const hasValidLabelOrSlot = computed(
+    () => !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)
+  );
+  const isVisible = computed(
+    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
+  );
+  const hintSlotScope = computed(() => ({
+    modelValue: props.value.modelValue,
+    valid: props.value.valid,
+    invalid: props.value.invalid,
+    loading: props.value.loading
+  }));
+  const HintSlot = defineComponent({
+    name: "HintSlot",
+    props: {
+      tag: {
+        type: String,
+        default: "small"
+      }
+    },
+    setup() {
+      return {
+        isVisible,
+        invalidLabel,
+        validLabel,
+        loadingLabel,
+        hintLabel,
+        hasInvalidLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hasHintLabelOrSlot
+      };
+    },
+    render() {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      if (this.isVisible) {
+        let role;
+        if (this.hasInvalidLabelOrSlot) {
+          role = "alert";
+        }
+        if (this.hasValidLabelOrSlot) {
+          role = "status";
+        }
+        if (this.hasLoadingLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
+          );
+        }
+        if (this.hasInvalidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
+          );
+        }
+        if (this.hasValidLabelOrSlot) {
+          return h(
+            this.tag,
+            {
+              role
+            },
+            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
+          );
+        }
+        return h(
+          this.tag,
+          {
+            role
+          },
+          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
+        );
+      }
+      return null;
+    }
+  });
+  return {
+    hasInvalidLabelOrSlot,
+    hasHintLabelOrSlot,
+    hasValidLabelOrSlot,
+    hasLoadingLabelOrSlot,
+    hintSlotScope,
+    HintSlot
+  };
+}
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -34,15 +243,17 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
-const INJECTION_KEY_CHECK_GROUP = Symbol.for("checkGroup");
+const INJECTION_KEY_CHECK_GROUP = Symbol.for(
+  "checkGroup"
+);
 const LinkProps = {
   /**
    * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
@@ -58,10 +269,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -74,27 +282,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
    */
@@ -107,43 +321,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: Boolean
+  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: "" }
@@ -153,7 +388,10 @@ const HintProps = {
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -198,7 +436,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -266,7 +505,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 const IdNameProps = {
@@ -293,11 +533,17 @@ const CheckboxRadioProps = {
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
    */
-  value: [String, Number, Boolean],
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
   /**
    * Input value
    */
-  modelValue: [Object, Number, Boolean, String]
+  modelValue: {
+    type: [Object, Number, Boolean, String],
+    default: void 0
+  }
 };
 ({
   ...DisabledProps,
@@ -320,102 +566,32 @@ const CheckboxRadioProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
-function equals(obj1, obj2, field) {
-  if (field) {
-    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
-  }
-  return deepEquals(obj1, obj2);
-}
-function deepEquals(a, b) {
-  if (a === b)
-    return true;
-  if (a && b && typeof a == "object" && typeof b == "object") {
-    const arrA = Array.isArray(a);
-    const arrB = Array.isArray(b);
-    let i, length, key;
-    if (arrA && arrB) {
-      length = a.length;
-      if (length != b.length)
-        return false;
-      for (i = length; i-- !== 0; )
-        if (!deepEquals(a[i], b[i]))
-          return false;
-      return true;
-    }
-    if (arrA != arrB)
-      return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
-      return false;
-    if (dateA && dateB)
-      return a.getTime() == b.getTime();
-    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
-    if (regexpA != regexpB)
-      return false;
-    if (regexpA && regexpB)
-      return a.toString() == b.toString();
-    const keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length)
-      return false;
-    for (i = length; i-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
-        return false;
-    for (i = length; i-- !== 0; ) {
-      key = keys[i];
-      if (!deepEquals(a[key], b[key]))
-        return false;
-    }
-    return true;
-  }
-  return a !== a && b !== b;
-}
-function resolveFieldData(data, field) {
-  if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
-      return data[field];
-    } else {
-      const fields = field.split(".");
-      let value = data;
-      for (let i = 0, len = fields.length; i < len; ++i) {
-        if (data == null) {
-          return null;
-        }
-        value = value[fields[i]];
-      }
-      return value;
-    }
-  } else {
-    return null;
-  }
-}
-function contains(value, list) {
-  if (value != null && list && list.length) {
-    for (const val of list) {
-      if (equals(value, val)) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-function isEmpty(value) {
-  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
-}
-function isString(value) {
-  return typeof value === "string" || value instanceof String;
-}
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 function useInjectedGroupState(groupKey) {
   const group = inject(groupKey, void 0);
-  const isInGroup = computed(() => !isEmpty(group));
+  const isInGroup = computed(() => group !== void 0);
   function getGroupOrLocalRef(propName, props, emit) {
-    if (group == null ? void 0 : group.value) {
-      const groupPropValue = unref(group.value)[propName];
+    const groupPropValue = group == null ? void 0 : group[propName];
+    if (groupPropValue) {
       return computed({
         get() {
-          return groupPropValue == null ? void 0 : groupPropValue.value;
+          return groupPropValue.value;
         },
         set(value) {
           groupPropValue.value = value;
@@ -428,8 +604,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -463,16 +640,10 @@ function useGroupProps(props, emit) {
   const valid = getGroupOrLocalRef("valid", props);
   const invalid = getGroupOrLocalRef("invalid", props);
   const readonly = computed(
-    () => {
-      var _a;
-      return Boolean(props.readonly || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.readonly.value));
-    }
+    () => Boolean(props.readonly || (group == null ? void 0 : group.readonly.value))
   );
   const disabled = computed(
-    () => {
-      var _a;
-      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
-    }
+    () => Boolean(props.disabled || (group == null ? void 0 : group.disabled.value))
   );
   return {
     // local props
@@ -489,124 +660,6 @@ function useGroupProps(props, emit) {
     disabled
   };
 }
-function joinLines(items) {
-  if (Array.isArray(items)) {
-    return items.filter((item) => isString(item)).join(" ");
-  }
-  return items;
-}
-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.value.loading && (slots.loading || loadingLabel.value))
-  );
-  const hasInvalidLabelOrSlot = computed(
-    () => !hasLoadingLabelOrSlot.value && Boolean(
-      props.value.invalid && (slots.invalid || invalidLabel.value)
-    )
-  );
-  const hasValidLabelOrSlot = computed(
-    () => !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)
-  );
-  const isVisible = computed(
-    () => hasInvalidLabelOrSlot.value || hasValidLabelOrSlot.value || hasLoadingLabelOrSlot.value || hasHintLabelOrSlot.value
-  );
-  const hintSlotScope = computed(() => ({
-    modelValue: props.value.modelValue,
-    valid: props.value.valid,
-    invalid: props.value.invalid,
-    loading: props.value.loading
-  }));
-  const HintSlot = defineComponent({
-    name: "HintSlot",
-    props: {
-      tag: {
-        type: String,
-        default: "small"
-      }
-    },
-    setup() {
-      return {
-        isVisible,
-        invalidLabel,
-        validLabel,
-        loadingLabel,
-        hintLabel,
-        hasInvalidLabelOrSlot,
-        hasValidLabelOrSlot,
-        hasLoadingLabelOrSlot,
-        hasHintLabelOrSlot
-      };
-    },
-    render() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if (this.isVisible) {
-        let role;
-        if (this.hasInvalidLabelOrSlot) {
-          role = "alert";
-        }
-        if (this.hasValidLabelOrSlot) {
-          role = "status";
-        }
-        if (this.hasLoadingLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_b = (_a = this.$slots).loading) == null ? void 0 : _b.call(_a)) ?? this.loadingLabel
-          );
-        }
-        if (this.hasInvalidLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_d = (_c = this.$slots).invalid) == null ? void 0 : _d.call(_c)) ?? this.$slots.invalid ?? this.invalidLabel
-          );
-        }
-        if (this.hasValidLabelOrSlot) {
-          return h(
-            this.tag,
-            {
-              role
-            },
-            ((_f = (_e = this.$slots).valid) == null ? void 0 : _f.call(_e)) ?? this.validLabel
-          );
-        }
-        return h(
-          this.tag,
-          {
-            role
-          },
-          ((_h = (_g = this.$slots).hint) == null ? void 0 : _h.call(_g)) ?? this.$slots.hint ?? this.hintLabel
-        );
-      }
-      return null;
-    }
-  });
-  return {
-    hasInvalidLabelOrSlot,
-    hasHintLabelOrSlot,
-    hasValidLabelOrSlot,
-    hasLoadingLabelOrSlot,
-    hintSlotScope,
-    HintSlot
-  };
-}
 function useVolver() {
   return inject(INJECTION_KEY_VOLVER);
 }
@@ -663,7 +716,9 @@ function useDefaults(componentName, propsDefinition, props) {
     }, {});
   });
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || uid()));
+}
 function useModifiers(prefix, modifiers, others) {
   return computed(() => {
     const toReturn = {
@@ -696,8 +751,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvCheckbox",
@@ -761,8 +817,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (isBinary.value) {
           modelValue.value = newValue ? props.value : props.uncheckedValue;
         } else if (Array.isArray(modelValue.value) || isInGroup.value) {
+          const currentValue = modelValue.value ?? [];
           const toReturn = new Set(
-            Array.isArray(modelValue.value) ? modelValue.value : modelValue.value !== void 0 ? [modelValue.value] : []
+            Array.isArray(currentValue) ? currentValue : [currentValue]
           );
           if (newValue) {
             toReturn.add(props.value);
@@ -840,12 +897,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           [vModelCheckbox, unref(localModelValue)]
         ]),
         renderSlot(_ctx.$slots, "default", { value: unref(modelValue) }, () => [
-          createTextVNode(toDisplayString(_ctx.label), 1)
+          createTextVNode(
+            toDisplayString(_ctx.label),
+            1
+            /* TEXT */
+          )
         ]),
         createVNode(unref(HintSlot), {
           id: unref(hasHintId),
           class: "vv-checkbox__hint"
-        }, createSlots({ _: 2 }, [
+        }, createSlots({
+          _: 2
+          /* DYNAMIC */
+        }, [
           _ctx.$slots.hint ? {
             name: "hint",
             fn: withCtx(() => [