@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
573 lines (572 loc) • 22.5 kB
JavaScript
import { defineComponent as Me, mergeModels as ve, computed as A, ref as b, useModel as Pe, watch as M, nextTick as Z, unref as s, onUnmounted as Fe, openBlock as r, createBlock as L, mergeProps as U, toHandlers as ce, withCtx as m, createElementVNode as P, createElementBlock as u, normalizeClass as k, Fragment as w, createTextVNode as T, toDisplayString as g, createVNode as B, renderSlot as O, createCommentVNode as R, renderList as j, createSlots as Ee, normalizeStyle as He, withModifiers as We, withDirectives as qe, vModelSelect as Ue } from "vue";
import { useEventListener as je, useResizeObserver as Xe } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useColors as Ke } from "../../composables/useColors.js";
import { useCommon as he } from "../../composables/useCommon.js";
import { useInputtable as _ } from "../../composables/useInputtable.js";
import { useInteractive as ke } from "../../composables/useInteractive.js";
import { useTheme as Ge } from "../../composables/useTheme.js";
import { useVirtualList as Je } from "../../composables/useVirtualList.js";
import { checkIcon as Qe, closeIcon as Ye, selectIcon as Ze } from "../../common/icons.js";
import _e from "../label/Label.vue.js";
import pe from "../tag/Tag.vue.js";
import me from "../icon/Icon.vue.js";
import el from "../menu/MenuItem.vue.js";
import ll from "../spinner/Spinner.vue.js";
import ye from "../popover/Popover.vue.js";
import "../popover/Popover.vue3.js";
import be from "../popover/PopoverContainer.vue.js";
import tl from "../inputFooter/InputFooter.vue.js";
import al from "../input/Input.vue.js";
import { useThrottleFn as il } from "../../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/shared/index.js";
const ol = { class: "relative" }, rl = {
key: 0,
class: "text-secondary-400 dark:text-secondary-500"
}, sl = { key: 1 }, nl = {
key: 0,
class: "text-secondary-400 dark:text-secondary-500"
}, ul = { key: 1 }, dl = {
key: 0,
class: "p-2 text-center text-secondary-400"
}, fl = ["id", "name", "disabled", "multiple", "readonly"], vl = ["value", "disabled"], cl = {
...Ke.props("secondary"),
...he.props(),
...ke.props(),
..._.props(),
placeholder: String,
options: Array,
multiple: Boolean,
multipleCheckbox: Boolean,
truncate: Boolean,
flat: Boolean,
native: Boolean,
filterable: Boolean,
clearable: Boolean,
filterPlaceholder: {
type: String,
default: "Filter by..."
},
virtualList: Boolean,
virtualListOffsetTop: Number,
virtualListOffsetBottom: Number,
virtualListItemHeight: {
type: Number,
default: 33
},
virtualListOverscan: {
type: Number,
default: 5
},
placement: String
}, pl = {
name: "XSelect",
validators: {
...he.validators()
}
}, Nl = /* @__PURE__ */ Me({
...pl,
props: /* @__PURE__ */ ve(cl, {
filter: { default: "" },
filterModifiers: {}
}),
emits: /* @__PURE__ */ ve([..._.emits(), "close"], ["update:filter"]),
setup(ee, { expose: ge, emit: Ce }) {
const i = ee, S = Ce, c = A(() => i.multiple || i.multipleCheckbox), X = b(null), K = b(null), F = b(null), C = b(null), G = b(null), d = b(), I = Pe(ee, "filter"), E = b(null), $ = A(() => i.disabled || i.loading || i.readonly), we = A(() => !i.loading && !i.readonly && !i.disabled && i.clearable && !J(o.value)), o = A({
get() {
return c.value ? i.modelValue ? Array.isArray(i.modelValue) ? i.modelValue : [i.modelValue] : [] : i.modelValue;
},
set(e) {
S("update:modelValue", e);
}
}), h = A(() => !i.options || i.options.length === 0 ? [] : i.options.filter((e) => I.value === "" || e.label.toLowerCase().includes(I.value.toLowerCase())).map((e) => {
let t = !1;
return c.value && Array.isArray(o.value) ? t = o.value.includes(e.value) : t = e.value === o.value, {
value: e.value,
label: e.label,
active: t,
prefix: e.prefix,
suffix: e.suffix,
disabled: e.disabled,
iconRight: !i.multipleCheckbox && t ? Qe : void 0,
keepOpenOnClick: e.keepOpenOnClick,
onClick: () => ie(e.value)
};
})), le = A(() => h.value.filter((e) => !e.disabled)), { list: te, scrollTo: Oe, containerProps: $e, wrapperProps: Ae } = Je(
h,
{
disabled: !i.virtualList,
itemHeight: i.virtualListItemHeight,
topOffset: i.virtualListOffsetTop || 0,
bottomOffset: i.virtualListOffsetBottom || 0,
overscan: i.virtualListOverscan
}
), V = A(() => {
var e;
return (e = C.value) == null ? void 0 : e.isOpen;
});
M(I, (e) => {
e && (d.value = void 0, H(-1));
}), M(V, (e) => {
e ? (Re(), (c.value || typeof d.value > "u") && H(-1), setTimeout(() => {
requestAnimationFrame(() => {
var t;
ae(d.value || 0), i.filterable && ((t = E.value) == null || t.focus());
});
}, 50)) : (i.filterable && (I.value = ""), S("close"));
});
function Re() {
if (c.value) {
if (Array.isArray(o.value) && o.value.length > 0) {
const e = h.value.findIndex((t) => t.value === o.value[0]);
e !== -1 && (d.value = e);
}
} else {
const e = h.value.findIndex((t) => t.value === o.value);
e !== -1 && (d.value = e);
}
}
function ae(e) {
var t;
i.virtualList ? Oe(e) : F.value && ((t = F.value[e]) == null || t.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
}
M(d, (e) => {
typeof e < "u" && F.value && ae(e);
});
function H(e, t = "down") {
if (!le.value || le.value.length === 0) {
d.value = void 0;
return;
}
typeof e > "u" && (e = t === "down" ? -1 : 1);
const l = h.value.length;
let a = 0;
if (t === "down") {
let n = e + 1;
for (n > l - 1 && (n = 0); h.value[n].disabled; )
if (++n > l - 1 && (n = 0), ++a >= l) {
d.value = void 0;
return;
}
d.value = n;
} else {
let n = e - 1;
for (n < 0 && (n = l - 1); h.value[n].disabled; )
if (--n < 0 && (n = l - 1), ++a >= l) {
d.value = void 0;
return;
}
d.value = n;
}
}
function ie(e) {
var l;
const t = (l = i.options) == null ? void 0 : l.find((a) => a.value === e);
if (!(!t || t.disabled))
if (t.onClick)
t.onClick();
else {
if (c.value) {
if (Array.isArray(o.value)) {
const a = o.value.indexOf(e);
a !== -1 ? o.value.splice(a, 1) : o.value.push(e);
} else
o.value = [e];
S("update:modelValue", o.value), i.filterable && setTimeout(() => {
var a;
(a = E.value) == null || a.focus();
});
} else
o.value = e;
i.native || Z(() => {
var a;
ue(), (a = K.value) == null || a.$el.focus();
});
}
}
function J(e) {
return !!(typeof e > "u" || e === null || e === "" || Array.isArray(e) && e.length === 0 || !Array.isArray(e) && typeof e == "object" && Object.keys(e).length === 0);
}
function oe(e, t) {
if (e.stopPropagation(), $.value || !Array.isArray(o.value))
return;
const l = o.value.indexOf(t);
l !== -1 && (o.value.splice(l, 1), S("update:modelValue", o.value));
}
function z(e) {
var l;
const t = (l = i.options) == null ? void 0 : l.find((a) => a.value === e);
return t ? t.label : "";
}
const { focus: re, blur: xe } = ke(X), {
errorInternal: se,
hideFooterInternal: Le,
inputListeners: ne,
reset: Q,
validate: ue,
setError: Ie,
isFocused: Ve,
isInsideForm: Te
} = _(i, { focus: re, emit: S, withListeners: !0 }), Be = A(() => {
const { focus: e, blur: t } = s(ne);
return {
focus: e,
blur: t
};
});
let x = null;
M([Ve, V], ([e, t]) => {
e || t ? x || (x = je(document, "keydown", Se)) : x && (x(), x = null);
}, {
immediate: !0
}), Fe(() => {
x && x();
});
function Se(e) {
var t, l, a, n, p;
if (h.value.length !== 0)
if (e.code === "ArrowDown") {
if (e.preventDefault(), !V.value) {
(t = C.value) == null || t.show();
return;
}
H(d.value, "down");
} else if (e.code === "ArrowUp") {
if (e.preventDefault(), !V.value) {
(l = C.value) == null || l.show();
return;
}
H(d.value, "up");
} else if (e.code === "Enter" || e.code === "Space") {
if (e.code === "Space" && i.filterable)
return;
if (e.preventDefault(), e.stopPropagation(), !V.value) {
(a = C.value) == null || a.show();
return;
}
if (typeof d.value < "u" && h.value[d.value]) {
const v = h.value[d.value];
ie(v.value), !v.keepOpenOnClick && (!c.value || i.multipleCheckbox) && ((n = C.value) == null || n.hide());
}
} else
e.code === "Tab" && V.value && (e.preventDefault(), (p = C.value) == null || p.hide(), i.native || Z(() => {
var v;
(v = K.value) == null || v.$el.focus();
}));
}
const N = b(null), de = b(null), W = b(!1), q = b(0), fe = il(() => {
c.value && i.truncate && Z(() => {
const e = ze();
e < o.value.length ? (W.value = !0, q.value = o.value.length - e) : (W.value = !1, q.value = 0);
});
}, 100, !0);
Xe(N, () => {
fe();
});
function ze() {
if (!N.value)
return 0;
const e = N.value.querySelectorAll(".x-tag"), t = Array.from(e);
let l = 0, a = 1;
const n = N.value.offsetWidth - 30;
for (let p = 0; p < t.length; p++) {
const v = t[p];
v.style.display = "flex", l += v.offsetWidth, p > 0 && (l < n ? a++ : v.style.display = "none");
}
return a;
}
M(o, (e) => {
fe();
}, { immediate: !0, deep: !0 });
const { styles: Ne, classes: y, className: De } = Ge("Select", {}, i, { errorInternal: se });
return ge({ focus: re, blur: xe, reset: Q, validate: ue, setError: Ie, filterRef: E }), (e, t) => (r(), L(_e, U({
ref_key: "labelRef",
ref: K,
tabindex: "0",
class: ["group", [
s(De),
s(y).wrapper
]],
style: s(Ne),
disabled: $.value,
required: e.required,
"is-inside-form": s(Te),
label: e.label,
tooltip: e.tooltip
}, ce(Be.value)), {
default: m(() => [
P("div", ol, [
e.native && !c.value ? (r(), u("div", {
key: 0,
class: k(s(y).box),
onClick: t[0] || (t[0] = (l) => {
var a;
return (a = X.value) == null ? void 0 : a.click();
})
}, [
J(o.value) ? (r(), u(w, { key: 1 }, [
e.placeholder ? (r(), u("div", rl, g(e.placeholder), 1)) : (r(), u("div", sl, " "))
], 64)) : (r(), u(w, { key: 0 }, [
T(g(z(o.value)), 1)
], 64))
], 2)) : (r(), u(w, { key: 1 }, [
B(ye, {
ref_key: "popoverRef",
ref: C,
disabled: $.value,
placement: e.placement
}, {
content: m(() => [
B(be, {
class: k(s(y).content)
}, {
default: m(() => [
O(e.$slots, "content-header", {}, () => [
e.filterable ? (r(), u("div", {
key: 0,
class: k(s(y).search)
}, [
B(al, {
ref_key: "filterRef",
ref: E,
modelValue: I.value,
"onUpdate:modelValue": t[2] || (t[2] = (l) => I.value = l),
placeholder: e.filterPlaceholder,
"skip-form-registry": "",
"data-1p-ignore": "",
size: "sm"
}, null, 8, ["modelValue", "placeholder"])
], 2)) : R("", !0)
]),
P("div", U(s($e), {
class: s(y).contentBody
}), [
P("div", U(s(Ae), { class: "space-y-0.5" }), [
(r(!0), u(w, null, j(s(te), (l) => (r(), L(el, {
key: l.index,
ref_for: !0,
ref_key: "itemsRef",
ref: F,
item: l.data,
size: e.size,
disabled: l.data.disabled,
selected: l.index === d.value,
checkbox: e.multipleCheckbox && !l.data.keepOpenOnClick,
color: e.color,
filled: "",
onClick: () => {
var a;
return !l.data.keepOpenOnClick && (!c.value || e.multipleCheckbox) && ((a = C.value) == null ? void 0 : a.hide());
}
}, Ee({
default: m(() => [
O(e.$slots, "label", {
item: l.data
})
]),
_: 2
}, [
e.$slots.prefix || l.data.prefix ? {
name: "prefix",
fn: m(() => [
O(e.$slots, "prefix", {
item: l.data
}, () => [
T(g(l.data.prefix), 1)
])
]),
key: "0"
} : void 0,
e.$slots.suffix || l.data.suffix ? {
name: "suffix",
fn: m(() => [
O(e.$slots, "suffix", {
item: l.data
}, () => [
T(g(l.data.suffix), 1)
])
]),
key: "1"
} : void 0
]), 1032, ["item", "size", "disabled", "selected", "checkbox", "color", "onClick"]))), 128))
], 16),
s(te).length === 0 ? (r(), u("div", dl, " No options ")) : R("", !0)
], 16),
O(e.$slots, "content-footer")
]),
_: 3
}, 8, ["class"])
]),
default: m(() => [
O(e.$slots, "input", {
popover: C.value,
selected: o.value,
disabled: $.value,
label: z(o.value)
}, () => [
P("div", {
class: k([s(y).box])
}, [
c.value && Array.isArray(o.value) && o.value.length > 0 ? (r(), u("div", {
key: 0,
ref_key: "tagsRef",
ref: N,
class: k(["flex gap-1 relative", {
"flex-wrap": !e.truncate,
"overflow-hidden": e.truncate
}])
}, [
(r(!0), u(w, null, j(o.value, (l, a) => {
var n, p, v, D;
return r(), L(pe, {
key: l,
size: "xs",
removable: "",
outlined: !($.value || (p = (n = e.options) == null ? void 0 : n.find((f) => f.value === l)) != null && p.disabled),
disabled: $.value || ((D = (v = e.options) == null ? void 0 : v.find((f) => f.value === l)) == null ? void 0 : D.disabled),
style: He({ "max-width": a === 0 && G.value ? `calc(100% - ${G.value.offsetWidth + 6 + "px"})` : void 0 }),
onRemove: (f) => {
oe(f, l);
}
}, {
prefix: m(() => {
var f;
return [
O(e.$slots, "tag-prefix", {
item: (f = e.options) == null ? void 0 : f.find((Y) => Y.value === l)
})
];
}),
default: m(() => [
T(" " + g(z(l)), 1)
]),
_: 2
}, 1032, ["outlined", "disabled", "style", "onRemove"]);
}), 128)),
W.value ? (r(), u("div", {
key: 0,
ref_key: "hiddenTagsCounterRef",
ref: G,
class: k(s(y).truncateCounter),
onClick: t[1] || (t[1] = We((l) => {
var a;
return (a = de.value) == null ? void 0 : a.toggle();
}, ["stop"]))
}, "+" + g(q.value), 3)) : R("", !0)
], 2)) : !c.value && !J(o.value) ? (r(), u(w, { key: 1 }, [
T(g(z(o.value)), 1)
], 64)) : (r(), u(w, { key: 2 }, [
e.placeholder ? (r(), u("div", nl, g(e.placeholder), 1)) : (r(), u("div", ul, " "))
], 64))
], 2)
])
]),
_: 3
}, 8, ["disabled", "placement"]),
c.value && e.truncate && W.value ? (r(), L(ye, {
key: 0,
ref_key: "multipleHiddenRef",
ref: de,
"popper-show-triggers": [],
"popper-hide-triggers": [],
class: "inline-block !absolute right-0",
placement: "auto-start"
}, {
content: m(() => [
B(be, { class: "p-2 flex gap-2 flex-wrap" }, {
default: m(() => {
var l;
return [
(r(!0), u(w, null, j((l = o.value) == null ? void 0 : l.slice(o.value.length - q.value), (a) => {
var n, p, v, D;
return r(), L(pe, {
key: a,
size: "xs",
removable: "",
outlined: !($.value || (p = (n = e.options) == null ? void 0 : n.find((f) => f.value === a)) != null && p.disabled),
disabled: $.value || ((D = (v = e.options) == null ? void 0 : v.find((f) => f.value === a)) == null ? void 0 : D.disabled),
onRemove: (f) => {
oe(f, a);
}
}, {
prefix: m(() => {
var f;
return [
O(e.$slots, "tag-prefix", {
item: (f = e.options) == null ? void 0 : f.find((Y) => Y.value === a)
})
];
}),
default: m(() => [
T(" " + g(z(a)), 1)
]),
_: 2
}, 1032, ["outlined", "disabled", "onRemove"]);
}), 128))
];
}),
_: 3
})
]),
_: 3
}, 512)) : R("", !0)
], 64)),
qe(P("select", U({
id: e.id,
ref_key: "elRef",
ref: X,
"onUpdate:modelValue": t[3] || (t[3] = (l) => o.value = l),
tabindex: "-1",
class: e.native && !c.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
name: e.name,
disabled: e.disabled || e.loading,
multiple: c.value,
readonly: e.readonly
}, ce(s(ne), !0)), [
e.native ? (r(!0), u(w, { key: 0 }, j(e.options, (l, a) => (r(), u("option", {
key: a,
value: l.value,
disabled: l.disabled
}, g(l.label), 9, vl))), 128)) : R("", !0)
], 16, fl), [
[Ue, o.value]
]),
we.value ? (r(), u("button", {
key: 2,
type: "button",
"aria-label": "Clean value",
class: k(s(y).clearButton),
onClick: t[4] || (t[4] = //@ts-ignore
(...l) => s(Q) && s(Q)(...l))
}, [
B(me, {
icon: s(Ye),
class: k([s(y).icon, "cursor-pointer"])
}, null, 8, ["icon", "class"])
], 2)) : R("", !0),
e.$slots.input ? R("", !0) : (r(), u("div", {
key: 3,
class: k(s(y).iconWrapper)
}, [
e.loading ? (r(), L(ll, {
key: 0,
size: e.size
}, null, 8, ["size"])) : O(e.$slots, "icon", { key: 1 }, () => [
B(me, {
icon: s(Ze),
class: k(s(y).icon)
}, null, 8, ["icon", "class"])
])
], 2))
]),
s(Le) ? R("", !0) : (r(), L(tl, {
key: 0,
error: s(se),
helper: e.helper
}, null, 8, ["error", "helper"]))
]),
_: 3
}, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
}
});
export {
Nl as default
};