perfect-gui 3.5.16 → 4.0.1

package/test/src/js/{basics.js → methods/basics.js}

@@ -1,5 +1,5 @@
-import GUI from '../../../src/index';
-import getRandomColor from './getRandomColor';
+import GUI from '../../../../src/index';
+import getRandomColor from '../getRandomColor';
 
 export default function basics() {
     const position = {
@@ -31,38 +31,38 @@ export default function basics() {
         }
     );
 
-    gui.toggle('Toggle', true, state => {
+    gui.toggle({ name: 'Toggle', state: true }, state => {
         if ( state ) element.classList.remove('round');
         else element.classList.add('round');
     });
 
-    gui.list('List', ['red', 'pink', 'yellow', 'blue'], item => {
+    gui.options({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, option => {
         element.style.backgroundImage = 'none';
-        element.style.backgroundColor = item;
+        element.style.backgroundColor = option;
     });
 
-    gui.image('Image 1 lorem ipsum',
-        'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.16---portrait-of-a-squirrel-in-an-officier-suit,-style-of-a-Rembrandt-painting.jpg',
+    gui.image({ name: 'Image 1',
+        path: 'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.16---portrait-of-a-squirrel-in-an-officier-suit,-style-of-a-Rembrandt-painting.jpg'},
         evt => {
             element.style.backgroundImage = `url(${evt.path})`;
         }
     );
 
-    gui.image('Image 2',
-        'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.52---a-blonde-girl-riding-a-whale-in-the-style-of-hopper.jpg',
+    gui.image({ name: 'Image 2',
+        path: 'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.52---a-blonde-girl-riding-a-whale-in-the-style-of-hopper.jpg'},
         evt => {
             element.style.backgroundImage = `url(${evt.path})`;
         }
         );
         
-    gui.image('Image 3',
-        'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.13.55---1-blonde-haired-girl-with-her-orange-cat,-watching-the-whales-in-Tadoussac,-Canada.-In-the-style-of-an-oil-painting..jpg',
+    gui.image({ name: 'Image 3',
+        path: 'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.13.55---1-blonde-haired-girl-with-her-orange-cat,-watching-the-whales-in-Tadoussac,-Canada.-In-the-style-of-an-oil-painting..jpg'},
         evt => {
             element.style.backgroundImage = `url(${evt.path})`;
         }
     );
 
-    gui.color('Color', '#ff0000', color => {
+    gui.color({ name: 'Color', value: '#06ff89'}, color => {
         element.style.backgroundImage = 'none';
         element.style.backgroundColor = color;
     });

package/test/src/js/methods/button.js

@@ -0,0 +1,15 @@
+import GUI from '../../../../src/index';
+import getRandomColor from '../getRandomColor';
+
+export default function button() {
+    const element = document.querySelector('#container-button .element');
+
+    const gui = new GUI({
+        container: '#container-button',
+        draggable: true
+    });
+
+    gui.button('Button', () => {
+        element.style.backgroundColor = getRandomColor();
+    });
+}

package/test/src/js/methods/color.js

@@ -0,0 +1,14 @@
+import GUI from '../../../../src/index';
+
+export default function color() {
+    const element = document.querySelector('#container-color .element');
+
+    const gui = new GUI({
+        container: '#container-color',
+        draggable: true
+    });
+
+    gui.color({ name: 'Color', value: '#06ff89' }, color => {
+        element.style.backgroundColor = color;
+    });
+}

package/test/src/js/methods/folder.js

@@ -0,0 +1,34 @@
+import getRandomColor from '../getRandomColor';
+import GUI from '../../../../src/index';
+
+export default function folder() {
+    const element = document.querySelector('#container-folder .element');
+
+    const gui = new GUI({
+        name: 'Folders',
+        container: '#container-folder'
+    });
+
+    let folder_1 = gui.folder({ name: 'Folder 1' });
+
+    folder_1.button('Button', () => {
+        let color = getRandomColor();
+        element.style.backgroundColor = color;
+    });
+
+    folder_1.slider({ name: 'Slider', value: 1 }, value => {
+        element.style.transform = `scale(${value})`;
+    });
+
+    let folder_2 = gui.folder({ name: 'Folder 2', color: '#993333' });
+
+    folder_2.button('Button', () => {
+        element.style.backgroundColor = getRandomColor();
+    });
+
+    let folder_3 = gui.folder({ name: 'Folder 3', closed: true });
+
+    folder_3.button('Button', () => {
+        element.style.backgroundColor = getRandomColor();
+    });
+}

package/test/src/js/methods/image.js

@@ -0,0 +1,17 @@
+import GUI from '../../../../src/index';
+
+export default function image() {
+    const element = document.querySelector('#container-image .element');
+
+    const gui = new GUI({
+        container: '#container-image',
+        draggable: true
+    });
+
+    gui.image({ name: 'Lorem ipsum',
+        path: 'https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/img/DALL·E-2022-11-13-20.11.16---portrait-of-a-squirrel-in-an-officier-suit,-style-of-a-Rembrandt-painting.jpg'},
+        evt => {
+            element.style.backgroundImage = `url( ${evt.path} )`;
+        }
+    );
+}

package/test/src/js/methods/list.js

@@ -0,0 +1,14 @@
+import GUI from '../../../../src/index';
+
+export default function list() {
+    const element = document.querySelector('#container-list .element');
+
+    const gui = new GUI({
+        container: '#container-list',
+        draggable: true
+    });
+
+    gui.list({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, selected_value => {
+        element.style.backgroundColor = selected_value;
+    } );
+}

package/test/src/js/methods/slider.js

@@ -0,0 +1,26 @@
+import GUI from '../../../../src/index';
+import getRandomColor from '../getRandomColor';
+
+export default function slider() {
+    const element = document.querySelector('#container-slider .element');
+    const position = {
+        x: 0,
+    };
+
+    const gui = new GUI({
+        container: '#container-slider',
+        draggable: true
+    });
+
+    gui.slider({ name: 'Simple slider (value & callback)', value: 1 }, 
+        value => {
+            element.style.opacity = value;
+        }
+    );
+
+    gui.slider({ name: 'Slider with object binding', obj: position, prop: 'x', min: -30, max: 30 },
+        () => {
+            element.style.transform = `translateX(${position.x}px)`;
+        }
+    );
+}

package/test/src/js/methods/toggle.js

@@ -0,0 +1,15 @@
+import GUI from '../../../../src/index';
+
+export default function toggle() {
+    const element = document.querySelector('#container-toggle .element');
+
+    const gui = new GUI({
+        container: '#container-toggle',
+        draggable: true
+    });
+
+    gui.toggle({ name: 'Toggle', value: true }, state => {
+        if ( state ) element.classList.remove('round');
+        else element.classList.add('round');
+    });
+}

package/test/src/js/methods/vector2.js

@@ -0,0 +1,21 @@
+import GUI from '../../../../src/index';
+
+export default function vector2() {
+    const position = {
+        x: 0,
+        y: 0
+    }
+
+    const element = document.querySelector('#container-vector2 .element');
+
+    const gui = new GUI({
+        container: '#container-vector2',
+    });
+
+    gui.vector2({ name: 'Position',
+        x: { obj: position, prop: 'x', min: -50, max: 50 },
+        y: { obj: position, prop: 'y', min: -50, max: 50 },
+    }, (x, y) => {
+        element.style.transform = `translate(${x}px, ${-y}px)`;
+    });
+}

package/test/src/js/vectors.js

@@ -1,7 +1,7 @@
 import GUI from '../../../src/index';
 
 export default function vectors() {
-    const data = {
+    const position = {
         x: 0,
         y: 0
     }
@@ -13,13 +13,13 @@ export default function vectors() {
         container: '#container-vectors',
     });
 
-    gui.vector2('Position', {
-        x: { object: data, prop: 'x', min: -50, max: 50 },
-        y: { object: data, prop: 'y', min: -50, max: 50 },
-    });
+    gui.vector2({ name: 'Position', data: {
+        x: { object: position, prop: 'x', min: -50, max: 50 },
+        y: { object: position, prop: 'y', min: -50, max: 50 },
+    }});
 
     function loop() {
-        element.style.transform = `translate(${data.x}px, ${-data.y}px)`;
+        element.style.transform = `translate(${position.x}px, ${-position.y}px)`;
         requestAnimationFrame(loop);
     }
     

package/test/src/styles/_sidebar.css

@@ -0,0 +1,45 @@
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    border-right: 1px solid var(--grey);
+    height: 100%;
+    background-color: #1b1b1b;
+    width: 120px;
+    padding: 40px;
+    z-index: 1;
+}
+
+.sidebar__title {
+    opacity: .8;
+    display: block;
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+    font-size: 1.8rem;
+}
+
+.sidebar__item {
+    opacity: .8;
+    display: block;
+    font-size: var(--body-size);
+    margin-bottom: 1rem;
+    margin-left: 1rem;
+}
+
+.sidebar__item:hover {
+    opacity: 1;
+} 
+
+.sidebar__item:first-of-type {
+    
+}
+
+.sidebar__item:last-of-type {
+    margin-bottom: 4rem;
+}
+
+@media (max-width: 1024px) {
+    .sidebar {
+        width: 120px;
+    }
+}

package/test/src/styles/_table.css

@@ -0,0 +1,21 @@
+table {
+    width: 100%;
+    font-size: 1.4rem;
+    color: var(--white);
+}
+
+th {
+    border-bottom: 1px solid var(--grey);
+}
+
+th, td {
+    text-align: left;
+    border-right: 1px solid var(--grey);
+    padding: 1rem;
+    line-height: 1.5;
+}
+
+th:last-of-type,
+td:last-of-type {
+    border-right: none;
+}

package/test/src/styles/styles.css

@@ -1,9 +1,10 @@
-@import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap');
+@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,600&display=swap');
 
 :root {
     --black: rgb(17, 17, 17);
     --white: rgb(246, 246, 232);
     --grey: #ffffff33;
+    --green: #06ff89;
     --sans: 'General Sans', serif;
     --h1-size: 2.6rem;
     --h2-size: 2.2rem;
@@ -13,6 +14,7 @@
 * {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    font-size: 1.5rem;
 }
 
 html, body {
@@ -34,47 +36,6 @@ body {
 .wrapper {
     display: flex;
     flex-direction: row;
-    font-size: 1.2rem;
-}
-
-.sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    border-right: 1px solid var(--grey);
-    height: 100%;
-    background-color: #1b1b1b;
-    width: 120px;
-    padding: 40px;
-    z-index: 1;
-}
-
-.sidebar__title {
-    opacity: .8;
-    display: block;
-    margin-top: 4rem;
-    margin-bottom: 2rem;
-    font-size: 1.8rem;
-}
-
-.sidebar__item {
-    opacity: .8;
-    display: block;
-    font-size: var(--body-size);
-    margin-bottom: 1rem;
-    margin-left: 1rem;
-}
-
-.sidebar__item:hover {
-    opacity: 1;
-} 
-
-.sidebar__item:first-of-type {
-    
-}
-
-.sidebar__item:last-of-type {
-    margin-bottom: 4rem;
 }
 
 .main {
@@ -85,10 +46,6 @@ body {
 }
 
 @media (max-width: 1024px) {
-    .sidebar {
-        width: 120px;
-    }
-
     .main {
         width: 700px;
         padding: 0 20px 100px 230px;
@@ -103,19 +60,23 @@ body {
 
 .subtitle {
     opacity: .6;
+}
+
+.subtitle,
+.subtitle span {
     font-size: 1.2rem;
 }
 
 .link {
     padding: 10px;
-    border-bottom: 1px solid var(--white);
+    border-bottom: 1px solid var(--green);
     margin-left: 20px;
     font-size: var(--body-size);
 }
 
 h1, h2 {
     font-family: var(--sans), sans-serif;
-    font-weight: normal;
+    font-weight: 600;
 }
 
 h1 {
@@ -125,12 +86,12 @@ h1 {
 }
 
 h2 {
-    margin-top: 80px;
+    margin-top: 110px;
     font-size: var(--h2-size);
 }
 
-p {
-    line-height: 1.4;
+p, li {
+    line-height: 1.5;
     font-size: var(--body-size);
 }
 
@@ -156,7 +117,7 @@ a {
     font-family: monospace;
     background-color: #333333;
     color: #a6e22e;
-    padding: 3px 6px;
+    padding: 1px 6px;
     border-radius: 3px;
 }
 
@@ -167,7 +128,7 @@ div:has(pre) {
 pre[class*=language-] {
     padding: 30px; 
     border-radius: 5px;
-    font-size: 1.2rem;
+    font-size: 1.5rem;
 }
 
 .container {
@@ -183,6 +144,10 @@ pre[class*=language-] {
     border-radius: 5px;
 }
 
+.container--small {
+    height: 200px;
+}
+
 .element {
     width: 100px;
     height: 100px;
@@ -192,11 +157,18 @@ pre[class*=language-] {
     right: 0;
     bottom: 0;
     margin: auto;
-    background-color: red;
+    background-color: var(--green);
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     transition: .1s transform ease, .3s border-radius ease;
+    border-radius: 3px;
+}
+
+.element.left {
+    left: calc((50% - 145px) - 50px);
+    right: 0px;
+    margin: auto 0px;
 }
 
 .element.round {

package/test/src/js/folders.js

@@ -1,27 +0,0 @@
-import getRandomColor from './getRandomColor';
-import perfectGUI from '../../../src/index';
-
-export default function folders() {
-    const element = document.querySelector('#container-3 .element');
-
-    const gui = new perfectGUI({
-        name: 'Folders',
-        container: '#container-3'
-    });
-
-    let folder_1 = gui.folder({ name: 'Folder 1' });
-
-    folder_1.button('Random color', () => {
-        element.style.backgroundColor = getRandomColor();
-    });
-
-    folder_1.slider({ name: 'Size', value: 1 }, value => {
-        element.style.transform = `scale(${value})`;
-    });
-
-    let folder_2 = gui.folder({ name: 'Folder 2', closed: true });
-
-    folder_2.button('Random color', () => {
-        element.style.backgroundColor = getRandomColor();
-    });
-}