@cloudbase/weda-ui-mp 3.6.0

package/components/wd-input-url/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-url',
+    },
+    rules: {
+      type: Array,
+      value: [
+        {
+          format: 'url',
+          message: 'url校验失败',
+        },
+      ],
+    },
+  },
+  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-url/index.json

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

package/components/wd-input-url/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-wrap/index.js

@@ -0,0 +1,112 @@
+import { convertSize, convertIconSize } from '../../utils/getFormLegacy';
+import classNames from '../../utils/classnames';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    block: {
+      type: Boolean,
+      value: true,
+    },
+    classRoot: {
+      type: String,
+      value: '',
+    },
+    wrapClassName: {
+      type: String,
+      value: '',
+    },
+    before: {
+      type: String,
+      value: '',
+    },
+    after: {
+      type: String,
+      value: '',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    prefixType: {
+      type: String,
+      value: '',
+    },
+    prefixIcon: {
+      type: String,
+      value: '',
+    },
+    prefixSrc: {
+      type: String,
+      value: '',
+    },
+    suffixType: {
+      type: String,
+      value: '',
+    },
+    suffixIcon: {
+      type: String,
+      value: '',
+    },
+    suffixSrc: {
+      type: String,
+      value: '',
+    },
+    hasClearIcon: {
+      type: Boolean,
+      value: false,
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    inputWrap: `${WD_PREFIX}-form-input-wrap`,
+    cls: '',
+    _size: 'md',
+    iconSize: 'xxs',
+    root: '',
+  },
+  observers: {
+    '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,
+        }
+      );
+      this.setData({ cls, root, _size, iconSize });
+    },
+  },
+  methods: {
+    handleClear: function () {
+      this.triggerEvent('onClear');
+    },
+  },
+});

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

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

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

@@ -0,0 +1,32 @@
+<block wx:if="{{readOnly}}">
+  <slot></slot>
+</block>
+<block wx:else>
+  <view class="{{cls}}">
+    <!-- 前缀图标 -->
+    <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">
+      <slot></slot>
+    </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>
+  </view>
+</block>

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

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

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

@@ -0,0 +1,220 @@
+.wd-form-input-wrap {
+  --wd-form-input-wrap-border-radius: var(--wd-border-radius);
+  --wd-form-input-wrap-text-default: var(--wd-color-text-form-default);
+  --wd-form-input-wrap-text-hover: var(--wd-color-text-form-default);
+  --wd-form-input-wrap-text-focus: var(--wd-color-text-form-default);
+  --wd-form-input-wrap-text-disabled: var(--wd-color-text-form-disabled);
+  --wd-form-input-wrap-bg-default: transparent;
+  --wd-form-input-wrap-bg-hover: transparent;
+  --wd-form-input-wrap-bg-focus: transparent;
+  --wd-form-input-wrap-bg-disabled: var(--wd-color-bg-form-disabled);
+  --wd-form-input-wrap-border-default: var(--wd-color-border-form-default);
+  --wd-form-input-wrap-border-hover: var(--wd-color-brand);
+  --wd-form-input-wrap-border-focus: var(--wd-color-brand-focus);
+  --wd-form-input-wrap-border-disabled: var(--wd-color-border-form-disabled);
+  --wd-form-input-wrap-height-sm: var(--wd-form-item-height-sm);
+  --wd-form-input-wrap-height-md: var(--wd-form-item-height-md);
+  --wd-form-input-wrap-height-lg: var(--wd-form-item-height-lg);
+  --wd-form-input-wrap-width-sm: var(--wd-form-width-sm);
+  --wd-form-input-wrap-width-md: var(--wd-form-width-md);
+  --wd-form-input-wrap-width-lg: var(--wd-form-width-lg);
+  --wd-form-input-wrap-padding-lr: 0.5rem;
+  --wd-form-input-wrap-padding: 0 var(--wd-form-input-wrap-padding-lr);
+  --wd-form-input-wrap-text-align: left;
+  --wd-form-input-wrap-text-font-size: var(--wd-font-size-default);
+  --wd-form-input-wrap-text-font-color: var(--wd-font-gray-1);
+  --wd-form-input-wrap-text-font-weight: normal;
+}
+
+.wd-form.wd-form--weui .wd-form-input-wrap,
+.wd-form-item.wd-form-item--weui .wd-form-input-wrap {
+  --wd-form-input-wrap-text-font-size: var(--wd-font-size-4);
+}
+
+.wd-form-input-wrap {
+  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;
+  height: var(--wd-form-input-wrap-height-md);
+  width: var(--wd-form-input-wrap-width-md);
+  border: 1px solid var(--wd-form-input-wrap-border-default);
+  border-radius: var(--wd-form-input-wrap-border-radius);
+  padding: var(--wd-form-input-wrap-padding);
+  background-color: var(--wd-form-input-wrap-bg-default);
+  font-size: var(--wd-form-input-wrap-text-font-size);
+  font-weight: var(--wd-form-input-wrap-text-font-weight);
+  cursor: text;
+}
+.wd-form-input-wrap--no-radius-right {
+  border-radius: var(--wd-form-input-group-border-radius) 0 0 var(--wd-form-input-group-border-radius);
+}
+.wd-form-input-wrap--no-radius-left {
+  border-radius: 0 var(--wd-form-input-group-border-radius) var(--wd-form-input-group-border-radius) 0;
+}
+.wd-form-input-wrap--no-padding-left {
+  padding-left: 0;
+}
+.wd-form-input-wrap--no-padding-right {
+  padding-right: 0;
+}
+.wd-form-input-wrap--no-radius {
+  border-radius: 0;
+}
+.wd-form-input-wrap--no-border {
+  border: none;
+  border-radius: 0;
+  border-color: transparent;
+  box-shadow: none;
+}
+.wd-form-input-wrap--no-border.wd-form-input-wrap {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+}
+.wd-form-input-wrap--no-border.wd-form-input-wrap.is-focused:not(.is-disabled), .wd-form-input-wrap--no-border.wd-form-input-wrap:focus:not(.is-disabled) {
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  border-radius: var(--wd-form-weui-item-press-border-radius);
+  border-bottom: 1px solid var(--wd-form-input-wrap-border-hover);
+}
+.wd-form-input-wrap--no-border.wd-form-input-wrap__label {
+  line-height: none;
+}
+.wd-form-input-wrap:hover:not(.is-disabled) {
+  border-color: var(--wd-form-input-wrap-border-hover);
+  background-color: var(--wd-form-input-wrap-bg-hover);
+  color: var(--wd-form-input-wrap-text-hover);
+}
+.wd-form-input-wrap.is-focused:not(.is-disabled), .wd-form-input-wrap:focus:not(.is-disabled) {
+  border-color: var(--wd-form-input-wrap-border-hover);
+  background-color: var(--wd-form-input-wrap-bg-focus);
+  color: var(--wd-form-input-wrap-text-focus);
+  box-shadow: 0px 0px 0px 0px;
+}
+.wd-form-input-wrap.is-disabled {
+  border-color: var(--wd-form-input-wrap-border-disabled);
+  background-color: var(--wd-form-input-wrap-bg-disabled);
+  color: var(--wd-form-input-wrap-text-disabled);
+  cursor: not-allowed;
+}
+.wd-form-input-wrap.is-disabled input {
+  cursor: not-allowed;
+}
+.wd-form-input-wrap__content {
+  flex: 1 1 0px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-grey.is-pc-bordered {
+  background-color: #f2f2f2;
+  border-color: #f2f2f2;
+  border-radius: var(--wd-border-radius);
+  margin: calc(var(--wd-space-base) * 2) var(--wd-form-item-pd);
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-grey.is-pc-bordered.is-focused {
+  background-color: #f2f2f2;
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-grey.is-pc-bordered.is-h5-borderless {
+  padding: 0.5rem;
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-grey.is-pc-bordered:hover {
+  background-color: #f2f2f2;
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-white.is-pc-bordered {
+  border: 1px solid var(--wd-form-input-wrap-border-default);
+  border-radius: var(--wd-border-radius);
+  margin: calc(var(--wd-space-base) * 2) var(--wd-form-item-pd);
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-white.is-pc-bordered.is-focused {
+  border: 1px solid var(--wd-form-input-wrap-border-default);
+  border-radius: var(--wd-border-radius);
+}
+.wd-form-input-wrap.wd-input-input-search.template.search-box.color-white.is-pc-bordered.is-h5-borderless {
+  padding: 0.5rem;
+}
+.wd-form-input-wrap input,
+.wd-form-input-wrap textarea, .wd-form-input-wrap__input {
+  height: 100%;
+  width: 100%;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  font: inherit;
+  text-align: inherit;
+  -webkit-text-fill-color: inherit;
+}
+.wd-form-input-wrap input[type=number]::-webkit-inner-spin-button,
+.wd-form-input-wrap input[type=number]::-webkit-outer-spin-button,
+.wd-form-input-wrap input[type=number] {
+  -webkit-appearance: none;
+  -moz-animation: textfield;
+}
+.wd-form-input-wrap__placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+.wd-form-input-wrap ::-webkit-input-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+.wd-form-input-wrap :-moz-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+.wd-form-input-wrap ::-moz-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+.wd-form-input-wrap :-ms-input-placeholder {
+  color: var(--wd-color-text-placeholder);
+}
+.wd-form-input-wrap__before, .wd-form-input-wrap__after {
+  flex: 0 0 auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.wd-form-input-wrap__before i.wd-icon__trigger, .wd-form-input-wrap__after i.wd-icon__trigger {
+  cursor: pointer;
+}
+.wd-form-input-wrap__before {
+  margin-right: 0.25rem;
+}
+.wd-form-input-wrap__after {
+  margin-left: 0.25rem;
+}
+
+.wd-form-input-wrap.size-font-sm {
+  font: var(--wd-typography-body-sm);
+}
+.wd-form-input-wrap.size-height-sm {
+  height: var(--wd-form-height-sm);
+}
+.wd-form-input-wrap.size-width-sm {
+  width: var(--wd-form-width-sm);
+}
+.wd-form-input-wrap.size-font-md {
+  font: var(--wd-typography-body-md);
+}
+.wd-form-input-wrap.size-height-md {
+  height: var(--wd-form-item-height-md);
+}
+.wd-form-input-wrap.size-width-md {
+  width: var(--wd-form-width-md);
+}
+.wd-form-input-wrap.size-font-lg {
+  font: var(--wd-typography-body-lg);
+}
+.wd-form-input-wrap.size-height-lg {
+  height: var(--wd-form-item-height-lg);
+}
+.wd-form-input-wrap.size-width-lg {
+  width: var(--wd-form-width-lg);
+}
+.wd-form-input-wrap.size-width-hundred {
+  width: 100%;
+}

package/components/wd-layout/index.js

@@ -0,0 +1,33 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    template: {
+      type: String,
+      value: 'white',
+    },
+  },
+  data: { classPrefix: WD_PREFIX },
+  lifetimes: {},
+  methods: {},
+  observers: {},
+});

package/components/wd-layout/index.json

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

package/components/wd-layout/index.wxml

@@ -0,0 +1,13 @@
+<view id="{{id}}" style="{{style}}" class="{{classPrefix + '-layout'}} {{classPrefix + '-mp-layout-root'}} {{classPrefix + '-layout-root'}} {{className}} {{template}}">
+  <view class="{{classPrefix + '-layout__header'}} {{template}}">
+    <view class="{{classPrefix + '-layout__header-item'}} {{classPrefix + '-layout__header-item-left'}}">
+      <slot name="headerLeftSlot"></slot>
+    </view>
+    <view class="{{classPrefix + '-layout__header-item'}} {{classPrefix + '-layout__header-item-right'}}">
+      <slot name="headerRightSlot"></slot>
+    </view>
+  </view>
+  <view class="{{classPrefix + '-layout__body'}} {{template}}">
+    <slot name="contentSlot"></slot>
+  </view>
+</view>

package/components/wd-layout/index.wxss

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

package/components/wd-layout/wd-layout.wxss

@@ -0,0 +1,78 @@
+.wd-layout-root {
+  --wd-layout-border-color: var(--wd-color-border-separator);
+  --wd-layout-bg: var(--wd-white);
+  --wd-layout-heder-bg: transparent;
+  --wd-layout-heder-bg-left: transparent;
+  --wd-layout-heder-bg-right: transparent;
+  --wd-layout-heder-bg-right: 1.25rem;
+  --wd-layout-heder-pd: 1.5rem;
+  --wd-layout-heder-pd-1: 1rem;
+  --wd-layout-heder-border-color: var(--wd-color-gray-3);
+  --wd-layout-body-pd: 1.25rem 1.5rem 1.5rem;
+  --wd-layout-body-pd-1: 1rem 1.5rem;
+  --wd-layout-body-bg: transparent;
+  --wd-layout-body-bg-white: var(--wd-white);
+  --wd-layout-body-bg-gray: var(--wd-color-gray-1);
+}
+
+.wd-mp-layout-root,
+.wd-h5-layout-root {
+  --wd-layout-heder-pd: 1rem;
+  --wd-layout-heder-pd-1: 1rem;
+  --wd-layout-body-pd: 1rem;
+  --wd-layout-body-pd-1: 0.5rem;
+}
+
+.wd-layout-root {
+  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;
+  width: 100%;
+  background: var(--wd-layout-bg);
+  display: flex;
+  flex-direction: column;
+}
+.wd-layout-root.gray {
+  background-color: var(--wd-layout-body-bg-gray);
+}
+.wd-layout__header {
+  display: flex;
+  padding: var(--wd-layout-heder-pd-1) var(--wd-layout-heder-pd);
+  justify-content: space-between;
+  position: relative;
+  border-bottom: 1px solid var(--wd-layout-border-color);
+}
+.wd-layout__header-wrapper {
+  width: 100%;
+}
+.wd-layout__header-item {
+  display: flex;
+  align-items: center;
+}
+.wd-layout__header-item-left {
+  background-color: var(--wd-layout-heder-bg-left);
+  margin-inline-end: var(--wd-layout-heder-item-margin);
+}
+.wd-layout__header-item-right {
+  flex: none;
+  justify-content: flex-end;
+  background-color: var(--wd-layout-heder-bg-right);
+}
+.wd-layout__header.gray {
+  background-color: var(--wd-white);
+}
+.wd-layout__body {
+  background-color: var(--wd-layout-body-bg);
+  padding: var(--wd-layout-body-pd);
+}
+.wd-layout__body.gray {
+  padding: var(--wd-layout-body-pd-1);
+}
+
+.wd-layout__header-item ._wa-comp-container-empty-children {
+  min-width: 80px;
+}

package/components/wd-location/index.js

@@ -0,0 +1,49 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import equal from '../../utils/deepEqual';
+
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'location',
+    },
+    customLocation: {
+      type: null,
+    },
+  },
+  data: {
+    _oldLocationValue: null,
+    readValue: '',
+  },
+  methods: {
+    handleChange: function (e) {
+      if (equal(e.detail.value, this.data._oldLocationValue)) return;
+      this.data._oldLocationValue = e.detail.value;
+      this.changeForm(e);
+      this.triggerEvent('change', e.detail);
+    },
+    handleClear: function () {
+      const e = { detail: { value: null } };
+      this.handleChange(e);
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after':
+      function () {
+        this.updateWidgetAPI();
+      },
+    value: function (v) {
+      const readValue = typeof v === 'object' ? v?.['address'] : v;
+      this.setData({ readValue });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});