@truenewx/tnxvue3 3.4.4 → 3.4.5

package/src/tdesign/mobile/dialog/Dialog.vue

@@ -0,0 +1,179 @@
+<template>
+    <t-dialog
+        class="tnxtdm-dialog"
+        v-model:visible="visible"
+        :title="title"
+        :width="width"
+        :close-on-overlay-click="options['close-on-overlay-click']"
+        :close-btn="!buttons?.length"
+        :destroy-on-close="true"
+        @closed="onClosed"
+    >
+        <template #default>
+            <div v-if="content" v-html="content"></div>
+            <tnxtdm-dialog-content ref="content" v-bind="contentProps" v-else/>
+        </template>
+        <template #actions v-if="buttons?.length">
+            <div class="tnxtdm-dialog-footer">
+                <t-button v-for="(button, index) in buttons" :key="index" :theme="button.type || 'primary'"
+                          :loading="buttonLoadings[index]" @click="btnClick(index)" block>
+                    {{ button.caption || button.text }}
+                </t-button>
+            </div>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+import DialogContent from './DialogContent.vue';
+
+export default {
+    name: 'TnxtdmDialog',
+    components: {
+        'tnxtdm-dialog-content': DialogContent,
+    },
+    props: {
+        id: {
+            type: String,
+            default: () => window.tnx.util.string.uuid32(),
+        },
+        modelValue: Boolean,
+        container: String,
+        title: String,
+        content: String,
+        contentProps: Object,
+        buttons: Array,
+        theme: String,
+        width: {
+            type: [Number, String],
+            default: '100%',
+        },
+    },
+    emits: ['update:modelValue', 'shown', 'closed'],
+    data() {
+        return {
+            visible: this.modelValue,
+            options: {
+                modal: true,
+                'close-on-overlay-click': true,
+                onShown: undefined,
+                onClosed: undefined,
+                beforeClose: undefined,
+            },
+            buttonLoadings: [],
+        };
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+        },
+        visible(val) {
+            this.$emit('update:modelValue', val);
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.$refs.content && !this.$refs.content.close) {
+                this.$refs.content.close = () => {
+                    this.close();
+                }
+            }
+
+            if (typeof this.options.onShown === 'function') {
+                this.options.onShown.call(this);
+            } else {
+                this.$emit('shown');
+            }
+        });
+    },
+    methods: {
+        btnClick(index) {
+            const button = this.buttons[index];
+            if (button) {
+                let click = button.click;
+                if (typeof click === 'string') {
+                    if (typeof this.$refs.content[click] === 'function') {
+                        click = this.$refs.content[click];
+                    } else {
+                        console.error(`Method '${click}' not found in component:`, this.$refs.content);
+                        click = null;
+                    }
+                }
+
+                if (typeof click === 'function') {
+                    let result = click.call(this.$refs.content, this.close);
+                    if (result === 'loading') {
+                        this.buttonLoadings[index] = true;
+                        return;
+                    }
+                    if (result === false) {
+                        return;
+                    }
+                }
+            }
+            this.close();
+        },
+        close() {
+            return new Promise((resolve) => {
+                this.beforeClose(() => {
+                    const originalOnClosed = this.options.onClosed;
+                    this.options.onClosed = window.tnx.util.function.around(originalOnClosed, function (onClosed) {
+                        if (onClosed) {
+                            onClosed();
+                        }
+                        resolve();
+                    });
+                    this.visible = false;
+                });
+            });
+        },
+        beforeClose(done) {
+            try {
+                if (typeof this.options.beforeClose === 'function') {
+                    if (this.options.beforeClose.call(this.$refs.content) === false) {
+                        return;
+                    }
+                }
+                done();
+            } catch (e) {
+                console.error(e);
+            }
+        },
+        onClosed() {
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed.call(this.$refs.content);
+            } else {
+                this.$emit('closed');
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxtdm-dialog {
+
+    &.t-dialog__wrapper.t-popup--center {
+        width: calc(100% - 48px);
+        max-width: calc(var(--max-page-width) - 48px);
+    }
+
+    .t-dialog__content {
+        padding-top: 1rem;
+    }
+
+    .t-dialog__close-btn {
+        right: 12px;
+    }
+
+    .t-dialog__footer {
+        padding: 12px 24px;
+
+        .tnxtdm-dialog-footer {
+            padding: 12px 0;
+            width: 100%;
+        }
+    }
+
+}
+</style>

package/src/tdesign/mobile/dialog/DialogContent.vue

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

package/src/tdesign/mobile/drawer/Drawer.vue

@@ -0,0 +1,176 @@
+<template>
+    <tnxtdm-popup
+        class="tnxtdm-drawer"
+        v-model="visible"
+        :placement="placement"
+        :title="title"
+        @closed="onClosed"
+    >
+        <template #default>
+            <div class="tnxtdm-drawer-body">
+                <div v-if="content" v-html="content"></div>
+                <tnxtdm-drawer-content ref="content" v-bind="contentProps" v-else/>
+            </div>
+            <div class="tnxtdm-drawer-footer" v-if="buttons?.length">
+                <t-button v-for="(button, index) in buttons" :key="index" :theme="button.type || 'default'"
+                          :loading="buttonLoadings[index]" @click="btnClick(index)" block>
+                    {{ button.caption || button.text }}
+                </t-button>
+            </div>
+        </template>
+    </tnxtdm-popup>
+</template>
+
+<script>
+import DrawerContent from './DrawerContent.vue';
+import Popup from '../popup/Popup.vue';
+
+export default {
+    name: 'TnxtdmDrawer',
+    components: {
+        'tnxtdm-drawer-content': DrawerContent,
+        'tnxtdm-popup': Popup,
+    },
+    props: {
+        id: {
+            type: String,
+            default: () => window.tnx.util.string.uuid32(),
+        },
+        modelValue: Boolean,
+        container: String,
+        title: String,
+        content: String,
+        contentProps: Object,
+        buttons: Array,
+        theme: String,
+        placement: {
+            type: String, // 'top' | 'left' | 'right' | 'bottom' | 'center'
+            default: 'bottom', // 默认底部弹出
+        },
+    },
+    emits: ['update:modelValue', 'shown', 'closed'],
+    data() {
+        return {
+            visible: false,
+            initialized: false,
+            options: {
+                modal: true,
+                onShown: undefined,
+                onClosed: undefined,
+                beforeClose: undefined,
+            },
+            buttonLoadings: [],
+        };
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+        },
+        visible(val) {
+            if (this.initialized) {
+                this.$emit('update:modelValue', val);
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initialized = true;
+            this.visible = this.modelValue;
+            if (this.$refs.content && !this.$refs.content.close) {
+                this.$refs.content.close = () => {
+                    this.close();
+                }
+            }
+
+            if (typeof this.options.onShown === 'function') {
+                this.options.onShown.call(this);
+            } else {
+                this.$emit('shown');
+            }
+        });
+    },
+    methods: {
+        btnClick(index) {
+            const button = this.buttons[index];
+            if (button) {
+                let click = button.click;
+                if (typeof click === 'string') {
+                    if (typeof this.$refs.content[click] === 'function') {
+                        click = this.$refs.content[click];
+                    } else {
+                        console.error(`Method '${click}' not found in component:`, this.$refs.content);
+                        click = null;
+                    }
+                }
+
+                if (typeof click === 'function') {
+                    let result = click.call(this.$refs.content, this.close);
+                    if (result === 'loading') {
+                        this.buttonLoadings[index] = true;
+                        return;
+                    }
+                    if (result === false) {
+                        return;
+                    }
+                }
+            }
+            this.close();
+        },
+        close() {
+            return new Promise((resolve) => {
+                this.beforeClose(() => {
+                    const originalOnClosed = this.options.onClosed;
+                    this.options.onClosed = window.tnx.util.function.around(originalOnClosed, function (onClosed) {
+                        if (onClosed) {
+                            onClosed();
+                        }
+                        resolve();
+                    });
+                    this.visible = false;
+                });
+            });
+        },
+        beforeClose(done) {
+            try {
+                if (typeof this.options.beforeClose === 'function') {
+                    if (this.options.beforeClose.call(this.$refs.content) === false) {
+                        return;
+                    }
+                }
+                done();
+            } catch (e) {
+                console.error(e);
+            }
+        },
+        onClosed() {
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed.call(this.$refs.content);
+            } else {
+                this.$emit('closed');
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxtdm-drawer {
+    .tnxtdm-drawer-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px;
+    }
+
+    .tnxtdm-drawer-footer {
+        padding: 12px 1rem calc(12px + env(safe-area-inset-bottom, 0));
+        border-top: 1px solid var(--td-border-level-1-color);
+        display: flex;
+        flex-direction: row-reverse;
+
+        .t-button {
+            width: fit-content;
+            margin-left: 12px;
+        }
+    }
+}
+</style>

package/src/tdesign/mobile/drawer/DrawerContent.vue

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

package/src/tdesign/mobile/enum-select/EnumSelect.vue

@@ -0,0 +1,160 @@
+<template>
+    <tnxtdm-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"
+                   :width="width"
+                   :disabled="isDisabled"
+                   :filterable="filterable"
+                   :theme="theme"
+                   :size="size"
+                   :tag-click="tagClick"
+                   :change="change">
+        <template #option="{item}" v-if="$slots.option">
+            <slot name="option" :item="item"></slot>
+        </template>
+    </tnxtdm-select>
+</template>
+
+<script>
+import Select, {isMultiSelector} from '../select/Select.vue';
+
+export default {
+    name: 'TnxtdmEnumSelect',
+    components: {
+        'tnxtdm-select': Select,
+    },
+    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, Number, Boolean, Array],
+            default: '',
+        },
+        placeholder: String,
+        width: 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,
+            formDisabled: false,
+        };
+    },
+    computed: {
+        isDisabled() {
+            return this.disabled || this.formDisabled;
+        },
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+        },
+        modelValue() {
+            this.initModel();
+        },
+        type() {
+            this.init();
+        },
+        subtype() {
+            this.init();
+        }
+    },
+    mounted() {
+        this.init();
+        this.initFormDisabled();
+    },
+    methods: {
+        initFormDisabled() {
+            let parent = this.$parent;
+            while (parent) {
+                if (parent.$options && (parent.$options.name === 't-form' || parent.$options.name === 'TForm')) {
+                    this.$watch(() => parent.disabled || (parent.$props && parent.$props.disabled), (val) => {
+                        this.formDisabled = val;
+                    }, {immediate: true});
+                    break;
+                }
+                parent = parent.$parent;
+            }
+        },
+        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 {
+                    if (window.tnx && window.tnx.meta) {
+                        window.tnx.meta.resolveEnumItems(this.type, this.subtype).then((items) => {
+                            this.items = items;
+                            this.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;
+        },
+        disableItem(itemKey, disabled, reverseOther) {
+            if (this.$refs.select) {
+                this.$refs.select.disableItem(itemKey, disabled, reverseOther);
+            }
+        },
+    }
+}
+</script>
+
+<style>
+
+</style>

package/src/tdesign/mobile/popup/Popup.vue

@@ -0,0 +1,106 @@
+<template>
+    <slot name="trigger" :show="open" :visible="visible"></slot>
+    <t-popup
+        class="tnxtdm-popup"
+        v-model="visible"
+        :placement="placement"
+        :destroy-on-close="true"
+        v-bind="$attrs"
+    >
+        <div class="tnxtdm-popup-header" v-if="title || $slots.left || $slots.right">
+            <div class="tnxtdm-popup-header-left">
+                <slot name="left">
+                    <t-icon name="blank" size="24px"/>
+                </slot>
+            </div>
+            <div class="tnxtdm-popup-header-title">
+                <slot name="title">{{ title }}</slot>
+            </div>
+            <div class="tnxtdm-popup-header-right">
+                <slot name="right">
+                    <t-icon class="text-placeholder" name="close" size="24px" @click="close"/>
+                </slot>
+            </div>
+        </div>
+        <div class="tnxtdm-popup-content">
+            <slot></slot>
+        </div>
+    </t-popup>
+</template>
+
+<script>
+export default {
+    name: 'TnxtdmPopup',
+    props: {
+        modelValue: Boolean,
+        title: String,
+        placement: {
+            type: String,
+            default: 'bottom',
+        },
+    },
+    data() {
+        return {
+            visible: false,
+        }
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+        },
+        visible(val) {
+            this.$emit('update:modelValue', val);
+        },
+    },
+    emits: ['update:modelValue', 'close'],
+    mounted() {
+        this.visible = this.modelValue;
+    },
+    methods: {
+        open() {
+            this.visible = true;
+        },
+        close() {
+            this.visible = false;
+            this.$emit('close');
+        },
+    },
+};
+</script>
+
+<style>
+.tnxtdm-popup {
+    border-radius: 12px 12px 0 0;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.tnxtdm-popup .tnxtdm-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 1rem;
+    border-bottom: 1px solid var(--td-border-level-1-color);
+}
+
+.tnxtdm-popup .tnxtdm-popup-header .tnxtdm-popup-header-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--td-text-color-primary);
+    flex: 1;
+    text-align: center;
+}
+
+.tnxtdm-popup .tnxtdm-popup-header .tnxtdm-popup-header-left,
+.tnxtdm-popup .tnxtdm-popup-header .tnxtdm-popup-header-right {
+    display: flex;
+    align-items: center;
+    min-width: 24px;
+}
+
+.tnxtdm-popup .tnxtdm-popup-content {
+    flex: 1;
+    overflow-y: auto;
+}
+</style>