Property panel updates
This commit is contained in:
Conor_Mack
parent
91b88ecad7
commit
93ab8659ed
|
|
@ -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
Load diff
|
|
@ -1,17 +1,20 @@
|
|||
<script>
|
||||
import {buildStyle} from "../../helpers.js"
|
||||
import {onMount} from "svelte"
|
||||
import { buildStyle } from "../../helpers.js"
|
||||
export let value = ""
|
||||
export let textAlign = "left"
|
||||
export let width = "160px"
|
||||
export let placeholder = ""
|
||||
|
||||
let centerPlaceholder = textAlign === "center"
|
||||
|
||||
let style = buildStyle({ width, textAlign })
|
||||
</script>
|
||||
|
||||
<input type="text" {placeholder} {style} on:change bind:value />
|
||||
<input class:centerPlaceholder type="text" {placeholder} {style} on:change bind:value />
|
||||
|
||||
<style>
|
||||
input {
|
||||
input {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
|
|
@ -24,10 +27,13 @@
|
|||
border: 1px solid var(--grey);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
input::placeholder {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.centerPlaceholder::placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,40 +5,41 @@
|
|||
export let meta = []
|
||||
export let label = ""
|
||||
export let value = ["0", "0", "0", "0"]
|
||||
export let type = "number"
|
||||
export let suffix = ""
|
||||
export let onChange = () => {}
|
||||
|
||||
function handleChange(val, idx) {
|
||||
value.splice(idx, 1, val)
|
||||
value.splice(idx, 1, suffix ? val + suffix : val)
|
||||
value = value
|
||||
console.log("IDX",idx)
|
||||
let _value = value.map(v => !/px$/.test(v) ? `${v}px` : v)
|
||||
let _value = value.map(v => (!v.endsWith(suffix) ? v + suffix : v))
|
||||
onChange(_value)
|
||||
}
|
||||
|
||||
$: displayValues = value.map(v => v.toString().replace(/px$/, ""))
|
||||
$: displayValues = value
|
||||
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
|
||||
: []
|
||||
</script>
|
||||
|
||||
<div class="input-container">
|
||||
<div class="label">{label}</div>
|
||||
<div class="inputs">
|
||||
{#each meta as { placeholder }, i}
|
||||
|
||||
<Input width="32px" textAlign="center" placeholder={placeholder || ""} value={!displayValues || displayValues[i] === 0 ? '' : displayValues[i]} on:change={e => handleChange(e.target.value || 0, i)} />
|
||||
|
||||
<div class="inputs-group">
|
||||
{#each meta as m, i}
|
||||
<Input
|
||||
width="32px"
|
||||
textAlign="center"
|
||||
placeholder={m.placeholder || ''}
|
||||
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
|
||||
on:change={e => handleChange(e.target.value || 0, i)} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.label {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
.inputs-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
export let value = ""
|
||||
export let text = ""
|
||||
export let icon = ""
|
||||
export let padding = "8px 2px;"
|
||||
export let padding = "8px 5px;"
|
||||
export let onClick = value => {}
|
||||
export let selected = false
|
||||
export let fontWeight = ""
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@
|
|||
onChange(val)
|
||||
}
|
||||
|
||||
const checkSelected = val => isMultiSelect ? value.includes(val) : value === val
|
||||
const checkSelected = val =>
|
||||
isMultiSelect ? value.includes(val) : value === val
|
||||
|
||||
$: console.log("VALUE",value)
|
||||
</script>
|
||||
|
||||
<div class="flatbutton-group">
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@
|
|||
width: 160px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bb-select-anchor {
|
||||
|
|
@ -153,6 +154,7 @@
|
|||
background-color: #f2f2f2;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--grey-dark);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bb-select-anchor > span {
|
||||
|
|
|
|||
|
|
@ -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 a new issue