@cloudbase/weda-ui-mp 3.6.0

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

@@ -0,0 +1,63 @@
+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-email',
+    },
+    rules: {
+      type: Array,
+      value: [
+        {
+          format: 'email',
+          message: '邮箱校验失败',
+        },
+      ],
+    },
+  },
+  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-email/index.json

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

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

@@ -0,0 +1,55 @@
+<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="{{false}}"
+  type="text"
+  counterVisible="{{counterVisible}}"
+  focus="{{focus}}"
+  borderedH5="{{borderedH5}}"
+  borderedPc="{{borderedPc}}"
+  isNickNameType="{{false}}"
+  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}}"
+  cursorSpacing="{{cursorSpacing}}"
+></inner-input>

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

@@ -0,0 +1,57 @@
+import classNames from '../../utils/classnames';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    before: {
+      type: String,
+      value: '',
+    },
+    after: {
+      type: String,
+      value: '',
+    },
+    classRoot: {
+      type: String,
+      value: '',
+    },
+    size: {
+      type: String,
+      value: '',
+    },
+    // 传入的class
+    className: {
+      type: String,
+      value: '',
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    inputGroup: `${WD_PREFIX}-form-input-group`,
+    inputGroupCls: '',
+    root: '',
+  },
+  observers: {
+    'classRoot,size, className': function (classRoot, size, className) {
+      const { classPrefix, inputGroup } = this.data;
+      const root = `${classPrefix}-${classRoot}`;
+      const inputGroupCls = classNames(
+        inputGroup,
+        `size-height-${size}`,
+        className,
+        {
+          'size-width-hundred': true,
+        }
+      );
+
+      this.setData({ inputGroupCls, root });
+    },
+  },
+});

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

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

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

@@ -0,0 +1,16 @@
+<block wx:if="{{!readOnly && (!!before || !!after)}}">
+  <view class="{{inputGroupCls}}">
+    <block wx:if="{{before}}">
+      <view class="{{inputGroup}}__addon {{inputGroup}}__addon-left {{root}}__text-before">{{before}}</view>
+    </block>
+    <view class="{{inputGroup}}__content">
+      <slot></slot>
+    </view>
+    <block wx:if="{{after}}">
+      <view class="{{inputGroup}}__addon {{inputGroup}}__addon-right {{root}}__text-after">{{after}}</view>
+    </block>
+  </view>
+</block>
+<block wx:else>
+  <slot></slot>
+</block>

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

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

package/components/wd-input-group/wd-input-group.wxss

@@ -0,0 +1,99 @@
+.wd-form-input-group {
+  --wd-form-input-group-border-radius: var(--wd-border-radius);
+  --wd-form-input-group-text-default: var(--wd-color-text-form-default);
+  --wd-form-input-group-text-hover: var(--wd-color-text-form-default);
+  --wd-form-input-group-text-focus: var(--wd-color-text-form-default);
+  --wd-form-input-group-text-disabled: var(--wd-color-text-form-disabled);
+  --wd-form-input-group-bg-default: var(--wd-color-bg-form-default);
+  --wd-form-input-group-bg-hover: var(--wd-color-bg-form-default);
+  --wd-form-input-group-bg-focus: var(--wd-color-bg-form-default);
+  --wd-form-input-group-bg-disabled: var(--wd-color-bg-form-disabled);
+  --wd-form-input-group-border-default: var(--wd-color-border-form-default);
+  --wd-form-input-group-border-hover: var(--wd-color-brand);
+  --wd-form-input-group-border-focus: var(--wd-color-brand-focus);
+  --wd-form-input-group-border-disabled: var(--wd-color-border-form-disabled);
+  --wd-form-input-group-height-sm: var(--wd-form-item-height-sm);
+  --wd-form-input-group-height-md: var(--wd-form-item-height-md);
+  --wd-form-input-group-height-lg: var(--wd-form-item-height-lg);
+  --wd-form-input-group-width-sm: var(--wd-form-width-sm);
+  --wd-form-input-group-width-md: var(--wd-form-width-md);
+  --wd-form-input-group-width-lg: var(--wd-form-width-lg);
+  --wd-form-input-addon-padding: 0.3125rem 0.5rem;
+  --wd-form-input-addon-bg: var(--wd-color-gray-1);
+  --wd-form-input-addon-border-default: var(
+    --wd-color-gray-4
+  );
+}
+
+.wd-form-input-group {
+  color: var(--wd-color-text-default);
+  font-size: var(--wd-font-size-default);
+  line-height: var(--wd-font-line-height-default);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  width: var(--wd-form-input-group-width-md);
+  height: var(--wd-form-input-group-height-md);
+}
+.wd-form-input-group__addon {
+  flex: none;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--wd-form-input-addon-padding);
+  background: var(--wd-form-input-addon-bg);
+  border: 1px solid var(--wd-form-input-addon-border-default);
+}
+.wd-form-input-group__addon-left {
+  margin-right: -1px;
+  border-radius: var(--wd-form-input-group-border-radius) 0 0 var(--wd-form-input-group-border-radius);
+}
+.wd-form-input-group__addon-right {
+  border-width: 1px 1px 1px 0;
+  border-radius: 0 var(--wd-form-input-group-border-radius) var(--wd-form-input-group-border-radius) 0;
+}
+.wd-form-input-group .wd-form-input-wrap {
+  width: 100%;
+  height: 100%;
+}
+.wd-form-input-group__content {
+  flex: 1 1 0px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.wd-form-input-group.size-font-sm {
+  font: var(--wd-typography-body-sm);
+}
+.wd-form-input-group.size-height-sm {
+  height: var(--wd-form-height-sm);
+}
+.wd-form-input-group.size-width-sm {
+  width: var(--wd-form-width-sm);
+}
+.wd-form-input-group.size-font-md {
+  font: var(--wd-typography-body-md);
+}
+.wd-form-input-group.size-height-md {
+  height: var(--wd-form-item-height-md);
+}
+.wd-form-input-group.size-width-md {
+  width: var(--wd-form-width-md);
+}
+.wd-form-input-group.size-font-lg {
+  font: var(--wd-typography-body-lg);
+}
+.wd-form-input-group.size-height-lg {
+  height: var(--wd-form-item-height-lg);
+}
+.wd-form-input-group.size-width-lg {
+  width: var(--wd-form-width-lg);
+}
+.wd-form-input-group.size-width-hundred {
+  width: 100%;
+}