@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/cascader/cascader.vue

@@ -0,0 +1,519 @@
+<template>
+  <view>
+    <TPopup
+      :class="tClass"
+      :visible="dataVisible"
+      placement="bottom"
+      @visible-change="onVisibleChange"
+    >
+      <view
+        :style="tools._style([customStyle])"
+        :class="name"
+      >
+        <view :class="name + '__title'">
+          <slot name="title" />
+          {{ title }}
+        </view>
+        <view
+          :class="name + '__close-btn'"
+          @click="onClose"
+        >
+          <slot name="close-btn" />
+          <TIcon
+            v-if="closeBtn"
+            size="48rpx"
+            name="close"
+          />
+        </view>
+
+        <slot name="header" />
+
+        <view :class="name + '__content'">
+          <block v-if="steps && steps.length">
+            <view
+              v-if="theme == 'step'"
+              :class="name + '__steps'"
+            >
+              <view
+                v-for="(item, index) in steps"
+                :key="index"
+                :class="name + '__step'"
+                :data-index="index"
+                @click="() => onStepClick(index)"
+              >
+                <view
+                  :class="
+                    name +
+                      '__step-dot ' +
+                      name +
+                      '__step-dot--' +
+                      (item !== placeholder ? 'active' : '') +
+                      ' ' +
+                      name +
+                      '__step-dot--' +
+                      (index === steps.length - 1 ? 'last' : '')
+                  "
+                />
+
+                <view :class="name + '__step-label ' + name + '__step-label--' + (index === stepIndex ? 'active' : '')">
+                  {{ item }}
+                </view>
+
+                <TIcon
+                  name="chevron-right"
+                  size="44rpx"
+                  :t-class="name + '__step-arrow'"
+                  :custom-style="stepArrowCustomStyle"
+                  style="margin-left: auto"
+                />
+              </view>
+            </view>
+
+            <TTabs
+              v-if="theme == 'tab'"
+              ref="tabs"
+              :value="stepIndex"
+              :space-evenly="false"
+              @change="({value}) => onTabChange(value)"
+            >
+              <TTabPanel
+                v-for="(item, index) in steps"
+                :key="index"
+                :ref="`tab-${index}`"
+                :value="index"
+                :label="item"
+              />
+            </TTabs>
+          </block>
+
+          <slot name="middle-content" />
+
+          <view
+            v-if="subTitles && subTitles[stepIndex]"
+            :class="name + '__options-title'"
+          >
+            {{ subTitles[stepIndex] }}
+          </view>
+
+          <view
+            :class="name + '__options-container'"
+            :style="'width: ' + (items.length + 1) + '00vw; transform: translateX(-' + stepIndex + '00vw)'"
+          >
+            <scroll-view
+              v-for="(options, index) in items"
+              :key="index"
+              :class="name + '__options'"
+              scroll-y
+              :scroll-top="scrollTopList[index]"
+              type="list"
+              :style="'height: ' + _optionsHeight + 'px'"
+            >
+              <view :class="'cascader-radio-group-' + index">
+                <TRadioGroup
+                  :value="selectedValue[index]"
+                  :keys="keys"
+                  :options="options"
+                  :data-level="index"
+                  placement="right"
+                  icon="line"
+                  borderless
+                  @change="({ value }) => handleSelect($event, { level: index, value })"
+                />
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+      </view>
+    </TPopup>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TPopup from '../popup/popup';
+import TTabs from '../tabs/tabs';
+import TTabPanel from '../tab-panel/tab-panel';
+import TRadioGroup from '../radio-group/radio-group';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { getRect, coalesce, nextTick } from '../common/utils';
+
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-cascader`;
+
+function parseOptions(options, keys) {
+  const label = coalesce(keys?.label, 'label');
+  const value = coalesce(keys?.value, 'value');
+  const disabled = coalesce(keys?.disabled, 'disabled');
+
+  return options.map(item => ({
+    [label]: item[label],
+    [value]: item[value],
+    [disabled]: item[disabled],
+  }));
+}
+
+const defaultState = {
+  contentHeight: 0,
+  stepHeight: 0,
+  tabsHeight: 0,
+  subTitlesHeight: 0,
+  stepsInitHeight: 0,
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+  ],
+  components: {
+    TIcon,
+    TPopup,
+    TTabs,
+    TTabPanel,
+    TRadioGroup,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'update:visible',
+  ],
+  data() {
+    return {
+      prefix,
+      name,
+      stepIndex: 0,
+      selectedIndexes: [],
+      selectedValue: [],
+      scrollTopList: [],
+      steps: [],
+      _optionsHeight: 0,
+      tools,
+
+      dataVisible: this.visible,
+      dataValue: coalesce(this.value, this.defaultValue),
+      items: [],
+    };
+  },
+  computed: {
+    stepArrowCustomStyle() {
+      return tools._style({
+        color: 'var(--td-cascader-step-arrow-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, .4))))',
+        marginLeft: 'auto',
+      });
+    },
+  },
+  watch: {
+    visible: {
+      handler(v) {
+        this.dataVisible = v;
+      },
+      immediate: true,
+    },
+    dataVisible: {
+      handler(v) {
+        if (v) {
+          nextTick().then(() => {
+            const $tabs = this.$refs.tabs;
+            $tabs?.setTrack();
+            $tabs?.getTabHeight().then((res) => {
+              this.state.tabsHeight = res.height;
+            });
+          });
+
+          // 不能使用 this.$nextTick，在头条小程序下会报错
+          nextTick().then(() => {
+            this.initOptionsHeight(this.steps.length);
+            this.updateScrollTop();
+            this.initWithValue();
+          });
+        } else {
+          this.state = { ...defaultState };
+        }
+      },
+      immediate: true,
+    },
+
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+
+    dataValue: {
+      handler() {
+        this.initWithValue();
+      },
+      immediate: true,
+    },
+
+    options: {
+      handler() {
+        const { selectedValue, steps, items } = this.genItems();
+
+        this.steps = steps;
+        this.items = items;
+        this.selectedValue = selectedValue;
+        this.stepIndex = items.length - 1;
+        this.setTabParent();
+      },
+      immediate: true,
+      deep: true,
+    },
+    selectedIndexes: {
+      handler() {
+        const { visible, theme } = this;
+        const { selectedValue, steps, items } = this.genItems();
+
+        this.steps = steps;
+        this.setTabParent();
+        this.selectedValue = selectedValue;
+        this.stepIndex = items.length - 1;
+
+        if (JSON.stringify(items) !== JSON.stringify(this.items)) {
+          this.items = items;
+        }
+
+
+        if (visible && theme === 'step') {
+          this.updateOptionsHeight(steps.length);
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+
+    stepIndex: {
+      handler() {
+        const { dataVisible: visible } = this;
+
+        if (visible) {
+          this.updateScrollTop();
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  created() {
+    this.state = {
+      ...defaultState,
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    setTabParent() {
+      // #ifdef MP-TOUTIAO
+      nextTick().then(() => {
+        const tabsRef = this.$refs.tabs;
+        this.steps.forEach((tools, index) => {
+          const tabRef = this.$refs[`tab-${index}`];
+          tabRef?.[0]?.setParent(tabsRef);
+        });
+      });
+      // #endif
+    },
+    updateOptionsHeight(steps) {
+      const { contentHeight, stepsInitHeight, stepHeight, subTitlesHeight } = this.state;
+      this._optionsHeight = contentHeight - stepsInitHeight - subTitlesHeight - (steps - 1) * stepHeight;
+    },
+
+    async initOptionsHeight(steps) {
+      const { theme, subTitles } = this;
+
+      const { height } = await getRect(this, `.${name}__content`);
+      this.state.contentHeight = height;
+
+      if (theme === 'step') {
+        await Promise.all([
+          getRect(this, `.${name}__steps`),
+          getRect(this, `.${name}__step`),
+        ])
+          .then(([stepsRect, stepRect]) => {
+            this.state.stepsInitHeight = stepsRect.height - (steps - 1) * stepRect.height;
+            this.state.stepHeight = stepRect.height;
+          })
+          .catch(() => {
+          });
+      }
+
+      if (subTitles.length > 0) {
+        const { height } = await getRect(this, `.${name}__options-title`);
+        this.state.subTitlesHeight = height;
+      }
+
+      const optionsInitHeight = this.state.contentHeight - this.state.subTitlesHeight;
+      this._optionsHeight = theme === 'step'
+        ? optionsInitHeight - this.state.stepsInitHeight - (steps - 1) * this.state.stepHeight
+        : optionsInitHeight - this.state.tabsHeight;
+    },
+
+    initWithValue() {
+      if (this.dataValue != null && this.dataValue !== '') {
+        const selectedIndexes = this.getIndexesByValue(this.options, this.dataValue);
+
+        if (selectedIndexes) {
+          this.selectedIndexes = selectedIndexes;
+        }
+      } else {
+        this.selectedIndexes = [];
+      }
+    },
+    getIndexesByValue(options, value) {
+      const { keys } = this;
+
+      for (let i = 0, size = options.length; i < size; i += 1) {
+        const opt = options[i];
+        if (opt[coalesce(keys?.value, 'value')] === value) {
+          return [i];
+        }
+        if (opt[coalesce(keys?.children, 'children')]) {
+          const res = this.getIndexesByValue(opt[coalesce(keys?.children, 'children')], value);
+          if (res) {
+            return [i, ...res];
+          }
+        }
+      }
+    },
+    updateScrollTop() {
+      const { dataVisible: visible, items, selectedIndexes, stepIndex } = this;
+
+      if (visible) {
+        getRect(this, '.cascader-radio-group-0').then((rect) => {
+          const eachRadioHeight = rect.height / items[0]?.length;
+
+          this[`scrollTopList[${stepIndex}]`] = eachRadioHeight * selectedIndexes[stepIndex];
+        })
+          .catch(() => {
+          });
+      }
+    },
+    hide(trigger) {
+      this.dataVisible = false;
+      this.$emit('close', { trigger });
+      this.$emit('update:visible', false);
+    },
+    onVisibleChange() {
+      this.hide('overlay');
+    },
+    onClose() {
+      if (this.checkStrictly) {
+        this.triggerChange();
+      }
+      this.hide('close-btn');
+    },
+    onStepClick(index) {
+      this.stepIndex = index;
+    },
+    onTabChange(value) {
+      this.stepIndex = value;
+    },
+    genItems() {
+      const { options, selectedIndexes, keys, placeholder } = this;
+      const selectedValue = [];
+      const steps = [];
+      const items = [parseOptions(options, keys)];
+
+      if (options.length > 0) {
+        let current = options;
+        for (let i = 0, size = selectedIndexes.length; i < size; i += 1) {
+          const index = selectedIndexes[i];
+          const next = current[index];
+          current = next[coalesce(keys?.children, 'children')];
+
+          selectedValue.push(next[coalesce(keys?.value, 'value')]);
+          steps.push(next[coalesce(keys?.label, 'label')]);
+
+          if (next[coalesce(keys?.children, 'children')]) {
+            items.push(parseOptions(next[coalesce(keys?.children, 'children')], keys));
+          }
+        }
+      }
+
+      if (steps.length < items.length) {
+        steps.push(placeholder);
+      }
+
+      return {
+        selectedValue,
+        steps,
+        items,
+      };
+    },
+    handleSelect(tools, { level, value }) {
+      const { checkStrictly } = this;
+      const { selectedIndexes, items, keys, options, selectedValue } = this;
+
+      const index = items[level].findIndex(item => item[coalesce(keys?.value, 'value')] === value);
+
+      let item = selectedIndexes.slice(0, level).reduce((acc, item, index) => {
+        if (index === 0) {
+          return acc[item];
+        }
+        return acc[coalesce(keys?.children, 'children')][item];
+      }, options);
+
+
+      if (level === 0) {
+        item = item[index];
+      } else {
+        item = item[coalesce(keys?.children, 'children')][index];
+      }
+
+      if (item[coalesce(keys?.disabled, 'disabled')]) {
+        return;
+      }
+      this.$emit('pick', {
+        value: item[coalesce(keys?.value, 'value')],
+        label: item[coalesce(keys?.label, 'label')],
+        index,
+        level,
+      });
+      selectedIndexes[level] = index;
+      if (checkStrictly && selectedValue.includes(String(value))) {
+        selectedIndexes.length = level;
+        this.selectedIndexes = selectedIndexes;
+        return;
+      }
+      selectedIndexes.length = level + 1;
+
+      const { items: newItems } = this.genItems();
+      if (item?.[coalesce(keys?.children, 'children')]?.length >= 0) {
+        this.selectedIndexes = selectedIndexes;
+        this[`items[${level + 1}]`] = newItems[level + 1];
+      } else {
+        // setCascaderValue(item.value);
+        this.selectedIndexes = selectedIndexes;
+        setTimeout(this.triggerChange);
+
+        this.hide('finish');
+      }
+    },
+    triggerChange() {
+      const { items, selectedValue, selectedIndexes } = this;
+      this._trigger('change', {
+        value: coalesce(selectedValue[selectedValue.length - 1], ''),
+        selectedOptions: items.map((item, index) => item[selectedIndexes[index]]).filter(Boolean),
+      });
+    },
+  },
+});
+</script>
+<style scoped>
+@import './cascader.css';
+</style>

package/dist/cascader/props.ts

@@ -0,0 +1,73 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCascaderProps } from './type';
+export default {
+  /** 父子节点选中状态不再关联，可各自选中或取消 */
+  checkStrictly: Boolean,
+  /** 关闭按钮 */
+  closeBtn: {
+    type: Boolean,
+    default: true as TdCascaderProps['closeBtn'],
+  },
+  /** 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
+  /** 可选项数据源 */
+  options: {
+    type: Array,
+    default: (): TdCascaderProps['options'] => [],
+  },
+  /** 未选中时的提示文案 */
+  placeholder: {
+    type: String,
+    default: '选择选项',
+  },
+  /** 每级展示的次标题 */
+  subTitles: {
+    type: Array,
+    default: (): TdCascaderProps['subTitles'] => [],
+  },
+  /** 展示风格 */
+  theme: {
+    type: String,
+    default: 'step' as TdCascaderProps['theme'],
+    validator(val: TdCascaderProps['theme']): boolean {
+      if (!val) return true;
+      return ['step', 'tab'].includes(val);
+    },
+  },
+  /** 标题 */
+  title: {
+    type: String,
+  },
+  /** 选项值 */
+  value: {
+    type: [String, Number],
+  },
+  /** 选项值，非受控属性 */
+  defaultValue: {
+    type: [String, Number],
+  },
+  /** 是否展示 */
+  visible: Boolean,
+  /** 值发生变更时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 关闭时触发 */
+  onClose: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 选择后触发 */
+  onPick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/cascader/type.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TreeOptionData, TreeKeysType } from '../common/common';
+
+export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 父子节点选中状态不再关联，可各自选中或取消
+   * @default false
+   */
+  checkStrictly?: boolean;
+  /**
+   * 关闭按钮
+   * @default true
+   */
+  closeBtn?: boolean;
+  /**
+   * 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名
+   */
+  keys?: CascaderKeysType;
+  /**
+   * 可选项数据源
+   * @default []
+   */
+  options?: Array<CascaderOption>;
+  /**
+   * 未选中时的提示文案
+   * @default 选择选项
+   */
+  placeholder?: string;
+  /**
+   * 每级展示的次标题
+   * @default []
+   */
+  subTitles?: Array<string>;
+  /**
+   * 展示风格
+   * @default step
+   */
+  theme?: 'step' | 'tab';
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 选项值
+   */
+  value?: string | number;
+  /**
+   * 选项值，非受控属性
+   */
+  defaultValue?: string | number;
+  /**
+   * 是否展示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 值发生变更时触发
+   */
+  onChange?: (context: { value: string | number; selectedOptions: string[] }) => void;
+  /**
+   * 关闭时触发
+   */
+  onClose?: (context: { trigger: CascaderTriggerSource }) => void;
+  /**
+   * 选择后触发
+   */
+  onPick?: (context: { value: string | number; label: string; index: number; level: number }) => void;
+}
+
+export type CascaderKeysType = TreeKeysType;
+
+export type CascaderTriggerSource = 'overlay' | 'close-btn' | 'finish';