@smallwei/avue 3.8.2 → 3.8.4

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="avue-data-tabs">
+    <el-row :span="24">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item,index) in data"
+              :key="index">
+        <div class="item"
+             :style="{background:item.color}">
+          <a :href="item.href"
+             @click="item.click&&item.click(item)"
+             :target="item.target">
+            <div class="item-header">
+              <p>{{item.title}}</p>
+              <span>{{item.subtitle}}</span>
+            </div>
+            <div class="item-body">
+              <avue-count-up class="h2"
+                             :decimals="item.decimals || decimals"
+                             :animation="item.animation || animation"
+                             :end="item.count"></avue-count-up>
+            </div>
+            <div class="item-footer">
+              <span>{{item.allcount}}</span>
+              <p>{{item.text}}</p>
+            </div>
+            <p class="item-tip">{{item.key}}</p>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-tabs",
+  data () {
+    return {};
+  },
+  computed: {
+    animation () {
+      return this.option.animation
+    },
+    decimals () {
+      return this.option.decimals || 0
+    },
+    span () {
+      return this.option.span || 8;
+    },
+    data () {
+      return this.option.data || [];
+    }
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,82 @@
+<template>
+  <div class="data-task">
+    <div class="data-task__header" v-if="title">
+      <span class="data-task__title">{{ title }}</span>
+      <span class="data-task__count">{{ completedCount }}/{{ data.length }}</span>
+    </div>
+    <div class="data-task__progress">
+      <el-progress :percentage="progressPercent" :stroke-width="8" :show-text="false"></el-progress>
+    </div>
+    <div class="data-task__list">
+      <div class="data-task__item"
+           v-for="(item, index) in data"
+           :key="index"
+           :class="{'is-completed': item.completed}">
+        <el-checkbox v-model="item.completed" @change="handleChange(item, index)"></el-checkbox>
+        <div class="data-task__content">
+          <div class="data-task__text">{{ item.title }}</div>
+          <div class="data-task__meta" v-if="item.deadline || item.priority">
+            <span class="data-task__deadline" v-if="item.deadline">{{ item.deadline }}</span>
+            <el-tag v-if="item.priority" size="small" :type="getPriorityType(item.priority)">
+              {{ item.priority }}
+            </el-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+
+const PRIORITY_TYPES = {
+  high: 'danger',
+  medium: 'warning',
+  low: 'info'
+};
+
+export default create({
+  name: "data-task",
+  mixins: [locale],
+  data() {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    title() {
+      return this.option.title;
+    },
+    data() {
+      return this.option.data || [];
+    },
+    completedCount() {
+      return this.data.filter(item => item.completed).length;
+    },
+    progressPercent() {
+      if (this.data.length === 0) return 0;
+      return Math.round((this.completedCount / this.data.length) * 100);
+    }
+  },
+  methods: {
+    handleChange(item, index) {
+      this.$emit('change', { item, index, completed: item.completed });
+    },
+    getPriorityType(priority) {
+      const normalized = String(priority || '').trim().toLowerCase();
+      const aliases = this.t('task.priorityAliases') || {};
+      const matchedKey = Object.keys(PRIORITY_TYPES).find((key) => {
+        const values = Array.isArray(aliases[key]) ? aliases[key] : [];
+        return values.some((value) => String(value).trim().toLowerCase() === normalized);
+      });
+      return PRIORITY_TYPES[matchedKey || normalized] || '';
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,103 @@
+<template>
+  <div class="data-weather">
+    <el-row :gutter="gutter">
+      <el-col :md="span"
+              :xs="24"
+              :sm="12"
+              v-for="(item, index) in data"
+              :key="index">
+        <div class="data-weather__item"
+             :style="getItemStyle(item)"
+             @click="item.click && item.click(item)">
+          <div class="data-weather__header">
+            <span class="data-weather__city">{{ item.city }}</span>
+            <span class="data-weather__date">{{ item.date }}</span>
+          </div>
+          <div class="data-weather__body">
+            <div class="data-weather__icon">
+              <i :class="getWeatherIcon(item.weather)" :style="{fontSize: '48px'}"></i>
+            </div>
+            <div class="data-weather__temp">
+              <span class="data-weather__temp-value">{{ item.temp }}</span>
+              <span class="data-weather__temp-unit">°C</span>
+            </div>
+          </div>
+          <div class="data-weather__footer">
+            <span class="data-weather__desc">{{ item.weather }}</span>
+            <span class="data-weather__wind" v-if="item.wind">{{ item.wind }}</span>
+          </div>
+          <div class="data-weather__range" v-if="item.tempLow !== undefined">
+            {{ item.tempLow }}° ~ {{ item.tempHigh }}°
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+
+const WEATHER_GRADIENTS = {
+  sunny: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  cloudy: 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
+  overcast: 'linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%)',
+  rain: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+  snow: 'linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%)'
+};
+
+const WEATHER_ICONS = {
+  sunny: 'el-icon-sunny',
+  cloudy: 'el-icon-partly-cloudy',
+  overcast: 'el-icon-cloudy',
+  rain: 'el-icon-heavy-rain',
+  snow: 'el-icon-ice-cream'
+};
+
+export default create({
+  name: "data-weather",
+  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 || [];
+    }
+  },
+  methods: {
+    normalizeWeatherKey(weather) {
+      const normalized = String(weather || '').trim().toLowerCase();
+      const aliases = this.t('weather.aliases') || {};
+      const matchedKey = Object.keys(WEATHER_GRADIENTS).find((key) => {
+        const values = Array.isArray(aliases[key]) ? aliases[key] : [];
+        return values.some((value) => String(value).trim().toLowerCase() === normalized);
+      });
+      return matchedKey || normalized;
+    },
+    getItemStyle(item) {
+      const weatherKey = this.normalizeWeatherKey(item.weather);
+      return {
+        background: item.background || WEATHER_GRADIENTS[weatherKey] || WEATHER_GRADIENTS.sunny
+      };
+    },
+    getWeatherIcon(weather) {
+      const weatherKey = this.normalizeWeatherKey(weather);
+      return WEATHER_ICONS[weatherKey] || WEATHER_ICONS.sunny;
+    }
+  }
+});
+</script>

package/es/packages/element-plus/array/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="b()">
+    <el-button type="primary"
+               icon="el-icon-plus"
+               circle
+               :size="size"
+               v-if="validatenull(text)"
+               :disabled="disabled"
+               @click="add()"></el-button>
+    <div :class="b('item')"
+         v-for="(item,index) in text"
+         :key="index">
+      <div :class="b('input')">
+        <el-tooltip placement="bottom"
+                    :disabled="(!isImg && !isUrl) || validatenull(item)">
+          <template #content>
+            <component style="width: 200px"
+                       :src="item"
+                       @click="openImg(index)"
+                       v-if="isImg"
+                       controls="controls"
+                       :is="isMediaType(item)"></component>
+            <el-link type="primary"
+                     :href="item"
+                     v-else-if="isUrl"
+                     :target="target">{{item}}</el-link>
+          </template>
+          <el-input v-model="text[index]"
+                    :size="size"
+                    :maxlength="maxlength"
+                    :minlength="minlength"
+                    :show-word-limit="showWordLimit"
+                    :placeholder="placeholder"
+                    :disabled="disabled"></el-input>
+        </el-tooltip>
+        <template v-if="!(disabled ||readonly || alone)">
+          <el-button v-if="!isLimit"
+                     type="primary"
+                     icon="el-icon-plus"
+                     circle
+                     :size="size"
+                     :disabled="disabled"
+                     @click="add(index)"></el-button>
+          <el-button type="danger"
+                     icon="el-icon-minus"
+                     circle
+                     :size="size"
+                     :disabled="disabled"
+                     @click="remove(index)"></el-button>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+import { isMediaType } from "../../../utils/util.mjs";
+export default create({
+  name: 'array',
+  mixins: [props(), event()],
+  data () {
+    return {
+      text: []
+    }
+  },
+  computed: {
+    isLimit () {
+      if (this.validatenull(this.limit)) return false
+      else if (this.textLen >= this.limit) return true
+      return false
+    },
+    textLen () {
+      return (this.text || []).length
+    },
+    isImg () {
+      return this.type === 'img'
+    },
+    isUrl () {
+      return this.type === 'url'
+    },
+  },
+  props: {
+    fileType: String,
+    alone: Boolean,
+    type: String,
+    limit: Number,
+    maxlength: [String, Number],
+    minlength: [String, Number],
+    showWordLimit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    isMediaType (item) {
+      return isMediaType(item, this.fileType)
+    },
+    add (index) {
+      this.text.splice(index + 1, 0, '');
+    },
+    remove (index) {
+      this.text.splice(index, 1)
+    },
+    openImg (index) {
+      const list = this.text.map(ele => {
+        return { thumbUrl: ele, url: ele, type: this.fileType }
+      })
+      this.$ImagePreview(list, index);
+    },
+  }
+})
+</script>

package/es/packages/element-plus/article/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div :class="b()">
+    <div :class="b('header')">
+      <div :class="b('title')"
+           v-if="title"
+           v-text="title"></div>
+      <small :class="b('meta')"
+             v-if="meta"
+             v-text="meta"></small>
+    </div>
+    <div :class="b('lead')"
+         v-text="lead"
+         v-if="lead"></div>
+    <div :class="b('body')"
+         v-if="body"
+         v-html="body"></div>
+  </div>
+
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+const propsDefault = {
+  title: "title",
+  meta: "meta",
+  lead: "lead",
+  body: "body"
+};
+export default create({
+  name: "article",
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    props: {
+      type: Object,
+      default: () => {
+        return propsDefault;
+      }
+    }
+  },
+  computed: {
+    titleKey () {
+      return this.props.title || propsDefault.title;
+    },
+    metaKey () {
+      return this.props.meta || propsDefault.meta;
+    },
+    leadKey () {
+      return this.props.lead || propsDefault.lead;
+    },
+    bodyKey () {
+      return this.props.body || propsDefault.body;
+    },
+    title () {
+      return this.data[this.titleKey];
+    },
+    meta () {
+      return this.data[this.metaKey];
+    },
+    lead () {
+      return this.data[this.leadKey];
+    },
+    body () {
+      return this.data[this.bodyKey];
+    }
+  },
+  mounted () { }
+});
+</script>

package/es/packages/element-plus/card/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div :class="b()">
+    <el-row :span="24"
+            :gutter="gutter">
+      <el-col :span="span"
+              v-if="validData(option.addBtn,true)">
+        <div :class="b('item',{'add':true})"
+             @click="rowAdd()">
+          <el-icon>
+            <el-icon-plus />
+          </el-icon>
+          <span>{{ t('crud.addBtn') }}</span>
+        </div>
+      </el-col>
+      <el-col :span="span"
+              v-for="(item,index) in data"
+              :key="index">
+        <div :class="b('item')"
+             @click="rowClick(item,index)">
+          <div :class="b('body')">
+            <div :class="b('avatar')">
+              <img :src="item[imgKey]"
+                   alt="">
+            </div>
+            <div :class="b('detail')">
+              <div :class="b('title')">{{item[titleKey]}}</div>
+              <div :class="b('info')">{{item[infoKey]}}</div>
+            </div>
+          </div>
+          <div :class="b('menu')">
+            <slot name="menu"
+                  :index="index"
+                  :row="item"></slot>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+const propsDefault = {
+  img: "img",
+  title: "title",
+  info: "info"
+};
+import create from "../../../core/create.mjs";
+import locale from "../../../core/locale.mjs";
+export default create({
+  name: "card",
+  mixins: [locale],
+  props: {
+    props: {
+      type: Object,
+      default: () => {
+        return propsDefault;
+      }
+    },
+    option: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data () {
+    return {
+      propsDefault: propsDefault
+    };
+  },
+  computed: {
+    imgKey: function () {
+      return this.option.props.img || this.propsDefault.img;
+    },
+    titleKey: function () {
+      return this.option.props.title || this.propsDefault.title;
+    },
+    infoKey: function () {
+      return this.option.props.info || this.propsDefault.info;
+    },
+    span () {
+      return this.option.span || 8;
+    },
+    gutter () {
+      return this.option.gutter || 20;
+    }
+  },
+  methods: {
+    rowAdd () {
+      this.$emit("row-add");
+    },
+    rowClick (row, index) {
+      this.$emit("row-click", row, index);
+    }
+  }
+});
+</script>

package/es/packages/element-plus/cascader/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <el-cascader
+    ref="cascader"
+    :options="dic"
+    :class="b()"
+    @click="handleClick"
+    @change="handleValueChange"
+    v-model="text"
+    :placeholder="placeholder"
+    :props="allProps"
+    :size="size"
+    :effect="effect"
+    :clearable="clearableVal"
+    :show-all-levels="showAllLevels"
+    :filterable="filterable"
+    :popper-class="popperClass"
+    :separator="separator"
+    :disabled="disabled"
+    :show-checked-strategy="showCheckedStrategy"
+    :collapse-tags="tags || collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
+    :max-collapse-tags="maxCollapseTags"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  >
+    <template #="{ data, node }">
+      <slot v-if="$slots.default" :data="data" :node="node"></slot>
+      <span v-else>{{ data[labelKey] }}</span>
+    </template>
+  </el-cascader>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+export default create({
+  name: "cascader",
+  mixins: [props(), event()],
+  props: {
+    clearValidate: Function,
+    effect: {
+      type: String,
+      default: "light",
+    },
+    showCheckedStrategy: String,
+    checkStrictly: {
+      type: Boolean,
+      default: false,
+    },
+    emitPath: {
+      type: Boolean,
+      default: true,
+    },
+    tags: {
+      type: Boolean,
+      default: false,
+    },
+    collapseTags: Boolean,
+    collapseTagsTooltip: Boolean,
+    maxCollapseTags: Number,
+    expandTrigger: {
+      type: String,
+      default: "hover",
+    },
+    showAllLevels: {
+      type: Boolean,
+      default: true,
+    },
+    lazy: {
+      type: Boolean,
+      default: false,
+    },
+    lazyLoad: Function,
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    separator: {
+      type: String,
+    },
+  },
+  computed: {
+    allProps() {
+      return {
+        label: this.labelKey,
+        value: this.valueKey,
+        disabled: this.disabledKey,
+        children: this.childrenKey,
+        checkStrictly: this.checkStrictly,
+        multiple: this.multiple,
+        emitPath: this.emitPath,
+        expandTrigger: this.props.expandTrigger,
+        hoverThreshold: this.props.hoverThreshold,
+        leaf: this.leafKey,
+        lazy: this.lazy,
+        lazyLoad: (node, resolve) => {
+          let callback = (list) => {
+            let findDic = (list, value, children) => {
+              list.forEach((ele) => {
+                if (ele[this.valueKey] == value) {
+                  ele[this.childrenKey] = children;
+                } else if (ele[this.childrenKey]) {
+                  findDic(ele[this.childrenKey]);
+                }
+              });
+            };
+            findDic(this.dic, node[this.valueKey], list);
+            resolve(list);
+          };
+          this.lazyLoad && this.lazyLoad(node, callback);
+        },
+        expandTrigger: this.expandTrigger,
+      };
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleValueChange(val) {
+      setTimeout(() => {
+        if (!this.validatenull(val) && this.rules && this.clearValidate) {
+          this.clearValidate(this.prop);
+        }
+      });
+    },
+    getCheckedNodes(leafOnly = false) {
+      return this.$refs.cascader.getCheckedNodes(leafOnly);
+    },
+  },
+});
+</script>