yy-vue-easytable 2.27.2

package/packages/theme-dark/var.less

@@ -0,0 +1,111 @@
+@ve-primary-color: #121212;
+@ve-secondary-color: #363636;
+@ve-dark-text-color: #ffffffd9;
+@ve-default-font-size: 14px;
+
+/* ve-table */
+@ve-fixed-body-cell-index: 10;
+@ve-fixed-cell-selection-border-index: 10;
+@ve-fixed-cell-selection-corner-index: 11;
+@ve-fixed-header-index: 20;
+@ve-fixed-foot-index: 20;
+@ve-fixed-header-cell-index: 30;
+@ve-fixed-foot-cell-index: 30;
+@ve-table-head-row-height: 40px;
+@ve-table-body-row-height: 40px;
+@ve-table-foot-row-height: 40px;
+@ve-table-td-editing-line-height: 30px;
+@ve-table-head-row-td-padding: 10px;
+@ve-table-body-row-td-padding: 10px;
+@ve-table-body-row-expand-content-padding: 0 10px;
+@ve-table-foot-row-td-padding: 10px;
+@ve-table-border-color: #000;
+@ve-table-column-fixed-border-color: #434343;
+@ve-table-td-editing-font-color: #fff;
+@ve-table-td-editing-border-color: #2196f3;
+@ve-table-td-editing-background-color: #434343;
+@ve-table-td-editing-box-shadow-color: #5e5c5c;
+@ve-table-selection-border-color: #4b89ff;
+@ve-table-selection-autofill-border-color: #ff000085;
+@ve-table-selection-corner-border-color: #ffffff;
+@ve-table-selection-corner-background-color: #4b89ff;
+@ve-table-selection-area-layer-background-color: #0d65eb;
+@ve-table-td-operation-column-background-color: #1d1d1d;
+@ve-table-body-background-color: #141414;
+@ve-table-body-row-stripe-background-color: @ve-primary-color;
+@ve-table-body-row-hover-background-color: @ve-primary-color;
+@ve-table-body-row-highlight-background-color: #000;
+@ve-table-body-row-row-scrolling-background-color: #141414;
+@ve-table-header-background-color: #1d1d1d;
+@ve-table-head-text-color: @ve-dark-text-color;
+@ve-table-head-indicator-active-text-color: #fff;
+@ve-table-body-text-color: @ve-dark-text-color;
+@ve-table-body-indicator-active-text-color: #fff;
+@ve-table-foot-background-color: #1d1d1d;
+@ve-table-foot-text-color: @ve-dark-text-color;
+@ve-table-sort-icon-default-color: #bfbfbf;
+@ve-table-sort-icon-active-color: #108ee9;
+@ve-table-head-text-font-size: @ve-default-font-size;
+@ve-table-body-text-font-size: @ve-default-font-size;
+@ve-table-foot-text-font-size: @ve-default-font-size;
+@ve-table-header-filter-icon-color: #eee;
+@ve-table-header-cell-indicator-background-color: #434343;
+@ve-table-header-cell-indicator-active-background-color: #666;
+@ve-table-body-cell-indicator-background-color: #434343;
+@ve-table-body-cell-indicator-active-background-color: #666;
+@ve-table-column-resizer-handler-background-color: #4d90fe;
+@ve-table-column-resizer-line-background-color: #4d90fe;
+
+/* ve-pagination */
+@ve-pagination-background-color: @ve-primary-color;
+@ve-pagination-item-border-color: #434343;
+@ve-pagination-item-background-color: @ve-primary-color;
+@ve-pagination-item-text-color: @ve-dark-text-color;
+@ve-pagination-li-color: @ve-dark-text-color;
+@ve-pagination-jump-hover-color: @ve-dark-text-color;
+@ve-pagination-goto-background-color: #141414;
+@ve-pagination-goto-input-color: @ve-dark-text-color;
+@ve-pagination-goto-input-hover-color: @ve-dark-text-color;
+
+/* ve-checkbox */
+@ve-checkbox-checked-background-color: #108ee9;
+@ve-checkbox-checked-border-color: #108ee9;
+@ve-checkbox-label-text-color: @ve-dark-text-color;
+
+/* ve-radio */
+@ve-radio-checked-background-color: #108ee9;
+@ve-radio-checked-border-color: #108ee9;
+@ve-radio-label-text-color: @ve-dark-text-color;
+
+/* ve-select */
+@ve-select-text-color: @ve-dark-text-color;
+
+/* ve-dropdown */
+@ve-dropdown-z-index: 999;
+@ve-dropdown-background-color: @ve-secondary-color;
+@ve-dropdown-border-color: #434343;
+@ve-dropdown-text-color: @ve-dark-text-color;
+@ve-dropdown-item-background-color: @ve-secondary-color;
+@ve-dropdown-item-border-color: @ve-secondary-color;
+@ve-dropdown-item-active-background-color: #666666;
+@ve-dropdown-item-hover-background-color: #464646;
+@ve-dropdown-item-hover-text-color: @ve-dark-text-color;
+@ve-dropdown-active-text-color: @ve-dark-text-color;
+@ve-dropdown-operation-item-text-color: @ve-dark-text-color;
+@ve-dropdown-operation-item-hover-text-color: #2196f3;
+
+/* ve-contextmenu */
+@ve-contextmenu-background-color: @ve-secondary-color;
+@ve-contextmenu-border-color: @ve-secondary-color;
+@ve-contextmenu-border-radius: 4px;
+@ve-contextmenu-box-shadow-color: #0000001a;
+@ve-contextmenu-min-width: 180px;
+@ve-contextmenu-min-height: 50px;
+@ve-contextmenu-node-separator-line-color: hsla(0, 0%, 100%, 0.12);
+@ve-contextmenu-node-hover-background-color: #666666;
+@ve-contextmenu-node-text-color: @ve-dark-text-color;
+@ve-contextmenu-node-hover-text-color: @ve-dark-text-color;
+@ve-contextmenu-node-active-text-color: @ve-dark-text-color;
+@ve-contextmenu-node-disabled-text-color: #c0c4cc;
+@ve-contextmenu-node-icon-postfix-color: @ve-dark-text-color;
+@ve-contextmenu-node-disabled-icon-postfix-color: #c0c4cc;

package/packages/theme-dark/ve-checkbox.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-checkbox.less";

package/packages/theme-dark/ve-contextmenu.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-contextmenu.less";

package/packages/theme-dark/ve-dropdown.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-dropdown.less";

package/packages/theme-dark/ve-icon.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-icon.less";

package/packages/theme-dark/ve-loading.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-loading.less";

package/packages/theme-dark/ve-pagination.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-pagination.less";

package/packages/theme-dark/ve-radio.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-radio.less";

package/packages/theme-dark/ve-select.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-select.less";

package/packages/theme-dark/ve-table.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-table.less";

package/packages/theme-default/base.less

@@ -0,0 +1 @@
+@import "../font/iconfont.css";

package/packages/theme-default/index.less

@@ -0,0 +1,12 @@
+// This file is auto gererated by build/build-entry.js
+        @import "./base.less";
+  @import "./ve-checkbox.less";
+  @import "./ve-contextmenu.less";
+  @import "./ve-dropdown.less";
+  @import "./ve-icon.less";
+  @import "./ve-loading.less";
+  @import "./ve-pagination.less";
+  @import "./ve-radio.less";
+  @import "./ve-select.less";
+  @import "./ve-table.less";
+        

package/packages/theme-default/var.less

@@ -0,0 +1,111 @@
+@ve-primary-color: #108ee9;
+@ve-default-text-color: #000000d9;
+@ve-default-font-size: 14px;
+
+/* ve-table */
+@ve-fixed-body-cell-index: 10;
+@ve-fixed-cell-selection-border-index: 10;
+@ve-fixed-cell-selection-corner-index: 11;
+@ve-fixed-header-index: 20;
+@ve-fixed-foot-index: 20;
+@ve-fixed-header-cell-index: 30;
+@ve-fixed-foot-cell-index: 30;
+@ve-table-head-row-height: 40px;
+@ve-table-body-row-height: 40px;
+@ve-table-foot-row-height: 40px;
+@ve-table-td-editing-line-height: 30px;
+@ve-table-head-row-td-padding: 10px;
+@ve-table-body-row-td-padding: 10px;
+@ve-table-body-row-expand-content-padding: 0 10px;
+@ve-table-foot-row-td-padding: 10px;
+@ve-table-border-color: #eee;
+@ve-table-column-fixed-border-color: #ddd;
+@ve-table-td-editing-font-color: #000;
+@ve-table-td-editing-border-color: #2196f3;
+@ve-table-td-editing-background-color: #fff;
+@ve-table-td-editing-box-shadow-color: #1f232966;
+@ve-table-selection-border-color: #4b89ff;
+@ve-table-selection-autofill-border-color: #ff000085;
+@ve-table-selection-corner-border-color: #ffffff;
+@ve-table-selection-corner-background-color: #4b89ff;
+@ve-table-selection-area-layer-background-color: #0d65eb;
+@ve-table-td-operation-column-background-color: #fafafa;
+@ve-table-body-background-color: #fff;
+@ve-table-body-row-stripe-background-color: #fafafa;
+@ve-table-body-row-hover-background-color: #f5f7fa;
+@ve-table-body-row-highlight-background-color: #e0f3ff;
+@ve-table-body-row-row-scrolling-background-color: #fff;
+@ve-table-header-background-color: #fafafa;
+@ve-table-head-text-color: @ve-default-text-color;
+@ve-table-head-indicator-active-text-color: #fff;
+@ve-table-body-text-color: @ve-default-text-color;
+@ve-table-body-indicator-active-text-color: #fff;
+@ve-table-foot-background-color: #fafafa;
+@ve-table-foot-text-color: @ve-default-text-color;
+@ve-table-sort-icon-default-color: #bfbfbf;
+@ve-table-sort-icon-active-color: @ve-primary-color;
+@ve-table-head-text-font-size: @ve-default-font-size;
+@ve-table-body-text-font-size: @ve-default-font-size;
+@ve-table-foot-text-font-size: @ve-default-font-size;
+@ve-table-header-filter-icon-color: #000;
+@ve-table-header-cell-indicator-background-color: #eaebec;
+@ve-table-header-cell-indicator-active-background-color: #5f6266;
+@ve-table-body-cell-indicator-background-color: #eaebec;
+@ve-table-body-cell-indicator-active-background-color: #5f6266;
+@ve-table-column-resizer-handler-background-color: #4d90fe;
+@ve-table-column-resizer-line-background-color: #4d90fe;
+
+/* ve-pagination */
+@ve-pagination-background-color: #fff;
+@ve-pagination-item-border-color: #c8cdd4;
+@ve-pagination-item-background-color: #fff;
+@ve-pagination-li-color: @ve-primary-color;
+@ve-pagination-jump-hover-color: @ve-primary-color;
+@ve-pagination-item-text-color: @ve-default-text-color;
+@ve-pagination-goto-background-color: #fff;
+@ve-pagination-goto-input-color: @ve-default-text-color;
+@ve-pagination-goto-input-hover-color: @ve-primary-color;
+
+/* ve-checkbox */
+@ve-checkbox-checked-background-color: @ve-primary-color;
+@ve-checkbox-checked-border-color: @ve-primary-color;
+@ve-checkbox-label-text-color: @ve-default-text-color;
+
+/* ve-radio */
+@ve-radio-checked-background-color: @ve-primary-color;
+@ve-radio-checked-border-color: @ve-primary-color;
+@ve-radio-label-text-color: @ve-default-text-color;
+
+/* ve-select */
+@ve-select-text-color: @ve-default-text-color;
+
+/* ve-dropdown */
+@ve-dropdown-z-index: 999;
+@ve-dropdown-background-color: #fff;
+@ve-dropdown-border-color: #c8cdd4;
+@ve-dropdown-text-color: @ve-default-text-color;
+@ve-dropdown-item-background-color: #fff;
+@ve-dropdown-item-border-color: #d1dbe5;
+@ve-dropdown-item-active-background-color: #e6f7ff;
+@ve-dropdown-item-hover-background-color: #f3f3f3;
+@ve-dropdown-item-hover-text-color: @ve-primary-color;
+@ve-dropdown-active-text-color: @ve-primary-color;
+@ve-dropdown-operation-item-text-color: #495060;
+@ve-dropdown-operation-item-hover-text-color: @ve-primary-color;
+
+/* ve-contextmenu */
+@ve-contextmenu-background-color: #fff;
+@ve-contextmenu-border-color: #e4e7ed;
+@ve-contextmenu-border-radius: 4px;
+@ve-contextmenu-box-shadow-color: #0000001a;
+@ve-contextmenu-min-width: 180px;
+@ve-contextmenu-min-height: 50px;
+@ve-contextmenu-node-label-text-color: @ve-primary-color;
+@ve-contextmenu-node-hover-background-color: #f5f7fa;
+@ve-contextmenu-node-text-color: @ve-default-text-color;
+@ve-contextmenu-node-hover-text-color: #409eff;
+@ve-contextmenu-node-active-text-color: #409eff;
+@ve-contextmenu-node-disabled-text-color: #c0c4cc;
+@ve-contextmenu-node-icon-postfix-color: #666;
+@ve-contextmenu-node-disabled-icon-postfix-color: #c0c4cc;
+@ve-contextmenu-node-separator-line-color: #eee;

package/packages/theme-default/ve-checkbox.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-checkbox.less";

package/packages/theme-default/ve-contextmenu.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-contextmenu.less";

package/packages/theme-default/ve-dropdown.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-dropdown.less";

package/packages/theme-default/ve-icon.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-icon.less";

package/packages/theme-default/ve-loading.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-loading.less";

package/packages/theme-default/ve-pagination.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-pagination.less";

package/packages/theme-default/ve-radio.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-radio.less";

package/packages/theme-default/ve-select.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-select.less";

package/packages/theme-default/ve-table.less

@@ -0,0 +1,2 @@
+@import "./var.less";
+@import "../style/ve-table.less";

package/packages/ve-checkbox/index.js

@@ -0,0 +1,7 @@
+import VeCheckbox from "./src/index";
+
+VeCheckbox.install = function (Vue) {
+    Vue.component(VeCheckbox.name, VeCheckbox);
+};
+
+export default VeCheckbox;

package/packages/ve-checkbox/src/index.jsx

@@ -0,0 +1,175 @@
+import { getParentCompByName } from "../../src/utils";
+import { clsName } from "./util";
+import { COMPS_NAME, EMIT_EVENTS } from "./util/constant";
+
+export default {
+    name: COMPS_NAME.VE_CHECKBOX,
+    props: {
+        // 当前checkbox 选中状态,实现 v-model
+        value: {
+            type: [String, Number, Boolean],
+            default: null,
+        },
+        label: {
+            type: [String],
+            default: null,
+        },
+        // is disabled checked
+        disabled: Boolean,
+        // partial selection effect
+        indeterminate: Boolean,
+        // 是否是可控组件
+        isControlled: {
+            type: Boolean,
+            default: false,
+        },
+        // isControlled 为true 时生效
+        isSelected: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            // 当前checkbox 选中状态
+            model: this.value,
+            checkboxGroup: {},
+        };
+    },
+
+    computed: {
+        checkboxClass() {
+            return [
+                clsName("content"),
+                {
+                    [clsName("checked")]: this.internalIsSelected,
+                    [clsName("disabled")]: this.disabled,
+                    [clsName("indeterminate")]: this.indeterminate,
+                },
+            ];
+        },
+
+        // 是否横向显示还是纵向显示
+        checkboxStyle() {
+            return {
+                display:
+                    this.checkboxGroup && this.checkboxGroup.isVerticalShow
+                        ? "block"
+                        : "inline-block",
+            };
+        },
+        // 是否选中
+        internalIsSelected() {
+            return this.isControlled ? this.isSelected : this.model;
+        },
+    },
+
+    watch: {
+        value() {
+            this.updateModelBySingle();
+        },
+    },
+
+    methods: {
+        // checkbox change
+        checkboxChange(event) {
+            if (this.disabled) {
+                return false;
+            }
+            const isChecked = event.target.checked;
+
+            if (!this.isControlled) {
+                this.$emit("input", isChecked);
+            }
+            this.$emit(EMIT_EVENTS.ON_CHECKED_CHANGE, isChecked);
+
+            if (this.isCheckBoxGroup()) {
+                //update parent comp:checkbox-group
+                this.checkboxGroup.updateModel(this.label, isChecked);
+            }
+        },
+
+        // is checkbox group
+        isCheckBoxGroup() {
+            this.checkboxGroup = getParentCompByName(
+                this,
+                COMPS_NAME.VE_CHECKBOX_GROUP,
+            );
+            return this.checkboxGroup ? true : false;
+        },
+
+        // get label content
+        getLabelContent() {
+            const { label, $slots } = this;
+
+            return label ? label : $slots.default;
+        },
+
+        initModel() {
+            if (this.isCheckBoxGroup()) {
+                let checkboxGroup = this.checkboxGroup;
+                if (
+                    Array.isArray(checkboxGroup.value) &&
+                    checkboxGroup.value.length > 0
+                ) {
+                    if (checkboxGroup.value.indexOf(this.label) > -1) {
+                        this.model = true;
+                    }
+                }
+            } else {
+                this.model = this.value;
+            }
+        },
+
+        // 通过单选更新 model
+        updateModelBySingle() {
+            if (!this.disabled) {
+                this.model = this.value;
+            }
+        },
+
+        // 父组件调用更新 model
+        updateModelByGroup(checkBoxGroup) {
+            if (checkBoxGroup.indexOf(this.label) > -1) {
+                if (!this.disabled) {
+                    this.model = true;
+                }
+            } else {
+                if (!this.disabled) {
+                    this.model = false;
+                }
+            }
+        },
+    },
+
+    created() {
+        this.initModel();
+    },
+    render() {
+        const {
+            checkboxStyle,
+            label,
+            checkboxClass,
+            checkboxChange,
+            getLabelContent,
+            internalIsSelected,
+        } = this;
+
+        return (
+            <label class={"ve-checkbox"} style={checkboxStyle}>
+                <span class={checkboxClass}>
+                    <input
+                        checked={internalIsSelected}
+                        class={clsName("input")}
+                        type="checkbox"
+                        value={label}
+                        on-change={checkboxChange}
+                    />
+
+                    <span class={clsName("inner")}></span>
+                </span>
+                <span class={clsName("label")}>{getLabelContent()}</span>
+            </label>
+        );
+    },
+};

package/packages/ve-checkbox/src/util/constant.js

@@ -0,0 +1,14 @@
+// prefix
+export const PREFIX_CLS = "ve-checkbox-";
+
+// emit events
+export const EMIT_EVENTS = {
+    // on checked change
+    ON_CHECKED_CHANGE: "on-checked-change",
+};
+
+// comps name
+export const COMPS_NAME = {
+    VE_CHECKBOX: "VeCheckbox",
+    VE_CHECKBOX_GROUP: "VeCheckboxGroup",
+};

package/packages/ve-checkbox/src/util/index.js

@@ -0,0 +1,10 @@
+import { PREFIX_CLS } from "./constant";
+
+/*
+ * @clsName
+ * @desc  get class name
+ * @param {string} cls - class
+ */
+export function clsName(cls) {
+    return PREFIX_CLS + cls;
+}

package/packages/ve-checkbox-group/index.js

@@ -0,0 +1,7 @@
+import VeCheckboxGroup from "./src/index";
+
+VeCheckboxGroup.install = function (Vue) {
+    Vue.component(VeCheckboxGroup.name, VeCheckboxGroup);
+};
+
+export default VeCheckboxGroup;

package/packages/ve-checkbox-group/src/index.jsx

@@ -0,0 +1,53 @@
+import { getChildCompsByName } from "../../src/utils";
+import { COMPS_NAME, EMIT_EVENTS } from "./util/constant";
+
+export default {
+    name: COMPS_NAME.VE_CHECKBOX_GROUP,
+    props: {
+        value: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        // 是否垂直排列显示（当时checkbox组时生效）
+        isVerticalShow: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    watch: {
+        // 更新子组件选中状态
+        value(newVal) {
+            let children = getChildCompsByName(this, COMPS_NAME.VE_CHECKBOX);
+
+            if (children.length > 0) {
+                children.forEach((child) => {
+                    child.updateModelByGroup(newVal);
+                });
+            }
+        },
+    },
+
+    methods: {
+        updateModel(label, checkedVal) {
+            let index = this.value.indexOf(label);
+            if (index > -1) {
+                if (!checkedVal) {
+                    this.value.splice(index, 1);
+                }
+            } else {
+                if (checkedVal) {
+                    this.value.push(label);
+                }
+            }
+
+            this.$emit("input", this.value);
+            this.$emit(EMIT_EVENTS.ON_CHECKED_CHANGE, this.value);
+        },
+    },
+    render() {
+        return <div class="ve-checkbox-group">{this.$slots.default}</div>;
+    },
+};

package/packages/ve-checkbox-group/src/util/constant.js

@@ -0,0 +1,14 @@
+// prefix
+export const PREFIX_CLS = "ve-checkbox-group-";
+
+// emit events
+export const EMIT_EVENTS = {
+    // on checked change
+    ON_CHECKED_CHANGE: "on-checked-change",
+};
+
+// comps name
+export const COMPS_NAME = {
+    VE_CHECKBOX: "VeCheckbox",
+    VE_CHECKBOX_GROUP: "VeCheckboxGroup",
+};

package/packages/ve-checkbox-group/src/util/index.js

@@ -0,0 +1,10 @@
+import { PREFIX_CLS } from "./constant";
+
+/*
+ * @clsName
+ * @desc  get class name
+ * @param {string} cls - class
+ */
+export function clsName(cls) {
+    return PREFIX_CLS + cls;
+}

package/packages/ve-contextmenu/index.js

@@ -0,0 +1,7 @@
+import VeContextmenu from "./src/index.jsx";
+
+VeContextmenu.install = function (Vue) {
+    Vue.component(VeContextmenu.name, VeContextmenu);
+};
+
+export default VeContextmenu;