@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.9-beta-1

package/packages/common/utils.ts

@@ -1,119 +0,0 @@
-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

@@ -1,40 +0,0 @@
-// 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

@@ -1,80 +0,0 @@
-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

@@ -1,121 +0,0 @@
----
-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

@@ -1,121 +0,0 @@
----
-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

@@ -1,12 +0,0 @@
-{
-  "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

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

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

@@ -1,24 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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

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

package/packages/config-provider/index.ts

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

package/packages/config-provider/index.wxml

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

package/packages/config-provider/index.wxs

@@ -1,29 +0,0 @@
-/* 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,
-};