@noirmd/previewer 2.1.2 → 2.1.4
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/dist/NReditor.cjs +105 -15
- package/dist/NReditor.cjs.map +1 -1
- package/dist/NReditor.js +106 -16
- package/dist/NReditor.js.map +1 -1
- package/dist/card.css +150 -142
- package/dist/editor.css +58 -3
- package/dist/index.cjs +45 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +45 -3
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +105 -15
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +106 -16
- package/dist/react.js.map +1 -1
- package/dist/vanilla.cjs +45 -3
- package/dist/vanilla.cjs.map +1 -1
- package/dist/vanilla.js +45 -3
- package/dist/vanilla.js.map +1 -1
- package/dist/vue.cjs +45 -3
- package/dist/vue.cjs.map +1 -1
- package/dist/vue.js +45 -3
- package/dist/vue.js.map +1 -1
- package/editor.css +58 -3
- package/package.json +1 -1
package/dist/react.cjs
CHANGED
|
@@ -12011,6 +12011,22 @@ var hovergalleryDirective = ({ props, slots }) => {
|
|
|
12011
12011
|
var hovergallery_default = hovergalleryDirective;
|
|
12012
12012
|
|
|
12013
12013
|
// vanilla/directives/chat.ts
|
|
12014
|
+
var CHAT_THEME_TOKENS = /* @__PURE__ */ new Set([
|
|
12015
|
+
"primary",
|
|
12016
|
+
"secondary",
|
|
12017
|
+
"accent",
|
|
12018
|
+
"neutral",
|
|
12019
|
+
"info",
|
|
12020
|
+
"success",
|
|
12021
|
+
"warning",
|
|
12022
|
+
"error"
|
|
12023
|
+
]);
|
|
12024
|
+
function isArbitraryColor(value) {
|
|
12025
|
+
if (CHAT_THEME_TOKENS.has(value)) return false;
|
|
12026
|
+
if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
|
|
12027
|
+
if (/^[a-zA-Z]+$/.test(value)) return true;
|
|
12028
|
+
return false;
|
|
12029
|
+
}
|
|
12014
12030
|
var chatItemDirective = ({ props, renderSlot }) => {
|
|
12015
12031
|
const side = props.side === "end" ? "end" : "start";
|
|
12016
12032
|
const wrap = document.createElement("div");
|
|
@@ -12041,8 +12057,14 @@ var chatItemDirective = ({ props, renderSlot }) => {
|
|
|
12041
12057
|
avatar.appendChild(img);
|
|
12042
12058
|
wrap.appendChild(avatar);
|
|
12043
12059
|
}
|
|
12060
|
+
const isThemeToken = CHAT_THEME_TOKENS.has(props.color || "");
|
|
12061
|
+
const colorClass = isThemeToken ? ` nr-chat__bubble--${props.color}` : "";
|
|
12044
12062
|
const bubble = document.createElement("div");
|
|
12045
|
-
bubble.className = `nr-chat__bubble${
|
|
12063
|
+
bubble.className = `nr-chat__bubble${colorClass}`;
|
|
12064
|
+
if (props.color && isArbitraryColor(props.color) && !isThemeToken) {
|
|
12065
|
+
bubble.style.background = props.color;
|
|
12066
|
+
bubble.style.color = "white";
|
|
12067
|
+
}
|
|
12046
12068
|
bubble.appendChild(renderSlot("default"));
|
|
12047
12069
|
wrap.appendChild(bubble);
|
|
12048
12070
|
if (props.footer) {
|
|
@@ -12164,15 +12186,32 @@ var richlistDirective = ({ props, renderSlot }) => {
|
|
|
12164
12186
|
var richlist_default = richlistDirective;
|
|
12165
12187
|
|
|
12166
12188
|
// vanilla/directives/stat.ts
|
|
12189
|
+
var STAT_THEME_TOKENS = /* @__PURE__ */ new Set([
|
|
12190
|
+
"primary",
|
|
12191
|
+
"secondary",
|
|
12192
|
+
"info",
|
|
12193
|
+
"success",
|
|
12194
|
+
"warning",
|
|
12195
|
+
"error"
|
|
12196
|
+
]);
|
|
12197
|
+
function isArbitraryColor2(value) {
|
|
12198
|
+
if (STAT_THEME_TOKENS.has(value)) return false;
|
|
12199
|
+
if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
|
|
12200
|
+
if (/^[a-zA-Z]+$/.test(value)) return true;
|
|
12201
|
+
return false;
|
|
12202
|
+
}
|
|
12167
12203
|
var statDirective = ({ props }) => {
|
|
12168
|
-
const
|
|
12204
|
+
const isThemeToken = STAT_THEME_TOKENS.has(props.color || "");
|
|
12205
|
+
const colorClass = isThemeToken ? ` nr-stat--${props.color}` : "";
|
|
12169
12206
|
const stat = document.createElement("div");
|
|
12170
12207
|
stat.className = `nr-stat${colorClass}`;
|
|
12171
12208
|
if (props.class) stat.classList.add(...props.class.split(/\s+/).filter(Boolean));
|
|
12172
12209
|
if (props.style) stat.setAttribute("style", props.style);
|
|
12210
|
+
const useInlineColor = props.color && isArbitraryColor2(props.color) && !isThemeToken;
|
|
12173
12211
|
if (props.icon) {
|
|
12174
12212
|
const figure = document.createElement("div");
|
|
12175
12213
|
figure.className = "nr-stat__figure";
|
|
12214
|
+
if (useInlineColor) figure.style.color = props.color;
|
|
12176
12215
|
figure.appendChild(createIcon(props.icon));
|
|
12177
12216
|
stat.appendChild(figure);
|
|
12178
12217
|
}
|
|
@@ -12185,6 +12224,7 @@ var statDirective = ({ props }) => {
|
|
|
12185
12224
|
if (props.value) {
|
|
12186
12225
|
const value = document.createElement("div");
|
|
12187
12226
|
value.className = "nr-stat__value";
|
|
12227
|
+
if (useInlineColor) value.style.color = props.color;
|
|
12188
12228
|
value.textContent = props.value;
|
|
12189
12229
|
stat.appendChild(value);
|
|
12190
12230
|
}
|
|
@@ -12311,7 +12351,9 @@ function processElements(elements, ctx, allElements) {
|
|
|
12311
12351
|
}
|
|
12312
12352
|
} else {
|
|
12313
12353
|
const grid = document.createElement("div");
|
|
12314
|
-
|
|
12354
|
+
const gridClass = BATCHED_DIRECTIVES[cards[0].directiveType];
|
|
12355
|
+
const align = cards[0].props?.align;
|
|
12356
|
+
grid.className = align === "center" || align === "right" ? `${gridClass} ${gridClass}--${align}` : gridClass;
|
|
12315
12357
|
for (const card of cards) {
|
|
12316
12358
|
const rendered = renderElement(card, ctx, allElements);
|
|
12317
12359
|
if (rendered) grid.appendChild(rendered);
|
|
@@ -12789,7 +12831,7 @@ var guideData = [
|
|
|
12789
12831
|
"title": "Card",
|
|
12790
12832
|
"icon": "dashboard",
|
|
12791
12833
|
"order": 1,
|
|
12792
|
-
"md": '# Card\n\nLa directiva `:::card` crea una tarjeta con icono, t\xEDtulo y contenido markdown.\n\n## Sintaxis\n\n```md\n:::card {title="
|
|
12834
|
+
"md": '# Card\n\nLa directiva `:::card` crea una tarjeta con icono, t\xEDtulo y contenido markdown.\n\n## Sintaxis b\xE1sica\n\nEl slot `#description` es **obligatorio** para mostrar texto en la card:\n\n```md\n:::card {title="Mi proyecto" icon="rocket"}\n\n#description\nResumen corto del proyecto.\n\n:::\n```\n\n:::card {title="Mi proyecto" icon="rocket"}\n\n#description\nResumen corto del proyecto.\n\n:::\n\n## Con contenido markdown\n\nEl slot `#description` admite markdown completo:\n\n```md\n:::card {title="Documentaci\xF3n t\xE9cnica" icon="code"}\n\n#description\nGu\xEDa completa del motor de renderizado.\n\n- Renderizado por el mismo motor\n- Soporta `inline`, tablas y directivas\n:::\n```\n\n:::card {title="Documentaci\xF3n t\xE9cnica" icon="code"}\n\n#description\nGu\xEDa completa del motor de renderizado.\n\n- Renderizado por el mismo motor\n- Soporta `inline`, tablas y directivas\n:::\n\n## Grid autom\xE1tico\n\nLas tarjetas **consecutivas** se agrupan en una cuadr\xEDcula responsive. A\xF1ade `batch="off"` para evitarlo:\n\n```md\n:::card {title="HTML" icon="html"}\n\n#description\nEstructura del documento.\n:::\n:::card {title="CSS" icon="palette"}\n\n#description\nEstilos y variables.\n:::\n:::card {title="JS" icon="javascript"}\n\n#description\nInteracci\xF3n y eventos.\n:::\n```\n\n:::card {title="HTML" icon="html"}\n\n#description\nEstructura del documento.\n:::\n:::card {title="CSS" icon="palette"}\n\n#description\nEstilos y variables.\n:::\n:::card {title="JS" icon="javascript"}\n\n#description\nInteracci\xF3n y eventos.\n:::\n\n## Alineaci\xF3n del grid\n\nUsa `align` para controlar la alineaci\xF3n de las tarjetas en el grid:\n\n```md\n:::card {title="Centrada A" icon="star" align="center"}\n\n#description\nContenido.\n:::\n:::card {title="Centrada B" icon="favorite"}\n\n#description\nContenido.\n:::\n```\n\n> `align` solo se define en la primera card del grupo; las dem\xE1s lo ignoran.\n\n:::card {title="Centrada A" icon="star" align="center"}\n\n#description\nContenido.\n:::\n:::card {title="Centrada B" icon="favorite"}\n\n#description\nContenido.\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo de la tarjeta |\n| `icon` | nombre Material | Icono del t\xEDtulo |\n| `image` | URL | Imagen de banner superior |\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del grid. Solo se lee de la primera card del grupo (default `left`) |\n| `batch` | `off` | Desactiva el agrupado en grid con las tarjetas vecinas |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Slots\n\n| Slot | Descripci\xF3n |\n| --- | --- |\n| `#description` | Texto de la card. **Obligatorio** para mostrar contenido debajo del t\xEDtulo |\n\n## Anidando directivas\n\n```md\n:::card {title="Ejemplo anidado" icon="layers"}\n\n#description\nUna admonici\xF3n dentro de la tarjeta.\n\n:::note\nLas tarjetas aceptan cualquier directiva dentro.\n:::\n:::\n```\n\n:::card {title="Ejemplo anidado" icon="layers"}\n\n#description\nUna admonici\xF3n dentro de la tarjeta.\n\n:::note\nLas tarjetas aceptan cualquier directiva dentro.\n:::\n:::\n\n## Variantes\n\nExisten dos variantes de la tarjeta con comportamiento interactivo:\n\n| Directiva | Comportamiento al hacer click |\n| --- | --- |\n| `:::card` | Sin acci\xF3n (tarjeta est\xE1tica) |\n| `:::card-m` | Abre un modal con el contenido del slot `#content` |\n| `:::card-b` | Navega a la URL indicada en la prop `url` |\n\nLas tres variantes comparten las mismas props base (`title`, `icon`, `image`) y se agrupan autom\xE1ticamente en grid. Consulta las p\xE1ginas de **Card Modal** y **Card Link** para m\xE1s detalles.'
|
|
12793
12835
|
},
|
|
12794
12836
|
{
|
|
12795
12837
|
"id": "card-m",
|
|
@@ -12797,7 +12839,7 @@ var guideData = [
|
|
|
12797
12839
|
"title": "Card Modal",
|
|
12798
12840
|
"icon": "open_in_new",
|
|
12799
12841
|
"order": 2,
|
|
12800
|
-
"md": '# Card Modal\r\n\r\nLa directiva `:::card-m` crea una tarjeta interactiva que al hacer click abre un **modal** con contenido detallado.\r\n\r\n## Sintaxis\r\n\r\n```md\r\n:::card-m {title="Mi proyecto" icon="rocket"}\r\n\r\nDescripci\xF3n breve visible en la tarjeta.\r\n\r\n#content\r\nContenido **detallado** que aparece en el modal.\r\nPuede incluir markdown completo: tablas, c\xF3digo, directivas...\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Mi proyecto" icon="rocket"}\r\n\r\nDescripci\xF3n breve visible en la tarjeta.\r\n\r\n#content\r\nContenido **detallado** que aparece en el modal.\r\nPuede incluir markdown completo: tablas, c\xF3digo, directivas...\r\n\r\n:::\r\n\r\n## Con imagen\r\n\r\n```md\r\n:::card-m {title="Paisaje" image="https://img.daisyui.com/images/stock/photo-1506905925346-21bda4d32df4.webp"}\r\n\r\nUna vista impresionante de las monta\xF1as.\r\n\r\n#content\r\n## Detalles del paisaje\r\n\r\n- Ubicaci\xF3n: Alpes suizos\r\n- Altitud: 2.500m\r\n- Mejor \xE9poca: Junio\u2013Septiembre\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Paisaje" image="https://img.daisyui.com/images/stock/photo-1506905925346-21bda4d32df4.webp"}\r\n\r\nUna vista impresionante de las monta\xF1as.\r\n\r\n#content\r\n## Detalles del paisaje\r\n\r\n- Ubicaci\xF3n: Alpes suizos\r\n- Altitud: 2.500m\r\n- Mejor \xE9poca: Junio\u2013Septiembre\r\n\r\n:::\r\n\r\n## Con slot `#description`\r\n\r\n```md\r\n:::card-m {title="Estad\xEDsticas" icon="analytics"}\r\n\r\n#description\r\nResumen r\xE1pido del rendimiento.\r\n\r\n#content\r\n| M\xE9trica | Valor |\r\n| --- | --- |\r\n| Usuarios | 12.345 |\r\n| Tasa de conversi\xF3n | 3,2% |\r\n| Tiempo medio | 2m 15s |\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Estad\xEDsticas" icon="analytics"}\r\n\r\n#description\r\nResumen r\xE1pido del rendimiento.\r\n\r\n#content\r\n| M\xE9trica | Valor |\r\n| --- | --- |\r\n| Usuarios | 12.345 |\r\n| Tasa de conversi\xF3n | 3,2% |\r\n| Tiempo medio | 2m 15s |\r\n\r\n:::\r\n\r\n## Grid autom\xE1tico\r\n\r\nLas cards `:::card-m` se agrupan en grid con `:::card` y `:::card-b`. Usa `batch="off"` para evitarlo:\r\n\r\n```md\r\n:::card {title="Est\xE1tica" icon="info"}\r\nContenido siempre visible.\r\n:::\r\n:::card-m {title="Modal" icon="open_in_new"}\r\nClick para ver m\xE1s.\r\n:::\r\n:::card-b {title="Link" icon="link" url="https://example.com"}\r\nAbre en nueva pesta\xF1a.\r\n:::\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Descripci\xF3n |\r\n| --- | --- | --- |\r\n| `title` | texto | T\xEDtulo de la tarjeta |\r\n| `icon` | nombre Material | Icono del t\xEDtulo |\r\n| `image` | URL | Imagen de banner superior |\r\n| `url` | URL | URL opcional (no se usa como link, solo metadata) |\r\n| `batch` | `off` | Desactiva el agrupado en grid |\r\n| `class` | texto | Clases CSS adicionales |\r\n| `style` | CSS | Estilos inline |\r\n\r\n## Slots\r\n\r\n| Slot | Descripci\xF3n |\r\n| --- | --- |\r\n| `
|
|
12842
|
+
"md": '# Card Modal\r\n\r\nLa directiva `:::card-m` crea una tarjeta interactiva que al hacer click abre un **modal** con contenido detallado.\r\n\r\n## Sintaxis\r\n\r\n```md\r\n:::card-m {title="Mi proyecto" icon="rocket"}\r\n\r\n#description\r\nDescripci\xF3n breve visible en la tarjeta.\r\n\r\n#content\r\nContenido **detallado** que aparece en el modal.\r\nPuede incluir markdown completo: tablas, c\xF3digo, directivas...\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Mi proyecto" icon="rocket"}\r\n\r\n#description\r\nDescripci\xF3n breve visible en la tarjeta.\r\n\r\n#content\r\nContenido **detallado** que aparece en el modal.\r\nPuede incluir markdown completo: tablas, c\xF3digo, directivas...\r\n\r\n:::\r\n\r\n## Con imagen\r\n\r\n```md\r\n:::card-m {title="Paisaje" image="https://img.daisyui.com/images/stock/photo-1506905925346-21bda4d32df4.webp"}\r\n\r\n#description\r\nUna vista impresionante de las monta\xF1as.\r\n\r\n#content\r\n## Detalles del paisaje\r\n\r\n- Ubicaci\xF3n: Alpes suizos\r\n- Altitud: 2.500m\r\n- Mejor \xE9poca: Junio\u2013Septiembre\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Paisaje" image="https://img.daisyui.com/images/stock/photo-1506905925346-21bda4d32df4.webp"}\r\n\r\n#description\r\nUna vista impresionante de las monta\xF1as.\r\n\r\n#content\r\n## Detalles del paisaje\r\n\r\n- Ubicaci\xF3n: Alpes suizos\r\n- Altitud: 2.500m\r\n- Mejor \xE9poca: Junio\u2013Septiembre\r\n\r\n:::\r\n\r\n## Con slot `#description`\r\n\r\n```md\r\n:::card-m {title="Estad\xEDsticas" icon="analytics"}\r\n\r\n#description\r\nResumen r\xE1pido del rendimiento.\r\n\r\n#content\r\n| M\xE9trica | Valor |\r\n| --- | --- |\r\n| Usuarios | 12.345 |\r\n| Tasa de conversi\xF3n | 3,2% |\r\n| Tiempo medio | 2m 15s |\r\n\r\n:::\r\n```\r\n\r\n:::card-m {title="Estad\xEDsticas" icon="analytics"}\r\n\r\n#description\r\nResumen r\xE1pido del rendimiento.\r\n\r\n#content\r\n| M\xE9trica | Valor |\r\n| --- | --- |\r\n| Usuarios | 12.345 |\r\n| Tasa de conversi\xF3n | 3,2% |\r\n| Tiempo medio | 2m 15s |\r\n\r\n:::\r\n\r\n## Grid autom\xE1tico\r\n\r\nLas cards `:::card-m` se agrupan en grid con `:::card` y `:::card-b`. Usa `batch="off"` para evitarlo:\r\n\r\n```md\r\n:::card {title="Est\xE1tica" icon="info"}\r\nContenido siempre visible.\r\n:::\r\n:::card-m {title="Modal" icon="open_in_new"}\r\nClick para ver m\xE1s.\r\n:::\r\n:::card-b {title="Link" icon="link" url="https://example.com"}\r\nAbre en nueva pesta\xF1a.\r\n:::\r\n```\r\n\r\n:::card {title="Est\xE1tica" icon="info"}\r\nContenido siempre visible.\r\n:::\r\n:::card-m {title="Modal" icon="open_in_new"}\r\nClick para ver m\xE1s.\r\n:::\r\n:::card-b {title="Link" icon="link" url="https://example.com"}\r\nAbre en nueva pesta\xF1a.\r\n:::\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Descripci\xF3n |\r\n| --- | --- | --- |\r\n| `title` | texto | T\xEDtulo de la tarjeta |\r\n| `icon` | nombre Material | Icono del t\xEDtulo |\r\n| `image` | URL | Imagen de banner superior |\r\n| `url` | URL | URL opcional (no se usa como link, solo metadata) |\r\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del grid. Solo se lee de la primera card del grupo (default `left`) |\r\n| `batch` | `off` | Desactiva el agrupado en grid |\r\n| `class` | texto | Clases CSS adicionales |\r\n| `style` | CSS | Estilos inline |\r\n\r\n## Slots\r\n\r\n| Slot | Descripci\xF3n |\r\n| --- | --- |\r\n| `#description` | Texto de la card. **Obligatorio** para mostrar contenido debajo del t\xEDtulo |\r\n| `#content` | Contenido detallado que se muestra en el modal |\r\n\r\n## Diferencia con `:::card` y `:::card-b`\r\n\r\n| Directiva | Comportamiento al hacer click |\r\n| --- | --- |\r\n| `:::card` | Sin acci\xF3n (tarjeta est\xE1tica) |\r\n| `:::card-m` | Abre un modal con el contenido de `#content` |\r\n| `:::card-b` | Navega a la URL indicada en `url` |'
|
|
12801
12843
|
},
|
|
12802
12844
|
{
|
|
12803
12845
|
"id": "keys",
|
|
@@ -12805,7 +12847,7 @@ var guideData = [
|
|
|
12805
12847
|
"title": "Keys (teclas)",
|
|
12806
12848
|
"icon": "keyboard",
|
|
12807
12849
|
"order": 2,
|
|
12808
|
-
"md": '# Keys (teclas)\n\nLa directiva `:::keys` muestra combinaciones de teclado con apariencia de teclas f\xEDsicas.\n\n## Sintaxis\n\n```md\n:::keys\nCTRL + C\n:::\n```\n\n:::keys\nCTRL + C\n:::\n\n## Varias combinaciones\n\n```md\n:::keys\nCTRL + SHIFT + P\n:::\n```\n\n:::keys\nCTRL + SHIFT + P\n:::\n\n:::keys\nALT + F4\n:::\n\n:::keys\nESC\n:::\n\n## Tama\xF1os\n\n| Tama\xF1o | Sintaxis |\n| --- | --- |\n| `xs` | `:::keys {size="xs"}` |\n| `sm` | `:::keys {size="sm"}` |\n| `md` | sin prop (default) |\n| `lg` | `:::keys {size="lg"}` |\n| `xl` | `:::keys {size="xl"}` |\n\n:::keys {size="xs"}\nCTRL + A\n:::\n\n:::keys {size="sm"}\nCTRL + A\n:::\n\n:::keys {size="md"}\nCTRL + A\n:::\n\n:::keys {size="lg"}\nCTRL + A\n:::\n\n:::keys {size="xl"}\nCTRL + A\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `size` | `xs`
|
|
12850
|
+
"md": '# Keys (teclas)\n\nLa directiva `:::keys` muestra combinaciones de teclado con apariencia de teclas f\xEDsicas.\n\n## Sintaxis\n\n```md\n:::keys\nCTRL + C\n:::\n```\n\n:::keys\nCTRL + C\n:::\n\n## Varias combinaciones\n\n```md\n:::keys\nCTRL + SHIFT + P\n:::\n```\n\n:::keys\nCTRL + SHIFT + P\n:::\n\n:::keys\nALT + F4\n:::\n\n:::keys\nESC\n:::\n\n## Tama\xF1os\n\n| Tama\xF1o | Sintaxis |\n| --- | --- |\n| `xs` | `:::keys {size="xs"}` |\n| `sm` | `:::keys {size="sm"}` |\n| `md` | sin prop (default) |\n| `lg` | `:::keys {size="lg"}` |\n| `xl` | `:::keys {size="xl"}` |\n\n:::keys {size="xs"}\nCTRL + A\n:::\n\n:::keys {size="sm"}\nCTRL + A\n:::\n\n:::keys {size="md"}\nCTRL + A\n:::\n\n:::keys {size="lg"}\nCTRL + A\n:::\n\n:::keys {size="xl"}\nCTRL + A\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `size` | `xs` / `sm` / `md` / `lg` / `xl` | Tama\xF1o de las teclas (default `md`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Ejemplo combinado\n\n```md\n:::keys {size="lg"}\nSHIFT + CTRL + G\n:::\n```\n\n:::keys {size="lg"}\nSHIFT + CTRL + G\n:::\n\n> Las teclas se separan autom\xE1ticamente por el signo `+`.'
|
|
12809
12851
|
},
|
|
12810
12852
|
{
|
|
12811
12853
|
"id": "accordion",
|
|
@@ -12821,7 +12863,7 @@ var guideData = [
|
|
|
12821
12863
|
"title": "Card Link",
|
|
12822
12864
|
"icon": "link",
|
|
12823
12865
|
"order": 3,
|
|
12824
|
-
"md": '# Card Link\r\n\r\nLa directiva `:::card-b` crea una tarjeta interactiva que al hacer click **navega a una URL** en una nueva pesta\xF1a.\r\n\r\n## Sintaxis\r\n\r\n```md\r\n:::card-b {title="Documentaci\xF3n" icon="menu_book" url="https://example.com"}\r\n\r\nAccede a la documentaci\xF3n completa del proyecto.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="Documentaci\xF3n" icon="menu_book" url="https://example.com"}\r\n\r\nAccede a la documentaci\xF3n completa del proyecto.\r\n\r\n:::\r\n\r\n## Con imagen\r\n\r\n```md\r\n:::card-b {title="GitHub" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://github.com"}\r\n\r\nExplora el repositorio en GitHub.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="GitHub" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://github.com"}\r\n\r\nExplora el repositorio en GitHub.\r\n\r\n:::\r\n\r\n## Con
|
|
12866
|
+
"md": '# Card Link\r\n\r\nLa directiva `:::card-b` crea una tarjeta interactiva que al hacer click **navega a una URL** en una nueva pesta\xF1a.\r\n\r\n## Sintaxis\r\n\r\n```md\r\n:::card-b {title="Documentaci\xF3n" icon="menu_book" url="https://example.com"}\r\n\r\n#description\r\nAccede a la documentaci\xF3n completa del proyecto.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="Documentaci\xF3n" icon="menu_book" url="https://example.com"}\r\n\r\n#description\r\nAccede a la documentaci\xF3n completa del proyecto.\r\n\r\n:::\r\n\r\n## Con imagen\r\n\r\n```md\r\n:::card-b {title="GitHub" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://github.com"}\r\n\r\n#description\r\nExplora el repositorio en GitHub.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="GitHub" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://github.com"}\r\n\r\n#description\r\nExplora el repositorio en GitHub.\r\n\r\n:::\r\n\r\n## Con imagen y descripci\xF3n\r\n\r\n```md\r\n:::card-b {title="NPM" icon="inventory_2" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://npmjs.com"}\r\n\r\n#description\r\nPublicado recientemente con las \xFAltimas mejoras.\r\n\r\n:::\r\n```\r\n\r\n:::card-b {title="NPM" icon="inventory_2" image="https://img.daisyui.com/images/stock/photo-1470071459604-3b5ec3a7fe05.webp" url="https://npmjs.com"}\r\n\r\n#description\r\nPublicado recientemente con las \xFAltimas mejoras.\r\n\r\n:::\r\n\r\n## Grid autom\xE1tico\r\n\r\nLas cards `:::card-b` se agrupan en grid con `:::card` y `:::card-m`. Usa `batch="off"` para evitarlo:\r\n\r\n```md\r\n:::card-b {title="Docs" icon="menu_book" url="https://docs.example.com"}\r\n\r\n#description\r\nDocumentaci\xF3n oficial.\r\n:::\r\n:::card-b {title="GitHub" icon="code" url="https://github.com"}\r\n\r\n#description\r\nC\xF3digo fuente.\r\n:::\r\n:::card-b {title="NPM" icon="inventory_2" url="https://npmjs.com"}\r\n\r\n#description\r\nPaquete npm.\r\n:::\r\n```\r\n\r\n## Props\r\n\r\n| Prop | Tipo | Descripci\xF3n |\r\n| --- | --- | --- |\r\n| `title` | texto | T\xEDtulo de la tarjeta |\r\n| `icon` | nombre Material | Icono del t\xEDtulo |\r\n| `image` | URL | Imagen de banner superior |\r\n| `url` | URL | **Requerido.** URL de destino al hacer click |\r\n| `target` | texto | Target del enlace (por defecto `_blank`) |\r\n| `align` | `left` / `center` / `right` | Alineaci\xF3n del grid. Solo se lee de la primera card del grupo (default `left`) |\r\n| `batch` | `off` | Desactiva el agrupado en grid |\r\n| `class` | texto | Clases CSS adicionales |\r\n| `style` | CSS | Estilos inline |\r\n\r\n## Slots\r\n\r\n| Slot | Descripci\xF3n |\r\n| --- | --- |\r\n| `#description` | Texto de la card. **Obligatorio** para mostrar contenido debajo del t\xEDtulo |\r\n\r\n## Diferencia con `:::card` y `:::card-m`\r\n\r\n| Directiva | Comportamiento al hacer click |\r\n| --- | --- |\r\n| `:::card` | Sin acci\xF3n (tarjeta est\xE1tica) |\r\n| `:::card-m` | Abre un modal con el contenido de `#content` |\r\n| `:::card-b` | Navega a la URL indicada en `url` |'
|
|
12825
12867
|
},
|
|
12826
12868
|
{
|
|
12827
12869
|
"id": "carousel",
|
|
@@ -12829,7 +12871,7 @@ var guideData = [
|
|
|
12829
12871
|
"title": "Carousel",
|
|
12830
12872
|
"icon": "view_carousel",
|
|
12831
12873
|
"order": 4,
|
|
12832
|
-
"md": '# Carousel\n\nLa directiva `:::carousel` muestra un carrusel de im\xE1genes con flechas, puntos de navegaci\xF3n y **loop infinito**.\n\n## Sintaxis\n\nLas im\xE1genes se ponen como markdown dentro del bloque:\n\n```md\n:::carousel {height="320px"}\n\n\n\n\n:::\n```\n\n:::carousel {height="320px"}\n\n\n\n\n:::\n\n## Tama\xF1o y proporci\xF3n\n\n- Sin props, el viewport usa `16/9` de aspecto.\n- `height` fija la altura del viewport (las im\xE1genes lo rellenan).\n- `aspect` fija la proporci\xF3n (`4/3`, `1/1`, `21/9`...).\n\n```md\n:::carousel {aspect="4/3" width="420px" float="right"}\n\n\n:::\n```\n\n:::carousel {aspect="4/3" width="420px" float="right"}\n\n\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `height` | CSS (px) | Altura fija del viewport |\n| `aspect` | ratio | Proporci\xF3n del viewport (default `16/9`) |\n| `width` | CSS (px, %) | Ancho del carrusel |\n| `float` | `left`
|
|
12874
|
+
"md": '# Carousel\n\nLa directiva `:::carousel` muestra un carrusel de im\xE1genes con flechas, puntos de navegaci\xF3n y **loop infinito**.\n\n## Sintaxis\n\nLas im\xE1genes se ponen como markdown dentro del bloque:\n\n```md\n:::carousel {height="320px"}\n\n\n\n\n:::\n```\n\n:::carousel {height="320px"}\n\n\n\n\n:::\n\n## Tama\xF1o y proporci\xF3n\n\n- Sin props, el viewport usa `16/9` de aspecto.\n- `height` fija la altura del viewport (las im\xE1genes lo rellenan).\n- `aspect` fija la proporci\xF3n (`4/3`, `1/1`, `21/9`...).\n\n```md\n:::carousel {aspect="4/3" width="420px" float="right"}\n\n\n:::\n```\n\n:::carousel {aspect="4/3" width="420px" float="right"}\n\n\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `height` | CSS (px) | Altura fija del viewport |\n| `aspect` | ratio | Proporci\xF3n del viewport (default `16/9`) |\n| `width` | CSS (px, %) | Ancho del carrusel |\n| `float` | `left` / `right` / `center` | Flotaci\xF3n (sin `width`, el flotante usa `max-width: 50%`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Interacci\xF3n\n\n- **Flechas** (izquierda/derecha): navegar.\n- **Puntos** inferiores: ir a una imagen.\n- **Teclado**: `\u2190` y `\u2192` cuando el carrusel est\xE1 enfocado.\n- El carrusel **da la vuelta** al llegar al final (loop infinito).\n\n> Las im\xE1genes se recortan (`object-fit: cover`) para rellenar el viewport sin deformarse.'
|
|
12833
12875
|
},
|
|
12834
12876
|
{
|
|
12835
12877
|
"id": "countdown",
|
|
@@ -12845,7 +12887,7 @@ var guideData = [
|
|
|
12845
12887
|
"title": "Diff (comparar im\xE1genes)",
|
|
12846
12888
|
"icon": "compare",
|
|
12847
12889
|
"order": 6,
|
|
12848
|
-
"md": '# Diff (comparar im\xE1genes)\n\nLa directiva `:::diff` muestra **antes y despu\xE9s** con un slider arrastrable.\n\n## Sintaxis\n\nSe indican las dos im\xE1genes con las props `before` y `after`:\n\n```md\n:::diff {before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n```\n\n:::diff {before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n\n## Con dos im\xE1genes markdown\n\nAlternativa: dos im\xE1genes en el cuerpo del bloque (la primera es el \xABantes\xBB):\n\n```md\n:::diff {height="320px"}\n\n\n:::\n```\n\n:::diff {height="320px"}\n\n\n:::\n\n## Tama\xF1o y flotaci\xF3n\n\n```md\n:::diff {width="440px" aspect="4/3" float="left" before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n```\n\n:::diff {width="440px" aspect="4/3" float="left" before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n\nTexto que fluye junto al diff flotante: la comparaci\xF3n queda integrada en el p\xE1rrafo como una imagen flotante m\xE1s.\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `before` | URL | Imagen \xABantes\xBB (descartada si hay dos im\xE1genes markdown) |\n| `after` | URL | Imagen \xABdespu\xE9s\xBB |\n| `height` | CSS (px) | Altura del comparador (default `16/9` de aspecto) |\n| `aspect` | ratio | Proporci\xF3n (`4/3`, `1/1`, ...) |\n| `width` | CSS (px, %) | Ancho del comparador |\n| `float` | `left`
|
|
12890
|
+
"md": '# Diff (comparar im\xE1genes)\n\nLa directiva `:::diff` muestra **antes y despu\xE9s** con un slider arrastrable.\n\n## Sintaxis\n\nSe indican las dos im\xE1genes con las props `before` y `after`:\n\n```md\n:::diff {before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n```\n\n:::diff {before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n\n## Con dos im\xE1genes markdown\n\nAlternativa: dos im\xE1genes en el cuerpo del bloque (la primera es el \xABantes\xBB):\n\n```md\n:::diff {height="320px"}\n\n\n:::\n```\n\n:::diff {height="320px"}\n\n\n:::\n\n## Tama\xF1o y flotaci\xF3n\n\n```md\n:::diff {width="440px" aspect="4/3" float="left" before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n```\n\n:::diff {width="440px" aspect="4/3" float="left" before="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" after="https://img.daisyui.com/images/stock/photo-1572635196237-14b3f281503f.webp"}\n:::\n\nTexto que fluye junto al diff flotante: la comparaci\xF3n queda integrada en el p\xE1rrafo como una imagen flotante m\xE1s.\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `before` | URL | Imagen \xABantes\xBB (descartada si hay dos im\xE1genes markdown) |\n| `after` | URL | Imagen \xABdespu\xE9s\xBB |\n| `height` | CSS (px) | Altura del comparador (default `16/9` de aspecto) |\n| `aspect` | ratio | Proporci\xF3n (`4/3`, `1/1`, ...) |\n| `width` | CSS (px, %) | Ancho del comparador |\n| `float` | `left` / `right` / `center` | Flotaci\xF3n (sin `width`, `max-width: 50%`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Interacci\xF3n\n\n- **Arrastra** el mango vertical para mover la l\xEDnea de corte.\n- **Haz clic** en cualquier punto para saltar el slider all\xED.\n- **Teclado**: `\u2190` y `\u2192` ajustan \xB15% (enfoca el comparador con Tab).'
|
|
12849
12891
|
},
|
|
12850
12892
|
{
|
|
12851
12893
|
"id": "hover-3d",
|
|
@@ -12869,7 +12911,7 @@ var guideData = [
|
|
|
12869
12911
|
"title": "Chat",
|
|
12870
12912
|
"icon": "chat_bubble",
|
|
12871
12913
|
"order": 9,
|
|
12872
|
-
"md": '# Chat\n\nLa directiva `:::chat` muestra **burbujas de conversaci\xF3n** (`:::chat-item`) estilo app de mensajer\xEDa.\n\n## Sintaxis\n\n```md\n:::chat\n:::chat-item {side="start" name="Ana" time="10:04"}\nHola, \xBFterminaste la documentaci\xF3n?\n:::\n:::chat-item {side="end" name="T\xFA" time="10:05"}\n\xA1S\xED! La gu\xEDa renderiza hasta directivas dentro del chat.\n:::\n:::chat-item {side="start" name="Ana" time="10:06"}\nIncre\xEDble. El motor escribe solo.\n:::\n:::\n```\n\n:::chat\n:::chat-item {side="start" name="Ana" time="10:04"}\nHola, \xBFterminaste la documentaci\xF3n?\n:::\n:::chat-item {side="end" name="T\xFA" time="10:05"}\n\xA1S\xED! La gu\xEDa renderiza hasta directivas dentro del chat.\n:::\n:::chat-item {side="start" name="Ana" time="10:06"}\nIncre\xEDble. El motor escribe solo.\n:::\n:::\n\n## Con avatar y color\n\n```md\n:::chat\n:::chat-item {side="start" name="Soporte" time="11:00" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" color="info" footer="Atendido"}\n\xBFEn qu\xE9 podemos ayudarte?\n:::\n:::chat-item {side="end" name="T\xFA" time="11:02" color="secondary" footer="Enviado"}\n\xBFC\xF3mo a\xF1ado un avatar personalizado?\n:::\n:::\n```\n\n:::chat\n:::chat-item {side="start" name="Soporte" time="11:00" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" color="info" footer="Atendido"}\n\xBFEn qu\xE9 podemos ayudarte?\n:::\n:::chat-item {side="end" name="T\xFA" time="11:02" color="secondary" footer="Enviado"}\n\xBFC\xF3mo a\xF1ado un avatar personalizado?\n:::\n:::\n\n## Props\n\n### `:::chat-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `side` | `start` \\| `end` | Burbuja a la izquierda o derecha (default `start`) |\n| `name` | texto | Nombre del autor |\n| `time` | texto | Hora mostrada bajo el nombre |\n| `avatar` | URL | Imagen del avatar |\n| `color` | `neutral`
|
|
12914
|
+
"md": '# Chat\n\nLa directiva `:::chat` muestra **burbujas de conversaci\xF3n** (`:::chat-item`) estilo app de mensajer\xEDa.\n\n## Sintaxis\n\n```md\n:::chat\n:::chat-item {side="start" name="Ana" time="10:04"}\nHola, \xBFterminaste la documentaci\xF3n?\n:::\n:::chat-item {side="end" name="T\xFA" time="10:05"}\n\xA1S\xED! La gu\xEDa renderiza hasta directivas dentro del chat.\n:::\n:::chat-item {side="start" name="Ana" time="10:06"}\nIncre\xEDble. El motor escribe solo.\n:::\n:::\n```\n\n:::chat\n:::chat-item {side="start" name="Ana" time="10:04"}\nHola, \xBFterminaste la documentaci\xF3n?\n:::\n:::chat-item {side="end" name="T\xFA" time="10:05"}\n\xA1S\xED! La gu\xEDa renderiza hasta directivas dentro del chat.\n:::\n:::chat-item {side="start" name="Ana" time="10:06"}\nIncre\xEDble. El motor escribe solo.\n:::\n:::\n\n## Con avatar y color\n\n```md\n:::chat\n:::chat-item {side="start" name="Soporte" time="11:00" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" color="info" footer="Atendido"}\n\xBFEn qu\xE9 podemos ayudarte?\n:::\n:::chat-item {side="end" name="T\xFA" time="11:02" color="secondary" footer="Enviado"}\n\xBFC\xF3mo a\xF1ado un avatar personalizado?\n:::\n:::\n```\n\n:::chat\n:::chat-item {side="start" name="Soporte" time="11:00" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" color="info" footer="Atendido"}\n\xBFEn qu\xE9 podemos ayudarte?\n:::\n:::chat-item {side="end" name="T\xFA" time="11:02" color="secondary" footer="Enviado"}\n\xBFC\xF3mo a\xF1ado un avatar personalizado?\n:::\n:::\n\n## Props\n### `:::chat`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n### `:::chat-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `side` | `start` \\| `end` | Burbuja a la izquierda o derecha (default `start`) |\n| `name` | texto | Nombre del autor |\n| `time` | texto | Hora mostrada bajo el nombre |\n| `avatar` | URL | Imagen del avatar |\n| `color` | `neutral` / `primary` / `secondary` / `accent` / `info` / `success` / `warning` / `error` / CSS color | Color de la burbuja. Acepta tokens del tema o cualquier color CSS v\\u00e1lido (ej: `blue`, `#ff6600`, `rgb(255,0,0)`) |\n| `footer` | texto | Pie del mensaje |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Notas\n\n- El contenido de cada `chat-item` admite **markdown completo** (c\xF3digo, tablas, enlaces...).\n- Puedes poner varios `:::chat` en el documento; cada uno es un grupo independiente.'
|
|
12873
12915
|
},
|
|
12874
12916
|
{
|
|
12875
12917
|
"id": "richlist",
|
|
@@ -12877,7 +12919,7 @@ var guideData = [
|
|
|
12877
12919
|
"title": "Richlist",
|
|
12878
12920
|
"icon": "playlist_play",
|
|
12879
12921
|
"order": 10,
|
|
12880
|
-
"md": '# Richlist\n\nLa directiva `:::richlist` muestra una **lista enriquecida** (`:::richlist-item`) con imagen, t\xEDtulos, subt\xEDtulo e iconos.\n\n## Sintaxis\n\n```md\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n```\n\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n\n## Con iconos en ambos lados\n\n```md\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n```\n\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n\n## Props\n\n### `:::richlist-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del elemento |\n| `subtitle` | texto | Subt\xEDtulo (segunda l\xEDnea) |\n| `image` | URL | Imagen a la izquierda (sustituye a `icon`) |\n| `icon` | nombre Material | Icono a la izquierda |\n| `icon2` | nombre Material | Icono a la derecha |\n| `url` | URL | El bot\xF3n del `icon` abre el enlace en una pesta\xF1a nueva |\n| `url2` | URL | El bot\xF3n del `icon2` abre el enlace en una pesta\xF1a nueva |\n| `event` | `evento: fn` | Handler del bot\xF3n `icon` (funci\xF3n global, ver abajo) |\n| `event2` | `evento: fn` | Handler del bot\xF3n `icon2` (funci\xF3n global, ver abajo) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n### `:::richlist`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Botones con acci\xF3n\n\nCada bot\xF3n de icono puede navegar (`url`/`url2`) o llamar a una funci\xF3n global (`event`/`event2`). `event` tiene prioridad sobre `url` en el mismo bot\xF3n:\n\n```md\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n```\n\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n\n### Sintaxis de `event`\n\n```md\nevent="click: miFuncion" <!-- un solo evento -->\nevent="click: fn1; mouseover: fn2" <!-- varios, separados por ; -->\nevent="onclick: miFuncion" <!-- el prefijo "on" es opcional -->\n```\n\nLa funci\xF3n se resuelve desde el **scope global** en el momento del evento y se invoca con el elemento como `this` y el evento como argumento:\n\n```js\nwindow.reproducirSonido = function (event) {\n console.log(\'Click en:\', this);\n};\n```\n\n:::note\nSi la funci\xF3n no existe, el bot\xF3n simplemente no hace nada (sin errores). El `event` es contenido propio del autor, con el mismo modelo de confianza que los bloques HTML crudo.\n:::'
|
|
12922
|
+
"md": '# Richlist\n\nLa directiva `:::richlist` muestra una **lista enriquecida** (`:::richlist-item`) con imagen, t\xEDtulos, subt\xEDtulo e iconos.\n\n## Sintaxis\n\n```md\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n:::\n```\n\n:::richlist\n:::richlist-item {title="Vim" subtitle="Editor de texto" image="https://img.daisyui.com/images/stock/photo-1493863641943-9b68992a8d07.webp"}\n:::\n:::richlist-item {title="Git" subtitle="Control de versiones" icon="code" icon2="terminal"}\n:::\n:::richlist-item {title="Docker" subtitle="Contenedores" icon="deployed_code"}\n:::\n:::\n\n## Con iconos en ambos lados\n\n```md\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n:::\n```\n\n:::richlist\n:::richlist-item {title="Modo oscuro" subtitle="Menos fatiga visual" icon="dark_mode" icon2="chevron_right"}\n:::\n:::richlist-item {title="Atajos" subtitle="M\xE1s velocidad" icon="keyboard" icon2="chevron_right"}\n:::\n:::richlist-item {title="Tema" subtitle="Personaliza colores" icon="palette" icon2="chevron_right"}\n:::\n:::\n\n## Props\n\n### `:::richlist-item`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\xEDtulo del elemento |\n| `subtitle` | texto | Subt\xEDtulo (segunda l\xEDnea) |\n| `image` | URL | Imagen a la izquierda (sustituye a `icon`) |\n| `icon` | nombre Material | Icono a la izquierda |\n| `icon2` | nombre Material | Icono a la derecha |\n| `url` | URL | El bot\xF3n del `icon` abre el enlace en una pesta\xF1a nueva |\n| `url2` | URL | El bot\xF3n del `icon2` abre el enlace en una pesta\xF1a nueva |\n| `event` | `evento: fn` | Handler del bot\xF3n `icon` (funci\xF3n global, ver abajo) |\n| `event2` | `evento: fn` | Handler del bot\xF3n `icon2` (funci\xF3n global, ver abajo) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n### `:::richlist`\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Botones con acci\xF3n\n\nCada bot\xF3n de icono puede navegar (`url`/`url2`) o llamar a una funci\xF3n global (`event`/`event2`). `event` tiene prioridad sobre `url` en el mismo bot\xF3n:\n\n```md\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n```\n\n:::richlist\n:::richlist-item {title="Reproductor" subtitle="Demo de botones" icon="open_in_new" url="https://example.com" icon2="volume_up" event="click: reproducirSonido"}\nEl primer bot\xF3n abre una pesta\xF1a nueva; el segundo ejecuta una funci\xF3n global al hacer clic.\n:::\n:::\n\n### Sintaxis de `event`\n\n```md\nevent="click: miFuncion" <!-- un solo evento -->\nevent="click: fn1; mouseover: fn2" <!-- varios, separados por ; -->\nevent="onclick: miFuncion" <!-- el prefijo "on" es opcional -->\n```\n\nLa funci\xF3n se resuelve desde el **scope global** en el momento del evento y se invoca con el elemento como `this` y el evento como argumento:\n\n```js\nwindow.reproducirSonido = function (event) {\n console.log(\'Click en:\', this);\n};\n```\n\n:::note\nSi la funci\xF3n no existe, el bot\xF3n simplemente no hace nada (sin errores). El `event` es contenido propio del autor, con el mismo modelo de confianza que los bloques HTML crudo.\n:::'
|
|
12881
12923
|
},
|
|
12882
12924
|
{
|
|
12883
12925
|
"id": "stat",
|
|
@@ -12885,7 +12927,7 @@ var guideData = [
|
|
|
12885
12927
|
"title": "Stat",
|
|
12886
12928
|
"icon": "insights",
|
|
12887
12929
|
"order": 11,
|
|
12888
|
-
"md": '# Stat\n\nLa directiva `:::stat` muestra una **estad\xEDstica** con icono, valor y descripci\xF3n. Las estad\xEDsticas **consecutivas** se agrupan en una fila.\n\n## Sintaxis\n\n```md\n:::stat {title="Descargas" value="31K" icon="download" color="success"}\n:::stat {title="Nuevos usuarios" value="4,200" icon="group_add" color="primary"}\n:::stat {title="Retenci\xF3n" value="82%" icon="trending_up" color="info"}\n:::\n```\n\n:::stat {title="Descargas" value="31K" icon="download" color="success"}\n:::stat {title="Nuevos usuarios" value="4,200" icon="group_add" color="primary"}\n:::stat {title="Retenci\xF3n" value="82%" icon="trending_up" color="info"}\n:::\n\n## Con descripci\xF3n\n\n```md\n:::stat {title="Ingresos" value="$14,320" desc="+12% este mes" icon="payments" color="secondary"}\n:::stat {title="Errores" value="3" desc="resueltos hoy" icon="bug_report" color="warning"}\n:::\n```\n\n:::stat {title="Ingresos" value="$14,320" desc="+12% este mes" icon="payments" color="secondary"}\n:::stat {title="Errores" value="3" desc="resueltos hoy" icon="bug_report" color="warning"}\n:::\n\n## Prop individual (sin agrupar)\n\n```md\n:::stat {title="Tiempo de actividad" value="99.9%" icon="monitor_heart" color="success"}\n```\n\n:::stat {title="Tiempo de actividad" value="99.9%" icon="monitor_heart" color="success"}\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | Etiqueta superior |\n| `value` | texto | Valor principal (grande) |\n| `desc` | texto | Descripci\xF3n bajo el valor |\n| `icon` | nombre Material | Icono lateral |\n| `color` | `primary`
|
|
12930
|
+
"md": '# Stat\n\nLa directiva `:::stat` muestra una **estad\xEDstica** con icono, valor y descripci\xF3n. Las estad\xEDsticas **consecutivas** se agrupan en una fila.\n\n## Sintaxis\n\n```md\n:::stat {title="Descargas" value="31K" icon="download" color="success"}\n:::\n:::stat {title="Nuevos usuarios" value="4,200" icon="group_add" color="primary"}\n:::\n:::stat {title="Retenci\xF3n" value="82%" icon="trending_up" color="info"}\n:::\n```\n\n:::stat {title="Descargas" value="31K" icon="download" color="success"}\n:::\n:::stat {title="Nuevos usuarios" value="4,200" icon="group_add" color="primary"}\n:::\n:::stat {title="Retenci\xF3n" value="82%" icon="trending_up" color="info"}\n:::\n\n## Con descripci\xF3n\n\n```md\n:::stat {title="Ingresos" value="$14,320" desc="+12% este mes" icon="payments" color="secondary"}\n:::\n:::stat {title="Errores" value="3" desc="resueltos hoy" icon="bug_report" color="warning"}\n:::\n```\n\n:::stat {title="Ingresos" value="$14,320" desc="+12% este mes" icon="payments" color="secondary"}\n:::\n:::stat {title="Errores" value="3" desc="resueltos hoy" icon="bug_report" color="warning"}\n:::\n\n## Prop individual (sin agrupar)\n\n```md\n:::stat {title="Tiempo de actividad" value="99.9%" icon="monitor_heart" color="success"}\n:::\n```\n\n:::stat {title="Tiempo de actividad" value="99.9%" icon="monitor_heart" color="success"}\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | Etiqueta superior |\n| `value` | texto | Valor principal (grande) |\n| `desc` | texto | Descripci\xF3n bajo el valor |\n| `icon` | nombre Material | Icono lateral |\n| `color` | `primary` / `secondary` / `info` / `success` / `warning` / `error` / CSS color | Color del icono y valor. Acepta tokens del tema o cualquier color CSS v\\u00e1lido (ej: `blue`, `#ff0000`, `rgb(255,0,0)`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n> Cada `:::stat` debe cerrarse con su `:::`. Las stats contiguas se agrupan en fila autom\xE1ticamente; para separarlas deja texto entre medias.'
|
|
12889
12931
|
},
|
|
12890
12932
|
{
|
|
12891
12933
|
"id": "details",
|
|
@@ -12893,7 +12935,7 @@ var guideData = [
|
|
|
12893
12935
|
"title": "Details",
|
|
12894
12936
|
"icon": "expand_more",
|
|
12895
12937
|
"order": 1,
|
|
12896
|
-
"md": '# Details\n\nLa directiva `:::details` crea un bloque **plegable** nativo (`<details>`), \xFAtil para respuestas largas o contenido oculto.\n\n## Sintaxis\n\n```md\n:::details {title="\xBFQu\xE9 es NoirMD?"}\nEditor y motor de markdown con directivas propias.\n:::\n```\n\n:::details {title="\xBFQu\xE9 es NoirMD?"}\nEditor y motor de markdown con directivas propias.\n:::\n\n## Abierto por defecto\n\n```md\n:::details {title="Atajos del editor" defaultOpen="true"}\n| Atajo | Acci\xF3n |\n| --- | --- |\n| `Ctrl+S` | Guardar |\n| `Ctrl+K` | Alternar preview |\n| `Ctrl+F` | Buscar |\n:::\n```\n\n:::details {title="Atajos del editor" defaultOpen="true"}\n| Atajo | Acci\xF3n |\n| --- | --- |\n| `Ctrl+S` | Guardar |\n| `Ctrl+K` | Alternar preview |\n| `Ctrl+F` | Buscar |\n:::\n\n## Con icono\n\n```md\n:::details {title="Soluci\xF3n del ejercicio" icon="lightbulb"}\nEl c\xF3digo resultante:\n\n```js\nconsole.log(\'\xA1Resuelto!\');\n```\n:::\n```\n\n:::details {title="Soluci\xF3n del ejercicio" icon="lightbulb"}\nEl c\xF3digo resultante:\n\n```js\nconsole.log(\'\xA1Resuelto!\');\n```\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T
|
|
12938
|
+
"md": '# Details\n\nLa directiva `:::details` crea un bloque **plegable** nativo (`<details>`), \xFAtil para respuestas largas o contenido oculto.\n\n## Sintaxis\n\n```md\n:::details {title="\xBFQu\xE9 es NoirMD?"}\nEditor y motor de markdown con directivas propias.\n:::\n```\n\n:::details {title="\xBFQu\xE9 es NoirMD?"}\nEditor y motor de markdown con directivas propias.\n:::\n\n## Abierto por defecto\n\n```md\n:::details {title="Atajos del editor" defaultOpen="true"}\n| Atajo | Acci\xF3n |\n| --- | --- |\n| `Ctrl+S` | Guardar |\n| `Ctrl+K` | Alternar preview |\n| `Ctrl+F` | Buscar |\n:::\n```\n\n:::details {title="Atajos del editor" defaultOpen="true"}\n| Atajo | Acci\xF3n |\n| --- | --- |\n| `Ctrl+S` | Guardar |\n| `Ctrl+K` | Alternar preview |\n| `Ctrl+F` | Buscar |\n:::\n\n## Con icono\n\n```md\n:::details {title="Soluci\xF3n del ejercicio" icon="lightbulb"}\nEl c\xF3digo resultante:\n\n```js\nconsole.log(\'\xA1Resuelto!\');\n```\n:::\n```\n\n:::details {title="Soluci\xF3n del ejercicio" icon="lightbulb"}\nEl c\xF3digo resultante:\n\n```js\nconsole.log(\'\xA1Resuelto!\');\n```\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `title` | texto | T\\u00edtulo del desplegable (default `Details`) |\n| `icon` | nombre Material | Icono junto al t\\u00edtulo (default `play_arrow`) |\n| `defaultOpen` | `true` | Abierto al cargar |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n> El contenido admite markdown completo y directivas anidadas.'
|
|
12897
12939
|
},
|
|
12898
12940
|
{
|
|
12899
12941
|
"id": "modal",
|
|
@@ -12909,7 +12951,7 @@ var guideData = [
|
|
|
12909
12951
|
"title": "Button",
|
|
12910
12952
|
"icon": "touch_app",
|
|
12911
12953
|
"order": 3,
|
|
12912
|
-
"md": '# Button\n\nLa directiva `:::button` crea un **bot\xF3n con enlace** (se abre en pesta\xF1a nueva por defecto).\n\n## Sintaxis\n\n```md\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n```\n\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n\n## Variante con enlace interno\n\n```md\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n```\n\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n\n## Con contenido markdown\n\nSi el bloque contiene texto/enlaces, se renderizan dentro del bot\xF3n:\n\n```md\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n```\n\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `label` | texto | Texto del bot\xF3n |\n| `url` (o `href`) | URL | Destino del enlace (default `#`) |\n| `icon` | nombre Material | Icono (default `near_me`) |\n| `target` | `_blank`
|
|
12954
|
+
"md": '# Button\n\nLa directiva `:::button` crea un **bot\xF3n con enlace** (se abre en pesta\xF1a nueva por defecto).\n\n## Sintaxis\n\n```md\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n```\n\n:::button {label="Documentaci\xF3n" url="https://example.com" icon="menu_book"}\n:::\n\n## Variante con enlace interno\n\n```md\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n```\n\n:::button {label="Ir a la p\xE1gina de notas" url="#admonici\xF3n-nota" icon="sticky_note_2" target="_self"}\n:::\n\n## Con contenido markdown\n\nSi el bloque contiene texto/enlaces, se renderizan dentro del bot\xF3n:\n\n```md\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n```\n\n:::button {label="Descargar" url="https://example.com/download" icon="download"}\nDescarga el **manual** en PDF\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `label` | texto | Texto del bot\xF3n |\n| `url` (o `href`) | URL | Destino del enlace (default `#`) |\n| `icon` | nombre Material | Icono (default `near_me`) |\n| `target` | `_blank` / `_self` / ... | Destino del enlace (default `_blank`) |\n| `class` | texto | Clases CSS adicionales |'
|
|
12913
12955
|
},
|
|
12914
12956
|
{
|
|
12915
12957
|
"id": "slide",
|
|
@@ -12917,7 +12959,7 @@ var guideData = [
|
|
|
12917
12959
|
"title": "Slide",
|
|
12918
12960
|
"icon": "slideshow",
|
|
12919
12961
|
"order": 4,
|
|
12920
|
-
"md": '# Slide\n\nLa directiva `:::slide` convierte su contenido en un **slider autom\xE1tico** (diapositivas con fade).\n\n## Sintaxis\n\nLas secciones se separan con `---`:\n\n```md\n:::slide {interval="2500"}\n## Diapositiva 1\n\nBienvenido a la **gu\xEDa interactiva**.\n\n---\n\n## Diapositiva 2\n\nCada `---` separa una diapositiva nueva.\n\n---\n\n## Diapositiva 3\n\nY el motor se encarga del resto.\n:::\n```\n\n:::slide {interval="2500"}\n## Diapositiva 1\n\nBienvenido a la **gu\xEDa interactiva**.\n\n---\n\n## Diapositiva 2\n\nCada `---` separa una diapositiva nueva.\n\n---\n\n## Diapositiva 3\n\nY el motor se encarga del resto.\n:::\n\n## Con contenido variado\n\n```md\n:::slide {interval="3500" speed="800"}\n:::card {title="Card" icon="dashboard"}\nLas directivas se anidan dentro.\n:::\n---\n> **Admonici\xF3n** como diapositiva\n---\n| P\xE1gina | Tema |\n| --- | --- |\n| 1 | Slide |\n| 2 | Loop |\n:::\n```\n\n:::slide {interval="3500" speed="800"}\n:::card {title="Card" icon="dashboard"}\nLas directivas se anidan dentro.\n:::\n---\n> **Admonici\xF3n** como diapositiva\n---\n| P\xE1gina | Tema |\n| --- | --- |\n| 1 | Slide |\n| 2 | Loop |\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `interval` | ms | Tiempo por diapositiva (default `3000`) |\n| `speed` | ms | Duraci\xF3n de la transici\xF3n (default `500`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Notas\n\n-
|
|
12962
|
+
"md": '# Slide\n\nLa directiva `:::slide` convierte su contenido en un **slider autom\xE1tico** (diapositivas con fade).\n\n## Sintaxis\n\nLas secciones se separan con `---`:\n\n```md\n:::slide {interval="2500"}\n## Diapositiva 1\n\nBienvenido a la **gu\xEDa interactiva**.\n\n---\n\n## Diapositiva 2\n\nCada `---` separa una diapositiva nueva.\n\n---\n\n## Diapositiva 3\n\nY el motor se encarga del resto.\n:::\n```\n\n:::slide {interval="2500"}\n## Diapositiva 1\n\nBienvenido a la **gu\xEDa interactiva**.\n\n---\n\n## Diapositiva 2\n\nCada `---` separa una diapositiva nueva.\n\n---\n\n## Diapositiva 3\n\nY el motor se encarga del resto.\n:::\n\n## Con contenido variado\n\n```md\n:::slide {interval="3500" speed="800"}\n:::card {title="Card" icon="dashboard"}\nLas directivas se anidan dentro.\n:::\n---\n> **Admonici\xF3n** como diapositiva\n---\n| P\xE1gina | Tema |\n| --- | --- |\n| 1 | Slide |\n| 2 | Loop |\n:::\n```\n\n:::slide {interval="3500" speed="800"}\n:::card {title="Card" icon="dashboard"}\nLas directivas se anidan dentro.\n:::\n---\n> **Admonici\xF3n** como diapositiva\n---\n| P\xE1gina | Tema |\n| --- | --- |\n| 1 | Slide |\n| 2 | Loop |\n:::\n\n## Props\n\n| Prop | Tipo | Descripci\xF3n |\n| --- | --- | --- |\n| `interval` | ms | Tiempo por diapositiva (default `3000`) |\n| `speed` | ms | Duraci\xF3n de la transici\xF3n (default `500`) |\n| `class` | texto | Clases CSS adicionales |\n| `style` | CSS | Estilos inline |\n\n## Notas\n\n- Al llegar a la \\u00faltima diapositiva, vuelve a la primera autom\\u00e1ticamente (loop).\n- El contenido de cada diapositiva admite markdown completo y directivas anidadas.\n- La altura del contenedor se adapta autom\\u00e1ticamente al contenido m\\u00e1s alto.'
|
|
12921
12963
|
},
|
|
12922
12964
|
{
|
|
12923
12965
|
"id": "html-blocks",
|
|
@@ -12940,6 +12982,7 @@ var Guide = ({
|
|
|
12940
12982
|
const [query, setQuery] = (0, import_react4.useState)("");
|
|
12941
12983
|
const [selectedId, setSelectedId] = (0, import_react4.useState)(null);
|
|
12942
12984
|
const [collapsed, setCollapsed] = (0, import_react4.useState)({});
|
|
12985
|
+
const [navOpen, setNavOpen] = (0, import_react4.useState)(false);
|
|
12943
12986
|
const contentRef = (0, import_react4.useRef)(null);
|
|
12944
12987
|
const groups = (0, import_react4.useMemo)(() => {
|
|
12945
12988
|
const map = /* @__PURE__ */ new Map();
|
|
@@ -12967,6 +13010,7 @@ var Guide = ({
|
|
|
12967
13010
|
(0, import_react4.useEffect)(() => {
|
|
12968
13011
|
if (!open) return;
|
|
12969
13012
|
setQuery("");
|
|
13013
|
+
setNavOpen(false);
|
|
12970
13014
|
if (!selectedId) {
|
|
12971
13015
|
const initial = guideData.find((e) => e.id === initialDirective) ?? guideData.find((e) => e.id === "introduccion") ?? guideData[0];
|
|
12972
13016
|
setSelectedId(initial?.id ?? null);
|
|
@@ -12999,6 +13043,15 @@ var Guide = ({
|
|
|
12999
13043
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "nr-guide__overlay", onClick: onClose }),
|
|
13000
13044
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "nr-guide__panel", children: [
|
|
13001
13045
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("header", { className: "nr-guide__head", children: [
|
|
13046
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
13047
|
+
"button",
|
|
13048
|
+
{
|
|
13049
|
+
className: "nr-guide__nav-toggle",
|
|
13050
|
+
onClick: () => setNavOpen(true),
|
|
13051
|
+
"aria-label": "Abrir navegaci\xF3n",
|
|
13052
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons-round", children: "menu" })
|
|
13053
|
+
}
|
|
13054
|
+
),
|
|
13002
13055
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons-round", children: "menu_book" }),
|
|
13003
13056
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { children: "Gu\xEDa de sintaxis" }),
|
|
13004
13057
|
search && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
@@ -13022,6 +13075,43 @@ var Guide = ({
|
|
|
13022
13075
|
)
|
|
13023
13076
|
] }),
|
|
13024
13077
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "nr-guide__body", children: [
|
|
13078
|
+
navOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
|
|
13079
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "nr-guide__nav-overlay", onClick: () => setNavOpen(false) }),
|
|
13080
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "nr-guide__nav-drawer nr-guide__nav-drawer--open", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { children: [
|
|
13081
|
+
filtered.map(([cat, entries]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "nr-guide__cat", children: [
|
|
13082
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
13083
|
+
"button",
|
|
13084
|
+
{
|
|
13085
|
+
className: "nr-guide__cat-head",
|
|
13086
|
+
onClick: () => toggleCategory(cat),
|
|
13087
|
+
children: [
|
|
13088
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons-round nr-guide__cat-chevron", children: collapsed[cat] ? "chevron_right" : "expand_more" }),
|
|
13089
|
+
cat
|
|
13090
|
+
]
|
|
13091
|
+
}
|
|
13092
|
+
),
|
|
13093
|
+
!collapsed[cat] && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "nr-guide__items", children: entries.map((e) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
13094
|
+
"button",
|
|
13095
|
+
{
|
|
13096
|
+
className: `nr-guide__item${selectedId === e.id ? " nr-guide__item--active" : ""}`,
|
|
13097
|
+
onClick: () => {
|
|
13098
|
+
setSelectedId(e.id);
|
|
13099
|
+
setNavOpen(false);
|
|
13100
|
+
},
|
|
13101
|
+
children: [
|
|
13102
|
+
e.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "material-icons-round nr-guide__item-icon", children: e.icon }),
|
|
13103
|
+
e.title
|
|
13104
|
+
]
|
|
13105
|
+
}
|
|
13106
|
+
) }, e.id)) })
|
|
13107
|
+
] }, cat)),
|
|
13108
|
+
filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "nr-guide__empty", children: [
|
|
13109
|
+
"Sin resultados para \xAB",
|
|
13110
|
+
query,
|
|
13111
|
+
"\xBB."
|
|
13112
|
+
] })
|
|
13113
|
+
] }) })
|
|
13114
|
+
] }),
|
|
13025
13115
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { className: "nr-guide__nav", children: [
|
|
13026
13116
|
filtered.map(([cat, entries]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "nr-guide__cat", children: [
|
|
13027
13117
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|