@doubao-apps/template 0.0.34 → 0.0.35-rc.0

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export { PriceText, type PriceTextProps } from './price-text/index.js';
+export { Tag, type TagProps } from './tag/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.js

@@ -0,0 +1,2 @@
+export { PriceText } from "./price-text/index.js";
+export { Tag } from "./tag/index.js";

package/dist/ui/price-text/index.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import './styles.scss';
+export interface PriceTextProps {
+    /** 价格前缀，例如「均」。 */
+    prefix?: ReactNode;
+    /** 主价格，例如「￥1636.92」。 */
+    price?: ReactNode;
+    /** 价格后缀，例如「价格后缀」。 */
+    suffix?: ReactNode;
+    /** 辅助标签，例如「销量」。 */
+    label?: ReactNode;
+    /** 根节点自定义类名。 */
+    className?: string;
+    /** 根节点自定义样式。 */
+    style?: CSSProperties;
+}
+export declare function PriceText(props: PriceTextProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/price-text/index.js

@@ -0,0 +1,29 @@
+import { clsx } from "clsx";
+import "./styles.css";
+function isPriceTextNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function renderPriceTextPart(content, className) {
+    if (isPriceTextNodeEmpty(content)) return null;
+    if ('string' == typeof content || 'number' == typeof content) return <text className={className} text-maxline="1">
+        {content}
+      </text>;
+    return <view className={clsx(className, `${className}--custom`)}>{content}</view>;
+}
+function PriceText(props) {
+    const { prefix, price, suffix, label, className, style } = props;
+    const hasContent = [
+        prefix,
+        price,
+        suffix,
+        label
+    ].some((item)=>!isPriceTextNodeEmpty(item));
+    if (!hasContent) return null;
+    return <view className={clsx('doubao-price-text', className)} style={style}>
+      {renderPriceTextPart(prefix, 'doubao-price-text__prefix')}
+      {renderPriceTextPart(price, 'doubao-price-text__price')}
+      {renderPriceTextPart(suffix, 'doubao-price-text__suffix')}
+      {renderPriceTextPart(label, 'doubao-price-text__label')}
+    </view>;
+}
+export { PriceText };

package/dist/ui/price-text/styles.css

@@ -0,0 +1,74 @@
+.doubao-price-text {
+  --doubao-price-text-main-text: var(--neutral-100);
+  --doubao-price-text-label-text: var(--neutral-50);
+  --doubao-price-text-prefix-font-size: 40px;
+  --doubao-price-text-prefix-line-height: 52px;
+  --doubao-price-text-prefix-font-weight: 500;
+  --doubao-price-text-price-font-size: 56px;
+  --doubao-price-text-price-line-height: 68px;
+  --doubao-price-text-price-font-weight: 600;
+  --doubao-price-text-suffix-font-size: 40px;
+  --doubao-price-text-suffix-line-height: 52px;
+  --doubao-price-text-suffix-font-weight: 500;
+  --doubao-price-text-label-font-size: 40px;
+  --doubao-price-text-label-line-height: 52px;
+  --doubao-price-text-label-font-weight: 400;
+  --doubao-price-text-suffix-margin-left: 12px;
+  --doubao-price-text-label-margin-left: 16px;
+  width: 100%;
+  min-width: 0;
+  color: var(--doubao-price-text-main-text);
+  white-space: nowrap;
+  flex-direction: row;
+  align-items: flex-end;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-price-text__prefix, .doubao-price-text__price, .doubao-price-text__suffix, .doubao-price-text__label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  overflow: hidden;
+}
+
+.doubao-price-text__prefix {
+  color: var(--doubao-price-text-main-text);
+  font-size: var(--doubao-price-text-prefix-font-size);
+  font-weight: var(--doubao-price-text-prefix-font-weight);
+  line-height: var(--doubao-price-text-prefix-line-height);
+}
+
+.doubao-price-text__price {
+  color: var(--doubao-price-text-main-text);
+  font-size: var(--doubao-price-text-price-font-size);
+  font-weight: var(--doubao-price-text-price-font-weight);
+  line-height: var(--doubao-price-text-price-line-height);
+}
+
+.doubao-price-text__suffix {
+  margin-left: var(--doubao-price-text-suffix-margin-left);
+  color: var(--doubao-price-text-main-text);
+  font-size: var(--doubao-price-text-suffix-font-size);
+  font-weight: var(--doubao-price-text-suffix-font-weight);
+  line-height: var(--doubao-price-text-suffix-line-height);
+}
+
+.doubao-price-text__label {
+  margin-left: var(--doubao-price-text-label-margin-left);
+  color: var(--doubao-price-text-label-text);
+  font-size: var(--doubao-price-text-label-font-size);
+  font-weight: var(--doubao-price-text-label-font-weight);
+  line-height: var(--doubao-price-text-label-line-height);
+}
+
+.doubao-price-text__prefix--custom, .doubao-price-text__price--custom, .doubao-price-text__suffix--custom, .doubao-price-text__label--custom {
+  flex-direction: row;
+  align-items: flex-end;
+  display: flex;
+}
+

package/dist/ui/tag/index.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from '@lynx-js/types';
+import type { ReactElement, ReactNode } from 'react';
+import type { TemplateText } from '../../types.js';
+import './styles.scss';
+export interface TagProps {
+    /** 标签文案；只需要传入文字时使用。 */
+    text?: TemplateText;
+    /** 标签自定义内容；优先级高于 text。 */
+    children?: ReactNode;
+    /** 标签文字颜色。 */
+    color?: string;
+    /** 标签背景色。 */
+    background?: string;
+    /** 根节点自定义类名。 */
+    className?: string;
+    /** 根节点自定义样式。 */
+    style?: CSSProperties;
+}
+export declare function Tag(props: TagProps): ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/tag/index.js

@@ -0,0 +1,34 @@
+import { clsx } from "clsx";
+import "./styles.css";
+function isTagNodeEmpty(content) {
+    return null == content || 'boolean' == typeof content || '' === content;
+}
+function getTagStyle(color, background, style) {
+    const hasColor = null != color && '' !== color;
+    const hasBackground = null != background && '' !== background;
+    if (!hasColor && !hasBackground) return style;
+    const tagStyle = {};
+    if (hasColor) tagStyle['--doubao-tag-text'] = color;
+    if (hasBackground) tagStyle.backgroundColor = background;
+    if (null == style) return tagStyle;
+    return {
+        ...tagStyle,
+        ...style
+    };
+}
+function renderTagContent(content) {
+    if (isTagNodeEmpty(content)) return null;
+    if ('string' == typeof content || 'number' == typeof content) return <text className="doubao-tag__text" text-maxline="1">
+        {content}
+      </text>;
+    return <view className="doubao-tag__custom">{content}</view>;
+}
+function Tag(props) {
+    const { text: text1, children, color, background, className, style } = props;
+    const content = isTagNodeEmpty(children) ? text1 : children;
+    if (isTagNodeEmpty(content)) return null;
+    return <view className={clsx('doubao-tag', className)} style={getTagStyle(color, background, style)}>
+      {renderTagContent(content)}
+    </view>;
+}
+export { Tag };

package/dist/ui/tag/styles.css

@@ -0,0 +1,39 @@
+.doubao-tag {
+  --doubao-tag-text: var(--primary-50);
+  --doubao-tag-radius: 4px;
+  --doubao-tag-font-size: 12px;
+  --doubao-tag-font-weight: 400;
+  --doubao-tag-line-height: 16px;
+  box-sizing: border-box;
+  max-width: 100%;
+  color: var(--doubao-tag-text);
+  border-radius: var(--doubao-tag-radius);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 3px;
+  font-family: PingFang SC, sans-serif;
+  font-style: normal;
+  display: flex;
+  overflow: hidden;
+}
+
+.doubao-tag__text, .doubao-tag__custom {
+  min-width: 0;
+  color: var(--doubao-tag-text);
+  font-family: PingFang SC, sans-serif;
+  font-size: var(--doubao-tag-font-size);
+  font-style: normal;
+  font-weight: var(--doubao-tag-font-weight);
+  line-height: var(--doubao-tag-line-height);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.doubao-tag__custom {
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doubao-apps/template",
-  "version": "0.0.34",
+  "version": "0.0.35-rc.0",
   "type": "module",
   "exports": {
     ".": {
@@ -8,6 +8,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "import": "./dist/ui/index.js",
+      "require": "./dist/ui/index.js"
+    },
     "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",