@nil-/doc 0.2.51 → 0.2.52

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @nil-/doc
 
+## 0.2.52
+
+### Patch Changes
+
+-   [doc][fix] fix layout scrollable sections ([#90](https://github.com/njaldea/mono/pull/90))
+
+-   [doc][patch] restructure code ([#90](https://github.com/njaldea/mono/pull/90))
+
+-   [doc][patch] use vannilla-color library for color picker ([#90](https://github.com/njaldea/mono/pull/90))
+    [doc][fix] removed position relative and overflow scroll for misc (controls)
+
+-   [doc][fix] content fill width/height ([#90](https://github.com/njaldea/mono/pull/90))
+
+-   [doc][new] added offset Layout.svelte and sveltekit for keeping state ([#90](https://github.com/njaldea/mono/pull/90))
+
 ## 0.2.51
 
 ### Patch Changes

package/components/{etc/Base.svelte → Base.svelte}

@@ -1,23 +1,22 @@
-<script>export let dark = true;
+<script>export let dark = false;
+export let fill = false;
 </script>
 
-<div class:dark>
+<div class:dark class:fill>
     <slot />
 </div>
 
+<!-- prettier-ignore -->
 <style>
     @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
 
     div {
-        width: 100%;
-        height: 100%;
         font-family: "Fira Code", "Courier New", Courier, monospace;
+    }
 
-        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.07));
-        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.822));
-        --i-nil-doc-nav-selected-color: var(--nil-doc-nav-selected-color, black);
-
-        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
+    .fill {
+        width: 100%;
+        height: 100%;
     }
 
     div {
@@ -41,10 +40,10 @@
     div.dark {
         --i-nil-doc-color: var(--nil-doc-color, hsl(0, 0%, 80%));
         --i-nil-doc-color-scheme: var(--nil-doc-color-scheme, dark);
-    
+
         --i-nil-doc-bg-color: var(--nil-doc-bg-color, hsl(210, 6%, 7%));
         --i-nil-doc-content-outline-color: var(--nil-doc-content-outline-color, hsla(0, 0%, 100%, 0.3));
-    
+
         --i-nil-doc-block-bg-color: var(--nil-doc-block-bg-color, hsla(200, 4%, 7%, 0.3));
         --i-nil-doc-block-outline-color: var(--nil-doc-block-outline-color, hsla(0, 0%, 1000%, 0.3));
 
@@ -55,4 +54,12 @@
         --i-nil-doc-controls-s: var(--nil-doc-controls-s, hsl(213, 26%, 11%));
         --i-nil-doc-controls-hover: var(--nil-doc-controls-hover, hsl(203, 100%, 15%));
     }
+
+    div {
+        --i-nil-doc-nav-hovered: var(--nil-doc-nav-hovered, hsla(203, 98%, 50%, 0.1));
+        --i-nil-doc-nav-page-hovered: var(--nil-doc-nav-page-hovered, hsla(203, 98%, 50%, 0.5));
+        --i-nil-doc-nav-selected: var(--nil-doc-nav-selected, hsla(203, 98%, 50%, 0.85));
+
+        --i-nil-doc-transition-time: var(--nil-doc-transition-time, 350ms);
+    }
 </style>

package/components/{etc/Base.svelte.d.ts → Base.svelte.d.ts}

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         dark?: boolean | undefined;
+        fill?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/block/Block.svelte

@@ -5,7 +5,7 @@
   initControlsState,
   initOrientation
 } from "./context";
-import Base from "../etc/Base.svelte";
+import Base from "../Base.svelte";
 import { getTheme, initTheme } from "../context";
 import Button from "./icons/Button.svelte";
 import Position from "./icons/Position.svelte";
@@ -51,7 +51,7 @@ const cycleMode = () => {
 -->
 
 <Base dark={$dark}>
-    <div class="block" class:columns={$columns} class:dark={$dark}>
+    <div class="relative">
         <div class="buttons">
             <Button scale on:click={cycleMode} title={$state.mode}>
                 <ControlView mode={$state.mode} />
@@ -60,14 +60,21 @@ const cycleMode = () => {
                 <Position position={$state.position} />
             </Button>
         </div>
+    </div>
+    <div class="block" class:columns={$columns} class:dark={$dark}>
         <slot />
     </div>
 </Base>
 
 <style>
+    .relative {
+        z-index: 10;
+        position: relative;
+    }
+
     .block {
         display: grid;
-        border-radius: 0.3125rem;
+        border-radius: 0.5rem;
         grid-auto-rows: 1fr;
         grid-auto-columns: auto;
         grid-auto-flow: row;
@@ -75,13 +82,11 @@ const cycleMode = () => {
         min-width: 10rem;
 
         padding: 1.75rem 0.2rem 0.5rem 0.2rem;
-        gap: 0.1875rem;
-        position: relative;
     }
 
     .buttons {
         position: absolute;
-        width: calc(1.75rem * 2);
+        width: 3.5rem;
         height: 1.75rem;
         right: 1rem;
         top: 0rem;
@@ -99,7 +104,7 @@ const cycleMode = () => {
         color: var(--i-nil-doc-color);
         color-scheme: var(--i-nil-doc-color-scheme);
         background-color: var(--i-nil-doc-block-bg-color);
-        box-shadow: 0px 0px 5px 0px var(--i-nil-doc-block-outline-color);
+        box-shadow: 0 0 0.5rem 0 var(--i-nil-doc-block-outline-color);
         outline: 1px solid var(--i-nil-doc-block-outline-color);
         transition: color var(--i-nil-doc-transition-time),
             background-color var(--i-nil-doc-transition-time);

package/components/block/Instance.svelte

@@ -36,7 +36,7 @@ let handlers = {};
         {/if}
     </div>
     {#if expanded}
-        <div class="misc scrollable">
+        <div class="misc">
             <Props
                 infos={$controls.props}
                 bind:values={bound}
@@ -63,10 +63,6 @@ let handlers = {};
 </div>
 
 <style>
-    .instance {
-        overflow: hidden;
-    }
-
     .instance.scale {
         transition: transform var(--i-nil-doc-transition-time);
     }
@@ -77,23 +73,23 @@ let handlers = {};
 
     .cside {
         display: grid;
-        grid-template-columns: 1fr 550px;
+        grid-template-columns: 1fr 35rem;
     }
 
     .content {
-        min-height: 100px;
-        border-radius: 0.3125rem;
+        min-height: 6.25rem;
+        border-radius: 0.5rem;
     }
 
     div:not(.cside) > .misc {
-        border-bottom-left-radius: 0.3125rem;
-        border-bottom-right-radius: 0.3125rem;
+        border-bottom-left-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
         user-select: none;
     }
 
     .cside > .misc {
-        border-top-right-radius: 0.3125rem;
-        border-bottom-right-radius: 0.3125rem;
+        border-top-right-radius: 0.5rem;
+        border-bottom-right-radius: 0.5rem;
         user-select: none;
     }
 
@@ -102,19 +98,6 @@ let handlers = {};
         border: 1px solid var(--i-nil-doc-block-outline-color);
     }
 
-    /* scrollable */
-    .scrollable {
-        overflow: scroll;
-        /* Firefox */
-        scrollbar-width: none;
-        /* IE and Edge */
-        -ms-overflow-style: none;
-    }
-
-    .scrollable::-webkit-scrollbar {
-        display: none;
-    }
-
     /* colors */
     .instance {
         transition: background-color 350ms;

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

@@ -1,7 +1,3 @@
-<script>import { getTheme } from "../../../../context";
-const dark = getTheme();
-</script>
-
 <!--
     <div> this component
         <div> Header
@@ -15,14 +11,13 @@ const dark = getTheme();
         ...
     </div>
 -->
-<div class:dark={$dark}>
+<div>
     <slot />
 </div>
 
 <style>
     div {
         display: grid;
-        overflow: hidden;
         height: 22rem;
         min-width: 31.25rem;
         grid-auto-rows: 2rem;

package/components/block/controls/events/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/Color.svelte

@@ -1,6 +1,41 @@
-<script>import { getName } from "./misc/utils";
+<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;
@@ -8,6 +43,26 @@ 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>
@@ -15,7 +70,17 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div><input type="color" bind:value={ivalue} disabled={!enabled || disabled} /></div>
+        <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/Object.svelte

@@ -20,7 +20,7 @@ $:
     <Component
         info={v}
         bind:value={ivalue[getName(v)]}
-        depth={depth + 10}
+        depth={depth + 1}
         disabled={!enabled || disabled}
         visible={visible && expand && enabled && !disabled}
     />

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

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

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

@@ -50,7 +50,7 @@ $:
         width: 100%;
         display: grid;
         grid-template-columns: 4rem 1fr;
-        gap: 0.3125rem;
+        gap: 0.25rem;
         position: relative;
         box-sizing: border-box;
     }

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

@@ -20,7 +20,7 @@ $:
     <Component
         info={addName(`${i}`, v)}
         bind:value={ivalue[i]}
-        depth={depth + 10}
+        depth={depth + 1}
         disabled={!enabled || disabled}
         visible={visible && expand && enabled && !disabled}
     />

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,10 +17,10 @@ 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;
     }
 
@@ -28,8 +28,8 @@ export let expand = void 0;
         display: flex;
         flex-direction: column;
         justify-content: center;
-        height: 15px;
-        width: 15px;
+        height: 1rem;
+        width: 1rem;
         transition: transform var(--i-nil-doc-transition-time);
     }
 

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,14 +13,13 @@ const dark = getTheme();
         ...
     </div>
 -->
-<div class:dark={$dark}>
+<div>
     <slot />
 </div>
 
 <style>
     div {
         display: grid;
-        overflow: hidden;
         min-width: 31.25rem;
         grid-auto-rows: 2rem;
         box-sizing: border-box;

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

@@ -7,4 +7,5 @@ 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;

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

@@ -11,7 +11,7 @@ export function defaulter(i) {
         case "text":
             return "";
         case "color":
-            return "";
+            return "#ffffffff";
         case "select":
             return getValues(i)[0] ?? "";
         case "number":

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

@@ -5,7 +5,8 @@ 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" | "color" | "switch" | "range" | "tuple";
+export declare const getType: (info: Prop) => "number" | "object" | "select" | "text" | "switch" | "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;
 export {};

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

@@ -17,6 +17,12 @@ export const getType = (info) => {
     }
     return info.type;
 };
+export const getFormat = (info) => {
+    if (info instanceof Array) {
+        return info[2];
+    }
+    return info.format;
+};
 export const getName = (info) => {
     if (info instanceof Array) {
         return info[0];

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

@@ -1,5 +1,7 @@
 type Types = "text" | "color" | "number" | "select" | "range" | "switch" | "tuple" | "object";
 
+type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
+
 // prettier-ignore
 export type PropType<T extends Types> =
     T extends "text" ? [
@@ -7,8 +9,8 @@ export type PropType<T extends Types> =
         { name: string; type: T; }
     ]
     : T extends "color" ? [
-        [ name: string, type: T ],
-        { name: string; type: T; }
+        [ name: string, type: T, format: ColorFormat ],
+        { name: string; type: T; format: ColorFormat; }
     ]
     : T extends "number" ? [
         [ name: string, type: T ],
@@ -48,8 +50,8 @@ export type Unionized<T extends PropTyoe> = T[number];
 export type Prop =
     | [ name: string, type: "text" ]
     | { name: string; type: "text"; }
-    | [ name: string, type: "color" ]
-    | { name: string; type: "color"; }
+    | [ name: string, type: "color", format: ColorFormat ]
+    | { name: string; type: "color"; format: ColorFormat; }
     | [ name: string, type: "number" ]
     | { name: string; type: "number"; }
     | [ name: string, type: "switch" ]
@@ -69,8 +71,8 @@ export type Prop =
 export type NonNamedProp =
     | [ type: "text" ]
     | { type: "text"; }
-    | [ type: "color" ]
-    | { type: "color"; }
+    | [ type: "color", format: ColorFormat ]
+    | { type: "color"; format: ColorFormat; }
     | [ type: "number" ]
     | { type: "number"; }
     | [ type: "switch" ]

package/components/block/icons/ControlView.svelte

@@ -1,14 +1,30 @@
 <script context="module"></script>
 
-<script>import { tweened } from "svelte/motion";
-export let mode = "prop";
-const v = tweened(mode === "event" ? 1 : 0, { duration: 150 });
-$:
-  $v = mode === "event" ? 1 : 0;
+<script>export let mode = "prop";
 </script>
 
 <svg viewBox="-50 -50 100 100">
     <rect width="60" height="60" x="-30" y="-30" fill="transparent" />
-    <rect height="40" width="20" x={-$v * 20} y="-20" rx="2" ry="2" fill="transparent" />
+    <rect
+        class:right={mode === "prop"}
+        class="mv"
+        height="40"
+        width="20"
+        y="-20"
+        rx="2"
+        ry="2"
+        fill="transparent"
+    />
     <polygon transform="translate(5, 0)" points="-15,-2 1,-2, 1,-6 6,0 1,6 1,2 -15,2" />
 </svg>
+
+<style>
+    .mv {
+        transition: x var(--i-nil-doc-transition-time);
+        x: -20px;
+    }
+
+    .mv.right {
+        x: 0px;
+    }
+</style>