@szkj/element-ui 0.0.1

package/README.md

@@ -0,0 +1,225 @@
+# @szkj/element-ui
+
+Vue2 + Element UI 适配组件库，承接后台页面里的表格、表单、弹窗等 UI 组件能力。
+
+## 安装
+
+```bash
+pnpm add @szkj/element-ui element-ui vue
+```
+
+```bash
+npm install @szkj/element-ui element-ui vue
+```
+
+## 使用
+
+```js
+import Vue from 'vue'
+import ElementUI from 'element-ui'
+import SzkjElementUI from '@szkj/element-ui'
+
+Vue.use(ElementUI)
+Vue.use(SzkjElementUI)
+```
+
+按需注册，组件创建时会自动注入内置样式。推荐使用子路径入口减少打包体积：
+
+```js
+import Vue from 'vue'
+import SzButton from '@szkj/element-ui/button'
+import SzCheckbox from '@szkj/element-ui/checkbox'
+import SzDesc from '@szkj/element-ui/desc'
+import SzDialog from '@szkj/element-ui/dialog'
+import SzForm from '@szkj/element-ui/form'
+import SzInfiniteSelect from '@szkj/element-ui/infinite-select'
+import SzMenu from '@szkj/element-ui/menu'
+import SzRadio from '@szkj/element-ui/radio'
+import SzSelect from '@szkj/element-ui/select'
+import SzTable from '@szkj/element-ui/table'
+import SzTreeSelect from '@szkj/element-ui/tree-select'
+import SzVirtualSelect from '@szkj/element-ui/virtual-select'
+
+Vue.component('SzButton', SzButton)
+Vue.component('SzCheckbox', SzCheckbox)
+Vue.component('SzDesc', SzDesc)
+Vue.component('SzDialog', SzDialog)
+Vue.component('SzForm', SzForm)
+Vue.component('SzInfiniteSelect', SzInfiniteSelect)
+Vue.component('SzMenu', SzMenu)
+Vue.component('SzRadio', SzRadio)
+Vue.component('SzSelect', SzSelect)
+Vue.component('SzTable', SzTable)
+Vue.component('SzTreeSelect', SzTreeSelect)
+Vue.component('SzVirtualSelect', SzVirtualSelect)
+```
+
+也可以继续从主入口命名导入：
+
+```js
+import { SzButton, SzTable } from '@szkj/element-ui'
+```
+
+PascalCase 子路径同样可用：
+
+```js
+import SzButton from '@szkj/element-ui/SzButton'
+```
+
+## 主题
+
+默认会自动注入内置样式，可以直接使用。需要跟随 Element UI 主题色时，在业务项目的 Element UI 主题文件里追加 `@szkj/element-ui/theme`：
+
+```scss
+$--color-primary: #7c3aed;
+
+@import "~element-ui/packages/theme-chalk/src/index";
+@import "@szkj/element-ui/theme";
+```
+
+`@szkj/element-ui/theme` 会读取 Element UI 的 `$--color-primary` 等 SCSS 变量，并写入组件内部使用的 `--sz-*` CSS 变量。这样 `SzMenu`、`SzTreeSelect` 等增强样式会跟 Element UI 主题色保持一致。
+
+## SzButton
+
+```vue
+<sz-button
+  color="#7c3aed"
+  text-color="#ffffff"
+  icon="el-icon-check"
+  text="保存"
+/>
+```
+
+## SzCheckbox
+
+```vue
+<sz-checkbox
+  v-model="permissions"
+  type="button"
+  :options="permissionOptions"
+/>
+```
+
+## SzRadio
+
+```vue
+<sz-radio
+  v-model="status"
+  type="button"
+  :options="statusOptions"
+/>
+```
+
+## SzSelect
+
+```vue
+<sz-select
+  v-model="city"
+  clearable
+  :options="cityOptions"
+/>
+```
+
+## SzDesc
+
+```vue
+<sz-desc
+  :data="detail"
+  :columns="descColumns"
+  :column="2"
+  placeholder="-"
+/>
+```
+
+## SzDialog
+
+```vue
+<sz-dialog
+  v-model="visible"
+  title="编辑用户"
+  border
+  :before-confirm="save"
+>
+  弹窗内容
+</sz-dialog>
+```
+
+`beforeConfirm` 正常执行完成后自动关闭；返回 `false` 或执行失败时保持打开。
+
+## SzMenu
+
+```vue
+<sz-menu
+  v-model="activeMenu"
+  :options="menuOptions"
+  router
+/>
+```
+
+## SzForm
+
+```vue
+<sz-form
+  ref="form"
+  :model="form"
+  :items="items"
+/>
+```
+
+## SzTable
+
+```vue
+<sz-table
+  ref="table"
+  :columns="columns"
+  :request-method="getList"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      columns: [
+        { label: '姓名', prop: 'name' },
+        { label: '状态', prop: 'status' }
+      ]
+    }
+  },
+  mounted() {
+    this.$refs.table.loadData()
+  },
+  methods: {
+    async getList(params) {
+      return request.get('/user/list', params)
+    }
+  }
+}
+```
+
+## SzTreeSelect
+
+```vue
+<sz-tree-select
+  v-model="deptId"
+  :load-data="loadDeptTree"
+  :props="{ label: 'name', value: 'id', children: 'children' }"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      deptId: ''
+    }
+  },
+  methods: {
+    async loadDeptTree() {
+      const res = await request.get('/dept/tree')
+
+      return res.data
+    }
+  }
+}
+```

package/dist/SzButton.cjs

@@ -0,0 +1,69 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});function d(e){let t=e.trim(),o=t.match(/^#([\da-f])([\da-f])([\da-f])$/i);if(o)return {red:Number.parseInt(o[1]+o[1],16),green:Number.parseInt(o[2]+o[2],16),blue:Number.parseInt(o[3]+o[3],16)};let r=t.match(/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);if(r)return {red:Number.parseInt(r[1],16),green:Number.parseInt(r[2],16),blue:Number.parseInt(r[3],16)}}function s(e,t,o){let r=l=>Math.round(l+(t-l)*o);return `rgb(${r(e.red)}, ${r(e.green)}, ${r(e.blue)})`}function b(e){return e&&(e.red*299+e.green*587+e.blue*114)/1e3>180?"#303133":"#ffffff"}var i={name:"SzButton",inheritAttrs:false,props:{color:{type:String,default:""},textColor:{type:String,default:""},borderColor:{type:String,default:""},hoverColor:{type:String,default:""},activeColor:{type:String,default:""},text:{type:[String,Number],default:""}},computed:{customColorStyle(){let e=this.color.trim();if(!e)return;let t=d(e),o=(this.textColor||"").trim(),r=(this.borderColor||"").trim(),l=(this.hoverColor||"").trim(),u=(this.activeColor||"").trim();return {"--sz-button-color":e,"--sz-button-border-color":r||e,"--sz-button-hover-color":l||(t?s(t,255,.2):e),"--sz-button-active-color":u||(t?s(t,0,.1):e),"--sz-button-plain-color":t?s(t,255,.9):"#ffffff","--sz-button-plain-hover-color":t?s(t,255,.8):"#ffffff","--sz-button-text-color":o||b(t)}}},render(e){var o;let t=(o=this.$slots.default)!=null&&o.length?this.$slots.default:[String(this.text)];return e("el-button",{class:{"sz-button--custom-color":!!this.customColorStyle},style:this.customColorStyle,attrs:this.$attrs,on:this.$listeners},t)}};var p=`
+.sz-button--custom-color{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-color)}
+.sz-button--custom-color:focus,.sz-button--custom-color:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-hover-color);background-color:var(--sz-button-hover-color)}
+.sz-button--custom-color:active{color:var(--sz-button-text-color);border-color:var(--sz-button-active-color);background-color:var(--sz-button-active-color)}
+.sz-button--custom-color.is-plain{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-plain-color)}
+.sz-button--custom-color.is-plain:focus,.sz-button--custom-color.is-plain:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-hover-color);background-color:var(--sz-button-plain-hover-color)}
+.sz-button--custom-color.is-plain:active{color:var(--sz-button-text-color);border-color:var(--sz-button-active-color);background-color:var(--sz-button-plain-hover-color)}
+.sz-button--custom-color.is-disabled,.sz-button--custom-color.is-disabled:active,.sz-button--custom-color.is-disabled:focus,.sz-button--custom-color.is-disabled:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-color);opacity:.5}
+.sz-button--custom-color.is-disabled.is-plain,.sz-button--custom-color.is-disabled.is-plain:active,.sz-button--custom-color.is-disabled.is-plain:focus,.sz-button--custom-color.is-disabled.is-plain:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-plain-color)}
+.sz-desc,.sz-desc .el-descriptions,.sz-desc .el-descriptions__body{width:100%}
+.sz-desc .el-descriptions__table{display:table;width:100%;margin:0;overflow:visible}
+.sz-desc .el-descriptions__table.is-bordered{table-layout:fixed}
+.sz-dialog__panel--border .el-dialog__header{padding:16px;border-bottom:1px solid var(--sz-border-color-light,#e7e7e7)}
+.sz-dialog__panel--border .el-dialog__footer{padding:16px;border-top:1px solid var(--sz-border-color-light,#e7e7e7)}
+.sz-form__col>.el-form-item{width:100%}
+.sz-form__col .el-select,.sz-form__col .el-date-editor,.sz-form__col .el-input-number,.sz-form__col .sz-tree-select{width:100%}
+.sz-infinite-select__status{color:var(--sz-color-text-secondary,#909399);text-align:center}
+.sz-virtual-select__spacer{box-sizing:border-box;pointer-events:none}
+.sz-virtual-select__option--hidden{position:absolute!important;width:0!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
+.sz-virtual-select__popper .el-scrollbar__wrap{overflow-y:auto!important}
+.sz-virtual-select__popper .el-scrollbar__bar.is-vertical{display:none!important}
+.sz-virtual-select__scrollbar{position:absolute;top:0;right:2px;bottom:0;width:6px;pointer-events:none}
+.sz-virtual-select__thumb{width:6px;border-radius:6px;background-color:var(--sz-scrollbar-thumb-color,rgba(144,147,153,.5));cursor:grab;pointer-events:auto;transition:background-color .2s}
+.sz-virtual-select__thumb:active{cursor:grabbing}
+.sz-virtual-select__popper:hover .sz-virtual-select__thumb{background-color:var(--sz-scrollbar-thumb-hover-color,rgba(144,147,153,.7))}
+.sz-menu:not(.el-menu--horizontal){height:100%}
+.sz-menu:not(.el-menu--collapse):not(.el-menu--horizontal){width:200px}
+.sz-menu.el-menu--collapse{width:56px}
+.sz-menu .el-submenu__title,.sz-menu .el-menu-item{height:40px;line-height:40px;margin-top:4px}
+.sz-menu .el-submenu__title:hover,.sz-menu .el-menu-item:hover{background:var(--sz-color-primary-light-8,#eaf6fe)}
+.sz-menu .el-submenu.is-active>.el-submenu__title,.sz-menu .el-submenu.is-active>.el-submenu__title .sz-menu__icon{color:var(--sz-color-primary,#409eff)}
+.sz-menu__content{display:flex;align-items:center;min-width:0;height:100%}
+.sz-menu__icon{flex:none;margin-right:8px;font-size:14px}
+.sz-menu__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sz-menu__item--active{background-color:var(--sz-color-primary-light-8,#eaf6fe)}
+.sz-menu__item--active:after{content:"";position:absolute;top:0;right:0;width:2px;height:40px;background-color:var(--sz-color-primary,#409eff)}
+.sz-table{height:100%;background:var(--sz-color-white,#fff)}
+.sz-table .el-table .el-table__header th,.sz-table .el-table .el-table__header td,.sz-table .el-table .el-table__body th,.sz-table .el-table .el-table__body td{padding:0}
+.sz-table .sz-pagination{display:flex;justify-content:flex-end;padding-top:20px}
+.sz-table .single-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sz-tree-select{height:fit-content}
+.sz-tree-select__reference{width:100%}
+.sz-tree-select__panel{width:100%}
+.sz-tree-select__filter{margin-bottom:8px}
+.sz-tree-select__tree{max-height:280px;overflow:auto}
+.sz-tree-select__tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--sz-color-primary,#409eff);background:var(--sz-color-primary-light-9,#ecf5ff);font-weight:600}
+.sz-tree-select__multiple{box-sizing:border-box;position:relative;display:flex;align-self:flex-start;align-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;height:fit-content;min-height:40px;padding:4px 30px 4px 8px;border:1px solid var(--sz-border-color-base,#dcdfe6);border-radius:4px;background:var(--sz-color-white,#fff);cursor:text;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}
+.sz-tree-select__multiple:hover{border-color:var(--sz-border-color-hover,#c0c4cc)}
+.sz-tree-select__multiple.is-focus{border-color:var(--sz-color-primary,#409eff)}
+.sz-tree-select__multiple.is-disabled{border-color:var(--sz-border-color-disabled,#e4e7ed);background:var(--sz-background-color-base,#f5f7fa);cursor:not-allowed}
+.sz-tree-select__multiple--medium{min-height:36px}
+.sz-tree-select__multiple--small{min-height:32px}
+.sz-tree-select__multiple--mini{min-height:28px}
+.sz-tree-select__tag{max-width:calc(100% - 8px)}
+.sz-tree-select__tag .el-tag__content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}
+.sz-tree-select__multiple-input{flex:1 1 60px;min-width:40px;height:28px;padding:0;border:0;outline:0;color:var(--sz-color-text-regular,#606266);background:transparent;font:inherit}
+.sz-tree-select__multiple.has-value .sz-tree-select__multiple-input{flex-basis:24px;min-width:24px}
+.sz-tree-select__multiple-input:disabled{cursor:not-allowed}
+.sz-tree-select__multiple-input::placeholder{color:var(--sz-color-text-placeholder,#c0c4cc)}
+.sz-tree-select__clear,.sz-tree-select__arrow{position:absolute;right:5px;top:50%;height:28px;line-height:28px;transform:translateY(-50%);color:var(--sz-color-text-placeholder,#c0c4cc);text-align:center}
+.sz-tree-select__clear{display:none;cursor:pointer}
+.sz-tree-select__arrow{cursor:inherit;transition:transform .3s}
+.sz-tree-select__multiple.is-clearable.has-value:hover .sz-tree-select__clear{display:block}
+.sz-tree-select__multiple.is-clearable.has-value:hover .sz-tree-select__arrow{display:none}
+.sz-tree-select__arrow.is-reverse{transform:translateY(-50%) rotate(180deg)}
+.sz-tree-select__suffix-arrow{transition:transform .3s}
+.sz-tree-select__suffix-arrow.is-reverse{transform:rotate(180deg)}
+.sz-tree-select__reference.is-clearable.has-value:hover .sz-tree-select__suffix-arrow{display:none}
+`,a=false;function n(){if(a||typeof document=="undefined")return;let e=document.createElement("style");e.setAttribute("data-szkj-element-ui","true"),e.textContent=p,document.head.appendChild(e),a=true;}function c(e){let t=e.beforeCreate;return {...e,beforeCreate(){if(n(),Array.isArray(t)){t.forEach(o=>o.call(this));return}t==null||t.call(this);}}}var m=c(i),x=m;exports.SzButton=m;exports.default=x;exports.injectStyle=n;

package/dist/SzButton.d.cts

@@ -0,0 +1,39 @@
+import { R as RenderFunction } from './style-BAI8rK3m.cjs';
+export { q as injectStyle } from './style-BAI8rK3m.cjs';
+
+declare const SzButton: {
+    name: string;
+    inheritAttrs: boolean;
+    props: {
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        textColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        borderColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        hoverColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        activeColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        text: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: string;
+        };
+    };
+    computed: {
+        customColorStyle(): Record<string, string> | undefined;
+    };
+    render(h: RenderFunction): unknown;
+};
+
+export { SzButton, SzButton as default };

package/dist/SzButton.d.ts

@@ -0,0 +1,39 @@
+import { R as RenderFunction } from './style-BAI8rK3m.js';
+export { q as injectStyle } from './style-BAI8rK3m.js';
+
+declare const SzButton: {
+    name: string;
+    inheritAttrs: boolean;
+    props: {
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        textColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        borderColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        hoverColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        activeColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        text: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: string;
+        };
+    };
+    computed: {
+        customColorStyle(): Record<string, string> | undefined;
+    };
+    render(h: RenderFunction): unknown;
+};
+
+export { SzButton, SzButton as default };

package/dist/SzButton.js

@@ -0,0 +1,69 @@
+function d(e){let t=e.trim(),o=t.match(/^#([\da-f])([\da-f])([\da-f])$/i);if(o)return {red:Number.parseInt(o[1]+o[1],16),green:Number.parseInt(o[2]+o[2],16),blue:Number.parseInt(o[3]+o[3],16)};let r=t.match(/^#([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i);if(r)return {red:Number.parseInt(r[1],16),green:Number.parseInt(r[2],16),blue:Number.parseInt(r[3],16)}}function s(e,t,o){let r=l=>Math.round(l+(t-l)*o);return `rgb(${r(e.red)}, ${r(e.green)}, ${r(e.blue)})`}function b(e){return e&&(e.red*299+e.green*587+e.blue*114)/1e3>180?"#303133":"#ffffff"}var i={name:"SzButton",inheritAttrs:false,props:{color:{type:String,default:""},textColor:{type:String,default:""},borderColor:{type:String,default:""},hoverColor:{type:String,default:""},activeColor:{type:String,default:""},text:{type:[String,Number],default:""}},computed:{customColorStyle(){let e=this.color.trim();if(!e)return;let t=d(e),o=(this.textColor||"").trim(),r=(this.borderColor||"").trim(),l=(this.hoverColor||"").trim(),u=(this.activeColor||"").trim();return {"--sz-button-color":e,"--sz-button-border-color":r||e,"--sz-button-hover-color":l||(t?s(t,255,.2):e),"--sz-button-active-color":u||(t?s(t,0,.1):e),"--sz-button-plain-color":t?s(t,255,.9):"#ffffff","--sz-button-plain-hover-color":t?s(t,255,.8):"#ffffff","--sz-button-text-color":o||b(t)}}},render(e){var o;let t=(o=this.$slots.default)!=null&&o.length?this.$slots.default:[String(this.text)];return e("el-button",{class:{"sz-button--custom-color":!!this.customColorStyle},style:this.customColorStyle,attrs:this.$attrs,on:this.$listeners},t)}};var p=`
+.sz-button--custom-color{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-color)}
+.sz-button--custom-color:focus,.sz-button--custom-color:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-hover-color);background-color:var(--sz-button-hover-color)}
+.sz-button--custom-color:active{color:var(--sz-button-text-color);border-color:var(--sz-button-active-color);background-color:var(--sz-button-active-color)}
+.sz-button--custom-color.is-plain{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-plain-color)}
+.sz-button--custom-color.is-plain:focus,.sz-button--custom-color.is-plain:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-hover-color);background-color:var(--sz-button-plain-hover-color)}
+.sz-button--custom-color.is-plain:active{color:var(--sz-button-text-color);border-color:var(--sz-button-active-color);background-color:var(--sz-button-plain-hover-color)}
+.sz-button--custom-color.is-disabled,.sz-button--custom-color.is-disabled:active,.sz-button--custom-color.is-disabled:focus,.sz-button--custom-color.is-disabled:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-color);opacity:.5}
+.sz-button--custom-color.is-disabled.is-plain,.sz-button--custom-color.is-disabled.is-plain:active,.sz-button--custom-color.is-disabled.is-plain:focus,.sz-button--custom-color.is-disabled.is-plain:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-plain-color)}
+.sz-desc,.sz-desc .el-descriptions,.sz-desc .el-descriptions__body{width:100%}
+.sz-desc .el-descriptions__table{display:table;width:100%;margin:0;overflow:visible}
+.sz-desc .el-descriptions__table.is-bordered{table-layout:fixed}
+.sz-dialog__panel--border .el-dialog__header{padding:16px;border-bottom:1px solid var(--sz-border-color-light,#e7e7e7)}
+.sz-dialog__panel--border .el-dialog__footer{padding:16px;border-top:1px solid var(--sz-border-color-light,#e7e7e7)}
+.sz-form__col>.el-form-item{width:100%}
+.sz-form__col .el-select,.sz-form__col .el-date-editor,.sz-form__col .el-input-number,.sz-form__col .sz-tree-select{width:100%}
+.sz-infinite-select__status{color:var(--sz-color-text-secondary,#909399);text-align:center}
+.sz-virtual-select__spacer{box-sizing:border-box;pointer-events:none}
+.sz-virtual-select__option--hidden{position:absolute!important;width:0!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
+.sz-virtual-select__popper .el-scrollbar__wrap{overflow-y:auto!important}
+.sz-virtual-select__popper .el-scrollbar__bar.is-vertical{display:none!important}
+.sz-virtual-select__scrollbar{position:absolute;top:0;right:2px;bottom:0;width:6px;pointer-events:none}
+.sz-virtual-select__thumb{width:6px;border-radius:6px;background-color:var(--sz-scrollbar-thumb-color,rgba(144,147,153,.5));cursor:grab;pointer-events:auto;transition:background-color .2s}
+.sz-virtual-select__thumb:active{cursor:grabbing}
+.sz-virtual-select__popper:hover .sz-virtual-select__thumb{background-color:var(--sz-scrollbar-thumb-hover-color,rgba(144,147,153,.7))}
+.sz-menu:not(.el-menu--horizontal){height:100%}
+.sz-menu:not(.el-menu--collapse):not(.el-menu--horizontal){width:200px}
+.sz-menu.el-menu--collapse{width:56px}
+.sz-menu .el-submenu__title,.sz-menu .el-menu-item{height:40px;line-height:40px;margin-top:4px}
+.sz-menu .el-submenu__title:hover,.sz-menu .el-menu-item:hover{background:var(--sz-color-primary-light-8,#eaf6fe)}
+.sz-menu .el-submenu.is-active>.el-submenu__title,.sz-menu .el-submenu.is-active>.el-submenu__title .sz-menu__icon{color:var(--sz-color-primary,#409eff)}
+.sz-menu__content{display:flex;align-items:center;min-width:0;height:100%}
+.sz-menu__icon{flex:none;margin-right:8px;font-size:14px}
+.sz-menu__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sz-menu__item--active{background-color:var(--sz-color-primary-light-8,#eaf6fe)}
+.sz-menu__item--active:after{content:"";position:absolute;top:0;right:0;width:2px;height:40px;background-color:var(--sz-color-primary,#409eff)}
+.sz-table{height:100%;background:var(--sz-color-white,#fff)}
+.sz-table .el-table .el-table__header th,.sz-table .el-table .el-table__header td,.sz-table .el-table .el-table__body th,.sz-table .el-table .el-table__body td{padding:0}
+.sz-table .sz-pagination{display:flex;justify-content:flex-end;padding-top:20px}
+.sz-table .single-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sz-tree-select{height:fit-content}
+.sz-tree-select__reference{width:100%}
+.sz-tree-select__panel{width:100%}
+.sz-tree-select__filter{margin-bottom:8px}
+.sz-tree-select__tree{max-height:280px;overflow:auto}
+.sz-tree-select__tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--sz-color-primary,#409eff);background:var(--sz-color-primary-light-9,#ecf5ff);font-weight:600}
+.sz-tree-select__multiple{box-sizing:border-box;position:relative;display:flex;align-self:flex-start;align-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;height:fit-content;min-height:40px;padding:4px 30px 4px 8px;border:1px solid var(--sz-border-color-base,#dcdfe6);border-radius:4px;background:var(--sz-color-white,#fff);cursor:text;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}
+.sz-tree-select__multiple:hover{border-color:var(--sz-border-color-hover,#c0c4cc)}
+.sz-tree-select__multiple.is-focus{border-color:var(--sz-color-primary,#409eff)}
+.sz-tree-select__multiple.is-disabled{border-color:var(--sz-border-color-disabled,#e4e7ed);background:var(--sz-background-color-base,#f5f7fa);cursor:not-allowed}
+.sz-tree-select__multiple--medium{min-height:36px}
+.sz-tree-select__multiple--small{min-height:32px}
+.sz-tree-select__multiple--mini{min-height:28px}
+.sz-tree-select__tag{max-width:calc(100% - 8px)}
+.sz-tree-select__tag .el-tag__content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}
+.sz-tree-select__multiple-input{flex:1 1 60px;min-width:40px;height:28px;padding:0;border:0;outline:0;color:var(--sz-color-text-regular,#606266);background:transparent;font:inherit}
+.sz-tree-select__multiple.has-value .sz-tree-select__multiple-input{flex-basis:24px;min-width:24px}
+.sz-tree-select__multiple-input:disabled{cursor:not-allowed}
+.sz-tree-select__multiple-input::placeholder{color:var(--sz-color-text-placeholder,#c0c4cc)}
+.sz-tree-select__clear,.sz-tree-select__arrow{position:absolute;right:5px;top:50%;height:28px;line-height:28px;transform:translateY(-50%);color:var(--sz-color-text-placeholder,#c0c4cc);text-align:center}
+.sz-tree-select__clear{display:none;cursor:pointer}
+.sz-tree-select__arrow{cursor:inherit;transition:transform .3s}
+.sz-tree-select__multiple.is-clearable.has-value:hover .sz-tree-select__clear{display:block}
+.sz-tree-select__multiple.is-clearable.has-value:hover .sz-tree-select__arrow{display:none}
+.sz-tree-select__arrow.is-reverse{transform:translateY(-50%) rotate(180deg)}
+.sz-tree-select__suffix-arrow{transition:transform .3s}
+.sz-tree-select__suffix-arrow.is-reverse{transform:rotate(180deg)}
+.sz-tree-select__reference.is-clearable.has-value:hover .sz-tree-select__suffix-arrow{display:none}
+`,a=false;function n(){if(a||typeof document=="undefined")return;let e=document.createElement("style");e.setAttribute("data-szkj-element-ui","true"),e.textContent=p,document.head.appendChild(e),a=true;}function c(e){let t=e.beforeCreate;return {...e,beforeCreate(){if(n(),Array.isArray(t)){t.forEach(o=>o.call(this));return}t==null||t.call(this);}}}var m=c(i),x=m;export{m as SzButton,x as default,n as injectStyle};

package/dist/SzCheckbox.cjs

@@ -0,0 +1,69 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var h={label:"label",value:"value",disabled:"disabled"};function m(e,t){return e==null?`index:${t}`:`${typeof e}:${String(e)}`}var u={name:"SzCheckbox",inheritAttrs:false,props:{value:{type:Array,default:()=>[]},type:{type:String,default:"checkbox",validator:e=>["checkbox","button"].includes(e)},border:{type:Boolean,default:false},options:{type:Array,default:()=>[]},format:{type:Object,default:()=>({})}},computed:{resolvedFormat(){return {...h,...this.format}}},methods:{renderOption(e,t,o){var a,c;let r=t[this.resolvedFormat.label],l=t[this.resolvedFormat.value],p=t[this.resolvedFormat.disabled],s=(c=(a=this.$scopedSlots).default)==null?void 0:c.call(a,{item:t,index:o,label:r,value:l}),n=this.type==="button"?"el-checkbox-button":"el-checkbox";return e(n,{key:m(l,o),props:{label:l,disabled:p,border:n==="el-checkbox"?this.border:void 0}},s!=null?s:r==null?"":String(r))}},render(e){return e("el-checkbox-group",{props:{...this.$attrs,value:this.value},on:this.$listeners},this.options.map((t,o)=>this.renderOption(e,t,o)))}};var z=`
+.sz-button--custom-color{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-color)}
+.sz-button--custom-color:focus,.sz-button--custom-color:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-hover-color);background-color:var(--sz-button-hover-color)}
+.sz-button--custom-color:active{color:var(--sz-button-text-color);border-color:var(--sz-button-active-color);background-color:var(--sz-button-active-color)}
+.sz-button--custom-color.is-plain{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-plain-color)}
+.sz-button--custom-color.is-plain:focus,.sz-button--custom-color.is-plain:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-hover-color);background-color:var(--sz-button-plain-hover-color)}
+.sz-button--custom-color.is-plain:active{color:var(--sz-button-text-color);border-color:var(--sz-button-active-color);background-color:var(--sz-button-plain-hover-color)}
+.sz-button--custom-color.is-disabled,.sz-button--custom-color.is-disabled:active,.sz-button--custom-color.is-disabled:focus,.sz-button--custom-color.is-disabled:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-color);opacity:.5}
+.sz-button--custom-color.is-disabled.is-plain,.sz-button--custom-color.is-disabled.is-plain:active,.sz-button--custom-color.is-disabled.is-plain:focus,.sz-button--custom-color.is-disabled.is-plain:hover{color:var(--sz-button-text-color);border-color:var(--sz-button-border-color);background-color:var(--sz-button-plain-color)}
+.sz-desc,.sz-desc .el-descriptions,.sz-desc .el-descriptions__body{width:100%}
+.sz-desc .el-descriptions__table{display:table;width:100%;margin:0;overflow:visible}
+.sz-desc .el-descriptions__table.is-bordered{table-layout:fixed}
+.sz-dialog__panel--border .el-dialog__header{padding:16px;border-bottom:1px solid var(--sz-border-color-light,#e7e7e7)}
+.sz-dialog__panel--border .el-dialog__footer{padding:16px;border-top:1px solid var(--sz-border-color-light,#e7e7e7)}
+.sz-form__col>.el-form-item{width:100%}
+.sz-form__col .el-select,.sz-form__col .el-date-editor,.sz-form__col .el-input-number,.sz-form__col .sz-tree-select{width:100%}
+.sz-infinite-select__status{color:var(--sz-color-text-secondary,#909399);text-align:center}
+.sz-virtual-select__spacer{box-sizing:border-box;pointer-events:none}
+.sz-virtual-select__option--hidden{position:absolute!important;width:0!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
+.sz-virtual-select__popper .el-scrollbar__wrap{overflow-y:auto!important}
+.sz-virtual-select__popper .el-scrollbar__bar.is-vertical{display:none!important}
+.sz-virtual-select__scrollbar{position:absolute;top:0;right:2px;bottom:0;width:6px;pointer-events:none}
+.sz-virtual-select__thumb{width:6px;border-radius:6px;background-color:var(--sz-scrollbar-thumb-color,rgba(144,147,153,.5));cursor:grab;pointer-events:auto;transition:background-color .2s}
+.sz-virtual-select__thumb:active{cursor:grabbing}
+.sz-virtual-select__popper:hover .sz-virtual-select__thumb{background-color:var(--sz-scrollbar-thumb-hover-color,rgba(144,147,153,.7))}
+.sz-menu:not(.el-menu--horizontal){height:100%}
+.sz-menu:not(.el-menu--collapse):not(.el-menu--horizontal){width:200px}
+.sz-menu.el-menu--collapse{width:56px}
+.sz-menu .el-submenu__title,.sz-menu .el-menu-item{height:40px;line-height:40px;margin-top:4px}
+.sz-menu .el-submenu__title:hover,.sz-menu .el-menu-item:hover{background:var(--sz-color-primary-light-8,#eaf6fe)}
+.sz-menu .el-submenu.is-active>.el-submenu__title,.sz-menu .el-submenu.is-active>.el-submenu__title .sz-menu__icon{color:var(--sz-color-primary,#409eff)}
+.sz-menu__content{display:flex;align-items:center;min-width:0;height:100%}
+.sz-menu__icon{flex:none;margin-right:8px;font-size:14px}
+.sz-menu__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sz-menu__item--active{background-color:var(--sz-color-primary-light-8,#eaf6fe)}
+.sz-menu__item--active:after{content:"";position:absolute;top:0;right:0;width:2px;height:40px;background-color:var(--sz-color-primary,#409eff)}
+.sz-table{height:100%;background:var(--sz-color-white,#fff)}
+.sz-table .el-table .el-table__header th,.sz-table .el-table .el-table__header td,.sz-table .el-table .el-table__body th,.sz-table .el-table .el-table__body td{padding:0}
+.sz-table .sz-pagination{display:flex;justify-content:flex-end;padding-top:20px}
+.sz-table .single-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sz-tree-select{height:fit-content}
+.sz-tree-select__reference{width:100%}
+.sz-tree-select__panel{width:100%}
+.sz-tree-select__filter{margin-bottom:8px}
+.sz-tree-select__tree{max-height:280px;overflow:auto}
+.sz-tree-select__tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--sz-color-primary,#409eff);background:var(--sz-color-primary-light-9,#ecf5ff);font-weight:600}
+.sz-tree-select__multiple{box-sizing:border-box;position:relative;display:flex;align-self:flex-start;align-content:center;align-items:center;flex-wrap:wrap;gap:4px;width:100%;height:fit-content;min-height:40px;padding:4px 30px 4px 8px;border:1px solid var(--sz-border-color-base,#dcdfe6);border-radius:4px;background:var(--sz-color-white,#fff);cursor:text;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}
+.sz-tree-select__multiple:hover{border-color:var(--sz-border-color-hover,#c0c4cc)}
+.sz-tree-select__multiple.is-focus{border-color:var(--sz-color-primary,#409eff)}
+.sz-tree-select__multiple.is-disabled{border-color:var(--sz-border-color-disabled,#e4e7ed);background:var(--sz-background-color-base,#f5f7fa);cursor:not-allowed}
+.sz-tree-select__multiple--medium{min-height:36px}
+.sz-tree-select__multiple--small{min-height:32px}
+.sz-tree-select__multiple--mini{min-height:28px}
+.sz-tree-select__tag{max-width:calc(100% - 8px)}
+.sz-tree-select__tag .el-tag__content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}
+.sz-tree-select__multiple-input{flex:1 1 60px;min-width:40px;height:28px;padding:0;border:0;outline:0;color:var(--sz-color-text-regular,#606266);background:transparent;font:inherit}
+.sz-tree-select__multiple.has-value .sz-tree-select__multiple-input{flex-basis:24px;min-width:24px}
+.sz-tree-select__multiple-input:disabled{cursor:not-allowed}
+.sz-tree-select__multiple-input::placeholder{color:var(--sz-color-text-placeholder,#c0c4cc)}
+.sz-tree-select__clear,.sz-tree-select__arrow{position:absolute;right:5px;top:50%;height:28px;line-height:28px;transform:translateY(-50%);color:var(--sz-color-text-placeholder,#c0c4cc);text-align:center}
+.sz-tree-select__clear{display:none;cursor:pointer}
+.sz-tree-select__arrow{cursor:inherit;transition:transform .3s}
+.sz-tree-select__multiple.is-clearable.has-value:hover .sz-tree-select__clear{display:block}
+.sz-tree-select__multiple.is-clearable.has-value:hover .sz-tree-select__arrow{display:none}
+.sz-tree-select__arrow.is-reverse{transform:translateY(-50%) rotate(180deg)}
+.sz-tree-select__suffix-arrow{transition:transform .3s}
+.sz-tree-select__suffix-arrow.is-reverse{transform:rotate(180deg)}
+.sz-tree-select__reference.is-clearable.has-value:hover .sz-tree-select__suffix-arrow{display:none}
+`,d=false;function i(){if(d||typeof document=="undefined")return;let e=document.createElement("style");e.setAttribute("data-szkj-element-ui","true"),e.textContent=z,document.head.appendChild(e),d=true;}function b(e){let t=e.beforeCreate;return {...e,beforeCreate(){if(i(),Array.isArray(t)){t.forEach(o=>o.call(this));return}t==null||t.call(this);}}}var _=b(u),k=_;exports.SzCheckbox=_;exports.default=k;exports.injectStyle=i;

package/dist/SzCheckbox.d.cts

@@ -0,0 +1,39 @@
+import { C as CheckboxFormat, R as RenderFunction, a as CheckboxOption } from './style-BAI8rK3m.cjs';
+export { q as injectStyle } from './style-BAI8rK3m.cjs';
+
+declare const SzCheckbox: {
+    name: string;
+    inheritAttrs: boolean;
+    props: {
+        value: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        border: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        options: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        format: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+    };
+    computed: {
+        resolvedFormat(): Required<CheckboxFormat>;
+    };
+    methods: {
+        renderOption(h: RenderFunction, item: CheckboxOption, index: number): any;
+    };
+    render(h: RenderFunction): unknown;
+};
+
+export { SzCheckbox, SzCheckbox as default };

package/dist/SzCheckbox.d.ts

@@ -0,0 +1,39 @@
+import { C as CheckboxFormat, R as RenderFunction, a as CheckboxOption } from './style-BAI8rK3m.js';
+export { q as injectStyle } from './style-BAI8rK3m.js';
+
+declare const SzCheckbox: {
+    name: string;
+    inheritAttrs: boolean;
+    props: {
+        value: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        type: {
+            type: StringConstructor;
+            default: string;
+            validator: (value: string) => boolean;
+        };
+        border: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        options: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        format: {
+            type: ObjectConstructor;
+            default: () => {};
+        };
+    };
+    computed: {
+        resolvedFormat(): Required<CheckboxFormat>;
+    };
+    methods: {
+        renderOption(h: RenderFunction, item: CheckboxOption, index: number): any;
+    };
+    render(h: RenderFunction): unknown;
+};
+
+export { SzCheckbox, SzCheckbox as default };