@cloudbase/weda-ui 3.5.1 → 3.5.2-mp

package/components/wd-time/index.js

@@ -0,0 +1,124 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import {
+  convertTimeValue,
+  convertDateFormat,
+  convertTimeToMoment,
+  MAX_TIME,
+  isDateInRange,
+  convertTimePickerValue,
+} from '../../utils/getFormLegacy.js';
+
+/**
+ * 标准化：时间
+ */
+Component({
+  options: { virtualHost: true, pureDataPattern: /^pickerValueRef$/ },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'time',
+    },
+    mode: {
+      type: String,
+      value: 'minute',
+    },
+  },
+  data: {
+    pickerVisible: false,
+    pickerValue: null,
+    pickerValueRef: null,
+    readValue: '',
+    _format: '',
+    _start: convertTimeToMoment(0).valueOf(),
+    _end: convertTimeToMoment(MAX_TIME).valueOf(),
+    _mode: 'datetimeMinute',
+  },
+  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,
+      });
+    },
+    setPickerVisible: function () {
+      if (this.data.disabled) return;
+      this.setData({
+        pickerVisible: true,
+        pickerValueRef: this.data.pickerValue,
+      });
+    },
+    handleClose: function () {
+      this.setData({ pickerVisible: false });
+    },
+    handleOk: function () {
+      const { _start, _end, _format } = this.data;
+      const temp = this.data.pickerValueRef;
+      const [inRange, title] = isDateInRange(temp, _start, _end, _format);
+      if (!inRange) {
+        wx.showToast?.({ title, icon: 'none', duration: 2000 });
+        return;
+      }
+      const value = convertTimeValue(temp);
+      this.setData({ value, pickerVisible: false });
+      this.triggerEvent('change', { value });
+    },
+    handleClear: function () {
+      this.setData({ value: null });
+      this.triggerEvent('change', { value: null });
+    },
+    handleChange: function (e) {
+      const pickerValueRef = e.detail.value;
+      this.setData({ pickerValueRef });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after':
+      function () {
+        this.updateWidgetAPI();
+      },
+    'value,mode,start,end': function (value, mode, start, end) {
+      const _format = convertDateFormat(mode);
+      const _start = convertTimeToMoment(start || 0).valueOf();
+      const _end = convertTimeToMoment(end || MAX_TIME).valueOf();
+      const pickerValue = convertTimePickerValue(value, _start, _end, mode);
+      const m = convertTimeToMoment(value);
+      const readValue = m?.format(_format) || '';
+      const _mode = mode !== 'second' ? 'datetimeMinute' : '';
+      this.setData({
+        _format,
+        _mode,
+        _start,
+        _end,
+        readValue,
+        pickerValue,
+        pickerValueRef: pickerValue,
+      });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-time/index.json

@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index",
+    "wd-input-group": "../wd-input-group/index",
+    "wd-input-wrap": "../wd-input-wrap/index",
+    "time-picker": "../wd-date/time-picker/index",
+    "modal": "../wd-date/modal/index"
+  }
+}

package/components/wd-time/index.wxml

@@ -0,0 +1,36 @@
+<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="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    readOnly="{{readOnly}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    readValue="{{readValue}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+    before="{{before}}"
+    after="{{after}}"
+  >
+    <wd-input-group before="{{before}}" after="{{after}}" block="{{true}}" size="{{_size}}" classRoot="{{classRoot}}">
+      <wd-input-wrap block="{{block}}" classRoot="{{classRoot}}" before="{{before}}" after="{{after}}" disabled="{{disabled}}" prefixType="{{prefixType}}" prefixIcon="{{prefixIcon}}" prefixSrc="{{prefixSrc}}" suffixType="{{suffixType}}" suffixIcon="{{suffixIcon}}" suffixSrc="{{suffixSrc}}" hasClearIcon="{{clearable && !disabled && (value != null)}}" bind:onClear="handleClear">
+        <input class="{{classPrefix}}-form-select_input" placeholder="{{placeholder}}" value="{{readValue}}" disabled="true" name="{{name}}" bindtap="setPickerVisible" />
+      </wd-input-wrap>
+    </wd-input-group>
+  </wd-form-item>
+
+  <modal visible="{{pickerVisible}}" bind:onClose="handleClose" bind:onOk="handleOk">
+    <time-picker value="{{pickerValue}}" start="{{_start}}" end="{{_end}}" mode="{{_mode}}" bind:onChange="handleChange" />
+  </modal>
+</block>

package/components/wd-time/index.wxss

@@ -0,0 +1,9 @@
+@import '../../style/wd-design.wxss';
+@import '../../style/utils.wxss';
+
+@import '../wd-select/select.wxss';
+@import '../form/form/index.wxss';
+@import '../wd-input-wrap/wd-input-wrap.wxss';
+@import '../wd-input-group/wd-input-group.wxss';
+
+@import './wd-time.wxss';

package/components/wd-top-tab/index.js

@@ -0,0 +1,113 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import handleEvents from '../../utils/handleEvents';
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    isMultipleSlot: {
+      type: Boolean,
+      value: false,
+    },
+    selectedValue: {
+      type: String,
+      value: '1',
+    },
+    list: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    cls: '',
+    classPrefix: WD_PREFIX,
+    currentIndex: 0,
+    tabsData: [],
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setCurrentIndex();
+    },
+  },
+  methods: {
+    getCurrent: function (e) {
+      this.setData({
+        currentIndex: e.detail,
+      });
+    },
+    choooseTab: function (params) {
+      const value = params?.value;
+      const index = this.properties.list.findIndex((i) => i.value === value);
+      this.setData({
+        currentIndex: index,
+      });
+    },
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          isMultipleSlot: this.properties.isMultipleSlot,
+          selectedValue: this.properties.list.find(
+            (i, index) => index === this.data.currentIndex
+          )?.value,
+          list: this.properties.list,
+          selectTab: this.choooseTab.bind(this),
+        });
+    },
+    setCurrentIndex(selectedValue = this.properties.selectedValue) {
+      const index = this.properties.list.findIndex(
+        (i) => i.value === selectedValue
+      );
+      if (index !== this.data.currentIndex) {
+        this.setData({
+          currentIndex: index,
+        });
+      }
+    },
+    ...handleEvents([
+      {
+        name: 'tap',
+        title: '点击',
+      },
+      {
+        name: 'change',
+        title: '类别切换',
+      },
+    ]),
+  },
+  observers: {
+    selectedValue: function (selectedValue) {
+      this.setCurrentIndex(selectedValue);
+    },
+    'currentIndex, list': function (currentIndex, list) {
+      const tabData = list.map((item, index) => {
+        return {
+          ...item,
+          selected: index === currentIndex,
+        };
+      });
+      this.setData({
+        tabsData: tabData,
+      });
+      this.triggerEvent('change', {
+        value: tabData.find((v) => v.selected)?.value,
+      });
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-top-tab/index.json

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

package/components/wd-top-tab/index.wxml

@@ -0,0 +1,6 @@
+<view id="{{id}}" style="{{style}}" class="{{classPrefix + '-top-tab-root'}} {{classPrefix + '-mp-top-tab-root'}} {{className}}">
+  <wd-tabs list="{{tabsData}}" selectedIndex="{{selectedValue}}" direction="horizontal" bind:onCurrent="getCurrent" bind:change="change" currentIndex="{{currentIndex}}">
+    <slot wx:if=" {{isMultipleSlot}}" name="panel{{currentIndex + 1}}"> </slot>
+    <slot wx:else name="panel1"></slot>
+  </wd-tabs>
+</view>

package/components/wd-top-tab/index.wxss

@@ -0,0 +1,5 @@
+@import '../../style/wd-design.wxss';
+
+.wd-mp-top-tab-root .wd-tabs__scroll {
+  width: 100%;
+}

package/components/wd-upload-file/index.js

@@ -0,0 +1,46 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import isEqual from '../../utils/deepEqual';
+import { convertSingleValue } from '../../utils/platform';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'upload-file',
+    },
+    acceptTypes: {
+      type: String,
+      value: '',
+    },
+    callbacks: {
+      type: Object,
+      value: null,
+    },
+  },
+  methods: {
+    initValue: function () {
+      const { value, single } = this.properties;
+      const v = convertSingleValue(value, single);
+      if (!isEqual(v, value)) {
+        this.setData({ value: v });
+      }
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly': function () {
+      this.updateWidgetAPI();
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.initValue();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-upload-file/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index",
+    "old-file-uploader": "../form/uploaderFile"
+  }
+}

package/components/wd-upload-file/index.wxml

@@ -0,0 +1,39 @@
+<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="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <old-file-uploader
+      labelVisible="{{false}}"
+      acceptTypes="{{acceptTypes}}"
+      defaultValue="{{value}}"
+      maxSize="{{maxSize}}"
+      maxUploadCount="{{maxUploadCount}}"
+      single="{{single}}"
+      downloadVisible="{{downloadVisible}}"
+      deleteVisible="{{deleteVisible}}"
+      readOnly="{{readOnly}}"
+      disabled="{{disabled || readOnly}}"
+      bind:change="handleChange"
+      bind:success="handleEvent"
+      bind:error="handleEvent"
+      callbacks="{{callbacks}}"
+    />
+  </wd-form-item>
+</block>

package/components/wd-upload-image/index.js

@@ -0,0 +1,64 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import isEqual from '../../utils/deepEqual';
+import { convertSingleValue } from '../../utils/platform';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'upload-image',
+    },
+    isCompressBeforeUpload: {
+      type: Boolean,
+      value: false,
+    },
+    compressQuality: {
+      type: Number,
+      value: 0.7,
+    },
+
+    compressedHeight: {
+      type: Number,
+      value: 0,
+    },
+    compressedWidth: {
+      type: Number,
+      value: 0,
+    },
+    sourceType: {
+      type: String,
+      value: 'both',
+    },
+    callbacks: {
+      type: Object,
+      value: null,
+    },
+  },
+  methods: {
+    initValue: function () {
+      const { value, single } = this.properties;
+      const v = convertSingleValue(value, single);
+      if (!isEqual(v, value)) {
+        this.setData({ value: v });
+      }
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, sourceType':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+  lifetimes: {
+    attached: function () {
+      this.initValue();
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-upload-image/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index",
+    "old-image-uploader": "../form/uploader"
+  }
+}

package/components/wd-upload-image/index.wxml

@@ -0,0 +1,45 @@
+<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="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <old-image-uploader
+      labelVisible="{{false}}"
+      acceptTypes="{{acceptTypes}}"
+      defaultValue="{{value}}"
+      maxSize="{{maxSize}}"
+      maxUploadCount="{{maxUploadCount}}"
+      single="{{single}}"
+      tips="{{tips}}"
+      isChooseAvatar="{{isChooseAvatar}}"
+      showShape="{{showShape}}"
+      readOnly="{{readOnly}}"
+      disabled="{{disabled || readOnly}}"
+      isCompressBeforeUpload="{{isCompressBeforeUpload}}"
+      compressQuality="{{compressQuality}}"
+      compressedHeight="{{compressedHeight}}"
+      compressedWidth="{{compressedWidth}}"
+      callbacks="{{callbacks}}"
+      bind:change="handleChange"
+      sourceType="{{sourceType}}"
+      bind:success="handleEvent"
+      bind:error="handleEvent"
+    />
+  </wd-form-item>
+</block>

package/components/web-view/index.js

@@ -0,0 +1,69 @@
+import handleEvents from '../../utils/handleEvents';
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    link: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {},
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { link } = this.properties;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          link,
+        });
+    },
+
+    ...handleEvents([
+      { title: '接收网页消息', name: 'message' },
+      { title: '网页加载成功', name: 'load' },
+      { title: '网页加载失败', name: 'error' },
+    ]),
+  },
+  observers: {
+    className: function (className) {
+      const classPrefix = WD_PREFIX;
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-web-view`;
+      const classes = {
+        [platformCss]: true,
+      };
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+      this.setData({ cls });
+    },
+    link: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/web-view/index.json

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

package/components/web-view/index.wxml

@@ -0,0 +1 @@
+<web-view id="{{id}}" style="{{style}}" class="{{cls}}" src="{{link}}" bindmessage="message" bindload="load" binderror="error"></web-view>

package/components/web-view/index.wxss

@@ -0,0 +1 @@
+@import '../../style/weda-ui.wxss';