@dckj-npm/dc-material 0.1.356 → 0.1.358

package/README.md

@@ -1,17 +1,17 @@
-# dc-material
-
-一个面向 PC 的业务组件库
-
-## 调试
-启动调试
-
-```
-npm run lowcode:dev             # 打开开发环境，运行所有组件
-```
-
-构建
-
-```
-npm run lowcode:build
-```
-
+# dc-material
+
+一个面向 PC 的业务组件库
+
+## 调试
+启动调试
+
+```
+npm run lowcode:dev             # 打开开发环境，运行所有组件
+```
+
+构建
+
+```
+npm run lowcode:build
+```
+

package/es/components/bottom-navigation/bottom-navigation.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import './index.scss';
+interface NavigationItem {
+    text: string;
+    icon: string;
+    selectedIcon: string;
+    pageId: string;
+}
+export interface NavigationProps {
+    itemArray: NavigationItem[];
+    selectedColor: string;
+    onClick?: (pageId: string) => void;
+}
+declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/es/components/bottom-navigation/bottom-navigation.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["itemArray", "selectedColor", "onClick", "__designMode"];
+import * as React from 'react';
+import { useState } from 'react';
+import { Image } from '@alilc/lowcode-materials';
+import "./index.scss";
+var Navigation = function BottomNavigation(_ref) {
+  var itemArray = _ref.itemArray,
+    selectedColor = _ref.selectedColor,
+    onClick = _ref.onClick,
+    __designMode = _ref.__designMode,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(0),
+    activeNum = _useState[0],
+    setActiveNum = _useState[1];
+  var clickHandle = function clickHandle(index, pageId) {
+    // 更新激活tab
+    setActiveNum(index);
+    if (__designMode == 'design') {
+      // 设计态不执行跳转
+      return;
+    }
+    console.log('clickHandle', pageId);
+    onClick(pageId);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "bottom-navigation"
+  }, otherProps), /*#__PURE__*/React.createElement("div", {
+    className: "navigation-panel"
+  }, itemArray.map(function (item, index) {
+    var _item$selectedIcon;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "navigation-panel-item",
+      onClick: function onClick() {
+        return clickHandle(index, item.pageId);
+      },
+      style: {
+        color: activeNum === index ? selectedColor !== null && selectedColor !== void 0 ? selectedColor : '#4598FF' : '',
+        fontWeight: activeNum === index ? "bold" : "500"
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      className: "navigation-item-image",
+      src: activeNum === index ? (_item$selectedIcon = item.selectedIcon) !== null && _item$selectedIcon !== void 0 ? _item$selectedIcon : item.icon : item.icon,
+      style: {
+        width: '24.5px',
+        height: '24.5px'
+      }
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: "12px"
+      }
+    }, item.text));
+  })));
+};
+export default Navigation;

package/es/components/bottom-navigation/index.d.ts

@@ -0,0 +1,3 @@
+import Navigation from './bottom-navigation';
+export type { NavigationProps } from './bottom-navigation';
+export default Navigation;

package/es/components/bottom-navigation/index.js

@@ -0,0 +1,2 @@
+import Navigation from "./bottom-navigation";
+export default Navigation;

package/es/components/bottom-navigation/index.scss

@@ -0,0 +1,28 @@
+.bottom-navigation {
+  padding-bottom: env(safe-area-inset-bottom);
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #fff;
+  z-index: 10;
+}
+.navigation-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 9px 0 6px 0;
+  width: 100%;
+  box-sizing: border-box;
+  &-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    flex: 1;
+    .navigation-item-image {
+      margin-bottom: 3px;
+    }
+  }
+}

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

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

package/es/components/button/button.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["name", "color"];
+import * as React from 'react';
+import "./index.scss";
+var Button = function Button(_ref) {
+  var name = _ref.name,
+    color = _ref.color,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: "button__container " + (color ? color : '')
+  }, otherProps), name);
+};
+export default Button;

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

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

package/es/components/button/index.js

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

package/es/components/button/index.scss

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

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

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

package/es/components/carousel/carousel.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import "./carousel.scss";
+var Carousel = function Carousel(_ref) {
+  var _ref$images = _ref.images,
+    images = _ref$images === void 0 ? [] : _ref$images,
+    _ref$interval = _ref.interval,
+    interval = _ref$interval === void 0 ? 3000 : _ref$interval;
+  // 如果没有图片则返回提示
+  if (images.length === 0) {
+    return /*#__PURE__*/React.createElement("div", null);
+  }
+  // 如果只有一张图片，则直接显示
+  if (images.length === 1) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "carousel"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: images[0],
+      alt: "Single slide",
+      className: "carousel-image"
+    }));
+  }
+  // 添加复制的第一张和最后一张图片以实现无缝切换
+  var extendedImages = [images[images.length - 1]].concat(images, [images[0]]);
+  // 初始显示第二张图片
+  var _useState = useState(1),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  // 切换到下一张图片
+  var goToNext = function goToNext() {
+    setCurrentIndex(function (prevIndex) {
+      return prevIndex + 1;
+    });
+  };
+  // 自动播放逻辑：在组件挂载时启动定时器
+  useEffect(function () {
+    var timer = setInterval(function () {
+      goToNext();
+    }, interval);
+    // 清除定时器，避免内存泄漏
+    return function () {
+      return clearInterval(timer);
+    };
+  }, [interval]);
+  useEffect(function () {
+    // 当切换到最后一张复制的图片时，设置为第二张图片
+    if (currentIndex === extendedImages.length - 1) {
+      setTimeout(function () {
+        // 跳转到第二张
+        setCurrentIndex(1);
+      }, 1000);
+    }
+  }, [currentIndex]);
+  // 计算当前显示的图像索引
+  var displayIndex = currentIndex > images.length ? currentIndex - images.length : currentIndex;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "carousel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "carousel-track",
+    style: {
+      transform: "translateX(-" + currentIndex * 100 + "%)",
+      // 只有在平滑切换时才应用过渡
+      transition: currentIndex === 1 ? 'none' : 'transform 1s ease-in-out'
+    }
+  }, extendedImages.map(function (image, index) {
+    return /*#__PURE__*/React.createElement("img", {
+      key: index,
+      src: image,
+      alt: "Slide " + index,
+      className: "carousel-image"
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "carousel-counter"
+  }, /*#__PURE__*/React.createElement("span", null, displayIndex), /*#__PURE__*/React.createElement("span", null, "/"), /*#__PURE__*/React.createElement("span", null, images.length)));
+};
+export default Carousel;

package/es/components/carousel/carousel.scss

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

package/es/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/es/components/colorful-button/colorful-button.js

@@ -0,0 +1,25 @@
+import _Button from "@alifd/next/es/button";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["type", "color", "style"];
+import * as React from 'react';
+import "./index.scss";
+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 = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_Button, _extends({
+    type: type
+  }, _otherProps), "fusion button");
+};
+ColorfulButton.displayName = 'ColorfulButton';
+export default ColorfulButton;

package/es/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/es/components/colorful-button/index.js

@@ -0,0 +1,2 @@
+import ColorfulButton from "./colorful-button";
+export default ColorfulButton;

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

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

package/es/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/es/components/colorful-input/colorful-input.js

@@ -0,0 +1,19 @@
+import _Input from "@alifd/next/es/input";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["color", "style"];
+import * as React from 'react';
+import "./index.scss";
+var ColorfulInput = function ColorfulInput(_ref) {
+  var color = _ref.color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _style = style || {};
+  if (color) {
+    _style.backgroundColor = color;
+  }
+  var _otherProps = otherProps || {};
+  _otherProps.style = _style;
+  return /*#__PURE__*/React.createElement(_Input, _otherProps);
+};
+export default ColorfulInput;

package/es/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/es/components/colorful-input/index.js

@@ -0,0 +1,2 @@
+import ColorfulInput from "./colorful-input";
+export default ColorfulInput;

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

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

package/es/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/es/components/dc-slider/index.js

@@ -0,0 +1,2 @@
+import SliderImg from "./slider-img";
+export default SliderImg;

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

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

package/es/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/es/components/dc-slider/slider-img.js

@@ -0,0 +1,17 @@
+import _Slider from "@alifd/next/es/slider";
+import * as React from 'react';
+import "./index.scss";
+var SliderImg = function DCSlider(props) {
+  console.log('slider', props.picUrls);
+  var style = props.style;
+  return /*#__PURE__*/React.createElement(_Slider, 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"));
+};
+export default SliderImg;

package/es/components/form/form-item.d.ts

@@ -0,0 +1,42 @@
+import './form-item.scss';
+import { DynamicColumnDataType } from 'src/entity/dynamic-column-data-type';
+export interface DCFormItemProps {
+    /**
+     * 字段名称
+     */
+    columnComment?: string;
+    /**
+     * 字段类型
+     */
+    columnType?: string;
+    /**
+     * 表单项组件类型
+     */
+    columnKeyType?: number;
+    /**
+     *列键类型的枚举
+     */
+    columnKeyTypeEnum?: DynamicColumnDataType;
+    /**
+     * 是否只读
+     */
+    isOnlyRead?: string;
+    /**
+     * 是否必填
+     */
+    isRequired?: number;
+    /**
+     * 默认值
+     */
+    defaultValue?: string;
+    /**
+     * 指示词
+     */
+    guideWords?: string;
+    /**
+     * 点击事件
+     */
+    onClick?: (e: any) => void;
+}
+declare const RefDCFormItem: any;
+export default RefDCFormItem;