@cloudbase/weda-ui-mp 3.6.0

package/components/wd-button/wd-button.wxss

@@ -0,0 +1,498 @@
+.wd-btn {
+  --wd-btn-sm-padding: 0.0625rem calc(var(--wd-space-base) * 2);
+  --wd-btn-md-padding: 0.25rem calc(var(--wd-space-base) * 4);
+  --wd-btn-lg-padding: 0.4375rem calc(var(--wd-space-base) * 6);
+  --wd-btn-margin-top: 0;
+  --wd-btn-margin-top: 0;
+  --wd-btn-font-size-sm: var(--wd-font-size-2);
+  --wd-btn-line-height-sm: 1.5;
+  --wd-btn-min-height-sm: 24px;
+  --wd-btn-font-size-md: var(--wd-font-size-3);
+  --wd-btn-line-height-md: 1.5;
+  --wd-btn-min-height-md: 32px;
+  --wd-btn-font-size-lg: var(--wd-font-size-4);
+  --wd-btn-line-height-lg: 1.5;
+  --wd-btn-min-height-lg: 40px;
+  --wd-btn-icon-space-sm: var(--wd-space-base);
+  --wd-btn-icon-space-md: calc(var(--wd-space-base) * 2);
+  --wd-btn-icon-space-lg: calc(var(--wd-space-base) * 3);
+  --wd-btn-icon-size-sm: calc(var(--wd-btn-font-size-sm) + 0.125rem);
+  --wd-btn-icon-size-md: calc(var(--wd-btn-font-size-md) + 0.125rem);
+  --wd-btn-icon-size-lg: calc(var(--wd-btn-font-size-lg) + 0.25rem);
+  --wd-btn-border-radius: var(--wd-border-radius);
+  --wd-btn-color-text: var(--wd-color-text-default);
+  --wd-btn-color-text-inverse: var(--wd-color-text-inverse);
+  --wd-btn-color-text-hover: var(--wd-color-text-default);
+  --wd-btn-color-text-active: var(--wd-color-text-default);
+  --wd-btn-color-text-focus: var(--wd-color-text-default);
+  --wd-btn-color-text-disabled: var(--wd-color-text-disabled);
+  --wd-btn-color-brand: var(--wd-color-brand);
+  --wd-btn-color-brand-hover: var(--wd-color-brand-hover);
+  --wd-btn-color-brand-active: var(--wd-color-brand-active);
+  --wd-btn-color-brand-focus: var(--wd-color-brand-focus);
+  --wd-btn-color-brand-disabled: var(--wd-color-brand-disabled);
+  --wd-btn-color-warning: var(--wd-color-warning);
+  --wd-btn-color-warning-hover: var(--wd-color-warning-hover);
+  --wd-btn-color-warning-active: var(--wd-color-warning-active);
+  --wd-btn-color-warning-focus: var(--wd-color-warning-focus);
+  --wd-btn-color-warning-disabled: var(--wd-color-warning-disabled);
+  --wd-btn-color-error: var(--wd-color-error);
+  --wd-btn-color-error-hover: var(--wd-color-error-hover);
+  --wd-btn-color-error-active: var(--wd-color-error-active);
+  --wd-btn-color-error-focus: var(--wd-color-error-focus);
+  --wd-btn-color-error-disabled: var(--wd-color-error-disabled);
+  --wd-btn-color-gray: var(
+    --wd-color-gray-1
+  );
+  --wd-btn-color-gray-hover: var(--wd-color-gray-4);
+  --wd-btn-color-gray-active: var(--wd-color-gray-6);
+  --wd-btn-color-gray-focus: var(--wd-color-gray-3);
+  --wd-btn-color-gray-disabled: var(--wd-color-gray-2);
+  --wd-btn-color-gray-border: var(--wd-color-border-default);
+  --wd-btn-color-gray-border-hover: var(--wd-color-border-hover);
+  --wd-btn-color-gray-border-active: var(--wd-color-gray-6);
+  --wd-btn-color-gray-border-disabled: var(--wd-color-border-default);
+  --wd-btn-color-white: var(--wd-white);
+  --wd-btn-color-white-hover: var(--wd-color-gray-1);
+  --wd-btn-color-white-active: var(--wd-color-gray-3);
+  --wd-btn-color-white-disabled: var(--wd-color-gray-2);
+}
+
+.wd-h5-btn {
+  --wd-btn-sm-padding: 0.25rem calc(var(--wd-space-base) * 4);
+  --wd-btn-md-padding: 0.4375rem calc(var(--wd-space-base) * 6);
+  --wd-btn-lg-padding: 0.6875rem calc(var(--wd-space-base) * 6);
+  --wd-btn-font-size-sm: var(--wd-font-size-3);
+  --wd-btn-line-height-sm: 1.5;
+  --wd-btn-min-height-sm: 32px;
+  --wd-btn-font-size-md: var(--wd-font-size-4);
+  --wd-btn-line-height-md: 1.5;
+  --wd-btn-min-height-md: 40px;
+  --wd-btn-font-size-lg: var(--wd-font-size-5);
+  --wd-btn-line-height-lg: 1.3;
+  --wd-btn-min-height-lg: 48px;
+  --wd-btn-icon-space-sm: calc(var(--wd-space-base) * 2);
+  --wd-btn-icon-space-md: calc(var(--wd-space-base) * 3);
+  --wd-btn-icon-space-lg: calc(var(--wd-space-base) * 3);
+  --wd-btn-icon-size-sm: calc(var(--wd-btn-font-size-sm) + 0.125rem);
+  --wd-btn-icon-size-md: calc(var(--wd-btn-font-size-md) + 0.25rem);
+  --wd-btn-icon-size-lg: calc(var(--wd-btn-font-size-lg) + 0.375rem);
+}
+
+.wd-mp-btn {
+  --wd-btn-sm-padding: 0.25rem calc(var(--wd-space-base) * 4);
+  --wd-btn-md-padding: 0.4375rem calc(var(--wd-space-base) * 6);
+  --wd-btn-lg-padding: 0.6875rem calc(var(--wd-space-base) * 6);
+  --wd-btn-font-size-sm: var(--wd-font-size-3);
+  --wd-btn-line-height-sm: 1.5;
+  --wd-btn-min-height-sm: 32px;
+  --wd-btn-font-size-md: var(--wd-font-size-4);
+  --wd-btn-line-height-md: 1.5;
+  --wd-btn-min-height-md: 40px;
+  --wd-btn-font-size-lg: var(--wd-font-size-5);
+  --wd-btn-line-height-lg: 1.3;
+  --wd-btn-min-height-lg: 48px;
+  --wd-btn-icon-space-sm: calc(var(--wd-space-base) * 2);
+  --wd-btn-icon-space-md: calc(var(--wd-space-base) * 3);
+  --wd-btn-icon-space-lg: calc(var(--wd-space-base) * 3);
+  --wd-btn-icon-size-sm: calc(var(--wd-btn-font-size-sm) + 0.125rem);
+  --wd-btn-icon-size-md: calc(var(--wd-btn-font-size-md) + 0.25rem);
+  --wd-btn-icon-size-lg: calc(var(--wd-btn-font-size-lg) + 0.375rem);
+}
+
+.wd-btn {
+  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;
+  text-align: center;
+  display: inline-flex;
+  cursor: pointer;
+  outline: 0 none;
+  text-decoration: none;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: var(--wd-btn-border-radius);
+  user-select: none;
+  border: 1px solid transparent;
+  background-color: transparent;
+  margin-top: var(--wd-btn-margin-top);
+  margin-bottom: var(--wd-btn-margin-bottom);
+}
+.wd-btn.is-disabled {
+  cursor: not-allowed;
+}
+.wd-btn__icon {
+  line-height: 1;
+}
+.wd-btn--icon .wd-btn__text {
+  line-height: 1;
+}
+.wd-btn--base {
+  background-color: var(--wd-btn-color-gray);
+  border-color: var(--wd-btn-color-gray);
+  color: var(--wd-btn-color-text);
+}
+.wd-btn--base:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-gray-hover);
+  border-color: var(--wd-btn-color-gray-hover);
+}
+.wd-btn--base:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-gray-active);
+  border-color: var(--wd-btn-color-gray-active);
+}
+.wd-btn--base.is-disabled {
+  background-color: var(--wd-btn-color-gray-disabled);
+  border-color: var(--wd-btn-color-gray-disabled);
+  color: var(--wd-btn-color-text-disabled);
+}
+.wd-btn--base.wd-btn--primary {
+  background-color: var(--wd-btn-color-brand);
+  border-color: var(--wd-btn-color-brand);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--base.wd-btn--primary:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-brand-hover);
+  border-color: var(--wd-btn-color-brand-hover);
+}
+.wd-btn--base.wd-btn--primary:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-brand-active);
+  border-color: var(--wd-btn-color-brand-active);
+}
+.wd-btn--base.wd-btn--primary.is-disabled {
+  background-color: var(--wd-btn-color-brand-disabled);
+  border-color: var(--wd-btn-color-brand-disabled);
+}
+.wd-btn--base.wd-btn--warning {
+  background-color: var(--wd-btn-color-warning);
+  border-color: var(--wd-btn-color-warning);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--base.wd-btn--warning:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-warning-hover);
+  border-color: var(--wd-btn-color-warning-hover);
+}
+.wd-btn--base.wd-btn--warning:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-warning-active);
+  border-color: var(--wd-btn-color-warning-active);
+}
+.wd-btn--base.wd-btn--warning.is-disabled {
+  background-color: var(--wd-btn-color-warning-disabled);
+  border-color: var(--wd-btn-color-warning-disabled);
+}
+.wd-btn--base.wd-btn--error {
+  background-color: var(--wd-btn-color-error);
+  border-color: var(--wd-btn-color-error);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--base.wd-btn--error:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-error-hover);
+  border-color: var(--wd-btn-color-error-hover);
+}
+.wd-btn--base.wd-btn--error:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-error-active);
+  border-color: var(--wd-btn-color-error-active);
+}
+.wd-btn--base.wd-btn--error.is-disabled {
+  background-color: var(--wd-btn-color-error-disabled);
+  border-color: var(--wd-btn-color-error-disabled);
+}
+.wd-btn--outline {
+  border-color: var(--wd-btn-color-gray-border);
+  color: var(--wd-btn-color-text);
+}
+.wd-btn--outline:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-hover);
+  border-color: var(--wd-btn-color-gray-border-hover);
+}
+.wd-btn--outline:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-active);
+  border-color: var(--wd-btn-color-gray-border-active);
+}
+.wd-btn--outline.is-disabled {
+  background-color: var(--wd-btn-color-white-disabled);
+  border-color: var(--wd-btn-color-gray-border-disabled);
+  color: var(--wd-btn-color-text-disabled);
+}
+.wd-btn--outline.wd-btn--primary {
+  border-color: var(--wd-btn-color-brand);
+  color: var(--wd-btn-color-brand);
+}
+.wd-btn--outline.wd-btn--primary:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-brand);
+  border-color: var(--wd-btn-color-brand);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--outline.wd-btn--primary:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-brand-active);
+  border-color: var(--wd-btn-color-brand-active);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--outline.wd-btn--primary.is-disabled {
+  background-color: transparent;
+  border-color: var(--wd-btn-color-brand-disabled);
+  color: var(--wd-btn-color-brand-disabled);
+}
+.wd-btn--outline.wd-btn--warning {
+  border-color: var(--wd-btn-color-warning);
+  color: var(--wd-btn-color-warning);
+}
+.wd-btn--outline.wd-btn--warning:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-warning);
+  border-color: var(--wd-btn-color-warning);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--outline.wd-btn--warning:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-warning-active);
+  border-color: var(--wd-btn-color-warning-active);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--outline.wd-btn--warning.is-disabled {
+  background-color: transparent;
+  border-color: var(--wd-btn-color-warning-disabled);
+  color: var(--wd-btn-color-warning-disabled);
+}
+.wd-btn--outline.wd-btn--error {
+  border-color: var(--wd-btn-color-error);
+  color: var(--wd-btn-color-error);
+}
+.wd-btn--outline.wd-btn--error:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-error);
+  border-color: var(--wd-btn-color-error);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--outline.wd-btn--error:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-error-active);
+  border-color: var(--wd-btn-color-error-active);
+  color: var(--wd-btn-color-text-inverse);
+}
+.wd-btn--outline.wd-btn--error.is-disabled {
+  background-color: transparent;
+  border-color: var(--wd-btn-color-error-disabled);
+  color: var(--wd-btn-color-error-disabled);
+}
+.wd-btn--text {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-text);
+}
+.wd-btn--text:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-hover);
+  border-color: var(--wd-btn-color-white-hover);
+}
+.wd-btn--text:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-active);
+  border-color: var(--wd-btn-color-white-active);
+}
+.wd-btn--text.is-disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-text-disabled);
+}
+.wd-btn--text.wd-btn--primary {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-brand);
+}
+.wd-btn--text.wd-btn--primary:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-hover);
+  border-color: var(--wd-btn-color-white-hover);
+  color: var(--wd-btn-color-brand-hover);
+}
+.wd-btn--text.wd-btn--primary:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-active);
+  border-color: var(--wd-btn-color-white-active);
+  color: var(--wd-btn-color-brand-active);
+}
+.wd-btn--text.wd-btn--primary.is-disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-brand-disabled);
+}
+.wd-btn--text.wd-btn--warning {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-warning);
+}
+.wd-btn--text.wd-btn--warning:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-hover);
+  border-color: var(--wd-btn-color-white-hover);
+  color: var(--wd-btn-color-warning-hover);
+}
+.wd-btn--text.wd-btn--warning:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-active);
+  border-color: var(--wd-btn-color-white-active);
+  color: var(--wd-btn-color-warning-active);
+}
+.wd-btn--text.wd-btn--warning.is-disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-warning-disabled);
+}
+.wd-btn--text.wd-btn--error {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-error);
+}
+.wd-btn--text.wd-btn--error:hover:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-hover);
+  border-color: var(--wd-btn-color-white-hover);
+  color: var(--wd-btn-color-error-hover);
+}
+.wd-btn--text.wd-btn--error:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-active);
+  border-color: var(--wd-btn-color-white-active);
+  color: var(--wd-btn-color-error-active);
+}
+.wd-btn--text.wd-btn--error.is-disabled {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--wd-btn-color-error-disabled);
+}
+.wd-btn--link {
+  color: var(--wd-btn-color-text);
+}
+.wd-btn--link:hover:not(.is-disabled) {
+  text-decoration: underline;
+}
+.wd-btn--link.is-disabled {
+  color: var(--wd-btn-color-text-disabled);
+}
+.wd-btn--link.wd-btn--primary {
+  color: var(--wd-btn-color-brand);
+}
+.wd-btn--link.wd-btn--primary.is-disabled {
+  color: var(--wd-btn-color-brand-disabled);
+}
+.wd-btn--link.wd-btn--warning {
+  color: var(--wd-btn-color-warning);
+}
+.wd-btn--link.wd-btn--warning.is-disabled {
+  color: var(--wd-btn-color-warning-disabled);
+}
+.wd-btn--link.wd-btn--error {
+  color: var(--wd-btn-color-error);
+}
+.wd-btn--link.wd-btn--error.is-disabled {
+  color: var(--wd-btn-color-error-disabled);
+}
+.wd-btn--sm {
+  padding: var(--wd-btn-sm-padding);
+  font-size: var(--wd-btn-font-size-sm);
+  line-height: var(--wd-btn-line-height-sm);
+  min-height: var(--wd-btn-min-height-sm);
+}
+.wd-btn--sm.wd-btn--icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+}
+.wd-btn--sm.wd-btn--icon,
+.wd-btn--sm .wd-btn__icon {
+  font-size: var(--wd-btn-icon-size-sm);
+}
+.wd-btn--sm.wd-btn--icon.wd-icon--inherit,
+.wd-btn--sm .wd-btn__icon.wd-icon--inherit {
+  font-size: inherit;
+  width: auto;
+  height: auto;
+}
+.wd-btn--sm .wd-btn__icon {
+  width: var(--wd-btn-icon-size-sm);
+  height: var(--wd-btn-icon-size-sm);
+}
+.wd-btn--sm .wd-btn__before-icon {
+  margin-right: var(--wd-btn-icon-space-sm);
+}
+.wd-btn--sm .wd-btn__after-icon {
+  margin-left: var(--wd-btn-icon-space-sm);
+}
+.wd-btn--sm.wd-btn--link {
+  padding: 0;
+  font-size: var(--wd-btn-font-size-sm);
+  line-height: var(--wd-btn-line-height-sm);
+}
+.wd-btn--md {
+  padding: var(--wd-btn-md-padding);
+  font-size: var(--wd-btn-font-size-md);
+  line-height: var(--wd-btn-line-height-md);
+  min-height: var(--wd-btn-min-height-md);
+}
+.wd-btn--md.wd-btn--icon {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+.wd-btn--md.wd-btn--icon,
+.wd-btn--md .wd-btn__icon {
+  font-size: var(--wd-btn-icon-size-md);
+}
+.wd-btn--md.wd-btn--icon.wd-icon--inherit,
+.wd-btn--md .wd-btn__icon.wd-icon--inherit {
+  font-size: inherit;
+  width: auto;
+  height: auto;
+}
+.wd-btn--md .wd-btn__icon {
+  width: var(--wd-btn-icon-size-md);
+  height: var(--wd-btn-icon-size-md);
+}
+.wd-btn--md .wd-btn__before-icon {
+  margin-right: var(--wd-btn-icon-space-md);
+}
+.wd-btn--md .wd-btn__after-icon {
+  margin-left: var(--wd-btn-icon-space-md);
+}
+.wd-btn--md.wd-btn--link {
+  padding: 0;
+  font-size: var(--wd-btn-font-size-md);
+  line-height: var(--wd-btn-line-height-md);
+}
+.wd-btn--lg {
+  padding: var(--wd-btn-lg-padding);
+  font-size: var(--wd-btn-font-size-lg);
+  line-height: var(--wd-btn-line-height-lg);
+  min-height: var(--wd-btn-min-height-lg);
+}
+.wd-btn--lg.wd-btn--icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+}
+.wd-btn--lg.wd-btn--icon,
+.wd-btn--lg .wd-btn__icon {
+  font-size: var(--wd-btn-icon-size-lg);
+}
+.wd-btn--lg.wd-btn--icon.wd-icon--inherit,
+.wd-btn--lg .wd-btn__icon.wd-icon--inherit {
+  font-size: inherit;
+  width: auto;
+  height: auto;
+}
+.wd-btn--lg .wd-btn__icon {
+  width: var(--wd-btn-icon-size-lg);
+  height: var(--wd-btn-icon-size-lg);
+}
+.wd-btn--lg .wd-btn__before-icon {
+  margin-right: var(--wd-btn-icon-space-lg);
+}
+.wd-btn--lg .wd-btn__after-icon {
+  margin-left: var(--wd-btn-icon-space-lg);
+}
+.wd-btn--lg.wd-btn--link {
+  padding: 0;
+  font-size: var(--wd-btn-font-size-lg);
+  line-height: var(--wd-btn-line-height-lg);
+}
+.wd-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+button::after {
+  border: none;
+}

package/components/wd-calendar/arrowright--line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1208 12.5768L8.45992 20L7.52031 19.0875L14.8362 11.9986L7.52032 4.91249L8.45994 4L16.0959 11.3961C16.1063 11.4048 16.1165 11.4139 16.1264 11.4235L16.3483 11.639C16.5507 11.8355 16.5505 12.1605 16.3479 12.3568L16.1456 12.5528L16.1254 12.5725C16.1239 12.574 16.1223 12.5754 16.1208 12.5768Z" fill="black" fill-opacity="0.6"/>
+</svg>

package/components/wd-calendar/index.js

@@ -0,0 +1,157 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { commonCompBehavior } from '../../utils/common-behavior';
+import {
+  getStartMoment,
+  convertValueToDateItem,
+  getYMD,
+  convertMethodParam,
+} from '../../utils/getFormLegacy';
+import { WEEKS, getConfigDataObj, convertWeeks } from './weeks';
+
+Component({
+  behaviors: [commonCompBehavior],
+  externalClasses: ['ext-class'],
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    initVisible: {
+      type: Boolean,
+      value: true,
+    },
+    value: {
+      type: null,
+    },
+    initMonth: {
+      type: null,
+    },
+    configData: {
+      type: Array,
+      value: [],
+    },
+  },
+  data: {
+    currentValue: null, // 时间戳
+    currentMonthValue: null, // 时间戳
+    yearMonthDisplay: '',
+    checkedDay: '',
+    configDataObj: null,
+    weeks: [],
+    WEEKS,
+
+    _oldCurrentValue: null, // 用于对比，避免触发 setData
+    _oldCurrentMonthValue: null, // 用于对比，避免触发 setData
+  },
+  methods: {
+    updateWidgetAPI: function () {
+      const { configData, initVisible } = this.properties;
+      const { currentValue, currentMonthValue } = this.data;
+      const that = this;
+      this.setReadonlyAttributes?.({
+        value: currentValue,
+        initMonth: currentMonthValue,
+        configData,
+        initVisible,
+        setValue: that._setValue.bind(that),
+        setInitMonth: that._setInitMonth.bind(that),
+      });
+    },
+    // 更改属性，内部转成时间戳
+    _setValue: function (v) {
+      const value = convertMethodParam(v);
+      this.setData({ value });
+    },
+    // 更改属性，内部转成时间戳
+    _setInitMonth: function (v) {
+      const value = convertMethodParam(v);
+      this.setData({ initMonth: value });
+    },
+    // 切换年月, -1/1: 上一月/下一月
+    handleChangeMonth(e) {
+      const { diff = 0 } = e.currentTarget?.dataset || {};
+      const { currentMonthValue } = this.data;
+      const { year, month } = convertValueToDateItem(currentMonthValue);
+      const _month = month + diff;
+      const v = new Date(year, _month).valueOf();
+      const value = getStartMoment('month', v).valueOf();
+      this.setData({ currentMonthValue: value });
+      this.triggerEvent('changeMonth', { value });
+    },
+    // 选中日期
+    handleChange(e) {
+      const { item = {} } = e.currentTarget?.dataset || {};
+      const { year, month, day, disabled, isPre, isNext } = item;
+      if (disabled) return;
+      const v = new Date(year, month, day).valueOf();
+      const value = getStartMoment('day', v, false)?.valueOf();
+      this.setData({ currentValue: value });
+      this.triggerEvent('change', { value });
+      if (isPre || isNext) {
+        const monthValue = getStartMoment('month', v)?.valueOf();
+        this.setData({ currentMonthValue: monthValue });
+        this.triggerEvent('changeMonth', { value: monthValue });
+      }
+    },
+  },
+  observers: {
+    'currentValue,currentMonthValue,configData,initVisible': function () {
+      this.updateWidgetAPI();
+    },
+    // 初始日期、初始年月，防止 $w.now() 这种输入
+    'value, initMonth': function (value, initMonth) {
+      const { _oldCurrentValue, _oldCurrentMonthValue } = this.data;
+      const currentValue = getStartMoment('day', value, false)?.valueOf();
+      const currentMonthValue = getStartMoment('month', initMonth)?.valueOf();
+      if (
+        currentValue !== _oldCurrentValue ||
+        currentMonthValue !== _oldCurrentMonthValue
+      ) {
+        this.setData({
+          currentValue,
+          currentMonthValue,
+          _oldCurrentValue: currentValue,
+          _oldCurrentMonthValue: currentMonthValue,
+        });
+      }
+    },
+    // 初始配置项
+    configData: function (configData) {
+      const configDataObj = getConfigDataObj(configData);
+      this.setData({ configDataObj });
+    },
+    currentValue: function (currentValue) {
+      const dateItem = currentValue ? convertValueToDateItem(currentValue) : {};
+      const checkedDay = getYMD(dateItem);
+      this.setData({ checkedDay });
+    },
+    'currentMonthValue,configDataObj': function (
+      currentMonthValue,
+      configDataObj
+    ) {
+      const { year, month } = convertValueToDateItem(currentMonthValue);
+      const weeks = convertWeeks(year, month, configDataObj);
+      const yearMonthDisplay = `${year}年${month + 1}月`;
+      this.setData({ weeks, yearMonthDisplay });
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      if (this.properties.value == null) {
+        this.setData({ value: Date.now() });
+      }
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-calendar/index.json

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

package/components/wd-calendar/index.wxml

@@ -0,0 +1,36 @@
+<view class="{{className}} weda-calendar" style="{{style}}" id="{{id}}">
+  <view class="weda-calendar__control">
+    <view class="weda-calendar__prevMonth" wx:if="{{initVisible}}" data-diff="{{-1}}" bindtap="handleChangeMonth">
+      <image class="weda-calendar__prevMonth-icon" src="arrowright--line.svg" mode="widthFix" />
+    </view>
+    <view class="weda-calendar__current-date">{{yearMonthDisplay}}</view>
+    <view class="weda-calendar__nextMonth" wx:if="{{initVisible}}" data-diff="{{1}}" bindtap="handleChangeMonth">
+      <image class="weda-calendar__nextMonth-icon" src="arrowright--line.svg" mode="widthFix" />
+    </view>
+  </view>
+
+  <view class="weda-calendar__panel">
+    <view class="weda-calendar__table">
+      <view class="weda-calendar__table-head">
+        <view class="weda-calendar__table-head-row">
+          <view class="weda-calendar__table-head-cell" wx:for="{{WEEKS}}" wx:key="*this"> {{item}} </view>
+        </view>
+      </view>
+      <view class="weda-calendar__table-body">
+        <block wx:for="{{weeks}}" wx:for-item="week" wx:key="index">
+          <view class="weda-calendar__table-body-row">
+            <block wx:for="{{week}}" wx:key="ymd">
+              <view class="weda-calendar__table-body-cell {{item.disabled ? 'is-disabled' : ''}} {{checkedDay === item.ymd ? 'is-checked': ''}} {{checkedDay !== item.ymd && (item.isNext || item.isPre) ? 'is-invalid' : ''}}" bindtap="handleChange" data-item="{{item}}">
+                <view class="weda-calendar__table-body-cell-value">
+                  {{item.day}}
+                  <view class="weda-calendar__table-body-cell-bg"></view>
+                  <view wx:if="{{item.marked}}" class="weda-calendar__table-body-cell-marked" style="background: {{item.marked}}"></view>
+                </view>
+              </view>
+            </block>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</view>