@nil-/doc 0.2.49 → 0.2.51

package/components/block/context.d.ts

@@ -7,8 +7,8 @@ export type Params = {
     values: Record<string, ValueType>;
 };
 export type ControlState = {
-    hide: boolean;
-    position?: "bottom" | "right";
+    position: "bottom" | "right" | "hidden";
+    mode: "prop" | "event";
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 type Controls = {

package/components/block/context.js

@@ -14,6 +14,7 @@ export const { init: initControls, get: getControls } = create(() => ({
 }));
 export const { init: initDefaults, get: getDefaults } = create(() => ({}));
 export const { init: initControlsState, get: getControlsState } = create(() => ({
-    hide: false
+    position: "hidden",
+    mode: "prop"
 }));
 export const { init: initOrientation, get: getOrientation } = create(() => false);

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

@@ -1,12 +1,3 @@
-<style>
-    .count {
-        display: grid;
-        place-items: center;
-        text-align: center;
-        font-size: 0.8rem;
-    }
-</style>
-
 <script>import Styler from "./misc/Styler.svelte";
 export let visible;
 export let events;
@@ -48,18 +39,19 @@ const wrap = (ext) => {
 $:
   handlers = wrap(events);
 </script>
+
 {#if visible}
     <Styler>
         <slot />
         {#each history as { count, detail, name }, i (i)}
             <div>
-                <div>
+                <div class="name">
                     <div>{name}</div>
-                    <div class="count">
-                        {#if count > 1}
+                    {#if count > 1}
+                        <div class="count">
                             [{count.toString().padStart(2, "0")}]
-                        {/if}
-                    </div>
+                        </div>
+                    {/if}
                 </div>
                 <div>{detail}</div>
             </div>
@@ -67,3 +59,20 @@ $:
     </Styler>
 {/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/components/block/controls/events/misc/Styler.svelte

@@ -1,83 +1,57 @@
 <script>import { getTheme } from "../../../../context";
 const dark = getTheme();
 </script>
+
+<!--
+    <div> this component
+        <div> Header
+            <div></div>
+            <div></div>
+        </div>
+        <div> Controls
+            <div></div>
+            <div></div>
+        </div>
+        ...
+    </div>
+-->
+<div class:dark={$dark}>
+    <slot />
+</div>
+
 <style>
     div {
-        width: 100%;
-        height: 330px;
-        min-width: 500px;
-        overflow: hidden;
         display: grid;
-        grid-auto-rows: 30px;
-        box-sizing: border-box;
-    }
-
-    div :global(*),
-    div :global(*::before),
-    div :global(*::after) {
-        box-sizing: inherit;
+        overflow: hidden;
+        height: 22rem;
+        min-width: 31.25rem;
+        grid-auto-rows: 2rem;
     }
 
     div > :global(div) {
         display: grid;
-        width: 100%;
-        padding: 2px 0px;
-        grid-template-columns: 1fr 2fr;
-    }
-
-    div > :global(div > div) {
-        padding: 0px 10px;
+        grid-template-columns: 2fr 3fr;
+        align-items: center;
     }
 
     div > :global(div:first-child) {
-        text-align: center;
-    }
-
-    div > :global(div:not(:first-child) > div:first-child) {
-        display: grid;
-        grid-template-columns: 1fr 30px;
+        font-weight: bold;
+        justify-items: center;
     }
 
     /* colors */
     div {
-        --pri-color: hsl(0, 0%, 100%);
-        --sec-color: hsl(210, 29%, 97%);
-        --hover-color: hsl(210, 100%, 90%);
-    }
-
-    div.dark {
-        --pri-color: hsl(213, 26%, 7%);
-        --sec-color: hsl(213, 26%, 11%);
-        --hover-color: hsl(203, 100%, 15%);
-    }
-
-    div {
-        transition: background-color 150ms;
+        transition: background-color var(--i-nil-doc-transition-time);
         background-repeat: repeat;
-        background-size: 100% 60px;
-        background-image: linear-gradient(to bottom, var(--pri-color) 30px, var(--sec-color) 30px);
+        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(--hover-color);
+        background-color: var(--i-nil-doc-controls-hover);
     }
 </style>
-
-
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div class:dark={$dark}>
-    <slot />
-</div>
-

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

@@ -0,0 +1,21 @@
+<script>import { getName } from "./misc/utils";
+import { defaulter } from "./misc/defaulter";
+import NameHeader from "./misc/Name.svelte";
+export let value;
+export let info;
+export let depth;
+export let disabled = false;
+export let visible = false;
+let ivalue = value ?? defaulter(info);
+let enabled = value !== void 0;
+$:
+  value = enabled && !disabled ? ivalue : void 0;
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div><input type="color" bind:value={ivalue} disabled={!enabled || disabled} /></div>
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+    </div>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Unionized, PropType } from "../types";
+declare const __propDef: {
+    props: {
+        value: string | undefined;
+        info: Unionized<PropType<"color">>;
+        depth: number;
+        disabled?: boolean | undefined;
+        visible?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorProps = typeof __propDef.props;
+export type ColorEvents = typeof __propDef.events;
+export type ColorSlots = typeof __propDef.slots;
+export default class Color extends SvelteComponentTyped<ColorProps, ColorEvents, ColorSlots> {
+}
+export {};

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

@@ -1,4 +1,3 @@
-
 <script>import Text from "./Text.svelte";
 import Number from "./Number.svelte";
 import Range from "./Range.svelte";
@@ -6,12 +5,14 @@ import Switch from "./Switch.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
+import Color from "./Color.svelte";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
 </script>
+
 {#if info instanceof Array}
     {@const type = info[1]}
     {#if "object" === type}
@@ -20,6 +21,8 @@ export let visible = false;
         <Tuple {info} bind:value {depth} {disabled} {visible} />
     {:else if "text" === type}
         <Text {info} bind:value {depth} {disabled} {visible} />
+    {:else if "color" === type}
+        <Color {info} bind:value {depth} {disabled} {visible} />
     {:else if "number" === type}
         <Number {info} bind:value {depth} {disabled} {visible} />
     {:else if "range" === type}
@@ -37,6 +40,8 @@ export let visible = false;
         <Tuple {info} bind:value {depth} {disabled} {visible} />
     {:else if "text" === type}
         <Text {info} bind:value {depth} {disabled} {visible} />
+    {:else if "color" === type}
+        <Color {info} bind:value {depth} {disabled} {visible} />
     {:else if "number" === type}
         <Number {info} bind:value {depth} {disabled} {visible} />
     {:else if "range" === type}

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

@@ -1,21 +1,20 @@
-
-<script>import { getDefault } from "./misc/defaulter";
+<script>import { getName } from "./misc/utils";
+import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
+let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
-$:
-  name = info instanceof Array ? info[0] : info.name;
 </script>
+
 {#if visible}
     <div>
-        <NameHeader {name} {depth} />
+        <NameHeader name={getName(info)} {depth} />
         <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>

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

@@ -1,27 +1,25 @@
-
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
-import { getDefault } from "./misc/defaulter";
+import { defaulter } from "./misc/defaulter";
+import { getValues, getName } from "./misc/utils";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
+let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
-let expand = info.values.length > 0 ? true : void 0;
+let expand = getValues(info).length > 0 ? true : void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
-$:
-  values = info instanceof Array ? info[2] : info.values;
-$:
-  name = info instanceof Array ? info[0] : info.name;
 </script>
-<Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
-{#each values as info, i (i)}
+
+<Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
+
+{#each getValues(info) as v, i (i)}
     <Component
-        {info}
-        bind:value={ivalue[name]}
+        info={v}
+        bind:value={ivalue[getName(v)]}
         depth={depth + 10}
         disabled={!enabled || disabled}
         visible={visible && expand && enabled && !disabled}

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

@@ -1,19 +1,16 @@
-
 <script>import Component from "./Component.svelte";
 import Styler from "./misc/Styler.svelte";
+import { getName } from "./misc/utils";
 export let infos;
 export let values;
 export let visible;
 </script>
+
 <Styler>
     {#if visible}
         <slot />
     {/if}
     {#each infos as info}
-        {#if info instanceof Array}
-            <Component {info} bind:value={values[info[0]]} depth={10} {visible} />
-        {:else}
-            <Component {info} bind:value={values[info.name]} depth={10} {visible} />
-        {/if}
+        <Component {info} bind:value={values[getName(info)]} depth={10} {visible} />
     {/each}
 </Styler>

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

@@ -1,39 +1,4 @@
-<style>
-    .input {
-        width: 100%;
-        display: grid;
-        grid-template-columns: 65px 1fr;
-        gap: 5px;
-        position: relative;
-    }
-
-    .input > div {
-        width: 100%;
-        height: 100%;
-        display: grid;
-        text-align: left;
-        align-items: center;
-        font-size: 0.8rem;
-        user-select: none;
-        margin: auto;
-    }
-
-    .tooltip {
-        left: -110%;
-        width: 100%;
-        height: 100%;
-        display: grid;
-        visibility: hidden;
-        position: absolute;
-        place-items: center;
-    }
-
-    .input:hover > .tooltip:not(.disabled) {
-        visibility: visible;
-    }
-</style>
-
-<script>import { getDefault } from "./misc/defaulter";
+<script>import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 import { nformat } from "./misc/nformat";
 export let value;
@@ -41,7 +6,7 @@ export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
+let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
@@ -58,6 +23,7 @@ $:
     step: info.step
   };
 </script>
+
 {#if visible}
     <div>
         <NameHeader name={i.name} {depth} />
@@ -79,3 +45,38 @@ $:
     </div>
 {/if}
 
+<style>
+    .input {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 4rem 1fr;
+        gap: 0.3125rem;
+        position: relative;
+        box-sizing: border-box;
+    }
+
+    .input > div {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        text-align: left;
+        align-items: center;
+        font-size: 0.8rem;
+        user-select: none;
+        margin: auto;
+    }
+
+    .tooltip {
+        left: -110%;
+        width: 100%;
+        height: 100%;
+        display: grid;
+        visibility: hidden;
+        position: absolute;
+        place-items: center;
+    }
+
+    .input:hover > .tooltip:not(.disabled) {
+        visibility: visible;
+    }
+</style>

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

@@ -1,31 +1,23 @@
-<style>
-    select {
-        text-align: center;
-    }
-</style>
-
-<script>import { getDefault } from "./misc/defaulter";
+<script>import { defaulter } from "./misc/defaulter";
+import { getValues, getName } from "./misc/utils";
 import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
+let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
-$:
-  name = info instanceof Array ? info[0] : info.name;
-$:
-  values = info instanceof Array ? info[2] : info.values;
 </script>
+
 {#if visible}
     <div>
-        <NameHeader {name} {depth} />
+        <NameHeader name={getName(info)} {depth} />
         <div>
             <select bind:value={ivalue} disabled={!enabled || disabled}>
-                {#each values as v}
+                {#each getValues(info) as v}
                     <option value={v}>{v}</option>
                 {/each}
             </select>
@@ -34,3 +26,8 @@ $:
     </div>
 {/if}
 
+<style>
+    select {
+        text-align: center;
+    }
+</style>

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

@@ -1,21 +1,20 @@
-
-<script>import { getDefault } from "./misc/defaulter";
+<script>import { getName } from "./misc/utils";
+import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
+let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
 $:
   value = enabled && !disabled ? ivalue : void 0;
-$:
-  name = info instanceof Array ? info[0] : info.name;
 </script>
+
 {#if visible}
     <div>
-        <NameHeader {name} {depth} />
+        <NameHeader name={getName(info)} {depth} />
         <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>

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

@@ -1,22 +1,21 @@
-
-<script>import { getDefault } from "./misc/defaulter";
+<script>import { getName } from "./misc/utils";
+import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
-let ienabled = value !== void 0;
-$:
-  value = ienabled && !disabled ? ivalue : void 0;
+let ivalue = value ?? defaulter(info);
+let enabled = value !== void 0;
 $:
-  name = info instanceof Array ? info[0] : info.name;
+  value = enabled && !disabled ? ivalue : void 0;
 </script>
+
 {#if visible}
     <div>
-        <NameHeader {name} {depth} />
-        <div><input type="text" bind:value={ivalue} disabled={!ienabled || disabled} /></div>
-        <div><input type="checkbox" bind:checked={ienabled} {disabled} /></div>
+        <NameHeader name={getName(info)} {depth} />
+        <div><input type="text" bind:value={ivalue} disabled={!enabled || disabled} /></div>
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>
 {/if}

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

@@ -1,39 +1,27 @@
-
 <script>import Component from "./Component.svelte";
 import Header from "./misc/GroupHeader.svelte";
-import { getDefault } from "./misc/defaulter";
+import { defaulter } from "./misc/defaulter";
+import { getValues, getName, addName } from "./misc/utils";
 export let value;
 export let info;
 export let depth;
 export let disabled = false;
 export let visible = false;
-let ivalue = value ?? getDefault(info);
+let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
+let expand = getValues(info).length > 0 ? true : void 0;
 $:
   value = !disabled && enabled ? ivalue : void 0;
-$:
-  values = info instanceof Array ? info[2] : info.values;
-$:
-  name = info instanceof Array ? info[0] : info.name;
-let expand = info.values.length > 0 ? true : void 0;
 </script>
-<Header {name} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
-{#each values as v, i (i)}
-    {#if v instanceof Array}
-        <Component
-            info={[`${i}`, ...v]}
-            bind:value={ivalue[i]}
-            depth={depth + 10}
-            disabled={!enabled || disabled}
-            visible={visible && expand && enabled && !disabled}
-        />
-    {:else}
-        <Component
-            info={{ ...v, name: `${i}` }}
-            bind:value={ivalue[i]}
-            depth={depth + 10}
-            disabled={!enabled || disabled}
-            visible={visible && expand && enabled && !disabled}
-        />
-    {/if}
+
+<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 + 10}
+        disabled={!enabled || disabled}
+        visible={visible && expand && enabled && !disabled}
+    />
 {/each}

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

@@ -1,9 +1,3 @@
-<style>
-    .value {
-        text-align: center;
-    }
-</style>
-
 <script>import Name from "./Name.svelte";
 export let name;
 export let depth;
@@ -19,6 +13,7 @@ const flip = () => {
   }
 };
 </script>
+
 {#if visible}
     <div class="root" on:click={flip} on:keypress={null}>
         <Name
@@ -33,3 +28,8 @@ const flip = () => {
     </div>
 {/if}
 
+<style>
+    .value {
+        text-align: center;
+    }
+</style>