@nil-/doc 1.0.0 → 2.0.0

package/src/lib/components/block/controls/props/Select.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { defaulter } from "./misc/defaulter";
+    import { getValues, getName } from "./misc/utils";
+    import NameHeader from "./misc/Name.svelte";
+
+    import Toggle from "./misc/Toggle.svelte";
+
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: string | undefined;
+        info: Unionized<PropType<"select">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+
+    const set_value = (v?: string) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div>
+            <select class="control" bind:value={ivalue} disabled={!enabled || disabled}>
+                {#each getValues(info) as v}
+                    <option value={v}>{v}</option>
+                {/each}
+            </select>
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
+    </div>
+{/if}
+
+<style>
+    select {
+        text-align: center;
+    }
+</style>

package/src/lib/components/block/controls/props/Table.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import Component from "./Component.svelte";
+    import Header from "./misc/GroupHeader.svelte";
+    import { defaulter } from "./misc/defaulter";
+    import { getValues, getName } from "./misc/utils";
+
+    import type { ValueType } from "../../types";
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: Record<string, ValueType> | undefined;
+        info: Unionized<PropType<"table">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+    let expand = $state(getValues(info).length > 0 ? true : undefined);
+
+    const set_value = (v?: Record<string, ValueType>) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+<Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+
+{#each getValues(info) as v, i (i)}
+    <Component
+        info={v}
+        bind:value={ivalue[getName(v)]}
+        depth={depth + 1}
+        disabled={!enabled || disabled}
+        visible={visible && expand && enabled && !disabled}
+    />
+{/each}

package/src/lib/components/block/controls/props/Text.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { getName } from "./misc/utils";
+    import { defaulter } from "./misc/defaulter";
+    import NameHeader from "./misc/Name.svelte";
+
+    import Toggle from "./misc/Toggle.svelte";
+
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: string | undefined;
+        info: Unionized<PropType<"text">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+
+    const set_value = (v?: string) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div>
+            <input
+                class="control"
+                type="text"
+                bind:value={ivalue}
+                disabled={!enabled || disabled}
+            />
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
+    </div>
+{/if}

package/src/lib/components/block/controls/props/Toggle.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { getName } from "./misc/utils";
+    import { defaulter } from "./misc/defaulter";
+    import NameHeader from "./misc/Name.svelte";
+
+    import Toggle from "./misc/Toggle.svelte";
+
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: boolean | undefined;
+        info: Unionized<PropType<"toggle">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+
+    const set_value = (v?: boolean) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div><Toggle bind:toggled={ivalue} disabled={!enabled || disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
+    </div>
+{/if}

package/src/lib/components/block/controls/props/Tuple.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Component from "./Component.svelte";
+    import Header from "./misc/GroupHeader.svelte";
+    import { defaulter } from "./misc/defaulter";
+    import { getValues, getName, addName } from "./misc/utils";
+
+    import type { ValueType } from "../../types";
+    import type { Unionized, PropType } from "../types";
+
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: ValueType[] | undefined;
+        info: Unionized<PropType<"tuple">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+    let expand = $state(getValues(info).length > 0 ? true : undefined);
+
+    const set_value = (v?: ValueType[]) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+<Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+
+{#each getValues(info) as v, i (i)}
+    <Component
+        info={addName(`${i}`, v)}
+        bind:value={ivalue[i]}
+        depth={depth + 1}
+        disabled={!enabled || disabled}
+        visible={visible && expand && enabled && !disabled}
+    />
+{/each}

package/src/lib/components/block/controls/props/misc/GroupHeader.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import Name from "./Name.svelte";
+    import Toggle from "./Toggle.svelte";
+    
+    let {
+      name,
+      depth,
+      checked = $bindable(),
+      disabled = false,
+      expand = $bindable(false),
+      visible = false
+    }: {
+      name: string;
+      depth: number;
+      checked?: boolean;
+      disabled?: boolean;
+      expand?: boolean;
+      visible?: boolean;
+    } = $props();
+    
+    const flip = () => {
+      if (!disabled && checked) {
+          expand = !expand;
+      }
+    };
+</script>
+
+{#if visible}
+    <div onclick={flip} onkeypress={null} role="none">
+        <Name
+            expand={expand === undefined ? undefined : expand && checked && !disabled}
+            {name}
+            {depth}
+        />
+        <div class:disabled={!checked}>-</div>
+        <div><Toggle bind:toggled={checked} {disabled} /></div>
+    </div>
+{/if}
+
+<style>
+    .disabled {
+        color: hsl(0, 0%, 50%);
+    }
+</style>
+    

package/src/lib/components/block/controls/props/misc/Name.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    let {
+        depth,
+        name,
+        expand
+    }: {
+        depth: number;
+        name: string;
+        expand?: boolean;
+    } = $props();
+</script>
+
+<div class="override" style:padding-left={`${depth}rem`} title={name}>
+    <div class="icon" class:expand={true === expand}>
+        <div>
+            {undefined === expand ? "-" : ">"}
+        </div>
+    </div>
+    <span>{name}</span>
+</div>
+
+<style>
+    .override {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding-right: 0.5rem;
+
+        display: grid;
+        grid-template-columns: 1.25rem 1fr;
+        align-items: center;
+    }
+
+    .icon {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    .icon.expand {
+        transform: rotate(90deg);
+    }
+
+    .icon > div {
+        margin: auto;
+    }
+</style>

package/src/lib/components/block/controls/props/misc/Toggle.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { getTheme } from "$lib/components/context";
+
+    let {
+        disabled = false,
+        toggled = $bindable(false),
+        onkeypress
+    }: {
+        disabled?: boolean;
+        toggled?: boolean;
+        onkeypress?: (e: KeyboardEvent) => void;
+    } = $props();
+
+    const onclick = (e: MouseEvent) => {
+        e.stopPropagation();
+        if (!disabled) {
+            toggled = !toggled;
+        }
+    };
+
+    const dark = getTheme();
+</script>
+
+<div>
+    <svg
+        viewBox="-30 -30 60 60"
+        {onclick}
+        {onkeypress}
+        role="none"
+        class:disabled
+        class:dark={$dark}
+    >
+        <rect width="80" height="40" x="-40" y="-20" rx="20" ry="20" />
+        <circle r="16" cx={toggled ? 20 : -20} />
+    </svg>
+</div>
+
+<style>
+    div {
+        width: 2.5rem;
+        height: 1.25rem;
+    }
+
+    svg {
+        cursor: pointer;
+        width: 100%;
+        height: 100%;
+    }
+
+    rect {
+        stroke-width: 2;
+    }
+
+    .disabled {
+        cursor: not-allowed;
+        filter: opacity(0.5);
+    }
+
+    circle {
+        transition: cx 175ms;
+    }
+
+    rect {
+        stroke: hsl(0, 0%, 70%);
+        fill: hsl(0, 0%, 90%);
+    }
+
+    .dark > rect {
+        stroke: hsl(0, 0%, 52%);
+        fill: hsl(0, 0%, 23%);
+    }
+
+    .disabled > rect {
+        stroke: hsl(210, 2%, 81%);
+        fill: hsl(220, 14%, 96%);
+    }
+
+    .dark.disabled > rect {
+        stroke: hsl(0, 0%, 38%);
+        fill: hsl(0, 0%, 21%);
+    }
+
+    circle {
+        fill: hsl(212, 100%, 50%);
+    }
+
+    .dark > circle {
+        fill: hsl(212, 100%, 80%);
+    }
+
+    .disabled > circle {
+        fill: hsl(0, 0%, 80%);
+    }
+
+    .dark.disabled > circle {
+        fill: hsl(0, 0%, 46%);
+    }
+</style>

package/src/lib/components/block/controls/props/misc/defaulter.test.ts

@@ -0,0 +1,137 @@
+import { defaulter as SUT } from "./defaulter";
+
+import { describe, it, expect } from "vitest";
+
+describe("defaulter basic", () => {
+    it("returns `false` when type is `toggle`", () => {
+        expect(SUT({ name: "name", type: "toggle" })).toBe(false);
+        expect(SUT(["name", "toggle"])).toBe(false);
+    });
+    it("returns 0 when type is `number`", () => {
+        expect(SUT({ name: "name", type: "number" })).toBe(0);
+        expect(SUT(["name", "number"])).toBe(0);
+    });
+    it("returns `min` when type is `range`", () => {
+        expect(SUT({ name: "name", type: "range", min: 100, max: 200, step: 10 })).toBe(100);
+        expect(SUT(["name", "range", 100, 200, 10])).toBe(100);
+    });
+    it("returns empty string when type is `text`", () => {
+        expect(SUT({ name: "name", type: "text" })).toBe("");
+        expect(SUT(["name", "text"])).toBe("");
+    });
+    it("returns first when type is `select`", () => {
+        expect(SUT({ name: "name", type: "select", values: ["first", "second"] })).toBe("first");
+        expect(SUT(["name", "select", ["first", "second"]])).toBe("first");
+    });
+    it("returns empty string when type is `select` and no values provided", () => {
+        expect(SUT({ name: "name", type: "select", values: [] })).toBe("");
+        expect(SUT(["name", "select", []])).toBe("");
+    });
+});
+
+describe("defaulter advanced", () => {
+    it("returns array of defaults when type is `tuple`", () => {
+        expect(
+            SUT({
+                name: "name",
+                type: "tuple",
+                values: [
+                    {
+                        type: "toggle"
+                    },
+                    {
+                        type: "number"
+                    },
+                    {
+                        type: "range",
+                        min: 1000,
+                        max: 2000,
+                        step: 10
+                    },
+                    {
+                        type: "text"
+                    },
+                    {
+                        type: "select",
+                        values: ["second", "first"]
+                    }
+                ]
+            })
+        ).toStrictEqual([false, 0, 1000, "", "second"]);
+
+        expect(
+            SUT([
+                "name",
+                "tuple",
+                [
+                    ["toggle"],
+                    ["number"],
+                    ["range", 1000, 2000, 10],
+                    ["text"],
+                    ["select", ["second", "first"]]
+                ]
+            ])
+        ).toStrictEqual([false, 0, 1000, "", "second"]);
+    });
+
+    it("returns dictionary of defaults when type is `object`", () => {
+        expect(
+            SUT({
+                name: "name",
+                type: "table",
+                values: [
+                    {
+                        name: "vToggle",
+                        type: "toggle"
+                    },
+                    {
+                        name: "vNumber",
+                        type: "number"
+                    },
+                    {
+                        name: "vRange",
+                        type: "range",
+                        min: 1000,
+                        max: 2000,
+                        step: 10
+                    },
+                    {
+                        name: "vText",
+                        type: "text"
+                    },
+                    {
+                        name: "vSelect",
+                        type: "select",
+                        values: ["last", "third"]
+                    }
+                ]
+            })
+        ).toStrictEqual({
+            vToggle: false,
+            vNumber: 0,
+            vRange: 1000,
+            vText: "",
+            vSelect: "last"
+        });
+
+        expect(
+            SUT([
+                "name",
+                "table",
+                [
+                    ["vToggle", "toggle"],
+                    ["vNumber", "number"],
+                    ["vRange", "range", 1000, 2000, 10],
+                    ["vText", "text"],
+                    ["vSelect", "select", ["last", "third"]]
+                ]
+            ])
+        ).toStrictEqual({
+            vToggle: false,
+            vNumber: 0,
+            vRange: 1000,
+            vText: "",
+            vSelect: "last"
+        });
+    });
+});

package/src/lib/components/block/controls/props/misc/defaulter.ts

@@ -0,0 +1,63 @@
+import type { ValueType } from "../../../types";
+import type { Unionized, PropType, Prop } from "../../types";
+
+import { getType, getValues, getMin } from "./utils";
+
+export function defaulter(i: Unionized<PropType<"tuple">>): ValueType[];
+export function defaulter(i: Unionized<PropType<"table">>): Record<string, ValueType>;
+export function defaulter(i: Unionized<PropType<"number">>): number;
+export function defaulter(i: Unionized<PropType<"range">>): number;
+export function defaulter(i: Unionized<PropType<"select">>): string;
+export function defaulter(i: Unionized<PropType<"text">>): string;
+export function defaulter(i: Unionized<PropType<"toggle">>): boolean;
+export function defaulter(i: Unionized<PropType<"color">>): string;
+export function defaulter(i: Prop): ValueType;
+// eslint-disable-next-line func-style
+export function defaulter(i: Prop): ValueType {
+    switch (getType(i)) {
+        case "table":
+            // eslint-disable-next-line no-use-before-define
+            return defaulterO(i as Unionized<PropType<"table">>);
+        case "tuple":
+            // eslint-disable-next-line no-use-before-define
+            return defaulterT(i as Unionized<PropType<"tuple">>);
+        case "text":
+            return "";
+        case "color":
+            return "#ffffffff";
+        case "select":
+            return getValues(i as Unionized<PropType<"select">>)[0] ?? "";
+        case "number":
+            return 0;
+        case "range":
+            return getMin(i as Unionized<PropType<"range">>);
+        default:
+            return false;
+    }
+}
+
+const defaulterO = (info: Unionized<PropType<"table">>) => {
+    const ret: Record<string, ValueType> = {};
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const v of values) {
+        if (v instanceof Array) {
+            ret[v[0]] = defaulter(v);
+        } else {
+            ret[v.name] = defaulter(v);
+        }
+    }
+    return ret;
+};
+
+const defaulterT = (info: Unionized<PropType<"tuple">>) => {
+    const ret: ValueType[] = [];
+    const values = info instanceof Array ? info[2] : info.values;
+    for (const [i, v] of values.entries()) {
+        if (v instanceof Array) {
+            ret.push(defaulter([`${i}`, ...v]));
+        } else {
+            ret.push(defaulter({ name: `${i}`, ...v }));
+        }
+    }
+    return ret;
+};