MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update all components to be renderable and styleable

This commit is contained in:
Andrew Kingston 2020-11-18 21:06:12 +00:00
parent 1a8d781c8c
commit cdb8ff3563
24 changed files with 135 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -44,8 +44,6 @@ export default `<html>
if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle) if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
} catch(_) { } } catch(_) { }
console.log(data.selectedComponentType)
selectedComponentStyle = document.createElement('style'); selectedComponentStyle = document.createElement('style');
document.head.appendChild(selectedComponentStyle) document.head.appendChild(selectedComponentStyle)
var selectedCss = '[data-bb-id="' + data.selectedComponentType + '-' + data.selectedComponentId + '"]' + '{border:2px solid #0055ff !important;}' var selectedCss = '[data-bb-id="' + data.selectedComponentType + '-' + data.selectedComponentId + '"]' + '{border:2px solid #0055ff !important;}'

2
packages/client/src/store/routes.js
View File

@ -21,8 +21,6 @@ const createRouteStore = () => {
}) })
} }
const setRouteParams = routeParams => { const setRouteParams = routeParams => {
console.log("new route params: ")
console.log(routeParams)
store.update(state => { store.update(state => {
state.routeParams = routeParams state.routeParams = routeParams
return state return state

7
packages/client/src/store/screens.js
View File

@ -4,9 +4,10 @@ import { routeStore } from "./routes"
const createScreenStore = () => { const createScreenStore = () => {
const screens = writable([]) const screens = writable([])
const store = derived([screens, routeStore], ([$screens, $routeStore]) => { const store = derived([screens, routeStore], ([$screens, $routeStore]) => {
const activeScreen = $screens.find( const activeScreen =
screen => screen.route === $routeStore.activeRoute $screens.length === 1
) ? $screens[0]
: $screens.find(screen => screen.route === $routeStore.activeRoute)
return { return {
screens: $screens, screens: $screens,
activeScreen, activeScreen,

5
packages/standard-components/src/Card.svelte
View File

@ -1,6 +1,9 @@
<script> <script>
import { getContext } from "svelte"
import { cssVars } from "./helpers" import { cssVars } from "./helpers"
const { styleable } = getContext("app")
export const className = "" export const className = ""
export let imageUrl = "" export let imageUrl = ""
export let heading = "" export let heading = ""
@ -22,7 +25,7 @@
$: showImage = !!imageUrl $: showImage = !!imageUrl
</script> </script>
<div use:cssVars={cssVariables} class="container"> <div use:cssVars={cssVariables} class="container" use:styleable={styles}>
{#if showImage}<img class="image" src={imageUrl} alt="" />{/if} {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
<div class="content"> <div class="content">
<h2 class="heading">{heading}</h2> <h2 class="heading">{heading}</h2>

5
packages/standard-components/src/CardHorizontal.svelte
View File

@ -1,6 +1,9 @@
<script> <script>
import { getContext } from "svelte"
import { cssVars } from "./helpers" import { cssVars } from "./helpers"
const { styleable } = getContext("app")
export const className = "" export const className = ""
export let imageUrl = "" export let imageUrl = ""
export let heading = "" export let heading = ""
@ -25,7 +28,7 @@
$: showImage = !!imageUrl $: showImage = !!imageUrl
</script> </script>
<div use:cssVars={cssVariables} class="container"> <div use:cssVars={cssVariables} class="container" use:styleable={styles}>
{#if showImage}<img class="image" src={imageUrl} alt="" />{/if} {#if showImage}<img class="image" src={imageUrl} alt="" />{/if}
<div class="content"> <div class="content">
<main> <main>

7
packages/standard-components/src/DataForm.svelte
View File

@ -1,10 +1,7 @@
<script> <script>
import Form from "./Form.svelte" import Form from "./Form.svelte"
export let _bb export let styles
export let table
export let title
export let buttonText
</script> </script>
<Form {_bb} {table} {title} {buttonText} wide={false} /> <Form {styles} wide={false} />

5
packages/standard-components/src/DataFormWide.svelte
View File

@ -1,10 +1,7 @@
<script> <script>
import Form from "./Form.svelte" import Form from "./Form.svelte"
export let table
export let title
export let buttonText
export let styles export let styles
</script> </script>
<Form {styles} {table} {title} {buttonText} wide /> <Form {styles} wide />

17
packages/standard-components/src/DatePicker.svelte
View File

@ -1,18 +1,19 @@
<script> <script>
import Flatpickr from "svelte-flatpickr"
import { DatePicker } from "@budibase/bbui" import { DatePicker } from "@budibase/bbui"
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let placeholder export let placeholder
export let value export let value
export let styles
export let _bb
function handleChange(event) { function handleChange(event) {
const [fullDate, dateStr, instance] = event.detail const [fullDate] = event.detail
if (_bb) { value = fullDate
_bb.setBinding("value", fullDate)
}
} }
</script> </script>
<DatePicker {placeholder} on:change={handleChange} {value} /> <div use:styleable={styles}>
<DatePicker {placeholder} on:change={handleChange} {value} />
</div>

5
packages/standard-components/src/Form.svelte
View File

@ -8,12 +8,11 @@
const { styleable, screenStore } = getContext("app") const { styleable, screenStore } = getContext("app")
const dataProviderStore = getContext("data") const dataProviderStore = getContext("data")
export let table
export let wide = false export let wide = false
export let styles export let styles
$: row = $dataProviderStore.row $: row = $dataProviderStore?.row
$: schema = $dataProviderStore.table && $dataProviderStore.table.schema $: schema = $dataProviderStore?.table && $dataProviderStore.table.schema
$: fields = schema ? Object.keys(schema) : [] $: fields = schema ? Object.keys(schema) : []
</script> </script>

9
packages/standard-components/src/Icon.svelte
View File

@ -1,9 +1,16 @@
<script> <script>
import "@fortawesome/fontawesome-free/js/all.js" import "@fortawesome/fontawesome-free/js/all.js"
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let icon = "" export let icon = ""
export let size = "fa-lg" export let size = "fa-lg"
export let color = "#000" export let color = "#000"
export let styles
</script> </script>
<i style={`color: ${color};`} class={`${icon} ${size}`} /> <i
style={`color: ${color};`}
class={`${icon} ${size}`}
use:styleable={styles} />

15
packages/standard-components/src/Image.svelte
View File

@ -1,11 +1,20 @@
<script> <script>
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let className = "" export let className = ""
export let url = "" export let url = ""
export let description = "" export let description = ""
export let height export let height
export let width export let width
export let styles
export let _bb
</script> </script>
<img {height} {width} class={className} src={url} alt={description} /> <img
{height}
{width}
class={className}
src={url}
alt={description}
use:styleable={styles} />

25
packages/standard-components/src/Input.svelte
View File

@ -1,22 +1,21 @@
<script> <script>
export let id = "" import { getContext } from "svelte"
const { styleable } = getContext("app")
export let value = "" export let value = ""
export let className = "" export let className = ""
export let type = "text" export let type = "text"
export let label = "" export let styles
export let checked = false
export let _bb
let actualValue = ""
const onchange = ev => { const onchange = ev => {
if (_bb) { value = ev.target.value
const val = type === "checkbox" ? ev.target.checked : ev.target.value
_bb.setBinding("value", val)
}
} }
</script> </script>
<label for={id}>{label}</label> <input
<input {id} class={className} {type} {value} {checked} on:change={onchange} /> class={className}
{type}
{value}
on:change={onchange}
use:styleable={styles} />

8
packages/standard-components/src/LinkedRowSelector.svelte
View File

@ -1,7 +1,9 @@
<script> <script>
import { Label, Multiselect } from "@budibase/bbui" import { Label, Multiselect } from "@budibase/bbui"
import { fetchTableDefinition, fetchTableData } from "@budibase/component-sdk"
import { capitalise } from "./helpers" import { capitalise } from "./helpers"
import { getContext } from "svelte"
const { API } = getContext("app")
export let schema = {} export let schema = {}
export let linkedRows = [] export let linkedRows = []
@ -18,13 +20,13 @@
async function fetchTable(id) { async function fetchTable(id) {
if (id != null) { if (id != null) {
linkedTable = await fetchTableDefinition(id) linkedTable = await API.fetchTableDefinition(id)
} }
} }
async function fetchRows(id) { async function fetchRows(id) {
if (id != null) { if (id != null) {
allRows = await fetchTableData(id) allRows = await API.fetchTableData(id)
} }
} }

2
packages/standard-components/src/NewRow.svelte
View File

@ -1,5 +1,5 @@
<script> <script>
import { DataProvider } from "@budibase/component-sdk" import DataProvider from "./DataProvider.svelte"
export let table export let table
</script> </script>

18
packages/standard-components/src/RichText.svelte
View File

@ -1,20 +1,12 @@
<script> <script>
import { getContext } from "svelte"
import { RichText } from "@budibase/bbui" import { RichText } from "@budibase/bbui"
export let _bb const { styleable } = getContext("app")
export let content = "" export let value = ""
const updateValue = content => {
if (_bb) {
_bb.setBinding("value", content)
}
}
$: updateValue(content)
// Need to determine what options we want to expose. // Need to determine what options we want to expose.
let options = { let options = {
modules: { modules: {
toolbar: [ toolbar: [
@ -31,4 +23,6 @@
} }
</script> </script>
<RichText bind:content {options} /> <div use:styleable={styles}>
<RichText bind:content={value} {options} />
</div>

20
packages/standard-components/src/RowDetail.svelte
View File

@ -1,23 +1,16 @@
<script> <script>
import { onMount, setContext } from "svelte" import { onMount, getContext } from "svelte"
import { import DataProvider from "./DataProvider.svelte"
fetchTableDefinition,
fetchTableData, const { API, screenStore, routeStore } = getContext("app")
fetchRow,
screenStore,
routeStore,
DataProvider,
} from "@budibase/component-sdk"
export let table export let table
let headers = [] let headers = []
let row let row
setContext("foo", "bar")
async function fetchFirstRow() { async function fetchFirstRow() {
const rows = await fetchTableData(table) const rows = await API.fetchTableData(table)
return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table } return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table }
} }
@ -31,9 +24,10 @@
// if srcdoc, then we assume this is the builder preview // if srcdoc, then we assume this is the builder preview
if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) { if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
console.log("getting first row")
row = await fetchFirstRow() row = await fetchFirstRow()
} else if (routeParamId) { } else if (routeParamId) {
row = await fetchRow({ tableId: table, rowId: routeParamId }) row = await API.fetchRow({ tableId: table, rowId: routeParamId })
} else { } else {
throw new Error("Row ID was not supplied to RowDetail") throw new Error("Row ID was not supplied to RowDetail")
} }

7
packages/standard-components/src/StackedList.svelte
View File

@ -1,4 +1,9 @@
<script> <script>
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let styles
export let imageUrl = "" export let imageUrl = ""
export let heading = "" export let heading = ""
export let text1 = "" export let text1 = ""
@ -9,7 +14,7 @@
$: showImage = !!imageUrl $: showImage = !!imageUrl
</script> </script>
<div class="container"> <div class="container" use:styleable={styles}>
<a href={destinationUrl}> <a href={destinationUrl}>
<div class="content"> <div class="content">
{#if showImage} {#if showImage}

5
packages/standard-components/src/attachments/Dropzone.svelte
View File

@ -1,7 +1,8 @@
<script> <script>
import { Dropzone } from "@budibase/bbui" import { Dropzone } from "@budibase/bbui"
import { uploadAttachment } from "@budibase/component-sdk" import { getContext } from "svelte"
const { API } = getContext("app")
const BYTES_IN_MB = 1000000 const BYTES_IN_MB = 1000000
export let files = [] export let files = []
@ -18,7 +19,7 @@
for (let i = 0; i < fileList.length; i++) { for (let i = 0; i < fileList.length; i++) {
data.append("file", fileList[i]) data.append("file", fileList[i])
} }
return await uploadAttachment(data) return await API.uploadAttachment(data)
} }
</script> </script>

8
packages/standard-components/src/charts/ApexChart.svelte
View File

@ -1,13 +1,17 @@
<script> <script>
import { getContext } from "svelte"
import { chart } from "svelte-apexcharts" import { chart } from "svelte-apexcharts"
const { styleable } = getContext("app")
export let options export let options
export let styles
</script> </script>
{#if options} {#if options}
<div use:chart={options} /> <div use:chart={options} use:styleable={styles} />
{:else if options === false} {:else if options === false}
<div>Invalid chart options</div> <div use:styleable={styles}>Invalid chart options</div>
{/if} {/if}
<style> <style>

19
packages/standard-components/src/charts/BarChart.svelte
View File

@ -1,14 +1,11 @@
<script> <script>
import { onMount } from "svelte" import { getContext, onMount } from "svelte"
import {
fetchDatasource,
fetchTableDefinition,
} from "@budibase/component-sdk"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder" import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
export let _bb const { API } = getContext("app")
export let title export let title
export let datasource export let datasource
export let labelColumn export let labelColumn
@ -24,21 +21,21 @@
export let stacked export let stacked
export let yAxisUnits export let yAxisUnits
export let palette export let palette
export let styles
const store = _bb.store
let options let options
// Fetch data on mount // Fetch data on mount
onMount(async () => { onMount(async () => {
const allCols = [labelColumn, ...(valueColumns || [])] const allCols = [labelColumn, ...(valueColumns || [null])]
if (isEmpty(datasource) || allCols.find(x => x == null)) { if (isEmpty(datasource) || allCols.find(x => x == null)) {
options = false options = false
return return
} }
// Fetch, filter and sort data // Fetch, filter and sort data
const schema = (await fetchTableDefinition(datasource.tableId)).schema const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await fetchDatasource(datasource) const result = await API.fetchDatasource(datasource)
const reducer = row => (valid, column) => valid && row[column] != null const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true) const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result const data = result
@ -92,4 +89,4 @@
}) })
</script> </script>
<ApexChart {options} /> <ApexChart {options} {styles} />

17
packages/standard-components/src/charts/CandleStickChart.svelte
View File

@ -1,14 +1,11 @@
<script> <script>
import { onMount } from "svelte" import { getContext, onMount } from "svelte"
import {
fetchDatasource,
fetchTableDefinition,
} from "@budibase/component-sdk"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder" import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
export let _bb const { API } = getContext("app")
export let title export let title
export let datasource export let datasource
export let dateColumn export let dateColumn
@ -22,8 +19,8 @@
export let width export let width
export let animate export let animate
export let yAxisUnits export let yAxisUnits
export let styles
const store = _bb.store
let options let options
// Fetch data on mount // Fetch data on mount
@ -35,8 +32,8 @@
} }
// Fetch, filter and sort data // Fetch, filter and sort data
const schema = (await fetchTableDefinition(datasource.tableId)).schema const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await fetchDatasource(datasource) const result = await API.fetchDatasource(datasource)
const reducer = row => (valid, column) => valid && row[column] != null const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true) const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result const data = result
@ -74,4 +71,4 @@
}) })
</script> </script>
<ApexChart {options} /> <ApexChart {options} {styles} />

19
packages/standard-components/src/charts/LineChart.svelte
View File

@ -1,15 +1,12 @@
<script> <script>
import { onMount } from "svelte" import { getContext, onMount } from "svelte"
import {
fetchDatasource,
fetchTableDefinition,
} from "@budibase/component-sdk"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder" import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
const { API } = getContext("app")
// Common props // Common props
export let _bb
export let title export let title
export let datasource export let datasource
export let labelColumn export let labelColumn
@ -25,26 +22,26 @@
export let legend export let legend
export let yAxisUnits export let yAxisUnits
export let palette export let palette
export let styles
// Area specific props // Area specific props
export let area export let area
export let stacked export let stacked
export let gradient export let gradient
const store = _bb.store
let options let options
// Fetch data on mount // Fetch data on mount
onMount(async () => { onMount(async () => {
const allCols = [labelColumn, ...(valueColumns || [])] const allCols = [labelColumn, ...(valueColumns || [null])]
if (isEmpty(datasource) || allCols.find(x => x == null)) { if (isEmpty(datasource) || allCols.find(x => x == null)) {
options = false options = false
return return
} }
// Fetch, filter and sort data // Fetch, filter and sort data
const schema = (await fetchTableDefinition(datasource.tableId)).schema const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await fetchDatasource(datasource) const result = await API.fetchDatasource(datasource)
const reducer = row => (valid, column) => valid && row[column] != null const reducer = row => (valid, column) => valid && row[column] != null
const hasAllColumns = row => allCols.reduce(reducer(row), true) const hasAllColumns = row => allCols.reduce(reducer(row), true)
const data = result const data = result
@ -100,4 +97,4 @@
}) })
</script> </script>
<ApexChart {options} /> <ApexChart {options} {styles} />

17
packages/standard-components/src/charts/PieChart.svelte
View File

@ -1,14 +1,11 @@
<script> <script>
import { onMount } from "svelte" import { getContext, onMount } from "svelte"
import {
fetchDatasource,
fetchTableDefinition,
} from "@budibase/component-sdk"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder" import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte" import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
export let _bb const { API } = getContext("app")
export let title export let title
export let datasource export let datasource
export let labelColumn export let labelColumn
@ -21,8 +18,8 @@
export let legend export let legend
export let donut export let donut
export let palette export let palette
export let styles
const store = _bb.store
let options let options
// Fetch data on mount // Fetch data on mount
@ -33,8 +30,8 @@
} }
// Fetch, filter and sort data // Fetch, filter and sort data
const schema = (await fetchTableDefinition(datasource.tableId)).schema const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await fetchDatasource(datasource) const result = await API.fetchDatasource(datasource)
const data = result const data = result
.filter(row => row[labelColumn] != null && row[valueColumn] != null) .filter(row => row[labelColumn] != null && row[valueColumn] != null)
.slice(0, 20) .slice(0, 20)
@ -66,4 +63,4 @@
}) })
</script> </script>
<ApexChart {options} /> <ApexChart {options} {styles} />

26
packages/standard-components/src/index.js
View File

@ -3,24 +3,24 @@ import "@budibase/bbui/dist/bbui.css"
export { default as container } from "./Container.svelte" export { default as container } from "./Container.svelte"
export { default as text } from "./Text.svelte" export { default as text } from "./Text.svelte"
export { default as heading } from "./Heading.svelte" export { default as heading } from "./Heading.svelte"
// export { default as input } from "./Input.svelte" export { default as input } from "./Input.svelte"
export { default as textfield } from "./Textfield.svelte" export { default as textfield } from "./Textfield.svelte"
// export { default as richtext } from "./RichText.svelte" export { default as richtext } from "./RichText.svelte"
export { default as button } from "./Button.svelte" export { default as button } from "./Button.svelte"
export { default as login } from "./Login.svelte" export { default as login } from "./Login.svelte"
export { default as link } from "./Link.svelte" export { default as link } from "./Link.svelte"
// export { default as image } from "./Image.svelte" export { default as image } from "./Image.svelte"
export { default as Navigation } from "./Navigation.svelte" export { default as Navigation } from "./Navigation.svelte"
export { default as datagrid } from "./grid/Component.svelte" export { default as datagrid } from "./grid/Component.svelte"
// export { default as dataform } from "./DataForm.svelte" export { default as dataform } from "./DataForm.svelte"
// export { default as dataformwide } from "./DataFormWide.svelte" export { default as dataformwide } from "./DataFormWide.svelte"
export { default as list } from "./List.svelte" export { default as list } from "./List.svelte"
export { default as embed } from "./Embed.svelte" export { default as embed } from "./Embed.svelte"
// export { default as stackedlist } from "./StackedList.svelte" export { default as stackedlist } from "./StackedList.svelte"
// export { default as card } from "./Card.svelte" export { default as card } from "./Card.svelte"
// export { default as cardhorizontal } from "./CardHorizontal.svelte" export { default as cardhorizontal } from "./CardHorizontal.svelte"
// export { default as rowdetail } from "./RowDetail.svelte" export { default as rowdetail } from "./RowDetail.svelte"
// export { default as newrow } from "./NewRow.svelte" export { default as newrow } from "./NewRow.svelte"
// export { default as datepicker } from "./DatePicker.svelte" export { default as datepicker } from "./DatePicker.svelte"
// export { default as icon } from "./Icon.svelte" export { default as icon } from "./Icon.svelte"
// export * from "./charts" export * from "./charts"