wedux-ui 0.1.0

package/miniprogram_dist/components/card/card.wxml

@@ -0,0 +1,31 @@
+<view
+  class="w-card w-card--{{size}} {{bordered ? 'w-card--bordered' : ''}} {{hoverable ? 'w-card--hoverable' : ''}} {{segmented ? 'w-card--segmented' : ''}}"
+  hover-class="{{hoverable ? 'w-card--pressed' : 'none'}}"
+  hover-stay-time="100"
+  bindtap="handleTap"
+>
+  <view class="w-card__cover">
+    <view class="w-card__cover-inner">
+      <slot name="cover"></slot>
+    </view>
+  </view>
+
+  <view wx:if="{{title}}" class="w-card__header">
+    <view class="w-card__header-main">{{title}}</view>
+    <view class="w-card__header-extra">
+      <slot name="header-extra"></slot>
+    </view>
+  </view>
+
+  <view class="w-card__body {{_hasHeader ? 'w-card__body--no-top-pad' : ''}}">
+    <slot></slot>
+  </view>
+
+  <view class="w-card__footer">
+    <slot name="footer"></slot>
+  </view>
+
+  <view class="w-card__action">
+    <slot name="action"></slot>
+  </view>
+</view>

package/miniprogram_dist/components/checkbox/checkbox.js

@@ -0,0 +1,43 @@
+Component({
+  relations: {
+    '../checkbox-group/checkbox-group': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: null, value: '' },
+    disabled: { type: Boolean, value: false },
+    label: { type: String, value: '' },
+    indeterminate: { type: Boolean, value: false },
+  },
+
+  data: {
+    _groupSize: '',
+    _groupDisabled: false,
+    _checked: false,
+    _maxReached: false,
+  },
+
+  methods: {
+    _setGroupContext(ctx) {
+      const checked = (ctx.currentValues || []).indexOf(this.data.value) >= 0;
+      const maxReached = ctx.max > 0 && (ctx.currentValues || []).length >= ctx.max && !checked;
+      this.setData({
+        _groupSize: ctx.size || '',
+        _groupDisabled: ctx.disabled || false,
+        _checked: checked,
+        _maxReached: maxReached,
+      });
+    },
+
+    handleTap() {
+      if (this.data.disabled || this.data._groupDisabled) return;
+      if (this.data._maxReached && !this.data._checked) return;
+      const parent = this.getRelationNodes('../checkbox-group/checkbox-group');
+      if (parent && parent.length > 0) {
+        parent[0]._handleChildChange(this.data.value, !this.data._checked);
+      }
+    },
+  },
+});

package/miniprogram_dist/components/checkbox/checkbox.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/checkbox/checkbox.scss

@@ -0,0 +1,77 @@
+.w-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.w-checkbox__box {
+  width: var(--size-checkbox);
+  height: var(--size-checkbox);
+  border-radius: var(--radius-sm);
+  border: 2rpx solid var(--color-separator);
+  position: relative;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s;
+}
+
+.w-checkbox--checked .w-checkbox__box {
+  background: var(--color-checkbox-checked);
+  border-color: var(--color-checkbox-checked);
+}
+
+.w-checkbox--indeterminate .w-checkbox__box {
+  background: var(--color-checkbox-checked);
+  border-color: var(--color-checkbox-checked);
+}
+
+.w-checkbox__check {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20rpx;
+  height: 12rpx;
+  border-left: 3rpx solid transparent;
+  border-bottom: 3rpx solid transparent;
+  transform: translate(-50%, -50%) rotate(-45deg);
+  margin-top: -2rpx;
+  transition: border-color 0.2s;
+}
+
+.w-checkbox--checked .w-checkbox__check {
+  border-left-color: var(--color-checkbox-check);
+  border-bottom-color: var(--color-checkbox-check);
+}
+
+.w-checkbox__indeterminate {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 18rpx;
+  height: 3rpx;
+  background: transparent;
+  border-radius: 2rpx;
+  transition: background-color 0.2s;
+}
+
+.w-checkbox--indeterminate .w-checkbox__indeterminate {
+  background: var(--color-checkbox-check);
+}
+
+.w-checkbox__label {
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  line-height: 1.4;
+}
+
+.w-checkbox--size-small .w-checkbox__label {
+  font-size: var(--font-size-sm);
+}
+
+.w-checkbox--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/checkbox/checkbox.wxml

@@ -0,0 +1,13 @@
+<view
+  class="w-checkbox {{_checked ? 'w-checkbox--checked' : ''}} {{indeterminate ? 'w-checkbox--indeterminate' : ''}} {{(disabled || _groupDisabled || _maxReached) ? 'w-checkbox--disabled' : ''}} w-checkbox--size-{{_groupSize || 'medium'}}"
+  bindtap="handleTap"
+>
+  <view class="w-checkbox__box">
+    <view wx:if="{{indeterminate}}" class="w-checkbox__indeterminate"></view>
+    <view wx:else class="w-checkbox__check"></view>
+  </view>
+  <view class="w-checkbox__label">
+    <text wx:if="{{label}}">{{label}}</text>
+    <slot wx:else></slot>
+  </view>
+</view>

package/miniprogram_dist/components/checkbox-button/checkbox-button.js

@@ -0,0 +1,43 @@
+Component({
+  relations: {
+    '../checkbox-group/checkbox-group': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: null, value: '' },
+    disabled: { type: Boolean, value: false },
+    label: { type: String, value: '' },
+    round: { type: Boolean, value: false },
+  },
+
+  data: {
+    _groupSize: '',
+    _groupDisabled: false,
+    _checked: false,
+    _maxReached: false,
+  },
+
+  methods: {
+    _setGroupContext(ctx) {
+      const checked = (ctx.currentValues || []).indexOf(this.data.value) >= 0;
+      const maxReached = ctx.max > 0 && (ctx.currentValues || []).length >= ctx.max && !checked;
+      this.setData({
+        _groupSize: ctx.size || '',
+        _groupDisabled: ctx.disabled || false,
+        _checked: checked,
+        _maxReached: maxReached,
+      });
+    },
+
+    handleTap() {
+      if (this.data.disabled || this.data._groupDisabled) return;
+      if (this.data._maxReached && !this.data._checked) return;
+      const parent = this.getRelationNodes('../checkbox-group/checkbox-group');
+      if (parent && parent.length > 0) {
+        parent[0]._handleChildChange(this.data.value, !this.data._checked);
+      }
+    },
+  },
+});

package/miniprogram_dist/components/checkbox-button/checkbox-button.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/checkbox-button/checkbox-button.scss

@@ -0,0 +1,39 @@
+.w-checkbox-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-base);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-md);
+  line-height: 1;
+  box-sizing: border-box;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.w-checkbox-button--size-medium {
+  height: var(--size-tag-height-lg);
+  padding: 0 var(--spacing-lg);
+}
+
+.w-checkbox-button--size-small {
+  height: var(--size-tag-height-md);
+  padding: 0 var(--spacing-md);
+  font-size: var(--font-size-sm);
+}
+
+.w-checkbox-button--checked {
+  background: var(--color-brand);
+  color: var(--color-text-anti);
+}
+
+.w-checkbox-button--round {
+  border-radius: var(--radius-full);
+}
+
+.w-checkbox-button--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/checkbox-button/checkbox-button.wxml

@@ -0,0 +1,8 @@
+<view
+  class="w-checkbox-button {{_checked ? 'w-checkbox-button--checked' : ''}} {{(disabled || _groupDisabled || _maxReached) ? 'w-checkbox-button--disabled' : ''}} w-checkbox-button--size-{{_groupSize || 'medium'}} {{round ? 'w-checkbox-button--round' : ''}}"
+  hover-class="none"
+  bindtap="handleTap"
+>
+  <text wx:if="{{label}}">{{label}}</text>
+  <slot wx:else></slot>
+</view>

package/miniprogram_dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,84 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+    '../checkbox/checkbox': {
+      type: 'descendant',
+      linked() {
+        this._updateChildren();
+      },
+      linkChanged() {
+        this._updateChildren();
+      },
+      unlinked() {
+        this._updateChildren();
+      },
+    },
+    '../checkbox-button/checkbox-button': {
+      type: 'descendant',
+      linked() {
+        this._updateChildren();
+      },
+      linkChanged() {
+        this._updateChildren();
+      },
+      unlinked() {
+        this._updateChildren();
+      },
+    },
+  },
+
+  properties: {
+    value: { type: Array, value: [] },
+    disabled: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    vertical: { type: Boolean, value: false },
+    max: { type: Number, value: 0 },
+  },
+
+  data: {},
+
+  observers: {
+    'value, disabled, size, max, _formItemSize, _formItemDisabled'() {
+      this._updateChildren();
+    },
+  },
+
+  methods: {
+    _updateChildren() {
+      const checkboxes = this.getRelationNodes('../checkbox/checkbox') || [];
+      const checkboxButtons = this.getRelationNodes('../checkbox-button/checkbox-button') || [];
+      const children = [...checkboxes, ...checkboxButtons];
+      if (!children.length) return;
+      const ctx = {
+        size: this.data.size || this.data._formItemSize,
+        disabled: this.data.disabled || this.data._formItemDisabled,
+        currentValues: this.data.value || [],
+        max: this.data.max,
+      };
+      children.forEach((child) => {
+        child._setGroupContext(ctx);
+      });
+    },
+
+    _handleChildChange(childValue, checked) {
+      const values = (this.data.value || []).slice();
+      if (checked) {
+        if (this.data.max > 0 && values.length >= this.data.max) return;
+        if (values.indexOf(childValue) === -1) {
+          values.push(childValue);
+        }
+      } else {
+        const idx = values.indexOf(childValue);
+        if (idx >= 0) values.splice(idx, 1);
+      }
+      this.triggerEvent('update:value', { value: values });
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/checkbox-group/checkbox-group.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/checkbox-group/checkbox-group.scss

@@ -0,0 +1,9 @@
+.w-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+}
+
+.w-checkbox-group--vertical {
+  flex-direction: column;
+}

package/miniprogram_dist/components/checkbox-group/checkbox-group.wxml

@@ -0,0 +1,3 @@
+<view class="w-checkbox-group {{vertical ? 'w-checkbox-group--vertical' : ''}}">
+  <slot></slot>
+</view>