web-component-gallery 1.3.12 → 2.0.2

package/lib/form-comp/ATagsInput.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="TAntdTags" v-on="$listeners">
+    <Tooltip 
+      v-for="(child, i) in displayTags"
+      :key="`tag-${i}-${child[valueKey]}`"
+      :title="child[labelKey]"
+    >
+      <Tag
+        closable
+        @close="() => tagsClose(child[valueKey])"
+        v-bind="$attrs"
+      >
+        <span>{{ child[labelKey] }}</span>
+      </Tag>
+    </Tooltip>
+    
+    <Tag v-if="hiddenCount > 0" color="blue">
+      +{{ hiddenCount }}
+    </Tag>
+    
+    <span v-if="!selectChecked.length" class="placeholder">
+      {{ placeholder }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { Tag, Tooltip } from 'ant-design-vue'
+
+export default {
+  name: 'ATagsInput',
+  components: { Tag, Tooltip },
+  model: {
+    prop: 'value',
+    event: 'update:tagsInput'
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    valueKey: {
+      type: String,
+      default: 'value'
+    },
+    labelKey: {
+      type: String,
+      default: 'label'
+    },
+    placeholder: {
+      type: String,
+      default: '请点击进行选择'
+    },
+    maxDisplay: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    selectChecked: {
+      get() {
+        return this.value || []
+      },
+      set(val) {
+        this.$emit('update:tagsInput', val)
+      }
+    },
+    displayTags() {
+      return this.maxDisplay > 0 
+        ? this.selectChecked.slice(0, this.maxDisplay)
+        : this.selectChecked
+    },
+    hiddenCount() {
+      return this.maxDisplay > 0 
+        ? Math.max(0, this.selectChecked.length - this.maxDisplay)
+        : 0
+    }
+  },
+  methods: {
+    tagsClose(checked) {
+      const selectChecked = this.selectChecked.filter(
+        node => node[this.valueKey] !== checked
+      )
+      this.$emit('update:tagsInput', selectChecked)
+    }
+  }
+}
+</script>

package/lib/form-comp/ATimePicker.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="ATimePicker">
+    <TimePicker
+      :format="format"
+      v-model="startTime"
+      placeholder="开始时间"
+      :value-format="valueFormat"
+      :disabled-hours="disabledHours"
+      :disabled-minutes="disabledMinutes"
+      :disabled-seconds="disabledSeconds"
+      @change="handleStartTimeChange"
+    />
+    <span>~</span>
+    <TimePicker
+      :format="format"
+      v-model="endTime"
+      placeholder="结束时间"
+      :value-format="valueFormat"
+      :disabled-hours="() => getDisabledHours(startTime)"
+      :disabled-minutes="(h) => getDisabledMinutes(startTime, h)"
+      :disabled-seconds="(h, m) => getDisabledSeconds(startTime, h, m)"
+      @change="handleEndTimeChange"
+    />
+  </div>
+</template>
+
+<script>
+import { TimePicker } from 'ant-design-vue'
+
+export default {
+  name: 'ATimePicker',
+  components: {
+    TimePicker
+  },
+  model: {
+    prop: 'value',
+    event: 'update:timePicker'
+  },
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    format: {
+      type: String,
+      default: 'HH:mm:ss'
+    },
+    valueFormat: {
+      type: String,
+      default: 'HH:mm:ss'
+    },
+    // 是否允许跨天时间范围
+    allowCrossDay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      startTime: null,
+      endTime: null,
+      internalChange: false
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        if (this.internalChange) {
+          this.internalChange = false
+          return
+        }
+        this.startTime = newVal[0] || null
+        this.endTime = newVal[1] || null
+      }
+    }
+  },
+  methods: {
+    handleStartTimeChange(time) {
+      this.startTime = time
+      this.emitChange()
+    },
+    handleEndTimeChange(time) {
+      this.endTime = time
+      this.emitChange()
+    },
+    emitChange() {
+      this.internalChange = true
+      const timeRange = this.startTime && this.endTime 
+        ? [this.startTime, this.endTime] 
+        : []
+      this.$emit('update:timePicker', timeRange)
+    },
+    getDisabledHours(startTime) {
+      if (!startTime || !this.allowCrossDay) return []
+      const hours = []
+      const startHour = parseInt(startTime.split(':')[0])
+      for (let i = 0; i < startHour; i++) {
+        hours.push(i)
+      }
+      return hours
+    },
+    getDisabledMinutes(startTime, selectedHour) {
+      if (!startTime || !this.allowCrossDay) return []
+      const [startHour, startMinute] = startTime.split(':').map(Number)
+      if (selectedHour !== startHour) return []
+      
+      const minutes = []
+      for (let i = 0; i < startMinute; i++) {
+        minutes.push(i)
+      }
+      return minutes
+    },
+    getDisabledSeconds(startTime, selectedHour, selectedMinute) {
+      if (!startTime || !this.allowCrossDay) return []
+      const [startHour, startMinute, startSecond] = startTime.split(':').map(Number)
+      if (selectedHour !== startHour || selectedMinute !== startMinute) return []
+      
+      const seconds = []
+      for (let i = 0; i < startSecond; i++) {
+        seconds.push(i)
+      }
+      return seconds
+    }
+  }
+}
+</script>

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

@@ -32,6 +32,7 @@
 import { Icon, Button, Upload } from 'ant-design-vue'
 
 export default {
+  name: 'AUpload',
   model: {
     prop: 'value',
     event: 'handleFileUpload'
@@ -164,20 +165,4 @@ export default {
     }
   }
 }
-</script>
-<style lang="less" scoped>
-.TAntdUpload {
-  .tips {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  :deep(.ant-upload) {
-    background: transparent;
-  }
-  :deep(.ant-upload-picture-card-wrapper) {
-    display: flex;
-  }
-}
-</style>
+</script>

package/lib/form-comp/index.js

@@ -0,0 +1,37 @@
+/* 下拉多选框（可支持树结构 */
+import ACascaderMultiple from './ACascaderMultiple.vue'
+/* 下拉单选及分页框 */
+import ASelectCustom from './ASelectCustom.vue'
+/* 单选框（可支持配置button形式 */
+import ARadio from './ARadio.vue'
+/* (已下需优化修改) */
+/* tag多项展示框（需修改 */
+import ATagsInput from './ATagsInput.vue'
+/* 日期选择框 */
+import ARangePicker from './ARangePicker.vue' 
+/* 时间区间框（只单进行一天中的时间段选择 */
+import ATimePicker from './ATimePicker.vue'
+/* 文件上传选择器 */
+import AUpload from './AUpload.vue' 
+ 
+const components = {
+    ACascaderMultiple,
+    ASelectCustom,
+    ARadio,
+    ATagsInput,
+    ARangePicker,
+    ATimePicker,
+    AUpload
+}
+
+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/lib/form-comp/style/ACascaderMultiple.less

@@ -0,0 +1,117 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.gb-ant-select-multiple-cascader {
+    .ant-select-dropdown-menu-item {
+        display: none;
+    }
+
+    .cascader-content-item {
+        .checkbox-text {
+            padding-left: @padding-xs;
+            font-size: @font-size-sm;
+            color: @text-color;
+            cursor: default;
+            flex: 1;
+            text-align: left;
+            .ellipsis();
+        }
+
+        &.cascader-content-item-active {
+            background-color: @item-active-bg;
+
+            .checkbox-text {
+                color: @primary-color;
+            }
+        }
+
+        .ant-checkbox-wrapper {
+            .ant-checkbox-indeterminate {
+                .ant-checkbox-inner {
+                    &:after {
+                        background-color: @primary-color;
+                        left: 48%;
+                    }
+                }
+            }
+
+            .ant-checkbox-inner {
+                background-color: @white;
+                border-color: @border-color-base;
+                .square(14px);
+
+                &:after {
+                    border-color: @border-color-split;
+                    left: 20%;
+                }
+            }
+        }
+    }
+
+    .ant-select-dropdown--multiple {
+        min-width: auto !important;
+    }
+
+    &.multiple-cascader-outside {
+        .ant-select-arrow {
+            transform: rotate(180deg);
+        }
+    }
+
+    .ant-select-arrow {
+        margin-top: -@padding-xs;
+        transition: transform 0.3s;
+    }
+
+    .ant-select-dropdown-menu-root {
+        display: none;
+    }
+
+    .cascader-content-right {
+        .right-wrap {
+            .ant-checkbox {
+                top: 0;
+            }
+        }
+    }
+}
+
+.gb-ant-select-multiple-cascader {
+    position: relative;
+
+    .cascader-content-wrap {
+        height: 100%;
+
+        .cascader-content-container {
+            .flex-layout();
+
+            .cascader-content-list {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+                width: 153px;
+                box-sizing: border-box;
+                padding: @padding-sm 0;
+                max-height: 160px;
+                border-right: 1px solid @border-color-split;
+                .scrollbarStyle();
+
+                .cascader-content-item {
+                    padding: @padding-xs - 2 @padding-md;
+                    margin-top: @padding-xs - 2;
+                    align-items: center;
+                    line-height: 1;
+                    .flex-layout();
+
+                    &:hover {
+                        background-color: @item-active-bg;
+                    }
+                }
+            }
+        }
+    }
+
+    .cascader-not-content {
+        padding: @padding-xs + 2;
+    }
+}

package/lib/form-comp/style/ARangePicker.less

@@ -0,0 +1,11 @@
+@import '../../style/mixins.less';
+
+.ADatePicker {
+    width: 100%;
+    align-items: center;
+    .flex-layout(@flexGap: 0 6px);
+  
+    .ant-calendar-picker {
+      flex: 1;
+    }
+}

package/lib/form-comp/style/ASelectCustom.less

@@ -0,0 +1,4 @@
+// 添加flex属性解决css中div莫名高度
+.ASelectCustom {
+    width: 100%;
+}

package/lib/form-comp/style/ATagsInput.less

@@ -0,0 +1,24 @@
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
+
+.TAntdTags {
+  cursor: pointer;
+  .layout(100%, auto);
+
+  .ant-tag {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+
+    span {
+      display: inline-block;
+      max-width: 100px;
+      overflow-x: hidden;
+      .ellipsis();
+    }
+  }
+
+  .placeholder {
+    color: @input-placeholder-color;
+  }
+}

package/lib/form-comp/style/ATimePicker.less

@@ -0,0 +1,8 @@
+@import '../../style/mixins.less';
+
+.ATimePicker {
+  width: 100%;
+  align-items: center;
+  .flex-layout(@flexGap: 0 6px);
+  .ant-time-picker { flex: 1; }
+}

package/lib/form-comp/style/AUpload.less

@@ -0,0 +1,15 @@
+.TAntdUpload {
+    .tips {
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+    }
+  
+    .ant-upload {
+      background: transparent;
+    }
+    
+    .ant-upload-picture-card-wrapper {
+      display: flex;
+    }
+}

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

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

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

@@ -0,0 +1,7 @@
+@import './ACascaderMultiple.less';
+@import './ARadio.less';
+@import './ARangePicker.less';
+@import './ASelectCustom.less';
+@import './ATagsInput.less';
+@import './ATimePicker.less';
+@import './AUpload.less';

package/lib/index.js

@@ -1,72 +1,87 @@
-// 按需引入ant-design-vue必要指令组件
-// import './lazy_use'
-
-// 将组件库中定义的所有组件引入并导出
-import Table from './table' 
-import FormComp,{ Model, Search } from './form' 
-import Button from './button' 
-import Avatar from './avatar' 
-import SvgIcon from './svgIcon' 
-import { Tree, Directory } from './tree'
-import DateTime from './dateTime'
+//  lib/index.js
+import SvgIcon from './svg-icon'
+//  form
+import Model from './model'
+import Search from './search'
+import FormComp from './form-comp'
+// tree
+import Tree from './tree'
+import Directory from './directory'
+// modal
+import Modal from './modal'
+// table
+import Table from './table'
+// time
+import DateTime from './date-time'
+// weather
 import Weather from './weather'
-import MultiTab from './multiTab'
-import IframePage from './iframe/index.jsx'
-import Modal from './modal/index.jsx'
-import AmapComp,{ AmapDraw } from './amap'
-import Brower from './browse/index.jsx'
-import DescriptionsList from './descriptions/index.jsx'
- 
+// browse
+import Browse from './browse'
+// amap
+import AmapDraw from './amap-draw'
+import AmapComp from './amap-comp'
+// button
+import Button from './button'
+// descriptions-list
+import DescriptionsList from './descriptions-list'
+// no-data
+import { NoData, NoDataDirective } from './no-data'
+
+// 新增指令导入 / 导出
+export const Directives = {
+  'no-data': NoDataDirective
+}
+
 const components = {
-  Table,
+  SvgIcon,
   Model,
   Search,
   FormComp,
-  Button,
-  Avatar,
-  SvgIcon,
   Tree,
   Directory,
+  Modal,
+  Table,
   DateTime,
   Weather,
-  MultiTab,
-  IframePage,
-  Modal,
-  AmapComp,
+  Browse,
+  DescriptionsList,
   AmapDraw,
-  Brower,
-  DescriptionsList
+  AmapComp,
+  Button,
+  NoData
 }
 
 const install = function (Vue) { 
-  if (install.installed) return
-  Object.keys(components).forEach(component => { 
-    Vue.component(components[component].name, components[component])
-  })
+    if (install.installed) return
+    Object.keys(components).forEach(component => { 
+      Vue.component(components[component].name, components[component])
+    })
+    // 指令注册
+    Object.keys(Directives).forEach(key => {
+      Vue.directive(key, Directives[key](Vue))
+    })
 }
 
 export {
-  Table,
+  SvgIcon,
   Model,
-  Search,
+  Search, 
   FormComp,
-  Button,
-  Avatar,
-  SvgIcon,
   Tree,
   Directory,
+  Modal,
+  Table,
   DateTime,
   Weather,
-  MultiTab,
-  IframePage,
-  Modal,
-  AmapComp,
+  Browse,
+  DescriptionsList,
   AmapDraw,
-  Brower,
-  DescriptionsList
+  AmapComp,
+  Button,
+  NoData
 }
 
-export default {
-  install,
+export default { 
+  install, 
   ...components
 }

package/lib/modal/index.jsx

@@ -1,7 +1,5 @@
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
-
 import Modal from 'ant-design-vue/es/modal'
-import './index.less'
 
 const ModalProps = {
   mode: PropTypes.string.def('small'),
@@ -9,10 +7,10 @@ const ModalProps = {
   visible: PropTypes.bool.def(false),
   cancelHandle: PropTypes.func,
   attrs: PropTypes.object.def({})
-} 
+}  
 
 const ModalComp = {
-  name: 'ModalComp',
+  name: 'WModal',
   props: ModalProps, 
   functional: true, 
   render(h, content) { 
@@ -31,8 +29,8 @@ const ModalComp = {
     props.mode == 'screen' && delete props.title
 
     return (
-      <Modal 
-        {...{ props, attrs, on: { cancel: props.cancelHandle } }} 
+      <Modal
+        {...{ props, attrs, on: { cancel: props.cancelHandle } }}
         wrapClassName={`AntModal__${props.mode}`}
       >
         { children }

package/lib/modal/style/index.js

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

package/lib/modal/{index.less → style/index.less}

@@ -1,10 +1,11 @@
-@import '../style/mixins.less';
+@import '~ant-design-vue/lib/style/themes/default.less';
+@import '../../style/mixins.less';
 
 .AntModal__small {
     .ant-modal {
        .layout( 712px, 640px );
     }
-} 
+}
 
 .AntModal__middle {
     .ant-modal {
@@ -20,16 +21,16 @@
 
 .AntModal__max {
     .ant-modal {
-       .layout( 100%, 100% );
        top: 0;
+       .layout();
     }
 }
 
 .AntModal__screen {
     .ant-modal {
-       .layout( 100%, 100% );
        top: 0;
        padding: 0;
+       .layout();
 
        &-body {
            padding: 0;
@@ -39,12 +40,10 @@
 
 .ant-modal {
     &-content {
-        display: flex;
-        flex-direction: column;
         height: 100%;
+        .flex-layout(column);
     }
     &-body {
         flex: 1;
-        // padding: 0;
     }
 }