@tongfun/tf-widget 0.1.21 → 0.1.22

package/package/t-input/tInputCache.js

@@ -1,24 +1,24 @@
-const ProxyCreateSingleton = (function () {
-  let instance = null
-  return function () {
-    if (instance) {
-      return instance
-    }
-    instance = new InputData()
-    return instance
-  }
-})()
-class InputData {
-  #cacheData = new Map()
-  getCacheData (key) {
-    if (key) {
-      return this.#cacheData.get(key)
-    }
-    return this.#cacheData
-  }
-
-  setCacheData (key, value) {
-    this.#cacheData.set(key, value)
-  }
-}
-export default ProxyCreateSingleton
+const ProxyCreateSingleton = (function () {
+  let instance = null
+  return function () {
+    if (instance) {
+      return instance
+    }
+    instance = new InputData()
+    return instance
+  }
+})()
+class InputData {
+  #cacheData = new Map()
+  getCacheData (key) {
+    if (key) {
+      return this.#cacheData.get(key)
+    }
+    return this.#cacheData
+  }
+
+  setCacheData (key, value) {
+    this.#cacheData.set(key, value)
+  }
+}
+export default ProxyCreateSingleton

package/package/tf-icon-picker/README.md

@@ -1,8 +1,8 @@
-# tf-icon-picker	
-
-1. 参数
-   1. width (Number) 选择图标区域宽度,默认值 400。
-   2. placement (string) 选择图标展示区域,默认值 'bottom', 可选值: 'top', 'left', 'right', 'bottom'。
-   3. hint (string) 展示图标选择标题。
-
+# tf-icon-picker	
+
+1. 参数
+   1. width (Number) 选择图标区域宽度,默认值 400。
+   2. placement (string) 选择图标展示区域,默认值 'bottom', 可选值: 'top', 'left', 'right', 'bottom'。
+   3. hint (string) 展示图标选择标题。
+
 2. 

package/package/tf-icon-picker/index.js

@@ -1,8 +1,8 @@
-import TfIconPicker from './src/tf-icon-picker'
-
-/* istanbul ignore next */
-TfIconPicker.install = function (Vue) {
-  Vue.component(TfIconPicker.name, TfIconPicker)
-}
-
-export default TfIconPicker
+import TfIconPicker from './src/tf-icon-picker'
+
+/* istanbul ignore next */
+TfIconPicker.install = function (Vue) {
+  Vue.component(TfIconPicker.name, TfIconPicker)
+}
+
+export default TfIconPicker

package/package/tf-icon-picker/src/tf-icon-picker.vue

@@ -1,266 +1,266 @@
-<template>
-  <div>
-    <el-popover
-      v-model="visible"
-      :placement="placement"
-      :width="width"
-      trigger="manual"
-    >
-      <div class="content-view">
-        <div class="search-box">
-          <svg-icon
-            v-if="selectIconClass"
-            :icon-class="selectIconClass.font_class"
-          />
-          <span v-if="selectIconClass">{{ selectIconClass.name }}</span>
-          <el-input
-            v-model="search"
-            size="mini"
-            style="width: 50%"
-            clearable
-            @clear="cleanSearch"
-          />
-          <el-button
-            size="mini"
-            @click="searchInfo"
-          >搜索</el-button>
-        </div>
-        <el-empty
-          v-if="!iconList || iconList.length === 0"
-          description="暂无数据!"
-          style="height: 270px;width: 100%"
-        />
-        <div
-          v-for="item in iconList"
-          :key="item.unicode_decimal"
-          class="icon-item"
-          @click="selectIcon(item)"
-        >
-          <el-tooltip
-            placement="top"
-          >
-            <div slot="content">
-              <span>图标名称: {{ item.name }}</span>
-              <br>
-              <br>
-              <span>class: {{ item.font_class }}</span>
-            </div>
-            <div class="icon-box">
-
-              <svg-icon
-                :icon-class="item.font_class"
-              />
-              <span :title="item.name">{{ item.name }}</span>
-            </div>
-          </el-tooltip>
-        </div>
-        <div class="paging">
-          <span>第 {{ pagination + 1 }} 页</span>
-          <el-pagination
-            small
-            background
-            layout="total, prev, next"
-            :total="total"
-            @current-change="handleCurrentChange"
-          />
-
-          <el-button
-            type="info"
-            size="mini"
-            @click="visible = false"
-          >取消</el-button>
-          <el-button
-            class="button"
-            size="mini"
-            @click="select"
-          >确定</el-button>
-        </div>
-      </div>
-      <el-button
-        slot="reference"
-        class="button"
-        :size="bottomSize"
-        @click="visible = !visible; selectIconClass = null"
-      >{{ hint }}</el-button>
-    </el-popover>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-export default {
-  name: 'TfIconPicker',
-  props: {
-    width: {
-      default: 400,
-      type: Number
-    },
-    placement: {
-      default: 'bottom',
-      type: String
-    },
-    bottomSize: {
-      default: 'small',
-      type: String
-    },
-    hint: {
-      default: '选择图标',
-      type: String
-    }
-  },
-  data () {
-    return {
-      glyphsList: null,
-      allIconList: null,
-      pagination: 0,
-      iconList: null,
-      total: 0,
-      selectIconClass: null,
-      visible: false,
-      search: null
-    }
-  },
-  watch: {
-    pagination: {
-      handler: function (newValue) {
-        if (!this.glyphsList) return
-        this.iconList = this.allIconList.slice(newValue * 20, (newValue + 1) * 20)
-      },
-      immediate: true
-    }
-  },
-  created () {
-    axios.get('/icon-list.json').then((res) => {
-      if (res.status === 200) {
-        const { glyphs: glyphsList } = res.data
-        this.glyphsList = glyphsList.sort((a, b) => a.font_class - b.font_class)
-        this.allIconList = JSON.parse(JSON.stringify(this.glyphsList))
-        this.total = this.allIconList?.length
-        this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20)
-      }
-    })
-  },
-  methods: {
-    handleCurrentChange (val) {
-      if (val - 1 > this.total / 20) return
-      this.pagination = val - 1
-    },
-    selectIcon (params) {
-      this.selectIconClass = params
-    },
-    searchInfo () {
-      this.pagination = 0
-      const glyphs = JSON.parse(JSON.stringify(this.glyphsList))
-      const iconArr = []
-      glyphs.forEach(item => {
-        const str = `${item.font_class}+${item.name}`.toLowerCase()
-        if (str.indexOf(this.search.toLowerCase()) !== -1) {
-          iconArr.push(item)
-        }
-      })
-      this.allIconList = iconArr
-      this.total = this.allIconList.length
-      if (iconArr.length > 20) {
-        this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20).sort((a, b) => a.font_class - b.font_class)
-      } else {
-        this.iconList = iconArr.sort((a, b) => a.font_class - b.font_class)
-      }
-    },
-    cleanSearch () {
-      this.pagination = 0
-      this.allIconList = JSON.parse(JSON.stringify(this.glyphsList))
-      this.total = this.allIconList?.length
-      this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20)
-    },
-    select () {
-      if (this.selectIconClass) {
-        this.$emit('selectIcon', JSON.parse(JSON.stringify(this.selectIconClass)))
-      } else {
-        this.$message.error('未选择图标')
-      }
-      this.selectIconClass = null
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.content-view {
-  min-height: 300px;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  .search-box {
-    width: 100%;
-    display: flex;
-    justify-content: left;
-    align-items: center;
-    gap: 0 10px;
-    color: red;
-    .svg-icon {
-      height: 20px;
-      width: 20px;
-    }
-  }
-  .icon-item {
-    width: 20%;
-    height: 60px;
-    display: flex;
-    margin-top: 10px;
-    align-items: center;
-    justify-content: center;
-    .icon-box {
-      box-sizing: border-box;
-      padding: 5px 0;
-      border-radius: 2px;
-      border: 1px solid #eeeeee;
-      display: inherit;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      width: 60px;
-      height: 100%;
-      color: #666666;
-      &:hover {
-        color: #2a90e9;
-        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-      }
-      .svg-icon {
-        height: 25px;
-        width: 25px;
-      }
-      span {
-        line-height: 1;
-        box-sizing: border-box;
-        padding: 0 2px;
-        text-align: center;
-        width: 60px;
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
-        font-size: 12px;
-      }
-    }
-  }
-  .paging {
-    display: flex;
-    justify-content: right;
-    align-items: center;
-    margin-top: 10px;
-    height: 20px;
-    width: 100%;
-  }
-}
-.button {
-  opacity: 1;
-  background: #0c4c8e;
-  border-radius: 2px;
-  font-weight: 700;
-  color: #FFFFFF;
-}
-</style>
+<template>
+  <div>
+    <el-popover
+      v-model="visible"
+      :placement="placement"
+      :width="width"
+      trigger="manual"
+    >
+      <div class="content-view">
+        <div class="search-box">
+          <svg-icon
+            v-if="selectIconClass"
+            :icon-class="selectIconClass.font_class"
+          />
+          <span v-if="selectIconClass">{{ selectIconClass.name }}</span>
+          <el-input
+            v-model="search"
+            size="mini"
+            style="width: 50%"
+            clearable
+            @clear="cleanSearch"
+          />
+          <el-button
+            size="mini"
+            @click="searchInfo"
+          >搜索</el-button>
+        </div>
+        <el-empty
+          v-if="!iconList || iconList.length === 0"
+          description="暂无数据!"
+          style="height: 270px;width: 100%"
+        />
+        <div
+          v-for="item in iconList"
+          :key="item.unicode_decimal"
+          class="icon-item"
+          @click="selectIcon(item)"
+        >
+          <el-tooltip
+            placement="top"
+          >
+            <div slot="content">
+              <span>图标名称: {{ item.name }}</span>
+              <br>
+              <br>
+              <span>class: {{ item.font_class }}</span>
+            </div>
+            <div class="icon-box">
+
+              <svg-icon
+                :icon-class="item.font_class"
+              />
+              <span :title="item.name">{{ item.name }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+        <div class="paging">
+          <span>第 {{ pagination + 1 }} 页</span>
+          <el-pagination
+            small
+            background
+            layout="total, prev, next"
+            :total="total"
+            @current-change="handleCurrentChange"
+          />
+
+          <el-button
+            type="info"
+            size="mini"
+            @click="visible = false"
+          >取消</el-button>
+          <el-button
+            class="button"
+            size="mini"
+            @click="select"
+          >确定</el-button>
+        </div>
+      </div>
+      <el-button
+        slot="reference"
+        class="button"
+        :size="bottomSize"
+        @click="visible = !visible; selectIconClass = null"
+      >{{ hint }}</el-button>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'TfIconPicker',
+  props: {
+    width: {
+      default: 400,
+      type: Number
+    },
+    placement: {
+      default: 'bottom',
+      type: String
+    },
+    bottomSize: {
+      default: 'small',
+      type: String
+    },
+    hint: {
+      default: '选择图标',
+      type: String
+    }
+  },
+  data () {
+    return {
+      glyphsList: null,
+      allIconList: null,
+      pagination: 0,
+      iconList: null,
+      total: 0,
+      selectIconClass: null,
+      visible: false,
+      search: null
+    }
+  },
+  watch: {
+    pagination: {
+      handler: function (newValue) {
+        if (!this.glyphsList) return
+        this.iconList = this.allIconList.slice(newValue * 20, (newValue + 1) * 20)
+      },
+      immediate: true
+    }
+  },
+  created () {
+    axios.get('/icon-list.json').then((res) => {
+      if (res.status === 200) {
+        const { glyphs: glyphsList } = res.data
+        this.glyphsList = glyphsList.sort((a, b) => a.font_class - b.font_class)
+        this.allIconList = JSON.parse(JSON.stringify(this.glyphsList))
+        this.total = this.allIconList?.length
+        this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20)
+      }
+    })
+  },
+  methods: {
+    handleCurrentChange (val) {
+      if (val - 1 > this.total / 20) return
+      this.pagination = val - 1
+    },
+    selectIcon (params) {
+      this.selectIconClass = params
+    },
+    searchInfo () {
+      this.pagination = 0
+      const glyphs = JSON.parse(JSON.stringify(this.glyphsList))
+      const iconArr = []
+      glyphs.forEach(item => {
+        const str = `${item.font_class}+${item.name}`.toLowerCase()
+        if (str.indexOf(this.search.toLowerCase()) !== -1) {
+          iconArr.push(item)
+        }
+      })
+      this.allIconList = iconArr
+      this.total = this.allIconList.length
+      if (iconArr.length > 20) {
+        this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20).sort((a, b) => a.font_class - b.font_class)
+      } else {
+        this.iconList = iconArr.sort((a, b) => a.font_class - b.font_class)
+      }
+    },
+    cleanSearch () {
+      this.pagination = 0
+      this.allIconList = JSON.parse(JSON.stringify(this.glyphsList))
+      this.total = this.allIconList?.length
+      this.iconList = this.allIconList.slice(this.pagination * 20, (this.pagination + 1) * 20)
+    },
+    select () {
+      if (this.selectIconClass) {
+        this.$emit('selectIcon', JSON.parse(JSON.stringify(this.selectIconClass)))
+      } else {
+        this.$message.error('未选择图标')
+      }
+      this.selectIconClass = null
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.content-view {
+  min-height: 300px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  .search-box {
+    width: 100%;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 0 10px;
+    color: red;
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
+  }
+  .icon-item {
+    width: 20%;
+    height: 60px;
+    display: flex;
+    margin-top: 10px;
+    align-items: center;
+    justify-content: center;
+    .icon-box {
+      box-sizing: border-box;
+      padding: 5px 0;
+      border-radius: 2px;
+      border: 1px solid #eeeeee;
+      display: inherit;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      width: 60px;
+      height: 100%;
+      color: #666666;
+      &:hover {
+        color: #2a90e9;
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+      }
+      .svg-icon {
+        height: 25px;
+        width: 25px;
+      }
+      span {
+        line-height: 1;
+        box-sizing: border-box;
+        padding: 0 2px;
+        text-align: center;
+        width: 60px;
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        font-size: 12px;
+      }
+    }
+  }
+  .paging {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    margin-top: 10px;
+    height: 20px;
+    width: 100%;
+  }
+}
+.button {
+  opacity: 1;
+  background: #0c4c8e;
+  border-radius: 2px;
+  font-weight: 700;
+  color: #FFFFFF;
+}
+</style>