@tdesign/uniapp 0.7.1 → 0.7.3

package/dist/check-tag/check-tag.vue

@@ -9,19 +9,19 @@
       :class="classPrefix + '__icon'"
     >
       <block
-        v-if="_icon"
+        v-if="innerIcon"
         name="icon"
       >
         <t-icon
-          :custom-style="_icon.style || ''"
+          :custom-style="innerIcon.style || ''"
           :t-class="prefix + '-icon'"
-          :prefix="_icon.prefix"
-          :name="_icon.name"
-          :size="_icon.size"
-          :color="_icon.color"
-          :aria-hidden="!!_icon.ariaHidden"
-          :aria-label="_icon.ariaLabel"
-          :aria-role="_icon.ariaRole"
+          :prefix="innerIcon.prefix"
+          :name="innerIcon.name"
+          :size="innerIcon.size"
+          :color="innerIcon.color"
+          :aria-hidden="!!innerIcon.ariaHidden"
+          :aria-label="innerIcon.ariaLabel"
+          :aria-role="innerIcon.ariaRole"
         />
       </block>
       <slot name="icon" />
@@ -84,7 +84,7 @@ export default uniComponent({
       classPrefix: name,
       className: '',
       tools,
-      _icon: null,
+      innerIcon: null,
 
       dataChecked: coalesce(this.checked, this.defaultChecked),
     };
@@ -95,7 +95,7 @@ export default uniComponent({
     dataChecked: 'setClass',
     icon: {
       handler(e) {
-        this._icon = calcIcon(e);
+        this.innerIcon = calcIcon(e);
       },
       immediate: true,
     },
@@ -143,7 +143,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './check-tag.css';
-
-</style>
+<style scoped src="./check-tag.css"></style>

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

@@ -15,7 +15,7 @@ default-checked | Boolean | - | uncontrolled property | N
 content | String | - | \- | N
 content-disabled | Boolean | - | \- | N
 disabled | Boolean | undefined | \- | N
-icon | String / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+icon | String / Array | 'circle' | Typescript: `CheckboxIconType` `type CheckboxIconType = 'circle' \| 'line' \| 'rectangle' \| string[];`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox/type.ts) | N
 indeterminate | Boolean | false | \- | N
 label | String | - | \- | N
 max-content-row | Number | 5 | \- | N
@@ -24,7 +24,7 @@ name | String | - | \- | N
 placement | String | left | options: left/right | N
 readonly | Boolean | undefined | \- | N
 relation-key | String | - | \- | N
-value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
+value | String / Number / Boolean | - | value of checkbox。Typescript: `string \| number \| boolean` | N
 
 ### Checkbox Events
 
@@ -58,14 +58,14 @@ name | type | default | description | required
 custom-style | Object | - | CSS(Cascading Style Sheets) | N
 borderless | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
-keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
 max | Number | undefined | \- | N
 name | String | - | \- | N
-options | Array | [] | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+options | Array | [] | Typescript: `Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean;icon?:CheckboxIconType; checkAll?: true }`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 readonly | Boolean | undefined | \- | N
 relation-key | String | - | \- | N
-value | Array | - | `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
-default-value | Array | - | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+value | Array | - | `v-model:value` is supported。Typescript: `T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+default-value | Array | - | uncontrolled property。Typescript: `T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 
 ### CheckboxGroup Events
 

package/dist/checkbox/README.md

@@ -70,7 +70,7 @@ default-checked | Boolean | - | 是否选中。非受控属性 | N
 content | String | - | 多选框内容 | N
 content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
-icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`'circle' \| 'line' \| 'rectangle' \| string[]` | N
+icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型：`CheckboxIconType` `type CheckboxIconType = 'circle' \| 'line' \| 'rectangle' \| string[];`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox/type.ts) | N
 indeterminate | Boolean | false | 是否为半选 | N
 label | String | - | 主文案 | N
 max-content-row | Number | 5 | 内容最大行数限制 | N
@@ -113,14 +113,14 @@ t-class-label | 标签样式类
 custom-style | Object | - | 自定义样式 | N
 borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N
 disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
-keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
 max | Number | undefined | 支持最多选中的数量 | N
 name | String | - | 统一设置内部复选框 HTML 属性 | N
-options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean;icon?:CheckboxIconType; checkAll?: true }`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 relation-key | String | - | -1 时代表独立，不再寻找 parent，用于头条小程序 | N
-value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
-default-value | Array | - | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
+default-value | Array | - | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
 
 ### CheckboxGroup Events
 

package/dist/checkbox/checkbox.vue

@@ -2,15 +2,15 @@
   <view
     :id="tId"
     :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', _disabled]]) + ' ' + tClass"
+    :class="tools.cls(classPrefix, [placement, theme, ['checked', dataChecked], ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
     aria-role="checkbox"
     :aria-checked="dataChecked ? (dataIndeterminate ? 'mixed' : true) : false"
-    :aria-disabled="_disabled ? true : false"
+    :aria-disabled="iDisabled ? true : false"
     @click.stop="handleTap"
   >
     <view
       v-if="theme == 'default'"
-      :class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon"
+      :class="tools.cls(classPrefix + '__icon', [placement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon"
     >
       <slot
         v-if="icon === 'slot'"
@@ -38,7 +38,7 @@
         />
         <view
           v-else-if="!dataChecked && (icon == 'circle' || icon == 'rectangle')"
-          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
+          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && icon == 'line'"
@@ -54,7 +54,7 @@
       <view
         :class="
           tools.cls(classPrefix + '__title', [
-            ['disabled', _disabled],
+            ['disabled', iDisabled],
             ['checked', dataChecked]
           ]) +
             ' ' +
@@ -69,7 +69,7 @@
         <slot name="label" />
       </view>
       <view
-        :class="tools.cls(classPrefix + '__description', [['disabled', _disabled]]) + ' ' + tClassContent"
+        :class="tools.cls(classPrefix + '__description', [['disabled', iDisabled]]) + ' ' + tClassContent"
         :style="'-webkit-line-clamp:' + maxContentRow"
       >
         <block v-if="content">
@@ -132,7 +132,7 @@ export default uniComponent({
     return {
       prefix,
       classPrefix: name,
-      _disabled: false,
+      iDisabled: false,
       tools,
 
       dataBorderless: this.borderless,
@@ -166,7 +166,7 @@ export default uniComponent({
     },
     disabled: {
       handler(v) {
-        this._disabled = v;
+        this.iDisabled = v;
       },
       immediate: true,
     },
@@ -183,7 +183,7 @@ export default uniComponent({
       const valueSet = new Set(value);
       const checkedFromParent = valueSet.has(this.value);
       const data = {
-        _disabled: this.disabled == null ? disabled : this.disabled,
+        iDisabled: this.disabled == null ? disabled : this.disabled,
       };
 
       data.dataBorderless = !!(coalesce(this.borderless, borderless));
@@ -210,10 +210,10 @@ export default uniComponent({
       });
     },
     handleTap(e) {
-      const { _disabled, readonly, contentDisabled } = this;
+      const { iDisabled, readonly, contentDisabled } = this;
       const { target } = e.currentTarget.dataset;
 
-      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+      if (iDisabled || readonly || (target === 'text' && contentDisabled)) return;
 
       const { value, label, checkAll, dataIndeterminate } = this;
       const checked = !this.dataChecked;
@@ -228,11 +228,9 @@ export default uniComponent({
     },
 
     setDisabled(disabled) {
-      this._disabled = this.disabled || disabled;
+      this.iDisabled = this.disabled || disabled;
     },
   },
 });
 </script>
-<style scoped>
-@import './checkbox.css';
-</style>
+<style scoped src="./checkbox.css"></style>

package/dist/checkbox/type.ts

@@ -43,7 +43,7 @@ export interface TdCheckboxProps {
    * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
    * @default 'circle'
    */
-  icon?: 'circle' | 'line' | 'rectangle' | string[];
+  icon?: CheckboxIconType;
   /**
    * 是否为半选
    * @default false
@@ -94,3 +94,5 @@ export interface TdCheckboxProps {
     context: { value: boolean | number | string; label: boolean | number | string };
   }) => void;
 }
+
+export type CheckboxIconType = 'circle' | 'line' | 'rectangle' | string[];

package/dist/checkbox-group/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import type { CheckboxIconType } from '../checkbox/type';
 import type { KeysType } from '../common/common';
 
 export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
@@ -66,6 +67,7 @@ export interface CheckboxOptionObj {
   label?: string;
   value?: string | number;
   disabled?: boolean;
+  icon?: CheckboxIconType;
   checkAll?: true;
 }
 

package/dist/col/col.vue

@@ -46,9 +46,7 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './col.css';
-</style>
+<style scoped src="./col.css"></style>
 <style scoped>
 .t-col {
   /* 适配 qq 小程序等 */

package/dist/collapse/collapse.vue

@@ -114,6 +114,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './collapse.css';
-</style>
+<style scoped src="./collapse.css"></style>

package/dist/collapse-panel/collapse-panel.vue

@@ -233,6 +233,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './collapse-panel.css';
-</style>
+<style scoped src="./collapse-panel.css"></style>

package/dist/color-picker/color-picker.vue

@@ -234,7 +234,7 @@ export default uniComponent({
     }, 33);
     this.debouncedUpdateEleRect = debounce(e => this.updateEleRect(e), 150);
   },
-  beforeUnMount() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   },
   methods: {
@@ -496,6 +496,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './color-picker.css';
-</style>
+<style scoped src="./color-picker.css"></style>

package/dist/color-picker/template.vue

@@ -193,6 +193,4 @@ export default {
 };
 </script>
 
-<style scoped>
-@import './color-picker.css';
-</style>
+<style scoped src="./color-picker.css"></style>

package/dist/common/src/instantiationDecorator.js

@@ -80,6 +80,12 @@ export const toComponent = function (options) {
     });
   };
 
+  // #ifdef Vue2
+  if (options.beforeUnmount) {
+    options.beforeDestroy = options.beforeUnmount;
+  }
+  // #endif
+
   options.methods._trigger = function (evtName, detail, opts) {
     const target = controlledProps.find(item => item.event === evtName);
 

package/dist/common/style/theme/index.css

@@ -144,9 +144,10 @@
     --td-component-border: var(--td-gray-color-4);
 
     --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
-    --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
-    --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
-      0 8px 10px -5px rgba(0, 0, 0, 8%);
+    --td-shadow-2:
+      0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
+    --td-shadow-3:
+      0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
     --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
 
     --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
@@ -162,7 +163,6 @@
   }
 }
 
-
 /* ./raw/_dark.less */
 @media (prefers-color-scheme: dark) {
   /* #ifdef H5 */
@@ -324,7 +324,6 @@
   }
 }
 
-
 /* ./raw/_radius.less */
 page,
 .page {
@@ -336,54 +335,53 @@ page,
   --td-radius-circle: 50%;
 }
 
-
 /* ./raw/_font.less */
 page,
 .page {
   --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
   --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
 
-  --td-font-size-link-small: 48px;
-  --td-font-size-link-medium: 56px;
-  --td-font-size-link-large: 64px;
-  --td-font-size-mark-extraSmall: 40px;
-  --td-font-size-mark-small: 48px;
-  --td-font-size-mark-medium: 56px;
-  --td-font-size-mark-large: 64px;
-  --td-font-size-body-extraSmall: 40px;
-  --td-font-size-body-small: 48px;
-  --td-font-size-body-medium: 56px;
-  --td-font-size-body-large: 64px;
-  --td-font-size-title-small: 56px;
-  --td-font-size-title-medium: 64px;
-  --td-font-size-title-large: 72px;
-  --td-font-size-title-extraLarge: 80px;
-  --td-font-size-headline-small: 96px;
-  --td-font-size-headline-medium: 112px;
-  --td-font-size-headline-large: 144px;
-  --td-font-size-display-medium: 192px;
-  --td-font-size-display-large: 256px;
-
-  --td-line-height-link-small: 80px;
-  --td-line-height-link-medium: 88px;
-  --td-line-height-link-large: 96px;
-  --td-line-height-mark-extraSmall: 64px;
-  --td-line-height-mark-small: 80px;
-  --td-line-height-mark-medium: 88px;
-  --td-line-height-mark-large: 96px;
-  --td-line-height-body-extraSmall: 64px;
-  --td-line-height-body-small: 80px;
-  --td-line-height-body-medium: 88px;
-  --td-line-height-body-large: 96px;
-  --td-line-height-title-small: 88px;
-  --td-line-height-title-medium: 96px;
-  --td-line-height-title-large: 104px;
-  --td-line-height-title-extraLarge: 112px;
-  --td-line-height-headline-small: 128px;
-  --td-line-height-headline-medium: 144px;
-  --td-line-height-headline-large: 176px;
-  --td-line-height-display-medium: 224px;
-  --td-line-height-display-large: 288px;
+  --td-font-size-link-small: 12px;
+  --td-font-size-link-medium: 14px;
+  --td-font-size-link-large: 16px;
+  --td-font-size-mark-extraSmall: 10px;
+  --td-font-size-mark-small: 12px;
+  --td-font-size-mark-medium: 14px;
+  --td-font-size-mark-large: 16px;
+  --td-font-size-body-extraSmall: 10px;
+  --td-font-size-body-small: 12px;
+  --td-font-size-body-medium: 14px;
+  --td-font-size-body-large: 16px;
+  --td-font-size-title-small: 14px;
+  --td-font-size-title-medium: 16px;
+  --td-font-size-title-large: 18px;
+  --td-font-size-title-extraLarge: 20px;
+  --td-font-size-headline-small: 24px;
+  --td-font-size-headline-medium: 28px;
+  --td-font-size-headline-large: 36px;
+  --td-font-size-display-medium: 48px;
+  --td-font-size-display-large: 64px;
+
+  --td-line-height-link-small: 20px;
+  --td-line-height-link-medium: 22px;
+  --td-line-height-link-large: 24px;
+  --td-line-height-mark-extraSmall: 16px;
+  --td-line-height-mark-small: 20px;
+  --td-line-height-mark-medium: 22px;
+  --td-line-height-mark-large: 24px;
+  --td-line-height-body-extraSmall: 16px;
+  --td-line-height-body-small: 20px;
+  --td-line-height-body-medium: 22px;
+  --td-line-height-body-large: 24px;
+  --td-line-height-title-small: 22px;
+  --td-line-height-title-medium: 24px;
+  --td-line-height-title-large: 26px;
+  --td-line-height-title-extraLarge: 28px;
+  --td-line-height-headline-small: 32px;
+  --td-line-height-headline-medium: 36px;
+  --td-line-height-headline-large: 44px;
+  --td-line-height-display-medium: 56px;
+  --td-line-height-display-large: 72px;
 
   --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
   --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
@@ -425,20 +423,18 @@ page,
   --td-font-size-xxl: var(--td-font-size-headline-large);
 }
 
-
 /* ./raw/_spacer.less */
 page,
 .page {
-  --td-spacer: 32px;
-  --td-spacer-1: 48px;
-  --td-spacer-2: 64px;
-  --td-spacer-3: 96px;
-  --td-spacer-4: 128px;
-  --td-spacer-5: 192px;
-  --td-spacer-6: 320px;
+  --td-spacer: 8px;
+  --td-spacer-1: 12px;
+  --td-spacer-2: 16px;
+  --td-spacer-3: 24px;
+  --td-spacer-4: 32px;
+  --td-spacer-5: 48px;
+  --td-spacer-6: 80px;
 }
 
-
 /* ./raw/_components.less */
 @media (prefers-color-scheme: light) {
   page,

package/dist/count-down/count-down.vue

@@ -83,7 +83,7 @@ export default uniComponent({
   mounted() {
 
   },
-  beforeUnMount() {
+  beforeUnmount() {
     if (this.timeoutId) {
       clearTimeout(this.timeoutId);
       this.timeoutId = null;
@@ -161,6 +161,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './count-down.css';
-</style>
+<style scoped src="./count-down.css"></style>

package/dist/date-time-picker/date-time-picker.vue

@@ -565,6 +565,4 @@ export default uniComponent({
 
 });
 </script>
-<style scoped>
-@import './date-time-picker.css';
-</style>
+<style scoped src="./date-time-picker.css"></style>