@doubao-apps/template 0.0.31 → 0.0.32

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

@@ -0,0 +1,27 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateActionBar } from "../components/action-bar/index.js";
+import { TemplateInfoSection } from "../components/info-section/index.js";
+import { TemplateRouteSection, hasTemplateRouteSectionItems } from "../components/route-section/index.js";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import "./styles.css";
+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 hasRouteItems = hasTemplateRouteSectionItems(routeItems);
+    const hasInfoSection = infoItems.length > 0 || feeItems.length > 0 || void 0 !== totalContent || !isTicketOrderTextEmpty(totalLabel) || !isTicketOrderTextEmpty(totalPrice);
+    const hasDefaultBody = hasRouteItems || hasInfoSection;
+    return <view className={useThemeClassName(clsx('doubao-ticket-order-card', className))} style={style} bindtap={onClick}>
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+
+      {hasDefaultBody ? <view className="doubao-ticket-order-card__body">
+          {hasRouteItems ? <TemplateRouteSection items={routeItems}/> : null}
+          {hasInfoSection ? <TemplateInfoSection infoItems={infoItems} feeItems={feeItems} totalLabel={totalLabel} totalPrice={totalPrice} totalContent={totalContent}/> : null}
+        </view> : null}
+
+      <TemplateActionBar secondaryActionText={secondaryActionText} primaryActionText={primaryActionText} onSecondaryActionClick={onSecondaryActionClick} onPrimaryActionClick={onPrimaryActionClick}/>
+    </view>;
+}
+export { TicketOrderCard };

package/dist/ticket-order-card/styles.css

@@ -0,0 +1,18 @@
+.doubao-ticket-order-card {
+  box-sizing: border-box;
+  background-color: var(--doubao-ticket-order-card-bg);
+  border: 1px solid var(--doubao-ticket-order-card-border);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-ticket-order-card__body {
+  box-sizing: border-box;
+  background-color: var(--doubao-ticket-order-card-bg);
+  width: 100%;
+}
+

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

@@ -0,0 +1,36 @@
+import type { CSSProperties, TouchEvent } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateText } from '../types.js';
+import './styles.scss';
+export interface TransportCardProps {
+    /** 行程标题块内容。 */
+    title?: ReactNode;
+    /** 出发点主信息文案。 */
+    departureMain?: TemplateText;
+    /** 出发点补充信息文案。 */
+    departureSub?: TemplateText;
+    /** 中转区域整体块内容；优先级高于 transferTop、showTransferDot 和 transferBottom。 */
+    transfer?: ReactNode;
+    /** 中转区域上方文案。 */
+    transferTop?: TemplateText;
+    /** 是否展示中转箭头中间圆点。 */
+    showTransferDot?: boolean;
+    /** 中转区域下方文案。 */
+    transferBottom?: TemplateText;
+    /** 到达点主信息文案。 */
+    arrivalMain?: TemplateText;
+    /** 到达点日期偏移文案，例如 '+1'。 */
+    arrivalDayOffset?: TemplateText;
+    /** 到达点补充信息文案。 */
+    arrivalSub?: TemplateText;
+    /** 价格块内容。 */
+    price?: ReactNode;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export declare function TransportCard(props: TransportCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/transport-card/index.js

@@ -0,0 +1,15 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import { TemplateTransportSummary } from "../components/transport-summary/index.js";
+import "./styles.css";
+function TransportCard(props) {
+    const { title, departureMain, departureSub, transfer, transferTop, showTransferDot, transferBottom, arrivalMain, arrivalDayOffset, arrivalSub, price, className, style, onClick } = props;
+    return <view className={useThemeClassName(clsx('doubao-transport-card', className))} style={style} bindtap={onClick}>
+      <TemplateTitleBar/>
+      <view className="doubao-transport-card__body">
+        <TemplateTransportSummary className="doubao-transport-card__content" title={title} departureMain={departureMain} departureSub={departureSub} transfer={transfer} transferTop={transferTop} showTransferDot={showTransferDot} transferBottom={transferBottom} arrivalMain={arrivalMain} arrivalDayOffset={arrivalDayOffset} arrivalSub={arrivalSub} price={price}/>
+      </view>
+    </view>;
+}
+export { TransportCard };

package/dist/transport-card/styles.css

@@ -0,0 +1,21 @@
+.doubao-transport-card {
+  --doubao-transport-card-bg: var(--bg-base-1);
+  --doubao-transport-card-border: var(--bg-base-2-overlay);
+  box-sizing: border-box;
+  background-color: var(--doubao-transport-card-bg);
+  border: 1px solid var(--doubao-transport-card-border);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-transport-card__body {
+  box-sizing: border-box;
+  border-radius: 8px;
+  width: 100%;
+  height: 94px;
+}
+

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

@@ -0,0 +1,56 @@
+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 TransportListCardProps {
+    /** 标题栏右侧「更多」入口的文案。 */
+    moreText?: string;
+    /** 是否展示标题栏右侧「更多」入口。 */
+    showMore?: boolean;
+    /** 交通列表项。超过 4 条时只展示前 4 条，并展示「查看更多」按钮。 */
+    items?: TransportListCardItem[];
+    /** 列表超过 4 条时，底部「查看更多」按钮的文案。 */
+    viewMoreText?: string;
+    /** 卡片根节点自定义类名。 */
+    className?: string;
+    /** 卡片根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击卡片根节点时触发。 */
+    onClick?: (event: TouchEvent) => void;
+    /** 点击标题栏右侧「更多」入口时触发。 */
+    onMoreClick?: (event: TouchEvent) => void;
+    /** 点击底部「查看更多」按钮时触发。 */
+    onViewMoreClick?: (event?: TouchEvent) => void;
+}
+export interface TransportListCardItem {
+    /** 列表项唯一标识；不传时使用数组下标。 */
+    key?: TemplateKey;
+    /** 行程标题块内容。 */
+    title?: ReactNode;
+    /** 出发点主信息文案。 */
+    departureMain?: TemplateText;
+    /** 出发点补充信息文案。 */
+    departureSub?: TemplateText;
+    /** 中转区域整体块内容；优先级高于 transferTop 和 transferBottom。 */
+    transfer?: ReactNode;
+    /** 中转区域上方文案。 */
+    transferTop?: TemplateText;
+    /** 中转区域下方文案。 */
+    transferBottom?: TemplateText;
+    /** 到达点主信息文案。 */
+    arrivalMain?: TemplateText;
+    /** 到达点日期偏移文案，例如 '+1'。 */
+    arrivalDayOffset?: TemplateText;
+    /** 到达点补充信息文案。 */
+    arrivalSub?: TemplateText;
+    /** 价格块内容。 */
+    price?: ReactNode;
+    /** 列表项根节点自定义类名。 */
+    className?: string;
+    /** 列表项根节点自定义样式。 */
+    style?: CSSProperties;
+    /** 点击列表项时触发。 */
+    onClick?: (event: TouchEvent) => void;
+}
+export declare function TransportListCard(props: TransportListCardProps): ReactElement;
+//# sourceMappingURL=index.d.ts.map

package/dist/transport-list-card/index.js

@@ -0,0 +1,32 @@
+import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateTitleBar } from "../components/title-bar/index.js";
+import { TemplateTransportSummary } from "../components/transport-summary/index.js";
+import "./styles.css";
+function renderTransportListItem({ item, index, isLast }) {
+    return <view className={clsx('doubao-transport-list-card__item', isLast && 'doubao-transport-list-card__item--last', item.className)} style={item.style} key={item.key ?? index} {...null != item.onClick ? {
+        catchtap: item.onClick
+    } : {}}>
+      <TemplateTransportSummary className="doubao-template-transport-summary--list" title={item.title} departureMain={item.departureMain} departureSub={item.departureSub} transfer={item.transfer} transferTop={item.transferTop} transferBottom={item.transferBottom} arrivalMain={item.arrivalMain} arrivalDayOffset={item.arrivalDayOffset} arrivalSub={item.arrivalSub} price={item.price}/>
+      {!isLast ? <view className="doubao-transport-list-card__item--spread"/> : null}
+    </view>;
+}
+function TransportListCard(props) {
+    const { moreText, showMore = true, items = [], viewMoreText = '查看更多', className, style, onClick, onMoreClick, onViewMoreClick } = props;
+    const shouldShowViewMore = items.length > 4;
+    const visibleItems = shouldShowViewMore ? items.slice(0, 4) : items;
+    return <view className={useThemeClassName(clsx('doubao-transport-list-card', className))} style={style} bindtap={onClick}>
+      <TemplateTitleBar moreText={moreText} showMore={showMore} onMoreClick={onMoreClick}/>
+      <view className="doubao-transport-list-card__body">
+        {visibleItems.map((item, index)=>renderTransportListItem({
+            item,
+            index,
+            isLast: index === visibleItems.length - 1
+        }))}
+        {shouldShowViewMore ? <view className="doubao-transport-list-card__view-more">
+            <Button className="doubao-transport-list-card__view-more-button" type="default" text={viewMoreText} onClick={onViewMoreClick}/>
+          </view> : null}
+      </view>
+    </view>;
+}
+export { TransportListCard };

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

@@ -0,0 +1,60 @@
+.doubao-transport-list-card {
+  --doubao-transport-list-card-bg: var(--bg-base-1);
+  --doubao-transport-list-card-border: var(--bg-base-2-overlay);
+  --doubao-transport-list-card-divider: var(--neutral-transparent-1);
+  --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-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));
+  box-sizing: border-box;
+  background-color: var(--doubao-transport-list-card-bg);
+  border: 1px solid var(--doubao-transport-list-card-border);
+  border-radius: 8px;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-transport-list-card__body {
+  box-sizing: border-box;
+  background-color: var(--doubao-transport-list-card-bg);
+  width: 100%;
+}
+
+.doubao-transport-list-card__item {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.doubao-transport-list-card__item--spread {
+  background: var(--doubao-transport-list-card-divider);
+  width: calc(100% - 12px);
+  height: .5px;
+  margin-left: 12px;
+}
+
+.doubao-transport-list-card__item--last {
+  border-bottom: none;
+}
+
+.doubao-transport-list-card__view-more {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 12px;
+}
+
+.doubao-transport-list-card__view-more-button {
+  border-radius: 8px;
+  width: 100%;
+  height: 44px;
+}
+

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type TemplateKey = string | number;
+export type TemplateText = string | number;
+//# sourceMappingURL=types.d.ts.map

package/dist/utils/app-info.js

@@ -1,11 +1,10 @@
-import { getRuntimeManifest } from "@byted-doubao-apps/runtime-helpers";
 function resolveIconSrc(icons) {
     if ('string' == typeof icons) return icons.length > 0 ? icons : void 0;
     return icons?.['3x'] || icons?.['2x'] || icons?.['1x'];
 }
 function getAppInfo() {
     try {
-        const manifest = getRuntimeManifest();
+        const manifest = globalThis.__AI_MANIFEST__;
         return {
             appName: manifest.name || manifest.appId || manifest.package || '',
             appIconSrc: resolveIconSrc(manifest.icons)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doubao-apps/template",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "type": "module",
   "exports": {
     ".": {
@@ -13,17 +13,13 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "assets",
     "README.md",
     "!dist/**/*.map"
   ],
   "dependencies": {
     "clsx": "2.1.1"
   },
-  "peerDependencies": {
-    "@lynx-js/react": "^0.115.1",
-    "@lynx-js/types": "^3.6.0",
-    "@types/react": "^18"
-  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"