@cloudbase/weda-ui-mp 3.6.0

package/components/wd-card/wd-card.wxss

@@ -0,0 +1,114 @@
+.wd-card-root {
+  --wd-card-border-radius: var(--wd-border-radius-md);
+  --wd-card-border-color: var(--wd-color-gray-3);
+  --wd-card-border-shadow: var(--wd-shadow-sm);
+  --wd-card-bg: var(--wd-white);
+  --wd-card-heder-pd-collapse: 1rem;
+  --wd-card-heder-bg: transparent;
+  --wd-card-heder-pd: 1rem 1rem 0 1rem;
+  --wd-card-heder-pd-bordered: 1rem;
+  --wd-card-heder-border-color: var(--wd-color-gray-3);
+  --wd-card-body-pd: 1rem;
+  --wd-card-body-pd-bordered: 0.75rem 1rem;
+  --wd-card-body-bg: transparent;
+  --wd-card-body-pd-bordered-is-footer: 0.75rem 1rem 1rem;
+  --wd-card-footer-pd: 1rem;
+  --wd-card-footer-pd-bordered: 1rem;
+  --wd-card-footer-bg: transparent;
+}
+
+.wd-mp-card-root,
+.wd-h5-card-root {
+  --wd-card-heder-pd: 1rem 1rem 0 1rem;
+  --wd-card-body-pd: 1rem;
+  --wd-card-footer-pd: 1rem;
+  --wd-card-heder-pd-bordered: 1rem;
+  --wd-card-body-pd-bordered: 0.75rem 1rem;
+  --wd-card-footer-pd-bordered: 1rem;
+}
+
+.wd-card-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;
+  background: var(--wd-card-bg);
+  border: 0.5px solid var(--wd-card-border-color);
+  border-radius: var(--wd-card-border-radius);
+  box-shadow: var(--wd-card-border-shadow);
+}
+.wd-card__header {
+  display: flex;
+  align-items: center;
+  padding: var(--wd-card-heder-pd);
+  font: var(--wd-typography-title-sm);
+}
+.wd-card__header-fold--left {
+  justify-content: flex-start;
+}
+.wd-card__header-fold--right {
+  justify-content: space-between;
+}
+.wd-card__body {
+  background-color: var(--wd-card-body-bg);
+  padding: var(--wd-card-body-pd);
+}
+.wd-card__footer {
+  background-color: var(--wd-card-footer-bg);
+  padding: var(--wd-card-footer-pd);
+}
+.wd-card--bordered .wd-card__header {
+  border-bottom: 1px solid var(--wd-card-border-color);
+  padding: var(--wd-card-heder-pd-bordered);
+}
+.wd-card--bordered .wd-card__body {
+  padding: var(--wd-card-body-pd-bordered);
+}
+.wd-card--bordered .wd-card__body.is-footer {
+  padding: var(--wd-card-body-pd-bordered-is-footer);
+}
+.wd-card--bordered .wd-card__footer {
+  border-top: 1px solid var(--wd-card-border-color);
+  padding: var(--wd-card-footer-pd-bordered);
+}
+.wd-card--collapse-active .wd-card__header {
+  padding: var(--wd-card-heder-pd-collapse);
+}
+.wd-card--collapse-active .wd-card__header .wd-card-icon-fold {
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+}
+.wd-card--collapse-active .wd-card__header .wd-card-fold-icon {
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+}
+.wd-card--collapse-active .wd-card__body {
+  display: none;
+}
+.wd-card--collapse-active .wd-card__footer {
+  display: none;
+}
+.wd-card-icon-fold {
+  flex: none;
+  cursor: pointer;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-position: center;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE2IDE3IiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjQ1OTYgMTAuMDQwNEwxMS41NDA0IDEwLjk1OTZMOC4wMDAwMSA3LjQxOTIxTDQuNDU5NjMgMTAuOTU5NkwzLjU0MDM5IDEwLjA0MDRMNy4yOTI5IDYuMjg3ODRDNy42ODM0MiA1Ljg5NzMyIDguMzE2NTkgNS44OTczMiA4LjcwNzExIDYuMjg3ODRMMTIuNDU5NiAxMC4wNDA0WiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC45Ii8+PC9zdmc+);
+}
+.wd-card-icon-fold--left {
+  margin-right: 0.5rem;
+}
+.wd-card-icon-fold--right {
+  margin-left: 0.5rem;
+}
+
+.wd-h5-card-root .wd-card-icon-fold {
+  width: 20px;
+  height: 20px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE1LjU3NDUgMTIuNUwxNC40MjU1IDEzLjY0OUwxMCA5LjIyMzU3TDUuNTc0NTMgMTMuNjQ5TDQuNDI1NDggMTIuNUw5LjExNjEyIDcuODA5MzZDOS42MDQyOCA3LjMyMTIgMTAuMzk1NyA3LjMyMTIgMTAuODgzOSA3LjgwOTM2TDE1LjU3NDUgMTIuNVoiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuOSIvPjwvc3ZnPg==);
+}

package/components/wd-checkbox-list/index.js

@@ -0,0 +1,170 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+import classNames from '../../utils/classnames';
+import itemBehavior from '../form-field-behavior/item-behavior';
+import { callWedaApi } from '../../utils/tcb';
+import destr from '../../utils/destr';
+import { isObjHasProp, arrayToMap, getSelected, isObj } from '../../utils/tool';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {},
+  data: {
+    checkboxCls: '',
+    classPrefix: WD_PREFIX,
+    options: [],
+    enumOptions: [],
+    checkedItemValue: {},
+    readValue: '-',
+    selectedLabel: null,
+    selectedItem: null,
+    itemMap: {},
+  },
+  methods: {
+    handleClick: function (e) {
+      // 禁用项
+      const item = e.currentTarget.dataset.item;
+      if (item?.disabled) return;
+
+      const { disabled, readOnly } = this.properties;
+      const { checkedItemValue } = this.data;
+      const value = e.currentTarget.dataset.value;
+      const checked = !checkedItemValue[value];
+      const newMap = Object.assign({}, checkedItemValue, {
+        [value]: checked,
+      });
+      if (!disabled && !readOnly) {
+        const value = Object.entries(newMap)
+          .filter(([, checked]) => checked)
+          .map(([value]) => value);
+        this.setData({ checkedItemValue: newMap });
+        this.setData({ value });
+        this.triggerEvent('change', { value });
+      }
+    },
+    updateWidgetAPI: function () {
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        selectedItem,
+      } = this.data;
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        selectedLabel,
+        item: selectedItem,
+      });
+    },
+    // 加上选中
+    getOptions: function (options, value) {
+      if (!Array.isArray(options)) return [];
+      if (!Array.isArray(value)) return options;
+      const opts = options.map((item) => {
+        const checked = value.find((val) => `${val}` === `${item.value}`);
+        return {
+          ...item,
+          value: item.value,
+          label: item.label,
+          checked: !!checked,
+        };
+      });
+      return opts;
+    },
+    _fetchData: async function () {
+      let data = await callWedaApi({
+        action: 'DescribeGeneralOptionsDetailList',
+        data: {
+          OptNameList: [this.properties.enumName],
+          PageIndex: 1,
+          PageSize: 10,
+        },
+      });
+      const config = destr(data?.Items?.[0]?.Config) ?? [];
+      const enumOption = config.map((item) => {
+        return {
+          ...item,
+          label: item.value,
+          value: item.key,
+          checked: false,
+        };
+      });
+      this.setData({ enumOptions: enumOption });
+      const opts = this.getOptions(enumOption, this.properties.value);
+      this.setData({ options: opts });
+    },
+  },
+  observers: {
+    direction: function (direction) {
+      const { classPrefix } = this.data;
+      const compClassName = `${classPrefix}-checkbox-group `;
+      const classList = [compClassName];
+      if (['inline'].includes(direction)) {
+        classList.push(`${classPrefix}-checkbox-group--inline `);
+      }
+      this.setData({ checkboxCls: classNames(classList) });
+    },
+    'format, range, value': function (format, rawRange, value) {
+      const range = (Array.isArray(rawRange) ? rawRange : []).filter((item) =>
+        isObjHasProp(item, 'value')
+      );
+      const options = format !== 'x-enum' ? range : this.data.enumOptions;
+      const opts = this.getOptions(options, value);
+      this.setData({ options: opts });
+    },
+    'options, readOnly': function (options, readOnly) {
+      const tempValue = {};
+      const tempLabel = [];
+      options.forEach(({ value, label, checked }) => {
+        tempValue[value] = !!checked;
+        if (checked) {
+          tempLabel.push(label);
+        }
+      });
+      this.setData({
+        checkedItemValue: tempValue,
+      });
+      if (readOnly && tempLabel.length > 0) {
+        this.setData({ readValue: tempLabel.join('，') });
+      } else {
+        this.setData({ readValue: '-' });
+      }
+    },
+    options: function (options) {
+      const list = (Array.isArray(options) ? options : []).filter((item) =>
+        isObj(item)
+      );
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const tidyOptions = list.map(({ checked, ...rest }) => rest);
+      const itemMap = arrayToMap(tidyOptions, 'value');
+      this.setData({ itemMap });
+    },
+    'itemMap, value': function (itemMap, value) {
+      const { selectedLabel, selectedItem } = getSelected(itemMap, value, true);
+      this.setData({ selectedLabel, selectedItem });
+    },
+    'format, enumName': function (format, enumName) {
+      if (format === 'x-enum' && enumName) {
+        this._fetchData();
+      }
+    },
+    'name, value, label, required, visible, disabled, readOnly, selectedLabel, selectedItem':
+      function () {
+        this.updateWidgetAPI();
+      },
+  },
+});

package/components/wd-checkbox-list/index.json

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

package/components/wd-checkbox-list/index.wxml

@@ -0,0 +1,37 @@
+<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}}"
+    disabled="{{disabled}}"
+    readOnly="{{readOnly}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    borderedH5="{{borderedH5}}"
+    readValue="{{readValue}}"
+    classRoot="checkbox"
+    size="xs"
+  >
+    <view class="{{checkboxCls}}">
+      <block wx:for="{{options}}" wx:key="index" wx:for-item="option">
+        <label class="{{classPrefix}}-checkbox-wrap size-lg {{(disabled || option.disabled) ? 'is-disabled' : ''}} {{checkedItemValue[option.value] ? 'is-checked' : ''}} {{isAll ? 'is-indeterminate' : ''}} checkbox{{index+1}}" bindtap="handleClick" data-value="{{option.value}}" data-item="{{option}}">
+          <checkbox class="{{classPrefix}}-checkbox-input" value="{{option.value}}" checked="{{!!checkedItemValue[option.value]}}" disabled="{{disabled}}" />
+          <text class="{{classPrefix}}-checkbox-inner" />
+          <block wx:if="{{option.label}}">
+            <text class="{{classPrefix}}-checkbox-label" style="cursor: none">{{option.label}}</text>
+          </block>
+        </label>
+      </block>
+    </view>
+  </wd-form-item>
+</block>

package/components/wd-checkbox-list/index.wxss

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

package/components/wd-checkbox-list/wd-checkbox-list.wxss

@@ -0,0 +1,253 @@
+.wd-checkbox-group,
+.wd-checkbox-wrap {
+  --wd-checkbox-wrap-margin-btm: 0.75rem;
+  --wd-checkbox-wrap-mg-lf: calc(var(--wd-space-base) * 4);
+  --wd-checkbox-inner-border: var(--wd-color-gray-4);
+  --wd-checkbox-inner-border-hover: var(--wd-color-brand);
+  --wd-checkbox-inner-bg: var(--wd-font-white-1);
+  --wd-checkbox-inner-bg-disabled: var(--wd-color-gray-2);
+  --wd-checkbox-inner-after-width: calc(var(--wd-space-base) * 2);
+  --wd-checkbox-inner-after-height: calc(var(--wd-space-base) * 2);
+  --wd-checkbox-inner-border-color: var(--wd-font-white-1);
+  --wd-checkbox-inner-after-bg: var(--wd-white);
+  --wd-checkbox-inner-after-bg-checked: var(--wd-color-brand);
+  --wd-checkbox-inner-after-bg-checked-disabled: var(--wd-color-text-disabled);
+  --wd-checkbox-label-pd-lf: calc(var(--wd-space-base) * 2);
+  --wd-checkbox-label-font-weight: var(--wd-font-weight-regular);
+  --wd-checkbox-label-bg: transparent;
+  --wd-checkbox-label-font-color: var(--wd-color-text-default);
+  --wd-checkbox-label-font-color-disabled: var(--wd-color-text-disabled);
+  --wd-checkbox-height-sm: 0.875rem;
+  --wd-checkbox-width-sm: 0.875rem;
+  --wd-checkbox-inner-border-radius-sm: 0.109375rem;
+  --wd-checkbox-label-font-size-sm: var(--wd-font-size-2);
+  --wd-checkbox-inner-after-checked-width-sm: 0.27375rem;
+  --wd-checkbox-inner-after-checked-hight-sm: 0.491875rem;
+  --wd-checkbox-inner-after-checked-border-width-sm: 0.125rem;
+  --wd-checkbox-inner-after-top-sm: 0.3125rem;
+  --wd-checkbox-inner-after-left-sm: 0.16625rem;
+  --wd-checkbox-inner-after-all-width-sm: 0.4375rem;
+  --wd-checkbox-inner-after-all-hight-sm: 0.109375rem;
+  --wd-checkbox-height-md: calc(var(--wd-space-base) * 4);
+  --wd-checkbox-width-md: calc(var(--wd-space-base) * 4);
+  --wd-checkbox-inner-border-radius-md: 0.125rem;
+  --wd-checkbox-label-font-size-md: var(--wd-font-size-3);
+  --wd-checkbox-inner-after-checked-width-md: 0.3125rem;
+  --wd-checkbox-inner-after-checked-hight-md: 0.5625rem;
+  --wd-checkbox-inner-after-checked-border-width-md: 0.125rem;
+  --wd-checkbox-inner-after-top-md: 0.375rem;
+  --wd-checkbox-inner-after-left-md: 0.1875rem;
+  --wd-checkbox-inner-after-all-width-md: 0.5rem;
+  --wd-checkbox-inner-after-all-hight-md: 0.125rem;
+  --wd-checkbox-height-lg: calc(var(--wd-space-base) * 5);
+  --wd-checkbox-width-lg: calc(var(--wd-space-base) * 5);
+  --wd-checkbox-inner-border-radius-lg: 0.15625rem;
+  --wd-checkbox-label-font-size-lg: var(--wd-font-size-4);
+  --wd-checkbox-inner-after-checked-width-lg: 0.3725rem;
+  --wd-checkbox-inner-after-checked-hight-lg: 0.71875rem;
+  --wd-checkbox-inner-after-checked-border-width-lg: 0.15625rem;
+  --wd-checkbox-inner-after-top-lg: 0.484375rem;
+  --wd-checkbox-inner-after-left-lg: var(--wd-space-base);
+  --wd-checkbox-inner-after-all-width-lg: 0.625rem;
+  --wd-checkbox-inner-after-all-hight-lg: 0.15625rem;
+}
+
+.wd-checkbox {
+  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;
+  position: relative;
+}
+.wd-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.wd-checkbox-group--inline {
+  flex-direction: flow;
+  flex-flow: wrap;
+}
+.wd-checkbox-group--inline .wd-checkbox-wrap {
+  width: auto;
+  margin-inline-start: 0;
+  margin-bottom: 0px;
+  margin-inline-end: var(--wd-checkbox-wrap-mg-lf);
+}
+.wd-checkbox-group--inline .wd-checkbox-wrap + .wd-checkbox-wrap {
+  margin-top: 0px;
+}
+.wd-checkbox-wrap {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  margin-bottom: 0;
+}
+.wd-checkbox-wrap + .wd-checkbox-wrap {
+  margin-top: var(--wd-checkbox-wrap-margin-btm);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-inner {
+  cursor: not-allowed;
+  border: 1px solid var(--wd-checkbox-inner-border);
+  background-color: var(--wd-checkbox-inner-bg-disabled);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-inner:hover:not(.is-disabled) {
+  border-color: var(--wd-checkbox-inner-border);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-inner::after {
+  background-color: var(--wd-checkbox-inner-bg-disabled);
+}
+.wd-checkbox-wrap.is-disabled .wd-checkbox-label {
+  cursor: not-allowed;
+}
+.wd-checkbox-wrap.is-checked .wd-checkbox-inner {
+  border: 1px solid var(--wd-checkbox-inner-after-bg-checked);
+  background-color: var(--wd-checkbox-inner-after-bg-checked);
+}
+.wd-checkbox-wrap.is-checked .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-checked-width-md);
+  height: var(--wd-checkbox-inner-after-checked-hight-md);
+  border: var(--wd-checkbox-inner-after-checked-border-width-md) solid var(--wd-checkbox-inner-border-color);
+  border-radius: 0 0 1px;
+  border-top: 0;
+  border-left: 0;
+  -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  transform: rotate(45deg) scale(1) translate(-50%, -50%);
+  background: transparent;
+}
+.wd-checkbox-wrap.is-checked.is-disabled .wd-checkbox-inner {
+  cursor: not-allowed;
+  border: 1px solid var(--wd-checkbox-inner-border);
+  background-color: var(--wd-checkbox-inner-bg-disabled);
+}
+.wd-checkbox-wrap.is-checked.is-disabled .wd-checkbox-inner:hover:not(.is-disabled) {
+  border-color: var(--wd-checkbox-inner-border);
+}
+.wd-checkbox-wrap.is-checked.is-disabled .wd-checkbox-inner::after {
+  border-color: var(--wd-checkbox-inner-after-bg-checked-disabled);
+}
+.wd-checkbox-wrap.is-indeterminate .wd-checkbox-inner {
+  border: 1px solid var(--wd-checkbox-inner-after-bg-checked);
+  background-color: var(--wd-checkbox-inner-after-bg-checked);
+}
+.wd-checkbox-wrap.is-indeterminate .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-all-width-md);
+  background: var(--wd-checkbox-inner-border-color);
+  height: var(--wd-checkbox-inner-after-all-hight-md);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-wrap.is-checked .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-checked-width-md);
+  height: var(--wd-checkbox-inner-after-checked-hight-md);
+  border: var(--wd-checkbox-inner-after-checked-border-width-md) solid var(--wd-checkbox-inner-border-color);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-wrap.is-indeterminate .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-md);
+  left: var(--wd-checkbox-inner-after-left-md);
+  width: var(--wd-checkbox-inner-after-all-width-md);
+  height: var(--wd-checkbox-inner-after-all-hight-md);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-inner {
+  width: var(--wd-checkbox-width-md);
+  height: var(--wd-checkbox-height-md);
+  border-radius: var(--wd-checkbox-inner-border-radius-md);
+}
+.wd-checkbox-wrap.size-md .wd-checkbox-label {
+  font-size: var(--wd-checkbox-label-font-size-md);
+  line-height: var(--wd-checkbox-width-md);
+}
+.wd-checkbox-wrap.size-sm .wd-checkbox-inner {
+  width: var(--wd-checkbox-width-sm);
+  height: var(--wd-checkbox-height-sm);
+  border-radius: var(--wd-checkbox-inner-border-radius-sm);
+}
+.wd-checkbox-wrap.size-sm .wd-checkbox-label {
+  font-size: var(--wd-checkbox-label-font-size-sm);
+  line-height: var(--wd-checkbox-width-sm);
+}
+.wd-checkbox-wrap.size-sm.is-checked .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-sm);
+  left: var(--wd-checkbox-inner-after-left-sm);
+  width: var(--wd-checkbox-inner-after-checked-width-sm);
+  height: var(--wd-checkbox-inner-after-checked-hight-sm);
+  border-width: var(--wd-checkbox-inner-after-checked-border-width-sm);
+}
+.wd-checkbox-wrap.size-sm.is-indeterminate .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-sm);
+  left: var(--wd-checkbox-inner-after-left-sm);
+  width: var(--wd-checkbox-inner-after-all-width-sm);
+  height: var(--wd-checkbox-inner-after-all-hight-sm);
+}
+.wd-checkbox-wrap.size-lg .wd-checkbox-inner {
+  width: var(--wd-checkbox-width-lg);
+  height: var(--wd-checkbox-height-lg);
+  border-radius: var(--wd-checkbox-inner-border-radius-lg);
+}
+.wd-checkbox-wrap.size-lg .wd-checkbox-label {
+  font-size: var(--wd-checkbox-label-font-size-lg);
+  line-height: var(--wd-checkbox-height-lg);
+}
+.wd-checkbox-wrap.size-lg.is-checked .wd-checkbox-inner::after {
+  top: var(--wd-checkbox-inner-after-top-lg);
+  left: var(--wd-checkbox-inner-after-left-lg);
+  width: var(--wd-checkbox-inner-after-checked-width-lg);
+  height: var(--wd-checkbox-inner-after-checked-hight-lg);
+  border-width: var(--wd-checkbox-inner-after-checked-border-width-lg);
+}
+.wd-checkbox-wrap.size-lg.is-indeterminate .wd-checkbox-inner::after {
+  opacity: 1;
+  top: var(--wd-checkbox-inner-after-top-lg);
+  left: var(--wd-checkbox-inner-after-left-lg);
+  width: var(--wd-checkbox-inner-after-all-width-lg);
+  height: var(--wd-checkbox-inner-after-all-hight-lg);
+}
+.wd-checkbox-input, .wd-checkbox-input[type=checkbox][disabled] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+.wd-checkbox-inner {
+  flex: none;
+  margin-right: var(--wd-checkbox-label-pd-lf);
+  width: var(--wd-checkbox-width-md);
+  height: var(--wd-checkbox-height-md);
+  display: inline-block;
+  border: 1px solid var(--wd-checkbox-inner-border);
+  border-radius: var(--wd-checkbox-inner-border-radius-md);
+  position: relative;
+  background-color: var(--wd-checkbox-inner-bg);
+  cursor: pointer;
+}
+.wd-checkbox-inner:hover:not(.is-disabled) {
+  border-color: var(--wd-checkbox-inner-border-hover);
+}
+.wd-checkbox-inner::after {
+  content: "";
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.wd-checkbox-label {
+  cursor: pointer;
+  background: var(--wd-checkbox-label-bg);
+  color: var(--wd-checkbox-label-font-color);
+  font-size: var(--wd-checkbox-label-font-size-md);
+  font-weight: var(--wd-checkbox-label-font-weight);
+  line-height: var(--wd-checkbox-height-md);
+}

package/components/wd-date/calendar/index.js

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {
+  convertValueToDateItem,
+  convertYearMonthToWeeks,
+  convertDayjs,
+  convertDateItemToValue,
+  getYMD,
+  getStartMoment,
+} from '../../../utils/getFormLegacy.js';
+import { WD_PREFIX, WEEKS } from '../../../utils/constant';
+
+/**
+ * 日历组件
+ */
+Component({
+  options: { virtualHost: true },
+  properties: {
+    value: {
+      type: null,
+    },
+    start: {
+      type: null,
+    },
+    end: {
+      type: null,
+    },
+    mode: {
+      type: String,
+      value: 'day',
+    },
+    isWheelChange: {
+      type: Boolean,
+      value: false,
+    },
+  },
+  data: {
+    classPrefix: WD_PREFIX,
+    WEEKS,
+
+    currentValue: null, // 当前选中值，默认当天
+    yearMonthDisplay: '', // 年月展示
+    yearMonthValue: null, // 当前年月值
+    showMode: 'day', // day|month
+    weeks: [],
+    ymd: '',
+  },
+  methods: {
+    // 切换模式
+    handleClickMode: function () {
+      const showMode = this.data.showMode === 'day' ? 'month' : 'day';
+      this.setData({ showMode });
+    },
+    // 选年月
+    handleSelectYearMonth: function (e) {
+      const value = e.detail.value;
+      this.setData({ yearMonthValue: value });
+      if (this.properties.isWheelChange) {
+        this.setData({ currentValue: value });
+        this.triggerEvent('onChange', { value });
+      }
+    },
+    // 选月
+    handleSelectMonth: function (diff = 0) {
+      const dateItem = convertValueToDateItem(this.data.yearMonthValue);
+      const month = dateItem.month + diff;
+      const value = convertDateItemToValue({ ...dateItem, month });
+      this.setData({ yearMonthValue: value });
+    },
+    // 选天
+    handleSelectDay: function (e) {
+      const item = e.currentTarget.dataset.item;
+      if (item.disabled) return;
+      const { yearMonthValue } = this.data;
+      const dateItem = convertValueToDateItem(yearMonthValue);
+      const currentValue = convertDateItemToValue({
+        ...dateItem,
+        day: item.day,
+      });
+      this.setData({ currentValue });
+      this.triggerEvent('onChange', { value: currentValue });
+    },
+    handlePreMonth: function () {
+      this.handleSelectMonth(-1);
+    },
+    handletNextMonth: function () {
+      this.handleSelectMonth(1);
+    },
+  },
+  observers: {
+    'value,mode': function (value, mode) {
+      if (this.data.currentValue && value === this.data.currentValue) return;
+      const m = convertDayjs(value) || getStartMoment(mode);
+      const currentValue = m.valueOf();
+      this.setData({ currentValue });
+    },
+    currentValue: function (currentValue) {
+      const m = convertDayjs(currentValue);
+      const dateItem = convertValueToDateItem(m);
+      const ymd = getYMD(dateItem);
+      const yearMonthDisplay = m.format('YYYY年MM月');
+      this.setData({ yearMonthDisplay, ymd, yearMonthValue: currentValue });
+    },
+    'yearMonthValue, start, end': function (yearMonthValue, start, end) {
+      const m = convertDayjs(yearMonthValue);
+      const yearMonthDisplay = m?.format('YYYY年MM月');
+      const { year, month } = convertValueToDateItem(yearMonthValue);
+      const weeks = convertYearMonthToWeeks(year, month, [start, end]);
+      this.setData({ weeks, yearMonthDisplay });
+    },
+  },
+});