@nil-/doc 0.2.50 → 0.2.52

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

@@ -1,70 +1,50 @@
+import { getType, getValues, getMin } from "./utils";
 // eslint-disable-next-line func-style
-export function getDefault(i) {
-    if (i instanceof Array) {
-        switch (i[1]) {
-            case "object":
-                // eslint-disable-next-line no-use-before-define
-                return getObjectDefaults(i);
-            case "tuple":
-                // eslint-disable-next-line no-use-before-define
-                return getTupleDefaults(i);
-            case "text":
-                return "";
-            case "select":
-                return i[2].length > 0 ? i[2][0] : "";
-            case "number":
-                return 0;
-            case "range":
-                return i[2];
-            case "switch":
-            default:
-                return false;
-        }
-    }
-    else {
-        switch (i.type) {
-            case "object":
-                // eslint-disable-next-line no-use-before-define
-                return getObjectDefaults(i);
-            case "tuple":
-                // eslint-disable-next-line no-use-before-define
-                return getTupleDefaults(i);
-            case "text":
-                return "";
-            case "select":
-                return i.values.length > 0 ? i.values[0] : "";
-            case "number":
-                return 0;
-            case "range":
-                return i.min;
-            case "switch":
-            default:
-                return false;
-        }
+export function defaulter(i) {
+    switch (getType(i)) {
+        case "object":
+            // eslint-disable-next-line no-use-before-define
+            return defaulterO(i);
+        case "tuple":
+            // eslint-disable-next-line no-use-before-define
+            return defaulterT(i);
+        case "text":
+            return "";
+        case "color":
+            return "#ffffffff";
+        case "select":
+            return getValues(i)[0] ?? "";
+        case "number":
+            return 0;
+        case "range":
+            return getMin(i);
+        case "switch":
+        default:
+            return false;
     }
 }
-const getObjectDefaults = (info) => {
+const defaulterO = (info) => {
     const ret = {};
     const values = info instanceof Array ? info[2] : info.values;
     for (const v of values) {
         if (v instanceof Array) {
-            ret[v[0]] = getDefault(v);
+            ret[v[0]] = defaulter(v);
         }
         else {
-            ret[v.name] = getDefault(v);
+            ret[v.name] = defaulter(v);
         }
     }
     return ret;
 };
-const getTupleDefaults = (info) => {
+const defaulterT = (info) => {
     const ret = [];
     const values = info instanceof Array ? info[2] : info.values;
     for (const [i, v] of values.entries()) {
         if (v instanceof Array) {
-            ret.push(getDefault([`${i}`, ...v]));
+            ret.push(defaulter([`${i}`, ...v]));
         }
         else {
-            ret.push(getDefault({ name: `${i}`, ...v }));
+            ret.push(defaulter({ name: `${i}`, ...v }));
         }
     }
     return ret;

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

@@ -0,0 +1,12 @@
+import type { Detailed, Unionized, PropType, Prop, NonNamedProp } from "../../types";
+type TypesWithValue = "object" | "tuple" | "select";
+type Values<T extends TypesWithValue> = Detailed<PropType<T>>["values"];
+export declare function getValues(info: Unionized<PropType<"select">>): Values<"select">;
+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 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

@@ -0,0 +1,37 @@
+// eslint-disable-next-line func-style
+export function getValues(info) {
+    if (info instanceof Array) {
+        return info[2];
+    }
+    return info.values;
+}
+export const getMin = (info) => {
+    if (info instanceof Array) {
+        return info[2];
+    }
+    return info.min;
+};
+export const getType = (info) => {
+    if (info instanceof Array) {
+        return info[1];
+    }
+    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];
+    }
+    return info.name;
+};
+export const addName = (name, info) => {
+    if (info instanceof Array) {
+        return [name, ...info];
+    }
+    return { ...info, name };
+};

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

@@ -1,4 +1,6 @@
-type Types = "text" | "number" | "select" | "range" | "switch" | "tuple" | "object";
+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> =
@@ -6,6 +8,10 @@ export type PropType<T extends Types> =
         [ name: string, type: T ],
         { name: string; type: T; }
     ]
+    : T extends "color" ? [
+        [ name: string, type: T, format: ColorFormat ],
+        { name: string; type: T; format: ColorFormat; }
+    ]
     : T extends "number" ? [
         [ name: string, type: T ],
         { name: string; type: T; }
@@ -44,6 +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", format: ColorFormat ]
+    | { name: string; type: "color"; format: ColorFormat; }
     | [ name: string, type: "number" ]
     | { name: string; type: "number"; }
     | [ name: string, type: "switch" ]
@@ -60,9 +68,11 @@ export type Prop =
     | { name: string; type: "object"; values: Prop[]; };
 
 // prettier-ignore
-type NonNamedProp =
+export type NonNamedProp =
     | [ type: "text" ]
     | { type: "text"; }
+    | [ type: "color", format: ColorFormat ]
+    | { type: "color"; format: ColorFormat; }
     | [ type: "number" ]
     | { type: "number"; }
     | [ type: "switch" ]

package/components/block/icons/Button.svelte

@@ -0,0 +1,30 @@
+<script>
+    export let title = "";
+    export let scale = false;
+</script>
+
+<div on:click on:keypress {title} class:scale>
+    <slot />
+</div>
+
+<style>
+    div {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        place-items: center;
+        transition: transform var(--i-nil-doc-transition-time);
+    }
+
+    div.scale:hover {
+        transform: scale(1.5);
+    }
+
+    div > :global(svg) {
+        width: 100%;
+        height: 100%;
+        stroke-width: 3;
+        stroke: currentColor;
+        fill: currentColor;
+    }
+</style>

package/components/block/icons/Button.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  ButtonProps */
+/** @typedef {typeof __propDef.events}  ButtonEvents */
+/** @typedef {typeof __propDef.slots}  ButtonSlots */
+export default class Button extends SvelteComponentTyped<{
+    title?: string | undefined;
+    scale?: boolean | undefined;
+}, {
+    click: MouseEvent;
+    keypress: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        scale?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/block/icons/ControlView.svelte

@@ -0,0 +1,30 @@
+<script context="module"></script>
+
+<script>export let mode = "prop";
+</script>
+
+<svg viewBox="-50 -50 100 100">
+    <rect width="60" height="60" x="-30" y="-30" 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>

package/components/block/icons/ControlView.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "prop" | "event" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ControlViewProps = typeof __propDef.props;
+export type ControlViewEvents = typeof __propDef.events;
+export type ControlViewSlots = typeof __propDef.slots;
+export default class ControlView extends SvelteComponentTyped<ControlViewProps, ControlViewEvents, ControlViewSlots> {
+}
+export {};

package/components/block/icons/Position.svelte

@@ -0,0 +1,29 @@
+<script>export let position = "hidden";
+</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)" />
+</svg>
+
+<style>
+    svg {
+        stroke-width: 3;
+        fill: currentColor;
+    }
+
+    rect:not(:first-child) {
+        transition: height 350ms, x 350ms, y 350ms;
+        width: 60px;
+        height: 0px;
+        x: -30px;
+        y: 30px;
+    }
+
+    rect:not(:first-child).show {
+        height: 20px;
+        x: -30px;
+        y: 10px;
+    }
+</style>

package/components/block/icons/Position.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        position?: "bottom" | "right" | "hidden" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PositionProps = typeof __propDef.props;
+export type PositionEvents = typeof __propDef.events;
+export type PositionSlots = typeof __propDef.slots;
+export default class Position extends SvelteComponentTyped<PositionProps, PositionEvents, PositionSlots> {
+}
+export {};

package/components/{etc → layout}/Container.svelte

@@ -1,8 +1,6 @@
 <script>import { writable } from "svelte/store";
 import { tweened } from "svelte/motion";
 import { createDraggable } from "./action";
-import { getTheme } from "../context";
-const dark = getTheme();
 export let vertical = false;
 export let offset = 0;
 export let b = false;
@@ -18,16 +16,17 @@ const update = (limit, value) => {
   offset = Math.max(Math.min(value, span - limit), limit);
 };
 const off = tweened(offset, { duration: 50 });
+const min = 4;
 let last = [];
 $:
-  update(10, $position);
+  update(min, $position);
 $:
   $off = offset;
 $:
-  style = !b ? `auto 5px ${$off}px` : `${$off}px 5px auto`;
+  style = !b ? `auto 0.2rem ${$off}px` : `${$off}px 0.2rem auto`;
 const moving = writable(false);
 const addLast = (v) => {
-  if (v > 10) {
+  if (v > min) {
     if (last.length < 2) {
       last = [...last, v];
     } else {
@@ -36,18 +35,18 @@ const addLast = (v) => {
   }
 };
 const dbltap = () => {
-  if ($off > 10) {
+  if ($off > min) {
     addLast(offset);
-    offset = 10;
+    offset = min;
   } else if (last.length > 0) {
     offset = last.pop();
   }
 };
 const check = (v, flag, s) => {
   if (flag) {
-    return v < s - 10;
+    return v < s - min;
   } else {
-    return v > 10;
+    return v > min;
   }
 };
 </script>
@@ -56,7 +55,6 @@ const check = (v, flag, s) => {
     class="container"
     class:vertical
     class:b
-    class:dark={$dark}
     class:moving={$moving}
     bind:clientWidth={width}
     bind:clientHeight={height}
@@ -72,6 +70,7 @@ const check = (v, flag, s) => {
         <div class="divider">
             <div
                 class="overlay"
+                title={`Collapse ${vertical ? (b ? "left" : "right") : b ? "top" : "bottom"}`}
                 use:draggable={{
                     reset: () => offset,
                     reversed: !b,
@@ -91,10 +90,6 @@ const check = (v, flag, s) => {
 </div>
 
 <style>
-    div {
-        box-sizing: border-box;
-    }
-
     .container {
         width: 100%;
         height: 100%;
@@ -129,62 +124,54 @@ const check = (v, flag, s) => {
 
     .container > .divider > .overlay {
         width: 100%;
-        height: 20px;
+        height: 1.5rem;
         cursor: ns-resize;
         transform: translateY(-50%);
     }
 
     .container.vertical > .divider > .overlay {
-        width: 20px;
+        width: 1.5rem;
         height: 100%;
         cursor: ew-resize;
         transform: translateX(-50%);
     }
 
     /* colors */
-    .container {
-        --color-p: hsl(0, 2%, 70%);
-        --color-s: hsl(0, 0%, 0%);
-    }
-
-    .container.dark {
-        --color-p: hsl(0, 2%, 40%);
-        --color-s: hsl(0, 0%, 100%);
-    }
-
     .divider {
-        transition: border-color 350ms, background-color 350ms;
+        transition: border-color var(--i-nil-doc-transition-time),
+            background-color var(--i-nil-doc-transition-time);
+        --width: 0.0625rem;
     }
 
     .container:not(.vertical) > .divider {
-        border-bottom: var(--color-p) solid 2.5px;
-        border-top: var(--color-p) solid 2.5px;
-        background-color: var(--color-p);
+        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);
     }
 
     .container.vertical > .divider {
-        border-right: var(--color-p) solid 2.5px;
-        border-left: var(--color-p) solid 2.5px;
-        background-color: var(--color-p);
+        border-right: var(--i-nil-doc-container-p) solid var(--width);
+        border-left: var(--i-nil-doc-container-p) solid var(--width);
+        background-color: var(--i-nil-doc-container-p);
     }
 
     .container:not(.b):not(.vertical) > .divider:hover,
     .container.moving:not(.b):not(.vertical) > .divider {
-        border-bottom: var(--color-s) solid 2.5px;
+        border-bottom: var(--i-nil-doc-container-s) solid var(--width);
     }
 
     .container.b:not(.vertical) > .divider:hover,
     .container.moving.b:not(.vertical) > .divider {
-        border-top: var(--color-s) solid 2.5px;
+        border-top: var(--i-nil-doc-container-s) solid var(--width);
     }
 
     .container:not(.b).vertical > .divider:hover,
     .container.moving:not(.b).vertical > .divider {
-        border-right: var(--color-s) solid 2.5px;
+        border-right: var(--i-nil-doc-container-s) solid var(--width);
     }
 
     .container.vertical.b > .divider:hover,
     .container.moving.vertical.b > .divider {
-        border-left: var(--color-s) solid 2.5px;
+        border-left: var(--i-nil-doc-container-s) solid var(--width);
     }
 </style>

package/components/layout/Content.svelte

@@ -0,0 +1,23 @@
+<div>
+    <slot />
+</div>
+
+<style>
+    div {
+        display: flex;
+        box-sizing: border-box;
+        margin: 0.5rem;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        width: min-content;
+        height: min-content;
+        min-width: calc(100% - 1rem);
+        min-height: calc(100% - 1rem);
+    }
+
+    /* color */
+    div {
+        border: solid 1px var(--i-nil-doc-content-outline-color);
+        box-shadow: 0 0 0.5rem 0 var(--i-nil-doc-content-outline-color);
+    }
+</style>

package/components/layout/Content.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ContentProps */
+/** @typedef {typeof __propDef.events}  ContentEvents */
+/** @typedef {typeof __propDef.slots}  ContentSlots */
+export default class Content extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ContentProps = typeof __propDef.props;
+export type ContentEvents = typeof __propDef.events;
+export type ContentSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};