@vollowx/seele 0.12.9 → 0.12.10
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/package.json
CHANGED
package/src/all.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// TODO: export core, base elements, mixins and controllers
|
|
2
2
|
export { M3Autocomplete } from './m3/autocomplete/autocomplete.js';
|
|
3
|
+
export { M3Badge } from './m3/badge/badge.js';
|
|
3
4
|
export { M3Button } from './m3/button/common-button.js';
|
|
4
5
|
export { M3ButtonToggle } from './m3/button/common-button-toggle.js';
|
|
5
6
|
export { M3IconButton } from './m3/button/icon-button.js';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
export const badgeStyles = css`:host{--md-badge-offset:0}[part~=root]{vertical-align:middle;flex-shrink:0;display:inline-flex;position:relative}[part~=badge]{--md-badge-scale:1;top:var(--md-badge-offset);right:var(--md-badge-offset);box-sizing:border-box;font:var(--md-sys-typography-label-small);z-index:1;background-color:var(--md-sys-color-error);min-width:16px;height:16px;color:var(--md-sys-color-on-error);transform:scale(var(--md-badge-scale)) translate(50%, -50%);transform-origin:100% 0;transition:transform var(--md-sys-motion-std-effects-fast-duration) var(--md-sys-motion-std-effects-fast), color var(--md-sys-motion-std-effects-fast-duration) var(--md-sys-motion-std-effects-fast);pointer-events:none;border-radius:8px;flex-flow:wrap;justify-content:center;align-items:center;padding:0 2.5px;display:flex;position:absolute}:host([small]) [part~=badge]{--md-badge-scale:.375;color:#0000}:host([hidden]){display:hidden}:host([value="0"]:not([show-zero])) [part~=badge],:host([hidden]) [part~=badge]{--md-badge-scale:0}:host([circle]){--md-badge-offset:14%}:host([left]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl]) [part~=badge]{right:auto;left:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(-50%, -50%);transform-origin:0 0}:host([bottom]) [part~=badge]{top:auto;bottom:var(--md-badge-offset);transform:scale(var(--md-badge-scale)) translate(50%, 50%);transform-origin:100% 100%}:host([left][bottom]:not([dir=rtl])) [part~=badge],:host(:not([left])[dir=rtl][bottom]) [part~=badge]{transform:scale(var(--md-badge-scale)) translate(-50%, 50%);transform-origin:0 100%}`;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
|
+
import { LitElement, html } from 'lit';
|
|
3
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
4
|
+
import { badgeStyles } from './badge-styles.css.js';
|
|
5
|
+
export class M3Badge extends LitElement {
|
|
6
|
+
static{
|
|
7
|
+
this.styles = [
|
|
8
|
+
badgeStyles
|
|
9
|
+
];
|
|
10
|
+
}
|
|
11
|
+
render() {
|
|
12
|
+
return html`
|
|
13
|
+
<div part="root">
|
|
14
|
+
<slot></slot>
|
|
15
|
+
<span part="badge">${this.#getDisplayValue()}</span>
|
|
16
|
+
</div>
|
|
17
|
+
`;
|
|
18
|
+
}
|
|
19
|
+
#getDisplayValue() {
|
|
20
|
+
const value = this.value;
|
|
21
|
+
const max = this.max;
|
|
22
|
+
if (max !== 0 && value > max) {
|
|
23
|
+
return `${max}+`;
|
|
24
|
+
}
|
|
25
|
+
return value;
|
|
26
|
+
}
|
|
27
|
+
constructor(...args){
|
|
28
|
+
super(...args), this.showZero = false, this.left = false, this.bottom = false;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
_ts_decorate([
|
|
32
|
+
property({
|
|
33
|
+
type: Number
|
|
34
|
+
})
|
|
35
|
+
], M3Badge.prototype, "value", void 0);
|
|
36
|
+
_ts_decorate([
|
|
37
|
+
property({
|
|
38
|
+
type: Number
|
|
39
|
+
})
|
|
40
|
+
], M3Badge.prototype, "max", void 0);
|
|
41
|
+
_ts_decorate([
|
|
42
|
+
property({
|
|
43
|
+
type: Boolean,
|
|
44
|
+
reflect: true,
|
|
45
|
+
attribute: 'show-zero'
|
|
46
|
+
})
|
|
47
|
+
], M3Badge.prototype, "showZero", void 0);
|
|
48
|
+
_ts_decorate([
|
|
49
|
+
property({
|
|
50
|
+
type: Boolean,
|
|
51
|
+
reflect: true
|
|
52
|
+
})
|
|
53
|
+
], M3Badge.prototype, "left", void 0);
|
|
54
|
+
_ts_decorate([
|
|
55
|
+
property({
|
|
56
|
+
type: Boolean,
|
|
57
|
+
reflect: true
|
|
58
|
+
})
|
|
59
|
+
], M3Badge.prototype, "bottom", void 0);
|
|
60
|
+
_ts_decorate([
|
|
61
|
+
query('[part~="badge"]')
|
|
62
|
+
], M3Badge.prototype, "$badge", void 0);
|
|
63
|
+
M3Badge = _ts_decorate([
|
|
64
|
+
customElement('md-badge')
|
|
65
|
+
], M3Badge);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const tabStyles = css`:host{--md-focus-ring-shape:
|
|
2
|
+
export const tabStyles = css`:host{--md-focus-ring-shape:12px;box-sizing:border-box;color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:var(--md-sys-typography-title-small);-webkit-tap-highlight-color:transparent;text-wrap-mode:nowrap;user-select:none;-webkit-user-select-:none;outline:none;flex-shrink:0;justify-content:center;padding:0 16px;display:inline-flex;position:relative}:host([selected]){color:var(--_tab-selected-color)}:host([selected]) md-focus-ring{margin-bottom:calc(var(--_tab-indicator-height) + 2px)}[part=content]{flex-direction:var(--_tab-flex-dir,row);align-items:center;gap:var(--_tab-gap,8px);height:var(--_tab-height,48px);justify-content:center;display:inline-flex}[part~=icon]{fill:currentColor;block-size:1em;inline-size:1em;font-size:24px}`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{background-color:var(--md-sys-color-primary);
|
|
2
|
+
export const tabsStyles = css`:host{--_tab-selected-color:var(--md-sys-color-primary);--_tab-indicator-height:3px;border-bottom:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;scroll-behavior:smooth;scrollbar-width:none;display:block;position:relative;overflow:auto hidden}[part=tablist]{display:flex}[part=indicator]{height:var(--_tab-indicator-height);background-color:var(--md-sys-color-primary);transition:var(--md-sys-motion-std-effects-slow-duration) var(--md-sys-motion-std-effects-slow);will-change:left, width;border-radius:3px 3px 0 0;position:absolute;bottom:0}::slotted(*){flex:1}:host([secondary]){--_tab-selected-color:var(--md-sys-color-on-surface);--_tab-indicator-height:2px}:host([secondary]) [part=indicator]{border-radius:0}:host([iconsabove]){--_tab-flex-dir:column;--_tab-height:64px;--_tab-gap:2px}`;
|
package/src/m3/tab/tabs.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
4
|
+
import { computePosition, autoUpdate } from '@floating-ui/dom';
|
|
4
5
|
import { Tabs } from '../../base/tabs.js';
|
|
5
6
|
import { tabsStyles } from './tabs-styles.css.js';
|
|
6
7
|
export class M3Tabs extends Tabs {
|
|
8
|
+
#cleanup;
|
|
7
9
|
static{
|
|
8
10
|
this.styles = [
|
|
9
11
|
tabsStyles
|
|
@@ -17,12 +19,25 @@ export class M3Tabs extends Tabs {
|
|
|
17
19
|
}
|
|
18
20
|
selectTab(selectedTab) {
|
|
19
21
|
super.selectTab(selectedTab);
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
// It's kinda ridiculous to use floating-ui on such simple element, but I
|
|
23
|
+
// do not want to have indicators in each tab either.
|
|
24
|
+
// Another solution is using CSS anchor, which does not work across Shadow
|
|
25
|
+
// DOM for now.
|
|
26
|
+
this.#cleanup?.();
|
|
27
|
+
const updatePosition = ()=>{
|
|
28
|
+
computePosition(selectedTab, this.$indicator, {
|
|
29
|
+
placement: 'bottom',
|
|
30
|
+
strategy: 'absolute'
|
|
31
|
+
}).then(({ x })=>{
|
|
32
|
+
const left = this.secondary ? x : x + 2;
|
|
33
|
+
const width = this.secondary ? selectedTab.offsetWidth : selectedTab.$content.offsetWidth - 4;
|
|
34
|
+
Object.assign(this.$indicator.style, {
|
|
35
|
+
left: `${left}px`,
|
|
36
|
+
width: `${width}px`
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
this.#cleanup = autoUpdate(selectedTab, this.$indicator, updatePosition);
|
|
26
41
|
}
|
|
27
42
|
constructor(...args){
|
|
28
43
|
super(...args), this.secondary = false, this.iconsAbove = false;
|