@dckj-npm/dc-material 0.1.358 → 0.1.360

package/es/components/button/button.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import './index.scss';
-export interface ButtonProps {
-    /**
-     * 标签名称
-     */
-    name: string;
-    /**
-     * 标签颜色
-     */
-    color: string;
-}
-declare const Button: React.FC<ButtonProps>;
-export default Button;
+import * as React from 'react';
+import './index.scss';
+export interface ButtonProps {
+    /**
+     * 标签名称
+     */
+    name: string;
+    /**
+     * 标签颜色
+     */
+    color: string;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/es/components/button/button.js

@@ -8,7 +8,10 @@ var Button = function Button(_ref) {
     color = _ref.color,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: "button__container " + (color ? color : '')
+    className: 'button__container',
+    style: {
+      color: color
+    }
   }, otherProps), name);
 };
 export default Button;

package/es/components/button/index.d.ts

@@ -1,6 +1,6 @@
-/**
- * 标签tag
- */
-import Button from './button';
-export type { ButtonProps } from './button';
-export default Button;
+/**
+ * 标签tag
+ */
+import Button from './button';
+export type { ButtonProps } from './button';
+export default Button;

package/es/components/button/index.js

@@ -1,5 +1,5 @@
-/**
- * 标签tag
+/**
+ * 标签tag
  */
 import Button from "./button";
 export default Button;

package/es/components/button/index.scss

@@ -1,16 +1,16 @@
-.button__container {
-  padding: 9px 15px;
-  border-radius: 15px;
-  color: white;
-  font-size: 14px;
-}
-.complete {
-  color: #fff;
-  background-color: rgba(233, 110, 65, 1);
-}
-
-.undone {
-  color: rgba(233, 110, 65, 1);
-  background-color: #fff;
-  border: 1px solid rgba(233, 110, 65, 1);
-}
+.button__container {
+  padding: 9px 15px;
+  border-radius: 15px;
+  color: white;
+  font-size: 14px;
+}
+.complete {
+  color: #fff;
+  background-color: rgba(233, 110, 65, 1);
+}
+
+.undone {
+  color: rgba(233, 110, 65, 1);
+  background-color: #fff;
+  border: 1px solid rgba(233, 110, 65, 1);
+}

package/es/components/carousel/carousel.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import './carousel.scss';
-export interface CarouselProps {
-    /**
-     * 图片列表
-     */
-    images: string[];
-    /**
-     * 定时播放的时间
-     */
-    interval?: number;
-}
-declare const Carousel: React.FC<CarouselProps>;
-export default Carousel;
+import React from 'react';
+import './carousel.scss';
+export interface CarouselProps {
+    /**
+     * 图片列表
+     */
+    images: string[];
+    /**
+     * 定时播放的时间
+     */
+    interval?: number;
+}
+declare const Carousel: React.FC<CarouselProps>;
+export default Carousel;

package/es/components/carousel/carousel.scss

@@ -1,32 +1,32 @@
-.carousel {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.carousel-track {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.carousel-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-
-.carousel-counter {
-  position: absolute;
-  bottom: 2px;
-  right: 2px;
-  color: white;
-  background: rgba(0, 0, 0, 0.5);
-  padding: 2px 8px;
-  border-radius: 5px;
-  font-size: 12px;
-  display: flex;
-  gap: 2px;
-}
+.carousel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.carousel-track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.carousel-counter {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 8px;
+  border-radius: 5px;
+  font-size: 12px;
+  display: flex;
+  gap: 2px;
+}

package/es/components/collapse/collapse.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import './index.scss';
+/**
+ * 数据
+ */
+interface DataProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 内容
+     */
+    content?: string;
+}
+/**
+ * 折叠面板项配置
+ */
+interface ItemProps {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 内容
+     */
+    content?: string;
+}
+/**
+ * 折叠面板类型
+ */
+export interface CollapseProps {
+    /**
+     * 数据
+     */
+    dataList?: DataProps[];
+    /**
+     * 类型
+     */
+    type?: 'default' | 'borderless' | 'bordered';
+    /**
+     * 折叠面板项配置
+     */
+    itemList?: ItemProps[];
+    /**
+     * 子组件
+     */
+    children?: React.ReactNode;
+}
+declare const Collapse: React.FC<CollapseProps>;
+export default Collapse;

package/es/components/collapse/collapse.js

@@ -0,0 +1,58 @@
+import _Collapse from "@alifd/next/es/collapse";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["dataList", "itemList", "children"];
+import React from 'react';
+import "./index.scss";
+/**
+ * 数据
+ */
+
+/**
+ * 折叠面板项配置
+ */
+
+/**
+ * 折叠面板类型
+ */
+
+var Collapse = function Collapse(_ref) {
+  var dataList = _ref.dataList,
+    itemList = _ref.itemList,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _otherProps = otherProps || {};
+  var Panel = _Collapse.Panel;
+  var renderContent = function renderContent(content) {
+    if (!content) return null;
+    var contentArray = content.split(',');
+    return /*#__PURE__*/React.createElement("div", {
+      className: "collapse-content-list"
+    }, contentArray.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: "collapse-content-item"
+      }, item.trim());
+    }));
+  };
+  var renderItems = function renderItems() {
+    if ((dataList === null || dataList === void 0 ? void 0 : dataList.length) > 0) {
+      return dataList.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Panel, {
+          key: index,
+          title: item.title
+        }, item.content && renderContent(item.content));
+      });
+    }
+    if ((itemList === null || itemList === void 0 ? void 0 : itemList.length) > 0) {
+      return itemList.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(Panel, {
+          key: index,
+          title: item.title
+        }, item.content);
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(_Collapse, _otherProps, renderItems());
+};
+Collapse.displayName = 'Collapse';
+export default Collapse;

package/es/components/collapse/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 折叠面板
+ */
+import Collapse from './collapse';
+export type { CollapseProps } from './collapse';
+export { Collapse };

package/es/components/collapse/index.js

@@ -0,0 +1,5 @@
+/**
+ * 折叠面板
+ */
+import Collapse from "./collapse";
+export { Collapse };

package/es/components/collapse/index.scss

@@ -0,0 +1,18 @@
+.collapse{
+    width: 100%;
+    display: flex;
+}
+
+.collapse-content-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  
+  .collapse-content-item {
+    padding: 8px 12px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    color: #333;
+    font-size: 14px;
+  }
+}

package/es/components/collapse-selector/collapse-selector.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.scss';
+export interface CollapseSelectorProps {
+    dataList?: DataProps[];
+    children?: React.ReactNode;
+}
+interface DataProps {
+    title?: string;
+    icon?: string;
+    key?: string;
+    isContent?: boolean;
+}
+declare const CollapseSelector: React.FC<CollapseSelectorProps>;
+export default CollapseSelector;

package/es/components/collapse-selector/collapse-selector.js

@@ -0,0 +1,94 @@
+import React, { createElement, Children, isValidElement, useEffect } from 'react';
+import "./index.scss";
+import { CollapseSelectorItem } from "../collapse-selector-item/index";
+var CollapseSelector = function CollapseSelector(props) {
+  var children = props.children;
+  // 设置默认值为 null，之后通过 useEffect 设置为第一项
+  var _React$useState = React.useState(null),
+    activeKey = _React$useState[0],
+    setActiveKey = _React$useState[1];
+  var handleItemClick = function handleItemClick(key) {
+    setActiveKey(activeKey === key ? null : key);
+  };
+
+  // 找到第一个子项的 key 并设置为默认打开
+  useEffect(function () {
+    if (children) {
+      var firstKey = null;
+      Children.forEach(children, function (child) {
+        if (/*#__PURE__*/isValidElement(child) && child.type === CollapseSelectorItem && !firstKey) {
+          firstKey = child.props.key || '';
+        }
+      });
+      if (firstKey) {
+        setActiveKey(firstKey);
+      }
+    } else if (props.dataList && props.dataList.length > 0) {
+      // 如果使用 dataList，找到第一个项目
+      var _firstKey = props.dataList[0].key || '';
+      if (_firstKey) {
+        setActiveKey(_firstKey);
+      }
+    }
+  }, [children, props.dataList]);
+
+  // 处理低代码引擎中拖放的子组件
+  if (children) {
+    return /*#__PURE__*/createElement('div', {
+      className: 'collapse-selector'
+    }, Children.map(children, function (child) {
+      if (/*#__PURE__*/isValidElement(child) && child.type === CollapseSelectorItem) {
+        var childKey = child.props.key || '';
+        var isActive = activeKey === childKey;
+        return /*#__PURE__*/createElement('div', {
+          key: childKey,
+          className: 'collapse-selector-item'
+        }, [/*#__PURE__*/createElement('div', {
+          className: 'collapse-selector-header',
+          onClick: function onClick() {
+            return handleItemClick(childKey);
+          }
+        }, [/*#__PURE__*/createElement('div', {
+          className: 'collapse-selector-title'
+        }, [child.props.icon && /*#__PURE__*/createElement('i', {
+          className: "collapse-selector-icon " + child.props.icon
+        }), /*#__PURE__*/createElement('span', null, child.props.title)]), /*#__PURE__*/createElement('div', {
+          className: "collapse-selector-indicator " + (isActive ? 'active' : '')
+        })]), isActive && /*#__PURE__*/createElement('div', {
+          className: 'collapse-selector-content'
+        }, child)]);
+      }
+      return null;
+    }));
+  }
+
+  // 兼容原有的 dataList 方式（可以删除或保留以保持向后兼容）
+  var _props$dataList = props.dataList,
+    dataList = _props$dataList === void 0 ? [] : _props$dataList;
+  return /*#__PURE__*/createElement('div', {
+    className: 'collapse-selector'
+  }, dataList.map(function (item) {
+    return /*#__PURE__*/createElement('div', {
+      key: item.key,
+      className: 'collapse-selector-item'
+    }, [/*#__PURE__*/createElement('div', {
+      className: 'collapse-selector-header',
+      onClick: function onClick() {
+        return handleItemClick(item.key || '');
+      }
+    }, [/*#__PURE__*/createElement('div', {
+      className: 'collapse-selector-title'
+    }, [item.icon && /*#__PURE__*/createElement('i', {
+      className: "collapse-selector-icon " + item.icon
+    }), /*#__PURE__*/createElement('span', null, item.title)]), /*#__PURE__*/createElement('div', {
+      className: "collapse-selector-indicator " + (activeKey === item.key ? 'active' : '')
+    })]), item.isContent && activeKey === item.key && /*#__PURE__*/createElement('div', {
+      className: 'collapse-selector-content'
+    }, /*#__PURE__*/createElement(CollapseSelectorItem, {
+      title: item.title,
+      key: item.key
+    }))]);
+  }));
+};
+CollapseSelector.displayName = 'CollapseSelector';
+export default CollapseSelector;

package/es/components/collapse-selector/index.d.ts

@@ -0,0 +1,3 @@
+import CollapseSelector from './collapse-selector';
+export type { CollapseSelectorProps } from './collapse-selector';
+export { CollapseSelector };

package/es/components/collapse-selector/index.js

@@ -0,0 +1,2 @@
+import CollapseSelector from "./collapse-selector";
+export { CollapseSelector };

package/es/components/collapse-selector/index.scss

@@ -0,0 +1,98 @@
+.collapse-selector {
+  width: 100%;
+  
+  .collapse-selector-item {
+    margin-bottom: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+    border: 1px solid #e8e8e8;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  }
+
+  .collapse-selector-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    cursor: pointer;
+    background-color: #f9f9f9;
+    transition: background-color 0.3s;
+    
+    &:hover {
+      background-color: #f0f0f0;
+    }
+  }
+
+  .collapse-selector-title {
+    display: flex;
+    align-items: center;
+    
+    .collapse-selector-icon {
+      margin-right: 8px;
+      font-size: 18px;
+      color: #1890ff;
+    }
+    
+    span {
+      font-size: 14px;
+      font-weight: 500;
+      color: #333;
+    }
+  }
+
+  .collapse-selector-indicator {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+    position: relative;
+    transition: all 0.3s;
+    
+    &:before, &:after {
+      content: '';
+      position: absolute;
+      background-color: #999;
+      transition: all 0.3s;
+    }
+    
+    &:before {
+      width: 10px;
+      height: 2px;
+      top: 8px;
+      left: 4px;
+    }
+    
+    &:after {
+      width: 2px;
+      height: 10px;
+      top: 4px;
+      left: 8px;
+    }
+    
+    &.active {
+      background-color: #1890ff;
+      border-color: #1890ff;
+      
+      &:before, &:after {
+        background-color: white;
+      }
+      
+      &:after {
+        height: 0;
+      }
+    }
+  }
+  
+  .collapse-selector-content {
+    padding: 0;
+    overflow: hidden;
+    background-color: white;
+    border-top: 1px solid #e8e8e8;
+  }
+  
+  .collapse-selector-content-inner {
+    padding: 16px;
+    min-height: 80px;
+  }
+}

package/es/components/collapse-selector-item/collapse-selector-item.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CollapseSelectorItemProps {
+    children?: React.ReactNode;
+    title?: string;
+    icon?: string;
+}
+declare const CollapseSelectorItem: React.FC<CollapseSelectorItemProps>;
+export default CollapseSelectorItem;

package/es/components/collapse-selector-item/collapse-selector-item.js

@@ -0,0 +1,16 @@
+import { createElement } from 'react';
+
+// 创建子项组件
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var CollapseSelectorItem = function CollapseSelectorItem(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    icon = _ref.icon;
+  // 在组件内部我们只使用 children，title 和 icon 在父组件中使用
+  return /*#__PURE__*/createElement('div', {
+    className: 'collapse-selector-content-inner'
+  }, children);
+};
+CollapseSelectorItem.displayName = 'CollapseSelectorItem';
+export default CollapseSelectorItem;

package/es/components/collapse-selector-item/index.d.ts

@@ -0,0 +1,3 @@
+import CollapseSelectorItem from './collapse-selector-item';
+export type { CollapseSelectorItemProps } from './collapse-selector-item';
+export { CollapseSelectorItem };

package/es/components/collapse-selector-item/index.js

@@ -0,0 +1,2 @@
+import CollapseSelectorItem from "./collapse-selector-item";
+export { CollapseSelectorItem };

package/es/components/collapse-selector-item/index.scss

@@ -0,0 +1,6 @@
+
+.collapse-selector-content {
+    padding: 12px 16px;
+    background-color: #fff;
+    border-top: 1px solid #eee;
+  }

package/es/components/colorful-button/colorful-button.d.ts

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import './index.scss';
-export interface ColorfulButtonProps {
-    /**
-     * 类型
-     */
-    type?: "primary" | "secondary" | "normal";
-    color?: string;
-    style?: object;
-}
-declare const ColorfulButton: React.FC<ColorfulButtonProps>;
-export default ColorfulButton;
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulButtonProps {
+    /**
+     * 类型
+     */
+    type?: "primary" | "secondary" | "normal";
+    color?: string;
+    style?: object;
+}
+declare const ColorfulButton: React.FC<ColorfulButtonProps>;
+export default ColorfulButton;

package/es/components/colorful-button/index.d.ts

@@ -1,3 +1,3 @@
-import ColorfulButton from './colorful-button';
-export type { ColorfulButtonProps } from './colorful-button';
-export default ColorfulButton;
+import ColorfulButton from './colorful-button';
+export type { ColorfulButtonProps } from './colorful-button';
+export default ColorfulButton;

package/es/components/colorful-button/index.scss

@@ -1,5 +1,5 @@
-@import '../../variables.scss';
-
-#{$biz-css-prefix}-colorful-button {
-  border: 2px dashed blue;
-}
+@import '../../variables.scss';
+
+#{$biz-css-prefix}-colorful-button {
+  border: 2px dashed blue;
+}

package/es/components/colorful-input/colorful-input.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import './index.scss';
-export interface ColorfulInputProps {
-    color?: string;
-    style?: object;
-}
-declare const ColorfulInput: React.FC<ColorfulInputProps>;
-export default ColorfulInput;
+import * as React from 'react';
+import './index.scss';
+export interface ColorfulInputProps {
+    color?: string;
+    style?: object;
+}
+declare const ColorfulInput: React.FC<ColorfulInputProps>;
+export default ColorfulInput;

package/es/components/colorful-input/index.d.ts

@@ -1,3 +1,3 @@
-import ColorfulInput from './colorful-input';
-export type { ColorfulInputProps } from './colorful-input';
-export default ColorfulInput;
+import ColorfulInput from './colorful-input';
+export type { ColorfulInputProps } from './colorful-input';
+export default ColorfulInput;