tianheng-ui 0.1.71 → 0.1.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.71",
+  "version": "0.1.73",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/Icons/index.js

@@ -891,3 +891,338 @@ export const elementIcons = [
   "el-icon-ice-cream-square",
   "el-icon-ice-cream-round"
 ];
+
+export const antDesignIcons = [
+  "step-backward",
+  "step-forward",
+  "fast-backward",
+  "fast-forward",
+  "shrink",
+  "arrows-alt",
+  "down",
+  "up",
+  "left",
+  "right",
+  "caret-up",
+  "caret-down",
+  "caret-left",
+  "caret-right",
+  "up-circle",
+  "down-circle",
+  "left-circle",
+  "right-circle",
+  "double-right",
+  "double-left",
+  "vertical-left",
+  "vertical-right",
+  "forward",
+  "backward",
+  "rollback",
+  "enter",
+  "retweet",
+  "swap",
+  "swap-left",
+  "swap-right",
+  "arrow-up",
+  "arrow-down",
+  "arrow-left",
+  "arrow-right",
+  "play-circle",
+  "up-square",
+  "down-square",
+  "left-square",
+  "right-square",
+  "login",
+  "logout",
+  "menu-fold",
+  "menu-unfold",
+  "border-bottom",
+  "border-horizontal",
+  "border-inner",
+  "border-left",
+  "border-right",
+  "border-top",
+  "border-verticle",
+  "pic-center",
+  "pic-left",
+  "pic-right",
+  "radius-bottomleft",
+  "radius-bottomright",
+  "radius-upleft",
+  "fullscreen",
+  "fullscreen-exit",
+  "question",
+  "question-circle",
+  "plus",
+  "plus-circle",
+  "pause",
+  "pause-circle",
+  "minus",
+  "minus-circle",
+  "plus-square",
+  "minus-square",
+  "info",
+  "info-circle",
+  "exclamation",
+  "exclamation-circle",
+  "close",
+  "close-circle",
+  "close-square",
+  "check",
+  "check-circle",
+  "check-square",
+  "clock-circle",
+  "warning",
+  "issues-close",
+  "stop",
+  "edit",
+  "form.vue",
+  "copy",
+  "scissor",
+  "delete",
+  "snippets",
+  "diff",
+  "highlight",
+  "align-center",
+  "align-left",
+  "align-right",
+  "bg-colors",
+  "bold",
+  "italic",
+  "underline",
+  "strikethrough",
+  "redo",
+  "undo",
+  "zoom-in",
+  "zoom-out",
+  "font-colors",
+  "font-size",
+  "line-height",
+  "column-height",
+  "dash",
+  "small-dash",
+  "sort-ascending",
+  "sort-descending",
+  "drag",
+  "ordered-list",
+  "radius-setting",
+  "area-chart",
+  "pie-chart",
+  "bar-chart",
+  "dot-chart",
+  "line-chart",
+  "radar-chart",
+  "heat-map",
+  "fall",
+  "rise",
+  "stock",
+  "box-plot",
+  "fund",
+  "sliders",
+  "lock",
+  "unlock",
+  "bars",
+  "book",
+  "calendar",
+  "cloud",
+  "cloud-download",
+  "code",
+  "copy",
+  "credit-card",
+  "delete",
+  "desktop",
+  "download",
+  "ellipsis",
+  "file",
+  "file-text",
+  "file-unknown",
+  "file-pdf",
+  "file-word",
+  "file-excel",
+  "file-jpg",
+  "file-ppt",
+  "file-markdown",
+  "file-add",
+  "folder",
+  "folder-open",
+  "folder-add",
+  "hdd",
+  "frown",
+  "meh",
+  "smile",
+  "inbox",
+  "laptop",
+  "appstore",
+  "link",
+  "mail",
+  "mobile",
+  "notification",
+  "paper-clip",
+  "picture",
+  "poweroff",
+  "reload",
+  "search",
+  "setting",
+  "share-alt",
+  "shopping-cart",
+  "tablet",
+  "tag",
+  "tags",
+  "to-top",
+  "upload",
+  "user",
+  "video-camera",
+  "home",
+  "loading",
+  "loading-3-quarters",
+  "cloud-upload",
+  "star",
+  "heart",
+  "environment",
+  "eye",
+  "camera",
+  "save",
+  "team",
+  "solution",
+  "phone",
+  "filter",
+  "exception",
+  "export",
+  "customer-service",
+  "qrcode",
+  "scan",
+  "like",
+  "dislike",
+  "message",
+  "pay-circle",
+  "calculator",
+  "pushpin",
+  "bulb",
+  "select",
+  "switcher",
+  "rocket",
+  "bell",
+  "disconnect",
+  "database",
+  "compass",
+  "barcode",
+  "hourglass",
+  "key",
+  "flag",
+  "layout",
+  "printer",
+  "sound",
+  "usb",
+  "skin",
+  "tool",
+  "sync",
+  "wifi",
+  "car",
+  "schedule",
+  "user-add",
+  "user-delete",
+  "usergroup-add",
+  "usergroup-delete",
+  "man",
+  "woman",
+  "shop",
+  "gift",
+  "idcard",
+  "medicine-box",
+  "red-envelope",
+  "coffee",
+  "copyright",
+  "trademark",
+  "safety",
+  "wallet",
+  "bank",
+  "trophy",
+  "contacts",
+  "global",
+  "shake",
+  "api",
+  "fork",
+  "dashboard",
+  "table",
+  "profile",
+  "alert",
+  "audit",
+  "branches",
+  "build",
+  "border",
+  "crown",
+  "experiment",
+  "fire",
+  "money-collect",
+  "property-safety",
+  "read",
+  "reconciliation",
+  "rest",
+  "security-scan",
+  "insurance",
+  "interaction",
+  "safety-certificate",
+  "project",
+  "thunderbolt",
+  "block",
+  "cluster",
+  "deployment-unit",
+  "dollar",
+  "euro",
+  "pound",
+  "file-done",
+  "file-exclamation",
+  "file-protect",
+  "file-search",
+  "file-sync",
+  "gateway",
+  "gold",
+  "robot",
+  "shopping",
+  "android",
+  "apple",
+  "windows",
+  "ie",
+  "chrome",
+  "github",
+  "aliwangwang",
+  "dingding",
+  "weibo-square",
+  "weibo-circle",
+  "taobao-circle",
+  "html5",
+  "weibo",
+  "twitter",
+  "wechat",
+  "youtube",
+  "alipay-circle",
+  "taobao",
+  "skype",
+  "qq",
+  "medium-workmark",
+  "gitlab",
+  "medium",
+  "linkedin",
+  "google-plus",
+  "dropbox",
+  "facebook",
+  "codepen",
+  "code-sandbox",
+  "amazon",
+  "google",
+  "codepen-circle",
+  "alipay",
+  "ant-design",
+  "aliyun",
+  "zhihu",
+  "slack",
+  "slack-square",
+  "behance",
+  "behance-square",
+  "dribbble",
+  "dribbble-square",
+  "instagram",
+  "yuque",
+  "alibaba",
+  "yahoo"
+];

package/packages/Icons/index.vue

@@ -14,29 +14,43 @@
         @clear="handleInputClear"
       >
         <div v-if="icon" class="input-prefix" slot="prefix">
-          <i :class="icon" class="icon" />
+          <i
+            v-if="icon.indexOf('th-icon') > -1 || icon.indexOf('el-icon') > -1"
+            :class="`icon ${icon}`"
+          />
+          <a-icon v-else class="icon" :type="icon" />
         </div>
       </el-input>
 
-      <el-tabs v-model="tabsActiveName" type="border-card">
+      <el-tabs v-model="activeName" type="border-card">
         <el-tab-pane label="Tianheng图标库" name="tianheng"> </el-tab-pane>
-        <el-tab-pane label="Element图标库" name="element"> </el-tab-pane>
-        <div v-if="tabsActiveName === 'tianheng'" class="th-icons-content">
+        <el-tab-pane v-if="element" label="Element图标库" name="element">
+        </el-tab-pane>
+        <el-tab-pane v-if="antDesign" label="AntDesign图标库" name="antDesign">
+        </el-tab-pane>
+        <div v-if="activeName === 'tianheng'" class="th-icons-content">
           <i
-            v-for="(icon, index) in tianhengIcons"
-            class="icon"
-            :class="icon"
+            v-for="(item, index) in tianhengIcons"
+            :class="`icon ${item}`"
             :key="index"
-            @click="handleIconClick(icon)"
+            @click="handleIconClick(item)"
           />
         </div>
-        <div v-if="tabsActiveName === 'element'" class="th-icons-content">
+        <div v-if="activeName === 'element'" class="th-icons-content">
           <i
-            v-for="(icon, index) in elementIcons"
+            v-for="(item, index) in elementIcons"
+            :class="`icon ${item}`"
+            :key="index"
+            @click="handleIconClick(item)"
+          />
+        </div>
+        <div v-if="activeName === 'antDesign'" class="th-icons-content">
+          <a-icon
+            v-for="(item, index) in antDesignIcons"
             class="icon"
-            :class="icon"
+            :type="item"
             :key="index"
-            @click="handleIconClick(icon)"
+            @click="handleIconClick(item)"
           />
         </div>
       </el-tabs>
@@ -45,7 +59,7 @@
 </template>
 
 <script>
-import { tianhengIcons, elementIcons } from "./index";
+import { tianhengIcons, elementIcons, antDesignIcons } from "./index";
 export default {
   name: "ThIcons",
   model: {
@@ -60,23 +74,49 @@ export default {
     width: {
       type: Number,
       default: 400
+    },
+    element: {
+      type: Boolean,
+      default: true
+    },
+    antDesign: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: String,
+      default: "tianheng"
     }
   },
   data() {
     return {
       icon: this.value,
-      tabsActiveName: "tianheng",
+      activeName: this.active,
       tianhengIcons: tianhengIcons,
-      elementIcons: elementIcons
+      elementIcons: elementIcons,
+      antDesignIcons: antDesignIcons
     };
   },
   watch: {
+    value(val) {
+      if (val.indexOf("th-icon") > -1) {
+        this.activeName = "tianheng";
+      } else if (val.indexOf("el-icon") > -1) {
+        this.activeName = "element";
+      } else {
+        this.activeName = "antDesign";
+      }
+      this.icon = val;
+    },
     icon(val) {
       this.$emit("input", val);
       this.$emit("update:value", val);
     },
-    value(val) {
-      this.icon = val;
+    active(val) {
+      this.activeName = val;
+    },
+    activeName(val) {
+      this.$emit("update:active", val);
     }
   },
   created() {},
@@ -98,13 +138,19 @@ export default {
   display: flex;
   align-items: center;
   .icon {
+    width: 20px;
+    height: 20px;
     font-size: 20px;
+    color: #666;
   }
 }
 .th-icons-content {
   height: 300px;
   overflow-y: scroll;
   .icon {
+    display: inline-block;
+    width: 36px;
+    height: 36px;
     padding: 8px;
     font-size: 20px;
     border-radius: 2px;