alert toast component #248
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
|
|
||
| &--bottom-center { | ||
| left: 50%; | ||
| bottom: 2rem |
| } | ||
|
|
||
| &--default { | ||
| background-color: var(--base--solid-secondary); |
There was a problem hiding this comment.
in default it should be --base--bg-secondary
| /** | ||
| * position of alert, default position -> bottom-center | ||
| */ | ||
| export enum POSITION { | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| BOTTOM_CENTER = 'bottom-center' | ||
| } |
There was a problem hiding this comment.
lets get rid of this param as it is not used at the moment
| timeout?: number; | ||
| } | ||
|
|
||
| export interface AlertInterface { |
There was a problem hiding this comment.
lets move it to the useAlert file and rename to the useAlertComposableState
| .fade-enter-from, | ||
| .fade-leave-to { | ||
| opacity: 0; | ||
| transform: translateY(30px); |
There was a problem hiding this comment.
lets use simple fade-out effect for leaving
| transform: translateY(30px); |
There was a problem hiding this comment.
please look at the updated one, if its good enough
| <style lang="postcss"> | ||
| .fade-enter-active, | ||
| .fade-leave-active { | ||
| transition: opacity 0.5s ease, transform 0.5s ease; |
There was a problem hiding this comment.
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| transition: opacity 0.25s ease, transform 0.25s ease; |
| error: (opt?: Pick<AlertOptions, 'icon' | 'message' | 'timeout'>) => triggerAlert('error', opt), | ||
| warning: (opt?: Pick<AlertOptions, 'icon' | 'message' | 'timeout'>) => triggerAlert('warning', opt), | ||
| info: (opt?: Pick<AlertOptions, 'icon' | 'message' | 'timeout'>) => triggerAlert('info', opt), | ||
| defaultAlert: (opt?: Pick<AlertOptions, 'icon' | 'message' | 'timeout'>) => triggerAlert('default', opt), |
There was a problem hiding this comment.
lets rename defaultAlert to alert
| /** | ||
| * Various alert type | ||
| */ | ||
| export type Alertype = 'success' | 'error' | 'warning' | 'info' | 'default'; |
There was a problem hiding this comment.
| export type Alertype = 'success' | 'error' | 'warning' | 'info' | 'default'; | |
| export type AlertType = 'success' | 'error' | 'warning' | 'info' | 'default'; |
| position: 'bottom-center', | ||
| message: '', | ||
| icon: '', | ||
| type: undefined, |
There was a problem hiding this comment.
lets make it default by default
There was a problem hiding this comment.
as in defaultProps for the variable name?
| id: genId(), | ||
| position: 'bottom-center', | ||
| content: '', | ||
| icon: '', | ||
| type: undefined, | ||
| timeout: 5000, |
There was a problem hiding this comment.
it's better to leave the only place with default values. I think this properties are note related to Alerts Container
There was a problem hiding this comment.
probably,alerts returned by useAlert() should include them
There was a problem hiding this comment.
it's better to leave the only place with default values. I think this properties are note related to Alerts Container
its used in Alert container position
There was a problem hiding this comment.
probably,
alertsreturned byuseAlert()should include them
yes I added a defaultAlertOpt on useAlert()
|
|
||
| return { | ||
| alerts, | ||
| success: (opt?: Omit<AlertOptions, 'id'>) => triggerAlert('success', opt), |
There was a problem hiding this comment.
you have incompatible types of opts, Omit<AlertOptions, 'id'> is not the same as Pick<AlertOptions, 'id' | 'icon' | 'message' | 'timeout'> used in triggerAlert
There was a problem hiding this comment.
still actual, but now opt?: Omit<AlertOptions, 'id'> not equals to opt: AlertOptions
| /** | ||
| * Various alert theme type | ||
| */ | ||
| export type AlertTheme = 'grass' | 'red' | 'amber' | 'graphite' | ''; |
There was a problem hiding this comment.
theme is accepting globally, you don't need to define it on a component level
| direction: ltr; | ||
| padding: var(--v-padding) var(--h-padding) var(--v-padding) var(--h-padding); | ||
| border-radius: var(--radius-field); | ||
| color: var(--accent--text-solid-foreground); |
There was a problem hiding this comment.
probably --base--text-solid-foreground
| background-color: var(--base--solid); | ||
| } | ||
|
|
||
| &--error { | ||
| background-color: var(--base--solid); | ||
| } | ||
|
|
||
| &--warning { | ||
| background-color: var(--base--solid); | ||
| } | ||
|
|
||
| &--info { | ||
| background-color: var(--base--solid); | ||
| } | ||
|
|
||
| &--default { | ||
| background-color: var(--base--bg-secondary); |
There was a problem hiding this comment.
you need to override color with --base--text
codex-ui/dev/Playground.vue
Outdated
| min-height: 100vh; | ||
| width: 100%; |
codex-ui/dev/Playground.vue
Outdated
| background-color: var(--base--bg-primary); | ||
| color: var(--base--text); | ||
| min-height: 100%; | ||
| min-height: 100vh; |
|
|
||
| &--bottom-center { | ||
| left: 50%; | ||
| bottom: 2rem |
There was a problem hiding this comment.
| bottom: 2rem | |
| bottom: var(--spacing-l) |
| import type { AlertOptions, AlerType } from './Alert.types'; | ||
|
|
||
| /** | ||
| * |
| export const useAlert = createSharedComposable((): UseAlertComposableState => { | ||
| const alerts = ref<AlertOptions[]>([]); | ||
|
|
||
| const defaultAlertOpt = ref<AlertOptions>({ |
There was a problem hiding this comment.
redundant duplication. Default props are defined in the Alert.vue
| </div> | ||
| </div> | ||
|
|
||
| <AlertContainer /> |
There was a problem hiding this comment.
lets move it to the root component (Playground.vue) to reuse the single container for the whole app
| warning: (opt: Omit<AlertOptions, 'id'>) => triggerAlert('warning', opt), | ||
| info: (opt: Omit<AlertOptions, 'id'>) => triggerAlert('info', opt), | ||
| alert: (opt: Omit<AlertOptions, 'id'>) => triggerAlert('default', opt), | ||
| defaultAlertOpt, |
There was a problem hiding this comment.
This has been removed
| ...opt }); | ||
|
|
||
| setTimeout(() => { | ||
| alerts.value.splice(alertIndex, alerts.value.shift() as unknown as number); |
There was a problem hiding this comment.
index works unstable here since it is changing dynamically. Consider removing alert by id instead
| opt.id = counter.value++, opt.type = type, opt.timeout = currentTimeout; | ||
|
|
||
| alerts.value = [...alerts.value, opt]; | ||
| setInterval(removeExpiredAlerts, currentTimeout); |
There was a problem hiding this comment.
lets try to use requestAnimationFrame instead
|
|
||
| return { | ||
| alerts, | ||
| success: (opt: Omit<AlertOptions, 'id'>) => triggerAlert('success', opt), |
There was a problem hiding this comment.
Omit<AlertOptions, 'id'> contains alertType inside, so why we need to pass it as a constant too?
i think that one of those two presentations of alertType is redundant
|
you have several small visual bugs
|
The attached issue #247