yy-vue-easytable 2.27.2

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

@@ -0,0 +1,193 @@
+import VeDropdown from "vue-easytable/packages/ve-dropdown";
+import { COMPS_NAME, EMIT_EVENTS } from "./util/constant";
+import { clsName } from "./util/index";
+import VeIcon from "vue-easytable/packages/ve-icon";
+import { ICON_NAMES } from "../../src/utils/constant";
+
+export default {
+    name: COMPS_NAME.VE_SELECT,
+    props: {
+        width: {
+            type: Number,
+            default: 90,
+        },
+
+        // select的最大宽度(超出隐藏)
+        maxWidth: {
+            type: Number,
+            default: 0,
+        },
+
+        // 如果为true 会包含 checkbox
+        isMultiple: {
+            type: Boolean,
+            default: false,
+        },
+
+        // 用户传入v-model 的值 [{value/label/selected}]
+        value: {
+            type: Array,
+            default: null,
+        },
+
+        // 占位符
+        placeholder: {
+            type: String,
+            default: "请选择",
+            validator: function (value) {
+                return value.length > 0;
+            },
+        },
+
+        // 文本居中方式 left|center|right
+        textAlign: {
+            type: String,
+            default: "left",
+        },
+
+        // 是否支持输入input
+        isInput: {
+            type: Boolean,
+            default: false,
+        },
+        // popper append to element
+        popperAppendTo: {
+            type: [String, HTMLElement],
+            default: function () {
+                return document.body;
+            },
+        },
+    },
+    data() {
+        return {
+            visible: false,
+
+            internalOptions: [],
+
+            inputValue: "",
+            // dorpdown visible
+            dropdownVisible: false,
+        };
+    },
+    computed: {
+        // icon class
+        iconClass() {
+            return {
+                [clsName("show")]: this.dropdownVisible,
+                [clsName("toggle-icon")]: true,
+            };
+        },
+    },
+    watch: {
+        value: function () {
+            this.init();
+        },
+    },
+    methods: {
+        // 初始化
+        init() {
+            this.internalOptions = Object.assign([], this.value);
+        },
+
+        // 显示选中的信息
+        showSelectInfo() {
+            var result, labels;
+
+            labels = this.selectedLabels();
+            if (Array.isArray(labels) && labels.length > 0) {
+                result = labels.join();
+            } else {
+                result = this.placeholder;
+            }
+
+            return result;
+        },
+
+        // 当前选中项的label
+        selectedLabels() {
+            return this.internalOptions
+                .filter((x) => x.selected)
+                .map((x) => {
+                    if (x.selected) {
+                        return x.label;
+                    }
+                });
+        },
+
+        // dropdown change event
+        dropdownChange() {
+            // 使用户传入的v-model 生效
+            this.$emit("input", this.internalOptions);
+            this.$emit(EMIT_EVENTS.SELECT_CHANGE, this.internalOptions);
+        },
+    },
+
+    created() {
+        this.init();
+    },
+    render() {
+        const { isInput } = this;
+
+        const props = {
+            class: "ve-select",
+            props: {
+                isSelect: true,
+                width: this.width,
+                maxWidth: this.maxWidth,
+                isMultiple: this.isMultiple,
+                textAlign: this.textAlign,
+                isInput: this.isInput,
+                // v-model
+                value: this.internalOptions,
+                hideByItemClick: true,
+                popperAppendTo: this.popperAppendTo,
+            },
+            style: {
+                width: this.width,
+            },
+            on: {
+                //change: this.dropdownChange,
+                // v-model
+                input: (val) => {
+                    this.internalOptions = val;
+                    this.dropdownChange();
+                },
+                // dropdown visible change
+                "dropdown-visible-change": (visible) => {
+                    this.dropdownVisible = visible;
+                },
+            },
+        };
+
+        let content = "";
+        if (isInput) {
+            content = (
+                <input
+                    class={clsName("input")}
+                    placeholder={this.placeholder}
+                    type="text"
+                    v-model={this.inputValue}
+                />
+            );
+        } else {
+            content = (
+                <span class={clsName("selected-span")}>
+                    {this.showSelectInfo()}
+                </span>
+            );
+        }
+
+        return (
+            <VeDropdown {...props}>
+                <span>
+                    {content}
+                    <VeIcon
+                        name={ICON_NAMES.BOTTOM_ARROW}
+                        class={this.iconClass}
+                    />
+                    {/* <i class={[this.iconClass]}></i> */}
+                </span>
+            </VeDropdown>
+        );
+    },
+};

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

@@ -0,0 +1,13 @@
+// prefix
+export const PREFIX_CLS = "ve-select-";
+
+// emit events
+export const EMIT_EVENTS = {
+    // on select change
+    SELECT_CHANGE: "on-select-change",
+};
+
+// comps name
+export const COMPS_NAME = {
+    VE_SELECT: "VeSelect",
+};

package/packages/ve-select/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-table/index.js

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

package/packages/ve-table/src/body/body-checkbox-content.jsx

@@ -0,0 +1,126 @@
+import VeCheckbox from "vue-easytable/packages/ve-checkbox";
+import { COMPS_NAME, EMIT_EVENTS } from "../util/constant";
+import { clsName } from "../util";
+import emitter from "../../../src/mixins/emitter";
+export default {
+    name: COMPS_NAME.VE_TABLE_BODY_CHECKBOX_CONTENT,
+    mixins: [emitter],
+    props: {
+        // checkbox option
+        checkboxOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        rowKey: {
+            type: [String, Number],
+            required: true,
+        },
+        internalCheckboxSelectedRowKeys: {
+            type: Array,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    data() {
+        return {
+            isSelected: false,
+        };
+    },
+    computed: {
+        // disabled
+        disabled() {
+            let result = false;
+
+            const { checkboxOption, rowKey } = this;
+
+            if (!checkboxOption) {
+                return;
+            }
+
+            const { disableSelectedRowKeys } = checkboxOption;
+
+            if (
+                Array.isArray(disableSelectedRowKeys) &&
+                disableSelectedRowKeys.includes(rowKey)
+            ) {
+                result = true;
+            }
+
+            return result;
+        },
+
+        // 是否是受控属性（取决于selectedRowKeys）
+        isControlledProp() {
+            const { checkboxOption } = this;
+
+            return (
+                checkboxOption && Array.isArray(checkboxOption.selectedRowKeys)
+            );
+        },
+    },
+    watch: {
+        // watch internalCheckboxSelectedRowKeys
+        internalCheckboxSelectedRowKeys: {
+            handler: function () {
+                this.initSelected();
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // init selected
+        initSelected() {
+            let result = false;
+
+            const { rowKey, internalCheckboxSelectedRowKeys } = this;
+
+            if (
+                Array.isArray(internalCheckboxSelectedRowKeys) &&
+                internalCheckboxSelectedRowKeys.includes(rowKey)
+            ) {
+                result = true;
+            }
+
+            this.isSelected = result;
+        },
+
+        // selected change
+        selectedChange(isSelected) {
+            const { isControlledProp } = this;
+
+            // 非受控
+            if (!isControlledProp) {
+                this.isSelected = isSelected;
+            }
+
+            this.dispatch(
+                COMPS_NAME.VE_TABLE_BODY,
+                EMIT_EVENTS.CHECKBOX_SELECTED_ROW_CHANGE,
+                {
+                    rowKey: this.rowKey,
+                    isSelected,
+                },
+            );
+        },
+    },
+    render() {
+        const { isSelected, selectedChange, disabled } = this;
+
+        const checkboxProps = {
+            class: clsName("checkbox-wrapper"),
+            props: {
+                isControlled: true,
+                isSelected: isSelected,
+                disabled,
+            },
+            on: {
+                "on-checked-change": (isSelected) => selectedChange(isSelected),
+            },
+        };
+
+        return <VeCheckbox {...checkboxProps} />;
+    },
+};

package/packages/ve-table/src/body/body-radio-content.jsx

@@ -0,0 +1,113 @@
+import VeRadio from "vue-easytable/packages/ve-radio";
+import { COMPS_NAME, EMIT_EVENTS } from "../util/constant";
+import { clsName } from "../util";
+import emitter from "../../../src/mixins/emitter";
+export default {
+    name: COMPS_NAME.VE_TABLE_BODY_RADIO_CONTENT,
+    mixins: [emitter],
+    props: {
+        // checkbox option
+        radioOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        rowKey: {
+            type: [String, Number],
+            required: true,
+        },
+        internalRadioSelectedRowKey: {
+            type: [String, Number],
+            default: null,
+        },
+    },
+    data() {
+        return {
+            isSelected: false,
+        };
+    },
+    computed: {
+        // disabled
+        disabled() {
+            let result = false;
+
+            const { radioOption, rowKey } = this;
+
+            if (!radioOption) {
+                return;
+            }
+
+            const { disableSelectedRowKeys } = radioOption;
+
+            if (
+                Array.isArray(disableSelectedRowKeys) &&
+                disableSelectedRowKeys.includes(rowKey)
+            ) {
+                result = true;
+            }
+
+            return result;
+        },
+
+        // 是否是受控属性（取决于selectedRowKey）
+        isControlledProp() {
+            const { radioOption } = this;
+
+            return (
+                radioOption &&
+                Object.keys(radioOption).includes("selectedRowKey")
+            );
+        },
+    },
+    watch: {
+        // watch internal radio SelectedRowKey
+        internalRadioSelectedRowKey: {
+            handler: function () {
+                this.initSelected();
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        // init selected
+        initSelected() {
+            this.isSelected = this.internalRadioSelectedRowKey === this.rowKey;
+        },
+
+        // selected change
+        selectedChange() {
+            const { isControlledProp } = this;
+
+            // 非受控
+            if (!isControlledProp) {
+                this.isSelected = true;
+            }
+
+            this.dispatch(
+                COMPS_NAME.VE_TABLE_BODY,
+                EMIT_EVENTS.RADIO_SELECTED_ROW_CHANGE,
+                {
+                    rowKey: this.rowKey,
+                },
+            );
+        },
+    },
+    render() {
+        const { isSelected, selectedChange, disabled } = this;
+
+        const radioProps = {
+            class: clsName("radio-wrapper"),
+            props: {
+                isControlled: true,
+                isSelected,
+                disabled,
+            },
+            on: {
+                "on-radio-change": () => selectedChange(),
+            },
+        };
+
+        return <VeRadio {...radioProps} />;
+    },
+};