@nil-/doc 0.2.56 → 0.3.0

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

@@ -19,7 +19,7 @@
 <script>import { getName, getFormat } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
-import Toggle from "svelte-toggle";
+import Toggle from "./misc/Toggle.svelte";
 export let value;
 export let info;
 export let depth;
@@ -31,7 +31,7 @@ const action = (d, { format, P }) => {
   d.style.borderColor = ivalue;
   const picker = new P({
     parent: d,
-    popup: "left",
+    popup: "top",
     editorFormat: format.substring(0, 3),
     editor: true,
     alpha: format.length === 4,
@@ -58,17 +58,29 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        {#await import("vanilla-picker") then { default: P }}
-            <button use:action={{ format: getFormat(info), P }} disabled={!enabled || disabled}>
-                {ivalue}
-            </button>
-        {/await}
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
+        <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 {
+        position: absolute;
         font-size: 0.7rem;
         border-top-width: 1px;
         border-bottom-width: 1px;
@@ -76,9 +88,18 @@ $:
         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;
-        margin-top: 3px;
-        margin-bottom: 3px;
+    }
+
+    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),
@@ -89,8 +110,7 @@ $:
     }
 
     button :global(.picker_done > button) {
-        background-image: initial;
-        background-color: var(--i-nil-doc-bg-color);
-        color: var(--i-nil-doc-color);
+        background: var(--i-nil-doc-bg-color) !important;
+        color: var(--i-nil-doc-color) !important;
     }
 </style>

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

@@ -6,6 +6,7 @@ import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
 import Color from "./Color.svelte";
+import Button from "./Button.svelte";
 export let value;
 export let info;
 export let depth;
@@ -32,7 +33,7 @@ export let visible = false;
     {:else if "toggle" === type}
         <Toggle {info} bind:value {depth} {disabled} {visible} />
     {:else if "button" === type}
-        button
+        <Button {info} {visible} />
     {/if}
 {:else}
     {@const type = info.type}
@@ -53,6 +54,6 @@ export let visible = false;
     {:else if "toggle" === type}
         <Toggle {info} bind:value {depth} {disabled} {visible} />
     {:else if "button" === type}
-        button
+        <Button {info} {visible} />
     {/if}
 {/if}

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

@@ -1,7 +1,7 @@
 <script>import { getName } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
-import Toggle from "svelte-toggle";
+import Toggle from "./misc/Toggle.svelte";
 export let value;
 export let info;
 export let depth;
@@ -16,7 +16,14 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
+        <div>
+            <input
+                class="control"
+                type="number"
+                bind:value={ivalue}
+                disabled={!enabled || disabled}
+            />
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
     </div>
 {/if}

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

@@ -6,11 +6,6 @@ export let values;
 export let visible;
 </script>
 
-<Styler type={"props"}>
-    {#if visible}
-        <slot />
-    {/if}
-    {#each infos as info}
-        <Component {info} bind:value={values[getName(info)]} depth={1} {visible} />
-    {/each}
-</Styler>
+{#each infos as info}
+    <Component {info} bind:value={values[getName(info)]} depth={1} {visible} />
+{/each}

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

@@ -10,9 +10,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type PropsProps = typeof __propDef.props;
 export type PropsEvents = typeof __propDef.events;

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

@@ -1,7 +1,8 @@
 <script>import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 import { nformat } from "./misc/nformat";
-import Toggle from "svelte-toggle";
+import { getName } from "./misc/utils";
+import Toggle from "./misc/Toggle.svelte";
 export let value;
 export let info;
 export let depth;
@@ -13,12 +14,10 @@ $:
   value = enabled && !disabled ? ivalue : void 0;
 $:
   i = info instanceof Array ? {
-    name: info[0],
     min: info[2],
     max: info[3],
     step: info[4]
   } : {
-    name: info.name,
     min: info.min,
     max: info.max,
     step: info.step
@@ -27,29 +26,18 @@ $:
 
 {#if visible}
     <div>
-        <NameHeader name={i.name} {depth} />
+        <NameHeader name={getName(info)} {depth} />
         <div class="input" class:disabled={!enabled || disabled}>
-            <div class="tooltip">
-                Value: {nformat(ivalue, 6, 11)}
-            </div>
+            <div class="tooltip">Value: {nformat(ivalue, 6, 11)}</div>
             <div>{nformat(ivalue, 3, 5)}</div>
-            <input
-                type="range"
-                bind:value={ivalue}
-                min={i.min}
-                max={i.max}
-                step={i.step}
-                disabled={!enabled || disabled}
-            />
+            <input type="range" bind:value={ivalue} {...i} disabled={!enabled || disabled} />
         </div>
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
     </div>
 {/if}
 
 <style>
     .input {
-        /* TODO: align color schema for toggle */
-        color-scheme: light;
         width: 100%;
         display: grid;
         grid-template-columns: 4rem 1fr;
@@ -60,30 +48,28 @@ $:
 
     .input > div {
         width: 100%;
-        height: 100%;
+        height: 80%;
         display: grid;
-        text-align: left;
-        align-items: center;
         font-size: 0.8rem;
-        user-select: none;
-        margin: auto;
+        place-items: center;
     }
 
     .tooltip {
         left: -110%;
-        width: 100%;
-        height: 100%;
-        display: grid;
         visibility: hidden;
         position: absolute;
-        place-items: center;
     }
 
-    .input.disabled > div {
-        filter: contrast(0%);
+    .input.disabled {
+        cursor: not-allowed;
+        filter: opacity(0.5);
     }
 
-    .input:not(.disabled):hover > .tooltip {
+    .input:hover > .tooltip {
         visibility: visible;
     }
+
+    .input.disabled:hover > .tooltip {
+        visibility: hidden;
+    }
 </style>

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

@@ -1,7 +1,7 @@
 <script>import { defaulter } from "./misc/defaulter";
 import { getValues, getName } from "./misc/utils";
 import NameHeader from "./misc/Name.svelte";
-import Toggle from "svelte-toggle";
+import Toggle from "./misc/Toggle.svelte";
 export let value;
 export let info;
 export let depth;
@@ -17,13 +17,13 @@ $:
     <div>
         <NameHeader name={getName(info)} {depth} />
         <div>
-            <select bind:value={ivalue} disabled={!enabled || disabled}>
+            <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} hideLabel small /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
     </div>
 {/if}
 

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

@@ -1,7 +1,7 @@
 <script>import { getName } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
-import Toggle from "svelte-toggle";
+import Toggle from "./misc/Toggle.svelte";
 export let value;
 export let info;
 export let depth;
@@ -16,7 +16,14 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div><input type="text" bind:value={ivalue} disabled={!enabled || disabled} /></div>
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
+        <div>
+            <input
+                class="control"
+                type="text"
+                bind:value={ivalue}
+                disabled={!enabled || disabled}
+            />
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
     </div>
 {/if}

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

@@ -1,7 +1,7 @@
 <script>import { getName } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
-import Toggle from "svelte-toggle";
+import Toggle from "./misc/Toggle.svelte";
 export let value;
 export let info;
 export let depth;
@@ -16,9 +16,7 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div style="margin: auto">
-            <Toggle bind:toggled={ivalue} disabled={!enabled || disabled} hideLabel small />
-        </div>
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
+        <div><Toggle bind:toggled={ivalue} disabled={!enabled || disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
     </div>
 {/if}

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

@@ -1,5 +1,5 @@
 <script>import Name from "./Name.svelte";
-import Toggle from "svelte-toggle";
+import Toggle from "./Toggle.svelte";
 export let name;
 export let depth;
 export let checked;
@@ -16,27 +16,19 @@ const flip = () => {
 </script>
 
 {#if visible}
-    <div class="root" on:click={flip} on:keypress={null}>
+    <div on:click={flip} on:keypress={null}>
         <Name
             expand={expand === undefined ? undefined : expand && checked && !disabled}
             {name}
             {depth}
         />
-        <div class="value">-</div>
-        <div>
-            <Toggle
-                bind:toggled={checked}
-                {disabled}
-                hideLabel
-                small
-                on:click={(e) => e.stopPropagation()}
-            />
-        </div>
+        <div class:disabled={!checked}>-</div>
+        <div><Toggle bind:toggled={checked} {disabled} /></div>
     </div>
 {/if}
 
 <style>
-    .value {
-        text-align: center;
+    .disabled {
+        color: hsl(0, 0%, 50%);
     }
 </style>

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

@@ -0,0 +1,85 @@
+<script>import { getTheme } from "../../../../context";
+export let disabled = false;
+export let toggled = false;
+const click = () => {
+  if (!disabled) {
+    toggled = !toggled;
+  }
+};
+const dark = getTheme();
+</script>
+
+<div>
+    <svg
+        viewBox="-30 -30 60 60"
+        on:click|stopPropagation={click}
+        on:keypress
+        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/components/block/controls/props/misc/Toggle.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        disabled?: boolean | undefined;
+        toggled?: boolean | undefined;
+    };
+    events: {
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
+}
+export {};

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

@@ -5,7 +5,7 @@ export declare function getValues(info: Unionized<PropType<"select">>): Values<"
 export declare function getValues(info: Unionized<PropType<"object">>): Values<"object">;
 export declare function getValues(info: Unionized<PropType<"tuple">>): Values<"tuple">;
 export declare const getMin: (info: Unionized<PropType<"range">>) => number;
-export declare const getType: (info: Prop | SpecialProp) => "number" | "object" | "select" | "toggle" | "button" | "text" | "range" | "tuple" | "color";
+export declare const getType: (info: Prop | SpecialProp) => "number" | "object" | "select" | "toggle" | "button" | "tuple" | "text" | "color" | "range";
 export declare const getFormat: (info: Unionized<PropType<"color">>) => import("../../types").ColorFormat;
 export declare const getName: (info: Prop | SpecialProp) => string;
 export declare const getClick: (info: SpecialProp) => () => () => void;

package/components/block/controls/props/misc/utils.js

@@ -1,43 +1,22 @@
 // eslint-disable-next-line func-style
 export function getValues(info) {
-    if (info instanceof Array) {
-        return info[2];
-    }
-    return info.values;
+    return info instanceof Array ? info[2] : info.values;
 }
 export const getMin = (info) => {
-    if (info instanceof Array) {
-        return info[2];
-    }
-    return info.min;
+    return info instanceof Array ? info[2] : info.min;
 };
 export const getType = (info) => {
-    if (info instanceof Array) {
-        return info[1];
-    }
-    return info.type;
+    return info instanceof Array ? info[1] : info.type;
 };
 export const getFormat = (info) => {
-    if (info instanceof Array) {
-        return info[2];
-    }
-    return info.format;
+    return info instanceof Array ? info[2] : info.format;
 };
 export const getName = (info) => {
-    if (info instanceof Array) {
-        return info[0];
-    }
-    return info.name;
+    return info instanceof Array ? info[0] : info.name;
 };
 export const getClick = (info) => {
-    if (info instanceof Array) {
-        return info[2];
-    }
-    return info.click;
+    return info instanceof Array ? info[2] : info.click;
 };
 export const addName = (name, info) => {
-    if (info instanceof Array) {
-        return [name, ...info];
-    }
-    return { ...info, name };
+    return info instanceof Array ? [name, ...info] : { name, ...info };
 };

package/components/block/icons/ControlView.svelte

@@ -6,7 +6,7 @@
 <svg viewBox="-50 -50 100 100">
     <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
     <rect
-        class:right={mode === "prop"}
+        x={mode === "prop" ? 0 : -20}
         class="mv"
         height="40"
         width="20"
@@ -21,10 +21,5 @@
 <style>
     .mv {
         transition: x var(--i-nil-doc-transition-time);
-        x: -20px;
-    }
-
-    .mv.right {
-        x: 0px;
     }
 </style>

package/components/block/icons/Position.svelte

@@ -1,10 +1,20 @@
 <script>export let position = "hidden";
+$:
+  bottom = position === "bottom";
+$:
+  right = position === "right";
 </script>
 
 <svg viewBox="-50 -50 100 100">
-    <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
-    <rect class:show={position === "bottom"} />
-    <rect class:show={position === "right"} transform="rotate(-90)" />
+    <rect width="60" x="-30" height="60" y="-30" fill="transparent" />
+    <rect width="60" x="-30" height={bottom ? "20" : "0"} y={bottom ? "10" : "30"} />
+    <rect
+        width="60"
+        x="-30"
+        height={right ? "20" : "0"}
+        y={right ? "10" : "30"}
+        transform="rotate(-90)"
+    />
 </svg>
 
 <style>
@@ -13,18 +23,8 @@
         fill: currentColor;
     }
 
-    rect:not(:first-child) {
+    rect:nth-child(n + 2) {
         transition: height var(--i-nil-doc-transition-time), x var(--i-nil-doc-transition-time),
             y var(--i-nil-doc-transition-time);
-        width: 60px;
-        height: 0px;
-        x: -30px;
-        y: 30px;
-    }
-
-    rect:not(:first-child).show {
-        height: 20px;
-        x: -30px;
-        y: 10px;
     }
 </style>

package/components/layout/Container.svelte

@@ -53,8 +53,10 @@ const check = (v, flag, s) => {
 
 <div
     class="container"
-    class:vertical
     class:b
+    class:a={!b}
+    class:vertical
+    class:horizontal={!vertical}
     class:moving={$moving}
     bind:clientWidth={width}
     bind:clientHeight={height}
@@ -143,7 +145,7 @@ const check = (v, flag, s) => {
         --width: 0.0625rem;
     }
 
-    .container:not(.vertical) > .divider {
+    .container.horizontal > .divider {
         border-bottom: var(--i-nil-doc-container-p) solid var(--width);
         border-top: var(--i-nil-doc-container-p) solid var(--width);
         background-color: var(--i-nil-doc-container-p);
@@ -155,18 +157,18 @@ const check = (v, flag, s) => {
         background-color: var(--i-nil-doc-container-p);
     }
 
-    .container:not(.b):not(.vertical) > .divider:hover,
-    .container.moving:not(.b):not(.vertical) > .divider {
+    .container.a.horizontal > .divider:hover,
+    .container.moving.a.horizontal > .divider {
         border-bottom: var(--i-nil-doc-container-s) solid var(--width);
     }
 
-    .container.b:not(.vertical) > .divider:hover,
-    .container.moving.b:not(.vertical) > .divider {
+    .container.b.horizontal > .divider:hover,
+    .container.moving.b.horizontal > .divider {
         border-top: var(--i-nil-doc-container-s) solid var(--width);
     }
 
-    .container:not(.b).vertical > .divider:hover,
-    .container.moving:not(.b).vertical > .divider {
+    .container.a.vertical > .divider:hover,
+    .container.moving.a.vertical > .divider {
         border-right: var(--i-nil-doc-container-s) solid var(--width);
     }