@nil-/doc 0.2.54 → 0.2.56

package/CHANGELOG.md

@@ -1,11 +1,28 @@
 # @nil-/doc
 
+## 0.2.56
+
+### Patch Changes
+
+-   [doc][patch] use consolas as default font ([#98](https://github.com/njaldea/mono/pull/98))
+
+## 0.2.55
+
+### Patch Changes
+
+-   [all][fix] separate eslint configuration ([#96](https://github.com/njaldea/mono/pull/96))
+
+-   [doc][docu] fix switch -> toggle ([#96](https://github.com/njaldea/mono/pull/96))
+
+-   [all][patch] update deps ([#96](https://github.com/njaldea/mono/pull/96))
+
+-   [doc][new] added special prop control "button" ([#96](https://github.com/njaldea/mono/pull/96))
+
 ## 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
@@ -13,22 +30,18 @@
 ### Patch Changes
 
 -   [doc][break] removed "scale" prop ([#92](https://github.com/njaldea/mono/pull/92))
-    [doc][fix] better block scrollable handling
-    [doc][fix] better style to vanilla-color popup
+-   [doc][fix] better block scrollable handling ([#92](https://github.com/njaldea/mono/pull/92))
+-   [doc][fix] better style to vanilla-color popup ([#92](https://github.com/njaldea/mono/pull/92))
 
 ## 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] removed position relative and overflow scroll for misc (controls) ([#90](https://github.com/njaldea/mono/pull/90))
 -   [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
@@ -36,21 +49,18 @@
 ### Patch Changes
 
 -   [doc][fix] components now rely on root font-size ([#88](https://github.com/njaldea/mono/pull/88))
-
 -   [doc][fix] fix object prop control ([#88](https://github.com/njaldea/mono/pull/88))
-
 -   [doc][new] block button controls ([#88](https://github.com/njaldea/mono/pull/88))
-    [doc][new] centralized custom css
-
+-   [doc][new] centralized custom css ([#88](https://github.com/njaldea/mono/pull/88))
 -   [doc][misc] change styling ([#88](https://github.com/njaldea/mono/pull/88))
-    [doc][fix] scrolling content of container
+-   [doc][fix] scrolling content of container ([#88](https://github.com/njaldea/mono/pull/88))
 
 ## 0.2.50
 
 ### Patch Changes
 
 -   [doc][new] removed default nil icon ([#86](https://github.com/njaldea/mono/pull/86))
-    [doc][new] allow override of theme icon
+-   [doc][new] allow override of theme icon ([#86](https://github.com/njaldea/mono/pull/86))
 
 ## 0.2.49
 
@@ -69,7 +79,6 @@
 ### Patch Changes
 
 -   [doc][docu] minor adjustments to documentation ([#79](https://github.com/njaldea/mono/pull/79))
-
 -   [doc][new] added support for flattened prop schema ([#79](https://github.com/njaldea/mono/pull/79))
 
 ## 0.2.46
@@ -95,7 +104,6 @@
 ### Patch Changes
 
 -   [doc][fix] disable Range.svelte tooltip when disabled ([#70](https://github.com/njaldea/mono/pull/70))
-
 -   [doc][new] added auto scroll when content of layout is only one component ([#70](https://github.com/njaldea/mono/pull/70))
 
 ## 0.2.42
@@ -115,13 +123,9 @@
 ### Patch Changes
 
 -   [doc][new] added scale flag prop for Instance/Template componen ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][patch] fixed jsdoc link for public components ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][docu] moved Sorting and Renaming section to their own pages ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][new] added placeholder to search bar ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][docu] added admonitions plugin ([#63](https://github.com/njaldea/mono/pull/63))
 
 ## 0.2.39
@@ -129,13 +133,9 @@
 ### Patch Changes
 
 -   [doc][fix] force state of navigation expand icon when filtering ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] tighter eslint ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] added tests for non-UI related code ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] moved type definition ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] enabled typescript eslint rules ([#61](https://github.com/njaldea/mono/pull/61))
 
 ## 0.2.38
@@ -199,7 +199,6 @@
 ### Patch Changes
 
 -   [doc] Added color transition in Layout ([#43](https://github.com/njaldea/mono/pull/43))
-
 -   [doc] added Instance component ([#43](https://github.com/njaldea/mono/pull/43))
 
 ## 0.2.29
@@ -207,7 +206,7 @@
 ### Patch Changes
 
 -   [doc][feature] ThemeIcon ([#41](https://github.com/njaldea/mono/pull/41))
-    [doc][feature] added top bar to separate title and other controls
+-   [doc][feature] added top bar to separate title and other controls ([#41](https://github.com/njaldea/mono/pull/41))
 
 ## 0.2.28
 

package/components/Base.svelte

@@ -8,10 +8,8 @@ export let fill = false;
 
 <!-- prettier-ignore -->
 <style>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
     div {
-        font-family: "Fira Code", "Courier New", Courier, monospace;
+        font-family: var(--nil-doc-font-family, ""), Consolas, Courier, 'Courier New', monospace;
     }
 
     .fill {

package/components/block/Controls.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Prop } from "./controls/types";
+import type { SpecialProp, Prop } from "./controls/types";
 declare const __propDef: {
     props: {
-        props?: Prop[] | undefined;
+        props?: (Prop | SpecialProp)[] | undefined;
         events?: string[] | undefined;
-        position?: "bottom" | "right" | "hidden" | undefined;
+        position?: "right" | "bottom" | "hidden" | undefined;
         mode?: "prop" | "event" | undefined;
     };
     events: {

package/components/block/Instance.svelte

@@ -42,7 +42,7 @@ let handlers = {};
                 visible={$controlsState.mode === "prop"}
             >
                 <div>
-                    <div>Properties</div>
+                    <div>Name</div>
                     <div>Value</div>
                     <div>Use</div>
                 </div>

package/components/block/context.d.ts

@@ -1,5 +1,5 @@
 import type { Writable } from "svelte/store";
-import type { Prop, Event } from "./controls/types";
+import type { SpecialProp, Prop, Event } from "./controls/types";
 import type { ValueType } from "./types";
 export type Params = {
     id: number;
@@ -12,7 +12,7 @@ export type ControlState = {
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 type Controls = {
-    props: Prop[];
+    props: (Prop | SpecialProp)[];
     events: Event[];
 };
 export declare const initControls: () => Writable<Controls>, getControls: () => Writable<Controls>;

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

@@ -0,0 +1,17 @@
+<script>import { getClick, getName } from "./misc/utils";
+export let info;
+$:
+  click = getClick(info)();
+</script>
+
+<div>
+    <button on:click={click}>{getName(info)}</button>
+</div>
+
+<style>
+    button {
+        grid-column: 1 / 4;
+        box-sizing: border-box;
+        margin: 0.15rem 0.3rem;
+    }
+</style>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Unionized, PropType } from "../types";
+declare const __propDef: {
+    props: {
+        info: Unionized<PropType<"button">>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

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

@@ -63,13 +63,13 @@ $:
                 {ivalue}
             </button>
         {/await}
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small/></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}
 
 <style>
     button {
-        font-size: 0.6rem;
+        font-size: 0.7rem;
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-left-width: 10px;

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

@@ -31,6 +31,8 @@ export let visible = false;
         <Select {info} bind:value {depth} {disabled} {visible} />
     {:else if "toggle" === type}
         <Toggle {info} bind:value {depth} {disabled} {visible} />
+    {:else if "button" === type}
+        button
     {/if}
 {:else}
     {@const type = info.type}
@@ -50,5 +52,7 @@ export let visible = false;
         <Select {info} bind:value {depth} {disabled} {visible} />
     {:else if "toggle" === type}
         <Toggle {info} bind:value {depth} {disabled} {visible} />
+    {:else if "button" === type}
+        button
     {/if}
 {/if}

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Prop } from "../types";
+import type { SpecialProp, Prop } from "../types";
 declare const __propDef: {
     props: {
         value: any;
-        info: Prop;
+        info: Prop | SpecialProp;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

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

@@ -17,6 +17,6 @@ $:
     <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><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}

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

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
-import type { Prop } from "../types";
+import type { SpecialProp, Prop } from "../types";
 declare const __propDef: {
     props: {
-        infos: Prop[];
+        infos: (SpecialProp | Prop)[];
         values: Record<string, ValueType>;
         visible: boolean;
     };

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

@@ -42,7 +42,7 @@ $:
                 disabled={!enabled || disabled}
             />
         </div>
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small/></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}
 

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

@@ -23,7 +23,7 @@ $:
                 {/each}
             </select>
         </div>
-        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small/></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}
 

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

@@ -17,6 +17,6 @@ $:
     <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><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}

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

@@ -16,7 +16,9 @@ $:
 {#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 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/misc/GroupHeader.svelte

@@ -23,7 +23,15 @@ const flip = () => {
             {depth}
         />
         <div class="value">-</div>
-        <div><Toggle bind:toggled={checked} {disabled} hideLabel small 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.js

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

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

@@ -1,12 +1,13 @@
-import type { Detailed, Unionized, PropType, Prop, NonNamedProp } from "../../types";
+import type { Detailed, Unionized, PropType, Prop, NonNamedProp, SpecialProp } 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" | "toggle" | "text" | "range" | "tuple" | "color";
+export declare const getType: (info: Prop | SpecialProp) => "number" | "object" | "select" | "toggle" | "button" | "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 getName: (info: Prop | SpecialProp) => string;
+export declare const getClick: (info: SpecialProp) => () => () => void;
 export declare const addName: (name: string, info: NonNamedProp) => Prop;
 export {};

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

@@ -29,6 +29,12 @@ export const getName = (info) => {
     }
     return info.name;
 };
+export const getClick = (info) => {
+    if (info instanceof Array) {
+        return info[2];
+    }
+    return info.click;
+};
 export const addName = (name, info) => {
     if (info instanceof Array) {
         return [name, ...info];

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

@@ -1,5 +1,13 @@
-type Types = "text" | "color" | "number" | "select" | "range" | "toggle" | "tuple" | "object";
-
+type Types =
+    | "text"
+    | "color"
+    | "number"
+    | "select"
+    | "range"
+    | "toggle"
+    | "tuple"
+    | "object"
+    | "button";
 type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
 
 // prettier-ignore
@@ -40,6 +48,10 @@ export type PropType<T extends Types> =
         // eslint-disable-next-line no-use-before-define
         { name: string; type: T; values: Prop[]; }
     ]
+    : T extends "button" ? [
+        [ name: string, type: "button", click: () => (() => void) ],
+        { name: string; type: "button"; click: () => (() => void); }
+    ]
     : never;
 
 export type Flattened<T extends PropType> = T[0];
@@ -67,6 +79,10 @@ export type Prop =
     | [ name: string, type: "object", values: Prop[] ]
     | { name: string; type: "object"; values: Prop[]; };
 
+export type SpecialProp =
+    | [name: string, type: "button", click: () => () => void]
+    | { name: string; type: "button"; click: () => () => void };
+
 // prettier-ignore
 export type NonNamedProp =
     | [ type: "text" ]

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

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        position?: "bottom" | "right" | "hidden" | undefined;
+        position?: "right" | "bottom" | "hidden" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.54",
+  "version": "0.2.56",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -8,7 +8,7 @@
   "license": "ISC",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.6",
-    "@sveltejs/kit": "^1.5.5",
+    "@sveltejs/kit": "^1.8.8",
     "@sveltejs/package": "^1.0.2",
     "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
@@ -16,8 +16,13 @@
     "svelte-check": "^2.10.3",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.26.3"
+    "vite": "^4.1.4",
+    "vitest": "^0.26.3",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-svelte3": "^4.0.0"
   },
   "peerDependencies": {
     "svelte": "^3.55.1"