@tuya-miniapp/smart-ui 2.3.8-beta-3 → 2.3.8-beta-5

package/packages/common/utils.ts

@@ -0,0 +1,119 @@
+import { isDef, isNumber, isPlainObject, isPromise } from './validator';
+import { canIUseGroupSetData, canIUseNextTick, getSystemInfoSync } from './version';
+
+export { isDef } from './validator';
+export { getSystemInfoSync } from './version';
+
+export function range(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max);
+}
+
+export function nextTick(cb: (...args: any[]) => void) {
+  if (canIUseNextTick()) {
+    wx.nextTick(cb);
+  } else {
+    setTimeout(() => {
+      cb();
+    }, 1000 / 30);
+  }
+}
+
+export function addUnit(value?: string | number): string | undefined {
+  if (!isDef(value)) {
+    return undefined;
+  }
+
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}
+
+export function requestAnimationFrame(cb?: () => void) {
+  return new Promise<void>(resolve => {
+    setTimeout(() => {
+      cb?.();
+      resolve();
+    }, 1000 / 30);
+  });
+}
+
+export function pickExclude(obj: unknown, keys: string[]) {
+  if (!isPlainObject(obj)) {
+    return {};
+  }
+
+  return Object.keys(obj).reduce((prev, key) => {
+    if (!keys.includes(key)) {
+      prev[key] = obj[key];
+    }
+
+    return prev;
+  }, {});
+}
+
+export function getRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string) {
+  return new Promise<WechatMiniprogram.BoundingClientRectCallbackResult>(resolve => {
+    wx.createSelectorQuery()
+      .in(context)
+      .select(selector)
+      .boundingClientRect()
+      .exec((rect = []) => resolve(rect[0]));
+  });
+}
+
+export function getAllRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string) {
+  return new Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>(resolve => {
+    wx.createSelectorQuery()
+      .in(context)
+      .selectAll(selector)
+      .boundingClientRect()
+      .exec((rect = []) => resolve(rect[0]));
+  });
+}
+
+export function groupSetData(context: WechatMiniprogram.Component.TrivialInstance, cb: () => void) {
+  if (canIUseGroupSetData()) {
+    context.groupSetData(cb);
+  } else {
+    cb();
+  }
+}
+
+export function toPromise(promiseLike: Promise<unknown> | unknown) {
+  if (isPromise(promiseLike)) {
+    return promiseLike;
+  }
+
+  return Promise.resolve(promiseLike);
+}
+
+// 浮点数精度处理
+export function addNumber(num1, num2) {
+  const cardinal = 10 ** 10;
+  return Math.round((num1 + num2) * cardinal) / cardinal;
+}
+
+// 限制value在[min, max]之间
+export const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+export function getCurrentPage<T>() {
+  const pages = getCurrentPages();
+  return pages[pages.length - 1] as T & WechatMiniprogram.Page.TrivialInstance;
+}
+
+export const isPC = ['mac', 'windows'].includes(getSystemInfoSync().platform);
+
+// 是否企业微信
+export const isWxWork = getSystemInfoSync().environment === 'wxwork';
+
+export function replacePlaceholders(template, values) {
+  // 使用正则表达式匹配占位符
+  return template.replace(/{{(.*?)}}/g, (match, key) => {
+    return values[key] || match; // 如果在values中找到key对应的值，则替换；否则保留原样
+  });
+}
+
+export function getSafeBottomOffset() {
+  const { safeArea, screenHeight, statusBarHeight } = getSystemInfoSync() || {};
+  const bottomSafeHeight = screenHeight - safeArea?.height - statusBarHeight;
+  return bottomSafeHeight;
+}

package/packages/common/validator.ts

@@ -0,0 +1,40 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction(val: unknown): val is Function {
+  return typeof val === 'function';
+}
+
+export function isPlainObject(val: unknown): val is Record<string, unknown> {
+  return val !== null && typeof val === 'object' && !Array.isArray(val);
+}
+
+export function isPromise<T = unknown>(val: unknown): val is Promise<T> {
+  return isPlainObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+
+export function isDef(value: unknown): boolean {
+  return value !== undefined && value !== null;
+}
+
+export function isObj(x: unknown): x is Record<string, unknown> {
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+export function isNumber(value: string) {
+  return /^\d+(\.\d+)?$/.test(value);
+}
+
+export function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
+const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv)/i;
+
+export function isImageUrl(url: string): boolean {
+  return IMAGE_REGEXP.test(url);
+}
+
+export function isVideoUrl(url: string): boolean {
+  return VIDEO_REGEXP.test(url);
+}

package/packages/common/version.ts

@@ -0,0 +1,80 @@
+interface WxWorkSystemInfo extends WechatMiniprogram.SystemInfo {
+  environment?: 'wxwork';
+}
+
+interface SystemInfo extends WxWorkSystemInfo, WechatMiniprogram.SystemInfo {}
+
+let systemInfo: SystemInfo;
+
+export function getSystemInfoSync() {
+  if (systemInfo == null) {
+    systemInfo = wx.getSystemInfoSync();
+  }
+
+  return systemInfo as SystemInfo;
+}
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.');
+  v2 = v2.split('.');
+  const len = Math.max(v1.length, v2.length);
+
+  while (v1.length < len) {
+    v1.push('0');
+  }
+  while (v2.length < len) {
+    v2.push('0');
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i], 10);
+    const num2 = parseInt(v2[i], 10);
+
+    if (num1 > num2) {
+      return 1;
+    }
+    if (num1 < num2) {
+      return -1;
+    }
+  }
+
+  return 0;
+}
+
+function gte(version: string) {
+  const system = getSystemInfoSync();
+
+  return compareVersion(system.SDKVersion, version) >= 0;
+}
+
+export function canIUseModel() {
+  return gte('2.9.3');
+}
+
+export function canIUseFormFieldButton() {
+  return gte('2.10.3');
+}
+
+export function canIUseAnimate() {
+  return gte('2.9.0');
+}
+
+export function canIUseGroupSetData() {
+  return gte('2.4.0');
+}
+
+export function canIUseNextTick() {
+  try {
+    return wx.canIUse('nextTick');
+  } catch (e) {
+    return gte('2.7.1');
+  }
+}
+
+export function canIUseCanvas2d() {
+  return gte('2.9.0');
+}
+
+export function canIUseGetUserProfile() {
+  return !!wx.getUserProfile;
+}

package/packages/config-provider/README.en.md

@@ -0,0 +1,121 @@
+---
+category: General
+---
+
+# ConfigProvider
+
+### Introduction
+
+Used to configure the theme styles of Smart UI components.
+
+### Import
+
+Import the component in `app.json` or `index.json`. For details, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-config-provider": "@tuya-miniapp/smart-ui/lib/config-provider/index"
+}
+```
+
+## Customize Theme
+
+### Introduction
+
+Smart UI components organize styles through a wealth of [CSS variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties). By overriding these CSS variables, you can achieve effects like **custom themes and dynamic theme switching**.
+
+#### Example
+
+Take the Button component as an example. Looking at the component's style, you can see the following variables on the `.smart-button--primary` class name:
+
+```css
+.smart-button--primary {
+  color: var(--button-primary-color, #fff);
+  background: var(--button-primary-background-color, #07c160);
+  border: var(--button-border-width, 1px) solid var(
+      --button-primary-border-color,
+      #07c160
+    );
+}
+```
+
+### Custom CSS Variables
+
+#### Override via CSS
+
+You can directly override these CSS variables in your code, and the style of the Button component will change accordingly:
+
+```css
+/* After adding this style, the Primary Button will turn red */
+page {
+  --button-primary-background-color: red;
+}
+```
+
+#### Override via ConfigProvider
+
+The `ConfigProvider` component offers the ability to override CSS variables. You need to wrap a `ConfigProvider` component around the root node and use the `theme-vars` attribute to configure some theme variables. The parameters for `theme-vars` are the component's CSS variables converted into camelCase form.
+
+```html
+<smart-config-provider theme-vars="{{ themeVars }}">
+  <smart-cell-group>
+    <smart-field label="Rating">
+      <view slot="input" style="width: 100%">
+        <smart-rate
+          model:value="{{ rate }}"
+          data-key="rate"
+          bind:change="onChange"
+        />
+      </view>
+    </smart-field>
+    <smart-field label="Slider" border="{{ false }}">
+      <view slot="input" style="width: 100%">
+        <smart-slider
+          value="{{ slider }}"
+          data-key="slider"
+          bind:change="onChange"
+        />
+      </view>
+    </smart-field>
+  </smart-cell-group>
+
+  <view style="margin: 16px">
+    <smart-button round block type="primary">Submit</smart-button>
+  </view>
+</smart-config-provider>
+```
+
+```js
+import Page from '../../common/page';
+
+Page({
+  data: {
+    rate: 4,
+    slider: 50,
+    themeVars: {
+      rateIconFullColor: '#07c160',
+      sliderBarHeight: '4px',
+      sliderButtonWidth: '20px',
+      sliderButtonHeight: '20px',
+      sliderActiveBackgroundColor: '#07c160',
+      buttonPrimaryBorderColor: '#07c160',
+      buttonPrimaryBackgroundColor: '#07c160',
+    },
+  },
+
+  onChange(event) {
+    const { key } = event.currentTarget.dataset;
+    this.setData({
+      [key]: event.detail,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| Parameter  | Description    | Type     | Default |
+| ---------- | -------------- | -------- | ------- |
+| theme-vars | Custom theme variables | _object_ | -      |

package/packages/config-provider/README.md

@@ -0,0 +1,121 @@
+---
+category: 通用
+---
+
+# ConfigProvider 全局配置
+
+### 介绍
+
+用于配置 Smart UI 组件的主题样式。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-config-provider": "@tuya-miniapp/smart-ui/lib/config-provider/index"
+}
+```
+
+## 定制主题
+
+### 介绍
+
+Smart UI 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，通过覆盖这些 CSS 变量，可以实现**定制主题、动态切换主题**等效果。
+
+#### 示例
+
+以 Button 组件为例，查看组件的样式，可以看到 `.smart-button--primary` 类名上存在以下变量：
+
+```css
+.smart-button--primary {
+  color: var(--button-primary-color, #fff);
+  background: var(--button-primary-background-color, #07c160);
+  border: var(--button-border-width, 1px) solid var(
+      --button-primary-border-color,
+      #07c160
+    );
+}
+```
+
+### 自定义 CSS 变量
+
+#### 通过 CSS 覆盖
+
+你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：
+
+```css
+/* 添加这段样式后，Primary Button 会变成红色 */
+page {
+  --button-primary-background-color: red;
+}
+```
+
+#### 通过 ConfigProvider 覆盖
+
+`ConfigProvider` 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 `ConfigProvider` 组件，并通过 `theme-vars` 属性来配置一些主题变量，其入参就是组件的CSS 变量变成驼峰形式。
+
+```html
+<smart-config-provider theme-vars="{{ themeVars }}">
+  <smart-cell-group>
+    <smart-field label="评分">
+      <view slot="input" style="width: 100%">
+        <smart-rate
+          model:value="{{ rate }}"
+          data-key="rate"
+          bind:change="onChange"
+        />
+      </view>
+    </smart-field>
+    <smart-field label="滑块" border="{{ false }}">
+      <view slot="input" style="width: 100%">
+        <smart-slider
+          value="{{ slider }}"
+          data-key="slider"
+          bind:change="onChange"
+        />
+      </view>
+    </smart-field>
+  </smart-cell-group>
+
+  <view style="margin: 16px">
+    <smart-button round block type="primary">提交</smart-button>
+  </view>
+</smart-config-provider>
+```
+
+```js
+import Page from '../../common/page';
+
+Page({
+  data: {
+    rate: 4,
+    slider: 50,
+    themeVars: {
+      rateIconFullColor: '#07c160',
+      sliderBarHeight: '4px',
+      sliderButtonWidth: '20px',
+      sliderButtonHeight: '20px',
+      sliderActiveBackgroundColor: '#07c160',
+      buttonPrimaryBorderColor: '#07c160',
+      buttonPrimaryBackgroundColor: '#07c160',
+    },
+  },
+
+  onChange(event) {
+    const { key } = event.currentTarget.dataset;
+    this.setData({
+      [key]: event.detail,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数       | 说明           | 类型     | 默认值 |
+| ---------- | -------------- | -------- | ------ |
+| theme-vars | 自定义主题变量 | _object_ | -      |

package/packages/config-provider/demo/index.json

@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-rate": "../../rate/index",
+    "smart-field": "../../field/index",
+    "smart-slider": "../../slider/index",
+    "smart-button": "../../button/index",
+    "smart-cell-group": "../../cell-group/index",
+    "smart-config-provider": "../../config-provider/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/config-provider/demo/index.less

@@ -0,0 +1,10 @@
+.contain {
+  padding: 0 24px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  width: 100%;
+}

package/packages/config-provider/demo/index.ts

@@ -0,0 +1,24 @@
+import { SmartComponent } from '../../common/component';
+
+SmartComponent({
+  data: {
+    rate: 4,
+    slider: 50,
+    themeVars: {
+      buttonPrimaryBorderColor: 'red',
+      buttonPrimaryBackgroundColor: 'red',
+    },
+  },
+
+  methods: {
+    onChange(event) {
+      const { color } = event.currentTarget.dataset;
+      this.setData({
+        themeVars: {
+          buttonPrimaryBorderColor: color,
+          buttonPrimaryBackgroundColor: color,
+        },
+      });
+    },
+  },
+});

package/packages/config-provider/demo/index.wxml

@@ -0,0 +1,20 @@
+<demo-block title="{{I18n.t('globalConfigurationStyles')}}">
+  <view class="contain">
+    <view class="buttons">
+      <smart-button type="primary" data-color="red" color="red" bind:click="onChange">
+        {{I18n.t('setColor')}}
+      </smart-button>
+      <smart-button type="primary" data-color="green" color="green" bind:click="onChange">
+        {{I18n.t('setColor')}}
+      </smart-button>
+      <smart-button type="primary" data-color="blue" color="blue" bind:click="onChange">
+        {{I18n.t('setColor')}}
+      </smart-button>
+    </view>
+    <smart-config-provider theme-vars="{{ themeVars }}">
+      <smart-button type="primary">
+        {{I18n.t('mainButton')}}
+      </smart-button>
+    </smart-config-provider>
+  </view>
+</demo-block>

package/packages/config-provider/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/packages/config-provider/index.ts

@@ -0,0 +1,10 @@
+import { SmartComponent } from '../common/component';
+
+SmartComponent({
+  props: {
+    themeVars: {
+      type: Object,
+      value: {},
+    },
+  },
+});

package/packages/config-provider/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view class="smart-config-provider" style="{{ computed.mapThemeVarsToCSSVars(themeVars) }}">
+  <slot />
+</view>

package/packages/config-provider/index.wxs

@@ -0,0 +1,29 @@
+/* eslint-disable */
+var object = require('../wxs/object.wxs');
+var style = require('../wxs/style.wxs');
+
+function kebabCase(word) {
+  var newWord = word
+    .replace(getRegExp("[A-Z]", 'g'), function (i) {
+      return '-' + i;
+    })
+    .toLowerCase()
+    .replace(getRegExp("^-"), '');
+
+  return newWord;
+}
+
+function mapThemeVarsToCSSVars(themeVars) {
+  var cssVars = {};
+  object.keys(themeVars).forEach(function (key) {
+    var cssVarsKey = '--' + kebabCase(key);
+    cssVars[cssVarsKey] = themeVars[key];
+  });
+
+  return style(cssVars);
+}
+
+module.exports = {
+  kebabCase: kebabCase,
+  mapThemeVarsToCSSVars: mapThemeVarsToCSSVars,
+};