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

package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js

@@ -1,7 +1,12 @@
-import { unref, computed, isRef, defineComponent, h, inject, toRef, toRefs, useSlots, ref, watchEffect, watch, onMounted, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, provide, createCommentVNode, Fragment, renderList, createBlock, mergeProps } 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, provide, createCommentVNode, Fragment, renderList, createBlock, mergeProps } from "vue";
 import { uid } from "uid";
 import { useVModel } from "@vueuse/core";
 import { get } from "ts-dot-prop";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -36,15 +41,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"
+);
 function equals(obj1, obj2, field) {
   if (field) {
     return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
@@ -60,32 +67,36 @@ function deepEquals(a, b) {
     let i, length, key;
     if (arrA && arrB) {
       length = a.length;
-      if (length != b.length)
+      if (length !== b.length)
         return false;
-      for (i = length; i-- !== 0; )
+      for (i = length; i-- !== 0; ) {
         if (!deepEquals(a[i], b[i]))
           return false;
+      }
       return true;
     }
-    if (arrA != arrB)
+    if (arrA !== arrB)
       return false;
-    const dateA = a instanceof Date, dateB = b instanceof Date;
-    if (dateA != dateB)
+    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, regexpB = b instanceof RegExp;
-    if (regexpA != regexpB)
+      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();
+      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; )
+    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]))
@@ -93,11 +104,11 @@ function deepEquals(a, b) {
     }
     return true;
   }
-  return a !== a && b !== b;
+  return Number.isNaN(a) && Number.isNaN(b);
 }
 function resolveFieldData(data, field) {
   if (data && Object.keys(data).length && field) {
-    if (field.indexOf(".") === -1) {
+    if (!field.includes(".")) {
       return data[field];
     } else {
       const fields = field.split(".");
@@ -124,9 +135,6 @@ function contains(value, list) {
   }
   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;
 }
@@ -263,10 +271,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -279,27 +284,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
    */
@@ -312,43 +323,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: "" }
@@ -379,7 +411,10 @@ const OptionsProps = {
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -424,7 +459,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -492,7 +528,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 const IdNameProps = {
@@ -519,11 +556,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
+  }
 };
 const CheckboxRadioGroupProps = {
   ...ValidProps,
@@ -538,7 +581,10 @@ const CheckboxRadioGroupProps = {
   /**
    * Input value
    */
-  modelValue: [String, Array, Boolean, Number, Symbol],
+  modelValue: {
+    type: [String, Array, Boolean, Number, Symbol],
+    default: void 0
+  },
   /**
    * Input name
    */
@@ -546,7 +592,10 @@ const CheckboxRadioGroupProps = {
   /**
    * If true, the group will be displayed in a vertical column
    */
-  vertical: Boolean
+  vertical: {
+    type: Boolean,
+    default: false
+  }
 };
 ({
   ...DisabledProps,
@@ -569,17 +618,32 @@ const CheckboxRadioGroupProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
+({
+  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;
@@ -592,8 +656,9 @@ function useInjectedGroupState(groupKey) {
         return propRef.value;
       },
       set(value) {
-        if (emit)
+        if (emit) {
           emit(`update:${propName}`, value);
+        }
       }
     });
   }
@@ -627,16 +692,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
@@ -709,7 +768,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 = {
@@ -742,8 +803,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: VvCheckboxProps,
   emits: VvCheckboxEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvCheckbox",
@@ -807,8 +869,9 @@ const _sfc_main$1 = /* @__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);
@@ -886,12 +949,19 @@ const _sfc_main$1 = /* @__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(() => [
@@ -927,39 +997,48 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 });
 const VvCheckboxGroupProps = CheckboxRadioGroupProps;
 const VvCheckboxGroupEvents = ["update:modelValue", "change"];
-function useProvideGroupState(groupState) {
-  if (Object.keys(groupState).some(
-    (k) => k !== "key" && !isRef(groupState[k])
-  ))
-    throw Error("One or more groupState props aren't ref.");
-  provide(
-    groupState.key,
-    computed(() => groupState)
-  );
+function useProvideGroupState(key, groupState) {
+  provide(key, groupState);
 }
 function useOptions(props) {
   const { options, labelKey, valueKey, disabledKey } = toRefs(props);
   const getOptionLabel = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return option;
+    }
+    if (typeof labelKey.value === "function") {
+      return labelKey.value(option);
+    }
     return String(
-      typeof labelKey.value === "function" ? labelKey.value(option) : get(option, labelKey.value)
+      labelKey.value ? get(option, labelKey.value) : option
     );
   };
   const getOptionValue = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return option;
-    return typeof valueKey.value === "function" ? valueKey.value(option) : get(option, valueKey.value);
+    }
+    if (typeof valueKey.value === "function") {
+      return valueKey.value(option);
+    }
+    return valueKey.value ? get(option, valueKey.value) : option;
   };
   const isOptionDisabled = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option === "string") {
       return false;
-    return typeof disabledKey.value === "function" ? disabledKey.value(option) : get(option, disabledKey.value);
+    }
+    if (typeof disabledKey.value === "function") {
+      return disabledKey.value(option);
+    }
+    return disabledKey.value ? get(option, disabledKey.value) : false;
   };
   const getOptionGrouped = (option) => {
-    if (typeof option !== "object" && option !== null)
+    if (typeof option == "string") {
       return [];
-    return option.options || [];
+    }
+    if (typeof option === "object" && option && "options" in option) {
+      return option.options;
+    }
+    return [];
   };
   return {
     options,
@@ -978,8 +1057,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvCheckboxGroupProps,
   emits: VvCheckboxGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const slots = useSlots();
     const propsDefaults = useDefaults(
       "VvCheckboxGroup",
@@ -988,8 +1068,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
-    useProvideGroupState({
-      key: INJECTION_KEY_CHECK_GROUP,
+    useProvideGroupState(INJECTION_KEY_CHECK_GROUP, {
       modelValue,
       disabled,
       readonly,
@@ -1008,59 +1087,89 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         invalid: invalid.value
       }))
     );
-    const getOptionProps = (option, index) => {
+    function getOptionProps(option, index) {
       return {
         id: `${props.name}_opt${index}`,
         name: props.name,
         label: getOptionLabel(option),
         value: getOptionValue(option)
       };
-    };
+    }
     const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("fieldset", {
-        class: normalizeClass(unref(bemCssClasses))
-      }, [
-        _ctx.label ? (openBlock(), createElementBlock("legend", {
-          key: 0,
-          textContent: toDisplayString(_ctx.label)
-        }, null, 8, _hoisted_1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2, [
-          _ctx.options.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.options, (option, index) => {
-            return openBlock(), createBlock(_sfc_main$1, mergeProps({ key: index }, getOptionProps(option, index)), null, 16);
-          }), 128)) : renderSlot(_ctx.$slots, "default", { key: 1 })
-        ]),
-        createVNode(unref(HintSlot), { class: "vv-checkbox-group__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))))
+      return openBlock(), createElementBlock(
+        "fieldset",
+        {
+          class: normalizeClass(unref(bemCssClasses))
+        },
+        [
+          _ctx.label ? (openBlock(), createElementBlock("legend", {
+            key: 0,
+            textContent: toDisplayString(_ctx.label)
+          }, null, 8, _hoisted_1)) : createCommentVNode("v-if", true),
+          createElementVNode("div", _hoisted_2, [
+            _ctx.options.length > 0 ? (openBlock(true), createElementBlock(
+              Fragment,
+              { key: 0 },
+              renderList(_ctx.options, (option, index) => {
+                return openBlock(), createBlock(
+                  _sfc_main$1,
+                  mergeProps({
+                    key: index,
+                    ref_for: true
+                  }, getOptionProps(option, index)),
+                  null,
+                  16
+                  /* FULL_PROPS */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )) : renderSlot(_ctx.$slots, "default", { key: 1 })
+          ]),
+          createVNode(
+            unref(HintSlot),
+            { class: "vv-checkbox-group__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
             ]),
-            key: "3"
-          } : void 0
-        ]), 1024)
-      ], 2);
+            1024
+            /* DYNAMIC_SLOTS */
+          )
+        ],
+        2
+        /* CLASS */
+      );
     };
   }
 });