perfect-gui 4.0.0 → 4.0.2

package/test/src/js/demo.js

@@ -1,65 +0,0 @@
-// <div id="container-0" class="container" style="height: 800px; border-radius: 0;"></div>
-
-import GUI from '../../../src/index';
-
-export default function() 
-{
-    const element = document.querySelector('#container-0 .element');
-    const note = document.querySelector('#container-0 .note');
-
-    const gui = new GUI({
-        draggable: true,
-        container: '#container-0',
-        name: 'Control panel'
-    });
-
-    gui.button("Randomize color", () => {
-        element.style.backgroundColor = get_random_color();
-    });
-    gui.slider({name: 'Intensity', min: .1, max: 2, value: .75, step: .01 }, (value) => {
-        element.style.transform = `scale(${value})`;
-    });
-    gui.slider({name: 'Scale', min: 0, max: 50, value: 25, step: 25 }, (value) => {
-        element.style.borderRadius = `${value}%`;
-    });
-
-    let folder1 = gui.folder({name: 'Texture'});
-
-    folder1.image(
-        'The officer',
-        require('../img/DALL·E-2022-11-13-20.11.16---portrait-of-a-squirrel-in-an-officier-suit,-style-of-a-Rembrandt-painting.jpg'),
-        () => {}
-    );
-    folder1.image(
-        'Weird dream',
-        require('../img/DALL·E-2022-11-13-20.11.52---a-blonde-girl-riding-a-whale-in-the-style-of-hopper.jpg'),
-        () => {}
-    );
-    folder1.image(
-        'Friends',
-        require('../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'),
-        () => {}
-    );
-
-    let folder2 = gui.folder({name: 'Normals', closed: true});
-    folder2.button("Random element color", () => {});
-
-    gui.toggle("Rim light", true, (state) => {});
-
-    gui.toggle("Direct light", false, (state) => {});
-
-    gui.list('Preset', ['Atomic', 'pink', 'yellow', 'blue'], function(item) {});
-
-
-    let position = { x: 2, y: 1};
-    const gui2 = new GUI({
-        draggable: true,
-        container: '#container-0',
-        name: 'Position panel'
-    });
-    gui2.vector2('Position', {
-        x: {min: -10, max: 10, object: position, prop: 'x'},
-        y: {min: -10, max: 10, object: position, prop: 'y'},
-    }, () => {});
-    gui2.color('Color', '#ffd170', () => {});
-}

package/test/src/js/getRandomColor.js

@@ -1,8 +0,0 @@
-export default function getRandomColor() {
-    var letters = '0123456789ABCDEF'.split('');
-    var color = '#';
-    for (var i = 0; i < 6; i++ ) {
-        color += letters[Math.round(Math.random() * 15)];
-    }
-    return color;
-};

package/test/src/js/kill_create.js

@@ -1,37 +0,0 @@
-import getRandomColor from './getRandomColor';
-import GUI from '../../../src/index';
-
-const container = '#container-5';
-
-export default function other() {
-    const guis = [];
-
-    let gui_1 = new GUI({
-        container,
-        name: 'GUI 1',
-    });
-
-    gui_1.button('Create GUI panel', () => {
-        guis[guis.length] = new GUI({
-            container,
-            name: 'Created GUI',
-            position: 'bottom left',
-            width: 150,
-            color: 'red'
-        });
-    });
-
-    gui_1.button('Kill GUI panel', () => {
-        const index = guis.length - 1;
-        if ( index >= 0 ) {
-            // Removes html elements
-            guis[index].wrapper.remove(); 
-
-            // Frees up memory
-            guis[index] = null;
-
-            // Removes null value from array
-            guis.splice(index, 1);
-        }
-    });
-}

package/test/src/js/methods/basics.js

@@ -1,69 +0,0 @@
-import GUI from '../../../../src/index';
-import getRandomColor from '../getRandomColor';
-
-export default function basics() {
-    const position = {
-        x: 0,
-    };
-
-    const element = document.querySelector('#container-1 .element');
-
-    const gui = new GUI({
-        name: 'Basics',
-        container: '#container-1',
-        draggable: true
-    });
-
-    gui.button('Button', () => {
-        element.style.backgroundColor = getRandomColor();
-        element.style.backgroundImage = 'none';
-    });
-
-    gui.slider({ name: 'Slider (simple callback)', value: 1 }, 
-        value => {
-            element.style.opacity = value;
-        }
-    );
-
-    gui.slider({ name: 'Slider 2 (object binding)', obj: position, prop: 'x', min: -30, max: 30, step: .1 },
-        () => {
-            element.style.transform = `translateX(${position.x}px)`;
-        }
-    );
-
-    gui.toggle({ name: 'Toggle', state: true }, state => {
-        if ( state ) element.classList.remove('round');
-        else element.classList.add('round');
-    });
-
-    gui.options({ name: 'List', values: ['red', 'pink', 'yellow', 'blue'] }, option => {
-        element.style.backgroundImage = 'none';
-        element.style.backgroundColor = option;
-    });
-
-    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({ 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({ 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({ name: 'Color', value: '#06ff89'}, color => {
-        element.style.backgroundImage = 'none';
-        element.style.backgroundColor = color;
-    });
-}

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

@@ -1,15 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/multiple.js

@@ -1,40 +0,0 @@
-import GUI from '../../../src/index';
-import getRandomColor from './getRandomColor';
-
-export default function multiple() {
-    const element = document.querySelector('#container-2 .element');
-
-    const gui_1 = new GUI({
-        name: 'GUI 1',
-        width: 200,
-        container: '#container-2'
-    });
-    
-    gui_1.button('By the way, buttons can handle multiple lines of text.', () => {
-        element.style.backgroundColor = getRandomColor();
-    });
-
-    const gui_2 = new GUI({
-        name: 'GUI 2',
-        width: 200,
-        container: '#container-2'
-    });
-    
-    gui_2.button('Button', () => element.style.backgroundColor = getRandomColor() );
-    
-    const gui_3 = new GUI({
-        name: 'GUI 3',
-        position: 'top left',
-        container: '#container-2'
-    });
-    
-    gui_3.button('Button', () => element.style.backgroundColor = getRandomColor() );
-    
-    const gui_4 = new GUI({
-        name: 'GUI 4',
-        position: 'right bottom',
-        container: '#container-2'
-    });
-    
-    gui_4.button('Button', () => element.style.backgroundColor = getRandomColor() );
-}

package/test/src/js/other.js

@@ -1,52 +0,0 @@
-import getRandomColor from './getRandomColor';
-import GUI from '../../../src/index';
-
-const container = '#container-4';
-
-export default function other() {
-    const gui_1 = new GUI({
-        container,
-        name: 'GUI 1 (drag me!)',
-        width: 450,
-        draggable: true,
-    });
-    gui_1.button('Custom width using the `width` option', () => {});
-
-    const gui_2 = new GUI({
-        container,
-        name: 'GUI 2 (drag me!)',
-        close: true,
-        draggable: true,
-        position: 'bottom left'
-    });
-
-    gui_2.button('gui_1.toggleClose();', () => {
-        gui_1.toggleClose();
-    });
-
-    const gui_3 = new GUI({
-        container,
-        name: 'GUI 3 (closed, scrollable)',
-        closed: true,
-    });
-
-    let f1 = gui_3.folder({ name: 'folder', color: '#33329f' });
-    for (let i = 0; i < 3; i ++) {
-        f1.button('btn '+ i, () => {});
-    }
-    let f2 = gui_3.folder({ name: 'folder', color: '#9f3293' });
-    for (let i = 0; i < 3; i ++) {
-        f2.button('btn '+ i, () => {});
-    }
-    for (let i = 0; i < 10; i ++) {
-        gui_3.button('btn '+ i, () => {});
-    }
-
-    const gui_4 = new GUI({
-        container,
-        position: 'bottom right',
-        name: 'GUI 4 (custom color)',
-        color: '#226666'
-    });
-    gui_4.button('lorem', () => {});
-}

package/test/src/js/prism.js

@@ -1,5 +0,0 @@
-/* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;

package/test/src/js/vectors.js

@@ -1,27 +0,0 @@
-import GUI from '../../../src/index';
-
-export default function vectors() {
-    const position = {
-        x: 0,
-        y: 0
-    }
-
-    const element = document.querySelector('#container-vectors .element');
-
-    const gui = new GUI({
-        name: 'Vectors',
-        container: '#container-vectors',
-    });
-
-    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(${position.x}px, ${-position.y}px)`;
-        requestAnimationFrame(loop);
-    }
-    
-    loop();
-}

package/test/src/styles/_sidebar.css

@@ -1,45 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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/prism.css

@@ -1,3 +0,0 @@
-/* PrismJS 1.29.0
-https://prismjs.com/download.html#themes=prism-okaidia&languages=clike+javascript */
-code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}