yy-vue-easytable 2.27.2

package/packages/ve-table/src/footer/index.jsx

@@ -0,0 +1,108 @@
+import { clsName } from "../util";
+import FooterTr from "./footer-tr";
+import { COMPS_NAME } from "../util/constant";
+export default {
+    name: COMPS_NAME.VE_TABLE_FOOTER,
+    props: {
+        colgroups: {
+            type: Array,
+            required: true,
+        },
+        footerData: {
+            type: Array,
+            required: true,
+        },
+        hasFixedColumn: {
+            type: Boolean,
+            default: false,
+        },
+        allRowKeys: {
+            type: Array,
+            required: true,
+        },
+        rowKeyFieldName: {
+            type: String,
+            default: null,
+        },
+        // cell style option
+        cellStyleOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // event custom option
+        eventCustomOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+        // footer rows
+        footerRows: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        // fixed footer
+        fixedFooter: {
+            type: Boolean,
+            default: true,
+        },
+        // cell span option
+        cellSpanOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    computed: {
+        // footer class
+        footerClass() {
+            return {
+                [clsName("fixed-footer")]: this.fixedFooter,
+            };
+        },
+    },
+    methods: {
+        // get tr key
+        getTrKey({ rowData, rowIndex }) {
+            let result = rowIndex;
+
+            const { rowKeyFieldName } = this;
+            if (rowKeyFieldName) {
+                result = rowData[rowKeyFieldName];
+            }
+            return result;
+        },
+    },
+    render() {
+        const { colgroups, rowKeyFieldName, cellStyleOption } = this;
+
+        return (
+            <tfoot class={this.footerClass}>
+                {this.footerData.map((rowData, rowIndex) => {
+                    const trProps = {
+                        key: this.getTrKey({ rowData, rowIndex }),
+                        props: {
+                            rowIndex,
+                            rowData,
+                            colgroups,
+                            rowKeyFieldName,
+                            cellStyleOption,
+                            footerRows: this.footerRows,
+                            fixedFooter: this.fixedFooter,
+                            cellSpanOption: this.cellSpanOption,
+                            eventCustomOption: this.eventCustomOption,
+                        },
+                    };
+
+                    return <FooterTr {...trProps} />;
+                })}
+                {this.$slots.default}
+            </tfoot>
+        );
+    },
+};

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

@@ -0,0 +1,69 @@
+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_HEADER_CHECKBOX_CONTENT,
+    mixins: [emitter],
+    props: {
+        // checkbox option
+        checkboxOption: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    data() {
+        return {
+            // is selected
+            isSelected: false,
+            isIndeterminate: false,
+        };
+    },
+
+    methods: {
+        // selected change
+        selectedChange(isSelected) {
+            this.isSelected = isSelected;
+
+            this.dispatch(
+                COMPS_NAME.VE_TABLE,
+                EMIT_EVENTS.CHECKBOX_SELECTED_ALL_CHANGE,
+                {
+                    isSelected,
+                },
+            );
+        },
+
+        // set selected all info
+        setSelectedAllInfo({ isSelected, isIndeterminate }) {
+            this.isSelected = isSelected;
+            this.isIndeterminate = isIndeterminate;
+        },
+    },
+    mounted() {
+        // receive selected all info
+        this.$on(EMIT_EVENTS.CHECKBOX_SELECTED_ALL_INFO, (params) => {
+            this.setSelectedAllInfo(params);
+        });
+    },
+    render() {
+        const { isSelected, isIndeterminate, selectedChange } = this;
+
+        const checkboxProps = {
+            class: clsName("checkbox-wrapper"),
+            props: {
+                isControlled: true,
+                isSelected: isSelected,
+                indeterminate: isIndeterminate,
+            },
+            on: {
+                "on-checked-change": (isSelectedParam) =>
+                    selectedChange(isSelectedParam),
+            },
+        };
+
+        return <VeCheckbox {...checkboxProps} />;
+    },
+};

package/packages/ve-table/src/header/header-filter-content.jsx

@@ -0,0 +1,100 @@
+import VeDropdown from "vue-easytable/packages/ve-dropdown";
+import { COMPS_NAME, EMIT_EVENTS, LOCALE_COMP_NAME } from "../util/constant";
+import { clsName } from "../util";
+import { createLocale, isFunction } from "../../../src/utils/index";
+import VeIcon from "vue-easytable/packages/ve-icon";
+import { ICON_NAMES } from "../../../src/utils/constant";
+
+const t = createLocale(LOCALE_COMP_NAME);
+
+export default {
+    name: COMPS_NAME.VE_TABLE_HEADER_FILTER_CONTENT,
+    props: {
+        column: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            filterList: [],
+        };
+    },
+    watch: {
+        column: {
+            handler: function (column) {
+                if (column.filter && Array.isArray(column.filter.filterList)) {
+                    this.filterList = column.filter.filterList;
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    methods: {
+        /*
+         * @filterConfirm
+         * @desc  filter confirm
+         * @param {Array} val - filter list
+         */
+        filterConfirm() {
+            const { filterConfirm } = this.column.filter;
+            filterConfirm && filterConfirm(this.filterList);
+        },
+        // filter reset
+        filterReset() {
+            const { filterReset } = this.column.filter;
+            filterReset && filterReset(this.filterList);
+        },
+        // getIcon
+        getIcon(h) {
+            let result;
+            const { filterIcon } = this.column.filter;
+            if (isFunction(filterIcon)) {
+                result = filterIcon(h);
+            } else {
+                result = <VeIcon name={ICON_NAMES.FILTER} />;
+            }
+            return result;
+        },
+    },
+    render(h) {
+        const { filterList, isMultiple, maxHeight, beforeVisibleChange } =
+            this.column.filter;
+
+        const compProps = {
+            props: {
+                value: filterList,
+                showOperation: true,
+                isMultiple: isMultiple,
+                showRadio: true, // when single selection
+                confirmFilterText: t("confirmFilter"),
+                resetFilterText: t("resetFilter"),
+                beforeVisibleChange: beforeVisibleChange,
+            },
+            on: {
+                [EMIT_EVENTS.HEADER_FILTER_CONFIRM]: this.filterConfirm,
+                [EMIT_EVENTS.HEADER_FILTER_RESET]: this.filterReset,
+                // v-model
+                input: (val) => {
+                    this.filterList = val;
+                },
+            },
+        };
+
+        if (typeof maxHeight === "number") {
+            compProps.props.maxHeight = maxHeight;
+        }
+
+        return (
+            <VeDropdown {...compProps}>
+                {/* icon */}
+                <span class={clsName("filter")}>
+                    <span class={clsName("filter-icon")}>
+                        {this.getIcon(h)}
+                    </span>
+                </span>
+            </VeDropdown>
+        );
+    },
+};

package/packages/ve-table/src/header/header-filter-custom-content.jsx

@@ -0,0 +1,110 @@
+import VeDropdown from "vue-easytable/packages/ve-dropdown";
+import { COMPS_NAME } from "../util/constant";
+import { clsName } from "../util";
+import { isFunction, isBoolean } from "../../../src/utils/index";
+import VeIcon from "vue-easytable/packages/ve-icon";
+import { ICON_NAMES } from "../../../src/utils/constant";
+
+export default {
+    name: COMPS_NAME.VE_TABLE_HEADER_FILTER_CUSTOM_CONTENT,
+    props: {
+        column: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            internalVisible: false,
+        };
+    },
+    watch: {
+        column: {
+            handler: function (column) {
+                if (
+                    column.filterCustom &&
+                    isBoolean(column.filterCustom.defaultVisible)
+                ) {
+                    this.internalVisible = column.filterCustom.defaultVisible;
+                }
+            },
+            immediate: true,
+            deep: true,
+        },
+    },
+    methods: {
+        // visible change
+        visibleChange(visible) {
+            this.internalVisible = visible;
+        },
+        // get custom content
+        getCustomContent(h) {
+            let result = null;
+
+            const { render } = this.column.filterCustom;
+            if (isFunction(render)) {
+                const props = {
+                    slot: "custom-content",
+                };
+
+                result = (
+                    <div {...props}>
+                        {render(
+                            {
+                                showFn: this.show,
+                                closeFn: this.close,
+                            },
+                            h,
+                        )}
+                    </div>
+                );
+            }
+            return result;
+        },
+        // getIcon
+        getIcon(h) {
+            let result;
+            const { filterIcon } = this.column.filterCustom;
+            if (isFunction(filterIcon)) {
+                result = filterIcon(h);
+            } else {
+                result = <VeIcon name={ICON_NAMES.FILTER} />;
+            }
+            return result;
+        },
+
+        close() {
+            this.internalVisible = false;
+        },
+        show() {
+            this.internalVisible = true;
+        },
+    },
+    render(h) {
+        const compProps = {
+            props: {
+                isCustomContent: true,
+                isControlled: true,
+                visible: this.internalVisible,
+                beforeVisibleChange:
+                    this.column.filterCustom.beforeVisibleChange,
+            },
+            on: {
+                "on-dropdown-visible-change": this.visibleChange,
+            },
+        };
+
+        return (
+            <VeDropdown {...compProps}>
+                {/* icon */}
+                <span class={clsName("filter")}>
+                    <span class={clsName("filter-icon")}>
+                        {this.getIcon(h)}
+                    </span>
+                </span>
+                {/* custom content */}
+                {this.getCustomContent(h)}
+            </VeDropdown>
+        );
+    },
+};