@tuya-miniapp/smart-ui 2.0.2-beta-7 → 2.0.2-beta-9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/field/cell-input.wxml +60 -0
- package/dist/field/cell-textarea.wxml +28 -0
- package/dist/field/demo/index.js +4 -5
- package/dist/field/index.css +1 -1
- package/dist/field/index.js +6 -3
- package/dist/field/index.wxml +2 -54
- package/dist/field/index.wxss +1 -1
- package/dist/field/input.wxml +3 -4
- package/dist/field/textarea.wxml +4 -4
- package/dist/tabs/index.css +1 -1
- package/dist/tabs/index.wxss +1 -1
- package/lib/field/cell-input.wxml +60 -0
- package/lib/field/cell-textarea.wxml +28 -0
- package/lib/field/demo/index.js +4 -5
- package/lib/field/index.css +1 -1
- package/lib/field/index.js +6 -3
- package/lib/field/index.wxml +2 -54
- package/lib/field/index.wxss +1 -1
- package/lib/field/input.wxml +3 -4
- package/lib/field/textarea.wxml +4 -4
- package/lib/tabs/index.css +1 -1
- package/lib/tabs/index.wxss +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
|
+
<wxs src="./index.wxs" module="computed" />
|
|
3
|
+
|
|
4
|
+
<smart-cell
|
|
5
|
+
size="{{ size }}"
|
|
6
|
+
icon="{{ leftIcon }}"
|
|
7
|
+
center="{{ center }}"
|
|
8
|
+
border="{{ border }}"
|
|
9
|
+
is-link="{{ isLink }}"
|
|
10
|
+
clickable="{{ clickable }}"
|
|
11
|
+
title-width="{{ titleWidth }}"
|
|
12
|
+
title-style="margin-right: 12px;"
|
|
13
|
+
custom-style="{{ customStyle }}"
|
|
14
|
+
arrow-direction="{{ arrowDirection }}"
|
|
15
|
+
custom-class="custom-class smart-field"
|
|
16
|
+
>
|
|
17
|
+
<view class="{{ utils.bem('field__left__body', { disabled, card: cardMode }) }}">
|
|
18
|
+
<view class="smart-field__left__icon">
|
|
19
|
+
<slot name="left-icon" slot="icon" />
|
|
20
|
+
</view>
|
|
21
|
+
<view class="smart-field__label" >
|
|
22
|
+
<text wx:if="{{ required }}" class="smart-field__label--required">*</text>
|
|
23
|
+
<label for="{{ name }}" class="label-class" wx:if="{{ label }}" slot="title">
|
|
24
|
+
{{ label }}
|
|
25
|
+
</label>
|
|
26
|
+
<slot wx:else name="label" slot="title" />
|
|
27
|
+
<view wx:if="{{ subLabel && cardMode }}" class="{{ utils.bem('field__label__card__subtitle', { error: errorMessage }) }}">{{ errorMessage || subLabel }}</view>
|
|
28
|
+
</view>
|
|
29
|
+
</view>
|
|
30
|
+
<view class="{{ utils.bem('field__body__box', { disabled }) }}">
|
|
31
|
+
<view class="{{ utils.bem('field__body', [type]) }}">
|
|
32
|
+
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
|
33
|
+
<slot name="input" />
|
|
34
|
+
</view>
|
|
35
|
+
<include src="./input.wxml" />
|
|
36
|
+
<smart-icon
|
|
37
|
+
wx:if="{{ showClear }}"
|
|
38
|
+
name="{{ clearIcon }}"
|
|
39
|
+
class="smart-field__clear-root smart-field__icon-root"
|
|
40
|
+
catch:touchstart="onClear"
|
|
41
|
+
/>
|
|
42
|
+
<view class="smart-field__icon-container" bind:tap="onClickIcon">
|
|
43
|
+
<smart-icon
|
|
44
|
+
wx:if="{{ rightIcon || icon }}"
|
|
45
|
+
name="{{ rightIcon || icon }}"
|
|
46
|
+
class="smart-field__icon-root {{ iconClass }}"
|
|
47
|
+
custom-class="right-icon-class"
|
|
48
|
+
/>
|
|
49
|
+
<slot name="right-icon" />
|
|
50
|
+
<slot name="icon" />
|
|
51
|
+
</view>
|
|
52
|
+
<view class="smart-field__button">
|
|
53
|
+
<slot name="button" />
|
|
54
|
+
</view>
|
|
55
|
+
</view>
|
|
56
|
+
<label wx:if="{{ errorMessage && !interError && !cardMode }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
|
|
57
|
+
{{ errorMessage }}
|
|
58
|
+
</label>
|
|
59
|
+
</view>
|
|
60
|
+
</smart-cell>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
|
+
<wxs src="./index.wxs" module="computed" />
|
|
3
|
+
<view class="smart-field smart-field--textarea">
|
|
4
|
+
<view class="{{ utils.bem('field__left__body', { disabled, card: cardMode }) }}">
|
|
5
|
+
<view class="smart-field__left__icon">
|
|
6
|
+
<slot name="left-icon" slot="icon" />
|
|
7
|
+
</view>
|
|
8
|
+
<view class="smart-field__label" >
|
|
9
|
+
<text wx:if="{{ required }}" class="smart-field__label--required">*</text>
|
|
10
|
+
<label for="{{ name }}" class="label-class" wx:if="{{ label }}" slot="title">
|
|
11
|
+
{{ label }}
|
|
12
|
+
</label>
|
|
13
|
+
<slot wx:else name="label" slot="title" />
|
|
14
|
+
<view wx:if="{{ subLabel && cardMode }}" class="{{ utils.bem('field__label__card__subtitle', { error: errorMessage }) }}">{{ errorMessage || subLabel }}</view>
|
|
15
|
+
</view>
|
|
16
|
+
</view>
|
|
17
|
+
<view class="{{ utils.bem('field__body__box', { disabled }) }}">
|
|
18
|
+
<view class="{{ utils.bem('field__body', [type]) }}">
|
|
19
|
+
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
|
20
|
+
<slot name="input" />
|
|
21
|
+
</view>
|
|
22
|
+
<include src="./textarea.wxml" />
|
|
23
|
+
</view>
|
|
24
|
+
<label wx:if="{{ showWordLimit && maxlength }}" class="smart-field__word-limit">
|
|
25
|
+
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
|
|
26
|
+
</label>
|
|
27
|
+
</view>
|
|
28
|
+
</view>
|
package/dist/field/demo/index.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { SmartComponent } from '../../common/component';
|
|
2
|
+
import { Sun } from '@tuya-miniapp/icons';
|
|
2
3
|
SmartComponent({
|
|
3
4
|
data: {
|
|
4
|
-
sms: '',
|
|
5
5
|
value: '',
|
|
6
6
|
password: '',
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
username3: '',
|
|
7
|
+
num: 2000,
|
|
8
|
+
value2: '123',
|
|
10
9
|
message: '',
|
|
11
|
-
|
|
10
|
+
sunIcon: Sun
|
|
12
11
|
},
|
|
13
12
|
methods: {
|
|
14
13
|
onClickIcon() {
|
package/dist/field/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000))}.smart-field__label--
|
|
1
|
+
@import '../common/index.css';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__left__body{align-items:center;display:flex;text-align:left;width:var(--field-left-width,50%)}.smart-field__left__body--card{width:var(--field-left-card-width,100%)}.smart-field__left__body--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000));font-size:var(--field-label-font-size,16px);line-height:var(--field-label-line-height,18px);text-align:left}.smart-field__label--required{color:var(--field-input-error-text-color,var(--app-M2,#f04c4c))}.smart-field__left__icon{display:flex;margin-right:10px}.smart-field__left__icon:empty{display:none}.smart-field__label__card__subtitle{color:var(--field-subtitle-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--field-sub-label-font-size,14px);line-height:var(--field-sub-label-line-height,16px);margin-top:4px}.smart-field__label__card__subtitle--error{color:var(--field-error-message-color,var(--app-M2,#f04c4c))}.smart-field__body__box{width:var(--field-left-card-width,100%)}.smart-field__body__box--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__body{align-items:center;display:flex;justify-content:flex-end}.smart-field__control:empty+.smart-field__control{display:block}.smart-field__control{background-color:initial;border:0;box-sizing:border-box;color:var(--field-input-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:none;height:var(--cell-line-height,24px);line-height:inherit;margin:0;min-height:var(--cell-line-height,24px);padding:0;position:relative;resize:none;text-align:right;width:100%}.smart-field__control:empty{display:none}.smart-field__control--textarea{background-color:var(--field-textarea-background,var(--app-B3,#fff));border-radius:var(--field-textarea-border-radius,8px);height:var(--field-text-area-min-height,130px);min-height:var(--field-text-area-min-height,130px);padding:var(--field-textarea-padding,12px 8px);text-align:left}.smart-field__control--card{background:var(--field-card-background,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:var(--field-card-border-radius,8px);height:var(--field-card-height,38px);padding:var(--field-card-padding,0 10px);text-align:center;width:var(--field-card-width,105px)}.smart-field__control--limit{padding-bottom:var(--field-textarea-limit-padding-bottom,22px)}.smart-field__control--center{text-align:center}.smart-field__control--right{text-align:right}.smart-field__control--left{text-align:left}.smart-field__control--custom,.smart-field__icon-root{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.smart-field__clear-root,.smart-field__icon-container{line-height:inherit;margin-right:calc(var(--padding-xs, 8px)*-1);padding:0 var(--padding-xs,8px);vertical-align:middle}.smart-field__button,.smart-field__clear-root,.smart-field__icon-container{flex-shrink:0}.smart-field__clear-root{--icon-color:var(--field-clear-icon-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-clear-icon-size,16px)}.smart-field__icon-container{--icon-color:var(--field-icon-container-color,#969799);font-size:var(--field-icon-size,16px)}.smart-field__icon-container:empty{display:none}.smart-field__button{padding-left:var(--padding-xs,8px)}.smart-field__button:empty{display:none}.smart-field__error-message{color:var(--field-error-message-color,var(--app-M2,#f04c4c));display:block;font-size:var(--field-error-message-text-font-size,14px);font-weight:400;line-height:var(--field-error-message-text-line-height,18px);text-align:right;white-space:nowrap}.smart-field__error-message--center{text-align:center}.smart-field__error-message--right{text-align:right}.smart-field--textarea{padding:0 16px}.smart-field--textarea .smart-field__left__body{margin-bottom:8px;width:100%}.smart-field--textarea .smart-field__body__box{position:relative}.smart-field__word-limit{bottom:8px;color:var(--field-word-limit-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-word-limit-font-size,12px);line-height:var(--field-word-limit-line-height,16px);margin-top:var(--padding-base,4px);position:absolute;right:8px;text-align:right}.smart-field__word-num{display:inline}.smart-field__word-num--full{color:var(--field-word-num-full-color,var(--app-M2,#f04c4c))}
|
package/dist/field/index.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { nextTick } from '../common/utils';
|
|
2
2
|
import { SmartComponent } from '../common/component';
|
|
3
3
|
import { commonProps, inputProps, textareaProps } from './props';
|
|
4
|
+
import { Xmark } from '@tuya-miniapp/icons';
|
|
4
5
|
SmartComponent({
|
|
5
6
|
field: true,
|
|
6
7
|
classes: ['input-class', 'right-icon-class', 'label-class'],
|
|
7
|
-
props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean,
|
|
8
|
+
props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean, interError: Boolean, inputAlign: {
|
|
9
|
+
type: String,
|
|
10
|
+
}, subLabel: String, cardMode: Boolean, iconClass: String, clickable: Boolean, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, readonly: {
|
|
8
11
|
type: Boolean,
|
|
9
12
|
observer: 'setShowClear',
|
|
10
13
|
}, clearable: {
|
|
@@ -15,13 +18,13 @@ SmartComponent({
|
|
|
15
18
|
value: 'focus',
|
|
16
19
|
}, border: {
|
|
17
20
|
type: Boolean,
|
|
18
|
-
value:
|
|
21
|
+
value: false,
|
|
19
22
|
}, titleWidth: {
|
|
20
23
|
type: String,
|
|
21
24
|
value: '6.2em',
|
|
22
25
|
}, clearIcon: {
|
|
23
26
|
type: String,
|
|
24
|
-
value:
|
|
27
|
+
value: Xmark,
|
|
25
28
|
}, extraEventParams: {
|
|
26
29
|
type: Boolean,
|
|
27
30
|
value: false,
|
package/dist/field/index.wxml
CHANGED
|
@@ -1,56 +1,4 @@
|
|
|
1
1
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
2
|
<wxs src="./index.wxs" module="computed" />
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
size="{{ size }}"
|
|
6
|
-
icon="{{ leftIcon }}"
|
|
7
|
-
center="{{ center }}"
|
|
8
|
-
border="{{ border }}"
|
|
9
|
-
is-link="{{ isLink }}"
|
|
10
|
-
required="{{ required }}"
|
|
11
|
-
clickable="{{ clickable }}"
|
|
12
|
-
title-width="{{ titleWidth }}"
|
|
13
|
-
title-style="margin-right: 12px;"
|
|
14
|
-
custom-style="{{ customStyle }}"
|
|
15
|
-
arrow-direction="{{ arrowDirection }}"
|
|
16
|
-
custom-class="custom-class smart-field"
|
|
17
|
-
>
|
|
18
|
-
<slot name="left-icon" slot="icon" />
|
|
19
|
-
<label for="{{ name }}" wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
|
|
20
|
-
{{ label }}
|
|
21
|
-
</label>
|
|
22
|
-
<slot wx:else name="label" slot="title" />
|
|
23
|
-
<view class="{{ utils.bem('field__body', [type]) }}">
|
|
24
|
-
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
|
25
|
-
<slot name="input" />
|
|
26
|
-
</view>
|
|
27
|
-
<include wx:if="{{ type === 'textarea' }}" src="./textarea.wxml" />
|
|
28
|
-
<include wx:else src="./input.wxml" />
|
|
29
|
-
|
|
30
|
-
<smart-icon
|
|
31
|
-
wx:if="{{ showClear }}"
|
|
32
|
-
name="{{ clearIcon }}"
|
|
33
|
-
class="smart-field__clear-root smart-field__icon-root"
|
|
34
|
-
catch:touchstart="onClear"
|
|
35
|
-
/>
|
|
36
|
-
<view class="smart-field__icon-container" bind:tap="onClickIcon">
|
|
37
|
-
<smart-icon
|
|
38
|
-
wx:if="{{ rightIcon || icon }}"
|
|
39
|
-
name="{{ rightIcon || icon }}"
|
|
40
|
-
class="smart-field__icon-root {{ iconClass }}"
|
|
41
|
-
custom-class="right-icon-class"
|
|
42
|
-
/>
|
|
43
|
-
<slot name="right-icon" />
|
|
44
|
-
<slot name="icon" />
|
|
45
|
-
</view>
|
|
46
|
-
<view class="smart-field__button">
|
|
47
|
-
<slot name="button" />
|
|
48
|
-
</view>
|
|
49
|
-
</view>
|
|
50
|
-
<label for="{{ name }}" wx:if="{{ showWordLimit && maxlength }}" class="smart-field__word-limit">
|
|
51
|
-
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
|
|
52
|
-
</label>
|
|
53
|
-
<label for="{{ name }}" wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
|
|
54
|
-
{{ errorMessage }}
|
|
55
|
-
</label>
|
|
56
|
-
</smart-cell>
|
|
3
|
+
<include wx:if="{{ type === 'textarea' }}" src="./cell-textarea.wxml" />
|
|
4
|
+
<include wx:else src="./cell-input.wxml" />
|
package/dist/field/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000))}.smart-field__label--
|
|
1
|
+
@import '../common/index.wxss';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__left__body{align-items:center;display:flex;text-align:left;width:var(--field-left-width,50%)}.smart-field__left__body--card{width:var(--field-left-card-width,100%)}.smart-field__left__body--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000));font-size:var(--field-label-font-size,16px);line-height:var(--field-label-line-height,18px);text-align:left}.smart-field__label--required{color:var(--field-input-error-text-color,var(--app-M2,#f04c4c))}.smart-field__left__icon{display:flex;margin-right:10px}.smart-field__left__icon:empty{display:none}.smart-field__label__card__subtitle{color:var(--field-subtitle-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--field-sub-label-font-size,14px);line-height:var(--field-sub-label-line-height,16px);margin-top:4px}.smart-field__label__card__subtitle--error{color:var(--field-error-message-color,var(--app-M2,#f04c4c))}.smart-field__body__box{width:var(--field-left-card-width,100%)}.smart-field__body__box--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__body{align-items:center;display:flex;justify-content:flex-end}.smart-field__control:empty+.smart-field__control{display:block}.smart-field__control{background-color:initial;border:0;box-sizing:border-box;color:var(--field-input-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:none;height:var(--cell-line-height,24px);line-height:inherit;margin:0;min-height:var(--cell-line-height,24px);padding:0;position:relative;resize:none;text-align:right;width:100%}.smart-field__control:empty{display:none}.smart-field__control--textarea{background-color:var(--field-textarea-background,var(--app-B3,#fff));border-radius:var(--field-textarea-border-radius,8px);height:var(--field-text-area-min-height,130px);min-height:var(--field-text-area-min-height,130px);padding:var(--field-textarea-padding,12px 8px);text-align:left}.smart-field__control--card{background:var(--field-card-background,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:var(--field-card-border-radius,8px);height:var(--field-card-height,38px);padding:var(--field-card-padding,0 10px);text-align:center;width:var(--field-card-width,105px)}.smart-field__control--limit{padding-bottom:var(--field-textarea-limit-padding-bottom,22px)}.smart-field__control--center{text-align:center}.smart-field__control--right{text-align:right}.smart-field__control--left{text-align:left}.smart-field__control--custom,.smart-field__icon-root{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.smart-field__clear-root,.smart-field__icon-container{line-height:inherit;margin-right:calc(var(--padding-xs, 8px)*-1);padding:0 var(--padding-xs,8px);vertical-align:middle}.smart-field__button,.smart-field__clear-root,.smart-field__icon-container{flex-shrink:0}.smart-field__clear-root{--icon-color:var(--field-clear-icon-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-clear-icon-size,16px)}.smart-field__icon-container{--icon-color:var(--field-icon-container-color,#969799);font-size:var(--field-icon-size,16px)}.smart-field__icon-container:empty{display:none}.smart-field__button{padding-left:var(--padding-xs,8px)}.smart-field__button:empty{display:none}.smart-field__error-message{color:var(--field-error-message-color,var(--app-M2,#f04c4c));display:block;font-size:var(--field-error-message-text-font-size,14px);font-weight:400;line-height:var(--field-error-message-text-line-height,18px);text-align:right;white-space:nowrap}.smart-field__error-message--center{text-align:center}.smart-field__error-message--right{text-align:right}.smart-field--textarea{padding:0 16px}.smart-field--textarea .smart-field__left__body{margin-bottom:8px;width:100%}.smart-field--textarea .smart-field__body__box{position:relative}.smart-field__word-limit{bottom:8px;color:var(--field-word-limit-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-word-limit-font-size,12px);line-height:var(--field-word-limit-line-height,16px);margin-top:var(--padding-base,4px);position:absolute;right:8px;text-align:right}.smart-field__word-num{display:inline}.smart-field__word-num--full{color:var(--field-word-num-full-color,var(--app-M2,#f04c4c))}
|
package/dist/field/input.wxml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
2
|
<input
|
|
3
3
|
id="{{ name }}"
|
|
4
|
-
class="{{ utils.bem('field__control', [inputAlign, {
|
|
4
|
+
class="{{ utils.bem('field__control', [inputAlign, type, { card: cardMode }]) }} input-class"
|
|
5
5
|
type="{{ type }}"
|
|
6
6
|
focus="{{ focus }}"
|
|
7
7
|
cursor="{{ cursor }}"
|
|
@@ -9,9 +9,8 @@
|
|
|
9
9
|
auto-focus="{{ autoFocus }}"
|
|
10
10
|
disabled="{{ disabled || readonly }}"
|
|
11
11
|
maxlength="{{ maxlength }}"
|
|
12
|
-
placeholder="{{ placeholder }}"
|
|
13
|
-
placeholder-style="{{ placeholderStyle }}"
|
|
14
|
-
placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
|
|
12
|
+
placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
|
|
13
|
+
placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4));'}}{{ placeholderStyle }}"
|
|
15
14
|
confirm-type="{{ confirmType }}"
|
|
16
15
|
confirm-hold="{{ confirmHold }}"
|
|
17
16
|
hold-keyboard="{{ holdKeyboard }}"
|
package/dist/field/textarea.wxml
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
2
|
<wxs src="./index.wxs" module="computed" />
|
|
3
|
+
|
|
3
4
|
<textarea
|
|
4
5
|
id="{{ name }}"
|
|
5
|
-
class="{{ utils.bem('field__control', [inputAlign, type, {
|
|
6
|
+
class="{{ utils.bem('field__control', [inputAlign, type, { textarea: true, limit: showWordLimit && maxlength }]) }} input-class"
|
|
6
7
|
fixed="{{ fixed }}"
|
|
7
8
|
focus="{{ focus }}"
|
|
8
9
|
cursor="{{ cursor }}"
|
|
@@ -10,9 +11,8 @@
|
|
|
10
11
|
auto-focus="{{ autoFocus }}"
|
|
11
12
|
disabled="{{ disabled || readonly }}"
|
|
12
13
|
maxlength="{{ maxlength }}"
|
|
13
|
-
placeholder="{{ placeholder }}"
|
|
14
|
-
placeholder-style="{{ placeholderStyle }}"
|
|
15
|
-
placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
|
|
14
|
+
placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
|
|
15
|
+
placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4));'}}{{ placeholderStyle }}"
|
|
16
16
|
auto-height="{{ !!autosize }}"
|
|
17
17
|
style="{{ computed.inputStyle(autosize) }}"
|
|
18
18
|
cursor-spacing="{{ cursorSpacing }}"
|
package/dist/tabs/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css'
|
|
1
|
+
@import '../common/index.css';.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{background-color:var(--tabs-card-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;padding:var(--tabs-card-padding,2px);width:100%}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:100%}.smart-tabs__nav--card .smart-tab{align-items:center;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:center}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card-box{background-color:initial;height:100%;pointer-events:none;position:relative;width:100%}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:var(--tabs-card-active-border-radius,6px);left:var(--tabs-card-active-left,0);opacity:0;position:absolute;top:var(--tabs-card-active-top,0);z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}
|
package/dist/tabs/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss'
|
|
1
|
+
@import '../common/index.wxss';.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{background-color:var(--tabs-card-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;padding:var(--tabs-card-padding,2px);width:100%}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:100%}.smart-tabs__nav--card .smart-tab{align-items:center;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:center}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card-box{background-color:initial;height:100%;pointer-events:none;position:relative;width:100%}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:var(--tabs-card-active-border-radius,6px);left:var(--tabs-card-active-left,0);opacity:0;position:absolute;top:var(--tabs-card-active-top,0);z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
|
+
<wxs src="./index.wxs" module="computed" />
|
|
3
|
+
|
|
4
|
+
<smart-cell
|
|
5
|
+
size="{{ size }}"
|
|
6
|
+
icon="{{ leftIcon }}"
|
|
7
|
+
center="{{ center }}"
|
|
8
|
+
border="{{ border }}"
|
|
9
|
+
is-link="{{ isLink }}"
|
|
10
|
+
clickable="{{ clickable }}"
|
|
11
|
+
title-width="{{ titleWidth }}"
|
|
12
|
+
title-style="margin-right: 12px;"
|
|
13
|
+
custom-style="{{ customStyle }}"
|
|
14
|
+
arrow-direction="{{ arrowDirection }}"
|
|
15
|
+
custom-class="custom-class smart-field"
|
|
16
|
+
>
|
|
17
|
+
<view class="{{ utils.bem('field__left__body', { disabled, card: cardMode }) }}">
|
|
18
|
+
<view class="smart-field__left__icon">
|
|
19
|
+
<slot name="left-icon" slot="icon" />
|
|
20
|
+
</view>
|
|
21
|
+
<view class="smart-field__label" >
|
|
22
|
+
<text wx:if="{{ required }}" class="smart-field__label--required">*</text>
|
|
23
|
+
<label for="{{ name }}" class="label-class" wx:if="{{ label }}" slot="title">
|
|
24
|
+
{{ label }}
|
|
25
|
+
</label>
|
|
26
|
+
<slot wx:else name="label" slot="title" />
|
|
27
|
+
<view wx:if="{{ subLabel && cardMode }}" class="{{ utils.bem('field__label__card__subtitle', { error: errorMessage }) }}">{{ errorMessage || subLabel }}</view>
|
|
28
|
+
</view>
|
|
29
|
+
</view>
|
|
30
|
+
<view class="{{ utils.bem('field__body__box', { disabled }) }}">
|
|
31
|
+
<view class="{{ utils.bem('field__body', [type]) }}">
|
|
32
|
+
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
|
33
|
+
<slot name="input" />
|
|
34
|
+
</view>
|
|
35
|
+
<include src="./input.wxml" />
|
|
36
|
+
<smart-icon
|
|
37
|
+
wx:if="{{ showClear }}"
|
|
38
|
+
name="{{ clearIcon }}"
|
|
39
|
+
class="smart-field__clear-root smart-field__icon-root"
|
|
40
|
+
catch:touchstart="onClear"
|
|
41
|
+
/>
|
|
42
|
+
<view class="smart-field__icon-container" bind:tap="onClickIcon">
|
|
43
|
+
<smart-icon
|
|
44
|
+
wx:if="{{ rightIcon || icon }}"
|
|
45
|
+
name="{{ rightIcon || icon }}"
|
|
46
|
+
class="smart-field__icon-root {{ iconClass }}"
|
|
47
|
+
custom-class="right-icon-class"
|
|
48
|
+
/>
|
|
49
|
+
<slot name="right-icon" />
|
|
50
|
+
<slot name="icon" />
|
|
51
|
+
</view>
|
|
52
|
+
<view class="smart-field__button">
|
|
53
|
+
<slot name="button" />
|
|
54
|
+
</view>
|
|
55
|
+
</view>
|
|
56
|
+
<label wx:if="{{ errorMessage && !interError && !cardMode }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
|
|
57
|
+
{{ errorMessage }}
|
|
58
|
+
</label>
|
|
59
|
+
</view>
|
|
60
|
+
</smart-cell>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
|
+
<wxs src="./index.wxs" module="computed" />
|
|
3
|
+
<view class="smart-field smart-field--textarea">
|
|
4
|
+
<view class="{{ utils.bem('field__left__body', { disabled, card: cardMode }) }}">
|
|
5
|
+
<view class="smart-field__left__icon">
|
|
6
|
+
<slot name="left-icon" slot="icon" />
|
|
7
|
+
</view>
|
|
8
|
+
<view class="smart-field__label" >
|
|
9
|
+
<text wx:if="{{ required }}" class="smart-field__label--required">*</text>
|
|
10
|
+
<label for="{{ name }}" class="label-class" wx:if="{{ label }}" slot="title">
|
|
11
|
+
{{ label }}
|
|
12
|
+
</label>
|
|
13
|
+
<slot wx:else name="label" slot="title" />
|
|
14
|
+
<view wx:if="{{ subLabel && cardMode }}" class="{{ utils.bem('field__label__card__subtitle', { error: errorMessage }) }}">{{ errorMessage || subLabel }}</view>
|
|
15
|
+
</view>
|
|
16
|
+
</view>
|
|
17
|
+
<view class="{{ utils.bem('field__body__box', { disabled }) }}">
|
|
18
|
+
<view class="{{ utils.bem('field__body', [type]) }}">
|
|
19
|
+
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
|
20
|
+
<slot name="input" />
|
|
21
|
+
</view>
|
|
22
|
+
<include src="./textarea.wxml" />
|
|
23
|
+
</view>
|
|
24
|
+
<label wx:if="{{ showWordLimit && maxlength }}" class="smart-field__word-limit">
|
|
25
|
+
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
|
|
26
|
+
</label>
|
|
27
|
+
</view>
|
|
28
|
+
</view>
|
package/lib/field/demo/index.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var component_1 = require("../../common/component");
|
|
4
|
+
var icons_1 = require("@tuya-miniapp/icons");
|
|
4
5
|
(0, component_1.SmartComponent)({
|
|
5
6
|
data: {
|
|
6
|
-
sms: '',
|
|
7
7
|
value: '',
|
|
8
8
|
password: '',
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
username3: '',
|
|
9
|
+
num: 2000,
|
|
10
|
+
value2: '123',
|
|
12
11
|
message: '',
|
|
13
|
-
|
|
12
|
+
sunIcon: icons_1.Sun
|
|
14
13
|
},
|
|
15
14
|
methods: {
|
|
16
15
|
onClickIcon: function () {
|
package/lib/field/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000))}.smart-field__label--
|
|
1
|
+
@import '../common/index.css';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__left__body{align-items:center;display:flex;text-align:left;width:var(--field-left-width,50%)}.smart-field__left__body--card{width:var(--field-left-card-width,100%)}.smart-field__left__body--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000));font-size:var(--field-label-font-size,16px);line-height:var(--field-label-line-height,18px);text-align:left}.smart-field__label--required{color:var(--field-input-error-text-color,var(--app-M2,#f04c4c))}.smart-field__left__icon{display:flex;margin-right:10px}.smart-field__left__icon:empty{display:none}.smart-field__label__card__subtitle{color:var(--field-subtitle-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--field-sub-label-font-size,14px);line-height:var(--field-sub-label-line-height,16px);margin-top:4px}.smart-field__label__card__subtitle--error{color:var(--field-error-message-color,var(--app-M2,#f04c4c))}.smart-field__body__box{width:var(--field-left-card-width,100%)}.smart-field__body__box--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__body{align-items:center;display:flex;justify-content:flex-end}.smart-field__control:empty+.smart-field__control{display:block}.smart-field__control{background-color:initial;border:0;box-sizing:border-box;color:var(--field-input-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:none;height:var(--cell-line-height,24px);line-height:inherit;margin:0;min-height:var(--cell-line-height,24px);padding:0;position:relative;resize:none;text-align:right;width:100%}.smart-field__control:empty{display:none}.smart-field__control--textarea{background-color:var(--field-textarea-background,var(--app-B3,#fff));border-radius:var(--field-textarea-border-radius,8px);height:var(--field-text-area-min-height,130px);min-height:var(--field-text-area-min-height,130px);padding:var(--field-textarea-padding,12px 8px);text-align:left}.smart-field__control--card{background:var(--field-card-background,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:var(--field-card-border-radius,8px);height:var(--field-card-height,38px);padding:var(--field-card-padding,0 10px);text-align:center;width:var(--field-card-width,105px)}.smart-field__control--limit{padding-bottom:var(--field-textarea-limit-padding-bottom,22px)}.smart-field__control--center{text-align:center}.smart-field__control--right{text-align:right}.smart-field__control--left{text-align:left}.smart-field__control--custom,.smart-field__icon-root{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.smart-field__clear-root,.smart-field__icon-container{line-height:inherit;margin-right:calc(var(--padding-xs, 8px)*-1);padding:0 var(--padding-xs,8px);vertical-align:middle}.smart-field__button,.smart-field__clear-root,.smart-field__icon-container{flex-shrink:0}.smart-field__clear-root{--icon-color:var(--field-clear-icon-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-clear-icon-size,16px)}.smart-field__icon-container{--icon-color:var(--field-icon-container-color,#969799);font-size:var(--field-icon-size,16px)}.smart-field__icon-container:empty{display:none}.smart-field__button{padding-left:var(--padding-xs,8px)}.smart-field__button:empty{display:none}.smart-field__error-message{color:var(--field-error-message-color,var(--app-M2,#f04c4c));display:block;font-size:var(--field-error-message-text-font-size,14px);font-weight:400;line-height:var(--field-error-message-text-line-height,18px);text-align:right;white-space:nowrap}.smart-field__error-message--center{text-align:center}.smart-field__error-message--right{text-align:right}.smart-field--textarea{padding:0 16px}.smart-field--textarea .smart-field__left__body{margin-bottom:8px;width:100%}.smart-field--textarea .smart-field__body__box{position:relative}.smart-field__word-limit{bottom:8px;color:var(--field-word-limit-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-word-limit-font-size,12px);line-height:var(--field-word-limit-line-height,16px);margin-top:var(--padding-base,4px);position:absolute;right:8px;text-align:right}.smart-field__word-num{display:inline}.smart-field__word-num--full{color:var(--field-word-num-full-color,var(--app-M2,#f04c4c))}
|
package/lib/field/index.js
CHANGED
|
@@ -14,10 +14,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
14
14
|
var utils_1 = require("../common/utils");
|
|
15
15
|
var component_1 = require("../common/component");
|
|
16
16
|
var props_1 = require("./props");
|
|
17
|
+
var icons_1 = require("@tuya-miniapp/icons");
|
|
17
18
|
(0, component_1.SmartComponent)({
|
|
18
19
|
field: true,
|
|
19
20
|
classes: ['input-class', 'right-icon-class', 'label-class'],
|
|
20
|
-
props: __assign(__assign(__assign(__assign({}, props_1.commonProps), props_1.inputProps), props_1.textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean,
|
|
21
|
+
props: __assign(__assign(__assign(__assign({}, props_1.commonProps), props_1.inputProps), props_1.textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean, interError: Boolean, inputAlign: {
|
|
22
|
+
type: String,
|
|
23
|
+
}, subLabel: String, cardMode: Boolean, iconClass: String, clickable: Boolean, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, readonly: {
|
|
21
24
|
type: Boolean,
|
|
22
25
|
observer: 'setShowClear',
|
|
23
26
|
}, clearable: {
|
|
@@ -28,13 +31,13 @@ var props_1 = require("./props");
|
|
|
28
31
|
value: 'focus',
|
|
29
32
|
}, border: {
|
|
30
33
|
type: Boolean,
|
|
31
|
-
value:
|
|
34
|
+
value: false,
|
|
32
35
|
}, titleWidth: {
|
|
33
36
|
type: String,
|
|
34
37
|
value: '6.2em',
|
|
35
38
|
}, clearIcon: {
|
|
36
39
|
type: String,
|
|
37
|
-
value:
|
|
40
|
+
value: icons_1.Xmark,
|
|
38
41
|
}, extraEventParams: {
|
|
39
42
|
type: Boolean,
|
|
40
43
|
value: false,
|
package/lib/field/index.wxml
CHANGED
|
@@ -1,56 +1,4 @@
|
|
|
1
1
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
2
|
<wxs src="./index.wxs" module="computed" />
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
size="{{ size }}"
|
|
6
|
-
icon="{{ leftIcon }}"
|
|
7
|
-
center="{{ center }}"
|
|
8
|
-
border="{{ border }}"
|
|
9
|
-
is-link="{{ isLink }}"
|
|
10
|
-
required="{{ required }}"
|
|
11
|
-
clickable="{{ clickable }}"
|
|
12
|
-
title-width="{{ titleWidth }}"
|
|
13
|
-
title-style="margin-right: 12px;"
|
|
14
|
-
custom-style="{{ customStyle }}"
|
|
15
|
-
arrow-direction="{{ arrowDirection }}"
|
|
16
|
-
custom-class="custom-class smart-field"
|
|
17
|
-
>
|
|
18
|
-
<slot name="left-icon" slot="icon" />
|
|
19
|
-
<label for="{{ name }}" wx:if="{{ label }}" class="label-class {{ utils.bem('field__label', { disabled }) }}" slot="title">
|
|
20
|
-
{{ label }}
|
|
21
|
-
</label>
|
|
22
|
-
<slot wx:else name="label" slot="title" />
|
|
23
|
-
<view class="{{ utils.bem('field__body', [type]) }}">
|
|
24
|
-
<view class="{{ utils.bem('field__control', [inputAlign, 'custom']) }}" bindtap="onClickInput">
|
|
25
|
-
<slot name="input" />
|
|
26
|
-
</view>
|
|
27
|
-
<include wx:if="{{ type === 'textarea' }}" src="./textarea.wxml" />
|
|
28
|
-
<include wx:else src="./input.wxml" />
|
|
29
|
-
|
|
30
|
-
<smart-icon
|
|
31
|
-
wx:if="{{ showClear }}"
|
|
32
|
-
name="{{ clearIcon }}"
|
|
33
|
-
class="smart-field__clear-root smart-field__icon-root"
|
|
34
|
-
catch:touchstart="onClear"
|
|
35
|
-
/>
|
|
36
|
-
<view class="smart-field__icon-container" bind:tap="onClickIcon">
|
|
37
|
-
<smart-icon
|
|
38
|
-
wx:if="{{ rightIcon || icon }}"
|
|
39
|
-
name="{{ rightIcon || icon }}"
|
|
40
|
-
class="smart-field__icon-root {{ iconClass }}"
|
|
41
|
-
custom-class="right-icon-class"
|
|
42
|
-
/>
|
|
43
|
-
<slot name="right-icon" />
|
|
44
|
-
<slot name="icon" />
|
|
45
|
-
</view>
|
|
46
|
-
<view class="smart-field__button">
|
|
47
|
-
<slot name="button" />
|
|
48
|
-
</view>
|
|
49
|
-
</view>
|
|
50
|
-
<label for="{{ name }}" wx:if="{{ showWordLimit && maxlength }}" class="smart-field__word-limit">
|
|
51
|
-
<view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
|
|
52
|
-
</label>
|
|
53
|
-
<label for="{{ name }}" wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
|
|
54
|
-
{{ errorMessage }}
|
|
55
|
-
</label>
|
|
56
|
-
</smart-cell>
|
|
3
|
+
<include wx:if="{{ type === 'textarea' }}" src="./cell-textarea.wxml" />
|
|
4
|
+
<include wx:else src="./cell-input.wxml" />
|
package/lib/field/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000))}.smart-field__label--
|
|
1
|
+
@import '../common/index.wxss';.smart-field{--cell-icon-size:var(--field-icon-size,16px)}.smart-field__left__body{align-items:center;display:flex;text-align:left;width:var(--field-left-width,50%)}.smart-field__left__body--card{width:var(--field-left-card-width,100%)}.smart-field__left__body--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__label{color:var(--field-label-color,var(--app-B6-N1,#000));font-size:var(--field-label-font-size,16px);line-height:var(--field-label-line-height,18px);text-align:left}.smart-field__label--required{color:var(--field-input-error-text-color,var(--app-M2,#f04c4c))}.smart-field__left__icon{display:flex;margin-right:10px}.smart-field__left__icon:empty{display:none}.smart-field__label__card__subtitle{color:var(--field-subtitle-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--field-sub-label-font-size,14px);line-height:var(--field-sub-label-line-height,16px);margin-top:4px}.smart-field__label__card__subtitle--error{color:var(--field-error-message-color,var(--app-M2,#f04c4c))}.smart-field__body__box{width:var(--field-left-card-width,100%)}.smart-field__body__box--disabled{opacity:var(--field-disabled-opacity,.5)}.smart-field__body{align-items:center;display:flex;justify-content:flex-end}.smart-field__control:empty+.smart-field__control{display:block}.smart-field__control{background-color:initial;border:0;box-sizing:border-box;color:var(--field-input-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:none;height:var(--cell-line-height,24px);line-height:inherit;margin:0;min-height:var(--cell-line-height,24px);padding:0;position:relative;resize:none;text-align:right;width:100%}.smart-field__control:empty{display:none}.smart-field__control--textarea{background-color:var(--field-textarea-background,var(--app-B3,#fff));border-radius:var(--field-textarea-border-radius,8px);height:var(--field-text-area-min-height,130px);min-height:var(--field-text-area-min-height,130px);padding:var(--field-textarea-padding,12px 8px);text-align:left}.smart-field__control--card{background:var(--field-card-background,var(--app-B6-N7,rgba(0,0,0,.1)));border-radius:var(--field-card-border-radius,8px);height:var(--field-card-height,38px);padding:var(--field-card-padding,0 10px);text-align:center;width:var(--field-card-width,105px)}.smart-field__control--limit{padding-bottom:var(--field-textarea-limit-padding-bottom,22px)}.smart-field__control--center{text-align:center}.smart-field__control--right{text-align:right}.smart-field__control--left{text-align:left}.smart-field__control--custom,.smart-field__icon-root{align-items:center;display:flex;min-height:var(--cell-line-height,24px)}.smart-field__clear-root,.smart-field__icon-container{line-height:inherit;margin-right:calc(var(--padding-xs, 8px)*-1);padding:0 var(--padding-xs,8px);vertical-align:middle}.smart-field__button,.smart-field__clear-root,.smart-field__icon-container{flex-shrink:0}.smart-field__clear-root{--icon-color:var(--field-clear-icon-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-clear-icon-size,16px)}.smart-field__icon-container{--icon-color:var(--field-icon-container-color,#969799);font-size:var(--field-icon-size,16px)}.smart-field__icon-container:empty{display:none}.smart-field__button{padding-left:var(--padding-xs,8px)}.smart-field__button:empty{display:none}.smart-field__error-message{color:var(--field-error-message-color,var(--app-M2,#f04c4c));display:block;font-size:var(--field-error-message-text-font-size,14px);font-weight:400;line-height:var(--field-error-message-text-line-height,18px);text-align:right;white-space:nowrap}.smart-field__error-message--center{text-align:center}.smart-field__error-message--right{text-align:right}.smart-field--textarea{padding:0 16px}.smart-field--textarea .smart-field__left__body{margin-bottom:8px;width:100%}.smart-field--textarea .smart-field__body__box{position:relative}.smart-field__word-limit{bottom:8px;color:var(--field-word-limit-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--field-word-limit-font-size,12px);line-height:var(--field-word-limit-line-height,16px);margin-top:var(--padding-base,4px);position:absolute;right:8px;text-align:right}.smart-field__word-num{display:inline}.smart-field__word-num--full{color:var(--field-word-num-full-color,var(--app-M2,#f04c4c))}
|
package/lib/field/input.wxml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
2
|
<input
|
|
3
3
|
id="{{ name }}"
|
|
4
|
-
class="{{ utils.bem('field__control', [inputAlign, {
|
|
4
|
+
class="{{ utils.bem('field__control', [inputAlign, type, { card: cardMode }]) }} input-class"
|
|
5
5
|
type="{{ type }}"
|
|
6
6
|
focus="{{ focus }}"
|
|
7
7
|
cursor="{{ cursor }}"
|
|
@@ -9,9 +9,8 @@
|
|
|
9
9
|
auto-focus="{{ autoFocus }}"
|
|
10
10
|
disabled="{{ disabled || readonly }}"
|
|
11
11
|
maxlength="{{ maxlength }}"
|
|
12
|
-
placeholder="{{ placeholder }}"
|
|
13
|
-
placeholder-style="{{ placeholderStyle }}"
|
|
14
|
-
placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
|
|
12
|
+
placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
|
|
13
|
+
placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4));'}}{{ placeholderStyle }}"
|
|
15
14
|
confirm-type="{{ confirmType }}"
|
|
16
15
|
confirm-hold="{{ confirmHold }}"
|
|
17
16
|
hold-keyboard="{{ holdKeyboard }}"
|
package/lib/field/textarea.wxml
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
|
2
2
|
<wxs src="./index.wxs" module="computed" />
|
|
3
|
+
|
|
3
4
|
<textarea
|
|
4
5
|
id="{{ name }}"
|
|
5
|
-
class="{{ utils.bem('field__control', [inputAlign, type, {
|
|
6
|
+
class="{{ utils.bem('field__control', [inputAlign, type, { textarea: true, limit: showWordLimit && maxlength }]) }} input-class"
|
|
6
7
|
fixed="{{ fixed }}"
|
|
7
8
|
focus="{{ focus }}"
|
|
8
9
|
cursor="{{ cursor }}"
|
|
@@ -10,9 +11,8 @@
|
|
|
10
11
|
auto-focus="{{ autoFocus }}"
|
|
11
12
|
disabled="{{ disabled || readonly }}"
|
|
12
13
|
maxlength="{{ maxlength }}"
|
|
13
|
-
placeholder="{{ placeholder }}"
|
|
14
|
-
placeholder-style="{{ placeholderStyle }}"
|
|
15
|
-
placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
|
|
14
|
+
placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
|
|
15
|
+
placeholder-style="{{ interError ? 'color: var(--field-input-error-text-color, var(--app-M2, #f04c4c));' : 'color: var(--field-placeholder-text-color, var(--app-B6-N4, rgba(0, 0, 0, 0.4));'}}{{ placeholderStyle }}"
|
|
16
16
|
auto-height="{{ !!autosize }}"
|
|
17
17
|
style="{{ computed.inputStyle(autosize) }}"
|
|
18
18
|
cursor-spacing="{{ cursorSpacing }}"
|
package/lib/tabs/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css'
|
|
1
|
+
@import '../common/index.css';.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{background-color:var(--tabs-card-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;padding:var(--tabs-card-padding,2px);width:100%}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:100%}.smart-tabs__nav--card .smart-tab{align-items:center;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:center}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card-box{background-color:initial;height:100%;pointer-events:none;position:relative;width:100%}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:var(--tabs-card-active-border-radius,6px);left:var(--tabs-card-active-left,0);opacity:0;position:absolute;top:var(--tabs-card-active-top,0);z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}
|
package/lib/tabs/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss'
|
|
1
|
+
@import '../common/index.wxss';.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{background-color:var(--tabs-card-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;padding:var(--tabs-card-padding,2px);width:100%}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:100%}.smart-tabs__nav--card .smart-tab{align-items:center;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:center}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card-box{background-color:initial;height:100%;pointer-events:none;position:relative;width:100%}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:var(--tabs-card-active-border-radius,6px);left:var(--tabs-card-active-left,0);opacity:0;position:absolute;top:var(--tabs-card-active-top,0);z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}
|