@a-drowned-fish/rox-v 1.0.21 → 1.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +268 -0
- package/dist/es/menu/menu.js +1 -1
- package/dist/es/menu/style.css +1 -1
- package/dist/index.js +1 -1
- package/dist/lib/menu/menu.js +1 -1
- package/dist/lib/menu/style.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,271 @@
|
|
|
1
|
+
# Rox V
|
|
2
|
+
|
|
3
|
+
一个基于 Vue 3 的组件库，支持按需引入和自动导入。
|
|
4
|
+
|
|
5
|
+
## 安装
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @a-drowned-fish/rox-v
|
|
9
|
+
# 或
|
|
10
|
+
yarn add @a-drowned-fish/rox-v
|
|
11
|
+
# 或
|
|
12
|
+
pnpm add @a-drowned-fish/rox-v
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 使用方式
|
|
16
|
+
|
|
17
|
+
### 1. 完整引入
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import { createApp } from "vue";
|
|
21
|
+
import RoxV from "@a-drowned-fish/rox-v";
|
|
22
|
+
import "@a-drowned-fish/rox-v/dist/style.css"; // 如果需要样式
|
|
23
|
+
|
|
24
|
+
const app = createApp(App);
|
|
25
|
+
app.use(RoxV);
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 2. 按需引入（推荐）
|
|
29
|
+
|
|
30
|
+
- 优势: 无需手动引入样式文件 且 按需加载
|
|
31
|
+
|
|
32
|
+
```vue
|
|
33
|
+
<template>
|
|
34
|
+
<Button>点击我</Button>
|
|
35
|
+
<InputOtp />
|
|
36
|
+
</template>
|
|
37
|
+
<script setup lang="ts">
|
|
38
|
+
import { Button, InputOtp } from "@a-drowned-fish/rox-v";
|
|
39
|
+
</script>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## 可用组件
|
|
43
|
+
|
|
44
|
+
### InputOtp - OTP 输入组件
|
|
45
|
+
|
|
46
|
+
一个用于输入一次性密码（OTP）的组件，支持自定义长度、样式和间距。
|
|
47
|
+
|
|
48
|
+
#### 基础用法
|
|
49
|
+
|
|
50
|
+
```vue
|
|
51
|
+
<template>
|
|
52
|
+
<InputOtp v-model="code" />
|
|
53
|
+
</template>
|
|
54
|
+
|
|
55
|
+
<script setup lang="ts">
|
|
56
|
+
import { ref } from "vue";
|
|
57
|
+
|
|
58
|
+
const code = ref("");
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
#### 自定义长度
|
|
63
|
+
|
|
64
|
+
```vue
|
|
65
|
+
<template>
|
|
66
|
+
<!-- 4位验证码 -->
|
|
67
|
+
<InputOtp v-model="code" :length="4" />
|
|
68
|
+
|
|
69
|
+
<!-- 8位验证码 -->
|
|
70
|
+
<InputOtp v-model="code" :length="8" />
|
|
71
|
+
</template>
|
|
72
|
+
|
|
73
|
+
<script setup lang="ts">
|
|
74
|
+
import { ref } from "vue";
|
|
75
|
+
|
|
76
|
+
const code = ref("");
|
|
77
|
+
</script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### 自定义样式
|
|
81
|
+
|
|
82
|
+
```vue
|
|
83
|
+
<template>
|
|
84
|
+
<InputOtp v-model="code" item-class="custom-item" active-item-class="custom-active" gap="15px" />
|
|
85
|
+
</template>
|
|
86
|
+
|
|
87
|
+
<script setup lang="ts">
|
|
88
|
+
import { ref } from "vue";
|
|
89
|
+
|
|
90
|
+
const code = ref("");
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<style scoped>
|
|
94
|
+
.custom-item {
|
|
95
|
+
width: 50px;
|
|
96
|
+
height: 60px;
|
|
97
|
+
border: 2px solid #ddd;
|
|
98
|
+
border-radius: 12px;
|
|
99
|
+
font-size: 24px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.custom-active {
|
|
103
|
+
border-color: #67c23a;
|
|
104
|
+
box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
#### 监听完成事件
|
|
110
|
+
|
|
111
|
+
```vue
|
|
112
|
+
<template>
|
|
113
|
+
<InputOtp v-model="code" @complete="handleComplete" />
|
|
114
|
+
</template>
|
|
115
|
+
|
|
116
|
+
<script setup lang="ts">
|
|
117
|
+
import { ref } from "vue";
|
|
118
|
+
|
|
119
|
+
const code = ref("");
|
|
120
|
+
|
|
121
|
+
const handleComplete = (value: string) => {
|
|
122
|
+
console.log("验证码输入完成:", value);
|
|
123
|
+
// 在这里执行验证逻辑
|
|
124
|
+
};
|
|
125
|
+
</script>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
#### Props
|
|
129
|
+
|
|
130
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
131
|
+
| ------------------ | -------------------------------------------- | -------- | ---------- |
|
|
132
|
+
| length | 输入框数量 | `number` | `6` |
|
|
133
|
+
| itemClass | 每个输入项的自定义类名 | `string` | `''` |
|
|
134
|
+
| activeItemClass | 激活状态输入项的自定义类名 | `string` | `''` |
|
|
135
|
+
| gap | 输入项之间的间距 | `string` | `'10px'` |
|
|
136
|
+
| hasFilledItemClass | 具有内容的输入项的类名[active前面选项的类名] | `string` | `'active'` |
|
|
137
|
+
|
|
138
|
+
#### Events
|
|
139
|
+
|
|
140
|
+
| 事件名 | 说明 | 回调参数 |
|
|
141
|
+
| -------- | ------------------------------ | ----------------- |
|
|
142
|
+
| complete | 输入完成时触发（达到指定长度） | `(value: string)` |
|
|
143
|
+
|
|
144
|
+
### Popup - 弹出层组件
|
|
145
|
+
|
|
146
|
+
一个灵活的弹出层组件，支持从不同方向滑入，带有遮罩层和过渡动画效果。
|
|
147
|
+
|
|
148
|
+
#### 基础用法
|
|
149
|
+
|
|
150
|
+
```vue
|
|
151
|
+
<template>
|
|
152
|
+
<Button @click="show = true">打开弹窗</Button>
|
|
153
|
+
|
|
154
|
+
<Popup v-model="show">
|
|
155
|
+
<div class="popup-content">
|
|
156
|
+
<h3>标题</h3>
|
|
157
|
+
<p>这是弹窗内容</p>
|
|
158
|
+
<Button @click="show = false">关闭</Button>
|
|
159
|
+
</div>
|
|
160
|
+
</Popup>
|
|
161
|
+
</template>
|
|
162
|
+
|
|
163
|
+
<script setup lang="ts">
|
|
164
|
+
import { ref } from "vue";
|
|
165
|
+
import { Button, Popup } from "@a-drowned-fish/rox-v";
|
|
166
|
+
|
|
167
|
+
const show = ref(false);
|
|
168
|
+
</script>
|
|
169
|
+
|
|
170
|
+
<style scoped>
|
|
171
|
+
.popup-content {
|
|
172
|
+
padding: 20px;
|
|
173
|
+
background: white;
|
|
174
|
+
border-radius: 12px 12px 0 0;
|
|
175
|
+
}
|
|
176
|
+
</style>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
#### 不同位置
|
|
180
|
+
|
|
181
|
+
```vue
|
|
182
|
+
<template>
|
|
183
|
+
<!-- 底部弹出（默认） -->
|
|
184
|
+
<Popup v-model="showBottom" position="bottom">
|
|
185
|
+
<div class="content">底部弹窗</div>
|
|
186
|
+
</Popup>
|
|
187
|
+
|
|
188
|
+
<!-- 顶部弹出 -->
|
|
189
|
+
<Popup v-model="showTop" position="top">
|
|
190
|
+
<div class="content">顶部弹窗</div>
|
|
191
|
+
</Popup>
|
|
192
|
+
|
|
193
|
+
<!-- 左侧弹出 -->
|
|
194
|
+
<Popup v-model="showLeft" position="left">
|
|
195
|
+
<div class="content">左侧弹窗</div>
|
|
196
|
+
</Popup>
|
|
197
|
+
|
|
198
|
+
<!-- 右侧弹出 -->
|
|
199
|
+
<Popup v-model="showRight" position="right">
|
|
200
|
+
<div class="content">右侧弹窗</div>
|
|
201
|
+
</Popup>
|
|
202
|
+
</template>
|
|
203
|
+
|
|
204
|
+
<script setup lang="ts">
|
|
205
|
+
import { ref } from "vue";
|
|
206
|
+
import { Popup } from "@a-drowned-fish/rox-v";
|
|
207
|
+
|
|
208
|
+
const showBottom = ref(false);
|
|
209
|
+
const showTop = ref(false);
|
|
210
|
+
const showLeft = ref(false);
|
|
211
|
+
const showRight = ref(false);
|
|
212
|
+
</script>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
#### 自定义遮罩层
|
|
216
|
+
|
|
217
|
+
```vue
|
|
218
|
+
<template>
|
|
219
|
+
<Popup v-model="show" :bg="'rgba(0, 0, 0, 0.7)'" :duration="500" :mask-closable="false">
|
|
220
|
+
<div class="content">
|
|
221
|
+
<p>点击遮罩层不会关闭</p>
|
|
222
|
+
<Button @click="show = false">手动关闭</Button>
|
|
223
|
+
</div>
|
|
224
|
+
</Popup>
|
|
225
|
+
</template>
|
|
226
|
+
|
|
227
|
+
<script setup lang="ts">
|
|
228
|
+
import { ref } from "vue";
|
|
229
|
+
import { Popup, Button } from "@a-drowned-fish/rox-v";
|
|
230
|
+
|
|
231
|
+
const show = ref(false);
|
|
232
|
+
</script>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
#### 自定义挂载节点
|
|
236
|
+
|
|
237
|
+
```vue
|
|
238
|
+
<template>
|
|
239
|
+
<div id="custom-container">
|
|
240
|
+
<Popup v-model="show" to="#custom-container">
|
|
241
|
+
<div class="content">挂载到指定容器</div>
|
|
242
|
+
</Popup>
|
|
243
|
+
</div>
|
|
244
|
+
</template>
|
|
245
|
+
|
|
246
|
+
<script setup lang="ts">
|
|
247
|
+
import { ref } from "vue";
|
|
248
|
+
import { Popup } from "@a-drowned-fish/rox-v";
|
|
249
|
+
|
|
250
|
+
const show = ref(false);
|
|
251
|
+
</script>
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
#### Props
|
|
255
|
+
|
|
256
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
257
|
+
| ------------ | ---------------------------- | ---------------------------------------- | --------------------- |
|
|
258
|
+
| position | 弹出位置 | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` |
|
|
259
|
+
| bg | 遮罩层背景色 | `string` | `'rgba(0, 0, 0, .5)'` |
|
|
260
|
+
| duration | 动画持续时间（毫秒） | `number` | `300` |
|
|
261
|
+
| maskClosable | 点击遮罩层是否关闭 | `boolean` | `true` |
|
|
262
|
+
| to | teleport 的目标节点 | `string` | `'body'` |
|
|
263
|
+
| top | 弹窗顶部距离父元素顶部的距离 | `string` | `'0px'` |
|
|
264
|
+
| left | 弹窗左侧距离父元素左侧的距离 | `string` | `'0px'` |
|
|
265
|
+
| right | 弹窗右侧距离父元素右侧的距离 | `string` | `'0px'` |
|
|
266
|
+
| bottom | 弹窗底部距离父元素底部的距离 | `string` | `'0px'` |
|
|
267
|
+
| zIndex | 弹窗的 z-index 值 | `number` | `50` |
|
|
268
|
+
|
|
1
269
|
|
|
|
2
270
|
|
|
3
271
|
#### Slots
|
package/dist/es/menu/menu.js
CHANGED
|
@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
|
|
|
2
2
|
import t from "./menu.vue_vue_type_script_setup_true_lang.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region components/menu/menu.vue
|
|
5
|
-
var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-
|
|
5
|
+
var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-b7084c6e"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { n as default };
|
package/dist/es/menu/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.menu-box[data-v-
|
|
1
|
+
.menu-box[data-v-b7084c6e]{display:inline-flex;position:relative}.default-box[data-v-b7084c6e]{box-sizing:border-box;border:1px solid #0003;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-from,.fade-leave-to[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-to{opacity:0}.fade-enter-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-active,.fade-leave-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-b7084c6e]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-b7084c6e]{gap:var(--gap);box-sizing:border-box;background-color:#fff;flex-direction:column;width:100%;padding:16px 0;display:flex;position:relative;box-shadow:0 0 16px #0000000f}[data-v-b7084c6e] .menu-item-inner{box-sizing:border-box;cursor:pointer;will-change:background-color;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;height:40px;padding:0 16px;transition:background-color .1s linear;display:flex}[data-v-b7084c6e] .menu-item-inner.active,[data-v-b7084c6e] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-b7084c6e] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-b7084c6e] .sub-menu-box{z-index:99;gap:var(--gap);box-sizing:border-box;background-color:#fff;border-left:1px solid #0000000f;flex-direction:column;padding:16px 8px;display:flex;position:absolute;top:0;left:100%;box-shadow:0 -16px 16px -16px #0000000f,16px 0 16px -16px #0000000f,0 16px 16px -16px #0000000f}[data-v-b7084c6e] .suffix-icon,[data-v-b7084c6e] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`rox-v`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Object.defineProperty,r=(e,t)=>{let r={};for(var i in e)n(r,i,{get:e[i],enumerable:!0});return t||n(r,Symbol.toStringTag,{value:`Module`}),r},i=[`inputmode`,`maxlength`],a=(0,t.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`},type:{default:`number`}},emits:[`update:modelValue`,`complete`,`enter`],setup(e,{emit:n}){let r=[`ArrowLeft`,`ArrowRight`,`Home`,`End`],a=e,o=n,s=(0,t.ref)(null),c=(0,t.ref)(a.modelValue);(0,t.watch)(()=>a.modelValue,e=>{e!==c.value&&(c.value=e)});function l(e){let t=e.target.value;t=a.type===`text`?t.replace(/[^\dA-Za-z]/g,``):t.replace(/\D/g,``),t=t.slice(0,a.length),c.value=t,o(`update:modelValue`,t),t.length===a.length&&o(`complete`,t)}function u(){(0,t.nextTick)(()=>{if(s.value){let e=c.value.length;s.value.setSelectionRange?.(e,e)}})}function d(e){let t=c.value,n=e.key;if(n===`Backspace`||n===`Delete`){if(e.preventDefault(),t.length>0){let e=t.slice(0,-1);c.value=e,o(`update:modelValue`,e),u()}}else r.includes(n)&&e.preventDefault()}function f(){a.modelValue.length>=a.length&&o(`enter`)}function p(){s.value?.focus()}function m(e){return e===c.value.length}function h(e){return e<c.value.length}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:p},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:a.type===`text`?`text`:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:s,"onUpdate:modelValue":r[0]||=e=>c.value=e,maxlength:e.length,onInput:l,onKeydown:d,onKeyup:(0,t.withKeys)(f,[`enter`]),onFocus:u,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`,width:`1px`,height:`1px`}},null,40,i),[[t.vModelText,c.value]]),(0,t.createElementVNode)(`div`,{class:`otp-box`,style:(0,t.normalizeStyle)({gap:a.gap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.length,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:(0,t.normalizeClass)([`otp-item`,[{[a.activeItemClass]:m(n)},{[a.hasFilledItemClass]:h(n)},a.itemClass]])},(0,t.toDisplayString)(c.value[n]||``),3))),128))],4)]))}}),o=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},s=o(a,[[`__scopeId`,`data-v-e8da3c38`]]);s.install=e=>(s.name&&e.component(s.name,s),e);var c=s,l=o((0,t.defineComponent)({name:`Popup`,__name:`popup`,props:(0,t.mergeModels)({to:{default:`body`},bg:{default:`rgba(0, 0, 0, .5)`},duration:{default:300},position:{default:`bottom`},maskClosable:{type:Boolean,default:!0},top:{default:`0px`},left:{default:`0px`},right:{default:`0px`},bottom:{default:`0px`},zIndex:{default:50}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=[`bottom`,`left`,`right`,`top`,`center`],r=(0,t.useModel)(e,`modelValue`),i=e;function a(){i.maskClosable&&(r.value=!1)}return(e,o)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.to},[(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[r.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,style:(0,t.normalizeStyle)({"--duration":`${i.duration}ms`,backgroundColor:i.bg,top:i.top,left:i.left,right:i.right,bottom:i.bottom,zIndex:i.zIndex}),class:(0,t.normalizeClass)([`popup-container`,[`popup-container-${i.position}`,{"popup-container-bottom":!n.includes(i.position)}]]),onClick:a},[(0,t.createElementVNode)(`div`,{class:`popup-content`,onClick:o[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)])],6)):(0,t.createCommentVNode)(``,!0)]),_:3})],8,[`to`]))}}),[[`__scopeId`,`data-v-f6d3cf05`]]);l.install=e=>(l.name&&e.component(l.name,l),e);var u=l,d=[`type`],f=o((0,t.defineComponent)({name:`Button`,__name:`button`,props:{padding:{default:`8px 16px`},block:{type:Boolean,default:!1},bg:{default:`transparent`},border:{default:`1px solid #1A171B`},radius:{default:`0`},disabled:{type:Boolean,default:!1},type:{default:`button`},disabledBg:{default:`rgba(26,23,27,0.16)`},enableDisabledClick:{type:Boolean,default:!1}},emits:[`click`],setup(e,{emit:n}){let r=n,i=e,a=e=>{(!i.disabled||i.enableDisabledClick)&&r(`click`,e)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{onClick:a,class:(0,t.normalizeClass)([`button-container`,{block:i.block,disabled:i.disabled}]),type:i.type,style:(0,t.normalizeStyle)({padding:i.padding,border:i.border,borderRadius:i.radius,"--bg":i.bg,"--disabled-bg":i.disabledBg})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],14,d))}}),[[`__scopeId`,`data-v-f38282d0`]]);f.install=e=>(f.name&&e.component(f.name,f),e);var p=f,m=o((0,t.defineComponent)({name:`Collapse`,__name:`collapse`,props:{open:{type:Boolean,default:!1},maxHeight:{default:`100dvh`},duration:{default:300}},setup(e){let n=e;return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{name:`collapse`},{default:(0,t.withCtx)(()=>[n.open?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`collapse-content`,style:(0,t.normalizeStyle)({"--max-height":n.maxHeight,"--duration":n.duration+`ms`})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],4)):(0,t.createCommentVNode)(``,!0)]),_:3}))}}),[[`__scopeId`,`data-v-cc071022`]]);m.install=e=>(m.name&&e.component(m.name,m),e);var h=m,g={class:`input-box`},_=[`type`,`placeholder`],v=[`src`],y=o((0,t.defineComponent)({name:`Input`,__name:`input`,props:(0,t.mergeModels)({placeholder:{default:``},type:{default:`text`},iconVisible:{type:Boolean,default:!1},icon:{default:``}},{modelValue:{type:String,default:``},modelModifiers:{}}),emits:(0,t.mergeModels)([`click`,`enter`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useTemplateRef)(`input`),a=(0,t.useModel)(e,`modelValue`),o=e,s=()=>{r(`click`),i.value?.focus?.(),setTimeout(()=>{let e=a.value.length;i.value?.setSelectionRange?.(e,e)},0)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{type:o.type,"onUpdate:modelValue":n[0]||=e=>a.value=e,ref:`input`,placeholder:o.placeholder,onKeyup:n[1]||=(0,t.withKeys)(t=>e.$emit(`enter`),[`enter`])},null,40,_),[[t.vModelDynamic,a.value]]),o.icon?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:o.icon,alt:`icon`,onClick:s},null,8,v)),[[t.vShow,o.iconVisible]]):(0,t.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-56cf72b9`]]);y.install=e=>(y.name&&e.component(y.name,y),e);var b=y,x={class:`menu-label`},S=[`src`],C=[`src`],w=(0,t.defineComponent)({name:`MenuItem`,__name:`menu-item`,props:(0,t.mergeModels)({checkedIcon:{},checkedIconClass:{},suffixIcon:{},suffixIconClass:{},itemContainerClass:{},itemGap:{},activeItemClass:{},subMenuContainerClass:{},deep:{},item:{},parentValue:{}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=e,i=(0,t.ref)(!1),a=()=>i.value=!0,o=()=>i.value=!1,s=()=>{r.item.children?.length||(n.value=[...r.parentValue,r.item.value])};return(c,l)=>{let u=(0,t.resolveComponent)(`MenuItem`,!0);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{onMouseenter:a,onMouseleave:o,style:{padding:`0 8px`}},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-inner`,[r.itemContainerClass,{active:n.value?.[r.deep]===e.item.value},{[r.activeItemClass]:n.value?.[r.deep]===e.item.value}]]),onClick:s},[(0,t.createElementVNode)(`div`,x,(0,t.toDisplayString)(e.item.label),1),e.suffixIcon&&e.item.children?.length?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:r.suffixIcon,class:(0,t.normalizeClass)([`suffix-icon`,r.suffixIconClass]),alt:`suffix-icon`},null,10,S)):(0,t.createCommentVNode)(``,!0),e.checkedIcon&&!e.item.children?.length&&n.value?.[r.deep]===e.item.value?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:1,src:r.checkedIcon,class:(0,t.normalizeClass)([`checked-icon`,r.checkedIconClass]),alt:`checked-icon`},null,10,C)):(0,t.createCommentVNode)(``,!0)],2),e.item.children?.length?((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{key:0,name:`fade`},{default:(0,t.withCtx)(()=>[i.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`sub-menu-box list-box`,e.subMenuContainerClass])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.item.children,(i,a)=>((0,t.openBlock)(),(0,t.createBlock)(u,{key:a,modelValue:n.value,"onUpdate:modelValue":l[0]||=e=>n.value=e,item:i,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":e.itemGap,deep:r.deep+1,"active-item-class":r.activeItemClass,"parent-value":r.parentValue.concat(e.item.value)},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`deep`,`active-item-class`,`parent-value`]))),128))],2)):(0,t.createCommentVNode)(``,!0)]),_:1})):(0,t.createCommentVNode)(``,!0)],32)}}}),T={key:0,class:`menu-list-box`},E=o((0,t.defineComponent)({name:`Menu`,__name:`menu`,props:(0,t.mergeModels)({duration:{default:100},items:{default:()=>[]},suffixIcon:{},suffixIconClass:{},checkedIcon:{},checkedIconClass:{},listContainerClass:{default:``},subMenuContainerClass:{default:``},defaultContainerClass:{default:``},itemContainerClass:{},itemGap:{default:`4px`},activeItemClass:{default:``}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`modelValue`),a=e,o=(0,t.ref)(!1),s=()=>o.value=!0,c=()=>o.value=!1;return(0,t.watch)(i,()=>{o.value=!1}),(0,t.watch)(o,e=>{r(e?`open`:`close`)}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`menu-box`,style:(0,t.normalizeStyle)({"--duration":a.duration+`ms`})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`default-box`,a.defaultContainerClass]),onMouseenter:s,onMouseleave:c},[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0),(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[o.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,T,[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-box`,a.listContainerClass]),style:(0,t.normalizeStyle)({"--gap":a.itemGap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,o)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:o,class:`menu-item`},[(0,t.createVNode)(w,{modelValue:i.value,"onUpdate:modelValue":r[0]||=e=>i.value=e,item:n,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":a.itemGap,deep:0,"active-item-class":a.activeItemClass,"sub-menu-container-class":a.subMenuContainerClass,"parent-value":[]},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`active-item-class`,`sub-menu-container-class`])]))),128))],6)])):(0,t.createCommentVNode)(``,!0)]),_:1})],34)],4))}}),[[`__scopeId`,`data-v-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});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`rox-v`]={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=Object.defineProperty,r=(e,t)=>{let r={};for(var i in e)n(r,i,{get:e[i],enumerable:!0});return t||n(r,Symbol.toStringTag,{value:`Module`}),r},i=[`inputmode`,`maxlength`],a=(0,t.defineComponent)({name:`InputOtp`,__name:`input-otp`,props:{modelValue:{default:``},length:{default:6},itemClass:{default:``},activeItemClass:{default:``},gap:{default:`10px`},hasFilledItemClass:{default:`active`},type:{default:`number`}},emits:[`update:modelValue`,`complete`,`enter`],setup(e,{emit:n}){let r=[`ArrowLeft`,`ArrowRight`,`Home`,`End`],a=e,o=n,s=(0,t.ref)(null),c=(0,t.ref)(a.modelValue);(0,t.watch)(()=>a.modelValue,e=>{e!==c.value&&(c.value=e)});function l(e){let t=e.target.value;t=a.type===`text`?t.replace(/[^\dA-Za-z]/g,``):t.replace(/\D/g,``),t=t.slice(0,a.length),c.value=t,o(`update:modelValue`,t),t.length===a.length&&o(`complete`,t)}function u(){(0,t.nextTick)(()=>{if(s.value){let e=c.value.length;s.value.setSelectionRange?.(e,e)}})}function d(e){let t=c.value,n=e.key;if(n===`Backspace`||n===`Delete`){if(e.preventDefault(),t.length>0){let e=t.slice(0,-1);c.value=e,o(`update:modelValue`,e),u()}}else r.includes(n)&&e.preventDefault()}function f(){a.modelValue.length>=a.length&&o(`enter`)}function p(){s.value?.focus()}function m(e){return e===c.value.length}function h(e){return e<c.value.length}return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`otp-wrapper`,onClick:p},[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{inputmode:a.type===`text`?`text`:`numeric`,autocomplete:`one-time-code`,ref_key:`inputRef`,ref:s,"onUpdate:modelValue":r[0]||=e=>c.value=e,maxlength:e.length,onInput:l,onKeydown:d,onKeyup:(0,t.withKeys)(f,[`enter`]),onFocus:u,style:{position:`absolute`,opacity:`0`,"pointer-events":`none`,width:`1px`,height:`1px`}},null,40,i),[[t.vModelText,c.value]]),(0,t.createElementVNode)(`div`,{class:`otp-box`,style:(0,t.normalizeStyle)({gap:a.gap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.length,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:n,class:(0,t.normalizeClass)([`otp-item`,[{[a.activeItemClass]:m(n)},{[a.hasFilledItemClass]:h(n)},a.itemClass]])},(0,t.toDisplayString)(c.value[n]||``),3))),128))],4)]))}}),o=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},s=o(a,[[`__scopeId`,`data-v-e8da3c38`]]);s.install=e=>(s.name&&e.component(s.name,s),e);var c=s,l=o((0,t.defineComponent)({name:`Popup`,__name:`popup`,props:(0,t.mergeModels)({to:{default:`body`},bg:{default:`rgba(0, 0, 0, .5)`},duration:{default:300},position:{default:`bottom`},maskClosable:{type:Boolean,default:!0},top:{default:`0px`},left:{default:`0px`},right:{default:`0px`},bottom:{default:`0px`},zIndex:{default:50}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=[`bottom`,`left`,`right`,`top`,`center`],r=(0,t.useModel)(e,`modelValue`),i=e;function a(){i.maskClosable&&(r.value=!1)}return(e,o)=>((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:i.to},[(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[r.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,style:(0,t.normalizeStyle)({"--duration":`${i.duration}ms`,backgroundColor:i.bg,top:i.top,left:i.left,right:i.right,bottom:i.bottom,zIndex:i.zIndex}),class:(0,t.normalizeClass)([`popup-container`,[`popup-container-${i.position}`,{"popup-container-bottom":!n.includes(i.position)}]]),onClick:a},[(0,t.createElementVNode)(`div`,{class:`popup-content`,onClick:o[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)])],6)):(0,t.createCommentVNode)(``,!0)]),_:3})],8,[`to`]))}}),[[`__scopeId`,`data-v-f6d3cf05`]]);l.install=e=>(l.name&&e.component(l.name,l),e);var u=l,d=[`type`],f=o((0,t.defineComponent)({name:`Button`,__name:`button`,props:{padding:{default:`8px 16px`},block:{type:Boolean,default:!1},bg:{default:`transparent`},border:{default:`1px solid #1A171B`},radius:{default:`0`},disabled:{type:Boolean,default:!1},type:{default:`button`},disabledBg:{default:`rgba(26,23,27,0.16)`},enableDisabledClick:{type:Boolean,default:!1}},emits:[`click`],setup(e,{emit:n}){let r=n,i=e,a=e=>{(!i.disabled||i.enableDisabledClick)&&r(`click`,e)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`button`,{onClick:a,class:(0,t.normalizeClass)([`button-container`,{block:i.block,disabled:i.disabled}]),type:i.type,style:(0,t.normalizeStyle)({padding:i.padding,border:i.border,borderRadius:i.radius,"--bg":i.bg,"--disabled-bg":i.disabledBg})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],14,d))}}),[[`__scopeId`,`data-v-f38282d0`]]);f.install=e=>(f.name&&e.component(f.name,f),e);var p=f,m=o((0,t.defineComponent)({name:`Collapse`,__name:`collapse`,props:{open:{type:Boolean,default:!1},maxHeight:{default:`100dvh`},duration:{default:300}},setup(e){let n=e;return(e,r)=>((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{name:`collapse`},{default:(0,t.withCtx)(()=>[n.open?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`collapse-content`,style:(0,t.normalizeStyle)({"--max-height":n.maxHeight,"--duration":n.duration+`ms`})},[(0,t.renderSlot)(e.$slots,`default`,{},void 0,!0)],4)):(0,t.createCommentVNode)(``,!0)]),_:3}))}}),[[`__scopeId`,`data-v-cc071022`]]);m.install=e=>(m.name&&e.component(m.name,m),e);var h=m,g={class:`input-box`},_=[`type`,`placeholder`],v=[`src`],y=o((0,t.defineComponent)({name:`Input`,__name:`input`,props:(0,t.mergeModels)({placeholder:{default:``},type:{default:`text`},iconVisible:{type:Boolean,default:!1},icon:{default:``}},{modelValue:{type:String,default:``},modelModifiers:{}}),emits:(0,t.mergeModels)([`click`,`enter`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useTemplateRef)(`input`),a=(0,t.useModel)(e,`modelValue`),o=e,s=()=>{r(`click`),i.value?.focus?.(),setTimeout(()=>{let e=a.value.length;i.value?.setSelectionRange?.(e,e)},0)};return(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.withDirectives)((0,t.createElementVNode)(`input`,{type:o.type,"onUpdate:modelValue":n[0]||=e=>a.value=e,ref:`input`,placeholder:o.placeholder,onKeyup:n[1]||=(0,t.withKeys)(t=>e.$emit(`enter`),[`enter`])},null,40,_),[[t.vModelDynamic,a.value]]),o.icon?(0,t.withDirectives)(((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:o.icon,alt:`icon`,onClick:s},null,8,v)),[[t.vShow,o.iconVisible]]):(0,t.createCommentVNode)(``,!0)]))}}),[[`__scopeId`,`data-v-56cf72b9`]]);y.install=e=>(y.name&&e.component(y.name,y),e);var b=y,x={class:`menu-label`},S=[`src`],C=[`src`],w=(0,t.defineComponent)({name:`MenuItem`,__name:`menu-item`,props:(0,t.mergeModels)({checkedIcon:{},checkedIconClass:{},suffixIcon:{},suffixIconClass:{},itemContainerClass:{},itemGap:{},activeItemClass:{},subMenuContainerClass:{},deep:{},item:{},parentValue:{}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let n=(0,t.useModel)(e,`modelValue`),r=e,i=(0,t.ref)(!1),a=()=>i.value=!0,o=()=>i.value=!1,s=()=>{r.item.children?.length||(n.value=[...r.parentValue,r.item.value])};return(c,l)=>{let u=(0,t.resolveComponent)(`MenuItem`,!0);return(0,t.openBlock)(),(0,t.createElementBlock)(`div`,{onMouseenter:a,onMouseleave:o,style:{padding:`0 8px`}},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-inner`,[r.itemContainerClass,{active:n.value?.[r.deep]===e.item.value},{[r.activeItemClass]:n.value?.[r.deep]===e.item.value}]]),onClick:s},[(0,t.createElementVNode)(`div`,x,(0,t.toDisplayString)(e.item.label),1),e.suffixIcon&&e.item.children?.length?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,src:r.suffixIcon,class:(0,t.normalizeClass)([`suffix-icon`,r.suffixIconClass]),alt:`suffix-icon`},null,10,S)):(0,t.createCommentVNode)(``,!0),e.checkedIcon&&!e.item.children?.length&&n.value?.[r.deep]===e.item.value?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:1,src:r.checkedIcon,class:(0,t.normalizeClass)([`checked-icon`,r.checkedIconClass]),alt:`checked-icon`},null,10,C)):(0,t.createCommentVNode)(``,!0)],2),e.item.children?.length?((0,t.openBlock)(),(0,t.createBlock)(t.Transition,{key:0,name:`fade`},{default:(0,t.withCtx)(()=>[i.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:(0,t.normalizeClass)([`sub-menu-box list-box`,e.subMenuContainerClass])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.item.children,(i,a)=>((0,t.openBlock)(),(0,t.createBlock)(u,{key:a,modelValue:n.value,"onUpdate:modelValue":l[0]||=e=>n.value=e,item:i,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":e.itemGap,deep:r.deep+1,"active-item-class":r.activeItemClass,"parent-value":r.parentValue.concat(e.item.value)},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`deep`,`active-item-class`,`parent-value`]))),128))],2)):(0,t.createCommentVNode)(``,!0)]),_:1})):(0,t.createCommentVNode)(``,!0)],32)}}}),T={key:0,class:`menu-list-box`},E=o((0,t.defineComponent)({name:`Menu`,__name:`menu`,props:(0,t.mergeModels)({duration:{default:100},items:{default:()=>[]},suffixIcon:{},suffixIconClass:{},checkedIcon:{},checkedIconClass:{},listContainerClass:{default:``},subMenuContainerClass:{default:``},defaultContainerClass:{default:``},itemContainerClass:{},itemGap:{default:`4px`},activeItemClass:{default:``}},{modelValue:{type:Array,default:()=>[]},modelModifiers:{}}),emits:(0,t.mergeModels)([`open`,`close`],[`update:modelValue`]),setup(e,{emit:n}){let r=n,i=(0,t.useModel)(e,`modelValue`),a=e,o=(0,t.ref)(!1),s=()=>o.value=!0,c=()=>o.value=!1;return(0,t.watch)(i,()=>{o.value=!1}),(0,t.watch)(o,e=>{r(e?`open`:`close`)}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`menu-box`,style:(0,t.normalizeStyle)({"--duration":a.duration+`ms`})},[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`default-box`,a.defaultContainerClass]),onMouseenter:s,onMouseleave:c},[(0,t.renderSlot)(n.$slots,`default`,{},void 0,!0),(0,t.createVNode)(t.Transition,{name:`fade`},{default:(0,t.withCtx)(()=>[o.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,T,[(0,t.createElementVNode)(`div`,{class:(0,t.normalizeClass)([`menu-item-box`,a.listContainerClass]),style:(0,t.normalizeStyle)({"--gap":a.itemGap})},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(a.items,(n,o)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:o,class:`menu-item`},[(0,t.createVNode)(w,{modelValue:i.value,"onUpdate:modelValue":r[0]||=e=>i.value=e,item:n,"suffix-icon":e.suffixIcon,"suffix-icon-class":e.suffixIconClass,"checked-icon":e.checkedIcon,"checked-icon-class":e.checkedIconClass,"item-container-class":e.itemContainerClass,"item-gap":a.itemGap,deep:0,"active-item-class":a.activeItemClass,"sub-menu-container-class":a.subMenuContainerClass,"parent-value":[]},null,8,[`modelValue`,`item`,`suffix-icon`,`suffix-icon-class`,`checked-icon`,`checked-icon-class`,`item-container-class`,`item-gap`,`active-item-class`,`sub-menu-container-class`])]))),128))],6)])):(0,t.createCommentVNode)(``,!0)]),_:1})],34)],4))}}),[[`__scopeId`,`data-v-b7084c6e`]]);E.install=e=>(E.name&&e.component(E.name,E),e);var D=E,O=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/menu/menu.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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-b7084c6e`]]);exports.default=n;
|
package/dist/lib/menu/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.menu-box[data-v-
|
|
1
|
+
.menu-box[data-v-b7084c6e]{display:inline-flex;position:relative}.default-box[data-v-b7084c6e]{box-sizing:border-box;border:1px solid #0003;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-from,.fade-leave-to[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-to{opacity:0}.fade-enter-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-active,.fade-leave-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-b7084c6e]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-b7084c6e]{gap:var(--gap);box-sizing:border-box;background-color:#fff;flex-direction:column;width:100%;padding:16px 0;display:flex;position:relative;box-shadow:0 0 16px #0000000f}[data-v-b7084c6e] .menu-item-inner{box-sizing:border-box;cursor:pointer;will-change:background-color;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;height:40px;padding:0 16px;transition:background-color .1s linear;display:flex}[data-v-b7084c6e] .menu-item-inner.active,[data-v-b7084c6e] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-b7084c6e] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-b7084c6e] .sub-menu-box{z-index:99;gap:var(--gap);box-sizing:border-box;background-color:#fff;border-left:1px solid #0000000f;flex-direction:column;padding:16px 8px;display:flex;position:absolute;top:0;left:100%;box-shadow:0 -16px 16px -16px #0000000f,16px 0 16px -16px #0000000f,0 16px 16px -16px #0000000f}[data-v-b7084c6e] .suffix-icon,[data-v-b7084c6e] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.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-
|
|
1
|
+
.otp-wrapper[data-v-e8da3c38]{cursor:pointer;width:400px;max-width:100%;position:relative}.otp-box[data-v-e8da3c38]{width:100%;display:flex}.otp-item[data-v-e8da3c38]{border-bottom:1px solid #00000029;flex:1;justify-content:center;align-items:center;height:60px;transition:all .2s;display:flex}.otp-item.active[data-v-e8da3c38]{border-bottom:1px solid #000}.fade-enter-from[data-v-f6d3cf05],.fade-leave-to[data-v-f6d3cf05]{opacity:0}.popup-container[data-v-f6d3cf05]{transition:opacity var(--duration) ease-in-out;will-change:opacity;position:fixed}.popup-content[data-v-f6d3cf05]{transition:transform var(--duration) ease-in-out;will-change:transform;position:absolute}.popup-container-top .popup-content[data-v-f6d3cf05]{top:0;left:0;right:0}.fade-enter-from.popup-container-top .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-top .popup-content[data-v-f6d3cf05]{transform:translateY(-100%)}.popup-container-bottom .popup-content[data-v-f6d3cf05]{bottom:0;left:0;right:0}.fade-enter-from.popup-container-bottom .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-bottom .popup-content[data-v-f6d3cf05]{transform:translateY(100%)}.popup-container-left .popup-content[data-v-f6d3cf05]{top:0;bottom:0;left:0}.fade-enter-from.popup-container-left .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-left .popup-content[data-v-f6d3cf05]{transform:translate(-100%)}.popup-container-right .popup-content[data-v-f6d3cf05]{top:0;bottom:0;right:0}.fade-enter-from.popup-container-right .popup-content[data-v-f6d3cf05],.fade-leave-to.popup-container-right .popup-content[data-v-f6d3cf05]{transform:translate(100%)}.popup-container-center .popup-content[data-v-f6d3cf05]{will-change:auto;transform-origin:50%;transition:none;top:50%;left:50%;transform:translate(-50%,-50%)}.button-container[data-v-f38282d0]{background-color:var(--bg);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.button-container[data-v-f38282d0]:focus{outline:none}.button-container.block[data-v-f38282d0]{width:100%;display:block}.button-container.disabled[data-v-f38282d0]{background-color:var(--disabled-bg);border-color:#0000!important}.collapse-content[data-v-cc071022]{width:max-content}.collapse-enter-from[data-v-cc071022],.collapse-leave-to[data-v-cc071022]{max-height:0!important}.collapse-enter-active[data-v-cc071022],.collapse-leave-active[data-v-cc071022]{max-height:var(--max-height);transition:max-height var(--duration) ease-in-out;overflow:hidden}.input-box[data-v-56cf72b9]{will-change:border-color;box-sizing:border-box;border-bottom:1px solid #00000029;align-items:center;gap:16px;height:60px;padding:16px 0;transition:border-color .2s ease-in-out;display:flex}.input-box[data-v-56cf72b9]:focus-within{border-color:#000}.input-box input[data-v-56cf72b9]{width:100%;height:100%;font-size:inherit;border:none;outline:none}input[data-v-56cf72b9]::-webkit-input-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-56cf72b9]::-moz-placeholder{color:var(--input-placeholder-color,#999)}input[data-v-56cf72b9]:-ms-placeholder-shown{color:var(--input-placeholder-color,#999)}.input-box img[data-v-56cf72b9]{-o-object-fit:contain;object-fit:contain;cursor:pointer;width:24px;height:24px}.menu-box[data-v-b7084c6e]{display:inline-flex;position:relative}.default-box[data-v-b7084c6e]{box-sizing:border-box;border:1px solid #0003;align-items:center;min-width:240px;min-height:30px;padding:8px 16px;display:flex}.fade-enter-from[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-from,.fade-leave-to[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-to{opacity:0}.fade-enter-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-enter-active,.fade-leave-active[data-v-b7084c6e],[data-v-b7084c6e] .fade-leave-active{transition:opacity var(--duration) ease-in-out}.menu-list-box[data-v-b7084c6e]{z-index:99;box-sizing:border-box;width:100%;padding-top:8px;position:absolute;top:100%;left:0}.menu-item-box[data-v-b7084c6e]{gap:var(--gap);box-sizing:border-box;background-color:#fff;flex-direction:column;width:100%;padding:16px 0;display:flex;position:relative;box-shadow:0 0 16px #0000000f}[data-v-b7084c6e] .menu-item-inner{box-sizing:border-box;cursor:pointer;will-change:background-color;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;width:100%;height:40px;padding:0 16px;transition:background-color .1s linear;display:flex}[data-v-b7084c6e] .menu-item-inner.active,[data-v-b7084c6e] .menu-item-inner:hover{background-color:#f8f9f9}[data-v-b7084c6e] .menu-label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}[data-v-b7084c6e] .sub-menu-box{z-index:99;gap:var(--gap);box-sizing:border-box;background-color:#fff;border-left:1px solid #0000000f;flex-direction:column;padding:16px 8px;display:flex;position:absolute;top:0;left:100%;box-shadow:0 -16px 16px -16px #0000000f,16px 0 16px -16px #0000000f,0 16px 16px -16px #0000000f}[data-v-b7084c6e] .suffix-icon,[data-v-b7084c6e] .checked-icon{-o-object-fit:contain;object-fit:contain;width:18px;height:18px}:-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)}
|
|
2
2
|
/*$vite$:1*/
|