tianheng-ui 0.1.0 → 0.1.2

package/packages/Icons/index.vue

@@ -0,0 +1,377 @@
+<template>
+  <div>
+    <el-popover
+      placement="bottom-start"
+      :title="title"
+      :width="width"
+      trigger="click"
+    >
+      <el-input
+        :value="value"
+        slot="reference"
+        placeholder="请选择图标"
+        clearable
+        @clear="handleInputClear"
+      >
+        <div v-if="value" class="input-prefix" slot="prefix">
+          <i :class="value" class="icon" />
+        </div>
+      </el-input>
+
+      <div class="th-icons">
+        <i
+          v-for="(icon, index) in icons"
+          class="icon"
+          :class="icon"
+          :key="index"
+          @click="handleIconClick(icon)"
+        />
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThIcons",
+  model: {
+    event: "input",
+    prop: "value"
+  },
+  props: {
+    title: {
+      type: String,
+      default: "Element图标库"
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: Number,
+      default: 400
+    }
+  },
+  data() {
+    return {
+      icons: [
+        "el-icon-platform-eleme",
+        "el-icon-eleme",
+        "el-icon-delete-solid",
+        "el-icon-delete",
+        "el-icon-s-tools",
+        "el-icon-setting",
+        "el-icon-user-solid",
+        "el-icon-user",
+        "el-icon-phone",
+        "el-icon-phone-outline",
+        "el-icon-more",
+        "el-icon-more-outline",
+        "el-icon-star-on",
+        "el-icon-star-off",
+        "el-icon-s-goods",
+        "el-icon-goods",
+        "el-icon-warning",
+        "el-icon-warning-outline",
+        "el-icon-question",
+        "el-icon-info",
+        "el-icon-remove",
+        "el-icon-circle-plus",
+        "el-icon-success",
+        "el-icon-error",
+        "el-icon-zoom-in",
+        "el-icon-zoom-out",
+        "el-icon-remove-outline",
+        "el-icon-circle-plus-outline",
+        "el-icon-circle-check",
+        "el-icon-circle-close",
+        "el-icon-s-help",
+        "el-icon-help",
+        "el-icon-minus",
+        "el-icon-plus",
+        "el-icon-check",
+        "el-icon-close",
+        "el-icon-picture",
+        "el-icon-picture-outline",
+        "el-icon-picture-outline-round",
+        "el-icon-upload",
+        "el-icon-upload2",
+        "el-icon-download",
+        "el-icon-camera-solid",
+        "el-icon-camera",
+        "el-icon-video-camera-solid",
+        "el-icon-video-camera",
+        "el-icon-message-solid",
+        "el-icon-bell",
+        "el-icon-s-cooperation",
+        "el-icon-s-order",
+        "el-icon-s-platform",
+        "el-icon-s-fold",
+        "el-icon-s-unfold",
+        "el-icon-s-operation",
+        "el-icon-s-promotion",
+        "el-icon-s-home",
+        "el-icon-s-release",
+        "el-icon-s-ticket",
+        "el-icon-s-management",
+        "el-icon-s-open",
+        "el-icon-s-shop",
+        "el-icon-s-marketing",
+        "el-icon-s-flag",
+        "el-icon-s-comment",
+        "el-icon-s-finance",
+        "el-icon-s-claim",
+        "el-icon-s-custom",
+        "el-icon-s-opportunity",
+        "el-icon-s-data",
+        "el-icon-s-check",
+        "el-icon-s-grid",
+        "el-icon-menu",
+        "el-icon-share",
+        "el-icon-d-caret",
+        "el-icon-caret-left",
+        "el-icon-caret-right",
+        "el-icon-caret-bottom",
+        "el-icon-caret-top",
+        "el-icon-bottom-left",
+        "el-icon-bottom-right",
+        "el-icon-back",
+        "el-icon-right",
+        "el-icon-bottom",
+        "el-icon-top",
+        "el-icon-top-left",
+        "el-icon-top-right",
+        "el-icon-arrow-left",
+        "el-icon-arrow-right",
+        "el-icon-arrow-down",
+        "el-icon-arrow-up",
+        "el-icon-d-arrow-left",
+        "el-icon-d-arrow-right",
+        "el-icon-video-pause",
+        "el-icon-video-play",
+        "el-icon-refresh",
+        "el-icon-refresh-right",
+        "el-icon-refresh-left",
+        "el-icon-finished",
+        "el-icon-sort",
+        "el-icon-sort-up",
+        "el-icon-sort-down",
+        "el-icon-rank",
+        "el-icon-loading",
+        "el-icon-view",
+        "el-icon-c-scale-to-original",
+        "el-icon-date",
+        "el-icon-edit",
+        "el-icon-edit-outline",
+        "el-icon-folder",
+        "el-icon-folder-opened",
+        "el-icon-folder-add",
+        "el-icon-folder-remove",
+        "el-icon-folder-delete",
+        "el-icon-folder-checked",
+        "el-icon-tickets",
+        "el-icon-document-remove",
+        "el-icon-document-delete",
+        "el-icon-document-copy",
+        "el-icon-document-checked",
+        "el-icon-document",
+        "el-icon-document-add",
+        "el-icon-printer",
+        "el-icon-paperclip",
+        "el-icon-takeaway-box",
+        "el-icon-search",
+        "el-icon-monitor",
+        "el-icon-attract",
+        "el-icon-mobile",
+        "el-icon-scissors",
+        "el-icon-umbrella",
+        "el-icon-headset",
+        "el-icon-brush",
+        "el-icon-mouse",
+        "el-icon-coordinate",
+        "el-icon-magic-stick",
+        "el-icon-reading",
+        "el-icon-data-line",
+        "el-icon-data-board",
+        "el-icon-pie-chart",
+        "el-icon-data-analysis",
+        "el-icon-collection-tag",
+        "el-icon-film",
+        "el-icon-suitcase",
+        "el-icon-suitcase-1",
+        "el-icon-receiving",
+        "el-icon-collection",
+        "el-icon-files",
+        "el-icon-notebook-1",
+        "el-icon-notebook-2",
+        "el-icon-toilet-paper",
+        "el-icon-office-building",
+        "el-icon-school",
+        "el-icon-table-lamp",
+        "el-icon-house",
+        "el-icon-no-smoking",
+        "el-icon-smoking",
+        "el-icon-shopping-cart-full",
+        "el-icon-shopping-cart-1",
+        "el-icon-shopping-cart-2",
+        "el-icon-shopping-bag-1",
+        "el-icon-shopping-bag-2",
+        "el-icon-sold-out",
+        "el-icon-sell",
+        "el-icon-present",
+        "el-icon-box",
+        "el-icon-bank-card",
+        "el-icon-money",
+        "el-icon-coin",
+        "el-icon-wallet",
+        "el-icon-discount",
+        "el-icon-price-tag",
+        "el-icon-news",
+        "el-icon-guide",
+        "el-icon-male",
+        "el-icon-female",
+        "el-icon-thumb",
+        "el-icon-cpu",
+        "el-icon-link",
+        "el-icon-connection",
+        "el-icon-open",
+        "el-icon-turn-off",
+        "el-icon-set-up",
+        "el-icon-chat-round",
+        "el-icon-chat-line-round",
+        "el-icon-chat-square",
+        "el-icon-chat-dot-round",
+        "el-icon-chat-dot-square",
+        "el-icon-chat-line-square",
+        "el-icon-message",
+        "el-icon-postcard",
+        "el-icon-position",
+        "el-icon-turn-off-microphone",
+        "el-icon-microphone",
+        "el-icon-close-notification",
+        "el-icon-bangzhu",
+        "el-icon-time",
+        "el-icon-odometer",
+        "el-icon-crop",
+        "el-icon-aim",
+        "el-icon-switch-button",
+        "el-icon-full-screen",
+        "el-icon-copy-document",
+        "el-icon-mic",
+        "el-icon-stopwatch",
+        "el-icon-medal-1",
+        "el-icon-medal",
+        "el-icon-trophy",
+        "el-icon-trophy-1",
+        "el-icon-first-aid-kit",
+        "el-icon-discover",
+        "el-icon-place",
+        "el-icon-location",
+        "el-icon-location-outline",
+        "el-icon-location-information",
+        "el-icon-add-location",
+        "el-icon-delete-location",
+        "el-icon-map-location",
+        "el-icon-alarm-clock",
+        "el-icon-timer",
+        "el-icon-watch-1",
+        "el-icon-watch",
+        "el-icon-lock",
+        "el-icon-unlock",
+        "el-icon-key",
+        "el-icon-service",
+        "el-icon-mobile-phone",
+        "el-icon-bicycle",
+        "el-icon-truck",
+        "el-icon-ship",
+        "el-icon-basketball",
+        "el-icon-football",
+        "el-icon-soccer",
+        "el-icon-baseball",
+        "el-icon-wind-power",
+        "el-icon-light-rain",
+        "el-icon-lightning",
+        "el-icon-heavy-rain",
+        "el-icon-sunrise",
+        "el-icon-sunrise-1",
+        "el-icon-sunset",
+        "el-icon-sunny",
+        "el-icon-cloudy",
+        "el-icon-partly-cloudy",
+        "el-icon-cloudy-and-sunny",
+        "el-icon-moon",
+        "el-icon-moon-night",
+        "el-icon-dish",
+        "el-icon-dish-1",
+        "el-icon-food",
+        "el-icon-chicken",
+        "el-icon-fork-spoon",
+        "el-icon-knife-fork",
+        "el-icon-burger",
+        "el-icon-tableware",
+        "el-icon-sugar",
+        "el-icon-dessert",
+        "el-icon-ice-cream",
+        "el-icon-hot-water",
+        "el-icon-water-cup",
+        "el-icon-coffee-cup",
+        "el-icon-cold-drink",
+        "el-icon-goblet",
+        "el-icon-goblet-full",
+        "el-icon-goblet-square",
+        "el-icon-goblet-square-full",
+        "el-icon-refrigerator",
+        "el-icon-grape",
+        "el-icon-watermelon",
+        "el-icon-cherry",
+        "el-icon-apple",
+        "el-icon-pear",
+        "el-icon-orange",
+        "el-icon-coffee",
+        "el-icon-ice-tea",
+        "el-icon-ice-drink",
+        "el-icon-milk-tea",
+        "el-icon-potato-strips",
+        "el-icon-lollipop",
+        "el-icon-ice-cream-square",
+        "el-icon-ice-cream-round"
+      ]
+    };
+  },
+  created() {},
+  methods: {
+    handleIconClick(icon) {
+      this.$emit("input", icon);
+    },
+    handleInputClear() {
+      this.$emit("input", "");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.input-prefix {
+  height: 100%;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  .icon {
+    font-size: 20px;
+  }
+}
+.th-icons {
+  height: 300px;
+  overflow-y: scroll;
+  .icon {
+    padding: 8px;
+    font-size: 20px;
+    border-radius: 2px;
+  }
+  .icon:hover {
+    cursor: pointer;
+    background-color: #f2f2f2;
+    // transition: .3s;
+  }
+}
+</style>

package/packages/Image/index.js

@@ -0,0 +1,8 @@
+import Image from "./index.vue";
+
+/* istanbul ignore next */
+Image.install = function(Vue) {
+  Vue.component(Image.name, Image);
+};
+
+export default Image;

package/packages/Image/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="th-img" :class="divStyle">
+    <slot v-if="loading" name="placeholder">
+      <div class="th-image__placeholder">
+        <i class="el-icon-loading"></i>
+      </div>
+    </slot>
+    <slot v-else-if="error" name="error">
+      <div class="th-image__error" v-if="!errorSrc">加载失败</div>
+      <img
+        v-if="errorSrc && !loading"
+        :src="srcKey ? src[srcKey] : errorSrc"
+        alt=""
+        class="th-image__error"
+      />
+    </slot>
+    <img
+      v-else
+      class="th-img-item"
+      :src="srcKey ? src[srcKey] : src"
+      :alt="alt"
+      :style="imgStyle"
+      @click="clickHandler(srcKey ? src[srcKey] : '')"
+    />
+    <template v-if="preview">
+      <th-image-preview
+        v-if="showViewer"
+        :imgArr="previewList"
+        :on-close="closeViewer"
+        :src-key="srcKey"
+        :start-index="startIndex"
+        :src="srcInfo"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import ThImagePreview from "ui/ImagePreview/index.vue";
+
+let prevOverflow = "";
+
+export default {
+  name: "ThImage",
+  components: {
+    ThImagePreview
+  },
+  props: {
+    src: String | Object,
+    width: {
+      type: String | Number,
+      default: "100%"
+    },
+    height: {
+      type: String | Number,
+      default: "100%"
+    },
+    fit: String,
+    borderRadius: String,
+    alt: String,
+    errorSrc: String,
+    srcKey: String,
+    previewList: Array,
+    startIndex: Number,
+    displayStyle: String,
+    isLoding: Boolean
+  },
+  data() {
+    return {
+      loading: false,
+      error: false,
+      showViewer: false,
+      srcInfo: ""
+    };
+  },
+  computed: {
+    preview() {
+      const { previewList } = this;
+      return Array.isArray(previewList) && previewList.length > 0;
+    },
+    imgStyle() {
+      const style = {
+        width: typeof this.width === "string" ? this.width : this.width + "px",
+        height:
+          typeof this.height === "string" ? this.height : this.height + "px",
+        borderRadius: this.borderRadius,
+        objectFit: this.fit
+      };
+      return style;
+    },
+    divStyle() {
+      let className = "th-image--";
+      if (this.displayStyle) className = `${className}${this.displayStyle}`;
+
+      return className;
+    }
+  },
+  mounted() {
+    this.loadImg();
+  },
+  methods: {
+    loadImg() {
+      if (this.isLoding) {
+        this.loading = true;
+      }
+      this.error = false;
+
+      const img = new Image();
+      img.onload = e => this.imgLoad();
+      img.onerror = this.imgErr.bind(this);
+
+      img.src = this.srcKey ? this.src[this.srcKey] : this.src;
+    },
+    imgLoad() {
+      this.loading = false;
+      this.error = false;
+      this.$emit("on-load");
+    },
+    imgErr() {
+      this.loading = false;
+      this.error = true;
+      this.$emit("on-error");
+    },
+    clickHandler(e) {
+      if (!this.srcKey) {
+        return;
+      }
+      if (!this.preview) {
+        return;
+      }
+      if (this.srcKey) {
+        this.srcInfo = e;
+      }
+      prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      this.showViewer = true;
+    },
+    closeViewer() {
+      document.body.style.overflow = prevOverflow;
+      this.showViewer = false;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped></style>

package/packages/ImagePreview/index.js

@@ -0,0 +1,8 @@
+import ImagePreview from "./index.vue";
+
+/* istanbul ignore next */
+ImagePreview.install = function(Vue) {
+  Vue.component(ImagePreview.name, ImagePreview);
+};
+
+export default ImagePreview;