web-component-gallery 2.0.2 → 2.0.4

package/extensions/Theme.js

@@ -1,5 +1,3 @@
-import {toggleTheme} from "@zougt/theme-css-extract-webpack-plugin/dist/toggleTheme"
-
 import message from 'ant-design-vue/es/message'
 
 const watchTheme = {
@@ -40,7 +38,7 @@ export default {
             ToggleTheme(theme)
         }
         /** 子项目需挂载监听主题变化自动执行切换 */
-        isHas && Vue.mixin(watchTheme) 
+        isHas && Vue.mixin(watchTheme)
 
         /** 切换当前主题 */
         function ToggleTheme(scopeName) {
@@ -59,29 +57,36 @@ export default {
 
         /** 切换主题资源 */
         function ToggleThemeSource(scopeName) {
-            /** 获取初始配置项 */
-            // env.themeConfig 来源 vue.config.js define (webpack的DefinePlugin)
-            const themeConfig = env.themeConfig
-            /** 主题配置
-             *  @scopeName 名称
-             *  @multipleScopeVars 主题项
-             *  @extract 是否提取
-             *  @publicPath 资源输出路径
-             *  @outputDir 提取的 css 文件存放目录
-             */ 
-            toggleTheme({ 
-              scopeName: `theme-${scopeName}`,
-              multipleScopeVars: themeConfig.multipleScopeVars,
-              extract: themeConfig.extract,
-              publicPath: themeConfig.publicPath,
-              outputDir: themeConfig.extractCssOutputDir
-            })
-
-            /** 加载主题对应样式文件 */
-            // const requireLess = require.context('@/theme/styles', false, /\.less$/)
-            // requireLess(`./${scopeName}.less`)
-            let themeLink = document.getElementById('theme-stylesheet')
-            themeLink.href = `${process.env.BASE_URL}static/style/${scopeName}.css`
+            try {
+                const { toggleTheme } = require('@zougt/theme-css-extract-webpack-plugin/dist/toggleTheme')
+                /** 获取初始配置项 */
+                // env.themeConfig 来源 vue.config.js define (webpack的DefinePlugin)
+                const themeConfig = env.themeConfig || {}
+                /** 主题配置
+                 *  @scopeName 名称
+                 *  @multipleScopeVars 主题项
+                 *  @extract 是否提取
+                 *  @publicPath 资源输出路径
+                 *  @outputDir 提取的 css 文件存放目录
+                 */ 
+                toggleTheme({
+                  scopeName: `theme-${scopeName}`,
+                  multipleScopeVars: themeConfig.multipleScopeVars,
+                  extract: themeConfig.extract,
+                  publicPath: themeConfig.publicPath,
+                  outputDir: themeConfig.extractCssOutputDir
+                })
+    
+                /** 加载主题对应样式文件 */
+                // const requireLess = require.context('@/theme/styles', false, /\.less$/)
+                // requireLess(`./${scopeName}.less`)
+                let themeLink = document.getElementById('theme-stylesheet')
+                themeLink.href = `${process.env.BASE_URL}static/style/${scopeName}.css`
+            } catch(err) {
+                // message.error('主题资源加载失败')
+                console.error('换肤控件错误:', err)
+                throw err
+            }
         }
 
     }

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

@@ -3,5 +3,5 @@
 
 .dateTime {
     font-size: @font-size-lg;
-    .flex-layout(@flexGap: 0 14px);
-}
+    .flex-layout(@flexGap: 0 @padding-xs);
+} 

package/lib/icon-font/index.js

@@ -0,0 +1,32 @@
+import { Icon } from 'ant-design-vue/es'
+
+const IconFont = {
+    name: 'IconFont',
+    props: {
+      scriptUrl: {
+        type: String,
+        default: '//at.alicdn.com/t/c/font_4641025_tdg12oa0nfq.js'
+      },
+      type: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      iconType() {
+        return Icon.createFromIconfontCN({
+          scriptUrl: this.scriptUrl
+        })
+      }
+    },
+    render() {
+      const IconComponent = this.iconType
+      return <IconComponent {...{ attrs: this.$attrs }} on={{ ...this.$listeners }} />
+    }
+}
+
+IconFont.install = function (Vue) {
+    Vue.component('IconFont', IconFont)
+}
+
+export default IconFont

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

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

package/lib/index.js

@@ -26,6 +26,8 @@ import Button from './button'
 import DescriptionsList from './descriptions-list'
 // no-data
 import { NoData, NoDataDirective } from './no-data'
+// icon-font
+import IconFont from './icon-font'
 
 // 新增指令导入 / 导出
 export const Directives = {
@@ -48,7 +50,8 @@ const components = {
   AmapDraw,
   AmapComp,
   Button,
-  NoData
+  NoData,
+  IconFont
 }
 
 const install = function (Vue) { 
@@ -78,7 +81,8 @@ export {
   AmapDraw,
   AmapComp,
   Button,
-  NoData
+  NoData,
+  IconFont
 }
 
 export default { 

package/lib/modal/index.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import Modal from 'ant-design-vue/es/modal'
+import { Modal } from 'ant-design-vue/es'
+import IconFont from '../icon-font'
 
 const ModalProps = {
   mode: PropTypes.string.def('small'),
@@ -7,40 +8,73 @@ const ModalProps = {
   visible: PropTypes.bool.def(false),
   cancelHandle: PropTypes.func,
   attrs: PropTypes.object.def({})
-}  
+} 
 
 const ModalComp = {
   name: 'WModal',
-  props: ModalProps, 
-  functional: true, 
-  render(h, content) { 
-
-    const { props, children } = content
-
-    const attrs = Object.assign({
+  props: ModalProps,
+  data() {
+    return {
+      modalModes: ['small', 'middle', 'large', 'max'],
+      internalMode: this.mode
+    }
+  },
+  watch: {
+    mode(newVal) {
+      this.internalMode = newVal
+    }
+  },
+  methods: {
+    handleBlank() {
+      window.open(this.$attrs.blankUrl, '_blank')
+    },
+    handleConvert() {
+      const currentIndex = this.modalModes.indexOf(this.internalMode)
+      const isLastMode = currentIndex === this.modalModes.length - 1
+      this.internalMode = isLastMode ? this.mode : this.modalModes[currentIndex + 1]
+    }
+  },
+  render() {
+    const {$attrs, visible} = this
+    const modalProps = {
       width: null,
       footer: null,
       keyboard: false,
-      maskClosable: false
-    }, props.attrs)
-
-    delete props.attrs
-
-    props.mode == 'screen' && delete props.title
+      maskClosable: false,
+      ...$attrs,
+      visible,
+      wrapClassName: `AntModal__${this.internalMode} ${$attrs.class || ''}`.trim()
+    }
 
     return (
       <Modal
-        {...{ props, attrs, on: { cancel: props.cancelHandle } }}
-        wrapClassName={`AntModal__${props.mode}`}
+        {...{ props: modalProps }}
+        on={{
+          cancel: this.cancelHandle,
+          ...this.$listeners
+        }}
       >
-        { children }
+        {this.mode !== 'screen' && (
+          <div slot="title" class="AntModal__Title">
+            <span>{this.title}</span> 
+            <div class="AntModal__Title__Blank">
+              <IconFont
+                type="icon-modal_convert"
+                on={{ click: this.handleConvert }}
+              />
+              {
+                $attrs.blankUrl &&
+                <IconFont
+                  type="icon-modal_blank"
+                  on={{ click: this.handleBlank }}
+                />
+              }
+            </div>
+          </div>
+        )}
+        {this.$slots.default}
       </Modal>
     )
-
-  },
-  mounted() {
-  },
-  methods: {
   }
 }
 
@@ -48,4 +82,4 @@ ModalComp.install = function (Vue) {
   Vue.component('ModalComp', ModalComp)
 }
 
-export default ModalComp
+export default ModalComp

package/lib/modal/style/index.less

@@ -1,40 +1,53 @@
 @import '~ant-design-vue/lib/style/themes/default.less';
 @import '../../style/mixins.less';
 
-.AntModal__small {
-    .ant-modal {
-       .layout( 712px, 640px );
+.AntModal {
+    &__small {
+        .ant-modal {
+           .layout( 712px, 640px );
+        }
     }
-}
-
-.AntModal__middle {
-    .ant-modal {
-       .layout( 1104px, 848px );
+    &__middle {
+        .ant-modal {
+           .layout( 1104px, 848px );
+        }
     }
-}
-
-.AntModal__large {
-    .ant-modal {
-       .layout( 1600px, 848px );
+    &__large {
+        .ant-modal {
+           .layout( 1600px, 848px );
+        }
     }
-}
-
-.AntModal__max {
-    .ant-modal {
-       top: 0;
-       .layout();
+    &__max {
+        .ant-modal {
+           top: 0;
+           .layout();
+        }
     }
-}
+    &__screen {
+        .ant-modal {
+           top: 0;
+           padding: 0;
+           .layout();
+    
+           &-body {
+               padding: 0;
+           }
+        }
+    }
+    &__Title {
+        .flex-layout();
 
-.AntModal__screen {
-    .ant-modal {
-       top: 0;
-       padding: 0;
-       .layout();
+        &__Blank {
+            flex: 1;
+            text-align: right;
+            margin-right: @padding-lg;
 
-       &-body {
-           padding: 0;
-       }
+            .anticon {
+                cursor: pointer;
+                &:hover { color: @primary-color; }
+                &:first-child { margin-right: @padding-sm; }
+            }
+        }
     }
 }
 
@@ -45,5 +58,5 @@
     }
     &-body {
         flex: 1;
-    }
+    } 
 }

package/lib/no-data/index.vue

@@ -12,11 +12,8 @@
 
 <script>
 
-import { Icon, Empty } from 'ant-design-vue'
-
-const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4641025_6uucxf9fvta.js'
-})
+import IconFont from '../icon-font'
+import { Empty } from 'ant-design-vue'
 
 export default {
   name: 'NoData',

package/lib/table/index.vue

@@ -51,11 +51,8 @@
 
 <script>
 
-import { Table, Pagination, Icon } from 'ant-design-vue/es'
-
-const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4640977_auv55jur50b.js'
-})
+import IconFont from '../icon-font'
+import { Table, Pagination } from 'ant-design-vue/es'
 
 export default {
   components: { 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [