@dckj-npm/dc-material 0.1.357 → 0.1.359

package/es/components/tab-container/index.scss

@@ -0,0 +1,48 @@
+.fusion-ui-tab {
+    display: block;
+    background-color: #fff;
+
+    &.next-medium {
+      .next-tabs-content {
+        padding: 0;
+      }
+      
+    }
+  .next-tabs-bar {
+    border-bottom: none;
+    margin-bottom: 15px;
+    .next-tabs-nav-container {
+      .next-tabs-nav {
+        .next-tabs-tab {
+          font-size: 16px;
+          color: #666666;
+          margin-right: 13px;
+          &.active {
+            color: #333;
+            font-size: 17px;
+          }
+          &.active::before {
+            bottom: 2px;
+            border-bottom: 5px solid #E96D40;
+            z-index: 0;
+            border-radius: 2.5px;
+          }
+        }
+      }
+    }
+  }
+
+    &.next-small {
+      .next-tabs-content {
+        padding: 12px;
+      }
+    }
+  }
+.navigation {
+  z-index: 10;
+  position: relative;
+}
+
+:global(.fd-layout-p-margin) {
+  margin-top: 0 !important;
+}

package/es/components/tab-container/tab-container.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tab } from '@alifd/next';
+import './index.scss';
+export interface TabContainerProps extends React.ComponentProps<typeof Tab> {
+    className?: string;
+}
+export declare const TabContainer: {
+    (props: TabContainerProps): JSX.Element;
+    displayName: string;
+};

package/es/components/tab-container/tab-container.js

@@ -0,0 +1,26 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className"];
+import React from 'react';
+import cx from 'classnames';
+import "./index.scss";
+export var TabContainer = function TabContainer(props) {
+  var className = props.className,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  var CustomTabItem = function CustomTabItem(key, props) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "navigation"
+    }, key.title);
+  };
+  return /*#__PURE__*/React.createElement(_Tab, _extends({
+    className: cx(className, 'fusion-ui-tab')
+  }, restProps, {
+    tabRender: function tabRender(key, props) {
+      return /*#__PURE__*/React.createElement(CustomTabItem, _extends({
+        key: key
+      }, props));
+    }
+  }));
+};
+TabContainer.displayName = 'TabContainer';

package/es/components/tab-container-item/index.d.ts

@@ -0,0 +1,3 @@
+import { TabContainerItem } from './tab-container-item';
+export type { TabContainerItemProps } from './tab-container-item';
+export default TabContainerItem;

package/es/components/tab-container-item/index.js

@@ -0,0 +1,2 @@
+import { TabContainerItem } from "./tab-container-item";
+export default TabContainerItem;

package/es/components/tab-container-item/tab-container-item.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Tab } from '@alifd/next';
+export interface TabContainerItemProps extends React.ComponentProps<typeof Tab> {
+    className?: string;
+    tab: string;
+    key: string;
+}
+export declare const TabContainerItem: {
+    (props: TabContainerItemProps): JSX.Element;
+    displayName: string;
+};

package/es/components/tab-container-item/tab-container-item.js

@@ -0,0 +1,19 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "tab", "key"];
+import React from 'react';
+import cx from 'classnames';
+export var TabContainerItem = function TabContainerItem(props) {
+  var className = props.className,
+    tab = props.tab,
+    key = props.key,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/React.createElement(_Tab.Item, _extends({
+    className: cx(className, 'fusion-ui-tab')
+  }, restProps, {
+    title: tab,
+    primaryKey: key
+  }));
+};
+TabContainerItem.displayName = 'TabContainerItem';

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

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

package/es/components/tag/index.js

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

package/es/components/tag/index.scss

@@ -0,0 +1,24 @@
+.tags__container {
+  padding: 2px 6px;
+  border-radius: 3px;
+  color: white;
+  font-size: 11px;
+}
+.orange {
+  color: #F1770E;
+  background: rgba(241, 119, 14, 0.1);
+}
+
+.blue {
+  color: #2972DD;
+  background-color: rgba(41, 114, 221, 0.1);
+}
+.green {
+  color: #52AD7C;
+  background: rgba(195, 254, 222, 0.4);
+}
+.green-n {
+  color: #52AD7C;
+  background: #FFFFFF;
+  box-shadow: 3.5px 5.5px 11px 0px rgba(203,203,203,0.34);
+}

package/es/components/tag/tag.d.ts

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

package/es/components/tag/tag.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 Tag = function Tag(_ref) {
+  var name = _ref.name,
+    color = _ref.color,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    className: "tags__container " + (color ? color : '')
+  }, otherProps), name);
+};
+export default Tag;

package/es/components/teletext-list/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 图文列表
+ */
+import TeletextList from './teletext-list';
+export type { TeletextListProps } from './teletext-list';
+export { TeletextList, };

package/es/components/teletext-list/index.js

@@ -0,0 +1,6 @@
+/**
+ * 图文列表
+ */
+
+import TeletextList from "./teletext-list";
+export { TeletextList };

package/es/components/teletext-list/index.scss

@@ -0,0 +1,53 @@
+@import '../../variables.scss';
+
+.teletext-list__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  margin: 0;
+
+  .teletext-list__panel__item-list {
+    display: grid;
+    width: 100%;
+    // flex-direction: column;
+    gap: 10px;
+  }
+
+  &-head {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    //align-items: ;
+    &-more {
+      flex-shrink: 0;
+      cursor: pointer;
+      &-text {
+        font-weight: 500;
+        font-size: 14px;
+        color: #666666;
+        margin-right: 2px;
+      }
+      &-img {
+        width: 5px;
+        height: 10px;
+      }
+    }
+  }
+
+  &-head-user-menu {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    &-img {
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+    }
+    &-text {
+      font-size: 14px;
+      color: #222222;
+    }
+  }
+}
+

package/es/components/teletext-list/teletext-list-item.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import './teletext-list-item.scss';
+import { IconListProps } from './teletext-list';
+/**
+ * 数据
+ */
+export interface TeletextListItemProps {
+    /**
+     * 点击事件
+     */
+    onClick?: (e: any) => void;
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 图片地址
+     */
+    image?: string[];
+    /**
+     * 图片位置
+     */
+    imagePlacement?: 'left' | 'right' | 'top' | 'bottom' | 'left-right' | 'none';
+    /**
+     * 说明
+     */
+    description?: string;
+    /**
+     * 标签列表
+     */
+    tags?: string;
+    /**
+     * 控件类型
+     */
+    type?: 'textAndImg' | 'imgOnly' | 'textOnly';
+    /**
+     * 行数
+     */
+    textLines?: number;
+    /**
+     * 子项列数
+     */
+    itemColumns?: number;
+    /**
+     * 图标列表
+     */
+    iconList?: IconListProps[];
+    /**
+     * 列表项内边距
+     */
+    itemPadding?: number;
+    /**
+     * 行数3
+     */
+    text3?: string;
+    /**
+     * 行数4
+     */
+    text4?: string;
+    /**
+     * 图片宽度
+     */
+    imgWidth?: number;
+    /**
+     * 图片高度
+     */
+    imgHeight?: number;
+    /**
+     * 背景颜色
+     */
+    itemBgColor?: string;
+    /**
+     * 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 图文对齐方式
+     */
+    textAlign?: 'flex-start' | 'flex-end' | 'center';
+    /**
+     * 是否为购物车列表
+     */
+    isShoppingCart?: boolean;
+    /**
+     * 是否为愿望单列表
+     */
+    isWishList?: boolean;
+    /**
+     * 是否为用户菜单列表
+     */
+    isUserMenu?: boolean;
+    /**
+     * 类型
+     */
+    itemType?: string;
+    /**
+     * 图文间距
+     */
+    textImgGap?: number;
+}
+declare const TeletextListItem: React.FC<TeletextListItemProps>;
+export default TeletextListItem;

package/es/components/teletext-list/teletext-list-item.js

@@ -0,0 +1,228 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onClick", "title", "image", "children", "imagePlacement", "description", "type", "textLines", "itemColumns", "itemPadding", "iconList", "tags", "text3", "text4", "imgWidth", "imgHeight", "itemBgColor", "style", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "itemType", "textImgGap"];
+import React from 'react';
+import "./teletext-list-item.scss";
+import { convertChildren } from "../../utils/children-node-handle";
+import { Icon } from '@alilc/lowcode-materials';
+
+/**
+ * 数据
+ */
+
+var TeletextListItem = function TeletextListItem(_ref) {
+  var _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    title = _ref.title,
+    _ref$image = _ref.image,
+    image = _ref$image === void 0 ? [] : _ref$image,
+    children = _ref.children,
+    imagePlacement = _ref.imagePlacement,
+    description = _ref.description,
+    type = _ref.type,
+    textLines = _ref.textLines,
+    itemColumns = _ref.itemColumns,
+    itemPadding = _ref.itemPadding,
+    iconList = _ref.iconList,
+    tags = _ref.tags,
+    text3 = _ref.text3,
+    text4 = _ref.text4,
+    imgWidth = _ref.imgWidth,
+    imgHeight = _ref.imgHeight,
+    itemBgColor = _ref.itemBgColor,
+    style = _ref.style,
+    textAlign = _ref.textAlign,
+    isShoppingCart = _ref.isShoppingCart,
+    isWishList = _ref.isWishList,
+    isUserMenu = _ref.isUserMenu,
+    itemType = _ref.itemType,
+    _ref$textImgGap = _ref.textImgGap,
+    textImgGap = _ref$textImgGap === void 0 ? 16 : _ref$textImgGap,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // 只获取第一张图片
+  var resultImage = image && image.length > 0 ? image[0] : '';
+  var _otherProps = otherProps || {};
+  var tagColorArray = ['orange', 'green'];
+  var tagList = (typeof tags === 'string' ? tags.split(',') : []).map(function (tag) {
+    return {
+      name: tag
+    };
+  });
+
+  // console.log('itemType', itemType)
+  var containerClass = "teletext-list__panel__item image-" + imagePlacement + " itemColumns-" + itemColumns;
+  var containerStyle = _extends({
+    padding: itemPadding + "px",
+    backgroundColor: itemBgColor,
+    alignItems: textAlign,
+    gap: textImgGap + "px"
+  }, style);
+
+  // 生成图标样式
+  var getIconStyle = function getIconStyle(icon) {
+    var baseStyle = {
+      position: 'absolute',
+      zIndex: 10
+    };
+    console.log('icon', icon);
+    // 默认偏移值
+    var defaultPosition = {};
+    switch (icon.position) {
+      case 'leftTop':
+        defaultPosition = {
+          top: '0px',
+          left: '10px'
+        };
+        break;
+      case 'leftBottom':
+        defaultPosition = {
+          bottom: '0px',
+          left: '10px'
+        };
+        break;
+      case 'rightTop':
+        defaultPosition = {
+          top: '0px',
+          right: '10px'
+        };
+        break;
+      case 'rightBottom':
+        defaultPosition = {
+          bottom: '0px',
+          right: '10px'
+        };
+        break;
+      case 'customize':
+        defaultPosition = {
+          right: (icon.rightOffset || 0) + "px",
+          top: (icon.topOffset || 0) + "px"
+        };
+        break;
+      default:
+        defaultPosition = {};
+        break;
+    }
+    return _extends({}, baseStyle, defaultPosition);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: containerClass,
+    onClick: onClick,
+    style: containerStyle
+  }, _otherProps), resultImage && (imagePlacement === 'left' || imagePlacement === 'top') && type !== 'textOnly' ? convertChildren(children, 'image', {
+    imgSrc: resultImage,
+    className: 'teletext-list__panel__item_image',
+    style: {
+      width: imgWidth + "px",
+      height: imgHeight + "px"
+    }
+  }) : null, type !== 'imgOnly' && itemType === '开关' && /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__switch",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, convertChildren(children, "text-1", {
+    children: [title],
+    className: "teletext-list__panel__item__switch__title"
+  }), convertChildren(children, "switch-1", {
+    children: [itemType],
+    className: "teletext-list__panel__item__switch__switch"
+  })), type !== 'imgOnly' && itemType !== '开关' && /*#__PURE__*/React.createElement("div", {
+    className: "teletext-list__panel__item__text"
+  }, Array.from({
+    length: textLines
+  }).map(function (_, index) {
+    // 第一行显示标题，其余行显示描述
+    var content = function () {
+      switch (index) {
+        case 0:
+          return title;
+        case 1:
+          return description;
+        case 2:
+          return text3;
+        case 3:
+          return text4;
+        default:
+          return '';
+      }
+    }();
+    return convertChildren(children, "text-" + (index + 1), {
+      children: [content],
+      className: "teletext-list__panel__item__text__" + (index === 0 ? 'title' : 'description')
+    });
+  }), isShoppingCart && /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "select-box"
+  }, convertChildren(children, 'select-box-1', {
+    popType: 'dialog',
+    selectType: 'number',
+    value: 1,
+    prefix: '数量',
+    dialogTitle: '选择数量',
+    btnText: '确定',
+    className: 'teletext-list__panel__item__select'
+  }), convertChildren(children, 'select-box-2', {
+    popType: 'dialog',
+    selectType: 'string',
+    dataList: [{
+      label: 'M',
+      value: 'M'
+    }, {
+      label: 'X',
+      value: 'X'
+    }, {
+      label: 'XL',
+      value: 'XL'
+    }],
+    value: 'X',
+    prefix: '尺码',
+    dialogTitle: '选择尺码',
+    btnText: '确定',
+    className: 'teletext-list__panel__item__select'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn__item"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202501/20250110/1075084331397025792.png",
+    alt: ""
+  }), "Move to wishlist"), /*#__PURE__*/React.createElement("div", {
+    className: "remove-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
+    alt: ""
+  }), "Remove"))), isWishList && /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "shopping-cart-select__btn__item"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202501/20250110/1075084331397025792.png",
+    alt: ""
+  }), "Move to Cart"), /*#__PURE__*/React.createElement("div", {
+    className: "remove-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "shopping-cart-select-img",
+    src: "https://51ymb.com/source/api/upload/1075055372064133120/2025/202502/20250207/1085235703970926592.png",
+    alt: ""
+  }), "Remove"))), resultImage && (imagePlacement === 'right' || imagePlacement === 'bottom') && type !== 'textOnly' ? convertChildren(children, 'image', {
+    src: resultImage,
+    className: 'teletext-list__panel__item_image'
+  }) : null, iconList === null || iconList === void 0 ? void 0 : iconList.map(function (icon, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "teletext-list__panel__item__icon size-" + icon.size,
+      style: getIconStyle(icon)
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: icon.icon,
+      size: icon.size
+    }));
+  }));
+};
+TeletextListItem.displayName = 'TeletextListItem';
+export default TeletextListItem;