@smallwei/avue 3.8.1 → 3.8.3

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

@@ -0,0 +1,117 @@
+<template>
+  <el-mention v-model="text"
+              :class="b()"
+              @click="handleClick"
+              @focus="handleFocus"
+              @blur="handleBlur"
+              :placeholder="placeholder"
+              :size="size"
+              :prefix="prefix"
+              :options="options"
+              :loading="loading"
+              :split="split"
+              :whole="whole"
+              :check-is-whole="checkIsWhole"
+              @search="remote?handleRemoteMethod:undefined"
+              :clearable="clearableVal"
+              :readonly="readonly"
+              :disabled="disabled">
+    <template #prepend
+              v-if="prepend"><span @click="prependClick(text)">{{prepend}}</span>
+    </template>
+    <template #append
+              v-if="append">
+      <span @click="appendClick(text)">{{append}}</span>
+    </template>
+    <template #label="{ item }">
+      <slot :item="item"
+            :label="labelKey"
+            :value="valueKey"
+            v-if="$slots.default">
+      </slot>
+      <span v-else>{{ item.label }}</span>
+    </template>
+  </el-mention>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+import { sendDic } from "../../../core/dic.mjs";
+export default create({
+  name: "mention",
+  mixins: [props(), event()],
+  data () {
+    return {
+      created: false,
+      loading: false,
+      netDic: [],
+    };
+  },
+  props: {
+    split: {
+      type: String,
+      default: ','
+    },
+    remote: Boolean,
+    prependClick: {
+      type: Function,
+      default: () => { }
+    },
+    prepend: {
+      type: String
+    },
+    appendClick: {
+      type: Function,
+      default: () => { }
+    },
+    append: {
+      type: String
+    },
+    prefix: String,
+    whole: Boolean,
+    checkIsWhole: Function
+  },
+  created () { },
+  mounted () { },
+  computed: {
+    options () {
+      return this.netDic.map(ele => {
+        return {
+          label: ele[this.labelKey],
+          value: ele[this.valueKey],
+        }
+      })
+    }
+  },
+  watch: {
+    dic: {
+      handler (val) {
+        this.netDic = val;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleModelValue (val) {
+      if (!this.validatenull(this.text)) {
+        if (this.remote && !this.created) {
+          this.created = true
+          this.handleRemoteMethod(this.text)
+        }
+      }
+    },
+    handleRemoteMethod (query) {
+      this.loading = true
+      sendDic({
+        column: this.column,
+        value: query,
+      }, this).then(res => {
+        this.loading = false;
+        this.netDic = res;
+      });
+    }
+  }
+});
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <div :class="b()">
+    <el-radio-group v-model="text"
+                    :size="size"
+                    @click="handleClick"
+                    :disabled="disabled">
+      <component :is="componentName"
+                 v-for="(item,index) in dic"
+                 :value="item[valueKey]"
+                 :border="border"
+                 :readonly="readonly"
+                 :disabled="item[disabledKey]"
+                 :key="index">{{item[labelKey]}}</component>
+    </el-radio-group>
+  </div>
+</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: "radio",
+  mixins: [props(), event()],
+  data () {
+    return {
+      name: 'radio',
+    };
+  },
+  props: {
+    modelValue: {}
+  },
+  watch: {},
+  created () { },
+  mounted () { },
+  methods: {}
+});
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <el-rate v-model="text"
+           @click="handleClick"
+           :max="max"
+           :readonly="readonly"
+           :texts="texts"
+           :show-text="showText"
+           :icon-classes="iconClasses"
+           :void-icon-class="voidIconClass"
+           :disabled="disabled"
+           :colors="colors"></el-rate>
+</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: "rate",
+  mixins: [props(), event()],
+  props: {
+    colors: {
+      type: Array
+    },
+    max: {
+      type: Number,
+      default: 5
+    },
+    iconClasses: {
+      type: Array
+    },
+    texts: {
+      type: Array
+    },
+    showText: {
+      type: Boolean,
+      default: false
+    },
+    voidIconClass: {
+      type: String
+    }
+  },
+  data () {
+    return {};
+  },
+  watch: {},
+  created () { },
+  mounted () { },
+  methods: {}
+});
+</script>

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

@@ -0,0 +1,129 @@
+<template>
+  <el-row :class="[b(),{'avue--card':isCard}]"
+          :span="24">
+    <el-col :span="column.span || 24"
+            v-for="(column,index) in columnOption"
+            :key="column.prop"
+            :class="b('item')">
+      <p :class="b('title')">{{column.label}}:</p>
+      <div :class="b('content')">
+        <slot :name="column.prop"
+              :dic="DIC[column.prop]"
+              v-if="mainSlot.includes(column.prop)"></slot>
+        <span v-else
+              :class="[b('tags'),{'avue-search__tags--active':getActive(item,column)}]"
+              @click="handleClick(column,item)"
+              v-for="item in DIC[column.prop]"
+              :key="getKey(item,column.props,valueKey)">{{getKey(item,column.props,labelKey)}}</span>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+import { DIC_PROPS } from '../../../global/variable.mjs'
+import init from "../../core/common/init.mjs";
+export default create({
+  name: "search",
+  mixins: [init()],
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  watch: {
+    modelValue: {
+      handler (val) {
+        this.setVal(val)
+      },
+      deep: true
+    }
+  },
+  computed: {
+    form: {
+      get () {
+        return this.modelValue
+      },
+      set (val) {
+        this.setVal(val)
+      }
+    },
+    props () {
+      return this.parentOption.props || {}
+    },
+    labelKey () {
+      return DIC_PROPS.label
+    },
+    valueKey () {
+      return DIC_PROPS.value
+    },
+    mainSlot () {
+      let result = [];
+      this.propOption.forEach(item => {
+        if (this.$slots[item.prop]) result.push(item.prop)
+      })
+      return result
+    },
+    isCard () {
+      return this.parentOption.card;
+    },
+    parentOption () {
+      return this.tableOption;
+    },
+    propOption () {
+      return this.columnOption;
+    },
+    columnOption () {
+      return this.parentOption.column;
+    }
+  },
+  mounted () {
+    this.dataFormat();
+  },
+  methods: {
+    setVal (val) {
+      this.$emit('update:modelValue', val)
+      this.$emit("change", val);
+    },
+    getKey (item = {}, props = {}, key) {
+      return item[props[key] || this.props[key] || key];
+    },
+    dataFormat () {
+      this.columnOption.forEach(ele => {
+        const prop = ele.prop;
+        if (this.validatenull(this.form[prop])) {
+          this.form[prop] = ele.multiple === false ? '' : []
+        }
+      });
+    },
+    getActive (item, column) {
+      const value = this.getKey(item, column.props, this.valueKey);
+      if (column.multiple === false) {
+        return this.form[column.prop] === value;
+      } else {
+        return this.form[column.prop].includes(value);
+      }
+    },
+    handleClick (column, item) {
+      const value = this.getKey(item, column.props, this.valueKey);
+      //单选
+      if (column.multiple === false) {
+        this.form[column.prop] = value;
+      } else {
+        // 多选
+        const index = this.form[column.prop].indexOf(value);
+        if (index === -1) {
+          this.form[column.prop].push(value);
+        } else {
+          this.form[column.prop].splice(index, 1);
+        }
+      }
+    }
+  }
+});
+</script>
+

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

@@ -0,0 +1,292 @@
+<template>
+  <component
+    :is="componentName"
+    ref="main"
+    :class="b()"
+    v-model="text"
+    :size="size"
+    :options="netDic"
+    :props="props"
+    :loading="loading"
+    :loading-text="loadingText"
+    :value-on-clear="valueOnClear"
+    :multiple="multiple"
+    :filterable="remote ? true : filterable"
+    :remote="remote"
+    :readonly="readonly"
+    :no-match-text="noMatchText"
+    :no-data-text="noDataText"
+    :remote-method="remote ? handleRemoteMethod : undefined"
+    :popper-class="popperClass"
+    :popper-append-to-body="popperAppendToBody"
+    :collapse-tags="tags || collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
+    :max-collapse-tags="maxCollapseTags"
+    :clearable="clearableVal"
+    :placeholder="placeholder"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @click="handleClick"
+    @remove-tag="handleremoveTag"
+    :multiple-limit="limit"
+    :allow-create="allowCreate"
+    :default-first-option="defaultFirstOption"
+    :disabled="disabled"
+  >
+    <template #="scope">
+      <template v-if="virtualize">
+        <slot
+          :label="labelKey"
+          :value="valueKey"
+          :item="scope.item"
+          v-if="$slots.default"
+        >
+        </slot>
+        <template v-else>
+          <span>{{ getLabelText(scope.item) }}</span>
+          <span v-if="scope.item[descKey]" :class="b('desc')">{{
+            scope.item[descKey]
+          }}</span>
+        </template>
+      </template>
+      <template v-else>
+        <template v-if="isGroup">
+          <el-option-group
+            v-for="(item, index) in netDic"
+            :key="index"
+            :label="getLabelText(item)"
+          >
+            <el-option
+              v-for="(citem, cindex) in item[groupsKey]"
+              :key="citem[valueKey]"
+              :class="citem[classNameKey]"
+              :disabled="citem[disabledKey]"
+              :label="getLabelText(citem)"
+              :value="citem[valueKey]"
+            >
+              <template #>
+                <slot
+                  :label="labelKey"
+                  :value="valueKey"
+                  :item="citem"
+                  v-if="$slots.default"
+                >
+                </slot>
+                <template v-else>
+                  <span>{{ getLabelText(citem) }}</span>
+                  <span v-if="citem[descKey]" :class="b('desc')">{{
+                    citem[descKey]
+                  }}</span>
+                </template>
+              </template>
+            </el-option>
+          </el-option-group>
+        </template>
+        <template v-else>
+          <div :class="b('check')">
+            <el-checkbox
+              v-if="all && multiple"
+              v-model="checked"
+              :disabled="disabled"
+              :indeterminate="indeterminate"
+              @change="checkChange"
+              >{{ t('check.checkAll') }}</el-checkbox
+            >
+          </div>
+
+          <el-option
+            v-for="(item, index) in netDic"
+            :key="item[valueKey]"
+            :class="item[classNameKey]"
+            :disabled="item[disabledKey]"
+            :label="getLabelText(item)"
+            :value="item[valueKey]"
+          >
+            <template #>
+              <slot
+                :label="labelKey"
+                :value="valueKey"
+                :item="item"
+                v-if="$slots.default"
+              >
+              </slot>
+              <template v-else>
+                <span>{{ getLabelText(item) }}</span>
+                <span v-if="item[descKey]" :class="b('desc')">{{
+                  item[descKey]
+                }}</span>
+              </template>
+            </template>
+          </el-option>
+        </template>
+      </template>
+    </template>
+  </component>
+</template>
+
+<script>
+import packages from "../../../core/packages.mjs";
+import create from "../../../core/create.mjs";
+import props from "../../core/common/props.mjs";
+import event from "../../core/common/event.mjs";
+import locale from "../../../core/locale.mjs";
+import { sendDic } from "../../../core/dic.mjs";
+import { DIC_SPLIT } from "../../../global/variable.mjs";
+export default create({
+  name: "select",
+  mixins: [props(), event(), locale],
+  data() {
+    return {
+      checked: false,
+      indeterminate: false,
+      create: false,
+      netDic: [],
+      loading: false,
+    };
+  },
+  props: {
+    virtualize: Boolean,
+    valueOnClear: {
+      type: [String, Number, Boolean, Function],
+      default: undefined,
+    },
+    loadingText: {
+      type: String,
+    },
+    noMatchText: {
+      type: String,
+    },
+    noDataText: {
+      type: String,
+    },
+    drag: {
+      type: Boolean,
+      default: false,
+    },
+    remote: {
+      type: Boolean,
+      default: false,
+    },
+    tags: {
+      type: Boolean,
+      default: false,
+    },
+    removeTag: Function,
+    collapseTags: Boolean,
+    collapseTagsTooltip: Boolean,
+    maxCollapseTags: Number,
+    limit: {
+      type: Number,
+      default: 0,
+    },
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    allowCreate: {
+      type: Boolean,
+      default: false,
+    },
+    defaultFirstOption: {
+      type: Boolean,
+      default: false,
+    },
+    all: {
+      type: Boolean,
+      default: false,
+    },
+    popperAppendToBody: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  watch: {
+    dic: {
+      handler(val) {
+        this.netDic = val;
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    classNameKey() {
+      return this.props.className || "className";
+    },
+    componentName() {
+      return "elSelect" + (this.virtualize ? "V2" : "");
+    },
+  },
+  mounted() {
+    if (this.drag) {
+      this.setSort();
+    }
+  },
+  methods: {
+    handleModelValue(val) {
+      if (!this.validatenull(this.text)) {
+        if (this.remote && !this.created) {
+          this.created = true;
+          this.handleRemoteMethod(
+            this.multiple ? this.text.join(DIC_SPLIT) : this.text
+          );
+        }
+      }
+      if (this.multiple) {
+        if (this.text.length == 0) {
+          this.checked = false;
+          this.indeterminate = false;
+        } else if (this.text.length == this.netDic.length) {
+          this.checked = true;
+          this.indeterminate = false;
+        } else {
+          this.indeterminate = true;
+        }
+      }
+    },
+    setSort() {
+      if (!window.Sortable) {
+        packages.logs("Sortable");
+        return;
+      }
+      const el = this.$refs.main.$el.querySelectorAll(
+        ".el-select__selection"
+      )[0];
+      this.sortable = window.Sortable.create(el, {
+        animation: 100,
+        onEnd: (evt) => {
+          const targetRow = this.modelValue.splice(evt.oldIndex, 1)[0];
+          this.modelValue.splice(evt.newIndex, 0, targetRow);
+        },
+      });
+    },
+    handleRemoteMethod(query) {
+      this.loading = true;
+      sendDic(
+        {
+          column: this.column,
+          value: query,
+        },
+        this
+      ).then((res) => {
+        this.loading = false;
+        this.netDic = res;
+      });
+    },
+    checkChange(val) {
+      this.text = [];
+      this.checked = val;
+      this.indeterminate = false;
+      if (val) {
+        this.text = this.netDic
+          .filter((ele) => !ele[this.disabledKey])
+          .map((ele) => ele[this.valueKey]);
+      }
+    },
+    handleremoveTag(tagValue) {
+      if (this.removeTag && typeof this.removeTag === 'function') {
+        this.removeTag(tagValue);
+      }
+    },
+  },
+});
+</script>