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

package/docs/custom-style.en.md

@@ -1,91 +0,0 @@
----
-category: Guide
----
-
-# Style Overrides
-
-### Introduction
-
-Smart UI, based on the smart mini program mechanism, provides developers with the following 3 methods to modify component styles
-
-### Removing Style Isolation
-
-For background knowledge on style isolation, please refer to the [Smart Mini Program Documentation](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/custom-component/tyml-tyss#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)
-
-<br />
-
-All components in Smart UI have `addGlobalClass: true` enabled to accept the influence of external styles. You can use the following 2 methods to override component styles
-
-> When using Smart UI components on a page, you can directly override styles in the page's style file
-
-```html
-<smart-button type="primary">Primary Button</smart-button>
-```
-
-```css
-/* page.tyss */
-.smart-button--primary {
-  font-size: 20px;
-  background-color: pink;
-}
-```
-
-> When using Smart UI components in a custom component, you need to enable the `styleIsolation: 'shared'` option
-
-```html
-<smart-button type="primary">Primary Button</smart-button>
-```
-
-```js
-Component({
-  options: {
-    styleIsolation: 'shared',
-  },
-});
-```
-
-```css
-.smart-button--primary {
-  font-size: 20px;
-  background-color: pink;
-}
-```
-
-### Using External Style Classes
-
-For background knowledge on external style classes, please refer to the [Smart Mini Program Documentation](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/custom-component/tyml-tyss#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB)
-
-<br />
-
-Smart UI has opened up a large number of external style classes for developers to use. The specific style class names can be found in the "External Style Classes" section of the corresponding component.
-
-It is important to note that the priority of ordinary style classes and external style classes is undefined, so please add `!important` when using them to ensure the priority of external style classes.
-
-```html
-<smart-cell
-  title="Cell"
-  value="Content"
-  title-class="cell-title"
-  value-class="cell-value"
-/>
-```
-
-```css
-.cell-title {
-  color: pink !important;
-  font-size: 20px !important;
-}
-
-.cell-value {
-  color: green !important;
-  font-size: 12px !important;
-}
-```
-
-### Using CSS Variables
-
-Smart UI has opened up customization schemes based on CSS properties for some CSS attributes.
-
-Compared to removing style isolation and using external style classes, this scheme supports batch modification of the styles of multiple components at the page or application level to customize theme styles.
-
-Of course, it is also more than sufficient to use it to modify some styles of a single component. For specific usage methods, please refer to [Custom Themes](/material/smartui?comId=theme&appType=miniapp)

package/docs/custom-style.md

@@ -1,91 +0,0 @@
----
-category: 开发指南
----
-
-# 样式覆盖
-
-### 介绍
-
-Smart UI 基于智能小程序的机制，为开发者提供了以下 3 种修改组件样式的方法
-
-### 解除样式隔离
-
-样式隔离的相关背景知识请查阅 [智能小程序文档](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/custom-component/tyml-tyss#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)
-
-<br />
-
-Smart UI 的所有组件都开启了 `addGlobalClass: true` 以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式
-
-> 在页面中使用 Smart UI 组件时，可直接在页面的样式文件中覆盖样式
-
-```html
-<smart-button type="primary">主要按钮</smart-button>
-```
-
-```css
-/* page.tyss */
-.smart-button--primary {
-  font-size: 20px;
-  background-color: pink;
-}
-```
-
-> 在自定义组件中使用 Smart UI 组件时，需开启`styleIsolation: 'shared'`选项
-
-```html
-<smart-button type="primary">主要按钮</smart-button>
-```
-
-```js
-Component({
-  options: {
-    styleIsolation: 'shared',
-  },
-});
-```
-
-```css
-.smart-button--primary {
-  font-size: 20px;
-  background-color: pink;
-}
-```
-
-### 使用外部样式类
-
-外部样式类的相关知识背景请查阅[智能小程序文档](https://developer.tuya.com/cn/miniapp/develop/miniapp/framework/custom-component/tyml-tyss#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB)
-
-<br />
-
-Smart UI 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。
-
-需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加`!important`以保证外部样式类的优先级。
-
-```html
-<smart-cell
-  title="单元格"
-  value="内容"
-  title-class="cell-title"
-  value-class="cell-value"
-/>
-```
-
-```css
-.cell-title {
-  color: pink !important;
-  font-size: 20px !important;
-}
-
-.cell-value {
-  color: green !important;
-  font-size: 12px !important;
-}
-```
-
-### 使用 CSS 变量
-
-Smart UI 为部分 CSS 属性开放了基于 CSS 属性的定制方案。
-
-相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。
-
-当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅[定制主题](/material/smartui?comId=theme&appType=miniapp)

package/docs/imgs/index.json

@@ -1,46 +0,0 @@
-[
-  "action-sheet.png",
-  "action-sheet@2.png",
-  "action-sheet@3.png",
-  "battery.png",
-  "button.png",
-  "cascader.png",
-  "cell.png",
-  "checkbox.png",
-  "circle.png",
-  "collapse.png",
-  "count-down.png",
-  "custom-keyboard.png",
-  "datetime-picker.png",
-  "dialog.png",
-  "dialog@2.png",
-  "divider.png",
-  "dropdown-menu.png",
-  "empty.png",
-  "field.png",
-  "field@2.png",
-  "index-bar.png",
-  "nav-bar.png",
-  "picker.png",
-  "picker@2.png",
-  "popover.png",
-  "popup.png",
-  "radio.png",
-  "rate.png",
-  "search.png",
-  "search@2.png",
-  "sidebar.png",
-  "skeleton.png",
-  "slider.png",
-  "slider@2.png",
-  "slider@3.png",
-  "slider@4.png",
-  "stepper.png",
-  "swipe-cell.png",
-  "switch.png",
-  "tab.png",
-  "tab@2.png",
-  "tabbar.png",
-  "toast.png",
-  "tree-select.png"
-]

package/docs/theme.en.md

@@ -1,118 +0,0 @@
----
-category: Guide
----
-
-# Custom Themes
-
-### Background Knowledge
-
-Mini Programs utilize [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) to implement custom components. Therefore, Smart UI uses corresponding [CSS Variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) to implement custom themes. The content in the links can help you gain a basic understanding of these concepts and avoid many unnecessary troubles.
-
-The compatibility requirements of CSS Variables can be viewed [here](https://caniuse.com/#feat=cssmart-variables). For devices that do not support CSS Variables, custom themes will not take effect. However, don't worry, the default styles will still be effective.
-
-### Style Variables
-
-The CSS Variables used for customization have the same names as Less variables. Below are some basic style variables. Please refer to the configuration file for all available color variables.
-
-```less
-// Component Colors
-@text-color: #323233;
-@border-color: #ebedf0;
-@active-color: #f2f3f5;
-@background-color: #f8f8f8;
-@background-color-light: #fafafa;
-```
-
-## Customization Methods
-
-### Customizing Theme Styles for a Single Component
-
-> Set CSS Variables for the component in tyss
-
-```html
-<smart-button class="my-button">
-  Default Button
-</smart-button>
-```
-
-```less
-.my-button {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-}
-```
-
-> Or set CSS Variables via the style attribute, which allows you to easily implement dynamic theme switching
-
-```html
-<smart-button style="{{ buttonStyle }}">
-  Default Button
-</smart-button>
-```
-
-```js
-Page({
-  data: {
-    buttonStyle: `
-      --button-border-radius: 10px;
-      --button-default-color: green;
-    `,
-  },
-
-  onLoad() {
-    setTimeout(() => {
-      this.setData({
-        buttonStyle: `
-          --button-border-radius: 2px;
-          --button-default-color: pink;
-        `,
-      });
-    }, 2000);
-  },
-});
-```
-
-### Customizing Theme Styles for Multiple Components
-
-> Similar to customizing a single component, simply wrap the components you want to customize with a container node and set CSS Variables on the container node
-
-```html
-<view class="container">
-  <smart-button bind:click="onClick">
-    Default Button
-  </smart-button>
-
-  <smart-toast id="smart-toast" />
-</view>
-```
-
-```js
-import Toast from '@tuya-miniapp/smart-ui/toast/toast';
-
-Page({
-  onClick() {
-    Toast('This is a prompt message, suggested not to exceed fifteen words~');
-  },
-});
-```
-
-```less
-.container {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-  --toast-max-width: 100px;
-  --toast-background-color: pink;
-}
-```
-
-### Customizing Global Theme Styles
-
-> In app.tyss, writing CSS Variables will apply them globally
-
-```less
-page {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-  --toast-max-width: 100px;
-  --toast-background-color: pink;
-}

package/docs/theme.md

@@ -1,119 +0,0 @@
----
-category: 开发指南
----
-
-# 定制主题
-
-### 背景知识
-
-小程序基于 [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn) 来实现自定义组件，所以 Smart UI 使用与之配套的 [CSS 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。
-
-CSS 变量 的兼容性要求可以在 [这里](https://caniuse.com/#feat=cssmart-variables) 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。
-
-### 样式变量
-
-定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考配置文件。
-
-```less
-// Component Colors
-@text-color: #323233;
-@border-color: #ebedf0;
-@active-color: #f2f3f5;
-@background-color: #f8f8f8;
-@background-color-light: #fafafa;
-```
-
-## 定制方法
-
-### 定制单个组件的主题样式
-
-> 在 tyss 中为组件设置 CSS 变量
-
-```html
-<smart-button class="my-button">
-  默认按钮
-</smart-button>
-```
-
-```less
-.my-button {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-}
-```
-
-> 或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换
-
-```html
-<smart-button style="{{ buttonStyle }}">
-  默认按钮
-</smart-button>
-```
-
-```js
-Page({
-  data: {
-    buttonStyle: `
-      --button-border-radius: 10px;
-      --button-default-color: green;
-    `,
-  },
-
-  onLoad() {
-    setTimeout(() => {
-      this.setData({
-        buttonStyle: `
-          --button-border-radius: 2px;
-          --button-default-color: pink;
-        `,
-      });
-    }, 2000);
-  },
-});
-```
-
-### 定制多个组件的主题样式
-
-> 与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上
-
-```html
-<view class="container">
-  <smart-button bind:click="onClick">
-    默认按钮
-  </smart-button>
-
-  <smart-toast id="smart-toast" />
-</view>
-```
-
-```js
-import Toast from '@tuya-miniapp/smart-ui/toast/toast';
-
-Page({
-  onClick() {
-    Toast('我是提示文案，建议不超过十五字~');
-  },
-});
-```
-
-```less
-.container {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-  --toast-max-width: 100px;
-  --toast-background-color: pink;
-}
-```
-
-### 定制全局主题样式
-
-> 在 app.tyss 中，写入 CSS 变量，即可对全局生效
-
-```less
-page {
-  --button-border-radius: 10px;
-  --button-default-color: #f2f3f5;
-  --toast-max-width: 100px;
-  --toast-background-color: pink;
-}
-```

package/example/app.js

@@ -1,4 +0,0 @@
-App({
-  globalData: {},
-  onLaunch() {},
-});