@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/calendar/template.vue

@@ -0,0 +1,261 @@
+<template>
+  <view
+    :class="utils.cls(classPrefix, [['popup', usePopup]]) + ' ' + classPrefix + '-switch-mode--' + switchMode + ' ' + tClass"
+    :style="customStyle"
+  >
+    <view
+      :class="classPrefix + '__title'"
+      tabindex="0"
+    >
+      <slot name="title" />
+      <text v-if="title || realLocalText.title">
+        {{ title || realLocalText.title }}
+      </text>
+    </view>
+    <t-icon
+      v-if="usePopup"
+      name="close"
+      :t-class="classPrefix + '__close-btn'"
+      size="48rpx"
+      aria-role="button"
+      aria-label="关闭"
+      :custom-style="closeBtnCustomStyle"
+      @click="handleClose"
+    />
+    <block
+      v-if="switchMode !== 'none'"
+      name="calendar-header"
+    >
+      <calendar-header
+        :class-prefix="classPrefix + '-header'"
+        :switch-mode="switchMode"
+        :title="getMonthTitle(
+          currentMonth[0] && currentMonth[0].year,
+          realLocalText.months && currentMonth[0] && realLocalText.months[currentMonth[0].month],
+          realLocalText.monthTitle
+        )"
+        :pre-year-btn-disable="actionButtons.preYearBtnDisable"
+        :prev-month-btn-disable="actionButtons.prevMonthBtnDisable"
+        :next-year-btn-disable="actionButtons.nextYearBtnDisable"
+        :next-month-btn-disable="actionButtons.nextMonthBtnDisable"
+        @handleSwitchModeChange="handleSwitchModeChange"
+      />
+    </block>
+    <view
+      aria-hidden
+      :class="classPrefix + '__days'"
+    >
+      <view
+        v-for="(item, index) in days"
+        :key="index"
+        :class="classPrefix + '__days-item'"
+      >
+        {{ item }}
+      </view>
+    </view>
+    <scroll-view
+      :class="classPrefix + '__months'"
+      :scroll-into-view="scrollIntoView"
+      scroll-y
+      enhanced
+      :show-scrollbar="false"
+      @scroll="onScroll"
+    >
+      <block
+        v-for="(item, index) in switchMode === 'none' ? months : currentMonth"
+        :key="index"
+      >
+        <block
+          v-if="switchMode === 'none'"
+          name="calendar-header"
+        >
+          <calendar-header
+            :t-class="classPrefix + '__month'"
+            :class-prefix="classPrefix + '-header'"
+            :switch-mode="switchMode"
+            :t-id="'year_' + item.year + '_month_' + item.month"
+            :title="getMonthTitle(item.year, realLocalText.months && realLocalText.months[item.month], realLocalText.monthTitle)"
+            :pre-year-btn-disable="actionButtons.preYearBtnDisable"
+            :prev-month-btn-disable="actionButtons.prevMonthBtnDisable"
+            :next-year-btn-disable="actionButtons.nextYearBtnDisable"
+            :next-month-btn-disable="actionButtons.nextMonthBtnDisable"
+            @handleSwitchModeChange="handleSwitchModeChange"
+          />
+        </block>
+
+        <view :class="classPrefix + '__dates'">
+          <view
+            v-for="(item, index1) in (item.weekdayOfFirstDay - firstDayOfWeek + 7) % 7"
+            :key="index1"
+          />
+          <block
+            v-for="(dateItem, dateIndex) in item.months"
+            :key="dateIndex"
+          >
+            <view
+              :class="classPrefix + '__dates-item ' + dateItem.className + ' ' + classPrefix + '__dates-item--' + dateItem.type"
+              :data-year="item.year"
+              :data-month="item.month"
+              :data-date="dateItem"
+              aria-role="button"
+              :aria-label="getDateLabel(item, dateItem)"
+              :aria-disabled="dateItem.type === 'disabled'"
+              @click="handleSelect"
+            >
+              <view
+                v-if="dateItem.prefix"
+                :class="classPrefix + '__dates-item-prefix'"
+              >
+                {{ dateItem.prefix }}
+              </view>
+              {{ dateItem.day }}
+              <view
+                v-if="dateItem.suffix"
+                :class="classPrefix + '__dates-item-suffix ' + classPrefix + '__dates-item-suffix--' + dateItem.type"
+              >
+                {{ dateItem.suffix }}
+              </view>
+            </view>
+          </block>
+        </view>
+      </block>
+    </scroll-view>
+    <view
+      v-if="innerConfirmBtn != null && usePopup"
+      :class="classPrefix + '__footer'"
+    >
+      <slot
+        v-if="innerConfirmBtn === 'slot'"
+        name="confirm-btn"
+      />
+      <block v-else-if="innerConfirmBtn">
+        <t-button
+          :t-id="innerConfirmBtn.tId"
+          :custom-style="innerConfirmBtn.style"
+          :block="coalesce(innerConfirmBtn.block, true)"
+          :t-class="coalesce(coalesce(innerConfirmBtn.tClass, prefix + '-class-action'))"
+          :class="prefix + '-calendar__confirm-btn'"
+          :disabled="innerConfirmBtn.disabled"
+          :data-type="'action'"
+          :data-extra="innerConfirmBtn.dataExtra"
+          :custom-dataset="innerConfirmBtn.customDataset"
+          :content="innerConfirmBtn.content || realLocalText.confirm"
+          :icon="innerConfirmBtn.icon"
+          :loading="innerConfirmBtn.loading"
+          :loading-props="innerConfirmBtn.loadingProps"
+          :theme="coalesce(innerConfirmBtn.theme, 'primary')"
+          :ghost="innerConfirmBtn.ghost"
+          :shape="innerConfirmBtn.shape"
+          :size="innerConfirmBtn.size"
+          :variant="innerConfirmBtn.variant"
+          :open-type="innerConfirmBtn.openType"
+          :hover-class="innerConfirmBtn.hoverClass"
+          :hover-stop-propagation="innerConfirmBtn.hoverStopPropagation"
+          :hover-start-time="innerConfirmBtn.hoverStartTime"
+          :hover-stay-time="innerConfirmBtn.hoverStayTime"
+          :lang="innerConfirmBtn.lang"
+          :session-from="innerConfirmBtn.sessionFrom"
+          :send-message-title="innerConfirmBtn.sendMessageTitle"
+          :send-message-path="innerConfirmBtn.sendMessagePath"
+          :send-message-img="innerConfirmBtn.sendMessageImg"
+          :app-parameter="innerConfirmBtn.appParameter"
+          :show-message-card="innerConfirmBtn.showMessageCard"
+          :aria-label="innerConfirmBtn.ariaLabel"
+          @click="onTplButtonTap"
+          @getuserinfo="onTplButtonTap"
+          @contact="onTplButtonTap"
+          @getphonenumber="onTplButtonTap"
+          @error="onTplButtonTap"
+          @opensetting="onTplButtonTap"
+          @launchapp="onTplButtonTap"
+          @agreeprivacyauthorization="onTplButtonTap"
+        >
+          <slot v-if="innerConfirmBtn.useDefaultSlot" />
+        </t-button>
+      </block>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon.vue';
+import TButton from '../button/button.vue';
+import utils from '../common/utils.wxs';
+import {
+  getDateLabel,
+  getMonthTitle,
+} from './computed.js';
+import CalendarHeader from './calendar-header.vue';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './template.props';
+
+
+export default {
+  name: 'TCalendarContent',
+  options: {
+    styleIsolation: 'shared',
+  },
+  components: {
+    CalendarHeader,
+    TIcon,
+    TButton,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'clickButton',
+    'close',
+    'scroll',
+    'select',
+    'handleSwitchModeChange',
+  ],
+  data() {
+    return {
+      prefix,
+      utils,
+    };
+  },
+  computed: {
+    closeBtnCustomStyle() {
+      return utils._style({
+        position: 'absolute',
+        top: '16px',
+        right: '16px',
+        margin: '-12px',
+        padding: '12px',
+        color: 'var(--td-calendar-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, .9))))',
+      });
+    },
+  },
+  watch: {
+  },
+  mounted() {
+
+  },
+  methods: {
+    coalesce,
+    getDateLabel,
+    getMonthTitle,
+    onTplButtonTap() {
+      this.$emit('clickButton');
+    },
+    handleSelect(...args) {
+      this.$emit('select', ...args);
+    },
+    handleClose() {
+      this.$emit('close');
+    },
+    onScroll(...args) {
+      this.$emit('scroll', ...args);
+    },
+    handleSwitchModeChange(...args) {
+      this.$emit('handleSwitchModeChange', ...args);
+    },
+  },
+};
+
+</script>
+<style scoped>
+@import './calendar.css';
+</style>

package/dist/calendar/type.ts

@@ -0,0 +1,141 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdButtonProps as ButtonProps } from '../button/type';
+
+export interface TdCalendarProps {
+  /**
+   * 是否允许区间选择日历的起止时间相同，仅当 `type='range'` 时有效
+   * @default false
+   */
+  allowSameDay?: boolean;
+  /**
+   * 自动关闭；在点击关闭按钮、确认按钮、遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: boolean;
+  /**
+   * 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性
+   * @default ''
+   */
+  confirmBtn?: string | ButtonProps | null;
+  /**
+   * 第一天从星期几开始，默认 0 = 周日
+   * @default 0
+   */
+  firstDayOfWeek?: number;
+  /**
+   * 用于格式化日期的函数
+   */
+  format?: CalendarFormatType;
+  /**
+   * 国际化文案
+   */
+  localeText?: CalendarLocaleText;
+  /**
+   * 最大可选的日期，不传则默认半年后
+   */
+  maxDate?: number;
+  /**
+   * 最小可选的日期，不传则默认今天
+   */
+  minDate?: number;
+  /**
+   * 是否只读，只读状态下不能选择日期
+   */
+  readonly?: boolean;
+  /**
+   * 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换
+   * @default none
+   */
+  switchMode?: 'none' | 'month' | 'year-month';
+  /**
+   * 标题，不传默认为“请选择日期”
+   */
+  title?: string;
+  /**
+   * 日历的选择类型，single = 单选；multiple = 多选; range = 区间选择
+   * @default single
+   */
+  type?: 'single' | 'multiple' | 'range';
+  /**
+   * 是否使用弹出层包裹日历
+   * @default true
+   */
+  usePopup?: boolean;
+  /**
+   * 是否使用了自定义导航栏
+   * @default false
+   */
+  usingCustomNavbar?: boolean;
+  /**
+   * 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组
+   */
+  value?: number | number[];
+  /**
+   * 当前选择的日期，不传则选用 minDate 属性值或今天，优先级：minDate > today。当 type = multiple 或 range 时传入数组，非受控属性
+   */
+  defaultValue?: number | number[];
+  /**
+   * 是否显示日历；`usePopup` 为 true 时有效
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 不显示 confirm-btn 时，完成选择时触发（暂不支持 type = multiple）
+   */
+  onChange?: (context: { value: number | number[] }) => void;
+  /**
+   * 关闭按钮时触发
+   */
+  onClose?: (context: { trigger: CalendarTrigger }) => void;
+  /**
+   * 点击确认按钮时触发
+   */
+  onConfirm?: (context: { value: number | number[] }) => void;
+  /**
+   * 切换月或年时触发（switch-mode 不为 none 时有效）
+   */
+  onPanelChange?: (context: { year: number; month: number }) => void;
+  /**
+   * 滚动时触发
+   */
+  onScroll?: (context: {
+    scrollLeft: number;
+    scrollTop: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    deltaX: number;
+    deltaY: number;
+  }) => void;
+  /**
+   * 点击日期时触发
+   */
+  onSelect?: (context: { value: number | number[] }) => void;
+}
+
+export type CalendarFormatType = (day: TDate) => TDate;
+
+export type TDateType = 'selected' | 'disabled' | 'start' | 'start-end' | 'centre' | 'end' | '';
+
+export interface TDate {
+  date: Date;
+  day: number;
+  type: TDateType;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
+}
+
+export interface CalendarLocaleText {
+  title?: string;
+  weekdays?: string[];
+  monthTitle?: string;
+  months?: string[];
+  confirm?: string;
+}
+
+export type CalendarTrigger = 'close-btn' | 'confirm-btn' | 'overlay' | 'auto-close';

package/dist/calendar/utils.js

@@ -0,0 +1,16 @@
+export function getMonthByOffset(date, offset) {
+  const _date = new Date(date);
+  _date.setMonth(_date.getMonth() + offset);
+  return _date;
+}
+
+export function getYearByOffset(date, offset) {
+  const _date = new Date(date);
+  _date.setFullYear(_date.getFullYear() + offset);
+  return _date;
+}
+
+export const getPrevMonth = date => getMonthByOffset(date, -1);
+export const getNextMonth = date => getMonthByOffset(date, 1);
+export const getPrevYear = date => getYearByOffset(date, -1);
+export const getNextYear = date => getYearByOffset(date, 1);

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

@@ -0,0 +1,56 @@
+:: BASE_DOC ::
+
+## API
+
+### Cascader Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+check-strictly | Boolean | false | \- | N
+close-btn | Boolean | true | \- | N
+keys | Object | - | Typescript: `CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/cascader/type.ts) | N
+options | Array | [] | Typescript: `Array<CascaderOption>` | N
+placeholder | String | 选择选项 | \- | N
+sub-titles | Array | [] | Typescript: `Array<string>` | N
+theme | String | step | options: step/tab | N
+title | String | - | \- | N
+value | String / Number | - | `v-model:value` is supported | N
+default-value | String / Number | - | uncontrolled property | N
+visible | Boolean | false | \- | N
+
+### Cascader Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: string \| number, selectedOptions: string[] })` | \-
+close | `(context: { trigger: CascaderTriggerSource })` | [see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
+pick | `(context: { value: string \| number, label: string, index: number, level: number })` | \-
+
+### Cascader Slots
+
+name | Description
+-- | --
+close-btn | \-
+header | \-
+middle-content | \-
+title | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-cascader-active-color | @brand-color | -
+--td-cascader-bg-color | @bg-color-container | -
+--td-cascader-border-color | @component-stroke | -
+--td-cascader-content-height | 78vh | -
+--td-cascader-disabled-color | @text-color-disabled | -
+--td-cascader-options-height | calc(100% - @cascader-step-height) | -
+--td-cascader-options-title-color | @text-color-placeholder | -
+--td-cascader-step-arrow-color | @text-color-placeholder | -
+--td-cascader-step-dot-size | 16rpx | -
+--td-cascader-step-height | 88rpx | -
+--td-cascader-title-color | @text-color-primary | -
+--td-cascader-title-font | @font-title-large | -
+--td-cascader-title-padding | @spacer-2 | -

package/dist/cascader/README.md

@@ -0,0 +1,96 @@
+---
+title: Cascader 级联选择器
+description: 级联选择器适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TCascader from '@tdesign/uniapp/cascader/cascader.vue';
+```
+
+### 基础用法
+
+{{ base }}
+
+### 选项卡风格
+
+{{ theme-tab }}
+
+### 进阶
+
+#### 带初始值
+
+{{ with-value }}
+
+#### 自定义 keys
+
+{{ keys }}
+
+#### 使用次级标题
+
+{{ with-title }}
+
+#### 选择任意一项
+
+{{ check-strictly }}
+
+## API
+
+### Cascader Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+check-strictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
+close-btn | Boolean | true | 关闭按钮 | N
+keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/cascader/type.ts) | N
+options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
+placeholder | String | 选择选项 | 未选中时的提示文案 | N
+sub-titles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
+theme | String | step | 展示风格。可选项：step/tab | N
+title | String | - | 标题 | N
+value | String / Number | - | 选项值。支持语法糖 `v-model:value` | N
+default-value | String / Number | - | 选项值。非受控属性 | N
+visible | Boolean | false | 是否展示 | N
+
+### Cascader Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: string \| number, selectedOptions: string[] })` | 值发生变更时触发
+close | `(context: { trigger: CascaderTriggerSource })` | 关闭时触发。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/>
+pick | `(context: { value: string \| number, label: string, index: number, level: number })` | 选择后触发
+
+### Cascader Slots
+
+名称 | 描述
+-- | --
+close-btn | 自定义 `close-btn` 显示内容
+header | 头部
+middle-content | 中间内容
+title | 自定义 `title` 显示内容
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-cascader-active-color | @brand-color | -
+--td-cascader-bg-color | @bg-color-container | -
+--td-cascader-border-color | @component-stroke | -
+--td-cascader-content-height | 78vh | -
+--td-cascader-disabled-color | @text-color-disabled | -
+--td-cascader-options-height | calc(100% - @cascader-step-height) | -
+--td-cascader-options-title-color | @text-color-placeholder | -
+--td-cascader-step-arrow-color | @text-color-placeholder | -
+--td-cascader-step-dot-size | 16rpx | -
+--td-cascader-step-height | 88rpx | -
+--td-cascader-title-color | @text-color-primary | -
+--td-cascader-title-font | @font-title-large | -
+--td-cascader-title-padding | @spacer-2 | -

package/dist/cascader/cascader.css

@@ -0,0 +1,102 @@
+.t-cascader {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--td-cascader-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+  color: var(--td-cascader-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  border-radius: var(--td-radius-extraLarge, 24rpx) var(--td-radius-extraLarge, 24rpx) 0 0;
+  --td-radio-icon-checked-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  --td-tab-item-active-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  --td-tab-track-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-cascader__close-btn {
+  right: var(--td-spacer-2, 32rpx);
+  top: var(--td-spacer-2, 32rpx);
+  position: absolute;
+}
+.t-cascader__title {
+  position: relative;
+  font: var(--td-cascader-title-font, var(--td-font-title-large, 600 36rpx / 52rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  text-align: center;
+  padding: var(--td-cascader-title-padding, var(--td-spacer-2, 32rpx));
+}
+.t-cascader__content {
+  width: 100%;
+  height: var(--td-cascader-content-height, 78vh);
+  display: flex;
+  flex-direction: column;
+}
+.t-cascader__options {
+  width: 100vw;
+}
+.t-cascader__options-title {
+  color: var(--td-cascader-options-title-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+  padding-top: 40rpx;
+  padding-left: var(--td-spacer-2, 32rpx);
+  box-sizing: border-box;
+}
+.t-cascader__options-container {
+  flex: 1;
+  display: flex;
+  transition: all ease 0.3s;
+}
+.t-cascader__step {
+  display: flex;
+  align-items: center;
+  height: var(--td-cascader-step-height, 88rpx);
+}
+.t-cascader__steps {
+  padding: 0 32rpx 10rpx;
+  position: relative;
+}
+.t-cascader__steps::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-cascader-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-cascader__steps::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-cascader__step-dot {
+  position: relative;
+  width: var(--td-cascader-step-dot-size, 16rpx);
+  height: var(--td-cascader-step-dot-size, 16rpx);
+  border-radius: 50%;
+  border: 2rpx solid var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  box-sizing: border-box;
+}
+.t-cascader__step-dot:not(.t-cascader__step-dot--last)::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: calc(var(--td-cascader-step-dot-size, 16rpx) + 14rpx);
+  height: 36rpx;
+  width: 2rpx;
+  background: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  transform: translateX(-50%);
+}
+.t-cascader__step-dot--active {
+  background: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  border-color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-cascader__step-label {
+  padding-left: var(--td-spacer-2, 32rpx);
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}
+.t-cascader__step-label--active {
+  color: var(--td-cascader-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  font-weight: 600;
+}
+.t-cascader__step-arrow {
+  color: var(--td-cascader-step-arrow-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  margin-left: auto;
+}