showcase controls

src/component/control/checkbox/index.js

@@ -3,15 +3,14 @@ import * as form from '../../form';
 import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 
-export const Control_checkbox = function ({
+export const Control_checkbox = function({
   object = {},
   id = 'name',
   path = false,
   labelText = 'Label',
   description = false,
   action = false,
-  inputButton = false,
-  inputHide = false,
+  buttonHideInput = false,
   inputButtonStyle = false
 } = {}) {
 
@@ -55,6 +54,25 @@ export const Control_checkbox = function ({
 
   };
 
+  this.inputButton = () => {
+
+    const wrap = form.wrap();
+
+    wrap.appendChild(
+      form.input.inputButton({
+        buttonHideInput: buttonHideInput,
+        style: inputButtonStyle,
+        children: [
+          this.checkbox,
+          this.label
+        ]
+      })
+    );
+
+    return wrap;
+
+  };
+
   this.disable = () => {
     this.checkbox.disabled = true;
   };
@@ -63,4 +81,4 @@ export const Control_checkbox = function ({
     this.checkbox.disabled = false;
   };
 
-};
+};

src/component/control/inputButton/index.js

@@ -4,7 +4,7 @@ import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 import { convertColor } from '../../../utility/convertColor';
 
-export const Control_inputButton = function ({
+export const Control_inputButton = function({
   object = {},
   path = false,
   id = 'name',
@@ -21,6 +21,7 @@ export const Control_inputButton = function ({
   this.input;
 
   switch (type) {
+
     case 'file':
       this.input = form.input.file({
         id: id,
@@ -176,4 +177,4 @@ export const Control_inputButton = function ({
     this.input.disabled = false;
   };
 
-};
+};

src/component/control/radio/index.js

@@ -10,8 +10,7 @@ export const Control_radio = function ({
   groupName = 'Group',
   path = false,
   action = false,
-  inputButton = false,
-  inputHide = false,
+  buttonHideInput = false,
   inputButtonStyle = false
 } = {}) {
 
@@ -62,8 +61,7 @@ export const Control_radio = function ({
         },
         inputButton: () => {
           return form.input.inputButton({
-            inputButton: inputButton,
-            inputHide: inputHide,
+            buttonHideInput: buttonHideInput,
             style: inputButtonStyle,
             children: [
               radioAndLabel.radio,

src/component/control/radioGrid/index.js

@@ -5,7 +5,7 @@ import { set } from '../../../utility/set';
 
 export const Control_radioGrid = function ({
   radioGroup = [],
-  label = 'Label',
+  label = false,
   object = {},
   groupName = 'group',
   path = false,
@@ -21,8 +21,6 @@ export const Control_radioGrid = function ({
 
   const gridElement = form.grid();
 
-  this.label = false;
-
   if (label) {
     this.label = form.label({
       text: label

src/component/control/sliderDouble/index.js

@@ -8,7 +8,7 @@ import { node } from '../../../utility/node';
 import { get } from '../../../utility/get';
 import { set } from '../../../utility/set';
 
-export const Control_sliderDouble = function ({
+export const Control_sliderDouble = function({
   object = {},
   labelText = 'Label',
   style = false,
@@ -90,12 +90,12 @@ export const Control_sliderDouble = function ({
       style: style,
       action: () => {
 
-        if (get({ object: state.get.current(), path: left.path }) > get({ object: state.get.minMax(), path: left.path }).max - 10) {
-          set({ object: state.get.current(), path: left.path, value: get({ object: state.get.minMax(), path: left.path }).max - 10 });
+        if (get({ object: object, path: left.path }) > left.max - 10) {
+          set({ object: object, path: left.path, value: left.max - 10 });
         }
 
-        if (get({ object: state.get.current(), path: left.path }) >= get({ object: state.get.current(), path: right.path }) - 10) {
-          set({ object: state.get.current(), path: right.path, value: get({ object: state.get.current(), path: left.path }) + 10 });
+        if (get({ object: object, path: left.path }) >= get({ object: object, path: right.path }) - 10) {
+          set({ object: object, path: right.path, value: get({ object: object, path: left.path }) + 10 });
         }
 
         this.range.left.updateRange();
@@ -131,12 +131,12 @@ export const Control_sliderDouble = function ({
       style: style,
       action: () => {
 
-        if (get({ object: state.get.current(), path: right.path }) < get({ object: state.get.minMax(), path: right.path }).min + 10) {
-          set({ object: state.get.current(), path: right.path, value: get({ object: state.get.minMax(), path: right.path }).min + 10 });
+        if (get({ object: object, path: right.path }) < right.min + 10) {
+          set({ object: object, path: right.path, value: right.min + 10 });
         }
 
-        if (get({ object: state.get.current(), path: right.path }) <= get({ object: state.get.current(), path: left.path }) + 10) {
-          set({ object: state.get.current(), path: left.path, value: get({ object: state.get.current(), path: right.path }) - 10 });
+        if (get({ object: object, path: right.path }) <= get({ object: object, path: left.path }) + 10) {
+          set({ object: object, path: left.path, value: get({ object: object, path: right.path }) - 10 });
         }
 
         this.range.left.update();
@@ -244,13 +244,15 @@ export const Control_sliderDouble = function ({
   };
 
   this.disable = () => {
+    this.label.classList.add('disabled');
     this.range.left.disable();
     this.range.right.disable();
   };
 
   this.enable = () => {
+    this.label.classList.remove('disabled');
     this.range.left.enable();
     this.range.right.enable();
   };
 
-};
+};

src/component/control/sliderSlim/index.js

@@ -13,13 +13,13 @@ export const Control_sliderSlim = function({
   path = false,
   id = 'name',
   labelText = 'Label',
-  hue = false,
   value = 0,
   defaultValue = false,
   min = 0,
   max = 100,
   step = 1,
   action = false,
+  style = false,
   focusAction = false,
   blurAction = false,
   sliderAction = false,
@@ -38,8 +38,24 @@ export const Control_sliderSlim = function({
 
   const classList = ['form-group-item-grow'];
 
-  if (hue) {
-    classList.push('input-range-hue-spectrum');
+  if (style) {
+
+    switch (style) {
+
+      case 'hue':
+        classList.push('input-range-hue-spectrum');
+        break;
+
+      case 'saturation':
+        classList.push('input-range-saturation-spectrum');
+        break;
+
+      case 'contrast':
+        classList.push('input-range-contrast-spectrum');
+        break;
+
+    }
+
   }
 
   this.range = form.input.range({
@@ -192,4 +208,4 @@ export const Control_sliderSlim = function({
     this.reset.enable();
   };
 
-};
+};

src/component/dropdown/index.css

@@ -22,9 +22,10 @@
   min-width: 15em;
   box-shadow: var(--theme-shadow-bottom-large);
   overflow: hidden;
+  transition: background-color var(--layout-transition-extra-fast);
 }
 
 .dropdown-menu-button {
   padding: 0.25em 1em;
   justify-content: flex-start;
-}
+}

src/component/dropdown/index.js

@@ -12,7 +12,8 @@ export const Dropdown = function({
   buttonStyle = [],
   buttonClassList = [],
   srOnly = false,
-  iconName = false
+  iconName = false,
+  persist = false
 } = {}) {
 
   this.state = {
@@ -55,6 +56,8 @@ export const Dropdown = function({
 
     this.state.open = true;
 
+    this.element.toggle.button.classList.add('active');
+
     const body = document.querySelector('body');
 
     body.appendChild(this.element.menu);
@@ -69,6 +72,8 @@ export const Dropdown = function({
 
     this.state.open = false;
 
+    this.element.toggle.button.classList.remove('active');
+
     const body = document.querySelector('body');
 
     if (body.contains(this.element.menu)) {
@@ -120,9 +125,13 @@ export const Dropdown = function({
 
     const path = event.path || (event.composedPath && event.composedPath());
 
-    if (!path.includes(this.element.toggle.button) && !path.includes(this.element.menu)) {
+    if (!persist) {
+
+      if (!path.includes(this.element.toggle.button) && !path.includes(this.element.menu)) {
 
-      this.close();
+        this.close();
+
+      }
 
     }
 
@@ -176,7 +185,7 @@ export const Dropdown = function({
 
           if (item.action) { item.action(); }
 
-          this.close();
+          if (!persist) { this.close(); }
 
         });
 
@@ -190,6 +199,14 @@ export const Dropdown = function({
 
   };
 
+  this.disable = () => {
+    this.element.toggle.disable();
+  };
+
+  this.enable = () => {
+    this.element.toggle.enable();
+  };
+
   this.assemble();
 
-};
+};

src/component/form/group/index.css

@@ -504,4 +504,4 @@
 .form-group>select.form-group-item-equal,
 .form-group>input[type].form-group-item-equal {
   flex-basis: 0;
-}
+}

src/component/form/inline/index.css

@@ -8,9 +8,20 @@
 .form-inline {
   position: relative;
   display: inline-flex;
+}
+
+.form-inline-align-top {
+  align-items: flex-start;
+}
+
+.form-inline-align-center {
   align-items: center;
 }
 
+.form-inline-align-bottom {
+  align-items: flex-end;
+}
+
 .form-inline-justify-left {
   justify-content: flex-start;
 }
@@ -84,4 +95,4 @@
 
 .form-inline label:not(:only-child):not(:last-child) {
   padding-bottom: 0;
-}
+}

src/component/form/inline/index.js

@@ -7,6 +7,7 @@ export const inline = function ({
   reverse = false,
   block = false,
   wrap = false,
+  align = 'top',
   justify = 'left',
   gap = 'medium',
   equalGap = false,
@@ -45,6 +46,22 @@ export const inline = function ({
     inline.classList.add('form-inline-gap-equal');
   }
 
+  switch (align) {
+
+    case 'top':
+      inline.classList.add('form-inline-align-top');
+      break;
+
+    case 'center':
+      inline.classList.add('form-inline-align-center');
+      break;
+
+    case 'bottom':
+      inline.classList.add('form-inline-align-bottom');
+      break;
+
+  }
+
   switch (justify) {
 
     case 'left':

src/component/form/input/inputButton/index.js

@@ -4,7 +4,7 @@ import './index.css';
 
 export const inputButton = function ({
   children = false,
-  inputHide = false,
+  buttonHideInput = false,
   srOnly = false,
   style = []
 } = {}) {
@@ -34,7 +34,7 @@ export const inputButton = function ({
     });
   }
 
-  if (inputHide) {
+  if (buttonHideInput) {
     inputButtonElement.classList.add('form-input-hide');
   }