yy-vue-easytable 2.27.2

package/packages/src/utils/index.js

@@ -0,0 +1,161 @@
+import { createI18N } from "../locale/index";
+
+/*
+ * @createLocale
+ * @desc create namespace by comp name
+ * @param {string} compName
+ * @return {function}
+ */
+export function createLocale(compName) {
+    return createI18N(compName);
+}
+
+/*
+ * @isEmptyArray
+ * @desc  is empty array
+ * @param {array} arr
+ */
+export function isEmptyArray(arr) {
+    return !(Array.isArray(arr) && arr.length > 0);
+}
+
+/*
+ * @isEmptyValue
+ * @desc  is empty value
+ * @param {array} arr
+ */
+export function isEmptyValue(value) {
+    return !(value !== "" && value !== undefined && value !== null);
+}
+
+/*
+ * @isDefined
+ * @desc is defined
+ * @param {any} val
+ */
+export function isDefined(val) {
+    return val !== undefined && val !== null;
+}
+
+/*
+ * @isObject
+ * @desc is object
+ * @param {any} val
+ */
+export function isObject(val) {
+    return val !== null && typeof val === "object";
+}
+
+/*
+ * @isFunction
+ * @desc is function
+ * @param {any} val
+ */
+export function isFunction(val) {
+    return typeof val === "function";
+}
+
+/*
+ * @isBoolean
+ * @desc is boolean
+ * @param {any} val
+ */
+export function isBoolean(val) {
+    return typeof val === "boolean";
+}
+
+/*
+ * @isNumber
+ * @desc is number
+ * @param {any} val
+ */
+export function isNumber(val) {
+    return typeof val === "number";
+}
+
+/*
+ * @isTrue
+ * @desc is equal true
+ * @param {any} val
+ */
+export function isTrue(val) {
+    return isBoolean(val) && val;
+}
+
+/*
+ * @isFalse
+ * @desc is equal false
+ * @param {any} val
+ */
+export function isFalse(val) {
+    return isBoolean(val) && !val;
+}
+
+/*
+ * @getValByUnit
+ * @desc  get value by unit
+ * @param {number|string} width - 宽度
+ */
+export function getValByUnit(width) {
+    return typeof width === "number" ? width + "px" : width;
+}
+
+/*
+ * @getParentCompByName
+ * @desc  get parent comp by name
+ * @param {object} context
+ * @param {string} name - parent comp name
+ */
+export function getParentCompByName(context, name) {
+    let parent = context.$parent;
+
+    while (parent) {
+        if (parent.$options.name !== name) {
+            parent = parent.$parent;
+        } else {
+            return parent;
+        }
+    }
+
+    return null;
+}
+
+/*
+ * @getChildCompsByName
+ * @desc  get child comps by name
+ * @param {object} context
+ * @param {string} name - child comp name
+ */
+export function getChildCompsByName(context, name) {
+    let result = [];
+
+    let childrens = context.$children;
+
+    while (childrens && childrens.length > 0) {
+        childrens.forEach((child) => {
+            childrens = child.$children ? child.$children : null;
+
+            if (child.$options.name === name) {
+                result.push(child);
+            }
+        });
+    }
+
+    return result;
+}
+
+/*
+ * @scrollTo
+ * @desc element scrollTo https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTo
+ * @param {element} el - element
+ * @param {object} option - scroll option
+ */
+export function scrollTo(el, option) {
+    if (isFunction(el.scrollTo)) {
+        el.scrollTo(option);
+    } else {
+        const { top, left } = option;
+        el.scrollTop = top;
+        el.scrollLeft = left;
+    }
+}

package/packages/src/utils/mouse-event.js

@@ -0,0 +1,24 @@
+import { MOUSE_EVENT_CLICK_TYPE } from "./constant";
+
+/* 
+get mouse event key type by mousedown\mouseup\... event
+*/
+export function getMouseEventClickType(event) {
+    let result = null;
+
+    if (!event) {
+        return result;
+    }
+
+    const button =
+        typeof event.which != "undefined" ? event.which : event.button;
+    if (button == 1) {
+        result = MOUSE_EVENT_CLICK_TYPE.LEFT_MOUSE;
+    } else if (button == 2) {
+        result = MOUSE_EVENT_CLICK_TYPE.MIDDLE_MOUSE;
+    } else if (button == 3) {
+        result = MOUSE_EVENT_CLICK_TYPE.RIGHT_MOUSE;
+    }
+
+    return result;
+}

package/packages/src/utils/random.js

@@ -0,0 +1,6 @@
+/**
+ * Generate a non duplicate ID
+ */
+export function getRandomId() {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+}

package/packages/src/utils/request-animation-timeout.js

@@ -0,0 +1,36 @@
+/*
+fork from:
+https://github.com/bvaughn/react-virtualized/blob/HEAD/source/utils/requestAnimationTimeout.js
+*/
+
+import { caf, raf } from "./animation-frame";
+
+export const cancelAnimationTimeout = (frame) => caf(frame.id);
+
+/**
+ * Recursively calls requestAnimationFrame until a specified delay has been met or exceeded.
+ * When the delay time has been reached the function you're timing out will be called.
+ *
+ * Credit: Joe Lambert (https://gist.github.com/joelambert/1002116#file-requesttimeout-js)
+ */
+export const requestAnimationTimeout = (callback, delay) => {
+    let start;
+    // wait for end of processing current event handler, because event handler may be long
+    Promise.resolve().then(() => {
+        start = Date.now();
+    });
+
+    const timeout = () => {
+        if (Date.now() - start >= delay) {
+            callback.call();
+        } else {
+            frame.id = raf(timeout);
+        }
+    };
+
+    const frame = {
+        id: raf(timeout),
+    };
+
+    return frame;
+};

package/packages/src/utils/resize-event.js

@@ -0,0 +1,40 @@
+/*
+fork from:
+https://github.com/ElemeFE/element
+*/
+
+import ResizeObserver from "resize-observer-polyfill";
+
+/* istanbul ignore next */
+const resizeHandler = function (entries) {
+    for (let entry of entries) {
+        const listeners = entry.target.__resizeListeners__ || [];
+        if (listeners.length) {
+            listeners.forEach((fn) => {
+                fn(entry.contentRect);
+            });
+        }
+    }
+};
+
+/* istanbul ignore next */
+export const addResizeListener = function (element, fn) {
+    if (!element.__resizeListeners__) {
+        element.__resizeListeners__ = [];
+        element.__ro__ = new ResizeObserver(resizeHandler);
+        element.__ro__.observe(element);
+    }
+    element.__resizeListeners__.push(fn);
+};
+
+/* istanbul ignore next */
+export const removeResizeListener = function (element, fn) {
+    if (!element || !element.__resizeListeners__) return;
+    element.__resizeListeners__.splice(
+        element.__resizeListeners__.indexOf(fn),
+        1,
+    );
+    if (!element.__resizeListeners__.length) {
+        element.__ro__.disconnect();
+    }
+};

package/packages/src/utils/scroll-bar.js

@@ -0,0 +1,27 @@
+/*
+ * @getScrollbarWidth
+ * @desc get scroll bar width
+ * @param
+ * @return
+ */
+export function getScrollbarWidth() {
+    const outer = document.createElement("div");
+    outer.className = "ve-scrollbar-wrap";
+    outer.style.visibility = "hidden";
+    outer.style.width = "100px";
+    outer.style.position = "absolute";
+    outer.style.top = "-9999px";
+    document.body.appendChild(outer);
+
+    const widthNoScroll = outer.offsetWidth;
+    outer.style.overflow = "scroll";
+
+    const inner = document.createElement("div");
+    inner.style.width = "100%";
+    outer.appendChild(inner);
+
+    const widthWithScroll = inner.offsetWidth;
+    outer.parentNode.removeChild(outer);
+
+    return widthNoScroll - widthWithScroll;
+}

package/packages/style/ve-checkbox.less

@@ -0,0 +1,179 @@
+.ve-checkbox {
+    cursor: pointer;
+    font-size: 12px;
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+
+    &:hover {
+        .ve-checkbox-inner {
+            border-color: @ve-checkbox-checked-border-color;
+        }
+    }
+
+    &-content {
+        white-space: nowrap;
+        cursor: pointer;
+        outline: none;
+        display: inline-block;
+        line-height: 1;
+        position: relative;
+        vertical-align: text-bottom;
+
+        &:hover {
+            .ve-checkbox-inner {
+                border-color: @ve-checkbox-checked-border-color;
+            }
+        }
+
+        // input
+        .ve-checkbox-input {
+            position: absolute;
+            left: 0;
+            z-index: 1;
+            cursor: pointer;
+            opacity: 0;
+            filter: alpha(opacity=0);
+            top: 0;
+            bottom: 0;
+            right: 0;
+
+            &:focus {
+                .ve-checkbox-inner {
+                    border-color: @ve-checkbox-checked-border-color;
+                }
+            }
+        }
+
+        // checkbox 框
+        .ve-checkbox-inner {
+            position: relative;
+            top: 0;
+            left: 0;
+            display: block;
+            width: 16px;
+            height: 16px;
+            border: 1px solid #abbacc;
+            border-radius: 2px;
+            background-color: #fff;
+            transition: all 0.3s;
+            &:after {
+                transform: rotate(45deg) scale(0);
+                position: absolute;
+                left: 4px;
+                top: 2px;
+                display: table;
+                width: 6px;
+                height: 9px;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                content: " ";
+                transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+            }
+        }
+    }
+
+    // 选中时
+    .ve-checkbox-checked {
+        &:after {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 2px;
+            border: 1px solid @ve-checkbox-checked-background-color;
+            content: "";
+            animation-fill-mode: both;
+            visibility: hidden;
+        }
+
+        .ve-checkbox-inner {
+            background-color: @ve-checkbox-checked-background-color;
+            border-color: @ve-checkbox-checked-background-color;
+            &:after {
+                transform: rotate(45deg) scale(1);
+                position: absolute;
+                display: table;
+                border: 2px solid #fff;
+                border-top: 0;
+                border-left: 0;
+                content: " ";
+                transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+            }
+        }
+    }
+
+    // 半选状态
+    .ve-checkbox-indeterminate {
+        .ve-checkbox-inner {
+            background-color: #fff;
+            border-color: #d9d9d9;
+            position: relative;
+            top: 0;
+            left: 0;
+            direction: ltr;
+            background-color: #fff;
+            border: 1px solid #d9d9d9;
+            border-radius: 2px;
+            border-collapse: separate;
+            transition: all 0.3s;
+            &:after {
+                top: 50%;
+                left: 50%;
+                width: 8px;
+                height: 8px;
+                background-color: @ve-checkbox-checked-border-color;
+                border: 0;
+                -webkit-transform: translate(-50%, -50%) scale(1);
+                transform: translate(-50%, -50%) scale(1);
+                opacity: 1;
+                content: " ";
+            }
+            &:hover {
+                border-color: @ve-checkbox-checked-border-color;
+            }
+        }
+
+        &.ve-checkbox-disabled {
+            .ve-checkbox-inner:after {
+                border-color: rgba(0, 0, 0, 0.25);
+            }
+        }
+    }
+
+    // 禁用选择
+    .ve-checkbox-disabled {
+        cursor: not-allowed;
+        // 禁用的选中
+        &.ve-checkbox-checked {
+            .ve-checkbox-inner:after {
+                animation-name: none;
+                border-color: rgba(0, 0, 0, 0.25);
+            }
+        }
+
+        .ve-checkbox-input {
+            cursor: not-allowed;
+        }
+
+        // 禁用状态的框
+        .ve-checkbox-inner {
+            color: rgba(0, 0, 0, 0.25);
+            cursor: not-allowed;
+            border-color: #d9d9d9 !important;
+            background-color: #f7f7f7;
+            &:after {
+                animation-name: none;
+                border-color: #f7f7f7;
+            }
+        }
+    }
+    // label
+    &-label {
+        margin: 0 6px 0 3px;
+        width: 100%;
+        color: @ve-checkbox-label-text-color !important;
+    }
+}

package/packages/style/ve-contextmenu.less

@@ -0,0 +1,76 @@
+// popper
+.ve-contextmenu-popper {
+    z-index: 9999;
+    overflow: hidden;
+    border-radius: @ve-contextmenu-border-radius;
+    border: 1px solid @ve-contextmenu-border-color;
+    background-color: @ve-contextmenu-background-color;
+    box-shadow: 0 2px 12px 0 @ve-contextmenu-box-shadow-color;
+}
+
+.ve-contextmenu {
+    display: flex;
+    flex-direction: row;
+
+    &-panel {
+        min-width: @ve-contextmenu-min-width;
+        min-height: @ve-contextmenu-min-height;
+        overflow: hidden;
+
+        .ve-contextmenu-list {
+            min-height: 100%;
+            margin: 0;
+            padding: 6px 0;
+            list-style: none;
+            box-sizing: border-box;
+
+            .ve-contextmenu-node {
+                display: flex;
+                align-items: center;
+                padding: 0 30px 0 20px;
+                height: 34px;
+                justify-content: center;
+                outline: none;
+                color: @ve-contextmenu-node-text-color;
+                cursor: pointer;
+
+                &:not(&-disabled):hover {
+                    background: @ve-contextmenu-node-hover-background-color;
+                    color: @ve-contextmenu-node-hover-text-color;
+                }
+
+                &-active {
+                    background: @ve-contextmenu-node-hover-background-color;
+                    color: @ve-contextmenu-node-active-text-color;
+                }
+
+                &-label {
+                    flex: 1;
+                    padding: 0 10px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
+                &-icon-postfix {
+                    color: @ve-contextmenu-node-icon-postfix-color;
+                }
+
+                &-disabled {
+                    color: @ve-contextmenu-node-disabled-text-color;
+                    cursor: not-allowed;
+                    .ve-contextmenu-node-icon-postfix {
+                        color: @ve-contextmenu-node-disabled-icon-postfix-color;
+                    }
+                }
+            }
+
+            .ve-contextmenu-node-separator {
+                height: 1px;
+                margin: 5px 0px;
+                border-bottom: 1px solid
+                    @ve-contextmenu-node-separator-line-color;
+            }
+        }
+    }
+}