@doubao-apps/template 0.0.34 → 0.0.35

package/dist/media-layout-card/index.js

@@ -0,0 +1,83 @@
+import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateActionBar } from "../components/action-bar/index.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import { TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT } from "../utils/icons.js";
+import "./styles.css";
+const MEDIA_LAYOUT_CARD_INFO_ROW_LIMIT = 2;
+function isMediaLayoutCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function renderMediaLayoutCardText(content, className) {
+    if (isMediaLayoutCardNodeEmpty(content)) return null;
+    if ('string' == typeof content || 'number' == typeof content) return <text className={className} text-maxline="1">
+        {content}
+      </text>;
+    return <view className={`${className}-custom`}>{content}</view>;
+}
+function renderMediaLayoutCardTitle(content, showChevron) {
+    const titleNode = renderMediaLayoutCardText(content, 'doubao-media-layout-card__title');
+    if (null == titleNode) return null;
+    return <view className="doubao-media-layout-card__title-row">
+      <view className="doubao-media-layout-card__title-main">{titleNode}</view>
+      {showChevron ? <svg className="doubao-media-layout-card__chevron" content={TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT}/> : null}
+    </view>;
+}
+function MediaLayoutCardMedia(props) {
+    const { media } = props;
+    if (!isMediaLayoutCardNodeEmpty(media)) return <view className="doubao-media-layout-card__media">{media}</view>;
+    return <view className="doubao-media-layout-card__media"/>;
+}
+function getMediaLayoutCardInfoContent(row) {
+    return isMediaLayoutCardNodeEmpty(row.content) ? row.text : row.content;
+}
+function renderMediaLayoutCardInfoRow(row, index) {
+    const content = getMediaLayoutCardInfoContent(row);
+    if (isMediaLayoutCardNodeEmpty(content)) return null;
+    return <view className="doubao-media-layout-card__info-row" key={row.key ?? index}>
+      {renderMediaLayoutCardText(content, 'doubao-media-layout-card__info-text')}
+    </view>;
+}
+function renderMediaLayoutCardExtra(props) {
+    const { extra, extraActionText, onExtraActionClick } = props;
+    if (!isMediaLayoutCardNodeEmpty(extra)) {
+        if ('string' == typeof extra || 'number' == typeof extra) return <view className="doubao-media-layout-card__extra">
+          <text className="doubao-media-layout-card__extra-text" text-maxline="1">
+            {extra}
+          </text>
+        </view>;
+        return <view className="doubao-media-layout-card__extra">{extra}</view>;
+    }
+    if (null != extraActionText && extraActionText.length > 0) return <view className="doubao-media-layout-card__extra">
+        <Button className="doubao-media-layout-card__extra-action" type="default" text={extraActionText} onClick={onExtraActionClick}/>
+      </view>;
+    return null;
+}
+function MediaLayoutCard(props) {
+    const { moreText, showMore = true, title, showChevron = true, media, infoRows = [], extra, extraActionText, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, children, className, style, onClick, onMoreClick, onContentClick, onExtraActionClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const hasCustomContent = !isMediaLayoutCardNodeEmpty(children);
+    const titleNode = renderMediaLayoutCardTitle(title, showChevron);
+    const infoRowNodes = infoRows.map((row, index)=>renderMediaLayoutCardInfoRow(row, index)).filter((node)=>null != node).slice(0, MEDIA_LAYOUT_CARD_INFO_ROW_LIMIT);
+    const extraNode = renderMediaLayoutCardExtra({
+        extra,
+        extraActionText,
+        onExtraActionClick
+    });
+    return <view className={useThemeClassName(clsx('doubao-media-layout-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+      <view className="doubao-media-layout-card__body" {...null != onContentClick ? {
+        catchtap: onContentClick
+    } : {}}>
+        {hasCustomContent ? children : <view className="doubao-media-layout-card__layout">
+            <MediaLayoutCardMedia media={media}/>
+            <view className="doubao-media-layout-card__main">
+              {titleNode}
+              {infoRowNodes}
+            </view>
+            {extraNode}
+          </view>}
+      </view>
+      <TemplateActionBar className="doubao-media-layout-card__action-bar" primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} onPrimaryActionClick={onPrimaryActionClick} onSecondaryActionClick={onSecondaryActionClick}/>
+    </view>;
+}
+export { MediaLayoutCard };

package/dist/media-layout-card/styles.css

@@ -0,0 +1,131 @@
+.doubao-media-layout-card {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  border: 1px solid var(--bg-base-2-overlay);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__body {
+  box-sizing: border-box;
+  background-color: var(--bg-base-1);
+  width: 100%;
+  padding: 12px;
+}
+
+.doubao-media-layout-card__layout {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__media {
+  background-color: var(--bg-base-1-overlay);
+  border-radius: 8px;
+  flex-shrink: 0;
+  width: 96px;
+  height: 96px;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__main {
+  flex-direction: column;
+  flex: 1 1 0;
+  align-items: flex-start;
+  min-width: 0;
+  margin-left: 12px;
+  display: flex;
+}
+
+.doubao-media-layout-card__title, .doubao-media-layout-card__title-custom, .doubao-media-layout-card__info-text, .doubao-media-layout-card__info-text-custom, .doubao-media-layout-card__extra-text {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__title-row {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__title-main {
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__title {
+  color: var(--neutral-100);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.doubao-media-layout-card__chevron {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+}
+
+.doubao-media-layout-card__title-custom, .doubao-media-layout-card__info-text-custom {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.doubao-media-layout-card__info-row {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  margin-top: 2px;
+  padding: 3px 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-media-layout-card__info-text, .doubao-media-layout-card__extra-text {
+  color: var(--neutral-50);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.doubao-media-layout-card__extra {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  margin-left: auto;
+  display: flex;
+}
+
+.doubao-media-layout-card__extra-action {
+  --doubao-button-border-radius: 8px;
+  --doubao-button-default-height: 44px;
+  --doubao-button-default-padding-x: 12px;
+  --doubao-button-default-padding-y: 0;
+  --doubao-button-default-font-size: 16px;
+  --doubao-button-default-line-height: 22px;
+  --doubao-button-default-bg: var(--bg-base-2-overlay);
+  --doubao-button-default-text: var(--neutral-100);
+  flex-shrink: 0;
+  width: 80px;
+  height: 44px;
+}
+

package/dist/order-card/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, TouchEvent } from '@lynx-js/types';
 import type { ReactElement, ReactNode } from 'react';
+import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
 import { type TemplateProductSummaryProps } from '../components/product-summary/index.js';
 import type { TemplateKey, TemplateText } from '../types.js';
 import './styles.scss';
@@ -22,8 +23,12 @@ export interface OrderCardProps {
     totalPrice?: TemplateText;
     /** 主按钮文案。 */
     primaryActionText?: string;
+    /** 主按钮配置，支持禁用、加载和点击节流。 */
+    primaryActionButtonProps?: TemplateActionButtonProps;
     /** 次按钮文案。 */
     secondaryActionText?: string;
+    /** 次按钮配置，支持禁用、加载和点击节流。 */
+    secondaryActionButtonProps?: TemplateActionButtonProps;
     /** 卡片根节点自定义类名。 */
     className?: string;
     /** 卡片根节点自定义样式。 */

package/dist/order-card/index.js

@@ -22,7 +22,7 @@ function renderOrderCardProductItem({ item, index }) {
     </view>;
 }
 function OrderCard(props) {
-    const { moreText, showMore = true, productItems = [], infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, primaryActionText, secondaryActionText, className, style, onClick, onMoreClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const { moreText, showMore = true, productItems = [], infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, className, style, onClick, onMoreClick, onPrimaryActionClick, onSecondaryActionClick } = props;
     const productNodes = productItems.map((item, index)=>renderOrderCardProductItem({
             item,
             index
@@ -34,7 +34,7 @@ function OrderCard(props) {
 
       <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} discountText={discountText} totalLabel={totalLabel} totalPrice={totalPrice} valueLayout="column"/>
 
-      <TemplateActionBar secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
+      <TemplateActionBar secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
     </view>;
 }
 export { OrderCard };

package/dist/single-item-card/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, TouchEvent } from '@lynx-js/types';
 import type { ReactElement, ReactNode } from 'react';
+import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
 import type { TemplateKey, TemplateText } from '../types.js';
 import './styles.scss';
 export interface SingleItemCardProps {
@@ -25,8 +26,12 @@ export interface SingleItemCardProps {
     quantity?: TemplateText;
     /** 主按钮文案。 */
     primaryActionText?: string;
+    /** 主按钮配置，支持禁用、加载和点击节流。 */
+    primaryActionButtonProps?: TemplateActionButtonProps;
     /** 次按钮文案。 */
     secondaryActionText?: string;
+    /** 次按钮配置，支持禁用、加载和点击节流。 */
+    secondaryActionButtonProps?: TemplateActionButtonProps;
     /** 自定义内容区；传入后不再渲染默认图文结构。 */
     children?: ReactNode;
     /** 卡片根节点自定义类名。 */

package/dist/single-item-card/index.js

@@ -92,7 +92,7 @@ function renderSingleItemCardTitleRow(props) {
     </view>;
 }
 function SingleItemCard(props) {
-    const { moreText, showMore = true, imageSrc, image: image1, infoRows = [], quantity, primaryActionText, secondaryActionText, children, className, style, onClick, onMoreClick, onContentClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const { moreText, showMore = true, imageSrc, image: image1, infoRows = [], quantity, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, children, className, style, onClick, onMoreClick, onContentClick, onPrimaryActionClick, onSecondaryActionClick } = props;
     const hasCustomContent = !isSingleItemCardNodeEmpty(children);
     const titleRowNode = renderSingleItemCardTitleRow(props);
     const infoRowNodes = getSingleItemCardInfoRows(infoRows, quantity).map((row, rowIndex)=>renderSingleItemCardInfoRow(row, rowIndex, quantity)).filter((node)=>null != node).slice(0, SINGLE_ITEM_CARD_INFO_ROW_LIMIT);
@@ -109,7 +109,7 @@ function SingleItemCard(props) {
             </view>
           </view>}
       </view>
-      <TemplateActionBar className="doubao-single-item-card__action-bar" secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
+      <TemplateActionBar className="doubao-single-item-card__action-bar" secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
     </view>;
 }
 export { SingleItemCard };

package/dist/single-item-card/styles.css

@@ -37,11 +37,11 @@
 }
 
 .doubao-single-item-card__image {
-  width: var(--doubao-single-item-card-image-size, 80px);
-  height: var(--doubao-single-item-card-image-size, 80px);
   background-color: var(--doubao-single-item-card-image-bg);
   border-radius: 5px;
   flex-shrink: 0;
+  width: 80px;
+  height: 80px;
   overflow: hidden;
 }
 

package/dist/ticket-order-card/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, TouchEvent } from '@lynx-js/types';
 import type { ReactElement, ReactNode } from 'react';
+import { type TemplateActionButtonProps } from '../components/action-bar/index.js';
 import type { TemplateKey, TemplateText } from '../types.js';
 import './styles.scss';
 export interface TicketOrderCardProps {
@@ -21,8 +22,12 @@ export interface TicketOrderCardProps {
     totalContent?: ReactNode;
     /** 主按钮文案。 */
     primaryActionText?: string;
+    /** 主按钮配置，支持禁用、加载和点击节流。 */
+    primaryActionButtonProps?: TemplateActionButtonProps;
     /** 次按钮文案。 */
     secondaryActionText?: string;
+    /** 次按钮配置，支持禁用、加载和点击节流。 */
+    secondaryActionButtonProps?: TemplateActionButtonProps;
     /** 卡片根节点自定义类名。 */
     className?: string;
     /** 卡片根节点自定义样式。 */

package/dist/ticket-order-card/index.js

@@ -9,7 +9,7 @@ function isTicketOrderTextEmpty(content) {
     return null == content || '' === content;
 }
 function TicketOrderCard(props) {
-    const { moreText, showMore = true, routeItems = [], infoItems = [], feeItems = [], totalLabel, totalPrice, totalContent, primaryActionText, secondaryActionText, className, style, onClick, onMoreClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const { moreText, showMore = true, routeItems = [], infoItems = [], feeItems = [], totalLabel, totalPrice, totalContent, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, className, style, onClick, onMoreClick, onPrimaryActionClick, onSecondaryActionClick } = props;
     const hasRouteItems = hasTemplateRouteSectionItems(routeItems);
     const hasInfoSection = infoItems.length > 0 || feeItems.length > 0 || void 0 !== totalContent || !isTicketOrderTextEmpty(totalLabel) || !isTicketOrderTextEmpty(totalPrice);
     const hasDefaultBody = hasRouteItems || hasInfoSection;
@@ -21,7 +21,7 @@ function TicketOrderCard(props) {
           {hasInfoSection ? <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} totalLabel={totalLabel} totalPrice={totalPrice} totalContent={totalContent}/> : null}
         </view> : null}
 
-      <TemplateActionBar secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
+      <TemplateActionBar secondaryActionText={secondaryActionText} secondaryActionButtonProps={secondaryActionButtonProps} primaryActionText={primaryActionText} primaryActionButtonProps={primaryActionButtonProps} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
     </view>;
 }
 export { TicketOrderCard };

package/dist/transport-list-card/styles.css

@@ -5,14 +5,14 @@
   --doubao-transport-list-card-main-text: var(--neutral-100);
   --doubao-transport-list-card-secondary-text: var(--neutral-50);
   --doubao-transport-list-card-placeholder-bg: var(--bg-base-1-overlay);
-  --doubao-btn-border-radius: var(--doubao-transport-list-card-view-more-radius, 8px);
-  --doubao-btn-default-height: var(--doubao-transport-list-card-view-more-height, 44px);
+  --doubao-btn-border-radius: 8px;
+  --doubao-btn-default-height: 44px;
   --doubao-btn-default-padding-x: 12px;
   --doubao-btn-default-padding-y: 0;
-  --doubao-btn-default-font-size: var(--doubao-transport-list-card-view-more-font-size, 16px);
-  --doubao-btn-default-line-height: var(--doubao-transport-list-card-view-more-line-height, 22px);
-  --doubao-btn-default-bg: var(--doubao-transport-list-card-view-more-bg, var(--bg-base-2-overlay));
-  --doubao-btn-default-text: var(--doubao-transport-list-card-view-more-text, var(--neutral-100));
+  --doubao-btn-default-font-size: 16px;
+  --doubao-btn-default-line-height: 22px;
+  --doubao-btn-default-bg: var(--bg-base-2-overlay);
+  --doubao-btn-default-text: var(--neutral-100);
   box-sizing: border-box;
   background-color: var(--doubao-transport-list-card-bg);
   border: 1px solid var(--doubao-transport-list-card-border);