first commit

uni_modules/tdesign-uniapp/components/empty/README.en-US.md

@@ -0,0 +1,39 @@
+:: BASE_DOC ::
+
+## API
+
+### Empty Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+description | String | - | empty component description | N
+icon | String / Object | - | \- | N
+image | String | - | image url, or Image component props, or custom any node you need | N
+
+### Empty Slots
+
+name | Description
+-- | --
+action | action block
+description | empty component description
+image | image url, or Image component props, or custom any node you need
+
+### Empty External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-description | \-
+t-class-image | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | -
+--td-empty-description-color | @text-color-placeholder | -
+--td-empty-description-font | @font-body-medium | -
+--td-empty-description-margin-top | @spacer-2 | -
+--td-empty-icon-color | @text-color-placeholder | -

uni_modules/tdesign-uniapp/components/empty/README.md

@@ -0,0 +1,69 @@
+---
+title: Empty 空状态
+description: 用于空状态时的占位提示。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TEmpty from '@tdesign/uniapp/empty/empty.vue';
+```
+
+### 类型
+
+图标空状态
+
+{{ base }}
+
+自定义图片空状态
+
+{{ imageEmpty }}
+
+带操作空状态
+
+{{ buttonEmpty }}
+
+
+
+## API
+
+### Empty Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+description | String | - | 描述文字 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String | - | 图片地址 | N
+
+### Empty Slots
+
+名称 | 描述
+-- | --
+action | 操作按钮
+description | 自定义 `description` 显示内容
+image | 自定义 `image` 显示内容
+
+### Empty External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-empty-action-margin-top | @spacer-4 | -
+--td-empty-description-color | @text-color-placeholder | -
+--td-empty-description-font | @font-body-medium | -
+--td-empty-description-margin-top | @spacer-2 | -
+--td-empty-icon-color | @text-color-placeholder | -

uni_modules/tdesign-uniapp/components/empty/empty.css

@@ -0,0 +1,21 @@
+.t-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+:deep(.t-empty__icon) {
+  font-size: 192rpx;
+  color: var(--td-empty-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+}
+.t-empty__thumb + .t-empty__description:not(:empty) {
+  margin-top: var(--td-empty-description-margin-top, var(--td-spacer-2, 32rpx));
+}
+.t-empty__description {
+  text-align: center;
+  color: var(--td-empty-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-empty-description-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+  white-space: pre-wrap;
+}
+.t-empty__description + .t-empty__actions:not(:empty) {
+  margin-top: var(--td-empty-action-margin-top, var(--td-spacer-4, 64rpx));
+}

uni_modules/tdesign-uniapp/components/empty/empty.vue

@@ -0,0 +1,140 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="[
+      tClass,
+      classPrefix
+    ]"
+  >
+    <view
+      :aria-hidden="true"
+      :class="classPrefix + '__thumb'"
+    >
+      <t-image
+        v-if="image"
+        :t-class="tClassImage"
+        :src="image"
+        mode="aspectFit"
+      />
+      <block
+        v-else-if="iconName || tools.isNoEmptyObj(iconData)"
+        name="icon"
+      >
+        <t-icon
+          :custom-style="iconData.style || ''"
+          :t-class="iconTClass"
+          :class="iconClass"
+          :prefix="iconData.prefix"
+          :name="iconName || iconData.name"
+          :size="iconData.size"
+          :color="iconData.color"
+          :aria-hidden="!!iconData.ariaHidden"
+          :aria-label="iconData.ariaLabel"
+          :aria-role="iconData.ariaRole"
+        />
+      </block>
+      <slot
+        v-else
+        name="image"
+      />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__description ',
+        tClassDescription
+      ]"
+    >
+      <block v-if="description">
+        {{ description }}
+      </block>
+      <slot name="description" />
+    </view>
+    <view
+      :class="[
+        classPrefix + '__actions ',
+        tClassActions
+      ]"
+    >
+      <slot name="action" />
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { setIcon } from '../common/utils';
+import tools from '../common/utils.wxs';
+import { canUseVirtualHost } from '../common/version';
+
+
+const name = `${prefix}-empty`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-description`,
+    `${prefix}-class-image`,
+    `${prefix}-class-actions`,
+  ],
+  components: {
+    TIcon,
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+
+      iconName: '',
+      iconData: {},
+
+      tools,
+    };
+  },
+  computed: {
+    iconTClass() {
+      return canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconClass() {
+      return !canUseVirtualHost() ? this.iconRealClass : '';
+    },
+    iconRealClass() {
+      const { classPrefix, iconData } = this;
+      return `${classPrefix}__icon ${classPrefix}__icon--${iconData.activeIdx == iconData.index ? 'active ' : ' '}`;
+    },
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+});
+</script>
+<style scoped>
+@import './empty.css';
+</style>

uni_modules/tdesign-uniapp/components/empty/props.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export default {
+  /** 描述文字 */
+  description: {
+    type: String,
+  },
+  /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 图片地址 */
+  image: {
+    type: String,
+  },
+};

uni_modules/tdesign-uniapp/components/empty/type.ts

@@ -0,0 +1,20 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdEmptyProps {
+  /**
+   * 描述文字
+   */
+  description?: string;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 图片地址
+   */
+  image?: string;
+}