wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/Calendar/index.js

@@ -0,0 +1,291 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useCallback, useMemo } from 'react';
+import "./style.less";
+
+// ============ 日期工具函数 ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var formatDate = function formatDate(date) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'YYYY-MM-DD';
+  var year = date.getFullYear();
+  var month = String(date.getMonth() + 1).padStart(2, '0');
+  var day = String(date.getDate()).padStart(2, '0');
+  return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
+};
+var isSameDay = function isSameDay(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var isSameMonth = function isSameMonth(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+};
+var getDaysInMonth = function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+};
+var getFirstDayOfMonth = function getFirstDayOfMonth(year, month) {
+  return new Date(year, month, 1).getDay();
+};
+
+// ============ Calendar Props ============
+
+// ============ Calendar Component ============
+export var Calendar = function Calendar(_ref) {
+  var controlledValue = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? new Date() : _ref$defaultValue,
+    controlledMode = _ref.mode,
+    _ref$fullscreen = _ref.fullscreen,
+    fullscreen = _ref$fullscreen === void 0 ? true : _ref$fullscreen,
+    dateCellRender = _ref.dateCellRender,
+    dateFullCellRender = _ref.dateFullCellRender,
+    monthCellRender = _ref.monthCellRender,
+    monthFullCellRender = _ref.monthFullCellRender,
+    disabledDate = _ref.disabledDate,
+    onSelect = _ref.onSelect,
+    onPanelChange = _ref.onPanelChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState('month'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalMode = _useState4[0],
+    setInternalMode = _useState4[1];
+  var _useState5 = useState(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    viewDate = _useState6[0],
+    setViewDate = _useState6[1];
+  var value = controlledValue !== undefined ? controlledValue : internalValue;
+  var mode = controlledMode !== undefined ? controlledMode : internalMode;
+
+  // 切换模式
+  var handleModeChange = useCallback(function (newMode) {
+    if (controlledMode === undefined) {
+      setInternalMode(newMode);
+    }
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(viewDate, newMode);
+  }, [controlledMode, viewDate, onPanelChange]);
+
+  // 选择日期
+  var handleSelectDate = useCallback(function (date) {
+    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date)) return;
+    if (controlledValue === undefined) {
+      setInternalValue(date);
+    }
+    setViewDate(date);
+    onSelect === null || onSelect === void 0 || onSelect(date);
+  }, [controlledValue, disabledDate, onSelect]);
+
+  // 选择月份
+  var handleSelectMonth = useCallback(function (monthIndex) {
+    var newDate = new Date(viewDate.getFullYear(), monthIndex, 1);
+    setViewDate(newDate);
+    handleModeChange('month');
+    onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, 'month');
+  }, [viewDate, handleModeChange, onPanelChange]);
+
+  // 切换到上一月/年
+  var handlePrev = useCallback(function () {
+    if (mode === 'month') {
+      var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+      setViewDate(newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+    } else {
+      var _newDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1);
+      setViewDate(_newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(_newDate, mode);
+    }
+  }, [mode, viewDate, onPanelChange]);
+
+  // 切换到下一月/年
+  var handleNext = useCallback(function () {
+    if (mode === 'month') {
+      var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+      setViewDate(newDate);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(newDate, mode);
+    } else {
+      var _newDate2 = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1);
+      setViewDate(_newDate2);
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange(_newDate2, mode);
+    }
+  }, [mode, viewDate, onPanelChange]);
+
+  // 回到今天
+  var handleToday = useCallback(function () {
+    var today = new Date();
+    setViewDate(today);
+    handleSelectDate(today);
+  }, [handleSelectDate]);
+
+  // 生成日期网格
+  var dateGrid = useMemo(function () {
+    var year = viewDate.getFullYear();
+    var month = viewDate.getMonth();
+    var daysInMonth = getDaysInMonth(year, month);
+    var firstDay = getFirstDayOfMonth(year, month);
+    var prevMonthDays = getDaysInMonth(year, month - 1);
+    var days = [];
+
+    // 上个月的天数
+    for (var i = firstDay - 1; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthDays - i),
+        isCurrentMonth: false
+      });
+    }
+
+    // 当前月的天数
+    for (var _i = 1; _i <= daysInMonth; _i++) {
+      days.push({
+        date: new Date(year, month, _i),
+        isCurrentMonth: true
+      });
+    }
+
+    // 下个月的天数
+    var remaining = 42 - days.length;
+    for (var _i2 = 1; _i2 <= remaining; _i2++) {
+      days.push({
+        date: new Date(year, month + 1, _i2),
+        isCurrentMonth: false
+      });
+    }
+    return days;
+  }, [viewDate]);
+
+  // 生成月份网格
+  var monthGrid = useMemo(function () {
+    var months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+    return months.map(function (name, index) {
+      return {
+        name: name,
+        index: index,
+        date: new Date(viewDate.getFullYear(), index, 1)
+      };
+    });
+  }, [viewDate]);
+  var weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+  var today = new Date();
+  var classNames = ['kage-calendar', fullscreen ? 'kage-calendar-fullscreen' : 'kage-calendar-card', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "kage-calendar-header",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-calendar-header-left",
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "kage-calendar-header-btn",
+          onClick: handlePrev,
+          children: "\u2039"
+        }), /*#__PURE__*/_jsx("button", {
+          className: "kage-calendar-header-btn",
+          onClick: handleNext,
+          children: "\u203A"
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "kage-calendar-header-title",
+          onClick: function onClick() {
+            return handleModeChange('year');
+          },
+          children: [viewDate.getFullYear(), "\u5E74", mode === 'month' && /*#__PURE__*/_jsxs("span", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              handleModeChange('month');
+            },
+            children: [viewDate.getMonth() + 1, "\u6708"]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "kage-calendar-header-right",
+        children: [/*#__PURE__*/_jsx("button", {
+          className: "kage-calendar-today-btn",
+          onClick: handleToday,
+          children: "\u4ECA\u5929"
+        }), /*#__PURE__*/_jsxs("select", {
+          className: "kage-calendar-mode-select",
+          value: mode,
+          onChange: function onChange(e) {
+            return handleModeChange(e.target.value);
+          },
+          children: [/*#__PURE__*/_jsx("option", {
+            value: "month",
+            children: "\u6708"
+          }), /*#__PURE__*/_jsx("option", {
+            value: "year",
+            children: "\u5E74"
+          })]
+        })]
+      })]
+    }), mode === 'month' ? /*#__PURE__*/_jsxs("div", {
+      className: "kage-calendar-body",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "kage-calendar-weekdays",
+        children: weekDays.map(function (day) {
+          return /*#__PURE__*/_jsx("div", {
+            className: "kage-calendar-weekday",
+            children: day
+          }, day);
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-calendar-dates",
+        children: dateGrid.map(function (_ref2, index) {
+          var date = _ref2.date,
+            isCurrentMonth = _ref2.isCurrentMonth;
+          var isSelected = isSameDay(date, value);
+          var isToday = isSameDay(date, today);
+          var isDisabled = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date);
+          var cellClassNames = ['kage-calendar-date', !isCurrentMonth && 'kage-calendar-date-other', isSelected && 'kage-calendar-date-selected', isToday && 'kage-calendar-date-today', isDisabled && 'kage-calendar-date-disabled'].filter(Boolean).join(' ');
+          return /*#__PURE__*/_jsx("div", {
+            className: cellClassNames,
+            onClick: function onClick() {
+              return !isDisabled && handleSelectDate(date);
+            },
+            children: dateFullCellRender ? dateFullCellRender(date) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx("div", {
+                className: "kage-calendar-date-value",
+                children: date.getDate()
+              }), dateCellRender && /*#__PURE__*/_jsx("div", {
+                className: "kage-calendar-date-content",
+                children: dateCellRender(date)
+              })]
+            })
+          }, index);
+        })
+      })]
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "kage-calendar-months",
+      children: monthGrid.map(function (_ref3) {
+        var name = _ref3.name,
+          index = _ref3.index,
+          date = _ref3.date;
+        var isSelected = isSameMonth(date, value);
+        var isCurrentMonth = isSameMonth(date, today);
+        var cellClassNames = ['kage-calendar-month', isSelected && 'kage-calendar-month-selected', isCurrentMonth && 'kage-calendar-month-current'].filter(Boolean).join(' ');
+        return /*#__PURE__*/_jsx("div", {
+          className: cellClassNames,
+          onClick: function onClick() {
+            return handleSelectMonth(index);
+          },
+          children: monthFullCellRender ? monthFullCellRender(date) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "kage-calendar-month-value",
+              children: name
+            }), monthCellRender && /*#__PURE__*/_jsx("div", {
+              className: "kage-calendar-month-content",
+              children: monthCellRender(date)
+            })]
+          })
+        }, index);
+      })
+    })]
+  });
+};
+export default Calendar;

package/dist/esm/Calendar/style.less

@@ -0,0 +1,384 @@
+// Calendar 日历组件样式
+
+@prefix: kage-calendar;
+
+// 颜色变量
+@calendar-bg: #fff;
+@calendar-border: #f0f0f0;
+@calendar-header-bg: #fafafa;
+@calendar-selected-bg: #6366f1;
+@calendar-selected-color: #fff;
+@calendar-today-border: #6366f1;
+@calendar-hover-bg: rgba(0, 0, 0, 0.04);
+@calendar-disabled-color: rgba(0, 0, 0, 0.25);
+@calendar-other-month-color: rgba(0, 0, 0, 0.35);
+
+// ============ 容器 ============
+.@{prefix} {
+  background: @calendar-bg;
+  border: 1px solid @calendar-border;
+  border-radius: 8px;
+  overflow: hidden;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.@{prefix}-fullscreen {
+  width: 100%;
+}
+
+.@{prefix}-card {
+  width: fit-content;
+}
+
+// ============ 头部 ============
+.@{prefix}-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: @calendar-header-bg;
+  border-bottom: 1px solid @calendar-border;
+}
+
+.@{prefix}-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.@{prefix}-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.@{prefix}-header-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 18px;
+  color: rgba(0, 0, 0, 0.65);
+  background: transparent;
+  border: 1px solid @calendar-border;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #6366f1;
+    border-color: #6366f1;
+    background: rgba(99, 102, 241, 0.05);
+  }
+}
+
+.@{prefix}-header-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  user-select: none;
+
+  span {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    color: #6366f1;
+  }
+}
+
+.@{prefix}-today-btn {
+  padding: 4px 12px;
+  font-size: 14px;
+  color: #6366f1;
+  background: transparent;
+  border: 1px solid #6366f1;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #fff;
+    background: #6366f1;
+  }
+}
+
+.@{prefix}-mode-select {
+  padding: 4px 8px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  background: @calendar-bg;
+  border: 1px solid @calendar-border;
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #6366f1;
+  }
+
+  &:focus {
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+  }
+}
+
+// ============ 日历主体 ============
+.@{prefix}-body {
+  padding: 16px;
+}
+
+// ============ 星期标题 ============
+.@{prefix}-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.@{prefix}-weekday {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.65);
+  padding: 8px 0;
+}
+
+// ============ 日期网格 ============
+.@{prefix}-dates {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 8px;
+}
+
+.@{prefix}-date {
+  position: relative;
+  min-height: 80px;
+  padding: 8px;
+  border: 1px solid @calendar-border;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(.@{prefix}-date-disabled) {
+    background: @calendar-hover-bg;
+  }
+}
+
+.@{prefix}-date-value {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  margin-bottom: 4px;
+}
+
+.@{prefix}-date-content {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.@{prefix}-date-other {
+  .@{prefix}-date-value {
+    color: @calendar-other-month-color;
+  }
+}
+
+.@{prefix}-date-selected {
+  background: @calendar-selected-bg;
+  border-color: @calendar-selected-bg;
+
+  .@{prefix}-date-value,
+  .@{prefix}-date-content {
+    color: @calendar-selected-color;
+  }
+
+  &:hover {
+    background: #818cf8;
+    border-color: #818cf8;
+  }
+}
+
+.@{prefix}-date-today {
+  border-color: @calendar-today-border;
+  border-width: 2px;
+}
+
+.@{prefix}-date-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+// ============ 月份网格 ============
+.@{prefix}-months {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  padding: 16px;
+}
+
+.@{prefix}-month {
+  position: relative;
+  min-height: 100px;
+  padding: 16px;
+  border: 1px solid @calendar-border;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: center;
+
+  &:hover {
+    background: @calendar-hover-bg;
+  }
+}
+
+.@{prefix}-month-value {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  margin-bottom: 8px;
+}
+
+.@{prefix}-month-content {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.@{prefix}-month-selected {
+  background: @calendar-selected-bg;
+  border-color: @calendar-selected-bg;
+
+  .@{prefix}-month-value,
+  .@{prefix}-month-content {
+    color: @calendar-selected-color;
+  }
+
+  &:hover {
+    background: #818cf8;
+    border-color: #818cf8;
+  }
+}
+
+.@{prefix}-month-current {
+  border-color: @calendar-today-border;
+  border-width: 2px;
+}
+
+// ============ 卡片模式 ============
+.@{prefix}-card {
+  .@{prefix}-date {
+    min-height: 60px;
+  }
+
+  .@{prefix}-month {
+    min-height: 80px;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    background: #1f1f1f;
+    border-color: #434343;
+  }
+
+  .@{prefix}-header {
+    background: #141414;
+    border-bottom-color: #434343;
+  }
+
+  .@{prefix}-header-btn {
+    color: rgba(255, 255, 255, 0.65);
+    border-color: #434343;
+
+    &:hover {
+      color: #a5b4fc;
+      border-color: #6366f1;
+      background: rgba(99, 102, 241, 0.2);
+    }
+  }
+
+  .@{prefix}-header-title {
+    color: rgba(255, 255, 255, 0.88);
+
+    &:hover {
+      color: #a5b4fc;
+    }
+  }
+
+  .@{prefix}-today-btn {
+    color: #a5b4fc;
+    border-color: #6366f1;
+
+    &:hover {
+      color: #fff;
+      background: #6366f1;
+    }
+  }
+
+  .@{prefix}-mode-select {
+    color: rgba(255, 255, 255, 0.88);
+    background: #1f1f1f;
+    border-color: #434343;
+
+    &:hover,
+    &:focus {
+      border-color: #6366f1;
+    }
+  }
+
+  .@{prefix}-weekday {
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .@{prefix}-date {
+    border-color: #434343;
+
+    &:hover:not(.@{prefix}-date-disabled) {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-date-value {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-date-content {
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .@{prefix}-date-other {
+    .@{prefix}-date-value {
+      color: rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  .@{prefix}-month {
+    border-color: #434343;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-month-value {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-month-content {
+    color: rgba(255, 255, 255, 0.65);
+  }
+}
+