@nil-/doc 1.0.0 → 2.0.0

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

@@ -0,0 +1,151 @@
+<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

@@ -0,0 +1,26 @@
+# 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

@@ -0,0 +1,73 @@
+<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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,52 @@
+<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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,46 @@
+<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

@@ -0,0 +1,60 @@
+<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

@@ -0,0 +1,61 @@
+<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

@@ -0,0 +1,49 @@
+<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

@@ -0,0 +1,56 @@
+<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>