@neovici/cosmoz-button 1.0.2 → 1.1.1
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/dist/cosmoz-button.d.ts +11 -1
- package/dist/cosmoz-button.js +37 -4
- package/dist/styles.js +3 -0
- package/package.json +6 -18
package/dist/cosmoz-button.d.ts
CHANGED
|
@@ -7,6 +7,11 @@ export interface CosmozButtonElement extends HTMLElement {
|
|
|
7
7
|
disabled: boolean;
|
|
8
8
|
'full-width': boolean;
|
|
9
9
|
type: ButtonType;
|
|
10
|
+
value: string | null;
|
|
11
|
+
href: string | null;
|
|
12
|
+
target: string | null;
|
|
13
|
+
rel: string | null;
|
|
14
|
+
download: string | null;
|
|
10
15
|
}
|
|
11
16
|
/**
|
|
12
17
|
* A customizable button component using Untitled UI design tokens.
|
|
@@ -18,12 +23,17 @@ export interface CosmozButtonElement extends HTMLElement {
|
|
|
18
23
|
* @attr {boolean} disabled - Disables the button
|
|
19
24
|
* @attr {boolean} full-width - Makes the button 100% width
|
|
20
25
|
* @attr {string} type - Button type: button (default), submit, reset
|
|
26
|
+
* @attr {string} value - Value associated with the button (optional)
|
|
27
|
+
* @attr {string} href - When present, renders as an anchor link instead of a button
|
|
28
|
+
* @attr {string} target - Target attribute for the anchor (only with href)
|
|
29
|
+
* @attr {string} rel - Rel attribute for the anchor (only with href)
|
|
30
|
+
* @attr {string} download - Download attribute for the anchor (only with href)
|
|
21
31
|
*
|
|
22
32
|
* @slot - Default slot for button text content
|
|
23
33
|
* @slot prefix - Slot for prefix icon (before text)
|
|
24
34
|
* @slot suffix - Slot for suffix icon (after text)
|
|
25
35
|
*
|
|
26
|
-
* @csspart button - The native button element
|
|
36
|
+
* @csspart button - The native button or anchor element
|
|
27
37
|
*/
|
|
28
38
|
declare const CosmozButton: (host: CosmozButtonElement) => import("lit-html").TemplateResult<1>;
|
|
29
39
|
export { CosmozButton };
|
package/dist/cosmoz-button.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { normalize } from '@neovici/cosmoz-tokens/normalize';
|
|
2
2
|
import { component, html, useEffect } from '@pionjs/pion';
|
|
3
|
+
import { nothing } from 'lit-html';
|
|
4
|
+
import { ifDefined } from 'lit-html/directives/if-defined.js';
|
|
3
5
|
import { styles } from './styles';
|
|
4
6
|
const observedAttributes = [
|
|
5
7
|
'variant',
|
|
@@ -7,6 +9,11 @@ const observedAttributes = [
|
|
|
7
9
|
'disabled',
|
|
8
10
|
'full-width',
|
|
9
11
|
'type',
|
|
12
|
+
'value',
|
|
13
|
+
'href',
|
|
14
|
+
'target',
|
|
15
|
+
'rel',
|
|
16
|
+
'download',
|
|
10
17
|
];
|
|
11
18
|
/**
|
|
12
19
|
* A customizable button component using Untitled UI design tokens.
|
|
@@ -18,16 +25,22 @@ const observedAttributes = [
|
|
|
18
25
|
* @attr {boolean} disabled - Disables the button
|
|
19
26
|
* @attr {boolean} full-width - Makes the button 100% width
|
|
20
27
|
* @attr {string} type - Button type: button (default), submit, reset
|
|
28
|
+
* @attr {string} value - Value associated with the button (optional)
|
|
29
|
+
* @attr {string} href - When present, renders as an anchor link instead of a button
|
|
30
|
+
* @attr {string} target - Target attribute for the anchor (only with href)
|
|
31
|
+
* @attr {string} rel - Rel attribute for the anchor (only with href)
|
|
32
|
+
* @attr {string} download - Download attribute for the anchor (only with href)
|
|
21
33
|
*
|
|
22
34
|
* @slot - Default slot for button text content
|
|
23
35
|
* @slot prefix - Slot for prefix icon (before text)
|
|
24
36
|
* @slot suffix - Slot for suffix icon (after text)
|
|
25
37
|
*
|
|
26
|
-
* @csspart button - The native button element
|
|
38
|
+
* @csspart button - The native button or anchor element
|
|
27
39
|
*/
|
|
28
40
|
const CosmozButton = (host) => {
|
|
29
41
|
const disabled = host.hasAttribute('disabled');
|
|
30
42
|
const type = host.getAttribute('type') || 'button';
|
|
43
|
+
const href = host.getAttribute('href');
|
|
31
44
|
useEffect(() => {
|
|
32
45
|
const handler = (e) => {
|
|
33
46
|
if (host.hasAttribute('disabled'))
|
|
@@ -36,11 +49,31 @@ const CosmozButton = (host) => {
|
|
|
36
49
|
host.addEventListener('click', handler, { capture: true });
|
|
37
50
|
return () => host.removeEventListener('click', handler, { capture: true });
|
|
38
51
|
}, []);
|
|
52
|
+
const content = html `
|
|
53
|
+
<slot name="prefix"></slot>
|
|
54
|
+
<slot></slot>
|
|
55
|
+
<slot name="suffix"></slot>
|
|
56
|
+
`;
|
|
57
|
+
if (href != null) {
|
|
58
|
+
const target = host.getAttribute('target');
|
|
59
|
+
const rel = host.getAttribute('rel');
|
|
60
|
+
const download = host.getAttribute('download');
|
|
61
|
+
return html `
|
|
62
|
+
<a
|
|
63
|
+
href=${href}
|
|
64
|
+
class="button"
|
|
65
|
+
part="button"
|
|
66
|
+
aria-disabled=${disabled ? 'true' : nothing}
|
|
67
|
+
target=${ifDefined(target)}
|
|
68
|
+
rel=${ifDefined(rel)}
|
|
69
|
+
download=${ifDefined(download)}
|
|
70
|
+
>${content}</a
|
|
71
|
+
>
|
|
72
|
+
`;
|
|
73
|
+
}
|
|
39
74
|
return html `
|
|
40
75
|
<button type=${type} class="button" ?disabled=${disabled} part="button">
|
|
41
|
-
|
|
42
|
-
<slot></slot>
|
|
43
|
-
<slot name="suffix"></slot>
|
|
76
|
+
${content}
|
|
44
77
|
</button>
|
|
45
78
|
`;
|
|
46
79
|
};
|
package/dist/styles.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-button",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "A customizable button web component built with Untitled UI design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -35,19 +35,8 @@
|
|
|
35
35
|
"storybook:build": "storybook build",
|
|
36
36
|
"storybook:deploy": "storybook-to-ghpages",
|
|
37
37
|
"storybook:preview": "npm run storybook:build && http-server ./storybook-static/ --silent",
|
|
38
|
-
"prepare": "husky"
|
|
39
|
-
|
|
40
|
-
"release": {
|
|
41
|
-
"plugins": [
|
|
42
|
-
"@semantic-release/commit-analyzer",
|
|
43
|
-
"@semantic-release/release-notes-generator",
|
|
44
|
-
"@semantic-release/changelog",
|
|
45
|
-
"@semantic-release/github",
|
|
46
|
-
"@semantic-release/npm",
|
|
47
|
-
"@semantic-release/git"
|
|
48
|
-
],
|
|
49
|
-
"branch": "main",
|
|
50
|
-
"preset": "conventionalcommits"
|
|
38
|
+
"prepare": "husky",
|
|
39
|
+
"changeset": "changeset"
|
|
51
40
|
},
|
|
52
41
|
"publishConfig": {
|
|
53
42
|
"access": "public"
|
|
@@ -66,13 +55,13 @@
|
|
|
66
55
|
"lit-html": "^3.3.1"
|
|
67
56
|
},
|
|
68
57
|
"devDependencies": {
|
|
58
|
+
"@changesets/cli": "^2.27.0",
|
|
69
59
|
"@commitlint/cli": "^20.0.0",
|
|
70
60
|
"@commitlint/config-conventional": "^20.4.1",
|
|
71
|
-
"@neovici/cfg": "^2.
|
|
61
|
+
"@neovici/cfg": "^2.13.0",
|
|
72
62
|
"@neovici/testing": "^2.0.0",
|
|
73
63
|
"@open-wc/testing": "^4.0.0",
|
|
74
|
-
"@
|
|
75
|
-
"@semantic-release/git": "^10.0.0",
|
|
64
|
+
"@playwright/test": "1.60.0",
|
|
76
65
|
"@storybook/addon-docs": "^10.2.3",
|
|
77
66
|
"@storybook/web-components-vite": "^10.0.0",
|
|
78
67
|
"@types/mocha": "^10.0.6",
|
|
@@ -82,7 +71,6 @@
|
|
|
82
71
|
"http-server": "^14.1.1",
|
|
83
72
|
"husky": "^9.0.0",
|
|
84
73
|
"lint-staged": "^16.2.7",
|
|
85
|
-
"semantic-release": "^25.0.3",
|
|
86
74
|
"sinon": "^21.0.1",
|
|
87
75
|
"storybook": "^10.2.4",
|
|
88
76
|
"typescript": "^5.4.3"
|