@nil-/doc 0.2.52 → 0.2.53

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nil-/doc
 
+## 0.2.53
+
+### 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
+
 ## 0.2.52
 
 ### Patch Changes

package/components/block/Block.svelte

@@ -61,27 +61,46 @@ const cycleMode = () => {
             </Button>
         </div>
     </div>
-    <div class="block" class:columns={$columns} class:dark={$dark}>
-        <slot />
+    <div class="outer">
+        <div class="scrollable block" class:columns={$columns}>
+            <slot />
+        </div>
     </div>
 </Base>
 
 <style>
-    .relative {
-        z-index: 10;
-        position: relative;
-    }
-
     .block {
         display: grid;
-        border-radius: 0.5rem;
         grid-auto-rows: 1fr;
         grid-auto-columns: auto;
         grid-auto-flow: row;
+    }
 
+    .outer {
+        border-radius: 0.5rem;
+        padding: 1.75rem 0.2rem 0.75rem 0.2rem;
         min-width: 10rem;
+        margin: 1px;
+        outline: solid 1px white;
+    }
+
+    .scrollable {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
 
-        padding: 1.75rem 0.2rem 0.5rem 0.2rem;
+    .relative {
+        z-index: 10;
+        position: relative;
     }
 
     .buttons {
@@ -100,7 +119,7 @@ const cycleMode = () => {
         grid-auto-flow: column;
     }
 
-    .block {
+    .outer {
         color: var(--i-nil-doc-color);
         color-scheme: var(--i-nil-doc-color-scheme);
         background-color: var(--i-nil-doc-block-bg-color);
@@ -109,4 +128,8 @@ const cycleMode = () => {
         transition: color var(--i-nil-doc-transition-time),
             background-color var(--i-nil-doc-transition-time);
     }
+
+    .block {
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
+    }
 </style>

package/components/block/Instance.svelte

@@ -9,7 +9,6 @@ $:
   expanded = $controlsState.position !== "hidden";
 export let defaults = void 0;
 export let noreset = false;
-export let scale = false;
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
@@ -25,8 +24,8 @@ let handlers = {};
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
 -->
 
-<div class="instance" class:scale class:cside={expanded && "right" === $controlsState.position}>
-    <div class="content scrollable">
+<div class="instance" class:cside={expanded && "right" === $controlsState.position}>
+    <div class="content">
         {#if noreset}
             <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
         {:else}
@@ -63,12 +62,9 @@ let handlers = {};
 </div>
 
 <style>
-    .instance.scale {
-        transition: transform var(--i-nil-doc-transition-time);
-    }
-
-    .instance.scale:hover {
-        transform: scale(1.015);
+    .instance {
+        width: 100%;
+        height: 100%;
     }
 
     .cside {
@@ -78,18 +74,9 @@ let handlers = {};
 
     .content {
         min-height: 6.25rem;
-        border-radius: 0.5rem;
     }
 
-    div:not(.cside) > .misc {
-        border-bottom-left-radius: 0.5rem;
-        border-bottom-right-radius: 0.5rem;
-        user-select: none;
-    }
-
-    .cside > .misc {
-        border-top-right-radius: 0.5rem;
-        border-bottom-right-radius: 0.5rem;
+    .misc {
         user-select: none;
     }
 
@@ -100,7 +87,7 @@ let handlers = {};
 
     /* colors */
     .instance {
-        transition: background-color 350ms;
+        transition: background-color var(--i-nil-doc-transition-time);
         color: var(--i-nil-doc-color);
         background-color: var(--i-nil-doc-bg-color);
     }

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

@@ -3,7 +3,6 @@ declare class __sveltets_Render<PropArgs> {
     props(): {
         defaults?: PropArgs | undefined;
         noreset?: boolean | undefined;
-        scale?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -8,7 +8,6 @@ const orientation = getOrientation();
 export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
-export let scale = false;
 $:
   $defaultsStore = defaults ?? {};
 $:
@@ -28,7 +27,6 @@ const cast = (t) => t;
     <Instance
         defaults={resolveArgs($defaultsStore, param.values)}
         {noreset}
-        {scale}
         let:key
         let:props
         let:events

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

@@ -4,7 +4,6 @@ declare class __sveltets_Render<Args> {
         defaults?: Args | undefined;
         noreset?: boolean | undefined;
         columns?: boolean | undefined;
-        scale?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/{props/misc/Styler.svelte → Styler.svelte}

@@ -1,19 +1,7 @@
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div>
+<script>export let type;
+</script>
+
+<div class:props={type === "props"} class:events={type === "events"}>
     <slot />
 </div>
 
@@ -25,6 +13,10 @@
         box-sizing: border-box;
     }
 
+    div.events {
+        height: 22rem;
+    }
+
     div :global(*),
     div :global(*::before),
     div :global(*::after) {
@@ -34,15 +26,23 @@
 
     div > :global(div) {
         display: grid;
+    }
+
+    div.props > :global(div) {
         grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
     }
 
+    div.events > :global(div) {
+        grid-template-columns: 2fr 3fr;
+        align-items: center;
+    }
+
     div > :global(div:first-child) {
         font-weight: bold;
         place-items: center;
     }
 
-    div > :global(div > div:not(:first-child)) {
+    div.props > :global(div > div:not(:first-child)) {
         display: grid;
         place-items: center;
     }
@@ -50,7 +50,6 @@
     div > :global(div > div:not(:first-child) > *) {
         width: 100%;
         height: 80%;
-        font-size: 1rem;
     }
 
     /* colors */

package/components/block/controls/{events/misc/Styler.svelte.d.ts → Styler.svelte.d.ts}

@@ -1,21 +1,7 @@
-/** @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: {
-        [x: string]: never;
+        type: "props" | "events";
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +10,9 @@ 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/events/Events.svelte

@@ -1,4 +1,4 @@
-<script>import Styler from "./misc/Styler.svelte";
+<script>import Styler from "../Styler.svelte";
 export let visible;
 export let events;
 export let handlers;
@@ -41,7 +41,7 @@ $:
 </script>
 
 {#if visible}
-    <Styler>
+    <Styler type={"events"}>
         <slot />
         {#each history as { count, detail, name }, i (i)}
             <div>

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

@@ -1,4 +1,5 @@
-<script context="module">const colorSetter = (format, color) => {
+<script context="module">import Picker from "vanilla-picker";
+const colorSetter = (format, color) => {
   switch (format) {
     case "hex":
       return color.hex.substring(0, 7);
@@ -14,28 +15,11 @@
       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;
@@ -43,21 +27,25 @@ export let disabled = false;
 export let visible = false;
 let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
-const action = (div, format) => {
+const action = (d, format) => {
+  d.style.borderColor = ivalue;
   const picker = new Picker({
-    parent: div,
+    parent: d,
     popup: "left",
-    editorFormat: formatter(format),
+    editorFormat: format.substring(0, 3),
     editor: false,
     alpha: format.length === 4,
-    onChange: (color) => ivalue = colorSetter(getFormat(info), color),
+    onChange: (color) => {
+      ivalue = colorSetter(getFormat(info), color);
+      d.style.borderColor = ivalue;
+    },
     color: ivalue
   });
   return {
     update: (format2) => {
       picker.setOptions({
         alpha: format2.length === 4,
-        editorFormat: formatter(format2)
+        editorFormat: format2.substring(0, 3)
       });
     },
     destroy: () => picker.destroy()
@@ -70,17 +58,37 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div>
-            <button use:action={getFormat(info)} disabled={!enabled || disabled}>
-                {value}
-            </button>
-        </div>
+        <button use:action={getFormat(info)} disabled={!enabled || disabled}>
+            {ivalue}
+        </button>
         <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
     </div>
 {/if}
 
 <style>
-    div > div > button {
-        font-size: 0.7rem;
+    button {
+        font-size: 0.6rem;
+        border-top-width: 1px;
+        border-bottom-width: 1px;
+        border-left-width: 10px;
+        border-right-width: 10px;
+        border-style: solid;
+        background-color: var(--i-nil-doc-bg-color);
+        outline: 1px solid gray;
+        margin-top: 3px;
+        margin-bottom: 3px;
+    }
+
+    button :global(.picker_wrapper),
+    button :global(.picker_arrow),
+    button :global(.picker_arrow::before),
+    button :global(.picker_arrow::after) {
+        background-color: var(--i-nil-doc-bg-color) !important;
+    }
+
+    button :global(.picker_done > button) {
+        background-image: initial;
+        background-color: var(--i-nil-doc-bg-color);
+        color: var(--i-nil-doc-color);
     }
 </style>

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

@@ -1,12 +1,12 @@
 <script>import Component from "./Component.svelte";
-import Styler from "./misc/Styler.svelte";
+import Styler from "../Styler.svelte";
 import { getName } from "./misc/utils";
 export let infos;
 export let values;
 export let visible;
 </script>
 
-<Styler>
+<Styler type={"props"}>
     {#if visible}
         <slot />
     {/if}

package/components/block/icons/Position.svelte

@@ -14,7 +14,8 @@
     }
 
     rect:not(:first-child) {
-        transition: height 350ms, x 350ms, y 350ms;
+        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;

package/components/layout/Scrollable.svelte

@@ -3,7 +3,6 @@
 </div>
 
 <style>
-    /* scrollable */
     div {
         width: 100%;
         height: 100%;

package/components/layout/icons/Theme.svelte

@@ -46,22 +46,22 @@ const index = indexer++;
     }
 
     svg {
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
         transform: rotate(40deg);
     }
 
     svg > g {
-        transition: opacity 350ms;
+        transition: opacity var(--i-nil-doc-transition-time);
         opacity: 0;
     }
 
     svg > mask > circle {
-        transition: cy 350ms;
+        transition: cy var(--i-nil-doc-transition-time);
         cy: -8px;
     }
 
     svg > circle {
-        transition: r 350ms;
+        transition: r var(--i-nil-doc-transition-time);
         r: 10px;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.52",
+  "version": "0.2.53",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"

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

@@ -1,52 +0,0 @@
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div>
-    <slot />
-</div>
-
-<style>
-    div {
-        display: grid;
-        height: 22rem;
-        min-width: 31.25rem;
-        grid-auto-rows: 2rem;
-    }
-
-    div > :global(div) {
-        display: grid;
-        grid-template-columns: 2fr 3fr;
-        align-items: center;
-    }
-
-    div > :global(div:first-child) {
-        font-weight: bold;
-        justify-items: center;
-    }
-
-    /* colors */
-    div {
-        transition: background-color var(--i-nil-doc-transition-time);
-        background-repeat: repeat;
-        background-size: 100% 4rem;
-        background-image: linear-gradient(
-            to bottom,
-            var(--i-nil-doc-controls-p) 2rem,
-            var(--i-nil-doc-controls-s) 2rem
-        );
-    }
-
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: var(--i-nil-doc-controls-hover);
-    }
-</style>

package/components/block/controls/props/misc/Styler.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @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: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};