Merge branch 'desenv' into main

rucula-js · May 19, 2024 · 097ebe6 · 097ebe6
2 parents a0a66c2 + fcace23
commit 097ebe6
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 86 deletions.
diff --git a/dist/style/style.css b/dist/style/style.css
@@ -147,7 +147,6 @@ button.r-actions-window{
 }
 
 input.r-i-control[identity][disabled] {
-    background-color: var(--color-grey-weak);
     cursor: not-allowed;
 }
 

diff --git a/docs/docs/comecando/como-configurar.md b/docs/docs/comecando/como-configurar.md
diff --git a/docs/docs/comecando/hello-world.md b/docs/docs/comecando/hello-world.md
diff --git a/docs/docs/comecando/o-que-e-o-rucula-js.md b/docs/docs/comecando/o-que-e-o-rucula-js.md
diff --git a/docs/docs/exemples/via-cep.html b/docs/docs/exemples/via-cep.html
@@ -0,0 +1,181 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Exemplo Rucula</title>
+        <style>
+            body{
+                margin: 0;
+            }
+            *{
+                font-family: "DM Sans", sans-serif;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="js">
+        </div>
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rucula-js/rucula-js@master/dist/style/style.css"/>
+
+        <script type="module" >
+
+            import {Rucula} from 'https://cdn.jsdelivr.net/gh/rucula-js/rucula-js@master/dist/rucula.js'
+
+            let config = {
+                floatLabel:true, 
+                environments:[
+                    {
+                        env:"development",
+                        hostname:"http://localhost",
+                        port: "5016"
+                    }
+                ],
+                localizations:[
+                    {
+                        locales:"pt-BR",
+                        language:"🇧🇷 Brasil" ,
+                        currency:"BRL",
+                        maxDecimal:5
+                    }
+                ] 
+            }   
+
+            let input  = {
+                name: "Via Cep",
+                pathController: "",
+                type: "crud",
+                crud:"",
+                messageHome: "Via Cep",
+                grid:false,
+                frames: [
+                    {
+                        name: "Procurar CEP",
+                        objectDto: "viaCep",
+                        alias: "aliasViaCep",
+                        fields: [
+                            {
+                                propertDto: "cep",
+                                description: "Cep",                                
+                                maxLength: 40,
+                                requerid:true,
+                                width:350
+                            }
+                        ]
+                    },
+                    {
+                        name: "Informações CEP",
+                        objectDto: "infoCep",
+                        alias: "aliasInfoCep",
+                        vertical:false,
+                        fields: [
+                            {
+                                propertDto: "cep",
+                                description: "Cep",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "logradouro",
+                                description: "Logradouro",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "complemento",
+                                description: "Complemento",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "bairro",
+                                description: "Bairro",
+                                disable:true    
+                            },
+
+
+                            {
+                                propertDto: "localidade",
+                                description: "Localidade",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "uf",
+                                description: "UF",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "ibge",
+                                description: "IBGE",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "gia",
+                                description: "GIA",
+                                disable:true    
+                            },
+                            {
+                                propertDto: "ddd",
+                                description: "DDD",
+                                disable:true    
+                            },
+
+                            {
+                                propertDto: "siafi",
+                                description: "siafi",
+                                disable:true    
+                            }
+
+                        ]
+                    }
+                ],
+                layout:{
+                    items:
+                    [
+                        ["aliasViaCep"],
+                        ["aliasInfoCep"]
+                    ]
+                },
+                button: [
+                    {
+                        icon: "bi bi-save",
+                        type: "button",
+                        target: "r-a-save",
+                        body:"."
+                    }
+                ]
+            }
+
+            var form = document.getElementById("js")
+
+            let rucula = new Rucula(config,input,"js");
+
+            form?.addEventListener('r-a-save.click',(e) => {
+                rucula.loader.enable()
+                rucula.loader.disable()
+            })
+
+            form?.addEventListener('after.aliasViaCep.cep.undefined',(e) => {
+
+                let cep = e.detail.identity.element.value
+
+                fetch(`https://viacep.com.br/ws/${cep}/json/`)
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('CEP não encontrado');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    if (data.erro) {
+                        throw new Error('CEP inválido');
+                    }
+
+                    for (let chave in data) {
+                        rucula.object.setValue(`aliasInfoCep.${chave}`,data[chave])
+                    }
+                })
+            })
+        </script>
+    </body>
+</html>
diff --git a/docs/docs/index.md b/docs/docs/index.md
@@ -1,5 +1,5 @@
 ---
-title: Introdução ao Rucula
+title: Rucula
 summary: Primeira Apresentação do rucula-js
 authors:
   - Reginaldo Marinho
@@ -10,7 +10,7 @@ date: 2023-09-15
   <img src="https://raw.githubusercontent.com/reginaldo-marinho/rucula-js/b76e809a44a66de3733e30388e29d672c8b61011/docs/assets/rucula.svg" style="width:200px">
 </p>
 
-**Bem vindo ao rucula-js, um gerador de interfaces baseadas em formulário que cria e gerencia todos os pontos necessários da sua interface.** 
+Bem vindo ao rucula-js, um gerador de interface baseadas em formulário que cria e gerencia todos os pontos necessários da sua interface. Isso é possível graças ao seu **criador de objetos** internos e a sua **tabela de dependência** que gerencia todos os campos e frames presentes da tela em foco.
 
 ## Instalação
 
@@ -26,6 +26,18 @@ import {Rucula} from 'https://cdn.jsdelivr.net/gh/rucula-jsrucula-js/dist/rucula
 ```js
 npm i @reginaldo-marinho/rucula-js` ou `npm install @reginaldo-marinho/rucula-js`
 ```
+
+## Exemplos
+
+0. hello world
+    - [Código](https://github.com/rucula-js/rucula-js/blob/main/docs/docs/exemples/hello-world.html)
+    - [Ao Vivo](https://rucula-js.github.io/exemples/hello-world.html)
+
+0. Via Cep
+    - [Código](https://github.com/rucula-js/rucula-js/blob/main/docs/docs/exemples/via-cep.html)
+    - [Ao Vivo](https://rucula-js.github.io/exemples/via-cep.html)
+
+
 ##### Contribuidores
 
 <br>

diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -1,10 +1,5 @@
 site_name: rucula-js
 nav:
-  - Inicio: index.md
-  - Começando:
-    - O que é?: comecando/o-que-e-o-rucula-js.md
-    - Hello World: comecando/hello-world.md
-    - Configurando?: comecando/como-configurar.md
   - Compreendendo: 
     - Janelas: compreendendo/janelas.md
     - Frames: compreendendo/frames.md

diff --git a/public/style.css b/public/style.css
@@ -147,7 +147,6 @@ button.r-actions-window{
 }
 
 input.r-i-control[identity][disabled] {
-    background-color: var(--color-grey-weak);
     cursor: not-allowed;
 }