web-component-gallery 1.3.12 → 2.0.2

package/dist/style.css

@@ -0,0 +1,17 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
+/* 布局（ 纯为了不想多写一行 */
+/* 正方体盒子 */
+/* 滚动条样式 */
+/* 文字换行省略（默认1行）*/
+/* flex布局 */
+/* flex排版方式 */
+.weather {
+  font-size: 16px;
+  display: flex;
+  gap: 0 14px;
+  flex-direction: row;
+}
+

package/dist/style.umd.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.rui=t():e.rui=t()}(self,function(){return function(){var e={71765:function(e,t,o){"use strict";o.r(t)}},t={};function o(r){var n=t[r];if(void 0!==n)return n.exports;var u=t[r]={exports:{}};return e[r](u,u.exports,o),u.exports}o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};return o(71765),{}}()});

package/{method → extensions}/AMap.js

@@ -1,6 +1,3 @@
-// amap-plugin.js
-// import AMapLoader from '@amap/amap-jsapi-loader'
-
 /** 入口文件不同 作用域不同 */
 let AMapKey = null
 let AMapStyle = null
@@ -236,9 +233,8 @@ export const getAMapInstance = async (options = {}) => {
     }
   }
 
-  const AMapLoader = (await import('@amap/amap-jsapi-loader')).default
-
   try {
+    const AMapLoader = (await import('@amap/amap-jsapi-loader')).default
     const AMap = await AMapLoader.load({
       key: AMapKey,
       version: '2.0',

package/{plugins/method → extensions}/Dialog.js

@@ -1,8 +1,8 @@
 import Modal from 'ant-design-vue/es/modal'
-import {Brower} from './lib/index.js'
+import {Browse} from '../lib/index'
 
 const defaultComponents = {
-  Brower
+  Browse
 }
 
 export default Vue => {

package/{lib/lazy_use.js → extensions/index.js}

@@ -1,4 +1,4 @@
-
+/** 加载antDesignVue */
 import {
   Input,
   InputNumber,
@@ -14,7 +14,16 @@ import {
   notification
 } from 'ant-design-vue'
 
-/** 按需加载antDesignVue */
+/** 全局便捷弹出框 */
+import Dialog from "./Dialog"
+/** 全局页面加载框 */
+import PageLoading from "./PageLoading"
+/** 
+ * 全局切换主题 
+ * @theme 主题key 使用方法: this.$setTheme(@theme)
+ * */
+import setTheme from './Theme'
+
 export default {
   install(Vue) {
     
@@ -36,5 +45,10 @@ export default {
     Vue.prototype.$success = Modal.success
     Vue.prototype.$error = Modal.error
     Vue.prototype.$warning = Modal.warning
+
+    /** 加载便捷弹窗等 */
+    Vue.use(Dialog)
+    Vue.use(PageLoading)
+    Vue.use(setTheme)
   }
 }

package/lib/{amap/components/AmapSearch/index.jsx → amap-comp/AmapSearch.jsx}

@@ -1,8 +1,6 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import { FormComp, Button } from '../../../index'
-import { getAMapInstance } from '../../../../method/AMap.js'
-
-import './index.less'
+import { FormComp, Button } from '../index.js'
+import { getAMapInstance } from '../../extensions/AMap.js'
 
 const { ASelectCustom } = FormComp
 
@@ -55,7 +53,7 @@ const AmapSearch = {
       labelKey: 'label',
       options: selectOptions,
       placeholder: '请输入目的地进行搜索'
-    }
+    } 
 
     return (
       <div class="AmapDraw__Search">

package/lib/amap-comp/index.js

@@ -0,0 +1,18 @@
+/* 地图搜索 */
+import AmapSearch from './AmapSearch'
+ 
+const components = {
+    AmapSearch
+}
+
+const install = function (Vue) { 
+  if (install.installed) return
+  Object.keys(components).forEach(component => { 
+    Vue.component(components[component].name, components[component])
+  })
+}
+
+export default {
+  install,
+  ...components
+}

package/{plugins/lib/amap/components/AmapSearch/index.less → lib/amap-comp/style/AmapSearch.less}

@@ -1,7 +1,10 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
 .AmapDraw__Search {
     display: flex;
     align-items: center;
-    width: calc(100% - 16px); 
+    width: calc(100% - 16px);
 
     .ASelectCustom {
         width: 346px;
@@ -9,8 +12,7 @@
 
     &__Button {
         flex: 1;
-        gap: 0 8px;
-        display: flex;
         justify-content: flex-end;
+        .flex-layout(@flexGap: 0 @padding-xs);
     }
 } 

package/lib/amap-comp/style/index.js

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

package/lib/amap-comp/style/index.less

@@ -0,0 +1 @@
+@import './AmapSearch.less';

package/lib/{amap/AmapDraw.jsx → amap-draw/index.jsx}

@@ -1,8 +1,6 @@
-import AmapSearch from './components/AmapSearch/index.jsx'
+import AmapSearch from '../amap-comp/AmapSearch.jsx'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import { getAMapInstance } from '../../method/AMap.js'
-
-import './AmapDraw.less'
+import { getAMapInstance } from '../../extensions/AMap.js'
 
 export const AmapDrawProps = {
   /** drawEl为地图容器实例名称 */

package/lib/amap-draw/style/index.js

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

package/lib/{amap/AmapDraw.less → amap-draw/style/index.less}

@@ -1,5 +1,7 @@
-@import '../style/mixins.less';
-@import 'ant-design-vue/lib/style/themes/default.less';
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+// 按需引入对应模块样式
+@import '../../amap-comp/style/AmapSearch.less';
 
 .AmapDraw {
   position: relative;
@@ -27,6 +29,7 @@
       color: fade(@white, 70%);
       letter-spacing: 0.2em;
       writing-mode: vertical-rl;
+      background: @component-background;
       .flex-mixins();
     }
 
@@ -41,5 +44,5 @@
   #AmapDraw {
     width: 100%;
     min-height: 304px;
-  }
+  } 
 }

package/lib/browse/index.jsx

@@ -1,7 +1,5 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 
-import './index.less'
-
 import { Base64 } from '../../utils/Base64'
 
 import { getPictureAttrs } from '../../utils/Utils'

package/lib/browse/style/index.js

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

package/lib/button/Button.js

@@ -10,7 +10,7 @@ const PopconfirmProps = {
 } 
 
 export default {
-  name: "Button",
+  name: "WButton",
   props: {
     buttonProps: {
         type: [ Array, Object ],
@@ -55,7 +55,6 @@ export default {
       ) 
     }, 
     ButtonRender( props ) {
-      //  const buttonEvent = props.type
       return (
         <Button
             props={ props }
@@ -74,7 +73,6 @@ export default {
   },
   render() {
     const { buttonProps, SwitchButton } = this
-    // console.log( buttonProps.constructor === Array )
 
     return (
       <div class='ButtonDiversity'> 

package/lib/button/style/index.js

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

package/{plugins/lib/dateTime → lib/date-time}/index.vue

@@ -11,7 +11,7 @@
 import {formatDate} from '../../utils/Filter'
 
 export default {
-  name: 'dateTime',
+  name: 'DateTime',
   data() { 
     return {
         time: new Date(),
@@ -22,22 +22,12 @@ export default {
     formatDate
   },
   mounted() {
-    this.timer = setInterval( 
+    this.timer = setInterval(
         () => this.time = new Date(), 1000 )
   },
   destroyed() {
     clearInterval(this.timer)
     this.timer = null
-  },
-  methods: {
   }
 }
-</script>
-
-<style scoped lang="less">
-.dateTime {
-    display: flex;
-    gap: 0 14px;
-    font-size: 16px;
-}
-</style>
+</script>

package/lib/date-time/style/index.js

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

package/lib/date-time/style/index.less

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

package/lib/{descriptions → descriptions-list}/index.jsx

@@ -8,8 +8,6 @@ const {
   Item: DescriptionsItem
 } = Descriptions
 
-import './index.less'
-
 const descDefaultAttrs = {
   size: 'middle',
   bordered: true
@@ -41,7 +39,7 @@ const renderContent = (h, item, details) => {
 }
 
 const DescriptionsList = {
-  name: 'Descriptions',
+  name: 'DescriptionsList',
   props: DescriptionsProps,
   render(h, content) {
     const { title, column, descAttrs, descDetails, descSettings, $slots, $scopedSlots } = this

package/lib/descriptions-list/style/index.js

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

package/{plugins/lib/tree → lib/directory}/Directory.js

@@ -1,17 +1,12 @@
-import { h } from 'vue'
-import { getTreeKey, filterTreeById } from '../../utils/Tree'
-import { Tree, Menu, Input, Icon, Button, Dropdown, Popconfirm } from 'ant-design-vue'
-import './style/Directory.less'
+import { Tree, Input, Icon, Button, Dropdown } from 'ant-design-vue'
 
-import SvgIcon from '../svgIcon' 
-
-/* 明天来了做一下@快捷指向 */
+import SvgIcon from '../svg-icon'
 
 const TreeNode = Tree.TreeNode
 const DirectoryTree = Tree.DirectoryTree
 
 export default {
-  name: 'DirectoryTreeMenu',
+  name: 'WDirectory',
   props: {
     treeData: {
       type: Array,
@@ -60,7 +55,6 @@ export default {
   },
   mounted() {
     this.onInitTree()
-    // this.NodeExpandKeys = ( this.treeExpandKeys.length && this.treeExpandKeys ) || ( treeExpend && getTreeKey(this.treeData, true, this.replaceFields) ) || []
   },
   watch: {
     treeData(newValue, oldValue) {
@@ -267,7 +261,6 @@ export default {
     },
     onInitTree(treeExpend = true) {
       this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]])
-      // this.NodeExpandKeys = ( this.treeExpandKeys.length && this.treeExpandKeys ) || ( treeExpend && getTreeKey(this.treeData, true, this.replaceFields) ) || []
     },
     onCheck(keys, {}) {
       this.NodeCheckedKeys = keys
@@ -294,24 +287,15 @@ export default {
         id: node._props.eventKey,
         title: node._props.title,
         parentOrgId: node.$parent.eventKey || null
-      }  
-      // this.MenuDropdown = false 
+      }
       this.NodeKey = [].concat(this.NodeSelectedKeys)
       this.NodeKey.push(node.eventKey)
-      // console.log(node, 'handleMouseEnter')
-      // 是否加个参数 判断是否处于打开状态
     },
     handleMouseLeave({ event, node }) {
       if( this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey ) {
         const i = this.NodeKey.findIndex( key => key == node.eventKey )
         this.NodeKey.splice( i, 1 )
       }
-      // this.NodeKey = []
-    }, 
-    onDragEnter(node) {
-      console.log(node, '--onDragEnter')
-      // expandedKeys 需要受控时设置
-      // this.expandedKeys = info.expandedKeys
     },
     onDrop(info) {
       
@@ -357,7 +341,6 @@ export default {
       let dropIndex
       loop(data, dropKey, (node, i, array) => {
         dropIndex = i
-        console.log( node, i, dragObj, dragObjIndex,  '--i' )
       })
 
       this.$emit(

package/lib/directory/index.js

@@ -0,0 +1,8 @@
+/* treeMenu树形菜单目录 */
+import Directory from './Directory.js'
+
+Directory.install = function (Vue) { 
+  Vue.component(Directory.name, Directory)
+}
+
+export default Directory 

package/lib/directory/style/index.js

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

package/lib/{tree/style/Directory.less → directory/style/index.less}

@@ -1,6 +1,5 @@
-/* 混入样式 */
-@import '../../style/mixins.less'; 
 @import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less'; 
 
 .DirectoryTreeMenu {
     height: 100%;
@@ -46,7 +45,7 @@
         }
       }
   
-      :deep(.ant-btn) {
+      .ant-btn {
         line-height: 16px;
         margin-right: @padding-sm;
         border-color: @white;
@@ -69,10 +68,10 @@
   
   .DirectoryTreeMenu__Dropdown {
     &__Menu {
-      .layout( 140px, auto );
       padding: @padding-xs 0;
       box-sizing: border-box;
       border-radius: @border-radius-sm;
+      .layout( 140px, auto );
   
       span {
         display: flex;

package/{plugins/lib/form/components → lib/form-comp}/ACascaderMultiple.vue

@@ -123,7 +123,7 @@
     }
   };
   export default {
-    name: "gbAntSelectMultipleCascader",
+    name: "ACascaderMultiple",
     components: {
       VNodes: {
         functional: true,
@@ -658,109 +658,4 @@
     }
   };
   </script>
-  <style lang="less">
-  .gb-ant-select-multiple-cascader {
-    .ant-select-dropdown-menu-item {
-      display: none;
-    }
-    .cascader-content-item {
-      .checkbox-text {
-        padding-left: 8px;
-        font-size: 12px;
-        color: #4a4a4a;
-        cursor: default;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        text-align: left;
-      }
-      &.cascader-content-item-active {
-        background-color: rgba(66, 70, 86, 0.05);
-        .checkbox-text {
-          color: #1d47aa;
-        }
-      }
-      .ant-checkbox-wrapper {
-        .ant-checkbox-indeterminate {
-          .ant-checkbox-inner {
-            &:after {
-              background-color: #1d47aa;
-              left: 48%;
-            }
-          }
-        }
-        .ant-checkbox-inner {
-          width: 14px;
-          height: 14px;
-          background-color: #fff;
-          border-color: #7d8292;
-          &:after {
-            border-color: #1d47aa;
-            left: 20%;
-          }
-        }
-      }
-    }
-    .ant-select-dropdown--multiple {
-      min-width: auto !important;
-    }
-    &.multiple-cascader-outside {
-      .ant-select-arrow {
-        transform: rotate(180deg);
-      }
-    }
-    .ant-select-arrow {
-      margin-top: -8px;
-      transition: transform 0.3s;
-    }
-    .ant-select-dropdown-menu-root {
-      display: none;
-    }
-    .cascader-content-right {
-      .right-wrap {
-        .ant-checkbox {
-          top: 0;
-        }
-      }
-    }
-  }
-  </style>
-  <style lang="less" scoped>
-  .gb-ant-select-multiple-cascader {
-    position: relative;
-    .cascader-content-wrap {
-      height: 100%;
-      .cascader-content-container {
-        display: flex;
-        flex-direction: row;
-        .cascader-content-list {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          width: 153px;
-          box-sizing: border-box;
-          padding: 11px 0;
-          max-height: 160px;
-          overflow-y: auto;
-          border-right: 1px solid rgba(222, 223, 226, 0.3);
-          .cascader-content-item {
-            padding: 5px 16px;
-            margin-top: 5px;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            line-height: 1;
-            &:hover {
-              background-color: rgba(66, 70, 86, 0.05);
-            }
-          }
-        }
-      }
-    }
-    .cascader-not-content {
-      padding: 10px;
-    }
-  }
-  </style>
   

package/lib/form-comp/ARadio.vue

@@ -0,0 +1,70 @@
+<template>
+  <RadioGroup
+    v-bind="filteredAttrs"
+    v-on="$listeners"
+    class="TAntdRadio"
+    :value="value"
+    @change="handleChange"
+  >
+    <template v-if="!$attrs.options">
+      <component
+        :is="radioType"
+        v-for="child in internalOptions"
+        :key="child[valueKey]"
+        :value="child[valueKey]"
+      >
+        {{ child[labelKey] }}
+      </component>
+    </template>
+  </RadioGroup>
+</template>
+
+<script>
+import { Radio } from 'ant-design-vue'
+
+export default {
+  name: 'ARadio',
+  components: {
+    Radio,
+    RadioGroup: Radio.Group,
+    RadioButton: Radio.Button
+  },
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      required: true
+    },
+    radioType: {
+      type: String,
+      default: 'Radio',
+      validator: value => ['Radio', 'RadioButton'].includes(value)
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    filteredAttrs() {
+      const { options, ...rest } = this.$attrs
+      return rest
+    },
+    internalOptions() {
+      return this.options.length > 0 ? this.options : []
+    }
+  },
+  methods: {
+    handleChange(e) {
+      this.$emit('input', e.target.value)
+    }
+  }
+}
+</script>

package/lib/{form/components → form-comp}/ARangePicker.vue

@@ -5,7 +5,7 @@
       v-bind="startPickerAttrs"
       @openChange="handleStartOpenChange"
     />
-    ~
+    <span class="separator">~</span>
     <DatePicker
       v-model="date[1]"
       :open="endOpen"
@@ -26,6 +26,7 @@ import moment from 'moment'
 import { DatePicker } from 'ant-design-vue'
 
 export default {
+  name: 'ARangePicker',
   components: { DatePicker },
   model: {
     prop: 'value',
@@ -39,18 +40,18 @@ export default {
   },
   props: {
     value: {
-        type: Array,
-        default: () => ([])
+      type: Array,
+      default: () => ([])
     },
     /* 开始日期配置项 */
     startConfig: {
-        type: Object,
-        default: () => ({})
+      type: Object,
+      default: () => ({})
     },
     /* 结束日期配置项 */
     endConfig: {
-        type: Object,
-        default: () => ({})
+      type: Object,
+      default: () => ({})
     }
   },
   watch: {
@@ -114,16 +115,4 @@ export default {
     }
   }
 }
-</script>
-<style lang="less" scoped>
-.ADatePicker {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0 6px;
-
-  .ant-calendar-picker {
-    flex: 1;
-  }
-}
-</style>
+</script>

package/lib/{form/components → form-comp}/ASelectCustom.vue

@@ -59,7 +59,7 @@
 import { Select, Checkbox, Pagination } from 'ant-design-vue'
 
 export default {
-  name: 'TAntdSelect',
+  name: 'ASelectCustom',
   components: {
     VNodes: {
       functional: true,
@@ -217,10 +217,3 @@ export default {
   }
 }
 </script>
-<style lang="less" scoped>
-// 添加flex属性解决css中div莫名高度
-.ASelectCustom {
-  width: 100%;
-  // display: flex;
-}
-</style>