@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/rate/README.md

@@ -0,0 +1,176 @@
+---
+category: 数据录入
+---
+
+# Rate 评分
+
+### 介绍
+
+用于对事物进行评级操作。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-rate": "@tuya/miniapp-smart-ui/lib/rate/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-rate value="{{ value }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    value: 3,
+  },
+
+  onChange(event) {
+    this.setData({
+      value: event.detail,
+    });
+  },
+});
+```
+
+### 自定义图标
+
+```html
+<smart-rate
+  value="{{ value }}"
+  icon="like"
+  void-icon="like-o"
+  bind:change="onChange"
+/>
+```
+
+### 自定义样式
+
+```html
+<smart-rate
+  value="{{ value }}"
+  size="{{ 25 }}"
+  color="#ffd21e"
+  void-icon="star"
+  void-color="#eee"
+  bind:change="onChange"
+/>
+```
+
+### 半星
+
+```html
+<smart-rate
+  value="{{ value }}"
+  allow-half
+  void-icon="star"
+  void-color="#eee"
+  bind:change="onChange"
+/>
+```
+
+```javascript
+Page({
+  data: {
+    value: 2.5,
+  },
+
+  onChange(event) {
+    this.setData({
+      value: event.detail,
+    });
+  },
+});
+```
+
+### 自定义数量
+
+```html
+<smart-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />
+```
+
+### 禁用状态
+
+```html
+<smart-rate disabled value="{{ value }}" bind:change="onChange" />
+```
+
+### 只读状态
+
+```html
+<smart-rate readonly value="{{ value }}" bind:change="onChange" />
+```
+
+### 监听 change 事件
+
+评分变化时，会触发 `change` 事件。
+
+```html
+<smart-rate value="{{ value }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    value: 2,
+  },
+
+  onChange(event) {
+    Toast('当前值：' + event.detail);
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                                                       | 类型               | 默认值                |
+| -------------- | ---------------------------------------------------------- | ------------------ | --------------------- |
+| allow-half     | 是否允许半选                                               | _boolean_          | `false`               |
+| color          | 选中时的颜色                                               | _string_           | `#ffd21e`             |
+| count          | 图标总数                                                   | _number_           | `5`                   |
+| disabled       | 是否禁用评分                                               | _boolean_          | `false`               |
+| disabled-color | 禁用时的颜色                                               | _string_           | `#bdbdbd`             |
+| gutter         | 图标间距，默认单位为 `px`                                  | _string \| number_ | `4px`                 |
+| icon           | 选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)   | _string_           | `CheckmarkCircle`     |
+| name           | 在表单内提交时的标识符                                     | _string_           | -                     |
+| readonly       | 是否为只读状态                                             | _boolean_          | `false`               |
+| size           | 图标大小，默认单位为 `px`                                  | _string \| number_ | `20px`                |
+| touchable      | 是否可以通过滑动手势选择评分                               | _boolean_          | `true`                |
+| value          | 当前分值                                                   | _number_           | -                     |
+| void-color     | 未选中时的颜色                                             | _string_           | `#c7c7c7`             |
+| void-icon      | 未选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp) | _string_           | `CheckmarkCircleVoid` |
+
+### Events
+
+| 事件名称    | 说明                     | 回调参数              |
+| ----------- | ------------------------ | --------------------- |
+| bind:change | 当前分值变化时触发的事件 | event.detail:当前分值 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+| icon-class   | 图标样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --rate-horizontal-padding     | _2px_                                  | 评价图标水平内边距 |
+| --rate-icon-size              | _20px_                                 | 评价图标大小         |
+| --rate-icon-void-color        | _#c8c9cc_                              | 空状态图标颜色      |
+| --rate-icon-full-color        | _#ee0a24_                              | 满状态图标颜色      |
+| --rate-icon-disabled-color    | _#c8c9cc_                              | 禁用状态图标颜色    |
+| --rate-icon-gutter            | _4px_                                  | 图标间距             |

package/dist/rate/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-rate{display:inline-flex;-webkit-user-select:none;user-select:none}.smart-rate__item{padding:0 var(--rate-horizontal-padding,2px);position:relative}.smart-rate__item:not(:last-child){padding-right:var(--rate-icon-gutter,4px)}.smart-rate__icon{color:var(--rate-icon-void-color,#c8c9cc);display:block;font-size:var(--rate-icon-size,20px);height:100%}.smart-rate__icon--half{left:var(--rate-horizontal-padding,2px);overflow:hidden;position:absolute;top:0;width:.5em}.smart-rate__icon--full,.smart-rate__icon--half{color:var(--rate-icon-full-color,#ee0a24)}.smart-rate__icon--disabled{color:var(--rate-icon-disabled-color,#c8c9cc)}

package/dist/rate/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/rate/index.js

@@ -0,0 +1,89 @@
+import CheckmarkCircle from '@tuya-miniapp/icons/dist/svg/CheckmarkCircle';
+import CheckmarkCircleVoid from '@tuya-miniapp/icons/dist/svg/CheckmarkCircleVoid';
+import { getAllRect } from '../common/utils';
+import { SmartComponent } from '../common/component';
+import { canIUseModel } from '../common/version';
+SmartComponent({
+    field: true,
+    classes: ['icon-class'],
+    props: {
+        value: {
+            type: Number,
+            observer(value) {
+                if (value !== this.data.innerValue) {
+                    this.setData({ innerValue: value });
+                }
+            },
+        },
+        readonly: Boolean,
+        disabled: Boolean,
+        allowHalf: Boolean,
+        size: null,
+        icon: {
+            type: String,
+            value: CheckmarkCircle,
+        },
+        voidIcon: {
+            type: String,
+            value: CheckmarkCircleVoid,
+        },
+        color: {
+            type: String,
+            value: 'var(--app-M4)',
+        },
+        voidColor: {
+            type: String,
+            value: 'var(--app-B3-N7)',
+        },
+        disabledColor: {
+            type: String,
+            value: 'var(--app-B3-N7)',
+        },
+        count: {
+            type: Number,
+            value: 5,
+            observer(value) {
+                this.setData({ innerCountArray: Array.from({ length: value }) });
+            },
+        },
+        gutter: null,
+        touchable: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        innerValue: 0,
+        innerCountArray: Array.from({ length: 5 }),
+    },
+    methods: {
+        onSelect(event) {
+            const { data } = this;
+            const { score } = event.currentTarget.dataset;
+            if (!data.disabled && !data.readonly) {
+                this.setData({ innerValue: score + 1 });
+                if (canIUseModel()) {
+                    this.setData({ value: score + 1 });
+                }
+                wx.nextTick(() => {
+                    this.$emit('input', score + 1);
+                    this.$emit('change', score + 1);
+                });
+            }
+        },
+        onTouchMove(event) {
+            const { touchable } = this.data;
+            if (!touchable)
+                return;
+            const { clientX } = event.touches[0];
+            getAllRect(this, '.smart-rate__icon').then((list = []) => {
+                const target = (list || [])
+                    .sort((cur, next) => cur.dataset.score - next.dataset.score)
+                    .find(item => clientX >= item.left && clientX <= item.right);
+                if (target != null) {
+                    this.onSelect(Object.assign(Object.assign({}, event), { currentTarget: target }));
+                }
+            });
+        },
+    },
+});

package/dist/rate/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/dist/rate/index.wxml

@@ -0,0 +1,35 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="../wxs/style.wxs" module="style" />
+
+<view
+  class="{{ utils.bem('rate') }} custom-class"
+  bind:touchmove="onTouchMove"
+>
+  <view
+    class="{{ utils.bem('rate__item') }}"
+    wx:for="{{ innerCountArray }}"
+    wx:key="index"
+    style="{{ style({ paddingRight: index !== count - 1 ? utils.addUnit(gutter) : null }) }}"
+  >
+    <smart-icon
+      name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
+      class="{{ utils.bem('rate__icon', [{ disabled, full: index + 1 <= innerValue }])}}"
+      style="{{ style({ fontSize: utils.addUnit(size) }) }}"
+      custom-class="icon-class"
+      data-score="{{ index }}"
+      color="{{ disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor }}"
+      bind:click="onSelect"
+    />
+
+    <smart-icon
+      wx:if="{{ allowHalf }}"
+      name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
+      class="{{ utils.bem('rate__icon', ['half', { disabled, full: index + 0.5 <= innerValue }]) }}"
+      style="{{ style({ fontSize: utils.addUnit(size) }) }}"
+      custom-class="icon-class"
+      data-score="{{ index - 0.5 }}"
+      color="{{ disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor }}"
+      bind:click="onSelect"
+    />
+  </view>
+</view>

package/dist/rate/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-rate{display:inline-flex;-webkit-user-select:none;user-select:none}.smart-rate__item{padding:0 var(--rate-horizontal-padding,2px);position:relative}.smart-rate__item:not(:last-child){padding-right:var(--rate-icon-gutter,4px)}.smart-rate__icon{color:var(--rate-icon-void-color,#c8c9cc);display:block;font-size:var(--rate-icon-size,20px);height:100%}.smart-rate__icon--half{left:var(--rate-horizontal-padding,2px);overflow:hidden;position:absolute;top:0;width:.5em}.smart-rate__icon--full,.smart-rate__icon--half{color:var(--rate-icon-full-color,#ee0a24)}.smart-rate__icon--disabled{color:var(--rate-icon-disabled-color,#c8c9cc)}

package/dist/row/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-row:after{clear:both;content:"";display:table}

package/dist/row/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/row/index.js

@@ -0,0 +1,23 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+SmartComponent({
+    relation: useChildren('col', function (target) {
+        const { gutter } = this.data;
+        if (gutter) {
+            target.setData({ gutter });
+        }
+    }),
+    props: {
+        gutter: {
+            type: Number,
+            observer: 'setGutter',
+        },
+    },
+    methods: {
+        setGutter() {
+            this.children.forEach(col => {
+                col.setData(this.data);
+            });
+        },
+    },
+});

package/dist/row/index.json

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

package/dist/row/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="./index.wxs" module="computed" />
+
+<view class="smart-row custom-class" style="{{ computed.rootStyle({ gutter }) }}">
+  <slot />
+</view>

package/dist/row/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'margin-right': addUnit(-data.gutter / 2),
+    'margin-left': addUnit(-data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/dist/row/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-row:after{clear:both;content:"";display:table}

package/dist/search/README.md

@@ -0,0 +1,235 @@
+---
+category: 数据录入
+---
+
+# Search 搜索
+
+### 介绍
+
+用于搜索场景的输入框组件。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-search": "@tuya/miniapp-smart-ui/lib/search/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+`smart-search` 中，value 用于控制搜索框中的文字。
+
+```html
+<smart-search value="{{ value }}" placeholder="请输入搜索关键词" />
+```
+
+### 简洁风格
+
+`smart-search` 中，value 用于控制搜索框中的文字。可以通过 css 变量调整背景。
+
+```css
+.easy-demo {
+  --search-background-color: transparent;
+  --search-body-background-color: var(--app-B3, #fff);
+}
+```
+
+```html
+<smart-search
+  custom-class="easy-demo"
+  model:value="{{ value }}"
+  shape="round"
+  search-text="搜索"
+  placeholder="请输入搜索关键词"
+  bind:search="onSearch"
+/>
+```
+
+### 事件监听
+
+`smart-search` 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。
+
+```html
+<smart-search
+  value="{{ value }}"
+  placeholder="请输入搜索关键词"
+  show-action
+  search-text="搜索"
+  action-text="取消"
+  bind:search="onSearch"
+  bind:cancel="onCancel"
+  bind:clear="onClear"
+/>
+```
+
+### 搜索框内容对齐
+
+通过 `input-align` 属性可以设置搜索框内容的对齐方式。
+
+```html
+<smart-search
+  value="{{ value }}"
+  input-align="center"
+  placeholder="请输入搜索关键词"
+/>
+```
+
+### 禁用搜索框
+
+通过 `disabled` 属性可以将组件设置为禁用状态。
+
+```html
+<smart-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />
+```
+
+### 自定义按钮
+
+`smart-search` 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。
+
+```html
+<smart-search
+  value="{{ value }}"
+  label="地址"
+  shape="round"
+  placeholder="请输入搜索关键词"
+  use-action-slot
+  bind:change="onChange"
+  bind:search="onSearch"
+>
+  <view slot="action" bind:tap="onClick">搜索</view>
+</smart-search>
+
+<smart-search
+  value="{{ value }}"
+  shape="round"
+  placeholder="请输入搜索关键词"
+  bind:search="onSearch"
+  bind:change="onChange"
+>
+  <view slot="search-button" bind:tap="onClick">搜索</view>
+  <view slot="label"
+    >地址<smart-icon class="icon" name="{{icon}}" size="12px"
+  /></view>
+</smart-search>
+```
+
+```css
+.searchBtn {
+  padding: 0 16px;
+}
+.icon {
+  margin: 0 8px 0 4px;
+}
+```
+
+```javascript
+Page({
+  data: {
+    value: '',
+  },
+  onChange(e) {
+    this.setData({
+      value: e.detail,
+    });
+  },
+  onSearch() {
+    Toast('搜索' + this.data.value);
+  },
+  onClick() {
+    Toast('搜索' + this.data.value);
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| action-text | 取消按钮文字 | _string_ | `Cancel` |
+| background | 搜索框背景色 | _string_ | `#f2f2f2` |
+| clear-icon | 清除[图标svg字符串](/material/smartui?comId=icon&appType=miniapp)或图片链接 | _string_ | `close` |
+| clear-trigger | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
+| clearable | 是否启用清除控件 | _boolean_ | `true` |
+| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `0` |
+| disabled | 是否禁用输入框 | _boolean_ | `false` |
+| error | 是否将输入内容标红 | _boolean_ | `false` |
+| focus | 获取焦点 | _boolean_ | `false` |
+| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
+| label | 搜索框左侧文本 | _string_ | - |
+| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效） | _string_ | `search` |
+| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| placeholder | 输入框为空时占位符 | _string_ | - |
+| placeholder-style | 指定占位符的样式 | _string_ | - |
+| readonly | 是否只读 | _boolean_ | `false` |
+| right-icon | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效） | _string_ | - |
+| shape | 形状，可选值为 `round` | _string_ | `square` |
+| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
+| use-action-slot | 是否使用 action slot | _boolean_ | `false` |
+| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` |
+| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` |
+| value | 当前输入的值 | _string \| number_ | - |
+| search-text `v2.0.0` | 搜索按钮文字 | _string_ | - |
+
+### Events
+
+| 事件名           | 说明               | 参数                     |
+| ---------------- | ------------------ | ------------------------ |
+| bind:blur        | 输入框失焦时触发   | -                        |
+| bind:cancel      | 取消搜索搜索时触发 | -                        |
+| bind:change      | 输入内容变化时触发 | event.detail: 当前输入值 |
+| bind:clear       | 点击清空控件时触发 | -                        |
+| bind:click-input | 点击搜索区域时触发 | -                        |
+| bind:focus       | 输入框聚焦时触发   | -                        |
+| bind:search      | 确定搜索时触发     | event.detail: 当前输入值 |
+
+### Slot
+
+| 名称 | 说明 |
+| --- | --- |
+| action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
+| label | 自定义搜索框左侧文本 |
+| left-icon | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示 |
+| right-icon | 自定义输入框右侧图标，需要在`use-right-icon-slot`为 true 时才会显示 |
+| search-button `v2.0.0` | 自定义搜索按钮 |
+
+### 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| cancel-class | 取消按钮样式类 |
+| custom-class | 根节点样式类   |
+| field-class  | 搜索框样式类   |
+| input-class  | 输入框样式类   |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| --search-background-color | _var(--app-B3, #fff)_ | 搜索框背景颜色 |
+| --search-body-background-color | _var(--app-B4-N9,rgba(0,0,0,0.05))_ | 搜索内容背景颜色 |
+| --search-padding | _12px var(--padding-md, 16px)_ | 搜索框内边距 |
+| --search-input-height | _24px_ | 输入框高度 |
+| --search-label-padding | _0 5px_ | 标签内边距 |
+| --search-label-color | _var(--app-B4_N1, #000)_ | 标签文本颜色 |
+| --search-label-font-size | _var(--font-size-md)_ | 标签字体大小 |
+| --search-value-font-size | _var(--font-size-md)_ | 输入文字字体大小 |
+| --search-left-icon-color | _var(--app-B4_N4, rgba(0,0,0,0.4))_ | 左侧图标颜色 |
+| --search-action-padding | _0 var(--padding-md) 0 var(--padding-sm)_ | 操作按钮内边距 |
+| --search-action-text-color | _var(--app-B4_N3, rgba(0,0,0,0.5))_ | 操作按钮文本颜色 |
+| --search-action-font-size | _var(--font-size-md)_ | 操作按钮字体大小 |
+| --search-submit-font-size | _var(--font-size-md)_ | 提交按钮字体大小 |
+| --search-submit-color | _var(--app-M1, #3678e3)_ | 提交按钮颜色 |
+| --search-btn-hover-color | _var(--app-B4_N9, rgba(0,0,0,0.05))_ | 按钮悬停颜色 |
+| --search-submit-line-width | _1px_ | 提交按钮线宽度 |
+| --search-submit-line-height | _12px_ | 提交按钮线高度 |
+| --search-btn-hover-opacity | _0.4_ | 按钮悬停透明度 |

package/dist/search/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-search{--field-left-icon-margin-right:4px;--field-left-body-padding-right:0;align-items:center;background-color:var(--search-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;padding:var(--search-padding,12px 16px)}.smart-search__content{align-items:center;background-color:var(--search-body-background-color,var(--app-B4-N9,rgba(0,0,0,.05)));color:var(--search-label-color,var(--app-B4-N1,#000));display:flex;flex:1;flex-direction:row;padding:12px 16px}.smart-search__content--round{border-radius:999px}.smart-search__label{color:var(--search-label-color,var(--app-B4-N1,#000));font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,24px);padding:var(--search-label-padding,0 5px)}.smart-search__field{flex:1}.smart-search__field__left-icon{--icon-color:var(--search-left-icon-color,var(--app-B4-N4,rgba(0,0,0,.4)));margin-left:2px}.smart-search__input{font-size:var(--search-value-font-size,14px)}.smart-search--withaction{padding-right:0}.smart-search__action{color:var(--search-action-text-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,24px)}.smart-search__action--hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:var(--search-btn-hover-opacity,.4)}.smart-search__action-button{padding:var(--search-action-padding,0 16px 0 12px)}.smart-search__hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:var(--search-btn-hover-opacity,.4)}.smart-search__submit{align-items:center;color:var(--search-submit-color,var(--app-M1,#3678e3));display:flex;flex-direction:row;font-size:var(--search-submit-font-size,14px)}.smart-search__submit:before{background-color:var(--search-submit-color,var(--app-M1,#3678e3));content:"";display:block;height:var(--search-submit-line-height,12px);margin-right:12px;width:var(--search-submit-line-width,1px)}

package/dist/search/index.d.ts

@@ -0,0 +1 @@
+export {};