{"_id":"xelf-ui-plus","_rev":"45-31b6e48739b5de1519e66a3cee3403e9","time":{"created":"2024-04-06T23:58:38.390Z","0.1.0":"2022-12-11T08:56:45.452Z","modified":"2024-04-07T01:40:59.116Z","0.1.1":"2022-12-27T02:07:43.493Z","0.1.2":"2023-01-31T00:13:26.140Z","0.1.3":"2023-01-31T03:22:54.722Z","0.1.4":"2023-02-01T01:55:37.804Z","0.1.5":"2023-02-01T02:07:50.630Z","0.1.6":"2023-02-07T08:42:18.725Z","0.1.8":"2023-02-15T08:40:09.622Z","0.1.10":"2023-02-17T06:55:36.277Z","0.1.11":"2023-02-23T01:27:36.399Z","0.1.12":"2023-04-21T09:00:39.579Z","0.1.13":"2023-04-21T09:08:32.146Z","0.2.1":"2023-04-22T09:38:53.191Z","0.2.2":"2023-04-22T09:40:47.012Z","0.2.3":"2023-04-23T00:31:13.238Z","0.2.5":"2023-04-23T01:07:11.859Z","0.2.6":"2023-04-23T02:17:33.135Z","0.2.8":"2023-04-23T02:22:39.511Z","0.2.9":"2023-04-23T02:26:56.268Z","0.3.0":"2023-04-23T02:33:11.337Z","0.3.1":"2023-04-23T02:43:21.504Z","0.3.2":"2023-04-23T03:10:29.346Z","1.0.0":"2024-04-06T23:58:38.588Z","1.0.1":"2024-04-07T01:40:58.940Z"},"name":"xelf-ui-plus","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"xelf-ui-plus","version":"1.0.0","description":"a Vue ui library for vue 3","main":"dist/xelf-ui.umd.js","style":"theme/index.scss","typings":"types/index.d.ts","license":"MIT","scripts":{"dev":"vite","build":"run-p type-check build-only","preview":"vite preview","test:unit":"vitest --environment jsdom --root src/","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build:lib":"vite build","dts":"vue-tsc --declaration --emitDeclarationOnly"},"dependencies":{},"peerDependencies":{"moment":"^2.29.4","xelf-utils":"^0.1.0","vue":"^3.2.45"},"devDependencies":{"@rushstack/eslint-patch":"^1.1.4","@types/jsdom":"^20.0.1","@types/node":"^18.11.9","@vitejs/plugin-vue":"^3.2.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.0","@vue/test-utils":"^2.2.4","@vue/tsconfig":"^0.1.3","eslint":"^8.22.0","eslint-plugin-vue":"^9.3.0","jsdom":"^20.0.3","moment":"^2.29.4","npm-run-all":"^4.1.5","pinia":"^2.0.26","pinia-use-persist":"0.0.21","prettier":"^2.7.1","prismjs":"^1.29.0","sass":"^1.58.2","typescript":"~4.7.4","vite":"^3.2.4","vite-plugin-html":"^3.2.0","vitest":"^0.25.3","vue":"^3.2.45","vue-router":"^4.1.6","vue-tsc":"^1.0.18","xelf-utils":"^0.1.0"},"_id":"xelf-ui-plus@1.0.0","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-FgmjlkwtlBZ4S9HBHziDqxGKi6dddlvEncdNdzshJPtuW/P82VtWFqVDelxcibM/S88T1tqXkXZ9+Ys9UxSarg==","shasum":"f5714cf0f53ca91868d09d1c3742412a16820436","tarball":"https://registry.npmjs.org/xelf-ui-plus/-/xelf-ui-plus-1.0.0.tgz","fileCount":14,"unpackedSize":392214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICN+37Mb2y3xNRNd7pcqHAN52TV+TBehYMKkJxvaoQzRAiBqvlLAb017+tYPxRRVR8bWxO0oW5xP9tVS37lbwED0Mg=="}]},"_npmUser":{"name":"wangyq2022","email":"wangyq.sc@qq.com"},"directories":{},"maintainers":[{"name":"wangyq2022","email":"wangyq.sc@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xelf-ui-plus_1.0.0_1712447918391_0.6529840572874066"},"_hasShrinkwrap":false},"1.0.1":{"name":"xelf-ui-plus","version":"1.0.1","description":"a Vue ui library for vue 3","main":"dist/xelf-ui.umd.js","style":"theme/index.scss","typings":"types/index.d.ts","license":"MIT","scripts":{"dev":"vite","build":"run-p type-check build-only","preview":"vite preview","test:unit":"vitest --environment jsdom --root src/","build-only":"vite build","type-check":"vue-tsc --noEmit -p tsconfig.vitest.json --composite false","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","build:lib":"vite build","dts":"vue-tsc --declaration --emitDeclarationOnly"},"dependencies":{},"peerDependencies":{"moment":"^2.29.4","xelf-utils":"^0.1.0","vue":"^3.2.45"},"devDependencies":{"@rushstack/eslint-patch":"^1.1.4","@types/jsdom":"^20.0.1","@types/node":"^18.11.9","@vitejs/plugin-vue":"^3.2.0","@vue/eslint-config-prettier":"^7.0.0","@vue/eslint-config-typescript":"^11.0.0","@vue/test-utils":"^2.2.4","@vue/tsconfig":"^0.1.3","eslint":"^8.22.0","eslint-plugin-vue":"^9.3.0","jsdom":"^20.0.3","moment":"^2.29.4","npm-run-all":"^4.1.5","pinia":"^2.0.26","pinia-use-persist":"0.0.21","prettier":"^2.7.1","prismjs":"^1.29.0","sass":"^1.58.2","typescript":"~4.7.4","vite":"^3.2.4","vite-plugin-html":"^3.2.0","vitest":"^0.25.3","vue":"^3.2.45","vue-router":"^4.1.6","vue-tsc":"^1.0.18","xelf-utils":"^0.1.0"},"_id":"xelf-ui-plus@1.0.1","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-wKsQD2k6tpdW69AEBogtwU6gaSRC3cEaO3RMuwC45D+2DFjo+Am5HecG2Pn8PgHElhShkCdCj9Jjb6igUVSE8w==","shasum":"5a21e98b644d8bb257790c16b2ac1ba7130e407d","tarball":"https://registry.npmjs.org/xelf-ui-plus/-/xelf-ui-plus-1.0.1.tgz","fileCount":14,"unpackedSize":394122,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSvvvJowo8ctolEE+te1UMNgrejkn6sqCxzs3zPe+JGAIgOjjsJ9ABw5YvtlrlMqxBfZC/Kf+HCQ1IfcoZIP+p9jk="}]},"_npmUser":{"name":"wangyq2022","email":"wangyq.sc@qq.com"},"directories":{},"maintainers":[{"name":"wangyq2022","email":"wangyq.sc@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xelf-ui-plus_1.0.1_1712454058748_0.0935966261640242"},"_hasShrinkwrap":false}},"maintainers":[{"name":"wangyq2022","email":"wangyq.sc@qq.com"}],"description":"a Vue ui library for vue 3","license":"MIT","readme":"# xelf ui plus\n\n 这是一套针对VUE3的UI组件库，收录的组件一部分为原创一部分为从网络获取。\n\n## 更新日志\n### 1.0.0 2024-04-03\n 1. 调整字体图标\n 2. 增加快捷键指令 [v-shortcut]\n 3. 提供基础颜色变量定义\n 4. 提供基础字号变量定义\n\n### 0.3.16 2023-04-30\n 1. 更新字体图标\n\n### 0.3.13 2023-04-25\n 1. 增加日期选择框 [DateTimePickerH5];\n\n### 0.1.8 2023-02-15\n \n 1. 增加权限控制指令 [v-permis]；\n 2. 增加元素外点击指令 [v-outside]；\n 3. 增加自动获取焦点指令 [v-focus]；\n 4. 增加防抖指令 [v-debounce]；\n 5. 增加节流指令 [v-throttle];\n\n### 0.1.0 2022-12-08\n\n 1. 首次提交\n\n----------\n\n## 安装\n\n > npm安装\n\n npm i xelf-ui -S\n\n > 全局引用\n\n 修改项目的main.js文件如下内容：\n\n import { createApp } from 'vue'\n import xelf from 'xelf-ui'\n \n const app = createApp(App)\n app.use(xelf)\n app.mount('#app')\n\n\n## 基础变量\n\n\n### 1. 基础的颜色变量定义说明\n\n 引入样式：@import 'xelf-ui/theme/index.scss'\n\n > 蓝色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-blue、--x-color-blue-100、--x-color-blue-200、--x-color-blue-300、--x-color-blue-400、--x-color-blue-500、--x-color-blue-600、--x-color-blue-700、--x-color-blue-800、--x-color-blue-900\n\n > 靛蓝，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-indigo、--x-color-indigo-100、--x-color-indigo-200、--x-color-indigo-300、--x-color-indigo-400、--x-color-indigo-500、--x-color-indigo-600、--x-color-indigo-700、--x-color-indigo-800、--x-color-indigo-900\n\n > 紫色，这里定义了9个等级颜色，变量名称如下：\n\n --x-color-purple、--x-color-purple-100、--x-color-purple-200、--x-color-purple-300、--x-color-purple-400、--x-color-purple-500、--x-color-purple-600、--x-color-purple-700、--x-color-purple-800、--x-color-purple-900\n\n > 粉色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-pink、--x-color-pink-100、--x-color-pink-200、--x-color-pink-300、--x-color-pink-400、--x-color-pink-500、--x-color-pink-600、--x-color-pink-700、--x-color-pink-800、--x-color-pink-900\n\n > 红色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-red、--x-color-red-100、--x-color-red-200、--x-color-red-300、--x-color-red-400、--x-color-red-500、--x-color-red-600、--x-color-red-700、--x-color-red-800、--x-color-red-900\n\n > 橙色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-orange、--x-color-orange-100、--x-color-orange-200、--x-color-orange-300、--x-color-orange-400、--x-color-orange-500、--x-color-orange-600、--x-color-orange-700、--x-color-orange-800、--x-color-orange-900\n\n > 黄色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-yellow、--x-color-yellow-100、--x-color-yellow-200、--x-color-yellow-300、--x-color-yellow-400、--x-color-yellow-500、--x-color-yellow-600、--x-color-yellow-700、--x-color-yellow-800、--x-color-yellow-900\n\n > 绿色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-green、--x-color-green-100、--x-color-green-200、--x-color-green-300、--x-color-green-400、--x-color-green-500、--x-color-green-600、--x-color-green-700、--x-color-green-800、--x-color-green-900\n \n > 青绿色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-teal、--x-color-teal-100、--x-color-teal-200、--x-color-teal-300、--x-color-teal-400、--x-color-teal-500、--x-color-teal-600、--x-color-teal-700、--x-color-teal-800、--x-color-teal-900\n\n > 青色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-cyan、--x-color-cyan-10、--x-color-cyan-200、--x-color-cyan-300、--x-color-cyan-400、--x-color-cyan-500、--x-color-cyan-600、--x-color-cyan-700、--x-color-cyan-800、--x-color-cyan-900\n\n > 灰色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-color-gray、--x-color-gray-100、--x-color-gray-200、--x-color-gray-300、--x-color-gray-400、--x-color-gray-500、--x-color-gray-600、--x-color-gray-700、--x-color-gray-800、--x-color-gray-900\n\n > 黑、白、透明\n\n --x-color-black\n --x-color-white\n --x-color-tran\n\n### 2. 基础的字号变量定义说明\n\n 引入样式：@import 'xelf-ui/theme/index.scss'\n\n > 蓝色，这里定义了9个等级的颜色，变量名称如下：\n\n --x-font-size-base\n --x-font-size-xs\n --x-font-size-sm\n --x-font-size-lg\n --x-font-size-xl\n --x-font-size-xxl\n --x-font-size-sl\n --x-font-size-xsl\n\n## 自定义指令\n\n### 1. 元素权限控制指令说明\n\n 在需要控制权限的组件上使用 v-permis 指令，指令参数为一个对象，roles属性为字符串数组用于指定当前用户拥有的权限集合， permis属性也是字符串数组用于指定元素显示所需的权限集合，当用户拥有的权限集合中包含permis中的任何一个元素，元素即可正常显示。roles 参数指定 ['admin', 'edit', 'view']，permis 参数指定 ['admin'],此时permis中的权限‘admin’包含在roles列表中，所以用户拥有元素权限，元素会正常显示。\n\n > 使用样例：\n\n \n\n > 参数说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
参数说明类型默认值
roles此属性必须指定，用于指定当前用户拥有的权限集合string[]-
permis此属性必须指定，用于指定元素显示所需的权限集合string[]-
\n\n### 2. 元素外点击指令说明\n \n 元素上使用 v-outside 指令，并指定fn参数，fn参数为一个方法。 在实际开发时会有点击某一个按钮出现一个弹窗，然后点弹窗的其他区域时需要关闭弹窗，如果是点击的弹窗本身则不关闭弹窗的需求。 以下示例可以满足需求，点击元素内部计数器不增加，点击元素外部计数器增加。\n\n > 使用样例：\n\n
\n 点击内部和外部试试\n
\n
外部点击次数：0
\n \n hOutsideClick() {\n this.osnum = this.osnum + 1\n }\n\n > 参数说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
参数说明类型默认值
fn此属性必须指定，用于指定元素外点击事件的处理方法function-
\n\n### 3. 元素自动获取焦点指令说明\n\n 使用“自动聚焦”指令的元素会自动获取焦点，兄弟元素间只会有一个聚焦，即将该指令作用于两个兄弟输入框上，也只会自动聚焦一个。自动聚焦指令没有任何参数，只需要在组件上使用 “v-focus” 指令即可。\n\n > 使用样例\n\n \n\n### 4. 点击防抖指令说明\n\n 一般用于按钮，避免用户连续多次点击，导致前端连续请求后端接口，为后端带来不必要的压力。fn参数指定事件处理方法，event参数指定防抖事件，delay参数指定延迟时长。用防抖指令后并不是每次点击都会响应，多次点击在不超过延迟时间的情况下不管点击多少次都只执行最后一次。\n\n > 使用样例\n\n \n
\n 计数器：0\n
\n \n hClick() {\n this.cnum.value += 1\n }\n\n > 参数说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
参数说明类型默认值
fn此属性必须指定，用于指定防抖事件的处理方法function-
event此属性必须指定，用于指定防抖事件string-
delay此属性非必须指定，用于指定防抖延迟时长，单位毫秒。number200
\n\n### 5. 点击节流指令说明\n\n 节流和防抖类似，都是用于前端”限流“。不同的是，防抖是限制执行次数，多次密集的触发只会执行最后一次，无规律，更关注结果；节流是限制执行频率，有节奏的执行，有规律，更关注过程。fn参数指定事件处理方法，event参数指定防抖事件，delay参数指定延迟时长。使用节流指令后并不是每次点击都会响应，多次触发的情况会响应第一次触发，在延迟时间内的其他触发会被抛弃。\n\n > 使用样例\n\n \n
计数器：0
\n \n \n hClick() {\n this.cnum += 1\n }\n\n > 参数说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
参数说明类型默认值
fn此属性必须指定，用于指定防抖事件的处理方法function-
event此属性必须指定，用于指定防抖事件string-
delay此属性非必须指定，用于指定防抖延迟时长，单位毫秒。number200
\n\n### 6. 快捷键指令说明\n\n 使用 v-shortcut 指令为元素定义快捷键，通过 keys 属性指定快捷键组合，keys属性是一个数组，比如要指定快捷键 alt + p 那么keys属性值为[ 'alt', 'p' ]，handler属性为处理函数。\n\n > 基础用法\n\n \n \n \n handler1() { \n console.log('键盘快捷键(alt + p)触发') \n }\n\n > 参数说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
参数说明类型默认值
keys定义快捷键组合，此为必须项，可选值参见按键码说明。注意仅CTR、ALT、WIN、SHIFT四个功能键支持同时按下。Array<string>-
handler快捷键按下时调用此方法，此为必须项。Function-
args快捷键按下时将此对象作为调用方法的参数传入。Objectundefined
prevent屏蔽按键的默认行为，当你的快捷键已经有默认的动作，需要开启此属性Booleanfalse
\n\n > 按键码说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
按键码说明按键码说明按键码说明按键码说明按键码说明
controlCtrl 键altAlt 键shiftShift 键tabTab 键escESC 键
f1F1 键f2F2 键f3F3 键f4F4 键f5F5 键
f6F6 键f7F7 键f8F8 键f9F9 键f10F10 键
f11F11 键f12F12 键homeHome 键endEnd 键delete删除键
insert插入键pageup上翻页键pagedown下翻页键backspace退格键enter回车键
capslock大小写转换arrowup箭头上arrowdown箭头下arrowleft箭头左arrowright箭头右
numlock数字键盘锁定// 键** 键-- 键++ 键
11 键22 键33 键44 键55 键
66 键77 键88 键99 键00 键
`` 键-- 键== 键[[ 键]] 键
\\反斜线键;; 键'单引号键,逗号键/斜线键
.句点键space空格键pause暂停contextmenu菜单键scrolllock滚动锁定
browserhome浏览器HOME键mediaselect媒体选择
\n\n## 组件\n\n### 1. 日期时间控件\n\n 此控件完全是HTML原生input组件的封装，重新定义了部分属性，自动完成输入输出格式转换。\n\n > 基础用法\n\n \n\n > 参数说明\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
参数说明类型默认值
v-model数据双向绑定string-
type组件工作模式，'date':日期选择，'datetime-local': 日期时间选择，'time': 时间选择，'month': 月份选择，week: 周选择stringdate
min最小值，注意：格式要与type设置的类型匹配string-
max最大值，注意：格式要与type设置的类型匹配string-
width组件宽度,默认单位pxnumber/string-
custom-class自定义样式名称string-
readonly只读模式booleanfalse
disabled禁用模式booleanfalse
name为组件设置name属性，与原生name属性一致string-
hideIndicator隐藏日期组件选择图标，同时阻止弹出下拉选择面板。booleanfalse
","readmeFilename":"README.md"}