wedux-ui 0.1.0

package/miniprogram_dist/components/time-picker/time-picker.js

@@ -0,0 +1,136 @@
+const pad = (n) => String(n).padStart(2, '0');
+
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: String, value: '' },
+    placeholder: { type: String, value: '请选择时间' },
+    disabled: { type: Boolean, value: false },
+    readonly: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    status: { type: String, value: '' },
+    clearable: { type: Boolean, value: false },
+    format: { type: String, value: 'HH:mm:ss' },
+    hourStep: { type: Number, value: 1 },
+    minuteStep: { type: Number, value: 1 },
+    secondStep: { type: Number, value: 1 },
+  },
+
+  data: {
+    _visible: false,
+    _hours: [],
+    _minutes: [],
+    _seconds: [],
+    _pickerValue: [0, 0, 0],
+    _displayText: '',
+    _showSeconds: true,
+  },
+
+  lifetimes: {
+    attached() {
+      this._buildColumns();
+      this._syncFromValue();
+    },
+  },
+
+  observers: {
+    value() {
+      this._syncFromValue();
+    },
+    format(fmt) {
+      this.setData({ _showSeconds: fmt.includes('ss') });
+    },
+    'hourStep, minuteStep, secondStep'() {
+      this._buildColumns();
+      this._syncFromValue();
+    },
+  },
+
+  methods: {
+    _buildColumns() {
+      const { hourStep, minuteStep, secondStep, format: fmt } = this.data;
+      const hours = [];
+      const minutes = [];
+      const seconds = [];
+      for (let i = 0; i < 24; i += hourStep) hours.push(pad(i));
+      for (let i = 0; i < 60; i += minuteStep) minutes.push(pad(i));
+      for (let i = 0; i < 60; i += secondStep) seconds.push(pad(i));
+      this.setData({
+        _hours: hours,
+        _minutes: minutes,
+        _seconds: seconds,
+        _showSeconds: fmt.includes('ss'),
+      });
+    },
+
+    _findIndex(arr, val) {
+      const padded = pad(val);
+      const idx = arr.indexOf(padded);
+      if (idx >= 0) return idx;
+      for (let i = 0; i < arr.length; i++) {
+        if (parseInt(arr[i], 10) >= val) return i;
+      }
+      return 0;
+    },
+
+    _syncFromValue() {
+      const { value, _hours, _minutes, _seconds } = this.data;
+      if (!_hours.length) return;
+      const parts = (value || '').split(':').map(Number);
+      const hours = parts[0] || 0;
+      const minutes = parts[1] || 0;
+      const seconds = parts[2] || 0;
+      this.setData({
+        _pickerValue: [
+          this._findIndex(_hours, hours),
+          this._findIndex(_minutes, minutes),
+          this._findIndex(_seconds, seconds),
+        ],
+        _displayText: value || '',
+      });
+    },
+
+    handleTap() {
+      if (this._isDisabled() || this.data.readonly) return;
+      this._syncFromValue();
+      this.setData({ _visible: true });
+    },
+
+    handlePickerChange(e) {
+      this.setData({ _pickerValue: e.detail.value });
+    },
+
+    handleConfirm() {
+      const { _pickerValue, _hours, _minutes, _seconds, _showSeconds } = this.data;
+      const h = _hours[_pickerValue[0]] || '00';
+      const m = _minutes[_pickerValue[1]] || '00';
+      const s = _seconds[_pickerValue[2]] || '00';
+      const val = _showSeconds ? `${h}:${m}:${s}` : `${h}:${m}`;
+      this.setData({ _visible: false, _displayText: val });
+      this.triggerEvent('update:value', { value: val });
+      this.triggerEvent('confirm', { value: val });
+      this._notifyChange();
+    },
+
+    handleCancel() {
+      this.setData({ _visible: false });
+      this._syncFromValue();
+    },
+
+    handleClear(e) {
+      this.triggerEvent('update:value', { value: '' });
+      this.triggerEvent('clear');
+      this.setData({ _displayText: '' });
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/time-picker/time-picker.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "w-drawer": "../drawer/drawer"
+  }
+}

package/miniprogram_dist/components/time-picker/time-picker.scss

@@ -0,0 +1,135 @@
+@import '../../styles/iconfont.scss';
+
+.w-time-picker__trigger {
+  display: flex;
+  align-items: center;
+  height: var(--size-input-height);
+  padding: 0 var(--spacing-md);
+  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;
+  gap: var(--spacing-xs);
+}
+
+.w-time-picker--size-medium .w-time-picker__trigger,
+.w-time-picker--size-medium.w-time-picker__trigger {
+  height: var(--size-input-height-md);
+}
+
+.w-time-picker--size-small .w-time-picker__trigger,
+.w-time-picker--size-small.w-time-picker__trigger {
+  height: var(--size-input-height-sm);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.w-time-picker--disabled {
+  background: var(--color-input-bg-disabled);
+  opacity: 0.6;
+}
+
+.w-time-picker--error {
+  border-color: var(--color-input-border-error);
+}
+
+.w-time-picker--warning {
+  border-color: var(--color-input-border-warning);
+}
+
+.w-time-picker__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.w-time-picker__clock {
+  font-size: 32rpx;
+  color: var(--color-text-secondary);
+  line-height: 1;
+}
+
+.w-time-picker__text {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-size: inherit;
+}
+
+.w-time-picker__placeholder {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-placeholder);
+  font-size: inherit;
+}
+
+.w-time-picker__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36rpx;
+  height: 36rpx;
+  flex-shrink: 0;
+}
+
+.w-time-picker__clear-icon {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  background: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16rpx;
+  color: var(--color-bg-elevated);
+  line-height: 1;
+}
+
+/* Panel */
+.w-time-picker__panel {
+  background: var(--color-bg-elevated);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.w-time-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1rpx solid var(--color-separator);
+}
+
+.w-time-picker__btn {
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
+}
+
+.w-time-picker__btn--primary {
+  color: var(--color-brand);
+  font-weight: 500;
+}
+
+.w-time-picker__title {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.w-time-picker__picker {
+  width: 100%;
+  height: 528rpx;
+}
+
+.w-time-picker__indicator {
+  height: 88rpx;
+}
+
+.w-time-picker__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+}

package/miniprogram_dist/components/time-picker/time-picker.wxml

@@ -0,0 +1,47 @@
+<view class="w-time-picker">
+  <view
+    class="w-time-picker__trigger w-time-picker--size-{{size || _formItemSize || 'medium'}} {{(disabled || _formItemDisabled) ? 'w-time-picker--disabled' : ''}} {{readonly ? 'w-time-picker--readonly' : ''}} {{status === 'error' ? 'w-time-picker--error' : ''}} {{status === 'warning' ? 'w-time-picker--warning' : ''}}"
+    bindtap="handleTap"
+  >
+    <text wx:if="{{_displayText}}" class="w-time-picker__text">{{_displayText}}</text>
+    <text wx:else class="w-time-picker__placeholder">{{placeholder}}</text>
+    <view
+      wx:if="{{clearable && _displayText && !disabled && !_formItemDisabled && !readonly}}"
+      class="w-time-picker__clear"
+      catchtap="handleClear"
+    >
+      <text class="w-time-picker__clear-icon iconfont icon-close"></text>
+    </view>
+    <view wx:else class="w-time-picker__icon">
+      <text class="w-time-picker__clock iconfont icon-clock"></text>
+    </view>
+  </view>
+
+  <w-drawer show="{{_visible}}" placement="bottom" round bind:update:show="handleCancel">
+    <view class="w-time-picker__panel">
+      <view class="w-time-picker__header">
+        <view class="w-time-picker__btn" bindtap="handleCancel">取消</view>
+        <view class="w-time-picker__title">选择时间</view>
+        <view class="w-time-picker__btn w-time-picker__btn--primary" bindtap="handleConfirm">
+          确认
+        </view>
+      </view>
+      <picker-view
+        class="w-time-picker__picker"
+        value="{{_pickerValue}}"
+        indicator-class="w-time-picker__indicator"
+        bindchange="handlePickerChange"
+      >
+        <picker-view-column>
+          <view wx:for="{{_hours}}" wx:key="*this" class="w-time-picker__item">{{item}}</view>
+        </picker-view-column>
+        <picker-view-column>
+          <view wx:for="{{_minutes}}" wx:key="*this" class="w-time-picker__item">{{item}}</view>
+        </picker-view-column>
+        <picker-view-column wx:if="{{_showSeconds}}">
+          <view wx:for="{{_seconds}}" wx:key="*this" class="w-time-picker__item">{{item}}</view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </w-drawer>
+</view>

package/miniprogram_dist/components/tooltip/tooltip.js

@@ -0,0 +1,179 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    content: {
+      type: String,
+      value: '',
+    },
+    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;
+      }
+      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-tooltip__trigger').boundingClientRect();
+      query.select('.w-tooltip__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;
+
+        let [main, align] = this.data.placement.split('-');
+
+        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-tooltip__arrow--${main}`;
+
+        if (main === 'top' || main === 'bottom') {
+          bodyStyle += main === 'top' ? `bottom: ${tH + gap}px;` : `top: ${tH + gap}px;`;
+
+          let bodyLeft = align === 'start' ? 0 : align === 'end' ? tW - bW : (tW - bW) / 2;
+
+          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;`;
+          arrowStyle = `left: ${tW / 2 - bodyLeft}px;`;
+        } else {
+          bodyStyle += main === 'left' ? `right: ${tW + gap}px;` : `left: ${tW + gap}px;`;
+
+          let bodyTop = align === 'start' ? 0 : align === 'end' ? tH - bH : (tH - bH) / 2;
+
+          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;`;
+          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/tooltip/tooltip.json

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

package/miniprogram_dist/components/tooltip/tooltip.scss

@@ -0,0 +1,66 @@
+$arrow-size: 16rpx;
+
+.w-tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.w-tooltip__trigger {
+  display: inline-block;
+}
+
+.w-tooltip__body {
+  position: absolute;
+  z-index: 1000;
+  background-color: var(--color-tooltip-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-float);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &--active {
+    opacity: 1;
+  }
+}
+
+.w-tooltip__content {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-tooltip-text);
+  white-space: nowrap;
+  line-height: 1.5;
+}
+
+/* Arrow base */
+.w-tooltip__arrow {
+  position: absolute;
+  width: $arrow-size;
+  height: $arrow-size;
+  background-color: var(--color-tooltip-bg);
+  transform: rotate(45deg);
+  z-index: 1;
+
+  &--top {
+    bottom: -$arrow-size / 2;
+    left: 50%;
+    margin-left: -$arrow-size / 2;
+  }
+
+  &--bottom {
+    top: -$arrow-size / 2;
+    left: 50%;
+    margin-left: -$arrow-size / 2;
+  }
+
+  &--left {
+    right: -$arrow-size / 2;
+    top: 50%;
+    margin-top: -$arrow-size / 2;
+  }
+
+  &--right {
+    left: -$arrow-size / 2;
+    top: 50%;
+    margin-top: -$arrow-size / 2;
+  }
+}

package/miniprogram_dist/components/tooltip/tooltip.wxml

@@ -0,0 +1,17 @@
+<view class="w-tooltip">
+  <view class="w-tooltip__trigger" bindtap="handleTriggerTap">
+    <slot name="trigger" />
+  </view>
+  <view
+    wx:if="{{_visible}}"
+    class="w-tooltip__body {{_active ? 'w-tooltip__body--active' : ''}}"
+    style="{{_bodyStyle}}"
+  >
+    <view
+      wx:if="{{showArrow}}"
+      class="w-tooltip__arrow {{_arrowClass}}"
+      style="{{_arrowStyle}}"
+    ></view>
+    <view class="w-tooltip__content">{{content}}</view>
+  </view>
+</view>