@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/radio/radio.css

@@ -0,0 +1,177 @@
+.limit-title-row {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.t-radio {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  background: var(--td-radio-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-radio:focus {
+  outline: 0;
+}
+.t-radio--block {
+  display: flex;
+  padding: var(--td-radio-vertical-padding, 32rpx);
+}
+.t-radio--right {
+  flex-direction: row-reverse;
+}
+.t-radio__icon {
+  position: relative;
+  margin-top: calc((var(--td-radio-label-line-height, 48rpx) - var(--td-radio-icon-size, 48rpx)) / 2);
+  width: var(--td-radio-icon-size, 48rpx);
+  height: var(--td-radio-icon-size, 48rpx);
+  font-size: var(--td-radio-icon-size, 48rpx);
+  color: var(--td-radio-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  overflow: hidden;
+}
+.t-radio__icon:empty {
+  display: none;
+}
+.t-radio__icon--left {
+  margin-right: 16rpx;
+}
+.t-radio__icon--checked {
+  color: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-radio__icon--disabled {
+  cursor: not-allowed;
+  color: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-radio__icon-circle {
+  width: var(--td-radio-icon-size, 48rpx);
+  height: var(--td-radio-icon-size, 48rpx);
+  box-sizing: border-box;
+}
+.t-radio__icon-circle::after {
+  content: '';
+  width: calc(200% - 6rpx);
+  height: calc(200% - 6rpx);
+  border-radius: 50%;
+  border: 3px solid var(--td-radio-icon-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+  box-sizing: border-box;
+}
+.t-radio__icon-circle--disabled::after {
+  background: var(--td-radio-icon-disabled-bg-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+}
+.t-radio__icon-line::before,
+.t-radio__icon-line::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 5rpx;
+  border-radius: 2rpx;
+  background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  transform-origin: top center;
+}
+.t-radio__icon-line::before {
+  height: 16rpx;
+  left: 8rpx;
+  top: 22rpx;
+  transform: rotate(-45deg);
+}
+.t-radio__icon-line::after {
+  height: 26rpx;
+  right: 8rpx;
+  top: 14rpx;
+  transform: rotate(45deg);
+}
+.t-radio__icon-line--disabled::before,
+.t-radio__icon-line--disabled::after {
+  background: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-radio__icon-dot {
+  width: calc((var(--td-radio-icon-size, 48rpx) - 6rpx) * 2);
+  height: calc((var(--td-radio-icon-size, 48rpx) - 6rpx) * 2);
+  border: 6rpx solid var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.5);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-radio__icon-dot::after {
+  content: '';
+  display: block;
+  width: var(--td-radio-icon-size, 48rpx);
+  height: var(--td-radio-icon-size, 48rpx);
+  background: var(--td-radio-icon-checked-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-radius: 50%;
+}
+.t-radio__icon-dot--disabled {
+  border-color: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-radio__icon-dot--disabled::after {
+  background: var(--td-radio-icon-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-radio__image {
+  line-height: var(--td-radio-icon-size, 48rpx);
+}
+.t-radio-icon__image {
+  height: var(--td-radio-icon-size, 48rpx);
+  width: var(--td-radio-icon-size, 48rpx);
+  vertical-align: sub;
+}
+.t-radio__content {
+  flex: 1;
+}
+.t-radio__content:empty {
+  display: none;
+}
+.t-radio__title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--td-radio-label-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font: var(--td-radio-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-radio__title--checked {
+  color: var(--td-radio-label-checked-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-radio__title--disabled {
+  cursor: not-allowed;
+  color: var(--td-radio-label-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-radio__description {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--td-radio-content-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+  font: var(--td-radio-content-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-radio__description--checked {
+  color: var(--td-radio-content-checked-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+}
+.t-radio__description--disabled {
+  cursor: not-allowed;
+  color: var(--td-radio-content-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+}
+.t-radio__description:empty {
+  display: none;
+}
+.t-radio__title + .t-radio__description {
+  margin-top: 8rpx;
+}
+.t-radio__border {
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  background: var(--td-radio-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+  left: 96rpx;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-radio__border--right {
+  left: 32rpx;
+}

package/dist/radio/radio.vue

@@ -0,0 +1,227 @@
+<template>
+  <view
+    :id="tId"
+    :style="tools._style([customStyle])"
+    :class="tools.cls(classPrefix, [_placement, ['block', block], ['disabled', _disabled]]) + ' ' + tClass"
+    :disabled="_disabled"
+    aria-role="radio"
+    :aria-checked="dataChecked"
+    :aria-label="label + content"
+    :aria-disabled="_disabled"
+    @click.stop="handleTap"
+  >
+    <view :class="tools.cls(classPrefix + '__icon', [_placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon">
+      <slot
+        v-if="slotIcon"
+        name="icon"
+      />
+      <view
+        v-else-if="customIcon"
+        :class="classPrefix + '__image'"
+      >
+        <image
+          :src="dataChecked ? iconVal[0] : iconVal[1]"
+          :class="classPrefix + '-icon__image'"
+          webp
+        />
+      </view>
+      <block v-else>
+        <t-icon
+          v-if="dataChecked && (icon == 'circle' || icon == 'line')"
+          :name="icon == 'circle' ? 'check-circle-filled' : 'check'"
+          :class="classPrefix + '__icon-wrap'"
+        />
+        <view
+          v-if="dataChecked && icon == 'dot'"
+          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
+        />
+        <view
+          v-if="!dataChecked && (icon == 'circle' || icon == 'dot')"
+          :class="tools.cls(classPrefix + '__icon-circle', [['disabled', _disabled]])"
+        />
+        <view
+          v-if="!dataChecked && icon == 'line'"
+          class="placeholder"
+        />
+      </block>
+    </view>
+    <view
+      :class="classPrefix + '__content'"
+      data-target="text"
+      @click.stop="handleTap"
+    >
+      <view
+        :class="
+          tools.cls(classPrefix + '__title', [
+            ['disabled', _disabled],
+            ['checked', dataChecked]
+          ]) +
+            ' ' +
+            tClassLabel
+        "
+        :style="'-webkit-line-clamp:' + maxLabelRow"
+      >
+        <block v-if="label">
+          {{ label }}
+        </block>
+        <slot />
+        <slot name="label" />
+      </view>
+      <view
+        :class="
+          tools.cls(classPrefix + '__description', [
+            ['disabled', _disabled],
+            ['checked', dataChecked]
+          ]) +
+            ' ' +
+            tClassContent
+        "
+        :style="'-webkit-line-clamp:' + maxContentRow"
+      >
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+      </view>
+    </view>
+    <view
+      v-if="!borderless"
+      :class="tools.cls(classPrefix + '__border', [_placement]) + ' ' + tClassBorder"
+    />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
+import { coalesce } from '../common/utils';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-radio`;
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'checked',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-label`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-content`,
+    `${prefix}-class-border`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.Radio)],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    tId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      customIcon: false,
+      slotIcon: false,
+      optionLinked: false,
+      iconVal: [],
+      _placement: '',
+      _disabled: false,
+      _readonly: false,
+      tools,
+
+      dataChecked: coalesce(this.checked, this.defaultChecked),
+    };
+  },
+  computed: {
+    isIsolated() {
+      return this.relationKey === ISOLATED_RELATION_KEY;
+    },
+  },
+  watch: {
+    checked: {
+      handler(v) {
+        this.dataChecked = v;
+      },
+      immediate: true,
+    },
+    disabled: {
+      handler(v) {
+        this._disabled = v;
+      },
+      immediate: true,
+    },
+    readonly: {
+      handler(v) {
+        this._readonly = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    handleTap(e) {
+      const { _disabled, _readonly, contentDisabled } = this;
+      const { target } = e.currentTarget.dataset;
+
+      if (_disabled || _readonly || (target === 'text' && contentDisabled)) return;
+
+      this.doChange();
+    },
+    doChange() {
+      const { value, dataChecked, allowUncheck } = this;
+      const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
+
+      const isAllowUncheck = Boolean(allowUncheck || parent?.allowUncheck);
+
+      if (parent) {
+        this[RELATION_MAP.Radio].updateValue(dataChecked && isAllowUncheck ? null : value);
+      } else {
+        this._trigger('change', { checked: isAllowUncheck ? !dataChecked : true });
+      }
+    },
+    init() {
+      const { icon } = this;
+      const parent = this.isIsolated ? null : this[RELATION_MAP.Radio];
+      const isIdArr = Array.isArray(parent?.icon || icon);
+
+      this.customIcon = isIdArr;
+      this.slotIcon = icon === 'slot';
+      this.iconVal = isIdArr ? parent?.icon || icon : [];
+      this._placement = this.placement || parent?.placement || 'left';
+    },
+
+    setDisabled(disabled) {
+      if (this.isIsolated) return;
+
+      this._disabled = this.disabled || disabled;
+    },
+
+    setReadonly(readonly) {
+      this._readonly = this.readonly || readonly;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './radio.css';
+</style>

package/dist/radio/type.ts

@@ -0,0 +1,89 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdRadioProps<T = RadioValue> {
+  /**
+   * 是否允许取消选中
+   * @default false
+   */
+  allowUncheck?: boolean;
+  /**
+   * 是否为块级元素
+   * @default true
+   */
+  block?: boolean;
+  /**
+   * 是否选中
+   * @default false
+   */
+  checked?: boolean;
+  /**
+   * 是否选中，非受控属性
+   * @default false
+   */
+  defaultChecked?: boolean;
+  /**
+   * 单选内容
+   */
+  content?: string;
+  /**
+   * 是否禁用组件内容（content）触发选中
+   * @default false
+   */
+  contentDisabled?: boolean;
+  /**
+   * 是否为禁用态
+   */
+  disabled?: boolean;
+  /**
+   * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标]`。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标，值为 slot 时使用插槽
+   * @default 'circle'
+   */
+  icon?: 'circle' | 'line' | 'dot' | Array<string>;
+  /**
+   * 主文案
+   */
+  label?: string;
+  /**
+   * 内容最大行数限制
+   * @default 5
+   */
+  maxContentRow?: number;
+  /**
+   * 主文案最大行数限制
+   * @default 3
+   */
+  maxLabelRow?: number;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * -1 时代表独立，不再寻找 parent，用于头条小程序
+   * @default ''
+   */
+  relationKey?: string;
+  /**
+   * 单选按钮的值
+   * @default false
+   */
+  value?: T;
+  /**
+   * 值变化时触发
+   */
+  onChange?: (context: { checked: boolean }) => void;
+}
+
+export type RadioValue = string | number | boolean;

package/dist/radio-group/props.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRadioGroupProps } from './type';
+export default {
+  /** 是否允许取消选中 */
+  allowUncheck: Boolean,
+  /** 是否开启无边框模式 */
+  borderless: Boolean,
+  /** 是否禁用全部子单选框 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标；仅在使用 options 时生效 */
+  icon: {
+    type: [String, Array],
+    default: 'circle' as TdRadioGroupProps['icon'],
+  },
+  /** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** HTML 元素原生属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同 */
+  options: {
+    type: Array,
+  },
+  /** 复选框和内容相对位置。优先级低于 Radio.placement */
+  placement: {
+    type: String,
+    default: 'left' as TdRadioGroupProps['placement'],
+    validator(val: TdRadioGroupProps['placement']): boolean {
+      if (!val) return true;
+      return ['left', 'right'].includes(val);
+    },
+  },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** -1 时代表独立，不再寻找 parent，用于头条小程序 */
+  relationKey: {
+    type: String,
+    default: '',
+  },
+  /** 选中的值 */
+  value: {
+    type: [String, Number, Boolean],
+  },
+  /** 选中的值，非受控属性 */
+  defaultValue: {
+    type: [String, Number, Boolean],
+  },
+  /** 选中值发生变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};