@nil-/doc 0.2.53 → 0.2.54

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nil-/doc
 
+## 0.2.54
+
+### Patch Changes
+
+-   [doc][fix] dynamic import of vanilla-picker to avoid ssr document access ([#94](https://github.com/njaldea/mono/pull/94))
+
+-   [doc][patch] temporarily used svelte-toggle for checkbox/toggle ([#94](https://github.com/njaldea/mono/pull/94))
+
 ## 0.2.53
 
 ### Patch Changes

package/components/block/controls/Styler.svelte

@@ -42,11 +42,15 @@
         place-items: center;
     }
 
-    div.props > :global(div > div:not(:first-child)) {
+    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:not(:first-child) > *) {
         width: 100%;
         height: 80%;

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

@@ -1,5 +1,4 @@
-<script context="module">import Picker from "vanilla-picker";
-const colorSetter = (format, color) => {
+<script context="module">const colorSetter = (format, color) => {
   switch (format) {
     case "hex":
       return color.hex.substring(0, 7);
@@ -20,6 +19,7 @@ const colorSetter = (format, color) => {
 <script>import { getName, getFormat } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -27,13 +27,13 @@ export let disabled = false;
 export let visible = false;
 let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
-const action = (d, format) => {
+const action = (d, { format, P }) => {
   d.style.borderColor = ivalue;
-  const picker = new Picker({
+  const picker = new P({
     parent: d,
     popup: "left",
     editorFormat: format.substring(0, 3),
-    editor: false,
+    editor: true,
     alpha: format.length === 4,
     onChange: (color) => {
       ivalue = colorSetter(getFormat(info), color);
@@ -58,10 +58,12 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <button use:action={getFormat(info)} disabled={!enabled || disabled}>
-            {ivalue}
-        </button>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        {#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>
 {/if}
 

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

@@ -1,7 +1,7 @@
 <script>import Text from "./Text.svelte";
 import Number from "./Number.svelte";
 import Range from "./Range.svelte";
-import Switch from "./Switch.svelte";
+import Toggle from "./Toggle.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
@@ -29,8 +29,8 @@ export let visible = false;
         <Range {info} bind:value {depth} {disabled} {visible} />
     {:else if "select" === type}
         <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "switch" === type}
-        <Switch {info} bind:value {depth} {disabled} {visible} />
+    {:else if "toggle" === type}
+        <Toggle {info} bind:value {depth} {disabled} {visible} />
     {/if}
 {:else}
     {@const type = info.type}
@@ -48,7 +48,7 @@ export let visible = false;
         <Range {info} bind:value {depth} {disabled} {visible} />
     {:else if "select" === type}
         <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "switch" === type}
-        <Switch {info} bind:value {depth} {disabled} {visible} />
+    {:else if "toggle" === type}
+        <Toggle {info} bind:value {depth} {disabled} {visible} />
     {/if}
 {/if}

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

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

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

@@ -1,6 +1,7 @@
 <script>import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 import { nformat } from "./misc/nformat";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -27,8 +28,8 @@ $:
 {#if visible}
     <div>
         <NameHeader name={i.name} {depth} />
-        <div class="input">
-            <div class="tooltip" class:disabled={!enabled || disabled}>
+        <div class="input" class:disabled={!enabled || disabled}>
+            <div class="tooltip">
                 Value: {nformat(ivalue, 6, 11)}
             </div>
             <div>{nformat(ivalue, 3, 5)}</div>
@@ -41,12 +42,14 @@ $:
                 disabled={!enabled || disabled}
             />
         </div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small/></div>
     </div>
 {/if}
 
 <style>
     .input {
+        /* TODO: align color schema for toggle */
+        color-scheme: light;
         width: 100%;
         display: grid;
         grid-template-columns: 4rem 1fr;
@@ -76,7 +79,11 @@ $:
         place-items: center;
     }
 
-    .input:hover > .tooltip:not(.disabled) {
+    .input.disabled > div {
+        filter: contrast(0%);
+    }
+
+    .input:not(.disabled):hover > .tooltip {
         visibility: visible;
     }
 </style>

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

@@ -1,6 +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";
 export let value;
 export let info;
 export let depth;
@@ -22,7 +23,7 @@ $:
                 {/each}
             </select>
         </div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small/></div>
     </div>
 {/if}
 

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

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

package/components/block/controls/props/{Switch.svelte → Toggle.svelte}

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

package/components/block/controls/props/{Switch.svelte.d.ts → Toggle.svelte.d.ts}

@@ -3,7 +3,7 @@ import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: boolean | undefined;
-        info: Unionized<PropType<"switch">>;
+        info: Unionized<PropType<"toggle">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;
@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+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/GroupHeader.svelte

@@ -1,4 +1,5 @@
 <script>import Name from "./Name.svelte";
+import Toggle from "svelte-toggle";
 export let name;
 export let depth;
 export let checked;
@@ -22,9 +23,7 @@ const flip = () => {
             {depth}
         />
         <div class="value">-</div>
-        <div>
-            <input type="checkbox" {disabled} bind:checked on:click={(e) => e.stopPropagation()} />
-        </div>
+        <div><Toggle bind:toggled={checked} {disabled} hideLabel small on:click={e => e.stopPropagation()}/></div>
     </div>
 {/if}
 

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

@@ -6,6 +6,6 @@ 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<"toggle">>): boolean;
 export declare function defaulter(i: Unionized<PropType<"color">>): string;
 export declare function defaulter(i: Prop): ValueType;

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

@@ -18,7 +18,7 @@ export function defaulter(i) {
             return 0;
         case "range":
             return getMin(i);
-        case "switch":
+        case "toggle":
         default:
             return false;
     }

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) => "number" | "object" | "select" | "text" | "switch" | "range" | "tuple" | "color";
+export declare const getType: (info: Prop) => "number" | "object" | "select" | "toggle" | "text" | "range" | "tuple" | "color";
 export declare const getFormat: (info: Unionized<PropType<"color">>) => import("../../types").ColorFormat;
 export declare const getName: (info: Prop) => string;
 export declare const addName: (name: string, info: NonNamedProp) => Prop;

package/components/block/controls/types.d.ts

@@ -1,4 +1,4 @@
-type Types = "text" | "color" | "number" | "select" | "range" | "switch" | "tuple" | "object";
+type Types = "text" | "color" | "number" | "select" | "range" | "toggle" | "tuple" | "object";
 
 type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
 
@@ -16,7 +16,7 @@ export type PropType<T extends Types> =
         [ name: string, type: T ],
         { name: string; type: T; }
     ]
-    : T extends "switch" ? [
+    : T extends "toggle" ? [
         [ name: string, type: T ],
         { name: string; type: T; }
     ]
@@ -54,8 +54,8 @@ export type Prop =
     | { name: string; type: "color"; format: ColorFormat; }
     | [ name: string, type: "number" ]
     | { name: string; type: "number"; }
-    | [ name: string, type: "switch" ]
-    | { name: string; type: "switch"; }
+    | [ name: string, type: "toggle" ]
+    | { name: string; type: "toggle"; }
     | [ name: string, type: "select", values: string[] ]
     | { name: string; type: "select"; values: string[]; }
     | [ name: string, type: "range", min: number, max: number, step: number ]
@@ -75,8 +75,8 @@ export type NonNamedProp =
     | { type: "color"; format: ColorFormat; }
     | [ type: "number" ]
     | { type: "number"; }
-    | [ type: "switch" ]
-    | { type: "switch"; }
+    | [ type: "toggle" ]
+    | { type: "toggle"; }
     | [ type: "select", values: string[] ]
     | { type: "select"; values: string[]; }
     | [ type: "range", min: number, max: number, step: number ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.53",
+  "version": "0.2.54",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -32,6 +32,7 @@
   ],
   "type": "module",
   "dependencies": {
+    "svelte-toggle": "^3.1.0",
     "vanilla-picker": "^2.12.1"
   },
   "exports": {