@dckj-npm/dc-material 0.1.376 → 0.1.377

package/lib/components/teletext-list/teletext-list-item.scss

@@ -80,12 +80,61 @@
       display: -webkit-box;
       text-overflow: ellipsis;
     }
-    .teletext-list__panel__item__switch__switch {
-      font-size: 14px;
-      font-weight: 600;
-      color: #222222;
+    // ─── 原生 toggle switch ────────────────────────────────────────────────────────
+    .teletext-list__panel__item__switch__toggle {
+      position: relative;
+      display: inline-block;
+      width: 44px;
+      height: 24px;
+      flex-shrink: 0;
+      cursor: pointer;
+
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+        position: absolute;
+      }
+
+      .teletext-list__panel__item__switch__slider {
+        position: absolute;
+        inset: 0;
+        background-color: #cccccc;
+        border-radius: 24px;
+        transition: background-color 0.2s;
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          left: 3px;
+          top: 3px;
+          background-color: #fff;
+          border-radius: 50%;
+          transition: transform 0.2s;
+        }
+      }
+
+      input:checked + .teletext-list__panel__item__switch__slider {
+        background-color: #4c84ff;
+        &::before {
+          transform: translateX(20px);
+        }
+      }
     }
   }
+  // ─── 购物车 select 下拉菜单 ──────────────────────────────────────────────────────
+  .teletext-list__panel__item__select {
+    padding: 4px 8px;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    font-size: 12px;
+    background: #fff;
+    color: #333333;
+    outline: none;
+    cursor: pointer;
+  }
   .shopping-cart-select {
     display: flex;
     flex-direction: column;

package/lib/components/teletext-list/teletext-list.d.ts

@@ -28,6 +28,14 @@ interface DataProps {
      * 类型
      */
     itemType?: string;
+    /**
+     * 扩展文本行3（textLines >= 3 时显示）
+     */
+    text3?: string;
+    /**
+     * 扩展文本行4（textLines >= 4 时显示）
+     */
+    text4?: string;
 }
 export interface IconListProps {
     /**
@@ -65,10 +73,6 @@ export interface TeletextListProps {
      * @param e
      */
     onClick?: (e: any) => void;
-    /**
-     * 子节点
-     */
-    children?: React.ReactNode;
     /**
      * 图片位置
      */
@@ -142,6 +146,58 @@ export interface TeletextListProps {
      * 图文间距
      */
     textImgGap?: number;
+    /**
+     * 图片圆角
+     */
+    imgBorderRadius?: number;
+    /**
+     * 图片填充方式
+     */
+    imgObjectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    /**
+     * 标题颜色
+     */
+    titleColor?: string;
+    /**
+     * 标题字体大小
+     */
+    titleFontSize?: number;
+    /**
+     * 标题字重
+     */
+    titleFontWeight?: 'normal' | '500' | '600' | 'bold';
+    /**
+     * 标题最大行数（超出省略）
+     */
+    titleLineClamp?: number;
+    /**
+     * 说明颜色
+     */
+    descriptionColor?: string;
+    /**
+     * 说明字体大小
+     */
+    descriptionFontSize?: number;
+    /**
+     * 说明字重
+     */
+    descriptionFontWeight?: 'normal' | '500' | '600' | 'bold';
+    /**
+     * 说明最大行数（超出省略）
+     */
+    descriptionLineClamp?: number;
+    /**
+     * 列表项圆角
+     */
+    itemBorderRadius?: number;
+    /**
+     * 列表项边框颜色
+     */
+    itemBorderColor?: string;
+    /**
+     * 列表项边框宽度
+     */
+    itemBorderWidth?: number;
 }
 declare const TeletextList: React.FC<TeletextListProps>;
 export default TeletextList;

package/lib/components/teletext-list/teletext-list.js

@@ -8,9 +8,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 require("./index.scss");
 var _teletextListItem = _interopRequireDefault(require("./teletext-list-item"));
-var _childrenNodeHandle = require("../../utils/children-node-handle");
 var _arr = _interopRequireDefault(require("../../assets/icon/teletext-list/arr.png"));
-var _excluded = ["dataList", "onClick", "children", "imagePlacement", "handleMoreClick", "moreText", "title", "textLines", "type", "itemColumns", "iconList", "itemGap", "itemPadding", "imgWidth", "imgHeight", "itemBgColor", "itemRowAlign", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "textImgGap"];
+var _excluded = ["dataList", "onClick", "imagePlacement", "handleMoreClick", "moreText", "title", "textLines", "type", "itemColumns", "iconList", "itemGap", "itemPadding", "imgWidth", "imgHeight", "itemBgColor", "itemRowAlign", "textAlign", "isShoppingCart", "isWishList", "isUserMenu", "textImgGap", "imgBorderRadius", "imgObjectFit", "titleColor", "titleFontSize", "titleFontWeight", "titleLineClamp", "descriptionColor", "descriptionFontSize", "descriptionFontWeight", "descriptionLineClamp", "itemBorderRadius", "itemBorderColor", "itemBorderWidth"];
 /**
  * 数据
  */
@@ -19,7 +18,6 @@ var TeletextList = function TeletextList(_ref) {
   var dataList = _ref.dataList,
     _ref$onClick = _ref.onClick,
     onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-    children = _ref.children,
     _ref$imagePlacement = _ref.imagePlacement,
     imagePlacement = _ref$imagePlacement === void 0 ? 'left' : _ref$imagePlacement,
     handleMoreClick = _ref.handleMoreClick,
@@ -29,13 +27,16 @@ var TeletextList = function TeletextList(_ref) {
     _ref$textLines = _ref.textLines,
     textLines = _ref$textLines === void 0 ? 2 : _ref$textLines,
     type = _ref.type,
-    itemColumns = _ref.itemColumns,
+    _ref$itemColumns = _ref.itemColumns,
+    itemColumns = _ref$itemColumns === void 0 ? 1 : _ref$itemColumns,
     iconList = _ref.iconList,
     _ref$itemGap = _ref.itemGap,
     itemGap = _ref$itemGap === void 0 ? 16 : _ref$itemGap,
     itemPadding = _ref.itemPadding,
-    imgWidth = _ref.imgWidth,
-    imgHeight = _ref.imgHeight,
+    _ref$imgWidth = _ref.imgWidth,
+    imgWidth = _ref$imgWidth === void 0 ? 100 : _ref$imgWidth,
+    _ref$imgHeight = _ref.imgHeight,
+    imgHeight = _ref$imgHeight === void 0 ? 100 : _ref$imgHeight,
     itemBgColor = _ref.itemBgColor,
     itemRowAlign = _ref.itemRowAlign,
     textAlign = _ref.textAlign,
@@ -43,38 +44,41 @@ var TeletextList = function TeletextList(_ref) {
     isWishList = _ref.isWishList,
     isUserMenu = _ref.isUserMenu,
     textImgGap = _ref.textImgGap,
+    imgBorderRadius = _ref.imgBorderRadius,
+    imgObjectFit = _ref.imgObjectFit,
+    titleColor = _ref.titleColor,
+    titleFontSize = _ref.titleFontSize,
+    titleFontWeight = _ref.titleFontWeight,
+    titleLineClamp = _ref.titleLineClamp,
+    descriptionColor = _ref.descriptionColor,
+    descriptionFontSize = _ref.descriptionFontSize,
+    descriptionFontWeight = _ref.descriptionFontWeight,
+    descriptionLineClamp = _ref.descriptionLineClamp,
+    itemBorderRadius = _ref.itemBorderRadius,
+    itemBorderColor = _ref.itemBorderColor,
+    itemBorderWidth = _ref.itemBorderWidth,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var TeletextListItemComp = _teletextListItem["default"];
   var _otherProps = otherProps || {};
-  var getListStyle = function getListStyle() {
-    if (itemRowAlign === 'row') {
-      return {
-        width: 'auto',
-        display: 'flex',
-        gap: itemGap + "px",
-        overflowX: 'auto',
-        scrollSnapType: 'x mandatory',
-        WebkitOverflowScrolling: 'touch'
-      };
-    }
-    return {
-      display: 'grid',
-      gridTemplateColumns: "repeat(" + itemColumns + ",1fr)",
-      gap: itemGap + "px"
-    };
+  var listStyle = itemRowAlign === 'row' ? {
+    width: 'auto',
+    display: 'flex',
+    gap: itemGap + "px",
+    overflowX: 'auto',
+    scrollSnapType: 'x mandatory',
+    WebkitOverflowScrolling: 'touch'
+  } : {
+    display: 'grid',
+    gridTemplateColumns: "repeat(" + itemColumns + ", 1fr)",
+    gap: itemGap + "px"
   };
-  var getDataList = function getDataList() {
-    if (!dataList) return [];
-    return Array.isArray(dataList) ? dataList : [dataList];
-  };
-  var dataItems = getDataList();
+  var dataItems = dataList ? Array.isArray(dataList) ? dataList : [dataList] : [];
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: "teletext-list__panel"
   }, _otherProps), /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head"
-  }, (0, _childrenNodeHandle.convertChildren)(children, 'box-title', {
-    children: [title]
-  }), moreText ? /*#__PURE__*/_react["default"].createElement("div", {
+  }, title && /*#__PURE__*/_react["default"].createElement("h5", {
+    className: "teletext-list__panel-head-title"
+  }, title), moreText && /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head-more",
     onClick: handleMoreClick
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -82,7 +86,7 @@ var TeletextList = function TeletextList(_ref) {
   }, moreText), /*#__PURE__*/_react["default"].createElement("img", {
     src: _arr["default"],
     className: "teletext-list__panel-head-more-img"
-  })) : ''), isUserMenu && /*#__PURE__*/_react["default"].createElement("div", {
+  }))), isUserMenu && /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head-user-menu"
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "teletext-list__panel-head-user-menu-img",
@@ -91,10 +95,11 @@ var TeletextList = function TeletextList(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "teletext-list__panel-head-user-menu-text"
   }, "Hello, Paige Turner")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "teletext-list__panel__item-list " + (itemRowAlign === 'row' ? 'teletext-list__panel__item-list--row' : ''),
-    style: getListStyle()
+    className: "teletext-list__panel__item-list" + (itemRowAlign === 'row' ? ' teletext-list__panel__item-list--row' : ''),
+    style: listStyle
   }, dataItems.length > 0 ? dataItems.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement(TeletextListItemComp, (0, _extends2["default"])({
+    var ItemComp = _teletextListItem["default"];
+    return /*#__PURE__*/_react["default"].createElement(ItemComp, (0, _extends2["default"])({
       key: index,
       onClick: onClick,
       imagePlacement: imagePlacement,
@@ -113,8 +118,21 @@ var TeletextList = function TeletextList(_ref) {
       isShoppingCart: isShoppingCart,
       isWishList: isWishList,
       isUserMenu: isUserMenu,
-      textImgGap: textImgGap
-    }, item), children);
+      textImgGap: textImgGap,
+      imgBorderRadius: imgBorderRadius,
+      imgObjectFit: imgObjectFit,
+      titleColor: titleColor,
+      titleFontSize: titleFontSize,
+      titleFontWeight: titleFontWeight,
+      titleLineClamp: titleLineClamp,
+      descriptionColor: descriptionColor,
+      descriptionFontSize: descriptionFontSize,
+      descriptionFontWeight: descriptionFontWeight,
+      descriptionLineClamp: descriptionLineClamp,
+      itemBorderRadius: itemBorderRadius,
+      itemBorderColor: itemBorderColor,
+      itemBorderWidth: itemBorderWidth
+    }, item));
   }) : /*#__PURE__*/_react["default"].createElement("div", null, "\u6682\u65E0\u6570\u636E")));
 };
 TeletextList.displayName = 'TeletextList';