@nil-/doc 0.2.17 → 0.2.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nil-/doc
 
+## 0.2.19
+
+### Patch Changes
+
+-   1dad00f: [doc][fix] removed external css. inlined css even duplicating some of them.
+
+## 0.2.18
+
+### Patch Changes
+
+-   a63dd42: [doc][fix] added tooltip for range
+
 ## 0.2.17
 
 ### Patch Changes

package/components/Layout.svelte

@@ -1,7 +1,4 @@
 <style>
-    @import "../styles/reset.css";
-    @import "../styles/scrollable.css";
-
     .layout {
         width: 100%;
         height: 100%;
@@ -16,6 +13,38 @@
         display: flex;
         flex-direction: column;
     }
+
+    /* reset block */
+    @font-face {
+        font-family: "Fira Code";
+        src: url("https://fonts.googleapis.com/css?family=Fira Code");
+    }
+
+    .reset {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+    }
+
+    .reset :global(*),
+    .reset :global(*::before),
+    .reset :global(*::after) {
+        box-sizing: inherit;
+        padding: 0px;
+        margin: 0px;
+    }
+
+    /* scrollable */
+    .scrollable {
+        overflow: scroll;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
 </style>
 
 <script>import Container from "./etc/Container.svelte";
@@ -27,10 +56,10 @@ export let sorter = null;
 export let renamer = null;
 const r = inRoot();
 </script>
-<div class="layout" class:nil-doc-reset={r}>
+<div class="layout" class:reset={r}>
     <Container offset={250} padding={250} vertical secondary>
         <svelte:fragment slot="primary">
-            <div class="content nil-doc-scrollable">
+            <div class="content scrollable">
                 <Nav
                     info={data}
                     selected={current ?? ""}
@@ -43,7 +72,7 @@ const r = inRoot();
             </div>
         </svelte:fragment>
         <svelte:fragment slot="secondary">
-            <div class="content nil-doc-scrollable">
+            <div class="content scrollable">
                 {#key current}
                     <slot name="content" />
                 {/key}

package/components/block/Block.svelte

@@ -8,17 +8,36 @@ initControlsState();
 const r = inRoot();
 </script>
 <style>
-    @import "../../styles/reset.css";
-
     div {
         display: flex;
         flex-direction: column;
         font-family: "Fira Code", "Courier New", Courier, monospace;
     }
+
+    /* reset block */
+    @font-face {
+        font-family: "Fira Code";
+        src: url("https://fonts.googleapis.com/css?family=Fira Code");
+    }
+
+    .reset {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        font-family: "Fira Code", "Courier New", Courier, monospace;
+    }
+
+    .reset :global(*),
+    .reset :global(*::before),
+    .reset :global(*::after) {
+        box-sizing: inherit;
+        padding: 0px;
+        margin: 0px;
+    }
 </style>
 
 
-<div class:nil-doc-reset={r}>
+<div class:reset={r}>
     <slot />
 </div>
 

package/components/block/Template.svelte

@@ -1,6 +1,4 @@
 <style>
-    @import "../../styles/scrollable.css";
-
     .template {
         display: flex;
         flex-direction: column;
@@ -30,6 +28,17 @@
         border-bottom-right-radius: 5px;
         user-select: none;
     }
+
+    /* scrollable */
+    .scrollable {
+        overflow: scroll;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
 </style>
 <svelte:window on:click={() => ($current = null)} />
 
@@ -77,7 +86,7 @@ const resolveArgs = (resolve);
             on:keypress={null}
         >
             {#if noreset}
-                <div class="content nil-doc-scrollable">
+                <div class="content scrollable">
                     <slot
                         id={param.id}
                         tag={param.tag}
@@ -86,7 +95,7 @@ const resolveArgs = (resolve);
                 </div>
             {:else}
                 {#key key}
-                    <div class="content nil-doc-scrollable">
+                    <div class="content scrollable">
                         <slot
                             id={param.id}
                             tag={param.tag}
@@ -96,7 +105,7 @@ const resolveArgs = (resolve);
                 {/key}
             {/if}
             {#if $controls.length > 0 && ($controlsState.expand || $current === param.id || hovered === param.id)}
-                <div class="misc nil-doc-scrollable" transition:slide|local>
+                <div class="misc scrollable" transition:slide|local>
                     <Controls infos={$controls} bind:values={param.values} />
                 </div>
             {/if}

package/components/block/controls/Range.svelte

@@ -3,17 +3,33 @@
         width: 100%;
         display: grid;
         grid-template-columns: 40px 1fr;
+        gap: 5px;
+        position: relative;
     }
 
     .input > div {
         width: 100%;
         height: 100%;
         display: grid;
-        text-align: center;
+        text-align: right;
         align-items: center;
         font-size: 0.8rem;
+        user-select: none;
         margin: auto;
     }
+
+    .tooltip {
+        width: 100%;
+        height: 100%;
+        /* top: -100%; */
+        left: -100%;
+        position: absolute;
+        visibility: hidden;
+    }
+
+    .input:hover > .tooltip {
+        visibility: visible;
+    }
 </style>
 
 <script>import { getDefault } from "./misc/defaulter";
@@ -28,7 +44,10 @@ $: value = enabled && !disabled ? ivalue : undefined;
 <div>
     <div style:padding-left={`${depth}px`}>- {info.name}</div>
     <div class="input">
-        <div>{ivalue}</div>
+        <div class="tooltip">
+            Current Value: {ivalue}
+        </div>
+        <div>{ivalue.toFixed(2)}</div>
         <input
             type="range"
             bind:value={ivalue}

package/package.json

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

package/styles/reset.css

@@ -1,19 +0,0 @@
-@font-face {
-    font-family: "Fira Code";
-    src: url("https://fonts.googleapis.com/css?family=Fira Code");
-}
-
-.nil-doc-reset {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    font-family: "Fira Code", "Courier New", Courier, monospace;
-}
-
-.nil-doc-reset *,
-.nil-doc-reset *::before,
-.nil-doc-reset *::after {
-    box-sizing: inherit;
-    padding: 0px;
-    margin: 0px;
-}

package/styles/scrollable.css

@@ -1,9 +0,0 @@
-.nil-doc-scrollable {
-    overflow: scroll;
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE and Edge */
-}
-
-.nil-doc-scrollable::-webkit-scrollbar {
-    display: none;
-}