@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/icon/icon.vue

@@ -0,0 +1,121 @@
+<template>
+  <view
+    :class="[tClass, prefix || 't-icon']"
+    :style="tools._style([iconStyle, customStyle])"
+    :aria-hidden="ariaHidden"
+    :aria-label="ariaLabel"
+    :aria-role="ariaRole"
+    @click="onTap"
+  >
+    <view
+      v-if="isImage"
+      :class="classPrefix + '--image'"
+    >
+      <image
+        :src="name"
+        mode="aspectFit"
+        :class="classPrefix + '__image'"
+      />
+    </view>
+    <div
+      v-if="tools.isValidIconName(name) && !isImage"
+      :class="(prefix ? prefix : classPrefix) + '-' + name + ' ' + classPrefix + '-base'"
+    />
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { styles, addUnit, getRect } from '../common/utils';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-icon`;
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [`${prefix}-class`],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      componentPrefix: prefix,
+      classPrefix: name,
+      isImage: false,
+      iconStyle: undefined,
+      tools,
+    };
+  },
+  watch: {
+    name: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    color: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    size: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+    style: {
+      handler() {
+        this.setIconStyle();
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onTap(t) {
+      this.$emit('click', t);
+    },
+    setIconStyle() {
+      const {
+        name,
+        color,
+        size,
+        classPrefix,
+      } = this;
+      const isImage = name.indexOf('/') !== -1;
+      const sizeValue = addUnit(size);
+      const colorStyle = color ? {
+        color,
+      } : {};
+      const fontStyle = size ? {
+        'font-size': sizeValue,
+      } : {};
+      const iconStyle = { ...colorStyle, ...fontStyle };
+      this.isImage = isImage;
+
+      if (isImage) {
+        let iconSize = sizeValue;
+        if (!iconSize) {
+          getRect(this, `.${classPrefix}`)
+            .then((res) => {
+              iconSize = addUnit(res?.height);
+            })
+            .catch(() => {});
+        }
+
+        iconStyle.width = iconSize;
+        iconStyle.height = iconSize;
+      }
+      this.iconStyle = `${styles(iconStyle)}`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './icon.css';
+</style>

package/dist/icon/props.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdIconProps } from './type';
+export default {
+  /** 图标颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
+  /** 图标名称或图片链接 */
+  name: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  /** 自定义图标前缀 */
+  prefix: {
+    type: String,
+    default: '',
+  },
+  /** 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px` */
+  size: {
+    type: [String, Number],
+    default: '' as TdIconProps['size'],
+  },
+  /** 点击图标时触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/icon/type.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdIconProps {
+  /**
+   * 图标颜色
+   * @default ''
+   */
+  color?: string;
+  /**
+   * 图标名称或图片链接
+   * @default ''
+   */
+  name: string;
+  /**
+   * 自定义图标前缀
+   * @default ''
+   */
+  prefix?: string;
+  /**
+   * 图标大小, 如 `20`, `20px`, `48rpx`, 默认单位是 `px`
+   * @default ''
+   */
+  size?: string | number;
+  /**
+   * 点击图标时触发
+   */
+  onClick?: () => void;
+}

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

@@ -0,0 +1,51 @@
+:: BASE_DOC ::
+
+## API
+
+### Image Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+error | String | 'default' | \- | N
+height | String / Number | - | \- | N
+lazy | Boolean | false | \- | N
+loading | String | 'default' | \- | N
+mode | String | scaleToFill | options: scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
+shape | String | square | options: circle/round/square | N
+show-menu-by-longpress | Boolean | false | \- | N
+src | String | - | \- | N
+t-id | String | - | image tag id | N
+webp | Boolean | false | \- | N
+width | String / Number | - | \- | N
+
+### Image Events
+
+name | params | description
+-- | -- | --
+error | `(context: { e: ImageEvent })` | trigger on image load failed。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
+load | `(context: { e: ImageEvent })` | trigger on image loaded。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
+
+### Image Slots
+
+name | Description
+-- | --
+error | \-
+loading | \-
+
+### Image External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-load | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-image-color | @text-color-placeholder | -
+--td-image-loading-bg-color | @bg-color-secondarycontainer | -
+--td-image-loading-color | @text-color-placeholder | -
+--td-image-round-radius | @radius-default | -

package/dist/image/README.md

@@ -0,0 +1,86 @@
+---
+title: Image 图片
+description: 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TImage from '@tdesign/uniapp/image/image.vue';
+```
+
+### 裁切样式
+
+{{ base }}
+
+### 加载状态
+
+{{ status }}
+
+## 常见问题
+
+<details>
+  <summary>
+    本地图片无法正确引用?
+    <span class="icon">👇</span>
+  </summary>
+  <p style="margin-top: 10px; color: rgba(0, 0, 0, .6)">
+    建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
+  </p>
+</details>
+
+## API
+
+### Image Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+error | String | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N
+height | String / Number | - | 高度，默认单位为`px` | N
+lazy | Boolean | false | 是否开启图片懒加载 | N
+loading | String | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” | N
+mode | String | scaleToFill | 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。可选项：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
+shape | String | square | 图片圆角类型。可选项：circle/round/square | N
+show-menu-by-longpress | Boolean | false | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单 | N
+src | String | - | 图片链接 | N
+t-id | String | - | 图片标签id | N
+webp | Boolean | false | 默认不解析 webP 格式，只支持网络资源 | N
+width | String / Number | - | 宽度，默认单位为`px` | N
+
+### Image Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | `(context: { e: ImageEvent })` | 图片加载失败时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
+load | `(context: { e: ImageEvent })` | 图片加载完成时触发。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts)
+
+### Image Slots
+
+名称 | 描述
+-- | --
+error | 自定义 `error` 显示内容
+loading | 自定义 `loading` 显示内容
+
+### Image External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-load | 加载样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-image-color | @text-color-placeholder | -
+--td-image-loading-bg-color | @bg-color-secondarycontainer | -
+--td-image-loading-color | @text-color-placeholder | -
+--td-image-round-radius | @radius-default | -

package/dist/image/image.css

@@ -0,0 +1,44 @@
+.t-image {
+  position: relative;
+  display: inline-block;
+}
+.t-image__mask,
+.t-image__img {
+  color: var(--td-image-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  vertical-align: top;
+  width: inherit;
+  height: inherit;
+}
+.t-image__mask {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--td-image-loading-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+  color: var(--td-image-loading-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-image--loading-text {
+  width: 0;
+  height: 0;
+}
+.t-image__common {
+  width: 100%;
+  height: 100%;
+}
+.t-image--lazy {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.t-image--shape-circle {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.t-image--shape-round {
+  border-radius: var(--td-image-round-radius, var(--td-radius-default, 12rpx));
+  overflow: hidden;
+}
+.t-image--shape-square {
+  border-radius: 0;
+  overflow: hidden;
+}

package/dist/image/image.vue

@@ -0,0 +1,207 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="[tClass, classPrefix]"
+  >
+    <view
+      v-if="isLoading"
+      :style="tools._style([innerStyle])"
+      :class="classPrefix + '__mask ' + classPrefix + '--loading ' + classPrefix + '--shape-' + shape"
+      :aria-hidden="ariaHidden"
+    >
+      <t-loading
+        v-if="loading === 'default'"
+        theme="dots"
+        size="44rpx"
+        loading
+        inherit-color
+        :t-class="tClassLoad"
+        :t-class-text="classPrefix + '--loading-text'"
+      />
+      <view
+        v-else-if="loading !== '' && loading !== 'slot'"
+        :class="classPrefix + '__common ' + tClassLoad"
+      >
+        {{ loading }}
+      </view>
+      <slot
+        v-else
+        name="loading"
+      />
+    </view>
+    <view
+      v-else-if="isFailed"
+      :style="tools._style([innerStyle])"
+      :class="[
+        classPrefix + '__mask ' + classPrefix + '--failed ' + classPrefix + '--shape-' + shape,
+        tClassError
+      ]"
+      :aria-hidden="ariaHidden"
+    >
+      <view
+        v-if="error === 'default'"
+        style="font-size: 44rpx"
+        :class="tClassLoad"
+      >
+        <t-icon
+          name="close"
+          aria-role="img"
+          aria-label="加载失败"
+        />
+      </view>
+      <view
+        v-else-if="error && error !== 'slot'"
+        :class="[classPrefix + '__common ', tClassLoad]"
+      >
+        {{ error }}
+      </view>
+      <slot
+        v-else
+        name="error"
+      />
+    </view>
+    <image
+      v-if="!isFailed"
+      :id="tId || 'image'"
+      :style="tools._style([innerStyle])"
+      :class="[
+        classPrefix + '__img ' + classPrefix + '--shape-' + shape + ' ',
+        (isLoading ? classPrefix + '--lazy' : '') + ' ',
+        tClassImage
+      ]"
+      :src="src"
+      :mode="mode"
+      :webp="webp"
+      :lazy-load="lazy"
+      :show-menu-by-longpress="showMenuByLongpress"
+      :aria-hidden="ariaHidden || isLoading || isFailed"
+      :aria-label="ariaLabel"
+      @click="onClick"
+      @load="onLoaded"
+      @error="onLoadError"
+    />
+  </view>
+</template>
+<script>
+import TLoading from '../loading/loading';
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import ImageProps from './props';
+import { prefix } from '../common/config';
+import { addUnit, getRect, appBaseInfo } from '../common/utils';
+import { compareVersion } from '../common/version';
+import tools from '../common/utils.wxs';
+
+
+const name = `${prefix}-image`;
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-load`,
+    `${prefix}-class-image`,
+    `${prefix}-class-error`,
+  ],
+  components: {
+    TLoading,
+    TIcon,
+  },
+  props: {
+    ...ImageProps,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      prefix,
+      isLoading: true,
+      isFailed: false,
+      innerStyle: '',
+      classPrefix: name,
+      tools,
+      preSrc: '',
+    };
+  },
+  watch: {
+    src() {
+      if (this.preSrc !== this.src) {
+        this.update();
+      }
+    },
+    width: 'calcSize',
+    height: 'calcSize',
+  },
+  mounted() {
+    this.calcSize(this.width, this.height);
+  },
+  methods: {
+    onLoaded(e) {
+      const version = appBaseInfo.SDKVersion;
+      const {
+        mode,
+        tId,
+      } = this;
+
+      const lower = compareVersion(version, '2.10.3') < 0;
+      // #ifdef MP-WEIXIN || MP-QQ
+      if ('heightFix' === mode && lower) {
+        getRect(this, `#${tId || 'image'}`).then((e) => {
+          const {
+            height,
+            width,
+          } = e;
+
+          this.innerStyle = `height: ${addUnit(height)}; width: ${width}px;`;
+        })
+          .catch(() => {
+
+          });
+      }
+      // #endif
+      this.isLoading = false;
+      this.isFailed = false;
+      this.$emit('load', { e });
+    },
+    onLoadError(e) {
+      this.isLoading = false;
+      this.isFailed = true;
+
+      this.$emit('error', { e });
+    },
+    calcSize(width = this.width, height = this.height) {
+      let innerStyle = '';
+      if (width) {
+        innerStyle += `width: ${addUnit(width)};`;
+      }
+      if (height) {
+        innerStyle += `height: ${addUnit(height)};`;
+      }
+      this.innerStyle = innerStyle;
+    },
+    update() {
+      const {
+        src,
+      } = this;
+      this.preSrc = src;
+      if (src) {
+        this.isLoading = true;
+        this.isFailed = false;
+      } else {
+        this.onLoadError({
+          errMsg: '图片链接为空',
+        });
+      }
+    },
+    onClick(e) {
+      this.$emit('click', e);
+    },
+  },
+});
+</script>
+<style scoped>
+@import './image.css';
+</style>

package/dist/image/props.ts

@@ -0,0 +1,71 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdImageProps } from './type';
+export default {
+  /** 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” */
+  error: {
+    type: String,
+    default: 'default' as TdImageProps['error'],
+  },
+  /** 高度，默认单位为`px` */
+  height: {
+    type: [String, Number],
+  },
+  /** 是否开启图片懒加载 */
+  lazy: Boolean,
+  /** 加载态内容。值为 `default` 则表示使用默认加载中风格；值为其他则表示普通文本内容，如“加载中” */
+  loading: {
+    type: String,
+    default: 'default' as TdImageProps['loading'],
+  },
+  /** 图片裁剪、缩放的模式；[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html) */
+  mode: {
+    type: String,
+    default: 'scaleToFill' as TdImageProps['mode'],
+    validator(val: TdImageProps['mode']): boolean {
+      if (!val) return true;
+      return ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right'].includes(val);
+    },
+  },
+  /** 图片圆角类型 */
+  shape: {
+    type: String,
+    default: 'square' as TdImageProps['shape'],
+    validator(val: TdImageProps['shape']): boolean {
+      if (!val) return true;
+      return ['circle', 'round', 'square'].includes(val);
+    },
+  },
+  /** 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单 */
+  showMenuByLongpress: Boolean,
+  /** 图片链接 */
+  src: {
+    type: String,
+    default: '',
+  },
+  /** 图片标签id */
+  tId: {
+    type: String,
+    default: '',
+  },
+  /** 默认不解析 webP 格式，只支持网络资源 */
+  webp: Boolean,
+  /** 宽度，默认单位为`px` */
+  width: {
+    type: [String, Number],
+  },
+  /** 图片加载失败时触发 */
+  onError: {
+    type: Function,
+    default: () => ({}),
+  },
+  /** 图片加载完成时触发 */
+  onLoad: {
+    type: Function,
+    default: () => ({}),
+  },
+};