@truenewx/tnxvue3 3.4.4 → 3.4.6

package/src/tdesign/mobile/slide-radio-group/SlideRadioGroup.vue

@@ -0,0 +1,397 @@
+<template>
+    <div :class="containerClasses" :style="containerStyle" v-if="normalizedItems.length">
+        <div class="tnxtdm-slide-radio-group__glider" :style="gliderStyle"></div>
+        <div v-for="(item, index) in normalizedItems"
+             :key="item.value"
+             class="tnxtdm-slide-radio-group__item"
+             :class="{'is-active': modelValue === item.value}"
+             :data-key="item.key"
+             @click="onItemClick(item.value)"
+             :ref="el => { if (el) itemRefs[index] = el }">
+            <t-icon class="tnxtdm-slide-radio-group__item-icon" :name="item.icon" size="1rem" v-if="item.icon"/>
+            <span class="tnxtdm-slide-radio-group__item-text">{{ item.text }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TnxtdmSlideRadioGroup',
+    props: {
+        modelValue: [String, Number, Boolean],
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        size: {
+            type: String,
+            default: 'medium',
+            validator: (value) => ['small', 'medium', 'large'].includes(value),
+        },
+        shape: {
+            type: String,
+            default: 'rectangle',
+            validator: (value) => ['capsule', 'rectangle'].includes(value),
+        },
+        theme: {
+            type: String,
+            default: 'default',
+        },
+        valueName: {
+            type: String,
+            default: 'value',
+        },
+        textName: {
+            type: String,
+            default: 'text',
+        },
+        iconName: {
+            type: String,
+            default: 'icon',
+        },
+        defaultValue: {
+            type: [String, Number, Boolean],
+            default: undefined,
+        },
+        width: {
+            type: String,
+            default: 'auto',
+        },
+        disabled: Boolean,
+    },
+    emits: ['update:modelValue', 'change'],
+    data() {
+        return {
+            gliderStyle: {
+                width: '0px',
+                transform: 'translateX(0px)',
+            },
+            formDisabled: false,
+        };
+    },
+    computed: {
+        isDisabled() {
+            return this.disabled || this.formDisabled;
+        },
+        normalizedItems() {
+            if (!this.items) {
+                return [];
+            }
+            return this.items.map(item => {
+                if (typeof item === 'object' && item !== null) {
+                    return {
+                        text: item[this.textName],
+                        value: item[this.valueName],
+                        icon: item[this.iconName],
+                    };
+                }
+                return {
+                    text: String(item),
+                    value: item,
+                };
+            });
+        },
+        currentValue: {
+            get() {
+                return this.modelValue;
+            },
+            set(val) {
+                this.$emit('update:modelValue', val);
+                let selectedItem = val;
+                if (this.items && this.items.length > 0) {
+                    const index = this.normalizedItems.findIndex(item => item.value === val);
+                    if (index !== -1) {
+                        selectedItem = this.items[index];
+                    }
+                }
+                this.$emit('change', selectedItem);
+            }
+        },
+        containerClasses() {
+            return [
+                'tnxtdm-slide-radio-group',
+                `tnxtdm-slide-radio-group--${this.shape}`,
+                `tnxtdm-slide-radio-group--${this.size}`,
+                `tnxtdm-slide-radio-group--theme-${this.theme}`,
+                {
+                    'tnxtdm-slide-radio-group--fixed': !['auto', 'fit-content'].includes(this.width),
+                    'tnxtdm-slide-radio-group--disabled': this.isDisabled,
+                }
+            ];
+        },
+        containerStyle() {
+            if (['auto', 'fit-content'].includes(this.width)) {
+                return {};
+            }
+            return {
+                width: this.width,
+            };
+        },
+    },
+    watch: {
+        modelValue: {
+            handler() {
+                this.ensureValue(); // 监听 modelValue 变化，确保其有效
+                this.$nextTick(this.updateGlider);
+            },
+            immediate: true,
+        },
+        items: {
+            handler() {
+                this.itemRefs = [];
+                this.ensureValue();
+                this.$nextTick(() => {
+                    this.setupObserver();
+                    this.updateGlider();
+                });
+            },
+            deep: true,
+            immediate: true, // items 初始化时也需要检查
+        },
+    },
+    mounted() {
+        this.updateGlider();
+        window.addEventListener('resize', this.updateGlider);
+        this.setupObserver();
+        // 兼容某些场景下初始渲染时宽度计算不准确的问题
+        setTimeout(this.updateGlider, 50);
+        setTimeout(this.updateGlider, 200);
+        this.initFormDisabled();
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.updateGlider);
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    },
+    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;
+            }
+        },
+        setupObserver() {
+            if (this.$el instanceof Element && typeof ResizeObserver !== 'undefined') {
+                if (!this.resizeObserver) {
+                    this.resizeObserver = new ResizeObserver(() => {
+                        this.updateGlider();
+                    });
+                }
+                this.resizeObserver.disconnect();
+                this.resizeObserver.observe(this.$el);
+            }
+        },
+        ensureValue() {
+            if (this.normalizedItems.length === 0) {
+                return;
+            }
+
+            const exists = this.normalizedItems.some(item => item.value === this.currentValue);
+            if (exists) {
+                return;
+            }
+
+            if (this.defaultValue !== undefined && this.defaultValue !== null) {
+                const defaultExists = this.normalizedItems.some(item => item.value === this.defaultValue);
+                if (defaultExists) {
+                    this.currentValue = this.defaultValue;
+                    return;
+                }
+            }
+
+            this.currentValue = this.normalizedItems[0].value;
+        },
+        onItemClick(value) {
+            if (this.isDisabled) {
+                return;
+            }
+            if (value !== this.currentValue) {
+                this.currentValue = value;
+            }
+        },
+        updateGlider() {
+            const index = this.normalizedItems.findIndex(item => item.value === this.currentValue);
+            if (index === -1 || !this.itemRefs[index]) {
+                this.gliderStyle = {
+                    width: '0px',
+                    opacity: 0,
+                    left: '4px',
+                };
+                return;
+            }
+
+            const el = this.itemRefs[index];
+            if (this.size === 'small') {
+                const inset = 1;
+                const width = Math.max(el.offsetWidth - inset * 2, 0);
+                this.gliderStyle = {
+                    width: `${width}px`,
+                    transform: `translateX(${el.offsetLeft}px)`,
+                    opacity: 1,
+                    left: `${inset}px`,
+                };
+            } else {
+                const container = this.$el;
+                const paddingLeft = container ? parseFloat(getComputedStyle(container).paddingLeft || '0') : 0;
+                const width = el.offsetWidth;
+                this.gliderStyle = {
+                    width: `${width}px`,
+                    transform: `translateX(${el.offsetLeft - paddingLeft}px)`,
+                    opacity: 1,
+                    left: `${paddingLeft}px`,
+                };
+            }
+        },
+    },
+}
+</script>
+
+<style>
+.tnxtdm-slide-radio-group {
+    position: relative;
+    display: flex;
+    background-color: var(--td-gray-color-1);
+    padding: 0 0.25rem;
+    box-sizing: border-box;
+    user-select: none;
+    width: fit-content;
+    border: 1px solid var(--td-gray-color-2);
+    height: 2rem;
+}
+
+.tnxtdm-slide-radio-group--capsule {
+    border-radius: var(--td-radius-round);
+}
+
+.tnxtdm-slide-radio-group--rectangle {
+    border-radius: var(--td-radius-default);
+}
+
+.tnxtdm-slide-radio-group--small {
+    height: 1.5rem;
+    padding: 0;
+}
+
+.tnxtdm-slide-radio-group--small.tnxtdm-slide-radio-group--rectangle {
+    border-radius: 4px;
+}
+
+.tnxtdm-slide-radio-group--small.tnxtdm-slide-radio-group--rectangle .tnxtdm-slide-radio-group__glider {
+    border-radius: 4px;
+}
+
+.tnxtdm-slide-radio-group--small .tnxtdm-slide-radio-group__glider {
+    top: 1px;
+    bottom: 1px;
+}
+
+.tnxtdm-slide-radio-group__item {
+    padding: 0 12px;
+    font-size: 12px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: normal;
+    color: var(--td-text-color-secondary);
+    cursor: pointer;
+    z-index: 1;
+    transition: color 0.2s;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.tnxtdm-slide-radio-group__item.is-active {
+    color: var(--td-text-color-primary);
+    font-weight: normal;
+}
+
+.tnxtdm-slide-radio-group--small .tnxtdm-slide-radio-group__item {
+    padding: 0 10px;
+    font-size: 10px;
+}
+
+.tnxtdm-slide-radio-group--medium .tnxtdm-slide-radio-group__glider {
+    top: 3px;
+    bottom: 3px;
+}
+
+.tnxtdm-slide-radio-group--large {
+    height: 2.5rem;
+    padding: 0 5px;
+}
+
+.tnxtdm-slide-radio-group--large .tnxtdm-slide-radio-group__item {
+    padding: 0 14px;
+    font-size: 14px;
+}
+
+.tnxtdm-slide-radio-group--large .tnxtdm-slide-radio-group__glider {
+    top: 5px;
+    bottom: 5px;
+}
+
+.tnxtdm-slide-radio-group--fixed .tnxtdm-slide-radio-group__item {
+    flex: 1;
+    white-space: normal;
+}
+
+.tnxtdm-slide-radio-group__glider {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 0.25rem; /* Default left, will be overridden by style binding */
+    background-color: var(--td-bg-color-container);
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    box-shadow: var(--td-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.1));
+    z-index: 0;
+}
+
+.tnxtdm-slide-radio-group--capsule .tnxtdm-slide-radio-group__glider {
+    border-radius: var(--td-radius-round);
+}
+
+.tnxtdm-slide-radio-group--rectangle .tnxtdm-slide-radio-group__glider {
+    border-radius: var(--td-radius-default);
+}
+
+.tnxtdm-slide-radio-group--theme-primary .tnxtdm-slide-radio-group__glider {
+    background-color: var(--td-brand-color);
+}
+
+.tnxtdm-slide-radio-group--theme-success .tnxtdm-slide-radio-group__glider {
+    background-color: var(--td-success-color);
+}
+
+.tnxtdm-slide-radio-group--theme-warning .tnxtdm-slide-radio-group__glider {
+    background-color: var(--td-warning-color);
+}
+
+.tnxtdm-slide-radio-group--theme-danger .tnxtdm-slide-radio-group__glider {
+    background-color: var(--td-error-color);
+}
+
+.tnxtdm-slide-radio-group--theme-primary .tnxtdm-slide-radio-group__item.is-active,
+.tnxtdm-slide-radio-group--theme-success .tnxtdm-slide-radio-group__item.is-active,
+.tnxtdm-slide-radio-group--theme-warning .tnxtdm-slide-radio-group__item.is-active,
+.tnxtdm-slide-radio-group--theme-danger .tnxtdm-slide-radio-group__item.is-active {
+    color: #ffffff;
+}
+
+.tnxtdm-slide-radio-group__item-icon {
+    margin-right: 4px;
+    font-size: 16px;
+}
+
+.tnxtdm-slide-radio-group--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+</style>

package/src/tdesign/mobile/tnxtdm.css

@@ -0,0 +1,125 @@
+/**
+ * tnxtdm.css
+ */
+:root {
+    --max-page-width: 442px; /* 手机像素的最大值，IPhone 17 Pro */
+    --td-tag-medium-padding: 1px 8px;
+    --td-tag-large-padding: 2px 10px;
+}
+
+.t-loading__gradient-conic {
+    transform: none !important;
+    transform-origin: 50% 50% !important;
+}
+
+.t-input.border {
+    padding: 11px 1rem;
+    border-radius: var(--td-radius-default);
+
+    &::after {
+        height: 0;
+    }
+}
+
+.t-input.bg {
+    padding: 12px 1rem;
+    border-radius: var(--td-radius-default);
+    background-color: var(--td-bg-color-page);
+
+    &::after {
+        height: 0;
+    }
+}
+
+.t-input.rounded {
+    border-radius: var(--td-radius-round);
+    padding: 0.75rem 1rem;
+}
+
+.t-input__control {
+    height: 24px;
+    padding-bottom: 2px;
+}
+
+.t-input__wrap--suffix {
+    border-left: 1px solid var(--td-border-level-2-color);
+    margin-left: var(--td-spacer-1, 12px);
+}
+
+/* 修复密码输入框占位符间距过大的问题 */
+.t-input__control[type="password"] {
+    letter-spacing: normal;
+}
+
+.t-input[size="small"] {
+    padding: 0.5rem 0.75rem;
+}
+
+.t-input[size="small"] .t-input__icon--prefix {
+    font-size: 20px;
+}
+
+.t-input[size="small"] .t-input__icon--prefix:not(:empty) + .t-input__label:empty {
+    margin-right: var(--td-spacer-1, 12px);
+}
+
+.t-input[size="small"] .t-input__control {
+    height: 20px;
+    font-size: 14px;
+}
+
+.t-dialog__body,
+.t-drawer__sidebar {
+    overflow-y: auto;
+}
+
+.t-dialog__header + .t-dialog__body {
+    margin-top: 1rem;
+}
+
+.t-drawer__sidebar-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.t-form__label--top {
+    padding-right: 0;
+}
+
+.t-popover__wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.t-button-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: var(--td-button-border-radius, var(--td-radius-default, 6px));
+}
+
+.t-button-group .t-button {
+    width: fit-content;
+}
+
+.t-button-group .t-button:first-child:not(:last-child),
+.t-button-group .t-button:first-child:not(:last-child)::after {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 1px solid var(--td-bg-color-component-active);
+}
+
+.t-button-group .t-button:last-child:not(:first-child),
+.t-button-group .t-button:last-child:not(:first-child)::after {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.t-dialog__body {
+    text-align: unset;
+}
+
+.t-image__img {
+    width: auto;
+}