@jsweb/ui 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,24 +25,24 @@ npm i @jsweb/ui
|
|
|
25
25
|
### CDN
|
|
26
26
|
|
|
27
27
|
```html
|
|
28
|
-
<script src="https://unpkg.com/@jsweb/ui
|
|
28
|
+
<script src="https://unpkg.com/@jsweb/ui"></script>
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
## Diretivas Disponíveis (v0.1.0)
|
|
32
32
|
|
|
33
33
|
O framework utiliza um sistema de atributos customizados para declaratividade no HTML.
|
|
34
34
|
|
|
35
|
-
| Diretiva
|
|
36
|
-
|
|
|
37
|
-
| `ui:scope`
|
|
38
|
-
| `ui:text`
|
|
39
|
-
| `:attr`
|
|
40
|
-
| `:class` / `:style`
|
|
41
|
-
| `@event`
|
|
42
|
-
| `$emit`
|
|
43
|
-
| `:bind`
|
|
44
|
-
| `ui:if`
|
|
45
|
-
| `ui:for`
|
|
35
|
+
| Diretiva | Descrição | Exemplo |
|
|
36
|
+
| :------------------ | :------------------------------------------------------------------------------ | :------------------------------------ |
|
|
37
|
+
| `ui:scope` | Define o objeto de estado para o elemento e seus filhos. | `<div ui:scope="{ count: 0 }">` |
|
|
38
|
+
| `ui:text` | Sincroniza o `textContent` com uma variável. | `<span ui:text="count"></span>` |
|
|
39
|
+
| `:attr` | Shorthand para bind de atributos HTML nativos. | `<button :disabled="count > 10">` |
|
|
40
|
+
| `:class` / `:style` | Bind dinâmico avançado para classes CSS e Estilos Inline (dicionários, arrays). | `<div :class="{ active: isActive }">` |
|
|
41
|
+
| `@event` | Shorthand para event listeners (com suporte a modificadores). | `<button @click.prevent="save">` |
|
|
42
|
+
| `$emit` | Despacha CustomEvents a partir do escopo atual. (Exposto no contexto) | `<button @click="$emit('custom')">` |
|
|
43
|
+
| `:bind` | Two-way data binding para inputs, checkboxes, radios e selects. | `<input :bind="name">` |
|
|
44
|
+
| `ui:if` | Adiciona/Remove o elemento do DOM (via Comment Node placeholder). | `<div ui:if="count > 0">` |
|
|
45
|
+
| `ui:for` | Renderiza uma lista de elementos a partir de um array. | `<li ui:for="item in items">` |
|
|
46
46
|
|
|
47
47
|
## Exemplo de Uso
|
|
48
48
|
|
|
@@ -55,7 +55,7 @@ O framework utiliza um sistema de atributos customizados para declaratividade no
|
|
|
55
55
|
<meta charset="UTF-8" />
|
|
56
56
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
57
57
|
<title>JS Web UI</title>
|
|
58
|
-
<script src="https://unpkg.com/@jsweb/ui
|
|
58
|
+
<script src="https://unpkg.com/@jsweb/ui"></script>
|
|
59
59
|
<script>
|
|
60
60
|
const scope = {
|
|
61
61
|
count: 0,
|