From 03c2dc1e64562815505b468c761ac245554470ed Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 1 Mar 2023 15:49:17 +0330 Subject: [PATCH 1/4] feat(button): click signal with detail --- core/type/src/event-signal.ts | 5 ++++- ui/ui-kit/src/button/button.ts | 6 +++++- ui/ui-kit/src/button/icon-button.ts | 20 +++++++++++++------- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/core/type/src/event-signal.ts b/core/type/src/event-signal.ts index ec7ad40e6..0a1699f9e 100644 --- a/core/type/src/event-signal.ts +++ b/core/type/src/event-signal.ts @@ -1,7 +1,10 @@ -export type ClickSignalType = { +import type {Stringifyable} from './type-helper.js'; + +export type ClickSignalType = { readonly x: number; readonly y: number; readonly altKey: boolean; readonly ctrlKey: boolean; readonly metaKey: boolean; + detail: T; }; diff --git a/ui/ui-kit/src/button/button.ts b/ui/ui-kit/src/button/button.ts index ecb0b2236..a4f8de574 100644 --- a/ui/ui-kit/src/button/button.ts +++ b/ui/ui-kit/src/button/button.ts @@ -4,7 +4,7 @@ import {eventTrigger} from '@alwatr/signal'; import {AlwatrSurface} from '../card/surface.js'; -import type {ClickSignalType} from '@alwatr/type'; +import type {ClickSignalType, Stringifyable} from '@alwatr/type'; declare global { interface HTMLElementTagNameMap { @@ -48,6 +48,9 @@ export class AlwatrButton extends AlwatrSurface { @property({attribute: 'signal-id'}) signalId?: string; + @property({attribute: false}) + detail?: Stringifyable; + override connectedCallback(): void { super.connectedCallback(); this.setAttribute('stated', ''); @@ -81,6 +84,7 @@ export class AlwatrButton extends AlwatrSurface { altKey: event.altKey, ctrlKey: event.ctrlKey, metaKey: event.metaKey, + detail: this.detail, }); } } diff --git a/ui/ui-kit/src/button/icon-button.ts b/ui/ui-kit/src/button/icon-button.ts index fd7b5e8bf..ceca8c708 100644 --- a/ui/ui-kit/src/button/icon-button.ts +++ b/ui/ui-kit/src/button/icon-button.ts @@ -4,7 +4,7 @@ import {eventTrigger} from '@alwatr/signal'; import {AlwatrSurface} from '../card/surface.js'; -import type {StringifyableRecord, ClickSignalType} from '@alwatr/type'; +import type {StringifyableRecord, ClickSignalType, Stringifyable} from '@alwatr/type'; declare global { interface HTMLElementTagNameMap { @@ -18,15 +18,20 @@ export interface IconButtonContent extends StringifyableRecord { */ icon: string; + /** + * Flip icon on rtl + */ + flipRtl?: true; + /** * Unique name for identify click event over signal. */ clickSignalId?: string; /** - * Flip icon on rtl + * Dispatched signal with ClickSignalType and this detail. */ - flipRtl?: true; + clickDetail?: Stringifyable; } /** @@ -94,15 +99,16 @@ export class AlwatrStandardIconButton extends AlwatrSurface { } protected _click(event: MouseEvent): void { - const signalId = this.content?.clickSignalId; - this._logger.logMethodArgs('_click', {signalId}); - if (signalId) { - eventTrigger.dispatch(signalId, { + const clickSignalId = this.content?.clickSignalId; + this._logger.logMethodArgs('_click', {signalId: clickSignalId}); + if (clickSignalId) { + eventTrigger.dispatch(clickSignalId, { x: event.clientX, y: event.clientY, altKey: event.altKey, ctrlKey: event.ctrlKey, metaKey: event.metaKey, + detail: this.content?.clickDetail, }); } } From a6c1ee985d9e20bfd6f2586dade27f394fac35e0 Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Wed, 1 Mar 2023 23:07:03 +0330 Subject: [PATCH 2/4] feat(icon-button): IconButtonContent.disabled --- ui/ui-kit/src/button/icon-button.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/ui/ui-kit/src/button/icon-button.ts b/ui/ui-kit/src/button/icon-button.ts index ceca8c708..4e620e522 100644 --- a/ui/ui-kit/src/button/icon-button.ts +++ b/ui/ui-kit/src/button/icon-button.ts @@ -32,6 +32,8 @@ export interface IconButtonContent extends StringifyableRecord { * Dispatched signal with ClickSignalType and this detail. */ clickDetail?: Stringifyable; + + disabled?: true; } /** @@ -95,6 +97,12 @@ export class AlwatrStandardIconButton extends AlwatrSurface { override render(): unknown { this._logger.logMethod('render'); if (this.content == null) return; + + const disabled = Boolean(this.content.disabled); + if (this.hasAttribute('disabled') === disabled) { + this.toggleAttribute('disabled', disabled); + } + return html``; } From 56310b04734d51841863cd03eb37e3b5c51957fc Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Thu, 2 Mar 2023 01:38:14 +0330 Subject: [PATCH 3/4] fix(ui): surface tinted attrib --- ui/ui-kit/src/card/surface.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/ui-kit/src/card/surface.ts b/ui/ui-kit/src/card/surface.ts index 570a5f6ae..3fce117fe 100644 --- a/ui/ui-kit/src/card/surface.ts +++ b/ui/ui-kit/src/card/surface.ts @@ -12,7 +12,8 @@ declare global { * @extends AlwatrBaseElement * * @attr {Boolean} stated - * @attr {Number|Boolean} elevated - tinted by default + * @attr {Number|Boolean} elevated + * @attr {Number|Boolean} tinted * @attr {Boolean} filled * @attr {Boolean} outlined * @attr {Boolean} active-outline - outline on active and focus From 8a6ddae2000639223d505fc67cf2d5f3738fa80e Mon Sep 17 00:00:00 2001 From: Ali Mihandoost Date: Thu, 2 Mar 2023 01:51:04 +0330 Subject: [PATCH 4/4] fix(ui/product-card): toman icon --- ui/ui-kit/src/card/product-card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/ui-kit/src/card/product-card.ts b/ui/ui-kit/src/card/product-card.ts index 5b5005a56..ee43cfe9a 100644 --- a/ui/ui-kit/src/card/product-card.ts +++ b/ui/ui-kit/src/card/product-card.ts @@ -162,7 +162,7 @@ export class AlwatrProductCard extends ToggleMixin(LocalizeMixin(SignalMixin(Alw
${number(this.content.price)} ${number(this.content.finalPrice)} - +
`;