@volverjs/ui-vue 0.0.10-beta.67 → 0.0.10-beta.69

package/dist/components/index.es.js

@@ -1,7 +1,7 @@
 import { inject, computed, toRef, unref, defineComponent, useAttrs, useId, toRefs, ref, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, withModifiers, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, onMounted, isRef, provide, watchEffect, reactive, nextTick, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx, getCurrentInstance, resolveComponent, resolveDynamicComponent, mergeDefaults, createCommentVNode, createVNode, TransitionGroup, toHandlers, useSlots, h, withDirectives, vModelCheckbox, Transition, normalizeStyle, vShow, vModelSelect, vModelText, vModelRadio } from "vue";
 import { useVModel, useStorage, useMutationObserver, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
 import { get } from "ts-dot-prop";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import Sortable from "vuedraggable";
@@ -288,7 +288,7 @@ const DebounceProps = {
 const IconProps = {
   /**
    * VvIcon name or props
-   * @see VVIcon
+   * @see VvIcon
    */
   icon: {
     type: [String, Object],
@@ -1609,13 +1609,13 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const icon = computed(() => {
       const name = props.name ?? "";
       const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
+      if (iconLoaded(iconName)) {
         return iconName;
       }
       const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
         (iconsCollection2) => {
           const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
+          return iconLoaded(icon2);
         }
       );
       if (iconsCollection) {
@@ -1647,7 +1647,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       }
     }
     if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
         show.value = false;
         volver.fetchIcon(props.src).then((svg) => {
           if (svg) {
@@ -1675,9 +1675,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         flip: _ctx.flip,
         rotate: unref(hasRotate),
         color: _ctx.color,
-        onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
     };
   }
 });
@@ -3488,6 +3487,21 @@ const VvComboboxProps = {
   focusOnHover: {
     type: Boolean,
     default: true
+  },
+  /**
+   * VvIcon name for clear button
+   * @see VvIcon
+   */
+  iconClear: {
+    type: [String, Object],
+    default: ACTION_ICONS.clear
+  },
+  /**
+   * Label for clear button
+   */
+  labelClear: {
+    type: String,
+    default: "Clear"
   }
 };
 function useVvComboboxProps() {
@@ -3503,6 +3517,60 @@ function useVvComboboxProps() {
     }
   };
 }
+const VvInputClearAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$u
+  },
+  props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: "Clear"
+    },
+    icon: {
+      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) {
+        emit("clear");
+      }
+    }
+    return {
+      hasIcon,
+      onClick
+    };
+  },
+  render() {
+    const icon = this.hasIcon ? h(_sfc_main$u, {
+      ...this.hasIcon,
+      class: `vv-${this.inputType}__icon`
+    }) : void 0;
+    return h(
+      "button",
+      {
+        disabled: this.disabled,
+        class: `vv-${this.inputType}__action`,
+        ariaLabel: this.label,
+        type: "button",
+        onClick: this.onClick
+      },
+      icon
+    );
+  }
+});
 const VvDropdownProps = {
   ...IdProps,
   ...DropdownProps,
@@ -4212,7 +4280,22 @@ const VvSelectProps = {
   /**
    * Select placeholder
    */
-  placeholder: String
+  placeholder: String,
+  /**
+   * VvIcon name for clear button
+   * @see VvIcon
+   */
+  iconClear: {
+    type: [String, Object],
+    default: ACTION_ICONS.clear
+  },
+  /**
+   * Label for clear button
+   */
+  labelClear: {
+    type: String,
+    default: "Clear"
+  }
 };
 function useVvSelectProps() {
   return {
@@ -4255,7 +4338,7 @@ const __default__$c = {
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...__default__$c,
   props: useVvSelectProps(),
-  emits: ["update:modelValue", "focus", "blur"],
+  emits: ["update:modelValue", "focus", "blur", "clear"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -4321,6 +4404,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }
       return localModelValue.value !== void 0 && localModelValue.value !== null;
     });
+    const isUnselectable = computed(() => {
+      if (isDisabledOrReadonly.value) {
+        return false;
+      }
+      return props.unselectable;
+    });
     const isVisible = useElementVisibility(selectEl);
     watch(isVisible, (newValue) => {
       if (newValue && props.autofocus) {
@@ -4370,6 +4459,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
+    function onClear() {
+      if (Array.isArray(localModelValue.value)) {
+        localModelValue.value = [];
+      } else {
+        localModelValue.value = void 0;
+      }
+      emit("clear");
+    }
     const hasAttrs = computed(() => {
       return {
         "name": props.name,
@@ -4422,8 +4519,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 _ctx.placeholder ? (openBlock(), createElementBlock("option", {
                   key: 0,
                   value: void 0,
-                  disabled: !_ctx.unselectable,
-                  hidden: !_ctx.unselectable
+                  disabled: !unref(isUnselectable),
+                  hidden: !unref(isUnselectable)
                 }, toDisplayString(_ctx.placeholder), 9, _hoisted_6$4)) : createCommentVNode("v-if", true),
                 (openBlock(true), createElementBlock(
                   Fragment,
@@ -4467,9 +4564,16 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ], 16, _hoisted_5$4), [
                 [vModelSelect, unref(localModelValue)]
               ]),
+              unref(isUnselectable) ? (openBlock(), createBlock(unref(VvInputClearAction), {
+                key: 1,
+                "input-type": "select",
+                label: _ctx.labelClear,
+                icon: _ctx.iconClear,
+                onClear
+              }, null, 8, ["label", "icon"])) : createCommentVNode("v-if", true),
               unref(hasIconAfter) ? (openBlock(), createBlock(
                 _sfc_main$u,
-                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                mergeProps({ key: 2 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -4552,7 +4656,7 @@ const __default__$b = {
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...__default__$b,
   props: useVvComboboxProps(),
-  emits: ["update:modelValue", "update:search", "change:search", "focus", "blur"],
+  emits: ["update:modelValue", "update:search", "focus", "blur", "clear", "change:search"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -4800,6 +4904,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         collapse();
       }
     }
+    function onClear() {
+      localModelValue.value = [];
+      emit("update:search", "");
+      emit("clear");
+    }
     watch(
       () => props.options,
       (newValue) => {
@@ -4985,9 +5094,16 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       ))
                     ])
                   ], 16, _hoisted_6$3),
+                  unref(isUnselectable) ? (openBlock(), createBlock(unref(VvInputClearAction), {
+                    key: 1,
+                    "input-type": "select",
+                    label: _ctx.labelClear,
+                    icon: _ctx.iconClear,
+                    onClear
+                  }, null, 8, ["label", "icon"])) : createCommentVNode("v-if", true),
                   unref(hasIconAfter) ? (openBlock(), createBlock(
                     _sfc_main$u,
-                    mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                    mergeProps({ key: 2 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                     null,
                     16
                     /* FULL_PROPS */
@@ -5547,7 +5663,7 @@ const VvInputFileProps = {
   },
   /**
    * VvIcon name for add button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconAdd: {
     type: [String, Object],
@@ -5562,7 +5678,7 @@ const VvInputFileProps = {
   },
   /**
    * VvIcon name for replace button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconReplace: {
     type: [String, Object],
@@ -5577,7 +5693,7 @@ const VvInputFileProps = {
   },
   /**
    * VvIcon name for download button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconDownload: {
     type: [String, Object],
@@ -5591,6 +5707,43 @@ const VvInputFileProps = {
     default: "Remove file"
   }
 };
+function acceptedMimeTypes(acceptValue) {
+  const mimeTypes = [];
+  const extensions = [];
+  const wildcards = [];
+  const acceptedTypes = acceptValue == null ? void 0 : acceptValue.split(",").map((type) => type.trim().toLowerCase());
+  if (acceptedTypes == null ? void 0 : acceptedTypes.length) {
+    acceptedTypes.forEach((type) => {
+      if (type.startsWith(".")) {
+        extensions.push(type);
+      } else if (type.includes("/*")) {
+        wildcards.push(type.replace("/*", ""));
+      } else {
+        mimeTypes.push(type);
+      }
+    });
+  }
+  return {
+    mimeTypes,
+    extensions,
+    wildcards
+  };
+}
+function filterFileList(fileList, acceptValue) {
+  if (!acceptValue || acceptValue.trim() === "") {
+    return Array.from(fileList);
+  }
+  const { mimeTypes, extensions, wildcards } = acceptedMimeTypes(acceptValue);
+  return Array.from(fileList).filter((file) => {
+    var _a;
+    const fileType = file.type.toLowerCase();
+    const fileExtension = `.${(_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase()}`;
+    const mimeMatches = mimeTypes.includes(fileType);
+    const wildcardMatches = wildcards.some((wildcard) => fileType.startsWith(`${wildcard}/`));
+    const extensionMatches = extensions.some((ext) => fileExtension === ext.toLowerCase());
+    return mimeMatches || wildcardMatches || extensionMatches;
+  });
+}
 const _hoisted_1$6 = ["for"];
 const _hoisted_2$4 = { class: "vv-input-file__preview" };
 const _hoisted_3$2 = ["src", "alt"];
@@ -5710,12 +5863,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       inputEl.value.value = "";
     }
     function addFiles(uploadedFiles) {
+      const filteredFiles = filterFileList(uploadedFiles, props.accept);
       if (!props.multiple) {
         if (Array.isArray(localModelValue.value)) {
-          localModelValue.value = [...uploadedFiles];
+          localModelValue.value = filteredFiles;
           return;
         }
-        localModelValue.value = uploadedFiles[0];
+        localModelValue.value = filteredFiles[0];
         return;
       }
       let toReturn = [];
@@ -5724,7 +5878,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       } else {
         toReturn = localModelValue.value && Array.isArray(localModelValue.value) ? [...localModelValue.value] : toReturn;
       }
-      for (const file of uploadedFiles) {
+      for (const file of filteredFiles) {
         if (hasMax.value && toReturn.length >= hasMax.value) {
           break;
         }
@@ -6128,6 +6282,8 @@ const VvInputTextEvents = [
   "complete:typed",
   "complete:masked",
   "complete:unmasked",
+  "suggestion:selected",
+  "suggestion:removed",
   "focus",
   "blur",
   "keyup",
@@ -6184,7 +6340,7 @@ const VvInputTextProps = {
   multiple: Boolean,
   /**
    * VvIcon name for show password button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconShowPassword: {
     type: [String, Object],
@@ -6192,7 +6348,7 @@ const VvInputTextProps = {
   },
   /**
    * VvIcon name for hide password button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconHidePassword: {
     type: [String, Object],
@@ -6200,7 +6356,7 @@ const VvInputTextProps = {
   },
   /**
    * VvIcon name for clear button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconClear: {
     type: [String, Object],
@@ -6208,7 +6364,7 @@ const VvInputTextProps = {
   },
   /**
    * VvIcon name for remove suggestion button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconRemoveSuggestion: {
     type: [String, Object],
@@ -6304,63 +6460,25 @@ const VvInputTextProps = {
   maxSuggestions: {
     type: Number,
     default: 5
+  },
+  /**
+   * The input mode to use for the input
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+   */
+  inputMode: {
+    type: String,
+    default: "text"
   }
 };
-const VvInputClearAction = defineComponent({
+const VvInputPasswordAction = defineComponent({
   components: {
     VvIcon: _sfc_main$u
   },
   props: {
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    label: {
+    inputType: {
       type: String,
-      default: "Clear"
+      default: "input-text"
     },
-    icon: {
-      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) {
-        emit("clear");
-      }
-    }
-    return {
-      hasIcon,
-      onClick
-    };
-  },
-  render() {
-    const icon = this.hasIcon ? h(_sfc_main$u, {
-      ...this.hasIcon,
-      class: "vv-input-text__icon"
-    }) : void 0;
-    return h(
-      "button",
-      {
-        disabled: this.disabled,
-        class: "vv-input-text__action",
-        ariaLabel: this.label,
-        type: "button",
-        onClick: this.onClick
-      },
-      icon
-    );
-  }
-});
-const VvInputPasswordAction = defineComponent({
-  components: {
-    VvIcon: _sfc_main$u
-  },
-  props: {
     disabled: {
       type: Boolean,
       default: false
@@ -6406,13 +6524,13 @@ const VvInputPasswordAction = defineComponent({
   render() {
     const icon = this.hasIcon ? h(_sfc_main$u, {
       ...this.hasIcon,
-      class: "vv-input-text__icon"
+      class: `vv-${this.inputType}__icon`
     }) : void 0;
     return h(
       "button",
       {
         disabled: this.disabled,
-        class: "vv-input-text__action",
+        class: `vv-${this.inputType}__action`,
         ariaLabel: this.active ? this.labelHide : this.labelShow,
         type: "button",
         onClick: this.onClick
@@ -6426,6 +6544,10 @@ const VvInputStepAction = defineComponent({
     VvIcon: _sfc_main$u
   },
   props: {
+    inputType: {
+      type: String,
+      default: "input-text"
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -6456,8 +6578,9 @@ const VvInputStepAction = defineComponent({
   render() {
     return h("button", {
       class: [
-        "vv-input-text__action vv-input-text__action-chevron",
-        this.isUp && "vv-input-text__action-chevron-up"
+        `vv-${this.inputType}__action`,
+        `vv-${this.inputType}__action-chevron`,
+        this.isUp ? `vv-${this.inputType}__action-chevron-up` : void 0
       ],
       disabled: this.disabled,
       ariaLabel: this.label,
@@ -6958,10 +7081,12 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       var _a;
       localModelValue.value = suggestion;
       (_a = suggestionsDropdownEl.value) == null ? void 0 : _a.hide();
+      emit("suggestion:selected", suggestion);
     }
     function onSuggestionRemove(suggestion) {
       var _a;
       (_a = suggestions.value) == null ? void 0 : _a.delete(suggestion);
+      emit("suggestion:removed", suggestion);
     }
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers(
@@ -7005,7 +7130,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         "autocomplete": props.autocomplete,
         "aria-invalid": isInvalid.value,
         "aria-describedby": hasHintLabelOrSlot.value ? hasHintId.value : void 0,
-        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0
+        "aria-errormessage": hasInvalidLabelOrSlot.value ? hasHintId.value : void 0,
+        "inputMode": props.inputMode
       };
       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) {
         let max = props.max;
@@ -7886,7 +8012,7 @@ const WRAP = {
 const SPELLCHECK = {
   default: "default"
 };
-const VvTextareaEvents = ["update:modelValue", "focus", "blur", "keyup"];
+const VvTextareaEvents = ["update:modelValue", "focus", "blur", "keyup", "suggestion:selected", "suggestion:removed"];
 const VvTextareaProps = {
   ...InputTextareaProps,
   ...StorageProps,
@@ -7917,7 +8043,7 @@ const VvTextareaProps = {
   spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
   /**
    * VvIcon name for remove suggestion button
-   * @see VVIcon
+   * @see VvIcon
    */
   iconRemoveSuggestion: {
     type: [String, Object],
@@ -8083,10 +8209,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       var _a;
       localModelValue.value = suggestion;
       (_a = suggestionsDropdownEl.value) == null ? void 0 : _a.hide();
+      emit("suggestion:selected", suggestion);
     }
     function onSuggestionRemove(suggestion) {
       var _a;
       (_a = suggestions.value) == null ? void 0 : _a.delete(suggestion);
+      emit("suggestion:removed", suggestion);
     }
     const {
       HintSlot,