@a-drowned-fish/rox-v 1.0.20 → 1.0.21

package/README.md

@@ -1,279 +1,227 @@
-# Rox V
-
-一个基于 Vue 3 的组件库，支持按需引入和自动导入。
-
-## 安装
-
-```bash
-npm install @a-drowned-fish/rox-v
-# 或
-yarn add @a-drowned-fish/rox-v
-# 或
-pnpm add @a-drowned-fish/rox-v
-```
-
-## 使用方式
-
-### 1. 完整引入
-
-```ts
-import { createApp } from "vue";
-import RoxV from "@a-drowned-fish/rox-v";
-import "@a-drowned-fish/rox-v/dist/style.css"; // 如果需要样式
-
-const app = createApp(App);
-app.use(RoxV);
-```
-
-### 2. 按需引入（推荐）
-
-- 优势: 无需手动引入样式文件 且 按需加载
+|
 
-```vue
-<template>
-    <Button>点击我</Button>
-    <InputOtp />
-</template>
-<script setup lang="ts">
-import { Button, InputOtp } from "@a-drowned-fish/rox-v";
-</script>
-```
+#### Slots
 
-## 可用组件
+| 插槽名  | 说明         |
+| ------- | ------------ |
+| default | 弹窗内容区域 |
 
-### InputOtp - OTP 输入组件
+### Menu - 下拉菜单组件
 
-一个用于输入一次性密码（OTP）的组件，支持自定义长度、样式和间距。
+一个支持多级嵌套的下拉菜单组件，支持点击和悬停触发方式，带有过渡动画效果。
 
 #### 基础用法
 
 ```vue
 <template>
-    <InputOtp v-model="code" />
+  <Menu :items="menuItems" v-model="selectedValue">
+    <span>点击打开菜单</span>
+  </Menu>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { Menu } from "@a-drowned-fish/rox-v";
 
-const code = ref("");
+const selectedValue = ref<(string | number)[]>([]);
+
+const menuItems = [
+  { label: "选项1", value: "option1" },
+  { label: "选项2", value: "option2" },
+  { label: "选项3", value: "option3" },
+];
 </script>
 ```
 
-#### 自定义长度
+#### 多级菜单
 
 ```vue
 <template>
-    <!-- 4位验证码 -->
-    <InputOtp v-model="code" :length="4" />
-
-    <!-- 8位验证码 -->
-    <InputOtp v-model="code" :length="8" />
+  <Menu :items="menuItems" v-model="selectedValue">
+    <span>多级菜单</span>
+  </Menu>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-
-const code = ref("");
+import { Menu } from "@a-drowned-fish/rox-v";
+
+const selectedValue = ref<(string | number)[]>([]);
+
+const menuItems = [
+  {
+    label: "文件",
+    value: "file",
+    children: [
+      { label: "新建", value: "new" },
+      { label: "打开", value: "open" },
+      { label: "保存", value: "save" },
+    ],
+  },
+  {
+    label: "编辑",
+    value: "edit",
+    children: [
+      { label: "撤销", value: "undo" },
+      { label: "重做", value: "redo" },
+      {
+        label: "查找",
+        value: "find",
+        children: [
+          { label: "查找文本", value: "find-text" },
+          { label: "替换", value: "replace" },
+        ],
+      },
+    ],
+  },
+];
 </script>
 ```
 
-#### 自定义样式
+#### 自定义图标
 
 ```vue
 <template>
-    <InputOtp v-model="code" item-class="custom-item" active-item-class="custom-active" gap="15px" />
+  <Menu :items="menuItems" suffix-icon="/icons/arrow-right.svg" checked-icon="/icons/check.svg" v-model="selectedValue">
+    <span>带图标的菜单</span>
+  </Menu>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-
-const code = ref("");
+import { Menu } from "@a-drowned-fish/rox-v";
+
+const selectedValue = ref<(string | number)[]>([]);
+
+const menuItems = [
+  { label: "选项1", value: "option1" },
+  { label: "选项2", value: "option2" },
+  {
+    label: "子菜单",
+    value: "submenu",
+    children: [{ label: "子选项", value: "sub-option" }],
+  },
+];
 </script>
-
-<style scoped>
-.custom-item {
-    width: 50px;
-    height: 60px;
-    border: 2px solid #ddd;
-    border-radius: 12px;
-    font-size: 24px;
-}
-
-.custom-active {
-    border-color: #67c23a;
-    box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
-}
-</style>
 ```
 
-#### 监听完成事件
+#### 监听事件
 
 ```vue
 <template>
-    <InputOtp v-model="code" @complete="handleComplete" />
+  <Menu :items="menuItems" v-model="selectedValue" @open="handleOpen" @close="handleClose">
+    <span>监听事件</span>
+  </Menu>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { Menu } from "@a-drowned-fish/rox-v";
 
-const code = ref("");
+const selectedValue = ref<(string | number)[]>([]);
 
-const handleComplete = (value: string) => {
-    console.log("验证码输入完成:", value);
-    // 在这里执行验证逻辑
+const menuItems = [
+  { label: "选项1", value: "option1" },
+  { label: "选项2", value: "option2" },
+];
+
+const handleOpen = () => {
+  console.log("菜单已打开");
+};
+
+const handleClose = () => {
+  console.log("菜单已关闭");
 };
 </script>
 ```
 
-#### Props
-
-| 属性               | 说明                                         | 类型     | 默认值     |
-| ------------------ | -------------------------------------------- | -------- | ---------- |
-| length             | 输入框数量                                   | `number` | `6`        |
-| itemClass          | 每个输入项的自定义类名                       | `string` | `''`       |
-| activeItemClass    | 激活状态输入项的自定义类名                   | `string` | `''`       |
-| gap                | 输入项之间的间距                             | `string` | `'10px'`   |
-| hasFilledItemClass | 具有内容的输入项的类名[active前面选项的类名] | `string` | `'active'` |
-
-#### Events
-
-| 事件名   | 说明                           | 回调参数          |
-| -------- | ------------------------------ | ----------------- |
-| complete | 输入完成时触发（达到指定长度） | `(value: string)` |
-
-### Popup - 弹出层组件
-
-一个灵活的弹出层组件，支持从不同方向滑入，带有遮罩层和过渡动画效果。
-
-#### 基础用法
+#### 自定义样式
 
 ```vue
 <template>
-    <Button @click="show = true">打开弹窗</Button>
-
-    <Popup v-model="show">
-        <div class="popup-content">
-            <h3>标题</h3>
-            <p>这是弹窗内容</p>
-            <Button @click="show = false">关闭</Button>
-        </div>
-    </Popup>
+  <Menu
+    :items="menuItems"
+    v-model="selectedValue"
+    item-gap="8px"
+    active-item-class="custom-active"
+    list-container-class="custom-list"
+    default-container-class="custom-trigger"
+  >
+    <span>自定义样式</span>
+  </Menu>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { Button, Popup } from "@a-drowned-fish/rox-v";
+import { Menu } from "@a-drowned-fish/rox-v";
+
+const selectedValue = ref<(string | number)[]>([]);
 
-const show = ref(false);
+const menuItems = [
+  { label: "选项1", value: "option1" },
+  { label: "选项2", value: "option2" },
+];
 </script>
 
 <style scoped>
-.popup-content {
-    padding: 20px;
-    background: white;
-    border-radius: 12px 12px 0 0;
+.custom-trigger {
+  background-color: #409eff;
+  color: white;
+  border-radius: 4px;
 }
-</style>
-```
-
-#### 不同位置
 
-```vue
-<template>
-    <!-- 底部弹出（默认） -->
-    <Popup v-model="showBottom" position="bottom">
-        <div class="content">底部弹窗</div>
-    </Popup>
-
-    <!-- 顶部弹出 -->
-    <Popup v-model="showTop" position="top">
-        <div class="content">顶部弹窗</div>
-    </Popup>
-
-    <!-- 左侧弹出 -->
-    <Popup v-model="showLeft" position="left">
-        <div class="content">左侧弹窗</div>
-    </Popup>
-
-    <!-- 右侧弹出 -->
-    <Popup v-model="showRight" position="right">
-        <div class="content">右侧弹窗</div>
-    </Popup>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { Popup } from "@a-drowned-fish/rox-v";
+.custom-list {
+  border-radius: 8px;
+}
 
-const showBottom = ref(false);
-const showTop = ref(false);
-const showLeft = ref(false);
-const showRight = ref(false);
-</script>
+.custom-active {
+  background-color: #ecf5ff;
+  color: #409eff;
+}
+</style>
 ```
 
-#### 自定义遮罩层
+#### Props
 
-```vue
-<template>
-    <Popup v-model="show" :bg="'rgba(0, 0, 0, 0.7)'" :duration="500" :mask-closable="false">
-        <div class="content">
-            <p>点击遮罩层不会关闭</p>
-            <Button @click="show = false">手动关闭</Button>
-        </div>
-    </Popup>
-</template>
+| 属性                  | 说明                     | 类型                    | 默认值  |
+| --------------------- | ------------------------ | ----------------------- | ------- |
+| items                 | 菜单项数据               | `RoxVMenuOptionProps[]` | `[]`    |
+| duration              | 过渡动画持续时间（毫秒） | `number`                | `100`   |
+| suffixIcon            | 子菜单后缀图标 URL       | `string`                | `''`    |
+| suffixIconClass       | 后缀图标的自定义类名     | `string`                | `''`    |
+| checkedIcon           | 选中项的图标 URL         | `string`                | `''`    |
+| checkedIconClass      | 选中标记图标的自定义类名 | `string`                | `''`    |
+| listContainerClass    | 菜单列表容器的自定义类名 | `string`                | `''`    |
+| subMenuContainerClass | 子菜单容器的自定义类名   | `string`                | `''`    |
+| defaultContainerClass | 触发区域容器的自定义类名 | `string`                | `''`    |
+| itemContainerClass    | 菜单项的自定义类名       | `string`                | `''`    |
+| itemGap               | 菜单项之间的间距         | `string`                | `'4px'` |
+| activeItemClass       | 激活菜单项的自定义类名   | `string`                | `''`    |
+| v-model               | 当前选中的菜单项路径     | `(string \| number)[]`  | `[]`    |
 
-<script setup lang="ts">
-import { ref } from "vue";
-import { Popup, Button } from "@a-drowned-fish/rox-v";
+#### Events
 
-const show = ref(false);
-</script>
-```
+| 事件名 | 说明       | 回调参数 |
+| ------ | ---------- | -------- |
+| open   | 菜单打开时 | 无       |
+| close  | 菜单关闭时 | 无       |
 
-#### 自定义挂载节点
+#### Slots
 
-```vue
-<template>
-    <div id="custom-container">
-        <Popup v-model="show" to="#custom-container">
-            <div class="content">挂载到指定容器</div>
-        </Popup>
-    </div>
-</template>
+| 插槽名  | 说明                 |
+| ------- | -------------------- |
+| default | 触发区域的自定义内容 |
 
-<script setup lang="ts">
-import { ref } from "vue";
-import { Popup } from "@a-drowned-fish/rox-v";
+#### 类型定义
 
-const show = ref(false);
-</script>
+```ts
+interface RoxVMenuOptionProps {
+  label: string; // 菜单项显示文本
+  value: string | number; // 菜单项唯一标识
+  children?: RoxVMenuOptionProps[]; // 子菜单项（可选）
+}
 ```
 
-#### Props
-
-| 属性         | 说明                         | 类型                                     | 默认值                |
-| ------------ | ---------------------------- | ---------------------------------------- | --------------------- |
-| position     | 弹出位置                     | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'`            |
-| bg           | 遮罩层背景色                 | `string`                                 | `'rgba(0, 0, 0, .5)'` |
-| duration     | 动画持续时间（毫秒）         | `number`                                 | `300`                 |
-| maskClosable | 点击遮罩层是否关闭           | `boolean`                                | `true`                |
-| to           | teleport 的目标节点          | `string`                                 | `'body'`              |
-| top          | 弹窗顶部距离父元素顶部的距离 | `string`                                 | `'0px'`               |
-| left         | 弹窗左侧距离父元素左侧的距离 | `string`                                 | `'0px'`               |
-| right        | 弹窗右侧距离父元素右侧的距离 | `string`                                 | `'0px'`               |
-| bottom       | 弹窗底部距离父元素底部的距离 | `string`                                 | `'0px'`               |
-| zIndex       | 弹窗的 z-index 值            | `number`                                 | `50`                  |
-
-|
-
-#### Slots
-
-| 插槽名  | 说明         |
-| ------- | ------------ |
-| default | 弹窗内容区域 |
-
 ## License
 
 MIT

package/dist/es/collapse/collapse.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./collapse.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                         */
 //#region components/collapse/collapse.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-cea8a740"]]);
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-cc071022"]]);
 //#endregion
 export { n as default };

package/dist/es/collapse/collapse.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { Transition as e, createBlock as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeStyle as a, openBlock as o, renderSlot as s, withCtx as c } from "vue";
 //#region components/collapse/collapse.vue?vue&type=script&setup=true&lang.ts
 var l = /* @__PURE__ */ i({
+	name: "Collapse",
 	__name: "collapse",
 	props: {
 		open: {

package/dist/es/collapse/style.css

@@ -1 +1 @@
-.collapse-content[data-v-cea8a740]{width:max-content}.collapse-enter-from[data-v-cea8a740],.collapse-leave-to[data-v-cea8a740]{max-height:0!important}.collapse-enter-active[data-v-cea8a740],.collapse-leave-active[data-v-cea8a740]{max-height:var(--max-height);transition:max-height var(--duration) ease-in-out;overflow:hidden}
+.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}

package/dist/es/components.js

@@ -4,13 +4,15 @@ import n from "./popup/index.js";
 import r from "./button/index.js";
 import i from "./collapse/index.js";
 import a from "./input/index.js";
+import o from "./menu/index.js";
 //#region components/components.ts
-var o = /* @__PURE__ */ e({
+var s = /* @__PURE__ */ e({
 	Button: () => r,
 	Collapse: () => i,
 	Input: () => a,
 	InputOtp: () => t,
+	Menu: () => o,
 	Popup: () => n
 });
 //#endregion
-export { o as components_exports };
+export { s as components_exports };

package/dist/es/index.js

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

package/dist/es/input/input.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./input.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                      */
 //#region components/input/input.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-f5f052a7"]]);
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-56cf72b9"]]);
 //#endregion
 export { n as default };

package/dist/es/input/input.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, mergeModels as i, openBlock as a, useModel as o, useTemplateRef as s, vModelDynamic as c, vShow as l, withDirectives as u, withKeys as d } from "vue";
 //#region components/input/input.vue?vue&type=script&setup=true&lang.ts
 var f = { class: "input-box" }, p = ["type", "placeholder"], m = ["src"], h = /* @__PURE__ */ r({
+	name: "Input",
 	__name: "input",
 	props: /* @__PURE__ */ i({
 		placeholder: { default: "" },

package/dist/es/input/style.css

@@ -1 +1 @@
-.input-box[data-v-f5f052a7]{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-f5f052a7]:focus-within{border-color:#000}.input-box input[data-v-f5f052a7]{width:100%;height:100%;font-size:inherit;border:none;outline:none}input[data-v-f5f052a7]::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-f5f052a7]::-moz-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-f5f052a7]:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}.input-box img[data-v-f5f052a7]{-o-object-fit:contain;object-fit:contain;cursor:pointer;width:24px;height:24px}
+.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}

package/dist/es/menu/index.js

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

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

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

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

@@ -0,0 +1,97 @@
+import { Fragment as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, resolveComponent as f, toDisplayString as p, useModel as m, withCtx as h } from "vue";
+//#region components/menu/menu-item.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "menu-label" }, _ = ["src"], v = ["src"], y = /* @__PURE__ */ o({
+	name: "MenuItem",
+	__name: "menu-item",
+	props: /* @__PURE__ */ s({
+		checkedIcon: {},
+		checkedIconClass: {},
+		suffixIcon: {},
+		suffixIconClass: {},
+		itemContainerClass: {},
+		itemGap: {},
+		activeItemClass: {},
+		subMenuContainerClass: {},
+		deep: {},
+		item: {},
+		parentValue: {}
+	}, {
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(o) {
+		let s = m(o, "modelValue"), y = o, b = u(!1), x = () => b.value = !0, S = () => b.value = !1, C = () => {
+			y.item.children?.length || (s.value = [...y.parentValue, y.item.value]);
+		};
+		return (u, m) => {
+			let w = f("MenuItem", !0);
+			return l(), i("div", {
+				onMouseenter: x,
+				onMouseleave: S,
+				style: { padding: "0 8px" }
+			}, [a("div", {
+				class: c(["menu-item-inner", [
+					y.itemContainerClass,
+					{ active: s.value?.[y.deep] === o.item.value },
+					{ [y.activeItemClass]: s.value?.[y.deep] === o.item.value }
+				]]),
+				onClick: C
+			}, [
+				a("div", g, p(o.item.label), 1),
+				o.suffixIcon && o.item.children?.length ? (l(), i("img", {
+					key: 0,
+					src: y.suffixIcon,
+					class: c(["suffix-icon", y.suffixIconClass]),
+					alt: "suffix-icon"
+				}, null, 10, _)) : r("", !0),
+				o.checkedIcon && !o.item.children?.length && s.value?.[y.deep] === o.item.value ? (l(), i("img", {
+					key: 1,
+					src: y.checkedIcon,
+					class: c(["checked-icon", y.checkedIconClass]),
+					alt: "checked-icon"
+				}, null, 10, v)) : r("", !0)
+			], 2), o.item.children?.length ? (l(), n(t, {
+				key: 0,
+				name: "fade"
+			}, {
+				default: h(() => [b.value ? (l(), i("div", {
+					key: 0,
+					class: c(["sub-menu-box list-box", o.subMenuContainerClass])
+				}, [(l(!0), i(e, null, d(o.item.children, (e, t) => (l(), n(w, {
+					key: t,
+					modelValue: s.value,
+					"onUpdate:modelValue": m[0] ||= (e) => s.value = e,
+					item: e,
+					"suffix-icon": o.suffixIcon,
+					"suffix-icon-class": o.suffixIconClass,
+					"checked-icon": o.checkedIcon,
+					"checked-icon-class": o.checkedIconClass,
+					"item-container-class": o.itemContainerClass,
+					"item-gap": o.itemGap,
+					deep: y.deep + 1,
+					"active-item-class": y.activeItemClass,
+					"parent-value": y.parentValue.concat(o.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)) : r("", !0)]),
+				_: 1
+			})) : r("", !0)], 32);
+		};
+	}
+});
+//#endregion
+export { y as default };

package/dist/es/menu/menu.js

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

package/dist/es/menu/menu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,82 @@
+import e from "./menu-item.js";
+import { Fragment as t, Transition as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, renderSlot as m, useModel as h, watch as g, withCtx as _ } from "vue";
+//#region components/menu/menu.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	key: 0,
+	class: "menu-list-box"
+}, y = /* @__PURE__ */ s({
+	name: "Menu",
+	__name: "menu",
+	props: /* @__PURE__ */ c({
+		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: /* @__PURE__ */ c(["open", "close"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let y = c, b = h(s, "modelValue"), x = s, S = f(!1), C = () => S.value = !0, w = () => S.value = !1;
+		return g(b, () => {
+			S.value = !1;
+		}), g(S, (e) => {
+			y(e ? "open" : "close");
+		}), (c, f) => (d(), i("div", {
+			class: "menu-box",
+			style: u({ "--duration": x.duration + "ms" })
+		}, [a("div", {
+			class: l(["default-box", x.defaultContainerClass]),
+			onMouseenter: C,
+			onMouseleave: w
+		}, [m(c.$slots, "default", {}, void 0, !0), o(n, { name: "fade" }, {
+			default: _(() => [S.value ? (d(), i("div", v, [a("div", {
+				class: l(["menu-item-box", x.listContainerClass]),
+				style: u({ "--gap": x.itemGap })
+			}, [(d(!0), i(t, null, p(x.items, (t, n) => (d(), i("div", {
+				key: n,
+				class: "menu-item"
+			}, [o(e, {
+				modelValue: b.value,
+				"onUpdate:modelValue": f[0] ||= (e) => b.value = e,
+				item: t,
+				"suffix-icon": s.suffixIcon,
+				"suffix-icon-class": s.suffixIconClass,
+				"checked-icon": s.checkedIcon,
+				"checked-icon-class": s.checkedIconClass,
+				"item-container-class": s.itemContainerClass,
+				"item-gap": x.itemGap,
+				deep: 0,
+				"active-item-class": x.activeItemClass,
+				"sub-menu-container-class": x.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)])) : r("", !0)]),
+			_: 1
+		})], 34)], 4));
+	}
+});
+//#endregion
+export { y as default };

package/dist/es/menu/style.css

@@ -0,0 +1 @@
+.menu-box[data-v-fbfe58be]{display:inline-flex;position:relative}.default-box[data-v-fbfe58be]{box-sizing:border-box;border:1px solid #000;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-fbfe58be],[data-v-fbfe58be] .fade-enter-from,.fade-leave-to[data-v-fbfe58be],[data-v-fbfe58be] .fade-leave-to{opacity:0}.fade-enter-active[data-v-fbfe58be],[data-v-fbfe58be] .fade-enter-active,.fade-leave-active[data-v-fbfe58be],[data-v-fbfe58be] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-fbfe58be]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-fbfe58be]{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-fbfe58be] .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-fbfe58be] .menu-item-inner.active,[data-v-fbfe58be] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-fbfe58be] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-fbfe58be] .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-fbfe58be] .suffix-icon,[data-v-fbfe58be] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}

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`,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-cea8a740`]]);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`,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-f5f052a7`]]);y.install=e=>(y.name&&e.component(y.name,y),e);var b=y,x=r({Button:()=>p,Collapse:()=>h,Input:()=>b,InputOtp:()=>c,Popup:()=>u}),S=e=>(Object.keys(x).forEach(t=>{let n=x[t];n.install&&e.use(n)}),e),C={install:S};e.Button=p,e.Collapse=h,e.Input=b,e.InputOtp=c,e.Popup=u,e.default=C,e.install=S});
+(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-fbfe58be`]]);E.install=e=>(E.name&&e.component(E.name,E),e);var D=E,O=r({Button:()=>p,Collapse:()=>h,Input:()=>b,InputOtp:()=>c,Menu:()=>D,Popup:()=>u}),k=e=>(Object.keys(O).forEach(t=>{let n=O[t];n.install&&e.use(n)}),e),A={install:k};e.Button=p,e.Collapse=h,e.Input=b,e.InputOtp=c,e.Menu=D,e.Popup=u,e.default=A,e.install=k});

package/dist/lib/collapse/collapse.js

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

package/dist/lib/collapse/collapse.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-let e=require(`vue`);var t=(0,e.defineComponent)({__name:`collapse`,props:{open:{type:Boolean,default:!1},maxHeight:{default:`100dvh`},duration:{default:300}},setup(t){let n=t;return(t,r)=>((0,e.openBlock)(),(0,e.createBlock)(e.Transition,{name:`collapse`},{default:(0,e.withCtx)(()=>[n.open?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`collapse-content`,style:(0,e.normalizeStyle)({"--max-height":n.maxHeight,"--duration":n.duration+`ms`})},[(0,e.renderSlot)(t.$slots,`default`,{},void 0,!0)],4)):(0,e.createCommentVNode)(``,!0)]),_:3}))}});exports.default=t;
+let e=require(`vue`);var t=(0,e.defineComponent)({name:`Collapse`,__name:`collapse`,props:{open:{type:Boolean,default:!1},maxHeight:{default:`100dvh`},duration:{default:300}},setup(t){let n=t;return(t,r)=>((0,e.openBlock)(),(0,e.createBlock)(e.Transition,{name:`collapse`},{default:(0,e.withCtx)(()=>[n.open?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:`collapse-content`,style:(0,e.normalizeStyle)({"--max-height":n.maxHeight,"--duration":n.duration+`ms`})},[(0,e.renderSlot)(t.$slots,`default`,{},void 0,!0)],4)):(0,e.createCommentVNode)(``,!0)]),_:3}))}});exports.default=t;

package/dist/lib/collapse/style.css

@@ -1 +1 @@
-.collapse-content[data-v-cea8a740]{width:max-content}.collapse-enter-from[data-v-cea8a740],.collapse-leave-to[data-v-cea8a740]{max-height:0!important}.collapse-enter-active[data-v-cea8a740],.collapse-leave-active[data-v-cea8a740]{max-height:var(--max-height);transition:max-height var(--duration) ease-in-out;overflow:hidden}
+.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}

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`);var o=e.__exportAll({Button:()=>r.default,Collapse:()=>i.default,Input:()=>a.default,InputOtp:()=>t.default,Popup:()=>n.default});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return o}});
+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`);var s=e.__exportAll({Button:()=>r.default,Collapse:()=>i.default,Input:()=>a.default,InputOtp:()=>t.default,Menu:()=>o.default,Popup:()=>n.default});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return s}});

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(`./components.js`);;/* empty css       */var o=e=>(Object.keys(a.components_exports).forEach(t=>{let n=a.components_exports[t];n.install&&e.use(n)}),e),s={install:o};exports.Button=n.default,exports.Collapse=r.default,exports.Input=i.default,exports.InputOtp=e.default,exports.Popup=t.default,exports.default=s,exports.install=o;
+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(`./components.js`);;/* empty css       */var s=e=>(Object.keys(o.components_exports).forEach(t=>{let n=o.components_exports[t];n.install&&e.use(n)}),e),c={install:s};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.default=c,exports.install=s;

package/dist/lib/input/input.js

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

package/dist/lib/input/input.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-let e=require(`vue`);var t={class:`input-box`},n=[`type`,`placeholder`],r=[`src`],i=(0,e.defineComponent)({__name:`input`,props:(0,e.mergeModels)({placeholder:{default:``},type:{default:`text`},iconVisible:{type:Boolean,default:!1},icon:{default:``}},{modelValue:{type:String,default:``},modelModifiers:{}}),emits:(0,e.mergeModels)([`click`,`enter`],[`update:modelValue`]),setup(i,{emit:a}){let o=a,s=(0,e.useTemplateRef)(`input`),c=(0,e.useModel)(i,`modelValue`),l=i,u=()=>{o(`click`),s.value?.focus?.(),setTimeout(()=>{let e=c.value.length;s.value?.setSelectionRange?.(e,e)},0)};return(i,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t,[(0,e.withDirectives)((0,e.createElementVNode)(`input`,{type:l.type,"onUpdate:modelValue":a[0]||=e=>c.value=e,ref:`input`,placeholder:l.placeholder,onKeyup:a[1]||=(0,e.withKeys)(e=>i.$emit(`enter`),[`enter`])},null,40,n),[[e.vModelDynamic,c.value]]),l.icon?(0,e.withDirectives)(((0,e.openBlock)(),(0,e.createElementBlock)(`img`,{key:0,src:l.icon,alt:`icon`,onClick:u},null,8,r)),[[e.vShow,l.iconVisible]]):(0,e.createCommentVNode)(``,!0)]))}});exports.default=i;
+let e=require(`vue`);var t={class:`input-box`},n=[`type`,`placeholder`],r=[`src`],i=(0,e.defineComponent)({name:`Input`,__name:`input`,props:(0,e.mergeModels)({placeholder:{default:``},type:{default:`text`},iconVisible:{type:Boolean,default:!1},icon:{default:``}},{modelValue:{type:String,default:``},modelModifiers:{}}),emits:(0,e.mergeModels)([`click`,`enter`],[`update:modelValue`]),setup(i,{emit:a}){let o=a,s=(0,e.useTemplateRef)(`input`),c=(0,e.useModel)(i,`modelValue`),l=i,u=()=>{o(`click`),s.value?.focus?.(),setTimeout(()=>{let e=c.value.length;s.value?.setSelectionRange?.(e,e)},0)};return(i,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,t,[(0,e.withDirectives)((0,e.createElementVNode)(`input`,{type:l.type,"onUpdate:modelValue":a[0]||=e=>c.value=e,ref:`input`,placeholder:l.placeholder,onKeyup:a[1]||=(0,e.withKeys)(e=>i.$emit(`enter`),[`enter`])},null,40,n),[[e.vModelDynamic,c.value]]),l.icon?(0,e.withDirectives)(((0,e.openBlock)(),(0,e.createElementBlock)(`img`,{key:0,src:l.icon,alt:`icon`,onClick:u},null,8,r)),[[e.vShow,l.iconVisible]]):(0,e.createCommentVNode)(``,!0)]))}});exports.default=i;

package/dist/lib/input/style.css

@@ -1 +1 @@
-.input-box[data-v-f5f052a7]{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-f5f052a7]:focus-within{border-color:#000}.input-box input[data-v-f5f052a7]{width:100%;height:100%;font-size:inherit;border:none;outline:none}input[data-v-f5f052a7]::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-f5f052a7]::-moz-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-f5f052a7]:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}.input-box img[data-v-f5f052a7]{-o-object-fit:contain;object-fit:contain;cursor:pointer;width:24px;height:24px}
+.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}

package/dist/lib/menu/index.js

@@ -0,0 +1 @@
+const e=require(`./menu.js`);require(`./style.css`),e.default.install=t=>(e.default.name&&t.component(e.default.name,e.default),t);var t=e.default;exports.default=t;

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

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

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

@@ -0,0 +1 @@
+let e=require(`vue`);var t={class:`menu-label`},n=[`src`],r=[`src`],i=(0,e.defineComponent)({name:`MenuItem`,__name:`menu-item`,props:(0,e.mergeModels)({checkedIcon:{},checkedIconClass:{},suffixIcon:{},suffixIconClass:{},itemContainerClass:{},itemGap:{},activeItemClass:{},subMenuContainerClass:{},deep:{},item:{},parentValue:{}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:[`update:modelValue`],setup(i){let a=(0,e.useModel)(i,`modelValue`),o=i,s=(0,e.ref)(!1),c=()=>s.value=!0,l=()=>s.value=!1,u=()=>{o.item.children?.length||(a.value=[...o.parentValue,o.item.value])};return(d,f)=>{let p=(0,e.resolveComponent)(`MenuItem`,!0);return(0,e.openBlock)(),(0,e.createElementBlock)(`div`,{onMouseenter:c,onMouseleave:l,style:{padding:`0 8px`}},[(0,e.createElementVNode)(`div`,{class:(0,e.normalizeClass)([`menu-item-inner`,[o.itemContainerClass,{active:a.value?.[o.deep]===i.item.value},{[o.activeItemClass]:a.value?.[o.deep]===i.item.value}]]),onClick:u},[(0,e.createElementVNode)(`div`,t,(0,e.toDisplayString)(i.item.label),1),i.suffixIcon&&i.item.children?.length?((0,e.openBlock)(),(0,e.createElementBlock)(`img`,{key:0,src:o.suffixIcon,class:(0,e.normalizeClass)([`suffix-icon`,o.suffixIconClass]),alt:`suffix-icon`},null,10,n)):(0,e.createCommentVNode)(``,!0),i.checkedIcon&&!i.item.children?.length&&a.value?.[o.deep]===i.item.value?((0,e.openBlock)(),(0,e.createElementBlock)(`img`,{key:1,src:o.checkedIcon,class:(0,e.normalizeClass)([`checked-icon`,o.checkedIconClass]),alt:`checked-icon`},null,10,r)):(0,e.createCommentVNode)(``,!0)],2),i.item.children?.length?((0,e.openBlock)(),(0,e.createBlock)(e.Transition,{key:0,name:`fade`},{default:(0,e.withCtx)(()=>[s.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,class:(0,e.normalizeClass)([`sub-menu-box list-box`,i.subMenuContainerClass])},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(i.item.children,(t,n)=>((0,e.openBlock)(),(0,e.createBlock)(p,{key:n,modelValue:a.value,"onUpdate:modelValue":f[0]||=e=>a.value=e,item:t,"suffix-icon":i.suffixIcon,"suffix-icon-class":i.suffixIconClass,"checked-icon":i.checkedIcon,"checked-icon-class":i.checkedIconClass,"item-container-class":i.itemContainerClass,"item-gap":i.itemGap,deep:o.deep+1,"active-item-class":o.activeItemClass,"parent-value":o.parentValue.concat(i.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,e.createCommentVNode)(``,!0)]),_:1})):(0,e.createCommentVNode)(``,!0)],32)}}});exports.default=i;

package/dist/lib/menu/menu.js

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

package/dist/lib/menu/menu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+const e=require(`./menu-item.js`);let t=require(`vue`);var n={key:0,class:`menu-list-box`},r=(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(r,{emit:i}){let a=i,o=(0,t.useModel)(r,`modelValue`),s=r,c=(0,t.ref)(!1),l=()=>c.value=!0,u=()=>c.value=!1;return(0,t.watch)(o,()=>{c.value=!1}),(0,t.watch)(c,e=>{a(e?`open`:`close`)}),(i,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`menu-box`,style:(0,t.normalizeStyle)({"--duration":s.duration+`ms`})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`default-box`,s.defaultContainerClass]),onMouseenter:l,onMouseleave:u},[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0),(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[c.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,n,[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-box`,s.listContainerClass]),style:(0,t.normalizeStyle)({"--gap":s.itemGap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(s.items,(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:i,class:`menu-item`},[(0,t.createVNode)(e.default,{modelValue:o.value,"onUpdate:modelValue":a[0]||=e=>o.value=e,item:n,"suffix-icon":r.suffixIcon,"suffix-icon-class":r.suffixIconClass,"checked-icon":r.checkedIcon,"checked-icon-class":r.checkedIconClass,"item-container-class":r.itemContainerClass,"item-gap":s.itemGap,deep:0,"active-item-class":s.activeItemClass,"sub-menu-container-class":s.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))}});exports.default=r;

package/dist/lib/menu/style.css

@@ -0,0 +1 @@
+.menu-box[data-v-fbfe58be]{display:inline-flex;position:relative}.default-box[data-v-fbfe58be]{box-sizing:border-box;border:1px solid #000;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-fbfe58be],[data-v-fbfe58be] .fade-enter-from,.fade-leave-to[data-v-fbfe58be],[data-v-fbfe58be] .fade-leave-to{opacity:0}.fade-enter-active[data-v-fbfe58be],[data-v-fbfe58be] .fade-enter-active,.fade-leave-active[data-v-fbfe58be],[data-v-fbfe58be] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-fbfe58be]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-fbfe58be]{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-fbfe58be] .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-fbfe58be] .menu-item-inner.active,[data-v-fbfe58be] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-fbfe58be] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-fbfe58be] .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-fbfe58be] .suffix-icon,[data-v-fbfe58be] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}

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-cea8a740]{width:max-content}.collapse-enter-from[data-v-cea8a740],.collapse-leave-to[data-v-cea8a740]{max-height:0!important}.collapse-enter-active[data-v-cea8a740],.collapse-leave-active[data-v-cea8a740]{max-height:var(--max-height);transition:max-height var(--duration) ease-in-out;overflow:hidden}.input-box[data-v-f5f052a7]{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-f5f052a7]:focus-within{border-color:#000}.input-box input[data-v-f5f052a7]{width:100%;height:100%;font-size:inherit;border:none;outline:none}input[data-v-f5f052a7]::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-f5f052a7]::-moz-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-f5f052a7]:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}.input-box img[data-v-f5f052a7]{-o-object-fit:contain;object-fit:contain;cursor:pointer;width:24px;height:24px}:-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-fbfe58be]{display:inline-flex;position:relative}.default-box[data-v-fbfe58be]{box-sizing:border-box;border:1px solid #000;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-fbfe58be],[data-v-fbfe58be] .fade-enter-from,.fade-leave-to[data-v-fbfe58be],[data-v-fbfe58be] .fade-leave-to{opacity:0}.fade-enter-active[data-v-fbfe58be],[data-v-fbfe58be] .fade-enter-active,.fade-leave-active[data-v-fbfe58be],[data-v-fbfe58be] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-fbfe58be]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-fbfe58be]{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-fbfe58be] .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-fbfe58be] .menu-item-inner.active,[data-v-fbfe58be] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-fbfe58be] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-fbfe58be] .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-fbfe58be] .suffix-icon,[data-v-fbfe58be] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}:-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

@@ -8,3 +8,5 @@ export { default as Collapse } from './collapse';
 export type { RoxVCollapseProps } from './collapse';
 export { default as Input } from './input';
 export type { RoxVInputProps } from './input';
+export { default as Menu } from './menu';
+export type { RoxVMenuProps, RoxVMenuOptionProps } from './menu';

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

@@ -0,0 +1,5 @@
+import { Plugin } from 'vue';
+import { default as Menu } from './menu.vue';
+export * from './types';
+declare const _default: typeof Menu & Plugin;
+export default _default;

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

@@ -0,0 +1,17 @@
+import { RoxVMenuOptionProps, RoxVMenuProps } from './types';
+type IProps = Pick<RoxVMenuProps, "checkedIcon" | "checkedIconClass" | "suffixIcon" | "suffixIconClass" | "itemContainerClass" | "itemGap" | "activeItemClass" | "subMenuContainerClass"> & {
+    deep: number;
+    item: RoxVMenuOptionProps;
+    parentValue: (string | number)[];
+};
+declare const model: import('vue').ModelRef<(string | number)[], string, (string | number)[], (string | number)[]>;
+type __VLS_Props = IProps;
+type __VLS_PublicProps = {
+    modelValue?: typeof model['value'];
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: (string | number)[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,39 @@
+import { RoxVMenuOptionProps, RoxVMenuProps } from './types';
+declare const model: import('vue').ModelRef<(string | number)[], string, (string | number)[], (string | number)[]>;
+type __VLS_Props = RoxVMenuProps;
+type __VLS_PublicProps = {
+    modelValue?: typeof model['value'];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+    "update:modelValue": (value: (string | number)[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: (string | number)[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    activeItemClass: string;
+    duration: number;
+    itemGap: string;
+    subMenuContainerClass: string;
+    items: RoxVMenuOptionProps[];
+    listContainerClass: string;
+    defaultContainerClass: string;
+}, {}, {}, {}, 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/menu/style.css.d.ts

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

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

@@ -0,0 +1,19 @@
+export interface RoxVMenuOptionProps {
+    label: string;
+    value: string | number;
+    children?: RoxVMenuOptionProps[];
+}
+export interface RoxVMenuProps {
+    duration?: number;
+    items?: RoxVMenuOptionProps[];
+    suffixIcon?: string;
+    suffixIconClass?: string;
+    checkedIcon?: string;
+    checkedIconClass?: string;
+    listContainerClass?: string;
+    subMenuContainerClass?: string;
+    defaultContainerClass?: string;
+    itemContainerClass?: string;
+    itemGap?: string;
+    activeItemClass?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-drowned-fish/rox-v",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "vue ui library",
   "main": "dist/lib/index.js",
   "module": "dist/es/index.js",