@nil-/doc 2.0.0 → 2.0.1

package/src/routes/3-Components/3-Block/1-Content/3-props/3-let:props/+page.svx

@@ -1,151 +0,0 @@
-<script lang="ts">
-    import { Block, Template, Params, Controls } from "$lib";
-
-    const defaults = {
-        vTuple: [true, 1, "hello", [false, 2, "world"], undefined],
-        paramsDefault: undefined,
-        description: undefined
-    };
-</script>
-
-# let:props
-
-Props are data that is forwarded from multiple sources to the Template/Instace slot content.
-
-The sources are as follows:
-- Template/Instance
-- Params
-- Controls
-
-Rules
-- A default prop must be provided to the Template/Instance
-- Only keys provided to the Template/Instance are honored
-- Everything else is dropped
-- Each Template instance have their own "defaults" by resolving props from Params and defaults from Template/Instance
-- Any enabled control will override the values of the instance defaults
-
----
-
-<div class="column">
-    <Block>
-        <Template
-            let:props={{ vTuple, description, paramsDefault}}
-            {defaults}
-            columns
-        >
-            <div class="content">
-                <div style:height={"80px"}>
-                    {description}
-                </div>
-                <div>
-
-                ---
-
-                </div>
-                <div>
-
-                > Default value
-
-                </div>
-                <div>
-                    <pre><code>{JSON.stringify({ vTuple: defaults.vTuple }, null, 4)}</code></pre>
-                </div>
-                <div>
-
-                ---
-
-                </div>
-                <div>
-
-                > Params Prop value
-
-                </div>
-                <div style:height={"170px"}>
-                    <pre><code>{JSON.stringify({ vTuple: paramsDefault }, null, 4)}</code></pre>
-                </div>
-                <div>
-
-                ---
-
-                </div>
-                <div>
-
-                > Resolved value
-
-                </div>
-                <div>
-                    <pre><code>{JSON.stringify({ vTuple }, null, 4)}</code></pre>
-                </div>
-            </div>
-        </Template>
-        <Params tag="first" props={{
-            description: "Props not provided to Params"
-        }}/>
-        <Params tag="secod" props={{
-            vTuple: [
-                false, undefined, "world"
-            ],
-            paramsDefault: [
-                false, undefined, "world"
-            ],
-            description: [
-                "Props partially provided to Params.",
-                "Some are undefined.",
-                "Undefined should follow the Default param values."
-            ].join("\n")
-        }}/>
-        <Controls
-            props={[
-                {
-                    name: "vTuple",
-                    type: "tuple",
-                    values: [
-                        {
-                            type: "toggle"
-                        },
-                        {
-                            type: "number"
-                        },
-                        {
-                            type: "text"
-                        },
-                        {
-                            type: "tuple",
-                            values: [
-                                {
-                                    type: "toggle"
-                                },
-                                {
-                                    type: "number"
-                                },
-                                {
-                                    type: "text"
-                                }
-                            ]
-                        },
-                        {
-                            type: "text"
-                        },
-                    ]
-                }
-            ]}
-        />
-    </Block>
-</div>
-
-<style>
-    .content {
-        display: grid;
-        white-space: pre;
-        padding: 20px 10px;
-    }
-
-    .column {
-        height: 150%;
-    }
-
-    div > div > pre {
-        box-sizing: border-box;
-        margin: 0;
-    }
-</style>

package/src/routes/3-Components/3-Block/2-Controls/+page.svx

@@ -1,26 +0,0 @@
-# Controls component
-
-Since we are in the realm of svelte, being able to modify the template/instance easily would be very helpful.
-
-Controls component allows us to do the following:
-- override the params forwarded by the template through the slot props
-- log events emitted by the content
-
----
-
-<div>
-
-| prop                                                    | type                                      |                       |
-| ------------------------------------------------------- | ----------------------------------------- | --------------------- |
-| [props](/3-Components/3-Block/2-Controls/3-props)       | `Prop[]`                                  | optional              |
-| [events](/3-Components/3-Block/2-Controls/4-events)     | `Event[]`                                 | optional              |
-
-</div>
-
-<style>
-    div {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-</style>

package/src/routes/3-Components/3-Block/2-Controls/3-props/+page.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-    import { Block, Instance, Controls, type Prop } from "$lib";
-    import Component from "../../Component.svelte";
-
-    import MD from "./MD.svx";
-
-    const defaults = {
-        vText: "text",
-        vColor: "#ffffff",
-        vNumber: 1,
-        vRange: 3,
-        vSelect: "select",
-        vToggle: true,
-        vArray: [1, "string", false, undefined] as [number, string, boolean, any],
-        vObject: {
-            vText: "world",
-            vAny: undefined,
-            vNumber: 111,
-            vToggle: true
-        } as {
-            vText: string;
-            vAny: any;
-            vNumber: number;
-            vToggle: boolean;
-        }
-    };
-    
-    const props: Prop[] = [
-        [ "vText", "text" ],
-        [ "vColor", "color", "hex" ],
-        [ "vNumber", "number" ],
-        [ "vRange", "range", 0, 10, 1 ],
-        [ "vSelect", "select", ["A", "B", "C"] ],
-        [ "vToggle", "toggle" ],
-        {
-            name: "vArray",
-            type: "tuple",
-            values: [
-                [ "number" ],
-                [ "text" ],
-                [ "toggle" ],
-                [ "tuple", [["text"]] ]
-            ]
-        },
-        {
-            name: "vObject",
-            type: "table",
-            values: [
-                [ "vText", "text" ],
-                [ "vAny", "table", [[ "vText", "text" ]] ]
-            ]
-        }
-    ];
-</script>
-
-<MD>
-    <Block>
-        <Instance {defaults}>
-            {#snippet children({ values, events })}
-            <Component
-                {...values}
-                tag={"tag"}
-                left_click={events["left_click"]}
-                right_click={events["right_click"]}
-            />
-            {/snippet}
-        </Instance>
-        <Controls props={[
-            [ "Click Me!", "button", () => () => alert('Button Is Clicked') ],
-            ...props
-        ]}/>
-    </Block>
-</MD>

package/src/routes/3-Components/3-Block/2-Controls/3-props/1-Text/+page.svx

@@ -1,40 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Text.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    let name1: string | undefined = undefined;
-    let name2: string | undefined = "hello";
-    let name3: string | undefined = "world";
-
-    const info = (name: string) => ({ name, type: "text" });
-</script>
-
-# Text
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "text";
-};
-
-type Prop = [
-    name: string,
-    type: "text"
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/2-Number/+page.svx

@@ -1,40 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Number.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    let name1: number | undefined = undefined;
-    let name2: number | undefined = 1;
-    let name3: number | undefined = 2;
-
-    const info = (name: string) => ({ name, type: "number" });
-</script>
-
-# Number
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "number";
-};
-
-type Prop = [
-    name: string,
-    type: "number"
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/3-Range/+page.svx

@@ -1,52 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Range.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    let name1: number | undefined = undefined;
-    let name2: number | undefined = 0;
-    let name3: number | undefined = 1E-10;
-
-    const info = (name: string) => ({
-        name,
-        type: "range",
-        min: -10000000000,
-        max: 10000000000,
-        step: 1E-11
-    });
-</script>
-
-# Range
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "range";
-    min: number;
-    max: number;
-    step: number;
-};
-
-type Prop = [
-    name: string,
-    type: "range",
-    min: number,
-    max: number,
-    step: number
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/4-Toggle/+page.svx

@@ -1,40 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Toggle.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    let name1: boolean | undefined = undefined;
-    let name2: boolean | undefined = true;
-    let name3: boolean | undefined = false;
-
-    const info = (name: string) => ({ name, type: "toggle" });
-</script>
-
-# Toggle
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "toggle";
-};
-
-type Prop = [
-    name: string,
-    type: "toggle"
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/5-Select/+page.svx

@@ -1,46 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Select.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    let name1: string | undefined = undefined;
-    let name2: string | undefined = "value1";
-    let name3: string | undefined = "value2";
-
-    const info = (name: string) => ({
-        name,
-        type: "select",
-        values: ["value1", "value2"]
-    });
-</script>
-
-# Select
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "select";
-    values: string[];
-};
-
-type Prop = [
-    name: string,
-    type: "select",
-    values: string[]
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/6-Tuple/+page.svx

@@ -1,60 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Tuple.svelte";
-    import type { Prop } from "$lib";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    type T = [number, number];
-
-    let name1: T | undefined = undefined;
-    let name2: T | undefined = [3, 5];
-    let name3: T | undefined = [6, 8];
-
-    const info = (name: string) => ({
-        name,
-        type: "tuple",
-        values: [
-            {
-                type: "number",
-            },
-            {
-                type: "range",
-                min: 2,
-                max: 12,
-                step: 0.1
-            }
-        ]
-    });
-</script>
-
-# Tuple
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "tuple";
-    values: AnyPropWithoutName[];
-};
-
-type Prop = [
-    name: string,
-    type: "tuple",
-    values: AnyPropWithoutName[]
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-    stringify
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/7-Object/+page.svx

@@ -1,61 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Table.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    type T = { v1: string, v2: number };
-
-    let name1: T | undefined = undefined;
-    let name2: T | undefined = { v1: "hello", v2: 1101 };
-    let name3: T | undefined = { v1: "world", v2: 1102 };
-
-    const info = (name: string) => ({
-        name,
-        type: "table",
-        values: [
-            {
-                name: "v1",
-                type: "text",
-            },
-            {
-                name: "v2",
-                type: "range",
-                min: 2,
-                max: 12,
-                step: 0.1
-            }
-        ]
-    });
-</script>
-
-# Object
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "table";
-    values: AnyProp[];
-}
-
-type Prop = [
-    name: string,
-    type: "table",
-    values: AnyProp[]
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-    stringify
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/8-Color/+page.svx

@@ -1,49 +0,0 @@
-<script lang="ts">
-    import component from "$lib/components/block/controls/props/Color.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    type T = string;
-
-    let name1: T | undefined = undefined;
-    let name2: T | undefined = "#ffffff";
-    let name3: T | undefined = '#999999';
-
-    const info = (name: string) => ({
-        name,
-        type: "color",
-        format: "hexa"
-    });
-</script>
-
-# Color
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "color";
-    format: "hex" | "rgb" | "hsl" | "hexa" | "rgba" | "hsla";
-}
-
-type Prop = [
-    name: string,
-    type: "color",
-    format: "hex" | "rgb" | "hsl" | "hexa" | "rgba" | "hsla"
-];
-```
-
-</Detail>
-
----
-
-<Layout
-    {name1}
-    {name2}
-    {name3}
-    {info}
-    {component}
-    stringify
-/>

package/src/routes/3-Components/3-Block/2-Controls/3-props/9-Button/+page.svx

@@ -1,56 +0,0 @@
-<script lang="ts">
-    import Button from "$lib/components/block/controls/props/Button.svelte";
-    import Styler from "$lib/components/block/controls/Styler.svelte";
-
-    import Layout from "../Layout.svelte";
-    import Detail from "../Detail.svelte";
-
-    type T = { v1: string, v2: number };
-
-    const info = (name: string) => ({
-        name,
-        type: "button",
-        click: () => {
-            let v = 1;
-            return () => {
-                ++v;
-                console.log(v);
-            }
-        }
-    });
-</script>
-
-# Custom
-
-<Detail>
-
-```ts
-type Prop = {
-    name: string;
-    type: "button";
-    click: () => (() => void);
-}
-
-type Prop = [
-    name: string,
-    type: "button",
-    click: () => (() => void)
-];
-```
-
-</Detail>
-
----
-
-<Detail>
-    <Styler type={"props"}>
-        <div>
-            <div>Name</div>
-            <div>Value</div>
-            <div>Use</div>
-        </div>
-        <Button info={info("1")} visible/>
-        <Button info={info("2")} visible/>
-        <Button info={info("3")} visible/>
-    </Styler>
-</Detail>