@a-drowned-fish/rox-v 1.0.1 → 1.0.2

package/README.md

@@ -19,99 +19,22 @@ pnpm add @a-drowned-fish/rox-v
 ```ts
 import { createApp } from "vue";
 import RoxV from "@a-drowned-fish/rox-v";
-import "@a-drowned-fish/rox-v/dist/es/style.css"; // 如果需要样式
+import "@a-drowned-fish/rox-v/dist/style.css"; // 如果需要样式
 
 const app = createApp(App);
 app.use(RoxV);
 ```
 
-### 2. 按需引入（配合 unplugin-vue-components）
-
-安装依赖：
-
-```bash
-npm install unplugin-vue-components -D
-```
-
-在 Vite 配置中使用：
-
-```ts
-// vite.config.ts
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import Components from "unplugin-vue-components/vite";
-import { RoxVResolver } from "@a-drowned-fish/rox-v/resolver";
-
-export default defineConfig({
-    plugins: [
-        vue(),
-        Components({
-            resolvers: [RoxVResolver()], // 默认会自动引入样式
-        }),
-    ],
-});
-```
-
-然后在模板中直接使用组件，无需手动导入：
+### 2. 按需引入（无需手动引入css）
 
 ```vue
 <template>
     <Button>点击我</Button>
     <InputOtp />
 </template>
-```
-
-**注意**：Resolver 默认会自动引入每个组件的样式文件。如果不需要自动引入样式，可以配置 `importStyle: false`：
-
-```ts
-Components({
-    resolvers: [RoxVResolver({ importStyle: false })],
-});
-```
-
-### 3. 手动按需引入
-
-```ts
+<script setup lang="ts">
 import { Button, InputOtp } from "@a-drowned-fish/rox-v";
-```
-
-## Resolver 选项
-
-`RoxVResolver` 接受一个可选的配置对象：
-
-```ts
-interface RoxVResolverOptions {
-    /**
-     * 使用 CommonJS 构建 (lib) 而不是 ES 模块 (es)
-     * @default false
-     */
-    cjs?: boolean;
-
-    /**
-     * 自动引入组件样式
-     * @default true
-     */
-    importStyle?: boolean;
-}
-```
-
-示例：
-
-```ts
-// 使用 CommonJS 构建
-Components({
-    resolvers: [RoxVResolver({ cjs: true })],
-});
-
-// 禁用自动引入样式
-Components({
-    resolvers: [RoxVResolver({ importStyle: false })],
-});
-
-// 同时配置多个选项
-Components({
-    resolvers: [RoxVResolver({ cjs: true, importStyle: true })],
-});
+</script>
 ```
 
 ## 可用组件
@@ -204,7 +127,6 @@ const handleComplete = (value: string) => {
 
 | 属性               | 说明                                         | 类型     | 默认值     |
 | ------------------ | -------------------------------------------- | -------- | ---------- |
-| modelValue         | 绑定值                                       | `string` | `''`       |
 | length             | 输入框数量                                   | `number` | `6`        |
 | itemClass          | 每个输入项的自定义类名                       | `string` | `''`       |
 | activeItemClass    | 激活状态输入项的自定义类名                   | `string` | `''`       |
@@ -213,10 +135,144 @@ const handleComplete = (value: string) => {
 
 #### Events
 
-| 事件名            | 说明                           | 回调参数          |
-| ----------------- | ------------------------------ | ----------------- |
-| update:modelValue | 输入值变化时触发               | `(value: string)` |
-| complete          | 输入完成时触发（达到指定长度） | `(value: string)` |
+| 事件名   | 说明                           | 回调参数          |
+| -------- | ------------------------------ | ----------------- |
+| 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>
+
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Button, Popup } from "@a-drowned-fish/rox-v";
+
+const show = ref(false);
+</script>
+
+<style scoped>
+.popup-content {
+    padding: 20px;
+    background: white;
+    border-radius: 12px 12px 0 0;
+}
+</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";
+
+const showBottom = ref(false);
+const showTop = ref(false);
+const showLeft = ref(false);
+const showRight = ref(false);
+</script>
+```
+
+#### 自定义遮罩层
+
+``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>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Popup, Button } from "@a-drowned-fish/rox-v";
+
+const show = ref(false);
+</script>
+
+```
+
+#### 自定义挂载节点
+
+``vue
+<template>
+    <div id="custom-container">
+        <Popup v-model="show" to="#custom-container">
+            <div class="content">挂载到指定容器</div>
+        </Popup>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Popup } from "@a-drowned-fish/rox-v";
+
+const show = ref(false);
+</script>
+```
+
+#### Props
+
+| 属性         | 说明                 | 类型                                     | 默认值                |
+| ------------ | -------------------- | ---------------------------------------- | --------------------- |
+| position     | 弹出位置             | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'`            |
+| bg           | 遮罩层背景色         | `string`                                 | `'rgba(0, 0, 0, .5)'` |
+| duration     | 动画持续时间（毫秒） | `number`                                 | `300`                 |
+| maskClosable | 点击遮罩层是否关闭   | `boolean`                                | `true`                |
+| to           | teleport 的目标节点  | `string`                                 | `'body'`              |
+
+#### Slots
+
+| 插槽名  | 说明         |
+| ------- | ------------ |
+| default | 弹窗内容区域 |
 
 ## License
 

package/dist/es/components.js

@@ -1,6 +1,10 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.js";
 import t from "./input-otp/index.js";
+import n from "./popup/index.js";
 //#region components/components.ts
-var n = /* @__PURE__ */ e({ InputOtp: () => t });
+var r = /* @__PURE__ */ e({
+	InputOtp: () => t,
+	Popup: () => n
+});
 //#endregion
-export { n as components_exports };
+export { r as components_exports };

package/dist/es/index.js

@@ -1,9 +1,11 @@
 import e from "./input-otp/index.js";
-import { components_exports as t } from "./components.js";
+import t from "./popup/index.js";
+import { components_exports as n } from "./components.js";
+import "./style.css";
 //#region components/index.ts
-var n = (e) => (Object.keys(t).forEach((n) => {
-	let r = t[n];
+var r = (e) => (Object.keys(n).forEach((t) => {
+	let r = n[t];
 	r.install && e.use(r);
-}), e), r = { install: n };
+}), e), i = { install: r };
 //#endregion
-export { e as InputOtp, r as default, n as install };
+export { e as InputOtp, t as Popup, i as default, r as install };

package/dist/es/input-otp/index.js

@@ -1,4 +1,5 @@
 import e from "./input-otp.js";
+import "./style.css";
 //#region components/input-otp/index.ts
 e.install = (t) => (e.name && t.component(e.name, e), t);
 var t = e;

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-9ff7490d"]]);
+var n = /* @__PURE__ */ t(e, [["__scopeId", "data-v-0e246228"]]);
 //#endregion
 export { n as default };

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

@@ -1,6 +1,6 @@
-import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, normalizeStyle as a, openBlock as o, ref as s, renderList as c, toDisplayString as l, vModelText as u, watch as d, withDirectives as f } from "vue";
+import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, nextTick as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, renderList as l, toDisplayString as u, vModelText as d, watch as f, withDirectives as p } from "vue";
 //#region components/input-otp/input-otp.vue?vue&type=script&setup=true&lang.ts
-var p = ["maxlength"], m = /* @__PURE__ */ r({
+var m = ["maxlength"], h = /* @__PURE__ */ r({
 	name: "InputOtp",
 	__name: "input-otp",
 	props: {
@@ -12,52 +12,78 @@ var p = ["maxlength"], m = /* @__PURE__ */ r({
 		hasFilledItemClass: { default: "active" }
 	},
 	emits: ["update:modelValue", "complete"],
-	setup(r, { emit: m }) {
-		let h = r, g = m, _ = s(null), v = s(h.modelValue);
-		d(() => h.modelValue, (e) => {
-			e !== v.value && (v.value = e);
+	setup(r, { emit: h }) {
+		let g = [
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		], _ = r, v = h, y = c(null), b = c(_.modelValue);
+		f(() => _.modelValue, (e) => {
+			e !== b.value && (b.value = e);
 		});
-		function y(e) {
+		function x(e) {
 			let t = e.target.value;
-			t = t.replace(/\D/g, ""), t = t.slice(0, h.length), v.value = t, g("update:modelValue", t), t.length === h.length && g("complete", t);
+			t = t.replace(/\D/g, ""), t = t.slice(0, _.length), b.value = t, v("update:modelValue", t), t.length === _.length && v("complete", t);
 		}
-		function b() {
-			_.value?.focus();
+		function S() {
+			i(() => {
+				if (y.value) {
+					let e = b.value.length;
+					y.value.setSelectionRange?.(e, e);
+				}
+			});
 		}
-		function x(e) {
-			return e === v.value.length;
+		function C(e) {
+			let t = b.value, n = e.key;
+			if (n === "Backspace" || n === "Delete") {
+				if (e.preventDefault(), t.length > 0) {
+					let e = t.slice(0, -1);
+					b.value = e, v("update:modelValue", e), S();
+				}
+			} else g.includes(n) && e.preventDefault();
+		}
+		function w() {
+			y.value?.focus();
+		}
+		function T(e) {
+			return e === b.value.length;
 		}
-		function S(e) {
-			return e < v.value.length;
+		function E(e) {
+			return e < b.value.length;
 		}
-		return (s, d) => (o(), t("div", {
+		return (i, c) => (s(), t("div", {
 			class: "otp-wrapper",
-			onClick: b
-		}, [f(n("input", {
+			onClick: w
+		}, [p(n("input", {
 			inputmode: "numeric",
 			autocomplete: "one-time-code",
 			ref_key: "inputRef",
-			ref: _,
-			"onUpdate:modelValue": d[0] ||= (e) => v.value = e,
+			ref: y,
+			"onUpdate:modelValue": c[0] ||= (e) => b.value = e,
 			maxlength: r.length,
-			onInput: y,
+			onInput: x,
+			onKeydown: C,
+			onFocus: S,
 			style: {
 				position: "absolute",
 				opacity: "0",
-				"pointer-events": "none"
+				"pointer-events": "none",
+				width: "1px",
+				height: "1px"
 			}
-		}, null, 40, p), [[u, v.value]]), n("div", {
+		}, null, 40, m), [[d, b.value]]), n("div", {
 			class: "otp-box",
-			style: a({ gap: h.gap })
-		}, [(o(!0), t(e, null, c(r.length, (e, n) => (o(), t("div", {
+			style: o({ gap: _.gap })
+		}, [(s(!0), t(e, null, l(r.length, (e, n) => (s(), t("div", {
 			key: n,
-			class: i(["otp-item", [
-				{ [h.activeItemClass]: x(n) },
-				{ [h.hasFilledItemClass]: S(n) },
-				h.itemClass
+			class: a(["otp-item", [
+				{ [_.activeItemClass]: T(n) },
+				{ [_.hasFilledItemClass]: E(n) },
+				_.itemClass
 			]])
-		}, l(v.value[n] || ""), 3))), 128))], 4)]));
+		}, u(b.value[n] || ""), 3))), 128))], 4)]));
 	}
 });
 //#endregion
-export { m as default };
+export { h as default };

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

@@ -1 +1 @@
-.otp-wrapper[data-v-9ff7490d]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-9ff7490d]{display:flex}.otp-item[data-v-9ff7490d]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-9ff7490d]{border-bottom:1px solid #000}
+.otp-wrapper[data-v-0e246228]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-0e246228]{display:flex}.otp-item[data-v-0e246228]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-0e246228]{border-bottom:1px solid #000}

package/dist/es/popup/index.js

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

package/dist/es/popup/popup.js

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

package/dist/es/popup/popup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,51 @@
+import { Teleport as e, Transition as t, createBlock 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, renderSlot as f, useModel as p, withCtx as m, withModifiers as h } from "vue";
+//#region components/popup/popup.vue?vue&type=script&setup=true&lang.ts
+var g = /* @__PURE__ */ s({
+	name: "Popup",
+	__name: "popup",
+	props: /* @__PURE__ */ c({
+		to: { default: "body" },
+		bg: { default: "rgba(0, 0, 0, .5)" },
+		duration: { default: 300 },
+		position: { default: "bottom" },
+		maskClosable: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let c = [
+			"bottom",
+			"left",
+			"right",
+			"top"
+		], g = p(s, "modelValue"), _ = s;
+		function v() {
+			_.maskClosable && (g.value = !1);
+		}
+		return (s, p) => (d(), n(e, { to: _.to }, [o(t, { name: "fade" }, {
+			default: m(() => [g.value ? (d(), i("div", {
+				key: 0,
+				style: u({
+					"background-color": _.bg,
+					"--duration": `${_.duration}ms`
+				}),
+				class: l(["popup-container", [`popup-container-${_.position}`, { "popup-container-bottom": !c.includes(_.position) }]]),
+				onClick: v
+			}, [a("div", {
+				class: "popup-content",
+				onClick: p[0] ||= h(() => {}, ["stop"])
+			}, [f(s.$slots, "default", {}, void 0, !0)])], 6)) : r("", !0)]),
+			_: 3
+		})], 8, ["to"]));
+	}
+});
+//#endregion
+export { g as default };

package/dist/es/popup/style.css

@@ -0,0 +1 @@
+.fade-enter-from[data-v-00d0e4c1],.fade-leave-to[data-v-00d0e4c1]{opacity:0}.popup-container[data-v-00d0e4c1]{z-index:50;transition:opacity var(--duration) ease-in-out;will-change:opacity;position:fixed;inset:0}.popup-content[data-v-00d0e4c1]{transition:transform var(--duration) ease-in-out;will-change:transform;position:absolute}.popup-container-top .popup-content[data-v-00d0e4c1]{top:0;left:0;right:0}.fade-enter-from.popup-container-top .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-top .popup-content[data-v-00d0e4c1]{transform:translateY(-100%)}.popup-container-bottom .popup-content[data-v-00d0e4c1]{bottom:0;left:0;right:0}.fade-enter-from.popup-container-bottom .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-bottom .popup-content[data-v-00d0e4c1]{transform:translateY(100%)}.popup-container-left .popup-content[data-v-00d0e4c1]{top:0;bottom:0;left:0}.fade-enter-from.popup-container-left .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-left .popup-content[data-v-00d0e4c1]{transform:translate(-100%)}.popup-container-right .popup-content[data-v-00d0e4c1]{top:0;bottom:0;right:0}.fade-enter-from.popup-container-right .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-right .popup-content[data-v-00d0e4c1]{transform:translate(100%)}

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=[`maxlength`],a=((e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n})((0,t.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`}},emits:[`update:modelValue`,`complete`],setup(e,{emit:n}){let r=e,a=n,o=(0,t.ref)(null),s=(0,t.ref)(r.modelValue);(0,t.watch)(()=>r.modelValue,e=>{e!==s.value&&(s.value=e)});function c(e){let t=e.target.value;t=t.replace(/\D/g,``),t=t.slice(0,r.length),s.value=t,a(`update:modelValue`,t),t.length===r.length&&a(`complete`,t)}function l(){o.value?.focus()}function u(e){return e===s.value.length}function d(e){return e<s.value.length}return(n,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:l},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:o,"onUpdate:modelValue":a[0]||=e=>s.value=e,maxlength:e.length,onInput:c,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`}},null,40,i),[[t.vModelText,s.value]]),(0,t.createElementVNode)(`div`,{class:`otp-box`,style:(0,t.normalizeStyle)({gap:r.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`,[{[r.activeItemClass]:u(n)},{[r.hasFilledItemClass]:d(n)},r.itemClass]])},(0,t.toDisplayString)(s.value[n]||``),3))),128))],4)]))}}),[[`__scopeId`,`data-v-9ff7490d`]]);a.install=e=>(a.name&&e.component(a.name,a),e);var o=a,s=r({InputOtp:()=>o}),c=e=>(Object.keys(s).forEach(t=>{let n=s[t];n.install&&e.use(n)}),e),l={install:c};e.InputOtp=o,e.default=l,e.install=c});
+(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=[`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`}},emits:[`update:modelValue`,`complete`],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=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(){s.value?.focus()}function p(e){return e===c.value.length}function m(e){return e<c.value.length}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:f},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:`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,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]:p(n)},{[a.hasFilledItemClass]:m(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-0e246228`]]);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}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=[`bottom`,`left`,`right`,`top`],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)({"background-color":i.bg,"--duration":`${i.duration}ms`}),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-00d0e4c1`]]);l.install=e=>(l.name&&e.component(l.name,l),e);var u=l,d=r({InputOtp:()=>c,Popup:()=>u}),f=e=>(Object.keys(d).forEach(t=>{let n=d[t];n.install&&e.use(n)}),e),p={install:f};e.InputOtp=c,e.Popup=u,e.default=p,e.install=f});

package/dist/lib/components.js

@@ -1 +1 @@
-const e=require(`./_virtual/_rolldown/runtime.js`),t=require(`./input-otp/index.js`);var n=e.__exportAll({InputOtp:()=>t.default});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return n}});
+const e=require(`./_virtual/_rolldown/runtime.js`),t=require(`./input-otp/index.js`),n=require(`./popup/index.js`);var r=e.__exportAll({InputOtp:()=>t.default,Popup:()=>n.default});Object.defineProperty(exports,`components_exports`,{enumerable:!0,get:function(){return r}});

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(`./components.js`);var n=e=>(Object.keys(t.components_exports).forEach(n=>{let r=t.components_exports[n];r.install&&e.use(r)}),e),r={install:n};exports.InputOtp=e.default,exports.default=r,exports.install=n;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`./input-otp/index.js`),t=require(`./popup/index.js`),n=require(`./components.js`);require(`./style.css.js`);var r=e=>(Object.keys(n.components_exports).forEach(t=>{let r=n.components_exports[t];r.install&&e.use(r)}),e),i={install:r};exports.InputOtp=e.default,exports.Popup=t.default,exports.default=i,exports.install=r;

package/dist/lib/input-otp/index.js

@@ -1 +1 @@
-const e=require(`./input-otp.js`);e.default.install=t=>(e.default.name&&t.component(e.default.name,e.default),t);var t=e.default;exports.default=t;
+const e=require(`./input-otp.js`);require(`./style.css.js`),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/input-otp/input-otp.js

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

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

@@ -1 +1 @@
-let e=require(`vue`);var t=[`maxlength`],n=(0,e.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`}},emits:[`update:modelValue`,`complete`],setup(n,{emit:r}){let i=n,a=r,o=(0,e.ref)(null),s=(0,e.ref)(i.modelValue);(0,e.watch)(()=>i.modelValue,e=>{e!==s.value&&(s.value=e)});function c(e){let t=e.target.value;t=t.replace(/\D/g,``),t=t.slice(0,i.length),s.value=t,a(`update:modelValue`,t),t.length===i.length&&a(`complete`,t)}function l(){o.value?.focus()}function u(e){return e===s.value.length}function d(e){return e<s.value.length}return(r,a)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:l},[(0,e.withDirectives)((0,e.createElementVNode)(`input`,{inputmode:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:o,"onUpdate:modelValue":a[0]||=e=>s.value=e,maxlength:n.length,onInput:c,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`}},null,40,t),[[e.vModelText,s.value]]),(0,e.createElementVNode)(`div`,{class:`otp-box`,style:(0,e.normalizeStyle)({gap:i.gap})},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(n.length,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:(0,e.normalizeClass)([`otp-item`,[{[i.activeItemClass]:u(n)},{[i.hasFilledItemClass]:d(n)},i.itemClass]])},(0,e.toDisplayString)(s.value[n]||``),3))),128))],4)]))}});exports.default=n;
+let e=require(`vue`);var t=[`maxlength`],n=(0,e.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`}},emits:[`update:modelValue`,`complete`],setup(n,{emit:r}){let i=[`ArrowLeft`,`ArrowRight`,`Home`,`End`],a=n,o=r,s=(0,e.ref)(null),c=(0,e.ref)(a.modelValue);(0,e.watch)(()=>a.modelValue,e=>{e!==c.value&&(c.value=e)});function l(e){let t=e.target.value;t=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,e.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 i.includes(n)&&e.preventDefault()}function f(){s.value?.focus()}function p(e){return e===c.value.length}function m(e){return e<c.value.length}return(r,i)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:f},[(0,e.withDirectives)((0,e.createElementVNode)(`input`,{inputmode:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:s,"onUpdate:modelValue":i[0]||=e=>c.value=e,maxlength:n.length,onInput:l,onKeydown:d,onFocus:u,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`,width:`1px`,height:`1px`}},null,40,t),[[e.vModelText,c.value]]),(0,e.createElementVNode)(`div`,{class:`otp-box`,style:(0,e.normalizeStyle)({gap:a.gap})},[((0,e.openBlock)(!0),(0,e.createElementBlock)(e.Fragment,null,(0,e.renderList)(n.length,(t,n)=>((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:n,class:(0,e.normalizeClass)([`otp-item`,[{[a.activeItemClass]:p(n)},{[a.hasFilledItemClass]:m(n)},a.itemClass]])},(0,e.toDisplayString)(c.value[n]||``),3))),128))],4)]))}});exports.default=n;

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

@@ -1 +1 @@
-.otp-wrapper[data-v-9ff7490d]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-9ff7490d]{display:flex}.otp-item[data-v-9ff7490d]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-9ff7490d]{border-bottom:1px solid #000}
+.otp-wrapper[data-v-0e246228]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-0e246228]{display:flex}.otp-item[data-v-0e246228]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-0e246228]{border-bottom:1px solid #000}

package/dist/lib/popup/index.js

@@ -0,0 +1 @@
+const e=require(`./popup.js`);require(`./style.css.js`),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/popup/popup.js

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

package/dist/lib/popup/popup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+let e=require(`vue`);var t=(0,e.defineComponent)({name:`Popup`,__name:`popup`,props:(0,e.mergeModels)({to:{default:`body`},bg:{default:`rgba(0, 0, 0, .5)`},duration:{default:300},position:{default:`bottom`},maskClosable:{type:Boolean,default:!0}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(t){let n=[`bottom`,`left`,`right`,`top`],r=(0,e.useModel)(t,`modelValue`),i=t;function a(){i.maskClosable&&(r.value=!1)}return(t,o)=>((0,e.openBlock)(),(0,e.createBlock)(e.Teleport,{to:i.to},[(0,e.createVNode)(e.Transition,{name:`fade`},{default:(0,e.withCtx)(()=>[r.value?((0,e.openBlock)(),(0,e.createElementBlock)(`div`,{key:0,style:(0,e.normalizeStyle)({"background-color":i.bg,"--duration":`${i.duration}ms`}),class:(0,e.normalizeClass)([`popup-container`,[`popup-container-${i.position}`,{"popup-container-bottom":!n.includes(i.position)}]]),onClick:a},[(0,e.createElementVNode)(`div`,{class:`popup-content`,onClick:o[0]||=(0,e.withModifiers)(()=>{},[`stop`])},[(0,e.renderSlot)(t.$slots,`default`,{},void 0,!0)])],6)):(0,e.createCommentVNode)(``,!0)]),_:3})],8,[`to`]))}});exports.default=t;

package/dist/lib/popup/style.css

@@ -0,0 +1 @@
+.fade-enter-from[data-v-00d0e4c1],.fade-leave-to[data-v-00d0e4c1]{opacity:0}.popup-container[data-v-00d0e4c1]{z-index:50;transition:opacity var(--duration) ease-in-out;will-change:opacity;position:fixed;inset:0}.popup-content[data-v-00d0e4c1]{transition:transform var(--duration) ease-in-out;will-change:transform;position:absolute}.popup-container-top .popup-content[data-v-00d0e4c1]{top:0;left:0;right:0}.fade-enter-from.popup-container-top .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-top .popup-content[data-v-00d0e4c1]{transform:translateY(-100%)}.popup-container-bottom .popup-content[data-v-00d0e4c1]{bottom:0;left:0;right:0}.fade-enter-from.popup-container-bottom .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-bottom .popup-content[data-v-00d0e4c1]{transform:translateY(100%)}.popup-container-left .popup-content[data-v-00d0e4c1]{top:0;bottom:0;left:0}.fade-enter-from.popup-container-left .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-left .popup-content[data-v-00d0e4c1]{transform:translate(-100%)}.popup-container-right .popup-content[data-v-00d0e4c1]{top:0;bottom:0;right:0}.fade-enter-from.popup-container-right .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-right .popup-content[data-v-00d0e4c1]{transform:translate(100%)}

package/dist/style.css

@@ -1,2 +1,2 @@
-.otp-wrapper[data-v-9ff7490d]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-9ff7490d]{display:flex}.otp-item[data-v-9ff7490d]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-9ff7490d]{border-bottom:1px solid #000}
+.otp-wrapper[data-v-0e246228]{cursor:pointer;width:max-content;position:relative}.otp-box[data-v-0e246228]{display:flex}.otp-item[data-v-0e246228]{border-bottom:1px solid #00000029;justify-content:center;align-items:center;width:60px;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-0e246228]{border-bottom:1px solid #000}.fade-enter-from[data-v-00d0e4c1],.fade-leave-to[data-v-00d0e4c1]{opacity:0}.popup-container[data-v-00d0e4c1]{z-index:50;transition:opacity var(--duration) ease-in-out;will-change:opacity;position:fixed;inset:0}.popup-content[data-v-00d0e4c1]{transition:transform var(--duration) ease-in-out;will-change:transform;position:absolute}.popup-container-top .popup-content[data-v-00d0e4c1]{top:0;left:0;right:0}.fade-enter-from.popup-container-top .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-top .popup-content[data-v-00d0e4c1]{transform:translateY(-100%)}.popup-container-bottom .popup-content[data-v-00d0e4c1]{bottom:0;left:0;right:0}.fade-enter-from.popup-container-bottom .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-bottom .popup-content[data-v-00d0e4c1]{transform:translateY(100%)}.popup-container-left .popup-content[data-v-00d0e4c1]{top:0;bottom:0;left:0}.fade-enter-from.popup-container-left .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-left .popup-content[data-v-00d0e4c1]{transform:translate(-100%)}.popup-container-right .popup-content[data-v-00d0e4c1]{top:0;bottom:0;right:0}.fade-enter-from.popup-container-right .popup-content[data-v-00d0e4c1],.fade-leave-to.popup-container-right .popup-content[data-v-00d0e4c1]{transform:translate(100%)}
 /*$vite$:1*/

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

@@ -1,2 +1,4 @@
 export { default as InputOtp } from './input-otp';
 export type { RoxInputOtpProps } from './input-otp';
+export { default as Popup } from './popup';
+export type { RoxPopupProps } from './popup';

package/dist/types/components/input-otp/style.css.d.ts

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

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

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

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

@@ -0,0 +1,33 @@
+import { RoxPopupProps } from './types';
+declare const model: import('vue').ModelRef<boolean, string, boolean, boolean>;
+type __VLS_Props = RoxPopupProps;
+type __VLS_PublicProps = {
+    modelValue?: typeof model['value'];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    position: "top" | "bottom" | "left" | "right";
+    to: string | import('vue').RendererElement | null;
+    bg: string;
+    duration: number;
+    maskClosable: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,8 @@
+import { RendererElement } from 'vue';
+export interface RoxPopupProps {
+    to?: string | RendererElement | null | undefined;
+    bg?: string;
+    duration?: number;
+    position?: "top" | "bottom" | "left" | "right";
+    maskClosable?: boolean;
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-drowned-fish/rox-v",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "vue ui library",
   "main": "dist/lib/index.js",
   "module": "dist/es/index.js",
@@ -22,11 +22,6 @@
       "require": "./dist/lib/index.js",
       "types": "./dist/types/components/index.d.ts"
     },
-    "./resolver": {
-      "import": "./dist/resolver/index.js",
-      "require": "./dist/resolver/index.cjs.js",
-      "types": "./dist/resolver/resolver.d.ts"
-    },
     "./es/*": {
       "import": "./dist/es/*.js",
       "types": [
@@ -60,14 +55,14 @@
   },
   "sideEffects": [
     "dist/*",
-    "*.css"
+    "*.css",
+    "*.css.ts"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build:es": "vite build --config vite.build.config.ts",
-    "build:lib": "vite build --config vite.umd.config.ts",
-    "build:resolver": "vite build --config vite.resolver.config.ts"
+    "build:lib": "vite build --config vite.umd.config.ts"
   }
 }

package/dist/resolver/index.cjs.js

@@ -1 +0,0 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});function e(e){return e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase()}function t(t={}){let{cjs:n=!1,importStyle:r=!0}=t,i=n?`lib`:`es`;return{type:`component`,resolve:t=>{let n=e(t);return{name:`default`,from:`@a-drowned-fish/rox-v/dist/${i}/${n}/index`,sideEffects:r?`@a-drowned-fish/rox-v/dist/${i}/${n}/style.css`:void 0}}}}exports.RoxVResolver=t,exports.default=t;

package/dist/resolver/index.js

@@ -1,20 +0,0 @@
-//#region components/resolver.ts
-function e(e) {
-	return e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function t(t = {}) {
-	let { cjs: n = !1, importStyle: r = !0 } = t, i = n ? "lib" : "es";
-	return {
-		type: "component",
-		resolve: (t) => {
-			let n = e(t);
-			return {
-				name: "default",
-				from: `@a-drowned-fish/rox-v/dist/${i}/${n}/index`,
-				sideEffects: r ? `@a-drowned-fish/rox-v/dist/${i}/${n}/style.css` : void 0
-			};
-		}
-	};
-}
-//#endregion
-export { t as RoxVResolver, t as default };

package/dist/resolver/resolver.d.ts

@@ -1,15 +0,0 @@
-import { ComponentResolver } from 'unplugin-vue-components/types';
-export interface RoxVResolverOptions {
-    /**
-     * Use CommonJS build (lib) instead of ES modules (es)
-     * @default false
-     */
-    cjs?: boolean;
-    /**
-     * Automatically import component styles
-     * @default true
-     */
-    importStyle?: boolean;
-}
-export declare function RoxVResolver(options?: RoxVResolverOptions): ComponentResolver;
-export default RoxVResolver;