@smallwei/avue 3.8.5 → 3.9.0

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

@@ -1,62 +0,0 @@
-<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>

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

@@ -1,92 +0,0 @@
-<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.mjs";
-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/es/packages/data/price/index.vue

@@ -1,55 +0,0 @@
-<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.mjs";
-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/es/packages/data/product/index.vue

@@ -1,106 +0,0 @@
-<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.mjs";
-import locale from "../../../core/locale.mjs";
-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/es/packages/data/profile/index.vue

@@ -1,91 +0,0 @@
-<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.mjs";
-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/es/packages/data/progress/index.vue

@@ -1,64 +0,0 @@
-<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.mjs";
-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/es/packages/data/rank/index.vue

@@ -1,92 +0,0 @@
-<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.mjs";
-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/es/packages/data/rotate/index.vue

@@ -1,69 +0,0 @@
-<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.mjs";
-import locale from "../../../core/locale.mjs";
-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>