@smallwei/avue 3.8.5 → 3.9.0

package/es/packages/core/components/form/index.vue

@@ -1,176 +0,0 @@
-<template>
-  <custom v-if="render"
-          :render="render"
-          :index="index"
-          :row="row"
-          :dic="dic"
-          :column="column"
-          :params="params"
-          :event="event"></custom>
-  <component v-else
-             :is="getComponent(column)"
-             v-model="text"
-             v-bind="getBind(column)"
-             align="left"
-             v-on="event"
-             :column="Object.assign(column,params)"
-             :dic="dic"
-             :clearValidate="clearValidate"
-             :box-type="boxType"
-             ref="temp"
-             :disabled="column.disabled || disabled"
-             :readonly="column.readonly || readonly"
-             :placeholder="boxType == 'view' ? '' : getPlaceholder(column)"
-             :props="column.props || props"
-             :propsHttp="column.propsHttp || propsHttp"
-             :size="column.size || size"
-             :table-data="tableData"
-             :type="type || column.type"
-             :column-slot="columnSlot"
-             @keyup.enter="enterChange">
-    <template #="scope"
-              v-if="$slots.default">
-      <slot v-bind="scope"></slot>
-    </template>
-    <template #
-              v-else-if="params.html">
-      <span v-html="params.html"></span>
-    </template>
-    <template v-for="item in columnSlot"
-              #[item]="scope">
-      <slot v-bind="scope"
-            v-if="!item.endsWith('-desc')"
-            :name="item"></slot>
-    </template>
-  </component>
-  <template v-if="!render && boxType !== 'view'">
-    <slot v-if="columnSlot.includes(column.prop + '-desc')"
-          :name="column.prop + '-desc'"
-          :column="column"
-          :description="column.description"
-          :descClass="column.descClass"
-          :size="column.size || size"></slot>
-    <span v-else
-          :class="column.descClass ? column.descClass : 'field-desc'">
-      {{column.description}}
-    </span>
-  </template>
-</template>
-
-<script>
-import custom from "./custom.mjs";
-import { getComponent, getPlaceholder } from "../../../../core/dataformat.mjs";
-import slot from '../../../../core/slot.mjs'
-export default {
-  name: 'form-temp',
-  mixins: [slot],
-  emits: ['update:modelValue', 'change', 'enter'],
-  components: {
-    custom
-  },
-  props: {
-    modelValue: {},
-    clearValidate: Function,
-    uploadSized: Function,
-    uploadBefore: Function,
-    uploadDelete: Function,
-    uploadAfter: Function,
-    uploadPreview: Function,
-    uploadError: Function,
-    uploadExceed: Function,
-    boxType: String,
-    row: Object,
-    render: Function,
-    index: [String, Number],
-    columnSlot: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    tableData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    clearable: {
-      type: Boolean
-    },
-    enter: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String
-    },
-    propsHttp: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    props: {
-      type: Object
-    },
-    dic: {
-      type: Array
-    },
-    placeholder: {
-      type: String
-    },
-    size: {
-      type: String
-    },
-    disabled: {
-      type: Boolean
-    },
-    readonly: {
-      type: Boolean
-    },
-    column: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  computed: {
-    params () {
-      return this.column.params || {}
-    },
-    event () {
-      return this.column.event || {}
-    },
-    text: {
-      get () {
-        return this.modelValue
-      },
-      set (val) {
-        this.$emit('update:modelValue', val);
-        this.$emit('change', val)
-      }
-    }
-  },
-  methods: {
-    getComponent (column) {
-      return getComponent(column.type, column.component)
-    },
-    getPlaceholder,
-    getBind (column) {
-      let params = { ...column, ...this.params, ...this.$uploadFun(column) };
-      ['value', 'className'].forEach(ele => {
-        delete params[ele]
-      })
-      return params
-    },
-    enterChange () {
-      if (typeof this.column.enter === 'function') {
-        this.column.enter({ value: this.text, column: this.column })
-      } else if (this.enter) {
-        this.$emit('enter')
-      }
-    }
-  }
-}
-</script>

package/es/packages/core/components/icon/index.vue

@@ -1,37 +0,0 @@
-<template>
-  <span v-if="text" class="avue-icon"
-        :class="{'avue-icon--small':small}">
-    <svg v-if="text.includes('#')"
-         aria-hidden="true">
-      <use :xlink:href="text"></use>
-    </svg>
-    <el-icon v-else-if="text.indexOf('el-') == 0"
-             :size="size"
-             :color="color">
-      <component :is="text" />
-    </el-icon>
-    <i v-else
-       :class="text"></i>
-  </span>
-</template>
-
-<script>
-export default {
-  name: 'icon-temp',
-  props: {
-    small: Boolean,
-    color: String,
-    size: {
-      type: [String, Number],
-      default: 32
-    },
-    text: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
-
-<style>
-</style>

package/es/packages/core/components/image-preview/index.ts

@@ -1,37 +0,0 @@
-import Main from './index.vue';
-import { createVNode, render } from 'vue';
-
-export default function (_context: any) {
-  const defaultContext = _context;
-  return (datas: any[] = [], index = 0, ops: Record<string, any> = {}) => {
-    const options = {
-      datas,
-      index,
-      ops: Object.assign(
-        {
-          closeOnClickModal: false,
-          beforeClose: null,
-          click: null,
-          modal: true,
-        },
-        ops
-      ),
-    };
-    let appendTo: Element | HTMLElement | null = ops.appendTo;
-    if (ops.appendTo) {
-      appendTo = document.querySelector(ops.appendTo);
-    } else {
-      appendTo = document.body;
-    }
-    const parent = document.createElement('div');
-    const instance: any = createVNode(Main, options);
-    instance.appContext = defaultContext;
-    instance.props.onDestroy = () => {
-      render(null, parent);
-      parent.remove();
-    };
-    render(instance, parent);
-    appendTo?.appendChild(parent.firstElementChild as Node);
-    return instance;
-  };
-}

package/es/packages/core/components/image-preview/index.vue

@@ -1,215 +0,0 @@
-<template>
-  <div :class="b()">
-    <div :class="b('mask')"
-         v-if="ops.modal"
-         @click="close"></div>
-    <span class="el-image-viewer__btn el-image-viewer__close"
-          @click="close">
-      <el-icon-close />
-    </span>
-    <span class="el-image-viewer__btn el-image-viewer__prev"
-          @click="handlePrev()"
-          v-if="isRrrow">
-      <el-icon-arrow-left />
-    </span>
-    <span class="el-image-viewer__btn el-image-viewer__next"
-          @click="handleNext()"
-          v-if="isRrrow">
-      <el-icon-arrow-right />
-    </span>
-    <div :class="b('box')"
-         ref="box">
-      <el-carousel ref="carousel"
-                   :show-indicators="false"
-                   :initial-index="index"
-                   :initial-swipe="index"
-                   :interval="ops.interval || 0"
-                   arrow="never"
-                   @change="handleChange"
-                   indicator-position="none">
-        <el-carousel-item @click.self="ops.closeOnClickModal?close():''"
-                          v-for="(item,indexs) in datas"
-                          :key="indexs">
-          <component @click="handleClick(item,indexs)"
-                     :id="'avue-image-preview__'+indexs"
-                     :src="item.url"
-                     :style="[styleName,styleBoxName]"
-                     ref="item"
-                     @mousedown="move"
-                     controls="controls"
-                     :is="isMediaType(item)"
-                     v-if="isMediaType(item)"
-                     ondragstart="return false"></component>
-          <div v-else
-               @click="handleClick(item,indexs,true)"
-               :id="'avue-image-preview__'+indexs"
-               :class="b('file')">
-            <span>
-              <el-icon-document />
-              <p>{{item.name || getName(item.url)}}</p>
-            </span>
-          </div>
-        </el-carousel-item>
-      </el-carousel>
-    </div>
-    <div class="el-image-viewer__btn el-image-viewer__actions">
-      <div class="el-image-viewer__actions__inner">
-        <el-icon-zoom-out @click="subScale" class="viewer-icon" />
-        <el-icon-zoom-in @click="addScale" class="viewer-icon" />
-        <i class="el-image-viewer__actions__divider"></i>
-        <el-icon-refresh-left @click="rotate=rotate-90" class="viewer-icon" />
-        <el-icon-refresh-right @click="rotate=rotate+90" class="viewer-icon" />
-        <i class="el-image-viewer__actions__divider"></i>
-        <el-icon-printer @click="handlePrint" class="viewer-icon" />
-        <i class="el-image-viewer__actions__divider"></i>
-        <el-icon-d-arrow-left @click="handlePrev" class="viewer-icon" />
-        <el-icon-d-arrow-right @click="handleNext" class="viewer-icon" />
-        <i class="el-image-viewer__actions__divider"></i>
-        <el-icon-refresh @click="handleReset" class="viewer-icon" />
-        <i class="el-image-viewer__actions__divider"></i>
-        <el-icon-download @click="handleDownload" class="viewer-icon" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { setPx, isMediaType } from '../../../../utils/util.mjs';
-import create from "../../../../core/create.mjs";
-import $Print from '../../../../plugin/print/index.mjs';
-export default create({
-  name: "image-preview",
-  props: {
-    datas: Array,
-    index: [Number, String],
-    ops: Object,
-    onDestroy: Function
-  },
-  data () {
-    return {
-      left: 0,
-      top: 0,
-      scale: 1,
-      rotate: 0,
-      count: this.index
-    };
-  },
-  computed: {
-    styleBoxName () {
-      return {
-        marginLeft: setPx(this.left),
-        marginTop: setPx(this.top)
-      }
-    },
-    styleName () {
-      return {
-        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
-        maxWidth: '100%',
-        maxHeight: '100%',
-      }
-    },
-    isRrrow () {
-      return this.datas.length > 1
-    }
-  },
-  mounted () {
-    this.$refs.item.forEach((ele, index) => {
-      this.$refs.item[index].onwheel = (e) => {
-        if (e.wheelDelta > 0) {
-          this.addScale()
-        } else {
-          this.subScale()
-        }
-      }
-    })
-  },
-  methods: {
-    getName (url) {
-      return url.substring(url.lastIndexOf('/') + 1)
-    },
-    handlePrint () {
-      $Print(`#avue-image-preview__${this.count}`)
-    },
-    handlePrev () {
-      this.stopItem()
-      this.$refs.carousel.prev()
-    },
-    handleNext () {
-      this.stopItem()
-      this.$refs.carousel.next()
-    },
-    handleReset() {
-      this.scale = 1;
-      this.rotate = 0;
-      this.left = 0;
-      this.top = 0;
-    },
-    handleDownload() {
-      const currentItem = this.datas[this.count];
-      if (!currentItem || !currentItem.url) return;
-      
-      const link = document.createElement('a');
-      link.href = currentItem.url;
-      link.download = currentItem.name || this.getName(currentItem.url);
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    },
-    stopItem () {
-      this.left = 0;
-      this.top = 0;
-    },
-    isMediaType (item) {
-      return isMediaType(item.url, item.type)
-    },
-    subScale () {
-      if (this.scale != 0.2) {
-        this.scale = parseFloat((this.scale - 0.2).toFixed(2))
-      }
-    },
-    addScale () {
-      this.scale = parseFloat((this.scale + 0.2).toFixed(2))
-    },
-    handleChange (n, o) {
-      this.scale = 1;
-      this.rotate = 0;
-      this.count = n
-
-    },
-    move (e) {       //获取目标元素s
-      //算出鼠标相对元素的位置
-      let disX = e.clientX;
-      let disY = e.clientY;
-      let scale = 2;
-      document.onmousemove = (e) => {       //鼠标按下并移动的事件
-        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-        let left = e.clientX - disX;
-        let top = e.clientY - disY;
-        disX = e.clientX;
-        disY = e.clientY;
-        //移动当前元素
-        this.left = this.left + (left * scale)
-        this.top = this.top + (top * scale)
-
-      };
-      document.onmouseup = (e) => {
-        document.onmousemove = null;
-        document.onmouseup = null;
-      };
-    },
-    handleClick (item, index, df = false) {
-      if (typeof this.ops.click == "function") {
-        this.ops.click(item, index);
-      } else if (df) {
-        window.open(item.url)
-      }
-    },
-    close () {
-      this.isShow = false
-      if (typeof this.ops.beforeClose == "function") {
-        this.ops.beforeClose(this.datas, this.count);
-      }
-      this.onDestroy()
-    }
-  }
-});
-</script>

package/es/packages/core/directive/contextmenu.ts

@@ -1,103 +0,0 @@
-type ContextMenuItem = HTMLLIElement & {
-  _onEnter?: () => void;
-  _onLeave?: () => void;
-};
-
-export default (() => {
-  let dialogDom: HTMLElement | null;
-  let closeDialog: (() => void) | null;
-
-  function setupChildMenus(items: ContextMenuItem[], currentDialogDom: HTMLElement, divTop: number, clientHeight: number) {
-    items.forEach((ele, i) => {
-      const childDom = ele.querySelector<HTMLElement>('ul');
-      if (!childDom) return;
-      Object.assign(childDom.style, {
-        position: 'absolute',
-        top: '-9999px',
-        width: 'max-content',
-      });
-      if (ele._onEnter) {
-        ele.removeEventListener('mouseenter', ele._onEnter);
-        ele.removeEventListener('mouseleave', ele._onLeave!);
-      }
-      ele._onEnter = () => {
-        const calcHeight = clientHeight - (divTop + ele.clientHeight * (i + 1)) - childDom.clientHeight;
-        childDom.style.left = `${currentDialogDom.clientWidth + 1}px`;
-        childDom.style.top = `${calcHeight < 0 ? calcHeight : 0}px`;
-      };
-      ele._onLeave = () => {
-        childDom.style.top = '-9999px';
-      };
-      ele.addEventListener('mouseenter', ele._onEnter);
-      ele.addEventListener('mouseleave', ele._onLeave);
-    });
-  }
-
-  function setEvent(el: HTMLElement, binding: any) {
-    const dom = document.getElementById(binding.value.id);
-    if (dom) dom.style.display = 'none';
-    el.oncontextmenu = function (e: MouseEvent) {
-      e.preventDefault();
-      const { id, event, hide, value } = binding.value;
-      dialogDom = document.getElementById(id);
-      if (!dialogDom) return;
-      const { clientWidth, clientHeight } = document.documentElement;
-      let { clientX: divLeft, clientY: divTop } = e;
-
-      dialogDom.style.display = 'block';
-      const { offsetWidth: dialogDomWidth, offsetHeight: dialogDomHeight } = dialogDom;
-
-      if (clientHeight - divTop - dialogDomHeight < 0) {
-        divTop -= dialogDomHeight;
-      }
-      if (clientWidth - divLeft - dialogDomWidth < 0) {
-        divLeft -= dialogDomWidth;
-      }
-
-      const firstLevelItems = Array.from(dialogDom.querySelectorAll('li')).filter(
-        (item) => item.parentNode === dialogDom
-      ) as ContextMenuItem[];
-      setupChildMenus(firstLevelItems, dialogDom, divTop, clientHeight);
-
-      if (closeDialog) {
-        document.removeEventListener('click', closeDialog);
-      }
-      closeDialog = () => {
-        if (!dialogDom) return;
-        dialogDom.style.display = 'none';
-        hide && hide(value, e);
-        document.removeEventListener('click', closeDialog!);
-        closeDialog = null;
-      };
-
-      const showDialog = () => {
-        if (!dialogDom) return;
-        Object.assign(dialogDom.style, {
-          position: 'fixed',
-          zIndex: 1024,
-          top: `${divTop}px`,
-          left: `${divLeft}px`,
-        });
-        document.addEventListener('click', closeDialog!);
-      };
-
-      event ? event(value, showDialog) : showDialog();
-    };
-  }
-
-  return {
-    mounted(el: HTMLElement, binding: any) {
-      setEvent(el, binding);
-    },
-    updated(el: HTMLElement, binding: any) {
-      setEvent(el, binding);
-    },
-    unmounted(el: HTMLElement) {
-      el.oncontextmenu = null;
-      if (closeDialog) {
-        document.removeEventListener('click', closeDialog);
-        closeDialog = null;
-      }
-    },
-  };
-})();

package/es/packages/core/directive/permission.ts

@@ -1,18 +0,0 @@
-export default (() => {
-  function init(el: HTMLElement, binding: any) {
-    const value = binding.value;
-    if (value === false) {
-      el.style.display = 'none';
-    } else {
-      el.style.display = '';
-    }
-  }
-  return {
-    mounted(el: HTMLElement, binding: any) {
-      init(el, binding);
-    },
-    updated(el: HTMLElement, binding: any) {
-      init(el, binding);
-    },
-  };
-})();

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

@@ -1,66 +0,0 @@
-<template>
-  <div class="data-box">
-    <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-icon"
-                 :style="{backgroundColor:item.color}">
-              <el-icon>
-                <component :is="item.icon"></component>
-              </el-icon>
-            </div>
-            <div class="item-info">
-              <avue-count-up :animation="item.animation || animation"
-                             :decimals="item.decimals || decimals"
-                             :style="{color:item.color}"
-                             class="title"
-                             :end="item.count"></avue-count-up>
-              <div class="info">{{item.title}}</div>
-            </div>
-          </a>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import create from "../../../core/create.mjs";
-export default create({
-  name: "data-box",
-  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>