@doubao-dev/template 0.0.38 → 0.0.39

package/dist/primitives/title/index.js

@@ -0,0 +1,18 @@
+import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
+import { TemplateChevronRightIcon } from "../../components/chevron-right-icon/index.js";
+import "./styles.css";
+function Title({ text: text1, maxLines = 1, showArrow = true, loading = false, className, style }) {
+    const themedClassName = useThemeClassName(className);
+    return <view className={clsx('doubao-title', `doubao-title--lines-${maxLines}`, {
+        'doubao-title--loading': loading
+    }, themedClassName)} style={style}>
+      {loading ? <view className="doubao-title__placeholder"/> : <>
+          <text className="doubao-title__text" text-maxline={maxLines}>
+            {text1}
+          </text>
+          {showArrow ? <TemplateChevronRightIcon className="doubao-title__arrow"/> : null}
+        </>}
+    </view>;
+}
+export { Title };

package/dist/primitives/title/styles.css

@@ -0,0 +1,63 @@
+.doubao-title {
+  min-width: 0;
+  max-width: 100%;
+  color: var(--neutral-100);
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 2px;
+  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+  font-style: normal;
+  display: flex;
+}
+
+.doubao-title--loading {
+  align-items: center;
+  width: 100%;
+  height: 24px;
+}
+
+.doubao-title__text {
+  min-width: 0;
+  color: var(--neutral-100);
+  text-overflow: ellipsis;
+  flex: 0 auto;
+  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  display: block;
+  overflow: hidden;
+}
+
+.doubao-title--lines-1 .doubao-title__text {
+  white-space: nowrap;
+}
+
+.doubao-title__arrow {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-bottom: 6px;
+}
+
+.doubao-title__placeholder {
+  background-image: linear-gradient(90deg, #f7f7f7 0%, #e6e6e6 30%, #f7f7f7 100%);
+  background-size: 200% 100%;
+  border-radius: 4px;
+  width: 100%;
+  max-width: 40%;
+  height: 16px;
+  animation: 1.4s ease-in-out infinite doubao-title-placeholder-shimmer;
+}
+
+@keyframes doubao-title-placeholder-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+

package/dist/primitives/title/types.d.ts

@@ -0,0 +1,18 @@
+import type { CSSProperties } from '@lynx-js/types';
+export type TitleValue = string | number;
+export type TitleMaxLines = 1 | 2;
+export interface TitleProps {
+    /** 标题内容。 */
+    text: TitleValue;
+    /** 标题最多展示行数。@defaultValue 1 */
+    maxLines?: TitleMaxLines;
+    /** 是否展示右侧箭头。@defaultValue true */
+    showArrow?: boolean;
+    /** 是否展示标题占位骨架。@defaultValue false */
+    loading?: boolean;
+    /** 组件类名。 */
+    className?: string;
+    /** 组件样式。 */
+    style?: CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -2,8 +2,11 @@ import type { CSSProperties, TouchEvent } from '@lynx-js/types';
 import type { ReactElement, ReactNode } from 'react';
 import { type TemplateCardFooterProps } from '../components/footer/index.js';
 import { type TemplateCardHeaderProps } from '../components/header/index.js';
-import type { TemplateKey, TemplateText } from '../types.js';
+import type { TemplateKey, TemplateTagTone, TemplateText } from '../types.js';
 import './styles.scss';
+/**
+ * @deprecated 请使用 `CheckoutCardProps`。
+ */
 export interface TicketOrderCardProps {
     /** 标题栏配置。 */
     header?: TemplateCardHeaderProps;
@@ -28,6 +31,9 @@ export interface TicketOrderCardProps {
     /** 点击卡片根节点时触发。 */
     onClick?: (event: TouchEvent) => void;
 }
+/**
+ * @deprecated 请使用 `CheckoutCardProductItem`。
+ */
 export interface TicketOrderCardRouteItem {
     /** 航程项唯一标识；不传时使用数组下标。 */
     key?: TemplateKey;
@@ -35,11 +41,18 @@ export interface TicketOrderCardRouteItem {
     title?: TemplateText;
     /** 航程描述，例如「6月1日 周六 20:50-23:50 CZ0000 经济舱」。 */
     description?: TemplateText;
+    /** 航程标题前的标签文案。 */
+    tagText?: TemplateText;
+    /** 航程标题标签的色调。 */
+    tagTone?: TemplateTagTone;
     /** 是否展示标题右侧箭头。 */
     showChevron?: boolean;
     /** 点击航程项时触发。 */
     onClick?: (event: TouchEvent) => void;
 }
+/**
+ * @deprecated 请使用 `CheckoutCardInfoItem`。
+ */
 export interface TicketOrderCardInfoItem {
     /** 信息项唯一标识；不传时使用数组下标。 */
     key?: TemplateKey;
@@ -56,6 +69,9 @@ export interface TicketOrderCardInfoItem {
     /** 信息项补充内容块内容；优先级高于 valueExtra。 */
     valueExtraContent?: ReactNode;
 }
+/**
+ * @deprecated 请使用 `CheckoutCardFeeItem`。
+ */
 export interface TicketOrderCardFeeItem {
     /** 费用项唯一标识；不传时使用数组下标。 */
     key?: TemplateKey;
@@ -66,5 +82,8 @@ export interface TicketOrderCardFeeItem {
     /** 费用项自定义内容；优先级高于 label 和 value。 */
     content?: ReactNode;
 }
+/**
+ * @deprecated 请使用 `CheckoutCard`。
+ */
 export declare function TicketOrderCard(props: TicketOrderCardProps): ReactElement;
 //# sourceMappingURL=index.d.ts.map

package/dist/types.d.ts

@@ -1,3 +1,4 @@
 export type TemplateKey = string | number;
 export type TemplateText = string | number;
+export type TemplateTagTone = 'default' | 'highlight';
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doubao-dev/template",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "type": "module",
   "exports": {
     ".": {
@@ -8,6 +8,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "import": "./dist/primitives/index.js",
+      "require": "./dist/primitives/index.js"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",

package/dist/components/action-bar/index.d.ts

@@ -1,31 +0,0 @@
-import type { CSSProperties, TouchEvent } from '@lynx-js/types';
-import type { ReactElement } from 'react';
-import './styles.scss';
-export interface TemplateActionButtonProps {
-    /** 是否禁用。 */
-    disabled?: boolean;
-    /** 是否显示加载状态。 */
-    loading?: boolean;
-    /** onClick 的节流时间，单位为毫秒。 */
-    throttle?: number;
-}
-export interface TemplateActionBarProps {
-    /** 操作区根节点自定义类名。 */
-    className?: string;
-    /** 操作区根节点自定义样式。 */
-    style?: CSSProperties;
-    /** 主按钮文案。 */
-    primaryActionText?: string;
-    /** 主按钮配置，支持禁用、加载和点击节流。 */
-    primaryActionButtonProps?: TemplateActionButtonProps;
-    /** 次按钮文案。 */
-    secondaryActionText?: string;
-    /** 次按钮配置，支持禁用、加载和点击节流。 */
-    secondaryActionButtonProps?: TemplateActionButtonProps;
-    /** 点击主按钮时触发。 */
-    onPrimaryActionClick?: (event?: TouchEvent) => void;
-    /** 点击次按钮时触发。 */
-    onSecondaryActionClick?: (event?: TouchEvent) => void;
-}
-export declare function TemplateActionBar(props: TemplateActionBarProps): ReactElement | null;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/action-bar/index.js

@@ -1,15 +0,0 @@
-import { Button } from "@byted-doubao-apps/components";
-import { clsx } from "clsx";
-import "./styles.css";
-function TemplateActionBar(props) {
-    const { className, style, primaryActionText, primaryActionButtonProps, secondaryActionText, secondaryActionButtonProps, onPrimaryActionClick, onSecondaryActionClick } = props;
-    const hasPrimaryAction = null != primaryActionText && primaryActionText.length > 0;
-    const hasSecondaryAction = null != secondaryActionText && secondaryActionText.length > 0;
-    const hasDefaultActions = hasPrimaryAction || hasSecondaryAction;
-    if (!hasDefaultActions) return null;
-    return <view className={clsx('doubao-template-action-bar', className)} style={style}>
-      {hasSecondaryAction ? <Button className="doubao-template-action-bar__action" type="default" text={secondaryActionText} {...secondaryActionButtonProps} onClick={onSecondaryActionClick}/> : null}
-      {hasPrimaryAction ? <Button className="doubao-template-action-bar__action" type="primary" text={primaryActionText} {...primaryActionButtonProps} onClick={onPrimaryActionClick}/> : null}
-    </view>;
-}
-export { TemplateActionBar };

package/dist/components/action-bar/styles.css

@@ -1,27 +0,0 @@
-.doubao-template-action-bar {
-  box-sizing: border-box;
-  flex-direction: row;
-  width: 100%;
-  padding: 8px 12px 12px;
-  display: flex;
-}
-
-.doubao-template-action-bar__action {
-  --doubao-button-border-radius: 8px;
-  --doubao-button-default-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;
-  border-radius: 8px;
-  flex: 1 1 0;
-  width: auto;
-  min-width: 0;
-  height: 44px;
-}
-
-.doubao-template-action-bar__action + .doubao-template-action-bar__action {
-  margin-left: 10px;
-}
-

package/dist/components/title-bar/index.d.ts

@@ -1,11 +0,0 @@
-import type { TouchEvent } from '@lynx-js/types';
-import type { ReactElement } from 'react';
-import './styles.scss';
-export interface TemplateTitleBarProps {
-    moreText?: string;
-    showMore?: boolean;
-    reserveMore?: boolean;
-    onMoreClick?: (event: TouchEvent) => void;
-}
-export declare function TemplateTitleBar(props: TemplateTitleBarProps): ReactElement;
-//# sourceMappingURL=index.d.ts.map

package/dist/components/title-bar/index.js

@@ -1,33 +0,0 @@
-import { getAppInfo } from "../../utils/app-info.js";
-import { TemplateChevronRightIcon } from "../chevron-right-icon/index.js";
-import "./styles.css";
-function TemplateTitleBarIcon({ appIconSrc }) {
-    if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-template-title-bar__app-icon" src={appIconSrc} mode="aspectFill"/>;
-    return <view className="doubao-template-title-bar__app-icon"/>;
-}
-function TemplateTitleBar(props) {
-    const { moreText, showMore = true, reserveMore = false, onMoreClick } = props;
-    const appInfo = getAppInfo();
-    const hasMore = showMore && null != moreText && moreText.length > 0;
-    return <view className="doubao-template-title-bar">
-      <view className="doubao-template-title-bar__app">
-        <TemplateTitleBarIcon appIconSrc={appInfo.appIconSrc}/>
-        <text className="doubao-template-title-bar__app-name" text-maxline="1">
-          {appInfo.appName}
-        </text>
-      </view>
-      {hasMore ? <view className="doubao-template-title-bar__more" catchtap={onMoreClick}>
-          <text className="doubao-template-title-bar__more-text" text-maxline="1">
-            {moreText}
-          </text>
-          <TemplateChevronRightIcon className="doubao-template-title-bar__more-chevron"/>
-        </view> : null}
-      {!hasMore && reserveMore ? <view className="doubao-template-title-bar__more-placeholder">
-          <text className="doubao-template-title-bar__more-text" text-maxline="1">
-            更多
-          </text>
-          <TemplateChevronRightIcon className="doubao-template-title-bar__more-chevron"/>
-        </view> : null}
-    </view>;
-}
-export { TemplateTitleBar };

package/dist/components/title-bar/styles.css

@@ -1,66 +0,0 @@
-.doubao-template-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: 12px;
-  display: flex;
-}
-
-.doubao-template-title-bar__app {
-  flex-direction: row;
-  align-items: center;
-  display: flex;
-}
-
-.doubao-template-title-bar__app-icon {
-  border-radius: 4px;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-}
-
-.doubao-template-title-bar__app-name, .doubao-template-title-bar__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-template-title-bar__app-name {
-  margin-left: 6px;
-  font-weight: 500;
-}
-
-.doubao-template-title-bar__more, .doubao-template-title-bar__more-placeholder {
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 62.5px;
-  display: flex;
-}
-
-.doubao-template-title-bar__more-placeholder {
-  opacity: 0;
-}
-
-.doubao-template-title-bar__more-text {
-  font-weight: 400;
-}
-
-.doubao-template-title-bar__more-chevron {
-  flex-shrink: 0;
-  width: 12px;
-  height: 12px;
-  margin-left: 2px;
-}
-