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

package/packages/radio/demo/index.wxml

@@ -1,136 +0,0 @@
-<demo-block title="{{I18n.t('basicUsage')}}">
-  <smart-radio-group
-    value="{{ radioBasic }}"
-    data-key="radioBasic"
-    bind:change="onChange"
-  >
-    <smart-radio name="1" custom-class="demo-radio-inline" />
-    <smart-radio name="2" custom-class="demo-radio-inline" />
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('disabledStatus')}}">
-  <smart-radio-group
-    disabled
-    value="{{ radioDisabled }}"
-    data-key="radioDisabled"
-    bind:change="onChange"
-  >
-    <smart-radio name="1" custom-class="demo-radio-inline" />
-    <smart-radio name="2" custom-class="demo-radio-inline" />
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('customShape')}}">
-  <smart-radio-group
-    value="{{ radioShape }}"
-    data-key="radioShape"
-    bind:change="onChange"
-  >
-    <smart-radio name="1" shape="square" custom-class="demo-radio-inline" />
-    <smart-radio name="2" shape="square" custom-class="demo-radio-inline" />
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('customColor')}}">
-  <smart-radio-group
-    value="{{ radioColor }}"
-    data-key="radioColor"
-    bind:change="onChange"
-  >
-    <smart-radio name="1" custom-class="demo-radio-inline" checked-color="#10D0D0" />
-    <smart-radio name="2" custom-class="demo-radio-inline" checked-color="#10D0D0" />
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('customSize')}}">
-  <smart-radio-group
-    value="{{ radioSize }}"
-    data-key="radioSize"
-    bind:change="onChange"
-  >
-    <smart-radio name="1" icon-size="28px" custom-class="demo-radio-inline" />
-    <smart-radio name="2" icon-size="28px" custom-class="demo-radio-inline" />
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('customText')}}">
-  <smart-radio-group
-    value="{{ radioText }}"
-    data-key="radioText"
-    bind:change="onChange"
-  >
-    <smart-radio name="1" custom-class="demo-radio">{{I18n.t('radioButton')}} 1</smart-radio>
-    <smart-radio name="2" custom-class="demo-radio">{{I18n.t('radioButton')}} 2</smart-radio>
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('horizontalArrangement')}}">
-  <smart-radio-group
-    value="{{ radioHoriz }}"
-    data-key="radioHoriz"
-    bind:change="onChange"
-    direction="horizontal"
-  >
-    <smart-radio name="1" custom-class="demo-radio">{{I18n.t('radioButton')}} 1</smart-radio>
-    <smart-radio name="2" custom-class="demo-radio">{{I18n.t('radioButton')}} 2</smart-radio>
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('customIcons')}}">
-  <smart-radio-group
-    value="{{ radioIcon }}"
-    data-key="radioIcon"
-    bind:change="onChange"
-  >
-    <smart-radio use-icon-slot name="1" custom-class="demo-radio">
-      {{I18n.t('customIcons')}}
-      <image
-        slot="icon"
-        src="{{ radioIcon === '1' ? icon.active : icon.normal }}"
-        class="icon"
-        mode="widthFix"
-      ></image>
-    </smart-radio>
-    <smart-radio use-icon-slot name="2" custom-class="demo-radio">
-      {{I18n.t('customIcons')}}
-      <image
-        slot="icon"
-        src="{{ radioIcon === '2' ? icon.active : icon.normal }}"
-        class="icon"
-        mode="widthFix"
-      ></image>
-    </smart-radio>
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('disableTextClick')}}">
-  <smart-radio-group
-    value="{{ radioLabel }}"
-    data-key="radioLabel"
-    bind:change="onChange"
-  >
-    <smart-radio label-disabled name="1" custom-class="demo-radio">{{I18n.t('radioButton')}} 1</smart-radio>
-    <smart-radio label-disabled name="2" custom-class="demo-radio">{{I18n.t('radioButton')}} 2</smart-radio>
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('useWithTheCellComponent')}}">
-  <smart-radio-group value="{{ radioCell }}">
-    <smart-cell-group>
-      <smart-cell title="{{I18n.t('radioButton')}} 1" clickable data-name="1" bind:click="onClick">
-        <smart-radio slot="right-icon" name="1"></smart-radio>
-      </smart-cell>
-      <smart-cell title="{{I18n.t('radioButton')}} 2" clickable data-name="2" bind:click="onClick">
-        <smart-radio slot="right-icon" name="2"></smart-radio>
-      </smart-cell>
-    </smart-cell-group>
-  </smart-radio-group>
-</demo-block>
-
-<demo-block title="{{I18n.t('preventDefaultUIUpdate')}}">
-  <smart-radio-group preventDefault value="{{ radioPreventDefault }}" bind:change="onPreventDefaultChange">
-    <smart-radio name="1">1</smart-radio>
-    <smart-radio name="2">2</smart-radio>
-  </smart-radio-group>
-</demo-block>

package/packages/radio/index.json

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

package/packages/radio/index.less

@@ -1,73 +0,0 @@
-@import '../common/style/var.less';
-
-.smart-radio {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  user-select: none;
-
-  &__icon-wrap {
-    display: flex;
-    flex: none;
-  }
-
-  &--horizontal {
-    margin-right: var(--padding-sm, @padding-sm);
-  }
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: 1em;
-    height: 1em;
-    color: transparent;
-    text-align: center;
-    transition-property: color, border, background-color;
-    border: 2px solid var(--radio-border-color, @radio-border-color);
-    font-size: var(--radio-size, @radio-size);
-    transition-duration: var(
-      --radio-transition-duration,
-      @radio-transition-duration
-    );
-    border-radius: var(--radio-border-radius, @radio-border-radius);
-
-    &--round {
-      border-radius: 100%;
-    }
-
-    &--checked {
-      color: @white;
-      background-color: var(
-        --radio-checked-icon-color,
-        @radio-checked-icon-color
-      );
-      border-color: var(--radio-checked-icon-color, @radio-checked-icon-color);
-    }
-
-    &--disabled {
-      opacity: @radio-disabled-opacity;
-    }
-  }
-
-  &__label {
-    font-size: var(--radio-label-size, @radio-label-size);
-    word-wrap: break-word;
-    padding-left: var(--radio-label-margin, @radio-label-margin);
-    color: var(--radio-label-color, @radio-label-color);
-
-    &--left {
-      float: left;
-      margin: 0 var(--radio-label-margin, @radio-label-margin) 0 0;
-    }
-
-    &--disabled {
-      color: var(--radio-disabled-label-color, @radio-disabled-label-color);
-    }
-
-    &:empty {
-      margin: 0;
-    }
-  }
-}

package/packages/radio/index.ts

@@ -1,82 +0,0 @@
-import CheckIcon from '@tuya-miniapp/icons/dist/svg/Check';
-import { canIUseModel } from '../common/version';
-import { SmartComponent } from '../common/component';
-import { useParent } from '../common/relation';
-
-SmartComponent({
-  field: true,
-
-  relation: 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: CheckIcon,
-    preventDefault: false,
-  },
-
-  methods: {
-    updateFromParent() {
-      if (!this.parent) {
-        return;
-      }
-
-      const { value, disabled: parentDisabled, direction, preventDefault } = this.parent.data;
-
-      this.setData({
-        value,
-        direction,
-        parentDisabled,
-        preventDefault,
-      });
-    },
-
-    emitChange(value: boolean) {
-      const instance = this.parent || this;
-      instance.$emit('input', value);
-      instance.$emit('change', value);
-
-      if (canIUseModel() && !this.properties.preventDefault) {
-        instance.setData({ value });
-      }
-    },
-
-    onChange() {
-      if (!this.data.disabled && !this.data.parentDisabled) {
-        this.emitChange(this.data.name);
-      }
-    },
-
-    onClickLabel() {
-      const { disabled, parentDisabled, labelDisabled, name } = this.data;
-      if (!(disabled || parentDisabled) && !labelDisabled) {
-        this.emitChange(name);
-      }
-    },
-  },
-});

package/packages/radio/index.wxml

@@ -1,32 +0,0 @@
-<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/packages/radio/index.wxs

@@ -1,33 +0,0 @@
-/* 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,
-};