@smallwei/avue 3.8.1 → 3.8.3

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

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

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

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

@@ -0,0 +1,215 @@
+<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.mjs

@@ -0,0 +1,92 @@
+export default (() => {
+    let dialogDom;
+    let closeDialog;
+    function setupChildMenus(items, currentDialogDom, divTop, clientHeight) {
+        items.forEach((ele, i) => {
+            const childDom = ele.querySelector('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, binding) {
+        const dom = document.getElementById(binding.value.id);
+        if (dom)
+            dom.style.display = 'none';
+        el.oncontextmenu = function (e) {
+            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);
+            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, binding) {
+            setEvent(el, binding);
+        },
+        updated(el, binding) {
+            setEvent(el, binding);
+        },
+        unmounted(el) {
+            el.oncontextmenu = null;
+            if (closeDialog) {
+                document.removeEventListener('click', closeDialog);
+                closeDialog = null;
+            }
+        },
+    };
+})();

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

@@ -0,0 +1,103 @@
+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.mjs

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

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

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

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

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="data-card">
+    <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">
+            <img :src="item.src"
+                 class="item-img" />
+            <div class="item-text"
+                 :style="{backgroundColor:bgText}">
+              <h3 :style="{color:colorText}">{{item.name}}</h3>
+              <p :style="{color:colorText}">{{item.text}}</p>
+            </div>
+          </a>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import create from "../../../core/create.mjs";
+export default create({
+  name: "data-card",
+  data () {
+    return {};
+  },
+  props: {
+    option: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  computed: {
+    span () {
+      return this.option.span || 6;
+    },
+    data () {
+      return this.option.data || [];
+    },
+    colorText () {
+      return this.option.colorText || "#fff";
+    },
+    bgText () {
+      return this.option.bgText || "#2e323f";
+    },
+    borderColor () {
+      return this.option.borderColor || "#2e323f";
+    }
+  },
+  created () { },
+  mounted () { },
+  watch: {},
+  methods: {}
+});
+</script>