@smallwei/avue 3.8.2 → 3.8.3

package/es/plugin/watermark/watermark.ts

@@ -0,0 +1,121 @@
+import { randomId } from '../../utils/util';
+
+class WaterMark {
+  CONTAINERID: string;
+  option: Record<string, any>;
+  styleStr: string;
+  isOberserve: boolean;
+
+  constructor(opt: Record<string, any> = {}) {
+    this.CONTAINERID = randomId();
+    this.drawCanvas = this.drawCanvas.bind(this);
+    this.parentObserver = this.parentObserver.bind(this);
+    this.Repaint = this.Repaint.bind(this);
+    this.styleStr = '';
+    this.isOberserve = false;
+    this.init(opt);
+    this.drawCanvas();
+    this.parentObserver();
+  }
+
+  init(opt: Record<string, any>) {
+    this.option = Object.assign(
+      {
+        width: 400,
+        height: 200,
+        text: 'avueJS',
+        fontSize: '30px',
+        fontStyle: 'microsoft yahei',
+        textAlign: 'center',
+        color: 'rgba(100,100,100,0.15)',
+        degree: -20,
+      },
+      opt
+    );
+  }
+
+  drawCanvas() {
+    this.isOberserve = true;
+    const divContainer = document.createElement('div');
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    divContainer.id = this.CONTAINERID;
+
+    canvas.width = this.option.width;
+    canvas.height = this.option.height;
+    if (!context) return;
+    context.font = `${this.option.fontSize} ${this.option.fontStyle}`;
+    context.textAlign = this.option.textAlign;
+    context.fillStyle = this.option.color;
+    context.translate(canvas.width / 2, canvas.height / 2);
+    context.rotate((this.option.degree * Math.PI) / 180);
+    context.fillText(this.option.text, 0, 0);
+
+    const backgroundUrl = canvas.toDataURL('image/png');
+    const flag = this.option.id;
+    let el: HTMLElement | null = null;
+    if (flag) el = document.getElementById(flag);
+    this.styleStr = `
+      position:${flag ? 'absolute' : 'fixed'};
+      top:0;
+      left:0;
+      width:${flag && el ? el.offsetWidth + 'px' : '100%'};
+      height:${flag && el ? el.offsetHeight + 'px' : '100%'};
+      z-index:9999;
+      pointer-events:none;
+      background-repeat:repeat;
+      background-image:url('${backgroundUrl}')`;
+    divContainer.setAttribute('style', this.styleStr);
+    if (flag && el) {
+      el.appendChild(divContainer);
+    } else {
+      document.body.appendChild(divContainer);
+    }
+    this.wmObserver(divContainer);
+    this.isOberserve = false;
+  }
+
+  wmObserver(divContainer: HTMLElement) {
+    const wmConf = { attributes: true, childList: true, characterData: true };
+    const wmObserver = new MutationObserver((mo) => {
+      if (!this.isOberserve) {
+        const target = mo[0].target as HTMLElement;
+        target.setAttribute('style', this.styleStr);
+        target.setAttribute('id', this.CONTAINERID);
+        wmObserver.takeRecords();
+      }
+    });
+    wmObserver.observe(divContainer, wmConf);
+  }
+
+  parentObserver() {
+    const bodyObserver = new MutationObserver(() => {
+      if (!this.isOberserve) {
+        const wm = document.querySelector<HTMLElement>(`#${this.CONTAINERID}`);
+        if (!wm) {
+          this.drawCanvas();
+        } else if (wm.getAttribute('style') !== this.styleStr) {
+          wm.setAttribute('style', this.styleStr);
+        }
+      }
+    });
+    const parentNode = document.querySelector<HTMLElement>(`#${this.CONTAINERID}`)?.parentNode;
+    if (parentNode) {
+      bodyObserver.observe(parentNode, { childList: true });
+    }
+  }
+
+  Repaint(opt: Record<string, any> = {}) {
+    this.remove();
+    this.init(opt);
+    this.drawCanvas();
+  }
+
+  remove() {
+    this.isOberserve = true;
+    const wm = document.querySelector<HTMLElement>(`#${this.CONTAINERID}`);
+    wm?.parentNode?.removeChild(wm);
+  }
+}
+
+export default WaterMark;

package/es/ui/data/index.mjs

@@ -0,0 +1,49 @@
+import DataTabs from '../../packages/data/tabs/index.vue';
+import DataCardText from '../../packages/data/cardText/index.vue';
+import DataBox from '../../packages/data/box/index.vue';
+import DataProgress from '../../packages/data/progress/index.vue';
+import DataIcons from '../../packages/data/icons/index.vue';
+import DataCard from '../../packages/data/card/index.vue';
+import DataDisplay from '../../packages/data/display/index.vue';
+import DataImgText from '../../packages/data/imgText/index.vue';
+import DataOperaText from '../../packages/data/operaText/index.vue';
+import DataRotate from '../../packages/data/rotate/index.vue';
+import DataPay from '../../packages/data/pay/index.vue';
+import DataPrice from '../../packages/data/price/index.vue';
+import DataPanel from '../../packages/data/panel/index.vue';
+import DataStatistic from '../../packages/data/statistic/index.vue';
+import DataWeather from '../../packages/data/weather/index.vue';
+import DataRank from '../../packages/data/rank/index.vue';
+import DataProfile from '../../packages/data/profile/index.vue';
+import DataProduct from '../../packages/data/product/index.vue';
+import DataCountdown from '../../packages/data/countdown/index.vue';
+import DataNotice from '../../packages/data/notice/index.vue';
+import DataTask from '../../packages/data/task/index.vue';
+import DataList from '../../packages/data/list/index.vue';
+import DataDashboard from '../../packages/data/dashboard/index.vue';
+const dataComponents = {
+    DataTabs,
+    DataCardText,
+    DataBox,
+    DataProgress,
+    DataIcons,
+    DataCard,
+    DataDisplay,
+    DataImgText,
+    DataOperaText,
+    DataRotate,
+    DataPay,
+    DataPrice,
+    DataPanel,
+    DataStatistic,
+    DataWeather,
+    DataRank,
+    DataProfile,
+    DataProduct,
+    DataCountdown,
+    DataNotice,
+    DataTask,
+    DataList,
+    DataDashboard,
+};
+export default dataComponents;

package/es/ui/data/index.ts

@@ -0,0 +1,51 @@
+import DataTabs from '../../packages/data/tabs/index.vue';
+import DataCardText from '../../packages/data/cardText/index.vue';
+import DataBox from '../../packages/data/box/index.vue';
+import DataProgress from '../../packages/data/progress/index.vue';
+import DataIcons from '../../packages/data/icons/index.vue';
+import DataCard from '../../packages/data/card/index.vue';
+import DataDisplay from '../../packages/data/display/index.vue';
+import DataImgText from '../../packages/data/imgText/index.vue';
+import DataOperaText from '../../packages/data/operaText/index.vue';
+import DataRotate from '../../packages/data/rotate/index.vue';
+import DataPay from '../../packages/data/pay/index.vue';
+import DataPrice from '../../packages/data/price/index.vue';
+import DataPanel from '../../packages/data/panel/index.vue';
+import DataStatistic from '../../packages/data/statistic/index.vue';
+import DataWeather from '../../packages/data/weather/index.vue';
+import DataRank from '../../packages/data/rank/index.vue';
+import DataProfile from '../../packages/data/profile/index.vue';
+import DataProduct from '../../packages/data/product/index.vue';
+import DataCountdown from '../../packages/data/countdown/index.vue';
+import DataNotice from '../../packages/data/notice/index.vue';
+import DataTask from '../../packages/data/task/index.vue';
+import DataList from '../../packages/data/list/index.vue';
+import DataDashboard from '../../packages/data/dashboard/index.vue';
+
+const dataComponents = {
+  DataTabs,
+  DataCardText,
+  DataBox,
+  DataProgress,
+  DataIcons,
+  DataCard,
+  DataDisplay,
+  DataImgText,
+  DataOperaText,
+  DataRotate,
+  DataPay,
+  DataPrice,
+  DataPanel,
+  DataStatistic,
+  DataWeather,
+  DataRank,
+  DataProfile,
+  DataProduct,
+  DataCountdown,
+  DataNotice,
+  DataTask,
+  DataList,
+  DataDashboard,
+};
+
+export default dataComponents;

package/es/ui/element-plus/index.mjs

@@ -0,0 +1,87 @@
+import CountUp from '../../packages/element-plus/count-up/index.vue';
+import Article from '../../packages/element-plus/article/index.vue';
+import Crud from '../../packages/element-plus/crud/index.vue';
+import Card from '../../packages/element-plus/card/index.vue';
+import Chat from '../../packages/element-plus/chat/index.vue';
+import Comment from '../../packages/element-plus/comment/index.vue';
+import Form from '../../packages/element-plus/form/index.vue';
+import Checkbox from '../../packages/element-plus/checkbox/index.vue';
+import Date from '../../packages/element-plus/date/index.vue';
+import Draggable from '../../packages/element-plus/draggable/index.vue';
+import Flow from '../../packages/element-plus/flow/index.vue';
+import Group from '../../packages/element-plus/group/index.vue';
+import License from '../../packages/element-plus/license/index.vue';
+import Time from '../../packages/element-plus/time/index.vue';
+import Input from '../../packages/element-plus/input/index.vue';
+import Radio from '../../packages/element-plus/radio/index.vue';
+import Select from '../../packages/element-plus/select/index.vue';
+import Cascader from '../../packages/element-plus/cascader/index.vue';
+import InputColor from '../../packages/element-plus/input-color/index.vue';
+import InputNumber from '../../packages/element-plus/input-number/index.vue';
+import InputTree from '../../packages/element-plus/input-tree/index.vue';
+import InputMap from '../../packages/element-plus/input-map/index.vue';
+import InputIcon from '../../packages/element-plus/input-icon/index.vue';
+import InputTag from '../../packages/element-plus/input-tag/index.vue';
+import InputTable from '../../packages/element-plus/input-table/index.vue';
+import InputCron from '../../packages/element-plus/input-cron/index.vue';
+import Mention from '../../packages/element-plus/mention/index.vue';
+import Verifys from '../../packages/element-plus/verify/index.vue';
+import Switchs from '../../packages/element-plus/switch/index.vue';
+import Rate from '../../packages/element-plus/rate/index.vue';
+import Upload from '../../packages/element-plus/upload/index.vue';
+import Sign from '../../packages/element-plus/sign/index.vue';
+import Slider from '../../packages/element-plus/slider/index.vue';
+import Tree from '../../packages/element-plus/tree/index.vue';
+import Title from '../../packages/element-plus/title/index.vue';
+import Search from '../../packages/element-plus/search/index.vue';
+import Tabs from '../../packages/element-plus/tabs/index.vue';
+import Dynamic from '../../packages/element-plus/dynamic/index.vue';
+import Video from '../../packages/element-plus/video/index.vue';
+import Login from '../../packages/element-plus/login/index.vue';
+import Arrays from '../../packages/element-plus/array/index.vue';
+import textEllipsis from '../../packages/element-plus/text-ellipsis/index.vue';
+const elementComponents = {
+    Arrays,
+    Article,
+    Crud,
+    Card,
+    Chat,
+    Comment,
+    Form,
+    Checkbox,
+    Date,
+    CountUp,
+    Draggable,
+    Flow,
+    Group,
+    License,
+    Time,
+    Input,
+    Radio,
+    Select,
+    Cascader,
+    InputColor,
+    InputNumber,
+    InputTree,
+    InputIcon,
+    InputMap,
+    InputTag,
+    InputTable,
+    InputCron,
+    Mention,
+    Switchs,
+    Rate,
+    Upload,
+    Slider,
+    Tree,
+    Title,
+    Search,
+    Tabs,
+    Dynamic,
+    Video,
+    Verifys,
+    textEllipsis,
+    Sign,
+    Login,
+};
+export default elementComponents;

package/es/ui/element-plus/index.ts

@@ -0,0 +1,89 @@
+import CountUp from '../../packages/element-plus/count-up/index.vue';
+import Article from '../../packages/element-plus/article/index.vue';
+import Crud from '../../packages/element-plus/crud/index.vue';
+import Card from '../../packages/element-plus/card/index.vue';
+import Chat from '../../packages/element-plus/chat/index.vue';
+import Comment from '../../packages/element-plus/comment/index.vue';
+import Form from '../../packages/element-plus/form/index.vue';
+import Checkbox from '../../packages/element-plus/checkbox/index.vue';
+import Date from '../../packages/element-plus/date/index.vue';
+import Draggable from '../../packages/element-plus/draggable/index.vue';
+import Flow from '../../packages/element-plus/flow/index.vue';
+import Group from '../../packages/element-plus/group/index.vue';
+import License from '../../packages/element-plus/license/index.vue';
+import Time from '../../packages/element-plus/time/index.vue';
+import Input from '../../packages/element-plus/input/index.vue';
+import Radio from '../../packages/element-plus/radio/index.vue';
+import Select from '../../packages/element-plus/select/index.vue';
+import Cascader from '../../packages/element-plus/cascader/index.vue';
+import InputColor from '../../packages/element-plus/input-color/index.vue';
+import InputNumber from '../../packages/element-plus/input-number/index.vue';
+import InputTree from '../../packages/element-plus/input-tree/index.vue';
+import InputMap from '../../packages/element-plus/input-map/index.vue';
+import InputIcon from '../../packages/element-plus/input-icon/index.vue';
+import InputTag from '../../packages/element-plus/input-tag/index.vue';
+import InputTable from '../../packages/element-plus/input-table/index.vue';
+import InputCron from '../../packages/element-plus/input-cron/index.vue';
+import Mention from '../../packages/element-plus/mention/index.vue';
+import Verifys from '../../packages/element-plus/verify/index.vue';
+import Switchs from '../../packages/element-plus/switch/index.vue';
+import Rate from '../../packages/element-plus/rate/index.vue';
+import Upload from '../../packages/element-plus/upload/index.vue';
+import Sign from '../../packages/element-plus/sign/index.vue';
+import Slider from '../../packages/element-plus/slider/index.vue';
+import Tree from '../../packages/element-plus/tree/index.vue';
+import Title from '../../packages/element-plus/title/index.vue';
+import Search from '../../packages/element-plus/search/index.vue';
+import Tabs from '../../packages/element-plus/tabs/index.vue';
+import Dynamic from '../../packages/element-plus/dynamic/index.vue';
+import Video from '../../packages/element-plus/video/index.vue';
+import Login from '../../packages/element-plus/login/index.vue';
+import Arrays from '../../packages/element-plus/array/index.vue';
+import textEllipsis from '../../packages/element-plus/text-ellipsis/index.vue';
+
+const elementComponents = {
+  Arrays,
+  Article,
+  Crud,
+  Card,
+  Chat,
+  Comment,
+  Form,
+  Checkbox,
+  Date,
+  CountUp,
+  Draggable,
+  Flow,
+  Group,
+  License,
+  Time,
+  Input,
+  Radio,
+  Select,
+  Cascader,
+  InputColor,
+  InputNumber,
+  InputTree,
+  InputIcon,
+  InputMap,
+  InputTag,
+  InputTable,
+  InputCron,
+  Mention,
+  Switchs,
+  Rate,
+  Upload,
+  Slider,
+  Tree,
+  Title,
+  Search,
+  Tabs,
+  Dynamic,
+  Video,
+  Verifys,
+  textEllipsis,
+  Sign,
+  Login,
+};
+
+export default elementComponents;

package/es/ui/index.mjs

@@ -0,0 +1,4 @@
+import Element from './element-plus/index.mjs';
+import Data from './data/index.mjs';
+const components = { ...Element, ...Data };
+export default components;

package/es/ui/index.ts

@@ -0,0 +1,6 @@
+import Element from './element-plus/index';
+import Data from './data/index';
+
+const components = { ...Element, ...Data };
+
+export default components;

package/es/utils/bem.mjs

@@ -0,0 +1,29 @@
+const ELEMENT = '__';
+const MODS = '--';
+const join = (name, el, symbol) => (el ? name + symbol + el : name);
+const prefix = (name, mods) => {
+    if (typeof mods === 'string') {
+        return join(name, mods, MODS);
+    }
+    if (Array.isArray(mods)) {
+        return mods.map((item) => prefix(name, item));
+    }
+    const ret = {};
+    Object.keys(mods || {}).forEach((key) => {
+        ret[name + MODS + key] = mods[key];
+    });
+    return ret;
+};
+export default {
+    methods: {
+        b(el, mods) {
+            const { name } = this.$options;
+            if (el && typeof el !== 'string') {
+                mods = el;
+                el = '';
+            }
+            el = join(name, el, ELEMENT);
+            return mods ? [el, prefix(el, mods)] : el;
+        },
+    },
+};

package/es/utils/bem.ts

@@ -0,0 +1,36 @@
+const ELEMENT = '__';
+const MODS = '--';
+
+const join = (name: string, el: string, symbol: string) => (el ? name + symbol + el : name);
+
+const prefix = (name: string, mods: any): any => {
+  if (typeof mods === 'string') {
+    return join(name, mods, MODS);
+  }
+
+  if (Array.isArray(mods)) {
+    return mods.map((item) => prefix(name, item));
+  }
+
+  const ret: Record<string, any> = {};
+  Object.keys(mods || {}).forEach((key) => {
+    ret[name + MODS + key] = mods[key];
+  });
+  return ret;
+};
+
+export default {
+  methods: {
+    b(this: any, el: any, mods: any) {
+      const { name } = this.$options;
+
+      if (el && typeof el !== 'string') {
+        mods = el;
+        el = '';
+      }
+      el = join(name, el, ELEMENT);
+
+      return mods ? [el, prefix(el, mods)] : el;
+    },
+  },
+};

package/es/utils/mock.mjs

@@ -0,0 +1,137 @@
+import packages from '../core/packages.mjs';
+export default (column, dicData, defaultForm, run) => {
+    if (!run)
+        return;
+    const win = window;
+    if (!win.Mock) {
+        packages.logs('mock');
+        return;
+    }
+    const mockjs = win.Mock;
+    const Random = (mockjs || {}).Random;
+    const form = {};
+    function createName({ en }) {
+        if (en) {
+            return Random.name(true);
+        }
+        return Random.cname();
+    }
+    function createImage({ size, text, base64 }) {
+        const imageSize = size || Random.natural(200, 400);
+        const textColor = text ? '#000000' : Random.color();
+        const bgColor = text ? '#ffffff' : Random.color();
+        if (base64) {
+            return Random.dataImage(imageSize, text);
+        }
+        return Random.image(imageSize, bgColor, textColor, 'png', text || Random.name());
+    }
+    function createId({ uuid }) {
+        if (uuid) {
+            return mockjs.mock('@guid');
+        }
+        return mockjs.mock('@id');
+    }
+    function createTel() {
+        return mockjs.mock(/^1[3-9]\d{9}$/);
+    }
+    function createNumber({ max, min, precision }) {
+        if (precision) {
+            const number = Random.float(min, max, precision) + '';
+            const index = number.indexOf('.') + 1;
+            return Number(number.substring(0, index + precision));
+        }
+        return Random.integer(min, max);
+    }
+    function createUrl({ header }) {
+        let url = Random.url();
+        const index = url.indexOf('://');
+        if (header === false) {
+            url = url.substring(index + 3);
+        }
+        else {
+            url = 'http://' + url.substring(index + 3);
+        }
+        return url;
+    }
+    function createDatetime({ format, now }) {
+        if (now) {
+            return Random.now(format);
+        }
+        return Random.datetime(format);
+    }
+    function createText({ min, max }) {
+        return Random.csentence(min, max);
+    }
+    function createCounty() {
+        return Random.county(true);
+    }
+    function createDic({ dic, props, columnType, multiple }) {
+        const value = props.value || 'value';
+        const len = dic.length;
+        if (len === 0)
+            return;
+        if (['checkbox'].includes(columnType) || multiple) {
+            const number = createNumber({
+                min: 1,
+                max: len,
+            });
+            const result = [];
+            for (let i = 0; i < number; i++) {
+                let flag = true;
+                while (flag) {
+                    const numbers = createNumber({
+                        min: 0,
+                        max: len - 1,
+                    });
+                    const values = dic[numbers][value];
+                    if (!result.includes(values)) {
+                        result.push(values);
+                        flag = false;
+                    }
+                }
+            }
+            return result;
+        }
+        const number = createNumber({
+            min: 0,
+            max: len - 1,
+        });
+        return dic[number][value];
+    }
+    function create() {
+        Object.keys(column).forEach((index) => {
+            const ele = column[index];
+            const isObject = typeof ele.mock === 'object';
+            const params = isObject ? ele.mock || {} : {};
+            params.dic = dicData[ele.prop] || [];
+            params.props = ele.props || {};
+            params.columnType = ele.type;
+            params.multiple = ele.multiple;
+            const dataGenerator = {
+                name: createName,
+                number: createNumber,
+                datetime: createDatetime,
+                word: createText,
+                tel: createTel,
+                id: createId,
+                image: createImage,
+                url: createUrl,
+                county: createCounty,
+                dic: createDic,
+            };
+            if (isObject && dataGenerator[params.type]) {
+                if (params.array) {
+                    form[ele.prop] = Array.from({ length: params.array }, () => dataGenerator[params.type](params));
+                }
+                else {
+                    form[ele.prop] = dataGenerator[params.type](params);
+                }
+            }
+            else if (ele.mock instanceof Function) {
+                form[ele.prop] = ele.mock(defaultForm, mockjs);
+            }
+        });
+    }
+    create();
+    return form;
+};