wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/Form/style.less

@@ -0,0 +1,203 @@
+// Form 表单组件样式
+
+@prefix: kage-form;
+
+// 颜色变量
+@text-color: rgba(0, 0, 0, 0.88);
+@text-secondary: rgba(0, 0, 0, 0.45);
+@error-color: #ff4d4f;
+@required-color: #ff4d4f;
+@help-color: rgba(0, 0, 0, 0.45);
+
+// ============ 基础样式 ============
+.@{prefix} {
+  font-size: 14px;
+  color: @text-color;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 水平布局 ============
+.@{prefix}-horizontal {
+  .@{prefix}-item {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 24px;
+  }
+
+  .@{prefix}-item-label {
+    flex: 0 0 auto;
+    width: 100px;
+    padding-right: 12px;
+    text-align: right;
+    line-height: 40px;
+  }
+
+  .@{prefix}-item-control {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+// ============ 垂直布局 ============
+.@{prefix}-vertical {
+  .@{prefix}-item {
+    margin-bottom: 24px;
+  }
+
+  .@{prefix}-item-label {
+    padding-bottom: 8px;
+    line-height: 1.5;
+  }
+}
+
+// ============ 内联布局 ============
+.@{prefix}-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  .@{prefix}-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 0;
+  }
+
+  .@{prefix}-item-label {
+    padding-right: 8px;
+    line-height: 40px;
+  }
+}
+
+// ============ 表单项 ============
+.@{prefix}-item {
+  position: relative;
+}
+
+.@{prefix}-item-label {
+  display: flex;
+  align-items: baseline;
+  font-weight: 400;
+  color: @text-color;
+
+  label {
+    display: inline-block;
+  }
+}
+
+.@{prefix}-item-required {
+  color: @required-color;
+  margin-right: 4px;
+  font-family: SimSun, sans-serif;
+}
+
+.@{prefix}-item-control {
+  position: relative;
+}
+
+.@{prefix}-item-control-input {
+  position: relative;
+
+  input,
+  textarea,
+  select {
+    width: 100%;
+  }
+}
+
+// ============ 错误状态 ============
+.@{prefix}-item-has-error {
+  .@{prefix}-item-control-input {
+    input,
+    textarea,
+    select {
+      border-color: @error-color !important;
+
+      &:focus {
+        border-color: @error-color !important;
+        box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1) !important;
+      }
+    }
+  }
+}
+
+.@{prefix}-item-error {
+  color: @error-color;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 4px;
+  animation: errorSlideIn 0.3s ease;
+}
+
+@keyframes errorSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ============ 帮助信息 ============
+.@{prefix}-item-help {
+  color: @help-color;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+// ============ 额外信息 ============
+.@{prefix}-item-extra {
+  color: @text-secondary;
+  font-size: 12px;
+  line-height: 1.5;
+  margin-top: 4px;
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-item-label {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-item-required {
+    color: #ff7875;
+  }
+
+  .@{prefix}-item-error {
+    color: #ff7875;
+  }
+
+  .@{prefix}-item-help {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}-item-extra {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}-item-has-error {
+    .@{prefix}-item-control-input {
+      input,
+      textarea,
+      select {
+        border-color: #ff7875 !important;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgba(255, 120, 117, 0.2) !important;
+        }
+      }
+    }
+  }
+}
+

package/dist/esm/Grid/index.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import './style.less';
+type Gutter = number | [number, number];
+type JustifyContent = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+type AlignItems = 'top' | 'middle' | 'bottom' | 'stretch';
+export interface RowProps {
+    /** 栅格间隔，可以是数字或数组 [水平间距, 垂直间距] */
+    gutter?: Gutter;
+    /** 水平排列方式 */
+    justify?: JustifyContent;
+    /** 垂直对齐方式 */
+    align?: AlignItems;
+    /** 是否自动换行 */
+    wrap?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Row: React.FC<RowProps>;
+type ColSpan = number;
+interface ColSize {
+    span?: ColSpan;
+    offset?: number;
+    order?: number;
+    pull?: number;
+    push?: number;
+}
+export interface ColProps {
+    /** 栅格占位格数，为 0 时相当于 display: none */
+    span?: ColSpan;
+    /** 栅格左侧偏移格数 */
+    offset?: number;
+    /** 栅格顺序 */
+    order?: number;
+    /** 栅格向左移动格数 */
+    pull?: number;
+    /** 栅格向右移动格数 */
+    push?: number;
+    /** flex 布局属性 */
+    flex?: string | number;
+    /** <576px 响应式栅格 */
+    xs?: ColSpan | ColSize;
+    /** ≥576px 响应式栅格 */
+    sm?: ColSpan | ColSize;
+    /** ≥768px 响应式栅格 */
+    md?: ColSpan | ColSize;
+    /** ≥992px 响应式栅格 */
+    lg?: ColSpan | ColSize;
+    /** ≥1200px 响应式栅格 */
+    xl?: ColSpan | ColSize;
+    /** ≥1600px 响应式栅格 */
+    xxl?: ColSpan | ColSize;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Col: React.FC<ColProps>;
+type GridType = {
+    Row: typeof Row;
+    Col: typeof Col;
+};
+declare const Grid: GridType;
+export default Grid;

package/dist/esm/Grid/index.js

@@ -0,0 +1,165 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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, { createContext, useContext } from 'react';
+import "./style.less";
+
+// ============ Row Context ============
+import { jsx as _jsx } from "react/jsx-runtime";
+var RowContext = /*#__PURE__*/createContext({
+  gutter: [0, 0]
+});
+
+// ============ Row 行组件 ============
+
+export var Row = function Row(_ref) {
+  var _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 0 : _ref$gutter,
+    justify = _ref.justify,
+    align = _ref.align,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? true : _ref$wrap,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  // 处理 gutter
+  var gutterValue = Array.isArray(gutter) ? gutter : [gutter, 0];
+  var _gutterValue = _slicedToArray(gutterValue, 2),
+    horizontalGutter = _gutterValue[0],
+    verticalGutter = _gutterValue[1];
+
+  // justify 映射
+  var justifyMap = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between',
+    'space-evenly': 'space-evenly'
+  };
+
+  // align 映射
+  var alignMap = {
+    top: 'flex-start',
+    middle: 'center',
+    bottom: 'flex-end',
+    stretch: 'stretch'
+  };
+  var classNames = ['kage-row', className].filter(Boolean).join(' ');
+  var rowStyle = _objectSpread({
+    marginLeft: horizontalGutter ? -horizontalGutter / 2 : undefined,
+    marginRight: horizontalGutter ? -horizontalGutter / 2 : undefined,
+    rowGap: verticalGutter || undefined,
+    justifyContent: justify ? justifyMap[justify] : undefined,
+    alignItems: align ? alignMap[align] : undefined,
+    flexWrap: wrap ? 'wrap' : 'nowrap'
+  }, style);
+  return /*#__PURE__*/_jsx(RowContext.Provider, {
+    value: {
+      gutter: gutterValue
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames,
+      style: rowStyle,
+      children: children
+    })
+  });
+};
+
+// ============ Col 列组件 ============
+
+export var Col = function Col(_ref2) {
+  var span = _ref2.span,
+    offset = _ref2.offset,
+    order = _ref2.order,
+    pull = _ref2.pull,
+    push = _ref2.push,
+    flex = _ref2.flex,
+    xs = _ref2.xs,
+    sm = _ref2.sm,
+    md = _ref2.md,
+    lg = _ref2.lg,
+    xl = _ref2.xl,
+    xxl = _ref2.xxl,
+    children = _ref2.children,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style;
+  var _useContext = useContext(RowContext),
+    gutter = _useContext.gutter;
+  var _gutter = _slicedToArray(gutter, 1),
+    horizontalGutter = _gutter[0];
+
+  // 构建响应式类名
+  var getResponsiveClasses = function getResponsiveClasses() {
+    var classes = [];
+    var sizes = {
+      xs: xs,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xl: xl,
+      xxl: xxl
+    };
+    Object.entries(sizes).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        size = _ref4[0],
+        value = _ref4[1];
+      if (value !== undefined) {
+        if (typeof value === 'number') {
+          classes.push("kage-col-".concat(size, "-").concat(value));
+        } else if (_typeof(value) === 'object') {
+          if (value.span !== undefined) {
+            classes.push("kage-col-".concat(size, "-").concat(value.span));
+          }
+          if (value.offset !== undefined) {
+            classes.push("kage-col-".concat(size, "-offset-").concat(value.offset));
+          }
+          if (value.order !== undefined) {
+            classes.push("kage-col-".concat(size, "-order-").concat(value.order));
+          }
+          if (value.pull !== undefined) {
+            classes.push("kage-col-".concat(size, "-pull-").concat(value.pull));
+          }
+          if (value.push !== undefined) {
+            classes.push("kage-col-".concat(size, "-push-").concat(value.push));
+          }
+        }
+      }
+    });
+    return classes;
+  };
+  var classNames = ['kage-col', span !== undefined && "kage-col-".concat(span), offset !== undefined && "kage-col-offset-".concat(offset), order !== undefined && "kage-col-order-".concat(order), pull !== undefined && "kage-col-pull-".concat(pull), push !== undefined && "kage-col-push-".concat(push)].concat(_toConsumableArray(getResponsiveClasses()), [className]).filter(Boolean).join(' ');
+  var colStyle = _objectSpread({
+    paddingLeft: horizontalGutter ? horizontalGutter / 2 : undefined,
+    paddingRight: horizontalGutter ? horizontalGutter / 2 : undefined,
+    flex: flex !== undefined ? typeof flex === 'number' ? "".concat(flex, " ").concat(flex, " auto") : flex : undefined
+  }, style);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    style: colStyle,
+    children: children
+  });
+};
+
+// ============ Grid 命名空间导出 ============
+
+var Grid = {
+  Row: Row,
+  Col: Col
+};
+export default Grid;