wedux-ui 0.1.0

package/miniprogram_dist/components/popover/popover.js

@@ -0,0 +1,183 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    show: {
+      type: Boolean,
+      value: false,
+    },
+    trigger: {
+      type: String,
+      value: 'tap',
+    },
+    placement: {
+      type: String,
+      value: 'top',
+    },
+    showArrow: {
+      type: Boolean,
+      value: true,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _visible: false,
+    _active: false,
+    _bodyStyle: '',
+    _arrowStyle: '',
+    _arrowClass: '',
+  },
+
+  observers: {
+    show(val) {
+      if (val && !this.data._visible) {
+        this._open();
+      } else if (!val && this.data._visible) {
+        this._close();
+      }
+    },
+  },
+
+  lifetimes: {
+    detached() {
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer);
+        this._closeTimer = null;
+      }
+    },
+  },
+
+  methods: {
+    _open() {
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer);
+        this._closeTimer = null;
+      }
+      // Render body first (opacity 0) so we can measure its size
+      this.setData({ _visible: true }, () => {
+        this._updatePosition(() => {
+          setTimeout(() => this.setData({ _active: true }), 30);
+        });
+      });
+    },
+
+    _close() {
+      this.setData({ _active: false });
+      this._closeTimer = setTimeout(() => {
+        this.setData({ _visible: false });
+        this._closeTimer = null;
+      }, 200);
+    },
+
+    _updatePosition(cb) {
+      const query = this.createSelectorQuery();
+      query.select('.w-popover__trigger').boundingClientRect();
+      query.select('.w-popover__body').boundingClientRect();
+      query.exec(([triggerRect, bodyRect]) => {
+        if (!triggerRect || !bodyRect) {
+          cb && cb();
+          return;
+        }
+
+        const { windowWidth, windowHeight } = wx.getWindowInfo();
+        const tW = triggerRect.width;
+        const tH = triggerRect.height;
+        const bW = bodyRect.width;
+        const bH = bodyRect.height;
+        const gap = 8;
+        const safeMargin = 4; // minimum distance from viewport edge
+
+        let [main, align] = this.data.placement.split('-');
+
+        // Flip main axis if it would overflow but the opposite side has room
+        if (
+          main === 'top' &&
+          triggerRect.top - bH - gap < safeMargin &&
+          triggerRect.bottom + bH + gap + safeMargin <= windowHeight
+        ) {
+          main = 'bottom';
+        } else if (
+          main === 'bottom' &&
+          triggerRect.bottom + bH + gap + safeMargin > windowHeight &&
+          triggerRect.top - bH - gap >= safeMargin
+        ) {
+          main = 'top';
+        } else if (
+          main === 'left' &&
+          triggerRect.left - bW - gap < safeMargin &&
+          triggerRect.right + bW + gap + safeMargin <= windowWidth
+        ) {
+          main = 'right';
+        } else if (
+          main === 'right' &&
+          triggerRect.right + bW + gap + safeMargin > windowWidth &&
+          triggerRect.left - bW - gap >= safeMargin
+        ) {
+          main = 'left';
+        }
+
+        let bodyStyle = '';
+        let arrowStyle = '';
+        const arrowClass = `w-popover__arrow--${main}`;
+
+        if (main === 'top' || main === 'bottom') {
+          bodyStyle += main === 'top' ? `bottom: ${tH + gap}px;` : `top: ${tH + gap}px;`;
+
+          // Calculate horizontal offset relative to trigger left edge
+          let bodyLeft = align === 'start' ? 0 : align === 'end' ? tW - bW : (tW - bW) / 2;
+
+          // Shift to keep body within viewport
+          const absLeft = triggerRect.left + bodyLeft;
+          const absRight = absLeft + bW;
+          if (absLeft < safeMargin) {
+            bodyLeft += safeMargin - absLeft;
+          } else if (absRight > windowWidth - safeMargin) {
+            bodyLeft -= absRight - (windowWidth - safeMargin);
+          }
+
+          bodyStyle += `left: ${bodyLeft}px;`;
+          // Arrow points to trigger center
+          arrowStyle = `left: ${tW / 2 - bodyLeft}px;`;
+        } else {
+          bodyStyle += main === 'left' ? `right: ${tW + gap}px;` : `left: ${tW + gap}px;`;
+
+          // Calculate vertical offset relative to trigger top edge
+          let bodyTop = align === 'start' ? 0 : align === 'end' ? tH - bH : (tH - bH) / 2;
+
+          // Shift to keep body within viewport
+          const absTop = triggerRect.top + bodyTop;
+          const absBottom = absTop + bH;
+          if (absTop < safeMargin) {
+            bodyTop += safeMargin - absTop;
+          } else if (absBottom > windowHeight - safeMargin) {
+            bodyTop -= absBottom - (windowHeight - safeMargin);
+          }
+
+          bodyStyle += `top: ${bodyTop}px;`;
+          // Arrow points to trigger center
+          arrowStyle = `top: ${tH / 2 - bodyTop}px;`;
+        }
+
+        this.setData({ _bodyStyle: bodyStyle, _arrowStyle: arrowStyle, _arrowClass: arrowClass });
+        cb && cb();
+      });
+    },
+
+    handleTriggerTap() {
+      if (this.data.disabled || this.data.trigger !== 'tap') return;
+      const willShow = !this.data._visible;
+      if (willShow) {
+        this._open();
+      } else {
+        this._close();
+      }
+      this.triggerEvent('update:show', { show: willShow });
+    },
+  },
+});

package/miniprogram_dist/components/popover/popover.json

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

package/miniprogram_dist/components/popover/popover.scss

@@ -0,0 +1,69 @@
+$arrow-size: 16rpx;
+
+.w-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.w-popover__trigger {
+  display: inline-block;
+}
+
+.w-popover__body {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--color-popover-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-float);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &--active {
+    opacity: 1;
+  }
+}
+
+.w-popover__content {
+  padding: var(--spacing-md) var(--spacing-lg);
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+}
+
+/* Arrow base */
+.w-popover__arrow {
+  position: absolute;
+  width: $arrow-size;
+  height: $arrow-size;
+  background-color: var(--color-popover-bg);
+  transform: rotate(45deg);
+  z-index: 1;
+
+  /* top placement: arrow at bottom of body */
+  &--top {
+    bottom: -$arrow-size / 2;
+    left: 50%;
+    margin-left: -$arrow-size / 2;
+  }
+
+  /* bottom placement: arrow at top of body */
+  &--bottom {
+    top: -$arrow-size / 2;
+    left: 50%;
+    margin-left: -$arrow-size / 2;
+  }
+
+  /* left placement: arrow at right of body */
+  &--left {
+    right: -$arrow-size / 2;
+    top: 50%;
+    margin-top: -$arrow-size / 2;
+  }
+
+  /* right placement: arrow at left of body */
+  &--right {
+    left: -$arrow-size / 2;
+    top: 50%;
+    margin-top: -$arrow-size / 2;
+  }
+}

package/miniprogram_dist/components/popover/popover.wxml

@@ -0,0 +1,19 @@
+<view class="w-popover">
+  <view class="w-popover__trigger" bindtap="handleTriggerTap">
+    <slot name="trigger" />
+  </view>
+  <view
+    wx:if="{{_visible}}"
+    class="w-popover__body {{_active ? 'w-popover__body--active' : ''}}"
+    style="{{_bodyStyle}}"
+  >
+    <view
+      wx:if="{{showArrow}}"
+      class="w-popover__arrow {{_arrowClass}}"
+      style="{{_arrowStyle}}"
+    ></view>
+    <view class="w-popover__content">
+      <slot />
+    </view>
+  </view>
+</view>

package/miniprogram_dist/components/qr-code/qr-code.js

@@ -0,0 +1,216 @@
+const { QrCode, Ecc } = require('../../libs/qrcodegen');
+
+const ECL_MAP = {
+  L: Ecc.LOW,
+  M: Ecc.MEDIUM,
+  Q: Ecc.QUARTILE,
+  H: Ecc.HIGH,
+};
+
+Component({
+  properties: {
+    value: {
+      type: String,
+      value: '',
+    },
+    size: {
+      type: Number,
+      value: 160,
+    },
+    color: {
+      type: String,
+      value: '#000000',
+    },
+    backgroundColor: {
+      type: String,
+      value: '#FFFFFF',
+    },
+    errorCorrectionLevel: {
+      type: String,
+      value: 'M',
+    },
+    padding: {
+      type: Number,
+      value: 12,
+    },
+    iconSrc: {
+      type: String,
+      value: '',
+    },
+    iconSize: {
+      type: Number,
+      value: 40,
+    },
+    iconBackgroundColor: {
+      type: String,
+      value: '#FFFFFF',
+    },
+    iconBorderRadius: {
+      type: Number,
+      value: 4,
+    },
+  },
+
+  data: {
+    _canvasSize: 0,
+    _tempImagePath: '',
+  },
+
+  lifetimes: {
+    attached() {
+      this._draw();
+    },
+  },
+
+  observers: {
+    'value, size, color, backgroundColor, errorCorrectionLevel, padding, iconSrc, iconSize, iconBackgroundColor, iconBorderRadius'() {
+      this._draw();
+    },
+  },
+
+  methods: {
+    _draw() {
+      const { value, size, padding } = this.data;
+      if (!value) return;
+
+      const canvasSize = size + padding * 2;
+      // Reset image so canvas becomes visible for drawing
+      this.setData({ _canvasSize: canvasSize, _tempImagePath: '' });
+
+      wx.nextTick(() => {
+        this.createSelectorQuery()
+          .select('#qr-canvas')
+          .fields({ node: true, size: true })
+          .exec((res) => {
+            if (!res || !res[0] || !res[0].node) return;
+
+            const canvas = res[0].node;
+            const dpr = wx.getWindowInfo().pixelRatio || 2;
+            canvas.width = canvasSize * dpr;
+            canvas.height = canvasSize * dpr;
+            const ctx = canvas.getContext('2d');
+            ctx.scale(dpr, dpr);
+
+            this._renderQr(canvas, ctx, canvasSize);
+          });
+      });
+    },
+
+    _renderQr(canvas, ctx, canvasSize) {
+      const {
+        value,
+        size,
+        color,
+        backgroundColor,
+        padding,
+        errorCorrectionLevel,
+        iconSrc,
+        iconSize,
+        iconBackgroundColor,
+        iconBorderRadius,
+      } = this.data;
+
+      // Use HIGH error correction when icon is present
+      const eclKey = iconSrc ? 'H' : errorCorrectionLevel || 'M';
+      const ecl = ECL_MAP[eclKey] || ECL_MAP.M;
+
+      let qr;
+      try {
+        qr = QrCode.encodeText(value, ecl);
+      } catch (e) {
+        console.warn('[w-qr-code] encode failed:', e.message);
+        return;
+      }
+
+      const modules = qr.getModules();
+      const moduleCount = qr.size;
+      const cellSize = size / moduleCount;
+
+      // Clear and fill background
+      ctx.clearRect(0, 0, canvasSize, canvasSize);
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, canvasSize, canvasSize);
+
+      // Draw modules
+      ctx.fillStyle = color;
+      for (let y = 0; y < moduleCount; y++) {
+        for (let x = 0; x < moduleCount; x++) {
+          if (modules[y][x]) {
+            ctx.fillRect(
+              padding + x * cellSize,
+              padding + y * cellSize,
+              Math.ceil(cellSize),
+              Math.ceil(cellSize),
+            );
+          }
+        }
+      }
+
+      // Draw icon or export immediately
+      if (iconSrc) {
+        this._drawIcon(canvas, ctx, canvasSize, iconSize, iconBackgroundColor, iconBorderRadius);
+      } else {
+        this._toImage(canvas);
+      }
+    },
+
+    _drawIcon(canvas, ctx, canvasSize, iconSize, bgColor, borderRadius) {
+      const { iconSrc } = this.data;
+      const img = canvas.createImage();
+
+      img.onload = () => {
+        const iconPadding = 4;
+        const bgSize = iconSize + iconPadding * 2;
+        const bgX = (canvasSize - bgSize) / 2;
+        const bgY = (canvasSize - bgSize) / 2;
+
+        // Draw icon background with rounded corners
+        ctx.fillStyle = bgColor;
+        this._roundRect(ctx, bgX, bgY, bgSize, bgSize, borderRadius);
+        ctx.fill();
+
+        // Draw icon centered, maintain aspect ratio
+        const ratio = Math.min(iconSize / img.width, iconSize / img.height);
+        const drawW = img.width * ratio;
+        const drawH = img.height * ratio;
+        const drawX = (canvasSize - drawW) / 2;
+        const drawY = (canvasSize - drawH) / 2;
+
+        ctx.drawImage(img, drawX, drawY, drawW, drawH);
+        this._toImage(canvas);
+      };
+
+      img.onerror = () => {
+        console.warn('[w-qr-code] icon load failed:', iconSrc);
+      };
+
+      img.src = iconSrc;
+    },
+
+    _toImage(canvas) {
+      wx.canvasToTempFilePath(
+        {
+          canvas,
+          success: (res) => {
+            this.setData({ _tempImagePath: res.tempFilePath });
+          },
+        },
+        this,
+      );
+    },
+
+    _roundRect(ctx, x, y, w, h, r) {
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.arcTo(x + w, y, x + w, y + h, r);
+      ctx.arcTo(x + w, y + h, x, y + h, r);
+      ctx.arcTo(x, y + h, x, y, r);
+      ctx.arcTo(x, y, x + w, y, r);
+      ctx.closePath();
+    },
+
+    onTap() {
+      this.triggerEvent('click');
+    },
+  },
+});

package/miniprogram_dist/components/qr-code/qr-code.json

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

package/miniprogram_dist/components/qr-code/qr-code.scss

@@ -0,0 +1,8 @@
+.w-qr-code {
+  display: inline-block;
+
+  &__canvas,
+  &__image {
+    display: block;
+  }
+}

package/miniprogram_dist/components/qr-code/qr-code.wxml

@@ -0,0 +1,16 @@
+<view class="w-qr-code" bind:tap="onTap">
+  <canvas
+    type="2d"
+    id="qr-canvas"
+    class="w-qr-code__canvas"
+    style="width: {{_canvasSize}}px; height: {{_canvasSize}}px;"
+    wx:if="{{!_tempImagePath}}"
+  ></canvas>
+  <image
+    wx:if="{{_tempImagePath}}"
+    class="w-qr-code__image"
+    src="{{_tempImagePath}}"
+    style="width: {{_canvasSize}}px; height: {{_canvasSize}}px;"
+    show-menu-by-longpress
+  />
+</view>

package/miniprogram_dist/components/radio/radio.js

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

package/miniprogram_dist/components/radio/radio.json

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

package/miniprogram_dist/components/radio/radio.scss

@@ -0,0 +1,50 @@
+.w-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.w-radio__dot {
+  width: var(--size-radio);
+  height: var(--size-radio);
+  border-radius: 50%;
+  border: 2rpx solid var(--color-separator);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.w-radio--checked .w-radio__dot {
+  border-color: var(--color-radio-checked);
+}
+
+.w-radio__dot-inner {
+  width: calc(var(--size-radio) - 16rpx);
+  height: calc(var(--size-radio) - 16rpx);
+  border-radius: 50%;
+  background: var(--color-radio-checked);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.w-radio--checked .w-radio__dot-inner {
+  opacity: 1;
+}
+
+.w-radio__label {
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  line-height: 1.4;
+}
+
+.w-radio--size-small .w-radio__label {
+  font-size: var(--font-size-sm);
+}
+
+.w-radio--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/radio/radio.wxml

@@ -0,0 +1,12 @@
+<view
+  class="w-radio {{_checked ? 'w-radio--checked' : ''}} {{(disabled || _groupDisabled) ? 'w-radio--disabled' : ''}} w-radio--size-{{_groupSize || 'medium'}}"
+  bindtap="handleTap"
+>
+  <view class="w-radio__dot">
+    <view class="w-radio__dot-inner"></view>
+  </view>
+  <view class="w-radio__label">
+    <text wx:if="{{label}}">{{label}}</text>
+    <slot wx:else></slot>
+  </view>
+</view>

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

@@ -0,0 +1,39 @@
+Component({
+  relations: {
+    '../radio-group/radio-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,
+  },
+
+  methods: {
+    _setGroupContext(ctx) {
+      this.setData({
+        _groupSize: ctx.size || '',
+        _groupDisabled: ctx.disabled || false,
+        _checked: ctx.currentValue === this.data.value,
+      });
+    },
+
+    handleTap() {
+      if (this.data.disabled || this.data._groupDisabled) return;
+      if (this.data._checked) return;
+      const parent = this.getRelationNodes('../radio-group/radio-group');
+      if (parent && parent.length > 0) {
+        parent[0]._handleChildChange(this.data.value);
+      }
+    },
+  },
+});

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

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