@xui/status 2.0.0-alpha.19 → 2.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/xui-status.mjs +13 -0
- package/fesm2022/xui-status.mjs.map +1 -1
- package/package.json +2 -2
- package/types/xui-status.d.ts +13 -0
package/fesm2022/xui-status.mjs
CHANGED
|
@@ -32,13 +32,26 @@ const CLIP_PATHS = {
|
|
|
32
32
|
dnd: 'M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 M0.78,0.603 H0.22 a0.103,0.103,0,0,1,0,-0.205 H0.78 a0.103,0.103,0,1,1,0,0.205',
|
|
33
33
|
offline: 'M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 m0,0.76 A0.26,0.26,0,1,1,0.76,0.5 A0.26,0.26,0,0,1,0.5,0.76'
|
|
34
34
|
};
|
|
35
|
+
/**
|
|
36
|
+
* A presence dot — the badge that says whether someone is online.
|
|
37
|
+
*
|
|
38
|
+
* ```html
|
|
39
|
+
* <xui-status presence="online" size="sm" />
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* Each presence beyond `online` is cut from the same circle with a `clip-path` rather than drawn as a
|
|
43
|
+
* separate glyph, so the shape reads at any size and still tints from a single background colour.
|
|
44
|
+
* Decorative on its own: pair it with text when the state has to be announced.
|
|
45
|
+
*/
|
|
35
46
|
class XuiStatus {
|
|
36
47
|
config = injectXuiStatusConfig();
|
|
37
48
|
/** The user-defined classes */
|
|
38
49
|
class = input('', /* @ts-ignore */
|
|
39
50
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
51
|
+
/** Which state to show. Each one carries both its own colour and its own cut-out shape. */
|
|
40
52
|
presence = input(this.config.presence, /* @ts-ignore */
|
|
41
53
|
...(ngDevMode ? [{ debugName: "presence" }] : /* istanbul ignore next */ []));
|
|
54
|
+
/** Diameter of the dot, from the shared control scale. */
|
|
42
55
|
size = input(this.config.size, /* @ts-ignore */
|
|
43
56
|
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
44
57
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-status.mjs","sources":["../../../../../../libs/ui/status/xui/src/lib/status.token.ts","../../../../../../libs/ui/status/xui/src/lib/status.ts","../../../../../../libs/ui/status/xui/src/index.ts","../../../../../../libs/ui/status/xui/src/xui-status.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport { XuiStatusVariants } from './status';\n\nexport interface XuiStatusConfig {\n presence: XuiStatusVariants['presence'];\n size: XuiStatusVariants['size'];\n}\n\nexport const [injectXuiStatusConfig, provideXuiStatusConfig] = createXConfigToken<XuiStatusConfig>('XuiStatusConfig', {\n presence: 'offline',\n size: 'md'\n});\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiStatusConfig } from './status.token';\n\nexport const statusVariants = cva(['inline-flex aspect-square rounded-[50%]'], {\n variants: {\n presence: {\n online: 'bg-success',\n idle: 'bg-warning',\n dnd: 'bg-error',\n offline: 'bg-foreground-subtle'\n },\n size: {\n sm: 'w-3',\n md: 'w-4',\n lg: 'w-6'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n});\n\nexport type XuiStatusVariants = VariantProps<typeof statusVariants>;\n\nconst CLIP_PATHS: Partial<Record<NonNullable<XuiStatusVariants['presence']> & string, string>> = {\n idle: 'M0.564,0 A0.399,0.399,0,1,1,0,0.564 A0.502,0.502,0,1,0,0.564,0',\n dnd: 'M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 M0.78,0.603 H0.22 a0.103,0.103,0,0,1,0,-0.205 H0.78 a0.103,0.103,0,1,1,0,0.205',\n offline:\n 'M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 m0,0.76 A0.26,0.26,0,1,1,0.76,0.5 A0.26,0.26,0,0,1,0.5,0.76'\n};\n\n@Component({\n selector: 'xui-status',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `\n @if (clipPath(); as clip) {\n <svg width=\"0\" height=\"0\" aria-hidden=\"true\">\n <clipPath [attr.id]=\"clip.id\" clipPathUnits=\"objectBoundingBox\">\n <path [attr.d]=\"clip.d\" />\n </clipPath>\n </svg>\n }\n `,\n host: {\n '[class]': 'computedClass()',\n '[style.clip-path]': 'computedStyle()'\n }\n})\nexport class XuiStatus {\n private readonly config = injectXuiStatusConfig();\n\n /** The user-defined classes */\n readonly class = input<ClassValue>('');\n readonly presence = input<XuiStatusVariants['presence']>(this.config.presence);\n readonly size = input<XuiStatusVariants['size']>(this.config.size);\n\n /**\n * DOM ids must be unique, so each instance defines its own clip path rather\n * than sharing fixed ids across every status dot on the page.\n */\n private readonly instanceId = uniqueId('xui-status');\n\n /** The classes to apply to the component merged with the user-defined classes */\n protected readonly computedClass = computed(() =>\n xui(statusVariants({ presence: this.presence(), size: this.size() }), this.class())\n );\n\n protected readonly clipPath = computed(() => {\n const presence = this.presence();\n const d = presence ? CLIP_PATHS[presence] : undefined;\n return d ? { id: `${this.instanceId}-${presence}`, d } : null;\n });\n\n protected readonly computedStyle = computed(() => {\n const clip = this.clipPath();\n return clip ? `url(#${clip.id})` : null;\n });\n}\n","import { XuiStatus } from './lib/status';\nexport * from './lib/status';\nexport * from './lib/status.token';\n\nexport const XuiStatusImports = [XuiStatus] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,CAAC,qBAAqB,EAAE,sBAAsB,CAAC,GAAG,kBAAkB,CAAkB,iBAAiB,EAAE;AACpH,IAAA,QAAQ,EAAE,SAAS;AACnB,IAAA,IAAI,EAAE;AACP,CAAA;;MCJY,cAAc,GAAG,GAAG,CAAC,CAAC,yCAAyC,CAAC,EAAE;AAC7E,IAAA,QAAQ,EAAE;AACR,QAAA,QAAQ,EAAE;AACR,YAAA,MAAM,EAAE,YAAY;AACpB,YAAA,IAAI,EAAE,YAAY;AAClB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE;AACV,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,EAAE,EAAE;AACL;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE;AACP;AACF,CAAA;AAID,MAAM,UAAU,GAAiF;AAC/F,IAAA,IAAI,EAAE,gEAAgE;AACtE,IAAA,GAAG,EAAE,mIAAmI;AACxI,IAAA,OAAO,EACL;CACH;
|
|
1
|
+
{"version":3,"file":"xui-status.mjs","sources":["../../../../../../libs/ui/status/xui/src/lib/status.token.ts","../../../../../../libs/ui/status/xui/src/lib/status.ts","../../../../../../libs/ui/status/xui/src/index.ts","../../../../../../libs/ui/status/xui/src/xui-status.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport { XuiStatusVariants } from './status';\n\nexport interface XuiStatusConfig {\n presence: XuiStatusVariants['presence'];\n size: XuiStatusVariants['size'];\n}\n\nexport const [injectXuiStatusConfig, provideXuiStatusConfig] = createXConfigToken<XuiStatusConfig>('XuiStatusConfig', {\n presence: 'offline',\n size: 'md'\n});\n","import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiStatusConfig } from './status.token';\n\nexport const statusVariants = cva(['inline-flex aspect-square rounded-[50%]'], {\n variants: {\n presence: {\n online: 'bg-success',\n idle: 'bg-warning',\n dnd: 'bg-error',\n offline: 'bg-foreground-subtle'\n },\n size: {\n sm: 'w-3',\n md: 'w-4',\n lg: 'w-6'\n }\n },\n defaultVariants: {\n size: 'md'\n }\n});\n\nexport type XuiStatusVariants = VariantProps<typeof statusVariants>;\n\nconst CLIP_PATHS: Partial<Record<NonNullable<XuiStatusVariants['presence']> & string, string>> = {\n idle: 'M0.564,0 A0.399,0.399,0,1,1,0,0.564 A0.502,0.502,0,1,0,0.564,0',\n dnd: 'M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 M0.78,0.603 H0.22 a0.103,0.103,0,0,1,0,-0.205 H0.78 a0.103,0.103,0,1,1,0,0.205',\n offline:\n 'M0.5,0 a0.5,0.5,0,1,0,0.5,0.5 A0.5,0.5,0,0,0,0.5,0 m0,0.76 A0.26,0.26,0,1,1,0.76,0.5 A0.26,0.26,0,0,1,0.5,0.76'\n};\n\n/**\n * A presence dot — the badge that says whether someone is online.\n *\n * ```html\n * <xui-status presence=\"online\" size=\"sm\" />\n * ```\n *\n * Each presence beyond `online` is cut from the same circle with a `clip-path` rather than drawn as a\n * separate glyph, so the shape reads at any size and still tints from a single background colour.\n * Decorative on its own: pair it with text when the state has to be announced.\n */\n@Component({\n selector: 'xui-status',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n template: `\n @if (clipPath(); as clip) {\n <svg width=\"0\" height=\"0\" aria-hidden=\"true\">\n <clipPath [attr.id]=\"clip.id\" clipPathUnits=\"objectBoundingBox\">\n <path [attr.d]=\"clip.d\" />\n </clipPath>\n </svg>\n }\n `,\n host: {\n '[class]': 'computedClass()',\n '[style.clip-path]': 'computedStyle()'\n }\n})\nexport class XuiStatus {\n private readonly config = injectXuiStatusConfig();\n\n /** The user-defined classes */\n readonly class = input<ClassValue>('');\n /** Which state to show. Each one carries both its own colour and its own cut-out shape. */\n readonly presence = input<XuiStatusVariants['presence']>(this.config.presence);\n /** Diameter of the dot, from the shared control scale. */\n readonly size = input<XuiStatusVariants['size']>(this.config.size);\n\n /**\n * DOM ids must be unique, so each instance defines its own clip path rather\n * than sharing fixed ids across every status dot on the page.\n */\n private readonly instanceId = uniqueId('xui-status');\n\n /** The classes to apply to the component merged with the user-defined classes */\n protected readonly computedClass = computed(() =>\n xui(statusVariants({ presence: this.presence(), size: this.size() }), this.class())\n );\n\n protected readonly clipPath = computed(() => {\n const presence = this.presence();\n const d = presence ? CLIP_PATHS[presence] : undefined;\n return d ? { id: `${this.instanceId}-${presence}`, d } : null;\n });\n\n protected readonly computedStyle = computed(() => {\n const clip = this.clipPath();\n return clip ? `url(#${clip.id})` : null;\n });\n}\n","import { XuiStatus } from './lib/status';\nexport * from './lib/status';\nexport * from './lib/status.token';\n\nexport const XuiStatusImports = [XuiStatus] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/status",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.21",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/core": "22",
|
|
40
|
-
"@xui/core": "2.0.0-alpha.
|
|
40
|
+
"@xui/core": "2.0.0-alpha.21",
|
|
41
41
|
"class-variance-authority": "^0.7.1",
|
|
42
42
|
"clsx": "^2.1.1"
|
|
43
43
|
},
|
package/types/xui-status.d.ts
CHANGED
|
@@ -8,11 +8,24 @@ declare const statusVariants: (props?: ({
|
|
|
8
8
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
9
9
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
10
|
type XuiStatusVariants = VariantProps<typeof statusVariants>;
|
|
11
|
+
/**
|
|
12
|
+
* A presence dot — the badge that says whether someone is online.
|
|
13
|
+
*
|
|
14
|
+
* ```html
|
|
15
|
+
* <xui-status presence="online" size="sm" />
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* Each presence beyond `online` is cut from the same circle with a `clip-path` rather than drawn as a
|
|
19
|
+
* separate glyph, so the shape reads at any size and still tints from a single background colour.
|
|
20
|
+
* Decorative on its own: pair it with text when the state has to be announced.
|
|
21
|
+
*/
|
|
11
22
|
declare class XuiStatus {
|
|
12
23
|
private readonly config;
|
|
13
24
|
/** The user-defined classes */
|
|
14
25
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
26
|
+
/** Which state to show. Each one carries both its own colour and its own cut-out shape. */
|
|
15
27
|
readonly presence: _angular_core.InputSignal<"online" | "idle" | "dnd" | "offline" | null | undefined>;
|
|
28
|
+
/** Diameter of the dot, from the shared control scale. */
|
|
16
29
|
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | null | undefined>;
|
|
17
30
|
/**
|
|
18
31
|
* DOM ids must be unique, so each instance defines its own clip path rather
|