wedux-ui 0.1.0

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

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

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

@@ -0,0 +1,468 @@
+@import '../../styles/iconfont.scss';
+
+/* Trigger */
+.w-date-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-date-picker--size-medium .w-date-picker__trigger,
+.w-date-picker--size-medium.w-date-picker__trigger {
+  height: var(--size-input-height-md);
+}
+
+.w-date-picker--size-small .w-date-picker__trigger,
+.w-date-picker--size-small.w-date-picker__trigger {
+  height: var(--size-input-height-sm);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.w-date-picker--disabled {
+  background: var(--color-input-bg-disabled);
+  opacity: 0.6;
+}
+
+.w-date-picker--error {
+  border-color: var(--color-input-border-error);
+}
+
+.w-date-picker--warning {
+  border-color: var(--color-input-border-warning);
+}
+
+.w-date-picker__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.w-date-picker__calendar-icon {
+  font-size: 32rpx;
+  color: var(--color-text-secondary);
+  line-height: 1;
+}
+
+.w-date-picker__text {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-size: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w-date-picker__placeholder {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-placeholder);
+  font-size: inherit;
+}
+
+.w-date-picker__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36rpx;
+  height: 36rpx;
+  flex-shrink: 0;
+}
+
+.w-date-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-date-picker__panel {
+  background: var(--color-bg-elevated);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.w-date-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-date-picker__btn {
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
+}
+
+.w-date-picker__btn--primary {
+  color: var(--color-brand);
+  font-weight: 500;
+}
+
+.w-date-picker__title {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Range Bar */
+.w-date-picker__range-bar {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  gap: var(--spacing-sm);
+}
+
+.w-date-picker__range-bar-item {
+  flex: 1;
+  text-align: center;
+  padding: var(--spacing-xs) 0;
+  font-size: var(--font-size-md);
+  color: var(--color-text-placeholder);
+  border-bottom: 4rpx solid transparent;
+  transition:
+    color 0.2s,
+    border-color 0.2s;
+}
+
+.w-date-picker__range-bar-item--active {
+  color: var(--color-brand);
+  border-bottom-color: var(--color-brand);
+}
+
+.w-date-picker__range-bar-separator {
+  color: var(--color-text-placeholder);
+  font-size: var(--font-size-md);
+  flex-shrink: 0;
+}
+
+/* Shortcuts */
+.w-date-picker__shortcuts {
+  display: flex;
+  padding: var(--spacing-xs) var(--spacing-lg);
+  gap: var(--spacing-sm);
+}
+
+.w-date-picker__shortcut {
+  font-size: var(--font-size-sm);
+  color: var(--color-brand);
+  padding: 4rpx var(--spacing-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-date-range-bg);
+}
+
+/* Navigation */
+.w-date-picker__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-lg);
+}
+
+.w-date-picker__nav-btn {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-sm);
+}
+
+.w-date-picker__nav-title {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Calendar */
+.w-date-picker__calendar {
+  padding: 0 var(--spacing-sm);
+}
+
+.w-date-picker__weekdays {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.w-date-picker__weekday {
+  width: 14.2857%;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  box-sizing: border-box;
+}
+
+.w-date-picker__days {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.w-date-picker__day {
+  width: 14.2857%;
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.w-date-picker__day--other {
+  color: var(--color-text-placeholder);
+}
+
+.w-date-picker__day-inner {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+}
+
+.w-date-picker__day--selected .w-date-picker__day-inner {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__day--today:not(.w-date-picker__day--selected):not(
+    .w-date-picker__day--range-start
+  ):not(.w-date-picker__day--range-end)
+  .w-date-picker__day-inner {
+  border: 2rpx solid var(--color-brand);
+  color: var(--color-brand);
+}
+
+/* Day range states */
+.w-date-picker__day--in-range {
+  background: var(--color-date-range-bg);
+}
+
+.w-date-picker__day--range-start {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    width: 50%;
+    height: 64rpx;
+    background: var(--color-date-range-bg);
+  }
+
+  .w-date-picker__day-inner {
+    background: var(--color-brand);
+    color: #ffffff;
+  }
+}
+
+.w-date-picker__day--range-end {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 50%;
+    height: 64rpx;
+    background: var(--color-date-range-bg);
+  }
+
+  .w-date-picker__day-inner {
+    background: var(--color-brand);
+    color: #ffffff;
+  }
+}
+
+.w-date-picker__day--range-start.w-date-picker__day--range-end {
+  &::before {
+    display: none;
+  }
+}
+
+/* Month grid */
+.w-date-picker__months {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacing-md);
+  gap: var(--spacing-sm);
+}
+
+.w-date-picker__month-cell {
+  width: calc((100% - var(--spacing-sm) * 3) / 4);
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-base);
+  box-sizing: border-box;
+}
+
+.w-date-picker__month-cell--selected {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__month-cell--current:not(.w-date-picker__month-cell--selected):not(
+    .w-date-picker__month-cell--range-start
+  ):not(.w-date-picker__month-cell--range-end) {
+  border: 2rpx solid var(--color-brand);
+  color: var(--color-brand);
+}
+
+.w-date-picker__month-cell--range-start,
+.w-date-picker__month-cell--range-end {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__month-cell--in-range {
+  background: var(--color-date-range-bg);
+  color: var(--color-text-primary);
+}
+
+/* Year grid */
+.w-date-picker__years {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacing-md);
+  gap: var(--spacing-sm);
+}
+
+.w-date-picker__year-cell {
+  width: calc((100% - var(--spacing-sm) * 3) / 4);
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-base);
+  box-sizing: border-box;
+}
+
+.w-date-picker__year-cell--selected {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__year-cell--current:not(.w-date-picker__year-cell--selected):not(
+    .w-date-picker__year-cell--range-start
+  ):not(.w-date-picker__year-cell--range-end) {
+  border: 2rpx solid var(--color-brand);
+  color: var(--color-brand);
+}
+
+.w-date-picker__year-cell--range-start,
+.w-date-picker__year-cell--range-end {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__year-cell--in-range {
+  background: var(--color-date-range-bg);
+  color: var(--color-text-primary);
+}
+
+/* Quarter grid */
+.w-date-picker__quarters {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacing-md);
+  gap: var(--spacing-sm);
+}
+
+.w-date-picker__quarter-cell {
+  width: calc((100% - var(--spacing-sm)) / 2);
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-base);
+  box-sizing: border-box;
+}
+
+.w-date-picker__quarter-cell--selected {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__quarter-cell--current:not(.w-date-picker__quarter-cell--selected):not(
+    .w-date-picker__quarter-cell--range-start
+  ):not(.w-date-picker__quarter-cell--range-end) {
+  border: 2rpx solid var(--color-brand);
+  color: var(--color-brand);
+}
+
+.w-date-picker__quarter-cell--range-start,
+.w-date-picker__quarter-cell--range-end {
+  background: var(--color-brand);
+  color: #ffffff;
+}
+
+.w-date-picker__quarter-cell--in-range {
+  background: var(--color-date-range-bg);
+  color: var(--color-text-primary);
+}
+
+/* Datetime time section */
+.w-date-picker__time {
+  border-top: 1rpx solid var(--color-separator);
+  padding: 0 var(--spacing-md);
+}
+
+.w-date-picker__time-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  padding: var(--spacing-sm) 0 0;
+}
+
+.w-date-picker__time-picker {
+  width: 100%;
+  height: 264rpx;
+}
+
+.w-date-picker__time-indicator {
+  height: 72rpx;
+}
+
+.w-date-picker__time-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 72rpx;
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+}

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

@@ -0,0 +1,214 @@
+<view class="w-date-picker">
+  <view
+    class="w-date-picker__trigger w-date-picker--size-{{size || _formItemSize || 'medium'}} {{(disabled || _formItemDisabled) ? 'w-date-picker--disabled' : ''}} {{readonly ? 'w-date-picker--readonly' : ''}} {{status === 'error' ? 'w-date-picker--error' : ''}} {{status === 'warning' ? 'w-date-picker--warning' : ''}}"
+    bindtap="handleTap"
+  >
+    <text wx:if="{{_displayText}}" class="w-date-picker__text">{{_displayText}}</text>
+    <text wx:else class="w-date-picker__placeholder">{{placeholder}}</text>
+    <view
+      wx:if="{{clearable && _displayText && !disabled && !_formItemDisabled && !readonly}}"
+      class="w-date-picker__clear"
+      catchtap="handleClear"
+    >
+      <text class="w-date-picker__clear-icon iconfont icon-close"></text>
+    </view>
+    <view wx:else class="w-date-picker__icon">
+      <text class="w-date-picker__calendar-icon iconfont icon-calendar"></text>
+    </view>
+  </view>
+
+  <w-drawer show="{{_visible}}" placement="bottom" round bind:update:show="handleCancel">
+    <view class="w-date-picker__panel">
+      <!-- Header -->
+      <view class="w-date-picker__header">
+        <view class="w-date-picker__btn" bindtap="handleCancel">取消</view>
+        <view class="w-date-picker__title">
+          {{type === 'datetime' ? '选择日期时间' : type === 'month' ? '选择月份' : type === 'year' ?
+          '选择年份' : type === 'daterange' ? '选择日期范围' : type === 'datetimerange' ?
+          '选择日期时间范围' : type === 'monthrange' ? '选择月份范围' : type === 'yearrange' ?
+          '选择年份范围' : type === 'quarter' ? '选择季度' : type === 'quarterrange' ?
+          '选择季度范围' : type === 'week' ? '选择周' : '选择日期'}}
+        </view>
+        <view class="w-date-picker__btn w-date-picker__btn--primary" bindtap="handleConfirm">
+          确认
+        </view>
+      </view>
+
+      <!-- Range Bar (range types only) -->
+      <view wx:if="{{_isRange}}" class="w-date-picker__range-bar">
+        <view
+          class="w-date-picker__range-bar-item {{_activeEndpoint === 'start' ? 'w-date-picker__range-bar-item--active' : ''}}"
+          bindtap="handleEndpointTap"
+          data-endpoint="start"
+        >
+          <text>{{_rangeStartText || '开始'}}</text>
+        </view>
+        <text class="w-date-picker__range-bar-separator">~</text>
+        <view
+          class="w-date-picker__range-bar-item {{_activeEndpoint === 'end' ? 'w-date-picker__range-bar-item--active' : ''}}"
+          bindtap="handleEndpointTap"
+          data-endpoint="end"
+        >
+          <text>{{_rangeEndText || '结束'}}</text>
+        </view>
+      </view>
+
+      <!-- Shortcut bar -->
+      <view wx:if="{{type === 'date' || type === 'datetime'}}" class="w-date-picker__shortcuts">
+        <view class="w-date-picker__shortcut" bindtap="handleShortcut" data-action="today">
+          今天
+        </view>
+        <view
+          wx:if="{{type === 'datetime'}}"
+          class="w-date-picker__shortcut"
+          bindtap="handleShortcut"
+          data-action="now"
+        >
+          此刻
+        </view>
+      </view>
+      <view
+        wx:elif="{{type === 'daterange' || type === 'datetimerange'}}"
+        class="w-date-picker__shortcuts"
+      >
+        <view class="w-date-picker__shortcut" bindtap="handleShortcut" data-action="today">
+          今天
+        </view>
+        <view
+          wx:if="{{type === 'datetimerange'}}"
+          class="w-date-picker__shortcut"
+          bindtap="handleShortcut"
+          data-action="now"
+        >
+          此刻
+        </view>
+      </view>
+      <view wx:elif="{{type === 'week'}}" class="w-date-picker__shortcuts">
+        <view class="w-date-picker__shortcut" bindtap="handleShortcut" data-action="thisWeek">
+          本周
+        </view>
+      </view>
+      <view wx:elif="{{type === 'monthrange'}}" class="w-date-picker__shortcuts">
+        <view class="w-date-picker__shortcut" bindtap="handleShortcut" data-action="thisMonth">
+          本月
+        </view>
+      </view>
+      <view wx:elif="{{type === 'yearrange'}}" class="w-date-picker__shortcuts">
+        <view class="w-date-picker__shortcut" bindtap="handleShortcut" data-action="thisYear">
+          今年
+        </view>
+      </view>
+      <view
+        wx:elif="{{type === 'quarter' || type === 'quarterrange'}}"
+        class="w-date-picker__shortcuts"
+      >
+        <view class="w-date-picker__shortcut" bindtap="handleShortcut" data-action="thisQuarter">
+          本季度
+        </view>
+      </view>
+
+      <!-- Navigation -->
+      <view class="w-date-picker__nav">
+        <view class="w-date-picker__nav-btn" bindtap="handlePrev">
+          <text class="iconfont icon-left"></text>
+        </view>
+        <view class="w-date-picker__nav-title" bindtap="handleTitleTap">{{_panelTitle}}</view>
+        <view class="w-date-picker__nav-btn" bindtap="handleNext">
+          <text class="iconfont icon-right"></text>
+        </view>
+      </view>
+
+      <!-- Date panel (date / datetime / daterange / datetimerange / week) -->
+      <view wx:if="{{_panelMode === 'date'}}" class="w-date-picker__calendar">
+        <view class="w-date-picker__weekdays">
+          <view wx:for="{{_weekDays}}" wx:key="*this" class="w-date-picker__weekday">{{item}}</view>
+        </view>
+        <view class="w-date-picker__days">
+          <view
+            wx:for="{{_days}}"
+            wx:key="index"
+            class="w-date-picker__day {{item.isCurrentMonth ? '' : 'w-date-picker__day--other'}} {{item.isSelected ? 'w-date-picker__day--selected' : ''}} {{item.isToday ? 'w-date-picker__day--today' : ''}} {{item.isRangeStart ? 'w-date-picker__day--range-start' : ''}} {{item.isRangeEnd ? 'w-date-picker__day--range-end' : ''}} {{item.isInRange ? 'w-date-picker__day--in-range' : ''}}"
+            bindtap="handleDayTap"
+            data-year="{{item.year}}"
+            data-month="{{item.month}}"
+            data-day="{{item.day}}"
+          >
+            <view class="w-date-picker__day-inner">{{item.day}}</view>
+          </view>
+        </view>
+      </view>
+
+      <!-- Month panel -->
+      <view wx:if="{{_panelMode === 'month'}}" class="w-date-picker__months">
+        <view
+          wx:for="{{_monthList}}"
+          wx:key="month"
+          class="w-date-picker__month-cell {{item.isSelected ? 'w-date-picker__month-cell--selected' : ''}} {{item.isCurrent ? 'w-date-picker__month-cell--current' : ''}} {{item.isRangeStart ? 'w-date-picker__month-cell--range-start' : ''}} {{item.isRangeEnd ? 'w-date-picker__month-cell--range-end' : ''}} {{item.isInRange ? 'w-date-picker__month-cell--in-range' : ''}}"
+          bindtap="handleMonthTap"
+          data-month="{{item.month}}"
+        >
+          {{item.label}}
+        </view>
+      </view>
+
+      <!-- Year panel -->
+      <view wx:if="{{_panelMode === 'year'}}" class="w-date-picker__years">
+        <view
+          wx:for="{{_yearObjList}}"
+          wx:key="year"
+          class="w-date-picker__year-cell {{item.isSelected ? 'w-date-picker__year-cell--selected' : ''}} {{item.isCurrent ? 'w-date-picker__year-cell--current' : ''}} {{item.isRangeStart ? 'w-date-picker__year-cell--range-start' : ''}} {{item.isRangeEnd ? 'w-date-picker__year-cell--range-end' : ''}} {{item.isInRange ? 'w-date-picker__year-cell--in-range' : ''}}"
+          bindtap="handleYearTap"
+          data-year="{{item.year}}"
+        >
+          {{item.year}}
+        </view>
+      </view>
+
+      <!-- Quarter panel -->
+      <view wx:if="{{_panelMode === 'quarter'}}" class="w-date-picker__quarters">
+        <view
+          wx:for="{{_quarterList}}"
+          wx:key="quarter"
+          class="w-date-picker__quarter-cell {{item.isSelected ? 'w-date-picker__quarter-cell--selected' : ''}} {{item.isCurrent ? 'w-date-picker__quarter-cell--current' : ''}} {{item.isRangeStart ? 'w-date-picker__quarter-cell--range-start' : ''}} {{item.isRangeEnd ? 'w-date-picker__quarter-cell--range-end' : ''}} {{item.isInRange ? 'w-date-picker__quarter-cell--in-range' : ''}}"
+          bindtap="handleQuarterTap"
+          data-quarter="{{item.quarter}}"
+        >
+          {{item.label}}
+        </view>
+      </view>
+
+      <!-- Time picker for datetime / datetimerange -->
+      <view
+        wx:if="{{(type === 'datetime' || type === 'datetimerange') && _panelMode === 'date'}}"
+        class="w-date-picker__time"
+      >
+        <view class="w-date-picker__time-label">
+          {{type === 'datetimerange' ? (_activeEndpoint === 'start' ? '开始时间' : '结束时间') :
+          '时间'}}
+        </view>
+        <picker-view
+          class="w-date-picker__time-picker"
+          value="{{type === 'datetimerange' ? (_activeEndpoint === 'start' ? _startTimePickerValue : _endTimePickerValue) : _timePickerValue}}"
+          indicator-class="w-date-picker__time-indicator"
+          bindchange="handleTimeChange"
+        >
+          <picker-view-column>
+            <view wx:for="{{_timeHours}}" wx:key="*this" class="w-date-picker__time-item">
+              {{item}}
+            </view>
+          </picker-view-column>
+          <picker-view-column>
+            <view wx:for="{{_timeMinutes}}" wx:key="*this" class="w-date-picker__time-item">
+              {{item}}
+            </view>
+          </picker-view-column>
+          <picker-view-column>
+            <view wx:for="{{_timeSeconds}}" wx:key="*this" class="w-date-picker__time-item">
+              {{item}}
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+  </w-drawer>
+</view>