@nanahoshi/mona-ui 0.2.1 → 0.3.0
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.
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { computed, input, Directive, Component } from '@angular/core';
|
|
3
|
+
import { twMerge } from 'tailwind-merge';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
|
|
6
|
+
const labelComponentThemeVariants = cva(`
|
|
7
|
+
inline-flex
|
|
8
|
+
flex-col
|
|
9
|
+
gap-1.5
|
|
10
|
+
text-sm
|
|
11
|
+
font-medium
|
|
12
|
+
leading-none
|
|
13
|
+
text-foreground
|
|
14
|
+
`);
|
|
15
|
+
const labelDirectiveThemeVariants = cva(`
|
|
16
|
+
text-sm
|
|
17
|
+
font-medium
|
|
18
|
+
leading-none
|
|
19
|
+
text-foreground
|
|
20
|
+
`);
|
|
21
|
+
const labelCaptionThemeVariants = cva(`
|
|
22
|
+
inline-flex
|
|
23
|
+
items-baseline
|
|
24
|
+
`);
|
|
25
|
+
const labelOptionalThemeVariants = cva(`
|
|
26
|
+
ms-1
|
|
27
|
+
text-xs
|
|
28
|
+
font-normal
|
|
29
|
+
text-muted-foreground
|
|
30
|
+
`);
|
|
31
|
+
|
|
32
|
+
function getLabelForAttribute(target) {
|
|
33
|
+
return typeof target === "string" ? target : null;
|
|
34
|
+
}
|
|
35
|
+
function focusLabelTarget(target, event) {
|
|
36
|
+
if (event.defaultPrevented || target === null || target === undefined || typeof target === "string") {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
target.focus();
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
class LabelDirective {
|
|
43
|
+
constructor() {
|
|
44
|
+
this.classes = computed(() => twMerge(labelDirectiveThemeVariants(), this.userClass()), /* @ts-ignore */
|
|
45
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
46
|
+
this.forAttribute = computed(() => getLabelForAttribute(this.for()), /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "forAttribute" }] : /* istanbul ignore next */ []));
|
|
48
|
+
/**
|
|
49
|
+
* @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
|
|
50
|
+
* String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
|
|
51
|
+
* @default undefined
|
|
52
|
+
*/
|
|
53
|
+
this.for = input(undefined, /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
|
|
55
|
+
/**
|
|
56
|
+
* @description Additional CSS classes merged onto the native label element via `tailwind-merge`.
|
|
57
|
+
* @default ""
|
|
58
|
+
*/
|
|
59
|
+
this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
|
|
60
|
+
}
|
|
61
|
+
onLabelClick(event) {
|
|
62
|
+
focusLabelTarget(this.for(), event);
|
|
63
|
+
}
|
|
64
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
65
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: LabelDirective, isStandalone: true, selector: "label[monaLabel]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onLabelClick($event)" }, properties: { "attr.for": "forAttribute()", "class": "classes()" } }, ngImport: i0 }); }
|
|
66
|
+
}
|
|
67
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelDirective, decorators: [{
|
|
68
|
+
type: Directive,
|
|
69
|
+
args: [{
|
|
70
|
+
selector: "label[monaLabel]",
|
|
71
|
+
host: {
|
|
72
|
+
"[attr.for]": "forAttribute()",
|
|
73
|
+
"[class]": "classes()",
|
|
74
|
+
"(click)": "onLabelClick($event)"
|
|
75
|
+
}
|
|
76
|
+
}]
|
|
77
|
+
}], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
78
|
+
|
|
79
|
+
class LabelComponent {
|
|
80
|
+
constructor() {
|
|
81
|
+
this.captionClasses = labelCaptionThemeVariants();
|
|
82
|
+
this.classes = computed(() => twMerge(labelComponentThemeVariants(), this.userClass()), /* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
84
|
+
this.forAttribute = computed(() => getLabelForAttribute(this.for()), /* @ts-ignore */
|
|
85
|
+
...(ngDevMode ? [{ debugName: "forAttribute" }] : /* istanbul ignore next */ []));
|
|
86
|
+
this.optionalClasses = labelOptionalThemeVariants();
|
|
87
|
+
/**
|
|
88
|
+
* @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
|
|
89
|
+
* String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
|
|
90
|
+
* @default undefined
|
|
91
|
+
*/
|
|
92
|
+
this.for = input(undefined, /* @ts-ignore */
|
|
93
|
+
...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
|
|
94
|
+
/**
|
|
95
|
+
* @description Whether to display optional-field text next to the caption.
|
|
96
|
+
* @default false
|
|
97
|
+
*/
|
|
98
|
+
this.optional = input(false, /* @ts-ignore */
|
|
99
|
+
...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
|
|
100
|
+
/**
|
|
101
|
+
* @description Text displayed when `optional` is enabled.
|
|
102
|
+
* @default "Optional"
|
|
103
|
+
*/
|
|
104
|
+
this.optionalText = input("Optional", /* @ts-ignore */
|
|
105
|
+
...(ngDevMode ? [{ debugName: "optionalText" }] : /* istanbul ignore next */ []));
|
|
106
|
+
/**
|
|
107
|
+
* @description Visible label caption text.
|
|
108
|
+
* @default ""
|
|
109
|
+
*/
|
|
110
|
+
this.text = input("", /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
112
|
+
/**
|
|
113
|
+
* @description Additional CSS classes merged onto the rendered `<label>` element via `tailwind-merge`.
|
|
114
|
+
* @default ""
|
|
115
|
+
*/
|
|
116
|
+
this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
|
|
117
|
+
}
|
|
118
|
+
onLabelClick(event) {
|
|
119
|
+
focusLabelTarget(this.for(), event);
|
|
120
|
+
}
|
|
121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LabelComponent, isStandalone: true, selector: "mona-label", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, optionalText: { classPropertyName: "optionalText", publicName: "optionalText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block" }, ngImport: i0, template: `
|
|
123
|
+
<label
|
|
124
|
+
[attr.for]="forAttribute()"
|
|
125
|
+
[class]="classes()"
|
|
126
|
+
[attr.data-optional]="optional() || null"
|
|
127
|
+
(click)="onLabelClick($event)">
|
|
128
|
+
@if (text() || optional()) {
|
|
129
|
+
<span [class]="captionClasses">
|
|
130
|
+
@if (text()) {
|
|
131
|
+
<span>{{ text() }}</span>
|
|
132
|
+
}
|
|
133
|
+
@if (optional()) {
|
|
134
|
+
<span [class]="optionalClasses">{{ optionalText() }}</span>
|
|
135
|
+
}
|
|
136
|
+
</span>
|
|
137
|
+
}
|
|
138
|
+
<ng-content></ng-content>
|
|
139
|
+
</label>
|
|
140
|
+
`, isInline: true }); }
|
|
141
|
+
}
|
|
142
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LabelComponent, decorators: [{
|
|
143
|
+
type: Component,
|
|
144
|
+
args: [{
|
|
145
|
+
selector: "mona-label",
|
|
146
|
+
template: `
|
|
147
|
+
<label
|
|
148
|
+
[attr.for]="forAttribute()"
|
|
149
|
+
[class]="classes()"
|
|
150
|
+
[attr.data-optional]="optional() || null"
|
|
151
|
+
(click)="onLabelClick($event)">
|
|
152
|
+
@if (text() || optional()) {
|
|
153
|
+
<span [class]="captionClasses">
|
|
154
|
+
@if (text()) {
|
|
155
|
+
<span>{{ text() }}</span>
|
|
156
|
+
}
|
|
157
|
+
@if (optional()) {
|
|
158
|
+
<span [class]="optionalClasses">{{ optionalText() }}</span>
|
|
159
|
+
}
|
|
160
|
+
</span>
|
|
161
|
+
}
|
|
162
|
+
<ng-content></ng-content>
|
|
163
|
+
</label>
|
|
164
|
+
`,
|
|
165
|
+
host: {
|
|
166
|
+
class: "inline-block"
|
|
167
|
+
}
|
|
168
|
+
}]
|
|
169
|
+
}], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], optionalText: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalText", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
|
|
170
|
+
|
|
171
|
+
/*
|
|
172
|
+
* Public API Surface of @nanahoshi/mona-ui/label
|
|
173
|
+
*/
|
|
174
|
+
|
|
175
|
+
/**
|
|
176
|
+
* Generated bundle index. Do not edit.
|
|
177
|
+
*/
|
|
178
|
+
|
|
179
|
+
export { LabelComponent, LabelDirective };
|
|
180
|
+
//# sourceMappingURL=nanahoshi-mona-ui-label.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nanahoshi/mona-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "A very light Angular UI framework",
|
|
5
5
|
"author": "Nanahoshi",
|
|
6
6
|
"repository": {
|
|
@@ -189,6 +189,10 @@
|
|
|
189
189
|
"types": "./types/nanahoshi-mona-ui-internal-tree.d.ts",
|
|
190
190
|
"default": "./fesm2022/nanahoshi-mona-ui-internal-tree.mjs"
|
|
191
191
|
},
|
|
192
|
+
"./label": {
|
|
193
|
+
"types": "./types/nanahoshi-mona-ui-label.d.ts",
|
|
194
|
+
"default": "./fesm2022/nanahoshi-mona-ui-label.mjs"
|
|
195
|
+
},
|
|
192
196
|
"./list": {
|
|
193
197
|
"types": "./types/nanahoshi-mona-ui-list.d.ts",
|
|
194
198
|
"default": "./fesm2022/nanahoshi-mona-ui-list.mjs"
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
|
|
3
|
+
interface LabelFocusable {
|
|
4
|
+
focus(options?: FocusOptions): void;
|
|
5
|
+
}
|
|
6
|
+
type LabelTarget = string | LabelFocusable | null | undefined;
|
|
7
|
+
|
|
8
|
+
declare class LabelDirective {
|
|
9
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
10
|
+
protected readonly forAttribute: _angular_core.Signal<string | null>;
|
|
11
|
+
/**
|
|
12
|
+
* @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
|
|
13
|
+
* String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
|
|
14
|
+
* @default undefined
|
|
15
|
+
*/
|
|
16
|
+
readonly for: _angular_core.InputSignal<LabelTarget>;
|
|
17
|
+
/**
|
|
18
|
+
* @description Additional CSS classes merged onto the native label element via `tailwind-merge`.
|
|
19
|
+
* @default ""
|
|
20
|
+
*/
|
|
21
|
+
readonly userClass: _angular_core.InputSignal<string>;
|
|
22
|
+
protected onLabelClick(event: MouseEvent): void;
|
|
23
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelDirective, never>;
|
|
24
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LabelDirective, "label[monaLabel]", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare class LabelComponent {
|
|
28
|
+
protected readonly captionClasses: string;
|
|
29
|
+
protected readonly classes: _angular_core.Signal<string>;
|
|
30
|
+
protected readonly forAttribute: _angular_core.Signal<string | null>;
|
|
31
|
+
protected readonly optionalClasses: string;
|
|
32
|
+
/**
|
|
33
|
+
* @description Associates the label with a native control ID or a target that exposes a public `focus()` method.
|
|
34
|
+
* String values are reflected as the native `for` attribute. Object targets receive focus when the label is clicked.
|
|
35
|
+
* @default undefined
|
|
36
|
+
*/
|
|
37
|
+
readonly for: _angular_core.InputSignal<LabelTarget>;
|
|
38
|
+
/**
|
|
39
|
+
* @description Whether to display optional-field text next to the caption.
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
42
|
+
readonly optional: _angular_core.InputSignal<boolean>;
|
|
43
|
+
/**
|
|
44
|
+
* @description Text displayed when `optional` is enabled.
|
|
45
|
+
* @default "Optional"
|
|
46
|
+
*/
|
|
47
|
+
readonly optionalText: _angular_core.InputSignal<string>;
|
|
48
|
+
/**
|
|
49
|
+
* @description Visible label caption text.
|
|
50
|
+
* @default ""
|
|
51
|
+
*/
|
|
52
|
+
readonly text: _angular_core.InputSignal<string>;
|
|
53
|
+
/**
|
|
54
|
+
* @description Additional CSS classes merged onto the rendered `<label>` element via `tailwind-merge`.
|
|
55
|
+
* @default ""
|
|
56
|
+
*/
|
|
57
|
+
readonly userClass: _angular_core.InputSignal<string>;
|
|
58
|
+
protected onLabelClick(event: MouseEvent): void;
|
|
59
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LabelComponent, never>;
|
|
60
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LabelComponent, "mona-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "optionalText": { "alias": "optionalText"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export { LabelComponent, LabelDirective };
|
|
64
|
+
export type { LabelFocusable, LabelTarget };
|