@truenewx/tnxvue3 2.6.0

package/src/element-plus/dialog/Dialog.vue

@@ -0,0 +1,259 @@
+<template>
+    <el-dialog class="tnxel-dialog"
+               v-model="visible"
+               destroy-on-close
+               append-to-body
+               :modal="options.modal"
+               :close-on-click-modal="options['close-on-click-modal']"
+               :close-on-press-escape="options['close-on-press-escape']"
+               :show-close="options['show-close']"
+               :center="options.center"
+               :before-close="beforeClose"
+               @closed="onClosed">
+        <template #header>
+            <div class="tnxel-dialog-title" :class="mergeClass({'border-bottom': title})" v-html="title"
+                 v-if="title || options['show-close']"></div>
+        </template>
+        <template v-if="$slots.default">
+            <slot></slot>
+        </template>
+        <div :class="mergeClass()" v-html="contentValue" v-else-if="contentValue"></div>
+        <tnxel-dialog-content :class="mergeClass()" ref="content" v-bind="contentProps" v-else></tnxel-dialog-content>
+        <template #footer v-if="buttons && buttons.length">
+            <div class="tnxel-dialog-footer" :class="mergeClass()">
+                <el-button v-for="(button, index) in buttons" :type="button.type" :key="index"
+                           @click="btnClick(index)">{{ button.caption || button.text }}
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import $ from 'jquery';
+import DialogContent from './DialogContent.vue';
+
+const util = window.tnx.util;
+
+export default {
+    name: 'TnxelDialog',
+    components: {
+        'tnxel-dialog-content': DialogContent,
+    },
+    props: {
+        modelValue: Boolean,
+        container: String,
+        title: String,
+        content: String,
+        contentProps: Object,
+        buttons: Array,
+        theme: String,
+        width: {
+            type: [Number, String],
+            default: 512,
+        },
+    },
+    emits: ['update:modelValue', 'shown', 'closed'],
+    data() {
+        return {
+            visible: this.modelValue,
+            contentValue: this.content,
+            options: {
+                modal: true, // 是否需要遮罩层
+                'close-on-click-modal': false, // 是否可以通过点击遮罩层关闭对话框
+                'close-on-press-escape': true, // 是否可以通过按下 ESC 关闭对话框
+                'show-close': true, // 是否显示关闭按钮
+                center: false, // 是否对头部和底部采用居中布局
+                width: this.width,
+                // 以上均为element的Dialog组件配置项
+                onShown: undefined, // 对话框展示后的事件回调
+                onClosed: undefined, // 对话框关闭后的事件回调
+            },
+            middleTop: '40vh',
+            heightChangeObserver: null,
+        };
+    },
+    computed: {
+        dialogTop() {
+            if (typeof this.options.top === 'function') {
+                return this.options.top();
+            } else if (this.options.top) {
+                return this.options.top;
+            } else {
+                return this.middleTop;
+            }
+        },
+        dialogWidth() {
+            if (typeof this.options.width === 'function') {
+                return this.options.width();
+            } else if (typeof this.options.width === 'number') {
+                return this.options.width + 'px';
+            } else {
+                return this.options.width;
+            }
+        },
+    },
+    watch: {
+        modelValue(newValue, oldValue) {
+            this.visible = this.modelValue;
+            if (newValue && !oldValue) { // 从隐藏到显示
+                let vm = this;
+                this.$nextTick(function () {
+                    vm.locate(true);
+                });
+            }
+        },
+        visible() {
+            this.$emit('update:modelValue', this.visible);
+        },
+    },
+    mounted() {
+        let vm = this;
+        this.$nextTick(function () {
+            if (this.visible) {
+                vm.locate(true);
+            }
+
+            if (vm.$refs.content && !vm.$refs.content.close) {
+                vm.$refs.content.close = function () {
+                    vm.close();
+                }
+            }
+
+            if (typeof vm.options.onShown === 'function') {
+                vm.options.onShown.call(this);
+            } else {
+                vm.$emit('shown');
+            }
+        });
+    },
+    methods: {
+        mergeClass(classObject) {
+            classObject = classObject || {};
+            if (this.theme) {
+                classObject['theme-' + this.theme] = true;
+            }
+            return classObject;
+        },
+        locate(observe) {
+            let $dialog = undefined;
+            if (this.container) {
+                let $container = $(this.container);
+                if ($container.length) {
+                    $dialog = $container.next('.el-overlay').find('.el-dialog');
+                }
+            }
+            if (!$dialog?.length) {
+                $dialog = $('.el-dialog:last');
+            }
+            if ($dialog.length) {
+                const height = $dialog.height();
+                const docHeight = window.tnx.util.dom.getDocHeight();
+                // 对话框高度占文档高度的比例
+                const heightRatio = height / docHeight;
+                // 为了获得更好的视觉舒适度，根据高度比确定对话框中线位置：从33vh->50vh
+                const baseline = 33 + (50 - 33) * heightRatio;
+                const baseTop = docHeight * baseline / 100;
+                let top = (baseTop - height / 2);
+                top = Math.max(top, 8); // 至少顶部留8px空隙
+                this.middleTop = top + 'px';
+                $dialog.css({
+                    'margin-top': this.dialogTop,
+                    'width': this.dialogWidth,
+                    'max-height': 'calc(100vh - 16px)', // 最大高度时上下各留8px空隙
+                });
+
+                if (observe) {
+                    this.heightChangeObserver = util.dom.observeHeightChange($dialog[0], this.locate);
+                }
+            }
+        },
+        btnClick(index) {
+            const button = this.buttons[index];
+            if (button && typeof button.click === 'function') {
+                if (button.click.call(this.$refs.content, this.close) === false) {
+                    return;
+                }
+            }
+            this.close();
+        },
+        close(callback) {
+            const vm = this;
+            this.beforeClose(function () {
+                if (typeof callback === 'function') {
+                    vm.options.onClosed = util.function.around(vm.options.onClosed, function (onClosed) {
+                        if (onClosed) {
+                            onClosed();
+                        }
+                        callback();
+                    });
+                }
+                vm.visible = false;
+            });
+        },
+        beforeClose(done) {
+            if (typeof this.options.beforeClose === 'function') {
+                if (!this.options.beforeClose()) {
+                    return;
+                }
+            }
+            done();
+        },
+        onClosed() {
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed.call(this.$refs.content);
+            } else {
+                this.$emit('closed');
+            }
+            if (this.heightChangeObserver) {
+                this.heightChangeObserver.disconnect();
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxel-dialog {
+    display: none;
+}
+
+.tnxel-dialog.el-dialog {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+}
+
+.tnxel-dialog .el-dialog__header {
+    padding: 0;
+}
+
+.tnxel-dialog .el-dialog__header .el-dialog__headerbtn {
+    width: 48px;
+    height: 48px;
+}
+
+.tnxel-dialog .tnxel-dialog-title {
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+}
+
+.tnxel-dialog .tnxel-dialog-title > :last-child,
+.tnxel-dialog .el-dialog__body > div > :last-child {
+    margin-bottom: 0;
+}
+
+.tnxel-dialog .el-dialog__footer {
+    padding: 0;
+}
+
+.tnxel-dialog .tnxel-dialog-footer {
+    padding: 1rem;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.tnxel-dialog .el-dialog__footer .el-button {
+    margin-left: 10px;
+}
+</style>

package/src/element-plus/dialog/DialogContent.vue

@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>

package/src/element-plus/drawer/Drawer.vue

@@ -0,0 +1,175 @@
+<template>
+    <el-drawer
+        v-model="visible"
+        destroy-on-close
+        append-to-body
+        :size="options.width"
+        :modal="options.modal"
+        :close-on-click-modal="options['close-on-click-modal']"
+        :close-on-press-escape="options['close-on-press-escape']"
+        :show-close="options['show-close']"
+        :center="options.center"
+        :before-close="beforeClose"
+        :with-header="!!(title || options['show-close'])"
+        @closed="onClosed">
+        <template #title>
+            <div class="tnxel-drawer-title" :class="themeClass" v-html="title"></div>
+        </template>
+        <div class="tnxel-drawer-main" :class="themeClass">
+            <div class="tnxel-drawer-content">
+                <div v-html="contentValue" v-if="contentValue"/>
+                <tnxel-drawer-content ref="content" v-bind="contentProps" v-else>
+                </tnxel-drawer-content>
+            </div>
+            <div class="tnxel-drawer-footer" v-if="buttons && buttons.length">
+                <el-button v-for="(button, index) in buttons" :type="button.type" :key="index"
+                           @click="btnClick(index)">{{ button.caption || button.text }}
+                </el-button>
+            </div>
+        </div>
+    </el-drawer>
+</template>
+
+<script>
+const util = window.tnx.util;
+
+export default {
+    name: 'TnxelDrawer',
+    components: {
+        'tnxel-drawer-content': null,
+    },
+    props: {
+        title: String,
+        content: String,
+        contentProps: Object,
+        buttons: Array,
+        theme: String,
+    },
+    data() {
+        return {
+            visible: true,
+            contentValue: this.content,
+            options: {
+                modal: true, // 是否需要遮罩层
+                'close-on-click-modal': false, // 是否可以通过点击遮罩层关闭对话框
+                'close-on-press-escape': true, // 是否可以通过按下 ESC 关闭对话框
+                'show-close': true, // 是否显示关闭按钮
+                center: false, // 是否对头部和底部采用居中布局
+                // 以上均为element的Drawer组件配置项
+                width: undefined,
+                onShown: undefined, // 对话框展示后的事件回调
+                onClosed: undefined, // 对话框关闭后的事件回调
+            },
+        };
+    },
+    mounted() {
+        let vm = this;
+        this.$nextTick(function () {
+            if (vm.$refs.content && !vm.$refs.content.close) {
+                vm.$refs.content.close = function () {
+                    vm.close();
+                }
+            }
+            if (typeof vm.options.onShown === 'function') {
+                vm.options.onShown.call(this);
+            }
+        });
+    },
+    computed: {
+        themeClass() {
+            let classObject = {};
+            if (this.theme) {
+                classObject['theme-' + this.theme] = true;
+            }
+            return classObject;
+        },
+    },
+    methods: {
+        btnClick(index) {
+            const button = this.buttons[index];
+            if (button && typeof button.click === 'function') {
+                if (button.click.call(this.$refs.content, this.close) === false) {
+                    return;
+                }
+            }
+            this.close();
+        },
+        close(callback) {
+            const vm = this;
+            this.beforeClose(function () {
+                if (typeof callback === 'function') {
+                    vm.options.onClosed = util.function.around(vm.options.onClosed, function (onClosed) {
+                        if (onClosed) {
+                            onClosed();
+                        }
+                        callback();
+                    });
+                }
+                vm.visible = false;
+            });
+        },
+        beforeClose(done) {
+            if (typeof this.options.beforeClose === 'function') {
+                if (!this.options.beforeClose()) {
+                    return;
+                }
+            }
+            done();
+        },
+        onClosed() {
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed.call(this.$refs.content);
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.el-drawer__header {
+    padding: 0;
+    margin-bottom: 0;
+    color: unset;
+}
+
+.el-drawer__header .el-drawer__close-btn {
+    margin-top: -0.5rem;
+    margin-right: 0.5rem;
+    color: var(--el-text-color-secondary);
+}
+
+.tnxel-drawer-title {
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+}
+
+.el-drawer__body {
+    padding: 0;
+    flex-grow: 1;
+    max-height: calc(100vh - 60px);
+}
+
+.tnxel-drawer-main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.tnxel-drawer-main .tnxel-drawer-content {
+    flex-grow: 1;
+    padding: 1rem 1rem 0 1rem;
+    overflow: auto;
+}
+
+.tnxel-drawer-footer {
+    padding: 1rem;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+}
+
+.tnxel-drawer-footer .el-button {
+    margin-left: 0;
+    margin-right: 0.5rem;
+}
+</style>

package/src/element-plus/dropdown-item/DropdownItem.vue

@@ -0,0 +1,30 @@
+<template>
+    <el-dropdown-item :disabled="disabled">
+        <el-tooltip :content="tooltip" :placement="tooltipPlacement" :offset="32" :disabled="!tooltip">
+            <div class="w-100 flex-v-center" :title="title" v-if="icon">
+                <tnxel-icon :value="icon" :size="iconSize"/>
+                <span class="w-100"><slot></slot></span>
+            </div>
+            <div class="w-100" :title="title" v-else>
+                <slot></slot>
+            </div>
+        </el-tooltip>
+    </el-dropdown-item>
+</template>
+
+<script>
+export default {
+    name: 'TnxelDropdownItem',
+    props: {
+        icon: String,
+        iconSize: Number,
+        title: String,
+        tooltip: String,
+        tooltipPlacement: {
+            type: String,
+            default: 'right',
+        },
+        disabled: Boolean,
+    },
+}
+</script>

package/src/element-plus/enum-select/EnumSelect.vue

@@ -0,0 +1,125 @@
+<template>
+    <tnxel-fetch-cascader v-model="model" url="/api/meta/enums" value-name="key" text-name="caption"
+                          index-name="searchIndex" :disabled="disabled" :empty="empty" :filterable="filterable"
+                          :theme="theme"
+                          :params="{
+            type: type,
+            subtype:subtype,
+            grouped: true,
+        }" v-if="grouped"/>
+    <tnxel-select ref="select" v-model="model" :id="id" :selector="selector" :items="items"
+                  value-name="key" text-name="caption" index-name="searchIndex"
+                  :default-value="defaultValue" :empty="empty" :empty-value="emptyValue"
+                  :placeholder="placeholder" :disabled="disabled" :filterable="filterable"
+                  :theme="theme" :size="size" :tag-click="tagClick" :change="change" v-else/>
+</template>
+
+<script>
+import Select, {isMultiSelector} from '../select/Select.vue';
+import FetchCascader from '../fetch-cascader/FetchCascader.vue';
+
+export default {
+    name: 'TnxelEnumSelect',
+    components: {
+        'tnxel-select': Select,
+        'tnxel-fetch-cascader': FetchCascader,
+    },
+    props: {
+        id: [Number, String],
+        modelValue: [String, Number, Boolean, Array],
+        selector: String,
+        type: {
+            type: String,
+            required: true,
+        },
+        subtype: String,
+        defaultValue: String,
+        empty: {
+            type: [Boolean, String],
+            default: false,
+        },
+        emptyValue: {
+            type: [String, Boolean, Number],
+            default: () => null,
+        },
+        placeholder: String,
+        disabled: Boolean,
+        tagClick: Function,
+        change: Function,
+        grouped: {
+            type: Boolean,
+            default: false,
+        },
+        filterable: Boolean,
+        theme: String,
+        size: String,
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            model: this.modelValue,
+            items: null,
+        };
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+        },
+        modelValue() {
+            this.initModel();
+        },
+        type() {
+            this.init();
+        },
+        subtype() {
+            this.init();
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            if (typeof this.type === 'string') {
+                if (this.type.toLowerCase() === 'boolean') {
+                    this.items = [{
+                        key: true,
+                        caption: true.toText(),
+                    }, {
+                        key: false,
+                        caption: false.toText(),
+                    }];
+                    this.initModel();
+                } else {
+                    let vm = this;
+                    window.tnx.app.rpc.loadEnumItems(this.type, this.subtype, function (items) {
+                        vm.items = items;
+                        vm.initModel();
+                    });
+                }
+            }
+        },
+        initModel() {
+            let oldModel = this.model;
+            this.model = this.modelValue;
+            if (isMultiSelector(this.selector)) {
+                return;
+            }
+            if ((this.model === undefined || this.model === null) && !this.empty && this.items && this.items.length) {
+                let item = this.items[0];
+                this.model = item.key;
+                if (this.model !== oldModel && this.change) {
+                    this.change(item);
+                }
+            }
+        },
+        getText(value) {
+            // 暂不支持分组枚举类型
+            if (this.$refs.select) {
+                return this.$refs.select.getText(value);
+            }
+            return undefined;
+        },
+    }
+}
+</script>