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

package/packages/field/demo/index.wxml

@@ -1,131 +0,0 @@
-<demo-block title="{{I18n.t('basicUsage')}}">
-  <smart-cell-group>
-    <smart-field 
-      value="{{ value }}" 
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnter')}}" 
-    />
-    <smart-field 
-      value="{{ value }}"
-      hidden-label
-      placeholder="{{I18n.t('pleaseEnter')}}" 
-    />
-  </smart-cell-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('customType')}}">
-  <smart-cell-group>
-    <smart-field
-      value="{{ password }}"
-      type="password"
-      label="{{I18n.t('password')}}"
-      placeholder="{{I18n.t('pleaseEnterThePassword')}}"
-    />
-    <smart-field
-      card-mode
-      sub-label="{{ I18n.t('subTitle') }}"
-      value="{{ num }}"
-      type="number"
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnter')}}"
-    />
-  </smart-cell-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('disableInputBox')}}">
-  <smart-cell-group>
-    <smart-field
-      placeholder="{{I18n.t('inputBoxIsDisabled')}}"
-      label="{{I18n.t('title')}}"
-      disabled
-    />
-    <smart-field
-      card-mode
-      disabled
-      sub-label="{{ I18n.t('subTitle') }}"
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnter')}}"
-    />
-  </smart-cell-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('displayIcon')}}">
-  <smart-cell-group>
-    <smart-field
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnter')}}"
-    >
-      <smart-icon name="{{ sunIcon }}" slot="left-icon" color="#3678E3" size="22" />
-    </smart-field>
-    <smart-field
-      value="{{ num }}"
-      card-mode
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnter')}}"
-    >
-      <image 
-        slot="left-icon"
-        style="height: 50px;width: 50px;"
-        src="https://images.tuyacn.com/rms-static/974a30f0-a624-11ef-be03-d1a4feb99779-1731986155903.png?tyName=light-img" 
-      />
-    </smart-field>
-  </smart-cell-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('errorMessage')}}">
-  <smart-cell-group>
-    <smart-field
-      label="{{I18n.t('title')}}"
-      error-message="{{I18n.t('pleaseEnterYourUsername')}}"
-      inter-error
-      required
-    />
-    <smart-field
-      value="{{ value2 }}"
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnter')}}"
-      error-message="{{I18n.t('formatError')}}"
-      required
-    />
-    <smart-field
-      value="{{ num }}"
-      card-mode
-      label="{{I18n.t('title')}}"
-      sub-label="{{ I18n.t('subTitle') }}"
-      placeholder="{{I18n.t('pleaseEnter')}}"
-      error-message="{{I18n.t('formatError')}}"
-      required
-    >
-      <image 
-        slot="left-icon"
-        style="height: 50px;width: 50px;"
-        src="https://images.tuyacn.com/rms-static/974a30f0-a624-11ef-be03-d1a4feb99779-1731986155903.png?tyName=light-img" 
-      />
-    </smart-field>
-  </smart-cell-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('insertButton')}}" class="field-demo-custom-button">
-  <smart-cell-group>
-    <smart-field
-      label="{{I18n.t('title')}}"
-      placeholder="{{I18n.t('pleaseEnterTheSmsVerificationCode')}}"
-      type="number"
-      input-align="left"
-    >
-      <smart-button slot="button" type="info" custom-class="button">{{I18n.t('sendVerificationCode')}}</smart-button>
-    </smart-field>
-  </smart-cell-group>
-</demo-block>
-
-
-<demo-block title="{{I18n.t('message')}}" >
-  <smart-field
-    value="{{ message }}"
-    label="{{I18n.t('matter')}}"
-    type="textarea"
-    placeholder="{{I18n.t('pleaseEnterAMessage')}}"
-    show-word-limit
-    maxlength="{{ 200 }}"
-  />
-</demo-block>

package/packages/field/index.json

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

package/packages/field/index.less

@@ -1,243 +0,0 @@
-@import '../common/style/var.less';
-
-.smart-field {
-  --cell-icon-size: var(--field-icon-size, @field-icon-size);
-
-  &__left__body {
-    display: flex;
-    align-items: center;
-    text-align: left;
-    padding-right: var(--field-left-body-padding-right, @field-left-body-padding-right);
-  }
-
-  &__left__body--disabled {
-    opacity: var(--field-disabled-opacity, @field-disabled-opacity);
-  }
-
-  &__label {
-    color: var(--field-label-color, @field-label-color);
-    text-align: left;
-    font-size: var(--field-label-font-size, @field-label-font-size);
-    line-height: var(--field-label-line-height, @field-label-line-height);
-
-    &--required {
-      color: var(--field-input-error-text-color, @field-input-error-text-color);
-    }
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__left__icon {
-    display: flex;
-    margin-right: var(--field-left-icon-margin-right, @field-left-icon-margin-right);
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__label__card__subtitle {
-    font-size: var(--field-sub-label-font-size, @field-sub-label-font-size);
-    line-height: var(--field-sub-label-line-height, @field-sub-label-line-height);
-    color: var(--field-subtitle-text-color, @field-subtitle-text-color);
-    margin-top: 4px;
-    &--error {
-      color: var(--field-error-message-color, @field-error-message-color);
-    }
-  }
-
-  &__body__box {
-    flex: 1;
-    &--disabled {
-      opacity: var(--field-disabled-opacity, @field-disabled-opacity);
-    }
-  }
-
-  &__body {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  &__control:empty + &__control {
-    display: block;
-  }
-
-  &__control {
-    position: relative;
-    display: none;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    line-height: inherit;
-    text-align: right;
-    background-color: transparent;
-    border: 0;
-    resize: none;
-    height: var(--cell-line-height, @cell-line-height);
-    min-height: var(--cell-line-height, @cell-line-height);
-    font-size: var(--field-input-text-font-size, @field-input-text-font-size);
-    color: var(--field-input-text-color, @field-input-text-color);
-
-    &:empty {
-      display: none;
-    }
-
-    &--textarea {
-      text-align: left;
-      height: var(--field-textarea-min-height, @field-textarea-min-height);
-      min-height: var(
-        --field-textarea-min-height,
-        @field-textarea-min-height
-      );
-      background-color: var(--field-textarea-background, @field-textarea-background);
-      border-radius: var(--field-textarea-border-radius, @field-textarea-border-radius);
-      padding: var(--field-textarea-padding, @field-textarea-padding);
-    }
-
-    &--card {
-      text-align: center;
-      border-radius: var(--field-card-border-radius, @field-card-border-radius);
-      background: var(--field-card-background, @field-card-background);
-      width: var(--field-card-width, @field-card-width);
-      height: var(--field-card-height, @field-card-height);
-      padding: var(--field-card-padding, @field-card-padding);
-    }
-
-    &--limit {
-      padding-bottom: var(--field-textarea-limit-padding-bottom, @field-textarea-limit-padding-bottom);
-    }
-
-    &--center {
-      text-align: center;
-    }
-
-    &--right {
-      text-align: right;
-    }
-
-    &--left {
-      text-align: left;
-    }
-
-    &--custom {
-      display: flex;
-      align-items: center;
-      min-height: var(--cell-line-height, @cell-line-height);
-    }
-
-    &--readonly {
-      position: relative;
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 10;
-      }
-    }
-  }
-
-  &__icon-root {
-    display: flex;
-    align-items: center;
-    min-height: var(--cell-line-height, @cell-line-height);
-  }
-
-  &__clear-root,
-  &__icon-container {
-    line-height: inherit;
-    vertical-align: middle;
-    padding: 0 var(--padding-xs, @padding-xs);
-    margin-right: calc(-1 * var(--padding-xs, @padding-xs));
-  }
-
-  &__clear-root,
-  &__icon-container,
-  &__button {
-    flex-shrink: 0;
-  }
-
-  &__clear-root {
-    font-size: var(--field-clear-icon-size, @field-clear-icon-size);
-
-    --icon-color: var(--field-clear-icon-color, @field-clear-icon-color);
-  }
-
-  &__icon-container {
-    --icon-color: var(--field-icon-container-color, @field-icon-container-color);
-
-    font-size: var(--field-icon-size, @field-icon-size);
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__button {
-    padding-left: var(--padding-xs, @padding-xs);
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  &__error-message {
-    display: block;
-    text-align: right;
-    font-weight: normal;
-    line-height: var(--field-error-message-text-line-height, @field-error-message-text-line-height);
-    font-size: var(
-      --field-error-message-text-font-size,
-      @field-error-message-text-font-size
-    );
-    word-wrap: break-word;
-    white-space: normal;
-    color: var(--field-error-message-color, @field-error-message-color);
-
-    &--center {
-      text-align: center;
-    }
-
-    &--right {
-      text-align: right;
-    }
-  }
-
-  &--textarea {
-    padding: 0 16px;
-
-    .smart-field__left__body {
-      margin-bottom: 8px;
-      width: 100%;
-    }
-    .smart-field__body__box {
-      position: relative;
-    }
-  }
-
-  &__word-limit {
-    text-align: right;
-    margin-top: var(--padding-base, @padding-base);
-    color: var(--field-word-limit-color, @field-word-limit-color);
-    font-size: var(--field-word-limit-font-size, @field-word-limit-font-size);
-    line-height: var(
-      --field-word-limit-line-height,
-      @field-word-limit-line-height
-    );
-    position: absolute;
-    right: 8px;
-    bottom: 8px;
-
-  }
-
-  &__word-num {
-    display: inline;
-
-    &--full {
-      color: var(--field-word-num-full-color, @field-word-num-full-color);
-    }
-  }
-}

package/packages/field/index.ts

@@ -1,226 +0,0 @@
-import { nextTick } from '../common/utils';
-import { SmartComponent } from '../common/component';
-import { commonProps, inputProps, textareaProps } from './props';
-import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
-import { InputDetails } from './types';
-
-SmartComponent({
-  field: true,
-
-  classes: ['input-class', 'right-icon-class', 'label-class'],
-
-  props: {
-    ...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: {
-      type: String,
-    },
-    subLabel: String,
-    cardMode: Boolean,
-    iconClass: String,
-    clickable: Boolean,
-    customStyle: String,
-    errorMessage: String,
-    arrowDirection: String,
-    showWordLimit: Boolean,
-    errorMessageAlign: String,
-    hiddenLabel: Boolean,
-    readonly: {
-      type: Boolean,
-      observer: 'setShowClear',
-    },
-    clearable: {
-      type: Boolean,
-      observer: 'setShowClear',
-    },
-    clearTrigger: {
-      type: String,
-      value: 'focus',
-    },
-    border: {
-      type: Boolean,
-      value: false,
-    },
-    titleWidth: {
-      type: String,
-      value: '6.2em',
-    },
-    clearIcon: {
-      type: String,
-      value: Xmark,
-    },
-    extraEventParams: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  data: {
-    focused: false,
-    innerValue: '',
-    showClear: false,
-  },
-
-  watch: {
-    value(this: WechatMiniprogram.Component.TrivialInstance, value) {
-      if (value !== this.value) {
-        this.setData({ innerValue: value });
-        this.value = value;
-
-        this.setShowClear();
-      }
-    },
-    clearTrigger() {
-      this.setShowClear();
-    },
-  },
-
-  created() {
-    this.value = this.data.value;
-    this.setData({ innerValue: this.value });
-  },
-
-  methods: {
-    formatValue(value: string) {
-      const { maxlength } = this.data;
-
-      if (maxlength !== -1 && value.length > maxlength) {
-        return value.slice(0, maxlength);
-      }
-
-      return value;
-    },
-
-    onInput(event: WechatMiniprogram.Input | WechatMiniprogram.TextareaInput) {
-      const { value = '' } = event.detail || {};
-
-      const formatValue = this.formatValue(value);
-
-      this.value = formatValue;
-
-      this.setShowClear();
-
-      return this.emitChange({
-        ...event.detail,
-        value: formatValue,
-      });
-    },
-
-    onFocus(event: WechatMiniprogram.InputFocus | WechatMiniprogram.TextareaFocus) {
-      this.focused = true;
-      this.setShowClear();
-      this.$emit('focus', event.detail);
-    },
-
-    onBlur(event: WechatMiniprogram.InputBlur | WechatMiniprogram.TextareaBlur) {
-      this.focused = false;
-      this.setShowClear();
-      this.$emit('blur', event.detail);
-    },
-
-    onClickIcon() {
-      this.$emit('click-icon');
-    },
-
-    onClickInput(event: WechatMiniprogram.TouchEvent) {
-      this.$emit('click-input', event.detail);
-    },
-
-    onClear() {
-      this.setData({ innerValue: '' });
-      this.value = '';
-      this.setShowClear();
-
-      nextTick(() => {
-        this.emitChange({ value: '' });
-        this.$emit('clear', '');
-      });
-    },
-
-    onConfirm(event: WechatMiniprogram.InputConfirm | WechatMiniprogram.TextareaConfirm) {
-      const { value = '' } = event.detail || {};
-      this.value = value;
-      this.setShowClear();
-      this.$emit('confirm', value);
-    },
-
-    setValue(value: string) {
-      this.value = value;
-      this.setShowClear();
-
-      if (value === '') {
-        this.setData({ innerValue: '' });
-      }
-
-      this.emitChange({ value });
-    },
-
-    onLineChange(event: WechatMiniprogram.TextareaLineChange) {
-      this.$emit('linechange', event.detail);
-    },
-
-    onKeyboardHeightChange(
-      event:
-        | WechatMiniprogram.InputKeyboardHeightChange
-        | WechatMiniprogram.TextareaKeyboardHeightChange
-    ) {
-      this.$emit('keyboardheightchange', event.detail);
-    },
-
-    onBindNicknameReview(event) {
-      this.$emit('nicknamereview', event.detail);
-    },
-
-    emitChange(detail: InputDetails) {
-      const { extraEventParams } = this.data;
-
-      this.setData({ value: detail.value });
-
-      let result: InputDetails | undefined;
-
-      const data = extraEventParams
-        ? {
-            ...detail,
-            callback: (data: InputDetails) => {
-              result = data;
-            },
-          }
-        : detail.value;
-
-      this.$emit('input', data);
-      this.$emit('change', data);
-
-      return result;
-    },
-
-    setShowClear() {
-      const { clearable, readonly, clearTrigger } = this.data;
-      const { focused, value } = this;
-
-      let showClear = false;
-
-      if (clearable && !readonly) {
-        const hasValue = !!value;
-        const trigger = clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
-
-        showClear = hasValue && trigger;
-      }
-
-      this.setView({ showClear });
-    },
-
-    noop() {},
-  },
-});

package/packages/field/index.wxml

@@ -1,4 +0,0 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="computed" />
-<include wx:if="{{ type === 'textarea' }}" src="./cell-textarea.wxml" />
-<include wx:else src="./cell-input.wxml" />

package/packages/field/index.wxs

@@ -1,18 +0,0 @@
-/* eslint-disable */
-var style = require('../wxs/style.wxs');
-var addUnit = require('../wxs/add-unit.wxs');
-
-function inputStyle(autosize) {
-  if (autosize && autosize.constructor === 'Object') {
-    return style({
-      'min-height': addUnit(autosize.minHeight),
-      'max-height': addUnit(autosize.maxHeight),
-    });
-  }
-
-  return '';
-}
-
-module.exports = {
-  inputStyle: inputStyle,
-};

package/packages/field/input.wxml

@@ -1,30 +0,0 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-<input
-  id="{{ name }}"
-  class="{{ utils.bem('field__control', [inputAlign, type, { card: cardMode, readonly }]) }} input-class"
-  type="{{ type }}"
-  focus="{{ focus }}"
-  cursor="{{ cursor }}"
-  value="{{ innerValue }}"
-  auto-focus="{{ autoFocus }}"
-  disabled="{{ disabled }}"
-  maxlength="{{ maxlength }}"
-  placeholder="{{ !interError ? placeholder : errorMessage || placeholder }}"
-  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 }}"
-  confirm-type="{{ confirmType }}"
-  confirm-hold="{{ confirmHold }}"
-  hold-keyboard="{{ holdKeyboard }}"
-  cursor-spacing="{{ cursorSpacing }}"
-  adjust-position="{{ adjustPosition }}"
-  selection-end="{{ selectionEnd }}"
-  selection-start="{{ selectionStart }}"
-  always-embed="{{ alwaysEmbed }}"
-  password="{{ password || type === 'password' }}"
-  bindinput="onInput"
-  bindtap="onClickInput"
-  bindblur="onBlur"
-  bindfocus="onFocus"
-  bindconfirm="onConfirm"
-  bindkeyboardheightchange="onKeyboardHeightChange"
-  bindnicknamereview="onBindNicknameReview"
-/>