@a-drowned-fish/rox-v 1.0.27 → 1.0.29

package/README.md

@@ -644,6 +644,263 @@ interface RoxVMenuOptionProps {
 }
 ```
 
+### Toast - 消息提示组件
+
+一个轻量级的消息提示组件，支持多种类型的提示消息，可自定义显示时长和样式。
+
+#### 基础用法
+
+```vue
+<template>
+  <Button @click="showToast">显示提示</Button>
+  <Toaster />
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { toast } = useToast();
+
+const showToast = () => {
+  toast({
+    message: "这是一条提示消息",
+    type: "info",
+    duration: 3000,
+  });
+};
+</script>
+```
+
+#### 不同类型的提示
+
+```vue
+<template>
+  <Button @click="showSuccess">成功</Button>
+  <Button @click="showError">错误</Button>
+  <Button @click="showInfo">信息</Button>
+  <Button @click="showWarning">警告</Button>
+  <Toaster />
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { success, error, info, warning } = useToast();
+
+const showSuccess = () => success("操作成功");
+const showError = () => error("操作失败");
+const showInfo = () => info("这是一条信息");
+const showWarning = () => warning("这是一条警告");
+</script>
+```
+
+#### 自定义显示时长
+
+```vue
+<template>
+  <Button @click="showToast">显示5秒</Button>
+  <Toaster />
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { success } = useToast();
+
+const showToast = () => {
+  success("这条消息将显示5秒", 5000);
+};
+</script>
+```
+
+#### 手动关闭提示
+
+```vue
+<template>
+  <Button @click="showToast">显示提示</Button>
+  <Button @click="dismissAll">关闭所有</Button>
+  <Toaster />
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { toast, dismiss } = useToast();
+let toastId: string;
+
+const showToast = () => {
+  toastId = toast({
+    message: "这条消息需要手动关闭",
+    type: "info",
+    duration: 10000, // 设置较长的显示时间
+  });
+};
+
+const dismissAll = () => {
+  dismiss(); // 关闭所有提示
+  // 或 dismiss(toastId) 关闭指定提示
+};
+</script>
+```
+
+#### 自定义图标
+
+```vue
+<template>
+  <Button @click="showToast">显示提示</Button>
+  <Toaster>
+    <template #success-icon>
+      <svg class="icon" viewBox="0 0 24 24">
+        <path
+          fill="#67c23a"
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        />
+      </svg>
+    </template>
+    <template #error-icon>
+      <svg class="icon" viewBox="0 0 24 24">
+        <path
+          fill="#f56c6c"
+          d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+        />
+      </svg>
+    </template>
+    <template #info-icon>
+      <svg class="icon" viewBox="0 0 24 24">
+        <path
+          fill="#909399"
+          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+        />
+      </svg>
+    </template>
+    <template #warning-icon>
+      <svg class="icon" viewBox="0 0 24 24">
+        <path fill="#e6a23c" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+      </svg>
+    </template>
+  </Toaster>
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { success, error, info, warning } = useToast();
+
+const showToast = () => {
+  success("成功提示");
+  error("错误提示");
+  info("信息提示");
+  warning("警告提示");
+};
+</script>
+
+<style scoped>
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+}
+</style>
+```
+
+#### 自定义样式
+
+```vue
+<template>
+  <Button @click="showToast">显示提示</Button>
+  <Toaster title-class="custom-title" message-class="custom-message" />
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { success } = useToast();
+
+const showToast = () => {
+  success("自定义样式的提示消息");
+};
+</script>
+
+<style scoped>
+:deep(.custom-title) {
+  justify-content: flex-start;
+  padding: 12px 16px;
+}
+
+:deep(.custom-message) {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>
+```
+
+#### 自定义挂载节点
+
+```vue
+<template>
+  <div id="toast-container">
+    <Button @click="showToast">显示提示</Button>
+    <Toaster to="#toast-container" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from "@a-drowned-fish/rox-v";
+import { Toaster } from "@a-drowned-fish/rox-v";
+
+const { success } = useToast();
+
+const showToast = () => {
+  success("提示消息将显示在指定容器中");
+};
+</script>
+```
+
+#### Toaster Props
+
+| 属性         | 说明                 | 类型     | 默认值   |
+| ------------ | -------------------- | -------- | -------- |
+| to           | teleport 的目标节点  | `string` | `'body'` |
+| titleClass   | 标题容器的自定义类名 | `string` | `''`     |
+| messageClass | 消息内容的自定义类名 | `string` | `''`     |
+| toastClass   | 提示容器的自定义类名 | `string` | `''`     |
+
+#### useToast 方法
+
+| 方法名  | 说明                 | 参数类型        | 返回值   |
+| ------- | -------------------- | --------------- | -------- |
+| toast   | 创建一个自定义提示   | `ToastOptions`  | `string` |
+| success | 创建成功类型提示     | `(msg, dur?)`   | `string` |
+| error   | 创建错误类型提示     | `(msg, dur?)`   | `string` |
+| info    | 创建信息类型提示     | `(msg, dur?)`   | `string` |
+| warning | 创建警告类型提示     | `(msg, dur?)`   | `string` |
+| dismiss | 关闭提示（可指定ID） | `(id?: string)` | `void`   |
+
+#### ToastOptions 类型定义
+
+```ts
+interface ToastOptions {
+  message?: string; // 提示消息内容
+  duration?: number; // 显示时长（毫秒），默认 3000
+  type?: ToastType; // 提示类型：'success' | 'error' | 'info' | 'warning'
+}
+```
+
+#### Toaster Slots
+
+| 插槽名       | 说明                 |
+| ------------ | -------------------- |
+| success-icon | 成功提示的自定义图标 |
+| error-icon   | 错误提示的自定义图标 |
+| info-icon    | 信息提示的自定义图标 |
+| warning-icon | 警告提示的自定义图标 |
+
 ## License
 
 MIT

package/dist/es/components.js

@@ -6,15 +6,19 @@ import i from "./collapse/index.js";
 import a from "./input/index.js";
 import o from "./menu/index.js";
 import s from "./tab/index.js";
+import { useToast as c } from "./toast/toast.js";
+import l from "./toast/index.js";
 //#region components/components.ts
-var c = /* @__PURE__ */ e({
+var u = /* @__PURE__ */ e({
 	Button: () => r,
 	Collapse: () => i,
 	Input: () => a,
 	InputOtp: () => t,
 	Menu: () => o,
 	Popup: () => n,
-	Tab: () => s
+	Tab: () => s,
+	Toaster: () => l,
+	useToast: () => c
 });
 //#endregion
-export { c as components_exports };
+export { u as components_exports };

package/dist/es/index.js

@@ -5,12 +5,14 @@ import r from "./collapse/index.js";
 import i from "./input/index.js";
 import a from "./menu/index.js";
 import o from "./tab/index.js";
-import { components_exports as s } from "./components.js";
+import { useToast as s } from "./toast/toast.js";
+import c from "./toast/index.js";
+import { components_exports as l } from "./components.js";
 /* empty css      */
 //#region components/index.ts
-var c = (e) => (Object.keys(s).forEach((t) => {
-	let n = s[t];
+var u = (e) => (Object.keys(l).forEach((t) => {
+	let n = l[t];
 	n.install && e.use(n);
-}), e), l = { install: c };
+}), e), d = { install: u };
 //#endregion
-export { n as Button, r as Collapse, i as Input, e as InputOtp, a as Menu, t as Popup, o as Tab, l as default, c as install };
+export { n as Button, r as Collapse, i as Input, e as InputOtp, a as Menu, t as Popup, o as Tab, c as Toaster, d as default, u as install, s as useToast };

package/dist/es/toast/index.js

@@ -0,0 +1,10 @@
+import "./toast.js";
+import e from "./toaster.js";
+import "./style.css";
+//#region components/toast/index.ts
+e.install = function(t) {
+	return e.name && t.component(e.name, e), t;
+};
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/toast/style.css

@@ -0,0 +1 @@
+.toaster-box[data-v-f97905ec]{z-index:9999;flex-direction:column;gap:12px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}[data-v-f97905ec] .toast-item{box-sizing:border-box;background-color:#0009;min-width:220px;padding:10px}[data-v-f97905ec] .title-box{justify-content:center;align-items:center;gap:10px;display:flex}[data-v-f97905ec] .message{color:#fff}

package/dist/es/toast/toast-item.js

@@ -0,0 +1,5 @@
+import e from "./toast-item.vue_vue_type_script_setup_true_lang.js";
+//#region components/toast/toast-item.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/toast/toast-item.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,26 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+//#region components/toast/toast-item.vue?vue&type=script&setup=true&lang.ts
+var c = { class: "toast-item" }, l = /* @__PURE__ */ r({
+	name: "ToastItem",
+	__name: "toast-item",
+	props: {
+		toast: {},
+		toasterClass: {},
+		titleClass: {},
+		messageClass: {}
+	},
+	setup(r) {
+		return (l, u) => (a(), t("div", c, [r.toast.message ? (a(), t("div", {
+			key: 0,
+			class: i(["title-box", r.titleClass])
+		}, [
+			l.$slots["success-icon"] && r.toast.type === "success" ? o(l.$slots, "success-icon", { key: 0 }) : e("", !0),
+			l.$slots["error-icon"] && r.toast.type === "error" ? o(l.$slots, "error-icon", { key: 1 }) : e("", !0),
+			l.$slots["info-icon"] && r.toast.type === "info" ? o(l.$slots, "info-icon", { key: 2 }) : e("", !0),
+			l.$slots["warning-icon"] && r.toast.type === "warning" ? o(l.$slots, "warning-icon", { key: 3 }) : e("", !0),
+			n("span", { class: i(["message", r.messageClass]) }, s(r.toast.message), 3)
+		], 2)) : e("", !0)]));
+	}
+});
+//#endregion
+export { l as default };

package/dist/es/toast/toast.js

@@ -0,0 +1,58 @@
+import { reactive as e, readonly as t } from "vue";
+//#region components/toast/toast.ts
+var n = e({ toasts: [] }), r = 3e3;
+function i() {
+	return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
+		var t = Math.random() * 16 | 0;
+		return (e == "x" ? t : t & 3 | 8).toString(16);
+	});
+}
+function a(e) {
+	if (e === void 0) n.toasts = [];
+	else {
+		let t = n.toasts.findIndex((t) => t.id === e);
+		t !== -1 && n.toasts.splice(t, 1);
+	}
+}
+function o(e) {
+	let t = {
+		id: i(),
+		message: e?.message || "",
+		duration: e?.duration || r,
+		type: e?.type || "info"
+	};
+	return setTimeout(() => {
+		n.toasts.push(t);
+	}, 0), setTimeout(() => {
+		a(t.id);
+	}, t.duration), t.id;
+}
+function s() {
+	return {
+		toast: o,
+		success: (e, t = r) => o({
+			message: e,
+			duration: t,
+			type: "success"
+		}),
+		error: (e, t = r) => o({
+			message: e,
+			duration: t,
+			type: "error"
+		}),
+		info: (e, t = r) => o({
+			message: e,
+			duration: t,
+			type: "info"
+		}),
+		warning: (e, t = r) => o({
+			message: e,
+			duration: t,
+			type: "warning"
+		}),
+		dismiss: a
+	};
+}
+var c = t(n);
+//#endregion
+export { c as toastStore, s as useToast };

package/dist/es/toast/toaster.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./toaster.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                        */
+//#region components/toast/toaster.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-f97905ec"]]);
+//#endregion
+export { n as default };

package/dist/es/toast/toaster.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,38 @@
+import { toastStore as e } from "./toast.js";
+import t from "./toast-item.js";
+import { Fragment as n, Teleport as r, TransitionGroup as i, createBlock as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, unref as m, withCtx as h } from "vue";
+//#region components/toast/toaster.vue?vue&type=script&setup=true&lang.ts
+var g = /* @__PURE__ */ l({
+	name: "Toaster",
+	__name: "toaster",
+	props: {
+		to: { default: "body" },
+		toasterClass: { default: "" },
+		titleClass: { default: "" },
+		messageClass: { default: "" }
+	},
+	setup(l) {
+		let g = l;
+		return (_, v) => (d(), a(r, { to: l.to }, [s("div", { class: u(["toaster-box", g.toasterClass]) }, [c(i, { name: "toast-fade" }, {
+			default: h(() => [(d(!0), o(n, null, f(m(e).toasts, (e) => (d(), a(t, {
+				key: e.id,
+				toast: e,
+				"title-class": g.titleClass,
+				"message-class": g.messageClass
+			}, {
+				"success-icon": h(() => [p(_.$slots, "success-icon", {}, void 0, !0)]),
+				"error-icon": h(() => [p(_.$slots, "error-icon", {}, void 0, !0)]),
+				"info-icon": h(() => [p(_.$slots, "info-icon", {}, void 0, !0)]),
+				"warning-icon": h(() => [p(_.$slots, "warning-icon", {}, void 0, !0)]),
+				_: 3
+			}, 8, [
+				"toast",
+				"title-class",
+				"message-class"
+			]))), 128))]),
+			_: 3
+		})], 2)], 8, ["to"]));
+	}
+});
+//#endregion
+export { g as default };

package/dist/index.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`rox-v`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Object.defineProperty,r=(e,t)=>{let r={};for(var i in e)n(r,i,{get:e[i],enumerable:!0});return t||n(r,Symbol.toStringTag,{value:`Module`}),r},i=[`inputmode`,`maxlength`],a=(0,t.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`},type:{default:`number`}},emits:[`update:modelValue`,`complete`,`enter`],setup(e,{emit:n}){let r=[`ArrowLeft`,`ArrowRight`,`Home`,`End`],a=e,o=n,s=(0,t.ref)(null),c=(0,t.ref)(a.modelValue);(0,t.watch)(()=>a.modelValue,e=>{e!==c.value&&(c.value=e)});function l(e){let t=e.target.value;t=a.type===`text`?t.replace(/[^\dA-Za-z]/g,``):t.replace(/\D/g,``),t=t.slice(0,a.length),c.value=t,o(`update:modelValue`,t),t.length===a.length&&o(`complete`,t)}function u(){(0,t.nextTick)(()=>{if(s.value){let e=c.value.length;s.value.setSelectionRange?.(e,e)}})}function d(e){let t=c.value,n=e.key;if(n===`Backspace`||n===`Delete`){if(e.preventDefault(),t.length>0){let e=t.slice(0,-1);c.value=e,o(`update:modelValue`,e),u()}}else r.includes(n)&&e.preventDefault()}function f(){a.modelValue.length>=a.length&&o(`enter`)}function p(){s.value?.focus()}function m(e){return e===c.value.length}function h(e){return e<c.value.length}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:p},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:a.type===`text`?`text`:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:s,"onUpdate:modelValue":r[0]||=e=>c.value=e,maxlength:e.length,onInput:l,onKeydown:d,onKeyup:(0,t.withKeys)(f,[`enter`]),onFocus:u,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`,width:`1px`,height:`1px`}},null,40,i),[[t.vModelText,c.value]]),(0,t.createElementVNode)(`div`,{class:`otp-box`,style:(0,t.normalizeStyle)({gap:a.gap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.length,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:(0,t.normalizeClass)([`otp-item`,[{[a.activeItemClass]:m(n)},{[a.hasFilledItemClass]:h(n)},a.itemClass]])},(0,t.toDisplayString)(c.value[n]||``),3))),128))],4)]))}}),o=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},s=o(a,[[`__scopeId`,`data-v-e8da3c38`]]);s.install=e=>(s.name&&e.component(s.name,s),e);var c=s,l=o((0,t.defineComponent)({name:`Popup`,__name:`popup`,props:(0,t.mergeModels)({to:{default:`body`},bg:{default:`rgba(0, 0, 0, .5)`},duration:{default:300},position:{default:`bottom`},maskClosable:{type:Boolean,default:!0},top:{default:`0px`},left:{default:`0px`},right:{default:`0px`},bottom:{default:`0px`},zIndex:{default:50}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=[`bottom`,`left`,`right`,`top`,`center`],r=(0,t.useModel)(e,`modelValue`),i=e;function a(){i.maskClosable&&(r.value=!1)}return(e,o)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.to},[(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[r.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,style:(0,t.normalizeStyle)({"--duration":`${i.duration}ms`,backgroundColor:i.bg,top:i.top,left:i.left,right:i.right,bottom:i.bottom,zIndex:i.zIndex}),class:(0,t.normalizeClass)([`popup-container`,[`popup-container-${i.position}`,{"popup-container-bottom":!n.includes(i.position)}]]),onClick:a},[(0,t.createElementVNode)(`div`,{class:`popup-content`,onClick:o[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)])],6)):(0,t.createCommentVNode)(``,!0)]),_:3})],8,[`to`]))}}),[[`__scopeId`,`data-v-f6d3cf05`]]);l.install=e=>(l.name&&e.component(l.name,l),e);var u=l,d=[`type`],f=o((0,t.defineComponent)({name:`Button`,__name:`button`,props:{padding:{default:`8px 16px`},block:{type:Boolean,default:!1},bg:{default:`transparent`},border:{default:`1px solid #1A171B`},radius:{default:`0`},disabled:{type:Boolean,default:!1},type:{default:`button`},disabledBg:{default:`rgba(26,23,27,0.16)`},enableDisabledClick:{type:Boolean,default:!1}},emits:[`click`],setup(e,{emit:n}){let r=n,i=e,a=e=>{(!i.disabled||i.enableDisabledClick)&&r(`click`,e)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{onClick:a,class:(0,t.normalizeClass)([`button-container`,{block:i.block,disabled:i.disabled}]),type:i.type,style:(0,t.normalizeStyle)({padding:i.padding,border:i.border,borderRadius:i.radius,"--bg":i.bg,"--disabled-bg":i.disabledBg})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],14,d))}}),[[`__scopeId`,`data-v-f38282d0`]]);f.install=e=>(f.name&&e.component(f.name,f),e);var p=f,m=o((0,t.defineComponent)({name:`Collapse`,__name:`collapse`,props:{open:{type:Boolean,default:!1},maxHeight:{default:`100dvh`},duration:{default:300}},setup(e){let n=e;return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{name:`collapse`},{default:(0,t.withCtx)(()=>[n.open?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`collapse-content`,style:(0,t.normalizeStyle)({"--max-height":n.maxHeight,"--duration":n.duration+`ms`})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],4)):(0,t.createCommentVNode)(``,!0)]),_:3}))}}),[[`__scopeId`,`data-v-cc071022`]]);m.install=e=>(m.name&&e.component(m.name,m),e);var h=m,g={class:`input-box`},_=[`type`,`placeholder`],v=[`src`],y=o((0,t.defineComponent)({name:`Input`,__name:`input`,props:(0,t.mergeModels)({placeholder:{default:``},type:{default:`text`},iconVisible:{type:Boolean,default:!1},icon:{default:``}},{modelValue:{type:String,default:``},modelModifiers:{}}),emits:(0,t.mergeModels)([`click`,`enter`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useTemplateRef)(`input`),a=(0,t.useModel)(e,`modelValue`),o=e,s=()=>{r(`click`),i.value?.focus?.(),setTimeout(()=>{let e=a.value.length;i.value?.setSelectionRange?.(e,e)},0)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{type:o.type,"onUpdate:modelValue":n[0]||=e=>a.value=e,ref:`input`,placeholder:o.placeholder,onKeyup:n[1]||=(0,t.withKeys)(t=>e.$emit(`enter`),[`enter`])},null,40,_),[[t.vModelDynamic,a.value]]),o.icon?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:o.icon,alt:`icon`,onClick:s},null,8,v)),[[t.vShow,o.iconVisible]]):(0,t.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-56cf72b9`]]);y.install=e=>(y.name&&e.component(y.name,y),e);var b=y,x={class:`menu-label`},S=[`src`],C=[`src`],w=(0,t.defineComponent)({name:`MenuItem`,__name:`menu-item`,props:(0,t.mergeModels)({checkedIcon:{},checkedIconClass:{},suffixIcon:{},suffixIconClass:{},itemContainerClass:{},itemGap:{},activeItemClass:{},subMenuContainerClass:{},deep:{},item:{},parentValue:{}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=e,i=(0,t.ref)(!1),a=()=>i.value=!0,o=()=>i.value=!1,s=()=>{r.item.children?.length||(n.value=[...r.parentValue,r.item.value])};return(c,l)=>{let u=(0,t.resolveComponent)(`MenuItem`,!0);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{onMouseenter:a,onMouseleave:o,style:{padding:`0 8px`}},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-inner`,[r.itemContainerClass,{active:n.value?.[r.deep]===e.item.value},{[r.activeItemClass]:n.value?.[r.deep]===e.item.value}]]),onClick:s},[(0,t.createElementVNode)(`div`,x,(0,t.toDisplayString)(e.item.label),1),e.suffixIcon&&e.item.children?.length?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:r.suffixIcon,class:(0,t.normalizeClass)([`suffix-icon`,r.suffixIconClass]),alt:`suffix-icon`},null,10,S)):(0,t.createCommentVNode)(``,!0),e.checkedIcon&&!e.item.children?.length&&n.value?.[r.deep]===e.item.value?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:1,src:r.checkedIcon,class:(0,t.normalizeClass)([`checked-icon`,r.checkedIconClass]),alt:`checked-icon`},null,10,C)):(0,t.createCommentVNode)(``,!0)],2),e.item.children?.length?((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{key:0,name:`fade`},{default:(0,t.withCtx)(()=>[i.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`sub-menu-box list-box`,e.subMenuContainerClass])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.item.children,(i,a)=>((0,t.openBlock)(),(0,t.createBlock)(u,{key:a,modelValue:n.value,"onUpdate:modelValue":l[0]||=e=>n.value=e,item:i,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":e.itemGap,deep:r.deep+1,"active-item-class":r.activeItemClass,"parent-value":r.parentValue.concat(e.item.value)},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`deep`,`active-item-class`,`parent-value`]))),128))],2)):(0,t.createCommentVNode)(``,!0)]),_:1})):(0,t.createCommentVNode)(``,!0)],32)}}}),T={key:0,class:`menu-list-box`},E=o((0,t.defineComponent)({name:`Menu`,__name:`menu`,props:(0,t.mergeModels)({duration:{default:100},items:{default:()=>[]},suffixIcon:{},suffixIconClass:{},checkedIcon:{},checkedIconClass:{},listContainerClass:{default:``},subMenuContainerClass:{default:``},defaultContainerClass:{default:``},itemContainerClass:{},itemGap:{default:`4px`},activeItemClass:{default:``}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`modelValue`),a=e,o=(0,t.ref)(!1),s=()=>o.value=!0,c=()=>o.value=!1;return(0,t.watch)(i,()=>{o.value=!1}),(0,t.watch)(o,e=>{r(e?`open`:`close`)}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`menu-box`,style:(0,t.normalizeStyle)({"--duration":a.duration+`ms`})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`default-box`,a.defaultContainerClass]),onMouseenter:s,onMouseleave:c},[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0),(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[o.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,T,[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-box`,a.listContainerClass]),style:(0,t.normalizeStyle)({"--gap":a.itemGap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,o)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:o,class:`menu-item`},[(0,t.createVNode)(w,{modelValue:i.value,"onUpdate:modelValue":r[0]||=e=>i.value=e,item:n,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":a.itemGap,deep:0,"active-item-class":a.activeItemClass,"sub-menu-container-class":a.subMenuContainerClass,"parent-value":[]},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`active-item-class`,`sub-menu-container-class`])]))),128))],6)])):(0,t.createCommentVNode)(``,!0)]),_:1})],34)],4))}}),[[`__scopeId`,`data-v-b7084c6e`]]);E.install=e=>(E.name&&e.component(E.name,E),e);var D=E,O={class:`tab-list-container-inner`},k=[`onClick`],A=o((0,t.defineComponent)({name:`Tab`,__name:`tab`,props:(0,t.mergeModels)({items:{default:()=>[]},gap:{default:`10px`},tabContainerClass:{default:``},tabItemClass:{default:``},panelContainerClass:{default:``},panelItemClass:{default:``},activeLineClass:{default:``}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useTemplateRef)(`item`),r=(0,t.ref)(!0),i=(0,t.useModel)(e,`modelValue`),a=e,o=(0,t.reactive)({left:0,width:0}),s=()=>{if(!n.value)return;let e=n.value[i.value];if(!e)return;let{offsetWidth:t,offsetLeft:r}=e;o.left=r||0,o.width=t||0};return(0,t.watch)(i,()=>{r.value&&=!1,s()}),(0,t.onMounted)(async()=>{s()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`tab-box-container`,style:(0,t.normalizeStyle)({"--gap":a.gap})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`tab-list-container`,a.tabContainerClass])},[(0,t.createElementVNode)(`div`,O,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`tab-item-box`,a.tabItemClass]),onClick:e=>i.value=r,ref_for:!0,ref:`item`},[(0,t.renderSlot)(e.$slots,`default`,{item:n,index:r,active:i.value===r},void 0,!0)],10,k))),128)),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`active-tab-item-box`,[{initial:r.value},a.activeLineClass]]),style:(0,t.normalizeStyle)({left:o.left+`px`,width:o.width+`px`})},null,6)])],2),(0,t.renderSlot)(e.$slots,`middle`,{},void 0,!0),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`panel-list-container`,a.panelContainerClass])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`panel-item-box`,a.panelItemClass])},[(0,t.renderSlot)(e.$slots,`panel`,{item:n,index:r,active:i.value===r},void 0,!0)],2)),[[t.vShow,i.value===r]])),128))],2)],4))}}),[[`__scopeId`,`data-v-fd2c8809`]]);A.install=e=>(A.name&&e.component(A.name,A),e);var j=r({Button:()=>p,Collapse:()=>h,Input:()=>b,InputOtp:()=>c,Menu:()=>D,Popup:()=>u,Tab:()=>A}),M=e=>(Object.keys(j).forEach(t=>{let n=j[t];n.install&&e.use(n)}),e),N={install:M};e.Button=p,e.Collapse=h,e.Input=b,e.InputOtp=c,e.Menu=D,e.Popup=u,e.Tab=A,e.default=N,e.install=M});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`rox-v`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Object.defineProperty,r=(e,t)=>{let r={};for(var i in e)n(r,i,{get:e[i],enumerable:!0});return t||n(r,Symbol.toStringTag,{value:`Module`}),r},i=[`inputmode`,`maxlength`],a=(0,t.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`},type:{default:`number`}},emits:[`update:modelValue`,`complete`,`enter`],setup(e,{emit:n}){let r=[`ArrowLeft`,`ArrowRight`,`Home`,`End`],a=e,o=n,s=(0,t.ref)(null),c=(0,t.ref)(a.modelValue);(0,t.watch)(()=>a.modelValue,e=>{e!==c.value&&(c.value=e)});function l(e){let t=e.target.value;t=a.type===`text`?t.replace(/[^\dA-Za-z]/g,``):t.replace(/\D/g,``),t=t.slice(0,a.length),c.value=t,o(`update:modelValue`,t),t.length===a.length&&o(`complete`,t)}function u(){(0,t.nextTick)(()=>{if(s.value){let e=c.value.length;s.value.setSelectionRange?.(e,e)}})}function d(e){let t=c.value,n=e.key;if(n===`Backspace`||n===`Delete`){if(e.preventDefault(),t.length>0){let e=t.slice(0,-1);c.value=e,o(`update:modelValue`,e),u()}}else r.includes(n)&&e.preventDefault()}function f(){a.modelValue.length>=a.length&&o(`enter`)}function p(){s.value?.focus()}function m(e){return e===c.value.length}function h(e){return e<c.value.length}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:p},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:a.type===`text`?`text`:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:s,"onUpdate:modelValue":r[0]||=e=>c.value=e,maxlength:e.length,onInput:l,onKeydown:d,onKeyup:(0,t.withKeys)(f,[`enter`]),onFocus:u,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`,width:`1px`,height:`1px`}},null,40,i),[[t.vModelText,c.value]]),(0,t.createElementVNode)(`div`,{class:`otp-box`,style:(0,t.normalizeStyle)({gap:a.gap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.length,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:(0,t.normalizeClass)([`otp-item`,[{[a.activeItemClass]:m(n)},{[a.hasFilledItemClass]:h(n)},a.itemClass]])},(0,t.toDisplayString)(c.value[n]||``),3))),128))],4)]))}}),o=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},s=o(a,[[`__scopeId`,`data-v-e8da3c38`]]);s.install=e=>(s.name&&e.component(s.name,s),e);var c=s,l=o((0,t.defineComponent)({name:`Popup`,__name:`popup`,props:(0,t.mergeModels)({to:{default:`body`},bg:{default:`rgba(0, 0, 0, .5)`},duration:{default:300},position:{default:`bottom`},maskClosable:{type:Boolean,default:!0},top:{default:`0px`},left:{default:`0px`},right:{default:`0px`},bottom:{default:`0px`},zIndex:{default:50}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=[`bottom`,`left`,`right`,`top`,`center`],r=(0,t.useModel)(e,`modelValue`),i=e;function a(){i.maskClosable&&(r.value=!1)}return(e,o)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.to},[(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[r.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,style:(0,t.normalizeStyle)({"--duration":`${i.duration}ms`,backgroundColor:i.bg,top:i.top,left:i.left,right:i.right,bottom:i.bottom,zIndex:i.zIndex}),class:(0,t.normalizeClass)([`popup-container`,[`popup-container-${i.position}`,{"popup-container-bottom":!n.includes(i.position)}]]),onClick:a},[(0,t.createElementVNode)(`div`,{class:`popup-content`,onClick:o[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)])],6)):(0,t.createCommentVNode)(``,!0)]),_:3})],8,[`to`]))}}),[[`__scopeId`,`data-v-f6d3cf05`]]);l.install=e=>(l.name&&e.component(l.name,l),e);var u=l,d=[`type`],f=o((0,t.defineComponent)({name:`Button`,__name:`button`,props:{padding:{default:`8px 16px`},block:{type:Boolean,default:!1},bg:{default:`transparent`},border:{default:`1px solid #1A171B`},radius:{default:`0`},disabled:{type:Boolean,default:!1},type:{default:`button`},disabledBg:{default:`rgba(26,23,27,0.16)`},enableDisabledClick:{type:Boolean,default:!1}},emits:[`click`],setup(e,{emit:n}){let r=n,i=e,a=e=>{(!i.disabled||i.enableDisabledClick)&&r(`click`,e)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{onClick:a,class:(0,t.normalizeClass)([`button-container`,{block:i.block,disabled:i.disabled}]),type:i.type,style:(0,t.normalizeStyle)({padding:i.padding,border:i.border,borderRadius:i.radius,"--bg":i.bg,"--disabled-bg":i.disabledBg})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],14,d))}}),[[`__scopeId`,`data-v-f38282d0`]]);f.install=e=>(f.name&&e.component(f.name,f),e);var p=f,m=o((0,t.defineComponent)({name:`Collapse`,__name:`collapse`,props:{open:{type:Boolean,default:!1},maxHeight:{default:`100dvh`},duration:{default:300}},setup(e){let n=e;return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{name:`collapse`},{default:(0,t.withCtx)(()=>[n.open?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`collapse-content`,style:(0,t.normalizeStyle)({"--max-height":n.maxHeight,"--duration":n.duration+`ms`})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],4)):(0,t.createCommentVNode)(``,!0)]),_:3}))}}),[[`__scopeId`,`data-v-cc071022`]]);m.install=e=>(m.name&&e.component(m.name,m),e);var h=m,g={class:`input-box`},_=[`type`,`placeholder`],v=[`src`],y=o((0,t.defineComponent)({name:`Input`,__name:`input`,props:(0,t.mergeModels)({placeholder:{default:``},type:{default:`text`},iconVisible:{type:Boolean,default:!1},icon:{default:``}},{modelValue:{type:String,default:``},modelModifiers:{}}),emits:(0,t.mergeModels)([`click`,`enter`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useTemplateRef)(`input`),a=(0,t.useModel)(e,`modelValue`),o=e,s=()=>{r(`click`),i.value?.focus?.(),setTimeout(()=>{let e=a.value.length;i.value?.setSelectionRange?.(e,e)},0)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{type:o.type,"onUpdate:modelValue":n[0]||=e=>a.value=e,ref:`input`,placeholder:o.placeholder,onKeyup:n[1]||=(0,t.withKeys)(t=>e.$emit(`enter`),[`enter`])},null,40,_),[[t.vModelDynamic,a.value]]),o.icon?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:o.icon,alt:`icon`,onClick:s},null,8,v)),[[t.vShow,o.iconVisible]]):(0,t.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-56cf72b9`]]);y.install=e=>(y.name&&e.component(y.name,y),e);var b=y,x={class:`menu-label`},S=[`src`],C=[`src`],w=(0,t.defineComponent)({name:`MenuItem`,__name:`menu-item`,props:(0,t.mergeModels)({checkedIcon:{},checkedIconClass:{},suffixIcon:{},suffixIconClass:{},itemContainerClass:{},itemGap:{},activeItemClass:{},subMenuContainerClass:{},deep:{},item:{},parentValue:{}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=e,i=(0,t.ref)(!1),a=()=>i.value=!0,o=()=>i.value=!1,s=()=>{r.item.children?.length||(n.value=[...r.parentValue,r.item.value])};return(c,l)=>{let u=(0,t.resolveComponent)(`MenuItem`,!0);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{onMouseenter:a,onMouseleave:o,style:{padding:`0 8px`}},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-inner`,[r.itemContainerClass,{active:n.value?.[r.deep]===e.item.value},{[r.activeItemClass]:n.value?.[r.deep]===e.item.value}]]),onClick:s},[(0,t.createElementVNode)(`div`,x,(0,t.toDisplayString)(e.item.label),1),e.suffixIcon&&e.item.children?.length?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:r.suffixIcon,class:(0,t.normalizeClass)([`suffix-icon`,r.suffixIconClass]),alt:`suffix-icon`},null,10,S)):(0,t.createCommentVNode)(``,!0),e.checkedIcon&&!e.item.children?.length&&n.value?.[r.deep]===e.item.value?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:1,src:r.checkedIcon,class:(0,t.normalizeClass)([`checked-icon`,r.checkedIconClass]),alt:`checked-icon`},null,10,C)):(0,t.createCommentVNode)(``,!0)],2),e.item.children?.length?((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{key:0,name:`fade`},{default:(0,t.withCtx)(()=>[i.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`sub-menu-box list-box`,e.subMenuContainerClass])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.item.children,(i,a)=>((0,t.openBlock)(),(0,t.createBlock)(u,{key:a,modelValue:n.value,"onUpdate:modelValue":l[0]||=e=>n.value=e,item:i,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":e.itemGap,deep:r.deep+1,"active-item-class":r.activeItemClass,"parent-value":r.parentValue.concat(e.item.value)},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`deep`,`active-item-class`,`parent-value`]))),128))],2)):(0,t.createCommentVNode)(``,!0)]),_:1})):(0,t.createCommentVNode)(``,!0)],32)}}}),T={key:0,class:`menu-list-box`},E=o((0,t.defineComponent)({name:`Menu`,__name:`menu`,props:(0,t.mergeModels)({duration:{default:100},items:{default:()=>[]},suffixIcon:{},suffixIconClass:{},checkedIcon:{},checkedIconClass:{},listContainerClass:{default:``},subMenuContainerClass:{default:``},defaultContainerClass:{default:``},itemContainerClass:{},itemGap:{default:`4px`},activeItemClass:{default:``}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`modelValue`),a=e,o=(0,t.ref)(!1),s=()=>o.value=!0,c=()=>o.value=!1;return(0,t.watch)(i,()=>{o.value=!1}),(0,t.watch)(o,e=>{r(e?`open`:`close`)}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`menu-box`,style:(0,t.normalizeStyle)({"--duration":a.duration+`ms`})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`default-box`,a.defaultContainerClass]),onMouseenter:s,onMouseleave:c},[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0),(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[o.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,T,[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-box`,a.listContainerClass]),style:(0,t.normalizeStyle)({"--gap":a.itemGap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,o)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:o,class:`menu-item`},[(0,t.createVNode)(w,{modelValue:i.value,"onUpdate:modelValue":r[0]||=e=>i.value=e,item:n,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":a.itemGap,deep:0,"active-item-class":a.activeItemClass,"sub-menu-container-class":a.subMenuContainerClass,"parent-value":[]},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`active-item-class`,`sub-menu-container-class`])]))),128))],6)])):(0,t.createCommentVNode)(``,!0)]),_:1})],34)],4))}}),[[`__scopeId`,`data-v-b7084c6e`]]);E.install=e=>(E.name&&e.component(E.name,E),e);var D=E,O={class:`tab-list-container-inner`},k=[`onClick`],A=o((0,t.defineComponent)({name:`Tab`,__name:`tab`,props:(0,t.mergeModels)({items:{default:()=>[]},gap:{default:`10px`},tabContainerClass:{default:``},tabItemClass:{default:``},panelContainerClass:{default:``},panelItemClass:{default:``},activeLineClass:{default:``}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useTemplateRef)(`item`),r=(0,t.ref)(!0),i=(0,t.useModel)(e,`modelValue`),a=e,o=(0,t.reactive)({left:0,width:0}),s=()=>{if(!n.value)return;let e=n.value[i.value];if(!e)return;let{offsetWidth:t,offsetLeft:r}=e;o.left=r||0,o.width=t||0};return(0,t.watch)(i,()=>{r.value&&=!1,s()}),(0,t.onMounted)(async()=>{s()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`tab-box-container`,style:(0,t.normalizeStyle)({"--gap":a.gap})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`tab-list-container`,a.tabContainerClass])},[(0,t.createElementVNode)(`div`,O,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`tab-item-box`,a.tabItemClass]),onClick:e=>i.value=r,ref_for:!0,ref:`item`},[(0,t.renderSlot)(e.$slots,`default`,{item:n,index:r,active:i.value===r},void 0,!0)],10,k))),128)),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`active-tab-item-box`,[{initial:r.value},a.activeLineClass]]),style:(0,t.normalizeStyle)({left:o.left+`px`,width:o.width+`px`})},null,6)])],2),(0,t.renderSlot)(e.$slots,`middle`,{},void 0,!0),(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`panel-list-container`,a.panelContainerClass])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,r)=>(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:r,class:(0,t.normalizeClass)([`panel-item-box`,a.panelItemClass])},[(0,t.renderSlot)(e.$slots,`panel`,{item:n,index:r,active:i.value===r},void 0,!0)],2)),[[t.vShow,i.value===r]])),128))],2)],4))}}),[[`__scopeId`,`data-v-fd2c8809`]]);A.install=e=>(A.name&&e.component(A.name,A),e);var j=(0,t.reactive)({toasts:[]}),M=3e3;function N(){return`xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g,function(e){var t=Math.random()*16|0;return(e==`x`?t:t&3|8).toString(16)})}function P(e){if(e===void 0)j.toasts=[];else{let t=j.toasts.findIndex(t=>t.id===e);t!==-1&&j.toasts.splice(t,1)}}function F(e){let t={id:N(),message:e?.message||``,duration:e?.duration||M,type:e?.type||`info`};return setTimeout(()=>{j.toasts.push(t)},0),setTimeout(()=>{P(t.id)},t.duration),t.id}function I(){return{toast:F,success:(e,t=M)=>F({message:e,duration:t,type:`success`}),error:(e,t=M)=>F({message:e,duration:t,type:`error`}),info:(e,t=M)=>F({message:e,duration:t,type:`info`}),warning:(e,t=M)=>F({message:e,duration:t,type:`warning`}),dismiss:P}}var L=(0,t.readonly)(j),R={class:`toast-item`},z=(0,t.defineComponent)({name:`ToastItem`,__name:`toast-item`,props:{toast:{},toasterClass:{},titleClass:{},messageClass:{}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,R,[e.toast.message?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`title-box`,e.titleClass])},[n.$slots[`success-icon`]&&e.toast.type===`success`?(0,t.renderSlot)(n.$slots,`success-icon`,{key:0}):(0,t.createCommentVNode)(``,!0),n.$slots[`error-icon`]&&e.toast.type===`error`?(0,t.renderSlot)(n.$slots,`error-icon`,{key:1}):(0,t.createCommentVNode)(``,!0),n.$slots[`info-icon`]&&e.toast.type===`info`?(0,t.renderSlot)(n.$slots,`info-icon`,{key:2}):(0,t.createCommentVNode)(``,!0),n.$slots[`warning-icon`]&&e.toast.type===`warning`?(0,t.renderSlot)(n.$slots,`warning-icon`,{key:3}):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`message`,e.messageClass])},(0,t.toDisplayString)(e.toast.message),3)],2)):(0,t.createCommentVNode)(``,!0)]))}}),B=o((0,t.defineComponent)({name:`Toaster`,__name:`toaster`,props:{to:{default:`body`},toasterClass:{default:``},titleClass:{default:``},messageClass:{default:``}},setup(e){let n=e;return(r,i)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:e.to},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`toaster-box`,n.toasterClass])},[(0,t.createVNode)(t.TransitionGroup,{name:`toast-fade`},{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(L).toasts,e=>((0,t.openBlock)(),(0,t.createBlock)(z,{key:e.id,toast:e,"title-class":n.titleClass,"message-class":n.messageClass},{"success-icon":(0,t.withCtx)(()=>[(0,t.renderSlot)(r.$slots,`success-icon`,{},void 0,!0)]),"error-icon":(0,t.withCtx)(()=>[(0,t.renderSlot)(r.$slots,`error-icon`,{},void 0,!0)]),"info-icon":(0,t.withCtx)(()=>[(0,t.renderSlot)(r.$slots,`info-icon`,{},void 0,!0)]),"warning-icon":(0,t.withCtx)(()=>[(0,t.renderSlot)(r.$slots,`warning-icon`,{},void 0,!0)]),_:3},8,[`toast`,`title-class`,`message-class`]))),128))]),_:3})],2)],8,[`to`]))}}),[[`__scopeId`,`data-v-f97905ec`]]);B.install=function(e){return B.name&&e.component(B.name,B),e};var V=B,H=r({Button:()=>p,Collapse:()=>h,Input:()=>b,InputOtp:()=>c,Menu:()=>D,Popup:()=>u,Tab:()=>A,Toaster:()=>V,useToast:()=>I}),U=e=>(Object.keys(H).forEach(t=>{let n=H[t];n.install&&e.use(n)}),e),W={install:U};e.Button=p,e.Collapse=h,e.Input=b,e.InputOtp=c,e.Menu=D,e.Popup=u,e.Tab=A,e.Toaster=V,e.default=W,e.install=U,e.useToast=I});

package/dist/lib/components.js

@@ -1 +1 @@
-const e=require(`./_virtual/_rolldown/runtime.js`),t=require(`./input-otp/index.js`),n=require(`./popup/index.js`),r=require(`./button/index.js`),i=require(`./collapse/index.js`),a=require(`./input/index.js`),o=require(`./menu/index.js`),s=require(`./tab/index.js`);var c=e.__exportAll({Button:()=>r.default,Collapse:()=>i.default,Input:()=>a.default,InputOtp:()=>t.default,Menu:()=>o.default,Popup:()=>n.default,Tab:()=>s.default});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return c}});
+const e=require(`./_virtual/_rolldown/runtime.js`),t=require(`./input-otp/index.js`),n=require(`./popup/index.js`),r=require(`./button/index.js`),i=require(`./collapse/index.js`),a=require(`./input/index.js`),o=require(`./menu/index.js`),s=require(`./tab/index.js`),c=require(`./toast/toast.js`),l=require(`./toast/index.js`);var u=e.__exportAll({Button:()=>r.default,Collapse:()=>i.default,Input:()=>a.default,InputOtp:()=>t.default,Menu:()=>o.default,Popup:()=>n.default,Tab:()=>s.default,Toaster:()=>l.default,useToast:()=>c.useToast});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return u}});

package/dist/lib/index.js

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./input-otp/index.js`),t=require(`./popup/index.js`),n=require(`./button/index.js`),r=require(`./collapse/index.js`),i=require(`./input/index.js`),a=require(`./menu/index.js`),o=require(`./tab/index.js`),s=require(`./components.js`);;/* empty css       */var c=e=>(Object.keys(s.components_exports).forEach(t=>{let n=s.components_exports[t];n.install&&e.use(n)}),e),l={install:c};exports.Button=n.default,exports.Collapse=r.default,exports.Input=i.default,exports.InputOtp=e.default,exports.Menu=a.default,exports.Popup=t.default,exports.Tab=o.default,exports.default=l,exports.install=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./input-otp/index.js`),t=require(`./popup/index.js`),n=require(`./button/index.js`),r=require(`./collapse/index.js`),i=require(`./input/index.js`),a=require(`./menu/index.js`),o=require(`./tab/index.js`),s=require(`./toast/toast.js`),c=require(`./toast/index.js`),l=require(`./components.js`);;/* empty css       */var u=e=>(Object.keys(l.components_exports).forEach(t=>{let n=l.components_exports[t];n.install&&e.use(n)}),e),d={install:u};exports.Button=n.default,exports.Collapse=r.default,exports.Input=i.default,exports.InputOtp=e.default,exports.Menu=a.default,exports.Popup=t.default,exports.Tab=o.default,exports.Toaster=c.default,exports.default=d,exports.install=u,exports.useToast=s.useToast;

package/dist/lib/toast/index.js

@@ -0,0 +1 @@
+require(`./toast.js`);const e=require(`./toaster.js`);require(`./style.css`),e.default.install=function(t){return e.default.name&&t.component(e.default.name,e.default),t};var t=e.default;exports.default=t;

package/dist/lib/toast/style.css

@@ -0,0 +1 @@
+.toaster-box[data-v-f97905ec]{z-index:9999;flex-direction:column;gap:12px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}[data-v-f97905ec] .toast-item{box-sizing:border-box;background-color:#0009;min-width:220px;padding:10px}[data-v-f97905ec] .title-box{justify-content:center;align-items:center;gap:10px;display:flex}[data-v-f97905ec] .message{color:#fff}

package/dist/lib/toast/toast-item.js

@@ -0,0 +1 @@
+var e=require(`./toast-item.vue_vue_type_script_setup_true_lang.js`).default;exports.default=e;

package/dist/lib/toast/toast-item.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+let e=require(`vue`);var t={class:`toast-item`},n=(0,e.defineComponent)({name:`ToastItem`,__name:`toast-item`,props:{toast:{},toasterClass:{},titleClass:{},messageClass:{}},setup(n){return(r,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t,[n.toast.message?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:(0,e.normalizeClass)([`title-box`,n.titleClass])},[r.$slots[`success-icon`]&&n.toast.type===`success`?(0,e.renderSlot)(r.$slots,`success-icon`,{key:0}):(0,e.createCommentVNode)(``,!0),r.$slots[`error-icon`]&&n.toast.type===`error`?(0,e.renderSlot)(r.$slots,`error-icon`,{key:1}):(0,e.createCommentVNode)(``,!0),r.$slots[`info-icon`]&&n.toast.type===`info`?(0,e.renderSlot)(r.$slots,`info-icon`,{key:2}):(0,e.createCommentVNode)(``,!0),r.$slots[`warning-icon`]&&n.toast.type===`warning`?(0,e.renderSlot)(r.$slots,`warning-icon`,{key:3}):(0,e.createCommentVNode)(``,!0),(0,e.createElementVNode)(`span`,{class:(0,e.normalizeClass)([`message`,n.messageClass])},(0,e.toDisplayString)(n.toast.message),3)],2)):(0,e.createCommentVNode)(``,!0)]))}});exports.default=n;

package/dist/lib/toast/toast.js

@@ -0,0 +1 @@
+let e=require(`vue`);var t=(0,e.reactive)({toasts:[]}),n=3e3;function r(){return`xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g,function(e){var t=Math.random()*16|0;return(e==`x`?t:t&3|8).toString(16)})}function i(e){if(e===void 0)t.toasts=[];else{let n=t.toasts.findIndex(t=>t.id===e);n!==-1&&t.toasts.splice(n,1)}}function a(e){let a={id:r(),message:e?.message||``,duration:e?.duration||n,type:e?.type||`info`};return setTimeout(()=>{t.toasts.push(a)},0),setTimeout(()=>{i(a.id)},a.duration),a.id}function o(){return{toast:a,success:(e,t=n)=>a({message:e,duration:t,type:`success`}),error:(e,t=n)=>a({message:e,duration:t,type:`error`}),info:(e,t=n)=>a({message:e,duration:t,type:`info`}),warning:(e,t=n)=>a({message:e,duration:t,type:`warning`}),dismiss:i}}var s=(0,e.readonly)(t);exports.toastStore=s,exports.useToast=o;

package/dist/lib/toast/toaster.js

@@ -0,0 +1 @@
+const e=require(`../_virtual/_plugin-vue_export-helper.js`),t=require(`./toaster.vue_vue_type_script_setup_true_lang.js`);;/* empty css                                                         */var n=e.default(t.default,[[`__scopeId`,`data-v-f97905ec`]]);exports.default=n;

package/dist/lib/toast/toaster.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+const e=require(`./toast.js`),t=require(`./toast-item.js`);let n=require(`vue`);var r=(0,n.defineComponent)({name:`Toaster`,__name:`toaster`,props:{to:{default:`body`},toasterClass:{default:``},titleClass:{default:``},messageClass:{default:``}},setup(r){let i=r;return(a,o)=>((0,n.openBlock)(),(0,n.createBlock)(n.Teleport,{to:r.to},[(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`toaster-box`,i.toasterClass])},[(0,n.createVNode)(n.TransitionGroup,{name:`toast-fade`},{default:(0,n.withCtx)(()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)((0,n.unref)(e.toastStore).toasts,e=>((0,n.openBlock)(),(0,n.createBlock)(t.default,{key:e.id,toast:e,"title-class":i.titleClass,"message-class":i.messageClass},{"success-icon":(0,n.withCtx)(()=>[(0,n.renderSlot)(a.$slots,`success-icon`,{},void 0,!0)]),"error-icon":(0,n.withCtx)(()=>[(0,n.renderSlot)(a.$slots,`error-icon`,{},void 0,!0)]),"info-icon":(0,n.withCtx)(()=>[(0,n.renderSlot)(a.$slots,`info-icon`,{},void 0,!0)]),"warning-icon":(0,n.withCtx)(()=>[(0,n.renderSlot)(a.$slots,`warning-icon`,{},void 0,!0)]),_:3},8,[`toast`,`title-class`,`message-class`]))),128))]),_:3})],2)],8,[`to`]))}});exports.default=r;

package/dist/style.css

@@ -1,2 +1,2 @@
-.otp-wrapper[data-v-e8da3c38]{cursor:pointer;width:400px;max-width:100%;position:relative}.otp-box[data-v-e8da3c38]{width:100%;display:flex}.otp-item[data-v-e8da3c38]{border-bottom:1px solid #00000029;flex:1;justify-content:center;align-items:center;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-e8da3c38]{border-bottom:1px solid #000}.fade-enter-from[data-v-f6d3cf05],.fade-leave-to[data-v-f6d3cf05]{opacity:0}.popup-container[data-v-f6d3cf05]{transition:opacity var(--duration) ease-in-out;will-change:opacity;position:fixed}.popup-content[data-v-f6d3cf05]{transition:transform var(--duration) ease-in-out;will-change:transform;position:absolute}.popup-container-top .popup-content[data-v-f6d3cf05]{top:0;left:0;right:0}.fade-enter-from.popup-container-top .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-top .popup-content[data-v-f6d3cf05]{transform:translateY(-100%)}.popup-container-bottom .popup-content[data-v-f6d3cf05]{bottom:0;left:0;right:0}.fade-enter-from.popup-container-bottom .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-bottom .popup-content[data-v-f6d3cf05]{transform:translateY(100%)}.popup-container-left .popup-content[data-v-f6d3cf05]{top:0;bottom:0;left:0}.fade-enter-from.popup-container-left .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-left .popup-content[data-v-f6d3cf05]{transform:translate(-100%)}.popup-container-right .popup-content[data-v-f6d3cf05]{top:0;bottom:0;right:0}.fade-enter-from.popup-container-right .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-right .popup-content[data-v-f6d3cf05]{transform:translate(100%)}.popup-container-center .popup-content[data-v-f6d3cf05]{will-change:auto;transform-origin:50%;transition:none;top:50%;left:50%;transform:translate(-50%,-50%)}.button-container[data-v-f38282d0]{background-color:var(--bg);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.button-container[data-v-f38282d0]:focus{outline:none}.button-container.block[data-v-f38282d0]{width:100%;display:block}.button-container.disabled[data-v-f38282d0]{background-color:var(--disabled-bg);border-color:#0000!important}.collapse-content[data-v-cc071022]{width:max-content}.collapse-enter-from[data-v-cc071022],.collapse-leave-to[data-v-cc071022]{max-height:0!important}.collapse-enter-active[data-v-cc071022],.collapse-leave-active[data-v-cc071022]{max-height:var(--max-height);transition:max-height var(--duration) ease-in-out;overflow:hidden}.input-box[data-v-56cf72b9]{will-change:border-color;box-sizing:border-box;border-bottom:1px solid #00000029;align-items:center;gap:16px;height:60px;padding:16px 0;transition:border-color .2s ease-in-out;display:flex}.input-box[data-v-56cf72b9]:focus-within{border-color:#000}.input-box input[data-v-56cf72b9]{width:100%;height:100%;font-size:inherit;border:none;outline:none}input[data-v-56cf72b9]::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-56cf72b9]::-moz-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-56cf72b9]:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}.input-box img[data-v-56cf72b9]{-o-object-fit:contain;object-fit:contain;cursor:pointer;width:24px;height:24px}.menu-box[data-v-b7084c6e]{display:inline-flex;position:relative}.default-box[data-v-b7084c6e]{box-sizing:border-box;border:1px solid #0003;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-from,.fade-leave-to[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-to{opacity:0}.fade-enter-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-active,.fade-leave-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-b7084c6e]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-b7084c6e]{gap:var(--gap);box-sizing:border-box;background-color:#fff;flex-direction:column;width:100%;padding:16px 0;display:flex;position:relative;box-shadow:0 0 16px #0000000f}[data-v-b7084c6e] .menu-item-inner{box-sizing:border-box;cursor:pointer;will-change:background-color;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;height:40px;padding:0 16px;transition:background-color .1s linear;display:flex}[data-v-b7084c6e] .menu-item-inner.active,[data-v-b7084c6e] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-b7084c6e] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-b7084c6e] .sub-menu-box{z-index:99;gap:var(--gap);box-sizing:border-box;background-color:#fff;border-left:1px solid #0000000f;flex-direction:column;padding:16px 8px;display:flex;position:absolute;top:0;left:100%;box-shadow:0 -16px 16px -16px #0000000f,16px 0 16px -16px #0000000f,0 16px 16px -16px #0000000f}[data-v-b7084c6e] .suffix-icon,[data-v-b7084c6e] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}.tab-box-container[data-v-fd2c8809]{width:100%}.tab-list-container[data-v-fd2c8809]{width:100%;overflow-x:scroll}.tab-list-container[data-v-fd2c8809]::-webkit-scrollbar{display:none}.tab-list-container-inner[data-v-fd2c8809]{flex-wrap:nowrap;display:inline-flex;position:relative}.tab-item-box[data-v-fd2c8809]{cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center}.tab-item-box~.tab-item-box[data-v-fd2c8809]{margin-left:var(--gap)}.active-tab-item-box[data-v-fd2c8809]{width:100px;height:1px;transition:left var(--transition-duration,.15s) ease-in-out, width var(--transition-duration,.15s) ease-in-out;background-color:#000;position:absolute;bottom:0;left:0}.active-tab-item-box.initial[data-v-fd2c8809]{transition:none}.panel-list-container[data-v-fd2c8809]{width:100%;min-height:200px;position:relative}.panel-item-box[data-v-fd2c8809]{width:100%;height:100%;position:absolute;top:0;left:0}:-webkit-any(input:-webkit-autofill,textarea:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--input-bg,#fff) inset;-webkit-text-fill-color:inherit}:is(input:autofill,textarea:autofill){-webkit-box-shadow:0 0 0 1000px var(--input-bg,#fff) inset;-webkit-text-fill-color:inherit}input:focus,textarea:focus,button:focus{outline:none}input::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}textarea::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input::-moz-placeholder{color:var(--input-placeholder-color,#999)}textarea::-moz-placeholder{color:var(--input-placeholder-color,#999)}input:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}
+.otp-wrapper[data-v-e8da3c38]{cursor:pointer;width:400px;max-width:100%;position:relative}.otp-box[data-v-e8da3c38]{width:100%;display:flex}.otp-item[data-v-e8da3c38]{border-bottom:1px solid #00000029;flex:1;justify-content:center;align-items:center;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-e8da3c38]{border-bottom:1px solid #000}.fade-enter-from[data-v-f6d3cf05],.fade-leave-to[data-v-f6d3cf05]{opacity:0}.popup-container[data-v-f6d3cf05]{transition:opacity var(--duration) ease-in-out;will-change:opacity;position:fixed}.popup-content[data-v-f6d3cf05]{transition:transform var(--duration) ease-in-out;will-change:transform;position:absolute}.popup-container-top .popup-content[data-v-f6d3cf05]{top:0;left:0;right:0}.fade-enter-from.popup-container-top .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-top .popup-content[data-v-f6d3cf05]{transform:translateY(-100%)}.popup-container-bottom .popup-content[data-v-f6d3cf05]{bottom:0;left:0;right:0}.fade-enter-from.popup-container-bottom .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-bottom .popup-content[data-v-f6d3cf05]{transform:translateY(100%)}.popup-container-left .popup-content[data-v-f6d3cf05]{top:0;bottom:0;left:0}.fade-enter-from.popup-container-left .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-left .popup-content[data-v-f6d3cf05]{transform:translate(-100%)}.popup-container-right .popup-content[data-v-f6d3cf05]{top:0;bottom:0;right:0}.fade-enter-from.popup-container-right .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-right .popup-content[data-v-f6d3cf05]{transform:translate(100%)}.popup-container-center .popup-content[data-v-f6d3cf05]{will-change:auto;transform-origin:50%;transition:none;top:50%;left:50%;transform:translate(-50%,-50%)}.button-container[data-v-f38282d0]{background-color:var(--bg);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.button-container[data-v-f38282d0]:focus{outline:none}.button-container.block[data-v-f38282d0]{width:100%;display:block}.button-container.disabled[data-v-f38282d0]{background-color:var(--disabled-bg);border-color:#0000!important}.collapse-content[data-v-cc071022]{width:max-content}.collapse-enter-from[data-v-cc071022],.collapse-leave-to[data-v-cc071022]{max-height:0!important}.collapse-enter-active[data-v-cc071022],.collapse-leave-active[data-v-cc071022]{max-height:var(--max-height);transition:max-height var(--duration) ease-in-out;overflow:hidden}.input-box[data-v-56cf72b9]{will-change:border-color;box-sizing:border-box;border-bottom:1px solid #00000029;align-items:center;gap:16px;height:60px;padding:16px 0;transition:border-color .2s ease-in-out;display:flex}.input-box[data-v-56cf72b9]:focus-within{border-color:#000}.input-box input[data-v-56cf72b9]{width:100%;height:100%;font-size:inherit;border:none;outline:none}input[data-v-56cf72b9]::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-56cf72b9]::-moz-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-56cf72b9]:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}.input-box img[data-v-56cf72b9]{-o-object-fit:contain;object-fit:contain;cursor:pointer;width:24px;height:24px}.menu-box[data-v-b7084c6e]{display:inline-flex;position:relative}.default-box[data-v-b7084c6e]{box-sizing:border-box;border:1px solid #0003;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-from,.fade-leave-to[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-to{opacity:0}.fade-enter-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-active,.fade-leave-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-b7084c6e]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-b7084c6e]{gap:var(--gap);box-sizing:border-box;background-color:#fff;flex-direction:column;width:100%;padding:16px 0;display:flex;position:relative;box-shadow:0 0 16px #0000000f}[data-v-b7084c6e] .menu-item-inner{box-sizing:border-box;cursor:pointer;will-change:background-color;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;height:40px;padding:0 16px;transition:background-color .1s linear;display:flex}[data-v-b7084c6e] .menu-item-inner.active,[data-v-b7084c6e] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-b7084c6e] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-b7084c6e] .sub-menu-box{z-index:99;gap:var(--gap);box-sizing:border-box;background-color:#fff;border-left:1px solid #0000000f;flex-direction:column;padding:16px 8px;display:flex;position:absolute;top:0;left:100%;box-shadow:0 -16px 16px -16px #0000000f,16px 0 16px -16px #0000000f,0 16px 16px -16px #0000000f}[data-v-b7084c6e] .suffix-icon,[data-v-b7084c6e] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}.tab-box-container[data-v-fd2c8809]{width:100%}.tab-list-container[data-v-fd2c8809]{width:100%;overflow-x:scroll}.tab-list-container[data-v-fd2c8809]::-webkit-scrollbar{display:none}.tab-list-container-inner[data-v-fd2c8809]{flex-wrap:nowrap;display:inline-flex;position:relative}.tab-item-box[data-v-fd2c8809]{cursor:pointer;white-space:nowrap;flex-shrink:0;align-items:center}.tab-item-box~.tab-item-box[data-v-fd2c8809]{margin-left:var(--gap)}.active-tab-item-box[data-v-fd2c8809]{width:100px;height:1px;transition:left var(--transition-duration,.15s) ease-in-out, width var(--transition-duration,.15s) ease-in-out;background-color:#000;position:absolute;bottom:0;left:0}.active-tab-item-box.initial[data-v-fd2c8809]{transition:none}.panel-list-container[data-v-fd2c8809]{width:100%;min-height:200px;position:relative}.panel-item-box[data-v-fd2c8809]{width:100%;height:100%;position:absolute;top:0;left:0}.toaster-box[data-v-f97905ec]{z-index:9999;flex-direction:column;gap:12px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}[data-v-f97905ec] .toast-item{box-sizing:border-box;background-color:#0009;min-width:220px;padding:10px}[data-v-f97905ec] .title-box{justify-content:center;align-items:center;gap:10px;display:flex}[data-v-f97905ec] .message{color:#fff}:-webkit-any(input:-webkit-autofill,textarea:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--input-bg,#fff) inset;-webkit-text-fill-color:inherit}:is(input:autofill,textarea:autofill){-webkit-box-shadow:0 0 0 1000px var(--input-bg,#fff) inset;-webkit-text-fill-color:inherit}input:focus,textarea:focus,button:focus{outline:none}input::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}textarea::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input::-moz-placeholder{color:var(--input-placeholder-color,#999)}textarea::-moz-placeholder{color:var(--input-placeholder-color,#999)}input:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}
 /*$vite$:1*/

package/dist/types/components/components.d.ts

@@ -12,3 +12,5 @@ export { default as Menu } from './menu';
 export type { RoxVMenuProps, RoxVMenuOptionProps } from './menu';
 export { default as Tab } from './tab';
 export type { RoxVTabProps } from './tab';
+export { default as Toaster, useToast } from './toast';
+export type { RoxVToasterProps } from './toast';

package/dist/types/components/toast/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import { default as Toaster } from './toaster.vue';
+import { useToast } from './toast';
+export * from './types';
+export { useToast };
+declare const _default: typeof Toaster & Plugin;
+export default _default;

package/dist/types/components/toast/style.css.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/toast/toast-item.vue.d.ts

@@ -0,0 +1,25 @@
+import { RoxVToasterProps, ToastItem } from './types';
+type ToastItemProps = Omit<RoxVToasterProps, "to">;
+type __VLS_Props = {
+    toast: ToastItem;
+} & ToastItemProps;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'success-icon'?(_: {}): any;
+        'error-icon'?(_: {}): any;
+        'info-icon'?(_: {}): any;
+        'warning-icon'?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/toast/toast.d.ts

@@ -0,0 +1,20 @@
+import { ToastOptions } from './types';
+declare function dismiss(id?: string): void;
+declare function createToast(options: ToastOptions): string;
+export declare function useToast(): {
+    toast: typeof createToast;
+    success: (message: string, duration?: number) => string;
+    error: (message: string, duration?: number) => string;
+    info: (message: string, duration?: number) => string;
+    warning: (message: string, duration?: number) => string;
+    dismiss: typeof dismiss;
+};
+export declare const toastStore: {
+    readonly toasts: readonly {
+        readonly id: string;
+        readonly message: string;
+        readonly duration: number;
+        readonly type: import('./types').ToastType;
+    }[];
+};
+export {};

package/dist/types/components/toast/toaster.vue.d.ts

@@ -0,0 +1,26 @@
+import { RoxVToasterProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'success-icon'?(_: {}): any;
+        'error-icon'?(_: {}): any;
+        'info-icon'?(_: {}): any;
+        'warning-icon'?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<RoxVToasterProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<RoxVToasterProps> & Readonly<{}>, {
+    to: string;
+    toasterClass: string;
+    titleClass: string;
+    messageClass: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/toast/types.d.ts

@@ -0,0 +1,15 @@
+export type ToastType = "success" | "error" | "info" | "warning";
+export interface ToastOptions {
+    message?: string;
+    duration?: number;
+    type?: ToastType;
+}
+export interface ToastItem extends Required<ToastOptions> {
+    id: string;
+}
+export interface RoxVToasterProps {
+    to?: string;
+    toasterClass?: string;
+    titleClass?: string;
+    messageClass?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-drowned-fish/rox-v",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "description": "vue3 组件库，提供常用的 ui 组件，如按钮、输入框、下拉选择框、选项卡等",
   "main": "dist/lib/index.js",
   "module": "dist/es/index.js",