{"id":26999823,"url":"https://github.com/sirbate/component_toast","last_synced_at":"2025-04-04T03:17:56.830Z","repository":{"id":285795623,"uuid":"958982888","full_name":"sirbate/Component_Toast","owner":"sirbate","description":"Componente visual de Power Apps para mostrar toasts personalizables (Success, Error, Info, Warning) con animaciones y duración configurable.","archived":false,"fork":false,"pushed_at":"2025-04-02T18:04:08.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T18:39:28.467Z","etag":null,"topics":["powerapps","yaml"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sirbate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-02T04:40:39.000Z","updated_at":"2025-04-02T18:09:22.000Z","dependencies_parsed_at":"2025-04-02T18:41:29.118Z","dependency_job_id":"22e7e9db-e104-4f16-a964-26109abb7219","html_url":"https://github.com/sirbate/Component_Toast","commit_stats":null,"previous_names":["sirbate/component_toast"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirbate%2FComponent_Toast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirbate%2FComponent_Toast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirbate%2FComponent_Toast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sirbate%2FComponent_Toast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sirbate","download_url":"https://codeload.github.com/sirbate/Component_Toast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247112756,"owners_count":20885606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["powerapps","yaml"],"created_at":"2025-04-04T03:17:56.053Z","updated_at":"2025-04-04T03:17:56.822Z","avatar_url":"https://github.com/sirbate.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- README.html --\u003e\n\n\u003ch1\u003e🔔 PowerApps Toast Notification Component\u003c/h1\u003e\n\n\u003cblockquote\u003e\n  Una alternativa visual y personalizable a las notificaciones por defecto de Power Apps.\u003cbr\u003e\n  Este componente permite mostrar mensajes tipo \u003cstrong\u003etoast\u003c/strong\u003e con estilo, color y comportamiento definidos por el usuario.\n\u003c/blockquote\u003e\n\n\u003chr\u003e\n\n\u003ch2\u003e⚙️ Funcionalidades\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003e✅ \u003cstrong\u003eNotificaciones tipo toast\u003c/strong\u003e modernas y elegantes\u003c/li\u003e\n  \u003cli\u003e✅ Personalización de:\n    \u003cul\u003e\n      \u003cli\u003eTítulo del mensaje\u003c/li\u003e\n      \u003cli\u003eCuerpo del mensaje\u003c/li\u003e\n      \u003cli\u003eDuración en pantalla (en segundos)\u003c/li\u003e\n      \u003cli\u003eTipo de notificación:\n        \u003cul\u003e\n          \u003cli\u003e\u003ccode\u003eSuccess\u003c/code\u003e ✅\u003c/li\u003e\n          \u003cli\u003e\u003ccode\u003eError\u003c/code\u003e ❌\u003c/li\u003e\n          \u003cli\u003e\u003ccode\u003eInfo\u003c/code\u003e ℹ️\u003c/li\u003e\n          \u003cli\u003e\u003ccode\u003eWarning\u003c/code\u003e ⚠️\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003e✅ Cada tipo tiene un color visual distintivo\u003c/li\u003e\n  \u003cli\u003e✅ Animación de entrada y salida\u003c/li\u003e\n  \u003cli\u003e✅ Fácil de reutilizar en cualquier app Power Apps\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003ch2\u003e📸 Capturas de Pantalla\u003c/h2\u003e\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cstrong\u003eEjemplo - Toast tipo \u003ccode\u003eSuccess\u003c/code\u003e\u003c/strong\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"./screenshots/toast-success.png\" alt=\"Toast Success\" width=\"500px\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cp\u003e✅ \u003cstrong\u003eCorrecto\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eGuardado con éxito.\u003c/em\u003e\u003c/p\u003e\n\n\u003cp\u003eEste mismo estilo se adapta automáticamente al tipo:\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003e\u003cstrong\u003eError\u003c/strong\u003e (rojo ❌)\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eWarning\u003c/strong\u003e (naranja ⚠️)\u003c/li\u003e\n  \u003cli\u003e\u003cstrong\u003eInfo\u003c/strong\u003e (azul ℹ️)\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003ch2\u003e🚀 Instalación\u003c/h2\u003e\n\n\u003ch3\u003e📁 Opción 1: Importar desde archivo\u003c/h3\u003e\n\u003col\u003e\n  \u003cli\u003eDescarga el archivo \u003ccode\u003e.msapp\u003c/code\u003e o \u003ccode\u003e.mscx\u003c/code\u003e desde la carpeta \u003ccode\u003e/component/\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eEn Power Apps Studio, entra al editor de tu app.\u003c/li\u003e\n  \u003cli\u003eVe a \u003cstrong\u003eComponentes \u0026gt; + Nuevo componente \u0026gt; Importar componente\u003c/strong\u003e.\u003c/li\u003e\n  \u003cli\u003eSelecciona el archivo descargado y úsalo en tus pantallas.\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003ch3\u003e📄 Opción 2: Definir vía YAML (para documentación/configuración externa)\u003c/h3\u003e\n\n\u003cp\u003eSi estás documentando o automatizando este componente vía YAML (por ejemplo, en Docusaurus o GitHub Pages), puedes usar un bloque así para mostrar ejemplos:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003etoast_component:\nComponentDefinitions:\n  Bate_Toast:\n    DefinitionType: CanvasComponent\n    CustomProperties:\n      ToastDuration:\n        PropertyKind: Input\n        DisplayName: ToastDuration\n        Description: Duración del toast en milisegundos\n        DataType: Number\n        Default: =2000\n      ToastMessage:\n        PropertyKind: Input\n        DisplayName: ToastMessage\n        Description: Mensaje del toast\n        DataType: Text\n        Default: =\"Your notification message\"\n      ToastTitle:\n        PropertyKind: Input\n        DisplayName: ToastTitle\n        Description: Título del toast\n        DataType: Text\n        Default: =\"Text\"\n      ToastType:\n        PropertyKind: Input\n        DisplayName: ToastType\n        Description: Tipo de toast (\"Success\", \"Error\", \"Warning\", \"Info\")\n        DataType: Text\n        Default: =Bate_Toast.ToastTypes.Error\n      ToastTypes:\n        PropertyKind: Output\n        DisplayName: ToastTypes\n        Description: Tipos de Toast\n        DataType: Record\n      ToastVisible:\n        PropertyKind: Output\n        DisplayName: ToastVisible\n        Description: Visible Toast\n        DataType: Boolean\n    Properties:\n      Height: =80\n      OnReset: |-\n        =Set(\n            IsVisible,\n            Not(IsVisible)\n        );\n        If(\n            Not(IsVisible),\n            Reset(tim_AutoCloseToast)\n        )\n      ToastTypes: |-\n        ={\n            Success: \"Success\",\n            Warning: \"Warning\",\n            Error: \"Error\",\n            Info: \"Info\"\n        }\n      ToastVisible: =IsVisible\n      Width: =350\n    Children:\n      - tim_AutoCloseToast:\n          Control: Timer@2.1.0\n          Properties:\n            BorderColor: =ColorFade(Self.Fill, -15%)\n            Color: =RGBA(255, 255, 255, 1)\n            DisabledBorderColor: =ColorFade(Self.BorderColor, 70%)\n            DisabledColor: =ColorFade(Self.Fill, 90%)\n            DisabledFill: =ColorFade(Self.Fill, 70%)\n            Duration: =Bate_Toast.ToastDuration\n            Fill: =RGBA(56, 96, 178, 1)\n            Font: =Font.'Open Sans'\n            Height: =32\n            HoverBorderColor: =ColorFade(Self.BorderColor, 20%)\n            HoverColor: =RGBA(255, 255, 255, 1)\n            HoverFill: =ColorFade(RGBA(56, 96, 178, 1), -20%)\n            OnTimerEnd: |+\n              =Set(\n                  IsVisible,\n                  false\n              );\n            PressedBorderColor: =Self.Fill\n            PressedColor: =Self.Fill\n            PressedFill: =Self.Color\n            Reset: =true\n            Start: =IsVisible\n            Visible: =false\n            X: =60\n            Y: =60\n      - cnt_ToastRoot:\n          Control: GroupContainer@1.3.0\n          Variant: AutoLayout\n          Properties:\n            BorderColor: =btn_Color.Fill\n            BorderThickness: =0.5\n            DropShadow: =DropShadow.Semilight\n            Fill: =RGBA(255, 255, 255, 1)\n            Height: =Parent.Height-4\n            LayoutAlignItems: =LayoutAlignItems.Center\n            LayoutDirection: =LayoutDirection.Horizontal\n            LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween\n            RadiusBottomLeft: =10\n            RadiusBottomRight: =10\n            RadiusTopLeft: =10\n            RadiusTopRight: =10\n            Width: |+\n              =Parent.Width-4\n            X: =2\n            Y: =2\n          Children:\n            - btn_Color:\n                Control: Classic/Button@2.2.0\n                Properties:\n                  AlignInContainer: =AlignInContainer.Center\n                  BorderColor: =ColorFade(Self.Fill, -15%)\n                  BorderThickness: =0\n                  Color: =RGBA(0, 0, 0, 0)\n                  DisabledBorderColor: =RGBA(0, 0, 0, 0)\n                  DisabledColor: =RGBA(0, 0, 0, 0)\n                  DisabledFill: =RGBA(0, 0, 0, 0)\n                  DisplayMode: =DisplayMode.View\n                  Fill: |+\n                    =Switch(\n                        Bate_Toast.ToastType,\n                        \"Success\", ColorValue(\"#28a745\"),\n                        \"Error\", ColorValue(\"#dc3545\"),\n                        \"Warning\", ColorValue(\"#ffc107\"),\n                        \"Info\", ColorValue(\"#007bff\")\n                    )\n                  Font: =Font.'Open Sans'\n                  Height: =Parent.Height\n                  HoverBorderColor: =\n                  HoverColor: =RGBA(0, 0, 0, 0)\n                  HoverFill: =\n                  OnSelect: =\n                  PaddingBottom: =0\n                  PaddingLeft: =0\n                  PaddingRight: =0\n                  PaddingTop: =0\n                  PressedBorderColor: =\n                  PressedColor: =\n                  PressedFill: =\n                  RadiusBottomLeft: =0\n                  RadiusBottomRight: =0\n                  RadiusTopLeft: =0\n                  RadiusTopRight: =0\n                  Text: =\n                  Width: =20\n            - cnt_ToastIcon:\n                Control: GroupContainer@1.3.0\n                Variant: AutoLayout\n                Properties:\n                  AlignInContainer: =AlignInContainer.SetByContainer\n                  DropShadow: =DropShadow.None\n                  FillPortions: =0\n                  Height: =Parent.Height\n                  LayoutAlignItems: =LayoutAlignItems.Center\n                  LayoutDirection: =LayoutDirection.Vertical\n                  LayoutJustifyContent: =LayoutJustifyContent.Center\n                  Width: =40\n                  X: =40\n                  Y: =40\n                Children:\n                  - img_ToastTypeIcon:\n                      Control: Image@2.2.3\n                      Properties:\n                        BorderColor: =RGBA(0, 18, 107, 1)\n                        Height: =40\n                        Image: |+\n                          =Switch(\n                              Bate_Toast.ToastType,\n                              \"Success\", \"data:image/svg+xml;utf8,\" \u0026 EncodeUrl(\"\u003csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#28a745' class='bi bi-check-circle-fill' viewBox='0 0 16 16'\u003e\u003cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/\u003e\u003c/svg\u003e\"),\n                              \"Error\", \"data:image/svg+xml;utf8,\" \u0026 EncodeUrl(\"\u003csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#dc3545' class='bi bi-x-circle-fill' viewBox='0 0 16 16'\u003e\u003cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z'/\u003e\u003c/svg\u003e\"),\n                              \"Warning\", \"data:image/svg+xml;utf8,\" \u0026 EncodeUrl(\"\u003csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#ffc107' class='bi bi-exclamation-circle-fill' viewBox='0 0 16 16'\u003e\u003cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/\u003e\u003c/svg\u003e\"),\n                              \"Info\", \"data:image/svg+xml;utf8,\" \u0026 EncodeUrl(\"\u003csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#007bff' class='bi bi-info-circle-fill' viewBox='0 0 16 16'\u003e\u003cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/\u003e\u003c/svg\u003e\")\n                          )\n                        Width: =40\n                        X: =10\n                        Y: =13\n            - cnt_ToastText:\n                Control: GroupContainer@1.3.0\n                Variant: AutoLayout\n                Properties:\n                  AlignInContainer: =AlignInContainer.SetByContainer\n                  DropShadow: =DropShadow.None\n                  FillPortions: =0\n                  Height: =Parent.Height\n                  LayoutAlignItems: =LayoutAlignItems.Stretch\n                  LayoutDirection: =LayoutDirection.Vertical\n                  LayoutJustifyContent: =LayoutJustifyContent.Center\n                  LayoutMinHeight: =Parent.Height\n                  Width: =200\n                Children:\n                  - lbl_ToastTitle:\n                      Control: Text@0.0.50\n                      Properties:\n                        Align: ='TextCanvas.Align'.Start\n                        AlignInContainer: =AlignInContainer.Start\n                        Font: =Font.'Segoe UI'\n                        FontColor: =RGBA(0, 0, 0, 1)\n                        Height: |+\n                          =Parent.Height/2\n                        LayoutMinWidth: =Parent.Width\n                        PaddingLeft: =0\n                        Size: =20\n                        Text: =Bate_Toast.ToastTitle\n                        VerticalAlign: =VerticalAlign.Bottom\n                        Weight: ='TextCanvas.Weight'.Bold\n                        Width: =Parent.Width\n                        X: =1\n                        Y: =9\n                  - lbl_ToastMessage:\n                      Control: Text@0.0.50\n                      Properties:\n                        Align: ='TextCanvas.Align'.Start\n                        AlignInContainer: =AlignInContainer.Center\n                        Font: =Font.'Segoe UI'\n                        FontColor: =RGBA(0, 0, 0, 1)\n                        Height: =Parent.Height/2\n                        PaddingLeft: =0\n                        Text: =Bate_Toast.ToastMessage\n                        VerticalAlign: =VerticalAlign.Top\n                        Weight: ='TextCanvas.Weight'.Medium\n                        Width: =Parent.Width\n                        X: =1055\n                        Y: =25\n            - cnt_ToastAction:\n                Control: GroupContainer@1.3.0\n                Variant: ManualLayout\n                Properties:\n                  DropShadow: =DropShadow.None\n                  FillPortions: =0\n                  LayoutMinHeight: =Parent.Height\n                  Width: =40\n                Children:\n                  - ico_CloseToast:\n                      Control: Classic/Icon@2.5.0\n                      Properties:\n                        BorderColor: =RGBA(0, 18, 107, 1)\n                        Color: =RGBA(101, 101, 101, 1)\n                        Height: =20\n                        Icon: =Icon.Cancel\n                        OnSelect: '=Set(IsVisible, false); '\n                        Width: =20\n                        X: =7\n                        Y: =8\n\n\u003c/code\u003e\u003c/pre\u003e\n\n\n\u003chr\u003e\n\n\u003ch2\u003e📦 Ejemplo de uso del componente\u003c/h2\u003e\n\n\u003cpre\u003e\u003ccode\u003eToast.ShowToast(\"Guardado correctamente\", \"Success\", \"Éxito\", 3)\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003e\u003cstrong\u003eParámetros:\u003c/strong\u003e\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003eMensaje, Tipo, Título, Duración (segundos)\u003c/code\u003e\u003c/pre\u003e\n\n\u003chr\u003e\n\n\u003ch2\u003e🧠 Notas Técnicas\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003eEl componente usa una colección interna para controlar el estado de visibilidad.\u003c/li\u003e\n  \u003cli\u003eAnimaciones creadas con \u003ccode\u003eTransition\u003c/code\u003e y \u003ccode\u003eVisible\u003c/code\u003e.\u003c/li\u003e\n  \u003cli\u003eColores definidos en variables globales:\n    \u003cul\u003e\n      \u003cli\u003e\u003ccode\u003evarToastSuccessColor\u003c/code\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ccode\u003evarToastErrorColor\u003c/code\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ccode\u003evarToastInfoColor\u003c/code\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ccode\u003evarToastWarningColor\u003c/code\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003cli\u003eReutilizable en múltiples pantallas sin duplicar lógica.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003chr\u003e\n\n\u003ch2\u003e👨‍💻 Autor\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eTu Nombre\u003c/strong\u003e\u003cbr\u003e\n\u003ca href=\"https://linkedin.com/in/tuusuario\" target=\"_blank\"\u003eLinkedIn\u003c/a\u003e • \n\u003ca href=\"https://tusitio.com\" target=\"_blank\"\u003ePortafolio\u003c/a\u003e • \n\u003ca href=\"mailto:tucorreo@dominio.com\"\u003etucorreo@dominio.com\u003c/a\u003e\u003c/p\u003e\n\n\u003chr\u003e\n\n\u003ch2\u003e🪪 Licencia\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eMIT\u003c/strong\u003e — puedes usar, modificar y compartir libremente este componente.\u003cbr\u003e\n¡Dame crédito si te sirvió! 😊\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsirbate%2Fcomponent_toast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsirbate%2Fcomponent_toast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsirbate%2Fcomponent_toast/lists"}