showcase controls
This commit is contained in:
Kuldeep Matharu
GitHub
parent
f5edd20205
commit
1b03de9bae
|
|
@ -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;
|
||||
};
|
||||
|
||||
};
|
||||
};
|
||||
|
|
@ -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;
|
||||
};
|
||||
|
||||
};
|
||||
};
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
};
|
||||
|
||||
};
|
||||
};
|
||||
|
|
@ -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();
|
||||
};
|
||||
|
||||
};
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
||||
this.close();
|
||||
if (!path.includes(this.element.toggle.button) && !path.includes(this.element.menu)) {
|
||||
|
||||
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();
|
||||
|
||||
};
|
||||
};
|
||||
|
|
@ -504,4 +504,4 @@
|
|||
.form-group>select.form-group-item-equal,
|
||||
.form-group>input[type].form-group-item-equal {
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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':
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -119,6 +119,11 @@ layout.area = {
|
|||
},
|
||||
clear: () => {
|
||||
clearChildNode(layout.element.layout);
|
||||
},
|
||||
remove: () => {
|
||||
const body = document.querySelector('body');
|
||||
|
||||
body.removeChild(layout.element.layout);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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'] },
|
||||
|
|
|
|||
|
|
@ -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.showcase = (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.control.showcase.start = new Button({
|
||||
text: 'Showcase controls',
|
||||
style: ['line'],
|
||||
func: () => {
|
||||
|
||||
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); }
|
||||
})
|
||||
};
|
||||
menu.close();
|
||||
|
||||
layout.area.remove();
|
||||
|
||||
showcase.area.render();
|
||||
|
||||
showcase.control.tab.update();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
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.button.ring = new Button({ text: 'Ring button', size: 'medium', style: ['ring'] });
|
||||
|
||||
debugSetting.control.button.line = new Button({ text: 'Line button', size: 'medium', style: ['line'] });
|
||||
|
||||
debugSetting.control.button.ring = new Button({ text: 'Ring button', size: 'medium', style: ['ring'] });
|
||||
|
||||
debugSetting.control.button.link = new Button({ text: 'Link button', size: 'medium', style: ['link'] });
|
||||
|
||||
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 };
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
||||
};
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 };
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
||||
};
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue