🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

@cherryport/ui

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cherryport/ui - npm Package Compare versions

Comparing version
0.1.0
 to
0.2.0
+55
dist/uni/index.d.mts
import * as vue from 'vue';
declare const EmptyState: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "action"[], "action", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
onAction?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
description: string;
actionLabel: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const LoadingState: vue.DefineComponent<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{}>, {
label: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
export { EmptyState, LoadingState };
+55
dist/uni/index.d.ts
import * as vue from 'vue';
declare const EmptyState: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "action"[], "action", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
onAction?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
description: string;
actionLabel: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const LoadingState: vue.DefineComponent<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{}>, {
label: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
export { EmptyState, LoadingState };
+127
dist/uni/index.js
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/uni/index.ts
var uni_exports = {};
__export(uni_exports, {
EmptyState: () => EmptyState,
LoadingState: () => LoadingState
});
module.exports = __toCommonJS(uni_exports);
// src/uni/EmptyState.ts
var import_vue = require("vue");
var EmptyState = (0, import_vue.defineComponent)({
name: "EmptyState",
props: {
title: {
type: String,
default: "\u6682\u65E0\u6570\u636E"
},
description: {
type: String,
default: ""
},
actionLabel: {
type: String,
default: ""
}
},
emits: ["action"],
setup(props, { emit }) {
return () => (0, import_vue.h)(
"view",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "8rpx",
padding: "20rpx 0",
color: "var(--cp-ink-muted)"
}
},
[
(0, import_vue.h)(
"text",
{
style: {
fontSize: "24rpx",
fontWeight: 600,
color: "var(--cp-ink)"
}
},
props.title
),
props.description ? (0, import_vue.h)(
"text",
{ style: { fontSize: "22rpx" } },
props.description
) : null,
props.actionLabel ? (0, import_vue.h)(
"button",
{
class: "btn-ghost",
onClick: () => emit("action")
},
props.actionLabel
) : null
]
);
}
});
// src/uni/LoadingState.ts
var import_vue2 = require("vue");
var LoadingState = (0, import_vue2.defineComponent)({
name: "LoadingState",
props: {
label: {
type: String,
default: "\u52A0\u8F7D\u4E2D..."
}
},
setup(props) {
return () => (0, import_vue2.h)(
"view",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "16rpx 0"
}
},
[
(0, import_vue2.h)(
"text",
{
style: { color: "var(--cp-ink-muted)", fontSize: "24rpx" }
},
props.label
)
]
);
}
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
EmptyState,
LoadingState
});
+99
dist/uni/index.mjs
// src/uni/EmptyState.ts
import { defineComponent, h } from "vue";
var EmptyState = defineComponent({
name: "EmptyState",
props: {
title: {
type: String,
default: "\u6682\u65E0\u6570\u636E"
},
description: {
type: String,
default: ""
},
actionLabel: {
type: String,
default: ""
}
},
emits: ["action"],
setup(props, { emit }) {
return () => h(
"view",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "8rpx",
padding: "20rpx 0",
color: "var(--cp-ink-muted)"
}
},
[
h(
"text",
{
style: {
fontSize: "24rpx",
fontWeight: 600,
color: "var(--cp-ink)"
}
},
props.title
),
props.description ? h(
"text",
{ style: { fontSize: "22rpx" } },
props.description
) : null,
props.actionLabel ? h(
"button",
{
class: "btn-ghost",
onClick: () => emit("action")
},
props.actionLabel
) : null
]
);
}
});
// src/uni/LoadingState.ts
import { defineComponent as defineComponent2, h as h2 } from "vue";
var LoadingState = defineComponent2({
name: "LoadingState",
props: {
label: {
type: String,
default: "\u52A0\u8F7D\u4E2D..."
}
},
setup(props) {
return () => h2(
"view",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "16rpx 0"
}
},
[
h2(
"text",
{
style: { color: "var(--cp-ink-muted)", fontSize: "24rpx" }
},
props.label
)
]
);
}
});
export {
EmptyState,
LoadingState
};
+193
-2
dist/index.d.mts

@@ -1,3 +0,194 @@

declare const uiVersion = "0.0.0";
import * as vue from 'vue';
import { PropType } from 'vue';
export { uiVersion };
type AnnouncementVariant = "info" | "success" | "warning";
declare const AnnouncementBar: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<AnnouncementVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<AnnouncementVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
message: string;
variant: AnnouncementVariant;
closable: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const EmptyState: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
compact: {
type: BooleanConstructor;
default: boolean;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "action"[], "action", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
compact: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onAction?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
description: string;
actionLabel: string;
compact: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const LoadingState: vue.DefineComponent<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
size: {
type: NumberConstructor;
default: number;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
size: {
type: NumberConstructor;
default: number;
};
}>> & Readonly<{}>, {
label: string;
size: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type StatusPillVariant = "neutral" | "info" | "success" | "warning" | "danger";
declare const StatusPill: vue.DefineComponent<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<StatusPillVariant>;
default: string;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<StatusPillVariant>;
default: string;
};
}>> & Readonly<{}>, {
variant: StatusPillVariant;
label: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type ToastVariant = "info" | "success" | "warning" | "danger";
declare const ToastMessage: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<ToastVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<ToastVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
message: string;
variant: ToastVariant;
closable: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const uiVersion = "0.1.0";
export { AnnouncementBar, type AnnouncementVariant, EmptyState, LoadingState, StatusPill, type StatusPillVariant, ToastMessage, type ToastVariant, uiVersion };
+193
-2
dist/index.d.ts

@@ -1,3 +0,194 @@

declare const uiVersion = "0.0.0";
import * as vue from 'vue';
import { PropType } from 'vue';
export { uiVersion };
type AnnouncementVariant = "info" | "success" | "warning";
declare const AnnouncementBar: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<AnnouncementVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<AnnouncementVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
message: string;
variant: AnnouncementVariant;
closable: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const EmptyState: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
compact: {
type: BooleanConstructor;
default: boolean;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "action"[], "action", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
description: {
type: StringConstructor;
default: string;
};
actionLabel: {
type: StringConstructor;
default: string;
};
compact: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onAction?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
description: string;
actionLabel: string;
compact: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const LoadingState: vue.DefineComponent<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
size: {
type: NumberConstructor;
default: number;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
size: {
type: NumberConstructor;
default: number;
};
}>> & Readonly<{}>, {
label: string;
size: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type StatusPillVariant = "neutral" | "info" | "success" | "warning" | "danger";
declare const StatusPill: vue.DefineComponent<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<StatusPillVariant>;
default: string;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
label: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<StatusPillVariant>;
default: string;
};
}>> & Readonly<{}>, {
variant: StatusPillVariant;
label: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
type ToastVariant = "info" | "success" | "warning" | "danger";
declare const ToastMessage: vue.DefineComponent<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<ToastVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "close"[], "close", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
title: {
type: StringConstructor;
default: string;
};
message: {
type: StringConstructor;
default: string;
};
variant: {
type: PropType<ToastVariant>;
default: string;
};
closable: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
onClose?: ((...args: any[]) => any) | undefined;
}>, {
title: string;
message: string;
variant: ToastVariant;
closable: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
declare const uiVersion = "0.1.0";
export { AnnouncementBar, type AnnouncementVariant, EmptyState, LoadingState, StatusPill, type StatusPillVariant, ToastMessage, type ToastVariant, uiVersion };
+454
-1
dist/index.js

@@ -23,9 +23,462 @@ "use strict";

__export(index_exports, {
AnnouncementBar: () => AnnouncementBar,
EmptyState: () => EmptyState,
LoadingState: () => LoadingState,
StatusPill: () => StatusPill,
ToastMessage: () => ToastMessage,
uiVersion: () => uiVersion
});
module.exports = __toCommonJS(index_exports);
var uiVersion = "0.0.0";
// src/components/AnnouncementBar.ts
var import_vue = require("vue");
var variantStyles = {
info: {
background: "var(--cp-info-soft)",
border: "var(--cp-info-border)",
color: "var(--cp-info)"
},
success: {
background: "var(--cp-success-soft)",
border: "var(--cp-success-border)",
color: "var(--cp-success)"
},
warning: {
background: "var(--cp-warning-soft)",
border: "var(--cp-warning-border)",
color: "var(--cp-warning)"
}
};
var AnnouncementBar = (0, import_vue.defineComponent)({
name: "AnnouncementBar",
props: {
title: {
type: String,
default: "\u516C\u544A"
},
message: {
type: String,
default: ""
},
variant: {
type: String,
default: "info"
},
closable: {
type: Boolean,
default: false
}
},
emits: ["close"],
setup(props, { emit, slots }) {
const isVisible = (0, import_vue.ref)(true);
const styles = (0, import_vue.computed)(() => {
const variant = variantStyles[props.variant] ?? variantStyles.info;
return {
display: "flex",
alignItems: "flex-start",
gap: "12px",
padding: "12px 16px",
borderRadius: "10px",
border: `1px solid ${variant.border}`,
background: variant.background,
color: variant.color
};
});
const closeButtonStyles = {
marginLeft: "auto",
border: "none",
background: "transparent",
color: "inherit",
cursor: "pointer",
fontSize: "18px",
lineHeight: "1"
};
return () => isVisible.value ? (0, import_vue.h)(
"section",
{ style: styles.value, role: "status" },
[
(0, import_vue.h)(
"strong",
{ style: { fontWeight: 600, flexShrink: 0, lineHeight: "20px" } },
props.title
),
(0, import_vue.h)(
"span",
{ style: { color: "inherit", lineHeight: "20px", fontSize: "14px" } },
slots.default ? slots.default() : props.message
),
props.closable ? (0, import_vue.h)(
"button",
{
type: "button",
style: closeButtonStyles,
"aria-label": "\u5173\u95ED\u516C\u544A",
onClick: () => {
isVisible.value = false;
emit("close");
}
},
"\xD7"
) : null
]
) : null;
}
});
// src/components/EmptyState.ts
var import_vue2 = require("vue");
var EmptyState = (0, import_vue2.defineComponent)({
name: "EmptyState",
props: {
title: {
type: String,
default: "\u6682\u65E0\u6570\u636E"
},
description: {
type: String,
default: ""
},
actionLabel: {
type: String,
default: ""
},
compact: {
type: Boolean,
default: false
}
},
emits: ["action"],
setup(props, { emit, slots }) {
return () => {
const content = slots.default ? slots.default() : props.title;
const hasAction = Boolean(props.actionLabel);
return (0, import_vue2.h)(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: props.compact ? "6px" : "10px",
padding: props.compact ? "var(--cp-space-2) 0" : "var(--cp-space-4) var(--cp-space-3)",
textAlign: "center",
color: "var(--cp-ink-muted)"
},
role: "status",
"aria-live": "polite"
},
[
slots.icon ? (0, import_vue2.h)(
"div",
{ style: { fontSize: "28px", color: "var(--cp-ink-muted)" } },
slots.icon()
) : (0, import_vue2.h)("span", {
style: {
width: "40px",
height: "40px",
borderRadius: "50%",
border: "1px dashed var(--cp-border)",
display: "inline-flex",
alignItems: "center",
justifyContent: "center"
}
}),
(0, import_vue2.h)(
"strong",
{
style: {
fontSize: "14px",
fontWeight: 600,
color: "var(--cp-ink)"
}
},
content
),
props.description ? (0, import_vue2.h)(
"span",
{ style: { fontSize: "12px", color: "var(--cp-ink-muted)" } },
props.description
) : null,
hasAction ? (0, import_vue2.h)(
"button",
{
type: "button",
style: {
marginTop: "4px",
padding: "6px 12px",
borderRadius: "var(--cp-radius-pill)",
border: "1px solid var(--cp-border)",
background: "var(--cp-surface)",
color: "var(--cp-ink)",
cursor: "pointer",
fontSize: "12px"
},
onClick: () => emit("action")
},
props.actionLabel
) : null
]
);
};
}
});
// src/components/LoadingState.ts
var import_vue3 = require("vue");
var LoadingState = (0, import_vue3.defineComponent)({
name: "LoadingState",
props: {
label: {
type: String,
default: "\u52A0\u8F7D\u4E2D..."
},
size: {
type: Number,
default: 28
}
},
setup(props) {
return () => (0, import_vue3.h)(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "8px",
padding: "var(--cp-space-3)",
color: "var(--cp-ink-muted)"
},
role: "status",
"aria-live": "polite"
},
[
(0, import_vue3.h)(
"svg",
{
width: props.size,
height: props.size,
viewBox: "0 0 50 50",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
[
(0, import_vue3.h)(
"circle",
{
cx: "25",
cy: "25",
r: "20",
stroke: "var(--cp-ink-muted)",
strokeWidth: "4",
strokeLinecap: "round",
strokeDasharray: "90 30"
},
[
(0, import_vue3.h)("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 25 25",
to: "360 25 25",
dur: "1s",
repeatCount: "indefinite"
})
]
)
]
),
props.label ? (0, import_vue3.h)(
"span",
{ style: { fontSize: "12px", color: "var(--cp-ink-muted)" } },
props.label
) : null
]
);
}
});
// src/components/StatusPill.ts
var import_vue4 = require("vue");
var variantStyles2 = {
neutral: {
background: "var(--cp-surface-muted)",
border: "var(--cp-border)",
color: "var(--cp-ink-subtle)"
},
info: {
background: "var(--cp-info-soft)",
border: "var(--cp-info-border)",
color: "var(--cp-info)"
},
success: {
background: "var(--cp-success-soft)",
border: "var(--cp-success-border)",
color: "var(--cp-success)"
},
warning: {
background: "var(--cp-warning-soft)",
border: "var(--cp-warning-border)",
color: "var(--cp-warning)"
},
danger: {
background: "var(--cp-danger-soft)",
border: "var(--cp-danger-border)",
color: "var(--cp-danger)"
}
};
var StatusPill = (0, import_vue4.defineComponent)({
name: "StatusPill",
props: {
label: {
type: String,
default: ""
},
variant: {
type: String,
default: "neutral"
}
},
setup(props, { slots }) {
return () => {
const variant = variantStyles2[props.variant] ?? variantStyles2.neutral;
const content = slots.default ? slots.default() : props.label;
return (0, import_vue4.h)(
"span",
{
style: {
display: "inline-flex",
alignItems: "center",
padding: "var(--cp-space-1) var(--cp-space-2)",
gap: "var(--cp-space-1)",
borderRadius: "var(--cp-radius-pill)",
border: `1px solid ${variant.border}`,
background: variant.background,
color: variant.color,
fontSize: "12px",
lineHeight: "1.2",
fontWeight: 500
}
},
content
);
};
}
});
// src/components/ToastMessage.ts
var import_vue5 = require("vue");
var variantStyles3 = {
info: {
background: "var(--cp-info-soft)",
border: "var(--cp-info-border)",
color: "var(--cp-info)"
},
success: {
background: "var(--cp-success-soft)",
border: "var(--cp-success-border)",
color: "var(--cp-success)"
},
warning: {
background: "var(--cp-warning-soft)",
border: "var(--cp-warning-border)",
color: "var(--cp-warning)"
},
danger: {
background: "var(--cp-danger-soft)",
border: "var(--cp-danger-border)",
color: "var(--cp-danger)"
}
};
var ToastMessage = (0, import_vue5.defineComponent)({
name: "ToastMessage",
props: {
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
variant: {
type: String,
default: "info"
},
closable: {
type: Boolean,
default: false
}
},
emits: ["close"],
setup(props, { emit, slots }) {
const isVisible = (0, import_vue5.ref)(true);
return () => {
if (!isVisible.value) return null;
const variant = variantStyles3[props.variant] ?? variantStyles3.info;
const body = slots.default ? slots.default() : props.message;
return (0, import_vue5.h)(
"div",
{
style: {
display: "flex",
alignItems: "flex-start",
gap: "8px",
padding: "var(--cp-space-2) var(--cp-space-3)",
borderRadius: "var(--cp-radius-md)",
border: `1px solid ${variant.border}`,
background: variant.background,
color: variant.color
},
role: "status",
"aria-live": "polite"
},
[
props.title ? (0, import_vue5.h)(
"strong",
{ style: { fontWeight: 600, flexShrink: 0, lineHeight: "18px" } },
props.title
) : null,
(0, import_vue5.h)(
"span",
{ style: { color: "inherit", lineHeight: "18px", fontSize: "13px" } },
body
),
props.closable ? (0, import_vue5.h)(
"button",
{
type: "button",
style: {
marginLeft: "auto",
border: "none",
background: "transparent",
color: "inherit",
cursor: "pointer",
fontSize: "16px",
lineHeight: "1"
},
"aria-label": "\u5173\u95ED\u63D0\u793A",
onClick: () => {
isVisible.value = false;
emit("close");
}
},
"\xD7"
) : null
]
);
};
}
});
// src/index.ts
var uiVersion = "0.1.0";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AnnouncementBar,
EmptyState,
LoadingState,
StatusPill,
ToastMessage,
uiVersion
});
+447
-1
dist/index.mjs

@@ -0,5 +1,451 @@

// src/components/AnnouncementBar.ts
import { computed, defineComponent, h, ref } from "vue";
var variantStyles = {
info: {
background: "var(--cp-info-soft)",
border: "var(--cp-info-border)",
color: "var(--cp-info)"
},
success: {
background: "var(--cp-success-soft)",
border: "var(--cp-success-border)",
color: "var(--cp-success)"
},
warning: {
background: "var(--cp-warning-soft)",
border: "var(--cp-warning-border)",
color: "var(--cp-warning)"
}
};
var AnnouncementBar = defineComponent({
name: "AnnouncementBar",
props: {
title: {
type: String,
default: "\u516C\u544A"
},
message: {
type: String,
default: ""
},
variant: {
type: String,
default: "info"
},
closable: {
type: Boolean,
default: false
}
},
emits: ["close"],
setup(props, { emit, slots }) {
const isVisible = ref(true);
const styles = computed(() => {
const variant = variantStyles[props.variant] ?? variantStyles.info;
return {
display: "flex",
alignItems: "flex-start",
gap: "12px",
padding: "12px 16px",
borderRadius: "10px",
border: `1px solid ${variant.border}`,
background: variant.background,
color: variant.color
};
});
const closeButtonStyles = {
marginLeft: "auto",
border: "none",
background: "transparent",
color: "inherit",
cursor: "pointer",
fontSize: "18px",
lineHeight: "1"
};
return () => isVisible.value ? h(
"section",
{ style: styles.value, role: "status" },
[
h(
"strong",
{ style: { fontWeight: 600, flexShrink: 0, lineHeight: "20px" } },
props.title
),
h(
"span",
{ style: { color: "inherit", lineHeight: "20px", fontSize: "14px" } },
slots.default ? slots.default() : props.message
),
props.closable ? h(
"button",
{
type: "button",
style: closeButtonStyles,
"aria-label": "\u5173\u95ED\u516C\u544A",
onClick: () => {
isVisible.value = false;
emit("close");
}
},
"\xD7"
) : null
]
) : null;
}
});
// src/components/EmptyState.ts
import { defineComponent as defineComponent2, h as h2 } from "vue";
var EmptyState = defineComponent2({
name: "EmptyState",
props: {
title: {
type: String,
default: "\u6682\u65E0\u6570\u636E"
},
description: {
type: String,
default: ""
},
actionLabel: {
type: String,
default: ""
},
compact: {
type: Boolean,
default: false
}
},
emits: ["action"],
setup(props, { emit, slots }) {
return () => {
const content = slots.default ? slots.default() : props.title;
const hasAction = Boolean(props.actionLabel);
return h2(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: props.compact ? "6px" : "10px",
padding: props.compact ? "var(--cp-space-2) 0" : "var(--cp-space-4) var(--cp-space-3)",
textAlign: "center",
color: "var(--cp-ink-muted)"
},
role: "status",
"aria-live": "polite"
},
[
slots.icon ? h2(
"div",
{ style: { fontSize: "28px", color: "var(--cp-ink-muted)" } },
slots.icon()
) : h2("span", {
style: {
width: "40px",
height: "40px",
borderRadius: "50%",
border: "1px dashed var(--cp-border)",
display: "inline-flex",
alignItems: "center",
justifyContent: "center"
}
}),
h2(
"strong",
{
style: {
fontSize: "14px",
fontWeight: 600,
color: "var(--cp-ink)"
}
},
content
),
props.description ? h2(
"span",
{ style: { fontSize: "12px", color: "var(--cp-ink-muted)" } },
props.description
) : null,
hasAction ? h2(
"button",
{
type: "button",
style: {
marginTop: "4px",
padding: "6px 12px",
borderRadius: "var(--cp-radius-pill)",
border: "1px solid var(--cp-border)",
background: "var(--cp-surface)",
color: "var(--cp-ink)",
cursor: "pointer",
fontSize: "12px"
},
onClick: () => emit("action")
},
props.actionLabel
) : null
]
);
};
}
});
// src/components/LoadingState.ts
import { defineComponent as defineComponent3, h as h3 } from "vue";
var LoadingState = defineComponent3({
name: "LoadingState",
props: {
label: {
type: String,
default: "\u52A0\u8F7D\u4E2D..."
},
size: {
type: Number,
default: 28
}
},
setup(props) {
return () => h3(
"div",
{
style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "8px",
padding: "var(--cp-space-3)",
color: "var(--cp-ink-muted)"
},
role: "status",
"aria-live": "polite"
},
[
h3(
"svg",
{
width: props.size,
height: props.size,
viewBox: "0 0 50 50",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
},
[
h3(
"circle",
{
cx: "25",
cy: "25",
r: "20",
stroke: "var(--cp-ink-muted)",
strokeWidth: "4",
strokeLinecap: "round",
strokeDasharray: "90 30"
},
[
h3("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 25 25",
to: "360 25 25",
dur: "1s",
repeatCount: "indefinite"
})
]
)
]
),
props.label ? h3(
"span",
{ style: { fontSize: "12px", color: "var(--cp-ink-muted)" } },
props.label
) : null
]
);
}
});
// src/components/StatusPill.ts
import { defineComponent as defineComponent4, h as h4 } from "vue";
var variantStyles2 = {
neutral: {
background: "var(--cp-surface-muted)",
border: "var(--cp-border)",
color: "var(--cp-ink-subtle)"
},
info: {
background: "var(--cp-info-soft)",
border: "var(--cp-info-border)",
color: "var(--cp-info)"
},
success: {
background: "var(--cp-success-soft)",
border: "var(--cp-success-border)",
color: "var(--cp-success)"
},
warning: {
background: "var(--cp-warning-soft)",
border: "var(--cp-warning-border)",
color: "var(--cp-warning)"
},
danger: {
background: "var(--cp-danger-soft)",
border: "var(--cp-danger-border)",
color: "var(--cp-danger)"
}
};
var StatusPill = defineComponent4({
name: "StatusPill",
props: {
label: {
type: String,
default: ""
},
variant: {
type: String,
default: "neutral"
}
},
setup(props, { slots }) {
return () => {
const variant = variantStyles2[props.variant] ?? variantStyles2.neutral;
const content = slots.default ? slots.default() : props.label;
return h4(
"span",
{
style: {
display: "inline-flex",
alignItems: "center",
padding: "var(--cp-space-1) var(--cp-space-2)",
gap: "var(--cp-space-1)",
borderRadius: "var(--cp-radius-pill)",
border: `1px solid ${variant.border}`,
background: variant.background,
color: variant.color,
fontSize: "12px",
lineHeight: "1.2",
fontWeight: 500
}
},
content
);
};
}
});
// src/components/ToastMessage.ts
import { defineComponent as defineComponent5, h as h5, ref as ref2 } from "vue";
var variantStyles3 = {
info: {
background: "var(--cp-info-soft)",
border: "var(--cp-info-border)",
color: "var(--cp-info)"
},
success: {
background: "var(--cp-success-soft)",
border: "var(--cp-success-border)",
color: "var(--cp-success)"
},
warning: {
background: "var(--cp-warning-soft)",
border: "var(--cp-warning-border)",
color: "var(--cp-warning)"
},
danger: {
background: "var(--cp-danger-soft)",
border: "var(--cp-danger-border)",
color: "var(--cp-danger)"
}
};
var ToastMessage = defineComponent5({
name: "ToastMessage",
props: {
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
variant: {
type: String,
default: "info"
},
closable: {
type: Boolean,
default: false
}
},
emits: ["close"],
setup(props, { emit, slots }) {
const isVisible = ref2(true);
return () => {
if (!isVisible.value) return null;
const variant = variantStyles3[props.variant] ?? variantStyles3.info;
const body = slots.default ? slots.default() : props.message;
return h5(
"div",
{
style: {
display: "flex",
alignItems: "flex-start",
gap: "8px",
padding: "var(--cp-space-2) var(--cp-space-3)",
borderRadius: "var(--cp-radius-md)",
border: `1px solid ${variant.border}`,
background: variant.background,
color: variant.color
},
role: "status",
"aria-live": "polite"
},
[
props.title ? h5(
"strong",
{ style: { fontWeight: 600, flexShrink: 0, lineHeight: "18px" } },
props.title
) : null,
h5(
"span",
{ style: { color: "inherit", lineHeight: "18px", fontSize: "13px" } },
body
),
props.closable ? h5(
"button",
{
type: "button",
style: {
marginLeft: "auto",
border: "none",
background: "transparent",
color: "inherit",
cursor: "pointer",
fontSize: "16px",
lineHeight: "1"
},
"aria-label": "\u5173\u95ED\u63D0\u793A",
onClick: () => {
isVisible.value = false;
emit("close");
}
},
"\xD7"
) : null
]
);
};
}
});
// src/index.ts
var uiVersion = "0.0.0";
var uiVersion = "0.1.0";
export {
AnnouncementBar,
EmptyState,
LoadingState,
StatusPill,
ToastMessage,
uiVersion
};
+15
-2
package.json
{
"name": "@cherryport/ui",
"version": "0.1.0",
"version": "0.2.0",
"repository": {
"type": "git",
"url": "https://github.com/cherryport/cherry.git",
"directory": "packages/ui"
},
"license": "MIT",

@@ -16,4 +21,12 @@ "main": "dist/index.js",

"require": "./dist/index.js"
},
"./uni": {
"types": "./dist/uni/index.d.ts",
"import": "./dist/uni/index.mjs",
"require": "./dist/uni/index.js"
}
},
"peerDependencies": {
"vue": "^3.5.24"
},
"publishConfig": {

@@ -23,4 +36,4 @@ "access": "public"

"scripts": {
"build": "tsup src/index.ts --format cjs,esm --dts --clean"
"build": "tsup src/index.ts src/uni/index.ts --format cjs,esm --dts --clean"
}
}