@ptlm-azulejo/button 2.1.2 → 2.1.3-alpha.208
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/CHANGELOG.md +152 -0
- package/dist/index.js +28 -36
- package/dist/index.umd.cjs +1 -1
- package/dist/src/index.stories.d.ts +1 -2
- package/dist/src/index.stories.d.ts.map +1 -1
- package/dist/src/index.vue.d.ts +22 -83
- package/dist/src/index.vue.d.ts.map +1 -1
- package/dist/style.css +3 -1
- package/package.json +5 -8
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
# Change Log
|
|
2
|
+
|
|
3
|
+
## 2.1.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 751e81c: Align `AzButton` Standard, ghost, and outlined colors with Mozaic’s blue-grey tokens (`--color-blue-grey-600` / `800`) from the themes presets, instead of the brand green accent fill.
|
|
8
|
+
- 06a62d2: Keep publishing the stylesheet as `./style.css`. Vite 6 stopped hardcoding that name in library mode and started deriving it from the entry name, which would have moved the file to `index.css` and broken the documented import path. The entry points and type definitions are unchanged.
|
|
9
|
+
- 19ed560: Rebuild on Vite 8, which bundles with Rolldown and minifies CSS with Lightning CSS. The ESM, CJS and type entry points are unchanged, and `vue` stays external in both the ESM build and the UMD global. The published CSS is equivalent but slightly larger, because Lightning CSS expands shorthands to match the configured build target.
|
|
10
|
+
|
|
11
|
+
## 2.1.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- fbbee70: Formatting-only release. The repository adopted Prettier as its single
|
|
16
|
+
formatting authority, and every shipped file was reformatted in one pass: the
|
|
17
|
+
theme and font stylesheets (published verbatim, so their bytes change), each
|
|
18
|
+
package's README, and the component sources behind `dist/`.
|
|
19
|
+
|
|
20
|
+
No public API, prop, slot, event, CSS variable, class name or rendered output
|
|
21
|
+
changed. Upgrading requires nothing, and skipping this version costs nothing.
|
|
22
|
+
|
|
23
|
+
One internal cleanup rides along in `AzSegmentedControl`: a dead `null`
|
|
24
|
+
initializer and the unreachable branch guarding it were removed from the
|
|
25
|
+
keyboard handler. Arrow / Home / End navigation behaves exactly as before.
|
|
26
|
+
|
|
27
|
+
## 2.1.1
|
|
28
|
+
|
|
29
|
+
### Patch Changes
|
|
30
|
+
|
|
31
|
+
- e5341cd: Documentation. Every package README now spells out both brands end to end instead
|
|
32
|
+
of showing one snippet with an "or" comment: which preset stylesheet to import,
|
|
33
|
+
which `.preset-*` class goes on `<html>` to select the theme at runtime,
|
|
34
|
+
`data-theme` for light/dark, and which font package the project needs (Leroy
|
|
35
|
+
Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
|
|
36
|
+
|
|
37
|
+
No component behaviour, prop or token changed. The patch bump exists because npm
|
|
38
|
+
ships `README.md` inside the tarball and renders it as the package page, so the
|
|
39
|
+
corrected instructions only reach consumers on a release.
|
|
40
|
+
|
|
41
|
+
## 2.1.0
|
|
42
|
+
|
|
43
|
+
### Minor Changes
|
|
44
|
+
|
|
45
|
+
- eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
|
|
46
|
+
expose stable `data-testid` hooks.
|
|
47
|
+
|
|
48
|
+
- Each preset now names its brand's typeface in `--font-family`
|
|
49
|
+
(`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
|
|
50
|
+
`Arial, sans-serif` as the fallback stack.
|
|
51
|
+
- Components apply that typeface on their root, so they follow the active brand
|
|
52
|
+
instead of inheriting the host page's font. Opt out per component by setting
|
|
53
|
+
`--font-family: inherit` on it.
|
|
54
|
+
- `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
|
|
55
|
+
(400), semi-bold (600) and bold (700) weights.
|
|
56
|
+
- Every component now exposes `data-testid` on its root and on meaningful
|
|
57
|
+
sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
|
|
58
|
+
`datepicker` / `datepicker-clear`, `segmented-control` /
|
|
59
|
+
`segmented-control-segment`), so tests can target them without depending on
|
|
60
|
+
CSS class names.
|
|
61
|
+
|
|
62
|
+
As with upstream Mozaic, the presets **name** the typeface but ship no
|
|
63
|
+
`@font-face` and no font binaries — loading the files stays the app's job, so you
|
|
64
|
+
keep control of hosting, subsetting and preload. Until you load them the fallback
|
|
65
|
+
stack renders and nothing breaks. Install the font package matching your brand
|
|
66
|
+
alongside the preset:
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
# Leroy Merlin
|
|
70
|
+
yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
|
|
71
|
+
# Adeo
|
|
72
|
+
yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
See the Fonts section of `packages/themes/README.md` for the full recipe.
|
|
76
|
+
|
|
77
|
+
## 2.0.0
|
|
78
|
+
|
|
79
|
+
### Major Changes
|
|
80
|
+
|
|
81
|
+
- 53000f7: Add Mozaic-aligned multi-brand theming support.
|
|
82
|
+
|
|
83
|
+
- New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
|
|
84
|
+
and brand presets selected by a root class (`presets/leroy-merlin.css`,
|
|
85
|
+
`presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
|
|
86
|
+
light/dark.
|
|
87
|
+
- `AzButton` now consumes theme tokens through utilities mapped in
|
|
88
|
+
`@theme inline`, working across both brands and in light/dark.
|
|
89
|
+
|
|
90
|
+
**BREAKING:** components no longer bake brand colors. The consumer must now
|
|
91
|
+
import `@ptlm-azulejo/themes/base.css` + a preset and apply the
|
|
92
|
+
`.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
|
|
93
|
+
element; otherwise components render uncolored. See the migration notes in
|
|
94
|
+
`packages/themes/README.md`.
|
|
95
|
+
|
|
96
|
+
All notable changes to this project will be documented in this file.
|
|
97
|
+
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
98
|
+
|
|
99
|
+
## [1.3.2](https://github.com/aplemes/library-components/compare/@ptlm-azulejo/button@1.3.1...@ptlm-azulejo/button@1.3.2) (2026-03-12)
|
|
100
|
+
|
|
101
|
+
**Note:** Version bump only for package @ptlm-azulejo/button
|
|
102
|
+
|
|
103
|
+
## [1.3.1](https://github.com/aplemes/library-components/compare/@ptlm-azulejo/button@1.3.0...@ptlm-azulejo/button@1.3.1) (2026-03-12)
|
|
104
|
+
|
|
105
|
+
**Note:** Version bump only for package @ptlm-azulejo/button
|
|
106
|
+
|
|
107
|
+
# 1.3.0 (2026-03-12)
|
|
108
|
+
|
|
109
|
+
### Bug Fixes
|
|
110
|
+
|
|
111
|
+
- [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
|
|
112
|
+
- revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
|
|
113
|
+
|
|
114
|
+
### Features
|
|
115
|
+
|
|
116
|
+
- [US-002] - Align Button with mozaic-vue reference ([def8c29](https://github.com/aplemes/library-components/commit/def8c291c8eb9245181f667bcb40a0bacce2a63a))
|
|
117
|
+
- [US-002] - Pacote de design tokens (@leroy-merlin-pt/tokens) ([2793d72](https://github.com/aplemes/library-components/commit/2793d72c8205c84ee428699b9d0679a6b791babb))
|
|
118
|
+
- [US-003] - Migrar componente Button do Mozaic (@leroy-merlin-pt/button) ([e5fb1c5](https://github.com/aplemes/library-components/commit/e5fb1c5a66560920b8c64014e4e08ca147beb794))
|
|
119
|
+
- [US-004] - Componente Input (@leroy-merlin-pt/input) ([a2a7894](https://github.com/aplemes/library-components/commit/a2a7894b057cab6b350a0b7e45cef7eea86e7a24))
|
|
120
|
+
- add full documentation, unified Storybook and component generator ([02ec178](https://github.com/aplemes/library-components/commit/02ec178e5c5ce4f1cf75efdcbabe33d7fd9d20f9))
|
|
121
|
+
- add README docs to all packages and align Button, IconButton, Input components ([a4df103](https://github.com/aplemes/library-components/commit/a4df103eef20c4c76f532125ae287b93223e1be4))
|
|
122
|
+
- migrate org to [@ptlm-azulejo](https://github.com/azulejo-kit) and add Az component prefix ([c31ba38](https://github.com/aplemes/library-components/commit/c31ba38c12562e2f662b07444eca0fba1a4fe8bc))
|
|
123
|
+
- test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
|
|
124
|
+
- update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
|
|
125
|
+
|
|
126
|
+
# [1.2.0](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.3...@leroy-merlin-pt/button@1.2.0) (2026-03-12)
|
|
127
|
+
|
|
128
|
+
### Features
|
|
129
|
+
|
|
130
|
+
- update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
|
|
131
|
+
|
|
132
|
+
## [1.1.2](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.1...@leroy-merlin-pt/button@1.1.2) (2026-03-11)
|
|
133
|
+
|
|
134
|
+
**Note:** Version bump only for package @leroy-merlin-pt/button
|
|
135
|
+
|
|
136
|
+
## [1.1.1](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.0...@leroy-merlin-pt/button@1.1.1) (2026-03-11)
|
|
137
|
+
|
|
138
|
+
### Bug Fixes
|
|
139
|
+
|
|
140
|
+
- revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
|
|
141
|
+
|
|
142
|
+
# [1.1.0](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.0.3...@leroy-merlin-pt/button@1.1.0) (2026-03-11)
|
|
143
|
+
|
|
144
|
+
### Features
|
|
145
|
+
|
|
146
|
+
- test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
|
|
147
|
+
|
|
148
|
+
## [1.0.3](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.0.2...@leroy-merlin-pt/button@1.0.3) (2026-03-11)
|
|
149
|
+
|
|
150
|
+
### Bug Fixes
|
|
151
|
+
|
|
152
|
+
- [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { computed as u, createCommentVNode as d, createElementBlock as a, createElementVNode as r, createTextVNode as b, defineComponent as c, normalizeClass as y, normalizeStyle as p, openBlock as i, renderSlot as s } from "vue";
|
|
2
|
+
var m = [
|
|
3
|
+
"disabled",
|
|
4
|
+
"type",
|
|
5
|
+
"aria-busy"
|
|
6
|
+
], v = {
|
|
3
7
|
key: 0,
|
|
4
8
|
"data-testid": "button-icon",
|
|
5
9
|
class: "btn__icon"
|
|
6
|
-
},
|
|
10
|
+
}, g = {
|
|
7
11
|
key: 1,
|
|
8
12
|
"data-testid": "button-loader",
|
|
9
13
|
class: "btn__loader",
|
|
@@ -12,11 +16,11 @@ const p = ["disabled", "type", "aria-busy"], g = {
|
|
|
12
16
|
key: 2,
|
|
13
17
|
"data-testid": "button-icon",
|
|
14
18
|
class: "btn__icon"
|
|
15
|
-
},
|
|
19
|
+
}, $ = {
|
|
16
20
|
key: 4,
|
|
17
21
|
"data-testid": "button-icon",
|
|
18
22
|
class: "btn__icon"
|
|
19
|
-
},
|
|
23
|
+
}, h = /* @__PURE__ */ c({
|
|
20
24
|
__name: "index",
|
|
21
25
|
props: {
|
|
22
26
|
appearance: { default: "standard" },
|
|
@@ -29,47 +33,35 @@ const p = ["disabled", "type", "aria-busy"], g = {
|
|
|
29
33
|
isLoading: { type: Boolean }
|
|
30
34
|
},
|
|
31
35
|
setup(t) {
|
|
32
|
-
const
|
|
33
|
-
[`btn--${
|
|
34
|
-
[`btn--${
|
|
35
|
-
"btn--ghost":
|
|
36
|
-
"btn--outlined":
|
|
37
|
-
"btn--icon-only":
|
|
36
|
+
const e = t, l = u(() => ({
|
|
37
|
+
[`btn--${e.appearance}`]: e.appearance && e.appearance !== "standard",
|
|
38
|
+
[`btn--${e.size}`]: e.size && e.size !== "m",
|
|
39
|
+
"btn--ghost": e.ghost,
|
|
40
|
+
"btn--outlined": e.outlined,
|
|
41
|
+
"btn--icon-only": e.iconPosition === "only"
|
|
38
42
|
}));
|
|
39
|
-
return (
|
|
43
|
+
return (n, o) => (i(), a("button", {
|
|
40
44
|
"data-testid": "button",
|
|
41
|
-
class:
|
|
45
|
+
class: y(["btn", l.value]),
|
|
42
46
|
disabled: t.disabled,
|
|
43
47
|
type: t.type,
|
|
44
48
|
"aria-busy": t.isLoading || void 0
|
|
45
49
|
}, [
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
class: "btn__spinner"
|
|
53
|
-
}, null, -1)
|
|
54
|
-
])])) : d("", !0),
|
|
55
|
-
e.$slots.icon && t.iconPosition === "only" && !t.isLoading ? (o(), i("span", f, [
|
|
56
|
-
a(e.$slots, "icon")
|
|
57
|
-
])) : (o(), i("span", {
|
|
50
|
+
n.$slots.icon && t.iconPosition === "left" && !t.isLoading ? (i(), a("span", v, [s(n.$slots, "icon")])) : d("", !0),
|
|
51
|
+
t.isLoading ? (i(), a("span", g, [...o[0] || (o[0] = [r("span", {
|
|
52
|
+
"data-testid": "button-spinner",
|
|
53
|
+
class: "btn__spinner"
|
|
54
|
+
}, null, -1)])])) : d("", !0),
|
|
55
|
+
n.$slots.icon && t.iconPosition === "only" && !t.isLoading ? (i(), a("span", f, [s(n.$slots, "icon")])) : (i(), a("span", {
|
|
58
56
|
key: 3,
|
|
59
57
|
"data-testid": "button-label",
|
|
60
58
|
class: "btn__label",
|
|
61
|
-
style:
|
|
62
|
-
}, [
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
])
|
|
66
|
-
], 4)),
|
|
67
|
-
e.$slots.icon && t.iconPosition === "right" && !t.isLoading ? (o(), i("span", h, [
|
|
68
|
-
a(e.$slots, "icon")
|
|
69
|
-
])) : d("", !0)
|
|
70
|
-
], 10, p));
|
|
59
|
+
style: p({ visibility: t.isLoading ? "hidden" : "visible" })
|
|
60
|
+
}, [s(n.$slots, "default", {}, () => [o[1] || (o[1] = b("Button Label", -1))])], 4)),
|
|
61
|
+
n.$slots.icon && t.iconPosition === "right" && !t.isLoading ? (i(), a("span", $, [s(n.$slots, "icon")])) : d("", !0)
|
|
62
|
+
], 10, m));
|
|
71
63
|
}
|
|
72
|
-
});
|
|
64
|
+
}), L = h;
|
|
73
65
|
export {
|
|
74
66
|
L as AzButton
|
|
75
67
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,
|
|
1
|
+
(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.button={},o.Vue))})(this,function(o,e){Object.defineProperty(o,Symbol.toStringTag,{value:"Module"});var s=["disabled","type","aria-busy"],l={key:0,"data-testid":"button-icon",class:"btn__icon"},d={key:1,"data-testid":"button-loader",class:"btn__loader","aria-hidden":"true"},r={key:2,"data-testid":"button-icon",class:"btn__icon"},c={key:4,"data-testid":"button-icon",class:"btn__icon"},b=(0,e.defineComponent)({__name:"index",props:{appearance:{default:"standard"},size:{default:"m"},disabled:{type:Boolean},ghost:{type:Boolean},outlined:{type:Boolean},iconPosition:{},type:{default:"button"},isLoading:{type:Boolean}},setup(t){const n=t,y=(0,e.computed)(()=>({[`btn--${n.appearance}`]:n.appearance&&n.appearance!=="standard",[`btn--${n.size}`]:n.size&&n.size!=="m","btn--ghost":n.ghost,"btn--outlined":n.outlined,"btn--icon-only":n.iconPosition==="only"}));return(i,a)=>((0,e.openBlock)(),(0,e.createElementBlock)("button",{"data-testid":"button",class:(0,e.normalizeClass)(["btn",y.value]),disabled:t.disabled,type:t.type,"aria-busy":t.isLoading||void 0},[i.$slots.icon&&t.iconPosition==="left"&&!t.isLoading?((0,e.openBlock)(),(0,e.createElementBlock)("span",l,[(0,e.renderSlot)(i.$slots,"icon")])):(0,e.createCommentVNode)("",!0),t.isLoading?((0,e.openBlock)(),(0,e.createElementBlock)("span",d,[...a[0]||(a[0]=[(0,e.createElementVNode)("span",{"data-testid":"button-spinner",class:"btn__spinner"},null,-1)])])):(0,e.createCommentVNode)("",!0),i.$slots.icon&&t.iconPosition==="only"&&!t.isLoading?((0,e.openBlock)(),(0,e.createElementBlock)("span",r,[(0,e.renderSlot)(i.$slots,"icon")])):((0,e.openBlock)(),(0,e.createElementBlock)("span",{key:3,"data-testid":"button-label",class:"btn__label",style:(0,e.normalizeStyle)({visibility:t.isLoading?"hidden":"visible"})},[(0,e.renderSlot)(i.$slots,"default",{},()=>[a[1]||(a[1]=(0,e.createTextVNode)("Button Label",-1))])],4)),i.$slots.icon&&t.iconPosition==="right"&&!t.isLoading?((0,e.openBlock)(),(0,e.createElementBlock)("span",c,[(0,e.renderSlot)(i.$slots,"icon")])):(0,e.createCommentVNode)("",!0)],10,s))}}),u=b;o.AzButton=u});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyK7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA"}
|
package/dist/src/index.vue.d.ts
CHANGED
|
@@ -1,33 +1,18 @@
|
|
|
1
1
|
import { VNode } from 'vue';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Use this slot to insert an icon for the Button.
|
|
10
|
-
*/
|
|
11
|
-
icon?: () => VNode[];
|
|
12
|
-
}> & {
|
|
13
|
-
/**
|
|
14
|
-
* The content displayed in the button.
|
|
15
|
-
*/
|
|
16
|
-
default: string;
|
|
17
|
-
/**
|
|
18
|
-
* Use this slot to insert an icon for the Button.
|
|
19
|
-
*/
|
|
20
|
-
icon?: () => VNode[];
|
|
21
|
-
};
|
|
22
|
-
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
2
|
+
/**
|
|
3
|
+
* Buttons are key interactive elements used to perform actions and can be used as standalone element,
|
|
4
|
+
* or as part of another component. Their appearance depends on the type of action required from the user
|
|
5
|
+
* and the context in which they are used.
|
|
6
|
+
*/
|
|
7
|
+
type __VLS_Props = {
|
|
23
8
|
/**
|
|
24
9
|
* Defines the visual style of the button.
|
|
25
10
|
*/
|
|
26
|
-
appearance?:
|
|
11
|
+
appearance?: 'standard' | 'accent' | 'danger' | 'inverse';
|
|
27
12
|
/**
|
|
28
13
|
* Determines the size of the button.
|
|
29
14
|
*/
|
|
30
|
-
size?:
|
|
15
|
+
size?: 's' | 'm' | 'l';
|
|
31
16
|
/**
|
|
32
17
|
* If `true`, disables the button, making it non-interactive.
|
|
33
18
|
*/
|
|
@@ -43,81 +28,35 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
43
28
|
/**
|
|
44
29
|
* Controls the positioning of an icon in the button.
|
|
45
30
|
*/
|
|
46
|
-
iconPosition?:
|
|
31
|
+
iconPosition?: 'left' | 'right' | 'only';
|
|
47
32
|
/**
|
|
48
33
|
* Specifies the button's HTML `type` attribute.
|
|
49
34
|
*/
|
|
50
|
-
type?:
|
|
35
|
+
type?: 'button' | 'reset' | 'submit';
|
|
51
36
|
/**
|
|
52
37
|
* If `true`, a loading state is displayed.
|
|
53
38
|
*/
|
|
54
39
|
isLoading?: boolean;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
size: string;
|
|
58
|
-
type: string;
|
|
59
|
-
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
60
|
-
/**
|
|
61
|
-
* Defines the visual style of the button.
|
|
62
|
-
*/
|
|
63
|
-
appearance?: "standard" | "accent" | "danger" | "inverse";
|
|
64
|
-
/**
|
|
65
|
-
* Determines the size of the button.
|
|
66
|
-
*/
|
|
67
|
-
size?: "s" | "m" | "l";
|
|
68
|
-
/**
|
|
69
|
-
* If `true`, disables the button, making it non-interactive.
|
|
70
|
-
*/
|
|
71
|
-
disabled?: boolean;
|
|
72
|
-
/**
|
|
73
|
-
* If `true`, applies a "ghost" style to the button, typically a transparent background with a border.
|
|
74
|
-
*/
|
|
75
|
-
ghost?: boolean;
|
|
76
|
-
/**
|
|
77
|
-
* If `true`, the button gets an outlined style, usually with just the border and no solid background.
|
|
78
|
-
*/
|
|
79
|
-
outlined?: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* Controls the positioning of an icon in the button.
|
|
82
|
-
*/
|
|
83
|
-
iconPosition?: "left" | "right" | "only";
|
|
40
|
+
};
|
|
41
|
+
type __VLS_Slots = {
|
|
84
42
|
/**
|
|
85
|
-
*
|
|
43
|
+
* The content displayed in the button.
|
|
86
44
|
*/
|
|
87
|
-
|
|
45
|
+
default: string;
|
|
88
46
|
/**
|
|
89
|
-
*
|
|
47
|
+
* Use this slot to insert an icon for the Button.
|
|
90
48
|
*/
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
size: string;
|
|
95
|
-
type: string;
|
|
96
|
-
}>>> & Readonly<{}>, {
|
|
49
|
+
icon?: () => VNode[];
|
|
50
|
+
};
|
|
51
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
97
52
|
appearance: "standard" | "accent" | "danger" | "inverse";
|
|
98
53
|
size: "s" | "m" | "l";
|
|
99
54
|
type: "button" | "reset" | "submit";
|
|
100
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions,
|
|
101
|
-
declare const
|
|
55
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
56
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
57
|
+
declare const _default: typeof __VLS_export;
|
|
102
58
|
export default _default;
|
|
103
|
-
type
|
|
104
|
-
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
105
|
-
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
106
|
-
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
107
|
-
} : {
|
|
108
|
-
type: import('vue').PropType<T[K]>;
|
|
109
|
-
required: true;
|
|
110
|
-
};
|
|
111
|
-
};
|
|
112
|
-
type __VLS_WithDefaults<P, D> = {
|
|
113
|
-
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
114
|
-
default: D[K];
|
|
115
|
-
}> : P[K];
|
|
116
|
-
};
|
|
117
|
-
type __VLS_Prettify<T> = {
|
|
118
|
-
[K in keyof T]: T[K];
|
|
119
|
-
} & {};
|
|
120
|
-
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
59
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
121
60
|
new (): {
|
|
122
61
|
$slots: S;
|
|
123
62
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"AAkOA,OAAO,EAAY,KAAK,KAAK,EAAE,MAAM,KAAK,CAAA;AAE1C;;;;GAIG;AACH,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IACzD;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAC;AAUJ,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,KAAK,EAAE,CAAA;CACrB,CAAC;AAkGF,QAAA,MAAM,UAAU;gBAlJC,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS;UAIlD,GAAG,GAAG,GAAG,GAAG,GAAG;UAoBf,QAAQ,GAAG,OAAO,GAAG,QAAQ;6EA6HtC,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
package/dist/style.css
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
/*! tailwindcss v4.
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-duration:initial}::-ms-backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-duration:initial}::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-duration:initial}}}.btn{min-height:calc(var(--spacing,.25rem) * 12);cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--border-radius-l);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 6);font-family:var(--font-family,ui-sans-serif, system-ui, sans-serif);font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));--tw-leading:var(--leading-tight,1.25);line-height:var(--leading-tight,1.25);--tw-font-weight:var(--font-weight-semi-bold);font-weight:var(--font-weight-semi-bold);transition-property:color,background-color,border-color,outline-color,-webkit-text-decoration-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:.2s;background-color:var(--color-blue-grey-600);color:var(--color-text-primary-inverse);border-width:1px;border-color:transparent;padding-top:.6875rem;padding-bottom:.6875rem;transition-duration:.2s;display:inline-flex;position:relative}.btn:enabled:hover{background-color:var(--color-blue-grey-700);color:var(--color-text-primary-inverse)}.btn:focus-visible{outline:var(--border-m) solid var(--color-text-accent);outline-offset:var(--border-m)}.btn:disabled{background-color:var(--color-background-secondary);color:var(--color-text-tertiary);cursor:not-allowed;border-color:transparent}.btn--s{min-height:calc(var(--spacing,.25rem) * 8);padding-inline:calc(var(--spacing,.25rem) * 4);font-size:var(--font-size-04);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));padding-top:.3125rem;padding-bottom:.3125rem}.btn--l{min-height:calc(var(--spacing,.25rem) * 14);padding-inline:calc(var(--spacing,.25rem) * 6);font-size:var(--font-size-06);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));padding-top:.875rem;padding-bottom:.875rem}.btn--accent{background-color:var(--color-brand);color:var(--color-white,#fff);border-color:transparent}@media (hover:hover){.btn--accent:enabled:hover{background-color:var(--color-brand)}@supports (color:color-mix(in lab, red, red)){.btn--accent:enabled:hover{background-color:color-mix(in srgb, var(--color-brand) 85%, #000)}}}.btn--danger{background-color:var(--color-danger-500);color:var(--color-white,#fff);border-color:transparent}@media (hover:hover){.btn--danger:enabled:hover{background-color:var(--color-danger-600)}}.btn--inverse{border-color:var(--color-border-primary);background-color:var(--color-background-secondary);color:var(--color-text-primary)}@media (hover:hover){.btn--inverse:enabled:hover{background-color:var(--color-background-primary)}}.btn--ghost{color:var(--color-blue-grey-800);background-color:transparent;border-color:transparent}.btn--ghost:enabled:hover{background-color:var(--color-blue-grey-600)}@supports (color:color-mix(in lab, red, red)){.btn--ghost:enabled:hover{background-color:color-mix(in srgb, var(--color-blue-grey-600) 10%, transparent)}}.btn--ghost:enabled:hover{color:var(--color-blue-grey-800)}.btn--outlined{color:var(--color-blue-grey-800);border-color:var(--color-border-secondary);background-color:transparent}.btn--outlined:enabled:hover{background-color:var(--color-background-secondary);color:var(--color-blue-grey-800)}.btn--icon-only{padding-inline:calc(var(--spacing,.25rem) * 2)}.btn__icon{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn__loader{justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.btn__spinner{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);border-style:var(--tw-border-style);border-width:2px;border-color:transparent currentColor currentColor;border-radius:2147483647px;animation:.6s linear infinite az-btn-spin;display:block}.btn__label{display:inline-block}@keyframes az-btn-spin{to{transform:rotate(360deg)}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
|
|
3
|
+
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ptlm-azulejo/button",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3-alpha.208",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.umd.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -30,13 +30,10 @@
|
|
|
30
30
|
"@ptlm-azulejo/fonts-adeo": "*",
|
|
31
31
|
"@ptlm-azulejo/fonts-leroy-merlin": "*",
|
|
32
32
|
"@ptlm-azulejo/themes": "*",
|
|
33
|
-
"@storybook/
|
|
34
|
-
"@
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"@tailwindcss/vite": "^4.0.0",
|
|
38
|
-
"storybook": "^7.0.0",
|
|
39
|
-
"tailwindcss": "^4.0.0",
|
|
33
|
+
"@storybook/vue3-vite": "^10.5.8",
|
|
34
|
+
"@tailwindcss/vite": "^4.3.3",
|
|
35
|
+
"storybook": "^10.5.8",
|
|
36
|
+
"tailwindcss": "^4.3.3",
|
|
40
37
|
"vue": "^3.3.4"
|
|
41
38
|
},
|
|
42
39
|
"peerDependencies": {
|