{
* ```
*/
redirect(
- route: string | Partial
| undefined,
- pushState: PushState = true,
- keepSectionSlice = 0,
+ route: string | Partial | undefined,
+ pushState: PushState = true,
+ keepSectionSlice = 0,
): void {
if (route == null) return;
this._logger.logMethodArgs?.('redirect', route);
@@ -100,7 +100,7 @@ export class AlwatrRouter extends AlwatrObservable {
if (pushState === 'replace') {
history.replaceState(null, '', url);
}
- else {
+ else {
history.pushState(null, '', url);
}
}
@@ -112,9 +112,9 @@ export class AlwatrRouter extends AlwatrObservable {
this._logger.logMethod?.('makeRouteContext');
const sectionList = location.pathname
- .split('/')
- .map(this._decodeURIComponent) // decode must be after split because encoded '/' maybe include in values.
- .filter((section) => section.trim() !== '');
+ .split('/')
+ .map(this._decodeURIComponent) // decode must be after split because encoded '/' maybe include in values.
+ .filter((section) => section.trim() !== '');
const queryParamList = this._parseQueryParamString(location.search);
@@ -172,7 +172,7 @@ export class AlwatrRouter extends AlwatrObservable {
try {
return decodeURIComponent(val);
}
- catch (err) {
+ catch (err) {
return val;
}
}
@@ -196,7 +196,7 @@ export class AlwatrRouter extends AlwatrObservable {
if (enable) {
globalThis.addEventListener('popstate', this._popstateHandler);
}
- else {
+ else {
globalThis.removeEventListener('popstate', this._popstateHandler);
}
this._$popstateTrigger = enable;
@@ -283,7 +283,7 @@ export class AlwatrRouter extends AlwatrObservable {
if (enable) {
window.document.addEventListener('click', this._clickHandler);
}
- else {
+ else {
window.document.removeEventListener('click', this._clickHandler);
}
this._$clickTrigger = enable;
diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md
index e91d3023..0387b46c 100644
--- a/packages/style/CHANGELOG.md
+++ b/packages/style/CHANGELOG.md
@@ -11,20 +11,20 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
### Bug Fixes
-* **style:** change backdrop to scrim ([e41d771](https://github.com/AliMD/fract/commit/e41d771082933b39035bb91b1fbc6486f4d803a7))
-* **style:** import type issue ([19fc273](https://github.com/AliMD/fract/commit/19fc273310c2e32beb1d48224bcebb9f1dd75153))
-* **style:** outline colors ([e948464](https://github.com/AliMD/fract/commit/e9484640b2b11ad2e010fcad2b729efb5e0eeb39))
-* **style:** typography fontWeight ([74fc62b](https://github.com/AliMD/fract/commit/74fc62b6bbb009090c58bde3db9bfa841fa0131c))
+- **style:** change backdrop to scrim ([e41d771](https://github.com/AliMD/fract/commit/e41d771082933b39035bb91b1fbc6486f4d803a7))
+- **style:** import type issue ([19fc273](https://github.com/AliMD/fract/commit/19fc273310c2e32beb1d48224bcebb9f1dd75153))
+- **style:** outline colors ([e948464](https://github.com/AliMD/fract/commit/e9484640b2b11ad2e010fcad2b729efb5e0eeb39))
+- **style:** typography fontWeight ([74fc62b](https://github.com/AliMD/fract/commit/74fc62b6bbb009090c58bde3db9bfa841fa0131c))
### Features
-* **style:** add `stateLayerPlugin` ([db076dd](https://github.com/AliMD/fract/commit/db076dd5f3af851e5eac3e1c68d7b1e2cb7cbc0d))
-* **style:** add new color h260 ([c128609](https://github.com/AliMD/fract/commit/c128609963df0aba508f239799ef8c52ea066c40))
-* **style:** add our z-index ([af5c97f](https://github.com/AliMD/fract/commit/af5c97f6f9fb439ec414e903497f416ddd2a76de))
-* **style:** add ui-kit to tailwind content ([8aeb3c9](https://github.com/AliMD/fract/commit/8aeb3c90df1e87c1d7e128a0b50662727417e679))
-* **style:** elevation util ([29412d6](https://github.com/AliMD/fract/commit/29412d6541ce63e2dbf4078a81b308c1b7a6020c))
-* **style:** enhance stateHover, stateActive ([0aa3ee1](https://github.com/AliMD/fract/commit/0aa3ee1ed13183921aed058502fd961f2902e676))
-* **style:** new package for alwatr 2 css system ([9b9c791](https://github.com/AliMD/fract/commit/9b9c791570f23ec14d724528b5173cfe93a5e46b))
-* **style:** screen breakpoints ([839b149](https://github.com/AliMD/fract/commit/839b14951665fbb109a46713d528e0070da46e4e))
-* **style:** update material 3 colors ([7d8d755](https://github.com/AliMD/fract/commit/7d8d75557d927d045889a3463562e50093edbbdc))
-* update postcss-preset-env and browserlist ([b83fcb8](https://github.com/AliMD/fract/commit/b83fcb8e7d3f9cfa41f6e846444591642d7ebe6c))
+- **style:** add `stateLayerPlugin` ([db076dd](https://github.com/AliMD/fract/commit/db076dd5f3af851e5eac3e1c68d7b1e2cb7cbc0d))
+- **style:** add new color h260 ([c128609](https://github.com/AliMD/fract/commit/c128609963df0aba508f239799ef8c52ea066c40))
+- **style:** add our z-index ([af5c97f](https://github.com/AliMD/fract/commit/af5c97f6f9fb439ec414e903497f416ddd2a76de))
+- **style:** add ui-kit to tailwind content ([8aeb3c9](https://github.com/AliMD/fract/commit/8aeb3c90df1e87c1d7e128a0b50662727417e679))
+- **style:** elevation util ([29412d6](https://github.com/AliMD/fract/commit/29412d6541ce63e2dbf4078a81b308c1b7a6020c))
+- **style:** enhance stateHover, stateActive ([0aa3ee1](https://github.com/AliMD/fract/commit/0aa3ee1ed13183921aed058502fd961f2902e676))
+- **style:** new package for alwatr 2 css system ([9b9c791](https://github.com/AliMD/fract/commit/9b9c791570f23ec14d724528b5173cfe93a5e46b))
+- **style:** screen breakpoints ([839b149](https://github.com/AliMD/fract/commit/839b14951665fbb109a46713d528e0070da46e4e))
+- **style:** update material 3 colors ([7d8d755](https://github.com/AliMD/fract/commit/7d8d75557d927d045889a3463562e50093edbbdc))
+- update postcss-preset-env and browserlist ([b83fcb8](https://github.com/AliMD/fract/commit/b83fcb8e7d3f9cfa41f6e846444591642d7ebe6c))
diff --git a/packages/style/lib/state-layer.ts b/packages/style/lib/state-layer.ts
index 6c37ce77..9fef9202 100644
--- a/packages/style/lib/state-layer.ts
+++ b/packages/style/lib/state-layer.ts
@@ -11,50 +11,50 @@ const stateOpacity = {
export const stateLayerPlugin = plugin(({matchUtilities, theme}) => {
matchUtilities(
- {
- state: (value) => {
- if (typeof value !== 'function') return null;
- const makeColor = value as unknown as (options: {opacityValue: number}) => string;
- const colors = {
- base: makeColor({opacityValue: 1}),
- hover: makeColor({opacityValue: stateOpacity.hover}),
- focus: makeColor({opacityValue: stateOpacity.focus}),
- pressed: makeColor({opacityValue: stateOpacity.pressed}),
- };
- return {
- 'color': colors.base,
- '&:hover': {
- backgroundImage: `linear-gradient(${colors.hover}, ${colors.hover})`,
- },
- '&:active': {
- backgroundImage: `linear-gradient(${colors.pressed}, ${colors.pressed})`,
- },
- '&:focus:not(:hover), &:focus-within:not(:hover)': {
- 'backgroundImage': `linear-gradient(${colors.focus}, ${colors.focus})`,
- },
- };
- },
- stateHover: (value) => {
- if (typeof value !== 'function') return null;
- const makeColor = value as unknown as (options: {opacityValue: number}) => string;
- const color = makeColor({opacityValue: stateOpacity.hover});
- return {
- backgroundImage: `linear-gradient(${color}, ${color})`,
- };
- },
- stateActive: (value) => {
- if (typeof value !== 'function') return null;
- const makeColor = value as unknown as (options: {opacityValue: number}) => string;
- const color = makeColor({opacityValue: stateOpacity.pressed});
- return {
- backgroundImage: `linear-gradient(${color}, ${color})`,
- };
- },
+ {
+ state: (value) => {
+ if (typeof value !== 'function') return null;
+ const makeColor = value as unknown as (options: {opacityValue: number}) => string;
+ const colors = {
+ base: makeColor({opacityValue: 1}),
+ hover: makeColor({opacityValue: stateOpacity.hover}),
+ focus: makeColor({opacityValue: stateOpacity.focus}),
+ pressed: makeColor({opacityValue: stateOpacity.pressed}),
+ };
+ return {
+ color: colors.base,
+ '&:hover': {
+ backgroundImage: `linear-gradient(${colors.hover}, ${colors.hover})`,
+ },
+ '&:active': {
+ backgroundImage: `linear-gradient(${colors.pressed}, ${colors.pressed})`,
+ },
+ '&:focus:not(:hover), &:focus-within:not(:hover)': {
+ backgroundImage: `linear-gradient(${colors.focus}, ${colors.focus})`,
+ },
+ };
},
- {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- values: (({DEFAULT: _, ...colors}) => colors)(flattenColorPalette(theme('colors'))),
- type: 'color',
+ stateHover: (value) => {
+ if (typeof value !== 'function') return null;
+ const makeColor = value as unknown as (options: {opacityValue: number}) => string;
+ const color = makeColor({opacityValue: stateOpacity.hover});
+ return {
+ backgroundImage: `linear-gradient(${color}, ${color})`,
+ };
},
+ stateActive: (value) => {
+ if (typeof value !== 'function') return null;
+ const makeColor = value as unknown as (options: {opacityValue: number}) => string;
+ const color = makeColor({opacityValue: stateOpacity.pressed});
+ return {
+ backgroundImage: `linear-gradient(${color}, ${color})`,
+ };
+ },
+ },
+ {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ values: (({DEFAULT: _, ...colors}) => colors)(flattenColorPalette(theme('colors'))),
+ type: 'color',
+ },
);
});
diff --git a/packages/style/lib/z-index.ts b/packages/style/lib/z-index.ts
index bafa1abb..27a1089f 100644
--- a/packages/style/lib/z-index.ts
+++ b/packages/style/lib/z-index.ts
@@ -2,18 +2,18 @@ import type {Config} from 'tailwindcss';
export const zIndexTheme: Config['theme'] = {
zIndex: {
- 'bottomness': '-900',
- 'below': '-1',
- 'default': '1',
- 'above': '2',
- 'dropdown': '100',
- 'sticky': '200',
- 'fixed': '300',
- 'scrim': '400',
- 'modal': '500',
- 'popover': '600',
- 'snackbar': '700',
- 'tooltip': '800',
- 'topness': '900',
+ bottomness: '-900',
+ below: '-1',
+ default: '1',
+ above: '2',
+ dropdown: '100',
+ sticky: '200',
+ fixed: '300',
+ scrim: '400',
+ modal: '500',
+ popover: '600',
+ snackbar: '700',
+ tooltip: '800',
+ topness: '900',
},
};
diff --git a/packages/style/tsconfig.json b/packages/style/tsconfig.json
index beb10a00..5e69b17b 100644
--- a/packages/style/tsconfig.json
+++ b/packages/style/tsconfig.json
@@ -4,7 +4,7 @@
"composite": true,
"tsBuildInfoFile": ".tsbuildinfo",
"rootDir": ".",
- "outDir": ".",
+ "outDir": "."
},
"include": ["**/*.ts"],
diff --git a/packages/ui-kit/fab/extended-fab.ts b/packages/ui-kit/fab/extended-fab.ts
index 12c7afcd..51c44b7e 100644
--- a/packages/ui-kit/fab/extended-fab.ts
+++ b/packages/ui-kit/fab/extended-fab.ts
@@ -20,7 +20,9 @@ export class AlwatrFabExtendedDirective extends AlwatrDirective {
gap-2 rounded-2xl bg-primaryContainer px-4 text-labelLarge elevation-3
state-onPrimaryContainer hover:elevation-4 focus:elevation-3 active:elevation-3
[&>.alwatr-icon]:h-6 [&>.alwatr-icon]:w-6"
- >${content.label}${content.icon ? icon(content.icon) : nothing} `;
+ >
+ ${content.label}${content.icon ? icon(content.icon) : nothing}
+ `;
}
}
diff --git a/packages/ui-kit/fab/fab.ts b/packages/ui-kit/fab/fab.ts
index 6ecbfca9..fd194bd0 100644
--- a/packages/ui-kit/fab/fab.ts
+++ b/packages/ui-kit/fab/fab.ts
@@ -3,7 +3,7 @@ import {AlwatrDirective, classMap, directive, html, type PartInfo} from '@alwatr
import {icon, IconContent} from '../icon/icon.js';
export interface FabContent {
- icon: IconContent
+ icon: IconContent;
/**
* @defaultValue 'medium'
@@ -21,13 +21,14 @@ export class AlwatrFabDirective extends AlwatrDirective {
content.type ??= 'medium';
return html` `;
diff --git a/packages/ui-kit/icon-button/icon-button.ts b/packages/ui-kit/icon-button/icon-button.ts
index 4f680e37..6deae179 100644
--- a/packages/ui-kit/icon-button/icon-button.ts
+++ b/packages/ui-kit/icon-button/icon-button.ts
@@ -7,4 +7,10 @@ export interface IconButtonContent extends IconContent {
disabled?: boolean;
}
-export const iconButton = (content: IconButtonContent) => html``;
+export const iconButton = (content: IconButtonContent) =>
+ html``;
diff --git a/packages/ui-kit/icon/icon.ts b/packages/ui-kit/icon/icon.ts
index 7155c7e1..04518c82 100644
--- a/packages/ui-kit/icon/icon.ts
+++ b/packages/ui-kit/icon/icon.ts
@@ -23,13 +23,17 @@ export class IconDirective extends AlwatrDynamicDirective {
});
return this._renderSvg();
}
- else {
+ else {
return this._renderSvg(content.svg, content.flipIconInRtl ? 'rtl:-scale-x-100' : '');
}
}
protected _renderSvg(svg?: string, customClass = ''): unknown {
- return html`${svg ? unsafeSVG(svg) : nothing}
`;
+ return html`
+ ${svg ? unsafeSVG(svg) : nothing}
+
`;
}
}
diff --git a/packages/ui-kit/navigation-bar/navigation-bar.ts b/packages/ui-kit/navigation-bar/navigation-bar.ts
index 3811c477..97a8e472 100644
--- a/packages/ui-kit/navigation-bar/navigation-bar.ts
+++ b/packages/ui-kit/navigation-bar/navigation-bar.ts
@@ -5,7 +5,9 @@ import {icon, type IconContent} from '../icon/icon.js';
export interface NavigationBarContent {
selected: string;
- itemList: Record`;
+ return html` `;
}
protected _renderNavItems(content: NavigationBarContent): unknown {
const navItemList = mapObject(content.itemList, (item, key) => {
const _label = item.label ?? l10n.message(item.labelKey);
- return html`${icon(item.icon)}
${when(_label, () => html`
- ${_label}
`)}`;
+ >
+ ${icon(item.icon)}
+
+ ${when(_label, () => html`${_label}
`)}`;
});
return navItemList;
diff --git a/packages/ui-kit/navigation-drawer/navigation-drawer.ts b/packages/ui-kit/navigation-drawer/navigation-drawer.ts
index 3b032f38..6fb271e0 100644
--- a/packages/ui-kit/navigation-drawer/navigation-drawer.ts
+++ b/packages/ui-kit/navigation-drawer/navigation-drawer.ts
@@ -6,7 +6,9 @@ import {icon, IconContent} from '../icon/icon.js';
export interface NavigationDrawerContent {
selected: string;
title: string;
- itemList: Record {
const _label = item.label ?? l10n.message(item.labelKey);
return html`${icon(item.icon)}${when(_label, () => html`${_label}
`)}
- ${when(item.badge != null, () => html`${item.badge}
`)}`;
+ class="${classMap({
+ 'stateActive-onSecondaryContainer text-onSecondaryContainer': content.selected === key,
+ })} flex h-14 cursor-pointer select-none flex-nowrap items-center
+ rounded-full px-3 hover:bg-secondaryContainer hover:text-onSecondaryContainer
+ hover:stateHover-onSecondaryContainer [&>.alwatr-icon]:mx-1 [&>.alwatr-icon]:h-6
+ [&>.alwatr-icon]:w-6"
+ >
+ ${icon(item.icon)}${when(_label, () => html`${_label}
`)}
+ ${when(item.badge != null, () => html`${item.badge}
`)}
+ `;
});
- return html``;
+ return html``;
}
}
diff --git a/packages/ui-kit/navigation-rail/navigation-rail.ts b/packages/ui-kit/navigation-rail/navigation-rail.ts
index 281440da..b2e161da 100644
--- a/packages/ui-kit/navigation-rail/navigation-rail.ts
+++ b/packages/ui-kit/navigation-rail/navigation-rail.ts
@@ -5,7 +5,9 @@ import {icon, type IconContent} from '../icon/icon.js';
export interface NavigationRailContent {
selected: string;
- itemList: Record`;
+ >
+
+ `;
}
protected _renderNavItemList(content: NavigationRailContent): unknown {
const itemList = mapObject(content.itemList, (item, key) => {
const _label = item.label ?? l10n.message(item.labelKey);
return html`
- ${icon(item.icon)}
- ${when(_label, () => html`${_label}
`)}`;
+
+ ${icon(item.icon)}
+
+ ${when(
+ _label,
+ () =>
+ html`
+ ${_label}
+
`,
+ )}
+ `;
});
- return html``;
+ return html``;
}
}
diff --git a/packages/ui-kit/top-app-bar/center-top-app-bar.ts b/packages/ui-kit/top-app-bar/center-top-app-bar.ts
index c00f2c74..cd62bb2f 100644
--- a/packages/ui-kit/top-app-bar/center-top-app-bar.ts
+++ b/packages/ui-kit/top-app-bar/center-top-app-bar.ts
@@ -12,22 +12,25 @@ export interface CenterTopAppBarContent {
elevated?: number;
}
-export const centerTopAppBar = (content: CenterTopAppBarContent) => html``;
export const endIconListTemplate = (iconList?: IconButtonContent[]) => {
return iconList?.map((icon) => iconButton(icon));
};
-
diff --git a/packages/ui-kit/top-app-bar/large-top-app-bar.ts b/packages/ui-kit/top-app-bar/large-top-app-bar.ts
index 1c410de0..13413833 100644
--- a/packages/ui-kit/top-app-bar/large-top-app-bar.ts
+++ b/packages/ui-kit/top-app-bar/large-top-app-bar.ts
@@ -3,7 +3,10 @@ import {html, nothing} from '@alwatr/fract';
import {endIconListTemplate, type CenterTopAppBarContent} from './center-top-app-bar.js';
import {iconButton} from '../icon-button/icon-button.js';
-export const centerTopAppBar = (content: CenterTopAppBarContent) => html`
+export const centerTopAppBar = (content: CenterTopAppBarContent) =>
+ html`
@@ -13,7 +16,9 @@ export const centerTopAppBar = (content: CenterTopAppBarContent) => html`
-->
${endIconListTemplate(content.endIconList)}
-
-
-`;
-
+
+ `;
diff --git a/packages/ui-kit/top-app-bar/medium-top-app-bar.ts b/packages/ui-kit/top-app-bar/medium-top-app-bar.ts
index d7ac51a5..b37f8d52 100644
--- a/packages/ui-kit/top-app-bar/medium-top-app-bar.ts
+++ b/packages/ui-kit/top-app-bar/medium-top-app-bar.ts
@@ -3,8 +3,10 @@ import {html, nothing} from '@alwatr/fract';
import {endIconListTemplate, type CenterTopAppBarContent} from './center-top-app-bar.js';
import {iconButton} from '../icon-button/icon-button.js';
-
-export const mediumTopAppBar = (content: CenterTopAppBarContent) => html`
+export const mediumTopAppBar = (content: CenterTopAppBarContent) =>
+ html`
@@ -14,7 +16,9 @@ export const mediumTopAppBar = (content: CenterTopAppBarContent) => html`
-->
${endIconListTemplate(content.endIconList)}
-
-
-`;
-
+
+ `;
diff --git a/packages/ui-kit/tsconfig.json b/packages/ui-kit/tsconfig.json
index 02d90cdd..c77c8433 100644
--- a/packages/ui-kit/tsconfig.json
+++ b/packages/ui-kit/tsconfig.json
@@ -10,12 +10,10 @@
"name": "ts-lit-plugin",
"strict": true
}
- ],
+ ]
},
// files, include and exclude from the inheriting config are always overwritten.
"include": ["**/*.ts"],
"exclude": [],
- "references": [
- {"path": "../fract"},
- ]
+ "references": [{"path": "../fract"}]
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 9c7188e7..5c32f898 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,3 @@
-import {tailwindConfig} from '@alwatr/style'
+import {tailwindConfig} from '@alwatr/style';
export default tailwindConfig;
diff --git a/tsconfig.json b/tsconfig.json
index 6d6d623f..96dd76ed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
"name": "ts-lit-plugin",
"strict": true
}
- ],
+ ]
},
"files": [],
"exclude": [],
@@ -25,6 +25,6 @@
{"path": "./packages/demo-pwa"},
// demo
- {"path": "./demo"},
+ {"path": "./demo"}
]
}