mirror of https://github.com/Budibase/budibase.git
Conor_Mack
6 years ago
8 changed files with 980 additions and 995 deletions
@ -1,54 +1,42 @@ |
|||
export const generate_screen_css = component_arr => { |
|||
let styles = "" |
|||
for (const { _styles, _id, _children, _component } of component_arr) { |
|||
let [componentName] = _component.match(/[a-z]*$/) |
|||
Object.keys(_styles).forEach(selector => { |
|||
const cssString = generate_css(_styles[selector]) |
|||
if (cssString) { |
|||
styles += apply_class(_id, componentName, cssString, selector) |
|||
} |
|||
}) |
|||
if (_children && _children.length) { |
|||
styles += generate_screen_css(_children) + "\n" |
|||
} |
|||
} |
|||
return styles.trim() |
|||
} |
|||
export const generate_screen_css = (component_arr) => { |
|||
let styles = ''; |
|||
for (const { _styles, _id, _children, _component } of component_arr) { |
|||
let [ componentName ] = _component.match(/[a-z]*$/); |
|||
Object.keys(_styles).forEach((selector) => { |
|||
const cssString = generate_css(_styles[selector]); |
|||
if (cssString) { |
|||
styles += apply_class(_id, componentName, cssString, selector); |
|||
} |
|||
}); |
|||
if (_children && _children.length) { |
|||
styles += generate_screen_css(_children) + '\n'; |
|||
} |
|||
} |
|||
return styles.trim(); |
|||
}; |
|||
|
|||
export const generate_css = style => { |
|||
let cssString = Object.entries(style).reduce((str, [key, value]) => { |
|||
//TODO Handle arrays and objects here also
|
|||
if (typeof value === "string") { |
|||
if (value) { |
|||
return (str += `${key}: ${value};\n`) |
|||
} |
|||
} else if (Array.isArray(value)) { |
|||
if (value.length > 0 && !value.every(v => v === "")) { |
|||
return (str += `${key}: ${value |
|||
.map(generate_array_styles) |
|||
.join(" ")};\n`)
|
|||
} |
|||
} |
|||
}, "") |
|||
export const generate_css = (style) => { |
|||
let cssString = Object.entries(style).reduce((str, [ key, value ]) => { |
|||
//TODO Handle arrays and objects here also
|
|||
if (typeof value === 'string') { |
|||
if (value) { |
|||
return (str += `${key}: ${value};\n`); |
|||
} |
|||
} else if (Array.isArray(value)) { |
|||
if (value.length > 0 && !value.every((v) => v === '')) { |
|||
return (str += `${key}: ${value.join(' ')};\n`); |
|||
} |
|||
} |
|||
}, ''); |
|||
|
|||
return (cssString || "").trim() |
|||
} |
|||
return (cssString || '').trim(); |
|||
}; |
|||
|
|||
export const generate_array_styles = item => { |
|||
let safeItem = item === "" ? 0 : item |
|||
let hasPx = new RegExp("px$") |
|||
if (!hasPx.test(safeItem)) { |
|||
return `${safeItem}px` |
|||
} else { |
|||
return safeItem |
|||
} |
|||
} |
|||
|
|||
export const apply_class = (id, name = "element", styles, selector) => { |
|||
if (selector === "normal") { |
|||
return `.${name}-${id} {\n${styles}\n}` |
|||
} else { |
|||
let sel = selector === "selected" ? "::selection" : `:${selector}` |
|||
return `.${name}-${id}${sel} {\n${styles}\n}` |
|||
} |
|||
} |
|||
export const apply_class = (id, name = 'element', styles, selector) => { |
|||
if (selector === 'normal') { |
|||
return `.${name}-${id} {\n${styles}\n}`; |
|||
} else { |
|||
let sel = selector === 'selected' ? '::selection' : `:${selector}`; |
|||
return `.${name}-${id}${sel} {\n${styles}\n}`; |
|||
} |
|||
}; |
|||
|
|||
File diff suppressed because it is too large
@ -1,365 +1,407 @@ |
|||
import Input from "../common/Input.svelte" |
|||
import OptionSelect from "./OptionSelect.svelte" |
|||
import InputGroup from "../common/Inputs/InputGroup.svelte" |
|||
import FlatButtonGroup from "./FlatButtonGroup.svelte" |
|||
import Input from '../common/Input.svelte'; |
|||
import OptionSelect from './OptionSelect.svelte'; |
|||
import InputGroup from '../common/Inputs/InputGroup.svelte'; |
|||
import FlatButtonGroup from './FlatButtonGroup.svelte'; |
|||
// import Colorpicker from "../common/Colorpicker.svelte"
|
|||
/* |
|||
TODO: Allow for default values for all properties |
|||
*/ |
|||
|
|||
export const layout = [ |
|||
{ |
|||
label: "Display", |
|||
key: "display", |
|||
control: OptionSelect, |
|||
initialValue: "Flex", |
|||
options: [ |
|||
{ label: "Flex", value: "flex" }, |
|||
{ label: "Inline Flex", value: "inline-flex" }, |
|||
], |
|||
}, |
|||
{ |
|||
label: "Direction", |
|||
key: "flex-direction", |
|||
control: FlatButtonGroup, |
|||
buttonProps: [ |
|||
{ icon: "ri-arrow-right-line", padding: "4px 8px", value: "row" }, |
|||
{ icon: "ri-arrow-left-line", padding: "4px 8px", value: "rowReverse" }, |
|||
{ icon: "ri-arrow-down-line", padding: "4px 8px", value: "column" }, |
|||
{ |
|||
icon: "ri-arrow-up-line", |
|||
padding: "4px 8px", |
|||
value: "columnReverse", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: "Justify", |
|||
key: "justify-content", |
|||
control: OptionSelect, |
|||
initialValue: "Flex Start", |
|||
options: [ |
|||
{ label: "Flex Start", value: "flex-start" }, |
|||
{ label: "Flex End", value: "flex-end" }, |
|||
{ label: "Center", value: "center" }, |
|||
{ label: "Space Between", value: "space-between" }, |
|||
{ label: "Space Around", value: "space-around" }, |
|||
{ label: "Space Evenly", value: "space-evenly" }, |
|||
], |
|||
}, |
|||
{ |
|||
label: "Align", |
|||
key: "align-items", |
|||
control: OptionSelect, |
|||
initialValue: "Flex Start", |
|||
options: [ |
|||
{ label: "Flex Start", value: "flex-start" }, |
|||
{ label: "Flex End", value: "flex-end" }, |
|||
{ label: "Center", value: "center" }, |
|||
{ label: "Baseline", value: "baseline" }, |
|||
{ label: "Stretch", value: "stretch" }, |
|||
], |
|||
}, |
|||
{ |
|||
label: "Wrap", |
|||
key: "flex-wrap", |
|||
control: OptionSelect, |
|||
options: [ |
|||
{ label: "wrap", value: "wrap" }, |
|||
{ label: "no wrap", value: "noWrap" }, |
|||
], |
|||
}, |
|||
] |
|||
{ |
|||
label: 'Display', |
|||
key: 'display', |
|||
control: OptionSelect, |
|||
initialValue: 'Flex', |
|||
options: [ { label: 'Flex', value: 'flex' }, { label: 'Inline Flex', value: 'inline-flex' } ] |
|||
}, |
|||
{ |
|||
label: 'Direction', |
|||
key: 'flex-direction', |
|||
control: FlatButtonGroup, |
|||
buttonProps: [ |
|||
{ icon: 'ri-arrow-right-line', padding: '0px 5px', value: 'row' }, |
|||
{ icon: 'ri-arrow-left-line', padding: '0px 5px', value: 'rowReverse' }, |
|||
{ icon: 'ri-arrow-down-line', padding: '0px 5px', value: 'column' }, |
|||
{ |
|||
icon: 'ri-arrow-up-line', |
|||
padding: '0px 5px', |
|||
value: 'columnReverse' |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Justify', |
|||
key: 'justify-content', |
|||
control: OptionSelect, |
|||
initialValue: 'Flex Start', |
|||
options: [ |
|||
{ label: 'Flex Start', value: 'flex-start' }, |
|||
{ label: 'Flex End', value: 'flex-end' }, |
|||
{ label: 'Center', value: 'center' }, |
|||
{ label: 'Space Between', value: 'space-between' }, |
|||
{ label: 'Space Around', value: 'space-around' }, |
|||
{ label: 'Space Evenly', value: 'space-evenly' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Align', |
|||
key: 'align-items', |
|||
control: OptionSelect, |
|||
initialValue: 'Flex Start', |
|||
options: [ |
|||
{ label: 'Flex Start', value: 'flex-start' }, |
|||
{ label: 'Flex End', value: 'flex-end' }, |
|||
{ label: 'Center', value: 'center' }, |
|||
{ label: 'Baseline', value: 'baseline' }, |
|||
{ label: 'Stretch', value: 'stretch' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Wrap', |
|||
key: 'flex-wrap', |
|||
control: OptionSelect, |
|||
options: [ { label: 'wrap', value: 'wrap' }, { label: 'no wrap', value: 'noWrap' } ] |
|||
} |
|||
]; |
|||
|
|||
const spacingMeta = [ |
|||
{ placeholder: "↑" }, |
|||
{ placeholder: "→" }, |
|||
{ placeholder: "↓" }, |
|||
{ placeholder: "←" }, |
|||
] |
|||
const spacingMeta = [ { placeholder: 'T' }, { placeholder: 'R' }, { placeholder: 'B' }, { placeholder: 'L' } ]; |
|||
|
|||
export const spacing = [ |
|||
{ label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, |
|||
{ |
|||
label: "Padding", |
|||
key: "padding", |
|||
control: InputGroup, |
|||
meta: spacingMeta, |
|||
}, |
|||
] |
|||
{ |
|||
label: 'Margin', |
|||
key: 'margin', |
|||
control: InputGroup, |
|||
meta: spacingMeta, |
|||
suffix: 'px', |
|||
defaultValue: [ '0', '0', '0', '0' ] |
|||
}, |
|||
{ |
|||
label: 'Padding', |
|||
key: 'padding', |
|||
control: InputGroup, |
|||
meta: spacingMeta, |
|||
suffix: 'px', |
|||
defaultValue: [ '0', '0', '0', '0' ] |
|||
} |
|||
]; |
|||
|
|||
export const size = [ |
|||
{ |
|||
label: "Width", |
|||
key: "width", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Height", |
|||
key: "height", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Min W", |
|||
key: "min-width", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Min H", |
|||
key: "min-height", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Max W", |
|||
key: "max-width", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Max H", |
|||
key: "max-height", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
] |
|||
{ |
|||
label: 'Width', |
|||
key: 'width', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Height', |
|||
key: 'height', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Min W', |
|||
key: 'min-width', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Min H', |
|||
key: 'min-height', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Max W', |
|||
key: 'max-width', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Max H', |
|||
key: 'max-height', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
} |
|||
]; |
|||
|
|||
export const position = [ |
|||
{ |
|||
label: "Position", |
|||
key: "position", |
|||
control: OptionSelect, |
|||
initialValue: "Wrap", |
|||
options: [ |
|||
{ label: "Static", value: "static" }, |
|||
{ label: "Relative", value: "relative" }, |
|||
{ label: "Fixed", value: "fixed" }, |
|||
{ label: "Absolute", value: "absolute" }, |
|||
{ label: "Sticky", value: "sticky" }, |
|||
], |
|||
}, |
|||
{ |
|||
label: "Top", |
|||
key: "top", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Right", |
|||
key: "right", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Bottom", |
|||
key: "bottom", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Left", |
|||
key: "left", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Z-index", |
|||
key: "z-index", |
|||
control: Input, |
|||
placeholder: "Num", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
] |
|||
{ |
|||
label: 'Position', |
|||
key: 'position', |
|||
control: OptionSelect, |
|||
initialValue: 'Wrap', |
|||
options: [ |
|||
{ label: 'Static', value: 'static' }, |
|||
{ label: 'Relative', value: 'relative' }, |
|||
{ label: 'Fixed', value: 'fixed' }, |
|||
{ label: 'Absolute', value: 'absolute' }, |
|||
{ label: 'Sticky', value: 'sticky' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Top', |
|||
key: 'top', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Right', |
|||
key: 'right', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Bottom', |
|||
key: 'bottom', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Left', |
|||
key: 'left', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Z-index', |
|||
key: 'z-index', |
|||
control: Input, |
|||
placeholder: 'num', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
} |
|||
]; |
|||
|
|||
export const typography = [ |
|||
{ |
|||
label: "Font", |
|||
key: "font-family", |
|||
control: OptionSelect, |
|||
defaultValue: "initial", |
|||
options: [ |
|||
"initial", |
|||
"Arial", |
|||
"Arial Black", |
|||
"Cursive", |
|||
"Courier", |
|||
"Comic Sans MS", |
|||
"Helvetica", |
|||
"Impact", |
|||
"Inter", |
|||
"Lucida Sans Unicode", |
|||
"Open Sans", |
|||
"Playfair", |
|||
"Roboto", |
|||
"Roboto Mono", |
|||
"Times New Roman", |
|||
"Verdana", |
|||
], |
|||
styleBindingProperty: "font-family", |
|||
}, |
|||
{ |
|||
label: "Weight", |
|||
key: "font-weight", |
|||
control: OptionSelect, |
|||
options: ["normal", "bold", "bolder", "lighter"], |
|||
}, |
|||
{ |
|||
label: "size", |
|||
key: "font-size", |
|||
defaultValue: "", |
|||
control: Input, |
|||
placeholder: "px", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Line H", |
|||
key: "line-height", |
|||
control: Input, |
|||
placeholder: "lh", |
|||
width: "48px", |
|||
textAlign: "center", |
|||
}, |
|||
{ |
|||
label: "Color", |
|||
key: "color", |
|||
control: Input, |
|||
}, |
|||
{ |
|||
label: "align", |
|||
key: "text-align", |
|||
control: FlatButtonGroup, |
|||
buttonProps: [ |
|||
{ icon: "ri-align-left", padding: "4px 8px", value: "left" }, |
|||
{ icon: "ri-align-center", padding: "4px 8px", value: "center" }, |
|||
{ icon: "ri-align-right", padding: "4px 8px", value: "right" }, |
|||
{ icon: "ri-align-justify", padding: "4px 8px", value: "justify" }, |
|||
], |
|||
}, |
|||
{ |
|||
label: "transform", |
|||
key: "text-transform", |
|||
control: FlatButtonGroup, |
|||
buttonProps: [ |
|||
{ text: "BB", padding: "4px 8px", fontWeight: 500, value: "uppercase" }, |
|||
{ text: "Bb", padding: "4px 8px", fontWeight: 500, value: "capitalize" }, |
|||
{ text: "bb", padding: "4px 8px", fontWeight: 500, value: "lowercase" }, |
|||
{ |
|||
text: "×", |
|||
padding: "4px 8px", |
|||
fontWeight: 500, |
|||
value: "none", |
|||
}, |
|||
], |
|||
}, |
|||
{ label: "style", key: "font-style", control: Input }, |
|||
] |
|||
{ |
|||
label: 'Font', |
|||
key: 'font-family', |
|||
control: OptionSelect, |
|||
defaultValue: 'initial', |
|||
options: [ |
|||
'initial', |
|||
'Arial', |
|||
'Arial Black', |
|||
'Cursive', |
|||
'Courier', |
|||
'Comic Sans MS', |
|||
'Helvetica', |
|||
'Impact', |
|||
'Inter', |
|||
'Lucida Sans Unicode', |
|||
'Open Sans', |
|||
'Playfair', |
|||
'Roboto', |
|||
'Roboto Mono', |
|||
'Times New Roman', |
|||
'Verdana' |
|||
], |
|||
styleBindingProperty: 'font-family' |
|||
}, |
|||
{ |
|||
label: 'Weight', |
|||
key: 'font-weight', |
|||
control: OptionSelect, |
|||
options: [ 'normal', 'bold', 'bolder', 'lighter' ] |
|||
}, |
|||
{ |
|||
label: 'size', |
|||
key: 'font-size', |
|||
defaultValue: '', |
|||
control: Input, |
|||
placeholder: 'px', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Line H', |
|||
key: 'line-height', |
|||
control: Input, |
|||
placeholder: 'lh', |
|||
width: '48px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Color', |
|||
key: 'color', |
|||
control: Input, |
|||
placeholder: "hex", |
|||
}, |
|||
{ |
|||
label: 'align', |
|||
key: 'text-align', |
|||
control: FlatButtonGroup, |
|||
buttonProps: [ |
|||
{ icon: 'ri-align-left', padding: '0px 5px', value: 'left' }, |
|||
{ icon: 'ri-align-center', padding: '0px 5px', value: 'center' }, |
|||
{ icon: 'ri-align-right', padding: '0px 5px', value: 'right' }, |
|||
{ icon: 'ri-align-justify', padding: '0px 5px', value: 'justify' } |
|||
] |
|||
}, |
|||
{ |
|||
label: 'transform', |
|||
key: 'text-transform', |
|||
control: FlatButtonGroup, |
|||
buttonProps: [ |
|||
{ text: 'BB', padding: '0px 5px', fontWeight: 500, value: 'uppercase' }, |
|||
{ text: 'Bb', padding: '0px 5px', fontWeight: 500, value: 'capitalize' }, |
|||
{ text: 'bb', padding: '0px 5px', fontWeight: 500, value: 'lowercase' }, |
|||
{ |
|||
text: '×', |
|||
padding: '0px 5px', |
|||
fontWeight: 500, |
|||
value: 'none' |
|||
} |
|||
] |
|||
}, |
|||
{ label: 'style', key: 'font-style', control: Input } |
|||
]; |
|||
|
|||
export const background = [ |
|||
{ |
|||
label: 'Background', |
|||
key: 'background', |
|||
control: Input, |
|||
}, |
|||
{ |
|||
label: "Background", |
|||
key: "background", |
|||
label: "Image", |
|||
key: "background-image", |
|||
control: Input, |
|||
placeholder: "src", |
|||
}, |
|||
{ label: "Image", key: "image", control: Input }, //custom
|
|||
] |
|||
]; |
|||
|
|||
export const border = [ |
|||
{ label: "Radius", key: "border-radius", control: Input }, |
|||
{ label: "Width", key: "border-width", control: Input }, //custom
|
|||
{ |
|||
label: "Color", |
|||
key: "border-color", |
|||
control: Input, |
|||
}, |
|||
{ |
|||
label: "Style", |
|||
key: "border-style", |
|||
control: OptionSelect, |
|||
options: [ |
|||
"none", |
|||
"hidden", |
|||
"dotted", |
|||
"dashed", |
|||
"solid", |
|||
"double", |
|||
"groove", |
|||
"ridge", |
|||
"inset", |
|||
"outset", |
|||
], |
|||
}, |
|||
] |
|||
{ |
|||
label: 'Radius', |
|||
key: 'border-radius', |
|||
control: Input, |
|||
width: '48px', |
|||
placeholder: 'px', |
|||
textAlign: 'center' |
|||
}, |
|||
{ |
|||
label: 'Width', |
|||
key: 'border-width', |
|||
control: Input, |
|||
width: '48px', |
|||
placeholder: 'px', |
|||
textAlign: 'center' |
|||
}, //custom
|
|||
{ |
|||
label: 'Color', |
|||
key: 'border-color', |
|||
control: Input |
|||
}, |
|||
{ |
|||
label: 'Style', |
|||
key: 'border-style', |
|||
control: OptionSelect, |
|||
options: [ 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' ] |
|||
} |
|||
]; |
|||
|
|||
export const effects = [ |
|||
{ label: "Opacity", key: "opacity", control: Input }, |
|||
{ |
|||
label: 'Opacity', |
|||
key: 'opacity', |
|||
control: Input, |
|||
width: '48px', |
|||
textAlign: 'center', |
|||
placeholder: '%' |
|||
}, |
|||
{ |
|||
label: 'Rotate', |
|||
key: 'transform', |
|||
control: Input, |
|||
width: '48px', |
|||
textAlign: 'center', |
|||
placeholder: 'deg' |
|||
}, //needs special control
|
|||
{ |
|||
label: "Rotate", |
|||
key: "transform", |
|||
control: OptionSelect, |
|||
options: [ |
|||
{ label: "None", value: "rotate(0deg)" }, |
|||
{ label: "45 degrees", value: "rotate(45deg)" }, |
|||
{ label: "90 degrees", value: "rotate(90deg)" }, |
|||
{ label: "135 degrees", value: "rotate(135deg)" }, |
|||
{ label: "180 degrees", value: "rotate(180deg)" }, |
|||
{ label: "225 degrees", value: "rotate(225deg)" }, |
|||
{ label: "270 degrees", value: "rotate(270deg)" }, |
|||
{ label: "315 degrees", value: "rotate(315deg)" }, |
|||
{ label: "360 degrees", value: "rotate(360deg)" }, |
|||
], |
|||
}, //needs special control
|
|||
{ label: "Shadow", key: "box-shadow", control: Input }, |
|||
] |
|||
label: "Shadow", |
|||
key: "box-shadow", |
|||
control: InputGroup, |
|||
meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }], |
|||
}, |
|||
]; |
|||
|
|||
export const transitions = [ |
|||
{ label: "Property", key: "transition-property", control: Input }, |
|||
{ label: "Duration", key: "transition-timing-function", control: Input }, |
|||
{ label: "Ease", key: "transition-ease", control: Input }, |
|||
] |
|||
{ |
|||
label: 'Property', |
|||
key: 'transition-property', |
|||
control: OptionSelect, |
|||
options: [ |
|||
'None', |
|||
'All', |
|||
'Background Color', |
|||
'Color', |
|||
'Font Size', |
|||
'Font Weight', |
|||
'Height', |
|||
'Margin', |
|||
'Opacity', |
|||
'Padding', |
|||
'Rotate', |
|||
'Shadow', |
|||
'Width' |
|||
] |
|||
}, |
|||
{ |
|||
label: 'Duration', |
|||
key: 'transition-timing-function', |
|||
control: Input, |
|||
width: '48px', |
|||
textAlign: 'center', |
|||
placeholder: 'sec' |
|||
}, |
|||
{ |
|||
label: 'Ease', |
|||
key: 'transition-ease', |
|||
control: OptionSelect, |
|||
options: [ 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' ] |
|||
} |
|||
]; |
|||
|
|||
export const all = { |
|||
layout, |
|||
spacing, |
|||
size, |
|||
position, |
|||
typography, |
|||
background, |
|||
border, |
|||
effects, |
|||
transitions, |
|||
} |
|||
layout, |
|||
spacing, |
|||
size, |
|||
position, |
|||
typography, |
|||
background, |
|||
border, |
|||
effects, |
|||
transitions |
|||
}; |
|||
|
|||
export function excludeProps(props, propsToExclude) { |
|||
const modifiedProps = {} |
|||
for (const prop in props) { |
|||
if (!propsToExclude.includes(prop)) { |
|||
modifiedProps[prop] = props[prop] |
|||
} |
|||
} |
|||
return modifiedProps |
|||
const modifiedProps = {}; |
|||
for (const prop in props) { |
|||
if (!propsToExclude.includes(prop)) { |
|||
modifiedProps[prop] = props[prop]; |
|||
} |
|||
} |
|||
return modifiedProps; |
|||
} |
|||
|
|||
Loading…
Reference in new issue