tmui-cli 2.0.3 → 2.0.4

package/data/uniappx/css/transform-origin.md

@@ -0,0 +1,298 @@
+## transform-origin
+
+transform-origin CSS 属性让你更改一个元素变形的原点。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+transform-origin: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?;
+```
+
+### 值限制
+- length
+- percentage
+- enum
+
+### transform-origin 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| top | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 相对于元素的顶部边缘进行变形 |
+| left | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 相对于元素的左侧边缘进行变形 |
+| right | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 相对于元素的右侧边缘进行变形 |
+| bottom | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 相对于元素的底部边缘进行变形 |
+| center | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 相对于元素的中心点进行变形 |
+
+### 默认值 @default-value 
+ | 平台 | 默认值 |
+| :- | :- |
+| uvue-app | 50% 50% |
+| uvue-web | 50% 50% 0 |
+
+ **注意**：W3C 默认值为：50% 50% 0
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transform/transform-origin.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transform/transform-origin.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transform/transform-origin
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transform/transform-origin
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view>
+      <view ref="transformView" class="view" @click="changetransform"></view>
+
+      <view class="text-container">
+        <text class="uni-title-text">text 组件 transform-origin ：</text>
+        <text class="uni-subtitle-text">点击下方 text 组件，不同 transform-origin 值（60px 30px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>
+        <text ref="textTransformView" class="text-view cyan-text" @click="changeTextTransform">点击 text 测试 transform-origin</text>
+      </view>
+
+      <view class="image-container">
+        <text class="uni-title-text">image 组件 transform-origin ：</text>
+        <text class="uni-subtitle-text">点击下方 image 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>
+        <image ref="imageTransformView" class="image-view" @click="changeImageTransform" src="/static/test-image/logo.png"></image>
+      </view>
+
+      <view class="scroll-view-container">
+        <text class="uni-title-text">scroll-view 组件 transform-origin ：</text>
+        <text class="uni-subtitle-text">点击下方 scroll-view 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>
+        <view class="scroll-view-item">
+          <scroll-view ref="scrollViewTransformView" class="scroll-view-base transform" @click="changeScrollViewTransform">
+            <text class="cyan-text">点击 scroll-view 测试 transform-origin</text>
+          </scroll-view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      <view class="test-container">
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件</text>
+          <text class="uni-info">设置值: {{data.transformOrigin}}</text>
+          <text class="uni-info">获取值: {{data.transformOriginActual}}</text>
+          <view class="test-box">
+            <view ref="viewRefDynamic" class="common-image" :style="{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }">
+              <text style="font-size: 12px;">view</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.transformOrigin}}</text>
+          <text class="uni-info">获取值: {{data.transformOriginActualText}}</text>
+          <view class="test-box">
+            <text ref="textRefDynamic" class="common-text" :style="{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }">text</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.transformOrigin}}</text>
+          <text class="uni-info">获取值: {{data.transformOriginActualImage}}</text>
+          <view class="test-box">
+            <image ref="imageRefDynamic" class="common-image" :style="{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }" src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="test-container">
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件拍平</text>
+          <text class="uni-info">设置值: {{data.transformOrigin}}</text>
+          <text class="uni-info">获取值: {{data.transformOriginActualFlat}}</text>
+          <view class="test-box">
+            <view ref="viewRefDynamicFlat" class="common-image" :style="{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }" flatten>
+              <text style="font-size: 12px;" flatten>view</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件拍平</text>
+          <text class="uni-info">设置值: {{data.transformOrigin}}</text>
+          <text class="uni-info">获取值: {{data.transformOriginActualTextFlat}}</text>
+          <view class="test-box">
+            <text ref="textRefDynamicFlat" class="common-text" :style="{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }" flatten>text</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件拍平</text>
+          <text class="uni-info">设置值: {{data.transformOrigin}}</text>
+          <text class="uni-info">获取值: {{data.transformOriginActualImageFlat}}</text>
+          <view class="test-box">
+            <image ref="imageRefDynamicFlat" class="common-image" :style="{ transformOrigin: data.transformOrigin, transform: 'rotate(45deg)' }" src="/static/test-image/logo.png" flatten></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="transformOriginEnum" title="transform-origin 枚举值" @change="radioChangeTransformOrigin" :compact="true"></enum-data>
+        <input-data :defaultValue="data.transformOrigin" title="transform-origin 自定义值" type="text" @confirm="inputChangeTransformOrigin"></input-data>
+      </view>
+
+      
+        <view class="scroll-view-container">
+          <text class="uni-title-text">native-view 组件 transform-origin ：</text>
+          <text class="uni-subtitle-text">点击下方 native-view 组件，不同 transform-origin 值（60px 60px、100% 0%、10px 10px）对 translate、scale、rotate 变换的影响</text>
+          <view class="scroll-view-item">
+            <test-native-view ref="nativeViewTransformView" class="scroll-view-base transform-native" @click="changeNativeViewTransform"></test-native-view>
+          </view>
+        </view>
+      
+
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .view {
+    width: 100px;
+    height: 100px;
+    transform-origin: 10px 10px;
+    background-color: aqua;
+    transform: translate(50px, 50px) scale(2);
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+  }
+
+  .text-view {
+    width: 200px;
+    height: 70px;
+    padding: 10px;
+    margin: 20px;
+    font-size: 16px;
+    transform-origin: 10px 10px;
+    background-color: aqua;
+    transform: scale(1);
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+    text-align: center;
+  }
+
+  .image-view {
+    width: 100px;
+    height: 100px;
+    margin: 20px;
+    transform-origin: 10px 10px;
+    transform: scale(1);
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+  }
+
+  .text-container {
+    width: 400px;
+    height: 280px;
+    margin-top: 200px;
+  }
+
+  .image-container {
+    width: 400px;
+    height: 300px;
+  }
+
+  .scroll-view-container {
+    width: 400px;
+    height: 300px;
+    margin-top: 20px;
+  }
+
+  .common-text {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    font-size: 12px;
+    color: white;
+  }
+
+  .common-image {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 120px;
+    background-color: gray;
+  }
+
+  .demo-box {
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 10px;
+    width: 100%;
+  }
+
+  .scroll-view-item {
+    position: relative;
+    width: 100%;
+    height:200px;
+    margin: 10px 0;
+  }
+
+  .scroll-view-base {
+    width: 200px;
+    height: 70px;
+    padding: 10px;
+    margin: 20px;
+    font-size: 16px;
+    transform-origin: 10px 10px;
+    background-color: aqua;
+    transform: scale(1);
+    border-width: 1px;
+    border-color: black;
+    border-style: solid;
+    text-align: center;
+    position: relative;
+  }
+
+  .transform-native {
+    background-color: #00FFFF80;
+  }
+
+  .cyan-text {
+    color: #1a1a1a;
+  }
+
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform-origin)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transform.transform-origin)

package/data/uniappx/css/transform.md

@@ -0,0 +1,50 @@
+## transform
+
+CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| 5.21 | 5.11 | 5.0 |
+
+### 语法
+```
+transform: none | <transform-list>;
+```
+
+### 值限制
+- enum
+
+### transform 的属性值
+| 名称 | 兼容性 | 描述 |
+| :- | :- | :- |
+| rotate(<angle>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 旋转元素以给定的角度（angle） |
+| rotateX(<angle>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 绕 X 轴旋转元素以给定的角度（angle） |
+| rotateY(<angle>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 绕 Y 轴旋转元素以给定的角度（angle） |
+| rotateZ(<angle>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 绕 Z 轴旋转元素以给定的角度（angle） |
+| scale(<number> <number>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 缩放元素的尺寸，水平和垂直方向分别使用给定的比例（number） |
+| scaleX(<number>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 水平方向缩放元素的尺寸，使用给定的比例（number） |
+| scaleY(<number>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 垂直方向缩放元素的尺寸，使用给定的比例（number） |
+| translate(<length/percentage> <length/percentage>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 沿 X 和 Y 轴移动元素，水平和垂直方向分别使用给定的距离或百分比 |
+| translateX(<length/percentage>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 沿 X 轴移动元素，使用给定的距离或百分比 |
+| translateY(<length/percentage>) | Web 4.0 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 沿 Y 轴移动元素，使用给定的距离或百分比 |
+
+web中经常使用scaleY缩放一个1px的线条变成0.5px的细线。这个方案在app也适用。示例如下：
+```html
+<view style="width: 750rpx; height: 1px; background-color: #000; transform: scaleY(0.5)"></view>
+```
+
+**注意事项**：
+
+- iOS 平台设置了`rotateX(<angle>)`、`rotateY(<angle>)`、`rotateZ(<angle>)`的组件视图是在三维空间中的旋转具有穿透效果，会被同一层级中其他组件视图遮盖住穿透的部分，如果不想被遮盖同层级中请不要存在其他组件。
+- Android平台使用`scale()`、`scaleX()`、`scaleY()`时，使用`getBoundingClientRect`获取的宽高不会改变，后续会兼容处理。
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transform)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transform)

package/data/uniappx/css/transition-delay.md

@@ -0,0 +1,253 @@
+## transition-delay
+
+CSS 的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。
+
+### uni-app x 兼容性 
+| Web | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- |
+| 4.0 | 3.9 | 4.11 | 4.61 |
+
+### App平台拍平（flatten）兼容性  @flatten_compatibility
+
+| Android(Vapor) | iOS(Vapor) | HarmonyOS(Vapor) |
+| :- | :- | :- |
+| x | x | x |
+
+### 语法
+```
+transition-delay: <time>#;
+```
+
+### 值限制
+- time
+
+#### App平台
+- 不支持指定多个时长
+- HBuilderX4.0以下版本，属性值可以不设置单位，不设置单位时当做 ms（毫秒） 处理。从 HBuilderX4.0 起，统一为web的策略，必须设置单位，无单位当做非法值。也就是会造成动画不生效。
+
+#### Web规范
+属性值必须设置单位，无单位时当做非法值处理
+
+### 默认值 @default-value 
+ `0s`
+
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/transition/transition-delay.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/transition/transition-delay.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/CSS/transition/transition-delay
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/transition/transition-delay
+
+>示例
+```vue
+<template>
+  
+  <scroll-view style="flex: 1">
+  
+    <view>
+      <text class="uni-title-text">view 组件 transition-delay：1s</text>
+      <view :class="classValue"></view>
+      <view class="button-container">
+        <button class="button-item" @click="start">start</button>
+        <button class="button-item" @click="reset">reset</button>
+      </view>
+
+      <text class="uni-title-text uni-common-mt">text 组件 transition-delay：2s</text>
+      <text :class="textClassValue">transition-delay: 2s</text>
+      <view class="button-container">
+        <button class="button-item" @click="textStart">text start</button>
+        <button class="button-item" @click="textReset">text reset</button>
+      </view>
+
+      <text class="uni-title-text uni-common-mt">image 组件 transition-delay：1s</text>
+      <image :class="imageClassValue" src="/static/test-image/logo.png"></image>
+      <view class="button-container">
+        <button class="button-item" @click="imageStart">image start</button>
+        <button class="button-item" @click="imageReset">image reset</button>
+      </view>
+
+      <text class="uni-title-text uni-common-mt">scroll-view 组件 transition-delay：1s</text>
+      <scroll-view :class="scrollViewClassValue"></scroll-view>
+      <view class="button-container">
+        <button class="button-item" @click="scrollViewStart">scroll-view start</button>
+        <button class="button-item" @click="scrollViewReset">scroll-view reset</button>
+      </view>
+
+      <view class="uni-common-mt">
+        <text class="uni-title-text">setProperty 设置与 getPropertyValue 获取</text>
+      </view>
+
+      <view class="test-container">
+        <view class="test-item">
+          <text class="uni-subtitle-text">view 组件</text>
+          <text class="uni-info">设置值: {{data.transitionDelayDynamic}}</text>
+          <text class="uni-info">获取值: {{data.transitionDelayActual}}</text>
+          <view class="test-box">
+            <view ref="viewRefDynamic" class="common-image test-view" :style="{ transitionDelay: data.transitionDelayDynamic, transitionProperty: 'width', transitionDuration: '1s' }" @click="triggerTransitionDynamic">
+              <text style="font-size: 12px;">点击view</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">text 组件</text>
+          <text class="uni-info">设置值: {{data.transitionDelayDynamic}}</text>
+          <text class="uni-info">获取值: {{data.transitionDelayActualText}}</text>
+          <view class="test-box">
+            <text ref="textRefDynamic" class="common-text test-text" :style="{ transitionDelay: data.transitionDelayDynamic, transitionProperty: 'width', transitionDuration: '1s' }" @click="triggerTransitionTextDynamic">点击text</text>
+          </view>
+        </view>
+
+        <view class="test-item">
+          <text class="uni-subtitle-text">image 组件</text>
+          <text class="uni-info">设置值: {{data.transitionDelayDynamic}}</text>
+          <text class="uni-info">获取值: {{data.transitionDelayActualImage}}</text>
+          <view class="test-box">
+            <image ref="imageRefDynamic" class="common-image test-image" :style="{ transitionDelay: data.transitionDelayDynamic, transitionProperty: 'width', transitionDuration: '1s' }" @click="triggerTransitionImageDynamic" src="/static/test-image/logo.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="uni-common-mt uni-common-mb">
+        <text class="uni-tips">第一个枚举值，'' (空字符串) - 空值情况</text>
+        <enum-data :items="transitionDelayEnum" title="transition-delay 枚举值" @change="radioChangeTransitionDelay" :compact="true"></enum-data>
+        <input-data :defaultValue="data.transitionDelayDynamic" title="transition-delay 自定义值" type="text" @confirm="inputChangeTransitionDelay"></input-data>
+      </view>
+
+      
+        <text class="uni-title-text uni-common-mt uni-common-mb">native-view 组件 transition-delay：1s</text>
+        <test-native-view :class="nativeViewClassValue"></test-native-view>
+        <view class="button-container">
+          <button class="button-item" @click="nativeViewStart">native-view start</button>
+          <button class="button-item" @click="nativeViewReset">native-view reset</button>
+        </view>
+      
+
+    </view>
+  
+  </scroll-view>
+  
+</template>
+
+<style>
+  .box {
+    width: 200px;
+    height: 50px;
+    background-color: blue;
+  }
+
+  .ani {
+    transition-property: width;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    width: 300px;
+  }
+
+  .text-box {
+    width: 200px;
+    height: 60px;
+    padding: 10px;
+    font-size: 16px;
+    background-color: lightblue;
+    text-align: center;
+  }
+
+  .text-ani {
+    transition-property: width;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    width: 300px;
+  }
+
+  .image-box {
+    width: 100px;
+    height: 100px;
+  }
+
+  .image-ani {
+    transition-property: width, height;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    width: 150px;
+    height: 150px;
+  }
+
+  .common-text {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+    font-size: 12px;
+    color: white;
+  }
+
+  .common-image {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+
+  .scroll-view-box {
+    width: 200px;
+    height: 50px;
+    background-color: green;
+  }
+
+  .scroll-view-ani {
+    transition-property: width;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    width: 300px;
+  }
+
+  .native-view-box {
+    width: 200px;
+    height: 50px;
+    background-color: green;
+  }
+
+  .native-view-ani {
+    transition-property: width;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    width: 300px;
+  }
+
+  .test-container {
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 10px;
+  }
+
+  .test-item {
+    flex: 1;
+    margin: 0 5px;
+  }
+
+  .test-box {
+    width: 100%;
+    height: 80px;
+    background-color: gray;
+  }
+
+  .demo-box {
+    flex-direction: row;
+    justify-content: space-around;
+    margin-top: 10px;
+  }
+
+  .button-container {
+    flex-direction: row;
+    margin-top: 10px;
+    padding-bottom: 15px;
+    border-bottom:#d3d3d3 solid 1px;
+  }
+
+  .button-item {
+    margin-right: 10px;
+  }
+</style>
+
+```
+
+### 参见
+- [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/transition-delay)
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=css.properties.transition.transition-delay)