@kumori/aurora-wui-components 0.0.136 → 0.0.138
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/components/axebow-button/axebow-button.d.ts +12 -0
- package/dist/components/axebow-button/axebow-button.d.ts.map +1 -1
- package/dist/components/cards/parts/axebow-card-action-banner.d.ts.map +1 -1
- package/dist/components/cards/parts/axebow-card-footer.d.ts.map +1 -1
- package/dist/index.js +74 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -15,8 +15,20 @@ export declare class AxebowButton extends LitElement {
|
|
|
15
15
|
value?: string;
|
|
16
16
|
fixedWidth?: string;
|
|
17
17
|
fixedHeight?: string;
|
|
18
|
+
paddingTop?: string;
|
|
19
|
+
paddingRight?: string;
|
|
20
|
+
paddingBottom?: string;
|
|
21
|
+
paddingLeft?: string;
|
|
22
|
+
/**
|
|
23
|
+
* 'simple' keeps each variant's own hover treatment (the default,
|
|
24
|
+
* unchanged). 'border' switches to the boxed hover look shared by
|
|
25
|
+
* axebow-more-actions: an anti-flash-white background with rounded
|
|
26
|
+
* corners, regardless of variant.
|
|
27
|
+
*/
|
|
28
|
+
hoverStyle: 'simple' | 'border';
|
|
18
29
|
constructor();
|
|
19
30
|
updated(changed: Map<string, unknown>): void;
|
|
31
|
+
private _syncPaddingVar;
|
|
20
32
|
private _guardDisabledClick;
|
|
21
33
|
static styles: import('lit').CSSResult[];
|
|
22
34
|
render(): import('lit-html').TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-button.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-button/axebow-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIvD,OAAO,2DAA2D,CAAC;AAEnE,qBACa,YAAa,SAAQ,UAAU;IACC,OAAO,EAC9C,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAa;IAEoB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC7C,OAAO,UAAS;IAChB,IAAI,UAAS;IACb,MAAM,UAAS;IACZ,QAAQ,UAAS;IACpB,OAAO,UAAS;IAChB,KAAK,UAAS;IAC9B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;;
|
|
1
|
+
{"version":3,"file":"axebow-button.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-button/axebow-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIvD,OAAO,2DAA2D,CAAC;AAEnE,qBACa,YAAa,SAAQ,UAAU;IACC,OAAO,EAC9C,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAa;IAEoB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC7C,OAAO,UAAS;IAChB,IAAI,UAAS;IACb,MAAM,UAAS;IACZ,QAAQ,UAAS;IACpB,OAAO,UAAS;IAChB,KAAK,UAAS;IAC9B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD;;;;;OAKG;IACyB,UAAU,EAAE,QAAQ,GAAG,QAAQ,CAAY;;IAOvE,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAerC,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM,CAAC,MAAM,4BAkLX;IAEF,MAAM;CAyBP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-card-action-banner.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-action-banner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,kCAAkC,CAAC;AAE1C,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAWX;IAE0B,KAAK,SAAkB;IACtB,WAAW,UAAS;IACrB,eAAe,SAAM;IAEjD,MAAM;
|
|
1
|
+
{"version":3,"file":"axebow-card-action-banner.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-action-banner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,kCAAkC,CAAC;AAE1C,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAWX;IAE0B,KAAK,SAAkB;IACtB,WAAW,UAAS;IACrB,eAAe,SAAM;IAEjD,MAAM;IAkBN,OAAO,CAAC,QAAQ;CAGjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-card-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,oDAAoD,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAEjC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BAGX;IAE2B,UAAU,UAAS;IACnB,WAAW,UAAS;IACrB,UAAU,SAAM;IAChB,aAAa,SAAM;IACnB,WAAW,SAAM;IAChB,WAAW,UAAS;IACpB,eAAe,UAAS;IAC1B,kBAAkB,EAAE,cAAc,EAAE,CAAM;IACzC,UAAU,SAAW;IACrB,gBAAgB,SAAU;IAC1B,WAAW,SAAM;IAE7C,MAAM;
|
|
1
|
+
{"version":3,"file":"axebow-card-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,oDAAoD,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAEjC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BAGX;IAE2B,UAAU,UAAS;IACnB,WAAW,UAAS;IACrB,UAAU,SAAM;IAChB,aAAa,SAAM;IACnB,WAAW,SAAM;IAChB,WAAW,UAAS;IACpB,eAAe,UAAS;IAC1B,kBAAkB,EAAE,cAAc,EAAE,CAAM;IACzC,UAAU,SAAW;IACrB,gBAAgB,SAAU;IAC1B,WAAW,SAAM;IAE7C,MAAM;IAyCN,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;CAGlB"}
|
package/dist/index.js
CHANGED
|
@@ -976,6 +976,7 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
976
976
|
this.loading = false;
|
|
977
977
|
this.caret = false;
|
|
978
978
|
this.type = "button";
|
|
979
|
+
this.hoverStyle = "simple";
|
|
979
980
|
this._guardDisabledClick = (event) => {
|
|
980
981
|
if (this.disabled || this.loading) {
|
|
981
982
|
event.preventDefault();
|
|
@@ -989,6 +990,16 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
989
990
|
else this.style.removeProperty("--axebow-button-width");
|
|
990
991
|
if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
|
|
991
992
|
else this.style.removeProperty("--axebow-button-height");
|
|
993
|
+
this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
|
|
994
|
+
this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
|
|
995
|
+
this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
|
|
996
|
+
this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
|
|
997
|
+
}
|
|
998
|
+
_syncPaddingVar(changed, prop, cssVar) {
|
|
999
|
+
if (!changed.has(prop)) return;
|
|
1000
|
+
const value = this[prop];
|
|
1001
|
+
if (value) this.style.setProperty(cssVar, value);
|
|
1002
|
+
else this.style.removeProperty(cssVar);
|
|
992
1003
|
}
|
|
993
1004
|
static {
|
|
994
1005
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
@@ -1006,6 +1017,32 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
1006
1017
|
min-width: var(--axebow-button-width, 9.375rem);
|
|
1007
1018
|
}
|
|
1008
1019
|
|
|
1020
|
+
/**
|
|
1021
|
+
* The label part carries sl-button's own left/right spacing
|
|
1022
|
+
* (top/bottom are always 0 natively). Each size's fallback points at
|
|
1023
|
+
* shoelace's own token for that size, so unconfigured buttons render
|
|
1024
|
+
* byte-for-byte as before - only an explicit padding* property
|
|
1025
|
+
* changes anything.
|
|
1026
|
+
*/
|
|
1027
|
+
sl-button[size='small']::part(label) {
|
|
1028
|
+
padding-top: var(--axebow-button-padding-top, 0);
|
|
1029
|
+
padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small));
|
|
1030
|
+
padding-bottom: var(--axebow-button-padding-bottom, 0);
|
|
1031
|
+
padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small));
|
|
1032
|
+
}
|
|
1033
|
+
sl-button[size='medium']::part(label) {
|
|
1034
|
+
padding-top: var(--axebow-button-padding-top, 0);
|
|
1035
|
+
padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium));
|
|
1036
|
+
padding-bottom: var(--axebow-button-padding-bottom, 0);
|
|
1037
|
+
padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium));
|
|
1038
|
+
}
|
|
1039
|
+
sl-button[size='large']::part(label) {
|
|
1040
|
+
padding-top: var(--axebow-button-padding-top, 0);
|
|
1041
|
+
padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large));
|
|
1042
|
+
padding-bottom: var(--axebow-button-padding-bottom, 0);
|
|
1043
|
+
padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large));
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1009
1046
|
/**
|
|
1010
1047
|
* Hover is always a plain recolor to axebow-gray, no matter the
|
|
1011
1048
|
* variant - nothing else about the button's structure changes.
|
|
@@ -1124,12 +1161,29 @@ var AxebowButton = class AxebowButton extends LitElement {
|
|
|
1124
1161
|
border-color: var(--axebow-gray);
|
|
1125
1162
|
outline-color: var(--axebow-gray);
|
|
1126
1163
|
}
|
|
1164
|
+
|
|
1165
|
+
/**
|
|
1166
|
+
* Boxed hover look shared with axebow-more-actions, opt-in via
|
|
1167
|
+
* hoverStyle="border". Declared last so it wins over every
|
|
1168
|
+
* variant's own hover rule above, regardless of which variant
|
|
1169
|
+
* it's combined with.
|
|
1170
|
+
*/
|
|
1171
|
+
sl-button[hoverstyle='border']:hover::part(base) {
|
|
1172
|
+
background-color: var(--axebow-anti-flash-white);
|
|
1173
|
+
border-radius: 0.5rem;
|
|
1174
|
+
outline-color: transparent;
|
|
1175
|
+
border-color: transparent;
|
|
1176
|
+
}
|
|
1177
|
+
sl-button[hoverstyle='border']:hover::part(label) {
|
|
1178
|
+
color: var(--axebow-gray);
|
|
1179
|
+
}
|
|
1127
1180
|
`];
|
|
1128
1181
|
}
|
|
1129
1182
|
render() {
|
|
1130
1183
|
return html`
|
|
1131
1184
|
<sl-button
|
|
1132
1185
|
exportparts="base, label, prefix, suffix, caret"
|
|
1186
|
+
hoverstyle=${this.hoverStyle}
|
|
1133
1187
|
variant=${this.variant}
|
|
1134
1188
|
size=${this.size}
|
|
1135
1189
|
?outline=${this.outline}
|
|
@@ -1190,6 +1244,11 @@ __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0)
|
|
|
1190
1244
|
__decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
|
|
1191
1245
|
__decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
|
|
1192
1246
|
__decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
|
|
1247
|
+
__decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
|
|
1248
|
+
__decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
|
|
1249
|
+
__decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
|
|
1250
|
+
__decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
|
|
1251
|
+
__decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
|
|
1193
1252
|
AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
|
|
1194
1253
|
//#endregion
|
|
1195
1254
|
//#region src/components/axebow-search/axebow-search.ts
|
|
@@ -3010,20 +3069,21 @@ var AxebowCardActionBanner = class AxebowCardActionBanner extends LitElement {
|
|
|
3010
3069
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
3011
3070
|
:host { display: block; }
|
|
3012
3071
|
.tertiary-bg { background-color: color-mix(in srgb, var(--axebow-tertiary) 10%, white); }
|
|
3072
|
+
.clickable { cursor: pointer; }
|
|
3073
|
+
.clickable:hover { background-color: var(--axebow-base); --axebow-tertiary: var(--axebow-gray); }
|
|
3013
3074
|
axebow-button::part(label) { color: var(--axebow-tertiary); font-weight: 600; display: flex; align-items: center; gap: 2px; }
|
|
3014
|
-
axebow-button::part(base) { padding: 0; height: auto; min-height: unset;
|
|
3015
|
-
axebow-button:hover::part(base) { background-color: var(--axebow-base); border-radius: 0.375rem; }
|
|
3016
|
-
axebow-button:hover::part(label) { color: var(--axebow-gray); }
|
|
3075
|
+
axebow-button::part(base) { padding: 0; height: auto; min-height: unset; pointer-events: none; background-color: transparent; }
|
|
3017
3076
|
axebow-icon { display: inline-flex; align-items: center; line-height: 1; }
|
|
3018
3077
|
`];
|
|
3019
3078
|
}
|
|
3020
3079
|
render() {
|
|
3021
3080
|
return html`
|
|
3022
3081
|
<div
|
|
3023
|
-
class="${this.isPlainRole ? "" : "tertiary-bg"} flex items-center justify-
|
|
3082
|
+
class="${this.isPlainRole ? "" : "tertiary-bg clickable"} flex items-center justify-center gap-1 w-87 h-6.5 box-border px-3 text-sm text-center overflow-hidden"
|
|
3083
|
+
@click=${this.isPlainRole ? void 0 : this._onClick}
|
|
3024
3084
|
>
|
|
3025
3085
|
${this.isPlainRole ? html`<span class="text-(--axebow-gray)">${this.notAllowedLabel}</span>` : html`
|
|
3026
|
-
<axebow-button variant="text" size="small"
|
|
3086
|
+
<axebow-button variant="text" size="small">
|
|
3027
3087
|
${this.label}
|
|
3028
3088
|
<axebow-icon iconName="arrow_forward" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
3029
3089
|
</axebow-button>
|
|
@@ -3119,7 +3179,15 @@ var AxebowCardFooter = class AxebowCardFooter extends LitElement {
|
|
|
3119
3179
|
.moreActionsLabel=${this.moreActionsLabel}
|
|
3120
3180
|
@toggled=${this._onToggled}
|
|
3121
3181
|
></axebow-more-actions>
|
|
3122
|
-
` : showAction ? html`<axebow-button
|
|
3182
|
+
` : showAction ? html`<axebow-button
|
|
3183
|
+
variant="text"
|
|
3184
|
+
size="medium"
|
|
3185
|
+
hoverStyle="border"
|
|
3186
|
+
paddingLeft="0.5rem"
|
|
3187
|
+
paddingRight="0.5rem"
|
|
3188
|
+
@click=${this._onAction}
|
|
3189
|
+
>${this.actionLabel}</axebow-button
|
|
3190
|
+
>` : ""}
|
|
3123
3191
|
</div>
|
|
3124
3192
|
`;
|
|
3125
3193
|
}
|