@doubao-apps/template 0.0.32 → 0.0.33

package/dist/price-action-list-card/styles.css

@@ -0,0 +1,166 @@
+.doubao-price-action-list-card {
+  --doubao-price-action-list-card-bg: var(--bg-base-1);
+  --doubao-price-action-list-card-border: var(--bg-base-2-overlay);
+  --doubao-price-action-list-card-divider: var(--neutral-transparent-1);
+  --doubao-price-action-list-card-price-text: var(--primary-50);
+  --doubao-price-action-list-card-badge-bg: var(--primary-transparent-1);
+  --doubao-price-action-list-card-badge-text: var(--primary-50);
+  --doubao-price-action-list-card-info-text: var(--neutral-50);
+  --doubao-price-action-list-card-action-bg: var(--bg-base-1-overlay);
+  --doubao-price-action-list-card-action-text: var(--neutral-100);
+  box-sizing: border-box;
+  background-color: var(--doubao-price-action-list-card-bg);
+  border: 1px solid var(--doubao-price-action-list-card-border);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-price-action-list-card__body {
+  box-sizing: border-box;
+  background-color: var(--doubao-price-action-list-card-bg);
+  width: 100%;
+}
+
+.doubao-price-action-list-card__default {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.doubao-price-action-list-card__item {
+  box-sizing: border-box;
+  background-color: var(--doubao-price-action-list-card-bg);
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 82px;
+  padding: 14px 12px;
+  display: flex;
+  position: relative;
+}
+
+.doubao-price-action-list-card__item:after {
+  content: "";
+  background-color: var(--doubao-price-action-list-card-divider);
+  height: .5px;
+  position: absolute;
+  bottom: 0;
+  left: 95px;
+  right: 0;
+}
+
+.doubao-price-action-list-card__item--last:after {
+  display: none;
+}
+
+.doubao-price-action-list-card__item-content {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding-left: 4px;
+  display: flex;
+}
+
+.doubao-price-action-list-card__value {
+  flex-direction: column;
+  flex-shrink: 0;
+  align-items: flex-start;
+  width: 86px;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-price-action-list-card__price {
+  max-width: 100%;
+  color: var(--doubao-price-action-list-card-price-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 26px;
+  overflow: hidden;
+}
+
+.doubao-price-action-list-card__badge {
+  max-width: 100%;
+  color: var(--doubao-price-action-list-card-badge-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-color: var(--doubao-price-action-list-card-badge-bg);
+  border-radius: 4px;
+  margin-top: 4px;
+  padding: 1px 4px;
+  font-family: PingFang SC, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  overflow: hidden;
+}
+
+.doubao-price-action-list-card__info {
+  flex-direction: column;
+  flex: 1 1 0;
+  justify-content: center;
+  min-width: 0;
+  margin-left: 14px;
+  display: flex;
+}
+
+.doubao-price-action-list-card__info-row {
+  width: 100%;
+  color: var(--doubao-price-action-list-card-info-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  overflow: hidden;
+}
+
+.doubao-price-action-list-card__info-row + .doubao-price-action-list-card__info-row {
+  margin-top: 2px;
+}
+
+.doubao-price-action-list-card__item-action {
+  --doubao-button-border-radius: 8px;
+  --doubao-button-default-height: 38px;
+  --doubao-button-default-padding-x: 12px;
+  --doubao-button-default-padding-y: 0;
+  --doubao-button-default-font-size: 14px;
+  --doubao-button-default-line-height: 20px;
+  --doubao-button-default-bg: var(--doubao-price-action-list-card-action-bg);
+  --doubao-button-default-text: var(--doubao-price-action-list-card-action-text);
+  flex-shrink: 0;
+  width: 80px;
+  height: 38px;
+  margin-left: 12px;
+}
+
+.doubao-price-action-list-card__footer {
+  box-sizing: border-box;
+  background-color: var(--doubao-price-action-list-card-bg);
+  width: 100%;
+  padding: 8px 12px 12px;
+}
+
+.doubao-price-action-list-card__footer-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(--doubao-price-action-list-card-action-bg);
+  --doubao-button-default-text: var(--doubao-price-action-list-card-action-text);
+  width: 100%;
+  height: 44px;
+}
+

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

@@ -0,0 +1,62 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateKey, TemplateText } from '../types.js';
+import './styles.scss';
+export interface SingleItemCardProps {
+    /** 标题栏右侧「更多」入口的文案。 */
+    moreText?: string;
+    /** 是否展示标题栏右侧「更多」入口。 */
+    showMore?: boolean;
+    /** 内容主标题。字符串和数字会按默认单行标题样式渲染，传入节点时直接渲染自定义内容。 */
+    title?: ReactNode;
+    /** 是否展示主标题右侧箭头。 */
+    showChevron?: boolean;
+    /** 内容图片地址。 */
+    imageSrc?: string;
+    /** 内容自定义图片节点；优先级高于 imageSrc。 */
+    image?: ReactNode;
+    /** 内容信息行。最多展示前 2 行，每行内多字段会以圆点分隔。 */
+    infoRows?: SingleItemCardInfoRow[];
+    /** 右侧价格前缀文案。 */
+    pricePrefix?: TemplateText;
+    /** 右侧价格或摘要文案。 */
+    price?: TemplateText;
+    /** 信息行右侧数量。 */
+    quantity?: TemplateText;
+    /** 主按钮文案。 */
+    primaryActionText?: string;
+    /** 次按钮文案。 */
+    secondaryActionText?: string;
+    /** 自定义内容区；传入后不再渲染默认图文结构。 */
+    children?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击标题栏右侧「更多」入口时触发。 */
+    onMoreClick?: (event: TouchEvent) => void;
+    /** 点击内容区时触发。 */
+    onContentClick?: (event: TouchEvent) => void;
+    /** 点击主按钮时触发。 */
+    onPrimaryActionClick?: (event?: TouchEvent) => void;
+    /** 点击次按钮时触发。 */
+    onSecondaryActionClick?: (event?: TouchEvent) => void;
+}
+export interface SingleItemCardInfoRow {
+    /** 信息行唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息行单字段文案；优先级高于 items。 */
+    text?: TemplateText;
+    /** 信息行字段列表。 */
+    items?: SingleItemCardInfoItem[];
+}
+export interface SingleItemCardInfoItem {
+    /** 信息字段唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 信息字段文案。 */
+    text: TemplateText;
+}
+export declare function SingleItemCard(props: SingleItemCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,115 @@
+import { 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 SINGLE_ITEM_CARD_INFO_ROW_LIMIT = 2;
+function isSingleItemCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function isSingleItemCardNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function renderSingleItemCardTitle(content) {
+    if (isSingleItemCardNodeEmpty(content)) return null;
+    if ('string' == typeof content || 'number' == typeof content) return <text className="doubao-single-item-card__title" text-maxline="1">
+        {content}
+      </text>;
+    return <view className="doubao-single-item-card__title-custom">{content}</view>;
+}
+function renderSingleItemCardPrice(props) {
+    const { pricePrefix, price } = props;
+    const hasPricePrefix = !isSingleItemCardTextEmpty(pricePrefix);
+    const hasPrice = !isSingleItemCardTextEmpty(price);
+    if (!hasPricePrefix && !hasPrice) return null;
+    return <view className="doubao-single-item-card__price">
+      {hasPricePrefix ? <text className="doubao-single-item-card__price-prefix" text-maxline="1">
+          {pricePrefix}
+        </text> : null}
+      {hasPrice ? <text className="doubao-single-item-card__price-value" text-maxline="1">
+          {price}
+        </text> : null}
+    </view>;
+}
+function SingleItemCardImage(props) {
+    const { image: image1, imageSrc } = props;
+    if (!isSingleItemCardNodeEmpty(image1)) return <view className="doubao-single-item-card__image">{image1}</view>;
+    if (null != imageSrc && imageSrc.length > 0) return <image className="doubao-single-item-card__image" src={imageSrc} mode="aspectFill"/>;
+    return <view className="doubao-single-item-card__image"/>;
+}
+function getSingleItemCardInfoItems(row) {
+    const { text: text1 } = row;
+    if (null != text1 && '' !== text1) return [
+        {
+            key: 'text',
+            text: text1
+        }
+    ];
+    return (row.items ?? []).filter((item)=>!isSingleItemCardTextEmpty(item.text));
+}
+function renderSingleItemCardInfoRow(row, rowIndex, quantity) {
+    const items = getSingleItemCardInfoItems(row);
+    const hasQuantity = 0 === rowIndex && !isSingleItemCardTextEmpty(quantity);
+    if (0 === items.length && !hasQuantity) return null;
+    return <view className="doubao-single-item-card__info-row" key={row.key ?? rowIndex}>
+      <view className="doubao-single-item-card__info-content">
+        {items.map((item, itemIndex)=><view className="doubao-single-item-card__info-item" key={item.key ?? itemIndex}>
+            {itemIndex > 0 ? <view className="doubao-single-item-card__info-dot"/> : null}
+            <text className="doubao-single-item-card__info-text" text-maxline="1">
+              {item.text}
+            </text>
+          </view>)}
+      </view>
+      {hasQuantity ? <text className="doubao-single-item-card__quantity" text-maxline="1">
+          ×{quantity}
+        </text> : null}
+    </view>;
+}
+function getSingleItemCardInfoRows(infoRows, quantity) {
+    if (infoRows.length > 0 || isSingleItemCardTextEmpty(quantity)) return infoRows;
+    return [
+        {
+            key: 'quantity'
+        }
+    ];
+}
+function renderSingleItemCardTitleRow(props) {
+    const { title, showChevron = true, pricePrefix, price } = props;
+    const titleNode = renderSingleItemCardTitle(title);
+    const priceNode = renderSingleItemCardPrice({
+        pricePrefix,
+        price
+    });
+    const hasTitleMain = null != titleNode;
+    if (!hasTitleMain && null == priceNode) return null;
+    return <view className="doubao-single-item-card__title-row">
+      {hasTitleMain ? <view className="doubao-single-item-card__title-main">
+          {titleNode}
+          {null != titleNode && showChevron ? <svg className="doubao-single-item-card__chevron" content={TEMPLATE_CHEVRON_RIGHT_ICON_CONTENT}/> : null}
+        </view> : null}
+      {priceNode}
+    </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 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);
+    return <view className={useThemeClassName(clsx('doubao-single-item-card', className))} style={style} bindtap={onClick} clip-radius="true">
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+      <view className="doubao-single-item-card__body" {...null != onContentClick ? {
+        catchtap: onContentClick
+    } : {}}>
+        {hasCustomContent ? children : <view className="doubao-single-item-card__content">
+            <SingleItemCardImage image={image1} imageSrc={imageSrc}/>
+            <view className="doubao-single-item-card__text">
+              {titleRowNode}
+              {infoRowNodes}
+            </view>
+          </view>}
+      </view>
+      <TemplateActionBar className="doubao-single-item-card__action-bar" secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
+    </view>;
+}
+export { SingleItemCard };

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

@@ -0,0 +1,209 @@
+.doubao-single-item-card {
+  --doubao-single-item-card-bg: var(--bg-base-1);
+  --doubao-single-item-card-border: var(--bg-base-2-overlay);
+  --doubao-single-item-card-image-bg: var(--bg-base-1-overlay);
+  --doubao-single-item-card-title-text: var(--neutral-100);
+  --doubao-single-item-card-secondary-text: var(--neutral-50);
+  --doubao-single-item-card-price-text: var(--neutral-100);
+  --doubao-single-item-card-dot: var(--neutral-50);
+  box-sizing: border-box;
+  background-color: var(--doubao-single-item-card-bg);
+  border: 1px solid var(--doubao-single-item-card-border);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__body {
+  box-sizing: border-box;
+  background-color: var(--doubao-single-item-card-bg);
+  border-radius: 8px;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  display: flex;
+}
+
+.doubao-single-item-card__content {
+  flex-direction: row;
+  flex: 1 1 0;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.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;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__text {
+  flex-direction: column;
+  flex: 1 1 0;
+  align-items: flex-start;
+  min-width: 0;
+  margin-left: 12px;
+  display: flex;
+}
+
+.doubao-single-item-card__title-row {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 24px;
+  display: flex;
+}
+
+.doubao-single-item-card__title-main {
+  flex-direction: row;
+  flex: 1 1 0;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-single-item-card__title, .doubao-single-item-card__title-custom {
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.doubao-single-item-card__title-custom {
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+
+.doubao-single-item-card__title {
+  color: var(--doubao-single-item-card-title-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__chevron {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+}
+
+.doubao-single-item-card__price {
+  color: var(--doubao-single-item-card-price-text);
+  white-space: nowrap;
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: flex-end;
+  margin-left: 8px;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  display: flex;
+}
+
+.doubao-single-item-card__price-prefix {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  line-height: 17px;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__price-value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 17px;
+  line-height: 24px;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__price-prefix + .doubao-single-item-card__price-value {
+  margin-left: 2px;
+}
+
+.doubao-single-item-card__info-row {
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 20px;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__info-content {
+  flex-direction: row;
+  flex: 1 1 0;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__title-row + .doubao-single-item-card__info-row, .doubao-single-item-card__info-row + .doubao-single-item-card__info-row {
+  margin-top: 1px;
+}
+
+.doubao-single-item-card__info-item {
+  flex-direction: row;
+  flex-shrink: 1;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-single-item-card__info-text {
+  min-width: 0;
+  color: var(--doubao-single-item-card-secondary-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__info-dot {
+  background-color: var(--doubao-single-item-card-dot);
+  border-radius: 50%;
+  flex-shrink: 0;
+  width: 2px;
+  height: 2px;
+  margin: 0 6px;
+}
+
+.doubao-single-item-card__quantity {
+  color: var(--doubao-single-item-card-secondary-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: 8px;
+  font-family: PingFang SC, sans-serif;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.doubao-single-item-card__action-bar {
+  --doubao-template-action-bar-secondary-bg: var(--bg-base-2-overlay);
+  --doubao-template-action-bar-secondary-text: var(--neutral-100);
+}
+

package/dist/task-action-card/index.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement } from 'react';
+import type { TemplateText } from '../types.js';
+import './styles.scss';
+export interface TaskActionCardProps {
+    /** 按钮文案。 */
+    text: TemplateText;
+    /** 按钮根节点自定义类名。 */
+    className?: string;
+    /** 按钮根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击按钮时触发。 */
+    onClick?: (event?: TouchEvent) => void;
+}
+export declare function TaskActionCard(props: TaskActionCardProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/task-action-card/index.js

@@ -0,0 +1,24 @@
+import { Button } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import "./styles.css";
+const TASK_ACTION_CARD_ARROW_ICON_CONTENT = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 10H15.25" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+<path d="M10.75 5.5L15.25 10L10.75 14.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 5V15" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+</svg>`;
+function isTaskActionCardTextEmpty(content) {
+    return null == content || '' === content;
+}
+function TaskActionCard(props) {
+    const { text: text1, className, style, onClick } = props;
+    if (isTaskActionCardTextEmpty(text1)) return null;
+    return <Button className={clsx('doubao-task-action-card', className)} style={style} type="default" onClick={onClick}>
+      <view className="doubao-task-action-card__content">
+        <text className="doubao-task-action-card__text" text-maxline="1">
+          {text1}
+        </text>
+        <svg className="doubao-task-action-card__icon" content={TASK_ACTION_CARD_ARROW_ICON_CONTENT}/>
+      </view>
+    </Button>;
+}
+export { TaskActionCard };

package/dist/task-action-card/styles.css

@@ -0,0 +1,45 @@
+.doubao-task-action-card {
+  --doubao-task-action-card-bg: var(--bg-base-1);
+  --doubao-task-action-card-text: var(--neutral-100);
+  box-sizing: border-box;
+  --doubao-button-border-radius: 8px;
+  --doubao-button-default-height: 44px;
+  --doubao-button-default-padding-x: 16px;
+  --doubao-button-default-padding-y: 0;
+  --doubao-button-default-font-size: 16px;
+  --doubao-button-default-line-height: 22px;
+  --doubao-button-default-bg: var(--doubao-task-action-card-bg);
+  --doubao-button-default-text: var(--doubao-task-action-card-text);
+  width: 100%;
+  height: 44px;
+}
+
+.doubao-task-action-card__content {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
+.doubao-task-action-card__text {
+  min-width: 0;
+  color: var(--doubao-task-action-card-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  overflow: hidden;
+}
+
+.doubao-task-action-card__icon {
+  width: 20px;
+  height: 20px;
+  color: var(--doubao-task-action-card-text);
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+