tmui-cli 2.0.0 → 2.0.2

package/data/examples/modal.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const show = ref(false);
+const beforeClose = ():Promise<boolean> => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(true)
+        }, 3000)
+    })
+}
+</script>
+<template>
+  <view>
+    <tm-sheet>
+      <tm-text font-size="36" class="text-weight-b mb-16 d-block">对话框 tmModal</tm-text>
+      <tm-text class="" color="#999999">可全局统一更改风格。</tm-text>
+    </tm-sheet>
+    <tm-sheet class="flex flex-row flex-row-center-center">
+      <tm-modal style="flex: 1; margin-right: 24rpx" height="auto">
+        <template v-slot:trigger
+          ><tm-button :block="true">自动内容高</tm-button></template
+        >
+        <tm-input dark-bg-color="" placeholder="请输入密码"></tm-input>
+        <tm-input dark-bg-color="" class="my-12" placeholder="请输入密码"></tm-input>
+        <view class="flex flex-row flex-row-center-between">
+          <tm-text class="text-size-m text-grey">同意协议</tm-text>
+          <tm-switch></tm-switch>
+        </view>
+      </tm-modal>
+
+      <tm-modal style="flex: 1" position="right" :show-close="true" :show-footer="false">
+        <template v-slot:trigger
+          ><tm-button :block="true" color="warn">显示关闭</tm-button></template
+        >
+        <tm-text color="#999999"> 精致美观的对话框，可全局配置风格 </tm-text>
+      </tm-modal>
+    </tm-sheet>
+
+    <tm-sheet>
+      <tm-text font-size="36" class="text-weight-b mb-n8 d-block">嵌套</tm-text>
+      <tm-modal height="auto">
+        <template v-slot:trigger
+          ><tm-button color="success" :block="true">打开嵌套</tm-button></template
+        >
+        <tm-modal height="auto" :beforeClose="beforeClose">
+          <template v-slot:trigger
+            ><tm-button :block="true">打开嵌套1</tm-button></template
+          >
+          <tm-text class="text-size-m text-grey line-8">当前弹层内容为自动高度</tm-text>
+          <tm-modal height="auto">
+            <template v-slot:trigger
+              ><tm-button color="success" :block="true">打开嵌套2</tm-button></template
+            >
+            <tm-text class="text-size-m text-grey line-8">当前弹层内容为自动高度</tm-text>
+          </tm-modal>
+        </tm-modal>
+      </tm-modal>
+    </tm-sheet>
+
+    <tm-sheet>
+      <tm-text font-size="36" class="text-weight-b d-block"
+        >默认高度，禁用遮罩关闭</tm-text
+      >
+      <tm-text color="#999999" class="mb-n8 d-block">
+        点击遮罩禁用关闭,同时内容出现弹跳提示
+      </tm-text>
+
+      <tm-modal
+        :overlayClick="false"
+        :showCancel="false"
+        height="550rpx"
+        title="请阅读协议"
+        confirmText="我已阅读"
+        position="right"
+      >
+        <template #trigger
+          ><tm-button :block="true" color="error">禁用遮罩,弹跳提醒</tm-button></template
+        >
+        <tm-text color="#999999">
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+        </tm-text>
+      </tm-modal>
+    </tm-sheet>
+
+    <tm-sheet>
+      <tm-text font-size="36" class="text-weight-b mb-n8 d-block"
+        >底部插槽及变量控制显示</tm-text
+      >
+      <tm-button @click="show = true" :block="true">打开</tm-button>
+      <tm-modal
+        v-model:show="show"
+        title="内容可滚动"
+        height="500rpx"
+        position="bottom"
+        :show-footer="true"
+      >
+        <tm-text color="#999999">
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+          精致美观的对话框，可全局配置风格 精致美观的对话框，可全局配置风格
+        </tm-text>
+        <template #footer>
+          <tm-button @click="show = false" :block="true" color="red" class="flex-1"
+            >定义底部插槽</tm-button
+          >
+        </template>
+      </tm-modal>
+    </tm-sheet>
+
+    <view style="height: 50px"></view>
+  </view>
+</template>

package/data/examples/money.vue

@@ -0,0 +1,60 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block">金额栅格 TmMoney</tm-text>
+            <view>
+                <tm-text>考虑到这个比较常用，输入金额为数字即可，可以放心的使用保证精度，不采用toFiexd，保证金额精度无舍入</tm-text>
+            </view>
+        </tm-sheet>
+   
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-text>默认2位小数</tm-text>
+            <tm-money :modelValue="1568"></tm-money>
+        </tm-sheet>
+
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-text>开启千分位,小数位为3</tm-text>
+            <tm-money :thousand="true" :digit="3" fontSize="30" :modelValue="15568.398"></tm-money>
+        </tm-sheet>
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-text>千分位为4分割</tm-text>
+            <tm-money :thousand="true" :thousandLen="4" :digit="3" :modelValue="15568.398"></tm-money>
+        </tm-sheet>
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-text>字号控制</tm-text>
+            <tm-money :thousand="true" fontSize="48" :digit="3" :modelValue="15568.398"></tm-money>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text>大写金额（仅到厘,不要超过后4位）</tm-text>
+            <view class="flex flex-row flex-row-center-start">
+                <tm-money color="warn" darkColor="warn" :showCn="false" fontSize="48" :digit="4"
+                :modelValue="money"></tm-money>
+                <tm-money class="ml-8" :showCn="true" :digit="4" :modelValue="money"></tm-money>
+            </view>
+            <tm-button class="mt-n8" :block="true" @click="money = money == 1568.3984 ? 1548.36 : 1568.3984">试试修改金额</tm-button>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text>去除小数，把小数置0即可，要注意我不会舍入，是直接丢掉小数</tm-text>
+            <tm-money :showCn="false" :digit="0" :modelValue="1568.398"></tm-money>
+            <tm-text>可以直接写style修改样式</tm-text>
+            <tm-money style="font-weight: bold;" :showCn="false" fontSize="48" preFontSize="24"
+                :digit="1" :modelValue="1568.398"></tm-money>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text>自定义货币符号</tm-text>
+            <tm-money symbolText="$" fontSize="40" :modelValue="1568" preFontSize="24"></tm-money>
+            <tm-money symbolText=" / 美元" fontSize="40" preFontSize="24" symbolPosition='right'
+                :modelValue="1568"></tm-money>
+            <tm-money symbolText=" 元/个" fontSize="40" preFontSize="24" symbolPosition='right'
+                :modelValue="1568"></tm-money>
+            <tm-money symbolText="人民币: " fontSize="40" preFontSize="24" symbolPosition='left'
+                :modelValue="1568"></tm-money>
+        </tm-sheet>
+    </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const money = ref(1568.3984)
+</script>
+<style lang="scss" scoped></style>

package/data/examples/more.vue

@@ -0,0 +1,47 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8 d-block">金额栅格 TmMoney</tm-text>
+            <view>
+                <tm-text>考虑到这个比较常用，输入金额为数字即可，可以放心的使用保证精度，不采用toFiexd，保证金额精度无舍入</tm-text>
+            </view>
+        </tm-sheet>
+   
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-more>
+                新华社北京12月30日电 国家主席习近平将于31日晚7时通过中央广播电视总台和互联网，发表二〇二六年新年贺词。中央广播电视总台所属中央电视台综合频道、新闻频道、中文国际频道、4K频道，中国国际电视台各外语频道，中央人民广播电台，中国国际广播电台，以及人民网、新华网、央视新闻客户端等中央主要新闻媒体所属网站、新媒体平台将准时播出。
+            </tm-more>
+        </tm-sheet>
+
+        <tm-sheet class="flex flex-row flex-row-center-between">
+            <tm-more v-model="open" :text="['付费解锁','关闭']" unActiveColor="error" :disabled="true" @click="openClick">
+                新华社北京12月30日电 国家主席习近平将于31日晚7时通过中央广播电视总台和互联网，发表二〇二六年新年贺词。中央广播电视总台所属中央电视台综合频道、新闻频道、中文国际频道、4K频道，中国国际电视台各外语频道，中央人民广播电台，中国国际广播电台，以及人民网、新华网、央视新闻客户端等中央主要新闻媒体所属网站、新媒体平台将准时播出。
+            </tm-more>
+        </tm-sheet>
+
+        
+    </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const open = ref(false)
+const openClick = () => {
+    if(open.value){
+        open.value = false;
+        return
+    }
+    uni.showModal({
+        title: '提示',
+        content: '确定要付费打开吗？',
+        success: (res) => {
+            if (res.confirm) {
+                open.value = true
+            }
+
+        }
+    })
+
+
+}
+</script>
+<style lang="scss" scoped></style>

package/data/examples/navbar.vue

@@ -0,0 +1,68 @@
+<template>
+    <view>
+        <tm-navbar :scrollTop="scrollTop" lrWidth='56' :staticTransparent="staticTransparent" :linear-gradient="linear"
+            :linearActiveGradient="bgcolor" bg-color="primary" @fiexdChange="navPosChange" title-color="white"
+            active-bg-color="#ff5416" title-active-color="yellow" :isPlace="false">
+            <template v-slot:title>
+                <view class="flex flex-row flex-row-center-start relative flex-1" style="height:100%">
+                    <tm-input focus-font-color="#ff5416" :focus-highlight="false" placeholder="搜索吧" icon-color="#ff5416"
+                        round="76" v-if="ratio > 0" left-icon="search-2-line" dark-bg-color="white"
+                        :style="{ opacity: ratio, width: (ratio * 400) + 'rpx' }" min-height="64">
+                        <template v-slot:rightIcon>
+                            <tm-button color="#ff5416" font-size="28" round="76" class="mr-2" height="56"
+                                width="100">搜索</tm-button>
+                        </template>
+                    </tm-input>
+                    <tm-text v-if="ratio < 1" :style="{ opacity: (1 - ratio), pointerEvents: 'none' }" color='white'
+                        dark-color="white" class="absolute">NAVBAR 标题栏</tm-text>
+                </view>
+            </template>
+            <template v-slot:right="{ isFiexd }">
+                <tm-icon _class="mr-16" name="account-circle-line" size="40"
+                    :color="(isFiexd as boolean) ? 'yellow' : 'white'"></tm-icon>
+            </template>
+        </tm-navbar>
+        <tm-image src="https://store.tmui.design/api_v2/public/random_picture?random=183"></tm-image>
+
+        <tm-sheet :margin="['16']">
+            <tm-text font-size="36" class=" text-weight-b">标题导航 tmNavbar</tm-text>
+            <tm-text class="text-grey line-8 ">可静态悬浮在顶部，也可动态悬浮顶部下拉动态改变背景</tm-text>
+        </tm-sheet>
+        <tm-sheet height="2000">
+            <tm-text font-size="36" class=" text-weight-b ">滚动本页面，查看导航效果</tm-text>
+            <tm-text class="text-grey my-20 mb-n8">可静态和悬浮时出现不同的渐变背景</tm-text>
+            <tm-button :block="true" @click="setbgcolor">切换渐变导航</tm-button>
+            <tm-text class=" text-grey  my-20">可静态和悬浮时出现不同的纯色背景</tm-text>
+            <tm-button :block="true" @click="clearBgcolor">纯色背景</tm-button>
+            <tm-text class=" text-grey  my-20">可静态时不透明</tm-text>
+            <tm-button :block="true" @click="staticTransparent = !staticTransparent">{{ !staticTransparent ? '静态透明' :
+                '静态不透明'
+                }}</tm-button>
+        </tm-sheet>
+    </view>
+</template>
+<script setup lang="ts">
+import { onPageScroll } from '@dcloudio/uni-app';
+
+import { ref } from 'vue'
+const ratio = ref(0)
+const bgcolor = ref<string[]>([])
+const linear = ref<string[]>([])
+const staticTransparent = ref(true)
+const scrollTop = ref(0)
+const setbgcolor = () => {
+    bgcolor.value = ['to right', '#ff338f', '#6b3eff'];
+    linear.value = ['to right', '#02a7ff', '#22e192'];
+}
+const clearBgcolor = () => {
+    bgcolor.value = [] as string[]
+    linear.value = [] as string[]
+}
+const navPosChange = (posratio: number) => {
+    ratio.value = posratio
+}
+onPageScroll((evt: Page.PageScrollOption) => {
+    scrollTop.value = evt.scrollTop;
+})
+</script>
+<style scoped></style>

package/data/examples/picker-date.vue

@@ -0,0 +1,53 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">日期选择器 PickerDate</tm-text>
+            <tm-text class="" color="#999999">日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间</tm-text>
+        </tm-sheet>
+
+
+        <tm-sheet>
+            <tm-picker-date v-model="modelValue" start="2024-1-1" end="2024-9-5" v-model:model-str="nowVal"
+                format="YYYY-MM-DD">
+                <tm-button :block="true">打开时间</tm-button>
+            </tm-picker-date>
+
+            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
+                <tm-text color="#999999">选中的值：{{ modelValue }}</tm-text>
+                <tm-text color="#999999">经format的值：{{ nowVal }}</tm-text>
+            </tm-sheet>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-button skin='thin' :block="true" @click="modelValue = '2024-3-21'">赋值2024-3-21</tm-button>
+        </tm-sheet>
+
+        <tm-sheet>
+        
+            <tm-text font-size="36" class=" text-weight-b mb-n8">内嵌日期选择器 xDateView</tm-text>
+            <tm-date-view v-model="nowVal2" start="2022-3-1" end="2024-9-5"></tm-date-view>
+            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
+                <tm-text color="#999999">选中的值：{{ nowVal2 }}</tm-text>
+            </tm-sheet>
+            
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mb-n8">精确到秒</tm-text>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-picker-date type="second">
+                <tm-button :block="true">打开时间</tm-button>
+            </tm-picker-date>
+        </tm-sheet>
+        
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const nowVal = ref("")
+const nowVal2 = ref("")
+const modelValue = ref("")
+</script>
+
+<style lang="scss"></style>

package/data/examples/picker-selected.vue

@@ -0,0 +1,35 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">搜索选择器 tmPickerSelected</tm-text>
+            <tm-text color="#999999" class="text-size-b">
+                可以对提供的列表数据进行搜索，远程加载，单选多选
+            </tm-text>
+        </tm-sheet>
+        <tm-sheet>
+
+            <tm-picker-selected v-model="codes" v-model:model-str="codes_str" filterKey='name' labelKey="name" idKey="code" :list="city">
+                <tm-button :block="true">打开选项</tm-button>
+            </tm-picker-selected>
+			
+			<tm-sheet :margin="[0,15,0,0]" color="info">
+				{{codes}}
+			</tm-sheet>
+			<tm-sheet :margin="[0,15,0,0]" color="info">
+				{{codes_str}}
+			</tm-sheet>
+        </tm-sheet>
+        
+        <view style="height: 50px;"></view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+import city from "@/uni_modules/tm-ui/static/pca-code.json"
+const codes = ref<number[]>([])
+const codes_str = ref<string[]>([])
+
+</script>
+
+<style lang="scss"></style>

package/data/examples/picker-time.vue

@@ -0,0 +1,46 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">日期选择器 PickerDate</tm-text>
+            <tm-text class="" color="#999999">日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间</tm-text>
+        </tm-sheet>
+
+
+        <tm-sheet>
+            <tm-picker-time v-model="modelValue"  v-model:model-str="nowVal"
+                format="hh时mm分ss秒">
+                <tm-button :block="true">打开时间</tm-button>
+            </tm-picker-time>
+
+            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
+                <tm-text color="#999999">选中的值：{{ modelValue }}</tm-text>
+                <tm-text color="#999999">经format的值：{{ nowVal }}</tm-text>
+            </tm-sheet>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-button skin='thin' :block="true" @click="modelValue = '14:30:26'">赋值14:30:26</tm-button>
+        </tm-sheet>
+
+       
+
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b ">精确到分{{ modelValue2 }}</tm-text>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-picker-time v-model="modelValue2" v-model:model-str="nowVal2" start="08:30:00" end="22:00:00" type="minute">
+                <tm-button :block="true">打开时间</tm-button>
+            </tm-picker-time>
+        </tm-sheet>
+        
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const nowVal = ref("")
+const nowVal2 = ref("")
+const modelValue = ref("")
+const modelValue2 = ref("")
+</script>
+
+<style lang="scss"></style>

package/data/examples/picker-view.vue

@@ -0,0 +1,35 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">选择器容器 PickerView</tm-text>
+            <tm-text color="#999999" class="text-size-b ">
+                组件采用数组id式选择，非索引。考虑到实际实用中多以id为交互提交数据。因此摒弃了传统的索引选项
+            </tm-text>
+        </tm-sheet>
+
+        <tm-sheet>
+            <tm-picker-view v-model:model-str="selectedStr" rang-key="code" rang-text="name" @change="change" 
+            v-model="selecteds"
+                :list="city"></tm-picker-view>
+            <!-- list -->
+            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
+                <tm-text color="#999999">选中的值：{{ selecteds.join(',') }}</tm-text>
+                <tm-text color="#999999">选中项的文本：{{ selectedStr }}</tm-text>
+            </tm-sheet>
+        </tm-sheet>
+        <view style="height:50px"></view>
+    </view>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue"
+import city from "@/uni_modules/tm-ui/static/pca-code.json"
+
+
+const selecteds = ref<string[]>([])
+const selectedStr = ref("")
+const change = (ids: string[]) => {
+    console.log(ids)
+}
+</script>
+
+<style lang="scss"></style>

package/data/examples/picker.vue

@@ -0,0 +1,101 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">选择器 tmPicker</tm-text>
+            <tm-text color="#999999" class="text-size-b ">
+                这是tmPickerView封装的弹出式，详细可见tmPickerView文档
+            </tm-text>
+        </tm-sheet>
+        <tm-sheet>
+
+            <tm-picker :list="list">
+                <tm-button :block="true">打开选项</tm-button>
+            </tm-picker>
+
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class=" text-weight-b mb-n8 d-block">城市选择器</tm-text>
+            <tm-picker @change="change" rang-key="code" rang-text="name" v-model="selecteds" v-model:model-str="str"
+                :list="city">
+                <tm-button :block="true">打开选项</tm-button>
+               
+            </tm-picker>
+
+            <tm-sheet :margin="['0', '24']" color="#f5f5f5" dark-color="#333">
+                <tm-text color="#999999">选中的值：{{ selecteds.join(',') }}</tm-text>
+                <tm-text color="#999999">选中的值回显文本：{{ str }}</tm-text>
+            </tm-sheet>
+            <tm-button skin="thin" :block="true" @click="fuzhi">赋值</tm-button>
+        </tm-sheet>
+        <view style="height: 50px;"></view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue"
+import city from "@/uni_modules/tm-ui/static/pca-code.json"
+const list = [
+    {
+        title: '江西',
+        id: "9-1",
+        children: [
+            {
+                title: '南昌',
+                id: "132",
+                children: [
+                    { title: '青山湖区', id: "1-2" },
+                    { title: '高新区', id: "1-3", disabled: true },
+                    { title: '红谷滩区', id: "1-4" },
+                ],
+
+            },
+            {
+
+                title: '九江', id: "222",
+                children: [
+                    { title: '2青山湖区', id: "1-32" },
+                    { title: '2高新区', id: "1-33" },
+                    { title: '3红谷滩区', id: "1-34" },
+                ],
+            },
+        ],
+    },
+    {
+        title: '安徽',
+        id: "10-13",
+        children: [
+            {
+                title: '5南昌',
+                id: "3",
+                children: [
+                    { title: '5青山湖区', id: "1-52" },
+                    { title: '5高新区', id: "1-53" },
+                    { title: '5红谷滩区', id: "1-54" },
+                ],
+
+            },
+            {
+                title: '5南昌',
+                id: "36",
+                children: [
+                    { title: '6青山湖区', id: "61-52" },
+                    { title: '6高新区', id: "61-53" },
+                    { title: '6红谷滩区', id: "61-54" },
+                ],
+
+            },
+        ],
+    },
+
+];
+const selecteds = ref(['15', '1504', '150404'])
+const str = ref("")
+const change = (ids: string[]) => {
+    console.log(ids)
+}
+const fuzhi = () => {
+    selecteds.value = ['14', '1403', '140311']
+}
+</script>
+
+<style lang="scss"></style>