@tuya-miniapp/smart-ui 2.7.1-beta-13 → 2.7.2-beta-0

package/lib/radio/index.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Check_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Check"));
+var version_1 = require("../common/version");
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    field: true,
+    relation: (0, relation_1.useParent)('radio-group', function () {
+        this.updateFromParent();
+    }),
+    classes: ['icon-class', 'label-class'],
+    props: {
+        name: null,
+        value: null,
+        disabled: Boolean,
+        useIconSlot: Boolean,
+        checkedColor: String,
+        labelPosition: {
+            type: String,
+            value: 'right',
+        },
+        labelDisabled: Boolean,
+        shape: {
+            type: String,
+            value: 'round',
+        },
+        iconSize: {
+            type: null,
+            value: 24,
+        },
+    },
+    data: {
+        direction: '',
+        parentDisabled: false,
+        icon: Check_1.default,
+        preventDefault: false,
+    },
+    methods: {
+        updateFromParent: function () {
+            if (!this.parent) {
+                return;
+            }
+            var _a = this.parent.data, value = _a.value, parentDisabled = _a.disabled, direction = _a.direction, preventDefault = _a.preventDefault;
+            this.setData({
+                value: value,
+                direction: direction,
+                parentDisabled: parentDisabled,
+                preventDefault: preventDefault,
+            });
+        },
+        emitChange: function (value) {
+            var instance = this.parent || this;
+            instance.$emit('input', value);
+            instance.$emit('change', value);
+            if ((0, version_1.canIUseModel)() && !this.properties.preventDefault) {
+                instance.setData({ value: value });
+            }
+        },
+        onChange: function () {
+            if (!this.data.disabled && !this.data.parentDisabled) {
+                this.emitChange(this.data.name);
+            }
+        },
+        onClickLabel: function () {
+            var _a = this.data, disabled = _a.disabled, parentDisabled = _a.parentDisabled, labelDisabled = _a.labelDisabled, name = _a.name;
+            if (!(disabled || parentDisabled) && !labelDisabled) {
+                this.emitChange(name);
+            }
+        },
+    },
+});

package/lib/radio/index.json

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

package/lib/radio/index.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('radio', [direction]) }} custom-class">
+  <view
+    wx:if="{{ labelPosition === 'left' }}"
+    class="{{ utils.bem('radio__label', [labelPosition, { disabled: disabled || parentDisabled }]) }} label-class"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+  <view class="smart-radio__icon-wrap" style="font-size: {{ utils.addUnit(iconSize) }}" bindtap="onChange">
+    <slot wx:if="{{ useIconSlot }}" name="icon" />
+    <smart-icon
+      wx:else
+      name="{{ icon }}"
+      size="1em"
+      color="{{ value === name ? '#fff' : 'none'}}"
+      class="{{ utils.bem('radio__icon', [shape, { disabled: disabled || parentDisabled, checked: value === name }]) }}"
+      style="{{ computed.iconStyle({ iconSize, checkedColor, disabled, parentDisabled, value, name }) }}"
+      custom-class="icon-class"
+      custom-style="{{ computed.iconCustomStyle({ iconSize }) }}"
+    />
+  </view>
+  <view
+    wx:if="{{ labelPosition === 'right' }}"
+    class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

package/lib/radio/index.wxs

@@ -0,0 +1,33 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function iconStyle(data) {
+  var styles = {
+    'font-size': addUnit(data.iconSize),
+  };
+
+  if (
+    data.checkedColor &&
+    !(data.disabled || data.parentDisabled) &&
+    data.value === data.name
+  ) {
+    styles['border-color'] = data.checkedColor;
+    styles['background-color'] = data.checkedColor;
+  }
+
+  return style(styles);
+}
+
+function iconCustomStyle(data) {
+  return style({
+    'line-height': addUnit(data.iconSize),
+    'font-size': '.8em',
+    display: 'block',
+  });
+}
+
+module.exports = {
+  iconStyle: iconStyle,
+  iconCustomStyle: iconCustomStyle,
+};

package/lib/radio/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-radio__icon-wrap{display:flex;flex:none}.smart-radio--horizontal{margin-right:var(--padding-sm,12px)}.smart-radio__icon{align-items:center;border:2px solid var(--radio-border-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-radius:var(--radio-border-radius,4px);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,24px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border,background-color;width:1em}.smart-radio__icon--round{border-radius:100%}.smart-radio__icon--checked{background-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));border-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));color:#fff}.smart-radio__icon--disabled{opacity:.3}.smart-radio__label{word-wrap:break-word;color:var(--radio-label-color,var(--app-B6-N1,#000));font-size:var(--radio-label-size,12px);padding-left:var(--radio-label-margin,10px)}.smart-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.smart-radio__label--disabled{color:var(--radio-disabled-label-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label:empty{margin:0}

package/lib/radio-group/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-radio-group--horizontal{display:flex;flex-wrap:wrap}

package/lib/radio-group/index.d.ts

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

package/lib/radio-group/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    field: true,
+    relation: (0, relation_1.useChildren)('radio'),
+    props: {
+        value: {
+            type: null,
+            observer: 'updateChildren',
+        },
+        preventDefault: {
+            type: Boolean,
+            value: false,
+            observer: 'updateChildren',
+        },
+        direction: String,
+        disabled: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+    },
+    methods: {
+        updateChildren: function () {
+            this.children.forEach(function (child) { return child.updateFromParent(); });
+        },
+    },
+});

package/lib/radio-group/index.json

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

package/lib/radio-group/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('radio-group', [direction]) }}">
+  <slot></slot>
+</view>

package/lib/radio-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-radio-group--horizontal{display:flex;flex-wrap:wrap}

package/lib/rate/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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/lib/rate/index.d.ts

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

package/lib/rate/index.js

@@ -0,0 +1,107 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var CheckmarkCircle_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/CheckmarkCircle"));
+var CheckmarkCircleVoid_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/CheckmarkCircleVoid"));
+var utils_1 = require("../common/utils");
+var component_1 = require("../common/component");
+var version_1 = require("../common/version");
+(0, component_1.SmartComponent)({
+    field: true,
+    classes: ['icon-class'],
+    props: {
+        value: {
+            type: Number,
+            observer: function (value) {
+                if (value !== this.data.innerValue) {
+                    this.setData({ innerValue: value });
+                }
+            },
+        },
+        readonly: Boolean,
+        disabled: Boolean,
+        allowHalf: Boolean,
+        size: null,
+        icon: {
+            type: String,
+            value: CheckmarkCircle_1.default,
+        },
+        voidIcon: {
+            type: String,
+            value: CheckmarkCircleVoid_1.default,
+        },
+        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: function (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: function (event) {
+            var _this = this;
+            var data = this.data;
+            var score = event.currentTarget.dataset.score;
+            if (!data.disabled && !data.readonly) {
+                this.setData({ innerValue: score + 1 });
+                if ((0, version_1.canIUseModel)()) {
+                    this.setData({ value: score + 1 });
+                }
+                wx.nextTick(function () {
+                    _this.$emit('input', score + 1);
+                    _this.$emit('change', score + 1);
+                });
+            }
+        },
+        onTouchMove: function (event) {
+            var _this = this;
+            var touchable = this.data.touchable;
+            if (!touchable)
+                return;
+            var clientX = event.touches[0].clientX;
+            (0, utils_1.getAllRect)(this, '.smart-rate__icon').then(function (list) {
+                var target = list
+                    .sort(function (cur, next) { return cur.dataset.score - next.dataset.score; })
+                    .find(function (item) { return clientX >= item.left && clientX <= item.right; });
+                if (target != null) {
+                    _this.onSelect(__assign(__assign({}, event), { currentTarget: target }));
+                }
+            });
+        },
+    },
+});

package/lib/rate/index.json

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

package/lib/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/lib/rate/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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/lib/row/index.css

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

package/lib/row/index.d.ts

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

package/lib/row/index.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useChildren)('col', function (target) {
+        var gutter = this.data.gutter;
+        if (gutter) {
+            target.setData({ gutter: gutter });
+        }
+    }),
+    props: {
+        gutter: {
+            type: Number,
+            observer: 'setGutter',
+        },
+    },
+    methods: {
+        setGutter: function () {
+            var _this = this;
+            this.children.forEach(function (col) {
+                col.setData(_this.data);
+            });
+        },
+    },
+});

package/lib/row/index.json

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

package/lib/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/lib/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/lib/row/index.wxss

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

package/lib/search/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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/lib/search/index.d.ts

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

package/lib/search/index.js

@@ -0,0 +1,106 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var version_1 = require("../common/version");
+var Search_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Search"));
+var Close_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Close"));
+(0, component_1.SmartComponent)({
+    field: true,
+    classes: ['field-class', 'input-class', 'cancel-class'],
+    props: {
+        value: {
+            type: String,
+            value: '',
+        },
+        label: String,
+        focus: Boolean,
+        error: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        inputAlign: {
+            type: String,
+            value: 'left',
+        },
+        showAction: Boolean,
+        useActionSlot: Boolean,
+        useLeftIconSlot: Boolean,
+        useRightIconSlot: Boolean,
+        leftIcon: {
+            type: String,
+            value: Search_1.default,
+        },
+        rightIcon: String,
+        placeholder: String,
+        placeholderStyle: String,
+        searchText: String,
+        background: String,
+        actionText: {
+            type: String,
+            value: 'Cancel',
+        },
+        maxlength: {
+            type: Number,
+            value: -1,
+        },
+        shape: {
+            type: String,
+            value: 'square',
+        },
+        clearable: {
+            type: Boolean,
+            value: true,
+        },
+        clearTrigger: {
+            type: String,
+            value: 'focus',
+        },
+        clearIcon: {
+            type: String,
+            value: Close_1.default,
+        },
+        cursorSpacing: {
+            type: Number,
+            value: 0,
+        },
+    },
+    methods: {
+        onChange: function (event) {
+            this.setData({ value: event.detail });
+            this.$emit('change', event.detail);
+        },
+        onCancel: function () {
+            var _this = this;
+            /**
+             * 修复修改输入框值时，输入框失焦和赋值同时触发，赋值失效
+             */
+            setTimeout(function () {
+                if ((0, version_1.canIUseModel)()) {
+                    _this.setData({ value: '' });
+                }
+                _this.$emit('cancel');
+                _this.$emit('change', '');
+            }, 200);
+        },
+        onSearch: function (event) {
+            this.$emit('search', event.detail);
+        },
+        goSearch: function () {
+            this.$emit('search', this.data.value);
+        },
+        onFocus: function (event) {
+            this.$emit('focus', event.detail);
+        },
+        onBlur: function (event) {
+            this.$emit('blur', event.detail);
+        },
+        onClear: function (event) {
+            this.$emit('clear', event.detail);
+        },
+        onClickInput: function (event) {
+            this.$emit('click-input', event.detail);
+        },
+    },
+});

package/lib/search/index.json

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

package/lib/search/index.wxml

@@ -0,0 +1,57 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class"
+  style="background: {{ background }}"
+>  
+
+  <view class="{{ utils.bem('search__content', [shape]) }}">
+    <view class="smart-search__label" wx:if="{{ label }}">{{ label }}</view>
+    <slot wx:else name="label" />
+
+    <smart-field
+      type="search"
+      right-icon="{{ !useRightIconSlot ? rightIcon : '' }}"
+      focus="{{ focus }}"
+      error="{{ error }}"
+      border="{{ false }}"
+      confirm-type="search"
+      class="smart-search__field field-class"
+      value="{{ value }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      clearable="{{ clearable }}"
+      clear-trigger="{{ clearTrigger }}"
+      clear-icon="{{ clearIcon }}"
+      maxlength="{{ maxlength }}"
+      input-align="{{ inputAlign }}"
+      input-class="smart-search__input input-class"
+      placeholder="{{ placeholder }}"
+      placeholder-style="{{ placeholderStyle }}"
+      cursor-spacing="{{ cursorSpacing }}"
+      custom-style="padding: 0; background-color: transparent;"
+      bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:change="onChange"
+      bind:confirm="onSearch"
+      bind:clear="onClear"
+      bind:click-input="onClickInput"
+    >
+      <smart-icon wx:if="{{ !useLeftIconSlot && leftIcon }}" size="18" name="{{ leftIcon }}" custom-class="smart-search__field__left-icon" slot="left-icon" />
+      <slot wx:if="{{ useLeftIconSlot }}" name="left-icon" slot="left-icon" />
+      <slot wx:if="{{ useRightIconSlot }}" name="right-icon" slot="right-icon" />
+      <view wx:if="{{ searchText }}" hover-class="smart-search__hover" bind:tap="goSearch" class="smart-search__submit" slot="button" >{{ searchText }}</view>
+      <slot name="search-button" slot="button" />
+    </smart-field>
+  </view>
+
+  <view
+    wx:if="{{ showAction || useActionSlot }}"
+    class="smart-search__action"
+    hover-class="smart-search__action--hover"
+    hover-stay-time="70"
+  >
+    <slot wx:if="{{ useActionSlot }}" name="action" />
+    <view wx:else bind:tap="onCancel" class="smart-search__action-button cancel-class">{{ actionText }}</view>
+  </view>
+</view>

package/lib/search/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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/lib/sidebar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-sidebar{width:var(--sidebar-width,80px)}

package/lib/sidebar/index.d.ts

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