@nil-/doc 1.0.0 → 2.0.0

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

@@ -0,0 +1,120 @@
+<script lang="ts" module>const colorSetter = (format, color) => {
+  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
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+const action = (d, { format, P }) => {
+  d.style.borderColor = ivalue;
+  const picker = new P({
+    parent: d,
+    popup: "left",
+    editorFormat: format.substring(0, 3),
+    editor: true,
+    alpha: 4 === format.length,
+    onChange: (color) => {
+      ivalue = colorSetter(getFormat(info), color);
+      d.style.borderColor = ivalue;
+    },
+    color: ivalue
+  });
+  return {
+    update: (format2) => {
+      picker.setOptions({
+        alpha: 4 === format2.length,
+        editorFormat: format2.substring(0, 3)
+      });
+    },
+    destroy: () => picker.destroy()
+  };
+};
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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/package/components/block/controls/props/Color.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: string | undefined;
+    info: Unionized<PropType<"color">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Color: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Color = ReturnType<typeof Color>;
+export default Color;

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

@@ -0,0 +1,57 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $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/package/components/block/controls/props/Component.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SpecialProp, Prop } from "../types";
+type $$ComponentProps = {
+    value: any;
+    info: Prop | SpecialProp;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Component: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Component = ReturnType<typeof Component>;
+export default Component;

package/package/components/block/controls/props/Number.svelte

@@ -0,0 +1,33 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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}

package/package/components/block/controls/props/Number.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: number | undefined;
+    info: Unionized<PropType<"number">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Number: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Number = ReturnType<typeof Number>;
+export default Number;

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

@@ -0,0 +1,17 @@
+<script lang="ts">import Component from "./Component.svelte";
+import { getName } from "./misc/utils";
+let {
+  infos,
+  values,
+  visible
+} = $props();
+</script>
+
+{#each infos as info}
+    <Component
+        {info}
+        depth={1}
+        {visible} 
+        bind:value={$values.props[getName(info)]}
+    />
+{/each}

package/package/components/block/controls/props/Props.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SpecialProp, Prop } from "../types";
+import type { ControlValue } from "../../context";
+import type { Writable } from "svelte/store";
+type $$ComponentProps = {
+    infos: (SpecialProp | Prop)[];
+    values: Writable<ControlValue>;
+    visible: boolean;
+};
+declare const Props: import("svelte").Component<$$ComponentProps, {}, "">;
+type Props = ReturnType<typeof Props>;
+export default Props;

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

@@ -0,0 +1,82 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+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/package/components/block/controls/props/Range.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: number | undefined;
+    info: Unionized<PropType<"range">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Range: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

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

@@ -0,0 +1,38 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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/package/components/block/controls/props/Select.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: string | undefined;
+    info: Unionized<PropType<"select">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1,31 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+let expand = $state(getValues(info).length > 0 ? true : void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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/package/components/block/controls/props/Table.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ValueType } from "../../types";
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: Record<string, ValueType> | undefined;
+    info: Unionized<PropType<"table">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Table = ReturnType<typeof Table>;
+export default Table;

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

@@ -0,0 +1,33 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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/package/components/block/controls/props/Text.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: string | undefined;
+    info: Unionized<PropType<"text">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Text = ReturnType<typeof Text>;
+export default Text;

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

@@ -0,0 +1,26 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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/package/components/block/controls/props/Toggle.svelte.d.ts

@@ -0,0 +1,12 @@
+import Toggle from "./misc/Toggle.svelte";
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: boolean | undefined;
+    info: Unionized<PropType<"toggle">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

@@ -0,0 +1,31 @@
+<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";
+let {
+  value = $bindable(),
+  info,
+  depth,
+  disabled = false,
+  visible = false
+} = $props();
+let ivalue = $state(value ?? defaulter(info));
+let enabled = $state(value !== void 0);
+let expand = $state(getValues(info).length > 0 ? true : void 0);
+const set_value = (v) => {
+  value = v;
+};
+$effect(() => set_value(enabled && !disabled ? ivalue : void 0));
+</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/package/components/block/controls/props/Tuple.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ValueType } from "../../types";
+import type { Unionized, PropType } from "../types";
+type $$ComponentProps = {
+    value: ValueType[] | undefined;
+    info: Unionized<PropType<"tuple">>;
+    depth: number;
+    disabled?: boolean;
+    visible?: boolean;
+};
+declare const Tuple: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Tuple = ReturnType<typeof Tuple>;
+export default Tuple;

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

@@ -0,0 +1,35 @@
+<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
+} = $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/package/components/block/controls/props/misc/GroupHeader.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    name: string;
+    depth: number;
+    checked?: boolean;
+    disabled?: boolean;
+    expand?: boolean;
+    visible?: boolean;
+};
+declare const GroupHeader: import("svelte").Component<$$ComponentProps, {}, "expand" | "checked">;
+type GroupHeader = ReturnType<typeof GroupHeader>;
+export default GroupHeader;