v-selectmenu
Version:
SelectMenu for Vue3, A simple, easier and highly customized menu solution
1,536 lines • 53.7 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".sm-container{display:inline-flex;box-sizing:border-box}.sm-container .sm-container-root,.sm-container .sm-container-child{display:flex;flex-direction:column;padding:.5rem 0;min-width:12rem;overflow-y:auto;flex-flow:1}.sm-container .sm-section{overflow-y:auto}.sm-container .sm-row{display:flex;flex-direction:row}.sm-container .sm-column{display:flex;flex-direction:column;flex-grow:1}.sm-container .sm-item--hover:hover{background-color:#f7f7f7}.sm-container .sm-block{display:flex;align-items:center;padding:.5rem;margin:0 .5rem;font-size:14px;gap:.5rem}.sm-container .sm-block__prepend,.sm-container .sm-block__body,.sm-container .sm-block__append{display:inline-flex;align-items:center}.sm-container .sm-block__body{flex-grow:1;line-height:1.3}.sm-container .sm-block .sm-input{margin:0;flex-grow:1}.sm-container .sm-block .sm-button{margin:0}.sm-container .sm-item{display:flex;align-items:center;cursor:pointer;color:#09090b;border-radius:8px}.sm-container .sm-item.disabled{cursor:default;color:#ccc}.sm-container .sm-item.sm-header,.sm-container .sm-item.sm-sub-header{cursor:default;font-weight:600;padding:.5rem 1rem;margin:0}.sm-container .sm-item.sm-header{font-size:1.1rem}.sm-container .sm-item.sm-sub-header{font-size:1rem;color:#999}.sm-container .sm-group{display:flex;flex-direction:column}.sm-container .sm-group__tabs{display:flex;margin:.5rem 1rem .2rem;background-color:#f5f5f5;border-radius:50rem;padding:.3rem}.sm-container .sm-group__tab{font-size:14px;padding:.2rem 1rem;cursor:pointer;border-radius:50rem;color:#aaa;transition:all .2s ease}.sm-container .sm-group__tab.active{background-color:#fff;color:#000;box-shadow:0 1px 3px #00000040;cursor:default}.sm-container .sm-group__body{padding-top:.5rem;display:flex;flex-direction:column}.sm-container .sm-divider{border-top:1px solid #e6e6e6;margin:.5rem 0}.sm-container .sm-divider-vertical{border-right:1px solid #e6e6e6;margin:-.5rem 0}.sm-container .sm-radio-item--checked{display:inline-flex;align-items:center;justify-content:center;width:1.2rem;height:20px}.sm-container .sm-radio-item--checked .sm-icon{font-size:10px}.sm-container .sm-checkbox-item--checked{display:inline-flex;align-items:flex-end;justify-content:center;width:1.2rem;font-size:1rem;height:20px}.sm-container .sm-child-level-trigger{display:flex;align-items:center;cursor:pointer;margin:0 .5rem;border-radius:.5rem}.sm-container .sm-child-level-trigger:hover{background-color:#f7f7f7}.sm-container .sm-child-level-trigger:hover .sm-item{background-color:transparent}.sm-container .sm-child-level-trigger .sm-item{flex-grow:1;margin:0}.sm-container .sm-child-level-trigger .sm-icon{margin:0 .5rem;font-size:.9rem}.sm-container .sm-container-child .sm-child-header{display:flex;align-items:center}.sm-container .sm-container-child .sm-child-header .sm-block__body{font-weight:600;font-size:1rem}.sm-icon{display:inline-flex;width:1em;height:1em;font-size:1rem}.sm-circle-btn{width:20px;height:20px;font-size:14px;line-height:1;display:inline-flex;justify-content:center;align-items:center;cursor:pointer;color:#aaa;transition:all .3s ease;border-radius:50%}.sm-circle-btn:hover{color:#000}.sm-circle-btn.sm-circle-btn--disabled,.sm-circle-btn.sm-circle-btn--disabled:hover{cursor:default;color:#eee}.sm-circle-btn.sm-circle-btn--small{width:16px;height:16px;font-size:12px}.sm-circle-btn.sm-circle-btn--large{width:28px;height:28px;font-size:16px}.sm-rounded--small{border-radius:.25rem!important}.sm-rounded--medium{border-radius:.5rem!important}.sm-rounded--large{border-radius:.75rem!important}.sm-rounded--pill{border-radius:50rem!important}.sm-rounded--circle{border-radius:50%!important}.sm-input{display:flex;align-items:center;height:38px;margin:.5rem 1rem;padding:.35rem .8rem;background-color:#f5f5f5;transition:background-color .3s;min-width:8rem;gap:.5rem}.sm-input.disabled{background-color:#eaeaea}.sm-input.disabled .sm-input__body input{color:#bbb}.sm-input.disabled .sm-input__clear{color:#d3d3d3!important;cursor:default}.sm-input.sm-input--border{border:1px solid #ccc;background-color:#fff}.sm-input.sm-input--border.disabled{background-color:#f5f5f5}.sm-input__body{flex-grow:1;width:0;display:flex;align-items:center}.sm-input__body input{border:0;background-color:transparent;outline:0;color:#666;font-size:14px;line-height:1.3;width:100%;transition:all .3s}.sm-input__body input::-moz-placeholder{color:#bbb}.sm-input__body input::placeholder{color:#bbb}.sm-input__prepend,.sm-input__clear,.sm-input__append{display:inline-flex;align-items:center}.sm-input__prepend{color:#999;font-size:.9rem;padding:0 .2rem;cursor:pointer}.sm-input__clear{color:#ccc;transition:all .3s;opacity:0;flex-shrink:0}.sm-input__clear.active{opacity:1;cursor:pointer}.sm-input__clear.active:hover{color:#666}.sm-button{display:inline-flex;align-items:center;padding:.5rem 1rem;background-color:#e9e9e9;color:#0f0f0f;cursor:pointer;transition:all .3s;height:38px;gap:.5rem;font-weight:500;width:-moz-fit-content;width:fit-content}.sm-button:not(.disabled):hover{opacity:.8}.sm-button:not(.disabled):active{opacity:.6}.sm-button__prepend,.sm-button__body,.sm-button__append{display:inline-flex;align-items:center}.sm-button__body{flex-grow:1;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;user-select:none;justify-content:center}.sm-button.disabled{cursor:default;background-color:#eaeaea;color:#aaa}.sm-button.block{display:flex;flex-grow:1;width:auto;margin:.5rem 1rem}.sm-button.sm-rounded--circle{width:38px;height:38px;padding:0}.sm-button.sm-rounded--circle .sm-button-body{justify-content:center}.sm-button.sm-button--small{padding:0 .8rem;height:30px;font-size:.875rem}.sm-button.sm-button--mini{height:auto;padding:.2rem .5rem;font-size:12px}.sm-button.sm-button--mini .sm-button__body{line-height:1}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
import { defineComponent as g, createVNode as o, ref as x, computed as b, createElementBlock as R, openBlock as D, createElementVNode as E, withDirectives as q, vShow as U, inject as M, provide as O, toRef as Q, watch as j, onMounted as W, onBeforeUnmount as le, toRefs as Ie, Teleport as Be, Transition as Ee, mergeProps as Oe, nextTick as Te } from "vue";
const ae = Symbol("dropdown"), ee = Symbol("menu"), de = Symbol("menu-group"), ce = Symbol("checkbox-group"), se = Symbol("radio-group"), fe = Symbol("multiple-level"), Le = "small", Ae = "medium", Re = "large", H = "pill", pe = "circle", me = "medium", De = "small", ze = "mini", F = [
Le,
Ae,
Re,
H
], ne = [...F, pe], Ve = [me, De, ze], Pe = /* @__PURE__ */ g({
name: "SelectMenuDivider",
props: {
horizontal: {
type: Boolean,
default: !0
}
},
setup(t) {
return () => {
const n = `sm-divider${t.horizontal ? "" : "-vertical"}`;
return o("div", {
class: n
}, null);
};
}
}), je = {
name: "CircleButton",
props: {
size: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
bgColor: {
type: String,
default: "transparent"
},
hoverBgColor: {
type: String,
default: "#f1f1f1"
}
},
setup(t, {
slots: e
}) {
const n = x(""), r = b(() => ({
"sm-circle-btn": !0,
"sm-circle-btn--disabled": t.disabled,
"sm-circle-btn--small": t.size === "small",
"sm-circle-btn--large": t.size === "large"
})), i = b(() => ({
"font-size": t.fontSize,
"background-color": t.disabled ? "transparent" : n.value
})), u = () => {
n.value = t.hoverBgColor;
}, l = () => {
n.value = t.bgColor;
};
return () => {
var c;
return o("div", {
class: r.value,
style: i.value,
onMouseenter: u,
onMouseleave: l
}, [(c = e == null ? void 0 : e.default) == null ? void 0 : c.call(e)]);
};
}
}, z = (t, e) => {
const n = t.__vccOpts || t;
for (const [r, i] of e)
n[r] = i;
return n;
}, He = {}, $e = {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-chevron-left sm-icon",
viewBox: "0 0 16 16"
};
function Ge(t, e) {
return D(), R("svg", $e, e[0] || (e[0] = [
E("path", {
"fill-rule": "evenodd",
d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"
}, null, -1)
]));
}
const Ne = /* @__PURE__ */ z(He, [["render", Ge]]);
function qe(t) {
const e = x([]), n = b(() => e.value.length), r = b(() => ({
maxHeight: t.maxHeight,
overflow: "auto"
})), i = (a) => e.value.push(a), u = () => {
e.value = [];
};
function l() {
e.value.length && e.value.pop();
}
function c({
title: a
}) {
return o("div", {
class: "sm-block sm-item sm-child-header"
}, [o("div", {
class: "sm-block__prepend",
onClick: l
}, [o(je, {
size: "large"
}, {
default: () => [o(Ne, null, null)]
})]), o("div", {
class: "sm-block__body"
}, [a])]);
}
function d() {
return e.value.map((a, s) => {
var m;
return q(o("div", {
class: "sm-container-child"
}, [o(c, {
title: a.title
}, null), o(Pe, null, null), o("div", {
class: "sm-child-body",
style: r.value
}, [(m = a.render) == null ? void 0 : m.call(a)])]), [[U, s === e.value.length - 1]]);
});
}
return {
hasLevels: n,
addChildLevel: i,
resetLevel: u,
MenuLevelGroup: d
};
}
const Zt = /* @__PURE__ */ g({
name: "SelectMenuBody",
props: {
hideOnItemClick: {
type: Boolean,
default: !0
},
maxHeight: {
type: String,
default: ""
}
},
emits: ["action"],
setup(t, {
slots: e,
emit: n
}) {
const {
hasLevels: r,
addChildLevel: i,
resetLevel: u,
MenuLevelGroup: l
} = qe(t), {
registerDropdownClosed: c
} = M(ae, {}), d = b(() => ({
maxHeight: t.maxHeight,
overflow: "auto"
}));
function a(s) {
n("action", s);
}
return c == null || c(u), O(ee, {
menuItemTrigger: a,
addChildLevel: i,
hideOnItemClick: Q(t, "hideOnItemClick")
}), () => {
var s;
return o("div", {
class: "sm-container"
}, [o(l, null, null), q(o("div", {
class: "sm-container-root",
style: d.value
}, [(s = e == null ? void 0 : e.default) == null ? void 0 : s.call(e)]), [[U, !r.value]])]);
};
}
}), Ft = /* @__PURE__ */ g({
name: "SelectMenuSection",
setup(t, {
slots: e
}) {
return () => {
var n;
return o("div", {
class: "sm-section"
}, [(n = e == null ? void 0 : e.default) == null ? void 0 : n.call(e)]);
};
}
});
(function() {
try {
if (typeof document < "u") {
var t = document.createElement("style");
t.appendChild(document.createTextNode('.animate-down-enter-from,.animate-down-leave-to{transform:scale(.95);opacity:0}.animate-down-enter-active{transform-origin:top left;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.animate-down-leave-active{transform-origin:top left;transition-property:opacity,transform;transition-duration:75ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}.animate-up-enter-from,.animate-up-leave-to{transform:scale(.95);opacity:0}.animate-up-enter-active{transform-origin:bottom left;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.animate-up-leave-active{transform-origin:bottom left;transition-property:opacity,transform;transition-duration:75ms;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dd-trigger{display:inline-flex;box-sizing:border-box;width:-moz-fit-content;width:fit-content}.dd-trigger.dd-trigger--block{display:flex;width:auto}.dd-content{-webkit-font-smoothing:subpixel-antialiased;backface-visibility:hidden;display:inline-flex;margin:0;padding:0;max-width:80vw;position:absolute;top:0;left:0;box-sizing:border-box;background-color:#fff;overflow:hidden;border:1px solid #d0d0d0;will-change:opacity,transform,top,left;box-shadow:0 9px 24px #0000002e,0 3px 6px #00000014}.dd-content.dd-no-border{border:0}.dd-rounded--small{border-radius:.25rem!important}.dd-rounded--medium{border-radius:.5rem!important}.dd-rounded--large{border-radius:.75rem!important}.dd-rounded--pill{border-radius:50rem!important}.dd-rounded--circle{border-radius:50%!important}.dd-content-rounded--small{border-radius:6px!important}.dd-content-rounded--medium{border-radius:12px!important}.dd-content-rounded--large{border-radius:18px!important}.dd-trigger-container{display:inline-block}.dd-trigger-container.dd-disabled .dd-default-trigger,.dd-trigger-container.dd-disabled:hover .dd-default-trigger{border:1px solid #eee;background-color:#eee;cursor:default;color:#aaa}.dd-trigger-container .dd-default-trigger{display:inline-flex;align-items:center;padding:.5rem 1rem;background-color:#fff;border:1px solid #ddd;border-radius:.3rem;font-size:14px;line-height:1.42857143;outline:0!important;color:#666;gap:.5rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.dd-trigger-container .dd-default-trigger:hover{border:1px solid #aaa;color:#000}.dd-trigger-container .dd-default-trigger .dd-caret-down{transition:transform .2s ease}.dd-trigger-container .dd-default-trigger.dd-opened{box-shadow:3px 2px 6px #0003;border:1px solid #666;color:#000}.dd-trigger-container .dd-default-trigger.dd-opened .dd-caret-down{transform:rotate(180deg)}.dd-trigger-container .dd-default-trigger.dd-opened:hover{border:1px solid #666}.dd-trigger-container .dd-default-trigger.dd-rounded--circle{width:38px;height:38px;padding:0;justify-content:center}.dd-caret-down{display:inline-block;width:0;height:0;border-top:4px solid;border-left:4px solid transparent;border-right:4px solid transparent;vertical-align:middle;content:""}')), document.head.appendChild(t);
}
} catch (e) {
console.error("vite-plugin-css-injected-by-js", e);
}
})();
var he = function() {
if (typeof Map < "u")
return Map;
function t(e, n) {
var r = -1;
return e.some(function(i, u) {
return i[0] === n ? (r = u, !0) : !1;
}), r;
}
return (
/** @class */
function() {
function e() {
this.__entries__ = [];
}
return Object.defineProperty(e.prototype, "size", {
/**
* @returns {boolean}
*/
get: function() {
return this.__entries__.length;
},
enumerable: !0,
configurable: !0
}), e.prototype.get = function(n) {
var r = t(this.__entries__, n), i = this.__entries__[r];
return i && i[1];
}, e.prototype.set = function(n, r) {
var i = t(this.__entries__, n);
~i ? this.__entries__[i][1] = r : this.__entries__.push([n, r]);
}, e.prototype.delete = function(n) {
var r = this.__entries__, i = t(r, n);
~i && r.splice(i, 1);
}, e.prototype.has = function(n) {
return !!~t(this.__entries__, n);
}, e.prototype.clear = function() {
this.__entries__.splice(0);
}, e.prototype.forEach = function(n, r) {
r === void 0 && (r = null);
for (var i = 0, u = this.__entries__; i < u.length; i++) {
var l = u[i];
n.call(r, l[1], l[0]);
}
}, e;
}()
);
}(), K = typeof window < "u" && typeof document < "u" && window.document === document, $ = function() {
return typeof global < "u" && global.Math === Math ? global : typeof self < "u" && self.Math === Math ? self : typeof window < "u" && window.Math === Math ? window : Function("return this")();
}(), Ue = function() {
return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind($) : function(t) {
return setTimeout(function() {
return t(Date.now());
}, 1e3 / 60);
};
}(), We = 2;
function Xe(t, e) {
var n = !1, r = !1, i = 0;
function u() {
n && (n = !1, t()), r && c();
}
function l() {
Ue(u);
}
function c() {
var d = Date.now();
if (n) {
if (d - i < We)
return;
r = !0;
} else
n = !0, r = !1, setTimeout(l, e);
i = d;
}
return c;
}
var Ye = 20, Ze = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Fe = typeof MutationObserver < "u", Ke = (
/** @class */
function() {
function t() {
this.connected_ = !1, this.mutationEventsAdded_ = !1, this.mutationsObserver_ = null, this.observers_ = [], this.onTransitionEnd_ = this.onTransitionEnd_.bind(this), this.refresh = Xe(this.refresh.bind(this), Ye);
}
return t.prototype.addObserver = function(e) {
~this.observers_.indexOf(e) || this.observers_.push(e), this.connected_ || this.connect_();
}, t.prototype.removeObserver = function(e) {
var n = this.observers_, r = n.indexOf(e);
~r && n.splice(r, 1), !n.length && this.connected_ && this.disconnect_();
}, t.prototype.refresh = function() {
var e = this.updateObservers_();
e && this.refresh();
}, t.prototype.updateObservers_ = function() {
var e = this.observers_.filter(function(n) {
return n.gatherActive(), n.hasActive();
});
return e.forEach(function(n) {
return n.broadcastActive();
}), e.length > 0;
}, t.prototype.connect_ = function() {
!K || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), Fe ? (this.mutationsObserver_ = new MutationObserver(this.refresh), this.mutationsObserver_.observe(document, {
attributes: !0,
childList: !0,
characterData: !0,
subtree: !0
})) : (document.addEventListener("DOMSubtreeModified", this.refresh), this.mutationEventsAdded_ = !0), this.connected_ = !0);
}, t.prototype.disconnect_ = function() {
!K || !this.connected_ || (document.removeEventListener("transitionend", this.onTransitionEnd_), window.removeEventListener("resize", this.refresh), this.mutationsObserver_ && this.mutationsObserver_.disconnect(), this.mutationEventsAdded_ && document.removeEventListener("DOMSubtreeModified", this.refresh), this.mutationsObserver_ = null, this.mutationEventsAdded_ = !1, this.connected_ = !1);
}, t.prototype.onTransitionEnd_ = function(e) {
var n = e.propertyName, r = n === void 0 ? "" : n, i = Ze.some(function(u) {
return !!~r.indexOf(u);
});
i && this.refresh();
}, t.getInstance = function() {
return this.instance_ || (this.instance_ = new t()), this.instance_;
}, t.instance_ = null, t;
}()
), ge = function(t, e) {
for (var n = 0, r = Object.keys(e); n < r.length; n++) {
var i = r[n];
Object.defineProperty(t, i, {
value: e[i],
enumerable: !1,
writable: !1,
configurable: !0
});
}
return t;
}, A = function(t) {
var e = t && t.ownerDocument && t.ownerDocument.defaultView;
return e || $;
}, ve = X(0, 0, 0, 0);
function G(t) {
return parseFloat(t) || 0;
}
function re(t) {
for (var e = [], n = 1; n < arguments.length; n++)
e[n - 1] = arguments[n];
return e.reduce(function(r, i) {
var u = t["border-" + i + "-width"];
return r + G(u);
}, 0);
}
function Je(t) {
for (var e = ["top", "right", "bottom", "left"], n = {}, r = 0, i = e; r < i.length; r++) {
var u = i[r], l = t["padding-" + u];
n[u] = G(l);
}
return n;
}
function Qe(t) {
var e = t.getBBox();
return X(0, 0, e.width, e.height);
}
function et(t) {
var e = t.clientWidth, n = t.clientHeight;
if (!e && !n)
return ve;
var r = A(t).getComputedStyle(t), i = Je(r), u = i.left + i.right, l = i.top + i.bottom, c = G(r.width), d = G(r.height);
if (r.boxSizing === "border-box" && (Math.round(c + u) !== e && (c -= re(r, "left", "right") + u), Math.round(d + l) !== n && (d -= re(r, "top", "bottom") + l)), !nt(t)) {
var a = Math.round(c + u) - e, s = Math.round(d + l) - n;
Math.abs(a) !== 1 && (c -= a), Math.abs(s) !== 1 && (d -= s);
}
return X(i.left, i.top, c, d);
}
var tt = /* @__PURE__ */ function() {
return typeof SVGGraphicsElement < "u" ? function(t) {
return t instanceof A(t).SVGGraphicsElement;
} : function(t) {
return t instanceof A(t).SVGElement && typeof t.getBBox == "function";
};
}();
function nt(t) {
return t === A(t).document.documentElement;
}
function rt(t) {
return K ? tt(t) ? Qe(t) : et(t) : ve;
}
function it(t) {
var e = t.x, n = t.y, r = t.width, i = t.height, u = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, l = Object.create(u.prototype);
return ge(l, {
x: e,
y: n,
width: r,
height: i,
top: n,
right: e + r,
bottom: i + n,
left: e
}), l;
}
function X(t, e, n, r) {
return { x: t, y: e, width: n, height: r };
}
var ot = (
/** @class */
function() {
function t(e) {
this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = X(0, 0, 0, 0), this.target = e;
}
return t.prototype.isActive = function() {
var e = rt(this.target);
return this.contentRect_ = e, e.width !== this.broadcastWidth || e.height !== this.broadcastHeight;
}, t.prototype.broadcastRect = function() {
var e = this.contentRect_;
return this.broadcastWidth = e.width, this.broadcastHeight = e.height, e;
}, t;
}()
), ut = (
/** @class */
/* @__PURE__ */ function() {
function t(e, n) {
var r = it(n);
ge(this, { target: e, contentRect: r });
}
return t;
}()
), lt = (
/** @class */
function() {
function t(e, n, r) {
if (this.activeObservations_ = [], this.observations_ = new he(), typeof e != "function")
throw new TypeError("The callback provided as parameter 1 is not a function.");
this.callback_ = e, this.controller_ = n, this.callbackCtx_ = r;
}
return t.prototype.observe = function(e) {
if (!arguments.length)
throw new TypeError("1 argument required, but only 0 present.");
if (!(typeof Element > "u" || !(Element instanceof Object))) {
if (!(e instanceof A(e).Element))
throw new TypeError('parameter 1 is not of type "Element".');
var n = this.observations_;
n.has(e) || (n.set(e, new ot(e)), this.controller_.addObserver(this), this.controller_.refresh());
}
}, t.prototype.unobserve = function(e) {
if (!arguments.length)
throw new TypeError("1 argument required, but only 0 present.");
if (!(typeof Element > "u" || !(Element instanceof Object))) {
if (!(e instanceof A(e).Element))
throw new TypeError('parameter 1 is not of type "Element".');
var n = this.observations_;
n.has(e) && (n.delete(e), n.size || this.controller_.removeObserver(this));
}
}, t.prototype.disconnect = function() {
this.clearActive(), this.observations_.clear(), this.controller_.removeObserver(this);
}, t.prototype.gatherActive = function() {
var e = this;
this.clearActive(), this.observations_.forEach(function(n) {
n.isActive() && e.activeObservations_.push(n);
});
}, t.prototype.broadcastActive = function() {
if (this.hasActive()) {
var e = this.callbackCtx_, n = this.activeObservations_.map(function(r) {
return new ut(r.target, r.broadcastRect());
});
this.callback_.call(e, n, e), this.clearActive();
}
}, t.prototype.clearActive = function() {
this.activeObservations_.splice(0);
}, t.prototype.hasActive = function() {
return this.activeObservations_.length > 0;
}, t;
}()
), be = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new he(), ye = (
/** @class */
/* @__PURE__ */ function() {
function t(e) {
if (!(this instanceof t))
throw new TypeError("Cannot call a class as a function.");
if (!arguments.length)
throw new TypeError("1 argument required, but only 0 present.");
var n = Ke.getInstance(), r = new lt(e, n, this);
be.set(this, r);
}
return t;
}()
);
[
"observe",
"unobserve",
"disconnect"
].forEach(function(t) {
ye.prototype[t] = function() {
var e;
return (e = be.get(this))[t].apply(e, arguments);
};
});
var at = function() {
return typeof $.ResizeObserver < "u" ? $.ResizeObserver : ye;
}();
function dt() {
const t = window.pageXOffset !== void 0, e = (document.compatMode || "") === "CSS1Compat";
return {
x: t ? window.pageXOffset : e ? document.documentElement.scrollLeft : document.body.scrollLeft,
y: t ? window.pageYOffset : e ? document.documentElement.scrollTop : document.body.scrollTop
};
}
function ct(t) {
return window.getComputedStyle(t).display === "none";
}
function ie(t) {
const e = t.getBoundingClientRect();
return {
width: t.offsetWidth,
height: t.offsetHeight,
top: e.top,
left: e.left
};
}
function _e(t) {
if (!t)
return {
width: 0,
height: 0,
top: 0,
left: 0
};
if (ct(t)) {
t.style.visibility = "hidden", t.style.display = "inline-block";
const e = ie(t);
return t.style.visibility = "visible", t.style.display = "none", e;
}
return ie(t);
}
const we = "click", st = "hover", ft = "contextmenu", pt = 150, Y = "small", Z = "medium", xe = "large", mt = "pill", Ce = "circle", oe = [
Y,
Z,
xe,
mt,
Ce
], ue = [Y, Z, xe], Se = Symbol("dropdown"), Me = Symbol("internal");
function N(t) {
return {
isTriggerByClick: t === we,
isTriggerByHover: t === st,
isTriggerByContextmenu: t === ft
};
}
function ht(t) {
const { trigger: e, align: n, gap: r, animated: i } = t, u = x("down"), l = b(() => i ? `animate-${u.value}` : "");
function c(a, s, m) {
const { isTriggerByContextmenu: y } = N(e.value), f = window.scrollY, _ = document.documentElement.clientHeight, w = y ? a : s.top + f, v = y ? a : s.top + s.height + r.value + f, p = v + m.height > f + _;
return !(w - r.value - m.height < f) && p ? (u.value = "up", w - r.value - m.height) : (u.value = "down", v);
}
function d(a, s, m) {
const { isTriggerByContextmenu: y } = N(e.value), f = window.scrollX, _ = document.documentElement.clientWidth, w = y ? 0 : s.width, v = y ? a : s.left + f, p = v + w / 2 - m.width / 2, k = v + w - m.width, P = v + m.width > f + _, I = p + m.width > f + _, T = k < f;
switch (n.value) {
case "left":
return P ? k : v;
case "center":
return I ? k : T ? v : p;
case "right":
return T ? v : k;
}
}
return {
transitionName: l,
getTop: c,
getLeft: d
};
}
function gt(t) {
const e = dt();
return {
x: t.pageX || t.clientX + e.x,
y: t.pageY || t.clientY + e.y
};
}
function vt(t) {
return [
"dd-trigger",
t.block && "dd-trigger--block"
];
}
function bt(t) {
return `dd-rounded--${!t || !oe.includes(t) ? Z : oe.find((e) => e === t)}`;
}
function yt(t) {
return `dd-content-rounded--${!t || !ue.includes(t) ? Y : ue.find((e) => e === t)}`;
}
function te() {
return M(Se, {});
}
function _t(t = 300) {
let e;
return (n) => {
clearTimeout(e), e = setTimeout(n, t);
};
}
function wt(t, e) {
let n = 0, r = 0, i;
const u = (c) => {
n = c.width, r = c.height;
}, l = (c) => {
const d = c[0].contentRect;
if (!(!d.width && !d.height)) {
if (n === 0 && r === 0) return u(d);
(n !== d.width || r !== d.height) && (u(d), e == null || e());
}
};
W(() => {
if (!t.value) return;
const c = (window == null ? void 0 : window.ResizeObserver) || at;
i = new c(l), i.observe(t.value);
}), le(() => {
!i || !t.value || i.unobserve(t.value);
});
}
function xt(t) {
let e = 0, n = 0, r = 0;
const i = (d) => {
e = d.left, n = d.top, r = d.height;
}, u = () => {
const d = t.value.getBoundingClientRect();
return {
top: d.top + window.scrollY,
left: d.left + window.scrollX,
height: d.height
};
}, l = () => {
e !== 0 || n !== 0 || r !== 0 || i(u());
};
function c(d) {
const a = u();
(e !== a.left || n !== a.top || r !== a.height) && (i(a), Te(() => d == null ? void 0 : d()));
}
return W(() => l()), {
detectTriggerPositionChange: c
};
}
const Ct = /* @__PURE__ */ g({
name: "VDropdown",
props: {
disabled: {
type: Boolean,
default: !1
},
/** Content show up alignment direction */
align: {
type: String,
default: "left"
},
/** Toggle display / close dropdown content */
toggle: {
type: Boolean,
default: !0
},
/** Manual control the display and hiding of dropdown */
manual: {
type: Boolean,
default: !1
},
/**
* Trigger container display mode
* - false: inline
* - true: block
*/
block: {
type: Boolean,
default: !1
},
/**
* Dropdown trigger method
* - `click` default
* - `hover`
* - `contextmenu`
*/
trigger: {
type: String,
default: we
},
/** The distance(px) between the trigger and the content */
gap: {
type: Number,
default: 5
}
},
emits: ["visible-change", "open", "close", "opened", "closed"],
setup(t, {
slots: e,
emit: n,
expose: r
}) {
const i = x(null), u = x(!1), l = x({
x: null,
y: null
}), c = x(), d = _t(pt), {
isTriggerByClick: a,
isTriggerByHover: s,
isTriggerByContextmenu: m
} = N(t.trigger);
j(u, (h) => n("visible-change", h));
function y() {
var h;
t.disabled || ((h = c.value) == null || h.call(c), s ? d(() => {
u.value = !0;
}) : u.value = !0);
}
function f(h = !1) {
t.disabled || !t.toggle && !h || (s ? d(() => {
u.value = !1;
}) : u.value = !1);
}
const _ = () => u.value ? f() : y();
function w(h) {
if (!u.value) return;
const L = h.composedPath().some((ke) => ke === i.value);
L && !t.toggle && !m || (!L || L && m) && f(!0);
}
const v = (h) => {
!a || t.manual || (h.stopPropagation(), _());
}, p = () => s && y(), k = () => s && f(), P = (h) => {
if (!m || t.manual) return;
h.stopPropagation(), h.preventDefault();
const L = gt(h);
l.value.x = L.x, l.value.y = L.y, y();
}, I = () => {
var h;
return (h = c.value) == null ? void 0 : h.call(c);
}, T = (h) => {
typeof h == "function" && (c.value = h);
}, {
detectTriggerPositionChange: B
} = xt(i), C = {
disabled: b(() => t.disabled),
visible: b(() => u.value),
adjust: I,
close: f
};
function S() {
return e.trigger ? e.trigger(C) : null;
}
return W(() => {
document.body.addEventListener("mousedown", w);
}), le(() => {
document.body.removeEventListener("mousedown", w);
}), O(Se, C), O(Me, {
position: l,
display: y,
close: f,
registerAdjustContent: T,
detectTriggerPositionChange: B,
getRootRect: () => _e(i.value),
dropdownProps: Ie(t),
dropdownEmit: n
}), r({
display: y,
close: f,
toggleVisible: _,
adjust: I,
visible: u
}), () => {
var h;
return o("div", {
ref: i,
class: vt(t),
onMouseenter: p,
onMouseleave: k,
onContextmenu: P,
onClick: v
}, [o(S, null, null), (h = e.default) == null ? void 0 : h.call(e, C)]);
};
}
}), Kt = /* @__PURE__ */ g({
name: "DropdownTrigger",
props: {
rounded: {
type: String,
default: Z
}
},
setup(t, {
slots: e
}) {
const n = te(), r = b(() => {
var d;
return [{
"dd-default-trigger": !0,
"dd-opened": (d = n == null ? void 0 : n.visible) == null ? void 0 : d.value
}, bt(t.rounded)];
}), i = b(() => {
var d;
return {
"dd-trigger-container": !0,
"dd-disabled": (d = n == null ? void 0 : n.disabled) == null ? void 0 : d.value
};
}), u = () => e.default ? e.default() : "Open", l = () => t.rounded === Ce ? null : e.append ? e.append() : o("span", {
class: "dd-caret-down"
}, null), c = () => o("button", {
type: "button",
class: r.value
}, [o(u, null, null), o(l, null, null)]);
return () => o("div", {
class: i.value
}, [o(c, null, null)]);
}
}), St = /* @__PURE__ */ g({
name: "DropdownContent",
inheritAttrs: !1,
props: {
border: {
type: Boolean,
default: !0
},
animated: {
type: Boolean,
default: !0
},
rounded: {
type: String,
default: Y
},
zIndex: {
type: Number,
default: 3e3
}
},
setup(t, {
slots: e,
attrs: n
}) {
var r;
const i = x(null), u = x({}), l = b(() => ["dd-content", t.border || "dd-no-border", yt(t.rounded)]), {
position: c,
display: d,
close: a,
getRootRect: s,
registerAdjustContent: m,
detectTriggerPositionChange: y,
dropdownProps: f,
dropdownEmit: _
} = M(Me, {}), {
visible: w
} = te(), {
isTriggerByHover: v
} = N((r = f == null ? void 0 : f.trigger) == null ? void 0 : r.value), {
transitionName: p,
getLeft: k,
getTop: P
} = ht({
trigger: f == null ? void 0 : f.trigger,
align: f == null ? void 0 : f.align,
gap: f == null ? void 0 : f.gap,
animated: t.animated
});
function I() {
const B = s(), C = _e(i.value), S = P(c.value.y, B, C), h = k(c.value.x, B, C);
u.value["z-index"] = t.zIndex, u.value.top = `${S}px`, u.value.left = `${h}px`;
}
function T(B) {
B.stopPropagation(), w.value && y(I);
}
return m == null || m(I), wt(i, I), () => {
const B = {
default: () => {
var C;
return q(o("div", Oe({
ref: i,
style: u.value,
class: l.value,
onMousedown: (S) => S.stopPropagation(),
onClick: T,
onMouseenter: () => v && d(),
onMouseleave: () => v && a()
}, n), [(C = e == null ? void 0 : e.default) == null ? void 0 : C.call(e)]), [[U, w == null ? void 0 : w.value]]);
}
};
return o(Be, {
to: "body"
}, {
default: () => [o(Ee, {
name: p.value,
onEnter: (C, S) => {
_("open"), setTimeout(S, 150);
},
onAfterEnter: () => _("opened"),
onLeave: (C, S) => {
_("close"), setTimeout(S, 75);
},
onAfterLeave: () => _("closed")
}, B)]
});
};
}
});
function V(t, e) {
const {
menuItemTrigger: n,
hideOnItemClick: r
} = M(ee, {}), {
hideOnTriggerClick: i
} = M(fe, {}), {
close: u
} = te();
function l() {
return e.prepend ? o("div", {
class: "sm-block__prepend"
}, [e.prepend()]) : null;
}
function c() {
return e.append ? o("div", {
class: "sm-block__append"
}, [e.append()]) : null;
}
function d() {
var s;
return o("div", {
class: "sm-block__body"
}, [(s = e == null ? void 0 : e.default) == null ? void 0 : s.call(e)]);
}
function a({
triggerAction: s = !0,
hover: m = !0,
hideOnClick: y = r == null ? void 0 : r.value
}, {
slots: f
}) {
var v;
const _ = b(() => ({
"sm-block": !0,
"sm-item--hover": !t.disabled && m,
disabled: t.disabled
}));
function w() {
t.disabled || (s && t.action && (n == null || n(t.action)), i !== !1 && y && (u == null || u()));
}
return o("div", {
class: _.value,
onClick: w
}, [(v = f == null ? void 0 : f.default) == null ? void 0 : v.call(f)]);
}
return {
ItemContainer: a,
ItemPrepend: l,
ItemBody: d,
ItemAppend: c
};
}
const Jt = /* @__PURE__ */ g({
name: "SelectMenuSubHeader",
props: {
action: {
type: String,
default: ""
}
},
setup(t, {
slots: e
}) {
const {
ItemContainer: n,
ItemPrepend: r,
ItemBody: i,
ItemAppend: u
} = V(t, e);
return () => o(n, {
class: "sm-item sm-header",
hover: !1,
hideOnClick: !1
}, {
default: () => [o(r, null, null), o(i, null, null), o(u, null, null)]
});
}
}), Qt = /* @__PURE__ */ g({
name: "SelectMenuGroup",
props: {
modelValue: {
type: String,
default: ""
},
maxHeight: {
type: String,
default: ""
}
},
emits: ["update:modelValue", "change"],
setup(t, {
slots: e,
emit: n
}) {
const r = x([]), i = x(t.modelValue), u = b(() => ({
maxHeight: t.maxHeight,
overflow: "auto"
}));
function l(a) {
r.value.length && a && a !== i.value && (i.value = a, n("update:modelValue", a), n("change", r.value.find((s) => s.name === a)));
}
function c(a, s) {
r.value.push({
name: a,
title: s
});
}
function d() {
return r.value.length ? r.value.map((a) => o("div", {
key: a.name,
class: ["sm-group__tab", {
active: a.name === i.value
}],
onClick: () => l(a.name)
}, [a.title])) : null;
}
return j(() => t.modelValue, l), O(de, {
active: i,
addTab: c
}), W(() => {
r.value.length && l(t.modelValue || r.value.at(0).name);
}), () => {
var a;
return o("div", {
class: "sm-group"
}, [o("div", {
class: "sm-group__tabs"
}, [o(d, null, null)]), o("div", {
class: "sm-group__body",
style: u.value
}, [(a = e == null ? void 0 : e.default) == null ? void 0 : a.call(e)])]);
};
}
}), en = /* @__PURE__ */ g({
name: "SelectMenuGroupItem",
props: {
name: {
type: String,
default: "",
required: !0
},
title: {
type: String,
default: "",
required: !0
}
},
setup(t, {
slots: e
}) {
const {
active: n,
addTab: r
} = M(de), i = b(() => t.name === n.value);
function u() {
var l;
return q(o("div", {
class: "sm-group__content"
}, [(l = e == null ? void 0 : e.default) == null ? void 0 : l.call(e)]), [[U, i.value]]);
}
return r(t.name, t.title), () => o(u, null, null);
}
}), tn = /* @__PURE__ */ g({
name: "SelectMenuItem",
props: {
action: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
}
},
setup(t, {
slots: e
}) {
const {
ItemContainer: n,
ItemPrepend: r,
ItemBody: i,
ItemAppend: u
} = V(t, e);
return () => o(n, {
class: "sm-item"
}, {
default: () => [o(r, null, null), o(i, null, null), o(u, null, null)]
});
}
}), nn = /* @__PURE__ */ g({
name: "SelectMenuBlock",
props: {},
setup(t, {
slots: e
}) {
const {
ItemContainer: n,
ItemPrepend: r,
ItemBody: i,
ItemAppend: u
} = V(t, e);
return () => o(n, {
triggerAction: !1,
hover: !1,
hideOnClick: !1
}, {
default: () => [o(r, null, null), o(i, null, null), o(u, null, null)]
});
}
}), rn = /* @__PURE__ */ g({
name: "SelectMenuSubHeader",
props: {
action: {
type: String,
default: ""
}
},
setup(t, {
slots: e
}) {
const {
ItemContainer: n,
ItemPrepend: r,
ItemBody: i,
ItemAppend: u
} = V(t, e);
return () => o(n, {
class: "sm-item sm-sub-header",
hover: !1,
hideOnClick: !1
}, {
default: () => [o(r, null, null), o(i, null, null), o(u, null, null)]
});
}
}), on = /* @__PURE__ */ g({
name: "SelectMenuRow",
setup(t, {
slots: e
}) {
return () => {
var n;
return o("div", {
class: "sm-row"
}, [(n = e == null ? void 0 : e.default) == null ? void 0 : n.call(e)]);
};
}
}), un = /* @__PURE__ */ g({
name: "SelectMenuColumn",
setup(t, {
slots: e
}) {
return () => {
var n;
return o("div", {
class: "sm-column"
}, [(n = e == null ? void 0 : e.default) == null ? void 0 : n.call(e)]);
};
}
}), ln = /* @__PURE__ */ g({
name: "SelectMenuRadioGroup",
props: {
modelValue: {
type: [String, Number],
default: ""
},
hideOnSelection: {
type: Boolean,
default: !0
}
},
emits: ["update:modelValue", "change"],
setup(t, {
slots: e,
emit: n
}) {
const r = x(t.modelValue);
function i(l) {
l !== r.value && (r.value = l, n("update:modelValue", l), n("change", l));
}
function u(l) {
return l === r.value;
}
return j(() => t.modelValue, i), O(se, {
changeChecked: i,
isItemChecked: u,
hideOnSelection: Q(t, "hideOnSelection")
}), () => {
var l;
return o("div", {
class: "sm-radio-group"
}, [(l = e == null ? void 0 : e.default) == null ? void 0 : l.call(e)]);
};
}
}), Mt = {}, kt = {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-record-fill sm-icon",
viewBox: "0 0 16 16"
};
function It(t, e) {
return D(), R("svg", kt, e[0] || (e[0] = [
E("path", {
"fill-rule": "evenodd",
d: "M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10"
}, null, -1)
]));
}
const Bt = /* @__PURE__ */ z(Mt, [["render", It]]), an = /* @__PURE__ */ g({
name: "SelectMenuRadioItem",
props: {
value: {
type: [String, Number],
default: "",
required: !0
},
disabled: {
type: Boolean,
default: !1
}
},
setup(t, {
slots: e
}) {
const {
changeChecked: n,
isItemChecked: r,
hideOnSelection: i
} = M(se), {
ItemContainer: u,
ItemPrepend: l,
ItemBody: c,
ItemAppend: d
} = V(t, e);
function a() {
t.disabled || n(t.value);
}
function s() {
return o("div", {
class: "sm-radio-item--checked"
}, [r(t.value) ? o(Bt, null, null) : ""]);
}
return () => o(u, {
class: "sm-item sm-radio-item",
hideOnClick: i.value,
triggerAction: !1,
onClick: a
}, {
default: () => [o(s, null, null), o(l, null, null), o(c, null, null), o(d, null, null)]
});
}
}), dn = /* @__PURE__ */ g({
name: "SelectMenuCheckboxGroup",
props: {
modelValue: {
type: Array,
default: void 0
},
hideOnSelection: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "change"],
setup(t, {
emit: e,
slots: n
}) {
const r = x(i(t.modelValue) || []);
function i(a) {
return Array.from(new Set(a));
}
function u() {
e("update:modelValue", r.value), e("change", r.value);
}
function l(a) {
r.value.includes(a) ? r.value = r.value.filter((s) => s !== a) : r.value.push(a), u();
}
function c(a) {
const s = i(a);
s.length === r.value.length && r.value.every((m) => s.includes(m)) || (r.value = s, u());
}
function d(a) {
return r.value.includes(a);
}
return j(() => t.modelValue, c), O(ce, {
changeChecked: l,
isItemChecked: d,
hideOnSelection: Q(t, "hideOnSelection")
}), () => {
var a;
return o("div", {
class: "sm-checkbox-group"
}, [(a = n == null ? void 0 : n.default) == null ? void 0 : a.call(n)]);
};
}
}), Et = {}, Ot = {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2",
"stroke-linecap": "round",
"stroke-linejoin": "round",
class: "sm-icon"
};
function Tt(t, e) {
return D(), R("svg", Ot, e[0] || (e[0] = [
E("path", { d: "M20 6 9 17l-5-5" }, null, -1)
]));
}
const Lt = /* @__PURE__ */ z(Et, [["render", Tt]]), cn = /* @__PURE__ */ g({
name: "SelectMenuCheckboxItem",
props: {
value: {
type: [String, Number],
default: "",
required: !0
},
disabled: {
type: Boolean,
default: !1
}
},
setup(t, {
slots: e
}) {
const {
changeChecked: n,
isItemChecked: r,
hideOnSelection: i
} = M(ce), {
ItemContainer: u,
ItemPrepend: l,
ItemBody: c,
ItemAppend: d
} = V(t, e);
function a() {
t.disabled || n(t.value);
}
function s() {
return o("div", {
class: "sm-checkbox-item--checked"
}, [r(t.value) ? o(Lt, null, null) : ""]);
}
return () => o(u, {
class: "sm-item sm-checkbox-item",
hideOnClick: i.value,
triggerAction: !1,
onClick: a
}, {
default: () => [o(s, null, null), o(l, null, null), o(c, null, null), o(d, null, null)]
});
}
});
function At(t = 300) {
let e;
return (n) => {
clearTimeout(e), e = setTimeout(n, t);
};
}
function Rt(t) {
return `sm-rounded--${!t || !F.includes(t) ? H : F.find((n) => n === t)}`;
}
function Dt(t) {
return `sm-rounded--${!t || !ne.includes(t) ? H : ne.find((n) => n === t)}`;
}
const zt = {}, Vt = {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
fill: "currentColor",
class: "bi bi-x-circle-fill sm-icon",
viewBox: "0 0 16 16"
};
function Pt(t, e) {
return D(), R("svg", Vt, e[0] || (e[0] = [
E("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }, null, -1)
]));
}
const jt = /* @__PURE__ */ z(zt, [["render", Pt]]), Ht = {}, $t = {
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
class: "sm-icon sm-icon-loading"
};
function Gt(t, e) {
return D(), R("svg", $t, e[0] || (e[0] = [
E("path", {
d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
opacity: ".25"
}, null, -1),
E("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" }, [
E("animateTransform", {
attributeName: "transform",
type: "rotate",
dur: "0.75s",
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
})
], -1)
]));
}
const J = /* @__PURE__ */ z(Ht, [["render", Gt]]), sn = /* @__PURE__ */ g({
name: "SelectMenuInput",
props: {
modelValue: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
border: {
type: Boolean,
default: !1
},
rounded: {
type: String,
default: H
},
placeholder: {
type: String,
default: ""
},
/** debounce delay when typing, in milliseconds */
debounce: {
type: Number,
default: 0
},
loading: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "change"],
setup(t, {
emit: e,
slots: n
}) {
const r = x(t.modelValue || ""), i = t.debounce ? At(t.debounce) : void 0, u = b(() => t.disabled || t.loading), l = b(() => ["sm-input", Rt(t.rounded), {
disabled: u.value,
"sm-input--border": t.border
}]);
j(() => t.modelValue, d);
const c = (p) => {
e("change", p), e("update:modelValue", p);
};
function d(p) {
p !== r.value && (r.value = p, c(r.value));
}
function a() {
u.value || r.value && d("");
}
function s(p) {
if (!p.target.composing) {
if (!t.debounce)
return d(p.target.value.trim());
i(() => d(p.target.value.trim()));
}
}
function m(p) {
p.target.composing || p.key === "Escape" && a();
}
function y(p) {
p.target.composing = !0;
}
function f(p) {
p.target.composing && (p.target.composing = !1, p.target.dispatchEvent(new Event("input")));
}
function _() {
return n.prepend ? o("div", {
class: "sm-input__prepend"
}, [n.prepend()]) : t.loading ? o("div", {
class: "sm-input__prepend"
}, [o(J, null, null)]) : null;
}
function w() {
return n.append ? o("div", {
class: "sm-input__append"
}, [n.append()]) : null;
}
function v() {
const p = ["sm-input__clear", {
active: r.value
}];
return o("div", {
class: p,
onClick: a
}, [o(jt, null, null)]);
}
return () => o("div", {
class: l.value
}, [o(_, null, null), o("div", {
class: "sm-input__body"
}, [o("input", {
type: "text",
autocomplete: "off",
value: r.value,
placeholder: t.placeholder,
disabled: u.value,
onInput: s,
onKeydown: m,
onCompositionstart: y,
onCompositionend: f
}, null), o(v, null, null)]), o(w, null, null)]);
}
}), fn = /* @__PURE__ */ g({
name: "SelectMenuButton",
props: {
block: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
rounded: {
type: String,
default: H
},
size: {
type: String,
default: me
}
},
setup(t, {
emit: e,
slots: n
}) {
const r = b(() => t.rounded === pe);
function i() {
return Ve.includes(t.size) ? `sm-button--${t.size}` : "";
}
const u = b(() => ["sm-button", {
block: t.block && !r.value,
disabled: t.disabled || t.loading
}, i