@cimom/ci-web-plugins-commom 1.0.4 → 1.0.6

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 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。
@@ -6,7 +15,6 @@
6
15
 
7
16
  ```bash
8
17
  npm install @cimom/ci-web-plugins-commom
9
- npm run dev
10
18
  ```
11
19
 
12
20
  ## 打包与发布
@@ -15,17 +23,13 @@ npm run dev
15
23
  ```bash
16
24
  npm run build
17
25
  ```
18
- 打包产物会输出到 `dist/` 目录,包括:
19
- - `CI.Web.Plugins.Commom.umd.js` (UMD 格式,适合直接 script 标签引用)
20
- - `CI.Web.Plugins.Commom.es.js` (ESM 格式,适合现代打包工具)
21
- - `CI.Web.Plugins.Commom.css` (包含所有 TailwindCSS 原子类和自定义样式)
22
26
 
23
27
  ### 发布到 NPM
24
28
  1. 修改 `package.json` 中的 `name`、`version`、`description` 等信息。
25
29
  2. 确认 `main`、`module`、`types` 字段已指向 `dist/` 下的对应文件。
26
30
  3. 执行:
27
31
  ```bash
28
- npm publish --access public
32
+ npm publish
29
33
  ```
30
34
  > 建议发布前切换为 npm 官方源:`npm config set registry https://registry.npmjs.org/`
31
35
 
@@ -54,7 +58,7 @@ app.mount('#app')
54
58
 
55
59
  **局部注册:**
56
60
  ```vue
57
- <script setup lang="ts">
61
+ <script setup>
58
62
  import { HelloPlugin, HelloWorld, VxeTablePro } from '@cimom/ci-web-plugins-commom'
59
63
  import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
60
64
  </script>
@@ -66,13 +70,6 @@ import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
66
70
  </template>
67
71
  ```
68
72
 
69
- ### 2. 本地 dist 产物直接引入
70
-
71
- #### ESM 方式
72
- ```js
73
- import { HelloPlugin, HelloWorld, VxeTablePro } from './dist/CI.Web.Plugins.Commom.es.js'
74
- import './dist/CI.Web.Plugins.Commom.css'
75
- ```
76
73
 
77
74
  #### UMD 方式(适合 script 标签直接引入)
78
75
  ```html
@@ -121,13 +118,11 @@ npm install @cimom/ci-web-plugins-commom
121
118
  import {HelloPlugin,HelloWorld} from '@cimom/ci-web-plugins-commom'
122
119
  import '@cimom/ci-web-plugins-commom/dist/CI.Web.Plugins.Commom.css'
123
120
  ```
124
- ## 实际使用案例:
125
- import { HelloPlugin,HelloWorld } from './testPlugins/vxetable/CI.Web.Plugins.Commom.es.js'
121
+ ## 开发使用案例:
126
122
  ```
127
123
  <script setup>
128
- // import HelloPlugin from './components/HelloPlugin.vue'
129
- // import HelloWorld from './components/HelloWorld.vue'
130
- import { HelloPlugin,HelloWorld,VxeTablePro } from './testPlugins/vxetable/CI.Web.Plugins.Commom.es.js'
124
+ import HelloPlugin from './components/HelloPlugin.vue'
125
+ import HelloWorld from './components/HelloWorld.vue'
131
126
  </script>
132
127
 
133
128
  <template>
@@ -1,2 +1,3 @@
1
-
2
- /*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */.flex{display:flex}.flex-col{flex-direction:column}.justify-center{justify-content:center}.border{border-style:var(--tw-border-style);border-width:1px}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid}}}
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}.resize{resize:both}.flex-col{flex-direction:column}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.border{border-width:1px}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.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))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
@@ -0,0 +1,61 @@
1
+ # VxeGridPro 组件使用说明
2
+
3
+ ## 简介
4
+ `VxeGridPro` 是基于 Vue3 + TypeScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://vxeui.com/#/grid/api/) 进行了二次封装,支持统一扩展功能配置,便于业务快速集成和后续扩展。
5
+
6
+ ## 安装
7
+
8
+ ```bash
9
+ npm install @cimom/ci-web-plugins-commom
10
+ ```
11
+
12
+ ## 使用方法
13
+
14
+ ```vue
15
+ <script setup>
16
+ import VxeGridPro from '@cimom/ci-web-plugins-commom/VxeGridPro'
17
+ import { reactive } from 'vue'
18
+ const gridOptions = reactive({
19
+ columns: [
20
+ { type: 'seq', width: 70 },
21
+ { field: 'name', title: '姓名', slots: { header: 'header_name' } },
22
+ { field: 'sex', title: '性别' },
23
+ { field: 'age', title: '年龄' }
24
+ ],
25
+ data: [
26
+ { id: 10001, name: '张三', sex: '男', age: 28 },
27
+ { id: 10002, name: '李四', sex: '女', age: 22 }
28
+ ]
29
+ })
30
+ function currentRowChange(params) {
31
+ alert(params.row.name)
32
+ }
33
+ </script>
34
+
35
+ <template>
36
+ <VxeGridPro
37
+ @current-row-change="currentRowChange"
38
+ :stripe="true"
39
+ :border="false"
40
+ :rowConfig="{ isCurrent: true, isHover: true }"
41
+ :columns="gridOptions.columns"
42
+ :data="gridOptions.data"
43
+ :proOptions="{ align: 'left' }"
44
+ >
45
+ <template #top>
46
+ hello top template
47
+ </template>
48
+ <template #header_name>
49
+ <span style="color: red">自定义表头</span>
50
+ </template>
51
+ </VxeGridPro>
52
+ </template>
53
+ ```
54
+
55
+ ### 插槽支持
56
+
57
+ 所有 `vxe-grid` 插槽均可透传,使用方式与原生一致。
58
+
59
+ ---
60
+
61
+ > 组件打包采用 `rollup.config.js`,产物位于 `dist/VxeGridPro` 目录,按需引入即可。
@@ -0,0 +1,74 @@
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
+ | --------- | ------------ | ------- | ------ |
59
+ | modelValue| 弹窗显示状态 | Boolean | false |
60
+ | title | 弹窗标题 | String | - |
61
+
62
+ ## 事件说明
63
+ | 事件名 | 说明 | 回调参数 |
64
+ | ------ | -------- | -------- |
65
+ | update:modelValue | v-model 绑定 | (value: Boolean) |
66
+ | close | 关闭弹窗 | - |
67
+
68
+ ## 插槽说明
69
+ | 插槽名 | 说明 |
70
+ | ------ | -------- |
71
+ | default| 弹窗内容 |
72
+
73
+ ## License
74
+ 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};
@@ -0,0 +1,56 @@
1
+ # VxeTablePro 组件使用说明
2
+
3
+ ## 简介
4
+ `VxeTablePro` 是基于 Vue3 + TypeScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://vxeui.com/#/table/api/) 进行了二次封装,支持统一扩展功能配置,便于业务快速集成和后续扩展。
5
+
6
+ ## 安装
7
+
8
+ ```bash
9
+ npm install @cimom/ci-web-plugins-commom
10
+ ```
11
+
12
+ ## 使用方法
13
+
14
+ ```vue
15
+ <script setup>
16
+ import { VxeTablePro } from '@cimom/ci-web-plugins-commom'
17
+
18
+ import VxeTablePro from '@cimom/ci-web-plugins-commom/VxeTablePro' // 独立引用 可减少打包体积
19
+ import { reactive } from 'vue'
20
+ const gridOptions = reactive({
21
+ data: [
22
+ { id: '10001', name: '张三', role: '开发', sex: '男', num: '28', address: '北京' },
23
+ { id: '10002', name: '李四', role: '测试', sex: '女', num: '22', address: '上海' }
24
+ ]
25
+ })
26
+ const footerData = [
27
+ { seq: '合计', num: '50' },
28
+ { seq: '平均', num: '25' }
29
+ ]
30
+ function currentRowChange(params) {
31
+ alert(params.row.name)
32
+ }
33
+ </script>
34
+
35
+ <template>
36
+ <VxeTablePro
37
+ @current-row-change="currentRowChange"
38
+ :rowConfig="{ isCurrent: true, isHover: true }"
39
+ :data="gridOptions.data"
40
+ show-footer
41
+ :footer-data="footerData"
42
+ border
43
+ stripe
44
+ height="400"
45
+ :column-config="{ resizable: true }"
46
+ />
47
+ </template>
48
+ ```
49
+
50
+ ### 插槽支持
51
+
52
+ 所有 `vxe-table` 插槽均可透传,使用方式与原生一致。
53
+
54
+ ---
55
+
56
+ > 组件打包采用 `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 l,normalizeProps as r,guardReactiveProps as d}from"vue";const i={class:"card flex flex-col justify-center"};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,[l(o,r(d(g)),null,16)])}}};export{o as default};
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 s,resolveComponent as a,createElementBlock as t,openBlock as r,createVNode as d,normalizeProps as n,guardReactiveProps as l}from"vue";const o={class:"card border text-red-200 flex flex-col justify-center"};var i={__name:"HelloWorld",props:{msg:String},setup(i){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 i=a("vxe-grid");return r(),t("div",o,[d(i,n(l(g)),null,16)])}}};export{i as default};
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 n,useAttrs as r,resolveComponent as o,createElementBlock as s,openBlock as a,Fragment as e,createCommentVNode as l,createVNode as t,normalizeProps as p,guardReactiveProps as u,createSlots as i,renderList as m,withCtx as c,renderSlot as d}from"vue";var g={__name:"index",props:{columns:Array,data:Array,proOptions:{type:Object,default:()=>({})}},setup(g){const v=g,f=n((()=>v.proOptions.align?v.columns?.map((n=>({...n,align:n.align||v.proOptions.align}))):v.columns)),O=r(),x={border:!0,stripe:!0,size:"small"},y=n((()=>({...x,...v,...O,columns:f.value})));return(n,r)=>{const g=o("vxe-grid");return a(),s(e,null,[l(" 透传所有属性,合并扩展功能 "),t(g,p(u(y.value)),i({_:2},[m(n.$slots,((r,o)=>({name:o,fn:c((r=>[d(n.$slots,o,p(u(r)))]))})))]),1040)],2112)}}};export{g as default};
1
+ import{computed as r,useAttrs as e,resolveComponent as n,createElementBlock as o,openBlock as s,Fragment as a,createCommentVNode as l,createVNode as t,mergeProps as p,createSlots as i,renderList as u,withCtx as m,renderSlot as c,normalizeProps as d,guardReactiveProps as f}from"vue";var v={__name:"index",props:{columns:Array,data:Array,proOptions:{type:Object,default:()=>({})}},setup(v){const g=v,x=r((()=>g.proOptions.align?g.columns?.map((r=>({...r,align:r.align||g.proOptions.align}))):g.columns)),O=e(),y={border:!0,stripe:!0,size:"small"},_=r((()=>({...y,...g,...O,columns:x.value})));return(r,e)=>{const v=n("vxe-grid");return s(),o(a,null,[l(" 透传所有属性,合并扩展功能 "),t(v,p({ref:"vxeGirdProRef"},_.value),i({_:2},[u(r.$slots,((e,n)=>({name:n,fn:m((e=>[c(r.$slots,n,d(f(e)))]))})))]),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,resolveComponent as o,createElementBlock as r,openBlock as s,Fragment as n,createCommentVNode as a,createVNode as p,normalizeProps as l,guardReactiveProps as u,createSlots as d,renderList as i,withCtx as m,renderSlot as f}from"vue";var v={__name:"index",props:{proOptions:{type:Object,default:()=>({})}},setup(v){const c=v,x=e(),O={width:600,draggable:!0,resize:!0},{proOptions:_,...b}=c,g=t((()=>({...O,...b,...x,..._})));return(e,t)=>{const v=o("vxe-modal");return s(),r(n,null,[a(" 透传所有属性,合并扩展功能 "),p(v,l(u(g.value)),d({_:2},[i(e.$slots,((t,o)=>({name:o,fn:m((t=>[f(e.$slots,o,l(u(t)))]))})))]),1040)],2112)}}};export{v as default};
@@ -1 +1 @@
1
- import{useAttrs as e,useSlots as r,computed as s,ref as t,resolveComponent as o,createBlock as a,openBlock as n,mergeProps as l,toHandlers as f,unref as p,createSlots as u,renderList as m,withCtx as v,renderSlot as i,normalizeProps as x,guardReactiveProps as _}from"vue";var b={__name:"index",props:{},setup(b){const c={border:!0,stripe:!0,size:"small"},d=b,$=e();r();const k=s((()=>({...c,...d,...$}))),y=$,z=t();return(e,r)=>{const s=o("vxe-table");return n(),a(s,l(k.value,f(p(y)),{ref_key:"vxeTableRef",ref:z}),u({_:2},[m(e.$slots,((r,s)=>({name:s,fn:v((r=>[i(e.$slots,s,x(_(r)))]))})))]),1040)}}};export{b as default};
1
+ import{useAttrs as e,useSlots as r,computed as s,ref as t,resolveComponent as o,createBlock as a,openBlock as n,mergeProps as l,toHandlers as p,unref as u,createSlots as f,renderList as m,withCtx as v,renderSlot as i,normalizeProps as x,guardReactiveProps as b}from"vue";var c={__name:"index",props:{},setup(c){const d={border:!0,stripe:!0,size:"small"},_=c,$=e();r();const z=s((()=>({...d,..._,...$}))),P=$;return t(),(e,r)=>{const s=o("vxe-table");return n(),a(s,l(z.value,p(u(P)),{ref:"vxeTableProRef"}),f({_:2},[m(e.$slots,((r,s)=>({name:s,fn:v((r=>[i(e.$slots,s,x(b(r)))]))})))]),1040)}}};export{c as default};
@@ -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 l from"../components/VxeTablePro/index.vue/index2.js";var r={install(r){r.component("HelloPlugin",o),r.component("HelloWorld",e),r.component("VxeGridPro",n),r.component("VxeTablePro",l)}};export{o as HelloPlugin,e as HelloWorld,n as VxeGridPro,l as VxeTablePro,r as default};
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,15 +1,14 @@
1
1
  {
2
2
  "name": "@cimom/ci-web-plugins-commom",
3
3
  "private": false,
4
- "version": "1.0.4",
4
+ "version": "1.0.6",
5
5
  "license": "MIT",
6
6
  "author": {
7
7
  "name": "Andy Huang",
8
8
  "email": "57237184@qq.com"
9
9
  },
10
10
  "files": [
11
- "dist",
12
- "*.md"
11
+ "dist"
13
12
  ],
14
13
  "type": "module",
15
14
  "scripts": {
@@ -19,33 +18,31 @@
19
18
  "lib": "vite build --config vite.config.ts",
20
19
  "preview": "vite preview"
21
20
  },
22
- "main": "dist/CI.Web.Plugins.Commom.umd.js",
23
- "module": "dist/CI.Web.Plugins.Commom.es.js",
24
21
  "peerDependencies": {
25
22
  "vue": "^3.5.13",
26
23
  "vxe-table": "4.13.37"
27
24
  },
28
25
  "devDependencies": {
29
- "@tailwindcss/postcss": "^4.1.8",
26
+ "@rollup/plugin-commonjs": "^28.0.3",
27
+ "@rollup/plugin-node-resolve": "^16.0.1",
30
28
  "@vitejs/plugin-vue": "^5.2.3",
31
29
  "@vue/tsconfig": "^0.7.0",
32
30
  "autoprefixer": "^10.4.21",
33
31
  "postcss": "^8.5.4",
32
+ "rollup": "^4.43.0",
33
+ "rollup-plugin-css-only": "^4.5.2",
34
+ "rollup-plugin-postcss": "^4.0.2",
35
+ "rollup-plugin-terser": "^7.0.2",
36
+ "rollup-plugin-vue": "^6.0.0",
34
37
  "sass": "^1.89.2",
35
- "tailwindcss": "^4.1.8",
38
+ "tailwindcss": "^3.4.1",
36
39
  "typescript": "~5.8.3",
37
40
  "vite": "^6.3.5",
38
41
  "vite-plugin-lazy-import": "^1.0.7",
39
42
  "vue": "^3.5.13",
40
43
  "vue-tsc": "^2.2.8",
41
44
  "vxe-table": "4.13.37",
42
- "@rollup/plugin-commonjs": "^28.0.3",
43
- "@rollup/plugin-node-resolve": "^16.0.1",
44
- "rollup": "^4.43.0",
45
- "rollup-plugin-css-only": "^4.5.2",
46
- "rollup-plugin-postcss": "^4.0.2",
47
- "rollup-plugin-terser": "^7.0.2",
48
- "rollup-plugin-vue": "^6.0.0"
45
+ "rollup-plugin-copy": "^3.5.0"
49
46
  },
50
47
  "publishConfig": {
51
48
  "access": "public"
@@ -65,6 +62,11 @@
65
62
  },
66
63
  "./VxeGridPro": {
67
64
  "import": "./dist/VxeGridPro/index.js"
65
+ },
66
+ "./VxeModalPro": {
67
+ "import": "./dist/VxeModalPro/index.js"
68
68
  }
69
- }
69
+ },
70
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
71
+
70
72
  }
package/VxeTablePro.md DELETED
@@ -1,139 +0,0 @@
1
- # VxeTablePro 组件使用说明
2
-
3
- ## 简介
4
- `VxeTablePro` 是基于 Vue3 + JavaScript 的表格插件模板,集成了 SCSS、CSS、TailwindCSS,适用于 NPM 发布。该组件对 [vxe-table](https://x-extends.github.io/vxe-table/) 进行了二次封装,支持统一扩展功能配置,便于业务快速集成和后续扩展。
5
-
6
- ## 安装
7
-
8
- ```bash
9
- npm install ci-web-plugins-commom-vxetable
10
- ```
11
-
12
- 或直接复制 `src/components/VxeTablePro` 目录到你的项目中。
13
-
14
- ## 使用方法
15
-
16
- ```vue
17
- <script setup>
18
- import VxeTablePro from 'ci-web-plugins-commom-vxetable/src/components/VxeTablePro'
19
-
20
- const columns = [
21
- { field: 'name', title: '姓名' },
22
- { field: 'age', title: '年龄' }
23
- ]
24
- const data = [
25
- { name: '张三', age: 18 },
26
- { name: '李四', age: 20 }
27
- ]
28
- const proOptions = {
29
- align: 'center' // 统一设置所有列的对齐方式
30
- }
31
- </script>
32
-
33
- <template>
34
- <VxeTablePro :columns="columns" :data="data" :proOptions="proOptions" />
35
- </template>
36
- ```
37
-
38
- ### 插槽支持
39
-
40
- 所有 `vxe-grid` 插槽均可透传,使用方式与原生一致:
41
-
42
- ```vue
43
- <VxeTablePro ...>
44
- <template #toolbar_buttons>
45
- <button>自定义按钮</button>
46
- </template>
47
- </VxeTablePro>
48
- ```
49
- ```
50
- <script setup>
51
- // import VxeTablePro from '../../components/VxeTablePro/index.vue'
52
- //import { VxeTablePro } from '@/testPlugins/JS-dll/CI.Web.Plugins.Commom.es.js'
53
- import { VxeTablePro } from '@cimom/ci-web-plugins-commom'
54
- import { reactive,ref } from 'vue'
55
- const gridOptions = reactive({
56
- columns: [
57
- { type: 'seq', width: 70 },
58
- { field: 'name', title: 'Name111' ,slots: { header: 'header_name' }},
59
- { field: 'sex', title: 'Sex' },
60
- { field: 'age', title: 'Age' }
61
- ],
62
- data: [
63
- { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
64
- { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
65
- { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
66
- { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
67
- ]
68
- })
69
- </script>
70
-
71
- <template>
72
- <VxeTablePro
73
- :stripe="true"
74
- :border="false"
75
- :rowConfig="{
76
- isCurrent: true,
77
- isHover: true
78
- }"
79
- :columns="gridOptions.columns"
80
- :data="gridOptions.data"
81
- :proOptions="{ align: 'left' }"
82
- >
83
- <template #top>
84
- hello top template
85
- </template>
86
- <template #header_name>
87
- <div class="first-col">
88
- <div class="first-col-top">名称1</div>
89
- <div class="first-col-bottom">序号2</div>
90
- </div>
91
- </template>
92
- <template #bottom>
93
- hello bottom template
94
- </template>
95
- </VxeTablePro>
96
-
97
- </template>
98
-
99
- <style scoped>
100
-
101
- </style>
102
-
103
-
104
- ```
105
- ## 属性说明
106
-
107
- | 属性 | 说明 | 类型 | 默认值 |
108
- | ----------- | -------------------------- | ------- | -------- |
109
- | columns | 表格列配置 | Array | [] |
110
- | data | 表格数据 | Array | [] |
111
- | proOptions | 扩展功能配置(如统一对齐) | Object | {} |
112
- | ... | 透传 vxe-grid 所有原有属性 | | |
113
-
114
- ### proOptions 扩展
115
- - `align`:统一设置所有列的对齐方式(如 'left'、'center'、'right')。
116
-
117
- ## 后续功能扩展建议
118
-
119
- 1. **更多 proOptions 扩展**:
120
- - 支持统一设置列宽、表头样式、排序、筛选等。
121
- - 支持自定义渲染函数、格式化函数等。
122
- 2. **类型增强**:
123
- - 完善 JavaScript 类型定义,提升开发体验。
124
- 3. **主题与样式**:
125
- - 支持多主题切换,集成更多 TailwindCSS 实用样式。
126
- 4. **国际化支持**:
127
- - 提供多语言配置,适配不同地区需求。
128
- 5. **事件透传与增强**:
129
- - 支持更多事件的透传与自定义事件扩展。
130
- 6. **性能优化**:
131
- - 针对大数据量表格进行虚拟滚动等优化。
132
-
133
- ## 贡献与反馈
134
-
135
- 欢迎提交 issue 或 PR,提出你的建议和需求!
136
-
137
- ---
138
-
139
- > 本项目为 Vue3+JavaScript 插件模板,适用于 NPM 发布,欢迎二次开发和定制。