web-component-gallery 1.3.12 → 2.0.2

package/{plugins/lib/form → lib/model}/Model.js

@@ -1,10 +1,8 @@
 import { FormModel } from 'ant-design-vue'
 import { getFormWidth, setFormItemRule, setFormItem } from './utils/render'
 
-import './style/Model.less'
-
 export default {
-  name: 'Model',
+  name: 'WModel',
   model: {
     prop: 'value',
     event: 'Change:Model'

package/lib/model/index.js

@@ -0,0 +1,7 @@
+import Model from './Model.js'
+
+Model.install = function (Vue) { 
+  Vue.component(Model.name, Model)
+}
+
+export default Model

package/lib/model/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/lib/{form/style/Model.less → model/style/index.less}

@@ -1,7 +1,8 @@
+@import '../../form-comp/style/index.less';
 
 .FormModel {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: wrap; 
 
   &__LabelTips {
     width: 100%;
@@ -10,37 +11,36 @@
   .ant-select,
   .ant-input-number,
   .ant-calendar-picker { 
-    width: 100% !important;
+    width: 100%;
   }
 
   .ant-form-item-children {
     display: flex;
-    align-items: center;
+    align-items: center;  
   }
 
   .FormLine {
     display: flex;
 
-    :deep(.ant-form-item-label) {
+    .ant-form-item-label {
       width: 85px;
       text-align: right;
     }
 
-    :deep(.ant-form-item-control-wrapper) {
+    .ant-form-item-control-wrapper {
       width: calc(100% - 85px);
     }
   }
 
   .FormLineVertical {
-    display: flex;
-    flex-direction: column;
+    .flex-layout(column);
 
-    :deep(.ant-form-item-label) {
-      text-align: left;
+    .ant-form-item-label {
       width: 100%;
+      text-align: left;
     }
 
-    :deep(.ant-form-item-control-wrapper) {
+    .ant-form-item-control-wrapper {
       width: 100%;
     }
   }

package/{plugins/lib/form → lib/model}/utils/render.js

@@ -1,5 +1,5 @@
 import { FormModel } from 'ant-design-vue'
-import RenderComp from '../components/RenderComp.vue'
+import RenderComp from '../../form-comp/RenderComp.vue'
 
 const FormModelItem = FormModel.Item
 

package/lib/{form → model}/utils/resetFields.js

@@ -1,5 +1,5 @@
 /** 根据属性类型重置数据初始化 */
-export function resetFields(formObj) {
+export function resetFields(formObj) { 
     const initialForm = {}
     for (const key in formObj) {
         if ( formObj[key] === null || typeof formObj[key] !== 'object') {

package/lib/no-data/directive.js

@@ -0,0 +1,65 @@
+import NoData from './index.vue'
+
+// <!-- 基础用法 -->
+// <div v-no-data="list"></div> 
+// <!-- 指定描述内容 -->
+// <div v-no-data:暂无="list"></div>
+// <!-- 指定图标类型 -->
+// <div v-no-data.error="list"></div>
+// <!-- 既指定描述内容, 也指定图标类型 -->
+// <div v-no-data:暂无数据.error="list"></div>
+
+const isEmpty = value => {
+    return value === null ||
+        value === undefined ||
+        (Array.isArray(value) && !value.length) ||
+        (typeof value === 'object' && !Object.keys(value).length)
+}
+
+export default function(Vue) {
+    const createNoDataInstance = (el, binding) => {
+        const modifierType = Object.keys(binding.modifiers)[0] || 'zanwushuju'
+        
+        const instance = new (Vue.extend(NoData))({
+            propsData: {
+                text: binding.arg || '暂无数据',
+                type: modifierType
+            }
+        }).$mount()
+
+        el._noDataInstance = instance
+        el.parentNode.insertBefore(instance.$el, el)
+    }
+
+    const removeNoDataInstance = (el) => {
+        if (el._noDataInstance) {
+            el.parentNode.removeChild(el._noDataInstance.$el)
+            el._noDataInstance.$destroy()
+            el._noDataInstance = null
+        }
+    }
+
+    return {
+        inserted(el, binding) {
+            if (isEmpty(binding.value)) {
+                createNoDataInstance(el, binding)
+            }
+        },
+        update(el, binding) {
+            if (binding.oldValue !== binding.value) {
+                if (isEmpty(binding.value)) {
+                    if (!el._noDataInstance) {
+                        createNoDataInstance(el, binding)
+                    } else {
+                        const modifierType = Object.keys(binding.modifiers)[0] || 'zanwushuju'
+                        el._noDataInstance.text = binding.arg || '暂无数据'
+                        el._noDataInstance.type = modifierType
+                    }
+                } else {
+                    removeNoDataInstance(el)
+                }
+            }
+        },
+        unbind: removeNoDataInstance
+    }
+}

package/lib/no-data/index.js

@@ -0,0 +1,21 @@
+// 主入口文件 index.js
+import NoData from './index.vue'
+import NoDataDirective from './directive'
+
+const install = (Vue) => {
+  Vue.component(NoData.name, NoData)
+  Vue.directive('no-data', NoDataDirective(Vue))
+}
+
+// 全量导出
+export default {
+  install,
+  component: NoData,
+  directive: NoDataDirective
+}
+
+// 单独导出
+export { 
+  NoData,
+  NoDataDirective 
+}

package/lib/no-data/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <Empty
+    :description="text"
+    class="no-data-container"
+  >
+    <div slot="image">
+        <IconFont :type="`icon-${type}`" />
+    </div>
+    <slot></slot>
+  </Empty>
+</template>
+
+<script>
+
+import { Icon, Empty } from 'ant-design-vue'
+
+const IconFont = Icon.createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_4641025_6uucxf9fvta.js'
+})
+
+export default {
+  name: 'NoData',
+  components: { Empty, IconFont },
+  props: {
+    text: {
+      type: String,
+      default: '暂无数据'
+    },
+    type: {
+      type: String,
+      default: 'zanwushuju'
+    }
+  }
+}
+</script>

package/lib/no-data/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/lib/no-data/style/index.less

@@ -0,0 +1,15 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.no-data-container {
+    padding: @padding-lg; 
+    box-sizing: border-box;
+  
+    div {
+      .layout();
+  
+      .anticon {
+          font-size: 100px;
+      }
+    }
+}

package/lib/search/index.js

@@ -0,0 +1,7 @@
+import Search from './index.vue'
+
+Search.install = function (Vue) { 
+  Vue.component(Search.name, Search)
+}
+
+export default Search

package/{plugins/lib/form/Search.vue → lib/search/index.vue}

@@ -29,12 +29,12 @@
 </template>
 <script>
 
-import resetFields from './utils/resetFields'
-import RenderComp from './components/RenderComp.vue'
+import resetFields from '../model/utils/resetFields'
+import RenderComp from '../form-comp/RenderComp.vue'
 import { Icon, Button, FormModel } from 'ant-design-vue'
 
 export default {
-  name: 'Search',
+  name: 'WSearch',
   components: {
     Icon,
     Button,
@@ -154,6 +154,3 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-@import url('./style/Search.less');
-</style>

package/lib/search/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/{plugins/lib/form/style/Search.less → lib/search/style/index.less}

@@ -1,5 +1,4 @@
-/* 混入样式 */
-@import url('../../style/mixins.less');
+@import '../../form-comp/style/index.less';
 
 .WebComponentFormSearch {
     gap: 16px 0;
@@ -9,20 +8,20 @@
       display: inline-flex;
       margin-right: unset;
   
-      :deep(.ant-form-item-label) {
+      .ant-form-item-label {
         min-width: 70px;
         max-width: 100px;
         text-align: right;
       }
   
-      :deep(.ant-form-item-control-wrapper) {
+      .ant-form-item-control-wrapper {
         flex: 1;
       }
   
-      :deep(.ant-select),
-      :deep(.ant-input-number),
-      :deep(.ant-calendar-picker) {
-        width: 100% !important;
+      .ant-select,
+      .ant-input-number,
+      .ant-calendar-picker {
+        width: 100%;
       }
     }
   

package/lib/style/mixins.less

@@ -2,7 +2,7 @@
 .layout( @w: 100%, @h: 100% ) {
     width: @w;
     height: @h;
-}  
+}
 
 /* 正方体盒子 */
 .square(@size) {

package/lib/{svgIcon → svg-icon}/index.vue

@@ -9,7 +9,7 @@
 <script>
 
 export default {
-    name: "svgIcon",
+    name: "SvgIcon",
     props: {
         iconClass: {
             type: String,
@@ -59,19 +59,3 @@ export default {
     }
 };
 </script>
-
-<style scoped lang="less">
-.svg-icon {
-    width: 90px;
-    height: 90px;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
-}
-
-.svg-external-icon {
-    background-color: currentColor;
-    mask-size: cover;
-    display: inline-block;
-}
-</style>

package/lib/svg-icon/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/lib/svg-icon/style/index.less

@@ -0,0 +1,15 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.svg-icon {
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+    .square(24px);
+}
+
+.svg-external-icon {
+    background-color: currentColor;
+    mask-size: cover;
+    display: inline-block; 
+} 

package/lib/table/index.vue

@@ -12,7 +12,7 @@
         v-on="$listeners"
         v-bind="setAttrs"
         class="WebComponentTable__List"
-      > 
+      >
         <!-- 下次更改一下title的传递方式 -->
         <div class="WebComponentTable__List__Title" ref="TableListTitle" slot="title">
           <slot name="ATableTitle" />
@@ -26,7 +26,7 @@
         <template #customRender="text, record, i, column">
           <slot :name="column.dataIndex" :customProps="record" :text="text" :index="i" />
         </template>
-      </Table>  
+      </Table>
 
       <div class="WebComponentTable__Pagination" ref="TablePagination">
           <slot name="ATablePagination">
@@ -62,7 +62,7 @@ export default {
     Table,
     Pagination
   }, 
-  name: 'uTable',  
+  name: 'WTable', 
   data() {
     return {
       pagination: {
@@ -210,8 +210,4 @@ export default {
     } 
   }
 }
-</script>
-
-<style lang="less" scoped>
-@import url('./style/index.less'); 
-</style>
+</script>

package/lib/table/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/lib/table/style/index.less

@@ -1,16 +1,12 @@
-/* 混入样式 */
-@import url('../../style/mixins.less');
 @import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
 
 .WebComponentTable {
   .layout();
-  .flex-layout( column, 16px 0 ); 
-
-  &__Head {
-     
-  }
+  .flex-layout(column, @padding-md 0);
 
   &__List {
+    flex: 1;
 
     &__Title {
       display: flex;
@@ -18,9 +14,8 @@
     }
 
     &__Empty {
-      gap: 16px 0;
       height: 120px;
-      .flex-mixins( column );
+      .flex-mixins(column, @gap: @padding-md 0);
 
       i {
         font-size: 80px;
@@ -31,20 +26,24 @@
       }
     }
        
-    :deep(.ant-table-title) {
+    .ant-table-title {
       padding: 0;
       margin-bottom: @padding-sm;
     }
 
-    :deep(.ant-table-body) {
+    .ant-table-header {
+      overflow-y: hidden !important;
+    }
+
+    .ant-table-body {
       .scrollbarStyle();
-    } 
+    }
     
   }
 
   &__Pagination {
     display: flex; 
-    justify-content: flex-end;
+    justify-content: center;
   }
 
 }

package/lib/tree/index.js

@@ -1,17 +1,8 @@
 /* 查询tree穿梭 */
-import Tree from './Tree.vue'
-/* treeMenu树形菜单目录 */
-import Directory from './Directory.js'
+import Tree from './index.vue'
 
 Tree.install = function (Vue) { 
   Vue.component(Tree.name, Tree)
 }
 
-Directory.install = function (Vue) { 
-  Vue.component(Directory.name, Directory)
-}
-
-export {
-    Tree,
-    Directory
-}
+export default Tree

package/{plugins/lib/tree/Tree.vue → lib/tree/index.vue}

@@ -36,12 +36,12 @@
 </template>
 
 <script>
-import { Tree, Checkbox, Input } from 'ant-design-vue'
 
+import { Tree, Checkbox, Input } from 'ant-design-vue'
 import { getTreeKey, findCheckNodes } from '../../utils/Tree'
 
 export default {
-  name: 'TreeTransfer',
+  name: 'WTree',
   components: { 
     Tree,
     InputSearch: Input.Search,
@@ -176,6 +176,3 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-@import url('./style/Tree.less');
-</style>

package/lib/tree/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/{plugins/lib/tree/style/Tree.less → lib/tree/style/index.less}

@@ -1,6 +1,5 @@
-/* 混入样式 */
+@import '~ant-design-vue/lib/style/themes/default.less';
 @import '../../style/mixins.less'; 
-@import 'ant-design-vue/lib/style/themes/default.less';
 
 .publicTreeCheck { 
     display: flex;
@@ -17,6 +16,7 @@
   
     .TreeSelect {
       border-right: 1px solid @border-color-split;
+      box-sizing: border-box;
     }
   
     .TreeReveal {
@@ -35,11 +35,11 @@
   
       .TreeListPage {
         .scrollbarStyle();
-        :deep(.ant-checkbox-group) {
+        .ant-checkbox-group {
           width: 100%;
           .flex-layout( column );
         }
-        :deep(.ant-checkbox-group-item) {
+        .ant-checkbox-group-item {
           height: 40px;
           display: flex;
           align-items: center;

package/lib/weather/index.vue

@@ -9,7 +9,7 @@
 <script>
 
 export default {
-  name: 'weather',
+  name: 'Weather',
   props: {
     /** 当前城市高德code编码 */
     adCode: String,
@@ -48,11 +48,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="less">
-.weather {
-    display: flex;
-    gap: 0 14px;
-    font-size: 16px;
-}
-</style>

package/lib/weather/style/index.js

@@ -0,0 +1 @@
+require('./index.less');

package/lib/weather/style/index.less

@@ -0,0 +1,7 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.weather {
+    font-size: @font-size-lg;
+    .flex-layout(@flexGap: 0 14px);
+}

package/package.json

@@ -1,66 +1,48 @@
 {
   "name": "web-component-gallery",
-  "version": "1.3.12",
-  "description": "基于Vue2的Web Components组件库",
+  "version": "2.0.2",
+  "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [
     "dist",
-    "plugins",
+    "extensions",
+    "font",
     "lib",
-    "utils",
-    "method"
+    "utils"
   ],
   "scripts": {
+    "build": "webpack --config ./webpack.config.js",
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "build:js": "webpack --config ./webpack.config.js",
-    "build:css": "npx gulp",
-    "build:lib": "npm run build:js && npm run build:css"
+    "lint": "vue-cli-service lint"
   },
   "peerDependencies": {
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "ant-design-vue": "1.7.8",
-    "vue": "^2.6.14"
+    "@amap/amap-jsapi-loader": "^1.0.1"
   },
   "dependencies": {
-    "dompurify": "^3.2.4",
-    "luxon": "^1.21.3"
+    "core-js": "^3.8.3",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@babel/core": "^7.28.0",
     "@babel/eslint-parser": "^7.12.16",
-    "@vue/babel-plugin-transform-vue-jsx": "^1.4.0",
+    "@babel/preset-env": "^7.28.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "ant-design-vue": "1.7.8",
     "babel-loader": "^9.1.3",
-    "babel-plugin-import": "^1.13.8",
     "clean-webpack-plugin": "^4.0.0",
-    "css-loader": "^5.2.6",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
-    "gulp": "^5.0.0",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-less": "^5.0.0",
     "less": "^3.13.1",
     "less-loader": "^10.0.0",
     "mini-css-extract-plugin": "2.4.5",
-    "postcss-loader": "^8.1.1",
-    "style-loader": "^3.0.0",
-    "style-resources-loader": "^1.5.0",
-    "through2": "^4.0.2",
-    "url-loader": "^4.1.1",
-    "vue": "^2.6.14",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "terser-webpack-plugin": "^5.3.14",
     "vue-loader": "^15.10.1",
     "vue-template-compiler": "^2.6.14",
-    "vuex": "^3.6.2",
-    "webpack-cli": "^5.1.4",
-    "webpack-merge": "5.0.0"
+    "webpack-cli": "^6.0.1"
   },
   "eslintConfig": {
     "root": true,