@volverjs/ui-vue 0.0.9-beta.7 → 0.0.9-beta.9

package/dist/components/index.es.js

@@ -1333,7 +1333,7 @@ const VvAlertProps = {
    */
   title: {
     type: String,
-    default: ""
+    default: void 0
   },
   /**
    * The alert content
@@ -1342,7 +1342,7 @@ const VvAlertProps = {
    */
   content: {
     type: String,
-    default: ""
+    default: void 0
   },
   /**
    * The alert footer
@@ -1351,7 +1351,7 @@ const VvAlertProps = {
    */
   footer: {
     type: String,
-    default: ""
+    default: void 0
   },
   /**
    * The alert role
@@ -1442,9 +1442,9 @@ const _hoisted_1$h = {
 };
 const _hoisted_2$c = ["id"];
 const _hoisted_3$6 = ["aria-label"];
-const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
 const _hoisted_5$4 = [
-  _hoisted_4$4
+  _hoisted_4$5
 ];
 const _hoisted_6$4 = {
   key: 1,
@@ -1471,14 +1471,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "header", {}, () => [
             renderSlot(_ctx.$slots, "title::before"),
-            createElementVNode("strong", {
+            _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
+              key: 0,
               id: unref(hasTitleId),
               class: "vv-alert__title"
             }, [
               renderSlot(_ctx.$slots, "title", {}, () => [
                 createTextVNode(toDisplayString(_ctx.title), 1)
               ])
-            ], 8, _hoisted_2$c),
+            ], 8, _hoisted_2$c)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "title::after")
           ]),
           renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
@@ -2013,19 +2014,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)
@@ -2034,10 +2043,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",
@@ -2117,6 +2126,59 @@ function HintSlotFactory(props, slots) {
     HintSlot
   };
 }
+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 _hoisted_1$d = ["for"];
 const _hoisted_2$8 = ["id", "name", "disabled", "value", "tabindex", "aria-invalid", "aria-describedby", "aria-errormessage"];
 const __default__$d = {
@@ -2129,6 +2191,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvCheckbox",
+      VvCheckboxProps,
+      props
+    );
     const {
       id,
       disabled,
@@ -2241,7 +2308,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(bemCssClasses)),
@@ -2350,6 +2417,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvCheckboxGroup",
+      VvCheckboxGroupProps,
+      props
+    );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
     useProvideGroupState({
@@ -2380,7 +2452,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         value: getOptionValue(option)
       };
     };
-    const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots);
+    const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", {
         class: normalizeClass(unref(bemCssClasses))
@@ -3262,7 +3334,7 @@ const _hoisted_3$4 = {
   key: 0,
   class: "vv-select__input-before"
 };
-const _hoisted_4$3 = { class: "vv-select__inner" };
+const _hoisted_4$4 = { class: "vv-select__inner" };
 const _hoisted_5$3 = ["id"];
 const _hoisted_6$3 = ["disabled", "hidden"];
 const _hoisted_7$3 = ["disabled", "value"];
@@ -3282,13 +3354,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvSelect",
+      VvSelectProps,
+      props
+    );
     const select = ref();
     const {
       HintSlot,
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const {
       id,
       modifiers,
@@ -3399,7 +3476,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$3, [
+          createElementVNode("div", _hoisted_4$4, [
             unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
               key: 0,
               class: "vv-select__icon"
@@ -3486,63 +3563,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 _hoisted_1$7 = ["id"];
 const _hoisted_2$5 = ["id", "for"];
 const _hoisted_3$3 = ["id", "aria-controls", "placeholder"];
-const _hoisted_4$2 = {
+const _hoisted_4$3 = {
   key: 0,
   class: "vv-select__input-before"
 };
@@ -3589,7 +3613,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const inputEl = ref(null);
     const inputSearchEl = ref(null);
     const wrapperEl = ref(null);
@@ -3857,7 +3881,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             onAfterCollapse
           }), createSlots({
             default: withCtx(({ aria }) => [
-              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+              _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5$2, [
@@ -4112,12 +4136,13 @@ const VvDialogProps = {
    */
   keepOpen: { type: Boolean, default: false }
 };
-const _hoisted_1$6 = {
+const _hoisted_1$6 = ["onCancel"];
+const _hoisted_2$4 = {
   key: 0,
   class: "vv-dialog__header"
 };
-const _hoisted_2$4 = { class: "vv-dialog__content" };
-const _hoisted_3$2 = {
+const _hoisted_3$2 = { class: "vv-dialog__content" };
+const _hoisted_4$2 = {
   key: 1,
   class: "vv-dialog__footer"
 };
@@ -4133,7 +4158,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const dialogEl = ref();
     const modelValue = useVModel(props, "modelValue", emit);
     const localModelValue = ref(false);
-    const opened = computed({
+    const isOpened = computed({
       get: () => modelValue.value ?? localModelValue.value,
       set: (newValue) => {
         if (modelValue.value === void 0) {
@@ -4190,37 +4215,37 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     };
     onClickOutside(modalWrapper, () => {
-      if (!props.keepOpen && opened.value) {
-        opened.value = false;
+      if (!props.keepOpen) {
+        close();
       }
     });
     function close() {
-      opened.value = false;
+      isOpened.value = false;
     }
     function open() {
-      opened.value = true;
+      isOpened.value = true;
     }
     __expose({ close, open });
-    onKeyStroke("Escape", (e) => {
-      if (opened.value) {
-        e.preventDefault();
+    const onCancel = () => {
+      if (!props.keepOpen) {
         close();
       }
-    });
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Transition, mergeProps({ name: unref(transitioName) }, toHandlers(dialogTransitionHandlers)), {
         default: withCtx(() => [
           withDirectives(createElementVNode("dialog", mergeProps(unref(dialogAttrs), {
             ref_key: "dialogEl",
             ref: dialogEl,
-            class: unref(dialogClass)
+            class: unref(dialogClass),
+            onCancel: withModifiers(onCancel, ["stop", "prevent"])
           }), [
             createElementVNode("article", {
               ref_key: "modalWrapper",
               ref: modalWrapper,
               class: "vv-dialog__wrapper"
             }, [
-              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_1$6, [
+              _ctx.$slots.header || _ctx.title ? (openBlock(), createElementBlock("header", _hoisted_2$4, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
                   createTextVNode(toDisplayString(_ctx.title) + " ", 1),
                   createElementVNode("button", {
@@ -4233,15 +4258,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                   ], 32)
                 ])
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_2$4, [
+              createElementVNode("div", _hoisted_3$2, [
                 renderSlot(_ctx.$slots, "default")
               ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$2, [
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "footer")
               ])) : createCommentVNode("", true)
             ], 512)
-          ], 16), [
-            [vShow, unref(opened)]
+          ], 16, _hoisted_1$6), [
+            [vShow, unref(isOpened)]
           ])
         ]),
         _: 3
@@ -4756,6 +4781,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvInputText",
+      VvInputTextProps,
+      props
+    );
     const inputEl = ref();
     const innerEl = ref();
     __expose({ $inner: innerEl });
@@ -4942,7 +4972,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const PasswordInputActions = VvInputTextActionsFactory(
       INPUT_TYPES.PASSWORD,
       props
@@ -5267,6 +5297,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvRadio",
+      VvRadioProps,
+      props
+    );
     const { id, disabled, readonly, modelValue, valid, invalid } = useGroupProps(props, emit);
     const hasId = useUniqueId(id);
     const hasHintId = computed(() => `${hasId.value}-hint`);
@@ -5317,7 +5352,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("label", {
         class: normalizeClass(unref(bemCssClasses)),
@@ -5394,6 +5429,11 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvRadioGroup",
+      VvRadioGroupProps,
+      props
+    );
     const modelValue = useVModel(props, "modelValue", emit);
     const { disabled, readonly, vertical, valid, invalid, modifiers } = toRefs(props);
     useProvideGroupState({
@@ -5424,7 +5464,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         value: getOptionValue(option)
       };
     };
-    const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots);
+    const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("fieldset", {
         class: normalizeClass(unref(bemCssClasses))
@@ -5595,6 +5635,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const slots = useSlots();
+    const propsDefaults = useDefaults(
+      "VvTextarea",
+      VvTextareaProps,
+      props
+    );
     const textarea = ref();
     const {
       id,
@@ -5649,7 +5694,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       hasHintLabelOrSlot,
       hasInvalidLabelOrSlot,
       hintSlotScope
-    } = HintSlotFactory(props, slots);
+    } = HintSlotFactory(propsDefaults, slots);
     const bemCssClasses = useModifiers(
       "vv-textarea",
       modifiers,