eco-vue-js 0.3.67

package/dist/components/Select/WSelect.vue.d.ts

@@ -0,0 +1,187 @@
+import { type Component } from 'vue';
+declare const _default: <Item extends string | number = string>(__VLS_props: {
+    modelValue: Item[];
+    search: string;
+    options: Item[];
+    title?: string | undefined;
+    mobileTitle?: string | undefined;
+    description?: string | undefined;
+    loading?: boolean | undefined;
+    emptyStub?: string | undefined;
+    maxSearchLength?: number | undefined;
+    optionComponent?: Component<{
+        option: Item;
+        selected?: boolean | undefined;
+        model?: boolean | undefined;
+    }> | undefined;
+    disableClear?: boolean | undefined;
+    hidePrefix?: boolean | undefined;
+    readonly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    skeleton?: boolean | undefined;
+    searchSize?: number | undefined;
+    allowCreate?: boolean | 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: Item[];
+        search: string;
+        options: Item[];
+        title?: string | undefined;
+        mobileTitle?: string | undefined;
+        description?: string | undefined;
+        loading?: boolean | undefined;
+        emptyStub?: string | undefined;
+        maxSearchLength?: number | undefined;
+        optionComponent?: Component<{
+            option: Item;
+            selected?: boolean | undefined;
+            model?: boolean | undefined;
+        }> | undefined;
+        disableClear?: boolean | undefined;
+        hidePrefix?: boolean | undefined;
+        readonly?: boolean | undefined;
+        disabled?: boolean | undefined;
+        skeleton?: boolean | undefined;
+        searchSize?: number | undefined;
+        allowCreate?: boolean | 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: {
+        option?(_: {
+            option: string;
+            selected: boolean;
+            model: boolean;
+        }): any;
+        right?(_: {}): any;
+    };
+    emit: {
+        (e: 'select', item: string | number): void;
+        (e: 'unselect', item: string | number): void;
+        (e: 'update:search', value: string): void;
+        (e: 'create:option', value: string): void;
+    };
+}, "attrs" | "slots" | "emit"> | undefined, __VLS_setup?: {
+    props: {
+        modelValue: Item[];
+        search: string;
+        options: Item[];
+        title?: string | undefined;
+        mobileTitle?: string | undefined;
+        description?: string | undefined;
+        loading?: boolean | undefined;
+        emptyStub?: string | undefined;
+        maxSearchLength?: number | undefined;
+        optionComponent?: Component<{
+            option: Item;
+            selected?: boolean | undefined;
+            model?: boolean | undefined;
+        }> | undefined;
+        disableClear?: boolean | undefined;
+        hidePrefix?: boolean | undefined;
+        readonly?: boolean | undefined;
+        disabled?: boolean | undefined;
+        skeleton?: boolean | undefined;
+        searchSize?: number | undefined;
+        allowCreate?: boolean | 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: {
+        option?(_: {
+            option: string;
+            selected: boolean;
+            model: boolean;
+        }): any;
+        right?(_: {}): any;
+    };
+    emit: {
+        (e: 'select', item: string | number): void;
+        (e: 'unselect', item: string | number): void;
+        (e: 'update:search', value: string): void;
+        (e: 'create:option', value: string): void;
+    };
+}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            modelValue: Item[];
+            search: string;
+            options: Item[];
+            title?: string | undefined;
+            mobileTitle?: string | undefined;
+            description?: string | undefined;
+            loading?: boolean | undefined;
+            emptyStub?: string | undefined;
+            maxSearchLength?: number | undefined;
+            optionComponent?: Component<{
+                option: Item;
+                selected?: boolean | undefined;
+                model?: boolean | undefined;
+            }> | undefined;
+            disableClear?: boolean | undefined;
+            hidePrefix?: boolean | undefined;
+            readonly?: boolean | undefined;
+            disabled?: boolean | undefined;
+            skeleton?: boolean | undefined;
+            searchSize?: number | undefined;
+            allowCreate?: boolean | 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: {
+            option?(_: {
+                option: string;
+                selected: boolean;
+                model: boolean;
+            }): any;
+            right?(_: {}): any;
+        };
+        emit: {
+            (e: 'select', item: string | number): void;
+            (e: 'unselect', item: string | number): void;
+            (e: 'update:search', value: string): void;
+            (e: 'create:option', value: string): void;
+        };
+    } | undefined;
+};
+export default _default;
+//# sourceMappingURL=WSelect.vue.d.ts.map

package/dist/components/Select/WSelect.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WSelect.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/WSelect.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,KAAK,CAAA;;;YAolB/D,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgCuB,IAAI;WACpC,GAAG;;;;;;YAtEmB,GAAG;uBACJ,GAAG;;;YA6DzB,QAAQ,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI;YACtC,UAAU,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI;YACxC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;;;;;gBA5BjC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAgCuB,IAAI;WACpC,GAAG;;;;;;YAtEmB,GAAG;uBACJ,GAAG;;;YA6DzB,QAAQ,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI;YACtC,UAAU,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI;YACxC,eAAe,SAAS,MAAM,GAAG,IAAI;YACrC,eAAe,SAAS,MAAM,GAAG,IAAI;;;;;;;;oBA5BjC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAgCuB,IAAI;eACpC,GAAG;;;;;;gBAtEmB,GAAG;2BACJ,GAAG;;;gBA6DzB,QAAQ,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI;gBACtC,UAAU,QAAQ,MAAM,GAAG,MAAM,GAAG,IAAI;gBACxC,eAAe,SAAS,MAAM,GAAG,IAAI;gBACrC,eAAe,SAAS,MAAM,GAAG,IAAI;;;;AAzmB3C,wBAknBkE"}

package/dist/components/Select/WSelect.vue.js

@@ -0,0 +1,318 @@
+import { defineComponent, ref, computed, watch, toRef, nextTick, openBlock, createBlock, unref, withModifiers, createSlots, withCtx, createElementBlock, Fragment, renderList, normalizeClass, renderSlot, resolveDynamicComponent, createVNode, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
+import _sfc_main$2 from './components/SelectOption.vue.js';
+import IconCancel from '../../assets/icons/default/IconCancel.svg.js';
+import { getIsMobile } from '../../utils/mobile.js';
+import { debounce } from '../../utils/utils.js';
+import _sfc_main$1 from '../Input/WInputSuggest.vue.js';
+
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = {
+  key: 0,
+  class: "py-2 px-[1.0625rem] first:pt-4 last:pb-4"
+};
+const _hoisted_4 = { class: "select-none cursor-default w-select-field sm-not:px-3" };
+const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", { class: "w-select-field pr-2 sm-not:px-3" }, " Create: ", -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "WSelect",
+  props: {
+    modelValue: {},
+    search: {},
+    options: {},
+    title: {},
+    mobileTitle: {},
+    description: {},
+    loading: { type: Boolean },
+    emptyStub: {},
+    maxSearchLength: {},
+    optionComponent: {},
+    disableClear: { type: Boolean },
+    hidePrefix: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    skeleton: { type: Boolean },
+    searchSize: {},
+    allowCreate: { type: Boolean },
+    errorMessage: {},
+    required: { type: Boolean },
+    hasChanges: { type: Boolean },
+    placeholder: {},
+    noMargin: { type: Boolean },
+    icon: {},
+    mono: { type: Boolean }
+  },
+  emits: ["select", "unselect", "update:search", "create:option"],
+  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.allowCreate ? props.options.length : props.options.length - 1);
+    const isMobile = getIsMobile();
+    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) {
+        setLoadingOptionIndex(cursor.value);
+        if (props.modelValue.includes(value))
+          unselect(value);
+        else
+          select(value);
+      } else {
+        if (props.search)
+          createOption(props.search);
+      }
+    };
+    let deletePressTimeout = null;
+    const captureDoubleDelete = () => {
+      if (!props.modelValue.length || props.search.length)
+        return;
+      if (deletePressTimeout) {
+        unselect(props.modelValue[props.modelValue.length - 1]);
+        clearTimeout(deletePressTimeout);
+        deletePressTimeout = null;
+      } else {
+        deletePressTimeout = setTimeout(() => {
+          deletePressTimeout = null;
+        }, 500);
+      }
+    };
+    const select = (item) => {
+      if (isDisabled.value)
+        return;
+      emit("select", item);
+    };
+    const unselect = (item) => {
+      if (isDisabled.value)
+        return;
+      emit("unselect", item);
+    };
+    const createOption = (item) => {
+      if (isDisabled.value)
+        return;
+      if (!props.allowCreate)
+        return;
+      setLoadingOptionIndex(props.options.length);
+      emit("create:option", item);
+    };
+    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.search,
+        "max-length": _ctx.maxSearchLength,
+        loading: _ctx.loading,
+        "hide-input": _ctx.modelValue.length === 0 ? false : unref(isMobile) ? !focused.value : !isOpen.value,
+        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,
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => !_ctx.loading && _ctx.$emit("update:search", $event ?? "")),
+        "onKeypress:enter": withModifiers(selectCursor, ["stop", "prevent"]),
+        "onKeypress:up": withModifiers(cursorUp, ["prevent"]),
+        "onKeypress:down": withModifiers(cursorDown, ["prevent"]),
+        "onKeypress:delete": captureDoubleDelete,
+        onOpen: _cache[5] || (_cache[5] = ($event) => isOpen.value = true),
+        onClose: _cache[6] || (_cache[6] = ($event) => {
+          close();
+          _ctx.$emit("update:search", "");
+        }),
+        onFocus: _cache[7] || (_cache[7] = ($event) => focused.value = true),
+        onBlur: _cache[8] || (_cache[8] = ($event) => focused.value = false)
+      }, createSlots({
+        prefix: withCtx(({ unclickable }) => [
+          (_ctx.hidePrefix ? unref(isMobile) ? unclickable || !focused.value : !isOpen.value : true) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.modelValue, (option) => {
+            return openBlock(), createElementBlock("div", {
+              key: option,
+              class: normalizeClass(["relative flex overflow-hidden items-center text-description group/model", {
+                "cursor-pointer": !_ctx.disabled,
+                "cursor-not-allowed opacity-50": _ctx.disabled
+              }])
+            }, [
+              renderSlot(_ctx.$slots, "option", {
+                option,
+                selected: true,
+                model: true
+              }, () => [
+                _ctx.optionComponent ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), {
+                  key: 0,
+                  option,
+                  selected: true,
+                  model: true
+                }, {
+                  default: withCtx(() => [
+                    !_ctx.disableClear ? (openBlock(), createElementBlock("button", {
+                      key: 0,
+                      class: normalizeClass(["relative flex square-5 rounded-full -my-1 -mr-2 ml-1 items-center justify-center outline-none", {
+                        "cursor-not-allowed": _ctx.disabled,
+                        "cursor-progress": _ctx.loading,
+                        "cursor-pointer w-ripple w-ripple-hover ": !_ctx.loading && !_ctx.disabled
+                      }]),
+                      onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                      }, ["stop", "prevent"])),
+                      onClick: withModifiers(($event) => !_ctx.loading && unselect(option), ["stop", "prevent"])
+                    }, [
+                      createVNode(unref(IconCancel), { class: "square-3" })
+                    ], 42, _hoisted_1)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1032, ["option"])) : createCommentVNode("", true)
+              ]),
+              !_ctx.optionComponent && !_ctx.disableClear ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                class: normalizeClass(["relative flex square-5 rounded-full items-center justify-center outline-none", {
+                  "cursor-not-allowed": _ctx.disabled,
+                  "cursor-progress": _ctx.loading,
+                  "cursor-pointer w-ripple w-ripple-hover ": !_ctx.loading && !_ctx.disabled
+                }]),
+                onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+                }, ["stop", "prevent"])),
+                onClick: withModifiers(($event) => !_ctx.loading && unselect(option), ["stop", "prevent"])
+              }, [
+                createVNode(unref(IconCancel), { class: "square-3" })
+              ], 42, _hoisted_2)) : createCommentVNode("", true)
+            ], 2);
+          }), 128)) : createCommentVNode("", true)
+        ]),
+        content: withCtx(() => [
+          !_ctx.options.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, toDisplayString(_ctx.emptyStub ?? "No match"), 1)
+          ])) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option, index) => {
+            return openBlock(), createBlock(_sfc_main$2, {
+              key: option,
+              "is-selected": _ctx.modelValue.includes(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);
+              },
+              onUnselect: ($event) => {
+                unselect(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", "onUnselect", "onMouseenter"]);
+          }), 128)),
+          _ctx.allowCreate && _ctx.search !== "" ? (openBlock(), createBlock(_sfc_main$2, {
+            key: 1,
+            "is-selected": false,
+            "is-cursor": cursor.value === _ctx.options.length,
+            loading: loadingOptionIndex.value === _ctx.options.length && _ctx.loading,
+            scroll: isCursorLocked.value,
+            class: "first:pt-4 last:pb-4",
+            onSelect: _cache[2] || (_cache[2] = ($event) => createOption(_ctx.search)),
+            onMouseenter: _cache[3] || (_cache[3] = ($event) => setCursor(_ctx.options.length))
+          }, {
+            default: withCtx(() => [
+              _hoisted_5,
+              renderSlot(_ctx.$slots, "option", {
+                option: _ctx.search,
+                selected: false,
+                model: false
+              }, () => [
+                (openBlock(), createBlock(resolveDynamicComponent(_ctx.optionComponent), {
+                  option: _ctx.search,
+                  selected: false,
+                  model: false
+                }, null, 8, ["option"]))
+              ])
+            ]),
+            _: 3
+          }, 8, ["is-cursor", "loading", "scroll"])) : createCommentVNode("", true)
+        ]),
+        _: 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", "hide-input", "readonly", "skeleton", "size", "error-message", "required", "disabled", "has-changes", "placeholder", "no-margin", "icon", "mono", "onKeypress:enter", "onKeypress:up", "onKeypress:down"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/components/Select/WSelect.vue2.js

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