@doubao-apps/template 0.0.31 → 0.0.32

package/dist/components/transport-summary/index.js

@@ -0,0 +1,104 @@
+import { clsx } from "clsx";
+import "./styles.css";
+const TRANSPORT_SUMMARY_ARROW_SVG_CONTENT = `<svg width="40" height="7" viewBox="0 0 40 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" d="M39.3024 3.12395C39.4852 3.22251 39.4152 3.5 39.2075 3.5H0.2C0.0895431 3.5 0 3.41046 0 3.3V2.6667C0 2.55624 0.0895431 2.4667 0.2 2.4667H34.4344V0.835011C34.4344 0.683637 34.5961 0.587134 34.7293 0.658959L39.3024 3.12395Z" fill="#999999"/>
+</svg>`;
+const TRANSPORT_SUMMARY_DOT_ARROW_SVG_CONTENT = `<svg width="40" height="7" viewBox="0 0 40 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.3" d="M39.3024 3.12395C39.4852 3.22251 39.4152 3.5 39.2075 3.5H0.2C0.0895431 3.5 0 3.41046 0 3.3V2.6667C0 2.55624 0.0895431 2.4667 0.2 2.4667H34.4344V0.835011C34.4344 0.683637 34.5961 0.587134 34.7293 0.658959L39.3024 3.12395Z" fill="#999999"/>
+<circle cx="19.5" cy="3" r="2.5" fill="#D9D9D9" stroke="white"/>
+</svg>`;
+function isTemplateTransportSummaryNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function isTemplateTransportSummaryTextEmpty(content) {
+    return null == content || '' === content;
+}
+function renderTemplateTransportSummaryNodeField(content, wrapperClassName, textClassName) {
+    if (isTemplateTransportSummaryNodeEmpty(content)) return null;
+    return <view className={wrapperClassName}>
+      {'string' == typeof content || 'number' == typeof content ? <text className={textClassName} text-maxline="1">
+          {content}
+        </text> : content}
+    </view>;
+}
+function renderTemplateTransportSummaryTextField(content, wrapperClassName, textClassName) {
+    if (isTemplateTransportSummaryTextEmpty(content)) return null;
+    return <view className={wrapperClassName}>
+      <text className={textClassName} text-maxline="1">
+        {content}
+      </text>
+    </view>;
+}
+function TemplateTransportSummaryArrowIcon({ showDot }) {
+    return <svg className="doubao-template-transport-summary__transfer-arrow-icon" content={showDot ? TRANSPORT_SUMMARY_DOT_ARROW_SVG_CONTENT : TRANSPORT_SUMMARY_ARROW_SVG_CONTENT}/>;
+}
+function renderTemplateTransportSummaryPoint({ mainText, subText, isArrival }) {
+    if (isTemplateTransportSummaryTextEmpty(mainText) && isTemplateTransportSummaryTextEmpty(subText)) return null;
+    return <view className={clsx('doubao-template-transport-summary__route-point', isArrival && 'doubao-template-transport-summary__route-point--arrival')}>
+      {renderTemplateTransportSummaryTextField(mainText, 'doubao-template-transport-summary__route-point-main', 'doubao-template-transport-summary__route-point-main-text')}
+      {renderTemplateTransportSummaryTextField(subText, 'doubao-template-transport-summary__route-point-sub', 'doubao-template-transport-summary__route-point-sub-text')}
+    </view>;
+}
+function renderTemplateTransportSummaryArrivalDayOffset(content) {
+    if (isTemplateTransportSummaryTextEmpty(content)) return null;
+    return <text className="doubao-template-transport-summary__arrival-day-offset" text-maxline="1">
+      {content}
+    </text>;
+}
+function renderTemplateTransportSummaryTransfer({ content, topText, showDot, bottomText }) {
+    if (void 0 !== content) {
+        if (isTemplateTransportSummaryNodeEmpty(content)) return null;
+        if ('string' == typeof content || 'number' == typeof content) return renderTemplateTransportSummaryNodeField(content, 'doubao-template-transport-summary__transfer', 'doubao-template-transport-summary__transfer-label-text');
+        return content;
+    }
+    if (isTemplateTransportSummaryTextEmpty(topText) && !showDot && isTemplateTransportSummaryTextEmpty(bottomText)) return null;
+    return <view className="doubao-template-transport-summary__transfer">
+      <view className="doubao-template-transport-summary__transfer-inner">
+        {renderTemplateTransportSummaryTextField(topText, 'doubao-template-transport-summary__transfer-label', 'doubao-template-transport-summary__transfer-label-text')}
+        <view className="doubao-template-transport-summary__transfer-arrow">
+          <TemplateTransportSummaryArrowIcon showDot={showDot}/>
+        </view>
+        {renderTemplateTransportSummaryTextField(bottomText, 'doubao-template-transport-summary__transfer-label', 'doubao-template-transport-summary__transfer-label-text')}
+      </view>
+    </view>;
+}
+function TemplateTransportSummary(props) {
+    const { title, departureMain, departureSub, transfer, transferTop, showTransferDot, transferBottom, arrivalMain, arrivalDayOffset, arrivalSub, price, className } = props;
+    const departureNode = renderTemplateTransportSummaryPoint({
+        mainText: departureMain,
+        subText: departureSub
+    });
+    const transferNode = renderTemplateTransportSummaryTransfer({
+        content: transfer,
+        topText: transferTop,
+        showDot: showTransferDot,
+        bottomText: transferBottom
+    });
+    const arrivalPointNode = renderTemplateTransportSummaryPoint({
+        mainText: arrivalMain,
+        subText: arrivalSub,
+        isArrival: true
+    });
+    const arrivalDayOffsetNode = null == arrivalPointNode ? null : renderTemplateTransportSummaryArrivalDayOffset(arrivalDayOffset);
+    const arrivalNode = null == arrivalPointNode ? null : <view className="doubao-template-transport-summary__arrival">
+        {arrivalPointNode}
+        {arrivalDayOffsetNode}
+      </view>;
+    const titleNode = renderTemplateTransportSummaryNodeField(title, 'doubao-template-transport-summary__title', 'doubao-template-transport-summary__title-text');
+    const priceNode = renderTemplateTransportSummaryNodeField(price, 'doubao-template-transport-summary__price', 'doubao-template-transport-summary__price-text');
+    const hasRoute = Boolean(departureNode || transferNode || arrivalNode);
+    const hasRouteRow = Boolean(hasRoute || priceNode);
+    if (null == titleNode && !hasRouteRow) return null;
+    return <view className={clsx('doubao-template-transport-summary', className)}>
+      {titleNode}
+      {hasRouteRow ? <view className="doubao-template-transport-summary__route-row">
+          {hasRoute ? <view className="doubao-template-transport-summary__route">
+              {departureNode}
+              {transferNode}
+              {arrivalNode}
+            </view> : null}
+          {priceNode}
+        </view> : null}
+    </view>;
+}
+export { TemplateTransportSummary };

package/dist/components/transport-summary/styles.css

@@ -0,0 +1,182 @@
+.doubao-template-transport-summary {
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 0;
+  padding: 12px 12px 18px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__title, .doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point-sub, .doubao-template-transport-summary__transfer-label, .doubao-template-transport-summary__price {
+  flex-direction: row;
+  flex-shrink: 0;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-template-transport-summary__title {
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.doubao-template-transport-summary__title-text, .doubao-template-transport-summary__route-point-main-text, .doubao-template-transport-summary__arrival-day-offset, .doubao-template-transport-summary__route-point-sub-text, .doubao-template-transport-summary__transfer-label-text, .doubao-template-transport-summary__price-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  overflow: hidden;
+}
+
+.doubao-template-transport-summary__title-text {
+  color: var(--neutral-50);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 16px;
+}
+
+.doubao-template-transport-summary__route-row {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  margin-top: 4px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__route {
+  flex-direction: row;
+  align-items: center;
+  width: 200px;
+  height: 36px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__route-point {
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 66px;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+}
+
+.doubao-template-transport-summary__route-point--arrival {
+  align-items: flex-end;
+}
+
+.doubao-template-transport-summary__arrival {
+  flex-shrink: 0;
+  width: 66px;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.doubao-template-transport-summary__arrival .doubao-template-transport-summary__route-point {
+  width: 100%;
+  height: 100%;
+}
+
+.doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point-sub {
+  width: 100%;
+}
+
+.doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-sub {
+  justify-content: flex-end;
+}
+
+.doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-main-text, .doubao-template-transport-summary__route-point--arrival .doubao-template-transport-summary__route-point-sub-text {
+  text-align: right;
+}
+
+.doubao-template-transport-summary__route-point-main, .doubao-template-transport-summary__route-point-sub {
+  height: 20px;
+}
+
+.doubao-template-transport-summary__route-point-main-text {
+  min-width: 0;
+  color: var(--neutral-100);
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 22px;
+}
+
+.doubao-template-transport-summary__arrival-day-offset {
+  color: var(--neutral-100);
+  margin-left: 2px;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 14px;
+  position: absolute;
+  top: 0;
+  left: 100%;
+}
+
+.doubao-template-transport-summary__route-point-sub-text, .doubao-template-transport-summary__transfer-label-text {
+  color: var(--neutral-50);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.doubao-template-transport-summary__transfer {
+  box-sizing: border-box;
+  flex-direction: row;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 42px;
+  min-width: 0;
+  margin: auto 8px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__transfer-inner {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 52px;
+  min-width: 0;
+  height: 38px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__transfer-label {
+  height: 14px;
+}
+
+.doubao-template-transport-summary__transfer-arrow {
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 7px;
+  display: flex;
+}
+
+.doubao-template-transport-summary__transfer-arrow-icon {
+  flex-shrink: 0;
+  width: 40px;
+  height: 7px;
+}
+
+.doubao-template-transport-summary__price {
+  box-sizing: border-box;
+  justify-content: flex-end;
+  width: 80px;
+}
+
+.doubao-template-transport-summary__price-text {
+  color: var(--primary-50);
+  text-align: right;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 17px;
+}
+

package/dist/index.d.ts

@@ -1,4 +1,9 @@
 export { ListCard, type ListCardItem, type ListCardProps } from './list-card/index.js';
 export { InvalidCard, type InvalidCardProps } from './invalid-card/index.js';
 export { OrderCard, type OrderCardFeeItem, type OrderCardInfoItem, type OrderCardProps } from './order-card/index.js';
+export { ProductActionCard, type ProductActionCardProps } from './product-action-card/index.js';
+export { TransportListCard, type TransportListCardItem, type TransportListCardProps } from './transport-list-card/index.js';
+export { TransportCard, type TransportCardProps } from './transport-card/index.js';
+export type { TemplateKey, TemplateText } from './types.js';
+export { TicketOrderCard, type TicketOrderCardFeeItem, type TicketOrderCardInfoItem, type TicketOrderCardProps, type TicketOrderCardRouteItem } from './ticket-order-card/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,3 +1,7 @@
 export { ListCard } from "./list-card/index.js";
 export { InvalidCard } from "./invalid-card/index.js";
 export { OrderCard } from "./order-card/index.js";
+export { ProductActionCard } from "./product-action-card/index.js";
+export { TransportListCard } from "./transport-list-card/index.js";
+export { TransportCard } from "./transport-card/index.js";
+export { TicketOrderCard } from "./ticket-order-card/index.js";

package/dist/invalid-card/index.js

@@ -1,29 +1,11 @@
 import { useThemeClassName } from "@byted-doubao-apps/components";
 import { clsx } from "clsx";
-import { getAppInfo } from "../utils/app-info.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
 import "./styles.css";
-function InvalidCardIcon({ appIconSrc }) {
-    if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-invalid-card__app-icon" src={appIconSrc} mode="aspectFill"/>;
-    return <view className="doubao-invalid-card__app-icon"/>;
-}
 function InvalidCard(props) {
     const { title = '任务状态已更新', className, style, onClick } = props;
-    const appInfo = getAppInfo();
     return <view className={useThemeClassName(clsx('doubao-invalid-card', className))} style={style} bindtap={onClick} clip-radius="true">
-      <view className="doubao-invalid-card__title-bar">
-        <view className="doubao-invalid-card__app">
-          <InvalidCardIcon appIconSrc={appInfo.appIconSrc}/>
-          <text className="doubao-invalid-card__app-name" text-maxline="1">
-            {appInfo.appName}
-          </text>
-        </view>
-        <view className="doubao-invalid-card__more-placeholder">
-          <text className="doubao-invalid-card__more-text" text-maxline="1">
-            更多
-          </text>
-          <view className="doubao-invalid-card__more-chevron"/>
-        </view>
-      </view>
+      <TemplateTitleBar reserveMore/>
       <view className="doubao-invalid-card__content">
         <view className="doubao-invalid-card__title-wrap">
           <text className="doubao-invalid-card__title" text-maxline="1">

package/dist/invalid-card/styles.css

@@ -10,77 +10,13 @@
   overflow: hidden;
 }
 
-.doubao-invalid-card__title-bar {
-  box-sizing: border-box;
-  border-bottom: .5px solid var(--neutral-transparent-1);
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  padding: 0 16px;
-  display: flex;
-}
-
-.doubao-invalid-card__app {
-  flex-direction: row;
-  align-items: center;
-  min-width: 0;
-  display: flex;
-}
-
-.doubao-invalid-card__app-icon {
-  background-color: var(--neutral-30);
-  border-radius: 4px;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-}
-
-.doubao-invalid-card__app-name, .doubao-invalid-card__more-text {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFang SC, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.doubao-invalid-card__app-name {
-  margin-left: 6px;
-  font-weight: 500;
-}
-
-.doubao-invalid-card__more-placeholder {
-  opacity: 0;
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: flex-end;
-  align-items: center;
-  width: 62.5px;
-  display: flex;
-}
-
-.doubao-invalid-card__more-text {
-  font-weight: 400;
-}
-
-.doubao-invalid-card__more-chevron, .doubao-invalid-card__content-chevron {
+.doubao-invalid-card__content-chevron {
   box-sizing: border-box;
   width: 7px;
   height: 7px;
   transform: rotate(45deg);
 }
 
-.doubao-invalid-card__more-chevron {
-  border-top: 1px solid var(--neutral-50);
-  border-right: 1px solid var(--neutral-50);
-  margin-left: 2px;
-}
-
 .doubao-invalid-card__content {
   box-sizing: border-box;
   background-color: var(--bg-base-1);

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

@@ -1,5 +1,6 @@
 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 ListCardProps {
     /** 标题栏右侧「更多」入口的文案。 */
@@ -25,11 +26,11 @@ export interface ListCardProps {
 }
 export interface ListCardItem {
     /** 列表项唯一标识；不传时使用数组下标。 */
-    key?: string | number;
+    key?: TemplateKey;
     /** 列表项标题。 */
     title?: string;
     /** 列表项价格。 */
-    price?: string | number;
+    price?: TemplateText;
     /** 列表项价格单位。 */
     priceUnit?: string;
     /** 列表项描述。 */

package/dist/list-card/index.js

@@ -1,11 +1,7 @@
 import { Button, useThemeClassName } from "@byted-doubao-apps/components";
 import { clsx } from "clsx";
-import { getAppInfo } from "../utils/app-info.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
 import "./styles.css";
-function ListCardIcon({ appIconSrc }) {
-    if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-list-card__app-icon" src={appIconSrc} mode="aspectFill"/>;
-    return <view className="doubao-list-card__app-icon"/>;
-}
 function ListCardImage(props) {
     const { image: image1, imageSrc } = props;
     if (null != image1) return <view className="doubao-list-card__image">{image1}</view>;
@@ -47,25 +43,11 @@ function ListCardProductItem({ item, isLast }) {
 }
 function ListCard(props) {
     const { moreText, showMore = true, items, viewMoreText = '查看更多', children, className, style, onClick, onMoreClick, onViewMoreClick } = props;
-    const appInfo = getAppInfo();
     const contentItems = items ?? [];
     const shouldShowViewMore = null == children && null != items && contentItems.length > 4;
     const visibleItems = shouldShowViewMore ? contentItems.slice(0, 4) : contentItems;
     return <view className={useThemeClassName(clsx('doubao-list-card', className))} style={style} bindtap={onClick} clip-radius="true">
-      <view className="doubao-list-card__title-bar">
-        <view className="doubao-list-card__app">
-          <ListCardIcon appIconSrc={appInfo.appIconSrc}/>
-          <text className="doubao-list-card__app-name" text-maxline="1">
-            {appInfo.appName}
-          </text>
-        </view>
-        {showMore && null != moreText && moreText.length > 0 ? <view className="doubao-list-card__more" catchtap={onMoreClick}>
-            <text className="doubao-list-card__more-text" text-maxline="1">
-              {moreText}
-            </text>
-            <view className="doubao-list-card__more-chevron"/>
-          </view> : null}
-      </view>
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
       <view className="doubao-list-card__body">
         {children ?? visibleItems.map((item, index)=><ListCardProductItem key={item.key ?? index} item={item} isLast={index === visibleItems.length - 1}/>)}
         {shouldShowViewMore ? <view className="doubao-list-card__view-more-wrap">

package/dist/list-card/styles.css

@@ -10,78 +10,6 @@
   overflow: hidden;
 }
 
-.doubao-list-card__title-bar {
-  box-sizing: border-box;
-  border-bottom: .5px solid var(--neutral-transparent-1);
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 40px;
-  padding: 0 16px;
-  display: flex;
-}
-
-.doubao-list-card__app {
-  flex-direction: row;
-  align-items: center;
-  min-width: 0;
-  display: flex;
-}
-
-.doubao-list-card__app-icon {
-  background-color: var(--neutral-30);
-  border-radius: 4px;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-}
-
-.doubao-list-card__app-name {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-left: 6px;
-  font-family: PingFang SC, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.doubao-list-card__more {
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 62.5px;
-  display: flex;
-}
-
-.doubao-list-card__more-text {
-  color: var(--neutral-50);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: PingFang SC, sans-serif;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.doubao-list-card__more-chevron {
-  box-sizing: border-box;
-  border-top: 1px solid var(--neutral-50);
-  border-right: 1px solid var(--neutral-50);
-  width: 7px;
-  height: 7px;
-  margin-left: 2px;
-  transform: rotate(45deg);
-}
-
 .doubao-list-card__body {
   box-sizing: border-box;
   background-color: var(--bg-base-1);

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 { TemplateKey, TemplateText } from '../types.js';
 import './styles.scss';
 export interface OrderCardProps {
     /** 标题栏右侧「更多」入口的文案。 */
@@ -17,9 +18,9 @@ export interface OrderCardProps {
     /** 商品价格前缀文案，例如「券后」。 */
     productPricePrefix?: string;
     /** 商品价格。 */
-    productPrice?: string | number;
+    productPrice?: TemplateText;
     /** 商品数量。 */
-    productQuantity?: string | number;
+    productQuantity?: TemplateText;
     /** 提单信息列表。 */
     infoItems?: OrderCardInfoItem[];
     /** 费用明细列表。 */
@@ -29,7 +30,7 @@ export interface OrderCardProps {
     /** 合计价格前的标签文案。 */
     totalLabel?: string;
     /** 合计价格。 */
-    totalPrice?: string | number;
+    totalPrice?: TemplateText;
     /** 主按钮文案。 */
     primaryActionText?: string;
     /** 次按钮文案。 */
@@ -51,7 +52,7 @@ export interface OrderCardProps {
 }
 export interface OrderCardInfoItem {
     /** 信息项唯一标识；不传时使用数组下标。 */
-    key?: string | number;
+    key?: TemplateKey;
     /** 信息项标签。 */
     label: string;
     /** 信息项主内容。 */
@@ -61,11 +62,11 @@ export interface OrderCardInfoItem {
 }
 export interface OrderCardFeeItem {
     /** 费用项唯一标识；不传时使用数组下标。 */
-    key?: string | number;
+    key?: TemplateKey;
     /** 费用项标签。 */
     label: string;
     /** 费用项金额或数值。 */
-    value: string | number;
+    value: TemplateText;
 }
 export declare function OrderCard(props: OrderCardProps): ReactElement;
 //# sourceMappingURL=index.d.ts.map