@tdesign/uniapp 0.0.1-alpha.1 → 0.7.1

package/dist/skeleton/skeleton.vue

@@ -0,0 +1,211 @@
+<template>
+  <view>
+    <view
+      v-if="isShow"
+      :style="tools._style([customStyle])"
+      :class="[classPrefix + ' ', tClass]"
+    >
+      <view
+        v-if="parsedRowCols.length"
+        :class="classPrefix + '__content'"
+      >
+        <view
+          v-for="(row, index) in parsedRowCols"
+          :key="index"
+          :class="[
+            classPrefix + '__row ',
+            tClassRow
+          ]"
+        >
+          <view
+            v-for="(col, index1) in row"
+            :key="index1"
+            :class="[col.class + ' ', tClassCol]"
+            :style="tools._style(col.style)"
+          />
+        </view>
+      </view>
+    </view>
+    <view
+      v-else
+      :class="classPrefix + '__content'"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { classNames } from '../common/utils';
+import { isInteger, isNumeric } from '../common/validator';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-skeleton`;
+
+
+const ThemeMap = {
+  avatar: [{
+    type: 'circle',
+    size: '96rpx',
+  }],
+  image: [{
+    type: 'rect',
+    size: '144rpx',
+  }],
+  text: [[{
+    width: '24%',
+    height: '32rpx',
+    marginRight: '32rpx',
+  }, {
+    width: '76%',
+    height: '32rpx',
+  }], 1],
+  paragraph: [1, 1, 1, {
+    width: '55%',
+  }],
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-col`,
+    `${prefix}-class-row`,
+  ],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      parsedRowCols: [],
+      isShow: false,
+      tools,
+      timer: null,
+    };
+  },
+  watch: {
+    rowCol: {
+      handler() {
+        this.init();
+      },
+      immediate: true,
+    },
+    loading: 'isShowSkeleton',
+    delay: 'isShowSkeleton',
+  },
+  mounted() {
+    this.init();
+    this.isShowSkeleton();
+  },
+  beforeUnMount() {
+    this.clearTimer();
+  },
+  methods: {
+    init() {
+      const { theme, rowCol } = this;
+      const rowCols = [];
+
+      if (rowCol &&  rowCol.length) {
+        rowCols.push(...rowCol);
+      } else {
+        rowCols.push(...ThemeMap[theme || 'text']);
+      }
+
+      const parsedRowCols = rowCols.map((item) => {
+        if (isInteger(item) && item >= 0) {
+          return new Array(item).fill({
+            class: this.getColItemClass({ type: 'text' }),
+            style: {},
+          });
+        }
+
+        if (Array.isArray(item)) {
+          return item.map(col => ({
+            ...col,
+            class: this.getColItemClass(col),
+            style: this.getColItemStyle(col),
+          }));
+        }
+
+        const nItem = item;
+        return [
+          {
+            ...nItem,
+            class: this.getColItemClass(nItem),
+            style: this.getColItemStyle(nItem),
+          },
+        ];
+      });
+
+      this.parsedRowCols = parsedRowCols;
+    },
+
+    getColItemClass(obj) {
+      return classNames([
+        `${name}__col`,
+        `${name}--type-${obj.type || 'text'}`,
+        `${name}--animation-${this.animation}`,
+      ]);
+    },
+
+    getColItemStyle(obj) {
+      const styleName = [
+        'width',
+        'height',
+        'marginRight',
+        'marginLeft',
+        'margin',
+        'size',
+        'background',
+        'backgroundColor',
+        'borderRadius',
+      ];
+      const style = {};
+      styleName.forEach((name) => {
+        if (name in obj) {
+          const px = isNumeric(obj[name]) ? `${obj[name]}px` : obj[name];
+          if (name === 'size') {
+            [style.width, style.height] = [px, px];
+          } else {
+            style[name] = px;
+          }
+        }
+      });
+      return style;
+    },
+
+    clearTimer() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+    },
+
+    isShowSkeleton() {
+      this.clearTimer();
+
+      const { loading, delay } = this;
+
+      if (!loading || delay === 0) {
+        this.isShow = loading;
+        return;
+      }
+
+      this.timer = setTimeout(() => {
+        this.isShow = this.loading;
+      }, delay);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './skeleton.css';
+</style>

package/dist/skeleton/type.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdSkeletonProps {
+  /**
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画
+   * @default none
+   */
+  animation?: 'gradient' | 'flashed' | 'none';
+  /**
+   * 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒
+   * @default 0
+   */
+  delay?: number;
+  /**
+   * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+   * @default true
+   */
+  loading?: boolean;
+  /**
+   * 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等
+   */
+  rowCol?: SkeletonRowCol;
+  /**
+   * 骨架图风格，有基础、头像组合等两大类
+   * @default text
+   */
+  theme?: 'avatar' | 'image' | 'text' | 'paragraph';
+}
+
+export type SkeletonRowCol = Array<Number | SkeletonRowColObj | Array<SkeletonRowColObj>>;
+
+export interface SkeletonRowColObj {
+  width?: string;
+  size?: string;
+  height?: string;
+  marginRight?: string;
+  marginLeft?: string;
+  margin?: string;
+  type?: 'rect' | 'circle' | 'text';
+}

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

@@ -0,0 +1,63 @@
+:: BASE_DOC ::
+
+## API
+
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+colors | Array | [] | `deprecated`。Typescript：`Array<string>` | N
+disabled | Boolean | undefined | \- | N
+disabled-color | Array | [] | `deprecated`。Typescript：`Array<string>` | N
+label | String / Boolean / Function | false | Typescript：`string \| boolean` | N
+marks | Object / Array | {} | Typescript：`Record<number, string> \| Array<number>` | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+show-extreme-value | Boolean | false | \- | N
+step | Number | 1 | \- | N
+theme | String | default | options: default/capsule | N
+value | Number / Array | 0 | `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/slider/type.ts) | N
+default-value | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/slider/type.ts) | N
+vertical | Boolean | false | \- | N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: SliderValue })` | \-
+dragend | `(context: { value: SliderValue, e: TouchEvent })` | \-
+dragstart | `(context: { e: TouchEvent })` | \-
+
+### Slider External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-bar | \-
+t-class-bar-active | \-
+t-class-bar-disabled | \-
+t-class-cursor | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-slider-active-color | @brand-color | -
+--td-slider-bar-height | 8rpx | -
+--td-slider-bar-width | 8rpx | -
+--td-slider-capsule-bar-color | @bg-color-component | -
+--td-slider-capsule-bar-heihgt | 48rpx | -
+--td-slider-capsule-bar-width | 48rpx | -
+--td-slider-capsule-line-heihgt | 36rpx | -
+--td-slider-default-color | @bg-color-component | -
+--td-slider-disabled-color | @brand-color-disabled | -
+--td-slider-disabled-text-color | @text-color-disabled | -
+--td-slider-dot-bg-color | #fff | -
+--td-slider-dot-color | @component-border | -
+--td-slider-dot-disabled-bg-color | #fff | -
+--td-slider-dot-disabled-border-color | #f3f3f3 | -
+--td-slider-dot-size | 40rpx | -
+--td-slider-text-color | @text-color-primary | -

package/dist/slider/README.md

@@ -0,0 +1,127 @@
+---
+title: Slider 滑动选择器
+description: 用于选择横轴上的数值、区间、档位。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TSlider from '@tdesign/uniapp/slider/slider.vue';
+```
+
+### 组件类型
+
+单游标滑块
+
+{{ base }}
+
+双游标滑块
+
+{{ range }}
+
+带数值滑动选择器
+
+{{ label }}
+
+带刻度滑动选择器
+
+{{ step }}
+
+### 组件状态
+
+滑块禁用状态
+
+{{ disabled }}
+
+#### 特殊样式
+
+胶囊型滑块
+
+{{ capsule }}
+
+#### 垂直状态
+
+垂直方向的滑块
+
+{{ vertical }}
+
+## FAQ
+
+当 slider 外层使用 `hidden` 包裹，需要在 `hidden = false` 时，重新调用组件的 `init` 方法，才能正常渲染（在t-popup/t-dialog中同理）。如下：
+
+```html
+<t-slider id="slider" />
+```
+
+```js
+const $slider = this.selectComponent('#slider');
+
+$slider.init();
+```
+
+## API
+
+### Slider Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
+disabled | Boolean | undefined | 是否禁用组件 | N
+disabled-color | Array | [] | 已废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
+label | String / Boolean / Function | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
+marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
+max | Number | 100 | 滑块范围最大值 | N
+min | Number | 0 | 滑块范围最小值 | N
+range | Boolean | false | 双游标滑块 | N
+show-extreme-value | Boolean | false | 是否边界值 | N
+step | Number | 1 | 步长 | N
+theme | String | default | 滑块风格。可选项：default/capsule | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/slider/type.ts) | N
+default-value | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/slider/type.ts) | N
+vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） | N
+
+### Slider Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: SliderValue })` | 滑块值变化时触发
+dragend | `(context: { value: SliderValue, e: TouchEvent })` | 结束拖动时触发
+dragstart | `(context: { e: TouchEvent })` | 开始拖动时触发
+
+### Slider External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-bar | 滑道底部样式类
+t-class-bar-active | 滑道激活态样式类
+t-class-bar-disabled | 滑道禁用态样式类
+t-class-cursor | 游标样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-slider-active-color | @brand-color | -
+--td-slider-bar-height | 8rpx | -
+--td-slider-bar-width | 8rpx | -
+--td-slider-capsule-bar-color | @bg-color-component | -
+--td-slider-capsule-bar-heihgt | 48rpx | -
+--td-slider-capsule-bar-width | 48rpx | -
+--td-slider-capsule-line-heihgt | 36rpx | -
+--td-slider-default-color | @bg-color-component | -
+--td-slider-disabled-color | @brand-color-disabled | -
+--td-slider-disabled-text-color | @text-color-disabled | -
+--td-slider-dot-bg-color | #fff | -
+--td-slider-dot-color | @component-border | -
+--td-slider-dot-disabled-bg-color | #fff | -
+--td-slider-dot-disabled-border-color | #f3f3f3 | -
+--td-slider-dot-size | 40rpx | -
+--td-slider-text-color | @text-color-primary | -

package/dist/slider/computed.js

@@ -0,0 +1,9 @@
+import { getRegExp } from '../common/runtime/wxs-polyfill';
+
+const REGEXP = getRegExp('[$][{value}]{7}');
+
+export function getValue(label, value) {
+  if (label && label === 'true') return value;
+  if (REGEXP.test(label)) return label.replace(REGEXP, value);
+}
+

package/dist/slider/props.ts

@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdSliderProps } from './type';
+export default {
+  /** 是否禁用组件 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
+  label: {
+    type: [String, Boolean, Function],
+    default: false as TdSliderProps['label'],
+  },
+  /** 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }` */
+  marks: {
+    type: [Object, Array],
+    default: () => ({}) as TdSliderProps['marks'],
+  },
+  /** 滑块范围最大值 */
+  max: {
+    type: Number,
+    default: 100,
+  },
+  /** 滑块范围最小值 */
+  min: {
+    type: Number,
+    default: 0,
+  },
+  /** 双游标滑块 */
+  range: Boolean,
+  /** 是否边界值 */
+  showExtremeValue: Boolean,
+  /** 步长 */
+  step: {
+    type: Number,
+    default: 1,
+  },
+  /** 滑块风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdSliderProps['theme'],
+    validator(val: TdSliderProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'capsule'].includes(val);
+    },
+  },
+  /** 滑块值 */
+  value: {
+    type: [Number, Array],
+    default: 0 as TdSliderProps['value'],
+  },
+  /** 滑块值，非受控属性 */
+  defaultValue: {
+    type: [Number, Array],
+    default: 0 as TdSliderProps['defaultValue'],
+  },
+  /** 是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度） */
+  vertical: Boolean,
+  /** 滑块值变化时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 结束拖动时触发 */
+  onDragend: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 开始拖动时触发 */
+  onDragstart: {
+    type: Function,
+    default: () => ({}),
+  },
+};