@nil-/doc 2.0.0 → 2.0.1

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"
-        });
-    });
-});

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

@@ -1,63 +0,0 @@
-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;
-};