yy-vue-easytable 2.27.2

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

@@ -0,0 +1,304 @@
+import Pager from "./pager.jsx";
+import VeSelect from "vue-easytable/packages/ve-select";
+import VeIcon from "vue-easytable/packages/ve-icon";
+import { COMPS_NAME, EMIT_EVENTS, LOCALE_COMP_NAME } from "./util/constant";
+import { clsName } from "./util";
+import { createLocale } from "../../src/utils/index";
+import { ICON_NAMES } from "../../src/utils/constant";
+
+const t = createLocale(LOCALE_COMP_NAME);
+
+export default {
+    name: COMPS_NAME.VE_PAGINATION,
+
+    components: {
+        Total: {
+            render() {
+                return (
+                    <span class={clsName("total")}>
+                        {t("total", this.$parent.total)}
+                    </span>
+                );
+            },
+        },
+
+        Prev: {
+            render() {
+                return (
+                    <li
+                        on-click={this.$parent.prevPage}
+                        class={[
+                            this.$parent.newPageIndex === 1
+                                ? clsName("disabled")
+                                : "",
+                            clsName("li"),
+                            clsName("prev"),
+                        ]}
+                    >
+                        <a>
+                            <VeIcon name={ICON_NAMES.LEFT_ARROW} />
+                        </a>
+                    </li>
+                );
+            },
+        },
+
+        Pager,
+
+        Next: {
+            render() {
+                return (
+                    <li
+                        on-click={this.$parent.nextPage}
+                        class={[
+                            this.$parent.newPageIndex === this.$parent.pageCount
+                                ? clsName("disabled")
+                                : "",
+                            clsName("li"),
+                            clsName("next"),
+                        ]}
+                    >
+                        <a>
+                            <VeIcon name={ICON_NAMES.RIGHT_ARROW} />
+                        </a>
+                    </li>
+                );
+            },
+        },
+
+        Sizer: {
+            render() {
+                return (
+                    <VeSelect
+                        class={clsName("select")}
+                        value={this.$parent.newPageSizeOption}
+                        popperAppendTo={this.$parent.popperAppendTo}
+                        on-input={this.handleChange}
+                        //v-model={this.$parent.newPageSizeOption}
+                    />
+                );
+            },
+
+            methods: {
+                handleChange(items) {
+                    if (Array.isArray(items) && items.length > 0) {
+                        let item = items.find((x) => x.selected);
+                        if (item) {
+                            this.$parent.pageSizeChangeHandler(item.value);
+                        }
+                    }
+                },
+            },
+        },
+
+        Jumper: {
+            methods: {
+                jumperEnter(event) {
+                    if (event.keyCode !== 13) return;
+
+                    var val = this.$parent.getValidNum(event.target.value);
+                    // bug fixed #483
+                    event.target.value = val;
+                    this.$parent.jumpPageHandler(val);
+                },
+            },
+            render() {
+                return (
+                    <span class={clsName("goto")}>
+                        &nbsp;{t("goto")}&nbsp;
+                        <input
+                            class={clsName("goto-input")}
+                            domProps-value={this.$parent.newPageIndex}
+                            on-keyup={this.jumperEnter}
+                            type="input"
+                        />
+                        &nbsp;{t("page")}&nbsp;
+                    </span>
+                );
+            },
+        },
+    },
+    props: {
+        layout: {
+            type: Array,
+            default() {
+                return ["total", "prev", "pager", "next", "sizer", "jumper"];
+            },
+        },
+
+        // 总条数
+        total: {
+            type: Number,
+            required: true,
+        },
+
+        // 当前页
+        pageIndex: {
+            type: Number,
+            default: 1,
+        },
+
+        // 最多显示几个数字按钮
+        pagingCount: {
+            type: Number,
+            default: 5,
+        },
+
+        // 每页大小
+        pageSize: {
+            type: Number,
+            default: 10,
+        },
+
+        // 每页大小下拉配置
+        pageSizeOption: {
+            type: Array,
+            default: function () {
+                return [10, 20, 30];
+            },
+        },
+        // popper append to element
+        popperAppendTo: {
+            type: [String, HTMLElement],
+            default: function () {
+                return document.body;
+            },
+        },
+    },
+    data() {
+        return {
+            newPageIndex:
+                this.pageIndex && this.pageIndex > 0
+                    ? parseInt(this.pageIndex)
+                    : 1,
+
+            newPageSize: this.pageSize,
+        };
+    },
+
+    computed: {
+        pageCount() {
+            return Math.ceil(this.total / this.newPageSize);
+        },
+        newPageSizeOption() {
+            return this.pageSizeOption.map((x) => {
+                var temp = {};
+
+                temp.value = x;
+                temp.label = x + t("itemsPerPage");
+                if (this.newPageSize == x) {
+                    temp.selected = true;
+                }
+
+                return temp;
+            });
+        },
+    },
+    watch: {
+        pageIndex: function (newVal) {
+            this.newPageIndex = newVal;
+        },
+
+        pageSize: function (newVal) {
+            this.newPageSize = newVal;
+        },
+    },
+
+    methods: {
+        getValidNum(value) {
+            let result = 1;
+
+            value = parseInt(value, 10);
+
+            if (isNaN(value) || value < 1) {
+                result = 1;
+            } else {
+                if (value < 1) {
+                    result = 1;
+                } else if (value > this.pageCount) {
+                    result = this.pageCount;
+                } else {
+                    result = value;
+                }
+            }
+            return result;
+        },
+
+        jumpPageHandler(newPageIndex) {
+            this.newPageIndex = newPageIndex;
+            this.$emit(EMIT_EVENTS.PAGE_NUMBER_CHANGE, this.newPageIndex);
+        },
+
+        // 上一页
+        prevPage() {
+            if (this.newPageIndex > 1) {
+                this.newPageIndex = this.newPageIndex - 1;
+                this.$emit(EMIT_EVENTS.PAGE_NUMBER_CHANGE, this.newPageIndex);
+            }
+        },
+
+        // 下一页
+        nextPage() {
+            if (this.newPageIndex < this.pageCount) {
+                this.newPageIndex = this.newPageIndex + 1;
+                this.$emit(EMIT_EVENTS.PAGE_NUMBER_CHANGE, this.newPageIndex);
+            }
+        },
+
+        // 改变页面大小
+        pageSizeChangeHandler() {
+            let item = this.newPageSizeOption.find((x) => x.selected);
+
+            if (item) {
+                this.newPageSize = item.value;
+                this.newPageIndex = 1;
+                this.$emit(EMIT_EVENTS.PAGE_SIZE_CHANGE, this.newPageSize);
+            }
+        },
+
+        // 回到初始页码
+        goBackPageIndex() {
+            this.newPageIndex =
+                this.pageIndex && this.pageIndex > 0
+                    ? parseInt(this.pageIndex)
+                    : 1;
+        },
+
+        // 还原每页大小
+        goBackPageSize() {
+            if (this.pageSize > 0) {
+                this.newPageSize = this.pageSize;
+            }
+        },
+    },
+    render() {
+        let template = <ul class="ve-pagination"></ul>;
+
+        var comps = {
+            //'total','prev','pager','next','sizer','jumper'
+            total: <total></total>,
+            prev: <prev></prev>,
+            pager: (
+                <pager
+                    pageCount={this.pageCount}
+                    pageIndex={this.newPageIndex}
+                    pagingCount={this.pagingCount}
+                    onJumpPageHandler={this.jumpPageHandler}
+                ></pager>
+            ),
+            next: <next></next>,
+            sizer: <sizer></sizer>,
+            jumper: <jumper onJumpPageHandler={this.jumpPageHandler}></jumper>,
+        };
+
+        // https://github.com/ElemeFE/element/issues/10033
+        // https://github.com/ElemeFE/element/issues/9587
+        template.children = template.children || [];
+
+        this.layout.forEach((item) => {
+            template.children.push(comps[item]);
+        });
+
+        return template;
+    },
+};

package/packages/ve-pagination/src/pager.jsx

@@ -0,0 +1,166 @@
+import VeIcon from "vue-easytable/packages/ve-icon";
+import { clsName } from "./util";
+import { LOCALE_COMP_NAME } from "./util/constant";
+import { createLocale } from "../../src/utils/index";
+import { ICON_NAMES } from "../../src/utils/constant";
+const t = createLocale(LOCALE_COMP_NAME);
+
+export default {
+    props: {
+        pageCount: {
+            type: Number,
+            required: true,
+        },
+        pageIndex: {
+            type: Number,
+            required: true,
+        },
+        pagingCount: {
+            type: Number,
+            required: true,
+        },
+    },
+    computed: {
+        numOffset() {
+            return Math.floor((this.pagingCount + 2) / 2) - 1;
+        },
+
+        showJumpPrev() {
+            if (this.pageCount > this.pagingCount + 2) {
+                if (this.pageIndex > this.pagingCount) {
+                    return true;
+                }
+            }
+            return false;
+        },
+
+        showJumpNext() {
+            if (this.pageCount > this.pagingCount + 2) {
+                //if (this.pageIndex < this.pageCount - this.numOffset) {
+                if (this.pageIndex <= this.pageCount - this.pagingCount) {
+                    return true;
+                }
+            }
+            return false;
+        },
+
+        // 当前要显示的数字按钮集合
+        pagingCounts() {
+            let startNum,
+                result = [],
+                showJumpPrev = this.showJumpPrev,
+                showJumpNext = this.showJumpNext;
+
+            if (showJumpPrev && !showJumpNext) {
+                startNum = this.pageCount - this.pagingCount;
+                for (let i = startNum; i < this.pageCount; i++) {
+                    result.push(i);
+                }
+            } else if (!showJumpPrev && showJumpNext) {
+                for (let i = 2; i < this.pagingCount + 2; i++) {
+                    result.push(i);
+                }
+            } else if (showJumpPrev && showJumpNext) {
+                for (
+                    let i = this.pageIndex - this.numOffset;
+                    i <= this.pageIndex + this.numOffset;
+                    i++
+                ) {
+                    result.push(i);
+                }
+            } else {
+                for (let i = 2; i < this.pageCount; i++) {
+                    result.push(i);
+                }
+            }
+
+            return result;
+        },
+    },
+    methods: {
+        jumpPage(pageIndex) {
+            this.$emit("jumpPageHandler", pageIndex);
+        },
+    },
+    render() {
+        const {
+            pageIndex,
+            jumpPage,
+            showJumpPrev,
+            pagingCount,
+            pagingCounts,
+            showJumpNext,
+            pageCount,
+        } = this;
+
+        return (
+            <span class={clsName("pager")}>
+                <li
+                    class={[
+                        pageIndex === 1 ? clsName("li-active") : "",
+                        clsName("li"),
+                    ]}
+                    on-click={() => jumpPage(1)}
+                >
+                    <a>1</a>
+                </li>
+
+                {showJumpPrev && (
+                    <li
+                        class={[
+                            pageIndex === 1 ? "disabled" : "",
+                            clsName("li"),
+                            clsName("jump-prev"),
+                        ]}
+                        title={t("prev5", pagingCount)}
+                        on-click={() => jumpPage(pageIndex - pagingCount)}
+                    >
+                        <a>
+                            <VeIcon name={ICON_NAMES.DOUBLE_LEFT_ARROW} />
+                        </a>
+                    </li>
+                )}
+                {pagingCounts.map((number, index) => {
+                    return (
+                        <li
+                            key={index}
+                            class={[
+                                number === pageIndex
+                                    ? clsName("li-active")
+                                    : "",
+                                clsName("li"),
+                            ]}
+                            on-click={() => jumpPage(number)}
+                        >
+                            <a>{number}</a>
+                        </li>
+                    );
+                })}
+
+                {showJumpNext && (
+                    <li
+                        class={[clsName("li"), clsName("jump-next")]}
+                        title={t("next5", pagingCount)}
+                        on-click={() => jumpPage(pageIndex + pagingCount)}
+                    >
+                        <a>
+                            <VeIcon name={ICON_NAMES.DOUBLE_RIGHT_ARROW} />
+                        </a>
+                    </li>
+                )}
+
+                {pageCount > 1 && (
+                    <li
+                        class={[
+                            pageIndex === pageCount ? clsName("li-active") : "",
+                            clsName("li"),
+                        ]}
+                        on-click={() => jumpPage(pageCount)}
+                    >
+                        <a>{pageCount}</a>
+                    </li>
+                )}
+            </span>
+        );
+    },
+};

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

@@ -0,0 +1,16 @@
+// prefix
+export const PREFIX_CLS = "ve-pagination-";
+
+// locale comp name
+export const LOCALE_COMP_NAME = "pagination";
+
+// emit events
+export const EMIT_EVENTS = {
+    PAGE_NUMBER_CHANGE: "on-page-number-change",
+    PAGE_SIZE_CHANGE: "on-page-size-change",
+};
+
+// comps name
+export const COMPS_NAME = {
+    VE_PAGINATION: "VePagination",
+};

package/packages/ve-pagination/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-radio/index.js

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

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

@@ -0,0 +1,121 @@
+import { clsName } from "./util";
+import { COMPS_NAME, EMIT_EVENTS } from "./util/constant";
+
+export default {
+    name: COMPS_NAME.VE_RADIO,
+    props: {
+        // 当前checkbox 选中状态,实现 v-model
+        value: {
+            type: [String, Number, Boolean],
+            default: null,
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        // is disabled checked
+        disabled: Boolean,
+        // 是否是可控组件
+        isControlled: {
+            type: Boolean,
+            default: false,
+        },
+        // isControlled 为true 时生效
+        isSelected: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            // 当前checkbox 选中状态
+            model: this.value,
+        };
+    },
+
+    computed: {
+        radioClass() {
+            return [
+                clsName("container"),
+                {
+                    [clsName("checked")]: this.internalIsSelected,
+                    [clsName("disabled")]: this.disabled,
+                },
+            ];
+        },
+
+        // 是否选中
+        internalIsSelected() {
+            return this.isControlled ? this.isSelected : this.model;
+        },
+    },
+
+    watch: {
+        value() {
+            this.updateModelBySingle();
+        },
+    },
+
+    methods: {
+        // checked change
+        checkedChange(event) {
+            if (this.disabled) {
+                return false;
+            }
+            const isChecked = event.target.checked;
+
+            if (!this.isControlled) {
+                this.$emit("input", isChecked);
+            }
+            this.$emit(EMIT_EVENTS.ON_RADIO_CHANGE, isChecked);
+        },
+
+        // get label content
+        getLabelContent() {
+            const { label, $slots } = this;
+
+            return label ? label : $slots.default;
+        },
+
+        initModel() {
+            this.model = this.value;
+        },
+
+        // 通过单选更新 model
+        updateModelBySingle() {
+            if (!this.disabled) {
+                this.model = this.value;
+            }
+        },
+    },
+
+    created() {
+        this.initModel();
+    },
+    render() {
+        const {
+            label,
+            radioClass,
+            checkedChange,
+            getLabelContent,
+            internalIsSelected,
+        } = this;
+
+        return (
+            <label class={"ve-radio"}>
+                <span class={radioClass}>
+                    <input
+                        checked={internalIsSelected}
+                        class={clsName("input")}
+                        type="radio"
+                        value={label}
+                        on-change={checkedChange}
+                    />
+
+                    <span class={clsName("inner")}></span>
+                </span>
+                <span class={clsName("label")}>{getLabelContent()}</span>
+            </label>
+        );
+    },
+};

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

@@ -0,0 +1,13 @@
+// prefix
+export const PREFIX_CLS = "ve-radio-";
+
+// emit events
+export const EMIT_EVENTS = {
+    // on radio change
+    ON_RADIO_CHANGE: "on-radio-change",
+};
+
+// comps name
+export const COMPS_NAME = {
+    VE_RADIO: "VeRadio",
+};

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

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