@verdnatura/vn-front-lib 0.1.8 → 0.2.0

package/dist/composables.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./composables-BTfGi73U.cjs");exports.fetchLocalData=e.n,exports.focusFirstInput=e.p,exports.getObjectByKeys=e.a,exports.getObjectDifferences=e.o,exports.getRemoteAndLocalParams=e.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return e.d}}),exports.isComparableObject=e.s,exports.isSameValue=e.c,exports.requestData=e.i,exports.tMobile=e.h,exports.useArrayData=e.m,exports.useGlobalMessages=e.f,exports.useNotify=e.u,exports.useObjectComparison=e.l,exports.useRequired=e.g,exports.useState=e.t,exports.useValidator=e._;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./composables-DMmrQNdc.cjs");exports.fetchLocalData=e.n,exports.focusFirstInput=e.p,exports.getObjectByKeys=e.a,exports.getObjectDifferences=e.o,exports.getRemoteAndLocalParams=e.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return e.d}}),exports.isComparableObject=e.s,exports.isSameValue=e.c,exports.requestData=e.i,exports.tMobile=e.h,exports.useArrayData=e.m,exports.useGlobalMessages=e.f,exports.useNotify=e.u,exports.useObjectComparison=e.l,exports.useRequired=e.g,exports.useState=e.t,exports.useValidator=e._;

package/dist/composables.js

@@ -1,2 +1,2 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-xGr9z2hA.js";
+import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-CWY0-8uj.js";
 export { u as fetchLocalData, f as focusFirstInput, t as getObjectByKeys, d as getObjectDifferences, p as getRemoteAndLocalParams, r as i18n, m as isComparableObject, n as isSameValue, s as requestData, o as tMobile, l as useArrayData, i as useGlobalMessages, g as useNotify, c as useObjectComparison, a as useRequired, h as useState, e as useValidator };

package/dist/rolldown-runtime-B0aSnxlc.js

@@ -0,0 +1,20 @@
+//#region \0rolldown/runtime.js
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
+	let r = {};
+	for (var i in e) t(r, i, {
+		get: e[i],
+		enumerable: !0
+	});
+	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
+}, c = (e, i, o, s) => {
+	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
+		get: ((e) => i[e]).bind(null, d),
+		enumerable: !(s = n(i, d)) || s.enumerable
+	});
+	return e;
+}, l = (n, r, o) => (o = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule || !a.call(n, "default") ? t(o, "default", {
+	value: n,
+	enumerable: !0
+}) : o, n));
+//#endregion
+export { s as n, l as r, o as t };

package/dist/vn-front-lib.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./components-DH7vFPBF.cjs"),t=require("./composables-BTfGi73U.cjs");function n(n,r={}){for(let t in e.t)n.component(t,e.t[t]);t.f(r.i18n)}var r={install:n};exports.VnConfirm=e.l,exports.VnDate=e.o,exports.VnFetch=e.r,exports.VnForm=e.n,exports.VnInput=e.a,exports.VnInputDate=e.i,exports.VnSkeletonForm=e.c,exports.VnSpinner=e.s,exports.default=r,exports.fetchLocalData=t.n,exports.focusFirstInput=t.p,exports.getObjectByKeys=t.a,exports.getObjectDifferences=t.o,exports.getRemoteAndLocalParams=t.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return t.d}}),exports.isComparableObject=t.s,exports.isSameValue=t.c,exports.requestData=t.i,exports.tMobile=t.h,exports.useArrayData=t.m,exports.useGlobalMessages=t.f,exports.useNotify=t.u,exports.useObjectComparison=t.l,exports.useRequired=t.g,exports.useState=t.t,exports.useValidator=t._;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./components-DmGc4N0k.cjs"),t=require("./composables-DMmrQNdc.cjs");function n(n,r={}){for(let t in e.t)n.component(t,e.t[t]);t.f(r.i18n)}var r={install:n};exports.VnConfirm=e.u,exports.VnDate=e.s,exports.VnFetch=e.i,exports.VnForm=e.r,exports.VnInput=e.o,exports.VnInputDate=e.a,exports.VnSelect=e.n,exports.VnSkeletonForm=e.l,exports.VnSpinner=e.c,exports.default=r,exports.fetchLocalData=t.n,exports.focusFirstInput=t.p,exports.getObjectByKeys=t.a,exports.getObjectDifferences=t.o,exports.getRemoteAndLocalParams=t.r,Object.defineProperty(exports,"i18n",{enumerable:!0,get:function(){return t.d}}),exports.isComparableObject=t.s,exports.isSameValue=t.c,exports.requestData=t.i,exports.tMobile=t.h,exports.useArrayData=t.m,exports.useGlobalMessages=t.f,exports.useNotify=t.u,exports.useObjectComparison=t.l,exports.useRequired=t.g,exports.useState=t.t,exports.useValidator=t._;

package/dist/vn-front-lib.css

@@ -1,2 +1,2 @@
-.q-card[data-v-087d2dc1]{white-space:pre-line;min-width:350px}.vn-spinner[data-v-e5edebae]{border:3px solid color-mix(in srgb, var(--vn-label-color) 15%, transparent);border-top-color:var(--q-primary);box-sizing:border-box;border-radius:50%;min-width:16px;min-height:16px;animation:.7s cubic-bezier(.4,.15,.6,.85) infinite vn-spin-e5edebae}@keyframes vn-spin-e5edebae{to{transform:rotate(360deg)}}.vn-spinner-fade-enter-active[data-v-e5edebae],.vn-spinner-fade-leave-active[data-v-e5edebae]{transition:opacity .3s,transform .3s}.vn-spinner-fade-enter-from[data-v-e5edebae],.vn-spinner-fade-leave-to[data-v-e5edebae]{opacity:0;transform:scale(.6)}.q-date[data-v-8338d4d1]{width:245px;min-width:unset}.q-date[data-v-8338d4d1] .q-date__calendar{padding-bottom:0}.q-date[data-v-8338d4d1] .q-date__view{min-height:245px;padding:8px}.q-date[data-v-8338d4d1] .q-date__calendar-days-container{min-height:160px;height:unset}.q-date[data-v-8338d4d1] .q-date__header{height:60px;padding:2px 2px 5px 12px}.uppercase-icon{cursor:pointer;transition:color .3s,transform .2s}.uppercase-icon:hover{color:var(--q-color-primary);transform:scale(1.2)}.q-notifications[data-v-addfa85d]{color:#000}.q-card[data-v-addfa85d]{padding:32px}
+.q-card[data-v-087d2dc1]{white-space:pre-line;min-width:350px}.vn-spinner[data-v-e5edebae]{border:3px solid color-mix(in srgb, var(--vn-label-color) 15%, transparent);border-top-color:var(--q-primary);box-sizing:border-box;border-radius:50%;min-width:16px;min-height:16px;animation:.7s cubic-bezier(.4,.15,.6,.85) infinite vn-spin-e5edebae}@keyframes vn-spin-e5edebae{to{transform:rotate(360deg)}}.vn-spinner-fade-enter-active[data-v-e5edebae],.vn-spinner-fade-leave-active[data-v-e5edebae]{transition:opacity .3s,transform .3s}.vn-spinner-fade-enter-from[data-v-e5edebae],.vn-spinner-fade-leave-to[data-v-e5edebae]{opacity:0;transform:scale(.6)}.q-date[data-v-8338d4d1]{width:245px;min-width:unset}.q-date[data-v-8338d4d1] .q-date__calendar{padding-bottom:0}.q-date[data-v-8338d4d1] .q-date__view{min-height:245px;padding:8px}.q-date[data-v-8338d4d1] .q-date__calendar-days-container{min-height:160px;height:unset}.q-date[data-v-8338d4d1] .q-date__header{height:60px;padding:2px 2px 5px 12px}.uppercase-icon{cursor:pointer;transition:color .3s,transform .2s}.uppercase-icon:hover{color:var(--q-color-primary);transform:scale(1.2)}.q-notifications[data-v-addfa85d]{color:#000}.q-card[data-v-addfa85d]{padding:32px}.q-field--outlined[data-v-e5953317]{max-width:100%}.nowrap[data-v-e5953317],.q-field__native[data-v-e5953317]{text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:flex;overflow:hidden;flex-wrap:nowrap!important}.chip-scroll[data-v-e5953317]{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;max-width:100%;overflow:auto hidden}.vn-chip[data-v-e5953317]{color:var(--vn-text-color);background-color:var(--vn-page-color);max-width:none}
 /*$vite$:1*/

package/dist/vn-front-lib.js

@@ -1,10 +1,10 @@
-import { _ as e, a as t, c as n, d as r, f as i, g as a, h as o, i as s, l as c, m as l, n as u, o as d, p as f, r as p, s as m, t as h, u as g } from "./composables-xGr9z2hA.js";
-import { a as _, c as v, i as y, l as b, n as x, o as S, r as C, s as w, t as T } from "./components-BVCHOTDW.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./components-C8Wdf_CB.js";
+import { _ as u, a as d, c as f, d as p, f as m, g as h, h as g, i as _, l as v, m as y, n as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./composables-CWY0-8uj.js";
 //#region lib/main.js
-function E(e, t = {}) {
-	for (let t in T) e.component(t, T[t]);
-	i(t.i18n);
+function D(e, t = {}) {
+	for (let t in c) e.component(t, c[t]);
+	m(t.i18n);
 }
-var D = { install: E };
+var O = { install: D };
 //#endregion
-export { b as VnConfirm, S as VnDate, C as VnFetch, x as VnForm, _ as VnInput, y as VnInputDate, v as VnSkeletonForm, w as VnSpinner, D as default, u as fetchLocalData, f as focusFirstInput, t as getObjectByKeys, d as getObjectDifferences, p as getRemoteAndLocalParams, r as i18n, m as isComparableObject, n as isSameValue, s as requestData, o as tMobile, l as useArrayData, i as useGlobalMessages, g as useNotify, c as useObjectComparison, a as useRequired, h as useState, e as useValidator };
+export { l as VnConfirm, s as VnDate, n as VnFetch, o as VnForm, a as VnInput, e as VnInputDate, i as VnSelect, r as VnSkeletonForm, t as VnSpinner, O as default, b as fetchLocalData, S as focusFirstInput, d as getObjectByKeys, x as getObjectDifferences, C as getRemoteAndLocalParams, p as i18n, w as isComparableObject, f as isSameValue, _ as requestData, g as tMobile, y as useArrayData, m as useGlobalMessages, E as useNotify, v as useObjectComparison, h as useRequired, T as useState, u as useValidator };

package/lib/components/index.js

@@ -6,3 +6,4 @@ export { default as VnInput } from './inputs/VnInput.vue';
 export { default as VnInputDate } from './inputs/VnInputDate.vue';
 export { default as VnFetch } from './models/VnFetch.vue';
 export { default as VnForm } from './models/VnForm.vue';
+export { default as VnSelect } from './selects/VnSelect.vue';

package/lib/components/selects/VnSelect.vue

@@ -0,0 +1,612 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted, useAttrs, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'lib/composables/useArrayData';
+import { useRequired } from 'lib/composables/useRequired';
+import dataByOrder from 'lib/utils/dataByOrder';
+
+const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
+const $attrs = useAttrs();
+const { t } = useI18n();
+
+const isRequired = computed(() => {
+    return useRequired($attrs).isRequired;
+});
+const requiredFieldRule = computed(() => {
+    return useRequired($attrs).requiredFieldRule;
+});
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: [Array, Object],
+        default: () => [],
+    },
+    optionLabel: {
+        type: [String, Function],
+        default: 'name',
+    },
+    optionValue: {
+        type: String,
+        default: 'id',
+    },
+    optionCaption: {
+        type: String,
+        default: null,
+    },
+    optionFilter: {
+        type: String,
+        default: null,
+    },
+    optionFilterValue: {
+        type: String,
+        default: null,
+    },
+    url: {
+        type: String,
+        default: null,
+    },
+    filterOptions: {
+        type: [Array],
+        default: () => [],
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+    isClearable: {
+        type: Boolean,
+        default: true,
+    },
+    fields: {
+        type: Array,
+        default: null,
+    },
+    include: {
+        type: [Object, Array, String],
+        default: null,
+    },
+    where: {
+        type: Object,
+        default: null,
+    },
+    sortBy: {
+        type: [String, Array],
+        default: null,
+    },
+    limit: {
+        type: [Number, String],
+        default: '30',
+    },
+    focusOnMount: {
+        type: Boolean,
+        default: false,
+    },
+    openOnMount: {
+        type: Boolean,
+        default: false,
+    },
+    useLike: {
+        type: Boolean,
+        default: true,
+    },
+    filterBuilder: {
+        type: Function,
+    },
+    params: {
+        type: Object,
+        default: null,
+    },
+    noOne: {
+        type: Boolean,
+        default: false,
+    },
+    dataKey: {
+        type: String,
+        default: null,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+    paramsBuilder: {
+        type: Function,
+        default: () => ({}),
+    },
+    sortOptions: {
+        type: Boolean,
+        default: true,
+    },
+    noWhere: {
+        type: Boolean,
+        default: false,
+    },
+});
+const mixinRules = [requiredFieldRule, ...($attrs.rules ?? [])];
+const {
+    optionLabel,
+    optionValue,
+    optionCaption,
+    optionFilter,
+    optionFilterValue,
+    options,
+    modelValue,
+} = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+const myOptionsMap = ref(new Map());
+const vnSelectRef = ref();
+const lastVal = ref();
+const noOneText = t('globals.noOne');
+const noOneOpt = ref({
+    [optionValue.value]: false,
+    [optionLabel.value]: noOneText,
+});
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+const hasFocus = ref(false);
+const isLoading = ref(false);
+const useURL = computed(() => $props.url);
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        setOptions(myOptionsOriginal.value);
+        emit('update:modelValue', value);
+    },
+});
+const isMultiple = computed(() => {
+    return Array.isArray($props.modelValue) || 'multiple' in $attrs || $attrs.isAdvanced;
+});
+
+const arrayDataKey =
+    $props.dataKey ??
+    ($props.url?.length > 0 ? $props.url : ($attrs.name ?? $attrs.label));
+
+const arrayData = useArrayData(arrayDataKey, {
+    url: $props.url,
+    searchUrl: false,
+    mapKey: $attrs['map-key'],
+});
+const isMenuOpened = ref(false);
+const computedSortBy = computed(() => {
+    if ($props.sortBy) return $props.sortBy;
+    return typeof $props.optionLabel == 'string' ? $props.optionLabel + ' ASC' : '';
+});
+
+function getVal(val) {
+    if (typeof $props.filterBuilder === 'function') return $props.filterBuilder(val);
+
+    return $props.useLike ? { like: `%${val}%` } : val;
+}
+
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+watch(modelValue, async (newValue) => {
+    newValue = (newValue?.neq || newValue?.nin || newValue) ?? [];
+    if (!Array.isArray(newValue)) newValue = [newValue];
+
+    for (const val of newValue)
+        if (!myOptionsMap.value.get(val)) await fetchFilter(val, true);
+
+    if ($props.noOne) myOptions.value.unshift(noOneOpt.value);
+});
+
+watch(
+    () => myOptionsOriginal.value,
+    (newValue) => {
+        for (const item of newValue) {
+            myOptionsMap.value.set(item[optionValue.value], item);
+        }
+    },
+);
+
+onMounted(() => {
+    setOptions(options.value);
+    if (useURL.value && $props.modelValue && !findKeyInOptions())
+        fetchFilter($props.modelValue);
+    if ($props.focusOnMount || $props.openOnMount)
+        setTimeout(() => componentFocus(true, $props.openOnMount), 300);
+});
+
+function findKeyInOptions() {
+    if (!$props.options) return;
+    return filter($props.modelValue, $props.options)?.length;
+}
+
+function setOptions(data) {
+    if ($props.sortOptions) data = dataByOrder(data, computedSortBy.value);
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+    emit('update:options', data);
+}
+
+function filter(val, options) {
+    const search = val?.toString()?.toLowerCase();
+
+    if (!search) return options;
+
+    return options.filter((row) => {
+        if ($props.filterOptions.length) {
+            return $props.filterOptions.some((prop) => {
+                const propValue = String(row[prop]).toLowerCase();
+                return propValue.includes(search);
+            });
+        }
+
+        if (!row) return;
+        const id = String(row[$props.optionValue]).toLowerCase();
+        const optionLabel = String(row[$props.optionLabel]).toLowerCase();
+
+        return id.includes(search) || optionLabel.includes(search);
+    });
+}
+
+async function fetchFilter(val, isValue = false) {
+    if (!$props.url) return;
+    if (val && typeof val == 'object') {
+        val = val.neq;
+    }
+
+    const { fields, include, limit } = $props;
+    const sortBy = computedSortBy.value;
+    const key =
+        optionFilterValue.value ??
+        (isValue || new RegExp(/^\d+$/).test(val)
+            ? optionValue.value
+            : (optionFilter.value ?? optionLabel.value));
+
+    let defaultWhere = {};
+    if ($props.filterOptions.length) {
+        defaultWhere = $props.filterOptions.reduce((obj, prop) => {
+            if (!obj.or) obj.or = [];
+            obj.or.push({ [prop]: getVal(val) });
+            return obj;
+        }, {});
+    } else defaultWhere = { [key]: getVal(val) };
+    const where = $props.noWhere ? {} : { ...(val ? defaultWhere : {}), ...$props.where };
+    $props.exprBuilder && Object.assign(where, $props.exprBuilder(key, val));
+    const filterOptions = { where, include, limit };
+    if (fields) filterOptions.fields = fields;
+    if (sortBy) arrayData.store.order = sortBy;
+    isLoading.value = true;
+
+    arrayData.resetPagination();
+    let data;
+    try {
+        const res = await arrayData.applyFilter(
+            {
+                filter: filterOptions,
+                params: $props.params ?? $props.paramsBuilder?.(val),
+            },
+            { updateRouter: false },
+        );
+        data = res?.data;
+    } finally {
+        isLoading.value = false;
+    }
+    setOptions(data);
+    return data;
+}
+
+async function filterHandler(val, update) {
+    let newOptions;
+    if (isMultipleAndEmpty(val)) {
+        val = null;
+    }
+
+    if (!val && lastVal.value === val) update();
+    else {
+        const makeRequest =
+            ($props.url && $props.limit) ||
+            (!$props.limit && Object.keys(myOptions.value).length === 0);
+        newOptions = makeRequest
+            ? await fetchFilter(val)
+            : filter(val, myOptionsOriginal.value);
+
+        update(
+            () => {
+                if ($props.noOne && noOneText.toLowerCase().includes(val.toLowerCase()))
+                    newOptions.unshift(noOneOpt.value);
+
+                myOptions.value = newOptions;
+            },
+            (ref) => {
+                if (val !== '' && ref.options.length > 0) {
+                    ref.setOptionIndex(-1);
+                    ref.moveOptionSelection(1, true);
+                }
+            },
+        );
+    }
+
+    lastVal.value = val;
+}
+
+function nullishToTrue(value) {
+    return value ?? true;
+}
+
+async function onScroll({ to, direction, from, index }) {
+    const lastIndex = myOptions.value.length - 1;
+
+    if (from === 0 && index === 0) return;
+    if (!useURL.value && !$props.fetchRef) return;
+    if (direction === 'decrease') return;
+    if (to === lastIndex && arrayData.store.hasMoreData) {
+        await arrayData.loadMore();
+        setOptions(arrayData.store.data);
+        vnSelectRef.value.scrollTo(lastIndex);
+        await nextTick();
+    }
+}
+
+defineExpose({ opts: myOptions, vnSelectRef, myOptionsMap });
+
+function getCaption(opt) {
+    if (optionCaption.value === false) return;
+    return opt[optionCaption.value] || opt[optionValue.value];
+}
+
+function getOptionLabel(currentValue) {
+    if (Array.isArray(currentValue)) currentValue = currentValue[0];
+    if (currentValue && typeof currentValue == 'object')
+        currentValue = currentValue[optionValue.value];
+    const selectModel = myOptionsMap.value.get(currentValue);
+
+    if (typeof optionLabel.value == 'function')
+        return optionLabel.value(selectModel ?? {});
+
+    return selectModel?.[optionLabel.value] ?? currentValue;
+}
+
+function handleEnter(event) {
+    if (event?.code !== 'Enter') return;
+    if (event.type === 'keydown' && event.ctrlKey && isMultiple.value) {
+        event.stopPropagation();
+    } else if (event.type === 'keyup' && !event.ctrlKey) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+}
+
+async function componentFocus(force, open) {
+    if (!hasFocus.value && !force) return;
+    hasFocus.value = false;
+    await nextTick();
+    vnSelectRef.value?.focus();
+    if (!isMenuOpened.value && open) vnSelectRef.value?.showPopup();
+}
+
+function isMultipleAndEmpty(val) {
+    return isMultiple.value && Array.isArray(val) && !val.length;
+}
+</script>
+
+<template>
+    <QSelect
+        ref="vnSelectRef"
+        v-model="value"
+        for="vnSelectFor"
+        :options="myOptions"
+        :option-label="optionLabel"
+        :option-value="optionValue"
+        v-bind="{
+            ...$attrs,
+            ...styleAttrs,
+            hideSelected: hasFocus,
+            useInput: hasFocus || !value,
+        }"
+        @filter="filterHandler"
+        :emit-value="nullishToTrue($attrs['emit-value'])"
+        :map-options="nullishToTrue($attrs['map-options'])"
+        no-option-prefetch
+        :use-input="hasFocus || !value"
+        :fill-input="false"
+        lazy-rules
+        :class="{ required: isRequired }"
+        :rules="mixinRules"
+        virtual-scroll-slice-size="options.length"
+        hide-bottom-space
+        :input-debounce="useURL ? '300' : '0'"
+        :loading="isLoading"
+        @virtual-scroll="onScroll"
+        @popup-hide="
+            async () => {
+                isMenuOpened = false;
+                if (!isLoading) await componentFocus();
+            }
+        "
+        @popup-show="
+            async () => {
+                isMenuOpened = true;
+                hasFocus = true;
+                await $nextTick();
+                vnSelectRef?.$el?.querySelector('input')?.focus();
+            }
+        "
+        @keyup.enter="handleEnter"
+        :data-cy="$attrs.dataCy ?? $attrs.label + '_select'"
+        :data-url="url"
+        @blur="
+            async () => {
+                hasFocus = false;
+                await nextTick();
+            }
+        "
+        @update:model-value="
+            async (val) => {
+                await componentFocus();
+                if (isMultipleAndEmpty(val)) {
+                    value = null;
+                    emit('remove');
+                }
+            }
+        "
+        :is-required="false"
+        class="nowrap"
+        autocomplete="off"
+        :multiple="isMultiple"
+        @keydown.capture="handleEnter"
+    >
+        <template #append>
+            <QIcon
+                v-show="isClearable && value != null && value !== ''"
+                name="close"
+                @click="
+                    () => {
+                        value = null;
+                        emit('remove');
+                    }
+                "
+                class="cursor-pointer"
+                size="xs"
+                :data-cy="$attrs.dataCy ?? $attrs.label + '_select_clear'"
+            >
+                <QTooltip>{{ t('Remove') }}</QTooltip>
+            </QIcon>
+        </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <div v-if="slotName == 'append'">
+                <QIcon
+                    v-show="isClearable && value != null && value !== ''"
+                    name="close"
+                    @click.stop="
+                        () => {
+                            value = null;
+                            emit('remove');
+                        }
+                    "
+                    class="cursor-pointer"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('Remove') }}</QTooltip>
+                </QIcon>
+                <slot name="append" v-if="$slots.append" v-bind="slotData ?? {}" />
+            </div>
+            <slot v-else :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
+        <template #option="{ itemProps, opt, selected, toggleOption }">
+            <QItem v-bind="itemProps">
+                <QItemSection v-if="typeof optionLabel === 'function'">{{
+                    optionLabel(opt)
+                }}</QItemSection>
+                <QItemSection v-else-if="typeof opt !== 'object'">
+                    {{ opt }}</QItemSection
+                >
+                <QItemSection v-else-if="opt[optionValue] == opt[optionLabel]">
+                    <QItemLabel>{{ opt[optionLabel] }}</QItemLabel>
+                </QItemSection>
+                <QItemSection v-else>
+                    <QItemLabel>
+                        {{ opt[optionLabel] }}
+                    </QItemLabel>
+                    <QItemLabel caption v-if="getCaption(opt) !== false">
+                        {{ `#${getCaption(opt)}` }}
+                    </QItemLabel>
+                </QItemSection>
+                <QItemSection side v-if="isMultiple">
+                    <QCheckbox
+                        dense
+                        :model-value="selected"
+                        @update:model-value="toggleOption(opt)"
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #selected>
+            <span
+                v-if="!isMultiple && modelValue != null"
+                class="nowrap"
+                :title="getOptionLabel(modelValue)"
+                v-text="getOptionLabel(modelValue)"
+            />
+            <div class="no-wrap chip-scroll" v-else-if="modelValue?.length">
+                <QChip
+                    removable
+                    dense
+                    class="vn-chip"
+                    :style="{ maxWidth: modelValue.length > 1 ? '100px' : '120px' }"
+                    @remove="
+                        () => {
+                            modelValue.shift();
+                            if (!modelValue.length) value = null;
+                            emit('remove');
+                        }
+                    "
+                    :title="getOptionLabel(modelValue[0])"
+                    data-cy="vn-select_chip"
+                >
+                    <span class="ellipsis" v-text="getOptionLabel(modelValue[0])" />
+                </QChip>
+                <QChip
+                    dense
+                    v-if="modelValue.length > 1"
+                    data-cy="vn-select_chip-counter"
+                    class="vn-chip q-mx-none"
+                >
+                    +{{ modelValue.length - 1 }}
+                    <QTooltip>
+                        <div
+                            v-for="(scope, index) in modelValue.slice(1)"
+                            :key="index"
+                            v-text="getOptionLabel(scope)"
+                        />
+                    </QTooltip>
+                </QChip>
+            </div>
+        </template>
+        <template #loading>
+            <VnSpinner size="xs" data-cy="vnSelectSpinner" />
+        </template>
+    </QSelect>
+</template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+.q-field__native {
+    @extend .nowrap;
+}
+
+.nowrap {
+    flex-wrap: nowrap !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: flex;
+    max-width: 100%;
+}
+.chip-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.vn-chip {
+    color: var(--vn-text-color);
+    background-color: var(--vn-page-color);
+    max-width: none;
+}
+</style>
+<i18n>
+    es:
+        Remove: Eliminar
+</i18n>