wedux-ui 0.1.0

package/miniprogram_dist/components/calendar/calendar.js

@@ -0,0 +1,308 @@
+import { monthDays } from '../../libs/tempo_1_0_0';
+
+const WEEKDAY_LABELS = ['日', '一', '二', '三', '四', '五', '六'];
+
+Component({
+  properties: {
+    value: { type: Number, value: null },
+    defaultValue: { type: Number, value: null },
+    weekStartsOn: { type: Number, value: 1 },
+    minDate: { type: Number, value: null },
+    maxDate: { type: Number, value: null },
+    marks: { type: Array, value: [] },
+  },
+
+  data: {
+    _displayYear: 0,
+    _displayMonth: 0, // 0-11
+    _selectedTimestamp: null,
+    _days: [],
+    _weekDays: [],
+    _panelTitle: '',
+  },
+
+  lifetimes: {
+    attached() {
+      this._initDisplay();
+      this._buildWeekDays();
+      this._buildCalendar();
+      this._initialized = true;
+    },
+  },
+
+  observers: {
+    value: function (val) {
+      if (!this._initialized) return;
+      if (val !== null && val !== undefined) {
+        const d = new Date(val);
+        if (!isNaN(d.getTime())) {
+          this.setData({
+            _selectedTimestamp: this._normalizeTimestamp(val),
+            _displayYear: d.getFullYear(),
+            _displayMonth: d.getMonth(),
+          });
+          this._buildCalendar();
+        }
+      } else {
+        this.setData({ _selectedTimestamp: null });
+        this._buildCalendar();
+      }
+    },
+    marks: function () {
+      if (!this._initialized) return;
+      this._buildCalendar();
+    },
+    weekStartsOn: function () {
+      if (!this._initialized) return;
+      this._buildWeekDays();
+      this._buildCalendar();
+    },
+    'minDate, maxDate': function () {
+      if (!this._initialized) return;
+      this._buildCalendar();
+    },
+  },
+
+  methods: {
+    // --- Public methods ---
+
+    setIsDateDisabled(fn) {
+      this._isDateDisabledFn = fn;
+      this._buildCalendar();
+    },
+
+    navigateTo(year, month) {
+      // month: 1-12 from caller, convert to 0-11 internally
+      this.setData({
+        _displayYear: year,
+        _displayMonth: month - 1,
+      });
+      this._buildCalendar();
+      this._emitPanelChange();
+    },
+
+    // --- Private methods ---
+
+    _initDisplay() {
+      const { value, defaultValue } = this.data;
+      let initDate;
+
+      if (value !== null && value !== undefined) {
+        initDate = new Date(value);
+        this.setData({ _selectedTimestamp: this._normalizeTimestamp(value) });
+      } else if (defaultValue !== null && defaultValue !== undefined) {
+        initDate = new Date(defaultValue);
+        this.setData({ _selectedTimestamp: this._normalizeTimestamp(defaultValue) });
+      } else {
+        initDate = new Date();
+      }
+
+      if (isNaN(initDate.getTime())) initDate = new Date();
+
+      this.setData({
+        _displayYear: initDate.getFullYear(),
+        _displayMonth: initDate.getMonth(),
+      });
+    },
+
+    _buildWeekDays() {
+      const { weekStartsOn } = this.data;
+      const days = [
+        ...WEEKDAY_LABELS.slice(weekStartsOn),
+        ...WEEKDAY_LABELS.slice(0, weekStartsOn),
+      ];
+      this.setData({ _weekDays: days });
+    },
+
+    _buildCalendar() {
+      const { _displayYear: year, _displayMonth: month, _selectedTimestamp, marks } = this.data;
+      const { weekStartsOn } = this.data;
+      const minDate =
+        this.data.minDate != null ? this._normalizeTimestamp(this.data.minDate) : null;
+      const maxDate =
+        this.data.maxDate != null ? this._normalizeTimestamp(this.data.maxDate) : null;
+
+      const daysInMonth = monthDays(new Date(year, month, 1));
+      const firstDay = new Date(year, month, 1).getDay();
+      const adjustedFirstDay = (firstDay - weekStartsOn + 7) % 7;
+
+      const today = new Date();
+      const ty = today.getFullYear();
+      const tm = today.getMonth();
+      const td = today.getDate();
+
+      // Build marks lookup map: "YYYY-M-D" -> mark
+      const marksMap = {};
+      if (marks && marks.length) {
+        marks.forEach((m) => {
+          const md = new Date(m.date);
+          if (!isNaN(md.getTime())) {
+            const key = `${md.getFullYear()}-${md.getMonth()}-${md.getDate()}`;
+            marksMap[key] = { color: m.color || '', text: m.text || '' };
+          }
+        });
+      }
+
+      const days = [];
+
+      // Previous month padding
+      const prevMonth = month === 0 ? 11 : month - 1;
+      const prevYear = month === 0 ? year - 1 : year;
+      const daysInPrevMonth = monthDays(new Date(prevYear, prevMonth, 1));
+
+      for (let i = adjustedFirstDay - 1; i >= 0; i--) {
+        const d = daysInPrevMonth - i;
+        days.push(
+          this._buildDayObj(
+            prevYear,
+            prevMonth,
+            d,
+            false,
+            ty,
+            tm,
+            td,
+            _selectedTimestamp,
+            marksMap,
+            minDate,
+            maxDate,
+          ),
+        );
+      }
+
+      // Current month
+      for (let d = 1; d <= daysInMonth; d++) {
+        days.push(
+          this._buildDayObj(
+            year,
+            month,
+            d,
+            true,
+            ty,
+            tm,
+            td,
+            _selectedTimestamp,
+            marksMap,
+            minDate,
+            maxDate,
+          ),
+        );
+      }
+
+      // Next month padding
+      const nextMonth = month === 11 ? 0 : month + 1;
+      const nextYear = month === 11 ? year + 1 : year;
+      const remaining = 42 - days.length;
+      for (let d = 1; d <= remaining; d++) {
+        days.push(
+          this._buildDayObj(
+            nextYear,
+            nextMonth,
+            d,
+            false,
+            ty,
+            tm,
+            td,
+            _selectedTimestamp,
+            marksMap,
+            minDate,
+            maxDate,
+          ),
+        );
+      }
+
+      this.setData({
+        _days: days,
+        _panelTitle: `${year}年${month + 1}月`,
+      });
+    },
+
+    _buildDayObj(
+      year,
+      month,
+      date,
+      inCurrentMonth,
+      ty,
+      tm,
+      td,
+      selectedTs,
+      marksMap,
+      minDate,
+      maxDate,
+    ) {
+      const timestamp = new Date(year, month, date).getTime();
+      const key = `${year}-${month}-${date}`;
+      const mark = marksMap[key] || null;
+
+      let isDisabled = false;
+      if (minDate !== null && minDate !== undefined && timestamp < minDate) isDisabled = true;
+      if (maxDate !== null && maxDate !== undefined && timestamp > maxDate) isDisabled = true;
+      if (this._isDateDisabledFn && this._isDateDisabledFn(timestamp)) isDisabled = true;
+
+      return {
+        year,
+        month,
+        date,
+        timestamp,
+        inCurrentMonth,
+        isToday: year === ty && month === tm && date === td,
+        isSelected: selectedTs !== null && timestamp === selectedTs,
+        isDisabled,
+        mark,
+      };
+    },
+
+    _normalizeTimestamp(ts) {
+      const d = new Date(ts);
+      return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    },
+
+    // --- Event handlers ---
+
+    handlePrevMonth() {
+      let { _displayYear: year, _displayMonth: month } = this.data;
+      if (month === 0) {
+        year -= 1;
+        month = 11;
+      } else {
+        month -= 1;
+      }
+      this.setData({ _displayYear: year, _displayMonth: month });
+      this._buildCalendar();
+      this._emitPanelChange();
+    },
+
+    handleNextMonth() {
+      let { _displayYear: year, _displayMonth: month } = this.data;
+      if (month === 11) {
+        year += 1;
+        month = 0;
+      } else {
+        month += 1;
+      }
+      this.setData({ _displayYear: year, _displayMonth: month });
+      this._buildCalendar();
+      this._emitPanelChange();
+    },
+
+    handleDayTap(e) {
+      const { year, month, date, disabled } = e.currentTarget.dataset;
+      if (disabled) return;
+
+      const timestamp = new Date(year, month, date).getTime();
+      this.setData({ _selectedTimestamp: timestamp });
+      this._buildCalendar();
+
+      this.triggerEvent('update:value', {
+        value: timestamp,
+        year,
+        month: month + 1,
+        date,
+      });
+    },
+
+    _emitPanelChange() {
+      const { _displayYear: year, _displayMonth: month } = this.data;
+      this.triggerEvent('panel-change', { year, month: month + 1 });
+    },
+  },
+});

package/miniprogram_dist/components/calendar/calendar.json

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

package/miniprogram_dist/components/calendar/calendar.scss

@@ -0,0 +1,141 @@
+@import '../../styles/iconfont.scss';
+
+.w-calendar {
+  background: var(--color-bg-elevated);
+}
+
+/* Navigation */
+.w-calendar__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--size-calendar-header-height);
+  padding: 0 var(--spacing-lg);
+}
+
+.w-calendar__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-calendar__nav-title {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Weekday headers */
+.w-calendar__weekdays {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 var(--spacing-sm);
+}
+
+.w-calendar__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;
+}
+
+/* Day grid */
+.w-calendar__days {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 var(--spacing-sm);
+}
+
+.w-calendar__day {
+  width: 14.2857%;
+  height: var(--size-calendar-cell-height);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.w-calendar__day-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 64rpx;
+  min-height: 64rpx;
+  border-radius: 32rpx;
+  box-sizing: border-box;
+  padding: 4rpx 0;
+}
+
+.w-calendar__day-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64rpx;
+  height: 56rpx;
+}
+
+/* Non-current month */
+.w-calendar__day--other {
+  color: var(--color-text-placeholder);
+}
+
+/* Today: brand outline */
+.w-calendar__day--today:not(.w-calendar__day--selected) .w-calendar__day-content {
+  border: 2rpx solid var(--color-calendar-today-border);
+  color: var(--color-calendar-today-border);
+}
+
+/* Selected: brand fill */
+.w-calendar__day--selected .w-calendar__day-content {
+  background: var(--color-calendar-selected-bg);
+  color: var(--color-calendar-selected-text);
+}
+
+.w-calendar__day--selected .w-calendar__mark-text {
+  color: var(--color-calendar-selected-text);
+}
+
+.w-calendar__day--selected .w-calendar__mark-dot {
+  background: var(--color-calendar-selected-text);
+}
+
+/* Disabled */
+.w-calendar__day--disabled {
+  color: var(--color-text-disabled);
+  pointer-events: none;
+}
+
+.w-calendar__day--disabled.w-calendar__day--other {
+  color: var(--color-text-disabled);
+}
+
+/* Mark dot */
+.w-calendar__mark-dot {
+  width: 8rpx;
+  height: 8rpx;
+  border-radius: 50%;
+  background: var(--color-brand);
+  margin-top: 2rpx;
+}
+
+/* Mark text */
+.w-calendar__mark-text {
+  font-size: 20rpx;
+  line-height: 1;
+  color: var(--color-brand);
+  margin-top: 2rpx;
+}

package/miniprogram_dist/components/calendar/calendar.wxml

@@ -0,0 +1,47 @@
+<view class="w-calendar">
+  <!-- Navigation -->
+  <view class="w-calendar__nav">
+    <view class="w-calendar__nav-btn" bindtap="handlePrevMonth">
+      <text class="iconfont icon-left"></text>
+    </view>
+    <view class="w-calendar__nav-title">{{_panelTitle}}</view>
+    <view class="w-calendar__nav-btn" bindtap="handleNextMonth">
+      <text class="iconfont icon-right"></text>
+    </view>
+  </view>
+
+  <!-- Weekday headers -->
+  <view class="w-calendar__weekdays">
+    <view wx:for="{{_weekDays}}" wx:key="*this" class="w-calendar__weekday">{{item}}</view>
+  </view>
+
+  <!-- Day grid -->
+  <view class="w-calendar__days">
+    <view
+      wx:for="{{_days}}"
+      wx:key="index"
+      class="w-calendar__day {{item.inCurrentMonth ? '' : 'w-calendar__day--other'}} {{item.isSelected ? 'w-calendar__day--selected' : ''}} {{item.isToday ? 'w-calendar__day--today' : ''}} {{item.isDisabled ? 'w-calendar__day--disabled' : ''}}"
+      bindtap="handleDayTap"
+      data-year="{{item.year}}"
+      data-month="{{item.month}}"
+      data-date="{{item.date}}"
+      data-disabled="{{item.isDisabled}}"
+    >
+      <view class="w-calendar__day-content">
+        <view class="w-calendar__day-inner">{{item.date}}</view>
+        <view
+          wx:if="{{item.mark && item.mark.text}}"
+          class="w-calendar__mark-text"
+          style="{{item.mark.color ? 'color:' + item.mark.color : ''}}"
+        >
+          {{item.mark.text}}
+        </view>
+        <view
+          wx:elif="{{item.mark}}"
+          class="w-calendar__mark-dot"
+          style="{{item.mark.color ? 'background:' + item.mark.color : ''}}"
+        ></view>
+      </view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/components/card/card.js

@@ -0,0 +1,44 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+
+  properties: {
+    title: {
+      type: String,
+      value: '',
+    },
+    bordered: {
+      type: Boolean,
+      value: true,
+    },
+    hoverable: {
+      type: Boolean,
+      value: false,
+    },
+    size: {
+      type: String,
+      value: 'medium', // small | medium | large
+    },
+    segmented: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  data: {
+    _hasHeader: false,
+  },
+
+  observers: {
+    title(title) {
+      this.setData({ _hasHeader: !!title });
+    },
+  },
+
+  methods: {
+    handleTap() {
+      this.triggerEvent('tap');
+    },
+  },
+});

package/miniprogram_dist/components/card/card.json

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

package/miniprogram_dist/components/card/card.scss

@@ -0,0 +1,143 @@
+.w-card {
+  background: var(--w-card-bg);
+  border-radius: var(--w-card-radius);
+  overflow: hidden;
+  box-sizing: border-box;
+
+  &--bordered {
+    border: 1rpx solid var(--w-card-border-color);
+  }
+
+  &--pressed {
+    box-shadow: var(--shadow-card-hover);
+  }
+}
+
+/* Cover — collapses to zero height when slot is empty */
+.w-card__cover {
+  overflow: hidden;
+  line-height: 0;
+}
+
+.w-card__cover-inner {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/* Header */
+.w-card__header {
+  display: flex;
+  align-items: center;
+
+  .w-card--small & {
+    padding: var(--spacing-sm);
+  }
+  .w-card--medium & {
+    padding: var(--spacing-md);
+  }
+  .w-card--large & {
+    padding: var(--spacing-lg);
+  }
+}
+
+.w-card__header-main {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  line-height: 1.4;
+}
+
+.w-card__header-extra {
+  flex-shrink: 0;
+  margin-left: var(--spacing-sm);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+/* Body */
+.w-card__body {
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+
+  .w-card--small & {
+    padding: var(--spacing-sm);
+  }
+  .w-card--medium & {
+    padding: var(--spacing-md);
+  }
+  .w-card--large & {
+    padding: var(--spacing-lg);
+  }
+}
+
+/* Suppress body top padding when header is present (header already provides bottom spacing) */
+.w-card__body--no-top-pad {
+  .w-card--small & {
+    padding-top: var(--spacing-xs);
+  }
+  .w-card--medium & {
+    padding-top: var(--spacing-xs);
+  }
+  .w-card--large & {
+    padding-top: var(--spacing-sm);
+  }
+}
+
+/* Footer — auto-hide when slot is empty */
+.w-card__footer:empty {
+  display: none;
+}
+
+.w-card__footer {
+  .w-card--small & {
+    padding: 0 var(--spacing-sm) var(--spacing-sm);
+  }
+  .w-card--medium & {
+    padding: 0 var(--spacing-md) var(--spacing-md);
+  }
+  .w-card--large & {
+    padding: 0 var(--spacing-lg) var(--spacing-lg);
+  }
+}
+
+/* Action — auto-hide when slot is empty */
+.w-card__action:empty {
+  display: none;
+}
+
+.w-card__action {
+  background: var(--color-bg-base);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .w-card--small & {
+    padding: var(--spacing-sm);
+  }
+  .w-card--medium & {
+    padding: var(--spacing-md);
+  }
+  .w-card--large & {
+    padding: var(--spacing-lg);
+  }
+}
+
+/* Segmented — dividers between sections */
+.w-card--segmented {
+  .w-card__header {
+    border-bottom: 1rpx solid var(--color-separator);
+  }
+
+  .w-card__footer {
+    border-top: 1rpx solid var(--color-separator);
+    padding-top: var(--spacing-sm);
+  }
+
+  .w-card__action {
+    border-top: 1rpx solid var(--color-separator);
+  }
+}