@dckj-npm/dc-material 0.1.357 → 0.1.359

package/lib/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/lib/components/collapse-selector-item/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _collapseSelectorItem = _interopRequireDefault(require("./collapse-selector-item"));
+exports.CollapseSelectorItem = _collapseSelectorItem["default"];

package/lib/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/lib/components/colorful-button/colorful-button.d.ts

@@ -0,0 +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;

package/lib/components/colorful-button/colorful-button.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _excluded = ["type", "color", "style"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ColorfulButton = function ColorfulButton(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'primary' : _ref$type,
+    color = _ref.color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
+    type: type
+  }, _otherProps), "fusion button");
+};
+ColorfulButton.displayName = 'ColorfulButton';
+var _default = exports["default"] = ColorfulButton;

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

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

package/lib/components/colorful-button/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _colorfulButton = _interopRequireDefault(require("./colorful-button"));
+var _default = exports["default"] = _colorfulButton["default"];

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

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

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

@@ -0,0 +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;

package/lib/components/colorful-input/colorful-input.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _excluded = ["color", "style"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ColorfulInput = function ColorfulInput(_ref) {
+  var color = _ref.color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_input["default"], _otherProps);
+};
+var _default = exports["default"] = ColorfulInput;

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

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

package/lib/components/colorful-input/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _colorfulInput = _interopRequireDefault(require("./colorful-input"));
+var _default = exports["default"] = _colorfulInput["default"];

package/lib/components/colorful-input/index.scss

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

package/lib/components/custom-select/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 选择器
+ */
+import CustomSelect from './select';
+export type { CustomSelectProps } from './select';
+export { CustomSelect };

package/lib/components/custom-select/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+var _select = _interopRequireDefault(require("./select"));
+exports.CustomSelect = _select["default"];

package/lib/components/custom-select/index.scss

@@ -0,0 +1,152 @@
+.custom-select {
+    width: 100%;
+    color: #222222;
+    // background-color: rgba(237, 239, 244, 0.45);
+  .select-trigger {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 5px 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 5px 10px;
+    border-radius: 5px;
+    background: rgba(237, 239, 244, 0.45);
+    
+    .prefix {
+      margin-right: 8px;
+      color: #222222;
+      font-size: 14px;
+    }
+    
+    .value {
+    }
+  }
+}
+  
+.select-options {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  // padding: 0 12px 12px 12px;
+  
+  .select-option {
+    width: 28px;
+    height: 28px;
+    padding: 4px;
+    text-align: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    border-radius: 3px;
+    background-color: rgba(237, 239, 244, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background-color: #f5f5f5;
+    }
+    
+    &.selected {
+      background-color: #FF4C3B;
+      color: #111;
+    }
+  }
+  
+  &.color-options {
+    .color-option {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid transparent;
+      padding: 0;
+      position: relative;
+      overflow: hidden;
+      
+      .color-label {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        color: #fff;
+        font-size: 12px;
+        width: 100%;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0 4px;
+        text-shadow: 0 0 2px rgba(0,0,0,0.5);
+      }
+      
+      &.selected {
+        border-color: #333;
+
+        &::after {
+          content: '✓';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          background: transparent;
+          color: rgba(255, 255, 255, 0.95);
+          font-size: 16px;
+          line-height: 1;
+          text-align: center;
+          text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
+          pointer-events: none;
+        }
+      }
+      
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+// 添加全局样式以固定 Drawer 位置
+.next-drawer {
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  
+  &.next-drawer-bottom {
+    height: auto !important;
+    max-height: 30vh !important;
+  }
+  .select-btn {
+    width: 100%;
+    height: 42px;
+    background-color: #FF4C3B;
+    color: #ffffff;
+    font-weight: 400;
+    font-size: 16px;
+    padding: 8px 18px;
+    margin-top: 5px;
+    border-radius: 4px;
+  }
+}
+
+.select-normal {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .prefix {
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .select-options {
+    flex: 1;
+  }
+  
+  .next-number-picker {
+    width: 100%;
+  }
+}

package/lib/components/custom-select/select.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import './index.scss';
+/**
+ * 选择器
+ */
+export interface CustomSelectProps {
+    /**
+     * 弹出类型
+     */
+    popType?: 'dialog' | 'bottom' | 'normal';
+    /**
+     * 选择类型
+     */
+    selectType?: 'number' | 'string' | 'color';
+    /**
+     * 数据
+     */
+    dataList?: any[];
+    /**
+     * 选中值
+     */
+    value?: any;
+    /**
+     * 前缀
+     */
+    prefix?: string;
+    /**
+     * 标题
+     */
+    dialogTitle?: string;
+    /**
+     * 按钮文字
+     */
+    btnText?: string;
+    /**
+     * 数据源绑定选项
+     */
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    onChange?: (value: any) => void;
+}
+declare const CustomSelect: React.FC<CustomSelectProps>;
+export default CustomSelect;

package/lib/components/custom-select/select.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.scss");
+var _excluded = ["popType", "selectType", "dataList", "value", "prefix", "dialogTitle", "btnText", "options", "onChange"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * 选择器
+ */
+
+var CustomSelect = function CustomSelect(_ref) {
+  var _finalDataSource$find;
+  var popType = _ref.popType,
+    _ref$selectType = _ref.selectType,
+    selectType = _ref$selectType === void 0 ? 'string' : _ref$selectType,
+    _ref$dataList = _ref.dataList,
+    dataList = _ref$dataList === void 0 ? [] : _ref$dataList,
+    value = _ref.value,
+    prefix = _ref.prefix,
+    _ref$dialogTitle = _ref.dialogTitle,
+    dialogTitle = _ref$dialogTitle === void 0 ? '请选择' : _ref$dialogTitle,
+    _ref$btnText = _ref.btnText,
+    btnText = _ref$btnText === void 0 ? '确认' : _ref$btnText,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = (0, _react.useState)(value),
+    tempValue = _useState2[0],
+    setTempValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(value),
+    innerValue = _useState3[0],
+    setInnerValue = _useState3[1];
+
+  // Sync internal state when external value actually changes.
+  // Note: we intentionally still keep internal state for display,
+  // so lowcode can bind `onChange` without wiring `value` back.
+  (0, _react.useEffect)(function () {
+    setTempValue(value);
+    setInnerValue(value);
+  }, [value]);
+  var _otherProps = otherProps || {};
+  var restProps = otherProps || {};
+  var committedValue = innerValue;
+  var finalDataSource = options !== null && options !== void 0 && options.length ? options : dataList;
+  var handleClick = function handleClick() {
+    if (popType === 'dialog') {
+      setTempValue(committedValue);
+      setVisible(true);
+    }
+  };
+  var handleOk = function handleOk() {
+    setInnerValue(tempValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(tempValue);
+    setVisible(false);
+  };
+  var handleCancel = function handleCancel() {
+    setTempValue(committedValue);
+    setVisible(false);
+  };
+  var handleSelect = function handleSelect(selectedValue) {
+    setTempValue(selectedValue);
+    if (popType === 'dialog') {
+      return;
+    }
+    setInnerValue(selectedValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(selectedValue);
+  };
+  var handleBottomChange = handleSelect;
+  var renderContent = function renderContent() {
+    if (selectType === 'number') {
+      return /*#__PURE__*/(0, _react.createElement)(NumberPicker, {
+        value: tempValue,
+        onChange: handleSelect,
+        style: {
+          width: '100%'
+        }
+      });
+    }
+    if (selectType === 'color') {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "select-options color-options"
+      }, finalDataSource.map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          key: item.value,
+          className: "select-option color-option " + (tempValue === item.value ? 'selected' : ''),
+          onClick: function onClick() {
+            return handleSelect(item.value);
+          },
+          style: {
+            backgroundColor: item.value
+          }
+        }, /*#__PURE__*/_react["default"].createElement("span", {
+          className: "color-label"
+        }, item.label));
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "select-options"
+    }, finalDataSource.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.value,
+        className: "select-option " + (tempValue === item.value ? 'selected' : ''),
+        onClick: function onClick() {
+          return handleSelect(item.value);
+        }
+      }, item.label);
+    }));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: "custom-select"
+  }, _otherProps), popType === 'bottom' ? (/*#__PURE__*/(0, _react.createElement)(_select["default"], (0, _extends2["default"])({}, restProps, {
+    label: prefix,
+    value: committedValue,
+    dataSource: finalDataSource,
+    onChange: handleBottomChange
+  }))) : popType === 'normal' ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "select-normal"
+  }, prefix && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "prefix"
+  }, prefix), renderContent()) : /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "select-trigger",
+    onClick: handleClick
+  }, prefix && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "prefix"
+  }, prefix), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "value"
+  }, selectType === 'string' ? ((_finalDataSource$find = finalDataSource.find(function (item) {
+    return item.value === committedValue;
+  })) === null || _finalDataSource$find === void 0 ? void 0 : _finalDataSource$find.label) || '请选择' : committedValue || '请选择')), /*#__PURE__*/(0, _react.createElement)(_drawer["default"], {
+    placement: 'bottom',
+    visible: visible,
+    title: dialogTitle,
+    onClose: handleCancel,
+    footerAlign: 'center'
+  }, renderContent(), /*#__PURE__*/(0, _react.createElement)(_button["default"], {
+    className: 'select-btn',
+    onClick: handleOk
+  }, btnText))));
+};
+CustomSelect.displayName = 'CustomSelect';
+var _default = exports["default"] = CustomSelect;

package/lib/components/dc-slider/index.d.ts

@@ -0,0 +1,3 @@
+import SliderImg from './slider-img';
+export type { SliderComponentProps } from './slider-img';
+export default SliderImg;

package/lib/components/dc-slider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _sliderImg = _interopRequireDefault(require("./slider-img"));
+var _default = exports["default"] = _sliderImg["default"];

package/lib/components/dc-slider/index.scss

@@ -0,0 +1,6 @@
+
+.slider-img {
+  height: 172px;
+  //width: 100%;
+  object-fit: fill;
+}

package/lib/components/dc-slider/slider-img.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './index.scss';
+export interface SliderComponentProps {
+    prefix: string;
+    animation: string;
+    arrows: true;
+    arrowSize: string;
+    arrowPosition: string;
+    arrowDirection: string;
+    autoplaySpeed: number;
+    dots: boolean;
+    dotsDirection: string;
+    draggable: boolean;
+    infinite: boolean;
+    slide: string;
+    slideDirection: string;
+    slidesToShow: number;
+    slidesToScroll: number;
+    speed: number;
+    triggerType: string;
+    centerPadding: string;
+    cssEase: string;
+    edgeFriction: number;
+    swipe: boolean;
+    touchMove: boolean;
+    touchThreshold: number;
+    useCSS: boolean;
+    waitForAnimate: boolean;
+    picUrls: string[];
+}
+declare const SliderImg: React.FC<SliderComponentProps>;
+export default SliderImg;

package/lib/components/dc-slider/slider-img.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = void 0;
+var _slider = _interopRequireDefault(require("@alifd/next/lib/slider"));
+var React = _interopRequireWildcard(require("react"));
+require("./index.scss");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var SliderImg = function DCSlider(props) {
+  console.log('slider', props.picUrls);
+  var style = props.style;
+  return /*#__PURE__*/React.createElement(_slider["default"], props, props.picUrls && props.picUrls.length > 0 ? props.picUrls.map(function (url, index) {
+    return /*#__PURE__*/React.createElement("img", {
+      src: url,
+      alt: "Slide",
+      key: index,
+      className: "slider-img",
+      style: style
+    });
+  }) : /*#__PURE__*/React.createElement("div", null, "\u56FE\u7247\u4E3A\u7A7A"));
+};
+var _default = exports["default"] = SliderImg;

package/lib/components/drawer/drawer.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import './index.scss';
+interface ActionProps {
+    /**
+     * 文本
+     */
+    text: string;
+    /**
+     * 操作
+     */
+    action: string;
+    /**
+     * 样式
+     */
+    style: 'primary' | 'secondary' | 'normal';
+}
+export interface DrawerProps {
+    /**
+     * 是否显示
+     */
+    visible: boolean;
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 弹出位置
+     */
+    placement: 'top' | 'left' | 'right' | 'bottom';
+    /**
+     * 操作项
+     */
+    actions: ActionProps[];
+    /**
+     * 内容
+     */
+    children: React.ReactNode;
+    /**
+     * 点击事件
+     */
+    onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;