@cloudbase/weda-ui-mp 3.6.0

package/components/wd-calendar/index.wxss

@@ -0,0 +1,203 @@
+@import '../../style/weda-ui.wxss';
+
+/* components/calendar.wxss */
+.weda-calendar {
+  background: rgb(255, 255, 255);
+  width: 100%;
+  opacity: 0.9;
+  font-size: 14px;
+}
+
+.weda-calendar .weda-calendar__control {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 16px 16px 0;
+  position: relative;
+  /* text-align: center; */
+}
+
+.weda-calendar .weda-calendar__current-date {
+  font-weight: bold;
+  font-size: inherit;
+  line-height: 1.57142em;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+}
+
+.weda-calendar .weda-calendar__current-date__no {
+  font-weight: bold;
+  font-size: inherit;
+  line-height: 1.57142em;
+  display: inline-flex;
+  align-items: center;
+  visibility: hidden;
+}
+
+.weda-calendar .weda-calendar__current-date-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.weda-calendar .weda-calendar__prevMonth,
+.weda-calendar .weda-calendar__prevMonth__timepicker,
+.weda-calendar .weda-calendar__nextMonth {
+  position: absolute;
+  width: 1.54285em;
+  vertical-align: middle;
+  top: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-calendar .weda-calendar__prevMonth .weda-calendar__prevMonth-icon,
+.weda-calendar
+  .weda-calendar__prevMonth__timepicker
+  .weda-calendar__prevMonth-icon,
+.weda-calendar .weda-calendar__nextMonth .weda-calendar__nextMonth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.weda-calendar .weda-calendar__prevMonth {
+  transform: rotate(180deg);
+}
+
+.weda-calendar .weda-calendar__prevMonth__timepicker {
+  transform: rotate(180deg);
+  right: 38px;
+}
+
+.weda-calendar .weda-calendar__nextMonth {
+  right: 16px;
+}
+
+.weda-calendar .weda-calendar__panel {
+  height: 21.85714em;
+  padding: 20px 16px 16px 16px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-self: start;
+  align-items: flex-start;
+  font-size: inherit;
+}
+
+.weda-calendar .weda-calendar__table-head {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table-head-row {
+  width: 100%;
+  padding-bottom: 0;
+  display: flex;
+}
+
+.weda-calendar .weda-calendar__table-head-cell {
+  flex: 1 1 0%;
+  display: flex;
+  color: rgba(0, 0, 0, 0.6);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  font-size: 1em;
+  line-height: 1.42857em;
+  box-sizing: border-box;
+}
+
+.weda-calendar .weda-calendar__table-body {
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+  align-items: center;
+  flex: 1 1 0%;
+  width: 100%;
+}
+
+.weda-calendar .weda-calendar__table-body-row {
+  width: 100%;
+  display: flex;
+  flex: 1 1 0%;
+}
+
+.weda-calendar .weda-calendar__table-body-cell {
+  flex: 1 1 0%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: 1em;
+  line-height: 1.42857em;
+  box-sizing: border-box;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.weda-calendar .weda-calendar__table-body-cell-value {
+  font-size: 1em;
+  text-align: center;
+  border-radius: 50%;
+  width: 40px;
+  line-height: 2.85714em;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.9);
+  position: relative;
+}
+
+.weda-calendar .weda-calendar__table-body-cell.is-disabled {
+  cursor: not-allowed;
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-invalid
+  .weda-calendar__table-body-cell-value {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-disabled
+  .weda-calendar__table-body-cell-value {
+  color: #c5c5c5;
+}
+
+.weda-calendar
+  .weda-calendar__table-body-cell.is-checked
+  .weda-calendar__table-body-cell-value {
+  color: #fff;
+}
+
+/* theme */
+.weda-calendar
+  .weda-calendar__table-body-cell.is-checked
+  .weda-calendar__table-body-cell-bg {
+  position: absolute;
+  width: 1.714285em;
+  height: 1.714285em;
+  background-color: var(--wd-color-brand, #0052d9);
+  border-radius: 100%;
+  left: calc(50% - 0.85714em);
+  top: calc(50% - 0.85714em);
+  z-index: -1;
+}
+
+.weda-calendar .weda-calendar__table-body-cell-marked {
+  position: absolute;
+  border-radius: 50%;
+  left: 50%;
+  transform: translate(-50%);
+  bottom: -10px;
+  width: 4px;
+  height: 4px;
+  top: calc(50% + 14px);
+}

package/components/wd-calendar/weeks.js

@@ -0,0 +1,41 @@
+import {
+  getStartMoment,
+  convertValueToDateItem,
+  getYMD,
+  convertYearMonthToWeeks,
+} from '../../utils/getFormLegacy';
+
+export const WEEKS = ['日', '一', '二', '三', '四', '五', '六'];
+export const BLOCK_NAME = 'weda-calendar';
+
+// 配置数组转配置对象
+export const getConfigDataObj = (configData) => {
+  if (!Array.isArray(configData)) return;
+  const obj = {};
+  configData.forEach((item) => {
+    if (Object.prototype.toString.call(item) === '[object Object]') {
+      const disabled = [true, 'true'].includes(item.disabled) ? true : false;
+      const value = getStartMoment('day', item.matchDate, false);
+      const dateItem = value ? convertValueToDateItem(value) : {};
+      const YMD = getYMD(dateItem);
+      obj[YMD] = { ...item, disabled };
+    }
+  });
+  return obj;
+};
+
+// 带上外部配置，转星期
+export const convertWeeks = (year, month, configDataObj) => {
+  const weeks = convertYearMonthToWeeks(year, month, null, {
+    isPreNext: true,
+    isDynamic: true,
+  });
+  if (!configDataObj || Object.keys(configDataObj).length === 0) return weeks;
+  return weeks.map((row) => {
+    return row.map((item) => {
+      const YMD = getYMD(item);
+      const config = configDataObj[YMD];
+      return { ...item, ...config };
+    });
+  });
+};

package/components/wd-canvas/index.js

@@ -0,0 +1,250 @@
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import handleEvents from '../../utils/handleEvents';
+
+/**
+ * 兼容小程序旧版的2D画布函数
+ * @param ctx
+ * @returns
+ */
+const generateCtx2D = (ctx) => {
+  if (!ctx) return;
+
+  const setLineDash = ctx.setLineDash.bind(ctx);
+
+  ctx.setFillStyle = function (val) {
+    ctx.fillStyle = val;
+  };
+  ctx.setFontSize = function (val) {
+    ctx.font = `${val}px`;
+  };
+  ctx.setGlobalAlpha = function (val) {
+    ctx.globalAlpha = val;
+  };
+  ctx.setLineCap = function (val) {
+    ctx.lineCap = val;
+  };
+  ctx.setLineDash = function (pattern, offset) {
+    setLineDash(pattern);
+    ctx.lineDashOffset = offset;
+  };
+  ctx.setLineJoin = function (val) {
+    ctx.lineJoin = val;
+  };
+  ctx.setLineWidth = function (val) {
+    ctx.lineWidth = val;
+  };
+  ctx.setMiterLimit = function (val) {
+    ctx.miterLimit = val;
+  };
+  ctx.setShadow = function (offsetX, offsetY, blur, color) {
+    ctx.shadowOffsetX = offsetX;
+    ctx.shadowOffsetY = offsetY;
+    ctx.shadowBlur = blur;
+    ctx.shadowColor = color;
+  };
+  ctx.setStrokeStyle = function (val) {
+    ctx.strokeStyle = val;
+  };
+  ctx.setTextAlign = function (val) {
+    ctx.textAlign = val;
+  };
+  ctx.setTextBaseline = function (val) {
+    ctx.textBaseline = val;
+  };
+  ctx.draw = () => {};
+
+  return ctx;
+};
+const generateCtxWebgl = (ctx) => {
+  return ctx;
+};
+
+const READY_TIME = 500;
+// canvas默认宽高
+const CANVAS_DEFAULT = {
+  width: 300,
+  height: 150,
+};
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    type: {
+      type: String,
+      value: '2d',
+    },
+    disableScroll: {
+      type: Boolean,
+      value: false,
+    },
+    code: {
+      type: Object,
+      value: () => ({}),
+    },
+  },
+  domObserver: null,
+  readyTimer: null,
+  data: {
+    cls: '',
+    styleMain: '',
+    canvasInstance: null,
+    canvasCtx: null,
+    isCanvasReady: false,
+    canvasId: null,
+    canvasStyle: CANVAS_DEFAULT,
+  },
+  lifetimes: {
+    attached() {
+      this.setData({ canvasId: this.id });
+      this.observeModuleExpose();
+      this.updateWidgetAPI();
+    },
+    detached() {
+      this.domObserver && this.domObserver.disconnect();
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          code: this.properties.code,
+          type: this.properties.type,
+          disableScroll: this.properties.disableScroll,
+          canvasInstance: this.data.canvasInstance,
+          canvasCtx: this.data.canvasCtx,
+        });
+    },
+    /**
+     * 根据初始化代码绘制canvas
+     */
+    async canvasInit(init, canvasCtx, canvasInstance, canvasStyle) {
+      try {
+        // 执行初始化函数前恢复默认宽高，清空画布
+        canvasInstance.width = canvasStyle.width;
+        canvasInstance.height = canvasStyle.height;
+        await init?.(canvasCtx, canvasInstance);
+        this.triggerEvent('canvasReady', { canvasInstance, canvasCtx });
+      } catch (error) {
+        //
+      }
+    },
+    // 监听模块曝光
+    observeModuleExpose() {
+      this.domObserver && this.domObserver.disconnect();
+      this.domObserver = wx.createIntersectionObserver(this);
+      this.domObserver.relativeToViewport().observe(`#${this.id}`, (res) => {
+        // 模块曝光
+        if (res.intersectionRatio) {
+          this.setData({ isCanvasReady: true });
+          this.init();
+        }
+      });
+    },
+    getCanvasRectInfo() {
+      return new Promise((resolve) => {
+        const query = wx.createSelectorQuery().in(this);
+        query.select(`#${this.id}`).boundingClientRect();
+        query.selectViewport().scrollOffset();
+        query.exec(function (res) {
+          resolve({ ...res?.[1], ...res?.[0] });
+        });
+      });
+    },
+    init(id = this.id, type = this.properties.type) {
+      wx.createSelectorQuery()
+        .in(this)
+        .select(`#${id || this.id}`)
+        .fields({ node: true, size: true })
+        .exec(async (res) => {
+          if (!res?.[0]?.node) return;
+          const canvas = res[0].node;
+
+          const { pixelRatio: dpr } = await wx.getSystemInfo();
+          canvas.width = res[0].width * dpr;
+          canvas.height = res[0].height * dpr;
+          canvas.dpr = dpr;
+          canvas.getCanvasRectInfo = this.getCanvasRectInfo.bind(this);
+
+          this.setData({
+            canvasStyle: { width: canvas.width, height: canvas.height },
+          });
+
+          const ctx = canvas.getContext(type);
+          const ctxRes =
+            { '2d': generateCtx2D, webgl: generateCtxWebgl }[type]?.(ctx) || {};
+          const data = { canvasInstance: canvas, canvasCtx: ctxRes };
+
+          this.domObserver && this.domObserver.disconnect();
+          this.setData(data);
+        });
+    },
+    ...handleEvents([
+      { title: '手指触摸开始', name: 'touchstart' },
+      { title: '手指触摸移动', name: 'touchmove' },
+      { title: '手指触摸结束', name: 'touchend' },
+      { title: '手指触摸被打断', name: 'touchcancel' },
+      { title: '手指/鼠标长按', name: 'longtap' },
+      { title: '错误', name: 'error' },
+    ]),
+  },
+  observers: {
+    'style,className': function (style, className) {
+      // 响应式css api
+      const cls = classNames({
+        [`${WD_PREFIX}-canvas`]: true,
+        [`${WD_PREFIX}-mp-canvas`]: true,
+        [className]: className,
+      });
+      const styleMain = style;
+
+      this.setData({ cls, styleMain });
+    },
+    'type,disableScroll,canvasInstance,canvasCtx': function () {
+      this.updateWidgetAPI();
+    },
+    'id,type': function (id, type) {
+      if (!this.data.isCanvasReady) return;
+
+      this.setData({ canvasId: id });
+      this.init(id, type);
+    },
+    'code,canvasStyle,canvasInstance,canvasCtx': function (
+      code,
+      canvasStyle,
+      canvasInstance,
+      canvasCtx
+    ) {
+      this.readyTimer && clearTimeout(this.readyTimer);
+      if (!canvasCtx || !canvasInstance) return;
+
+      // 如果初始化代码不是函数，则直接执行canvasReady
+      if (typeof code?.init !== 'function') {
+        // eslint-disable-next-line rulesdir/no-timer
+        this.readyTimer = setTimeout(() => {
+          this.triggerEvent('canvasReady', { canvasInstance, canvasCtx });
+        }, READY_TIME);
+        return;
+      }
+
+      this.canvasInit(code?.init, canvasCtx, canvasInstance, canvasStyle);
+    },
+  },
+});

package/components/wd-canvas/index.json

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

package/components/wd-canvas/index.wxml

@@ -0,0 +1,2 @@
+<canvas wx:if="{{type === '2d'}}" id="{{canvasId}}" canvas-id="{{canvasId}}" style="{{styleMain}}" class="{{cls}}" type="{{type}}" disable-scroll="{{disableScroll}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" bindtouchcancel="touchcancel" bindlongtap="longtap" binderror="error"></canvas>
+<canvas wx:else id="{{canvasId}}" canvas-id="{{canvasId}}" style="{{styleMain}}" class="{{cls}}" type="{{type}}" disable-scroll="{{disableScroll}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchEnd" bindtouchcancel="touchcancel" bindlongtap="longtap" binderror="error"></canvas>

package/components/wd-card/index.js

@@ -0,0 +1,76 @@
+import handleEvents from '../../utils/handleEvents';
+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: '',
+    },
+    showHeader: { type: Boolean, value: true },
+    showContent: { type: Boolean, value: true },
+    showFooter: { type: Boolean, value: false },
+    showDivider: { type: Boolean, value: true },
+  },
+  data: { classPrefix: WD_PREFIX, contentState: 'show' },
+  lifetimes: {
+    attached() {
+      const { showContent } = this.properties;
+      this.setData({
+        contentState: showContent ? 'show' : 'hide',
+      });
+      this.updateWidgetAPI();
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          showHeader: this.properties.showHeader,
+          showContent: this.properties.showContent,
+          showFooter: this.properties.showFooter,
+          showDivider: this.properties.showDivider,
+          contentState: this.data.contentState,
+          dealContentState: this.dealContentState.bind(this),
+        });
+    },
+    ...handleEvents([{ title: '点击', name: 'tap' }]),
+    /**
+     * 控制内容面板显示与隐藏，只针对于折叠模式下有效
+     */
+    dealContentState({ state } = {}) {
+      const { contentState } = this.data;
+      const stateInner = state || (contentState === 'show' ? 'hide' : 'show');
+      if (stateInner === contentState) return;
+
+      this.setData({ contentState: stateInner });
+      this.updateWidgetAPI();
+
+      if (stateInner === 'show') {
+        this.triggerEvent('contentShow');
+      } else {
+        this.triggerEvent('contentHide');
+      }
+    },
+  },
+  observers: {
+    showContent: function (showContent) {
+      this.setData({ contentState: showContent ? 'show' : 'hide' });
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-card/index.json

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

package/components/wd-card/index.wxml

@@ -0,0 +1,11 @@
+<view id="{{id}}" style="{{style}}" class="{{classPrefix + '-card'}} {{classPrefix + '-mp-card-root'}} {{classPrefix + '-card-root'}} {{showDivider ? 'wd-card--bordered' : ''}} {{contentState !== 'show' ? 'wd-card--collapse-active' : ''}} {{className}}">
+  <view class="{{classPrefix + '-card__header'}}" wx:if="{{showHeader}}">
+    <slot name="headerSlot"></slot>
+  </view>
+  <view class="{{classPrefix + '-card__body'}}" wx:if="{{contentState === 'show'}}">
+    <slot name="contentSlot"></slot>
+  </view>
+  <view class="{{classPrefix + '-card__footer'}}" wx:if="{{showFooter}}">
+    <slot name="footerSlot"></slot>
+  </view>
+</view>

package/components/wd-card/index.wxss

@@ -0,0 +1,6 @@
+@import '../../style/wd-design.wxss';
+@import './wd-card.wxss';
+
+.wd-mp-card-root {
+  --wd-card-body-pd: 1rem 1.5rem;
+}