@truenewx/tnxvue3 3.4.4 → 3.4.6

package/src/tdesign/mobile/calendar/Calendar.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="tnxtdm-calendar">
+        <div class="tnxtdm-calendar__value">{{ modelValue }}</div>
+        <div class="tnxtdm-calendar__icon" :style="{color: iconColor}" @click="visible = true">
+            <t-icon name="calendar-1"/>
+        </div>
+        <t-calendar
+            v-model:visible="visible"
+            :value="calendarValue"
+            type="single"
+            switch-mode="year-month"
+            :min-date="finalMinDate"
+            :max-date="finalMaxDate"
+            :title="title"
+            @confirm="confirm"
+        />
+    </div>
+</template>
+
+<script>
+const pattern = 'yyyy-MM-dd';
+
+function parseDate(val) {
+    if (!val) {
+        return undefined;
+    }
+    if (val instanceof Date) {
+        return val;
+    }
+    if (typeof val === 'number') {
+        return new Date(val);
+    }
+    if (typeof val === 'string') {
+        val = val.replace(/-/g, '/');
+    }
+    const d = new Date(val);
+    if (!isNaN(d.getTime())) {
+        return d;
+    }
+    return undefined;
+}
+
+export default {
+    name: 'TnxtdmCalendar',
+    props: {
+        modelValue: String,
+        title: String,
+        defaultValue: {
+            type: String,
+            default: () => {
+                return new Date().format(pattern);
+            },
+        },
+        minDate: {
+            type: [String, Number, Date],
+            default: '1900-01-01',
+        },
+        maxDate: {
+            type: [String, Number, Date],
+            default: '2099-12-31',
+        },
+        iconColor: String,
+    },
+    data() {
+        return {
+            visible: false,
+            calendarValue: parseDate(this.modelValue || this.defaultValue),
+        };
+    },
+    computed: {
+        finalMinDate() {
+            return parseDate(this.minDate);
+        },
+        finalMaxDate() {
+            return parseDate(this.maxDate);
+        },
+    },
+    emits: ['update:modelValue'],
+    watch: {
+        modelValue() {
+            this.init();
+        },
+        visible(val) {
+            if (val) {
+                this.init();
+            }
+        },
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            let value = this.modelValue || this.defaultValue;
+            this.calendarValue = parseDate(value);
+        },
+        confirm(val) {
+            let result = new Date(val).format(pattern);
+            this.$emit('update:modelValue', result);
+            this.visible = false;
+        },
+    },
+};
+</script>
+
+<style>
+.tnxtdm-calendar {
+    display: flex;
+    align-items: center;
+
+    .tnxtdm-calendar__value {
+        min-width: 95px;
+    }
+
+    .tnxtdm-calendar__icon {
+        display: flex;
+        align-items: center;
+        color: var(--td-text-color-primary);
+    }
+}
+</style>

package/src/tdesign/mobile/date-time-picker/DateTimePicker.vue

@@ -0,0 +1,147 @@
+<template>
+    <div class="tnxtdm-date-time-picker">
+        <div class="tnxtdm-date-time-picker__value" :data-mode="mode">{{ model }}</div>
+        <div class="tnxtdm-date-time-picker__icon" :style="{color: iconColor}" @click="visible = true">
+            <t-icon name="calendar-1"/>
+        </div>
+        <t-popup v-model="visible" placement="bottom">
+            <t-date-time-picker
+                v-model="pickerValue"
+                :format="format"
+                :mode="mode"
+                :title="title"
+                :start="getDateValue(start)"
+                :end="getDateValue(end)"
+                @confirm="confirm"
+                @cancel="visible = false"
+                v-if="visible"/>
+        </t-popup>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TnxtdmDateTimePicker',
+    props: {
+        modelValue: String,
+        title: String,
+        defaultValue: {
+            type: [String, Number],
+            default: () => {
+                return new Date().getTime();
+            },
+        },
+        mode: {
+            type: String,
+            default: 'date',
+        },
+        showCellTitle: Boolean,
+        start: {
+            type: [String, Number],
+            default: '1000-01-01 00:00:00',
+        },
+        end: {
+            type: [String, Number],
+            default: '9999-12-31 23:59:59',
+        },
+        iconColor: String,
+    },
+    data() {
+        return {
+            visible: false,
+            model: this.modelValue || '',
+            pickerValue: '',
+        };
+    },
+    computed: {
+        format() {
+            switch (this.mode) {
+                case 'year':
+                    return 'YYYY';
+                case 'month':
+                    return 'YYYY-MM';
+                case 'date':
+                    return 'YYYY-MM-DD';
+                case 'hour':
+                    return 'YYYY-MM-DD HH';
+                case 'minute':
+                    return 'YYYY-MM-DD HH:mm';
+                case 'second':
+                    return 'YYYY-MM-DD HH:mm:ss';
+            }
+            return undefined;
+        },
+        pattern() {
+            return this.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
+        },
+    },
+    emits: ['update:modelValue'],
+    watch: {
+        modelValue(val) {
+            this.model = val;
+        },
+        model(val) {
+            this.$emit('update:modelValue', val);
+        },
+        visible(val) {
+            if (val) {
+                this.pickerValue = this.model || this.getDateValue(this.defaultValue);
+            }
+        }
+    },
+    methods: {
+        getDateValue(date) {
+            if (date) {
+                return new Date(date).format(this.pattern);
+            }
+            return undefined;
+        },
+        confirm(value) {
+            this.model = String(value);
+            this.visible = false;
+        },
+    }
+}
+</script>
+
+<style>
+.tnxtdm-date-time-picker {
+    display: flex;
+    align-items: center;
+
+    .tnxtdm-date-time-picker__value {
+        display: flex;
+        align-items: center;
+
+        &[data-mode="year"] {
+            min-width: 44px;
+        }
+
+        &[data-mode="month"] {
+            min-width: 70px;
+        }
+
+        &[data-mode="date"] {
+            min-width: 95px;
+        }
+
+        &[data-mode="hour"] {
+            min-width: 119px;
+        }
+
+        &[data-mode="minute"] {
+            min-width: 141px;
+        }
+
+        &[data-mode="second"] {
+            min-width: 164px;
+        }
+    }
+
+    .tnxtdm-date-time-picker__icon {
+        display: flex;
+        align-items: center;
+        color: var(--td-text-color-primary);
+    }
+}
+</style>

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,197 @@
+<template>
+    <tnxtdm-popup
+        class="tnxtdm-drawer"
+        v-model="visible"
+        :placement="placement"
+        :title="title"
+        :style="popupStyle"
+        @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: [],
+        };
+    },
+    computed: {
+        popupStyle() {
+            const style = {};
+            if (this.options && this.options.width) {
+                style.width = this.options.width;
+            }
+            if (this.placement === 'left' || this.placement === 'right') {
+                style.height = '100vh';
+                style.maxHeight = '100vh';
+                style.borderRadius = '0';
+            }
+            return style;
+        },
+    },
+    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 {
+    width: 75%;
+
+    .tnxtdm-drawer-body {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .tnxtdm-popup-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .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>