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

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -1,5 +1,5 @@
-import { computed, isRef, defineComponent, h, unref, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, inject, toRef, getCurrentInstance, ref, watch, resolveComponent, createBlock, resolveDynamicComponent, mergeProps, withCtx, mergeDefaults, createCommentVNode, useId, useAttrs, useSlots, Fragment, provide, onMounted, nextTick, createVNode, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, vShow, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { computed, isRef, defineComponent, h, inject, unref, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, toRef, getCurrentInstance, watch, resolveComponent, resolveDynamicComponent, withCtx, useId, useAttrs, useSlots, Fragment, provide, onMounted, nextTick, createVNode, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, vShow, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, useElementHover, onKeyStroke, useFocus, useElementVisibility, refDebounced, computedAsync } from "@vueuse/core";
 import mitt from "mitt";
@@ -250,7 +250,7 @@ const OptionsProps = {
 const IconProps = {
   /**
    * VvIcon name or props
-   * @see VVIcon
+   * @see VvIcon
    */
   icon: {
     type: [String, Object],
@@ -449,6 +449,13 @@ const ActionProps = {
     default: StorageType.local
   }
 });
+const ACTION_ICONS = {
+  clear: "close"
+};
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
 const VvComboboxProps = {
   ...IdNameProps,
   ...TabindexProps,
@@ -616,6 +623,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() {
@@ -813,10 +835,9 @@ function HintSlotFactory(propsOrRef, slots) {
     HintSlot
   };
 }
-const VvBadgeProps = {
-  ...ModifiersProps,
-  value: [String, Number]
-};
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER, void 0);
+}
 function useModifiers(prefix, modifiers, others) {
   return computed(() => {
     const toReturn = {
@@ -841,10 +862,215 @@ function useModifiers(prefix, modifiers, others) {
   });
 }
 const __default__$9 = {
-  name: "VvBadge"
+  name: "VvIcon"
 };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$9,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return Number.parseFloat(props.rotate);
+      }
+      return props.rotate;
+    });
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconLoaded(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconLoaded(icon2);
+        }
+      );
+      if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
+      }
+      return name;
+    });
+    function getSvgContent(svg) {
+      let dom;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
+    }
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      }
+    }
+    if (props.svg) {
+      addIconFromSvg(props.svg);
+    }
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: unref(hasRotate),
+        color: _ctx.color,
+        icon: unref(icon)
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
+    };
+  }
+});
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
+const VvInputClearAction = defineComponent({
+  components: {
+    VvIcon: _sfc_main$9
+  },
+  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$9, {
+      ...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 VvBadgeProps = {
+  ...ModifiersProps,
+  value: [String, Number]
+};
+const __default__$8 = {
+  name: "VvBadge"
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: VvBadgeProps,
   setup(__props) {
     const props = __props;
@@ -1001,9 +1227,6 @@ function useGroupProps(props, emit) {
 }
 const VvActionEvents = ["click", "mouseover", "mouseleave"];
 const VvActionProps = ActionProps;
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER, void 0);
-}
 function useInjectedDropdownTrigger() {
   return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
 }
@@ -1013,11 +1236,11 @@ function useInjectedDropdownItem() {
 function useInjectedDropdownAction() {
   return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const __default__$8 = {
+const __default__$7 = {
   name: "VvAction"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   props: VvActionProps,
   emits: VvActionEvents,
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1146,161 +1369,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
-const __default__$7 = {
-  name: "VvIcon"
-};
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
-  props: /* @__PURE__ */ mergeDefaults({
-    name: {},
-    color: {},
-    width: {},
-    height: {},
-    provider: {},
-    prefix: {},
-    src: {},
-    horizontalFlip: { type: Boolean },
-    verticalFlip: { type: Boolean },
-    flip: {},
-    mode: {},
-    inline: { type: Boolean },
-    rotate: {},
-    onLoad: { type: Function },
-    svg: {},
-    modifiers: {}
-  }, VvIconPropsDefaults),
-  setup(__props) {
-    const props = __props;
-    const hasRotate = computed(() => {
-      if (typeof props.rotate === "string") {
-        return Number.parseFloat(props.rotate);
-      }
-      return props.rotate;
-    });
-    const show = ref(true);
-    const volver = useVolver();
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-icon", modifiers);
-    const provider = computed(() => {
-      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
-    });
-    const icon = computed(() => {
-      const name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
-        return iconName;
-      }
-      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
-        (iconsCollection2) => {
-          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
-        }
-      );
-      if (iconsCollection) {
-        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
-      }
-      return name;
-    });
-    function getSvgContent(svg) {
-      let dom;
-      if (typeof window === "undefined") {
-        const { JSDOM } = require("jsdom");
-        dom = new JSDOM().window;
-      }
-      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
-      const svgDomString = domParser.parseFromString(svg, "text/html");
-      const svgEl = svgDomString.querySelector("svg");
-      return svgEl;
-    }
-    function addIconFromSvg(svg) {
-      const svgContentEl = getSvgContent(svg);
-      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
-      if (svgContentEl && svgContent) {
-        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
-          body: svgContent,
-          // Set height and width from svg content
-          height: svgContentEl.viewBox.baseVal.height,
-          width: svgContentEl.viewBox.baseVal.width
-        });
-      }
-    }
-    if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
-        show.value = false;
-        volver.fetchIcon(props.src).then((svg) => {
-          if (svg) {
-            addIconFromSvg(svg);
-            show.value = true;
-          }
-        }).catch((e) => {
-          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
-        });
-      }
-    }
-    if (props.svg) {
-      addIconFromSvg(props.svg);
-    }
-    return (_ctx, _cache) => {
-      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
-        key: 0,
-        class: unref(bemCssClasses)
-      }, {
-        inline: _ctx.inline,
-        width: _ctx.width,
-        height: _ctx.height,
-        horizontalFlip: _ctx.horizontalFlip,
-        verticalFlip: _ctx.verticalFlip,
-        flip: _ctx.flip,
-        rotate: unref(hasRotate),
-        color: _ctx.color,
-        onLoad: _ctx.onLoad,
-        icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
 function useUniqueId(id) {
   return computed(() => String((id == null ? void 0 : id.value) || useId()));
 }
-function useComponentIcon(icon, iconPosition) {
-  const hasIcon = computed(() => {
-    if (typeof (icon == null ? void 0 : icon.value) === "string") {
-      return { name: icon == null ? void 0 : icon.value };
-    }
-    return icon == null ? void 0 : icon.value;
-  });
-  const hasIconBefore = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
-  );
-  const hasIconAfter = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
-  );
-  const hasIconLeft = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
-  );
-  const hasIconRight = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
-  );
-  const hasIconTop = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
-  );
-  const hasIconBottom = computed(
-    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
-  );
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
 const _hoisted_1$5 = {
   key: 1,
   class: "vv-button__label"
@@ -1399,7 +1470,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, mergeProps({
+      return openBlock(), createBlock(_sfc_main$7, mergeProps({
         ...unref(attrs),
         ...unref(hasListeners),
         disabled: unref(disabled),
@@ -1420,7 +1491,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
-              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$7, {
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$9, {
                 key: 0,
                 class: "vv-button__loading-icon",
                 name: _ctx.loadingIcon
@@ -1438,7 +1509,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               [
                 renderSlot(_ctx.$slots, "before"),
                 unref(hasIcon) ? (openBlock(), createBlock(
-                  _sfc_main$7,
+                  _sfc_main$9,
                   mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-button__icon" }),
                   null,
                   16
@@ -2175,7 +2246,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 {
@@ -2319,7 +2405,7 @@ const __default__$1 = {
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: useVvSelectProps(),
-  emits: ["update:modelValue", "focus", "blur"],
+  emits: ["update:modelValue", "focus", "blur", "clear"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -2385,6 +2471,12 @@ const _sfc_main$1 = /* @__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) {
@@ -2434,6 +2526,14 @@ const _sfc_main$1 = /* @__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,
@@ -2470,7 +2570,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ])) : createCommentVNode("v-if", true),
             createElementVNode("div", _hoisted_4$1, [
               unref(hasIconBefore) ? (openBlock(), createBlock(
-                _sfc_main$7,
+                _sfc_main$9,
                 mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
                 null,
                 16
@@ -2486,8 +2586,8 @@ const _sfc_main$1 = /* @__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$1)) : createCommentVNode("v-if", true),
                 (openBlock(true), createElementBlock(
                   Fragment,
@@ -2531,9 +2631,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               ], 16, _hoisted_5$1), [
                 [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$7,
-                mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                _sfc_main$9,
+                mergeProps({ key: 2 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                 null,
                 16
                 /* FULL_PROPS */
@@ -2616,7 +2723,7 @@ const __default__ = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   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;
@@ -2864,6 +2971,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         collapse();
       }
     }
+    function onClear() {
+      localModelValue.value = [];
+      emit("update:search", "");
+      emit("clear");
+    }
     watch(
       () => props.options,
       (newValue) => {
@@ -2969,7 +3081,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("v-if", true),
                 createElementVNode("div", _hoisted_5, [
                   unref(hasIconBefore) ? (openBlock(), createBlock(
-                    _sfc_main$7,
+                    _sfc_main$9,
                     mergeProps({ key: 0 }, unref(hasIconBefore), { class: "vv-select__icon" }),
                     null,
                     16
@@ -3004,7 +3116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             Fragment,
                             { key: 1 },
                             renderList(unref(selectedOptions), (option, index) => {
-                              return openBlock(), createBlock(_sfc_main$9, {
+                              return openBlock(), createBlock(_sfc_main$8, {
                                 key: index,
                                 modifiers: _ctx.badgeModifiers,
                                 class: "vv-select__badge"
@@ -3021,7 +3133,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     type: "button",
                                     onClick: withModifiers(($event) => onInput(option), ["stop"])
                                   }, [
-                                    createVNode(_sfc_main$7, { name: "close" })
+                                    createVNode(_sfc_main$9, { name: "close" })
                                   ], 8, _hoisted_8)) : createCommentVNode("v-if", true)
                                 ]),
                                 _: 2
@@ -3049,9 +3161,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ))
                     ])
                   ], 16, _hoisted_6),
+                  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$7,
-                    mergeProps({ key: 1 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
+                    _sfc_main$9,
+                    mergeProps({ key: 2 }, unref(hasIconAfter), { class: "vv-select__icon vv-select__icon-after" }),
                     null,
                     16
                     /* FULL_PROPS */