@nil-/doc 0.2.50 → 0.2.52

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

@@ -0,0 +1,86 @@
+<script context="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":
+      return color.rgbaString;
+  }
+};
+const formatter = (format) => {
+  switch (format) {
+    case "hex":
+      return "hex";
+    case "hsl":
+      return "hsl";
+    case "rgb":
+      return "rgb";
+    case "hexa":
+      return "hex";
+    case "hsla":
+      return "hsl";
+    case "rgba":
+      return "rgb";
+  }
+};
+</script>
+
+<script>import { getName, getFormat } from "./misc/utils";
+import { defaulter } from "./misc/defaulter";
+import NameHeader from "./misc/Name.svelte";
+import Picker from "vanilla-picker";
+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;
+const action = (div, format) => {
+  const picker = new Picker({
+    parent: div,
+    popup: "left",
+    editorFormat: formatter(format),
+    editor: false,
+    alpha: format.length === 4,
+    onChange: (color) => ivalue = colorSetter(getFormat(info), color),
+    color: ivalue
+  });
+  return {
+    update: (format2) => {
+      picker.setOptions({
+        alpha: format2.length === 4,
+        editorFormat: formatter(format2)
+      });
+    },
+    destroy: () => picker.destroy()
+  };
+};
+$:
+  value = enabled && !disabled ? ivalue : void 0;
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div>
+            <button use:action={getFormat(info)} disabled={!enabled || disabled}>
+                {value}
+            </button>
+        </div>
+        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+    </div>
+{/if}
+
+<style>
+    div > div > button {
+        font-size: 0.7rem;
+    }
+</style>

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

@@ -5,6 +5,7 @@ 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;
@@ -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,29 +1,26 @@
 <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} />
+<Header name={getName(info)} bind:expand bind:checked={enabled} {depth} {disabled} {visible} />
 
-{#each values as info, i (i)}
+{#each getValues(info) as v, i (i)}
     <Component
-        {info}
-        bind:value={ivalue[name]}
-        depth={depth + 10}
+        info={v}
+        bind:value={ivalue[getName(v)]}
+        depth={depth + 1}
         disabled={!enabled || disabled}
         visible={visible && expand && enabled && !disabled}
     />

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

@@ -1,5 +1,6 @@
 <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;
@@ -10,10 +11,6 @@ export let 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={1} {visible} />
     {/each}
 </Styler>

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

@@ -1,4 +1,4 @@
-<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;
@@ -6,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;
@@ -49,9 +49,10 @@ $:
     .input {
         width: 100%;
         display: grid;
-        grid-template-columns: 65px 1fr;
-        gap: 5px;
+        grid-template-columns: 4rem 1fr;
+        gap: 0.25rem;
         position: relative;
+        box-sizing: border-box;
     }
 
     .input > div {

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

@@ -1,26 +1,23 @@
-<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>

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;
+let ivalue = value ?? defaulter(info);
+let enabled = value !== void 0;
 $:
-  value = ienabled && !disabled ? ivalue : 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,40 +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} />
+<Header name={getName(info)} 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}
+{#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/components/block/controls/props/misc/Name.svelte

@@ -3,7 +3,7 @@ export let name;
 export let expand = void 0;
 </script>
 
-<div class="override" style:padding-left={`${depth}px`} title={name}>
+<div class="override" style:padding-left={`${depth}rem`} title={name}>
     <div class="icon" class:expand={expand === true}>
         <div>
             {expand === undefined ? "-" : ">"}
@@ -17,21 +17,20 @@ export let expand = void 0;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        padding-right: 10px;
+        padding-right: 0.5rem;
 
         display: grid;
-        grid-template-columns: 20px 1fr;
+        grid-template-columns: 1.25rem 1fr;
         align-items: center;
-        box-sizing: border-box;
     }
 
     .icon {
         display: flex;
         flex-direction: column;
         justify-content: center;
-        height: 15px;
-        width: 15px;
-        transition: transform 350ms;
+        height: 1rem;
+        width: 1rem;
+        transition: transform var(--i-nil-doc-transition-time);
     }
 
     .icon.expand {

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

@@ -1,7 +1,3 @@
-<script>import { getTheme } from "../../../../context";
-const dark = getTheme();
-</script>
-
 <!--
     <div> this component
         <div> Header
@@ -17,17 +13,15 @@ const dark = getTheme();
         ...
     </div>
 -->
-<div class:dark={$dark}>
+<div>
     <slot />
 </div>
 
 <style>
     div {
-        width: 100%;
-        min-width: 500px;
-        overflow: hidden;
         display: grid;
-        grid-auto-rows: 30px;
+        min-width: 31.25rem;
+        grid-auto-rows: 2rem;
         box-sizing: border-box;
     }
 
@@ -40,49 +34,43 @@ const dark = getTheme();
 
     div > :global(div) {
         display: grid;
-        width: 100%;
-        padding: 2px 0px;
-        grid-template-columns: minmax(250px, 1fr) 200px 40px;
+        grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
     }
 
     div > :global(div:first-child) {
-        text-align: center;
         font-weight: bold;
+        place-items: center;
+    }
+
+    div > :global(div > div:not(:first-child)) {
+        display: grid;
+        place-items: center;
     }
 
     div > :global(div > div:not(:first-child) > *) {
         width: 100%;
-        height: 100%;
+        height: 80%;
+        font-size: 1rem;
     }
 
     /* colors */
     div {
-        --pri-color: hsl(0, 0%, 100%);
-        --sec-color: hsl(210, 29%, 97%);
-        --hover-color: hsl(210, 100%, 90%);
-        --outline-color: hsl(0, 0%, 0%);
-    }
-
-    div.dark {
-        --pri-color: hsl(213, 26%, 7%);
-        --sec-color: hsl(213, 26%, 11%);
-        --hover-color: hsl(203, 100%, 15%);
-        --outline-color: hsl(200, 6%, 80%);
-    }
-
-    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);
     }
 
     div > :global(div:hover .tooltip) {
-        background-color: var(--pri-color);
-        outline: var(--outline-color) 1px solid;
+        background-color: var(--i-nil-doc-controls-p);
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
     }
 </style>

package/components/block/controls/props/misc/Styler.svelte.d.ts

@@ -1,6 +1,22 @@
+/** @typedef {typeof __propDef.props}  StylerProps */
+/** @typedef {typeof __propDef.events}  StylerEvents */
+/** @typedef {typeof __propDef.slots}  StylerSlots */
+export default class Styler extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -8,9 +24,4 @@ declare const __propDef: {
         default: {};
     };
 };
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
-export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
-}
 export {};

package/components/block/controls/props/misc/defaulter.d.ts

@@ -1,10 +1,11 @@
 import type { ValueType } from "../../../types";
 import type { Unionized, PropType, Prop } from "../../types";
-export declare function getDefault(i: Unionized<PropType<"tuple">>): ValueType[];
-export declare function getDefault(i: Unionized<PropType<"object">>): Record<string, ValueType>;
-export declare function getDefault(i: Unionized<PropType<"number">>): number;
-export declare function getDefault(i: Unionized<PropType<"range">>): number;
-export declare function getDefault(i: Unionized<PropType<"select">>): string;
-export declare function getDefault(i: Unionized<PropType<"text">>): string;
-export declare function getDefault(i: Unionized<PropType<"switch">>): boolean;
-export declare function getDefault(i: Prop): ValueType;
+export declare function defaulter(i: Unionized<PropType<"tuple">>): ValueType[];
+export declare function defaulter(i: Unionized<PropType<"object">>): Record<string, ValueType>;
+export declare function defaulter(i: Unionized<PropType<"number">>): number;
+export declare function defaulter(i: Unionized<PropType<"range">>): number;
+export declare function defaulter(i: Unionized<PropType<"select">>): string;
+export declare function defaulter(i: Unionized<PropType<"text">>): string;
+export declare function defaulter(i: Unionized<PropType<"switch">>): boolean;
+export declare function defaulter(i: Unionized<PropType<"color">>): string;
+export declare function defaulter(i: Prop): ValueType;