diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte index c79193f20d..fa70d0718c 100644 --- a/packages/builder/src/PackageRoot.svelte +++ b/packages/builder/src/PackageRoot.svelte @@ -55,7 +55,7 @@ flex: 0 0 auto; height: 48px; background: white; - padding: 0px 15px; + padding: 0px 15px 0 1.8rem; width: 100%; display: flex; align-items: center; @@ -104,7 +104,7 @@ cursor: pointer; outline: none; height: 40px; - padding: 8px 10px; + padding: 8px 10px 8px 0; } .home-logo:hover { diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 212a032a6f..2c0fa48406 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -4,22 +4,29 @@ import { pipe } from "../common/core" const self = n => n const join_with = delimiter => a => a.join(delimiter) const empty_string_to_unset = s => (s.length ? s : "0") -const add_suffix = suffix => s => s + suffix +const add_suffix_if_number = suffix => s => { + try { + if (isNaN(s) || isNaN(parseFloat(s))) return s + } catch (_) { + return s + } + return s + suffix +} export const make_margin = values => pipe(values, [ map(empty_string_to_unset), - map(add_suffix("px")), + map(add_suffix_if_number("px")), join_with(" "), ]) const css_map = { templaterows: { - name: "grid-template-columns", + name: "grid-template-rows", generate: self, }, templatecolumns: { - name: "grid-template-rows", + name: "grid-template-columns", generate: self, }, gridarea: { @@ -58,6 +65,14 @@ const css_map = { name: "z-index", generate: self, }, + height: { + name: "height", + generate: self, + }, + width: { + name: "width", + generate: self, + }, } export const generate_rule = ([name, values]) => @@ -97,10 +112,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` export const generate_screen_css = component_array => { let styles = "" + let emptyStyles = { layout: {}, position: {} } for (let i = 0; i < component_array.length; i += 1) { const { _styles, _id, _children } = component_array[i] - const { layout, position } = generate_css(_styles) + const { layout, position } = generate_css(_styles || emptyStyles) styles += apply_class(_id, "pos", position) + "\n" styles += apply_class(_id, "lay", layout) + "\n" diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js index 3cb400c4de..e6b5bf03d7 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store.js @@ -721,9 +721,27 @@ const getContainerComponent = components => */ const addChildComponent = store => (componentToAdd, presetName) => { store.update(state => { + function findSlot(component_array) { + for (let i = 0; i < component_array.length; i += 1) { + if (component_array[i]._component === "##builtin/screenslot") + return true + if (component_array[i]._children) findSlot(component_array[i]) + } + + return false + } + + if ( + componentToAdd.startsWith("##") && + findSlot(state.pages[state.currentPageName].props._children) + ) { + return state + } + const component = componentToAdd.startsWith("##") ? getBuiltin(componentToAdd) : state.components.find(({ name }) => name === componentToAdd) + const presetProps = presetName ? component.presets[presetName] : {} const newComponent = createProps(component, presetProps) @@ -731,7 +749,9 @@ const addChildComponent = store => (componentToAdd, presetName) => { newComponent.props ) - _savePage(state) + state.currentFrontEndType === "page" + ? _savePage(state) + : _saveScreenApi(state.currentPreviewItem, state) return state }) @@ -749,7 +769,7 @@ const addTemplatedComponent = store => props => { props ) - _savePage(state) + _saveCurrentPreviewItem(state) return state }) @@ -792,9 +812,7 @@ const setComponentStyle = store => (type, name, value) => { ]) // save without messing with the store - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) } @@ -843,9 +861,7 @@ const deleteComponent = store => component => { parent._children = parent._children.filter(c => c !== component) } - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) @@ -864,9 +880,7 @@ const moveUpComponent = store => component => { parent._children = newChildren } s.currentComponentInfo = component - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) @@ -885,9 +899,7 @@ const moveDownComponent = store => component => { parent._children = newChildren } s.currentComponentInfo = component - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) @@ -902,9 +914,7 @@ const copyComponent = store => component => { }) parent._children = [...parent._children, copiedComponent] s.curren - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) s.currentComponentInfo = copiedComponent return s }) @@ -913,7 +923,7 @@ const copyComponent = store => component => { const getParent = (rootProps, child) => { let parent walkProps(rootProps, (p, breakWalk) => { - if (p._children.includes(child)) { + if (p._children && p._children.includes(child)) { parent = p breakWalk() } @@ -934,3 +944,8 @@ const walkProps = (props, action, cancelToken = null) => { } } } + +const _saveCurrentPreviewItem = s => + s.currentFrontEndType === "page" + ? _savePage(s) + : _saveScreenApi(s.currentPreviewItem, s) diff --git a/packages/builder/src/common/Icons/Add.svelte b/packages/builder/src/common/Icons/Add.svelte new file mode 100644 index 0000000000..89b3e21b4f --- /dev/null +++ b/packages/builder/src/common/Icons/Add.svelte @@ -0,0 +1,8 @@ + + + + diff --git a/packages/builder/src/common/Icons/ArrowDown.svelte b/packages/builder/src/common/Icons/ArrowDown.svelte index 5a0f2231ea..bc1bfd2363 100644 --- a/packages/builder/src/common/Icons/ArrowDown.svelte +++ b/packages/builder/src/common/Icons/ArrowDown.svelte @@ -1,10 +1,10 @@ + width="100%" + height="100%"> + d="M12 15l-4.243-4.243 1.415-1.414L12 12.172l2.828-2.829 1.415 1.414z" /> diff --git a/packages/builder/src/common/Icons/Check.svelte b/packages/builder/src/common/Icons/Check.svelte new file mode 100644 index 0000000000..8293996bc9 --- /dev/null +++ b/packages/builder/src/common/Icons/Check.svelte @@ -0,0 +1,10 @@ + + + + diff --git a/packages/builder/src/common/Icons/Grid.svelte b/packages/builder/src/common/Icons/Grid.svelte new file mode 100644 index 0000000000..175ba0aa11 --- /dev/null +++ b/packages/builder/src/common/Icons/Grid.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/common/Icons/Shape.svelte b/packages/builder/src/common/Icons/Shape.svelte new file mode 100644 index 0000000000..e3c4d08e2e --- /dev/null +++ b/packages/builder/src/common/Icons/Shape.svelte @@ -0,0 +1,12 @@ + + + + diff --git a/packages/builder/src/common/Icons/index.js b/packages/builder/src/common/Icons/index.js index 353985a59e..465c4934f0 100644 --- a/packages/builder/src/common/Icons/index.js +++ b/packages/builder/src/common/Icons/index.js @@ -11,3 +11,7 @@ export { default as XCircleIcon } from "./XCircle.svelte" export { default as ChevronUpIcon } from "./ChevronUp.svelte" export { default as ChevronDownIcon } from "./ChevronDown.svelte" export { default as CopyIcon } from "./Copy.svelte" +export { default as CheckIcon } from "./Check.svelte" +export { default as GridIcon } from "./Grid.svelte" +export { default as ShapeIcon } from "./Shape.svelte" +export { default as AddIcon } from "./Add.svelte" diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte index d8902ebe4e..91f5c73a74 100644 --- a/packages/builder/src/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte @@ -60,6 +60,12 @@ store.addTemplatedComponent(instance.props) } + function generate_components_list(components) { + return $store.currentFrontEndType === "page" + ? $store.builtins.concat(components) + : components + } + $: { const newComponentLibraries = [] @@ -110,7 +116,7 @@ {#if componentLibrary} - {#each $store.builtins.concat(componentLibrary.components) as component} + {#each generate_components_list(componentLibrary.components) as component}
{/if}
- {#if component.presets} + {#if component.presets || templatesByComponent[component.name]}
- selectedComponent = null} diff --git a/packages/builder/src/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/userInterface/ComponentsHierarchy.svelte index 4df058e455..297ebe2f79 100644 --- a/packages/builder/src/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/userInterface/ComponentsHierarchy.svelte @@ -5,7 +5,7 @@ import ConfirmDialog from "../common/ConfirmDialog.svelte" import { pipe } from "../common/core" import { store } from "../builderStore" - import { ArrowDownIcon } from "../common/Icons/" + import { ArrowDownIcon, ShapeIcon } from "../common/Icons/" export let screens = [] @@ -25,9 +25,12 @@ ] ) - const lastPartOfName = c => - c && - last(c.name ? c.name.split("/") : c._component.split("/")) + const lastPartOfName = c => { + if (!c) return "" + const name = c.name ? c.name : c._component ? c._component : c + return last(name.split("/")) + } + const isComponentSelected = (current, comp) => current === comp @@ -47,7 +50,6 @@ componentToDelete = component confirmDeleteDialog.show() } -
@@ -55,17 +57,21 @@ {#each _screens as screen}
store.setCurrentScreen(screen.title)}> + class:rotate={$store.currentPreviewItem.name !== screen.title}> {#if screen.component.props._children.length} {/if} + + + + {screen.title}
@@ -73,41 +79,42 @@ + onCopyComponent={store.copyComponent} /> {/if} {/each}
- store.deleteComponent(componentToDelete)}/> + onOk={() => store.deleteComponent(componentToDelete)} /> diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte index b15ecc341d..819ab6d3c6 100644 --- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte @@ -1,7 +1,12 @@ diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index 84b1e2728a..29064ca412 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -1,6 +1,7 @@
@@ -40,63 +41,32 @@
-
- +
Navigator + Pages
+
-
- -
- - store.setScreenType('page')} - class="components-nav-header" - class:active={$store.currentFrontEndType === 'page'}> - Page - -
-
- {#if $store.currentFrontEndType === 'page'} - - {/if} - -
-
+
-
- - store.setScreenType('screen')} - class="components-nav-header" - class:active={$store.currentFrontEndType === 'screen'}> + Screens - - {#if $store.currentFrontEndType === 'screen'} -
- -
- {/if} +
+ +
- {#if $store.currentFrontEndType === 'screen'} - - {/if} + +
@@ -117,12 +87,12 @@ - store.deleteComponent(componentToDelete)}/> + onOk={() => store.deleteComponent(componentToDelete)} /> diff --git a/packages/builder/src/userInterface/pagesParsing/createProps.js b/packages/builder/src/userInterface/pagesParsing/createProps.js index 407deb57ff..42e1fd37e4 100644 --- a/packages/builder/src/userInterface/pagesParsing/createProps.js +++ b/packages/builder/src/userInterface/pagesParsing/createProps.js @@ -77,6 +77,10 @@ export const makePropsSafe = (componentDefinition, props) => { } } + if (!props._styles) { + props._styles = { layout: {}, position: {} } + } + return props } diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index 4abcb7aee4..c0e79c511c 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -1,5 +1,11 @@ { "_lib": "./dist/index.js", + "_templates": { + "indexDatatable": { + "description": "Datatable based on an Index", + "component": "Datatable" + } + }, "Body1": { "name": "Body1", "description": "Sets the font properties as Roboto Body 1", @@ -61,6 +67,26 @@ "props": {}, "tags": [] }, + "DatatableHead": { + "name": "DatatableHead", + "description": "Material Design .", + "props": {} + }, + "DatatableCell": { + "name": "DatatableCell", + "description": "Material Design .", + "props": {} + }, + "DatatableBody": { + "name": "DatatableBody", + "description": "Material Design .", + "props": {} + }, + "DatatableRow": { + "name": "DatatableRow", + "description": "Material Design .", + "props": {} + }, "H1": { "name": "H1", "description": "Sets the font properties as Roboto Headline1", diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json index a93b5602a7..22a172766f 100644 --- a/packages/materialdesign-components/package.json +++ b/packages/materialdesign-components/package.json @@ -13,6 +13,7 @@ }, "devDependencies": { "@budibase/client": "^0.0.16", + "@budibase/standard-components": "^0.0.16", "@material/button": "^4.0.0", "@nx-js/compiler-util": "^2.0.0", "bcryptjs": "^2.4.3", diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte index 7021feafe0..9c179e2eb9 100644 --- a/packages/materialdesign-components/src/Datatable/Datatable.svelte +++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte @@ -6,14 +6,27 @@ import { Button } from "../Button" import ClassBuilder from "../ClassBuilder.js" + export let _bb + const cb = new ClassBuilder("data-table") setContext("BBMD:data-table:cb", cb) let datatable = null let instance = null + let tableElement + let initialied = false + + $: { + if(tableElement && datatable && !initialied) { + const children = _bb.attachChildren(tableElement) + if(children.length > 0) { + instance = new MDCDataTable(datatable) + initialied = true + } + } + } onMount(() => { - if (!!datatable) instance = new MDCDataTable(datatable) return () => { !!instance && instance.destroy() instance = null @@ -22,46 +35,7 @@
- - - - Id - First Name - Second Name - Gender - Address - Actions - - - - - 123456 - Conor - McKeown - Male - 1 Cool Street - - +
+
diff --git a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte new file mode 100644 index 0000000000..409d4828eb --- /dev/null +++ b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte index beb078d7cb..3cea365f99 100644 --- a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte +++ b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte @@ -3,6 +3,7 @@ export let isHeader = false export let numeric = false + export let _bb const cb = getContext("BBMD:data-table:cb") @@ -10,14 +11,18 @@ let modifiers = { numeric } let props = { modifiers } let cellClass = cb.build({ elementName, props }) + let element + + $: element && _bb.attachChildren(element) + {#if isHeader} - + {:else} - + {/if} diff --git a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte new file mode 100644 index 0000000000..f50a5cca0e --- /dev/null +++ b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte index 6ad16f94d6..08b0fd1040 100644 --- a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte +++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte @@ -3,6 +3,9 @@ export let onSelect = () => {}; export let isHeader = false; + + export let _bb + let row = null; let selected = false; @@ -14,7 +17,8 @@ $: modifiers = { selected }; $: props = { modifiers }; $: rowClass = cb.build({ elementName, props }); - + $: row && _bb.attachChildren(row) + function rowSelected() { selected = !selected; onSelect(); diff --git a/packages/materialdesign-components/src/Datatable/index.js b/packages/materialdesign-components/src/Datatable/index.js index 2be32d546f..69dd1e759e 100644 --- a/packages/materialdesign-components/src/Datatable/index.js +++ b/packages/materialdesign-components/src/Datatable/index.js @@ -1,2 +1,6 @@ -import "./_style.scss"; -export { default as Datatable } from "./Datatable.svelte"; +import "./_style.scss" +export { default as Datatable } from "./Datatable.svelte" +export { default as DatatableCell } from "./DatatableCell.svelte" +export { default as DatatableHead } from "./DatatableHead.svelte" +export { default as DatatableBody } from "./DatatableBody.svelte" +export { default as DatatableRow } from "./DatatableRow.svelte" diff --git a/packages/materialdesign-components/src/Templates/indexDatatable.js b/packages/materialdesign-components/src/Templates/indexDatatable.js new file mode 100644 index 0000000000..145e3f5eea --- /dev/null +++ b/packages/materialdesign-components/src/Templates/indexDatatable.js @@ -0,0 +1,69 @@ +export default ({ indexes, helpers }) => + indexes.map(i => ({ + name: `Table based on index: ${i.name} `, + props: tableProps(i, helpers.indexSchema(i)), + })) + +const tableProps = (index, indexSchema) => ({ + _component: "@budibase/materialdesign-components/Datatable", + _children: [ + { + _component: "@budibase/materialdesign-components/DatatableHead", + _children: [ + { + _component: "@budibase/materialdesign-components/DatatableRow", + isHeader: true, + _children: columnHeaders(indexSchema), + }, + ], + }, + { + _component: "@budibase/materialdesign-components/DatatableBody", + _children: [ + { + _code: rowCode(index), + _component: "@budibase/materialdesign-components/DatatableRow", + _children: dataCells(index, indexSchema), + }, + ], + }, + ], +}) + +const columnHeaders = indexSchema => + indexSchema.map(col => ({ + _component: "@budibase/materialdesign-components/DatatableCell", + isHeader: true, + _children: [ + { + _component: "@budibase/standard-components/text", + type: "none", + text: col.name, + }, + ], + })) + +const dataCells = (index, indexSchema) => + indexSchema.map(col => ({ + _component: "@budibase/materialdesign-components/DatatableCell", + _children: [ + { + _component: "@budibase/standard-components/text", + type: "none", + text: { + "##bbstate": `${dataItem(index)}.${col.name}`, + "##bbstatefallback": "", + "##bbsource": "context", + }, + }, + ], + })) + +const dataItem = index => `${index.name}_item` +const dataCollection = index => `store.${index.name}` +const rowCode = index => + ` +if (!${dataCollection(index)}) return + +for (let ${dataItem(index)} of ${dataCollection(index)}) + render( { ${dataItem(index)}) }` diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index bdca2e72b0..229f5293e9 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -12,6 +12,7 @@ Radiobutton, Radiobuttongroup, Datatable, + CustomersIndexTable, } = props let currentComponent @@ -32,6 +33,7 @@ Radiobutton, Radiobuttongroup, Datatable, + CustomersIndexTable ], }, } diff --git a/packages/materialdesign-components/src/Test/createApp.js b/packages/materialdesign-components/src/Test/createApp.js index d9a491a8af..8cea5c1268 100644 --- a/packages/materialdesign-components/src/Test/createApp.js +++ b/packages/materialdesign-components/src/Test/createApp.js @@ -2,23 +2,24 @@ import { createApp } from "@budibase/client/src/createApp" import components from "./testComponents" import packageJson from "../../package.json" import { rootComponent } from "./rootComponent" +import * as standardcomponents from "@budibase/standard-components/src/index" + export default async props => { delete components._lib const componentLibraries = {} componentLibraries[packageJson.name] = components componentLibraries["testcomponents"] = { - rootComponent: rootComponent(window) + rootComponent: rootComponent(window), } + componentLibraries["@budibase/standard-components"] = standardcomponents const appDef = { hierarchy: {}, actions: {} } const user = { name: "yeo", permissions: [] } const { initialisePage } = createApp( - window.document, componentLibraries, { appRootPath: "" }, appDef, user, - {}, - [] + {} ) return initialisePage -} \ No newline at end of file +} diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index a94c171537..43da839f65 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -1,3 +1,24 @@ +import indexDatatable from "../Templates/indexDatatable" + +const templateOptions = { + indexes: [ + { + name: "customers", + }, + ], + helpers: { + indexSchema: index => { + const field = name => ({ name }) + if (index.name === "customers") + return [ + field("id"), + field("surname"), + field("forname"), + field("address"), + ] + }, + }, +} export const props = { H1: { @@ -80,4 +101,6 @@ export const props = { _component: "@budibase/materialdesign-components/Datatable", _children: [], }, + + CustomersIndexTable: indexDatatable(templateOptions)[0].props, } diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js index 7ac56d181d..3b0a914e71 100644 --- a/packages/materialdesign-components/src/Test/testComponents.js +++ b/packages/materialdesign-components/src/Test/testComponents.js @@ -1,25 +1,3 @@ -import { - H1, - Overline, - Button, - Icon, - Textfield, - Checkbox, - Checkboxgroup, - Radiobutton, - Radiobuttongroup, - Datatable, -} from "@BBMD" +import * as components from "@BBMD" -export default { - H1, - Overline, - Button, - Icon, - Textfield, - Checkbox, - Checkboxgroup, - Radiobutton, - Radiobuttongroup, - Datatable, -} +export default components diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index c5c98ba0cb..92bdf2ca8e 100644 --- a/packages/materialdesign-components/src/index.js +++ b/packages/materialdesign-components/src/index.js @@ -1,4 +1,4 @@ -import "@material/theme/mdc-theme.scss"; +import "@material/theme/mdc-theme.scss" export { Button } from "./Button" export { default as Icon } from "./Common/Icon.svelte" @@ -7,5 +7,11 @@ export * from "./Typography" export { Checkbox, Checkboxgroup } from "./Checkbox" export { Radiobutton, Radiobuttongroup } from "./Radiobutton" export { default as Label } from "./Common/Label.svelte" -export { Datatable } from "./Datatable" - +export { + Datatable, + DatatableHead, + DatatableBody, + DatatableCell, + DatatableRow, +} from "./Datatable" +export { default as indexDatatable } from "./Templates/indexDatatable" diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 537a11103d..d5e8320b93 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -137,6 +137,24 @@ }, "tags": ["div", "container"] }, + "link": { + "description": "an HTML anchor tag", + "props": { + "url": "string", + "openInNewTab": "bool", + "text": "string" + } + }, + "image": { + "description": "an HTML tag", + "props": { + "url": "string", + "className": "string", + "description": "string", + "height": "string", + "width": "string" + } + }, "container": { "name": "Container", "description": "An element that contains and lays out other elements. e.g.
,
etc", @@ -178,5 +196,19 @@ } }, "tags": [] + }, + "thead": { + "name": "TableHead", + "description": "an HTML tab", + "props" : { + "className":"string" + } + }, + "tbody": { + "name": "TableBody", + "description": "an HTML tab", + "props" : { + "className":"string" + } } } \ No newline at end of file diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte new file mode 100644 index 0000000000..d7ea125a92 --- /dev/null +++ b/packages/standard-components/src/Image.svelte @@ -0,0 +1,19 @@ + + + +{description} \ No newline at end of file diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte new file mode 100644 index 0000000000..9c48d1c302 --- /dev/null +++ b/packages/standard-components/src/Link.svelte @@ -0,0 +1,18 @@ + + +{text} + + diff --git a/packages/standard-components/src/TableBody.svelte b/packages/standard-components/src/TableBody.svelte new file mode 100644 index 0000000000..2302cc8fff --- /dev/null +++ b/packages/standard-components/src/TableBody.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/TableHead.svelte b/packages/standard-components/src/TableHead.svelte new file mode 100644 index 0000000000..b958bd2c85 --- /dev/null +++ b/packages/standard-components/src/TableHead.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index 43cd8f1708..c8d8a245bf 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -29,7 +29,7 @@ {#if isTag("none")} -{text} +{text} {:else if isTag("")} {text} {:else if isTag("")} diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index 3d512cb252..7d9a3d04a7 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -7,3 +7,5 @@ export { default as option } from "./Option.svelte" export { default as button } from "./Button.svelte" export { default as login } from "./Login.svelte" export { default as saveRecordButton } from "./Templates/saveRecordButton" +export { default as link } from "./Link.svelte" +export { default as image } from "./Image.svelte"