@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/rate/rate.vue

@@ -0,0 +1,276 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="tools._style([customStyle])"
+  >
+    <view
+      :class="classPrefix + '__wrapper ' + tClass"
+      :style="'font-size:' + utils.regSize(size)"
+      aria-role="slider"
+      :aria-valuemax="count"
+      :aria-valuemin="0"
+      :aria-valuenow="dataValue"
+      :aria-valuetext="utils.getText(texts, dataValue, defaultTexts)"
+      @touchstart="parseEventDynamicCode($event, !disabled ? 'onTouchStart' : '')"
+      @touchmove="parseEventDynamicCode($event, !disabled ? 'onTouchMove' : '')"
+      @click="onTap"
+      @touchend="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+      @touchcancel="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+    >
+      <t-icon
+        v-for="(item, index) in count"
+        :key="index"
+        :t-class="classPrefix + '__icon ' + utils.getIconClass(classPrefix + '__icon', defaultValue, dataValue, index, allowHalf, disabled, scaleIndex) + ' ' + tClassIcon"
+        :custom-style="'margin-right: ' + (count - index > 1 ? tools.addUnit(gap) : 0) + '; ' + utils.getColor(color)"
+        :name="utils.getIconName(defaultValue, dataValue, index, icon)"
+        :size="size"
+        :prefix="iconPrefix"
+      />
+    </view>
+    <text
+      v-if="showText"
+      :class="tools.cls(classPrefix + '__text', [['active', dataValue > 0]]) + ' ' + tClassText"
+      :aria-hidden="true"
+    >
+      {{ utils.getText(texts, dataValue, defaultTexts) }}
+    </text>
+    <text
+      v-if="isVisibleToScreenReader"
+      :class="
+        tools.cls(classPrefix + '__text', [
+          ['active', dataValue > 0],
+          ['sr-only', isVisibleToScreenReader]
+        ]) +
+          ' ' +
+          tClassText
+      "
+      aria-role="alert"
+      aria-live="assertive"
+    >
+      {{ dataValue + '星' }} {{ utils.getText(texts, dataValue, defaultTexts) }}
+    </text>
+    <!-- TODO -->
+    <view
+      v-if="tipsVisible && placement"
+      :class="tools.cls(classPrefix + '__tips', [placement])"
+      :style="'left: ' + tipsLeft + 'px'"
+      :aria-hidden="true"
+    >
+      <block v-if="actionType == 'tap'">
+        <view
+          v-if="allowHalf"
+          :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) - 0.5 == dataValue]])"
+          :data-value="utils.ceil(dataValue) - 0.5"
+          @click="onSelect"
+        >
+          <t-icon
+            :t-class="classPrefix + '__icon ' + classPrefix + '__icon--selected-half'"
+            :name="utils.getIconName(defaultValue, dataValue, 0, icon)"
+            :size="size"
+            :custom-style="utils.getColor(color)"
+          />
+          <view :class="classPrefix + '__tips-text'">
+            {{ utils.ceil(dataValue) - 0.5 }}
+          </view>
+        </view>
+        <view
+          :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue]])"
+          :data-value="utils.ceil(dataValue)"
+          @click="onSelect"
+        >
+          <t-icon
+            :t-class="tools.cls(classPrefix + '__icon', ['selected'])"
+            :name="utils.getIconName(defaultValue, 0, 0, icon)"
+            :size="size"
+            :custom-style="utils.getColor(color)"
+          />
+          <view :class="classPrefix + '__tips-text'">
+            {{ utils.ceil(dataValue) }}
+          </view>
+        </view>
+      </block>
+      <view
+        v-else
+        :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue && actionType == 'tap']])"
+        :data-value="utils.ceil(dataValue)"
+        @click="onSelect"
+      >
+        <t-icon
+          :t-class="
+            tools.cls(classPrefix + '__icon', [
+              ['selected', utils.ceil(dataValue) == dataValue],
+              ['selected-half', utils.ceil(dataValue) != dataValue]
+            ])
+          "
+          :name="utils.getIconName(defaultValue, 0, 0, icon)"
+          :size="size"
+          :custom-style="utils.getColor(color)"
+        />
+        <view :class="classPrefix + '__tips-text'">
+          {{ dataValue }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { unitConvert, getRect, coalesce } from '../common/utils';
+import tools from '../common/utils.wxs';
+import utils from './computed.js';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+
+const name = `${prefix}-rate`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
+      tipsVisible: false,
+      tipsLeft: 0,
+      actionType: '',
+      scaleIndex: -1,
+      isVisibleToScreenReader: false,
+
+      tools,
+      utils,
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    parseEventDynamicCode,
+    onTouch(e, eventType) {
+      const { count, allowHalf, gap, dataValue: currentValue, size } = this;
+      let touch = e.changedTouches?.[0];
+      // #ifdef MP-ALIPAY
+      if (eventType === 'tap') {
+        touch = e.target;
+      }
+      // #endif
+      const margin = unitConvert(gap);
+      getRect(this, `.${name}__wrapper`).then((rect) => {
+        const { width, left } = rect;
+        const starWidth = (width - (count - 1) * margin) / count;
+        const offsetX = touch.pageX - left;
+        const num = (offsetX + margin) / (starWidth + margin);
+        const remainder = num % 1;
+        const integral = num - remainder;
+        let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
+
+        if (value > count) {
+          value = count;
+        } else if (value < 0) {
+          value = 0;
+        }
+
+        const tipsLeft = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
+        this.tipsVisible = true;
+        this.actionType = eventType;
+        this.scaleIndex = Math.ceil(value);
+        this.tipsLeft = Math.max(tipsLeft, 0);
+
+        if (value !== currentValue) {
+          this.innerTrigger(value);
+        }
+
+        if (this.touchEnd) {
+          this.hideTips();
+        }
+      });
+    },
+    innerTrigger(value) {
+      this._trigger('change', { value });
+      if (this._selfControlled) {
+        this.currentValue = value;
+      }
+    },
+    onTap(e) {
+      const { disabled } = this;
+      if (disabled) return;
+      this.onTouch(e, 'tap');
+    },
+    onTouchStart() {
+      this.touchEnd = false;
+    },
+    onTouchMove(e) {
+      this.onTouch(e, 'move');
+      this.showAlertText();
+    },
+    onTouchEnd() {
+      this.touchEnd = true;
+      this.hideTips();
+    },
+    hideTips() {
+      if (this.actionType === 'move') {
+        this.tipsVisible = false;
+        this.scaleIndex = -1;
+      }
+    },
+    onSelect(e) {
+      const { value } = e.currentTarget.dataset;
+      const { actionType } = this;
+
+      if (actionType === 'move') return;
+
+      this.innerTrigger(value);
+
+      setTimeout(() => {
+        this.tipsVisible = false;
+        this.scaleIndex = -1;
+      }, 300);
+    },
+    // 旁白模式: 变更数值时显示告警文案
+    showAlertText() {
+      if (this.isVisibleToScreenReader === true) return;
+      this.isVisibleToScreenReader = true;
+
+      setTimeout(() => {
+        this.isVisibleToScreenReader = false;
+      }, 2e3);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './rate.css';
+</style>

package/dist/rate/type.ts

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

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

@@ -0,0 +1,47 @@
+:: BASE_DOC ::
+
+## API
+
+### Result Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+description | String | - | \- | N
+icon | String / Boolean / Object | true | \- | N
+image | String | - | \- | N
+theme | String | default | options: default/success/warning/error | N
+title | String | '' | \- | N
+
+### Result Slots
+
+name | Description
+-- | --
+description | \-
+image | \-
+title | \-
+
+### Result External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-description | \-
+t-class-image | \-
+t-class-title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-result-description-color | @text-color-secondary | -
+--td-result-description-font | @font-body-medium | -
+--td-result-description-margin-top | @spacer | -
+--td-result-icon-default-color | @brand-color | -
+--td-result-icon-error-color | @error-color | -
+--td-result-icon-success-color | @success-color | -
+--td-result-icon-warning-color | @warning-color | -
+--td-result-title-color | @text-color-primary | -
+--td-result-title-font | @font-title-extraLarge | -
+--td-result-title-margin-top | @spacer-1 | -

package/dist/result/README.md

@@ -0,0 +1,88 @@
+---
+title: Result 结果
+description: 反馈结果状态。
+spline: data
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TResult from '@tdesign/uniapp/result/result.vue';
+```
+
+### 组件类型
+
+基础结果
+
+{{ theme }}
+
+带描述的结果
+
+{{ description }}
+
+自定义结果
+
+{{ custom }}
+
+## 常见问题
+
+<details>
+  <summary>
+    本地图片无法正确引用?
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
+  </p>
+</details>
+
+## API
+
+### Result Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+description | String | - | 描述文字 | N
+icon | String / Boolean / Object | true | 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 | N
+image | String | - | 图片地址 | N
+theme | String | default | 内置主题。可选项：default/success/warning/error | N
+title | String | '' | 标题 | N
+
+### Result Slots
+
+名称 | 描述
+-- | --
+description | 自定义 `description` 显示内容
+image | 自定义 `image` 显示内容
+title | 自定义 `title` 显示内容
+
+### Result External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+t-class-title | 标题样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-result-description-color | @text-color-secondary | -
+--td-result-description-font | @font-body-medium | -
+--td-result-description-margin-top | @spacer | -
+--td-result-icon-default-color | @brand-color | -
+--td-result-icon-error-color | @error-color | -
+--td-result-icon-success-color | @success-color | -
+--td-result-icon-warning-color | @warning-color | -
+--td-result-title-color | @text-color-primary | -
+--td-result-title-font | @font-title-extraLarge | -
+--td-result-title-margin-top | @spacer-1 | -

package/dist/result/props.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdResultProps } from './type';
+export default {
+  /** 描述文字 */
+  description: {
+    type: String,
+  },
+  /** 图标名称。值为字符串表示图标名称，值为 `false` 表示不显示图标，值为 `Object` 类型，表示透传至 `icon`，不传表示使用主题图标 */
+  icon: {
+    type: [String, Boolean, Object],
+    default: true as TdResultProps['icon'],
+  },
+  /** 图片地址 */
+  image: {
+    type: String,
+  },
+  /** 内置主题 */
+  theme: {
+    type: String,
+    default: 'default' as TdResultProps['theme'],
+    validator(val: TdResultProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'success', 'warning', 'error'].includes(val);
+    },
+  },
+  /** 标题 */
+  title: {
+    type: String,
+    default: '' as TdResultProps['title'],
+  },
+};

package/dist/result/result.css

@@ -0,0 +1,35 @@
+.t-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+:deep(.t-result__icon) {
+  font-size: 160rpx;
+}
+.t-result__title {
+  font: var(--td-result-title-font, var(--td-font-title-extraLarge, 600 40rpx / 56rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  color: var(--td-result-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+}
+.t-result__thumb:not(:empty) + .t-result__title:not(:empty) {
+  margin-top: var(--td-result-title-margin-top, var(--td-spacer-1, 24rpx));
+}
+.t-result__description {
+  text-align: center;
+  color: var(--td-result-description-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6))));
+  font: var(--td-result-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-result__title + .t-result__description:not(:empty) {
+  margin-top: var(--td-result-description-margin-top, var(--td-spacer, 16rpx));
+}
+.t-result--theme-default {
+  color: var(--td-result-icon-default-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-result--theme-success {
+  color: var(--td-result-icon-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
+}
+.t-result--theme-warning {
+  color: var(--td-result-icon-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+}
+.t-result--theme-error {
+  color: var(--td-result-icon-error-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}

package/dist/result/result.vue

@@ -0,0 +1,128 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="[
+      classPrefix + ' ' + classPrefix + '--theme-' + theme,
+      tClass
+    ]"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__thumb'"
+    >
+      <t-image
+        v-if="image"
+        :t-class="tClassImage"
+        :src="image"
+        mode="aspectFit"
+      />
+      <block
+        v-else-if="_icon"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="_icon.style || ''"
+          :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ')"
+          :prefix="_icon.prefix"
+          :name="_icon.name"
+          :size="_icon.size"
+          :color="_icon.color"
+          :aria-hidden="!!_icon.ariaHidden"
+          :aria-label="_icon.ariaLabel"
+          :aria-role="_icon.ariaRole"
+        />
+      </block>
+      <slot name="image" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__title ',
+        tClassTitle
+      ]"
+    >
+      <block v-if="title">
+        {{ title }}
+      </block>
+      <slot name="title" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__description ',
+        tClassDescription
+      ]"
+    >
+      <block v-if="description">
+        {{ description }}
+      </block>
+      <slot name="description" />
+    </view>
+  </view>
+</template>
+
+<script>
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { calcIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-result`;
+const THEME_ICON = {
+  default: 'error-circle',
+  success: 'check-circle',
+  warning: 'error-circle',
+  error: 'close-circle',
+};
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-image`,
+    `${prefix}-class-title`,
+    `${prefix}-class-description`,
+  ],
+  components: {
+    TIcon,
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      tools,
+
+      _icon: null,
+    };
+  },
+  watch: {
+    icon: 'initIcon',
+    theme: 'initIcon',
+  },
+  mounted() {
+    this.initIcon();
+  },
+  methods: {
+    initIcon() {
+      const {
+        icon,
+        theme,
+      } = this;
+      this._icon = calcIcon(icon, THEME_ICON[theme]);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './result.css';
+</style>