@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/checkbox/checkbox.vue

@@ -0,0 +1,238 @@
+<template>
+  <view
+    :id="tId"
+    :style="tools._style([customStyle])"
+    :class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', _disabled]]) + ' ' + tClass"
+    aria-role="checkbox"
+    :aria-checked="dataChecked ? (dataIndeterminate ? 'mixed' : true) : false"
+    :aria-disabled="_disabled ? true : false"
+    @click.stop="handleTap"
+  >
+    <view
+      v-if="theme == 'default'"
+      :class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon"
+    >
+      <slot
+        v-if="icon === 'slot'"
+        name="icon"
+      />
+      <view
+        v-else-if="tools.isArray(icon)"
+        :class="classPrefix + '__icon'"
+      >
+        <image
+          :src="dataChecked ? (dataIndeterminate && icon[2] ? icon[2] : icon[0]) : icon[1]"
+          :class="classPrefix + '__icon-image'"
+        />
+      </view>
+      <block v-else>
+        <t-icon
+          v-if="dataChecked && (icon == 'circle' || icon == 'rectangle')"
+          :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check-' + icon + '-filled'"
+          :class="tools.cls(classPrefix + '__icon-wrapper', [])"
+        />
+        <t-icon
+          v-if="dataChecked && icon == 'line'"
+          :name="dataIndeterminate ? 'minus-' + icon + '-filled' : 'check'"
+          :class="tools.cls(classPrefix + '__icon-wrapper', [])"
+        />
+        <view
+          v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
+          :class="tools.cls(classPrefix + '__icon-' + icon, [['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]]) + ' ' + tClassContent"
+        :style="'-webkit-line-clamp:' + maxContentRow"
+      >
+        <block v-if="content">
+          {{ content }}
+        </block>
+        <slot name="content" />
+      </view>
+    </view>
+    <view
+      v-if="theme == 'default' && !dataBorderless"
+      :class="tools.cls(classPrefix + '__border', [placement]) + ' ' + tClassBorder"
+    />
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { coalesce } from '../common/utils';
+import { prefix, ISOLATED_RELATION_KEY } from '../common/config';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-checkbox`;
+
+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.Checkbox)],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+    theme: {
+      type: String,
+      default: 'default',
+    },
+    tId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      _disabled: false,
+      tools,
+
+      dataBorderless: this.borderless,
+      dataIndeterminate: this.indeterminate,
+      dataChecked: coalesce(this.checked, this.defaultChecked),
+    };
+  },
+  computed: {
+    isIsolated() {
+      return this.relationKey === ISOLATED_RELATION_KEY;
+    },
+  },
+  watch: {
+    borderless: {
+      handler(v) {
+        this.dataBorderless = v;
+      },
+      immediate: true,
+    },
+    indeterminate: {
+      handler(v) {
+        this.dataIndeterminate = v;
+      },
+      immediate: true,
+    },
+    checked: {
+      handler(v) {
+        this.dataChecked = v;
+      },
+      immediate: true,
+    },
+    disabled: {
+      handler(v) {
+        this._disabled = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    innerAfterLinked() {
+      if (this.isIsolated) return;
+      const parent = this[RELATION_MAP.Checkbox];
+      const { value, disabled, borderless } = parent;
+      const { dataValue, checked, checkAll, item, dataIndeterminate } = this;
+      const valueSet = new Set(value);
+      const checkedFromParent = valueSet.has(this.value);
+      const data = {
+        _disabled: this.disabled == null ? disabled : this.disabled,
+      };
+
+      data.dataBorderless = !!(coalesce(this.borderless, borderless));
+
+      data.dataChecked = this.dataChecked || checkedFromParent;
+      if (this.dataChecked) {
+        parent.updateValue({
+          value: dataValue,
+          checked,
+          checkAll,
+          item,
+          indeterminate: dataIndeterminate,
+          trigger: 'init',
+        });
+      }
+
+      if (this.checkAll) {
+        data.dataChecked = valueSet.size > 0;
+        // data.indeterminate =
+      }
+
+      Object.keys(data).forEach((key) => {
+        this[key] = data[key];
+      });
+    },
+    handleTap(e) {
+      const { _disabled, readonly, contentDisabled } = this;
+      const { target } = e.currentTarget.dataset;
+
+      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+
+      const { value, label, checkAll, dataIndeterminate } = this;
+      const checked = !this.dataChecked;
+      const parent = this[RELATION_MAP.Checkbox];
+
+
+      if (parent && !this.isIsolated) {
+        parent.updateValue({ value, checkAll, indeterminate: dataIndeterminate, checked, item: { label, value, checked } });
+      } else {
+        this._trigger('change', { context: { value, label }, checked });
+      }
+    },
+
+    setDisabled(disabled) {
+      this._disabled = this.disabled || disabled;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './checkbox.css';
+</style>

package/dist/checkbox/props.ts

@@ -0,0 +1,90 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdCheckboxProps } from './type';
+export default {
+  /** 是否为块级元素 */
+  block: {
+    type: Boolean,
+    default: true,
+  },
+  /** 是否开启无边框模式 */
+  borderless: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */
+  checkAll: Boolean,
+  /** 是否选中 */
+  checked: Boolean,
+  /** 是否选中，非受控属性 */
+  defaultChecked: Boolean,
+  /** 多选框内容 */
+  content: {
+    type: String,
+  },
+  /** 是否禁用组件内容（content）触发选中 */
+  contentDisabled: Boolean,
+  /** 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
+  icon: {
+    type: [String, Array],
+    default: 'circle' as TdCheckboxProps['icon'],
+  },
+  /** 是否为半选 */
+  indeterminate: Boolean,
+  /** 主文案 */
+  label: {
+    type: String,
+  },
+  /** 内容最大行数限制 */
+  maxContentRow: {
+    type: Number,
+    default: 5,
+  },
+  /** 主文案最大行数限制 */
+  maxLabelRow: {
+    type: Number,
+    default: 3,
+  },
+  /** HTML 元素原生属性 */
+  name: {
+    type: String,
+    default: '',
+  },
+  /** 多选框和内容相对位置 */
+  placement: {
+    type: String,
+    default: 'left' as TdCheckboxProps['placement'],
+    validator(val: TdCheckboxProps['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],
+  },
+  /** 值变化时触发。`context` 表示当前点击项内容 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/checkbox/type.ts

@@ -0,0 +1,96 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdCheckboxProps {
+  /**
+   * 是否为块级元素
+   * @default true
+   */
+  block?: boolean;
+  /**
+   * 是否开启无边框模式
+   */
+  borderless?: boolean;
+  /**
+   * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用
+   * @default false
+   */
+  checkAll?: boolean;
+  /**
+   * 是否选中
+   */
+  checked?: boolean;
+  /**
+   * 是否选中，非受控属性
+   */
+  defaultChecked?: boolean;
+  /**
+   * 多选框内容
+   */
+  content?: string;
+  /**
+   * 是否禁用组件内容（content）触发选中
+   */
+  contentDisabled?: boolean;
+  /**
+   * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled
+   */
+  disabled?: boolean;
+  /**
+   * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
+   * @default 'circle'
+   */
+  icon?: 'circle' | 'line' | 'rectangle' | string[];
+  /**
+   * 是否为半选
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * 主文案
+   */
+  label?: string;
+  /**
+   * 内容最大行数限制
+   * @default 5
+   */
+  maxContentRow?: number;
+  /**
+   * 主文案最大行数限制
+   * @default 3
+   */
+  maxLabelRow?: number;
+  /**
+   * HTML 元素原生属性
+   * @default ''
+   */
+  name?: string;
+  /**
+   * 多选框和内容相对位置
+   * @default left
+   */
+  placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
+  /**
+   * -1 时代表独立，不再寻找 parent，用于头条小程序
+   * @default ''
+   */
+  relationKey?: string;
+  /**
+   * 多选框的值
+   */
+  value?: string | number | boolean;
+  /**
+   * 值变化时触发。`context` 表示当前点击项内容
+   */
+  onChange?: (context: {
+    checked: boolean;
+    context: { value: boolean | number | string; label: boolean | number | string };
+  }) => void;
+}

package/dist/checkbox-group/checkbox-group.vue

@@ -0,0 +1,261 @@
+<template>
+  <view
+    :class="classPrefix + ' ' + tClass"
+    :style="tools._style([customStyle])"
+  >
+    <slot />
+    <t-checkbox
+      v-for="(item, index) in checkboxOptions"
+      :key="index"
+      :ref="prefix + '-checkbox-option'"
+      :class="prefix + '-checkbox-option'"
+      :data-item="item"
+      :label="item.label || item.text || ''"
+      :value="item.value == null ? '' : item.value"
+      :block="item.block || true"
+      :check-all="item.checkAll || false"
+      :checked="item.checked || false"
+      :content="item.content || ''"
+      :content-disabled="item.contentDisabled || false"
+      :icon="item.icon || 'circle'"
+      :indeterminate="item.indeterminate || false"
+      :disabled="item.disabled == null ? disabled : item.disabled"
+      :max-content-row="item.maxContentRow || 5"
+      :max-label-row="item.maxLabelRow || 3"
+      :name="item.name || ''"
+      :borderless="borderless"
+      :readonly="item.readonly || false"
+      :placement="item.placement || 'left'"
+      :relation-key="relationKey"
+      @change="({checked}) => handleInnerChildChange($event, { item, checked })"
+    />
+  </view>
+</template>
+<script>
+import TCheckbox from '../checkbox/checkbox';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { coalesce } from '../common/utils';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-checkbox-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.Checkbox)],
+  components: {
+    TCheckbox,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      checkboxOptions: [],
+      tools,
+
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+      deep: true,
+    },
+    dataValue: {
+      handler() {
+        this.updateChildren();
+      },
+      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,
+    },
+  },
+  created() {
+    this.$checkAll = null;
+  },
+  mounted() {
+    this.setCheckall();
+
+    this.getChildren()?.forEach((item) => {
+      item.setDisabled(this.disabled);
+    });
+    setTimeout(() => {
+      this.updateChildren();
+    }, 33);
+  },
+  methods: {
+    getChildren() {
+      let items = this.children;
+      if (!items?.length) {
+        items = this.$refs[`${prefix}-checkbox-option`];
+      }
+      return items || [];
+    },
+
+    updateChildren() {
+      const items = this.getChildren();
+      const { dataValue } = this;
+
+
+      if (items.length > 0) {
+        items.forEach((item) => {
+          if (!item.checkAll) {
+            item.dataChecked = dataValue?.includes(item.value);
+          }
+        });
+        // 关联可全选项
+        if (items.some(item => item.checkAll)) {
+          this.setCheckall();
+        }
+      }
+    },
+
+    updateValue({ validChildren, trigger, value, checked, checkAll, item, indeterminate }) {
+      let { dataValue: newValue } = this;
+      const { max } = this;
+
+      if (validChildren !== false) {
+        const keySet = new Set(this.getChildren().map(item => item.value));
+        newValue = newValue.filter(value => keySet.has(value));
+      }
+
+      if (max && checked && newValue.length === max) return;
+
+      if (checkAll) {
+        const items = this.getChildren();
+        newValue = !checked && indeterminate
+          ? items
+            .filter(data => !(data.disabled && !newValue.includes(data.value)))
+            .map(item => item.value)
+          : items
+            .filter((data) => {
+              if (data.disabled) {
+                return newValue.includes(data.value);
+              }
+              return checked && !data.checkAll;
+            })
+            .map(data => data.value);
+      } else if (checked) {
+        newValue = newValue.concat(value);
+      } else {
+        const index = newValue.findIndex(v => v === value);
+        newValue.splice(index, 1);
+      }
+
+      if (trigger !== 'init') {
+        this._trigger('change', { value: newValue, context: item });
+
+        this.onChange(newValue);
+      }
+    },
+
+    onChange(value) {
+      if (this[RELATION_MAP.FormKey]
+        && this[RELATION_MAP.FormKey].onValueChange) {
+        this[RELATION_MAP.FormKey].onValueChange(value);
+      }
+    },
+
+    initWithOptions() {
+      const { options, dataValue: value, keys } = this;
+
+      if (!options?.length || !Array.isArray(options)) return;
+
+      const checkboxOptions = options.map((item) => {
+        const isLabel = ['number', 'string'].includes(typeof item);
+        return isLabel
+          ? {
+            label: `${item}`,
+            value: item,
+            checked: value?.includes(item),
+          }
+          : {
+            ...item,
+            label: item[coalesce(keys?.label, 'label')],
+            value: item[coalesce(keys?.value, 'value')],
+            checked: value?.includes(item[coalesce(keys?.value, 'value')]),
+          };
+      });
+
+      this.checkboxOptions = checkboxOptions;
+    },
+
+    handleInnerChildChange(tools, { item, checked }) {
+      const rect = {};
+
+      if (item.checkAll) {
+        rect.indeterminate = this.$checkAll?.indeterminate;
+      }
+
+      this.updateValue({ ...item, checked, item, ...rect });
+    },
+
+    setCheckall() {
+      const items = this.getChildren();
+
+      if (!this.$checkAll) {
+        this.$checkAll = items.find(item => item.checkAll);
+      }
+
+      if (!this.$checkAll) return;
+
+      const { dataValue } = this;
+      const valueSet = new Set(dataValue?.filter(val => val !== this.$checkAll.value));
+      const isCheckall = items.every(item => (item.checkAll ? true : valueSet.has(item.value)));
+
+      this.$checkAll.dataChecked = valueSet.size > 0;
+      this.$checkAll.dataIndeterminate = !isCheckall;
+    },
+  },
+});
+
+</script>
+<style scoped>
+</style>