[{"_path":"/notes/vue-toast-compoenent","_draft":false,"_partial":false,"_empty":false,"title":"📦 Componente Toast en Vue","description":"El componente Toast es un elemento UI que permite dar una retroalimentación de lo que está pasando en segundo o primer plano de alguna acción que ha hecho el usuario en tu aplicación.","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"lógica-domain"},"children":[{"type":"text","value":"Lógica (Domain)"}]},{"type":"element","tag":"h3","props":{"id":"toast"},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"code","props":{"code":"import { ToastBody } from \"./ToastBody\";\nimport { ToastPosition } from \"./ToastPositions\";\n\nexport class Toast {\n  id: number\n  position: ToastPosition;\n  body: ToastBody;\n  duration: number;\n\n  constructor(body: ToastBody, position: ToastPosition, duration?: number) {\n    this.id = this.randomId()\n    this.body = body;\n    this.position = position;\n    this.duration = duration ?? 2500;\n  }\n\n  private randomId() {\n    return Math.floor(Math.random() * new Date().getMilliseconds());\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { ToastBody } from \"./ToastBody\";\nimport { ToastPosition } from \"./ToastPositions\";\n\nexport class Toast {\n  id: number\n  position: ToastPosition;\n  body: ToastBody;\n  duration: number;\n\n  constructor(body: ToastBody, position: ToastPosition, duration?: number) {\n    this.id = this.randomId()\n    this.body = body;\n    this.position = position;\n    this.duration = duration ?? 2500;\n  }\n\n  private randomId() {\n    return Math.floor(Math.random() * new Date().getMilliseconds());\n  }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"toastbody"},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"code","props":{"code":"type ToastProps = {\n  title: string;\n  color?: string;\n  icon?: any;\n  description: string;\n};\n\nexport class ToastBody {\n  title: string;\n  description: string;\n  icon: any;\n  color: string = \"\";\n  \n  constructor(props: ToastProps) {\n    this.title = props.title;\n    this.description = props.description;\n    this.color = props.color ?? \"green\";\n    this.icon = props.icon ?? \"\";\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"type ToastProps = {\n  title: string;\n  color?: string;\n  icon?: any;\n  description: string;\n};\n\nexport class ToastBody {\n  title: string;\n  description: string;\n  icon: any;\n  color: string = \"\";\n  \n  constructor(props: ToastProps) {\n    this.title = props.title;\n    this.description = props.description;\n    this.color = props.color ?? \"green\";\n    this.icon = props.icon ?? \"\";\n  }\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"toastposition"},"children":[{"type":"text","value":"ToastPosition"}]},{"type":"element","tag":"code","props":{"code":"export type ToastPosition = \"top\" | \"bottom\";\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export type ToastPosition = \"top\" | \"bottom\";\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"casos-de-uso-aplications"},"children":[{"type":"text","value":"Casos de uso (Aplications)"}]},{"type":"element","tag":"h3","props":{"id":"usetoast"},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"code","props":{"code":"import { Toast } from \"../domain/Toast\";\nimport { ToastBody } from \"../domain/ToastBody\";\nimport { ToastsOnReactiveMemory } from \"../infraestructure/persistence\";\n\nconst toastOnReactiveMemory = new ToastsOnReactiveMemory();\n\nexport function useToast() {\n  const add = ( title: string, description: string, color?: string, icon?: string ) => {\n    const toast = new Toast(\n      new ToastBody({\n        title,\n        description,\n        color,\n        icon,\n      }),\n      \"top\"\n    );\n    toastOnReactiveMemory.add(toast);\n  };\n  const remove = (toast: Toast) => {\n    toastOnReactiveMemory.remove(toast);\n  };\n  return {\n    toasts: toastOnReactiveMemory.toasts,\n    add,\n    remove,\n  };\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { Toast } from \"../domain/Toast\";\nimport { ToastBody } from \"../domain/ToastBody\";\nimport { ToastsOnReactiveMemory } from \"../infraestructure/persistence\";\n\nconst toastOnReactiveMemory = new ToastsOnReactiveMemory();\n\nexport function useToast() {\n  const add = ( title: string, description: string, color?: string, icon?: string ) => {\n    const toast = new Toast(\n      new ToastBody({\n        title,\n        description,\n        color,\n        icon,\n      }),\n      \"top\"\n    );\n    toastOnReactiveMemory.add(toast);\n  };\n  const remove = (toast: Toast) => {\n    toastOnReactiveMemory.remove(toast);\n  };\n  return {\n    toasts: toastOnReactiveMemory.toasts,\n    add,\n    remove,\n  };\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"persistencia-infraestructure"},"children":[{"type":"text","value":"Persistencia (Infraestructure)"}]},{"type":"element","tag":"h3","props":{"id":"persistencia-en-memoria-reactiva"},"children":[{"type":"text","value":"Persistencia en memoria reactiva"}]},{"type":"element","tag":"code","props":{"code":"import { ref, Ref } from \"vue\";\nimport { Toast } from \"../domain/Toast\";\n\nexport class ToastsOnReactiveMemory {\n  private conatiner: Ref<Toast[]> = ref([]);\n  add(toast: Toast) {\n    this.toasts.value.push(toast);\n  }\n  remove(toast: Toast) {\n    const index = this.toasts.value.findIndex((t) => t.id === toast.id);\n    this.toasts.value.splice(index, 1);\n  }\n  get toasts() {\n    return this.conatiner;\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { ref, Ref } from \"vue\";\nimport { Toast } from \"../domain/Toast\";\n\nexport class ToastsOnReactiveMemory {\n  private conatiner: Ref<Toast[]> = ref([]);\n  add(toast: Toast) {\n    this.toasts.value.push(toast);\n  }\n  remove(toast: Toast) {\n    const index = this.toasts.value.findIndex((t) => t.id === toast.id);\n    this.toasts.value.splice(index, 1);\n  }\n  get toasts() {\n    return this.conatiner;\n  }\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"componentes"},"children":[{"type":"text","value":"Componentes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Los estilos quedan a tu imaginación"}]}]}]},{"type":"element","tag":"h3","props":{"id":"toastcontainer"},"children":[{"type":"text","value":"ToastContainer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"La función principal de este componente es recorrer el contenedor de los toast y asignar sus propiedades."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <span v-for=\"t of toasts\">\n      <Toast :toast=\"t\" />\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useToast } from './application/useToast'\nimport Toast from './Toast.vue'\nconst { toasts } = useToast()\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div>\n    <span v-for=\"t of toasts\">\n      <Toast :toast=\"t\" />\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useToast } from './application/useToast'\nimport Toast from './Toast.vue'\nconst { toasts } = useToast()\n</script>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"toast-1"},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"La responsabilidad de este componente es solo obtener los atributos desde el "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"ToastContainer"}]},{"type":"text","value":" y mostrarlos"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  {{ toast.id }}\n  {{ toast.body }}\n</template>\n\n<script lang=\"ts\" setup>\nimport { onMounted } from 'vue';\nimport { useToast } from './application/useToast';\nimport { Toast } from './domain/Toast';\n\nconst props = defineProps<{\n  toast: Toast\n}>()\nconst { remove } = useToast()\n\nonMounted(() => {\n  const time = setTimeout(() => {\n    remove(props.toast)\n    clearTimeout(time)\n  }, props.toast.duration)\n})\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  {{ toast.id }}\n  {{ toast.body }}\n</template>\n\n<script lang=\"ts\" setup>\nimport { onMounted } from 'vue';\nimport { useToast } from './application/useToast';\nimport { Toast } from './domain/Toast';\n\nconst props = defineProps<{\n  toast: Toast\n}>()\nconst { remove } = useToast()\n\nonMounted(() => {\n  const time = setTimeout(() => {\n    remove(props.toast)\n    clearTimeout(time)\n  }, props.toast.duration)\n})\n</script>\n"}]}]}]}]},"type":"vue","createdAt":"07/25/22","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"lógica-domain"},"children":[{"type":"text","value":"Lógica (Domain)"}]},{"type":"element","tag":"h3","props":{"id":"toast"},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"code","props":{"code":"import { ToastBody } from \"./ToastBody\";\nimport { ToastPosition } from \"./ToastPositions\";\n\nexport class Toast {\n  id: number\n  position: ToastPosition;\n  body: ToastBody;\n  duration: number;\n\n  constructor(body: ToastBody, position: ToastPosition, duration?: number) {\n    this.id = this.randomId()\n    this.body = body;\n    this.position = position;\n    this.duration = duration ?? 2500;\n  }\n\n  private randomId() {\n    return Math.floor(Math.random() * new Date().getMilliseconds());\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"./ToastBody\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ToastPosition"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"./ToastPositions\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"position"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastPosition"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"duration"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"constructor"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"position"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastPosition"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"duration"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"randomId"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"position"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"position"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"duration"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"duration"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"2500"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"private"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"randomId"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Math"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"floor"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Math"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"random"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Date"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"getMilliseconds"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"());"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"toastbody"},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"code","props":{"code":"type ToastProps = {\n  title: string;\n  color?: string;\n  icon?: any;\n  description: string;\n};\n\nexport class ToastBody {\n  title: string;\n  description: string;\n  icon: any;\n  color: string = \"\";\n  \n  constructor(props: ToastProps) {\n    this.title = props.title;\n    this.description = props.description;\n    this.color = props.color ?? \"green\";\n    this.icon = props.icon ?? \"\";\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"constructor"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"green\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"??"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"toastposition"},"children":[{"type":"text","value":"ToastPosition"}]},{"type":"element","tag":"code","props":{"code":"export type ToastPosition = \"top\" | \"bottom\";\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastPosition"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"top\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" | "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"bottom\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"casos-de-uso-aplications"},"children":[{"type":"text","value":"Casos de uso (Aplications)"}]},{"type":"element","tag":"h3","props":{"id":"usetoast"},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"code","props":{"code":"import { Toast } from \"../domain/Toast\";\nimport { ToastBody } from \"../domain/ToastBody\";\nimport { ToastsOnReactiveMemory } from \"../infraestructure/persistence\";\n\nconst toastOnReactiveMemory = new ToastsOnReactiveMemory();\n\nexport function useToast() {\n  const add = ( title: string, description: string, color?: string, icon?: string ) => {\n    const toast = new Toast(\n      new ToastBody({\n        title,\n        description,\n        color,\n        icon,\n      }),\n      \"top\"\n    );\n    toastOnReactiveMemory.add(toast);\n  };\n  const remove = (toast: Toast) => {\n    toastOnReactiveMemory.remove(toast);\n  };\n  return {\n    toasts: toastOnReactiveMemory.toasts,\n    add,\n    remove,\n  };\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"../domain/Toast\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"../domain/ToastBody\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ToastsOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"../infraestructure/persistence\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toastOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"ToastsOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" ( "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" ) "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"ToastBody"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"top\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toastOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toastOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toastOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"persistencia-infraestructure"},"children":[{"type":"text","value":"Persistencia (Infraestructure)"}]},{"type":"element","tag":"h3","props":{"id":"persistencia-en-memoria-reactiva"},"children":[{"type":"text","value":"Persistencia en memoria reactiva"}]},{"type":"element","tag":"code","props":{"code":"import { ref, Ref } from \"vue\";\nimport { Toast } from \"../domain/Toast\";\n\nexport class ToastsOnReactiveMemory {\n  private conatiner: Ref<Toast[]> = ref([]);\n  add(toast: Toast) {\n    this.toasts.value.push(toast);\n  }\n  remove(toast: Toast) {\n    const index = this.toasts.value.findIndex((t) => t.id === toast.id);\n    this.toasts.value.splice(index, 1);\n  }\n  get toasts() {\n    return this.conatiner;\n  }\n}\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"Ref"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"vue\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"../domain/Toast\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"ToastsOnReactiveMemory"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"private"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"conatiner"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Ref"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"[]> "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"([]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"findIndex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"splice"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"conatiner"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"componentes"},"children":[{"type":"text","value":"Componentes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Los estilos quedan a tu imaginación"}]}]}]},{"type":"element","tag":"h3","props":{"id":"toastcontainer"},"children":[{"type":"text","value":"ToastContainer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"La función principal de este componente es recorrer el contenedor de los toast y asignar sus propiedades."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div>\n    <span v-for=\"t of toasts\">\n      <Toast :toast=\"t\" />\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useToast } from './application/useToast'\nimport Toast from './Toast.vue'\nconst { toasts } = useToast()\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"of"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'./application/useToast'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'./Toast.vue'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toasts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"toast-1"},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"La responsabilidad de este componente es solo obtener los atributos desde el "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"ToastContainer"}]},{"type":"text","value":" y mostrarlos"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  {{ toast.id }}\n  {{ toast.body }}\n</template>\n\n<script lang=\"ts\" setup>\nimport { onMounted } from 'vue';\nimport { useToast } from './application/useToast';\nimport { Toast } from './domain/Toast';\n\nconst props = defineProps<{\n  toast: Toast\n}>()\nconst { remove } = useToast()\n\nonMounted(() => {\n  const time = setTimeout(() => {\n    remove(props.toast)\n    clearTimeout(time)\n  }, props.toast.duration)\n})\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"onMounted"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'./application/useToast'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"Toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'./domain/Toast'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Toast"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}>()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"useToast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"onMounted"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"time"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"remove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"clearTimeout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"time"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }, "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"toast"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"duration"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"lógica-domain","depth":2,"text":"Lógica (Domain)","children":[{"id":"toast","depth":3,"text":"Toast"},{"id":"toastbody","depth":3,"text":"ToastBody"},{"id":"toastposition","depth":3,"text":"ToastPosition"}]},{"id":"casos-de-uso-aplications","depth":2,"text":"Casos de uso (Aplications)","children":[{"id":"usetoast","depth":3,"text":"useToast"}]},{"id":"persistencia-infraestructure","depth":2,"text":"Persistencia (Infraestructure)","children":[{"id":"persistencia-en-memoria-reactiva","depth":3,"text":"Persistencia en memoria reactiva"}]},{"id":"componentes","depth":2,"text":"Componentes","children":[{"id":"toastcontainer","depth":3,"text":"ToastContainer"},{"id":"toast-1","depth":3,"text":"Toast"}]}]}},"_type":"markdown","_id":"content:notes:vue-toast-compoenent.md","_source":"content","_file":"notes/vue-toast-compoenent.md","_extension":"md"}]