@semantic-components/ui 0.63.0 → 0.64.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.
- package/esm2022/index.js +3 -0
- package/esm2022/index.js.map +1 -0
- package/esm2022/lib/components/button/button.js +54 -0
- package/esm2022/lib/components/button/button.js.map +1 -0
- package/esm2022/lib/components/button/index.js +2 -0
- package/esm2022/lib/components/button/index.js.map +1 -0
- package/esm2022/lib/components/index.js +3 -0
- package/esm2022/lib/components/index.js.map +1 -0
- package/esm2022/lib/components/link/index.js +2 -0
- package/esm2022/lib/components/link/index.js.map +1 -0
- package/esm2022/lib/components/link/link.js +29 -0
- package/esm2022/lib/components/link/link.js.map +1 -0
- package/esm2022/lib/utils/index.js +6 -0
- package/esm2022/lib/utils/index.js.map +1 -0
- package/esm2022/semantic-components-ui.js +5 -0
- package/esm2022/semantic-components-ui.js.map +1 -0
- package/lib/components/button/button.d.ts +17 -0
- package/lib/components/link/link.d.ts +11 -0
- package/lib/utils/index.d.ts +2 -0
- package/package.json +14 -2
- package/semantic-components-ui.d.ts +5 -0
- package/eslint.config.mjs +0 -48
- package/ng-package.json +0 -8
- package/project.json +0 -28
- package/src/lib/components/button/README.md +0 -143
- package/src/lib/components/button/button.ts +0 -69
- package/src/lib/components/link/link.ts +0 -31
- package/src/lib/utils/index.ts +0 -6
- package/tsconfig.json +0 -28
- package/tsconfig.lib.json +0 -12
- package/tsconfig.lib.prod.json +0 -7
- /package/{src/index.ts → index.d.ts} +0 -0
- /package/{src/lib/components/button/index.ts → lib/components/button/index.d.ts} +0 -0
- /package/{src/lib/components/index.ts → lib/components/index.d.ts} +0 -0
- /package/{src/lib/components/link/index.ts → lib/components/link/index.d.ts} +0 -0
package/esm2022/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC","sourcesContent":["export * from './lib/components';\nexport * from './lib/utils';\n"]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { booleanAttribute, computed, Directive, input } from '@angular/core';
|
|
2
|
+
import { cva } from 'class-variance-authority';
|
|
3
|
+
import { cn } from '../../utils';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
|
|
6
|
+
variants: {
|
|
7
|
+
variant: {
|
|
8
|
+
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
|
9
|
+
outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
10
|
+
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
11
|
+
ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
12
|
+
destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
|
|
13
|
+
link: 'text-primary underline-offset-4 hover:underline',
|
|
14
|
+
},
|
|
15
|
+
size: {
|
|
16
|
+
default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
17
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
18
|
+
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
19
|
+
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
|
|
20
|
+
icon: 'size-8',
|
|
21
|
+
'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
22
|
+
'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
|
23
|
+
'icon-lg': 'size-9',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
variant: 'default',
|
|
28
|
+
size: 'default',
|
|
29
|
+
},
|
|
30
|
+
});
|
|
31
|
+
export class ScButton {
|
|
32
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
33
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
34
|
+
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
35
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
36
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
37
|
+
class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
38
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
39
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: ScButton, isStandalone: true, selector: "button[sc-button]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "button" }, properties: { "attr.type": "type()", "disabled": "disabled()", "attr.aria-disabled": "disabled() || null", "class": "class()" } }, ngImport: i0 });
|
|
40
|
+
}
|
|
41
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScButton, decorators: [{
|
|
42
|
+
type: Directive,
|
|
43
|
+
args: [{
|
|
44
|
+
selector: 'button[sc-button]',
|
|
45
|
+
host: {
|
|
46
|
+
'data-slot': 'button',
|
|
47
|
+
'[attr.type]': 'type()',
|
|
48
|
+
'[disabled]': 'disabled()',
|
|
49
|
+
'[attr.aria-disabled]': 'disabled() || null',
|
|
50
|
+
'[class]': 'class()',
|
|
51
|
+
},
|
|
52
|
+
}]
|
|
53
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
54
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;;AAEjC,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAC/B,okBAAokB,EACpkB;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,4DAA4D;YACrE,OAAO,EACL,iLAAiL;YACnL,SAAS,EACP,iIAAiI;YACnI,KAAK,EACH,kHAAkH;YACpH,WAAW,EACT,6NAA6N;YAC/N,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EACL,sFAAsF;YACxF,EAAE,EAAE,+MAA+M;YACnN,EAAE,EAAE,yNAAyN;YAC7N,EAAE,EAAE,sFAAsF;YAC1F,IAAI,EAAE,QAAQ;YACd,SAAS,EACP,yHAAyH;YAC3H,SAAS,EACP,oFAAoF;YACtF,SAAS,EAAE,QAAQ;SACpB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC;AAcF,MAAM,OAAO,QAAQ;IACV,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAgC,QAAQ,gDAAC,CAAC;IACtD,QAAQ,GAAG,KAAK,CAAmB,KAAK,qDAC/C,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAEgB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAdS,QAAQ;2FAAR,QAAQ;;2FAAR,QAAQ;kBAVpB,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,IAAI,EAAE;wBACJ,WAAW,EAAE,QAAQ;wBACrB,aAAa,EAAE,QAAQ;wBACvB,YAAY,EAAE,YAAY;wBAC1B,sBAAsB,EAAE,oBAAoB;wBAC5C,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils';\n\nexport const buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',\n outline:\n 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',\n ghost:\n 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',\n destructive:\n 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default:\n 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',\n icon: 'size-8',\n 'icon-xs':\n \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n 'icon-sm':\n 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',\n 'icon-lg': 'size-9',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nexport type ScButtonVariants = VariantProps<typeof buttonVariants>;\n\n@Directive({\n selector: 'button[sc-button]',\n host: {\n 'data-slot': 'button',\n '[attr.type]': 'type()',\n '[disabled]': 'disabled()',\n '[attr.aria-disabled]': 'disabled() || null',\n '[class]': 'class()',\n },\n})\nexport class ScButton {\n readonly classInput = input<string>('', { alias: 'class' });\n readonly variant = input<ScButtonVariants['variant']>('default');\n readonly size = input<ScButtonVariants['size']>('default');\n readonly type = input<'button' | 'submit' | 'reset'>('button');\n readonly disabled = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n\n protected readonly class = computed(() =>\n cn(\n buttonVariants({ variant: this.variant(), size: this.size() }),\n this.classInput(),\n ),\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","sourcesContent":["export * from './button';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC","sourcesContent":["export * from './button';\nexport * from './link';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC","sourcesContent":["export * from './link';\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { booleanAttribute, computed, Directive, input } from '@angular/core';
|
|
2
|
+
import { cn } from '../../utils';
|
|
3
|
+
import { buttonVariants } from '../button';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class ScLink {
|
|
6
|
+
classInput = input('', { ...(ngDevMode ? { debugName: "classInput" } : {}), alias: 'class' });
|
|
7
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
8
|
+
size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
9
|
+
href = input('#', ...(ngDevMode ? [{ debugName: "href" }] : []));
|
|
10
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
11
|
+
class = computed(() => cn(buttonVariants({ variant: this.variant(), size: this.size() }), this.classInput()), ...(ngDevMode ? [{ debugName: "class" }] : []));
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
13
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.4", type: ScLink, isStandalone: true, selector: "a[sc-link]", inputs: { classInput: { classPropertyName: "classInput", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "link" }, properties: { "attr.href": "!disabled() ? href() : null", "attr.role": "disabled() ? \"link\" : null", "attr.aria-disabled": "disabled() || null", "attr.tabindex": "disabled() ? -1 : null", "class": "class()" } }, ngImport: i0 });
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: ScLink, decorators: [{
|
|
16
|
+
type: Directive,
|
|
17
|
+
args: [{
|
|
18
|
+
selector: 'a[sc-link]',
|
|
19
|
+
host: {
|
|
20
|
+
'data-slot': 'link',
|
|
21
|
+
'[attr.href]': '!disabled() ? href() : null',
|
|
22
|
+
'[attr.role]': 'disabled() ? "link" : null',
|
|
23
|
+
'[attr.aria-disabled]': 'disabled() || null',
|
|
24
|
+
'[attr.tabindex]': 'disabled() ? -1 : null',
|
|
25
|
+
'[class]': 'class()',
|
|
26
|
+
},
|
|
27
|
+
}]
|
|
28
|
+
}], propDecorators: { classInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
29
|
+
//# sourceMappingURL=link.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../../../../../libs/ui/src/lib/components/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,cAAc,EAAyB,MAAM,WAAW,CAAC;;AAalE,MAAM,OAAO,MAAM;IACR,UAAU,GAAG,KAAK,CAAS,EAAE,uDAAI,KAAK,EAAE,OAAO,GAAG,CAAC;IACnD,OAAO,GAAG,KAAK,CAA8B,SAAS,mDAAC,CAAC;IACxD,IAAI,GAAG,KAAK,CAA2B,SAAS,gDAAC,CAAC;IAClD,IAAI,GAAG,KAAK,CAAS,GAAG,gDAAC,CAAC;IAC1B,QAAQ,GAAG,KAAK,CAAmB,KAAK,qDAC/C,SAAS,EAAE,gBAAgB,GAC3B,CAAC;IAEgB,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CACvC,EAAE,CACA,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,EAC9D,IAAI,CAAC,UAAU,EAAE,CAClB,iDACF,CAAC;uGAdS,MAAM;2FAAN,MAAM;;2FAAN,MAAM;kBAXlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,IAAI,EAAE;wBACJ,WAAW,EAAE,MAAM;wBACnB,aAAa,EAAE,6BAA6B;wBAC5C,aAAa,EAAE,4BAA4B;wBAC3C,sBAAsB,EAAE,oBAAoB;wBAC5C,iBAAiB,EAAE,wBAAwB;wBAC3C,SAAS,EAAE,SAAS;qBACrB;iBACF","sourcesContent":["import { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport { cn } from '../../utils';\nimport { buttonVariants, type ScButtonVariants } from '../button';\n\n@Directive({\n selector: 'a[sc-link]',\n host: {\n 'data-slot': 'link',\n '[attr.href]': '!disabled() ? href() : null',\n '[attr.role]': 'disabled() ? \"link\" : null',\n '[attr.aria-disabled]': 'disabled() || null',\n '[attr.tabindex]': 'disabled() ? -1 : null',\n '[class]': 'class()',\n },\n})\nexport class ScLink {\n readonly classInput = input<string>('', { alias: 'class' });\n readonly variant = input<ScButtonVariants['variant']>('default');\n readonly size = input<ScButtonVariants['size']>('default');\n readonly href = input<string>('#');\n readonly disabled = input<boolean, unknown>(false, {\n transform: booleanAttribute,\n });\n\n protected readonly class = computed(() =>\n cn(\n buttonVariants({ variant: this.variant(), size: this.size() }),\n this.classInput(),\n ),\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../libs/ui/src/lib/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC/B,CAAC","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"semantic-components-ui.js","sourceRoot":"","sources":["../../../../libs/ui/src/semantic-components-ui.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
|
|
5
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
|
+
export type ScButtonVariants = VariantProps<typeof buttonVariants>;
|
|
8
|
+
export declare class ScButton {
|
|
9
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
10
|
+
readonly variant: import("@angular/core").InputSignal<"default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined>;
|
|
11
|
+
readonly size: import("@angular/core").InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
|
|
12
|
+
readonly type: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
|
|
13
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
14
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
15
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScButton, never>;
|
|
16
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ScButton, "button[sc-button]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
17
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
export declare class ScLink {
|
|
3
|
+
readonly classInput: import("@angular/core").InputSignal<string>;
|
|
4
|
+
readonly variant: import("@angular/core").InputSignal<"default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined>;
|
|
5
|
+
readonly size: import("@angular/core").InputSignal<"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined>;
|
|
6
|
+
readonly href: import("@angular/core").InputSignal<string>;
|
|
7
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
8
|
+
protected readonly class: import("@angular/core").Signal<string>;
|
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ScLink, never>;
|
|
10
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ScLink, "a[sc-link]", never, { "classInput": { "alias": "class"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
11
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semantic-components/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.64.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -21,7 +21,19 @@
|
|
|
21
21
|
"exports": {
|
|
22
22
|
"./styles": {
|
|
23
23
|
"default": "./src/lib/styles/index.css"
|
|
24
|
+
},
|
|
25
|
+
"./package.json": {
|
|
26
|
+
"default": "./package.json"
|
|
27
|
+
},
|
|
28
|
+
".": {
|
|
29
|
+
"types": "./semantic-components-ui.d.ts",
|
|
30
|
+
"default": "./esm2022/semantic-components-ui.js"
|
|
24
31
|
}
|
|
25
32
|
},
|
|
26
|
-
"sideEffects": false
|
|
33
|
+
"sideEffects": false,
|
|
34
|
+
"module": "esm2022/semantic-components-ui.js",
|
|
35
|
+
"typings": "semantic-components-ui.d.ts",
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"tslib": "^2.3.0"
|
|
38
|
+
}
|
|
27
39
|
}
|
package/eslint.config.mjs
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import nx from '@nx/eslint-plugin';
|
|
2
|
-
import baseConfig from '../../eslint.config.mjs';
|
|
3
|
-
|
|
4
|
-
export default [
|
|
5
|
-
...baseConfig,
|
|
6
|
-
{
|
|
7
|
-
files: ['**/*.json'],
|
|
8
|
-
rules: {
|
|
9
|
-
'@nx/dependency-checks': [
|
|
10
|
-
'error',
|
|
11
|
-
{
|
|
12
|
-
ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs,ts,cts,mts}'],
|
|
13
|
-
},
|
|
14
|
-
],
|
|
15
|
-
},
|
|
16
|
-
languageOptions: {
|
|
17
|
-
parser: await import('jsonc-eslint-parser'),
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
...nx.configs['flat/angular'],
|
|
21
|
-
...nx.configs['flat/angular-template'],
|
|
22
|
-
{
|
|
23
|
-
files: ['**/*.ts'],
|
|
24
|
-
rules: {
|
|
25
|
-
'@angular-eslint/directive-selector': [
|
|
26
|
-
'error',
|
|
27
|
-
{
|
|
28
|
-
type: 'attribute',
|
|
29
|
-
prefix: 'sc',
|
|
30
|
-
style: 'camelCase',
|
|
31
|
-
},
|
|
32
|
-
],
|
|
33
|
-
'@angular-eslint/component-selector': [
|
|
34
|
-
'error',
|
|
35
|
-
{
|
|
36
|
-
type: 'element',
|
|
37
|
-
prefix: 'sc',
|
|
38
|
-
style: 'kebab-case',
|
|
39
|
-
},
|
|
40
|
-
],
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
files: ['**/*.html'],
|
|
45
|
-
// Override or add rules here
|
|
46
|
-
rules: {},
|
|
47
|
-
},
|
|
48
|
-
];
|
package/ng-package.json
DELETED
package/project.json
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "ui",
|
|
3
|
-
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
4
|
-
"sourceRoot": "libs/ui/src",
|
|
5
|
-
"prefix": "sc",
|
|
6
|
-
"projectType": "library",
|
|
7
|
-
"tags": [],
|
|
8
|
-
"targets": {
|
|
9
|
-
"build": {
|
|
10
|
-
"executor": "@nx/angular:ng-packagr-lite",
|
|
11
|
-
"outputs": ["{workspaceRoot}/dist/{projectRoot}"],
|
|
12
|
-
"options": {
|
|
13
|
-
"project": "libs/ui/ng-package.json",
|
|
14
|
-
"tsConfig": "libs/ui/tsconfig.lib.json"
|
|
15
|
-
},
|
|
16
|
-
"configurations": {
|
|
17
|
-
"production": {
|
|
18
|
-
"tsConfig": "libs/ui/tsconfig.lib.prod.json"
|
|
19
|
-
},
|
|
20
|
-
"development": {}
|
|
21
|
-
},
|
|
22
|
-
"defaultConfiguration": "production"
|
|
23
|
-
},
|
|
24
|
-
"lint": {
|
|
25
|
-
"executor": "@nx/eslint:lint"
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
# Button
|
|
2
|
-
|
|
3
|
-
Displays a button or a component that looks like a button.
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
```html
|
|
8
|
-
<button sc-button>Click me</button>
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Directive
|
|
12
|
-
|
|
13
|
-
### ScButton
|
|
14
|
-
|
|
15
|
-
Button directive that can be applied to `button` or `a` elements.
|
|
16
|
-
|
|
17
|
-
**Selector:** `button[sc-button], a[sc-button]`
|
|
18
|
-
|
|
19
|
-
**Inputs:**
|
|
20
|
-
|
|
21
|
-
| Input | Type | Default | Description |
|
|
22
|
-
| ---------- | --------------------------------- | ----------- | ------------------------------------------------------------ |
|
|
23
|
-
| `variant` | `ButtonVariant` | `'default'` | Visual style variant |
|
|
24
|
-
| `size` | `ButtonSize` | `'default'` | Size of the button |
|
|
25
|
-
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Button type attribute (only applied to `<button>` elements) |
|
|
26
|
-
| `href` | `string` | `'#'` | Href attribute (only applied to `<a>` elements, overridable) |
|
|
27
|
-
| `disabled` | `boolean` | `false` | Disables the button (sets `aria-disabled`) |
|
|
28
|
-
| `class` | `string` | `''` | Additional CSS classes |
|
|
29
|
-
|
|
30
|
-
**ButtonVariant:**
|
|
31
|
-
|
|
32
|
-
- `default` - Primary button style
|
|
33
|
-
- `destructive` - Destructive/danger action
|
|
34
|
-
- `outline` - Bordered button
|
|
35
|
-
- `secondary` - Secondary action
|
|
36
|
-
- `ghost` - Minimal styling
|
|
37
|
-
- `link` - Looks like a link
|
|
38
|
-
|
|
39
|
-
**ButtonSize:**
|
|
40
|
-
|
|
41
|
-
- `default` - Standard size (h-8)
|
|
42
|
-
- `xs` - Extra small size (h-6)
|
|
43
|
-
- `sm` - Small size (h-7)
|
|
44
|
-
- `lg` - Large size (h-9)
|
|
45
|
-
- `icon` - Square icon button (size-8)
|
|
46
|
-
- `icon-xs` - Extra small icon button (size-6)
|
|
47
|
-
- `icon-sm` - Small icon button (size-7)
|
|
48
|
-
- `icon-lg` - Large icon button (size-9)
|
|
49
|
-
|
|
50
|
-
## Examples
|
|
51
|
-
|
|
52
|
-
### Variants
|
|
53
|
-
|
|
54
|
-
```html
|
|
55
|
-
<button sc-button>Default</button>
|
|
56
|
-
<button sc-button variant="secondary">Secondary</button>
|
|
57
|
-
<button sc-button variant="destructive">Destructive</button>
|
|
58
|
-
<button sc-button variant="outline">Outline</button>
|
|
59
|
-
<button sc-button variant="ghost">Ghost</button>
|
|
60
|
-
<button sc-button variant="link">Link</button>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### Sizes
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<button sc-button size="lg">Large</button>
|
|
67
|
-
<button sc-button size="default">Default</button>
|
|
68
|
-
<button sc-button size="sm">Small</button>
|
|
69
|
-
<button sc-button size="icon">
|
|
70
|
-
<svg><!-- icon --></svg>
|
|
71
|
-
</button>
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
### With Icons
|
|
75
|
-
|
|
76
|
-
```html
|
|
77
|
-
<button sc-button>
|
|
78
|
-
<svg><!-- icon --></svg>
|
|
79
|
-
Upload
|
|
80
|
-
</button>
|
|
81
|
-
|
|
82
|
-
<button sc-button variant="outline">
|
|
83
|
-
Settings
|
|
84
|
-
<svg><!-- icon --></svg>
|
|
85
|
-
</button>
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### Disabled
|
|
89
|
-
|
|
90
|
-
```html
|
|
91
|
-
<button sc-button disabled>Disabled</button>
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### As Link
|
|
95
|
-
|
|
96
|
-
`ScButton` automatically sets `href="#"` on `<a>` elements. Override with `[href]` for real navigation:
|
|
97
|
-
|
|
98
|
-
```html
|
|
99
|
-
<!-- Default href="#" -->
|
|
100
|
-
<a sc-button>Link Button</a>
|
|
101
|
-
<a sc-button variant="outline">Outline Link</a>
|
|
102
|
-
|
|
103
|
-
<!-- Custom href -->
|
|
104
|
-
<a sc-button href="/somewhere">Navigate</a>
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
### Form Submit
|
|
108
|
-
|
|
109
|
-
By default, `sc-button` sets `type="button"` to prevent accidental form submissions. Use `type="submit"` explicitly for submit buttons:
|
|
110
|
-
|
|
111
|
-
```html
|
|
112
|
-
<form>
|
|
113
|
-
<button sc-button variant="outline">Cancel</button>
|
|
114
|
-
<!-- type="button" by default, won't submit -->
|
|
115
|
-
|
|
116
|
-
<button sc-button type="submit">Save</button>
|
|
117
|
-
<!-- explicit type="submit" -->
|
|
118
|
-
</form>
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### Loading State
|
|
122
|
-
|
|
123
|
-
```html
|
|
124
|
-
<button sc-button disabled>
|
|
125
|
-
<svg sc-spinner si-loader-2-icon></svg>
|
|
126
|
-
Please wait
|
|
127
|
-
</button>
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
## Features
|
|
131
|
-
|
|
132
|
-
- **Multiple Variants**: 6 visual variants for different use cases
|
|
133
|
-
- **Size Options**: 4 sizes including icon-only
|
|
134
|
-
- **Icon Support**: Automatic sizing for nested SVG icons
|
|
135
|
-
- **Link Support**: Works on both `button` and `a` elements
|
|
136
|
-
- **Disabled State**: Built-in disabled styling
|
|
137
|
-
|
|
138
|
-
## Accessibility
|
|
139
|
-
|
|
140
|
-
- Uses native `button` or `a` elements
|
|
141
|
-
- Supports native `disabled` attribute
|
|
142
|
-
- Focus ring for keyboard navigation
|
|
143
|
-
- Proper contrast ratios for all variants
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { booleanAttribute, computed, Directive, input } from '@angular/core';
|
|
2
|
-
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { cn } from '../../utils';
|
|
4
|
-
|
|
5
|
-
export const buttonVariants = cva(
|
|
6
|
-
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
|
|
7
|
-
{
|
|
8
|
-
variants: {
|
|
9
|
-
variant: {
|
|
10
|
-
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
|
|
11
|
-
outline:
|
|
12
|
-
'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
13
|
-
secondary:
|
|
14
|
-
'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
15
|
-
ghost:
|
|
16
|
-
'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
|
|
17
|
-
destructive:
|
|
18
|
-
'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
|
|
19
|
-
link: 'text-primary underline-offset-4 hover:underline',
|
|
20
|
-
},
|
|
21
|
-
size: {
|
|
22
|
-
default:
|
|
23
|
-
'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
|
|
24
|
-
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
25
|
-
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
26
|
-
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
|
|
27
|
-
icon: 'size-8',
|
|
28
|
-
'icon-xs':
|
|
29
|
-
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
30
|
-
'icon-sm':
|
|
31
|
-
'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
|
|
32
|
-
'icon-lg': 'size-9',
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
defaultVariants: {
|
|
36
|
-
variant: 'default',
|
|
37
|
-
size: 'default',
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
export type ScButtonVariants = VariantProps<typeof buttonVariants>;
|
|
43
|
-
|
|
44
|
-
@Directive({
|
|
45
|
-
selector: 'button[sc-button]',
|
|
46
|
-
host: {
|
|
47
|
-
'data-slot': 'button',
|
|
48
|
-
'[attr.type]': 'type()',
|
|
49
|
-
'[disabled]': 'disabled()',
|
|
50
|
-
'[attr.aria-disabled]': 'disabled() || null',
|
|
51
|
-
'[class]': 'class()',
|
|
52
|
-
},
|
|
53
|
-
})
|
|
54
|
-
export class ScButton {
|
|
55
|
-
readonly classInput = input<string>('', { alias: 'class' });
|
|
56
|
-
readonly variant = input<ScButtonVariants['variant']>('default');
|
|
57
|
-
readonly size = input<ScButtonVariants['size']>('default');
|
|
58
|
-
readonly type = input<'button' | 'submit' | 'reset'>('button');
|
|
59
|
-
readonly disabled = input<boolean, unknown>(false, {
|
|
60
|
-
transform: booleanAttribute,
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
protected readonly class = computed(() =>
|
|
64
|
-
cn(
|
|
65
|
-
buttonVariants({ variant: this.variant(), size: this.size() }),
|
|
66
|
-
this.classInput(),
|
|
67
|
-
),
|
|
68
|
-
);
|
|
69
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { booleanAttribute, computed, Directive, input } from '@angular/core';
|
|
2
|
-
import { cn } from '../../utils';
|
|
3
|
-
import { buttonVariants, type ScButtonVariants } from '../button';
|
|
4
|
-
|
|
5
|
-
@Directive({
|
|
6
|
-
selector: 'a[sc-link]',
|
|
7
|
-
host: {
|
|
8
|
-
'data-slot': 'link',
|
|
9
|
-
'[attr.href]': '!disabled() ? href() : null',
|
|
10
|
-
'[attr.role]': 'disabled() ? "link" : null',
|
|
11
|
-
'[attr.aria-disabled]': 'disabled() || null',
|
|
12
|
-
'[attr.tabindex]': 'disabled() ? -1 : null',
|
|
13
|
-
'[class]': 'class()',
|
|
14
|
-
},
|
|
15
|
-
})
|
|
16
|
-
export class ScLink {
|
|
17
|
-
readonly classInput = input<string>('', { alias: 'class' });
|
|
18
|
-
readonly variant = input<ScButtonVariants['variant']>('default');
|
|
19
|
-
readonly size = input<ScButtonVariants['size']>('default');
|
|
20
|
-
readonly href = input<string>('#');
|
|
21
|
-
readonly disabled = input<boolean, unknown>(false, {
|
|
22
|
-
transform: booleanAttribute,
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
protected readonly class = computed(() =>
|
|
26
|
-
cn(
|
|
27
|
-
buttonVariants({ variant: this.variant(), size: this.size() }),
|
|
28
|
-
this.classInput(),
|
|
29
|
-
),
|
|
30
|
-
);
|
|
31
|
-
}
|
package/src/lib/utils/index.ts
DELETED
package/tsconfig.json
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "../../tsconfig.base.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"isolatedModules": true,
|
|
5
|
-
"target": "es2022",
|
|
6
|
-
"moduleResolution": "bundler",
|
|
7
|
-
"strict": true,
|
|
8
|
-
"noImplicitOverride": true,
|
|
9
|
-
"noPropertyAccessFromIndexSignature": true,
|
|
10
|
-
"noImplicitReturns": true,
|
|
11
|
-
"noFallthroughCasesInSwitch": true,
|
|
12
|
-
"emitDecoratorMetadata": false,
|
|
13
|
-
"module": "preserve"
|
|
14
|
-
},
|
|
15
|
-
"angularCompilerOptions": {
|
|
16
|
-
"enableI18nLegacyMessageIdFormat": false,
|
|
17
|
-
"strictInjectionParameters": true,
|
|
18
|
-
"strictInputAccessModifiers": true,
|
|
19
|
-
"strictTemplates": true
|
|
20
|
-
},
|
|
21
|
-
"files": [],
|
|
22
|
-
"include": [],
|
|
23
|
-
"references": [
|
|
24
|
-
{
|
|
25
|
-
"path": "./tsconfig.lib.json"
|
|
26
|
-
}
|
|
27
|
-
]
|
|
28
|
-
}
|
package/tsconfig.lib.json
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "./tsconfig.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"outDir": "../../dist/out-tsc",
|
|
5
|
-
"declaration": true,
|
|
6
|
-
"declarationMap": true,
|
|
7
|
-
"inlineSources": true,
|
|
8
|
-
"types": []
|
|
9
|
-
},
|
|
10
|
-
"include": ["src/**/*.ts"],
|
|
11
|
-
"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
|
|
12
|
-
}
|
package/tsconfig.lib.prod.json
DELETED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|