tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/uni-ui-x/README.md

@@ -0,0 +1,165 @@
+# 项目介绍
+
+uni-ui x，是DCloud为 uni-app x 提供的扩展组件库。[开源库地址](https://gitcode.com/dcloud/uni-ui-x/tree/alpha)
+
+uni-ui x 是全新设计的，与为uni-app做的uni-ui不同。
+
+uni-ui x 有包括所有组件的[套装](https://ext.dcloud.net.cn/plugin?id=27852)，也可以单独下载每个组件（左侧每个组件文档中有该组件的下载地址）。
+
+uni-ui x 是伴随着HBuilderX 5.08发版的。5.07版本上有部分组件在部分平台有兼容性问题，详见组件文档的兼容性表格。5.07以前的HBuilderX版本未测试。
+
+uni-ui x 仅支持[样式隔离策略2.0](https://doc.dcloud.net.cn/uni-app-x/css/common/style-isolation.html)，需注意5.0以前创建的老项目需要在manifest.json中手动开启。
+
+# 特点
+
+- 性能
+uni-ui x 非常注重性能，在DOM层级控制、包体积、代码执行时间方面精益求精。
+
+它了解 uni-app x 蒸汽模式的最佳实践，尽可能利用模板和样式的预编译特性来提升性能。当然它也支持非蒸汽模式。
+
+- 合理的抽象
+
+一个组件的抽象能力非常重要，如何在自定义性、易用性、性能之间尽可能三全其美。
+
+很多组件为了满足使用者的需求，封装的属性越来越多，但组件使用者仍然在抱怨自定义性不足。
+
+尤其是把样式封装在组件属性上，造成用户需要自定义样式时无限封装属性，并且这些属性的控制无法使用css变量。
+
+uni-ui x 提供了完全的样式自定义能力，所有的样式定义都可以通过class设置，组件属性只控制功能逻辑。
+
+* 组件的根节点样式，可以在使用组件时的组件class或style上设置。
+* 组件的子节点样式，可以通过[externalClass](https://doc.dcloud.net.cn/uni-app-x/css/common/style-isolation.html#external-class)设置样式。子组件开放自己的样式出来，外部可通过externalClass进行子组件的样式自定义。
+
+组件使用者完全可以通过css自己控制所有样式。无需修改组件源码。加上css变量加持，灵活度远高于其他组件库。
+
+使用者可以通过css变量完全自定义自己的主题，而不会被组件属性上不能写css变量困扰。
+
+- 为AI设计
+
+uni-ui x 优先代码而不是二进制文件。目前没有引入字体文件。这处于性能考虑，也出于AI友好度考虑。
+
+以箭头为例，uni-ui x 中使用一个view配置左下边框并transform旋转来实现，这种设计性能比字体更好，且AI可以方便的理解这段代码的UI表现，可以在代码层面调整样式。
+
+如果是字体图片，AI很难理解、生成、修改。
+
+再举一个例子，uni-tab下沉midbutton，涉及一个贝塞尔曲线，此时没有使用图片，而是使用svg，同样是为了方便AI理解和修改。
+
+- 中性
+
+uni-ui x的风格是中性的，和uni内置组件、小程序内置组件一样，重视是开发者可以自定义成各种风格，而不是为开发者提供某套风格。
+
+开发者可以通过自定义css，形成自己的风格，或者交给AI完成类似工作。
+
+- 没有写死的颜色和文字
+
+* 没有写死的文字，不影响国际化。
+* 没有写死的颜色，不影响自定义主题。
+
+## uni-ui x 已支持的组件列表
+
+| 组件名 | 组件说明 |
+| --- | --- |
+| uni-badge-view | [数字角标](https://ext.dcloud.net.cn/plugin?name=uni-badge-view) |
+| uni-collapse | [折叠面板](https://ext.dcloud.net.cn/plugin?name=uni-collapse-x) |
+| uni-drag-cell | [可拖拽排序组件](https://ext.dcloud.net.cn/plugin?name=uni-drag-cell) |
+| uni-fab-button | [uni-fab-button](https://ext.dcloud.net.cn/plugin?name=uni-fab-button) |
+| uni-index-bar | [uni-index-bar](https://ext.dcloud.net.cn/plugin?name=uni-index-bar) |
+| uni-link | [链接](https://ext.dcloud.net.cn/plugin?name=uni-link-x) |
+| uni-nav-bar | [uni-nav-bar](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar-x) |
+| uni-number-box | [数字输入框](https://ext.dcloud.net.cn/plugin?name=uni-number-box-x) |
+| uni-rate | [评分](https://ext.dcloud.net.cn/plugin?name=uni-rate-x) |
+| uni-refresh-box | [uni-refresh-box](https://ext.dcloud.net.cn/plugin?name=uni-refresh-box) |
+| uni-tab | [选项卡](https://ext.dcloud.net.cn/plugin?name=uni-tab-bar) |
+| uni-time-format | [时间格式化](https://ext.dcloud.net.cn/plugin?name=uni-time-format) |
+
+# uni-ui的升级建议@uniuiupgrade
+
+为 uni-app 提供的 uni-ui，为了兼容vue2，是选项式的。
+
+而 uni-app x 蒸汽模式只支持组合式，所以老的 uni ui 是无法在蒸汽模式下使用的。
+
+uni-app x 新提供了 uni-ui x，它是组合式的，且支持样式隔离策略2.0、支持无头理念。
+
+uni-ui 无法直接对照升级 uni-ui x，组件名称、用法都有变化。
+
+但升级时，老版 uni-ui 组件在 uni-app x 下的平替方案是什么，可以在这里说明功能映射关系：
+
+|uni-ui组件						|中文名称								|在uni-app x下的方案																						|
+|--										|--											|--																														|
+|uni-badge						|数字角标								|改用uni-ui x的uni-badge-view																	|
+|uni-calendar					|日历										|见hello uni-app x里的模板中的日历页面													|
+|uni-card							|卡片										|无。建议直接使用class，不用组件																|
+|uni-collapse					|折叠面板								|改用uni-ui x的uni-collapse																		|
+|uni-combox						|组合框									|无																														|
+|uni-countdown				|倒计时									|无																														|
+|uni-data-checkbox		|数据选择器							|无																														|
+|uni-data-picker			|数据驱动的picker选择器	|该组件支持uni-app x的VDOM模式，因为是选项式，无法支持蒸汽模式		|
+|uni-dateformat				|日期格式化							|改用uni-ui x的uni-time-format																	|
+|uni-datetime-picker	|日期选择器							|内置组件picker支持mode=date																		|
+|uni-drawer						|抽屉										|改用内置组件page-container																		|
+|uni-easyinput				|增强输入框							|无																														|
+|uni-fab							|悬浮按钮								|改用uni-ui x的uni-fab-button																	|
+|uni-fav							|收藏按钮								|无。建议直接使用class，不用组件																|
+|uni-file-picker			|文件选择上传						|无																														|
+|uni-forms						|表单										|改用内置组件form																							|
+|uni-goods-nav				|商品导航								|无																														|
+|uni-grid							|宫格										|无。建议直接使用class，不用组件																|
+|uni-group						|分组										|无。建议直接使用class，不用组件																|
+|uni-icons						|图标										|改用uni-ui x的uni-icons-x的组合式组件													|
+|uni-indexed-list			|索引列表								|改用uni-ui x的uni-index-bar																		|
+|uni-link							|超链接									|改用uni-ui x的uni-link																				|
+|uni-list							|列表										|使用内置组件list-view																					|
+|uni-load-more				|加载更多								|使用内置组件loading																						|
+|uni-nav-bar					|自定义导航栏						|改用uni-ui x的uni-nav-bar																			|
+|uni-notice-bar				|通告栏									|无。非滚动建议直接使用class，不用组件													|
+|uni-number-box				|数字输入框							|改用uni-ui x的uni-number-box																	|
+|uni-pagination				|分页器									|无																														|
+|uni-popup						|弹出层									|改用内置组件page-container																		|
+|uni-rate							|评分										|改用uni-ui x的uni-rate																				|
+|uni-row							|布局-行									|无。建议直接使用class，不用组件																|
+|uni-search-bar				|搜索栏									|无																														|
+|uni-segmented-control|分段器									|无																														|
+|uni-steps						|步骤条									|无																														|
+|uni-swipe-action			|滑动操作								|不推荐使用组件，请参考hello uni-app x模板中可左滑删除长列表示例	|
+|uni-swiper-dot				|轮播图指示点						|改用内置组件swiper，通过externalClass控制指示点样式						|
+|uni-table						|表格										|推荐使用rich-text或web-view中的table。												|
+|uni-tag							|标签										|无。建议直接使用class，不用组件																|
+|uni-title						|章节标题								|无。建议直接使用class，不用组件																|
+|uni-transition				|过渡动画								|无。建议直接使用class，不用组件																|
+
+标记为`无`的，大多比较简单，有些其实没必要做成组件，使用class即可。有些可以交给AI快速写一个布局view组合，也没有必要封装为组件。
+
+在hello uni-app x示例中，全局css里有一些class，
+
+- uni-row组件，推荐改用使用全局class `uni-row`
+- uni-title组件，可以使用全局class `uni-h1`、`uni-h2`、`uni-h3`、`uni-h4`
+```css
+.uni-row {
+  flex-direction: row;
+}
+.uni-h1 {
+  font-size: 28px;
+  font-weight: bold;
+  border-bottom: 1px solid #ccc;
+  margin: 8px 0;
+}
+.uni-h2 {
+  font-size: 24px;
+  font-weight: bold;
+  border-bottom: 1px solid #ccc;
+  margin: 8px 0;
+}
+.uni-h3 {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 8px 0;
+}
+.uni-h4 {
+  font-weight: bold;
+  margin: 8px 0;
+}
+```
+
+# 交流群
+
+有关 uni-ui-x 组件的任何意见或建议，欢迎通过 [uni-ui-x im 交流群](https://ext.dcloud.net.cn/publisher/start-session?pluginId=27852) 沟通交流。

package/data/uniappx/component/uni-ui-x/uni-badge-view.md

@@ -0,0 +1,260 @@
+source: https://gitcode.com/dcloud/uni-ui-x/tree/alpha/uni_modules/uni-badge-view
+
+::: sourceCode
+## uni-badge-view
+
+数字角标（徽章）组件
+
+> 本 Component 是 uni ext component，需下载插件：[uni-badge-view](https://ext.dcloud.net.cn/plugin?id=27844)
+
+badge角标，可以用于显示红点、被红圈或其他颜色圈包裹的数字、文字。提醒用户此时有需要注意的新信息。
+
+### 文件路径
+项目下有一个 /pages/uni-ui/badge/badge.uvue 页面，里面演示了badge组件的各种用法。
+
+### 设计
+#### badge组件有多种用法：
+1. 独立显示
+	如果没有slot内容，视为要显示独立的红点和数字，此时不是角标，就是普通的红点和圆背景数字。
+	在按钮或列表项的右侧，独立显示数字。也可以显示红点，但这种场景数字更多一些。
+
+2. 作为一个容器组件，包含一个slot，在包裹内容的右上角显示一个角标view。
+	badge组件包裹一个目标view时，badge组件内部的角标view的中心点位于目标view的右上角顶点。
+	此时角标view是通过transform位移到右上角的，实际内容已经超出了容器本身。
+	所以需要注意容器的父级的设置，留出超出容器的尺寸（即top和right边距需要留出角标view的高度和宽度的一半），避免被父级裁剪。
+
+#### badge的text属性的用法：
+在badge作为容器组件时，text属性的不同设置，可以代表不同的效果。具体见属性章节。
+
+#### 样式自定义
+badge组件的badge-class和badge-style属性，直接作用在角标view上，可以修改角标view的样式。
+
+角标view本质是一个text组件，可以覆盖前景、背景、位置等各种样式。
+
+#### badge组件有如下属性：
+- text
+	类型为 string|null
+	* 值为"0"时，不显示角标；所以永远不会显示一个为0的角标。此时直接显示slot子内容，不包裹外层，减少层级，提高性能；
+	* 值为null或""时，代表一个长宽为8px的红色圆点；
+	* 否则显示为该文字内容的圆角红底圈套文字。
+- badge-class
+	直接作用于角标view的class
+- badge-style
+	直接作用于角标view的style
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 5.07 | 5.08 | 5.07 | 5.07 | 5.07 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 描述 |
+| :- | :- | :- | :- |
+| text | string | "" | badge 的内容。为 "0" 时不显示 badge；为空字符串时显示圆点；有文字则显示文字 |
+| badgeStyle | string | "" | badge 的内联样式，用于覆盖内置 style |
+| badgeClass | string(string.ClassString) | "" | badge 的样式类，用于覆盖内置 class |
+| alwaysWrapWithContent | boolean | false | 当有 slot 内容时，即使 text 为 "0" 也保留包裹层（badge-wrap），避免多个子 slot 时 flex 方向错乱 |
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/uni-ui/badge-view/badge-view.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/uni-ui/badge-view/badge-view.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/uni-ui/badge-view/badge-view
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/uni-ui/badge-view/badge-view
+
+>示例
+```vue
+<template>
+	
+	<scroll-view class="uni-theme-root" style="flex: 1;padding: 20px 5px 5px;">
+	
+	
+	<view class="uni-theme-root" style="padding: 20px 5px 5px;">
+	
+	<uni-badge-view text="99+" >
+		<view style="width: 50px; height: 20px; background-color: green;"></view>
+	</uni-badge-view>
+	
+		<text class="page-title">Badge 组件演示</text>
+		
+		<view style="margin-bottom: 20px;">
+			<text class="label">badge动态设置text属性：</text>
+			<text class="label" style="margin-bottom: 10px;">输入0不显示badge，空字符串显示红点，输入其他显示文字</text>
+			<input
+				v-model="data.dynamicBadgeText"
+				placeholder="输入badge text属性"
+				class="demo-input"
+			/>
+			<uni-badge-view :text="data.dynamicBadgeText" >
+				<view style="width: 20px;height: 20px;background-color: green;"></view>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">不显示badge：</text>
+			<uni-badge-view text="0">
+				<view style="width: 20px;height: 16px;background-color: green;"></view>
+			</uni-badge-view>
+		</view>
+		
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">不包裹内容的圆点：</text>
+			<uni-badge-view text="">
+			</uni-badge-view>
+		</view>
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">不包裹内容的文字：</text>
+			<uni-badge-view text="1" badge-style="align-self:flex-start;"/> 
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">文字样式：</text>
+			<uni-badge-view text="3" >
+				<view style="width: 80px;">
+					<text class="label">20px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;overflow: visible;"> 
+			<text class="label" style="margin-bottom: 10px;">99+是自己写的，不会自动计算max</text>
+			<uni-badge-view text="99+" >
+				<view style="width: 80px; background-color: #6c757d; ">
+					<text style="color: white;">50px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+		
+		<uni-badge-view text="99+" >
+			<view style="width: 10px; height: 20px; background-color: green;"></view>
+		</uni-badge-view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">自定义badge-class（绿色badge）：</text>
+			<uni-badge-view text="NEW" badge-class="custom-badge-text">
+				<view style="height: 20px; background-color: #ffc107; ">
+					<text>20px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">自定义样式badge-style（紫色badge）：</text>
+			<uni-badge-view text="HOT" badge-style="background-color: #6f42c1; color: yellow;">
+				<view style="height: 20px; background-color: #dc3545; ">
+					<text style="color: white;">20px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">红点默认样式：</text>
+			<uni-badge-view>
+				<button size="mini">按钮</button>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">空文字（红点模式）：</text>
+			<uni-badge-view text="">
+				<view style="height: 20px; background-color: #17a2b8; border-radius: 4px; ">
+					<text style="color: white;">20px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">dot自定义badge-class（绿色badge）：</text>
+			<uni-badge-view badge-class="custom-badge-dot">
+				<view style="height: 20px; background-color: #ffc107; ">
+					<text>20px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">dot自定义badge-style（紫色badge）：</text>
+			<uni-badge-view badge-style="background-color: #6f42c1;">
+				<view style="height: 20px; background-color: #dc3545; ">
+					<text style="color: white;">20px区域</text>
+				</view>
+			</uni-badge-view>
+		</view>
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">按钮中badge文字：</text>
+			
+			
+			<view	style="width: 150px; height: 30px; background-color: lightgray; border-radius: 4px; align-items: center; justify-content: center;flex-direction: row;">
+				<text>按钮&nbsp;</text>
+				<uni-badge-view text="9"/>
+				
+			</view>
+		</view>
+		
+		<view style="margin-bottom: 10px;">
+			<text class="label" style="margin-bottom: 10px;">按钮中badge红点：</text>
+			<view	style="width: 150px; height: 30px; background-color: lightgray; border-radius: 4px; align-items: center; justify-content: center;flex-direction: row;">
+				<text>按钮&nbsp;</text>
+				<uni-badge-view/>
+			</view>
+		</view>
+
+	
+	</scroll-view>
+	
+	
+	</view>
+	
+</template>
+
+<style>
+	.page-title {
+		font-size: 18px;
+		font-weight: bold;
+		color: var(--text-color, #333333);
+		margin-bottom: 20px;
+	}
+
+	.label {
+		color: var(--text-color, #333333);
+	}
+
+	.demo-input {
+		border-width: 1px;
+		border-style: solid;
+		border-color: var(--border-color, rgba(0, 0, 0, 0.06));
+		border-radius: 4px;
+		width: 200px;
+		height: 24px;
+		padding-left: 2px;
+		color: var(--text-color, #333333);
+	}
+
+	.custom-badge-text {
+		background-color: #28a745;
+		color: black;
+	}
+	
+	.custom-badge-dot {
+		background-color: #28a745;
+		width: 16px;
+		height: 16px;
+		border-radius: 16px;
+	}
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=uni-ui-x.uni-badge-view)

package/data/uniappx/component/uni-ui-x/uni-collapse-item.md

@@ -0,0 +1,3 @@
+layout: SimpleLayout
+
+已迁移至 [uni-collapse](uni-collapse.md#uni-collapse-item)