@smallwei/avue 3.8.1 → 3.8.3

package/lib/packages/data/pay/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div :class="b()">
+    <el-row :span="24">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item,index) in data"
+              :key="index">
+        <div class="item">
+          <div class="top"
+               :style="{backgroundColor:item.color}"></div>
+          <div class="header">
+            <p class="title">{{item.title}}</p>
+            <img :src="item.src"
+                 alt=""
+                 class="img">
+            <template v-if="item.subtitle">
+              <p class="subtitle"
+                 :style="{color:item.color}">{{item.subtitle}}</p>
+            </template>
+            <template v-if="item.money || item.dismoney">
+              <p class="money"
+                 :style="{color:item.color}">
+                <span>¥</span>
+                <avue-count-up class="b"
+                               :decimals="item.decimals || decimals"
+                               :animation="item.animation || animation"
+                               :end="item.dismoney"></avue-count-up>
+                <s>{{item.money}}</s>
+                <em>{{item.tip}}</em>
+              </p>
+            </template>
+            <div class="line"></div>
+            <a class="btn"
+               :href="item.href"
+               @click="item.click&&item.click(item)"
+               :style="{backgroundColor:item.color}">{{item.subtext}}</a>
+          </div>
+          <div class="list">
+            <div class="list-item"
+                 :key="cindex"
+                 v-for="(citem,cindex) in item.list">
+              <i class="list-item-icon list-item--check"
+                 :style="{color:item.color}"
+                 v-if="citem.check">√</i>
+              <i class="list-item-icon list-item--no"
+                 v-else>x</i>
+              <a :href="citem.href?citem.href:'javascript:void(0);'">
+                <el-tooltip effect="dark"
+                            :disabled="!citem.tip"
+                            placement="top">
+                  <template #content>
+                    <div v-html="citem.tip"></div>
+                  </template>
+                  <span :class="{'list-item--link':citem.href}">{{citem.title}}</span>
+                </el-tooltip>
+
+              </a>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+export default create({
+  name: "data-pay",
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  computed: {
+    animation () {
+      return this.option.animation
+    },
+    decimals () {
+      return this.option.decimals || 0
+    },
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  }
+});
+</script>

package/lib/packages/data/price/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="data-price">
+    <el-row :span="24">
+      <el-col v-for="(item,index) in data"
+              :xs="12"
+              :sm="6"
+              :md="span"
+              :key="index">
+        <div class="item item--active">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)"
+             :target="item.target">
+            <div class="title">
+              {{item.title}}
+            </div>
+            <div class="body">
+              <span class="price">{{item.price}}</span>
+              <span class="append">{{item.append}}</span>
+            </div>
+            <div class="list">
+              <p v-for="(citem,cindex) in item.list"
+                 :key="cindex">
+                {{citem}}
+              </p>
+            </div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+export default create({
+  name: "data-price",
+  data () {
+    return {};
+  },
+  computed: {
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data;
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  }
+});
+</script>

package/lib/packages/data/product/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="data-product">
+    <el-row :gutter="gutter">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item, index) in data"
+              :key="index">
+        <div class="data-product__item"
+             @click="item.click && item.click(item)">
+          <div class="data-product__img">
+            <img :src="item.img" :alt="item.name" />
+            <div class="data-product__tag" v-if="item.tag" :style="{backgroundColor: item.tagColor || '#f56c6c'}">
+              {{ item.tag }}
+            </div>
+          </div>
+          <div class="data-product__content">
+            <div class="data-product__name">{{ item.name }}</div>
+            <div class="data-product__desc" v-if="item.desc">{{ item.desc }}</div>
+            <div class="data-product__rating" v-if="item.rating !== undefined">
+              <el-rate v-model="item.rating" disabled :colors="ratingColors" />
+              <span class="data-product__rating-value">{{ item.rating }}</span>
+              <span class="data-product__rating-count" v-if="item.ratingCount">({{ item.ratingCount }})</span>
+            </div>
+            <div class="data-product__price">
+              <span class="data-product__price-current">
+                <span class="data-product__price-symbol">{{ priceSymbol }}</span>
+                {{ item.price }}
+              </span>
+              <span class="data-product__price-original" v-if="item.originalPrice">
+                {{ priceSymbol }}{{ item.originalPrice }}
+              </span>
+              <span class="data-product__discount" v-if="item.discount">{{ item.discount }}</span>
+            </div>
+            <div class="data-product__info" v-if="item.sales || item.stock">
+              <span v-if="item.sales">{{ t('product.sold', { value: item.sales }) }}</span>
+              <span v-if="item.stock">{{ t('product.stock', { value: item.stock }) }}</span>
+            </div>
+            <div class="data-product__actions" v-if="showActions">
+              <el-button type="primary" size="small" @click.stop="handleBuy(item)">
+                {{ buyText }}
+              </el-button>
+              <el-button size="small" @click.stop="handleCart(item)" v-if="showCart">
+                {{ t('product.addToCart') }}
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+import locale from "../../../core/locale.js";
+export default create({
+  name: "data-product",
+  mixins: [locale],
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    span() {
+      return this.option.span || 6;
+    },
+    gutter() {
+      return this.option.gutter || 20;
+    },
+    data() {
+      return this.option.data || [];
+    },
+    priceSymbol() {
+      return this.option.priceSymbol || '¥';
+    },
+    showActions() {
+      return this.option.showActions !== false;
+    },
+    showCart() {
+      return this.option.showCart !== false;
+    },
+    buyText() {
+      return this.option.buyText || this.t('product.buyNow');
+    },
+    ratingColors() {
+      return this.option.ratingColors || ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
+    }
+  },
+  methods: {
+    handleBuy(item) {
+      this.$emit('buy', item);
+      item.onBuy && item.onBuy(item);
+    },
+    handleCart(item) {
+      this.$emit('cart', item);
+      item.onCart && item.onCart(item);
+    }
+  }
+});
+</script>

package/lib/packages/data/profile/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="data-profile">
+    <el-row :gutter="gutter">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item, index) in data"
+              :key="index">
+        <div class="data-profile__item"
+             :style="getItemStyle(item)"
+             @click="item.click && item.click(item)">
+          <div class="data-profile__cover" v-if="item.cover" :style="{backgroundImage: 'url(' + item.cover + ')'}"></div>
+          <div class="data-profile__avatar">
+            <img :src="item.avatar" :alt="item.name" v-if="item.avatar" />
+            <span v-else class="data-profile__avatar-text">{{ getAvatarText(item.name) }}</span>
+          </div>
+          <div class="data-profile__name">{{ item.name }}</div>
+          <div class="data-profile__title" v-if="item.title">{{ item.title }}</div>
+          <div class="data-profile__desc" v-if="item.desc">{{ item.desc }}</div>
+          <div class="data-profile__tags" v-if="item.tags && item.tags.length">
+            <el-tag v-for="(tag, idx) in item.tags" :key="idx" size="small" :type="tag.type || ''">
+              {{ tag.text || tag }}
+            </el-tag>
+          </div>
+          <div class="data-profile__contact" v-if="item.phone || item.email">
+            <div class="data-profile__contact-item" v-if="item.phone">
+              <span class="data-profile__contact-icon">📱</span>
+              <span>{{ item.phone }}</span>
+            </div>
+            <div class="data-profile__contact-item" v-if="item.email">
+              <span class="data-profile__contact-icon">📧</span>
+              <span>{{ item.email }}</span>
+            </div>
+          </div>
+          <div class="data-profile__stats" v-if="item.stats && item.stats.length">
+            <div class="data-profile__stat" v-for="(stat, idx) in item.stats" :key="idx">
+              <div class="data-profile__stat-value">{{ stat.value }}</div>
+              <div class="data-profile__stat-label">{{ stat.label }}</div>
+            </div>
+          </div>
+          <div class="data-profile__actions" v-if="item.actions && item.actions.length">
+            <el-button v-for="(action, idx) in item.actions"
+                       :key="idx"
+                       :type="action.type || 'primary'"
+                       size="small"
+                       @click.stop="action.click && action.click(item)">
+              {{ action.text }}
+            </el-button>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+export default create({
+  name: "data-profile",
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    span() {
+      return this.option.span || 6;
+    },
+    gutter() {
+      return this.option.gutter || 20;
+    },
+    data() {
+      return this.option.data || [];
+    }
+  },
+  methods: {
+    getItemStyle(item) {
+      return {
+        backgroundColor: item.backgroundColor || '#fff'
+      };
+    },
+    getAvatarText(name) {
+      return name ? name.charAt(0).toUpperCase() : '?';
+    }
+  }
+});
+</script>

package/lib/packages/data/progress/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="data-progress">
+    <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">
+              <avue-count-up class="item-count"
+                             :animation="item.animation || animation"
+                             :decimals="item.decimals || decimals"
+                             :end="item.count"></avue-count-up>
+              <div class="item-title"
+                   v-text="item.title"></div>
+            </div>
+            <el-progress :stroke-width="15"
+                         :percentage="item.count"
+                         :color="item.color"
+                         :show-text="false"></el-progress>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+export default create({
+  name: "data-progress",
+  data () {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  computed: {
+    animation () {
+      return this.option.animation
+    },
+    decimals () {
+      return this.option.decimals || 0
+    },
+    span () {
+      return this.option.span || 8;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  },
+  created () { },
+  mounted () { },
+  watch: {},
+  methods: {}
+});
+</script>

package/lib/packages/data/rank/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="data-rank">
+    <div class="data-rank__header" v-if="title">
+      <span class="data-rank__title">{{ title }}</span>
+    </div>
+    <div class="data-rank__list">
+      <div class="data-rank__item"
+           v-for="(item, index) in data"
+           :key="index"
+           @click="item.click && item.click(item)">
+        <div class="data-rank__index" :class="getRankClass(index)">
+          <span v-if="index < 3">{{ getMedal(index) }}</span>
+          <span v-else>{{ index + 1 }}</span>
+        </div>
+        <div class="data-rank__avatar" v-if="item.avatar">
+          <img :src="item.avatar" :alt="item.name" />
+        </div>
+        <div class="data-rank__info">
+          <div class="data-rank__name">{{ item.name }}</div>
+          <div class="data-rank__desc" v-if="item.desc">{{ item.desc }}</div>
+        </div>
+        <div class="data-rank__value">
+          <avue-count-up :animation="animation"
+                         :decimals="item.decimals || 0"
+                         :end="item.value"></avue-count-up>
+          <span class="data-rank__unit" v-if="item.unit || unit">{{ item.unit || unit }}</span>
+        </div>
+        <div class="data-rank__bar" v-if="showBar">
+          <el-progress :percentage="getPercentage(item.value)"
+                       :show-text="false"
+                       :stroke-width="6"
+                       :color="item.color || barColor"></el-progress>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+export default create({
+  name: "data-rank",
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    title() {
+      return this.option.title;
+    },
+    animation() {
+      return this.option.animation !== false;
+    },
+    unit() {
+      return this.option.unit || '';
+    },
+    showBar() {
+      return this.option.showBar !== false;
+    },
+    barColor() {
+      return this.option.barColor || '#409eff';
+    },
+    data() {
+      return this.option.data || [];
+    },
+    maxValue() {
+      if (this.data.length === 0) return 100;
+      return Math.max(...this.data.map(item => item.value || 0));
+    }
+  },
+  methods: {
+    getRankClass(index) {
+      if (index === 0) return 'is-first';
+      if (index === 1) return 'is-second';
+      if (index === 2) return 'is-third';
+      return '';
+    },
+    getMedal(index) {
+      const medals = ['🥇', '🥈', '🥉'];
+      return medals[index] || '';
+    },
+    getPercentage(value) {
+      return Math.round((value / this.maxValue) * 100);
+    }
+  }
+});
+</script>

package/lib/packages/data/rotate/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="avue-data-rotate">
+    <el-row :span="24">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item,index) in data"
+              :key="index">
+        <div class="item"
+             :style="{backgroundColor:item.color}">
+          <div class="item-box">
+            <avue-count-up class="item-count"
+                           :decimals="item.decimals || decimals"
+                           :animation="item.animation || animation"
+                           :end="item.count"></avue-count-up>
+            <span class="item-title">{{item.title}}</span>
+            <el-icon :color="item.color"
+                     class="item-icon">
+              <component :is="item.icon"></component>
+            </el-icon>
+          </div>
+          <a :href="item.href"
+             @click="item.click&&item.click(item)">
+            <p class="item-more">{{ t('common.more') }}
+              <el-icon>
+                <el-icon-arrow-right />
+              </el-icon>
+            </p>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import create from "../../../core/create.js";
+import locale from "../../../core/locale.js";
+export default create({
+  name: "data-rotate",
+  mixins: [locale],
+  data () {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  computed: {
+    animation () {
+      return this.option.animation
+    },
+    decimals () {
+      return this.option.decimals || 0
+    },
+    span () {
+      return this.option.span || 8;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  },
+  created () { },
+  mounted () { },
+  watch: {},
+  methods: {}
+});
+</script>

package/lib/packages/data/statistic/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="data-statistic">
+    <el-row :gutter="gutter">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item, index) in data"
+              :key="index">
+        <div class="data-statistic__item"
+             :style="getItemStyle(item)"
+             @click="item.click && item.click(item)">
+          <div class="data-statistic__icon" v-if="item.icon">
+            <i :class="item.icon" :style="{color: item.iconColor || '#409eff', fontSize: (item.iconSize || 40) + 'px'}"></i>
+          </div>
+          <div class="data-statistic__content">
+            <div class="data-statistic__title">{{ item.title }}</div>
+            <div class="data-statistic__value" :style="{color: item.valueColor}">
+              <span class="data-statistic__prefix" v-if="item.prefix">{{ item.prefix }}</span>
+              <avue-count-up :animation="item.animation !== false"
+                             :decimals="item.decimals || 0"
+                             :end="item.value"></avue-count-up>
+              <span class="data-statistic__suffix" v-if="item.suffix">{{ item.suffix }}</span>
+            </div>
+            <div class="data-statistic__trend" v-if="item.trend !== undefined">
+              <span :class="['data-statistic__trend-icon', item.trend >= 0 ? 'is-up' : 'is-down']">
+                {{ item.trend >= 0 ? '↑' : '↓' }}
+              </span>
+              <span class="data-statistic__trend-value">{{ Math.abs(item.trend) }}%</span>
+              <span class="data-statistic__trend-text" v-if="item.trendText">{{ item.trendText }}</span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.js";
+export default create({
+  name: "data-statistic",
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    span() {
+      return this.option.span || 6;
+    },
+    gutter() {
+      return this.option.gutter || 20;
+    },
+    data() {
+      return this.option.data || [];
+    }
+  },
+  methods: {
+    getItemStyle(item) {
+      return {
+        backgroundColor: item.backgroundColor || '#fff',
+        borderColor: item.borderColor || '#ebeef5'
+      };
+    }
+  }
+});
+</script>