@a-drowned-fish/rox-v 1.0.19 → 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

@@ -3,12 +3,16 @@ import t from "./input-otp/index.js";
 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 a = /* @__PURE__ */ e({
+var s = /* @__PURE__ */ e({
 	Button: () => r,
 	Collapse: () => i,
+	Input: () => a,
 	InputOtp: () => t,
+	Menu: () => o,
 	Popup: () => n
 });
 //#endregion
-export { a as components_exports };
+export { s as components_exports };

package/dist/es/index.js

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

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

package/dist/es/input/input.js

@@ -0,0 +1,7 @@
+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-56cf72b9"]]);
+//#endregion
+export { n as default };

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

@@ -0,0 +1,44 @@
+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: "" },
+		type: { default: "text" },
+		iconVisible: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { default: "" }
+	}, {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ i(["click", "enter"], ["update:modelValue"]),
+	setup(r, { emit: i }) {
+		let h = i, g = s("input"), _ = o(r, "modelValue"), v = r, y = () => {
+			h("click"), g.value?.focus?.(), setTimeout(() => {
+				let e = _.value.length;
+				g.value?.setSelectionRange?.(e, e);
+			}, 0);
+		};
+		return (r, i) => (a(), t("div", f, [u(n("input", {
+			type: v.type,
+			"onUpdate:modelValue": i[0] ||= (e) => _.value = e,
+			ref: "input",
+			placeholder: v.placeholder,
+			onKeyup: i[1] ||= d((e) => r.$emit("enter"), ["enter"])
+		}, null, 40, p), [[c, _.value]]), v.icon ? u((a(), t("img", {
+			key: 0,
+			src: v.icon,
+			alt: "icon",
+			onClick: y
+		}, null, 8, m)), [[l, v.iconVisible]]) : e("", !0)]));
+	}
+});
+//#endregion
+export { h as default };

package/dist/es/input/style.css

@@ -0,0 +1 @@
+.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/input-otp/input-otp.js

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

package/dist/es/input-otp/style.css

@@ -1 +1 @@
-.otp-wrapper[data-v-72f06980]{cursor:pointer;width:400px;max-width:100%;position:relative}.otp-box[data-v-72f06980]{width:100%;display:flex}.otp-item[data-v-72f06980]{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-72f06980]{border-bottom:1px solid #000}
+.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}

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 };