From 1b03de9baeae328a0c42fabbb0e4344213613a70 Mon Sep 17 00:00:00 2001 From: Kuldeep Matharu Date: Mon, 1 Jul 2024 18:05:28 +0100 Subject: [PATCH] showcase controls --- src/component/control/checkbox/index.js | 26 +- src/component/control/inputButton/index.js | 5 +- src/component/control/radio/index.js | 6 +- src/component/control/radioGrid/index.js | 4 +- src/component/control/sliderDouble/index.js | 22 +- src/component/control/sliderSlim/index.js | 24 +- src/component/dropdown/index.css | 3 +- src/component/dropdown/index.js | 27 +- src/component/form/group/index.css | 2 +- src/component/form/inline/index.css | 13 +- src/component/form/inline/index.js | 17 + src/component/form/input/inputButton/index.js | 4 +- src/component/layout/index.js | 5 + src/component/menu/index.js | 2 +- .../menuContent/debugSetting/index.js | 241 +----- .../menuContent/themeSetting/index.js | 41 +- src/component/shadeBar/index.css | 80 ++ src/component/shadeBar/index.js | 55 ++ src/component/showcase/index.css | 22 + src/component/showcase/index.js | 683 ++++++++++++++++++ src/component/tab/index.css | 18 +- src/component/tab/index.js | 31 +- src/component/theme/index.css | 78 -- src/locale/en_GB/messages.json | 12 +- src/style/zindex/index.css | 3 +- 25 files changed, 1031 insertions(+), 393 deletions(-) create mode 100644 src/component/shadeBar/index.css create mode 100644 src/component/shadeBar/index.js create mode 100644 src/component/showcase/index.css create mode 100644 src/component/showcase/index.js diff --git a/src/component/control/checkbox/index.js b/src/component/control/checkbox/index.js index 29b8ea2a..430325b7 100644 --- a/src/component/control/checkbox/index.js +++ b/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; }; -}; +}; \ No newline at end of file diff --git a/src/component/control/inputButton/index.js b/src/component/control/inputButton/index.js index a1e1c070..572ca041 100644 --- a/src/component/control/inputButton/index.js +++ b/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; }; -}; +}; \ No newline at end of file diff --git a/src/component/control/radio/index.js b/src/component/control/radio/index.js index 76f73ba6..55dcc5e0 100644 --- a/src/component/control/radio/index.js +++ b/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, diff --git a/src/component/control/radioGrid/index.js b/src/component/control/radioGrid/index.js index 38e33273..206a91d6 100644 --- a/src/component/control/radioGrid/index.js +++ b/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 diff --git a/src/component/control/sliderDouble/index.js b/src/component/control/sliderDouble/index.js index a738cbc6..c8c351e4 100644 --- a/src/component/control/sliderDouble/index.js +++ b/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(); }; -}; +}; \ No newline at end of file diff --git a/src/component/control/sliderSlim/index.js b/src/component/control/sliderSlim/index.js index 073abd15..d7aa3d4e 100644 --- a/src/component/control/sliderSlim/index.js +++ b/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(); }; -}; +}; \ No newline at end of file diff --git a/src/component/dropdown/index.css b/src/component/dropdown/index.css index d806c0fb..a1fb2e78 100644 --- a/src/component/dropdown/index.css +++ b/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; -} +} \ No newline at end of file diff --git a/src/component/dropdown/index.js b/src/component/dropdown/index.js index fdbe1256..7e0f75d9 100644 --- a/src/component/dropdown/index.js +++ b/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(); -}; +}; \ No newline at end of file diff --git a/src/component/form/group/index.css b/src/component/form/group/index.css index 5393b853..3fd6ecaa 100644 --- a/src/component/form/group/index.css +++ b/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; -} +} \ No newline at end of file diff --git a/src/component/form/inline/index.css b/src/component/form/inline/index.css index 9589ab3c..44cfe9bd 100644 --- a/src/component/form/inline/index.css +++ b/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; -} +} \ No newline at end of file diff --git a/src/component/form/inline/index.js b/src/component/form/inline/index.js index 47eebd03..213660c1 100644 --- a/src/component/form/inline/index.js +++ b/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': diff --git a/src/component/form/input/inputButton/index.js b/src/component/form/input/inputButton/index.js index 6c1bf95f..de101071 100644 --- a/src/component/form/input/inputButton/index.js +++ b/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'); } diff --git a/src/component/layout/index.js b/src/component/layout/index.js index 55e6a2ef..7a2aff09 100644 --- a/src/component/layout/index.js +++ b/src/component/layout/index.js @@ -119,6 +119,11 @@ layout.area = { }, clear: () => { clearChildNode(layout.element.layout); + }, + remove: () => { + const body = document.querySelector('body'); + + body.removeChild(layout.element.layout); } }; diff --git a/src/component/menu/index.js b/src/component/menu/index.js index de5ff4a7..d32c5097 100644 --- a/src/component/menu/index.js +++ b/src/component/menu/index.js @@ -5,7 +5,7 @@ import { MenuFrame } from '../menuFrame'; const menu = {}; menu.navData = [ - // { name: 'debug', active: true, overscroll: true, sub: ['input', 'button', 'bookmark', 'icon'] }, + // { name: 'debug', active: false, overscroll: true, sub: ['showcase', 'bookmark'] }, { name: 'theme', active: true, overscroll: true, sub: ['preset', 'saved', 'style', 'color', 'accent', 'font', 'radius', 'shadow', 'shade', 'opacity', 'background', 'layout', 'header', 'bookmark'] }, { name: 'layout', active: false, overscroll: true, sub: ['scaling', 'area', 'padding', 'gutter', 'alignment', 'page'] }, { name: 'header', active: false, overscroll: true, sub: ['alignment', 'greeting', 'transitional', 'clock', 'date', 'search'] }, diff --git a/src/component/menuContent/debugSetting/index.js b/src/component/menuContent/debugSetting/index.js index 257244b9..cc089927 100644 --- a/src/component/menuContent/debugSetting/index.js +++ b/src/component/menuContent/debugSetting/index.js @@ -1,8 +1,10 @@ import { data } from '../../data'; +import { menu } from '../../menu'; import { bookmark } from '../../bookmark'; import { group } from '../../group'; import { icon } from '../../icon'; import { layout } from '../../layout'; +import { showcase } from '../../showcase'; import { groupAndBookmark } from '../../groupAndBookmark'; import { fontawesome } from '../../fontawesome'; @@ -22,209 +24,32 @@ import { randomString } from '../../../utility/randomString'; const debugSetting = {}; -debugSetting.state = { - input: { - radio: { a: 'a', b: 'a', c: 'a', d: 'a', e: 'a', grid3x3: 'a', grid3x1: 'a', grid1x3: 'a' }, - checkbox: { a: true, b: true, c: false } - } -}; - debugSetting.control = { - input: {}, - button: {}, + showcase: {}, bookmark: {}, - icon: {} }; -debugSetting.input = (parent) => { - - debugSetting.control.input.radio = { - a: new Control_radio({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-a-a', labelText: 'Radio A A', description: 'Description for radio A A.', value: 'a' }, - { id: 'input-radio-a-b', labelText: 'Radio A B', description: 'Description for radio A B.', value: 'b' }, - { id: 'input-radio-a-c', labelText: 'Radio A C', description: 'Description for radio A C.', value: 'c' } - ], - label: 'Radio group A', - groupName: 'input-radio-a', - path: 'input.radio.a', - action: () => { console.log(debugSetting.state); } - }), - b: new Control_radio({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-b-a', labelText: 'B A', value: 'a' }, - { id: 'input-radio-b-b', labelText: 'B B', value: 'b' }, - { id: 'input-radio-b-c', labelText: 'B C', value: 'c' } - ], - label: 'Radio group', - groupName: 'input-radio-b', - path: 'input.radio.b', - action: () => { console.log(debugSetting.state); } - }), - c: new Control_radio({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-c-a', labelText: 'C A', value: 'a' }, - { id: 'input-radio-c-b', labelText: 'C B', value: 'b' }, - { id: 'input-radio-c-c', labelText: 'C C', value: 'c' } - ], - label: 'Radio group', - groupName: 'input-radio-c', - path: 'input.radio.c', - inputButton: true, - action: () => { console.log(debugSetting.state); } - }), - d: new Control_radio({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-d-a', labelText: 'D A', value: 'a' }, - { id: 'input-radio-d-b', labelText: 'D B', value: 'b' }, - { id: 'input-radio-d-c', labelText: 'D C', value: 'c' } - ], - label: 'Radio group', - groupName: 'input-radio-d', - path: 'input.radio.d', - inputButton: true, - inputButtonStyle: ['line'], - action: () => { console.log(debugSetting.state); } - }), - e: new Control_radio({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-e-a', labelText: 'E A', value: 'a' }, - { id: 'input-radio-e-b', labelText: 'E B', value: 'b' }, - { id: 'input-radio-e-c', labelText: 'E C', value: 'c' } - ], - label: 'Radio group', - groupName: 'input-radio-e', - path: 'input.radio.e', - inputButton: true, - inputHide: true, - inputButtonStyle: ['ring'], - action: () => { console.log(debugSetting.state); } - }), - grid3x3: new Control_radioGrid({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-grid3x3-a', labelText: 'A', value: 'a', position: 1 }, - { id: 'input-radio-grid3x3-b', labelText: 'B', value: 'b', position: 2 }, - { id: 'input-radio-grid3x3-c', labelText: 'C', value: 'c', position: 3 }, - { id: 'input-radio-grid3x3-d', labelText: 'D', value: 'd', position: 4 }, - { id: 'input-radio-grid3x3-e', labelText: 'E', value: 'e', position: 5 }, - { id: 'input-radio-grid3x3-f', labelText: 'F', value: 'f', position: 6 }, - { id: 'input-radio-grid3x3-g', labelText: 'G', value: 'g', position: 7 }, - { id: 'input-radio-grid3x3-h', labelText: 'H', value: 'h', position: 8 }, - { id: 'input-radio-grid3x3-i', labelText: 'I', value: 'i', position: 9 } - ], - label: 'Radio group grid 3x3', - groupName: 'input-radio-grid3x3', - path: 'input.radio.grid3x3', - gridSize: '3x3', - action: () => { console.log(debugSetting.state); } - }), - grid3x1: new Control_radioGrid({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-grid3x1-a', labelText: 'A', value: 'a', position: 1 }, - { id: 'input-radio-grid3x1-b', labelText: 'B', value: 'b', position: 2 }, - { id: 'input-radio-grid3x1-c', labelText: 'C', value: 'c', position: 3 } - ], - label: 'Radio group grid 3x1', - groupName: 'input-radio-grid3x1', - path: 'input.radio.grid3x1', - gridSize: '3x1', - action: () => { console.log(debugSetting.state); } - }), - grid1x3: new Control_radioGrid({ - object: debugSetting.state, - radioGroup: [ - { id: 'input-radio-grid1x3-a', labelText: 'A', value: 'a', position: 1 }, - { id: 'input-radio-grid1x3-b', labelText: 'B', value: 'b', position: 2 }, - { id: 'input-radio-grid1x3-c', labelText: 'C', value: 'c', position: 3 } - ], - label: 'Radio group grid 1x3', - groupName: 'input-radio-grid1x3', - path: 'input.radio.grid1x3', - gridSize: '1x3', - action: () => { console.log(debugSetting.state); } - }) - }; +debugSetting.showcase = (parent) => { - debugSetting.control.input.checkbox = { - a: new Control_checkbox({ - object: debugSetting.state, - id: 'input-checkbox-a', - path: 'input.checkbox.a', - labelText: 'Checkbox A', - action: () => { console.log(debugSetting.state); } - }), - b: new Control_checkbox({ - object: debugSetting.state, - id: 'input-checkbox-b', - path: 'input.checkbox.b', - labelText: 'Checkbox B', - action: () => { console.log(debugSetting.state); } - }), - c: new Control_checkbox({ - object: debugSetting.state, - id: 'input-checkbox-c', - path: 'input.checkbox.c', - labelText: 'Checkbox C', - action: () => { console.log(debugSetting.state); } - }) - }; - - parent.appendChild( - node('div', [ - debugSetting.control.input.radio.a.wrap(), - node('hr'), - debugSetting.control.input.radio.b.inline(), - debugSetting.control.input.radio.c.inputButton(), - debugSetting.control.input.radio.d.inputButton(), - debugSetting.control.input.radio.e.inputButton(), - node('hr'), - debugSetting.control.input.radio.grid3x3.wrap(), - debugSetting.control.input.radio.grid3x1.wrap(), - debugSetting.control.input.radio.grid1x3.wrap(), - node('hr'), - debugSetting.control.input.checkbox.a.wrap(), - debugSetting.control.input.checkbox.b.wrap(), - debugSetting.control.input.checkbox.c.wrap() - ]) - ); - -}; - -debugSetting.button = (parent) => { - - debugSetting.control.button.small = new Button({ text: 'Small button', size: 'small' }); - - debugSetting.control.button.medium = new Button({ text: 'Medium button', size: 'medium' }); - - debugSetting.control.button.large = new Button({ text: 'Large button', size: 'large' }); + debugSetting.control.showcase.start = new Button({ + text: 'Showcase controls', + style: ['line'], + func: () => { - debugSetting.control.button.ring = new Button({ text: 'Ring button', size: 'medium', style: ['ring'] }); + menu.close(); - debugSetting.control.button.line = new Button({ text: 'Line button', size: 'medium', style: ['line'] }); + layout.area.remove(); - debugSetting.control.button.ring = new Button({ text: 'Ring button', size: 'medium', style: ['ring'] }); + showcase.area.render(); - debugSetting.control.button.link = new Button({ text: 'Link button', size: 'medium', style: ['link'] }); + showcase.control.tab.update(); - debugSetting.control.button.icon = new Button({ text: 'Icon button', size: 'medium', style: ['line'], iconName: 'add' }); + } + }); parent.appendChild( node('div', [ - debugSetting.control.button.small.wrap(), - debugSetting.control.button.medium.wrap(), - debugSetting.control.button.large.wrap(), - debugSetting.control.button.ring.wrap(), - debugSetting.control.button.line.wrap(), - debugSetting.control.button.ring.wrap(), - debugSetting.control.button.link.wrap(), - debugSetting.control.button.icon.wrap() + debugSetting.control.showcase.start.wrap() ]) ); @@ -427,38 +252,4 @@ debugSetting.bookmark = (parent) => { }; -debugSetting.icon = (parent) => { - - debugSetting.control.icon = []; - - for (let key in icon.all) { - debugSetting.control.icon.push( - form.wrap({ - children: [ - node('div|class:d-flex d-horizontal d-gap d-center', [ - node('div|class:large', [icon.render(key)]), - node(`p:${key}|class:small`) - ]) - ] - }) - ); - } - - parent.appendChild( - node('div', [ - form.wrap({ - children: [ - form.inline({ - gap: 'small', - wrap: true, - equalGap: true, - children: debugSetting.control.icon - }) - ] - }) - ]) - ); - -}; - -export { debugSetting }; +export { debugSetting }; \ No newline at end of file diff --git a/src/component/menuContent/themeSetting/index.js b/src/component/menuContent/themeSetting/index.js index 2cf99bbc..95c3e1e0 100644 --- a/src/component/menuContent/themeSetting/index.js +++ b/src/component/menuContent/themeSetting/index.js @@ -24,6 +24,7 @@ import { PresetThemeTile } from '../../presetThemeTile'; import { AccentPresetButton } from '../../accentPresetButton'; import { Alert } from '../../alert'; import { Link } from '../../link'; +import { ShadeBar } from '../../shadeBar'; import { Control_helperText } from '../../control/helperText'; import { Control_radio } from '../../control/radio'; @@ -409,36 +410,6 @@ themeSetting.style = (parent) => { themeSetting.color = (parent) => { - const shade = () => { - - const formSticky = form.sticky(); - - const formGroup = form.group({ - block: true, - border: true - }); - - const shadeCount = state.get.current().theme.color.shades; - - for (var i = 1; i <= shadeCount; i++) { - let count = i; - - if (count < 10) { - count = '0' + count; - } - - formGroup.appendChild( - node('div|class:form-group-text form-group-text-borderless', [ - node('div|class:theme-color-box theme-color-shade-' + count + '') - ]) - ); - } - - formSticky.appendChild(formGroup); - - return formSticky; - }; - themeSetting.control.color = { range: { primary: { @@ -524,7 +495,9 @@ themeSetting.color = (parent) => { parent.appendChild( node('div', [ - shade(), + form.sticky({ + children: [new ShadeBar().shadeBar()] + }), themeSetting.control.color.shade.helper.wrap(), node('hr'), themeSetting.control.color.range.primary.h.wrap(), @@ -835,8 +808,7 @@ themeSetting.font = (parent) => { ], groupName: 'theme-font-display-style', path: 'theme.font.display.style', - inputButton: true, - inputHide: true, + buttonHideInput: true, inputButtonStyle: ['line'], action: () => { applyCSSVar('theme.font.display.style'); @@ -924,8 +896,7 @@ themeSetting.font = (parent) => { ], groupName: 'theme-font-ui-style', path: 'theme.font.ui.style', - inputButton: true, - inputHide: true, + buttonHideInput: true, inputButtonStyle: ['line'], action: () => { applyCSSVar('theme.font.ui.style'); diff --git a/src/component/shadeBar/index.css b/src/component/shadeBar/index.css new file mode 100644 index 00000000..8d4b2998 --- /dev/null +++ b/src/component/shadeBar/index.css @@ -0,0 +1,80 @@ +.shade-bar { + display: flex; + justify-content: center; + align-items: center; +} + +.shade-bar-shade { + width: 100%; + height: 100%; +} + +.shade-bar-shade-01 { + background-color: hsl(var(--theme-primary-010)); + color: hsl(var(--theme-primary-text-010)); +} + +.shade-bar-shade-02 { + background-color: hsl(var(--theme-primary-020)); + color: hsl(var(--theme-primary-text-020)); +} + +.shade-bar-shade-03 { + background-color: hsl(var(--theme-primary-030)); + color: hsl(var(--theme-primary-text-030)); +} + +.shade-bar-shade-04 { + background-color: hsl(var(--theme-primary-040)); + color: hsl(var(--theme-primary-text-040)); +} + +.shade-bar-shade-05 { + background-color: hsl(var(--theme-primary-050)); + color: hsl(var(--theme-primary-text-050)); +} + +.shade-bar-shade-06 { + background-color: hsl(var(--theme-primary-060)); + color: hsl(var(--theme-primary-text-060)); +} + +.shade-bar-shade-07 { + background-color: hsl(var(--theme-primary-070)); + color: hsl(var(--theme-primary-text-070)); +} + +.shade-bar-shade-08 { + background-color: hsl(var(--theme-primary-080)); + color: hsl(var(--theme-primary-text-080)); +} + +.shade-bar-shade-09 { + background-color: hsl(var(--theme-primary-090)); + color: hsl(var(--theme-primary-text-090)); +} + +.shade-bar-shade-10 { + background-color: hsl(var(--theme-primary-100)); + color: hsl(var(--theme-primary-text-100)); +} + +.shade-bar-shade-11 { + background-color: hsl(var(--theme-primary-110)); + color: hsl(var(--theme-primary-text-110)); +} + +.shade-bar-shade-12 { + background-color: hsl(var(--theme-primary-120)); + color: hsl(var(--theme-primary-text-120)); +} + +.shade-bar-shade-13 { + background-color: hsl(var(--theme-primary-130)); + color: hsl(var(--theme-primary-text-130)); +} + +.shade-bar-shade-14 { + background-color: hsl(var(--theme-primary-140)); + color: hsl(var(--theme-primary-text-140)); +} \ No newline at end of file diff --git a/src/component/shadeBar/index.js b/src/component/shadeBar/index.js new file mode 100644 index 00000000..014ab138 --- /dev/null +++ b/src/component/shadeBar/index.js @@ -0,0 +1,55 @@ +import * as form from '../form'; + +import { node } from '../../utility/node'; +import { state } from '../state'; + +import './index.css'; + +export const ShadeBar = function() { + + this.element = { + shadeBar: node('div|class:shade-bar') + }; + + this.assemble = () => { + + const formGroup = form.group({ + block: true, + border: true + }); + + const shadeCount = state.get.current().theme.color.shades; + + for (var i = 1; i <= shadeCount; i++) { + let count = i; + + if (count < 10) { count = '0' + count; } + + formGroup.appendChild( + node('div|class:form-group-text form-group-text-borderless', [ + node('div|class:shade-bar-shade shade-bar-shade-' + count + '') + ]) + ); + } + + this.element.shadeBar.appendChild(formGroup); + + }; + + this.wrap = () => { + + return form.wrap({ + children: [ + this.element.shadeBar + ] + }) + + }; + + this.shadeBar = () => { + return this.element.shadeBar; + }; + + this.assemble(); + +}; \ No newline at end of file diff --git a/src/component/showcase/index.css b/src/component/showcase/index.css new file mode 100644 index 00000000..d3d5a2f1 --- /dev/null +++ b/src/component/showcase/index.css @@ -0,0 +1,22 @@ +.showcase { + padding: 4em; + width: 100vw; + min-height: 100vh; + z-index: var(--z-index-showcase); +} + +.showcase { + display: grid; + gap: 4em; + grid-template-columns: 1fr 3fr; + grid-template-areas: + "side content" +} + +.showcase-side { + grid-area: side; +} + +.showcase-content { + grid-area: content; +} \ No newline at end of file diff --git a/src/component/showcase/index.js b/src/component/showcase/index.js new file mode 100644 index 00000000..bebbf47c --- /dev/null +++ b/src/component/showcase/index.js @@ -0,0 +1,683 @@ +import { state } from '../state'; +import { theme } from '../theme'; +import { icon } from '../icon'; + +import * as form from '../form'; + +import { Button } from '../button'; +import { Collapse } from '../collapse'; +import { PresetThemeTile } from '../presetThemeTile'; +import { AccentPresetButton } from '../accentPresetButton'; +import { Alert } from '../alert'; +import { Link } from '../link'; +import { Dropdown } from '../dropdown'; +import { ShadeBar } from '../shadeBar'; +import { Tab } from '../tab'; + +import { Control_helperText } from '../control/helperText'; +import { Control_radio } from '../control/radio'; +import { Control_checkbox } from '../control/checkbox'; +import { Control_slider } from '../control/slider'; +import { Control_sliderSlim } from '../control/sliderSlim'; +import { Control_sliderDouble } from '../control/sliderDouble'; +import { Control_colorMixer } from '../control/colorMixer'; +import { Control_text } from '../control/text'; +import { Control_textarea } from '../control/textarea'; +import { Control_textReset } from '../control/textReset'; +import { Control_inputButton } from '../control/inputButton'; +import { Control_radioGrid } from '../control/radioGrid'; +import { Control_select } from '../control/select'; + +import { node } from '../../utility/node'; +import { clearChildNode } from '../../utility/clearChildNode'; +import { applyCSSVar } from '../../utility/applyCSSVar'; +import { applyCSSClass } from '../../utility/applyCSSClass'; +import { applyCSSState } from '../../utility/applyCSSState'; +import { trimString } from '../../utility/trimString'; +import { isValidString } from '../../utility/isValidString'; + +import './index.css'; + +const showcase = {}; + +showcase.element = { + showcase: node('div|class:showcase') +}; + +showcase.state = {}; + +showcase.state.current = {}; + +showcase.state.default = { + disable: false, + input: { + radio: { a: '1', b: '1', c: '1', grid3x3: '1', grid3x1: '1', grid1x3: '1' }, + checkbox: { a: true, b: true, c: false, d: false, e: false }, + color: { hsl: { h: 221, s: 100, l: 50 }, rgb: { r: 0, g: 80, b: 255 } }, + number: 50, + numberRange: { start: 20, end: 80 }, + }, + select: 'Alpha', +}; + +showcase.state.minMax = { + input: { + color: { + hsl: { h: { min: 0, max: 359 }, s: { min: 0, max: 100 }, l: { min: 0, max: 100 } }, + rgb: { r: { min: 0, max: 255 }, g: { min: 0, max: 255 }, b: { min: 0, max: 255 } }, + }, + number: { min: 0, max: 100 }, + numberRange: { start: { min: 0, max: 100 }, end: { min: 0, max: 100 } }, + } +}; + +showcase.state.get = { + current: () => { return showcase.state.current; }, + default: () => { return JSON.parse(JSON.stringify(showcase.state.default)); }, + minMax: () => { return JSON.parse(JSON.stringify(showcase.state.minMax)); }, +}; + +showcase.state.current = showcase.state.get.default(); + +showcase.disable = () => { + + showcase.state.disable = !showcase.state.disable; + + if (showcase.state.disable) { + + showcase.control.side.disable.active(); + + showcase.control.input.radio.a.disable(); + showcase.control.input.radio.b.disable(); + showcase.control.input.radio.c.disable(); + showcase.control.input.radio.grid3x3.disable(); + showcase.control.input.radio.grid3x1.disable(); + showcase.control.input.radio.grid1x3.disable(); + showcase.control.input.checkbox.a.disable(); + showcase.control.input.checkbox.b.disable(); + showcase.control.input.checkbox.c.disable(); + showcase.control.input.checkbox.d.disable(); + showcase.control.input.checkbox.e.disable(); + showcase.control.button.a.disable(); + showcase.control.button.b.disable(); + showcase.control.button.c.disable(); + showcase.control.button.d.disable(); + showcase.control.button.e.disable(); + showcase.control.button.f.disable(); + showcase.control.button.dropdown.disable(); + showcase.control.tab.disable(); + showcase.control.input.text.disable(); + showcase.control.input.textarea.disable(); + showcase.control.input.color.disable(); + showcase.control.input.number.disable(); + showcase.control.input.numberRange.disable(); + showcase.control.select.disable(); + + } else { + + showcase.control.side.disable.deactive(); + + showcase.control.input.radio.a.enable(); + showcase.control.input.radio.b.enable(); + showcase.control.input.radio.c.enable(); + showcase.control.input.radio.grid3x3.enable(); + showcase.control.input.radio.grid3x1.enable(); + showcase.control.input.radio.grid1x3.enable(); + showcase.control.input.checkbox.a.enable(); + showcase.control.input.checkbox.b.enable(); + showcase.control.input.checkbox.c.enable(); + showcase.control.input.checkbox.d.enable(); + showcase.control.input.checkbox.e.enable(); + showcase.control.button.a.enable(); + showcase.control.button.b.enable(); + showcase.control.button.c.enable(); + showcase.control.button.d.enable(); + showcase.control.button.e.enable(); + showcase.control.button.f.enable(); + showcase.control.button.dropdown.enable(); + showcase.control.tab.enable(); + showcase.control.input.text.enable(); + showcase.control.input.textarea.enable(); + showcase.control.input.color.enable(); + showcase.control.input.number.enable(); + showcase.control.input.numberRange.enable(); + showcase.control.select.enable(); + + } + +}; + +showcase.control = { + side: {}, + input: {}, + dropdown: {}, + button: {}, + bookmark: {}, + icon: [], +}; + +showcase.area = {}; + +showcase.area.render = () => { + + showcase.area.assemble(); + + const body = document.querySelector('body'); + + body.appendChild(showcase.element.showcase); + +}; + +showcase.area.assemble = () => { + + showcase.control.side = { + shade: new ShadeBar(), + style: new Control_radio({ + object: state.get.current(), + buttonHideInput: true, + inputButtonStyle: ['line'], + radioGroup: [ + { id: 'theme-style-dark', labelText: 'Dark', value: 'dark' }, + { id: 'theme-style-light', labelText: 'Light', value: 'light' }, + { id: 'theme-style-system', labelText: 'Auto', value: 'system' } + ], + groupName: 'theme-style', + path: 'theme.style', + action: () => { + theme.style.initial(); + applyCSSClass('theme.style'); + } + }), + disable: new Button({ text: 'Disable', style: ['line'], func: () => { showcase.disable(); } }), + h: new Control_sliderSlim({ + object: state.get.current(), + path: 'theme.color.range.primary.h', + id: 'theme-color-range-primary-h', + labelText: 'Hue', + value: state.get.current().theme.color.range.primary.h, + defaultValue: state.get.default().theme.color.range.primary.h, + min: state.get.minMax().theme.color.range.primary.h.min, + max: state.get.minMax().theme.color.range.primary.h.max, + style: 'hue', + action: () => { + theme.color.render(); + } + }), + s: new Control_sliderSlim({ + object: state.get.current(), + path: 'theme.color.range.primary.s', + id: 'theme-color-range-primary-s', + labelText: 'Saturation', + value: state.get.current().theme.color.range.primary.s, + defaultValue: state.get.default().theme.color.range.primary.s, + min: state.get.minMax().theme.color.range.primary.s.min, + max: state.get.minMax().theme.color.range.primary.s.max, + style: 'saturation', + action: () => { + theme.color.render(); + } + }), + contrast: new Control_sliderDouble({ + object: state.get.current(), + labelText: 'Contrast', + style: 'contrast', + left: { + path: 'theme.color.contrast.start', + id: 'theme-color-contrast-start', + labelText: 'Contrast start', + value: state.get.current().theme.color.contrast.start, + defaultValue: state.get.default().theme.color.contrast.start, + min: state.get.minMax().theme.color.contrast.start.min, + max: state.get.minMax().theme.color.contrast.start.max, + action: () => { + theme.color.render(); + } + }, + right: { + path: 'theme.color.contrast.end', + id: 'theme-color-contrast-end', + labelText: 'Contrast end', + value: state.get.current().theme.color.contrast.end, + defaultValue: state.get.default().theme.color.contrast.end, + min: state.get.minMax().theme.color.contrast.end.min, + max: state.get.minMax().theme.color.contrast.end.max, + action: () => { + theme.color.render(); + } + } + }), + accent: new Control_colorMixer({ + object: state.get.current(), + path: 'theme.accent', + id: 'theme-accent', + labelText: 'Accent', + defaultValue: state.get.default().theme.accent.rgb, + minMaxObject: state.get.minMax(), + randomColor: true, + action: () => { + applyCSSVar([ + 'theme.accent.rgb.r', + 'theme.accent.rgb.g', + 'theme.accent.rgb.b', + 'theme.accent.hsl.h', + 'theme.accent.hsl.s', + 'theme.accent.hsl.l' + ]); + } + }), + shadow: new Control_sliderSlim({ + object: state.get.current(), + path: 'theme.shadow', + id: 'theme-shadow', + labelText: 'Shadow', + value: state.get.current().theme.shadow, + defaultValue: state.get.default().theme.shadow, + min: state.get.minMax().theme.shadow.min, + max: state.get.minMax().theme.shadow.max, + action: () => { + applyCSSVar('theme.shadow'); + } + }), + radius: new Control_sliderSlim({ + object: state.get.current(), + path: 'theme.radius', + id: 'theme-radius', + labelText: 'Radius', + value: state.get.current().theme.radius, + defaultValue: state.get.default().theme.radius, + min: state.get.minMax().theme.radius.min, + max: state.get.minMax().theme.radius.max, + action: () => { + applyCSSVar('theme.radius'); + } + }), + }; + + showcase.control.input.radio = { + a: new Control_radio({ + object: showcase.state.get.current(), + radioGroup: [ + { id: 'input-radio-a-1', labelText: 'Radio 1', description: 'Description for radio A 1', value: '1' }, + { id: 'input-radio-a-2', labelText: 'Radio 2', description: 'Description for radio A 2', value: '2' }, + { id: 'input-radio-a-3', labelText: 'Radio 3', description: 'Description for radio A 3', value: '3' } + ], + label: 'Radio group A', + groupName: 'input-radio-a', + path: 'input.radio.a', + action: () => { console.log(showcase.state.get.current()); } + }), + b: new Control_radio({ + object: showcase.state.get.current(), + radioGroup: [ + { id: 'input-radio-b-1', labelText: 'Radio 1', value: '1' }, + { id: 'input-radio-b-2', labelText: 'Radio 2', value: '2' }, + { id: 'input-radio-b-3', labelText: 'Radio 3', value: '3' } + ], + groupName: 'input-radio-b', + path: 'input.radio.b', + inputButtonStyle: ['line'], + action: () => { console.log(showcase.state.get.current()); } + }), + c: new Control_radio({ + object: showcase.state.get.current(), + radioGroup: [ + { id: 'input-radio-c-1', labelText: 'Radio 1', value: '1' }, + { id: 'input-radio-c-2', labelText: 'Radio 2', value: '2' }, + { id: 'input-radio-c-3', labelText: 'Radio 3', value: '3' } + ], + label: 'Radio group', + groupName: 'input-radio-c', + path: 'input.radio.c', + buttonHideInput: true, + inputButtonStyle: ['ring'], + action: () => { console.log(showcase.state.get.current()); } + }), + grid3x3: new Control_radioGrid({ + object: showcase.state.get.current(), + radioGroup: [ + { id: 'input-radio-grid3x3-1', labelText: '1', value: '1', position: 1 }, + { id: 'input-radio-grid3x3-2', labelText: '2', value: '2', position: 2 }, + { id: 'input-radio-grid3x3-3', labelText: '3', value: '3', position: 3 }, + { id: 'input-radio-grid3x3-4', labelText: '4', value: '4', position: 4 }, + { id: 'input-radio-grid3x3-5', labelText: '5', value: '5', position: 5 }, + { id: 'input-radio-grid3x3-6', labelText: '6', value: '6', position: 6 }, + { id: 'input-radio-grid3x3-7', labelText: '7', value: '7', position: 7 }, + { id: 'input-radio-grid3x3-8', labelText: '8', value: '8', position: 8 }, + { id: 'input-radio-grid3x3-9', labelText: '9', value: '9', position: 9 } + ], + // label: 'Radio grid', + groupName: 'input-radio-grid3x3', + path: 'input.radio.grid3x3', + gridSize: '3x3', + action: () => { console.log(showcase.state.get.current()); } + }), + grid1x3: new Control_radioGrid({ + object: showcase.state.get.current(), + radioGroup: [ + { id: 'input-radio-grid1x3-1', labelText: '1', value: '1', position: 1 }, + { id: 'input-radio-grid1x3-2', labelText: '2', value: '2', position: 2 }, + { id: 'input-radio-grid1x3-3', labelText: '3', value: '3', position: 3 } + ], + // label: 'Radio grid vertical', + groupName: 'input-radio-grid1x3', + path: 'input.radio.grid1x3', + gridSize: '1x3', + action: () => { console.log(showcase.state.get.current()); } + }), + grid3x1: new Control_radioGrid({ + object: showcase.state.get.current(), + radioGroup: [ + { id: 'input-radio-grid3x1-1', labelText: '1', value: '1', position: 1 }, + { id: 'input-radio-grid3x1-2', labelText: '2', value: '2', position: 2 }, + { id: 'input-radio-grid3x1-3', labelText: '3', value: '3', position: 3 } + ], + // label: 'Radio grid horizontal', + groupName: 'input-radio-grid3x1', + path: 'input.radio.grid3x1', + gridSize: '3x1', + action: () => { console.log(showcase.state.get.current()); } + }), + }; + + showcase.control.input.checkbox = { + a: new Control_checkbox({ + object: showcase.state.get.current(), + id: 'input-checkbox-a', + path: 'input.checkbox.a', + labelText: 'Checkbox A', + description: 'Description for checkbox A', + action: () => { console.log(showcase.state.get.current()); } + }), + b: new Control_checkbox({ + object: showcase.state.get.current(), + id: 'input-checkbox-b', + path: 'input.checkbox.b', + labelText: 'Checkbox B', + description: 'Description for checkbox B', + action: () => { console.log(showcase.state.get.current()); } + }), + c: new Control_checkbox({ + object: showcase.state.get.current(), + id: 'input-checkbox-c', + path: 'input.checkbox.c', + labelText: 'Checkbox C', + description: 'Description for checkbox C', + action: () => { console.log(showcase.state.get.current()); } + }), + d: new Control_checkbox({ + object: showcase.state.get.current(), + id: 'input-checkbox-d', + path: 'input.checkbox.d', + labelText: 'Checkbox D', + inputButtonStyle: ['line'], + action: () => { console.log(showcase.state.get.current()); } + }), + e: new Control_checkbox({ + object: showcase.state.get.current(), + id: 'input-checkbox-e', + path: 'input.checkbox.e', + labelText: 'Checkbox E', + buttonHideInput: true, + inputButtonStyle: ['line'], + action: () => { console.log(showcase.state.get.current()); } + }), + }; + + showcase.control.input.text = new Control_text({ labelText: 'Text', placeholder: 'Placeholder' }); + + showcase.control.input.textarea = new Control_textarea({ labelText: 'Textarea', placeholder: 'Placeholder' }); + + showcase.control.input.color = new Control_colorMixer({ + object: showcase.state.get.current(), + path: 'input.color', + id: 'input-color', + labelText: 'Colour', + defaultValue: showcase.state.get.default().input.color.rgb, + minMaxObject: showcase.state.get.minMax(), + randomColor: true, + action: () => { console.log(showcase.state.get.current()); } + }); + + showcase.control.input.number = new Control_slider({ + object: showcase.state.get.current(), + path: 'input.number', + id: 'input-number', + labelText: 'Number', + value: showcase.state.get.current().input.number, + defaultValue: showcase.state.get.default().input.number, + min: showcase.state.get.minMax().input.number.min, + max: showcase.state.get.minMax().input.number.max, + action: () => { console.log(showcase.state.get.current()); } + }); + + showcase.control.input.numberRange = new Control_sliderDouble({ + object: showcase.state.get.current(), + labelText: 'Number range', + left: { + path: 'input.numberRange.start', + id: 'input-numberRange-start', + labelText: 'Start', + value: showcase.state.get.current().input.numberRange.start, + defaultValue: showcase.state.get.default().input.numberRange.start, + min: showcase.state.get.minMax().input.numberRange.start.min, + max: showcase.state.get.minMax().input.numberRange.start.max, + action: () => { console.log(showcase.state.get.current()); } + }, + right: { + path: 'input.numberRange.end', + id: 'input-numberRange-end', + labelText: 'End', + value: showcase.state.get.current().input.numberRange.end, + defaultValue: showcase.state.get.default().input.numberRange.end, + min: showcase.state.get.minMax().input.numberRange.end.min, + max: showcase.state.get.minMax().input.numberRange.end.max, + action: () => { console.log(showcase.state.get.current()); } + } + }); + + showcase.control.tab = new Tab({ + group: [{ + tabText: 'Tab 1', + area: node('div', [node('p:Tabbed content 1')]), + active: true + }, { + tabText: 'Tab 2', + area: node('div', [node('p:Tabbed content 2')]), + active: false + }, { + tabText: 'Tab 3', + area: node('div', [node('p:Tabbed content 3')]), + active: false + }, { + tabText: 'Tab 4', + area: node('div', [node('p:Tabbed content 4')]), + active: false + }, { + tabText: 'Tab 5', + area: node('div', [node('p:Tabbed content 5')]), + active: false + }, { + tabText: 'Tab 6', + area: node('div', [node('p:Tabbed content 6')]), + active: false + }] + }); + + showcase.control.select = new Control_select({ + object: showcase.state.get.current(), + path: 'select', + id: 'select', + labelText: 'Select', + option: ['Alpha', 'Beta', 'Gamma'], + selected: showcase.state.get.current().select, + action: () => { console.log(showcase.state.get.current()); } + }); + + showcase.control.button = { + a: new Button({ text: 'Button' }), + b: new Button({ text: 'Button line', style: ['line'] }), + c: new Button({ text: 'Button ring', style: ['ring'] }), + d: new Button({ text: 'Button small', style: ['line'], size: 'small' }), + e: new Button({ text: 'Button medium', style: ['line'] }), + f: new Button({ text: 'Button large', style: ['line'], size: 'large' }), + dropdown: new Dropdown({ + text: 'Dropdown', + buttonStyle: ['line'], + iconName: 'add', + persist: true, + menuItem: [ + { text: 'One', iconName: 'addGroup' }, + { text: 'Two', iconName: 'addBookmark' } + ] + }), + }; + + for (let key in icon.all) { + showcase.control.icon.push( + form.wrap({ + children: [ + node('div|class:d-flex d-horizontal d-gap d-center', [ + node('div', [icon.render(key)]) + ]) + ] + }) + ); + }; + + showcase.element.showcase.appendChild( + node('div|class:showcase-side', [ + showcase.control.side.shade.shadeBar(), + form.wrap({ + children: [ + form.inline({ + align: 'top', + gap: 'small', + children: [ + showcase.control.side.style.inputButton(), + showcase.control.side.disable.wrap(), + ] + }) + ] + }), + showcase.control.side.h.wrap(), + showcase.control.side.s.wrap(), + showcase.control.side.contrast.wrap(), + showcase.control.side.accent.wrap(), + showcase.control.side.shadow.wrap(), + showcase.control.side.radius.wrap(), + ]) + ); + + showcase.element.showcase.appendChild( + node('div|class:showcase-content', [ + showcase.control.input.radio.a.inline(), + node('hr'), + form.wrap({ + children: [ + form.inline({ + gap: 'large', + children: [ + showcase.control.input.checkbox.a.wrap(), + showcase.control.input.checkbox.b.wrap(), + showcase.control.input.checkbox.c.wrap(), + ] + }), + ] + }), + node('hr'), + form.wrap({ + children: [ + form.inline({ + align: 'top', + children: [ + showcase.control.input.radio.b.inputButton(), + showcase.control.input.radio.c.inputButton(), + ] + }) + ] + }), + form.wrap({ + children: [ + form.inline({ + align: 'top', + children: [ + showcase.control.input.checkbox.d.inputButton(), + showcase.control.input.checkbox.e.inputButton(), + ] + }), + ] + }), + node('hr'), + form.wrap({ + children: [ + form.inline({ + align: 'center', + children: [ + showcase.control.input.radio.grid3x3.wrap(), + showcase.control.input.radio.grid1x3.wrap(), + showcase.control.input.radio.grid3x1.wrap(), + ] + }), + ] + }), + node('hr'), + form.wrap({ + children: [ + form.inline({ + gap: 'small', + children: [ + showcase.control.button.a.wrap(), + showcase.control.button.b.wrap(), + showcase.control.button.c.wrap(), + ] + }) + ] + }), + form.wrap({ + children: [ + form.inline({ + gap: 'small', + children: [ + showcase.control.button.d.wrap(), + showcase.control.button.e.wrap(), + showcase.control.button.f.wrap(), + ] + }) + ] + }), + form.wrap({ + children: [ + showcase.control.button.dropdown.toggle + ] + }), + node('hr'), + showcase.control.tab.tab(), + showcase.control.input.text.wrap(), + showcase.control.input.textarea.wrap(), + showcase.control.input.color.wrap(), + showcase.control.input.number.wrap(), + showcase.control.input.numberRange.wrap(), + showcase.control.select.wrap(), + node('hr'), + form.wrap({ + children: [ + form.inline({ + gap: 'small', + wrap: true, + equalGap: true, + children: showcase.control.icon + }) + ] + }), + ]) + ); + +}; + +showcase.area.clear = () => { + + clearChildNode(showcase.element.showcase); + +}; + +export { showcase }; \ No newline at end of file diff --git a/src/component/tab/index.css b/src/component/tab/index.css index a1484ed2..a42e66e9 100644 --- a/src/component/tab/index.css +++ b/src/component/tab/index.css @@ -61,9 +61,19 @@ transition: background-color var(--layout-duration-01), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast); } +.tab.disabled .tab-nav-button { + background-color: transparent; +} + +.tab.disabled .tab-nav-button.active { + background-color: hsl(var(--button-background-disabled)); + color: hsl(var(--button-text-disabled)); +} + .tab-nav-indicator { background-color: rgb(var(--theme-accent)); border-radius: calc(var(--theme-radius) * 0.01em); + opacity: 1; position: absolute; top: calc(var(--tab-indicator-top) * 1px); left: calc(var(--tab-indicator-left) * 1px); @@ -76,9 +86,13 @@ .tab-nav-indicator-active .tab-nav-indicator { animation: none; - transition: top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast); + transition: top var(--layout-transition-extra-fast), left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast), height var(--layout-transition-extra-fast), opacity var(--layout-transition-extra-fast); +} + +.tab.disabled .tab-nav-indicator { + opacity: 0; } .tab-content { grid-area: content; -} +} \ No newline at end of file diff --git a/src/component/tab/index.js b/src/component/tab/index.js index ec45f809..61a35a93 100644 --- a/src/component/tab/index.js +++ b/src/component/tab/index.js @@ -4,7 +4,7 @@ import { node } from '../../utility/node'; import './index.css'; -export const Tab = function ({ +export const Tab = function({ group = [] } = {}) { @@ -30,7 +30,7 @@ export const Tab = function ({ item.toggle = new Button({ text: item.tabText, - classList: ['tab-nav-button', 'form-group-item-equal'], + classList: ['tab-nav-button'], func: () => { this.deactive(); @@ -76,7 +76,6 @@ export const Tab = function ({ this.element.tab.style.setProperty('--tab-indicator-width', Math.round(itemBox.width)); this.element.tab.style.setProperty('--tab-indicator-height', Math.round(itemBox.height)); - } }); @@ -135,8 +134,32 @@ export const Tab = function ({ }; + this.disable = () => { + + this.element.tab.classList.add('disabled'); + + group.forEach((item) => { + + item.toggle.disable() + + }); + + }; + + this.enable = () => { + + this.element.tab.classList.remove('disabled'); + + group.forEach((item) => { + + item.toggle.enable() + + }); + + }; + this.assemble(); this.content.render(); -}; +}; \ No newline at end of file diff --git a/src/component/theme/index.css b/src/component/theme/index.css index e9dbb970..f47c6a32 100644 --- a/src/component/theme/index.css +++ b/src/component/theme/index.css @@ -221,84 +221,6 @@ 0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4))); } -.theme-color-box { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; -} - -.theme-color-shade-01 { - background-color: hsl(var(--theme-primary-010)); - color: hsl(var(--theme-primary-text-010)); -} - -.theme-color-shade-02 { - background-color: hsl(var(--theme-primary-020)); - color: hsl(var(--theme-primary-text-020)); -} - -.theme-color-shade-03 { - background-color: hsl(var(--theme-primary-030)); - color: hsl(var(--theme-primary-text-030)); -} - -.theme-color-shade-04 { - background-color: hsl(var(--theme-primary-040)); - color: hsl(var(--theme-primary-text-040)); -} - -.theme-color-shade-05 { - background-color: hsl(var(--theme-primary-050)); - color: hsl(var(--theme-primary-text-050)); -} - -.theme-color-shade-06 { - background-color: hsl(var(--theme-primary-060)); - color: hsl(var(--theme-primary-text-060)); -} - -.theme-color-shade-07 { - background-color: hsl(var(--theme-primary-070)); - color: hsl(var(--theme-primary-text-070)); -} - -.theme-color-shade-08 { - background-color: hsl(var(--theme-primary-080)); - color: hsl(var(--theme-primary-text-080)); -} - -.theme-color-shade-09 { - background-color: hsl(var(--theme-primary-090)); - color: hsl(var(--theme-primary-text-090)); -} - -.theme-color-shade-10 { - background-color: hsl(var(--theme-primary-100)); - color: hsl(var(--theme-primary-text-100)); -} - -.theme-color-shade-11 { - background-color: hsl(var(--theme-primary-110)); - color: hsl(var(--theme-primary-text-110)); -} - -.theme-color-shade-12 { - background-color: hsl(var(--theme-primary-120)); - color: hsl(var(--theme-primary-text-120)); -} - -.theme-color-shade-13 { - background-color: hsl(var(--theme-primary-130)); - color: hsl(var(--theme-primary-text-130)); -} - -.theme-color-shade-14 { - background-color: hsl(var(--theme-primary-140)); - color: hsl(var(--theme-primary-text-140)); -} - .background { position: fixed; top: 0; diff --git a/src/locale/en_GB/messages.json b/src/locale/en_GB/messages.json index 5b78d64b..7cff705b 100644 --- a/src/locale/en_GB/messages.json +++ b/src/locale/en_GB/messages.json @@ -15,22 +15,14 @@ "message": "Debug", "description": "Label for the settings menu navigation." }, - "menuNavDebugSubNavInput": { - "message": "Input", - "description": "Label for the settings menu navigation." - }, - "menuNavDebugSubNavButton": { - "message": "Button", + "menuNavDebugSubNavShowcase": { + "message": "Showcase", "description": "Label for the settings menu navigation." }, "menuNavDebugSubNavBookmark": { "message": "Bookmark", "description": "Label for the settings menu navigation." }, - "menuNavDebugSubNavIcon": { - "message": "Icon", - "description": "Label for the settings menu navigation." - }, "menuNavThemeLabel": { "message": "Theme", "description": "Label for the settings menu navigation." diff --git a/src/style/zindex/index.css b/src/style/zindex/index.css index fe9d3c94..d0913fb6 100644 --- a/src/style/zindex/index.css +++ b/src/style/zindex/index.css @@ -1,6 +1,7 @@ :root { --z-index-background: 1000; --z-index-layout: 2000; + --z-index-showcase: 2000; --z-index-toolbar: 3000; --z-index-edge: 4000; --z-index-dropdown: 5000; @@ -8,4 +9,4 @@ --z-index-menu: 7000; --z-index-modal: 8000; --z-index-suggest: 9000; -} +} \ No newline at end of file