@xtdev/xt-miniprogram-ui 1.2.60 → 1.2.63

package/libs/xt-form/index.js

@@ -0,0 +1,83 @@
+// src/xt-form/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        item: {
+            type: Object,
+            value: {
+                key: '', // 必传，输入框的key值，唯一性
+                title: '', // 标题
+                value: '', // 展示的值
+                maxlength: -1, // 默认为-1
+                placeholder: '', // 输入框为空时占位符
+                // 输入框类型：input-普通输入框 select-选择框 inputBtn-带按钮 inputUnit-带单位
+                inputType: '',
+                unit: '', // 单位输入框的单位文案
+                btnText: '', // 按钮输入框的按钮文案
+                icon: '', // 带icon选择框，icon的链接地址
+                iconSize: '', // incon大小类型： big-定位或其它图标  small-右箭头
+                error: '', // 输入框下方的错误提示信息文案
+                showError: false, // 是否展示 error信息
+                type: '', // 输入框的输入类型， 非必传，不传则默认为文本
+                disabled: false,
+                backColor: '', // 背景色，默认#f5f5f5
+            }
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        focus: false, // 是否聚焦
+        value: '', // 输入框的值
+        type: 'text', // 输入框的输入类型， 默认为文本
+        maxlength: -1, // 默认没有maxlength
+        disabled: false, // 默认不禁用
+        backColor: '#f5f5f5', // 默认灰色
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onFocus() {
+            this.setData({
+                focus: true
+            })
+        },
+        onBlur(e) {
+            let item = e.currentTarget.dataset.item;
+            item.value = this.data.value;
+            this.setData({
+                focus: false
+            })
+            this.triggerEvent('onBlur', item);
+        },
+        onInputChange(e) {
+            let item = e.currentTarget.dataset.item;
+            this.setData({
+                value: e.detail.value
+            })
+            this.triggerEvent('onInputChange', item);
+        },
+        // 点击选择框
+        onOpenSelect(e) {
+            let item = e.currentTarget.dataset.item;
+            if (item.disabled) {
+                return;
+            }
+            this.triggerEvent('onOpenSelect', item);
+        },
+        // 点击输入框中的按钮
+        onBtnClick(e) {
+            let item = e.currentTarget.dataset.item;
+            if (item.disabled) {
+                return;
+            }
+            this.triggerEvent('onBtnClick', item);
+        },
+    }
+})

package/libs/xt-form/index.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+}

package/libs/xt-form/index.wxml

@@ -0,0 +1,67 @@
+<!-- 标题 -->
+<view wx:if="{{item.title}}" class="xt-input-title {{focus?'title-hover': item.showError?'error-hover':''}}">{{item.title}}<text wx:if="{{item.require}}" class="require {{focus?'title-hover':''}}">*</text></view>
+<!-- 默认输入框 -->
+<input 
+  wx:if="{{item.inputType === 'input'}}"
+  type="{{item.type || type}}"
+  value="{{item.value}}"
+  placeholder="{{item.placeholder}}"
+  bindfocus="onFocus"
+  bindblur="onBlur"
+  bindinput="onInputChange"
+  data-item="{{item}}"
+  disabled="{{item.disabled || disabled}}"
+  maxlength="{{item.maxlength || maxlength}}"
+  class="xt-input xt-default"
+  style="background-color: {{item.backColor || backColor}}"
+/>
+<!-- 带单位输入框 -->
+<view class="xt-input-div" style="background-color: {{item.backColor || backColor}}" wx:if="{{item.inputType === 'inputUnit'}}">
+    <input
+      type="{{item.type || type}}"
+      value="{{item.value}}"
+      placeholder="{{item.placeholder}}"
+      bindfocus="onFocus"
+      bindblur="onBlur"
+      bindinput="onInputChange"
+      data-item="{{item}}"
+      disabled="{{item.disabled || disabled}}"
+      maxlength="{{item.maxlength || maxlength}}"
+      class="xt-input-unit"
+    />
+    <view class="xt-inputunit-text">
+        {{item.unit}}
+    </view>
+</view>
+<!-- 带按钮输入框 -->
+<view class="xt-input-div" style="background-color: {{item.backColor || backColor}}" wx:if="{{item.inputType === 'inputBtn'}}">
+    <input
+      value="{{item.value}}"
+      type="{{item.type || type}}"
+      placeholder="{{item.placeholder}}"
+      bindfocus="onFocus"
+      bindblur="onBlur"
+      bindinput="onInputChange"
+      data-item="{{item}}"
+      disabled="{{item.disabled || disabled}}"
+      maxlength="{{item.maxlength || maxlength}}"
+      class="xt-input-btn"
+    />
+    <view class="xt-inputbtn-text" bindtap="onBtnClick" data-item="{{item}}">
+        {{item.btnText}}
+    </view>
+</view>
+<!-- 选择框 -->
+<view bindtap="onOpenSelect" data-item="{{item}}" class="xt-select {{item.iconSize}} " wx:if="{{item.inputType === 'select'}}">
+    <view class="xt-select-input {{item.value?'':'xt-placeholder'}}" style="background-color: {{item.backColor || backColor}}">
+        {{item.value?item.value:item.placeholder}}
+    </view>
+    <image wx:if="{{!item.disabled}}" class="xt-input-icon " src="{{item.icon}}"></image>
+</view>
+<!-- 错误提示 -->
+<view class="error-div" wx:if="{{item.error && item.showError && !focus}}">
+  <image class='error-img' src="https://img.tanjiu.cn/home/B3xFaxewJHAJXmwErFFd3c8YhwjAdRcy.png" mode=""/>
+  <view class="error-text">{{item.error}}</view>
+</view>
+<!-- 自定义内容 -->
+<slot></slot>

package/libs/xt-form/index.wxss

@@ -0,0 +1,141 @@
+/* input：默认 开始 */
+.xt-input-title {
+    font-size: 34rpx;
+    line-height: 48rpx;
+    font-weight: 800;
+    color: #000000;
+    margin-bottom: 16rpx;
+}
+.require {
+  color: #FF4D4D;
+}
+.title-hover {
+    color: #6622AA;
+}
+.error-hover {
+    color: #FF4D4D;
+}
+
+.xt-input {
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 40rpx;
+    line-height: 56rpx;
+    border-radius: 12rpx;
+}
+.xt-default {
+    height: 96rpx;
+    padding: 0 16rpx;
+}
+/* input：带按钮或单位 */
+.xt-input-div {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-radius: 12rpx;
+}
+.xt-input-div input{
+    flex: 1;
+}
+.xt-input-btn {
+    height: 112rpx;
+    font-size: 40rpx;
+    line-height: 56rpx;
+    padding: 0 16rpx;
+    box-sizing: border-box;
+}
+.xt-inputbtn-text {
+    font-size: 34rpx;
+    line-height: 48rpx;
+    padding: 16rpx 32rpx;
+    box-sizing: border-box;
+    background-color: #6722AB;
+    color: white;
+    border-radius: 120rpx;
+    height: 80rpx;
+    margin-right: 24rpx;
+    font-weight: 800;
+}
+/* 单位 */
+.xt-input-unit {
+  height: 96rpx;
+  font-size: 40rpx;
+  line-height: 56rpx;
+  padding: 0 16rpx;
+  box-sizing: border-box;
+}
+.xt-inputunit-text {
+    font-size: 40rpx;
+    line-height: 96rpx;
+    box-sizing: border-box;
+    color: #000000;
+    height: 96rpx;
+    margin-right: 32rpx;
+}
+/* select：开始 */
+.xt-select {
+    position: relative;
+    width: 100%;
+    height: auto;
+}
+.xt-select-input {
+    width: 100%;
+    font-size: 40rpx;
+    line-height: 56rpx;
+    box-sizing: border-box;
+    border-radius: 12rpx;
+}
+.xt-placeholder {
+    color: #727272;
+}
+.xt-input-icon {
+    position: absolute;
+    top: 50%;
+    right: 16rpx;
+    transform: translate(0%, -50%);
+}
+/* 右边小图标 */
+.small view{
+    padding: 20rpx 48rpx 20rpx 16rpx;
+}
+.small image{
+    width: 32rpx;
+    height: 32rpx;
+}
+/* 右边大图标 */
+.big view{
+    padding: 20rpx 80rpx 20rpx 16rpx;
+}
+.big image{
+    width: 48rpx;
+    height: 48rpx;
+}
+/* select：结束 */
+/* textarea */
+.xt-textarea {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 20rpx 16rpx;
+    font-size: 40rpx;
+    line-height: 56rpx;
+    border-radius: 12rpx;
+    /* min-height: 96rpx; */
+}
+/*  */
+.error-div {
+  display: flex;
+}
+.error-img {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 8rpx;
+  margin-top: 14rpx;
+}
+.error-text {
+  font-size: 32rpx;
+  line-height: 44rpx;
+  color: #ff4d4d;
+  flex: 1;
+  margin-top: 8rpx;
+  word-break: break-all;
+}

package/libs/xt-icon/README.md

@@ -0,0 +1,39 @@
+# Icon图标
+
+### 介绍
+基于字体的图标集，具体查看iconfont
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/wAXdkKfGcTjPNesj5TY3Dff3zG78EQGQ.png "字体图标效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-icon": "@xtdev/xt-miniprogram-ui/xt-icon",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```
+<xt-icon icon="wenhao"></xt-icon>
+```
+
+### 图标大小
+设置 `size` 属性控制图标大小
+```
+<xt-icon icon="wenhao" size="{{32}}">
+</xt-card-cell>
+```
+
+##API
+
+####xt-icon props
+
+| 参数      | 说明 |  类型 |
+| ----------- | ----------- | ---------- |
+| icon      | 图标名称，具体值见iconfont | `String` |
+| size   | 图标大小，单位rpx  | `Number` |

package/libs/xt-icon/index.js

@@ -0,0 +1,25 @@
+// pages/components/xt-icon.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    icon: {
+      type: String,
+    },
+    size: {
+      type: Number,
+      value: 28,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {},
+});

package/libs/xt-icon/index.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+}

package/libs/xt-icon/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/components/xt-icon.wxml-->
+<text class="iconfont icon-{{icon}}" style="font-size: {{size}}rpx;"></text>

package/libs/xt-icon/index.wxss

@@ -0,0 +1,159 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4088939 */
+  src: url('https://at.alicdn.com/t/c/font_4088939_jcdv8i40wy.woff2?t=1690182324093') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4088939_jcdv8i40wy.woff?t=1690182324093') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4088939_jcdv8i40wy.ttf?t=1690182324093') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  line-height: 1;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dingwei:before {
+  content: "\e61e";
+}
+
+.icon-weixing:before {
+  content: "\e61f";
+}
+
+.icon-qianbao:before {
+  content: "\e620";
+}
+
+.icon-liushui:before {
+  content: "\e621";
+}
+
+.icon-tongguo:before {
+  content: "\e622";
+}
+
+.icon-yinhangka:before {
+  content: "\e624";
+}
+
+.icon-fangfu:before {
+  content: "\e625";
+}
+
+.icon-saomiao:before {
+  content: "\e626";
+}
+
+.icon-tixing:before {
+  content: "\e627";
+}
+
+.icon-shibai-xiao:before {
+  content: "\e628";
+}
+
+.icon-shouji:before {
+  content: "\e629";
+}
+
+.icon-kabao:before {
+  content: "\e62a";
+}
+
+.icon-paizhao:before {
+  content: "\e62b";
+}
+
+.icon-shaixuan-yuan:before {
+  content: "\e62c";
+}
+
+.icon-arrow:before {
+  content: "\e62d";
+}
+
+.icon-xingzhuangjiehe:before {
+  content: "\e60e";
+}
+
+.icon-shibai-kongxin:before {
+  content: "\e60f";
+}
+
+.icon-jingao-kongxin:before {
+  content: "\e614";
+}
+
+.icon-dengdai-kongxin:before {
+  content: "\e615";
+}
+
+.icon-dengdai:before {
+  content: "\e616";
+}
+
+.icon-shibai-da:before {
+  content: "\e61d";
+}
+
+.icon-jia-xuanzhong:before {
+  content: "\e683";
+}
+
+.icon-jian-xuanzhong:before {
+  content: "\e684";
+}
+
+.icon-xiala:before {
+  content: "\e685";
+}
+
+.icon-shangla:before {
+  content: "\e686";
+}
+
+.icon-jinggao:before {
+  content: "\e687";
+}
+
+.icon-weixuanzhong1:before {
+  content: "\e688";
+}
+
+.icon-daohang:before {
+  content: "\e60d";
+}
+
+.icon-shouqi:before {
+  content: "\e610";
+}
+
+.icon-shaixuan:before {
+  content: "\e611";
+}
+
+.icon-shanchu:before {
+  content: "\e612";
+}
+
+.icon-sousuo:before {
+  content: "\e613";
+}
+
+.icon-zhengque:before {
+  content: "\e617";
+}
+
+.icon-wenhao-xiao:before {
+  content: "\e618";
+}
+
+.icon-youjiantou:before {
+  content: "\e619";
+}
+
+.icon-zhankai:before {
+  content: "\e61b";
+}

package/libs/xt-popover/README.md

@@ -0,0 +1,71 @@
+# Popover 底部弹窗
+
+### 介绍
+底部操作弹窗
+
+###效果图
+![效果图](https://img.tanjiu.cn/home/azzMHcemDKsstcMWTx7C5SeQM5yPwTwX.png "Popover效果图")
+
+### 引入
+在app.json或页面配置json中引入
+```
+"usingComponents": {
+    "xt-popover": "@xtdev/xt-miniprogram-ui/xt-popover",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+#### 操作样式
+
+```
+   <xt-popover show="{{isShow1}}" itemTextKey="name" operates="{{operates}}" type="{{type}}"  bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+#### 文本样式
+
+```
+<xt-popover title="Popover 弹出框-文本样式" show="{{isShow2}}" type="{{type}}" textContent="{{textContent}}" bind:onClose="closePopover" bind:onConfirm="confirm"></xt-popover>
+```
+
+#### 选择样式-单选
+
+```
+<xt-popover title="Popover 弹出框-选择样式-单选" show="{{isShow3}}" type="{{type}}" itemTextKey="areaName" contrastId="areaId" bind:onConfirm="confirm" sourceData="{{sourceData}}" selectData="{{selectData}}" bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+#### 选择样式-多选
+
+```
+<xt-popover title=" Popover 弹出框-选择样式-多选" show="{{isShow4}}" type="{{type}}" itemTextKey="areaName" contrastId="areaId" bind:onConfirm="confirm" sourceData="{{sourceData}}" selectData="{{selectData}}" bind:onChooseItemClick="chooseItemClick" bind:onClose="closePopover"></xt-popover>
+```
+
+## API
+
+#### xt-popover props
+
+| 参数         | 说明        |  类型      |  默认值        |
+| ----------- | ----------- | ---------- | ------------  |
+| type      | 弹窗类型，可选值为 `operate` `text` `single` `multiple` | string |  `operate`
+| zIndx      | z-index 层级 | number | `999`
+| title      | 弹窗标题                          | string |  `无`
+| show  | 是否展示弹窗                      | boolean | `false`
+| showCloseIcon      | 是否展示弹窗关闭图标 | boolean | `true`
+| textContent      | 弹窗类型为 `text` 的文本内容 | string |   `无`
+| itemTextKey      | 弹窗类型为 `operate`  `single` `multiple`    的文本内容的 key | string |    `无`
+| operates     | 弹窗类型为 `operate` 时的操作数组 | array |   `无`
+| sourceData      | 总的数据 | array |    `[]`
+| selectData      | 选中的数据 | array |  `[]`
+| contrastId      | 用于是否选中数据对比的依据 | string |   `无`
+
+
+
+####Events
+
+| 事件名            | 说明          |  回调参数               |
+| ---------------- | ------------- | ---------------------- |
+| bind:onChooseItemClick      |  弹窗类型为 `operate`  `single` `multiple` 点击没有项触发的事件 | event.detail.chooseItem 为选择的数据
+| bind:onClose      | 点击关闭icon触发的事件 
+bind:onConfirm | 弹窗类型为 `text`  `multiple` 时点击确定触发的事件 | event.detail.chooseData