@nil-/doc 2.0.0 → 2.0.2

package/src/lib/components/block/Params.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-    import type { ValueType } from "./types";
-    import { getParams } from "./context";
-    import { resolve } from "./utils";
-
-    import { get } from "svelte/store";
-
-    let {
-        tag,
-        props = {}
-    }: {
-        tag?: string | undefined;
-        props?: Record<string, ValueType>;
-    } = $props();
-
-    const params = getParams();
-
-    const id = get(params).length;
-    params.update(p => {
-        p.push({
-            id,
-            tag: `${id}`,
-            values: {}
-        });
-        return p;
-    });
-
-    $effect(() => params.update(p => { p[id].tag = tag ?? `${id}`; return p; }));
-    $effect(() => params.update(p => { p[id].values = resolve(props, {}); return p; }));
-</script>
-
-<!--
-    @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template/1-Params) for more details.
--->

package/src/lib/components/block/Template.svelte

@@ -1,78 +0,0 @@
-<script lang="ts" module>
-    import type { ValueType } from "./types";
-</script>
-
-<script lang="ts" generics="Args">
-    import { getDefaults, getParams, getOrientation } from "./context";
-    import { resolve } from "./utils";
-
-    import Instance from "./Instance.svelte";
-
-    import { type Snippet } from "svelte";
-
-    const params = getParams();
-    const defaultsStore = getDefaults();
-    const orientation = getOrientation();
-
-    let {
-        defaults,
-        noreset = false,
-        columns = false,
-        children: cc
-    }: {
-        defaults?: Args;
-        noreset?: boolean;
-        columns?: boolean;
-        children?: Snippet<[{
-            id: number;
-            tag: string;
-            values: Args;
-            events: Record<string, (ev?: any) => void>;
-            key: boolean;
-        }]>;
-    } = $props();
-
-    $effect(() => { defaultsStore?.set(defaults ?? {} as any); });
-    $effect(() => { orientation.set(columns); });
-
-    /**
-     * This flag is to rerender the whole slot component.
-     * If the control is disabled, we use the default value provided from the defaults field.
-     * If the value of a prop is undefined, we will have to forward this value to the slot.
-     * Problem is, if the slot component has a default value set, it is only
-     * evaluated during component creation, not in subsequent updates.
-     *
-     * The solution is to rerender the whole slot whenever there is an control update.
-     *
-     * Similar case to: https://github.com/sveltejs/svelte/issues/4442
-     */
-    let key = $state(false);
-    $effect(() => {
-        key;
-        return () => { key = !key; }
-    });
-
-    const resolveArgs = resolve<Args>;
-</script>
-
-<!--
-    @component
-    See [documentation](https://mono-doc.vercel.app/3-Components/3-Block/1-Content/2-Template) for more details.
--->
-
-{#each $params as param (param.id)}
-    <Instance
-        defaults={resolveArgs($defaultsStore, param.values)}
-        {noreset}
-    >
-        {#snippet children({ values, events, key })}
-            {@render cc?.({
-                id: param.id,
-                tag: param.tag,
-                values: values,
-                events: events,
-                key: key
-            })}
-        {/snippet}
-    </Instance>
-{/each}

package/src/lib/components/block/action.ts

@@ -1,32 +0,0 @@
-import type { ActionReturn } from "svelte/action";
-
-type Options = { class: string; min: number; w: boolean; enabled: boolean };
-
-/**
- *  Temporary support for container query until svelte supports it
- */
-export const cquery = (div: HTMLDivElement, options: Options): ActionReturn<Options> => {
-    let o = options;
-
-    const check = () =>
-        div.classList.toggle(o.class, (o.w ? div.clientWidth : div.clientHeight) > o.min);
-    const observer = new ResizeObserver(check);
-    if (o.enabled) {
-        observer.observe(div);
-    }
-
-    return {
-        update: (options) => {
-            if (o.enabled !== options.enabled) {
-                if (!o.enabled && options.enabled) {
-                    observer.observe(div);
-                } else {
-                    observer.disconnect();
-                }
-            }
-            o = options;
-            check();
-        },
-        destroy: () => o.enabled && observer.disconnect()
-    };
-};

package/src/lib/components/block/context.ts

@@ -1,43 +0,0 @@
-import { getContext, setContext } from "svelte";
-import { writable } from "svelte/store";
-import type { Writable } from "svelte/store";
-
-import type { Prop, SpecialProp, Event } from "./controls/types";
-import type { ValueType } from "./types";
-
-export type Params = {
-    id: number;
-    tag: string;
-    values: Record<string, ValueType>;
-};
-
-const create = <T>(defaulter: () => T) => {
-    const symbol = Symbol();
-    return {
-        init: () => setContext<Writable<T>>(symbol, writable(defaulter())),
-        get: () => getContext<Writable<T>>(symbol)
-    };
-};
-
-export const { init: initParams, get: getParams } = create<Params[]>(() => []);
-
-export type Controls = {
-    props: (Prop | SpecialProp)[];
-    events: Event[];
-};
-export type ControlValue = {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    props: Record<string, any>;
-    events: { name: string; detail: string; count: number }[];
-};
-
-// prettier-ignore
-export const { init: initControls, get: getControls } = create<Controls>(() => ({ props: [], events: [] }));
-// prettier-ignore
-export const { init: initDefaults, get: getDefaults } = create<Record<string, ValueType>>(() => ({}));
-// prettier-ignore
-export const { init: initOrientation, get: getOrientation } = create<boolean>(() => false);
-// prettier-ignore
-export const { init: initControlInfo, get: getControlInfo } = create<Writable<Controls> | null>(() => null);
-// prettier-ignore
-export const { init: initControlValue, get: getControlValue } = create<Writable<ControlValue> | null>(() => null);

package/src/lib/components/block/controls/Controls.svelte

@@ -1,96 +0,0 @@
-<script lang="ts">
-    import Styler from "./Styler.svelte";
-    import Props from "./props/Props.svelte";
-    import Events from "./events/Events.svelte";
-    import { getControlInfo, getControlValue } from "../context";
-    import Button from "../icons/Button.svelte";
-    import ControlView from "../icons/ControlView.svelte";
-    import Position from "../icons/Position.svelte";
-    import { onDestroy } from "svelte";
-
-    const controls = getControlInfo();
-    const values = getControlValue();
-
-    let cc = $state($controls);
-    let vv = $state($values);
-
-    const unsubs: (() => void)[] = [];
-
-    unsubs.push(controls.subscribe(v => cc = v));
-    unsubs.push(values.subscribe(v => vv = v));
-
-    let {
-        mode = $bindable("props"),
-        position = $bindable("bottom")
-    }: {
-        mode: "props" | "events";
-        position: "bottom" | "right";
-    } = $props();
-
-    const cyclePosition = () => {
-        switch (position) {
-            case "bottom":
-                position = "right";
-                break;
-            case "right":
-                position = "bottom";
-                break;
-        }
-    };
-
-    const cycleMode = () => {
-        switch (mode) {
-            case "events":
-                mode = "props";
-                break;
-            case "props":
-                mode = "events";
-                break;
-        }
-    };
-    
-    onDestroy(() => unsubs.forEach(v => v()));
-</script>
-
-<Styler type={mode}>
-    <div class="header">
-        <div class="buttons">
-            <Button scale onclick={cyclePosition} title={position}>
-                <Position {position} />
-            </Button>
-            <Button scale onclick={cycleMode} title={mode}>
-                <ControlView {mode} />
-            </Button>
-        </div>
-        {#if "props" === mode}
-            <div>Name</div>
-            <div>Value</div>
-            <div>Use</div>
-        {:else if "events" === mode}
-            <div>Events</div>
-            <div>Detail</div>
-        {/if}
-    </div>
-    {#key $values && $controls}
-        {#if cc != null && $cc != null && vv != null && $vv != null}
-            <Props values={vv} infos={$cc.props} visible={"props" === mode} />
-            <Events events={$vv.events} visible={"events" === mode} />
-        {/if}
-    {/key}
-</Styler>
-
-<style>
-    .header {
-        position: relative;
-    }
-
-    .buttons {
-        position: absolute;
-        width: 3.5rem;
-        height: 1.75rem;
-        left: 0.3rem;
-        top: 0.15rem;
-        display: flex;
-        cursor: pointer;
-    }
-</style>

package/src/lib/components/block/controls/Styler.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from "svelte";
-    let {
-        type,
-        children
-    }: {
-        type: "props" | "events";
-        children?: Snippet
-    } = $props();
-</script>
-
-<div class:props={"props" === type} class:events={"events" === type}>
-    {@render children?.()}
-</div>
-
-<style>
-    div {
-        display: grid;
-        min-width: 31.25rem;
-        height: 100%;
-        grid-auto-rows: 2rem;
-        box-sizing: border-box;
-        user-select: none;
-    }
-
-    div > :global(div) {
-        display: grid;
-    }
-
-    div.props > :global(div) {
-        grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
-    }
-
-    div.events > :global(div) {
-        grid-template-columns: 2fr 3fr;
-        align-items: center;
-    }
-
-    div > :global(div:first-child) {
-        font-weight: bold;
-        place-items: center;
-    }
-
-    div.props > :global(div > div:nth-child(2)) {
-        display: grid;
-        place-items: center;
-    }
-
-    div.props > :global(div > div:nth-child(3)) {
-        margin: auto;
-    }
-
-    div > :global(div > div > .control) {
-        width: 100%;
-        height: 80%;
-        box-sizing: border-box;
-    }
-
-    div > :global(div > div > .control[disabled]) {
-        cursor: not-allowed;
-        filter: opacity(0.5);
-    }
-
-    /* colors */
-    div {
-        transition: background-color var(--i-nil-doc-transition-time);
-        background-repeat: repeat;
-        background-size: 100% 4rem;
-        background-image: linear-gradient(
-            to bottom,
-            var(--i-nil-doc-controls-p) 2rem,
-            var(--i-nil-doc-controls-s) 2rem
-        );
-    }
-
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: var(--i-nil-doc-controls-hover);
-    }
-
-    div > :global(div:hover .tooltip) {
-        background-color: var(--i-nil-doc-controls-p);
-        outline: 1px solid var(--i-nil-doc-block-outline-color);
-    }
-</style>

package/src/lib/components/block/controls/events/Events.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-    let {
-        visible,
-        events = []
-    }: {
-        visible: boolean;
-        events?: { name: string; detail: string; count: number }[];
-    } = $props()
-</script>
-
-{#if visible}
-    {#each events as { count, detail, name }, i (i)}
-        <div>
-            <div class="name">
-                <div>{name}</div>
-                {#if count > 1}
-                    <div class="count">
-                        [{count.toString().padStart(2, "0")}]
-                    </div>
-                {/if}
-            </div>
-            <div>{detail}</div>
-        </div>
-    {/each}
-{/if}
-
-<style>
-    .name {
-        padding: 0rem 0.5rem;
-        display: grid;
-        place-content: center;
-        grid-auto-flow: column;
-        grid-auto-columns: 1.875rem;
-        grid-template-columns: 1fr;
-    }
-
-    .count {
-        display: grid;
-        place-items: center;
-        text-align: center;
-        font-size: 0.8rem;
-    }
-</style>

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

@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { getClick, getName } from "./misc/utils";
-    import type { Unionized, PropType } from "../types";
-
-    let {
-        info,
-        visible = false
-    }: {
-        info: Unionized<PropType<"button">>;
-        visible?: boolean;
-    } = $props();
-
-    let click = $derived(getClick(info)());
-</script>
-
-{#if visible}
-    <div><button onclick={click}>{getName(info)}</button></div>
-{/if}
-
-<style>
-    button {
-        grid-column: 1 / 4;
-        box-sizing: border-box;
-        margin: 0.15rem 0.3rem;
-    }
-</style>

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

@@ -1,140 +0,0 @@
-<script lang="ts" module>
-    import type Picker from "vanilla-picker";
-    import type { Unionized, PropType, Detailed } from "../types";
-
-    const colorSetter = (
-        format: Detailed<PropType<"color">>["format"],
-        color: Parameters<Picker["onChange"]>[0]
-    ) => {
-        switch (format) {
-            case "hex":
-                return color.hex.substring(0, 7);
-            case "hexa":
-                return color.hex.substring(0, 9);
-            case "hsl":
-                return color.hslString;
-            case "hsla":
-                return color.hslaString;
-            case "rgb":
-                return color.rgbString;
-            case "rgba":
-            default:
-                return color.rgbaString;
-        }
-    };
-</script>
-
-<script lang="ts">
-    import { getName, getFormat } from "./misc/utils";
-    import { defaulter } from "./misc/defaulter";
-    import NameHeader from "./misc/Name.svelte";
-
-    import Toggle from "./misc/Toggle.svelte";
-
-    let {
-        value = $bindable(),
-        info,
-        depth,
-        disabled = false,
-        visible = false
-    }: {
-        value: string | undefined,
-        info: Unionized<PropType<"color">>,
-        depth: number,
-        disabled?: boolean,
-        visible?: boolean
-    } = $props();
-
-    let ivalue = $state(value ?? defaulter(info));
-    let enabled = $state(value !== undefined);
-
-    type Format = Detailed<PropType<"color">>["format"];
-    type EditorFormat = "hex" | "rgb" | "hsl";
-
-    const action = (d: HTMLElement, { format, P }: { format: Format; P: typeof Picker }) => {
-        d.style.borderColor = ivalue;
-        const picker = new P({
-            parent: d,
-            popup: "left",
-            editorFormat: format.substring(0, 3) as EditorFormat,
-            editor: true,
-            alpha: 4 === format.length,
-            onChange: (color) => {
-                ivalue = colorSetter(getFormat(info), color);
-                d.style.borderColor = ivalue;
-            },
-            color: ivalue
-        });
-        return {
-            update: (format: Format) => {
-                picker.setOptions({
-                    alpha: 4 === format.length,
-                    editorFormat: format.substring(0, 3) as EditorFormat
-                });
-            },
-            destroy: () => picker.destroy()
-        };
-    };
-
-    const set_value = (v?: string) => { value = v; };
-    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div>
-            {#await import("vanilla-picker")}
-                <button>
-                    {ivalue}
-                </button>
-            {:then { default: P }}
-                <button
-                    style:height="1.5rem"
-                    style:width="12.5rem"
-                    use:action={{ format: getFormat(info), P }}
-                    disabled={!enabled || disabled}
-                >
-                    {ivalue}
-                </button>
-            {/await}
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}
-
-<style>
-    button {
-        font-size: 0.7rem;
-        border-top-width: 1px;
-        border-bottom-width: 1px;
-        border-left-width: 10px;
-        border-right-width: 10px;
-        border-style: solid;
-        background-color: var(--i-nil-doc-bg-color);
-        color: var(--i-nil-doc-color);
-        outline: 1px solid gray;
-    }
-
-    button[disabled] {
-        border-color: gray !important;
-    }
-
-    button :global(.popup.popup_top) {
-        left: -1.3rem !important;
-        color: var(--i-nil-doc-color) !important;
-        box-shadow: currentColor 0px 0px 10px 0px !important;
-    }
-
-    button :global(.picker_wrapper),
-    button :global(.picker_arrow),
-    button :global(.picker_arrow::before),
-    button :global(.picker_arrow::after) {
-        background-color: var(--i-nil-doc-bg-color) !important;
-    }
-
-    button :global(.picker_done > button) {
-        background: var(--i-nil-doc-bg-color) !important;
-        color: var(--i-nil-doc-color) !important;
-    }
-</style>

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

@@ -1,70 +0,0 @@
-<script lang="ts">
-    import Text from "./Text.svelte";
-    import Number from "./Number.svelte";
-    import Range from "./Range.svelte";
-    import Toggle from "./Toggle.svelte";
-    import Select from "./Select.svelte";
-    import Tuple from "./Tuple.svelte";
-    import Table from "./Table.svelte";
-    import Color from "./Color.svelte";
-    import Button from "./Button.svelte";
-
-    import type { SpecialProp, Prop } from "../types";
-
-    // by use, info type is mapped to the value type
-    // unfortunately i can't use typescript in the markup part of svelte
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let {
-        value = $bindable(),
-        info,
-        depth,
-        disabled = false,
-        visible = false
-    }: {
-        value: any;
-        info: Prop | SpecialProp;
-        depth: number;
-        disabled?: boolean;
-        visible?: boolean;
-    } = $props();
-</script>
-
-{#if info instanceof Array}
-    {#if "table" === info[1]}
-        <Table {info} bind:value {depth} {disabled} {visible} />
-    {:else if "tuple" === info[1]}
-        <Tuple {info} bind:value {depth} {disabled} {visible} />
-    {:else if "text" === info[1]}
-        <Text {info} bind:value {depth} {disabled} {visible} />
-    {:else if "color" === info[1]}
-        <Color {info} bind:value {depth} {disabled} {visible} />
-    {:else if "number" === info[1]}
-        <Number {info} bind:value {depth} {disabled} {visible} />
-    {:else if "range" === info[1]}
-        <Range {info} bind:value {depth} {disabled} {visible} />
-    {:else if "select" === info[1]}
-        <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "toggle" === info[1]}
-        <Toggle {info} bind:value {depth} {disabled} {visible} />
-    {:else if "button" === info[1]}
-        <Button {info} {visible} />
-    {/if}
-{:else if "table" === info.type}
-    <Table {info} bind:value {depth} {disabled} {visible} />
-{:else if "tuple" === info.type}
-    <Tuple {info} bind:value {depth} {disabled} {visible} />
-{:else if "text" === info.type}
-    <Text {info} bind:value {depth} {disabled} {visible} />
-{:else if "color" === info.type}
-    <Color {info} bind:value {depth} {disabled} {visible} />
-{:else if "number" === info.type}
-    <Number {info} bind:value {depth} {disabled} {visible} />
-{:else if "range" === info.type}
-    <Range {info} bind:value {depth} {disabled} {visible} />
-{:else if "select" === info.type}
-    <Select {info} bind:value {depth} {disabled} {visible} />
-{:else if "toggle" === info.type}
-    <Toggle {info} bind:value {depth} {disabled} {visible} />
-{:else if "button" === info.type}
-    <Button {info} {visible} />
-{/if}

package/src/lib/components/block/controls/props/Number.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: number | undefined;
-        info: Unionized<PropType<"number">>;
-        depth: number;
-        disabled?: boolean;
-        visible?: boolean;
-    } = $props();
-
-    let ivalue = $state(value ?? defaulter(info));
-    let enabled = $state(value !== undefined);
-
-    const set_value = (v?: number) => { value = v; };
-    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
-</script>
-
-{#if visible}
-    <div>
-        <NameHeader name={getName(info)} {depth} />
-        <div>
-            <input
-                class="control"
-                type="number"
-                bind:value={ivalue}
-                disabled={!enabled || disabled}
-            />
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} /></div>
-    </div>
-{/if}