@cimom/ci-web-plugins-commom 1.0.5 → 1.0.7
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 +9 -0
- package/dist/CI.Web.Plugins.Commom.css +3 -2
- package/dist/VxeGridPro/README.md +31 -1
- package/dist/VxeModalPro/README.md +122 -0
- package/dist/VxeModalPro/index.js +1 -0
- package/dist/VxeTablePro/README.md +31 -1
- package/dist/components/HelloPlugin.vue/index2.js +1 -1
- package/dist/components/HelloWorld.vue/index2.js +1 -1
- package/dist/components/VxeGridPro/index.vue/index2.js +1 -1
- package/dist/components/VxeModalPro/index.vue/index.js +1 -0
- package/dist/components/VxeModalPro/index.vue/index2.js +1 -0
- package/dist/components/VxeTablePro/index.vue/index2.js +1 -1
- package/dist/index/index.js +1 -1
- package/package.json +9 -11
package/README.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
# 新插件添加及构建注意事项
|
|
2
|
+
新插件目录:components/VxeModalPro
|
|
3
|
+
1.添加测试案例 在目录testPlugins/,参考已有插件测试案例
|
|
4
|
+
2.添加新插件在entries目下的入口文件
|
|
5
|
+
3.添加新插件在rollup.config.js构建的配置
|
|
6
|
+
4.添加新插件README.md 使用说明文档
|
|
7
|
+
5.添加新插件src/index.js的导出暴露插件
|
|
8
|
+
6.添加新插件在package.json的默认导出配置
|
|
9
|
+
|
|
1
10
|
# Vue3 插件模板
|
|
2
11
|
|
|
3
12
|
本项目为基于 Vite + Vue3 + JavaScript + TailwindCSS 的插件开发模板,适用于发布到 NPM。
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
|
|
2
|
+
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
|
|
3
|
+
*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.mb-2{margin-bottom:.5rem}.flex{display:flex}.h-\[100px\]{height:100px}.h-\[600px\]{height:600px}.w-\[500px\]{width:500px}.resize{resize:both}.flex-col{flex-direction:column}.justify-center{justify-content:center}.border{border-width:1px}.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.p-4{padding:1rem}.p-5{padding:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# VxeGridPro 组件使用说明
|
|
2
2
|
|
|
3
3
|
## 简介
|
|
4
|
-
`VxeGridPro` 是基于 Vue3 + TypeScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://
|
|
4
|
+
`VxeGridPro` 是基于 Vue3 + TypeScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://vxeui.com/#/grid/api/) 进行了二次封装,支持统一扩展功能配置,便于业务快速集成和后续扩展。
|
|
5
5
|
|
|
6
6
|
## 安装
|
|
7
7
|
|
|
@@ -56,6 +56,36 @@ function currentRowChange(params) {
|
|
|
56
56
|
|
|
57
57
|
所有 `vxe-grid` 插槽均可透传,使用方式与原生一致。
|
|
58
58
|
|
|
59
|
+
## 实例方法调用说明
|
|
60
|
+
|
|
61
|
+
VxeGridPro 支持通过 ref 获取组件实例,并通过 `Instance()` 方法获取底层 vxe-grid 实例,再调用其原生方法(如刷新、获取选中行等)。
|
|
62
|
+
|
|
63
|
+
### 示例:调用原生方法
|
|
64
|
+
|
|
65
|
+
```vue
|
|
66
|
+
<script setup>
|
|
67
|
+
import { ref } from 'vue';
|
|
68
|
+
import VxeGridPro from '@cimom/ci-web-plugins-commom/VxeGridPro';
|
|
69
|
+
|
|
70
|
+
const gridRef = ref(null);
|
|
71
|
+
|
|
72
|
+
function reloadGrid() {
|
|
73
|
+
// 通过 Instance() 获取底层 vxe-grid 实例
|
|
74
|
+
const gridInstance = gridRef.value?.Instance?.();
|
|
75
|
+
if (gridInstance && gridInstance.reloadData) {
|
|
76
|
+
gridInstance.reloadData(); // 刷新数据
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
</script>
|
|
80
|
+
|
|
81
|
+
<template>
|
|
82
|
+
<VxeGridPro ref="gridRef" :columns="[]" :data="[]" />
|
|
83
|
+
<button @click="reloadGrid">刷新表格</button>
|
|
84
|
+
</template>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
> 说明:VxeGridPro 通过 `Instance()` 方法暴露底层 vxe-grid 的实例,常用如 reloadData()、getCheckboxRecords() 等,具体方法可参考 [vxe-table grid API](https://vxeui.com/#/grid/api/)。
|
|
88
|
+
|
|
59
89
|
---
|
|
60
90
|
|
|
61
91
|
> 组件打包采用 `rollup.config.js`,产物位于 `dist/VxeGridPro` 目录,按需引入即可。
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# VxeModalPro
|
|
2
|
+
|
|
3
|
+
## 组件介绍
|
|
4
|
+
VxeModalPro 是一个基于 Vue3 的弹窗插件,支持灵活配置和自定义内容,适用于多种业务场景。该组件对 [vxe-table](https://vxeui.com/#/modal/api/) 进行了二次封装,支持统一扩展功能配置,便于业务快速集成和后续扩展。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @cimom/ci-web-plugins-commom
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
> **注意:** 需引入主包样式文件:
|
|
13
|
+
> ```js
|
|
14
|
+
> import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
|
|
15
|
+
> ```
|
|
16
|
+
|
|
17
|
+
## 使用方法
|
|
18
|
+
|
|
19
|
+
### 全局注册
|
|
20
|
+
```js
|
|
21
|
+
import { createApp } from 'vue';
|
|
22
|
+
import VxeModalPro from '@cimom/ci-web-plugins-commom/VxeModalPro';
|
|
23
|
+
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css';
|
|
24
|
+
|
|
25
|
+
const app = createApp(App);
|
|
26
|
+
app.component('VxeModalPro', VxeModalPro);
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### 局部注册
|
|
30
|
+
```js
|
|
31
|
+
import VxeModalPro from '@cimom/ci-web-plugins-commom/VxeModalPro';
|
|
32
|
+
|
|
33
|
+
export default {
|
|
34
|
+
components: { VxeModalPro }
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 基本用法(推荐 v-model 控制显示)
|
|
39
|
+
```vue
|
|
40
|
+
<script setup>
|
|
41
|
+
import { ref } from 'vue';
|
|
42
|
+
import VxeModalPro from '@cimom/ci-web-plugins-commom/VxeModalPro';
|
|
43
|
+
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css';
|
|
44
|
+
|
|
45
|
+
const showPopup = ref(false);
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<template>
|
|
49
|
+
<button @click="showPopup = true">打开弹窗</button>
|
|
50
|
+
<VxeModalPro v-model="showPopup" title="测试弹窗">
|
|
51
|
+
<div>这里是弹窗内容</div>
|
|
52
|
+
</VxeModalPro>
|
|
53
|
+
</template>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 实例方法调用说明
|
|
57
|
+
|
|
58
|
+
VxeModalPro 支持通过 ref 获取组件实例,并通过 `Instance()` 方法获取底层 vxe-modal 实例,再调用其原生方法(如全屏/还原等)。
|
|
59
|
+
|
|
60
|
+
### 示例:调用全屏方法
|
|
61
|
+
|
|
62
|
+
```vue
|
|
63
|
+
<script setup>
|
|
64
|
+
import { ref } from 'vue';
|
|
65
|
+
import VxeModalPro from '@cimom/ci-web-plugins-commom/VxeModalPro';
|
|
66
|
+
import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css';
|
|
67
|
+
|
|
68
|
+
const showPopup = ref(false);
|
|
69
|
+
const modalRef = ref(null);
|
|
70
|
+
|
|
71
|
+
function openFullscreen() {
|
|
72
|
+
// 通过 Instance() 获取底层 vxe-modal 实例
|
|
73
|
+
const modalInstance = modalRef.value?.Instance?.();
|
|
74
|
+
if (modalInstance && modalInstance.zoom) {
|
|
75
|
+
modalInstance.zoom(); // 切换全屏/还原
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<template>
|
|
81
|
+
<button @click="showPopup = true">打开弹窗</button>
|
|
82
|
+
<VxeModalPro ref="modalRef" v-model="showPopup" title="测试弹窗">
|
|
83
|
+
<button @click="openFullscreen">全屏/还原</button>
|
|
84
|
+
<div>这里是弹窗内容</div>
|
|
85
|
+
</VxeModalPro>
|
|
86
|
+
</template>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
> 说明:VxeModalPro 通过 `Instance()` 方法暴露底层 vxe-modal 的实例,常用如 zoom()(全屏/还原)、maximize()、revert() 等,具体方法可参考 [vxe-table modal API](https://vxeui.com/#/modal/api/)。
|
|
90
|
+
|
|
91
|
+
## 属性说明
|
|
92
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
93
|
+
| --------- | ------------ | ------- | ------ |
|
|
94
|
+
| title | 弹窗标题 | String | - |
|
|
95
|
+
|
|
96
|
+
## 事件说明
|
|
97
|
+
| 事件名 | 说明 | 回调参数 |
|
|
98
|
+
| ------ | -------- | -------- |
|
|
99
|
+
| close | 关闭弹窗 | - |
|
|
100
|
+
|
|
101
|
+
## 插槽说明
|
|
102
|
+
| 插槽名 | 说明 |
|
|
103
|
+
| ------ | -------- |
|
|
104
|
+
| default| 弹窗内容 |
|
|
105
|
+
|
|
106
|
+
## 遮罩毛玻璃模糊强度效果
|
|
107
|
+
|
|
108
|
+
通过 `backdropFilter` 属性可设置弹窗遮罩的毛玻璃模糊强度(单位:px)。当弹窗打开时自动生效,关闭时自动移除。
|
|
109
|
+
|
|
110
|
+
**示例:**
|
|
111
|
+
```vue
|
|
112
|
+
<VxeModalPro v-model="showPopup" title="毛玻璃弹窗" :backdropFilter="8">
|
|
113
|
+
<div>带毛玻璃遮罩的弹窗内容</div>
|
|
114
|
+
</VxeModalPro>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
118
|
+
| ------ | ---------------------- | -------------- | ------ |
|
|
119
|
+
| backdropFilter | 遮罩毛玻璃模糊强度(px) | Number | null 可选【1-10】 |
|
|
120
|
+
|
|
121
|
+
## License
|
|
122
|
+
MIT
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import"../components/VxeModalPro/index.vue/index.js";import e from"../components/VxeModalPro/index.vue/index2.js";export{e as default};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# VxeTablePro 组件使用说明
|
|
2
2
|
|
|
3
3
|
## 简介
|
|
4
|
-
`VxeTablePro` 是基于 Vue3 + TypeScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://
|
|
4
|
+
`VxeTablePro` 是基于 Vue3 + TypeScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://vxeui.com/#/table/api/) 进行了二次封装,支持统一扩展功能配置,便于业务快速集成和后续扩展。
|
|
5
5
|
|
|
6
6
|
## 安装
|
|
7
7
|
|
|
@@ -51,6 +51,36 @@ function currentRowChange(params) {
|
|
|
51
51
|
|
|
52
52
|
所有 `vxe-table` 插槽均可透传,使用方式与原生一致。
|
|
53
53
|
|
|
54
|
+
## 实例方法调用说明
|
|
55
|
+
|
|
56
|
+
VxeTablePro 支持通过 ref 获取组件实例,并通过 `Instance()` 方法获取底层 vxe-table 实例,再调用其原生方法(如刷新、获取选中行等)。
|
|
57
|
+
|
|
58
|
+
### 示例:调用原生方法
|
|
59
|
+
|
|
60
|
+
```vue
|
|
61
|
+
<script setup>
|
|
62
|
+
import { ref } from 'vue';
|
|
63
|
+
import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro';
|
|
64
|
+
|
|
65
|
+
const tableRef = ref(null);
|
|
66
|
+
|
|
67
|
+
function clearSelection() {
|
|
68
|
+
// 通过 Instance() 获取底层 vxe-table 实例
|
|
69
|
+
const tableInstance = tableRef.value?.Instance?.();
|
|
70
|
+
if (tableInstance && tableInstance.clearCheckboxRow) {
|
|
71
|
+
tableInstance.clearCheckboxRow(); // 清除所有勾选行
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<VxeTablePro ref="tableRef" :data="[]" />
|
|
78
|
+
<button @click="clearSelection">清除勾选</button>
|
|
79
|
+
</template>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
> 说明:VxeTablePro 通过 `Instance()` 方法暴露底层 vxe-table 的实例,常用如 clearCheckboxRow()、getCheckboxRecords() 等,具体方法可参考 [vxe-table table API](https://vxeui.com/#/table/api/)。
|
|
83
|
+
|
|
54
84
|
---
|
|
55
85
|
|
|
56
86
|
> 组件打包采用 `rollup.config.js`,产物位于 `dist/VxeTablePro` 目录,按需引入即可。
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{reactive as e,ref as s,resolveComponent as a,createElementBlock as t,openBlock as n,createVNode as
|
|
1
|
+
import{reactive as e,ref as s,resolveComponent as a,createElementBlock as t,openBlock as n,createVNode as d,normalizeProps as l,guardReactiveProps as r}from"vue";const i={class:"text-blue-500"};var o={__name:"HelloPlugin",props:{msg1:String},setup(o){const g=e({columns:[{type:"seq",width:70},{field:"name",title:"Name"},{field:"sex",title:"Sex"},{field:"age",title:"Age"}],data:[{id:10001,name:"Test1",role:"Develop",sex:"Man",age:28,address:"test abc"},{id:10002,name:"Test2",role:"Test",sex:"Women",age:22,address:"Guangzhou"},{id:10003,name:"Test3",role:"PM",sex:"Man",age:32,address:"Shanghai"},{id:10004,name:"Test4",role:"Designer",sex:"Women",age:24,address:"Shanghai"}]});return s(0),(e,s)=>{const o=a("vxe-grid");return n(),t("div",i,[d(o,l(r(g)),null,16)])}}};export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{reactive as e,ref as
|
|
1
|
+
import{reactive as e,ref as a,resolveComponent as s,createElementBlock as t,openBlock as d,createVNode as n,normalizeProps as r,guardReactiveProps as l}from"vue";const i={class:"card"};var o={__name:"HelloWorld",props:{msg:String},setup(o){const g=e({columns:[{type:"seq",width:70},{field:"name",title:"Name"},{field:"sex",title:"Sex"},{field:"age",title:"Age"}],data:[{id:10001,name:"Test1",role:"Develop",sex:"Man",age:28,address:"test abc"},{id:10002,name:"Test2",role:"Test",sex:"Women",age:22,address:"Guangzhou"},{id:10003,name:"Test3",role:"PM",sex:"Man",age:32,address:"Shanghai"},{id:10004,name:"Test4",role:"Designer",sex:"Women",age:24,address:"Shanghai"}]});return a(0),(e,a)=>{const o=s("vxe-grid");return d(),t("div",i,[n(o,r(l(g)),null,16)])}}};export{o as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{computed as
|
|
1
|
+
import{computed as e,useAttrs as r,resolveComponent as n,createElementBlock as o,openBlock as l,Fragment as s,createCommentVNode as t,createVNode as a,mergeProps as u,createSlots as p,renderList as i,withCtx as m,renderSlot as c,normalizeProps as f,guardReactiveProps as d}from"vue";var v={__name:"index",props:{columns:Array,data:Array,proOptions:{type:Object,default:()=>({})}},setup(v,{expose:g}){const x=v,y=e((()=>x.proOptions.align?x.columns?.map((e=>({...e,align:e.align||x.proOptions.align}))):x.columns)),O=r(),_={border:!0,stripe:!0,size:"small"},b=e((()=>({..._,...x,...O,columns:y.value}))),A=ref(null);return g({Instance:function(){return A.value}}),(e,r)=>{const v=n("vxe-grid");return l(),o(s,null,[t(" 透传所有属性,合并扩展功能 "),a(v,u({ref_key:"vxeGirdProRef",ref:A},b.value),p({_:2},[i(e.$slots,((r,n)=>({name:n,fn:m((r=>[c(e.$slots,n,f(d(r)))]))})))]),1040)],2112)}}};export{v as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"./index2.js";e.__scopeId="data-v-915c26f4",e.__file="src/components/VxeModalPro/index.vue";export{e as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useAttrs as e,computed as t,ref as r,onMounted as n,watch as l,resolveComponent as o,createElementBlock as a,openBlock as d,Fragment as p,createCommentVNode as u,createVNode as i,mergeProps as c,createSlots as m,renderList as s,withCtx as b,renderSlot as f,normalizeProps as v,guardReactiveProps as x}from"vue";var k={__name:"index",props:{proOptions:{type:Object,default:()=>({})},backdropFilter:{type:[Number,String],default:null}},setup(k,{expose:y}){const g=k,F=e(),$={width:600,draggable:!0,resize:!0},{proOptions:_,backdropFilter:h,...w}=g,O=t((()=>({...$,...w,...F,..._}))),E=r(null);function I(e){let t="dynamic-vxe-modal-blur-style",r=document.getElementById(t);if(!e)return void(r&&r.remove());const n=`.vxe-modal--wrapper {\n backdrop-filter: blur(${e}px) !important;\n -webkit-backdrop-filter: blur(${e}px) !important;\n}`;r||(r=document.createElement("style"),r.id=t,document.head.appendChild(r)),r.innerHTML=n}return n((()=>{})),l((()=>g.backdropFilter),(e=>{I(e)})),l((()=>F.modelValue),(e=>{I(e?g.backdropFilter:null)})),y({Instance:function(){return E.value}}),(e,t)=>{const r=o("vxe-modal");return d(),a(p,null,[u(" 透传所有属性,合并扩展功能 "),i(r,c({ref_key:"vxeModalProRef",ref:E},O.value),m({_:2},[s(e.$slots,((t,r)=>({name:r,fn:b((t=>[f(e.$slots,r,v(x(t)))]))})))]),1040)],2112)}}};export{k as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useAttrs as e,useSlots as r,computed as
|
|
1
|
+
import{useAttrs as e,useSlots as r,computed as t,ref as n,resolveComponent as s,createBlock as o,openBlock as a,mergeProps as l,toHandlers as u,unref as f,createSlots as p,renderList as v,withCtx as c,renderSlot as i,normalizeProps as m,guardReactiveProps as x}from"vue";var _={__name:"index",props:{},setup(_,{expose:b}){const d={border:!0,stripe:!0,size:"small"},$=_,k=e();r();const y=t((()=>({...d,...$,...k}))),z=k,I=n(null);return b({Instance:function(){return I.value}}),(e,r)=>{const t=s("vxe-table");return a(),o(t,l(y.value,u(f(z)),{ref_key:"vxeTableProRef",ref:I}),p({_:2},[v(e.$slots,((r,t)=>({name:t,fn:c((r=>[i(e.$slots,t,m(x(r)))]))})))]),1040)}}};export{_ as default};
|
package/dist/index/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import"../components/HelloPlugin.vue/index.js";import"../components/HelloWorld.vue/index.js";import"../components/VxeGridPro/index.vue/index.js";import"../components/VxeTablePro/index.vue/index.js";import o from"../components/HelloPlugin.vue/index2.js";import e from"../components/HelloWorld.vue/index2.js";import n from"../components/VxeGridPro/index.vue/index2.js";import
|
|
1
|
+
import"../components/HelloPlugin.vue/index.js";import"../components/HelloWorld.vue/index.js";import"../components/VxeGridPro/index.vue/index.js";import"../components/VxeTablePro/index.vue/index.js";import"../components/VxeModalPro/index.vue/index.js";import o from"../components/HelloPlugin.vue/index2.js";import e from"../components/HelloWorld.vue/index2.js";import n from"../components/VxeGridPro/index.vue/index2.js";import r from"../components/VxeTablePro/index.vue/index2.js";import i from"../components/VxeModalPro/index.vue/index2.js";var l={install(l){l.component("HelloPlugin",o),l.component("HelloWorld",e),l.component("VxeGridPro",n),l.component("VxeTablePro",r),l.component("VxeModalPro",i)}};export{o as HelloPlugin,e as HelloWorld,n as VxeGridPro,i as VxeModalPro,r as VxeTablePro,l as default};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cimom/ci-web-plugins-commom",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.7",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Andy Huang",
|
|
@@ -18,8 +18,6 @@
|
|
|
18
18
|
"lib": "vite build --config vite.config.ts",
|
|
19
19
|
"preview": "vite preview"
|
|
20
20
|
},
|
|
21
|
-
"main": "dist/CI.Web.Plugins.Commom.umd.js",
|
|
22
|
-
"module": "dist/CI.Web.Plugins.Commom.es.js",
|
|
23
21
|
"peerDependencies": {
|
|
24
22
|
"vue": "^3.5.13",
|
|
25
23
|
"vxe-table": "4.13.37"
|
|
@@ -27,7 +25,6 @@
|
|
|
27
25
|
"devDependencies": {
|
|
28
26
|
"@rollup/plugin-commonjs": "^28.0.3",
|
|
29
27
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
30
|
-
"@tailwindcss/postcss": "^4.1.8",
|
|
31
28
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
32
29
|
"@vue/tsconfig": "^0.7.0",
|
|
33
30
|
"autoprefixer": "^10.4.21",
|
|
@@ -38,13 +35,14 @@
|
|
|
38
35
|
"rollup-plugin-terser": "^7.0.2",
|
|
39
36
|
"rollup-plugin-vue": "^6.0.0",
|
|
40
37
|
"sass": "^1.89.2",
|
|
41
|
-
"tailwindcss": "^4.1
|
|
38
|
+
"tailwindcss": "^3.4.1",
|
|
42
39
|
"typescript": "~5.8.3",
|
|
43
40
|
"vite": "^6.3.5",
|
|
44
41
|
"vite-plugin-lazy-import": "^1.0.7",
|
|
45
42
|
"vue": "^3.5.13",
|
|
46
43
|
"vue-tsc": "^2.2.8",
|
|
47
|
-
"vxe-table": "4.13.37"
|
|
44
|
+
"vxe-table": "4.13.37",
|
|
45
|
+
"rollup-plugin-copy": "^3.5.0"
|
|
48
46
|
},
|
|
49
47
|
"publishConfig": {
|
|
50
48
|
"access": "public"
|
|
@@ -64,11 +62,11 @@
|
|
|
64
62
|
},
|
|
65
63
|
"./VxeGridPro": {
|
|
66
64
|
"import": "./dist/VxeGridPro/index.js"
|
|
65
|
+
},
|
|
66
|
+
"./VxeModalPro": {
|
|
67
|
+
"import": "./dist/VxeModalPro/index.js"
|
|
67
68
|
}
|
|
68
69
|
},
|
|
69
|
-
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
|
70
|
-
|
|
71
|
-
"@cimom/ci-web-plugins-commom": "^1.0.4",
|
|
72
|
-
"rollup-plugin-copy": "^3.5.0"
|
|
73
|
-
}
|
|
70
|
+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
|
71
|
+
|
|
74
72
|
}
|