@lumen-design/badge 0.0.2

package/dist/Badge.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface BadgeProps {
+        value?: string | number
+        max?: number
+        isDot?: boolean
+        hidden?: boolean
+        type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+        children?: Snippet
+        class?: string
+    }
+
+    let { value, max, isDot = false, hidden = false, type = 'danger', children, class: cls = '', ...attrs }: BadgeProps = $props()
+
+    const classes = $derived(cls ? `lm-badge ${cls}` : 'lm-badge')
+
+    const contentClasses = $derived(isDot ? `lm-badge__content lm-badge__content--${type} is-dot` : `lm-badge__content lm-badge__content--${type}`)
+
+    const displayValue = $derived.by(() => {
+        if (isDot || value == null) return ''
+
+        const maxNum = typeof max === 'number' ? max : undefined
+
+        let valNum: number | undefined
+        if (typeof value === 'number') {
+            valNum = value
+        } else if (typeof value === 'string') {
+            const n = Number(value)
+            if (!Number.isNaN(n)) valNum = n
+        }
+
+        if (maxNum !== undefined && valNum !== undefined && valNum > maxNum) {
+            return `${maxNum}+`
+        }
+
+        return String(value)
+    })
+</script>
+
+<div {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+
+    {#if !hidden}
+        <sup class={contentClasses} aria-hidden={isDot || undefined}>
+            {#if !isDot}
+                {displayValue}
+            {/if}
+        </sup>
+    {/if}
+</div>

package/dist/Badge.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface BadgeProps {
+    value?: string | number;
+    max?: number;
+    isDot?: boolean;
+    hidden?: boolean;
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    children?: Snippet;
+    class?: string;
+}
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Badge from './Badge.svelte';
+export { Badge };
+export type { BadgeProps, BadgeType } from './types';
+export default Badge;

package/dist/index.js

@@ -0,0 +1,3 @@
+import Badge from './Badge.svelte';
+export { Badge };
+export default Badge;

package/dist/types.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/** Badge 类型 */
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+/** Badge 属性 */
+export interface BadgeProps {
+    /** 显示值 */
+    value?: string | number;
+    /** 最大值 */
+    max?: number;
+    /** 是否显示小圆点 */
+    isDot?: boolean;
+    /** 是否隐藏 */
+    hidden?: boolean;
+    /** 类型 */
+    type?: BadgeType;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lumen-design/badge",
+  "version": "0.0.2",
+  "description": "Badge component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}