@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/radio-group/radio-group.vue

@@ -0,0 +1,205 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+    aria-role="radiogroup"
+  >
+    <slot />
+    <t-radio
+      v-for="(item, index) in radioOptions"
+      :key="index"
+      :ref="prefix + '-radio-option'"
+      :class="prefix + '-radio-option'"
+      :data-index="index"
+      :data-value="item.value"
+      :data-allow-uncheck="item.allowUncheck || allowUncheck"
+      :block="item.block || true"
+      :label="item.label || ''"
+      :value="item.value"
+      :checked="item.checked || false"
+      :content="item.content || ''"
+      :allow-uncheck="item.allowUncheck || allowUncheck"
+      :content-disabled="item.contentDisabled || false"
+      :readonly="item.readonly || false"
+      :disabled="item.disabled || false"
+      :icon="item.icon || icon"
+      :placement="item.placement || placement"
+      :max-content-row="item.maxContentRow || 5"
+      :max-label-row="item.maxLabelRow || 3"
+      :name="item.name || ''"
+      :borderless="borderless"
+      :relation-key="relationKey"
+      @change="handleRadioChange($event, { index, value: item.value, allowUncheck: item.allowUncheck || allowUncheck })"
+    />
+  </view>
+</template>
+<script>
+import TRadio from '../radio/radio';
+import { prefix } 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 { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-radio-group`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  inject: {
+    [RELATION_MAP.FormKey]: {
+      default: null,
+    },
+  },
+  mixins: [ParentMixin(RELATION_MAP.Radio)],
+  components: {
+    TRadio,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      radioOptions: [],
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+    dataValue: {
+      handler(v) {
+        this.getChildren()?.forEach((item) => {
+          item.dataChecked = v === item.value;
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+    options: {
+      handler() {
+        this.initWithOptions();
+      },
+      immediate: true,
+      deep: true,
+    },
+    disabled: {
+      handler(v) {
+        if (this.options?.length) {
+          this.initWithOptions();
+          return;
+        }
+        this.getChildren()?.forEach((item) => {
+          item.setDisabled(v);
+        });
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      this.getChildren()?.forEach((item) => {
+        item.dataChecked = this.dataValue === item.value;
+        item.setDisabled(this.disabled);
+      });
+    }, 33);
+  },
+  methods: {
+    innerAfterLinked(target) {
+      const { value, disabled, readonly } = this;
+      target.dataChecked = value === target.value;
+
+      target.setDisabled(disabled);
+      target.setReadonly(readonly);
+    },
+    getChildren() {
+      let items = this.children;
+
+      if (!items?.length) {
+        items = this.$refs[`.${prefix}-radio-option`];
+      }
+
+      return items;
+    },
+
+    updateValue(value) {
+      this._trigger('change', { value });
+
+      this.onChange(value);
+    },
+
+    handleRadioChange(tools, { value, index, allowUncheck, checked }) {
+      this._trigger('change', checked === false && allowUncheck ? { value: null, index } : { value, index });
+    },
+
+    onChange(value) {
+      if (this[RELATION_MAP.FormKey]
+        && this[RELATION_MAP.FormKey].onValueChange) {
+        this[RELATION_MAP.FormKey].onValueChange(value);
+      }
+    },
+
+    // 支持自定义options
+    initWithOptions() {
+      const { options, value, keys, disabled, readonly } = this;
+      // 数字数组｜字符串数组｜对像数组
+      if (!options?.length || !Array.isArray(options)) {
+        this.radioOptions = [];
+        return;
+      }
+      const optionsValue = [];
+      try {
+        options.forEach((element) => {
+          const typeName = typeof element;
+          if (typeName === 'number' || typeName === 'string') {
+            optionsValue.push({
+              label: `${element}`,
+              value: element,
+              checked: value === element,
+              disabled,
+              readonly,
+            });
+          } else if (typeName === 'object') {
+            optionsValue.push({
+              ...element,
+              label: element[coalesce(keys?.label, 'label')],
+              value: element[coalesce(keys?.value, 'value')],
+              checked: value === element[coalesce(keys?.value, 'value')],
+              disabled: element.disabled || disabled,
+              readonly: element.readonly || readonly,
+            });
+          }
+        });
+        this.radioOptions = optionsValue;
+      } catch (error) {
+
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+</style>

package/dist/radio-group/type.ts

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

package/dist/rate/README.en-US.md

@@ -0,0 +1,50 @@
+:: BASE_DOC ::
+
+## API
+
+### Rate Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-half | Boolean | false | \- | N
+color | String / Array | '#ED7B2F' | Typescript：`string \| Array<string>` | N
+count | Number | 5 | \- | N
+disabled | Boolean | undefined | \- | N
+gap | String / Number | 8 | \- | N
+icon | String / Array | - | Typescript：`string \| string[]` | N
+icon-prefix | String | undefined | \- | N
+placement | String | top | options: top / bottom / '' | N
+show-text | Boolean | false | \- | N
+size | String / Number | '24px' | \- | N
+texts | Array | [] | Typescript：`Array<string>` | N
+value | Number | 0 | `v-model:value` is supported | N
+default-value | Number | 0 | uncontrolled property | N
+variant | String | outline | options: outline/filled | N
+
+### Rate Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number })` | \-
+
+### Rate External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | -
+--td-rate-selected-color | @warning-color | -
+--td-rate-text-active-color | @text-color-primary | -
+--td-rate-text-active-font-weight | 600 | -
+--td-rate-text-color | @text-color-disabled | -
+--td-rate-text-font-size | @font-size-m | -
+--td-rate-unselected-color | @component-border | -

package/dist/rate/README.md

@@ -0,0 +1,107 @@
+---
+title: Rate 评分
+description: 用于对某行为/事物进行打分。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TRate from '@tdesign/uniapp/rate/rate.vue';
+```
+
+### 组件类型
+
+实心评分
+
+{{ base }}
+
+自定义评分
+
+{{ custom }}
+
+自定义评分数量
+
+{{ count }}
+
+带描述评分
+
+{{ show-text }}
+
+### 组件状态
+
+{{ action }}
+
+### 组件样式
+
+评分大小
+
+{{ size }}
+
+设置评分颜色
+
+{{ color }}
+
+### 特殊样式
+
+竖向带描述评分
+
+{{ special }}
+
+自定义图片前缀
+
+{{iconPrefix}}
+
+
+## API
+
+### Rate Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-half | Boolean | false | 是否允许半选 | N
+color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
+count | Number | 5 | 评分的数量 | N
+disabled | Boolean | undefined | 是否禁用评分 | N
+gap | String / Number | 8 | 评分图标的间距 | N
+icon | String / Array | - | 自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
+icon-prefix | String | undefined | 定义图标前缀 | N
+placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹框。可选项：top / bottom / '' | N
+show-text | Boolean | false | 是否显示对应的辅助文字 | N
+size | String / Number | '24px' | 评分图标的大小 | N
+texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
+value | Number | 0 | 选择评分的值。支持语法糖 `v-model:value` | N
+default-value | Number | 0 | 选择评分的值。非受控属性 | N
+variant | String | outline | 已废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+
+### Rate Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number })` | 评分数改变时触发
+
+### Rate External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | -
+--td-rate-selected-color | @warning-color | -
+--td-rate-text-active-color | @text-color-primary | -
+--td-rate-text-active-font-weight | 600 | -
+--td-rate-text-color | @text-color-disabled | -
+--td-rate-text-font-size | @font-size-m | -
+--td-rate-unselected-color | @component-border | -

package/dist/rate/computed.js

@@ -0,0 +1,66 @@
+export default {
+  getText(texts, val, defaultTexts) {
+    if (!texts.length) {
+      texts = defaultTexts;
+    }
+    const curVal = Math.floor(val - 1);
+    return texts[curVal] || '未评分';
+  },
+
+  getIconName(defaultValue, value, index, icon) {
+    const curVal = value >= 0 ? value : defaultValue;
+    let name = ['star-filled', 'star-filled'];
+
+    if (icon) {
+      name = Array.isArray(icon) ? icon : [icon, icon];
+    }
+
+    return name[curVal >= index + 1 ? 0 : 1];
+  },
+
+  getIconClass(classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
+    const curVal = value >= 0 ? value : defaultValue;
+    const className = [];
+    if (curVal >= index + 1) {
+      className.push(`${classPrefix}--selected`);
+      if (disabled) {
+        className.push(`${classPrefix}--disabled`);
+      }
+      if (scaleIndex === index + 1) {
+        className.push(`${classPrefix}--current`);
+      }
+    } else if (allowHalf && curVal - index > 0) {
+      className.push(`${classPrefix}--selected-half`);
+      if (scaleIndex === index + 1) {
+        className.push(`${classPrefix}--current`);
+      }
+      if (disabled) {
+        className.push(`${classPrefix}--disabled-half`);
+      }
+    } else {
+      className.push(`${classPrefix}--unselected`);
+    }
+    return className.join(' ');
+  },
+
+  ceil(value) {
+    return Math.ceil(value);
+  },
+
+  getColor(color) {
+    if (Array.isArray(color) && color.length === 2) {
+      return `;--td-rate-selected-color: ${color[0]}; --td-rate-unselected-color: ${color[1]}`;
+    }
+
+    if (typeof color === 'string') {
+      return `;--td-rate-selected-color: ${color}`;
+    }
+
+    return '';
+  },
+
+  regSize(val) {
+    const value = `${val}`;
+    return value.indexOf('px') ? value : `${value}px`;
+  },
+};

package/dist/rate/props.ts

@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRateProps } from './type';
+export default {
+  /** 是否允许半选 */
+  allowHalf: Boolean,
+  /** 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB'] */
+  color: {
+    type: [String, Array],
+    default: '#ED7B2F' as TdRateProps['color'],
+  },
+  /** 评分的数量 */
+  count: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否禁用评分 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 评分图标的间距 */
+  gap: {
+    type: [String, Number],
+    default: 8 as TdRateProps['gap'],
+  },
+  /** 自定义评分图标，[选中图标，未选中图标] */
+  icon: {
+    type: [String, Array],
+  },
+  /** 定义图标前缀 */
+  iconPrefix: {
+    type: String,
+    default: undefined,
+  },
+  /** 选择评分弹框的位置，值为空字符表示不显示评分弹框 */
+  placement: {
+    type: String,
+    default: 'top' as TdRateProps['placement'],
+    validator(val: TdRateProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'bottom', ''].includes(val);
+    },
+  },
+  /** 是否显示对应的辅助文字 */
+  showText: Boolean,
+  /** 评分图标的大小 */
+  size: {
+    type: [String, Number],
+    default: '24px' as TdRateProps['size'],
+  },
+  /** 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分'] */
+  texts: {
+    type: Array,
+    default: (): TdRateProps['texts'] => [],
+  },
+  /** 选择评分的值 */
+  value: {
+    type: Number,
+    default: 0,
+  },
+  /** 选择评分的值，非受控属性 */
+  defaultValue: {
+    type: Number,
+    default: 0,
+  },
+  /** 已废弃。形状类型，有描边类型和填充类型两种 */
+  variant: {
+    type: String,
+    default: 'outline' as TdRateProps['variant'],
+    validator(val: TdRateProps['variant']): boolean {
+      if (!val) return true;
+      return ['outline', 'filled'].includes(val);
+    },
+  },
+  /** 评分数改变时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/rate/rate.css

@@ -0,0 +1,81 @@
+.t-rate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.t-rate__wrapper {
+  line-height: 1em;
+  display: inline-flex;
+}
+:deep(.t-rate__icon) {
+  display: block;
+  line-height: 1em;
+  width: 1em;
+  transition: transform 0.3s ease;
+}
+:deep(.t-rate__icon)--current {
+  transform: scale(var(--td-rate-icon-scale, 1.33));
+}
+:deep(.t-rate__icon)--selected {
+  color: var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+}
+:deep(.t-rate__icon)--selected-half {
+  color: transparent;
+  background: linear-gradient(to right, var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #e37318))) 0%, var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #e37318))) 50%, var(--td-rate-unselected-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))) 51%, var(--td-rate-unselected-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+:deep(.t-rate__icon)--unselected {
+  color: var(--td-rate-unselected-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-rate__text {
+  font-size: var(--td-rate-text-font-size, var(--td-font-size-m, 32rpx));
+  color: var(--td-rate-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  margin-left: 32rpx;
+  vertical-align: middle;
+}
+.t-rate__text--active {
+  color: var(--td-rate-text-active-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font-weight: var(--td-rate-text-active-font-weight, 600);
+}
+.t-rate__text--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+.t-rate__tips {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: calc(100% + 16rpx);
+  padding: 8rpx;
+  border-radius: 12rpx;
+  box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  transform: translateX(-50%);
+}
+.t-rate__tips--bottom {
+  top: calc(100% + 16rpx);
+  bottom: auto;
+}
+.t-rate__tips-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 64rpx;
+  border-radius: 6rpx;
+}
+.t-rate__tips-item--active {
+  background-color: var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7));
+}
+.t-rate__tips-text {
+  text-align: center;
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}