eco-vue-js 0.3.67

package/dist/components/Input/WInputAsync.vue.js

@@ -0,0 +1,195 @@
+import { defineComponent, ref, computed, watch, toRef, openBlock, createElementBlock, normalizeClass, createVNode, createSlots, withCtx, renderSlot, createBlock, withModifiers, unref, nextTick } from 'vue';
+import _sfc_main$1 from './WInput.vue.js';
+import WSpinner from '../Spinner/WSpinner.vue.js';
+import IconEdit from '../../assets/icons/default/IconEdit.svg.js';
+import IconCheck from '../../assets/icons/default/IconCheck.svg.js';
+import WSkeleton from '../Skeleton/WSkeleton.vue.js';
+import { Modal } from '../../utils/Modal.js';
+import { SemanticType } from '../../utils/SemanticType.js';
+
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WInputAsync",
+  props: {
+    modelValue: {},
+    title: {},
+    description: {},
+    validate: {},
+    type: {},
+    placeholder: {},
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    skeleton: { type: Boolean },
+    textarea: { type: Boolean },
+    name: {},
+    mono: { type: Boolean },
+    textSecure: { type: Boolean },
+    placeholderSecure: { type: Boolean },
+    maxLength: {},
+    required: { type: Boolean },
+    hasChanges: { type: Boolean },
+    errorMessage: {},
+    noMargin: { type: Boolean },
+    resize: { type: Boolean },
+    allowPaste: { type: Boolean },
+    icon: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const focused = ref(false);
+    const value = ref();
+    const input = ref();
+    const errorMessageValue = ref();
+    const hasChangesValue = computed(() => props.modelValue !== value.value);
+    const toggle = async () => {
+      if (props.disabled || props.loading)
+        return;
+      if (hasChangesValue.value || props.textSecure && focused.value) {
+        emitUpdateModelValue(value.value);
+      } else {
+        open();
+      }
+    };
+    let closeModal = null;
+    const close = () => {
+      closeModal?.();
+      if (props.textarea && !props.textSecure && value.value !== props.modelValue) {
+        closeModal = Modal.addConfirm({
+          title: `Discard changes${props.title ? " for " + props.title : ""}?`,
+          description: "Leaving the form will undo any edits.",
+          acceptText: "Discard",
+          intermediateText: "Save",
+          acceptSemanticType: SemanticType.WARNING,
+          onAccept: () => {
+            value.value = props.modelValue;
+            focused.value = false;
+          },
+          onIntermediate: () => {
+            emitUpdateModelValue(value.value);
+            focused.value = false;
+          }
+        }, () => {
+          closeModal = null;
+          nextTick().then(() => {
+            if (focused.value)
+              input.value?.focus();
+          });
+        });
+      } else {
+        value.value = props.modelValue;
+        focused.value = false;
+      }
+    };
+    const open = () => {
+      if (props.disabled || props.loading)
+        return;
+      input.value?.focus();
+    };
+    watch(toRef(props, "modelValue"), (modelValue) => {
+      value.value = modelValue;
+    }, { immediate: true });
+    watch(value, (newValue) => {
+      if (!props.validate)
+        return;
+      if (props.validate instanceof Array) {
+        errorMessageValue.value = props.validate.map((fn) => fn(newValue)).filter((item) => item).join(", ") || void 0;
+      } else {
+        errorMessageValue.value = props.validate(newValue) || void 0;
+      }
+    });
+    const emitUpdateModelValue = (newValue) => {
+      if (props.disabled || props.loading)
+        return;
+      if (errorMessageValue.value)
+        return;
+      if (props.placeholderSecure)
+        input.value?.blur();
+      emit("update:modelValue", newValue);
+    };
+    const handleEnterPress = (event) => {
+      if (props.textarea)
+        return;
+      event.stopPropagation();
+      event.preventDefault();
+      emitUpdateModelValue(value.value);
+    };
+    const handlePaste = () => {
+      if (hasChangesValue.value || props.textSecure && focused.value) {
+        emitUpdateModelValue(value.value);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass({ "pt-3": !_ctx.title && !_ctx.$slots.title?.().length })
+      }, [
+        createVNode(_sfc_main$1, {
+          ref_key: "input",
+          ref: input,
+          modelValue: value.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => value.value = $event),
+          title: _ctx.title,
+          description: _ctx.description,
+          placeholder: _ctx.placeholder,
+          "disabled-actions": !focused.value && !hasChangesValue.value,
+          type: _ctx.type,
+          "error-message": errorMessageValue.value ?? _ctx.errorMessage,
+          skeleton: _ctx.skeleton,
+          textarea: _ctx.textarea,
+          name: _ctx.name,
+          mono: _ctx.mono,
+          "text-secure": _ctx.textSecure,
+          "placeholder-secure": _ctx.placeholderSecure,
+          "max-length": _ctx.maxLength,
+          "has-changes": _ctx.hasChanges || hasChangesValue.value,
+          disabled: _ctx.disabled,
+          required: _ctx.required,
+          "no-margin": _ctx.noMargin,
+          "allow-clear": !_ctx.textarea,
+          resize: _ctx.resize,
+          "allow-paste": _ctx.allowPaste,
+          icon: _ctx.icon,
+          class: "w-full",
+          "onKeypress:enter": handleEnterPress,
+          onClick: open,
+          onBlur: close,
+          onFocus: _cache[2] || (_cache[2] = ($event) => focused.value = true),
+          onPaste: handlePaste
+        }, createSlots({
+          right: withCtx(() => [
+            renderSlot(_ctx.$slots, "right"),
+            _ctx.skeleton ? (openBlock(), createBlock(WSkeleton, {
+              key: 0,
+              class: "square-11 w-skeleton-rounded-lg"
+            })) : (openBlock(), createElementBlock("button", {
+              key: 1,
+              class: normalizeClass(["relative square-11 rounded-lg flex items-center justify-center bg-default dark:bg-default-dark border border-solid border-gray-200 dark:border-gray-800", {
+                "cursor-not-allowed": _ctx.disabled,
+                "cursor-progress": _ctx.loading,
+                "w-ripple w-ripple-hover": !_ctx.disabled && !_ctx.loading,
+                "bg-primary-default dark:bg-primary-dark text-default dark:text-default-dark": focused.value,
+                "text-description": !focused.value
+              }]),
+              onClick: withModifiers(toggle, ["stop"]),
+              onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop", "prevent"]))
+            }, [
+              _ctx.loading ? (openBlock(), createBlock(WSpinner, { key: 0 })) : _ctx.hasChanges || focused.value ? (openBlock(), createBlock(unref(IconCheck), { key: 1 })) : (openBlock(), createBlock(unref(IconEdit), { key: 2 }))
+            ], 42, _hoisted_1))
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.title?.().length ? {
+            name: "title",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "title")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue", "title", "description", "placeholder", "disabled-actions", "type", "error-message", "skeleton", "textarea", "name", "mono", "text-secure", "placeholder-secure", "max-length", "has-changes", "disabled", "required", "no-margin", "allow-clear", "resize", "allow-paste", "icon"])
+      ], 2);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Input/WInputAsync.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './WInputAsync.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/Input/WInputDate.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("vue").PropType<Date>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:model-value": (value: Date | undefined) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("vue").PropType<Date>;
+    };
+}>> & {
+    "onUpdate:model-value"?: ((value: Date | undefined) => any) | undefined;
+}, {}, {}>;
+export default _default;
+//# sourceMappingURL=WInputDate.vue.d.ts.map

package/dist/components/Input/WInputDate.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WInputDate.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInputDate.vue.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA6JA,wBAAkD"}

package/dist/components/Input/WInputDate.vue.js

@@ -0,0 +1,62 @@
+import { defineComponent, ref, openBlock, createBlock, unref, withCtx, createElementVNode, withModifiers, createVNode } from 'vue';
+import _sfc_main$2 from '../DatePicker/WDatePickerSingle.vue.js';
+import { dateFormat, parseDate } from '../../utils/dateTime.js';
+import _sfc_main$1 from './WInputSuggest.vue.js';
+import { HorizontalAlign } from '../../utils/HorizontalAlign.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WInputDate",
+  props: {
+    title: {},
+    modelValue: {}
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const inputComponent = ref();
+    const inputValue = ref(props.modelValue ? dateFormat(props.modelValue) : "");
+    const updateInputValue = (value) => {
+      inputValue.value = value;
+      const date = parseDate(value);
+      if (date)
+        emit("update:model-value", date);
+    };
+    const formatModelValue = (value) => {
+      inputValue.value = value ? dateFormat(value) : "";
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        ref_key: "inputComponent",
+        ref: inputComponent,
+        "model-value": inputValue.value,
+        title: _ctx.title,
+        "horizontal-align": unref(HorizontalAlign).RIGHT_INNER,
+        "content-max-height": 520,
+        "content-max-width": 480,
+        "onUpdate:modelValue": updateInputValue,
+        onClose: _cache[2] || (_cache[2] = ($event) => formatModelValue(_ctx.modelValue)),
+        "onKeypress:enter": _cache[3] || (_cache[3] = ($event) => inputComponent.value?.blur())
+      }, {
+        content: withCtx(() => [
+          createElementVNode("div", {
+            class: "sm:p-6 sm:w-[28rem] sm-not:w-screen sm-not:px-3",
+            onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["prevent"]))
+          }, [
+            createVNode(_sfc_main$2, {
+              "model-value": _ctx.modelValue,
+              title: _ctx.title,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => {
+                _ctx.$emit("update:model-value", $event);
+                formatModelValue($event);
+              })
+            }, null, 8, ["model-value", "title"])
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["model-value", "title", "horizontal-align"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Input/WInputDate.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './WInputDate.vue.js';
+
+
+
+export { _sfc_main as default };

package/dist/components/Input/WInputOptions.vue.d.ts

@@ -0,0 +1,172 @@
+import { type Component } from 'vue';
+declare const _default: <Type extends InputType = "text", Option extends Record<string, any> & {
+    id: number;
+} = Record<string, any> & {
+    id: number;
+}>(__VLS_props: {
+    modelValue: Type extends "number" ? number : string;
+    options: Option[];
+    valueGetter: (option: Option) => Type extends "number" ? number : string;
+    title?: string | undefined;
+    type?: Type | undefined;
+    mobileTitle?: string | undefined;
+    description?: string | undefined;
+    loading?: boolean | undefined;
+    emptyStub?: string | undefined;
+    maxSearchLength?: number | undefined;
+    optionComponent?: Component<{
+        option: Option;
+        selected?: boolean | undefined;
+        model?: boolean | undefined;
+    }> | undefined;
+    disableClear?: boolean | undefined;
+    readonly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    skeleton?: boolean | undefined;
+    searchSize?: number | undefined;
+    errorMessage?: string | undefined;
+    required?: boolean | undefined;
+    hasChanges?: boolean | undefined;
+    placeholder?: string | undefined;
+    noMargin?: boolean | undefined;
+    icon?: SVGComponent | undefined;
+    mono?: boolean | undefined;
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: Pick<{
+    props: {
+        modelValue: Type extends "number" ? number : string;
+        options: Option[];
+        valueGetter: (option: Option) => Type extends "number" ? number : string;
+        title?: string | undefined;
+        type?: Type | undefined;
+        mobileTitle?: string | undefined;
+        description?: string | undefined;
+        loading?: boolean | undefined;
+        emptyStub?: string | undefined;
+        maxSearchLength?: number | undefined;
+        optionComponent?: Component<{
+            option: Option;
+            selected?: boolean | undefined;
+            model?: boolean | undefined;
+        }> | undefined;
+        disableClear?: boolean | undefined;
+        readonly?: boolean | undefined;
+        disabled?: boolean | undefined;
+        skeleton?: boolean | undefined;
+        searchSize?: number | undefined;
+        errorMessage?: string | undefined;
+        required?: boolean | undefined;
+        hasChanges?: boolean | undefined;
+        placeholder?: string | undefined;
+        noMargin?: boolean | undefined;
+        icon?: SVGComponent | undefined;
+        mono?: boolean | undefined;
+    };
+    expose(exposed: {
+        focus: () => void;
+        blur: () => void;
+    }): void;
+    attrs: any;
+    slots: {
+        right?(_: {}): any;
+        option?(_: {
+            option: Option;
+            selected: boolean;
+            model: boolean;
+        }): any;
+    };
+    emit: (e: 'update:model-value', value: Type extends "number" ? number : string) => void;
+}, "attrs" | "slots" | "emit"> | undefined, __VLS_setup?: {
+    props: {
+        modelValue: Type extends "number" ? number : string;
+        options: Option[];
+        valueGetter: (option: Option) => Type extends "number" ? number : string;
+        title?: string | undefined;
+        type?: Type | undefined;
+        mobileTitle?: string | undefined;
+        description?: string | undefined;
+        loading?: boolean | undefined;
+        emptyStub?: string | undefined;
+        maxSearchLength?: number | undefined;
+        optionComponent?: Component<{
+            option: Option;
+            selected?: boolean | undefined;
+            model?: boolean | undefined;
+        }> | undefined;
+        disableClear?: boolean | undefined;
+        readonly?: boolean | undefined;
+        disabled?: boolean | undefined;
+        skeleton?: boolean | undefined;
+        searchSize?: number | undefined;
+        errorMessage?: string | undefined;
+        required?: boolean | undefined;
+        hasChanges?: boolean | undefined;
+        placeholder?: string | undefined;
+        noMargin?: boolean | undefined;
+        icon?: SVGComponent | undefined;
+        mono?: boolean | undefined;
+    };
+    expose(exposed: {
+        focus: () => void;
+        blur: () => void;
+    }): void;
+    attrs: any;
+    slots: {
+        right?(_: {}): any;
+        option?(_: {
+            option: Option;
+            selected: boolean;
+            model: boolean;
+        }): any;
+    };
+    emit: (e: 'update:model-value', value: Type extends "number" ? number : string) => void;
+}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            modelValue: Type extends "number" ? number : string;
+            options: Option[];
+            valueGetter: (option: Option) => Type extends "number" ? number : string;
+            title?: string | undefined;
+            type?: Type | undefined;
+            mobileTitle?: string | undefined;
+            description?: string | undefined;
+            loading?: boolean | undefined;
+            emptyStub?: string | undefined;
+            maxSearchLength?: number | undefined;
+            optionComponent?: Component<{
+                option: Option;
+                selected?: boolean | undefined;
+                model?: boolean | undefined;
+            }> | undefined;
+            disableClear?: boolean | undefined;
+            readonly?: boolean | undefined;
+            disabled?: boolean | undefined;
+            skeleton?: boolean | undefined;
+            searchSize?: number | undefined;
+            errorMessage?: string | undefined;
+            required?: boolean | undefined;
+            hasChanges?: boolean | undefined;
+            placeholder?: string | undefined;
+            noMargin?: boolean | undefined;
+            icon?: SVGComponent | undefined;
+            mono?: boolean | undefined;
+        };
+        expose(exposed: {
+            focus: () => void;
+            blur: () => void;
+        }): void;
+        attrs: any;
+        slots: {
+            right?(_: {}): any;
+            option?(_: {
+                option: Option;
+                selected: boolean;
+                model: boolean;
+            }): any;
+        };
+        emit: (e: 'update:model-value', value: Type extends "number" ? number : string) => void;
+    } | undefined;
+};
+export default _default;
+//# sourceMappingURL=WInputOptions.vue.d.ts.map

package/dist/components/Input/WInputOptions.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WInputOptions.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInputOptions.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,KAAK,CAAA;;QAKmB,MAAM;;QAA+B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkYhG,IAAI;WACpC,GAAG;;uBA9DkB,GAAG;;;;;YACF,GAAG;;cAwD1B,oBAAoB,qDAAsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAIb,IAAI;WACpC,GAAG;;uBA9DkB,GAAG;;;;;YACF,GAAG;;cAwD1B,oBAAoB,qDAAsB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAIb,IAAI;eACpC,GAAG;;2BA9DkB,GAAG;;;;;gBACF,GAAG;;kBAwD1B,oBAAoB,qDAAsB,IAAI;;;AA9XpD,wBAuYkE"}

package/dist/components/Input/WInputOptions.vue.js

@@ -0,0 +1,192 @@
+import { defineComponent, ref, computed, watch, toRef, nextTick, openBlock, createBlock, withModifiers, createSlots, withCtx, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, Fragment, renderList, renderSlot, resolveDynamicComponent } from 'vue';
+import _sfc_main$2 from '../Select/components/SelectOption.vue.js';
+import { debounce } from '../../utils/utils.js';
+import _sfc_main$1 from './WInputSuggest.vue.js';
+
+const _hoisted_1 = {
+  key: 0,
+  class: "py-2 px-[1.0625rem] first:pt-4 last:pb-4"
+};
+const _hoisted_2 = { class: "select-none cursor-default w-select-field sm-not:px-3" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WInputOptions",
+  props: {
+    modelValue: {},
+    options: {},
+    valueGetter: { type: Function },
+    title: {},
+    type: {},
+    mobileTitle: {},
+    description: {},
+    loading: { type: Boolean },
+    emptyStub: {},
+    maxSearchLength: {},
+    optionComponent: {},
+    disableClear: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    skeleton: { type: Boolean },
+    searchSize: {},
+    errorMessage: {},
+    required: { type: Boolean },
+    hasChanges: { type: Boolean },
+    placeholder: {},
+    noMargin: { type: Boolean },
+    icon: {},
+    mono: { type: Boolean }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const isOpen = ref(false);
+    const input = ref();
+    const cursor = ref(-1);
+    const isCursorLocked = ref(false);
+    const lastIndex = computed(() => props.options.length);
+    const focused = ref(false);
+    const loadingOptionIndex = ref(null);
+    const isDisabled = computed(() => props.loading || props.readonly || props.disabled);
+    const close = () => {
+      isOpen.value = false;
+      focused.value = false;
+    };
+    const setLoadingOptionIndex = (value) => {
+      if (isDisabled.value)
+        return;
+      loadingOptionIndex.value = value;
+    };
+    const unlockCursor = debounce(() => {
+      isCursorLocked.value = false;
+    }, 50);
+    const lockCursor = () => {
+      isCursorLocked.value = true;
+      unlockCursor();
+    };
+    const setCursor = (value) => {
+      if (isCursorLocked.value)
+        return;
+      cursor.value = value;
+    };
+    const cursorUp = () => {
+      if (isDisabled.value)
+        return;
+      lockCursor();
+      cursor.value = !props.options.length ? 0 : cursor.value < 1 ? lastIndex.value : cursor.value - 1;
+    };
+    const cursorDown = () => {
+      if (isDisabled.value)
+        return;
+      lockCursor();
+      cursor.value = !props.options.length ? 0 : cursor.value >= lastIndex.value ? 0 : cursor.value + 1;
+    };
+    const selectCursor = () => {
+      if (isDisabled.value)
+        return;
+      const value = cursor.value !== -1 ? props.options[cursor.value] : void 0;
+      if (value)
+        select(value);
+    };
+    const select = (option) => {
+      updateModelValue(props.valueGetter(option));
+      blur();
+    };
+    const updateModelValue = (value) => {
+      if (isDisabled.value || props.modelValue === value)
+        return;
+      emit("update:model-value", value);
+    };
+    const focus = () => {
+      input.value?.focus();
+    };
+    const blur = () => {
+      input.value?.blur();
+    };
+    watch(toRef(props, "modelValue"), async () => {
+      await nextTick();
+      input.value?.updateDropdown();
+    });
+    __expose({
+      focus,
+      blur
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        ref_key: "input",
+        ref: input,
+        title: _ctx.title,
+        "mobile-title": _ctx.mobileTitle,
+        description: _ctx.description,
+        "model-value": _ctx.modelValue,
+        "max-length": _ctx.maxSearchLength,
+        loading: _ctx.loading,
+        readonly: _ctx.readonly,
+        skeleton: _ctx.skeleton,
+        size: _ctx.searchSize,
+        "error-message": _ctx.errorMessage,
+        required: _ctx.required,
+        disabled: _ctx.disabled,
+        "has-changes": _ctx.hasChanges,
+        placeholder: _ctx.placeholder,
+        "no-margin": _ctx.noMargin,
+        icon: _ctx.icon,
+        mono: _ctx.mono,
+        type: _ctx.type,
+        "onUpdate:modelValue": updateModelValue,
+        "onKeypress:enter": withModifiers(selectCursor, ["stop", "prevent"]),
+        "onKeypress:up": withModifiers(cursorUp, ["prevent"]),
+        "onKeypress:down": withModifiers(cursorDown, ["prevent"]),
+        onOpen: _cache[0] || (_cache[0] = ($event) => isOpen.value = true),
+        onClose: close,
+        onFocus: _cache[1] || (_cache[1] = ($event) => focused.value = true),
+        onBlur: _cache[2] || (_cache[2] = ($event) => focused.value = false)
+      }, createSlots({
+        content: withCtx(() => [
+          !_ctx.options.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, toDisplayString(_ctx.emptyStub ?? "No suggestion"), 1)
+          ])) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+            return openBlock(), createBlock(_sfc_main$2, {
+              key: option.id,
+              "is-selected": _ctx.modelValue === _ctx.valueGetter(option),
+              "is-cursor": index === cursor.value,
+              loading: loadingOptionIndex.value === index && _ctx.loading,
+              scroll: isCursorLocked.value,
+              class: "first:pt-4 last:pb-4",
+              onSelect: ($event) => {
+                select(option);
+                setLoadingOptionIndex(index);
+              },
+              onMouseenter: ($event) => setCursor(index)
+            }, {
+              default: withCtx(({ selected }) => [
+                renderSlot(_ctx.$slots, "option", {
+                  option,
+                  selected,
+                  model: false
+                }, () => [
+                  (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), {
+                    option,
+                    selected,
+                    model: false
+                  }, null, 8, ["option", "selected"]))
+                ])
+              ]),
+              _: 2
+            }, 1032, ["is-selected", "is-cursor", "loading", "scroll", "onSelect", "onMouseenter"]);
+          }), 128))
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.right?.()?.length ? {
+          name: "right",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "right")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["title", "mobile-title", "description", "model-value", "max-length", "loading", "readonly", "skeleton", "size", "error-message", "required", "disabled", "has-changes", "placeholder", "no-margin", "icon", "mono", "type", "onKeypress:enter", "onKeypress:up", "onKeypress:down"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Input/WInputOptions.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from './WInputOptions.vue.js';
+
+
+
+export { _sfc_main as default };