@cloudbase/weda-ui-mp 0.2.20

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-time/wd-time.wxss

@@ -0,0 +1,5 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}

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

@@ -0,0 +1,121 @@
+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,
+    },
+    isSlotAuto: {
+      type: Boolean,
+      value: false,
+    },
+    selectedValue: {
+      type: String,
+      value: '1',
+    },
+    list: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    cls: '',
+    classPrefix: WD_PREFIX,
+    currentIndex: 0,
+    tabsData: [],
+    slotKey: '1',
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setCurrentIndex();
+    },
+  },
+  methods: {
+    getCurrent: function (e) {
+      this.setData({
+        currentIndex: e.detail,
+      });
+      const idx = e.detail;
+      this.triggerEvent('change', {
+        value: this.data.tabsData?.[idx]?.value,
+      });
+    },
+    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, list': 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,
+        slotKey: this.properties.list[currentIndex]?.slotKey || '1',
+      });
+
+      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="{{isSlotAuto}}" name="autoPanel_{{isMultipleSlot?slotKey:'1'}}"></slot>
+    <slot wx:elif="{{isMultipleSlot}}" name="panel{{currentIndex + 1}}"></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-unified-link/index.js

@@ -0,0 +1,115 @@
+import { WD_PREFIX } from '../../utils/constant';
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { getWedaAPI } from '../../utils/getWedaApi';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    url: {
+      type: String,
+      value: '',
+    },
+    options: {
+      type: Object,
+      value: {},
+    },
+    params: {
+      type: Object,
+      value: {},
+    },
+  },
+  data: { cls: '' },
+  methods: {
+    tap: function () {
+      const URL_REG =
+        /^(weda-page|plugin|miniprogram):\/\/([0-9.\-A-Za-z]+)(?:\/([^?#]*))?(?:\?([^#]*))?$/;
+      const matched = this.data.url.match(URL_REG);
+      const { app } = getWedaAPI();
+      if (matched) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const [_, protocol, packageName, pageId, query] = matched;
+        if ('weda-page' === protocol) {
+          // 页面参数，如果存在变量绑定，以绑定值为准
+          let params = {};
+          if (query) {
+            params = query.split('&').reduce((acc, param) => {
+              const [key, value] = param.split('=');
+              acc[key] = value;
+              return acc;
+            }, {});
+          }
+          if (this.data?.params?.[pageId]) {
+            params = { ...params, ...this.data?.params?.[pageId] };
+          }
+          app?.navigateTo({
+            pageId,
+            packageName: packageName === 'main' ? '' : packageName,
+            mode: 'weDa',
+            params,
+          });
+        } else {
+          app?.navigateTo({
+            url: this.data.url,
+            options: this.data.options,
+          });
+        }
+      } else {
+        console.error(
+          /https?:\/\//.test(this.data.url)
+            ? '小程序不支持外部链接跳转'
+            : '链接不合法'
+        );
+      }
+    },
+    updateWidgetAPI: function () {
+      const { url, options } = this.data;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          url,
+          options,
+        });
+    },
+  },
+  observers: {
+    className: function (className) {
+      const classPrefix = WD_PREFIX;
+      const compClassName = `${classPrefix}-link`;
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-link`;
+      const classes = {
+        [compClassName]: true,
+        [platformCss]: true,
+      };
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+      this.setData({ cls });
+    },
+    'url,options': function () {
+      this.updateWidgetAPI();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+});

package/components/wd-unified-link/index.json

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

package/components/wd-unified-link/index.wxml

@@ -0,0 +1,3 @@
+<view id="{{id}}" style="{{style}}" class="{{cls}}" bind:tap="tap">
+  <slot></slot>
+</view>

package/components/wd-unified-link/index.wxss

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

package/components/wd-unified-link/wd-link.wxss

@@ -0,0 +1,51 @@
+@charset "UTF-8";
+._B00_Xa {
+  /* 如果生成的wxss 为空文件似乎会导致IDE编译报错， 所以这里给他弄个占位 */
+  word-break: inherit;
+}
+
+.wd-link {
+  --wd-link-color-text: var(--wd-color-text-link);
+  --wd-link-color-text-hover: var(--wd-color-text-link-hover);
+  --wd-link-color-text-active: var(--wd-color-text-link-active);
+  --wd-link-color-text-disabled: var(--wd-color-text-link-disabled);
+  --wd-link-space: calc(var(--wd-space-base) * 2);
+  --wd-link-font-size: var(--wd-font-size-4);
+}
+
+.wd-link {
+  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;
+  color: var(--wd-link-color-text);
+  display: inline-block;
+  text-decoration-skip-ink: all;
+  font-size: var(--wd-link-font-size);
+}
+.wd-link__wrap {
+  display: flex;
+  align-items: center;
+}
+.wd-link__before-icon {
+  margin-right: var(--wd-link-space);
+}
+.wd-link__after-icon {
+  margin-left: var(--wd-link-space);
+}
+.wd-link:hover {
+  text-decoration: none;
+}
+.wd-link:hover .wd-link__text {
+  text-decoration: underline;
+}
+.wd-link:hover:not(.is-disabled) {
+  color: var(--wd-link-color-text-hover);
+}
+.wd-link.is-disabled {
+  color: var(--wd-link-color-text-disabled);
+  pointer-events: none;
+}

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

@@ -0,0 +1,54 @@
+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,
+    },
+    uploadTipText: {
+      type: String,
+      value: '支持批量上传',
+    },
+    uploadButtonText: {
+      type: String,
+      value: '点击上传',
+    },
+  },
+  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,41 @@
+<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}}"
+      uploadButtonText="{{uploadButtonText}}"
+      uploadTipText="{{uploadTipText}}"
+    />
+  </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();
+    },
+  },
+});