@dckj-npm/dc-material 0.1.358 → 0.1.360

package/es/components/colorful-input/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/custom-form/custom-form.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './index.scss';
+import { FormProps } from '@alifd/next/lib/form';
+export type CustomFormItemType = 'Input' | 'TextArea' | 'Select' | 'RadioGroup' | 'CheckboxGroup' | 'NumberPicker' | 'DatePicker' | 'Upload';
+export interface CustomFormItemSchema {
+    field: string;
+    label?: string;
+    required?: boolean;
+    componentType?: CustomFormItemType;
+    componentProps?: Record<string, any>;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    columnSpan?: number;
+    formItemProps?: Record<string, any>;
+}
+type GridSpacing = [number] | [number, number] | [number, number, number] | [number, number, number, number];
+export interface CustomFormProps extends Omit<FormProps, 'onSubmit'> {
+    columns?: number;
+    spacing?: GridSpacing;
+    emptyContent?: React.ReactNode;
+    formItems?: CustomFormItemSchema[];
+    showSubmit?: boolean;
+    submitText?: string;
+    submitValidate?: boolean;
+    submitDataSource?: any;
+    submitButtonProps?: Record<string, any>;
+    showReset?: boolean;
+    resetText?: string;
+    resetButtonProps?: Record<string, any>;
+    onSubmit?: (values: any, errors: any, field: any) => void;
+    onSubmitFailed?: (values: any, errors: any, field: any) => void;
+    children?: React.ReactNode;
+}
+declare const CustomForm: React.FC<CustomFormProps>;
+export default CustomForm;

package/es/components/custom-form/custom-form.js

@@ -0,0 +1,158 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _Upload from "@alifd/next/es/upload";
+import _NumberPicker from "@alifd/next/es/number-picker";
+import _DatePicker from "@alifd/next/es/date-picker";
+import _Checkbox from "@alifd/next/es/checkbox";
+import _Radio from "@alifd/next/es/radio";
+import _Select from "@alifd/next/es/select";
+import _Input from "@alifd/next/es/input";
+import _ResponsiveGrid from "@alifd/next/es/responsive-grid";
+import _Form from "@alifd/next/es/form";
+var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
+import React, { useCallback } from 'react';
+import "./index.scss";
+var NextFormAny = _Form;
+var ResponsiveGridAny = _ResponsiveGrid;
+var ResponsiveGridCell = _ResponsiveGrid.Cell;
+var FormItemAny = _Form.Item;
+var InputAny = _Input;
+var TextAreaAny = _Input.TextArea;
+var SelectAny = _Select;
+var RadioGroupAny = _Radio.Group;
+var CheckboxGroupAny = _Checkbox.Group;
+var DatePickerAny = _DatePicker;
+var NumberPickerAny = _NumberPicker;
+var UploadAny = _Upload;
+var runSubmitDataSource = function runSubmitDataSource(submitDataSource, values, errors, field) {
+  if (!submitDataSource) return;
+  if (typeof submitDataSource === 'function') {
+    submitDataSource(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.run) === 'function') {
+    submitDataSource.run(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.execute) === 'function') {
+    submitDataSource.execute(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.request) === 'function') {
+    submitDataSource.request(values, errors, field);
+    return;
+  }
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.submit) === 'function') {
+    submitDataSource.submit(values, errors, field);
+  }
+};
+var renderFormItemComponent = function renderFormItemComponent(item) {
+  var componentProps = item.componentProps || {};
+  var dataSource = componentProps.dataSource || item.options || [];
+  switch (item.componentType) {
+    case 'TextArea':
+      return /*#__PURE__*/React.createElement(TextAreaAny, componentProps);
+    case 'Select':
+      return /*#__PURE__*/React.createElement(SelectAny, _extends({
+        dataSource: dataSource
+      }, componentProps));
+    case 'RadioGroup':
+      return /*#__PURE__*/React.createElement(RadioGroupAny, _extends({
+        dataSource: dataSource
+      }, componentProps));
+    case 'CheckboxGroup':
+      return /*#__PURE__*/React.createElement(CheckboxGroupAny, _extends({
+        dataSource: dataSource
+      }, componentProps));
+    case 'NumberPicker':
+      return /*#__PURE__*/React.createElement(NumberPickerAny, componentProps);
+    case 'DatePicker':
+      return /*#__PURE__*/React.createElement(DatePickerAny, componentProps);
+    case 'Upload':
+      return /*#__PURE__*/React.createElement(UploadAny, componentProps);
+    case 'Input':
+    default:
+      return /*#__PURE__*/React.createElement(InputAny, componentProps);
+  }
+};
+var CustomForm = function CustomForm(_ref) {
+  var _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? 1 : _ref$columns,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? [0, 16, 16, 0] : _ref$spacing,
+    _ref$emptyContent = _ref.emptyContent,
+    emptyContent = _ref$emptyContent === void 0 ? '添加表单项' : _ref$emptyContent,
+    _ref$formItems = _ref.formItems,
+    formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
+    _ref$showSubmit = _ref.showSubmit,
+    showSubmit = _ref$showSubmit === void 0 ? true : _ref$showSubmit,
+    _ref$submitText = _ref.submitText,
+    submitText = _ref$submitText === void 0 ? '提交' : _ref$submitText,
+    _ref$submitValidate = _ref.submitValidate,
+    submitValidate = _ref$submitValidate === void 0 ? true : _ref$submitValidate,
+    submitDataSource = _ref.submitDataSource,
+    submitButtonProps = _ref.submitButtonProps,
+    _ref$showReset = _ref.showReset,
+    showReset = _ref$showReset === void 0 ? false : _ref$showReset,
+    _ref$resetText = _ref.resetText,
+    resetText = _ref$resetText === void 0 ? '重置' : _ref$resetText,
+    resetButtonProps = _ref.resetButtonProps,
+    onSubmit = _ref.onSubmit,
+    onSubmitFailed = _ref.onSubmitFailed,
+    children = _ref.children,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var handleSubmit = useCallback(function (values, errors, field) {
+    if (errors && Object.keys(errors).length) {
+      if (onSubmitFailed) {
+        onSubmitFailed(values, errors, field);
+      }
+      return;
+    }
+    if (onSubmit) {
+      onSubmit(values, errors, field);
+    }
+    runSubmitDataSource(submitDataSource, values, errors, field);
+  }, [onSubmit, onSubmitFailed, submitDataSource]);
+  var formItemNodes = formItems.map(function (item, index) {
+    var colSpan = Math.min(columns, Math.max(1, item.columnSpan || 1));
+    var formItemProps = item.formItemProps || {};
+    return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
+      colSpan: colSpan,
+      key: (item.field || index) + "-form-item"
+    }, /*#__PURE__*/React.createElement(FormItemAny, _extends({
+      label: item.label,
+      name: item.field,
+      required: item.required
+    }, formItemProps), renderFormItemComponent(item)));
+  });
+  var childrenNodes = React.Children.toArray(children).map(function (child, index) {
+    if (/*#__PURE__*/React.isValidElement(child) && child.type === ResponsiveGridCell) {
+      return child;
+    }
+    return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
+      colSpan: 1,
+      key: "custom-form-child-" + index
+    }, child);
+  });
+  var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
+  return /*#__PURE__*/React.createElement(NextFormAny, _extends({
+    className: "custom-form"
+  }, otherProps), hasContent ? /*#__PURE__*/React.createElement(ResponsiveGridAny, {
+    className: "custom-form__grid",
+    gap: spacing,
+    columns: columns
+  }, formItemNodes, childrenNodes) : /*#__PURE__*/React.createElement("div", {
+    className: "custom-form__empty"
+  }, emptyContent), showSubmit || showReset ? /*#__PURE__*/React.createElement("div", {
+    className: "custom-form__actions"
+  }, showReset ? /*#__PURE__*/React.createElement(NextFormAny.Reset, _extends({
+    className: "custom-form__reset"
+  }, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/React.createElement(NextFormAny.Submit, _extends({
+    className: "custom-form__submit",
+    type: "primary",
+    validate: submitValidate,
+    onClick: handleSubmit
+  }, submitButtonProps), submitText) : null) : null);
+};
+CustomForm.displayName = 'CustomForm';
+export default CustomForm;

package/es/components/custom-form/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 自定义表单
+ */
+import CustomForm from './custom-form';
+export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType } from './custom-form';
+export { CustomForm };

package/es/components/custom-form/index.js

@@ -0,0 +1,6 @@
+/**
+ * 自定义表单
+ */
+
+import CustomForm from "./custom-form";
+export { CustomForm };

package/es/components/custom-form/index.scss

@@ -0,0 +1,25 @@
+.custom-form {
+  background-color: #fafafa;
+}
+
+.custom-form__grid {
+  width: 100%;
+}
+
+.custom-form__empty {
+  color: #999;
+  padding: 12px 0;
+  text-align: center;
+}
+
+.custom-form__actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 12px 0 0;
+}
+
+.custom-form__submit,
+.custom-form__reset {
+  min-width: 120px;
+}

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

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

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

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

package/es/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/es/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/es/components/custom-select/select.js

@@ -0,0 +1,146 @@
+import _Select from "@alifd/next/es/select";
+import _Button from "@alifd/next/es/button";
+import _Drawer from "@alifd/next/es/drawer";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["popType", "selectType", "dataList", "value", "prefix", "dialogTitle", "btnText", "options", "onChange"];
+import React, { createElement, useState, useEffect } from 'react';
+import "./index.scss";
+/**
+ * 选择器
+ */
+
+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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  var _useState2 = useState(value),
+    tempValue = _useState2[0],
+    setTempValue = _useState2[1];
+  var _useState3 = 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.
+  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__*/createElement(NumberPicker, {
+        value: tempValue,
+        onChange: handleSelect,
+        style: {
+          width: '100%'
+        }
+      });
+    }
+    if (selectType === 'color') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "select-options color-options"
+      }, finalDataSource.map(function (item) {
+        return /*#__PURE__*/React.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.createElement("span", {
+          className: "color-label"
+        }, item.label));
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "select-options"
+    }, finalDataSource.map(function (item) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.value,
+        className: "select-option " + (tempValue === item.value ? 'selected' : ''),
+        onClick: function onClick() {
+          return handleSelect(item.value);
+        }
+      }, item.label);
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "custom-select"
+  }, _otherProps), popType === 'bottom' ? (/*#__PURE__*/createElement(_Select, _extends({}, restProps, {
+    label: prefix,
+    value: committedValue,
+    dataSource: finalDataSource,
+    onChange: handleBottomChange
+  }))) : popType === 'normal' ? /*#__PURE__*/React.createElement("div", {
+    className: "select-normal"
+  }, prefix && /*#__PURE__*/React.createElement("span", {
+    className: "prefix"
+  }, prefix), renderContent()) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "select-trigger",
+    onClick: handleClick
+  }, prefix && /*#__PURE__*/React.createElement("span", {
+    className: "prefix"
+  }, prefix), /*#__PURE__*/React.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__*/createElement(_Drawer, {
+    placement: 'bottom',
+    visible: visible,
+    title: dialogTitle,
+    onClose: handleCancel,
+    footerAlign: 'center'
+  }, renderContent(), /*#__PURE__*/createElement(_Button, {
+    className: 'select-btn',
+    onClick: handleOk
+  }, btnText))));
+};
+CustomSelect.displayName = 'CustomSelect';
+export default CustomSelect;

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

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

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

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