@smallwei/avue 3.8.2 → 3.8.3

package/es/packages/data/cardText/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="avue-data-cardText">
+    <el-row :span="24">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item,index) in data"
+              :key="index">
+        <div class="item">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)"
+             :target="item.target">
+            <div class="item-header">
+              {{item.title}}
+            </div>
+            <div class="item-content">{{item.content}}</div>
+            <div class="item-footer">
+              <span>{{item.name}}</span>
+              <span>{{item.date}}</span>
+            </div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-cardtext",
+  data () {
+    return {};
+  },
+  computed: {
+    icon () {
+      return this.option.icon;
+    },
+    color () {
+      return this.option.color || "#333";
+    },
+    span () {
+      return this.option.span || 8;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  }
+});
+</script>

package/es/packages/data/countdown/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="data-countdown">
+    <el-row :gutter="gutter">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item, index) in data"
+              :key="index">
+        <div class="data-countdown__item" :style="getItemStyle(item)">
+          <div class="data-countdown__title" v-if="item.title">{{ item.title }}</div>
+          <div class="data-countdown__timer">
+            <div class="data-countdown__block" v-if="showDays">
+              <span class="data-countdown__number">{{ formatNumber(item.days || 0) }}</span>
+              <span class="data-countdown__label">{{ t('countdown.day') }}</span>
+            </div>
+            <span class="data-countdown__separator" v-if="showDays">:</span>
+            <div class="data-countdown__block">
+              <span class="data-countdown__number">{{ formatNumber(item.hours || 0) }}</span>
+              <span class="data-countdown__label">{{ t('countdown.hour') }}</span>
+            </div>
+            <span class="data-countdown__separator">:</span>
+            <div class="data-countdown__block">
+              <span class="data-countdown__number">{{ formatNumber(item.minutes || 0) }}</span>
+              <span class="data-countdown__label">{{ t('countdown.minute') }}</span>
+            </div>
+            <span class="data-countdown__separator">:</span>
+            <div class="data-countdown__block">
+              <span class="data-countdown__number">{{ formatNumber(item.seconds || 0) }}</span>
+              <span class="data-countdown__label">{{ t('countdown.second') }}</span>
+            </div>
+          </div>
+          <div class="data-countdown__desc" v-if="item.desc">{{ item.desc }}</div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+export default create({
+  name: "data-countdown",
+  mixins: [locale],
+  data() {
+    return {
+      timers: []
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    span() {
+      return this.option.span || 6;
+    },
+    gutter() {
+      return this.option.gutter || 20;
+    },
+    showDays() {
+      return this.option.showDays !== false;
+    },
+    data() {
+      return this.option.data || [];
+    }
+  },
+  methods: {
+    getItemStyle(item) {
+      return {
+        background: item.background || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+      };
+    },
+    formatNumber(num) {
+      return num < 10 ? '0' + num : num;
+    }
+  }
+});
+</script>

package/es/packages/data/dashboard/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="data-dashboard">
+    <el-row :gutter="gutter">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item, index) in data"
+              :key="index">
+        <div class="data-dashboard__item" :style="getItemStyle(item)">
+          <div class="data-dashboard__header">
+            <span class="data-dashboard__title">{{ item.title }}</span>
+            <el-tag v-if="item.status" size="small" :type="item.statusType || ''">{{ item.status }}</el-tag>
+          </div>
+          <div class="data-dashboard__value">
+            <avue-count-up :animation="animation"
+                           :decimals="item.decimals || 0"
+                           :end="item.value"></avue-count-up>
+            <span class="data-dashboard__unit" v-if="item.unit">{{ item.unit }}</span>
+          </div>
+          <div class="data-dashboard__chart" v-if="item.chartData">
+            <div class="data-dashboard__bar"
+                 v-for="(bar, idx) in item.chartData"
+                 :key="idx"
+                 :style="{height: bar + '%', backgroundColor: item.chartColor || '#409eff'}">
+            </div>
+          </div>
+          <div class="data-dashboard__footer" v-if="item.footerText">
+            <span>{{ item.footerText }}</span>
+            <span v-if="item.footerValue" :style="{color: item.footerColor}">{{ item.footerValue }}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-dashboard",
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    span() {
+      return this.option.span || 6;
+    },
+    gutter() {
+      return this.option.gutter || 20;
+    },
+    animation() {
+      return this.option.animation !== false;
+    },
+    data() {
+      return this.option.data || [];
+    }
+  },
+  methods: {
+    getItemStyle(item) {
+      return {
+        backgroundColor: item.backgroundColor || '#fff'
+      };
+    }
+  }
+});
+</script>

package/es/packages/data/display/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="avue-data-display">
+    <el-row :span="24">
+      <el-col v-for="(item,index) in data"
+              :key="index"
+              :md="span"
+              :xs="12"
+              :sm="12">
+        <div class="item"
+             :style="{color:color}">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)"
+             :target="item.target">
+            <avue-count-up :animation="item.animation || animation"
+                           :decimals="item.decimals || decimals"
+                           class="count"
+                           :style="{color:item.color}"
+                           :end="item.count"></avue-count-up>
+            <span class="splitLine" />
+            <div class="title"
+                 :style="{color:item.fontColor}">{{item.title}}</div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-display",
+  data () {
+    return {};
+  },
+  computed: {
+    animation () {
+      return this.option.animation
+    },
+    decimals () {
+      return this.option.decimals || 0
+    },
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data || [];
+    },
+    color () {
+      return this.option.color || "rgb(63, 161, 255)";
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  created () { },
+  methods: {}
+});
+</script>

package/es/packages/data/icons/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="data-icons">
+    <el-row :span="24">
+      <el-col v-for="(item,index) in data"
+              :xs="12"
+              :sm="6"
+              :md="span"
+              :key="index">
+        <div class="item"
+             :class="[{'item--easy':discount}]">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)"
+             :target="item.target">
+            <div class="item-icon">
+              <el-icon :color="item.color">
+                <component :is="item.icon"></component>
+              </el-icon>
+            </div>
+            <div class="item-info">
+              <span>{{item.title}}</span>
+              <avue-count-up :animation="item.animation || animation"
+                             :decimals="item.decimals || decimals"
+                             :style="{color:color}"
+                             class="count"
+                             :end="item.count"></avue-count-up>
+            </div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-icons",
+  data () {
+    return {};
+  },
+  computed: {
+    animation () {
+      return this.option.animation
+    },
+    decimals () {
+      return this.option.decimals || 0
+    },
+    span () {
+      return this.option.span || 4;
+    },
+    data () {
+      return this.option.data;
+    },
+    color () {
+      return this.option.color || "rgb(63, 161, 255)";
+    },
+    discount () {
+      return this.option.discount || false;
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  }
+});
+</script>

package/es/packages/data/imgText/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="avue-data-imgtext">
+    <el-row :span="24">
+      <el-col v-for="(item,index) in data"
+              :key="index"
+              :md="span"
+              :xs="24"
+              :sm="12">
+        <div class="item"
+             :style="{color:color}">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)"
+             :target="item.target">
+            <div class="item-header">
+              <img :src="item.imgsrc"
+                   alt="">
+            </div>
+            <div class="item-content">
+              <span>{{item.title}}</span>
+              <p>{{item.content}}</p>
+            </div>
+            <div class="item-footer">
+              <div class="time"><span>{{item.time}}</span></div>
+              <div class="imgs">
+                <ul>
+                  <li v-for="(imgs,index) in item.headimg"
+                      :key="index">
+                    <el-tooltip effect="dark"
+                                :content="imgs.name"
+                                placement="top-start">
+                      <img :src='imgs.src'
+                           alt="">
+                    </el-tooltip>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-imgtext",
+  data () {
+    return {};
+  },
+  computed: {
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data || [];
+    },
+    color () {
+      return this.option.color || "rgb(63, 161, 255)";
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  created () { },
+  methods: {}
+});
+</script>

package/es/packages/data/list/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="data-list">
+    <div class="data-list__header" v-if="title">
+      <span class="data-list__title">{{ title }}</span>
+      <span class="data-list__extra" v-if="$slots.extra"><slot name="extra"></slot></span>
+    </div>
+    <div class="data-list__content">
+      <div class="data-list__item"
+           v-for="(item, index) in data"
+           :key="index"
+           @click="handleClick(item)">
+        <div class="data-list__avatar" v-if="item.avatar || item.icon">
+          <img v-if="item.avatar" :src="item.avatar" :alt="item.title" />
+          <i v-else-if="item.icon" :class="item.icon" :style="{color: item.iconColor}"></i>
+        </div>
+        <div class="data-list__body">
+          <div class="data-list__title-row">
+            <span class="data-list__name">{{ item.title }}</span>
+            <el-tag v-if="item.tag" size="small" :type="item.tagType || ''">{{ item.tag }}</el-tag>
+          </div>
+          <div class="data-list__desc" v-if="item.desc">{{ item.desc }}</div>
+        </div>
+        <div class="data-list__extra" v-if="item.extra">
+          <span class="data-list__value" :style="{color: item.valueColor}">{{ item.extra }}</span>
+          <span class="data-list__label" v-if="item.label">{{ item.label }}</span>
+        </div>
+        <div class="data-list__action" v-if="item.actions && item.actions.length">
+          <el-button v-for="(action, idx) in item.actions"
+                     :key="idx"
+                     :type="action.type || 'text'"
+                     size="small"
+                     @click.stop="action.click && action.click(item)">
+            {{ action.text }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-list",
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    title() {
+      return this.option.title;
+    },
+    data() {
+      return this.option.data || [];
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.$emit('click', item);
+      item.click && item.click(item);
+    }
+  }
+});
+</script>

package/es/packages/data/notice/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="data-notice">
+    <div class="data-notice__header" v-if="title">
+      <span class="data-notice__title">{{ title }}</span>
+      <span class="data-notice__more" v-if="showMore" @click="handleMore">{{ moreText }}</span>
+    </div>
+    <div class="data-notice__list">
+      <div class="data-notice__item"
+           v-for="(item, index) in data"
+           :key="index"
+           @click="handleClick(item)">
+        <div class="data-notice__tag" v-if="item.tag" :style="{backgroundColor: item.tagColor || '#409eff'}">
+          {{ item.tag }}
+        </div>
+        <div class="data-notice__content">
+          <div class="data-notice__text">{{ item.title }}</div>
+          <div class="data-notice__date" v-if="item.date">{{ item.date }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+export default create({
+  name: "data-notice",
+  mixins: [locale],
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    title() {
+      return this.option.title;
+    },
+    showMore() {
+      return this.option.showMore !== false;
+    },
+    moreText() {
+      return this.option.moreText || this.t('common.more');
+    },
+    data() {
+      return this.option.data || [];
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.$emit('click', item);
+      item.click && item.click(item);
+    },
+    handleMore() {
+      this.$emit('more');
+    }
+  }
+});
+</script>

package/es/packages/data/operaText/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="avue-data-operatext">
+    <el-row :span="24">
+      <el-col v-for="(item,index) in data"
+              :key="index"
+              :md="span"
+              :xs="24"
+              :sm="12">
+        <div class="item">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)">
+            <div class="item-header"
+                 :style="{backgroundColor:item.color,backgroundImage:`url(${item.colorImg})`}">
+              <span class="item-title">{{item.title}}</span>
+              <span class="item-subtitle">{{item.subtitle}}</span>
+            </div>
+            <div class="item-content">
+              <div class="item-img">
+                <img :src="item.img"
+                     alt="">
+              </div>
+              <div class="item-list">
+                <div class="item-row"
+                     v-for="(citem,cindex) in item.list"
+                     :key="cindex">
+                  <span class="item-label">{{citem.label}}</span>
+                  <span class="item-value">{{citem.value}}</span>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-operatext",
+  data () {
+    return {};
+  },
+  computed: {
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  created () { },
+  methods: {}
+});
+</script>

package/es/packages/data/panel/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="avue-data-panel">
+    <el-row :span="24">
+      <el-col v-for="(item,index) in data"
+              :key="index"
+              :md="span"
+              :xs="24"
+              :sm="12">
+        <a :href="item.href"
+           @click="item.click&&item.click(item)">
+          <div class="item">
+            <div class="item-icon">
+              <el-icon :color="item.color">
+                <component :is="item.icon"></component>
+              </el-icon>
+            </div>
+            <div class="item-info">
+              <div class="item-title">{{item.title}}</div>
+              <avue-count-up :animation="item.animation || animation"
+                             :decimals="item.decimals || decimals"
+                             class="item-count"
+                             :end="item.count"></avue-count-up>
+            </div>
+
+          </div>
+        </a>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-panel",
+  data () {
+    return {};
+  },
+  computed: {
+    decimals () {
+      return this.option.decimals || 0
+    },
+    animation () {
+      return this.option.animation
+    },
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  created () { },
+  methods: {}
+});
+</script>