wedux-ui 0.1.0

package/miniprogram_dist/components/input-otp/input-otp.js

@@ -0,0 +1,106 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: String, value: '' },
+    length: { type: Number, value: 6 },
+    mask: { type: Boolean, value: false },
+    disabled: { type: Boolean, value: false },
+    readonly: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    status: { type: String, value: '' },
+    gap: { type: Number, value: 0 },
+    placeholder: { type: String, value: '' },
+    type: { type: String, value: 'number' },
+  },
+
+  data: {
+    _focused: false,
+    _slots: [],
+    _cursorIndex: 0,
+  },
+
+  observers: {
+    'value, length': function (value, length) {
+      this._syncSlots(value, length);
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      this._syncSlots(this.data.value, this.data.length);
+    },
+  },
+
+  methods: {
+    _syncSlots(value, length) {
+      const str = (value || '').slice(0, length);
+      const slots = [];
+      for (let i = 0; i < length; i++) {
+        slots.push(str[i] || '');
+      }
+      this.setData({ _slots: slots });
+    },
+
+    _doUpdateValue(newValue) {
+      const str = newValue.slice(0, this.data.length);
+      this.triggerEvent('update:value', { value: str });
+
+      this._notifyChange();
+
+      if (str.length === this.data.length) {
+        this.triggerEvent('finish', { value: str });
+      }
+    },
+
+    handleTap() {
+      if (this._isDisabled() || this.data.readonly) return;
+      this.setData({ _focused: true });
+    },
+
+    handleInput(e) {
+      let val = e.detail.value || '';
+      // Filter to allowed length
+      val = val.slice(0, this.data.length);
+      this._doUpdateValue(val);
+      // Update cursor position for visual feedback
+      this.setData({ _cursorIndex: val.length });
+    },
+
+    handleFocus() {
+      const cursorPos = (this.data.value || '').length;
+      this.setData({
+        _focused: true,
+        _cursorIndex: Math.min(cursorPos, this.data.length),
+      });
+      this.triggerEvent('focus');
+    },
+
+    handleBlur() {
+      this.setData({ _focused: false });
+      this.triggerEvent('blur');
+      this._notifyBlur();
+    },
+
+    // Public method
+    focusOnChar(charIndex) {
+      this.setData({
+        _focused: true,
+        _cursorIndex: charIndex,
+      });
+    },
+
+    clear() {
+      this._doUpdateValue('');
+      this.setData({ _focused: true, _cursorIndex: 0 });
+    },
+  },
+});

package/miniprogram_dist/components/input-otp/input-otp.json

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

package/miniprogram_dist/components/input-otp/input-otp.scss

@@ -0,0 +1,122 @@
+.w-input-otp {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  position: relative;
+}
+
+.w-input-otp__slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-otp-slot);
+  height: var(--size-otp-slot);
+  background: var(--color-input-bg);
+  border: 2rpx solid var(--color-input-border);
+  border-radius: var(--radius-md);
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+  position: relative;
+}
+
+.w-input-otp__slot--focus {
+  border-color: var(--color-input-border-focus);
+}
+
+.w-input-otp__slot--filled {
+  border-color: var(--color-text-secondary);
+}
+
+.w-input-otp__char {
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+  line-height: 1;
+}
+
+.w-input-otp__placeholder {
+  font-size: var(--font-size-xl);
+  color: var(--color-text-placeholder);
+  line-height: 1;
+}
+
+.w-input-otp__mask-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: var(--color-text-primary);
+}
+
+.w-input-otp__cursor {
+  width: 2rpx;
+  height: 40rpx;
+  background: var(--color-brand);
+  animation: w-otp-blink 1s step-end infinite;
+}
+
+@keyframes w-otp-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Hidden input - positioned off-screen but still focusable */
+.w-input-otp__hidden {
+  position: absolute;
+  left: -9999rpx;
+  width: 1rpx;
+  height: 1rpx;
+  opacity: 0;
+}
+
+/* Size variants */
+.w-input-otp--size-medium .w-input-otp__slot {
+  --size-otp-slot: 88rpx;
+}
+
+.w-input-otp--size-small .w-input-otp__slot {
+  --size-otp-slot: 72rpx;
+}
+
+.w-input-otp--size-small .w-input-otp__char,
+.w-input-otp--size-small .w-input-otp__placeholder {
+  font-size: var(--font-size-lg);
+}
+
+.w-input-otp--size-small .w-input-otp__cursor {
+  height: 32rpx;
+}
+
+.w-input-otp--size-large .w-input-otp__slot {
+  --size-otp-slot: 104rpx;
+}
+
+.w-input-otp--size-large .w-input-otp__char,
+.w-input-otp--size-large .w-input-otp__placeholder {
+  font-size: var(--font-size-h4);
+}
+
+.w-input-otp--size-large .w-input-otp__cursor {
+  height: 48rpx;
+}
+
+/* Disabled */
+.w-input-otp--disabled {
+  opacity: 0.6;
+}
+
+.w-input-otp--disabled .w-input-otp__slot {
+  background: var(--color-input-bg-disabled);
+}
+
+/* Status */
+.w-input-otp--error .w-input-otp__slot {
+  border-color: var(--color-input-border-error);
+}
+
+.w-input-otp--warning .w-input-otp__slot {
+  border-color: var(--color-input-border-warning);
+}

package/miniprogram_dist/components/input-otp/input-otp.wxml

@@ -0,0 +1,38 @@
+<view
+  class="w-input-otp w-input-otp--size-{{size || _formItemSize || 'medium'}} {{(disabled || _formItemDisabled) ? 'w-input-otp--disabled' : ''}} {{readonly ? 'w-input-otp--readonly' : ''}} {{status === 'error' ? 'w-input-otp--error' : ''}} {{status === 'warning' ? 'w-input-otp--warning' : ''}}"
+  style="{{gap ? 'gap: ' + gap + 'rpx;' : ''}}"
+  bindtap="handleTap"
+>
+  <view
+    wx:for="{{_slots}}"
+    wx:key="index"
+    class="w-input-otp__slot {{_focused && _cursorIndex === index ? 'w-input-otp__slot--focus' : ''}} {{item ? 'w-input-otp__slot--filled' : ''}}"
+  >
+    <block wx:if="{{mask && item}}">
+      <view class="w-input-otp__mask-dot"></view>
+    </block>
+    <block wx:elif="{{item}}">
+      <text class="w-input-otp__char">{{item}}</text>
+    </block>
+    <block wx:elif="{{!_focused && placeholder}}">
+      <text class="w-input-otp__placeholder">{{placeholder}}</text>
+    </block>
+    <view
+      wx:if="{{_focused && _cursorIndex === index && !item}}"
+      class="w-input-otp__cursor"
+    ></view>
+  </view>
+
+  <!-- Hidden input captures all keyboard events -->
+  <input
+    class="w-input-otp__hidden"
+    value="{{value}}"
+    type="{{type}}"
+    focus="{{_focused}}"
+    maxlength="{{length}}"
+    disabled="{{disabled || _formItemDisabled || readonly}}"
+    bindinput="handleInput"
+    bindfocus="handleFocus"
+    bindblur="handleBlur"
+  />
+</view>

package/miniprogram_dist/components/layout/layout.js

@@ -0,0 +1,50 @@
+Component({
+  properties: {
+    hasSider: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  relations: {
+    '../layout-header/layout-header': {
+      type: 'descendant',
+    },
+    '../layout-content/layout-content': {
+      type: 'descendant',
+    },
+    '../layout-footer/layout-footer': {
+      type: 'descendant',
+    },
+    '../layout-sider/layout-sider': {
+      type: 'descendant',
+      linked() {
+        this._updateHasSider();
+      },
+      linkChanged() {
+        this._updateHasSider();
+      },
+      unlinked() {
+        this._updateHasSider();
+      },
+    },
+  },
+
+  data: {
+    _hasSider: false,
+  },
+
+  observers: {
+    hasSider(val) {
+      this.setData({ _hasSider: val });
+    },
+  },
+
+  methods: {
+    _updateHasSider() {
+      const siders = this.getRelationNodes('../layout-sider/layout-sider');
+      const hasSider = this.data.hasSider || (siders && siders.length > 0);
+      this.setData({ _hasSider: hasSider });
+    },
+  },
+});

package/miniprogram_dist/components/layout/layout.json

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

package/miniprogram_dist/components/layout/layout.scss

@@ -0,0 +1,10 @@
+.w-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--layout-bg);
+
+  &--has-sider {
+    flex-direction: row;
+  }
+}

package/miniprogram_dist/components/layout/layout.wxml

@@ -0,0 +1,3 @@
+<view class="w-layout {{_hasSider ? 'w-layout--has-sider' : ''}}">
+  <slot></slot>
+</view>

package/miniprogram_dist/components/layout-content/layout-content.js

@@ -0,0 +1,47 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+
+  properties: {
+    scrollY: {
+      type: Boolean,
+      value: true,
+    },
+    scrollX: {
+      type: Boolean,
+      value: false,
+    },
+    scrollTop: {
+      type: Number,
+    },
+    scrollIntoView: {
+      type: String,
+      value: '',
+    },
+    scrollWithAnimation: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  relations: {
+    '../layout/layout': {
+      type: 'ancestor',
+    },
+  },
+
+  methods: {
+    _onScroll(e) {
+      this.triggerEvent('scroll', e.detail);
+    },
+
+    _onScrollToLower(e) {
+      this.triggerEvent('scrolltolower', e.detail);
+    },
+
+    _onScrollToUpper(e) {
+      this.triggerEvent('scrolltoupper', e.detail);
+    },
+  },
+});

package/miniprogram_dist/components/layout-content/layout-content.json

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

package/miniprogram_dist/components/layout-content/layout-content.scss

@@ -0,0 +1,5 @@
+.w-layout-content {
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+}

package/miniprogram_dist/components/layout-content/layout-content.wxml

@@ -0,0 +1,13 @@
+<scroll-view
+  class="w-layout-content"
+  scroll-y="{{scrollY}}"
+  scroll-x="{{scrollX}}"
+  scroll-top="{{scrollTop}}"
+  scroll-into-view="{{scrollIntoView}}"
+  scroll-with-animation="{{scrollWithAnimation}}"
+  bindscroll="_onScroll"
+  bindscrolltolower="_onScrollToLower"
+  bindscrolltoupper="_onScrollToUpper"
+>
+  <slot></slot>
+</scroll-view>

package/miniprogram_dist/components/layout-footer/layout-footer.js

@@ -0,0 +1,59 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+
+  properties: {
+    position: {
+      type: String,
+      value: 'fixed',
+    },
+    bordered: {
+      type: Boolean,
+      value: false,
+    },
+    safeArea: {
+      type: Boolean,
+      value: true,
+    },
+  },
+
+  relations: {
+    '../layout/layout': {
+      type: 'ancestor',
+    },
+  },
+
+  data: {
+    _placeholderHeight: 0,
+  },
+
+  lifetimes: {
+    ready() {
+      if (this.data.position === 'fixed') {
+        this._measureHeight();
+      }
+    },
+  },
+
+  observers: {
+    'position, bordered, safeArea'() {
+      if (this.data.position === 'fixed') {
+        setTimeout(() => this._measureHeight(), 50);
+      }
+    },
+  },
+
+  methods: {
+    _measureHeight() {
+      this.createSelectorQuery()
+        .select('.w-layout-footer')
+        .boundingClientRect((rect) => {
+          if (rect) {
+            this.setData({ _placeholderHeight: rect.height });
+          }
+        })
+        .exec();
+    },
+  },
+});

package/miniprogram_dist/components/layout-footer/layout-footer.json

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

package/miniprogram_dist/components/layout-footer/layout-footer.scss

@@ -0,0 +1,23 @@
+.w-layout-footer {
+  background: var(--layout-footer-bg);
+
+  &__placeholder {
+    flex-shrink: 0;
+  }
+
+  &__fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--layout-z-index);
+  }
+
+  &--bordered {
+    border-top: 1rpx solid var(--layout-border-color);
+  }
+
+  &--safe-area {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/miniprogram_dist/components/layout-footer/layout-footer.wxml

@@ -0,0 +1,16 @@
+<block wx:if="{{position === 'fixed'}}">
+  <view class="w-layout-footer__fixed">
+    <view
+      class="w-layout-footer {{bordered ? 'w-layout-footer--bordered' : ''}} {{safeArea ? 'w-layout-footer--safe-area' : ''}}"
+    >
+      <slot></slot>
+    </view>
+  </view>
+  <view class="w-layout-footer__placeholder" style="height: {{_placeholderHeight}}px"></view>
+</block>
+<view
+  wx:else
+  class="w-layout-footer {{bordered ? 'w-layout-footer--bordered' : ''}} {{safeArea ? 'w-layout-footer--safe-area' : ''}}"
+>
+  <slot></slot>
+</view>

package/miniprogram_dist/components/layout-header/layout-header.js

@@ -0,0 +1,59 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+
+  properties: {
+    position: {
+      type: String,
+      value: 'fixed',
+    },
+    bordered: {
+      type: Boolean,
+      value: false,
+    },
+    safeArea: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  relations: {
+    '../layout/layout': {
+      type: 'ancestor',
+    },
+  },
+
+  data: {
+    _placeholderHeight: 0,
+  },
+
+  lifetimes: {
+    ready() {
+      if (this.data.position === 'fixed') {
+        this._measureHeight();
+      }
+    },
+  },
+
+  observers: {
+    'position, bordered, safeArea'() {
+      if (this.data.position === 'fixed') {
+        setTimeout(() => this._measureHeight(), 50);
+      }
+    },
+  },
+
+  methods: {
+    _measureHeight() {
+      this.createSelectorQuery()
+        .select('.w-layout-header')
+        .boundingClientRect((rect) => {
+          if (rect) {
+            this.setData({ _placeholderHeight: rect.height });
+          }
+        })
+        .exec();
+    },
+  },
+});

package/miniprogram_dist/components/layout-header/layout-header.json

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

package/miniprogram_dist/components/layout-header/layout-header.scss

@@ -0,0 +1,23 @@
+.w-layout-header {
+  background: var(--layout-header-bg);
+
+  &__placeholder {
+    flex-shrink: 0;
+  }
+
+  &__fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: var(--layout-z-index);
+  }
+
+  &--bordered {
+    border-bottom: 1rpx solid var(--layout-border-color);
+  }
+
+  &--safe-area {
+    padding-top: env(safe-area-inset-top);
+  }
+}

package/miniprogram_dist/components/layout-header/layout-header.wxml

@@ -0,0 +1,16 @@
+<block wx:if="{{position === 'fixed'}}">
+  <view class="w-layout-header__placeholder" style="height: {{_placeholderHeight}}px"></view>
+  <view class="w-layout-header__fixed">
+    <view
+      class="w-layout-header {{bordered ? 'w-layout-header--bordered' : ''}} {{safeArea ? 'w-layout-header--safe-area' : ''}}"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</block>
+<view
+  wx:else
+  class="w-layout-header {{bordered ? 'w-layout-header--bordered' : ''}} {{safeArea ? 'w-layout-header--safe-area' : ''}}"
+>
+  <slot></slot>
+</view>

package/miniprogram_dist/components/layout-sider/layout-sider.js

@@ -0,0 +1,48 @@
+Component({
+  options: {
+    virtualHost: true,
+  },
+
+  properties: {
+    width: {
+      type: Number,
+      value: 160,
+    },
+    bordered: {
+      type: Boolean,
+      value: false,
+    },
+    scrollY: {
+      type: Boolean,
+      value: true,
+    },
+  },
+
+  relations: {
+    '../layout/layout': {
+      type: 'ancestor',
+    },
+  },
+
+  data: {
+    _style: '',
+  },
+
+  observers: {
+    width(val) {
+      this.setData({ _style: `width: ${val}rpx` });
+    },
+  },
+
+  lifetimes: {
+    attached() {
+      this.setData({ _style: `width: ${this.data.width}rpx` });
+    },
+  },
+
+  methods: {
+    _onScroll(e) {
+      this.triggerEvent('scroll', e.detail);
+    },
+  },
+});

package/miniprogram_dist/components/layout-sider/layout-sider.json

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