web-component-gallery 1.3.12 → 2.0.2

package/plugins/lib/style/mixins.less

@@ -1,79 +0,0 @@
-/* 布局（ 纯为了不想多写一行 */
-.layout( @w: 100%, @h: 100% ) {
-    width: @w;
-    height: @h;
-}  
-
-/* 正方体盒子 */
-.square(@size) {
-  .layout(@size; @size);
-}
-
-// 提示文字样式
-.placeholder(@color: @input-placeholder-color) {
-  // Firefox
-  &::-moz-placeholder {
-    color: @color;
-    opacity: 1;
-  }
-  // Internet Explorer 10+
-  &:-ms-input-placeholder {
-    color: @color;
-  }
-  // Safari and Chrome
-  &::-webkit-input-placeholder {
-    color: @color;
-  }  
-
-  &:placeholder-shown {
-    text-overflow: ellipsis;
-  } 
-} 
-
-/* 滚动条样式 */
-.scrollbarStyle( @w: 6px, @h: 6px, @color1: @primary-color, @color2: transparent ) { 
-    &::-webkit-scrollbar-track {
-      border-radius: 0;
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      border-radius: 0;
-      border-radius: 5px;
-      background-image: -webkit-linear-gradient(270deg, @color1 0%, @color2 100%);
-      -webkit-transition: all 0.2s;
-      transition: all 0.2s;
-    }
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar {
-      width: @w;
-      height: @h;
-    }
-}
-
-/* 文字换行省略（默认1行）*/
-.ellipsis( @row: 1 ) {
-    text-overflow: -o-ellipsis-lastline;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: @row;
-    line-clamp: @row;
-    -webkit-box-orient: vertical;
-}  
-
-/* flex布局 */
-.flex-layout( @flexDirection: row, @flexGap: 0 ) {
-    display: flex;
-    gap: @flexGap;
-    flex-direction: @flexDirection;
-}
-
-/* flex排版方式 */
-.flex-mixins(@direction: row, @align: center, @justify: center, @gap: 0 ) {
-    .flex-layout(@direction, @gap);
-    flex-wrap: wrap;
-    align-items: @align;
-    justify-content: @justify;
-}

package/plugins/lib/svgIcon/index.js

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

package/plugins/lib/svgIcon/index.vue

@@ -1,77 +0,0 @@
-<template>
-    <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
-    <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
-        <use :xlink:href="iconName" />
-        <text :x="x" :y="y" :class="textClass">{{text}}</text>
-    </svg>
-</template> 
-
-<script>
-
-export default {
-    name: "svgIcon",
-    props: {
-        iconClass: {
-            type: String,
-            required: true
-        },
-        textClass: {
-            type: String,
-            default: ""
-        },
-        className: {
-            type: String,
-            default: ""
-        },
-        text: {
-            type: String,
-            default: ""
-        },
-        x: {
-            type: Number,
-            default: 0
-        },
-        y: {
-            type: Number,
-            default: 0
-        }
-    },
-    computed: {
-        isExternal() {
-            return /^(https?:|mailto:|tel:)/.test(this.iconClass);
-        },
-        iconName() {
-            return `#icon-${this.iconClass}`;
-        },
-        svgClass() {
-            if (this.className) {
-                return "svg-icon " + this.className;
-            } else {
-                return "svg-icon";
-            }
-        },
-        styleExternalIcon() {
-            return {
-                mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-                "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`
-            };
-        }
-    }
-};
-</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/plugins/lib/table/index.js

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

package/plugins/lib/table/index.vue

@@ -1,217 +0,0 @@
-<template>
-  <div :class="[tableStyle, 'WebComponentTable']" ref="Table">
-
-      <div class="WebComponentTable__Head" ref="TableHead">
-          <slot name="ATableHead" />
-      </div>
-    
-      <Table
-        ref="TableList"
-        :size="tableSize"
-        :data-source="tableDatas"
-        v-on="$listeners"
-        v-bind="setAttrs"
-        class="WebComponentTable__List"
-      > 
-        <!-- 下次更改一下title的传递方式 -->
-        <div class="WebComponentTable__List__Title" ref="TableListTitle" slot="title">
-          <slot name="ATableTitle" />
-        </div>
-
-        <template v-for="{ dataIndex } in $attrs.columns" #[dataIndex]>
-          <!-- 自定义头部渲染 -->
-          <slot :name="dataIndex" />
-        </template>
-        
-        <template #customRender="text, record, i, column">
-          <slot :name="column.dataIndex" :customProps="record" :text="text" :index="i" />
-        </template>
-      </Table>  
-
-      <div class="WebComponentTable__Pagination" ref="TablePagination">
-          <slot name="ATablePagination">
-            <Pagination
-              size="small"
-              :pageSizeOptions="pageSizeOptions"
-              :show-total="total => `共 ${total} 条记录`"
-              show-size-changer
-              show-quick-jumper
-              :defaultCurrent="1"
-              :pageSize.sync="pagination.size"
-              :current="pagination.current"
-              @showSizeChange="paginationChange"
-              @change="paginationChange"
-              :total="pagination.total"
-            />
-          </slot> 
-      </div>
-
-  </div>
-</template>
-
-<script>
-
-import { Table, Pagination, Icon } from 'ant-design-vue/es'
-
-const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4640977_auv55jur50b.js'
-})
-
-export default {
-  components: { 
-    Table,
-    Pagination
-  }, 
-  name: 'uTable',  
-  data() {
-    return {
-      pagination: {
-        total: 0,
-        size: 10,
-        current: 1
-      },
-      tableScrollBody: 600,
-      /** 跨分页记录选中数据 */
-      selectedRecords: []
-    }
-  },
-  props: {
-    // 紧凑型和宽松型 
-    // relax 宽松型
-    // compact 紧凑型
-    tableStyle: {
-      type: String,
-      default: 'compact'
-    },
-    // compact 紧凑型情况下是否有分割线
-    tableSplit: {
-      type: Boolean,
-      default: true
-    },
-    // 表格数据
-    datas: {
-      type: Array,
-      default: () => []
-    },
-    emptySymbol: {
-      type: String,
-      default: '-'
-    },
-    // 选中数据项
-    selectedRowKeys: {
-      type: Array,
-      default: () => []
-    },
-    // 分页默认值
-    paginationParams: {
-      type: Object,
-      default: () => ({
-        total: 0,
-        size: 10,
-        current: 1
-      })
-    },
-    // 配置分页数据
-    pageSizeOptions: {
-      type: Array,
-      default: () => ['10', '15', '20', '30', '50']
-    }
-  },
-  computed: {
-    setAttrs() {
-      return {
-        pagination: false,
-        rowKey: (record, i) => record.id ?? `${this.pagination.current}${i}`,
-        rowSelection: { selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange },
-        locale: {
-          emptyText: <div class="WebComponentTable__List__Empty">
-            <IconFont type="icon-zanwushuju" />
-            <span>暂无数据</span>
-          </div>
-        },
-        scroll: { y: this.tableScrollBody, x: this.$attrs.scrollX },
-        ...this.$attrs
-      }
-    },
-    tableSize() {
-      return this.tableStyle == 'compact' ? 'middle' : 'default'
-    },
-    tableDatas() {
-      /** 字段数据为空则添加默认占位符 */
-      const dataKeys = this.$attrs.columns.map(column => column.dataIndex)
-      return this.datas.map(dataItem => {
-        const cloneItem = {...dataItem}
-        dataKeys.forEach(key => {
-          const value = cloneItem[key]
-          if (value === null || value === undefined || 
-              (typeof value === 'string' && !value.trim())) {
-            cloneItem[key] = this.emptySymbol
-          }
-        })
-        return cloneItem
-      })
-    }
-  }, 
-  watch: {
-    paginationParams(newValue) {
-      this.pagination = { ...newValue }
-    }
-  },
-  mounted() {
-    this.pagination = { ...this.paginationParams }
-    const scrollTimer = setTimeout(() => {
-      this.getScrollBodyH()
-      clearTimeout(scrollTimer)
-    }, 300)
-    window.addEventListener('resize', () => this.getScrollBodyH())
-    this.removeDomElement()
-  }, 
-  destroyed() {
-    // window.removeEventListener( 'resize' )
-  },
-  methods: {
-    /** 根据内容高度计算滚动长度 */
-    getScrollBodyH() {
-      this.tableScrollBody = 
-        this.$refs.Table.clientHeight -
-        this.$refs.TableHead.offsetHeight -
-        this.$refs.TablePagination.offsetHeight -
-        16 -
-        this.$refs.TableListTitle.offsetHeight -
-        document.querySelector('.ant-table-thead').offsetHeight -
-        20
-      /** 20为获取高度时抹掉的小数点后两位的浮动空间(存在叠加多个获取错误的情况) */
-      console.log(this.$refs.Table.clientHeight, this.tableScrollBody, 'tableScrollBody滚动高度')
-    },
-    /** 根据高度判断dom元素是否加载 进行删除 */
-    removeDomElement() {
-      let domElement
-      this.$refs.Table.querySelectorAll('div').forEach( node => {
-        node.className == 'ant-table-title' && (domElement = node)
-      } )
-      !this.$scopedSlots.ATableHead && this.$refs.TableHead.remove()
-      !this.$scopedSlots.ATableTitle && ( domElement.style.padding = '0' )
-    },
-    onSelectChange(selectedKey, selectedRecord) {
-      const {setAttrs, selectedRecords} = this
-      const setRecords = selectedRecords.filter(recordItem => 
-        selectedKey.includes(recordItem[setAttrs.rowKey])
-      )
-      setRecords.length < selectedKey.length && selectedRecords.push(selectedRecord[selectedRecord.length - 1])
-      this.$emit('selectedRecords', selectedKey, selectedRecords)
-    },
-    paginationChange(current, pageSize) {
-      this.pagination = {
-        ...this.pagination,
-        size: pageSize,
-        current
-      }
-      this.$emit('pageSizeChange', this.pagination)
-    } 
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import url('./style/index.less'); 
-</style>

package/plugins/lib/table/style/index.less

@@ -1,50 +0,0 @@
-/* 混入样式 */
-@import url('../../style/mixins.less');
-@import '~ant-design-vue/lib/style/themes/default.less';
-
-.WebComponentTable {
-  .layout();
-  .flex-layout( column, 16px 0 ); 
-
-  &__Head {
-     
-  }
-
-  &__List {
-
-    &__Title {
-      display: flex;
-      align-items: center;
-    }
-
-    &__Empty {
-      gap: 16px 0;
-      height: 120px;
-      .flex-mixins( column );
-
-      i {
-        font-size: 80px;
-      }
-    
-      span {
-        // margin-right: 16px;
-      }
-    }
-       
-    :deep(.ant-table-title) {
-      padding: 0;
-      margin-bottom: @padding-sm;
-    }
-
-    :deep(.ant-table-body) {
-      .scrollbarStyle();
-    } 
-    
-  }
-
-  &__Pagination {
-    display: flex; 
-    justify-content: flex-end;
-  }
-
-}

package/plugins/lib/tree/index.js

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

package/plugins/lib/tree/style/Directory.less

@@ -1,119 +0,0 @@
-/* 混入样式 */
-@import '../../style/mixins.less'; 
-@import '~ant-design-vue/lib/style/themes/default.less';
-
-.DirectoryTreeMenu {
-    height: 100%;
-    padding: @padding-md;
-    box-sizing: border-box;
-  
-    &__Actions {
-      .flex-layout(@flexGap: 0 @padding-xs);
-      position: relative;
-  
-      .ActionsIcons.ActionsIcons {
-        cursor: pointer;
-        .square(16px);
-  
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-  
-    .treeDirectory {
-      .layout( 100%, 40px );
-      .flex-mixins(@justify: flex-start);
-  
-      & > span {
-        flex: 1;
-        color: @white;
-        text-align: left;
-        font-size: @font-size-lg;
-        font-weight: 700;
-        padding-left: @padding-sm;
-        box-sizing: border-box;
-        position: relative;
-  
-        &::after {
-          left: 0;
-          top: calc((100% - 12px) / 2);
-          content: '';
-          position: absolute;
-          background: @primary-color;
-          border-radius: @border-radius-sm;
-          .layout(4px, 12px);
-        }
-      }
-  
-      :deep(.ant-btn) {
-        line-height: 16px;
-        margin-right: @padding-sm;
-        border-color: @white;
-        .square(16px);
-        .flex-mixins();
-  
-        i {
-          font-size: @font-size-sm;
-          color: @white;
-        }
-      }
-    }
-  
-    &__Tree {
-      height: calc(100% - 40px);
-      overflow-y: auto;
-      .scrollbarStyle();
-    }
-  }
-  
-  .DirectoryTreeMenu__Dropdown {
-    &__Menu {
-      .layout( 140px, auto );
-      padding: @padding-xs 0;
-      box-sizing: border-box;
-      border-radius: @border-radius-sm;
-  
-      span {
-        display: flex;
-        align-items: center;
-        margin-bottom: 2px;
-        font-size: @font-size-base;
-        padding: 0 @padding-md;
-        box-sizing: border-box;
-        cursor: pointer;
-        .layout( 100%, 26px );
-  
-        &:last-child {
-          margin: 0;
-        }
-  
-        .svg-icon {
-          margin-right: @padding-xs;
-          .square(16px);
-        }
-      }
-    }
-  }
-  
-  .DirectoryTreeMenu__Node {
-    .ant-tree-node-content-wrapper {
-      width: calc(100% - 24px);
-  
-      .ant-tree-title {
-        display: inline-block;
-        .layout( calc( 100% - 24px ), 100% );
-  
-        .__Title {
-          .square(100%);
-          .flex-mixins(@justify: flex-start, @gap: 0 @padding-xs);
-  
-          & > span {
-            white-space: normal;
-            width: calc(100% - 56px);
-            .ellipsis();
-          }
-        }
-      }
-    }
-}

package/plugins/lib/weather/index.js

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

package/plugins/lib/weather/index.vue

@@ -1,58 +0,0 @@
-  <template>
-    <div class="weather">
-        <slot name="weatherIcon" :weatherInfo="weatherInfo" />
-        <span class="weather__Info">{{ weatherInfo.weather }}</span>
-        <span class="weather__Temp">温度{{ weatherInfo.temperature }}°</span>
-    </div> 
-</template>
-
-<script>
-
-export default {
-  name: 'weather',
-  props: {
-    /** 当前城市高德code编码 */
-    adCode: String,
-    AMapServiceKey: {
-      type: String,
-      default: '76aa516e74e87a1b9d169e796f2bbdc3'
-    }
-  },
-  data() { 
-    return {
-        weatherInfo: {}
-    }
-  },
-  mounted() {
-    this.getWeatherInfo()
-  },
-  methods: {
-    async getWeatherInfo() {
-      await fetch(
-        `https://restapi.amap.com/v3/weather/weatherInfo?key=${this.AMapServiceKey}&city=${this.adCode}`, 
-        {
-            method: 'GET',
-            headers: {
-            'Content-Type': 'application/json'
-            }
-        })
-      .then(response => response.json())
-      .then(({infocode, lives}) => {
-        infocode == '10000' && (this.weatherInfo = { ...lives[0] })
-        console.log(lives, '获取的天气信息详情')
-      })
-      .catch(error => {
-        console.error('Error:', error)
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.weather {
-    display: flex;
-    gap: 0 14px;
-    font-size: 16px;
-}
-</style>