stellar-ui-plus 1.20.1 → 1.20.3

package/components/ste-date-user/README.md

@@ -4,6 +4,10 @@
 
 ---$
 
+### 域名配置
+
+如需使用日期时间类型，需在小程序后台配置域名`https://fastly.jsdelivr.net`合法，才可使用
+
 ## 代码演示
 
 ### 日期类型

package/components/ste-date-user/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
     "title": "DateUser 人员信息以及日期",
-    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/loading.png"
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/人员信息.png"
 }

package/components/ste-date-user/ste-date-user.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, defineComponent, onMounted } from 'vue';
-import { getDateInfo } from '@swjs/chinese-holidays';
+import { getDateInfo } from '../../utils/time';
+
 import propsData from './props';
 defineComponent({
     name: 'ste-date-user',

package/components/ste-filter-tool/README.md

@@ -37,7 +37,9 @@
     ]);
 </script>
 <template>
-    <ste-filter-tool :filterData="filterOptions" :menu-data="subFilters" @item-click="handleFilterClick" value="all" />
+    <view style="width: 100%">
+        <ste-filter-tool :filterData="filterOptions" :menu-data="subFilters" @item-click="handleFilterClick" value="all" />
+    </view>
 </template>
 ```
 
@@ -79,7 +81,9 @@
     ]);
 </script>
 <template>
-    <ste-filter-tool :filterData="filterOptions" :menu-data="subFilters" @item-click="handleFilterClick" value="all" multiple />
+    <view style="width: 100%">
+        <ste-filter-tool :filterData="filterOptions2" :menu-data="subFilters2" @item-click="handleFilterClick" value="all" multiple />
+    </view>
 </template>
 ```
 

package/components/ste-filter-tool/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
     "title": "FilterTool 筛选选项",
-    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/filterTool.png"
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/筛选选框.png"
 }

package/components/ste-filter-tool/ste-filter-tool.vue

@@ -199,83 +199,88 @@ const handleMenuConfirm = () => {
     .filter-button {
         margin-left: 16rpx;
         color: #000;
+
+        // #ifndef MP-WEIXIN || MP-ALIPAY || APP
         cursor: pointer;
+        // #endif
 
-        :deep(.filter-box-menu) {
-            .custom-menu-box {
-                background-color: #fff;
-                padding-top: 24rpx;
-                border-radius: 0 0 18rpx 18rpx;
-                .menu-box {
-                    width: 100%;
+        // :deep(.filter-box-menu) {
 
-                    margin-bottom: 56rpx;
-                    font-size: var(--font-size-24, 24rpx);
+        // }
 
-                    .menu-item-block {
-                        padding: 0 40rpx;
-                        margin-bottom: 20rpx;
+        :deep(.custom-menu-box) {
+            background-color: #fff;
+            padding-top: 24rpx;
+            border-radius: 0 0 18rpx 18rpx;
+            .menu-box {
+                width: 100%;
 
-                        .menu-item-title {
-                            font-size: var(--font-size-24, 24rpx);
-                            color: #888c92;
-                            margin-bottom: 20rpx;
-                        }
+                margin-bottom: 56rpx;
+                font-size: var(--font-size-24, 24rpx);
 
-                        .menu-item-content {
-                            display: flex;
-                            flex-wrap: wrap;
-                            gap: 20rpx 32rpx;
+                .menu-item-block {
+                    padding: 0 40rpx;
+                    margin-bottom: 20rpx;
+
+                    .menu-item-title {
+                        font-size: var(--font-size-24, 24rpx);
+                        color: #888c92;
+                        margin-bottom: 20rpx;
+                    }
+
+                    .menu-item-content {
+                        display: flex;
+                        flex-wrap: wrap;
+                        gap: 20rpx 32rpx;
 
-                            &.multiple {
-                                .menu-item-child.active {
-                                    background-color: var(--active-color);
-                                    color: #fff;
-                                }
+                        &.multiple {
+                            .menu-item-child.active {
+                                background-color: var(--active-color);
+                                color: #fff;
                             }
-                            .menu-item-child {
-                                padding: 10rpx 0;
-                                font-size: var(--font-size-24, 24rpx);
-                                color: var(--inactive-color);
-                                flex-shrink: 0;
-                                padding: 16rpx 40rpx;
-                                border-radius: 8rpx;
-                                background: rgba(230, 232, 234, 0.5);
-                                transition: all 0.2s ease;
-                                cursor: pointer;
-                                &.active {
-                                    color: var(--active-color);
-                                }
+                        }
+                        .menu-item-child {
+                            padding: 10rpx 0;
+                            font-size: var(--font-size-24, 24rpx);
+                            color: var(--inactive-color);
+                            flex-shrink: 0;
+                            padding: 16rpx 40rpx;
+                            border-radius: 8rpx;
+                            background: rgba(230, 232, 234, 0.5);
+                            transition: all 0.2s ease;
+                            cursor: pointer;
+                            &.active {
+                                color: var(--active-color);
                             }
                         }
                     }
                 }
+            }
 
-                .action-box {
-                    // padding: 0 40rpx;
-                    display: flex;
-                    justify-content: space-between;
+            .action-box {
+                // padding: 0 40rpx;
+                display: flex;
+                justify-content: space-between;
 
-                    // padding-bottom: 20rpx;
-                    height: 92rpx;
-                    border-radius: 0 0 16rpx 16rpx;
+                // padding-bottom: 20rpx;
+                height: 92rpx;
+                border-radius: 0 0 16rpx 16rpx;
 
-                    .btn {
-                        flex: 1;
-                        font-size: var(--font-size-32, 32rpx);
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        &.reset {
-                            background-color: #f4f5f6;
-                            border-radius: 0 0 0 16rpx;
-                            color: #1c1f23;
-                        }
-                        &.confirm {
-                            background-color: var(--active-color);
-                            border-radius: 0 0 16rpx 0;
-                            color: #fff;
-                        }
+                .btn {
+                    flex: 1;
+                    font-size: var(--font-size-32, 32rpx);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    &.reset {
+                        background-color: #f4f5f6;
+                        border-radius: 0 0 0 16rpx;
+                        color: #1c1f23;
+                    }
+                    &.confirm {
+                        background-color: var(--active-color);
+                        border-radius: 0 0 16rpx 0;
+                        color: #fff;
                     }
                 }
             }

package/components/ste-goods-info/ATTRIBUTES.md

@@ -7,6 +7,7 @@
 | `checkboxDisabled` | 是否禁用选择框 | `boolean` | `false` | - | - |
 | `checked` | 是否选中 | `boolean` | `false` | - | - |
 | `watermark` | 水印URL | `string` | `` | - | - |
+| `watermarkStyle` | 水印样式 | `Object` | `{}` | - | - |
 | `number` | 数量 | `number` | `1` | - | - |
 | `stepper` | 是否显示步进器 | `boolean` | `false` | - | - |
 | `precision` | 数值精度 | `number` | `0` | - | - |

package/components/ste-goods-info/README.md

@@ -118,6 +118,29 @@
 </template>
 ```
 
+### 水印
+
+- 属性`watermark`接收水印图片URL，用于展示水印
+- 属性`watermarkStyle`用于控制水印样式
+
+```html
+<script setup lang="ts">
+    import { ref } from 'vue';
+    const data = ref({
+        image: 'https://image.whzb.com/chain/StellarUI/bg1.jpg',
+        title: '商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称',
+        tag: '新品',
+        code: '123456',
+        barCode: '1234567890123',
+        price: '88800',
+        originalPrice: '99900',
+    });
+</script>
+<template>
+    <ste-goods-info :data="data" watermark="https://image.whzb.com/chain/StellarUI/已打印.png" />
+</template>
+```
+
 ### 点击事件
 
 - 默认插槽内容为商品编码下的其他展示项

package/components/ste-goods-info/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
     "title": "GoodsInfo 商品信息",
-    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/button.png"
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/商品信息.png"
 }

package/components/ste-goods-info/props.ts

@@ -40,6 +40,11 @@ export default {
         type: String,
         default: () => '',
     },
+    /** 水印样式 */
+    watermarkStyle: {
+        type: Object,
+        default: () => ({}),
+    },
     /** 数量 */
     number: {
         type: Number,

package/components/ste-goods-info/ste-goods-info.easycom.json

@@ -45,6 +45,12 @@
             "type": "string",
             "default": ""
         },
+        {
+            "name": "watermarkStyle",
+            "description": "水印样式",
+            "type": "Object",
+            "default": "{}"
+        },
         {
             "name": "number",
             "description": "数量",

package/components/ste-goods-info/ste-goods-info.vue

@@ -110,6 +110,8 @@ const _tagBg = computed(() => (props.tagBg ? props.tagBg : getColor().steThemeCo
             </view>
         </view>
         <view class="ste-goods-info-checkbox right" v-if="checkbox === 'right'"><setCheckbox :disabled="checkboxDisabled" iconSize="30" v-model="_checked" @change="checkboxChange" /></view>
+
+        <image v-if="watermark" class="ste-goods-info-watermark" :style="watermarkStyle" :src="watermark" />
     </view>
 </template>
 
@@ -123,6 +125,8 @@ const _tagBg = computed(() => (props.tagBg ? props.tagBg : getColor().steThemeCo
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    position: relative;
+
     .ste-goods-info-image {
         width: 160rpx;
         height: 160rpx;
@@ -168,6 +172,16 @@ const _tagBg = computed(() => (props.tagBg ? props.tagBg : getColor().steThemeCo
         }
     }
 
+    .ste-goods-info-watermark {
+        width: 80rpx;
+        height: 80rpx;
+        position: absolute;
+        right: 2rpx;
+        bottom: 12rpx;
+        opacity: 0.4;
+        z-index: 10;
+    }
+
     &.checkbox {
         padding-left: 8rpx;
         .ste-goods-info-content {

package/components/ste-goods-list/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
     "title": "GoodsList 商品列表",
-    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/button.png"
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/商品列表.png"
 }

package/components/ste-navbar/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
     "title": "Navbar 导航栏",
-    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/loading.png"
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/导航栏.png"
 }

package/components/ste-navbar/ste-navbar.vue

@@ -56,7 +56,6 @@ function backClick() {
 <template>
     <view class="ste-navbar-root" :style="[pageStyle, { paddingTop: `${navbarTop}rpx` }]">
         <view class="nav" :style="{ width: `${navbarWidth}rpx`, height: `${navbarHeight}rpx`, backgroundColor: backgroundColor }">
-            <!-- #ifdef MP-WEIXIN || H5 || APP -->
             <view class="back-box">
                 <view v-if="autoBack" class="back" :style="{ backgroundColor: backBackgroundColor, borderColor: backBorderColor, opacity: backOpacity }">
                     <ste-icon :code="backCode" weight="bold" :size="28" :color="backColor"></ste-icon>
@@ -64,10 +63,6 @@ function backClick() {
                 <view @click="backClick" class="back-click-hot" />
             </view>
 
-            <!-- #endif -->
-            <!-- #ifdef MP-ALIPAY -->
-            <view class="ali-back-box" />
-            <!-- #endif -->
             <view v-if="title && titleAlignment == 1" class="title" :style="{ color: titleColor }">{{ title }}</view>
             <view class="title slot-default"><slot name="default"></slot></view>
         </view>
@@ -119,12 +114,6 @@ function backClick() {
             transform: translateX(-30rpx);
         }
     }
-
-    .ali-back-box {
-        width: 50rpx;
-        height: 50rpx;
-        padding-right: 10rpx;
-    }
     .slot-default {
         display: flex;
         align-items: center;

package/components/ste-search-box/config.json

@@ -1,5 +1,5 @@
 {
     "group": "业务组件",
     "title": "SearchBox 搜索组件",
-    "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/searchBox.png"
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/搜索框.png"
 }

package/components/ste-search-box/ste-search-box.vue

@@ -37,17 +37,20 @@ watch(
     () => props.headerValue,
     newVal => {
         const now = new Date();
+        let values = [];
         if (props.type === 'dateRange') {
             if (newVal instanceof Array) {
                 for (let i = 0; i < 2; i++) {
-                    calendarValues.value[i] = dayjs(newVal[i] || now).format('YYYY-MM-DD');
+                    values[i] = dayjs(newVal[i] || now).format('YYYY-MM-DD');
                 }
             } else {
-                calendarValues.value = [dayjs(newVal || now).format('YYYY-MM-DD'), dayjs(now).format('YYYY-MM-DD')];
+                values = [dayjs(newVal || now).format('YYYY-MM-DD'), dayjs(now).format('YYYY-MM-DD')];
             }
         } else {
-            calendarValues.value = [dayjs(newVal || now).format('YYYY-MM-DD')];
+            values = [dayjs(newVal || now).format('YYYY-MM-DD')];
         }
+
+        calendarValues.value = values;
     },
     { immediate: true }
 );

package/components/ste-stepper/ste-stepper.vue

@@ -136,6 +136,7 @@ function blur(event: BaseEvent) {
         emits('update:modelValue', value);
         event.detail.value = value;
         emits('blur', event);
+        emits('change', value);
     });
 }
 function focus(event: BaseEvent) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.20.1",
+    "version": "1.20.3",
     "description": "",
     "author": "",
     "license": "MIT",
@@ -12,8 +12,5 @@
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "publish-vscode-plugin": "cd ../../../plugins/ste-helper & pnpm run publish"
-    },
-    "dependencies": {
-        "@swjs/chinese-holidays": "^1.1.0"
     }
 }

package/utils/time.ts

@@ -0,0 +1,239 @@
+/**
+ * @desc @swjs/chinese-holidays 中国法定节假日查询
+ * @version 1.1.0
+ */
+
+async function getRemoteHolidaysApi(year, options) {
+    return new Promise(async (resolve, reject) => {
+        uni.request({
+            url: `${options.baseUrl}/${year}.json`,
+            method: 'get',
+            success: res => {
+                console.log('res', res);
+                resolve(res.data);
+            },
+        });
+    });
+}
+
+// 日期网址链接
+// export const BASE_URL = 'https://cdn.jsdelivr.net/gh/NateScarlet/holiday-cn@master';
+/**
+ * 中国地区 cdn 地址受到污染，因此使用 fastly.jsdelivr.net
+ */
+const BASE_URL = 'https://fastly.jsdelivr.net/gh/NateScarlet/holiday-cn@master';
+const WEEKS = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+/**
+ * @desc 假期信息
+ */
+class HolidaysInfo {
+    constructor(config) {
+        /**
+         * 日期的缓存
+         */
+        this.holidays = {};
+        this.config = {
+            baseUrl: BASE_URL,
+            ...(config || {}),
+        };
+    }
+    /**
+     * @desc 获取日期信息
+     * @param {string} dateStr
+     * @returns
+     */
+    async getDateInfo(dateStr) {
+        const date = new Date(dateStr);
+        const year = date.getFullYear();
+        const holidays = await this.getHolidaysByYear(String(year));
+        // see https://github.com/MrSeaWave/chinese-holidays/pull/124
+        // 2022年12月31的节假日日期在2023年才能获得，有些时候会有调休
+        if (date.getMonth() === 11) {
+            const nextYear = year + 1;
+            const nextHolidays = await this.getHolidaysByYear(String(nextYear));
+            holidays.push(...nextHolidays);
+        }
+        return holidays.find(info => info.date === dateStr);
+    }
+    /**
+     * 获取当年的假期数据（包含节假日的调休
+     * @param year
+     */
+    async getHolidaysByYear(year) {
+        if (!this.holidays[year]) {
+            await this._getRemoteData(year);
+        }
+        return this.holidays[year] || [];
+    }
+    // 从链接中获取新的年份信息
+    async _getRemoteData(year) {
+        // console.log(`------ Start: 获取远程日期(${year})数据中... ------`);
+        const resp = await getRemoteHolidaysApi(year, { baseUrl: this.config.baseUrl });
+        console.log('resp', resp);
+        //await getMethod({ url: `/${year}.json` });
+        // console.log('------ End: 结束获取 ------');
+        const { days = [] } = resp || {};
+        if (!days.length) throw new Error(`暂时没有 ${year} 年的放假数据，请稍后重试 `);
+        this.holidays[year] = days;
+    }
+    // 获取本地holidays缓存
+    getHolidaysCache() {
+        return this.holidays;
+    }
+}
+
+/**
+ * @desc 判断是否是有效日期
+ * @param {Date} date
+ * @returns {boolean}
+ */
+function isValidDate(date) {
+    return date instanceof Date && !Number.isNaN(date.getTime());
+}
+/**
+ * @desc 日期格式化
+ * @param {AcceptDateType} date 日期
+ * @param {string} fmt 格式规则
+ * @returns {string} 格式化后的日期
+ */
+function dateFormat(date, fmt = 'YYYY-MM-DD HH:mm:ss') {
+    const d = new Date(date);
+    if (!isValidDate(d)) {
+        throw new Error(`Invalid date: ${date}`);
+    }
+    const opt = {
+        'Y+': d.getFullYear().toString(), // 年
+        'M+': (d.getMonth() + 1).toString(), // 月
+        'D+': d.getDate().toString(), // 日
+        'H+': d.getHours().toString(), // 小时
+        'm+': d.getMinutes().toString(), // 分
+        's+': d.getSeconds().toString(), // 秒
+        'q+': Math.floor((d.getMonth() + 3) / 3).toString(), // 季度
+        S: d.getMilliseconds().toString(), // 毫秒
+    };
+    Object.entries(opt).forEach(([k, val]) => {
+        const ret = new RegExp(`(${k})`).exec(fmt);
+        if (ret) {
+            fmt = fmt.replace(ret[1], ret[1].length === 1 ? val : val.padStart(ret[1].length, '0'));
+        }
+    });
+    return fmt;
+}
+/**
+ * @desc 当前日期是星期几
+ * @param {AcceptDateType} date 日期
+ * @returns {string}
+ */
+function getWeekDay(date) {
+    return WEEKS[new Date(date).getDay()];
+}
+/**
+ * @desc 判断是否是周末
+ * @param date
+ */
+function isWeekEnd$1(date) {
+    const day = new Date(date).getDay();
+    return day === 0 || day === 6;
+}
+
+var EDateType;
+(function (EDateType) {
+    /**
+     * 工作日
+     */
+    EDateType[(EDateType['WorkDay'] = 1)] = 'WorkDay';
+    /**
+     * 周末
+     */
+    EDateType[(EDateType['WeekEnd'] = 2)] = 'WeekEnd';
+    /**
+     * 法定节假日
+     */
+    EDateType[(EDateType['Holiday'] = 3)] = 'Holiday';
+    /**
+     * 调休，节假日调班
+     */
+    EDateType[(EDateType['LeaveInLieu'] = 4)] = 'LeaveInLieu';
+})(EDateType || (EDateType = {}));
+/**
+ * 判定日期的工具集
+ */
+class Holidays {
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new Holidays();
+        }
+        return this.instance;
+    }
+    constructor(config) {
+        /**
+         * @desc 获取当前日期数据
+         * @param {string | Date | number} date 日期
+         */
+        this.getDateInfo = async date => {
+            const dateStr = dateFormat(date, 'YYYY-MM-DD');
+            const day = getWeekDay(date);
+            // type: 1-工作日 2-周末 3 法定节假日 4 节假日调班
+            const result = {
+                name: '工作日',
+                date: dateStr,
+                day,
+                type: 1,
+            };
+            if (isWeekEnd$1(date)) {
+                result.name = '周末';
+                result.type = 2;
+            }
+            const holiday = await this.holidaysInfo.getDateInfo(dateStr);
+            if (holiday) {
+                const { isOffDay, name } = holiday;
+                result.name = name + (isOffDay ? '' : ' 调班');
+                result.type = isOffDay ? 3 : 4;
+            }
+            return result;
+        };
+        /**
+         * @desc 判断是否是法定节假日
+         * @param {AcceptDateType} date 日期
+         */
+        this.isHoliday = async date => {
+            const info = await this.getDateInfo(date);
+            return info.type === EDateType.Holiday;
+        };
+        /**
+         * @desc 判断是否是工作日（含节假日的调休）
+         * @param date
+         */
+        this.isWorkingDay = async date => {
+            const info = await this.getDateInfo(date);
+            return info.type === EDateType.WorkDay || info.type === EDateType.LeaveInLieu;
+        };
+        /**
+         * @desc 判断是否是周末（不包含节假日调休上班）
+         * @param date
+         */
+        this.isWeekEnd = async date => {
+            const info = await this.getDateInfo(date);
+            return info.type === EDateType.WeekEnd;
+        };
+        /**
+         * @desc 获取本地的假期缓存数据
+         */
+        this.getHolidaysCache = () => {
+            return this.holidaysInfo.getHolidaysCache();
+        };
+        this.holidaysInfo = new HolidaysInfo(config);
+    }
+}
+const holidays = Holidays.getInstance();
+
+const isWorkingDay = holidays.isWorkingDay;
+const isHoliday = holidays.isHoliday;
+const isWeekEnd = holidays.isWeekEnd;
+const getDateInfo = holidays.getDateInfo;
+const getHolidaysCache = holidays.getHolidaysCache;
+// 测试编译包的语法，不要使用
+const __isHoliday__ = holidays?.isHoliday;
+
+export { Holidays, __isHoliday__, getDateInfo, getHolidaysCache, isHoliday, isWeekEnd, isWorkingDay };