@cloudbase/weda-ui 3.5.0 → 3.5.2-mp

package/components/wd-image/wd-image.wxss

@@ -0,0 +1,80 @@
+.wd-image-mask,
+.wd-image {
+  --wd-image-mask-pc: var(--wd-bg-mask);
+  --wd-image-mask-h5: var(--wd-black);
+  --wd-image-close-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTUuOTk5NTkgNy4zNzg4NEwxMC42MTM0IDExLjk5MjdMMTEuOTkyMyAxMC42MTM4TDcuMzc4NDQgNS45OTk5OEwxMS45OTIzIDEuMzg2MTNMMTAuNjEzNCAwLjAwNzI3MjYyTDUuOTk5NTkgNC42MjExMkwxLjM4NTY5IDAuMDA3MjMyNjdMMC4wMDY4MzU5NCAxLjM4NjA5TDQuNjIwNzMgNS45OTk5OEwwLjAwNjgzNTk0IDEwLjYxMzlMMS4zODU2OSAxMS45OTI3TDUuOTk5NTkgNy4zNzg4NFoiIGZpbGw9IiNFRUVFRUUiLz4KPC9zdmc+");
+  --wd-image-error-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE4MSIgdmlld0JveD0iMCAwIDE4MCAxODEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxODAiIGhlaWdodD0iMTgwLjAwMiIgZmlsbD0iI0UzRTZFQiIvPgo8cGF0aCBkPSJNNjYgNjkuNjIwNUM2NiA2Ny42MjEgNjcuNjIxIDY2IDY5LjYyMDUgNjZIMTEwLjM4QzExMi4zNzkgNjYgMTE0IDY3LjYyMSAxMTQgNjkuNjIwNVYxMTAuMzhDMTE0IDExMi4zNzkgMTEyLjM3OSAxMTQgMTEwLjM4IDExNEg2OS42MjA1QzY3LjYyMSAxMTQgNjYgMTEyLjM3OSA2NiAxMTAuMzhWNjkuNjIwNVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik02NiA2OS41NTU2QzY2IDY3LjU5MTkgNjcuNTkxOSA2NiA2OS41NTU2IDY2SDExMC40NDRDMTEyLjQwOCA2NiAxMTQgNjcuNTkxOSAxMTQgNjkuNTU1NlYxMTAuNDQ0QzExNCAxMTIuNDA4IDExMi40MDggMTE0IDExMC40NDQgMTE0SDY5LjU1NTZDNjcuNTkxOSAxMTQgNjYgMTEyLjQwOCA2NiAxMTAuNDQ0VjY5LjU1NTZaIiBmaWxsPSIjQkNDNEQwIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAwLjY2NiA4MS45OTk5QzEwMC42NjYgODMuNDcyNyA5OS40NzE5IDg0LjY2NjYgOTcuOTk5MiA4NC42NjY2Qzk2LjUyNjQgODQuNjY2NiA5NS4zMzI1IDgzLjQ3MjcgOTUuMzMyNSA4MS45OTk5Qzk1LjMzMjUgODAuNTI3MiA5Ni41MjY0IDc5LjMzMzMgOTcuOTk5MiA3OS4zMzMzQzk5LjQ3MTkgNzkuMzMzMyAxMDAuNjY2IDgwLjUyNzIgMTAwLjY2NiA4MS45OTk5Wk04Ny4wMTk5IDg2LjIxMTlDODYuNDU5OCA4NS41NDEyIDg1LjM4OTcgODUuNTgwOCA4NC44ODk4IDg2LjMzMDdMODQuMjIxNyA4Ny4zMzI4TDg4LjkwODQgOTQuNDI5N0M4OS40MjU2IDk1LjIxMyA4OS4yNDQ4IDk2LjI2MzUgODguNDk1NCA5Ni44Mjg3TDg0LjU1MjYgOTkuODAyNEw4NS4yNjU5IDEwMC42NjdIOTYuNjUzNEw4Ny4wMTk5IDg2LjIxMTlaTTgwLjY1NTUgMTAwLjY2N0w4MC42MjggMTAwLjYzM0M4MC4zMTkyIDEwMC4yNTkgODAuMTc2NyA5OS43NzUzIDgwLjIzMzUgOTkuMjkzNkM4MC4yOTAyIDk4LjgxMTkgODAuNTQxMyA5OC4zNzQzIDgwLjkyODUgOTguMDgyMkw4NS4wMjEyIDk0Ljk5NTZMODIuMDgxMiA5MC41NDM2TDc2LjcxNDUgOTguNTkzN0M3Ni4xMjM3IDk5LjQ3OTcgNzYuNzU4OSAxMDAuNjY3IDc3LjgyMzkgMTAwLjY2N0g4MC42NTU1Wk05OS4wNTY5IDEwMC42NjdMOTUuMTk1MyA5NC44NzI0TDk2Ljg4OTggOTIuMzMwN0M5Ny40MTc1IDkxLjUzOSA5OC41ODA4IDkxLjUzOSA5OS4xMDg2IDkyLjMzMDdMMTAzLjI4NCA5OC41OTM3QzEwMy44NzUgOTkuNDc5NyAxMDMuMjM5IDEwMC42NjcgMTAyLjE3NCAxMDAuNjY3SDk5LjA1NjlaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+}
+
+.wd-image {
+  max-width: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .wd-image {
+    width: 11.25rem;
+    height: 11.25rem;
+  }
+}
+.wd-image-preview {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.wd-image-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--wd-image-mask-pc);
+  z-index: 1001;
+}
+
+@media screen and (max-width: 768px) {
+  .wd-image-mask {
+    background-color: var(--wd-image-mask-h5);
+  }
+}
+.wd-image-mask__icon-close {
+  width: var(--wd-size-icon-md);
+  height: var(--wd-size-icon-md);
+  display: inline-block;
+  background-image: var(--wd-image-close-icon);
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.wd-image-mask__close-btn {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  display: inline-block;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.wd-image.wd-image__error,
+.wd-image:not([src]) {
+  position: relative;
+  display: inline-block;
+  width: 11.25rem;
+  height: 11.25rem;
+}
+
+.wd-image:not([src]):before,
+.wd-image__error::before {
+  content: "";
+  background: rgb(227, 230, 235) var(--wd-image-error-image) no-repeat center/100% 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

package/components/wd-input/index.js

@@ -0,0 +1,62 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+
+/**
+ * 标准化：单行输入
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'input',
+    },
+    template: {
+      type: String,
+      value: '',
+    },
+    isConvert: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  methods: {
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+  lifetimes: {
+    attached: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-input/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "inner-input": "./inner-input/index"
+  }
+}

package/components/wd-input/index.wxml

@@ -0,0 +1,57 @@
+<inner-input
+  id="{{id}}"
+  className="{{className}}"
+  style="{{style}}"
+  name="{{name}}"
+  inputValue="{{inputValue}}"
+  placeholder="{{placeholder}}"
+  size="{{size}}"
+  block="{{block}}"
+  label="{{label}}"
+  layout="{{actualLayout}}"
+  labelVisible="{{labelVisible}}"
+  labelAlign="{{labelAlign}}"
+  labelWrap="{{labelWrap}}"
+  labelWidth="{{labelWidth}}"
+  labelTips="{{labelTips}}"
+  clearable="{{clearable}}"
+  before="{{before}}"
+  after="{{after}}"
+  isUnionValue="{{isUnionValue}}"
+  prefixType="{{prefixType}}"
+  prefixIcon="{{prefixIcon}}"
+  prefixSrc="{{prefixSrc}}"
+  suffixType="{{suffixType}}"
+  suffixIcon="{{suffixIcon}}"
+  suffixSrc="{{suffixSrc}}"
+  extra="{{extra}}"
+  password="{{password}}"
+  type="{{type}}"
+  counterVisible="{{counterVisible}}"
+  focus="{{focus}}"
+  borderedH5="{{borderedH5}}"
+  borderedPc="{{borderedPc}}"
+  isNickNameType="{{isNickNameType}}"
+  maxLength="{{maxLength}}"
+  rules="{{rules}}"
+  status="{{status}}"
+  required="{{required}}"
+  requiredFlag="{{requiredFlag}}"
+  requiredMsg="{{requiredMsg}}"
+  bind:focus="handleEvent"
+  bind:blur="handleEvent"
+  bind:change="handleEvent"
+  bind:clear="handleEvent"
+  bind:confirm="handleEvent"
+  bind:changeForm="changeForm"
+  classRoot="{{classRoot}}"
+  visible="{{visible}}"
+  validateState="{{validateState}}"
+  validateErrorMsg="{{validateErrorMsg}}"
+  disabled="{{disabled}}"
+  readOnly="{{readOnly}}"
+  value="{{value}}"
+  template="{{template}}"
+  cursorSpacing="{{cursorSpacing}}"
+  isConvert="{{isConvert}}"
+></inner-input>

package/components/wd-input/inner-input/index.js

@@ -0,0 +1,202 @@
+import itemBehavior from '../../form-field-behavior/item-behavior';
+import { WD_PREFIX } from '../../../utils/constant';
+import {
+  converValueFix,
+  convertSize,
+  converInputValue,
+  convertIconSize,
+} from '../../../utils/getFormLegacy';
+import classNames from '../../../utils/classnames';
+import equal from '../../../utils/deepEqual';
+
+/**
+ * 可复用的输入组件
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior],
+  properties: {
+    visible: {
+      type: Boolean,
+      value: true,
+    },
+    template: {
+      type: String,
+      value: '',
+    },
+    isConvert: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    root: '',
+    classPrefix: WD_PREFIX,
+    inputWrap: `${WD_PREFIX}-form-input-wrap`,
+    inputCls: `${WD_PREFIX}-form-input-wrap__input`,
+    placeholderCls: `${WD_PREFIX}-form-input-wrap__placeholder weui-input__placeholder`,
+    cls: '',
+    currentInputValue: '',
+    hasClearIcon: false,
+    isFocus: false,
+    counter: 0,
+
+    iconSize: 'xxs',
+    _size: 'md',
+    _oldValue: null,
+    _oldInputValue: null,
+  },
+  methods: {
+    convertDetail: function (e) {
+      const {
+        before,
+        after,
+        type,
+        isUnionValue,
+        isConvert = true,
+      } = this.properties;
+      const value = converValueFix(
+        e.detail.value,
+        before,
+        after,
+        type,
+        isUnionValue,
+        isConvert
+      );
+      return { ...e.detail, value };
+    },
+    handleFocus: function (e) {
+      const detail = this.convertDetail(e);
+      this.triggerEvent('focus', detail);
+      this.setData({ isFocus: true });
+    },
+    handleBlur: function (e) {
+      const detail = this.convertDetail(e);
+      this.triggerEvent('blur', detail);
+      this.setData({ isFocus: false });
+    },
+    handleChange: function (e) {
+      const currentInputValue = e.detail.value;
+      const detail = this.convertDetail(e);
+      this.setData({ currentInputValue });
+      this.changeForm(detail);
+      this.triggerEvent('change', detail);
+    },
+    handleClear: function (e) {
+      const detail = this.convertDetail(e);
+      this.changeForm(detail);
+      this.triggerEvent('clear', detail);
+      this.triggerEvent('change', detail);
+      this.setData({ currentInputValue: '' });
+    },
+    handleConfirm: function (e) {
+      const detail = this.convertDetail(e);
+      this.triggerEvent('confirm', detail);
+    },
+    changeForm: function (detail) {
+      this.data._oldValue = detail.value;
+      this.triggerEvent('changeForm', detail);
+    },
+    changeInput: function () {
+      const {
+        inputValue,
+        before,
+        after,
+        type,
+        isUnionValue,
+        isConvert = true,
+      } = this.properties;
+      const value = converValueFix(
+        inputValue,
+        before,
+        after,
+        type,
+        isUnionValue,
+        isConvert
+      );
+      this.setData({ currentInputValue: inputValue });
+      this.changeForm({ value });
+      this.data._oldInputValue = inputValue;
+    },
+  },
+  observers: {
+    'disabled,clearable,isFocus,currentInputValue': function (
+      disabled,
+      clearable,
+      isFocus,
+      currentInputValue
+    ) {
+      const hasClearIcon =
+        clearable && isFocus && !disabled && currentInputValue?.length > 0;
+      const counter =
+        typeof currentInputValue === 'string' ? currentInputValue.length : 0;
+      this.setData({ hasClearIcon, counter });
+    },
+    'disabled,size,classRoot,wrapClassName,before,after': function (
+      disabled,
+      size,
+      classRoot,
+      wrapClassName,
+      before,
+      after
+    ) {
+      const _size = convertSize(size);
+      const iconSize = convertIconSize(_size);
+      const { classPrefix, inputWrap } = this.data;
+      const root = `${classPrefix}-${classRoot}`;
+      const cls = classNames(
+        inputWrap,
+        wrapClassName,
+        `size-width-${_size}`,
+        `size-font-${_size}`,
+        `size-height-${_size}`,
+        `${root}-${classRoot}`,
+        `${classPrefix}-form-inherit--font`,
+        {
+          'size-width-hundred': true,
+          'is-disabled': disabled,
+          [`${inputWrap}--no-radius-left`]: before,
+          [`${inputWrap}--no-radius-right`]: after,
+          [`${inputWrap}--no-radius`]: before && after,
+        }
+      );
+      const countCls = `${classPrefix}-input__limit-number`;
+
+      this.setData({ cls, root, countCls, _size, iconSize });
+    },
+    inputValue: function (inputValue) {
+      if (equal(inputValue, this.data._oldInputValue)) return;
+      this.changeInput();
+    },
+    'before,after,isUnionValue': function (before, after, isUnionValue) {
+      const value = converValueFix(
+        this.data.currentInputValue,
+        before,
+        after,
+        this.properties.type,
+        isUnionValue,
+        this.properties.isConvert
+      );
+      this.changeForm({ value });
+    },
+    // 监听非输入引起的value变化，比如调用 setValue, clearValue
+    value: function (value) {
+      if (equal(this.data._oldValue, value)) return;
+      const { before, after, isUnionValue } = this.properties;
+      const currentInputValue = converInputValue(
+        value,
+        before,
+        after,
+        isUnionValue
+      );
+      this.setData({ currentInputValue });
+      this.data._oldValue = value;
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.data._oldValue = this.properties.value;
+      this.changeInput();
+    },
+  },
+});

package/components/wd-input/inner-input/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../../wd-form-item/index",
+    "wd-input-group": "../../wd-input-group/index",
+    "wd-icon": "../../wd-icon/index"
+  }
+}

package/components/wd-input/inner-input/index.wxml

@@ -0,0 +1,79 @@
+<block wx:if="{{visible}}">
+  <wd-form-item
+    id="{{id}}"
+    className="{{className}}"
+    style="{{style}}"
+    label="{{label}}"
+    labelVisible="{{labelVisible}}"
+    labelTips="{{labelTips}}"
+    labelWidth="{{labelWidth}}"
+    labelAlign="{{labelAlign}}"
+    labelWrap="{{labelWrap}}"
+    layout="{{layout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    readOnly="{{readOnly}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    readValue="{{value}}"
+    classRoot="{{classRoot}}"
+    size="{{_size}}"
+    borderedH5="{{borderedH5}}"
+    before="{{before}}"
+    after="{{after}}"
+    readBeforeAfter="{{!isUnionValue}}"
+  >
+    <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}">
+      <view class="{{cls}} {{template === 'greySearchBox'?'wd-input-input-search template search-box color-grey is-pc-bordered is-h5-borderless':''}} {{template === 'whiteSearchBox'?'wd-input-input-search template search-box color-white is-pc-bordered is-h5-borderless':''}}">
+        <!-- 前缀图标 -->
+        <block wx:if="{{prefixType}}">
+          <view class="{{inputWrap}}__before">
+            <wd-icon name="{{prefixIcon}}" type="{{prefixType}}" src="{{prefixSrc}}" size="{{iconSize}}" className="{{root}}__icon-before"></wd-icon>
+          </view>
+        </block>
+
+        <!-- 输入框 -->
+        <view class="{{inputWrap}}__content">
+          <input
+            class="{{inputCls}}"
+            placeholder-class="{{placeholderCls}}"
+            type="{{isNickNameType?'nickname':type}}"
+            placeholder="{{placeholder}}"
+            value="{{currentInputValue}}"
+            disabled="{{disabled}}"
+            name="{{name}}"
+            auto-focus="{{focus}}"
+            focus="{{focus}}"
+            password="{{password}}"
+            maxlength="{{maxLength}}"
+            cursor-spacing="{{cursorSpacing}}"
+            bind:input="handleChange"
+            bind:focus="handleFocus"
+            bind:blur="handleBlur"
+            bind:confirm="handleConfirm"
+          />
+        </view>
+
+        <!-- 清除按钮 -->
+        <block wx:if="{{hasClearIcon}}">
+          <view class="{{inputWrap}}__after">
+            <wd-icon className="{{classPrefix}}-icon__trigger" name="td:close-circle-filled" size="{{iconSize}}" bind:touchstart="handleClear"></wd-icon>
+          </view>
+        </block>
+
+        <!-- 后缀图标 -->
+        <block wx:if="{{!hasClearIcon && suffixType}}">
+          <view class="{{inputWrap}}__after">
+            <wd-icon name="{{suffixIcon}}" type="{{suffixType}}" src="{{suffixSrc}}" size="{{iconSize}}" className="{{root}}__icon-after"></wd-icon>
+          </view>
+        </block>
+
+        <!-- 字数 -->
+        <block wx:if="{{counterVisible}}">
+          <label class="{{countCls}}">{{counter}}/{{maxLength}}</label>
+        </block>
+      </view>
+    </wd-input-group>
+  </wd-form-item>
+</block>

package/components/wd-input/inner-input/index.wxss

@@ -0,0 +1,2 @@
+@import '../../../style/wd-design.wxss';
+@import './wd-input.wxss';