@nil-/doc 2.0.0 → 2.0.2

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

@@ -1,28 +0,0 @@
-<script lang="ts">
-    import Component from "./Component.svelte";
-    import { getName } from "./misc/utils";
-
-    import type { SpecialProp, Prop } from "../types";
-    import type { ControlValue } from "../../context";
-    import type { Writable } from "svelte/store";
-
-    let {
-        infos,
-        values,
-        visible,
-    }: {
-        infos: (SpecialProp | Prop)[];
-        values: Writable<ControlValue>;
-        visible: boolean;
-    } = $props();
-
-</script>
-
-{#each infos as info}
-    <Component
-        {info}
-        depth={1}
-        {visible} 
-        bind:value={$values.props[getName(info)]}
-    />
-{/each}

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

@@ -1,97 +0,0 @@
-<script lang="ts">
-    import { defaulter } from "./misc/defaulter";
-    import NameHeader from "./misc/Name.svelte";
-    import { nformat } from "./misc/nformat";
-    import { getName } from "./misc/utils";
-
-    import Toggle from "./misc/Toggle.svelte";
-
-    import type { Unionized, PropType } from "../types";
-
-    let {
-        value = $bindable(),
-        info,
-        depth,
-        disabled = false,
-        visible = false
-    } = $props<{
-        value: number | undefined;
-        info: Unionized<PropType<"range">>;
-        depth: number;
-        disabled?: boolean;
-        visible?: boolean;
-    }>();
-
-    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) );
-
-    let i =
-        $derived(info instanceof Array
-            ? {
-                  min: info[2],
-                  max: info[3],
-                  step: info[4]
-              }
-            : {
-                  min: info.min,
-                  max: info.max,
-                  step: info.step
-              });
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div class="input" class:disabled={!enabled || disabled}>
-            <div class="tooltip">Value: {nformat(ivalue, 6, 11)}</div>
-            <div>{nformat(ivalue, 3, 5)}</div>
-            <input type="range" bind:value={ivalue} {...i} disabled={!enabled || disabled} />
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}
-
-<style>
-    .input {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 4rem 1fr;
-        gap: 0.25rem;
-        position: relative;
-        box-sizing: border-box;
-    }
-
-    .input > div {
-        width: 100%;
-        height: 80%;
-        display: grid;
-        font-size: 0.8rem;
-        place-items: center;
-    }
-
-    input {
-        width: 100%;
-    }
-
-    .tooltip {
-        left: -110%;
-        visibility: hidden;
-        position: absolute;
-    }
-
-    .input.disabled {
-        cursor: not-allowed;
-        filter: opacity(0.5);
-    }
-
-    .input:hover > .tooltip {
-        visibility: visible;
-    }
-
-    .input.disabled:hover > .tooltip {
-        visibility: hidden;
-    }
-</style>

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

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

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

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

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

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

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

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

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

@@ -1,137 +0,0 @@
-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"
-        });
-    });
-});