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