CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-29 16:51:33 +13:00
Code Issues Projects Releases Wiki Activity

Update all components to be renderable and styleable

Browse source
This commit is contained in:
Andrew Kingston 2020-11-18 21:06:12 +00:00
parent a18a861177
commit 1bd2fac9b2
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)
} catch(_) { }
console.log(data.selectedComponentType)
selectedComponentStyle = document.createElement('style');
document.head.appendChild(selectedComponentStyle)
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 => {
console.log("new route params: ")
console.log(routeParams)
store.update(state => {
state.routeParams = routeParams
return state

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

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

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

@ -1,6 +1,9 @@
<script>
import { getContext } from "svelte"
import { cssVars } from "./helpers"
const { styleable } = getContext("app")
export const className = ""
export let imageUrl = ""
export let heading = ""
@ -22,7 +25,7 @@
$: showImage = !!imageUrl
</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}
<div class="content">
<h2 class="heading">{heading}</h2>

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

@ -1,6 +1,9 @@
<script>
import { getContext } from "svelte"
import { cssVars } from "./helpers"
const { styleable } = getContext("app")
export const className = ""
export let imageUrl = ""
export let heading = ""
@ -25,7 +28,7 @@
$: showImage = !!imageUrl
</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}
<div class="content">
<main>

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

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

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

@ -1,18 +1,19 @@
<script>
import Flatpickr from "svelte-flatpickr"
import { DatePicker } from "@budibase/bbui"
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let placeholder
export let value
export let _bb
export let styles
function handleChange(event) {
const [fullDate, dateStr, instance] = event.detail
if (_bb) {
_bb.setBinding("value", fullDate)
}
const [fullDate] = event.detail
value = fullDate
}
</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 dataProviderStore = getContext("data")
export let table
export let wide = false
export let styles
$: row = $dataProviderStore.row
$: schema = $dataProviderStore.table && $dataProviderStore.table.schema
$: row = $dataProviderStore?.row
$: schema = $dataProviderStore?.table && $dataProviderStore.table.schema
$: fields = schema ? Object.keys(schema) : []
</script>

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

@ -1,9 +1,16 @@
<script>
import "@fortawesome/fontawesome-free/js/all.js"
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let icon = ""
export let size = "fa-lg"
export let color = "#000"
export let styles
</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>
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let className = ""
export let url = ""
export let description = ""
export let height
export let width
export let _bb
export let styles
</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>
export let id = ""
import { getContext } from "svelte"
const { styleable } = getContext("app")
export let value = ""
export let className = ""
export let type = "text"
export let label = ""
export let checked = false
export let _bb
let actualValue = ""
export let styles
const onchange = ev => {
if (_bb) {
const val = type === "checkbox" ? ev.target.checked : ev.target.value
_bb.setBinding("value", val)
}
value = ev.target.value
}
</script>
<label for={id}>{label}</label>
<input {id} class={className} {type} {value} {checked} on:change={onchange} />
<input
class={className}
{type}
{value}
on:change={onchange}
use:styleable={styles} />

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

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

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

@ -1,20 +1,12 @@
<script>
import { getContext } from "svelte"
import { RichText } from "@budibase/bbui"
export let _bb
const { styleable } = getContext("app")
export let content = ""
const updateValue = content => {
if (_bb) {
_bb.setBinding("value", content)
}
}
$: updateValue(content)
export let value = ""
// Need to determine what options we want to expose.
let options = {
modules: {
toolbar: [
@ -31,4 +23,6 @@
}
</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>
import { onMount, setContext } from "svelte"
import {
fetchTableDefinition,
fetchTableData,
fetchRow,
screenStore,
routeStore,
DataProvider,
} from "@budibase/component-sdk"
import { onMount, getContext } from "svelte"
import DataProvider from "./DataProvider.svelte"
const { API, screenStore, routeStore } = getContext("app")
export let table
let headers = []
let row
setContext("foo", "bar")
async function fetchFirstRow() {
const rows = await fetchTableData(table)
const rows = await API.fetchTableData(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 ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
console.log("getting first row")
row = await fetchFirstRow()
} else if (routeParamId) {
row = await fetchRow({ tableId: table, rowId: routeParamId })
row = await API.fetchRow({ tableId: table, rowId: routeParamId })
} else {
throw new Error("Row ID was not supplied to RowDetail")
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,14 +1,11 @@
<script>
import { onMount } from "svelte"
import {
fetchDatasource,
fetchTableDefinition,
} from "@budibase/component-sdk"
import { getContext, onMount } from "svelte"
import { ApexOptionsBuilder } from "./ApexOptionsBuilder"
import ApexChart from "./ApexChart.svelte"
import { isEmpty } from "lodash/fp"
export let _bb
const { API } = getContext("app")
export let title
export let datasource
export let labelColumn
@ -21,8 +18,8 @@
export let legend
export let donut
export let palette
export let styles
const store = _bb.store
let options
// Fetch data on mount
@ -33,8 +30,8 @@
}
// Fetch, filter and sort data
const schema = (await fetchTableDefinition(datasource.tableId)).schema
const result = await fetchDatasource(datasource)
const schema = (await API.fetchTableDefinition(datasource.tableId)).schema
const result = await API.fetchDatasource(datasource)
const data = result
.filter(row => row[labelColumn] != null && row[valueColumn] != null)
.slice(0, 20)
@ -66,4 +63,4 @@
})
</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 text } from "./Text.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 richtext } from "./RichText.svelte"
export { default as richtext } from "./RichText.svelte"
export { default as button } from "./Button.svelte"
export { default as login } from "./Login.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 datagrid } from "./grid/Component.svelte"
// export { default as dataform } from "./DataForm.svelte"
// export { default as dataformwide } from "./DataFormWide.svelte"
export { default as dataform } from "./DataForm.svelte"
export { default as dataformwide } from "./DataFormWide.svelte"
export { default as list } from "./List.svelte"
export { default as embed } from "./Embed.svelte"
// export { default as stackedlist } from "./StackedList.svelte"
// export { default as card } from "./Card.svelte"
// export { default as cardhorizontal } from "./CardHorizontal.svelte"
// export { default as rowdetail } from "./RowDetail.svelte"
// export { default as newrow } from "./NewRow.svelte"
// export { default as datepicker } from "./DatePicker.svelte"
// export { default as icon } from "./Icon.svelte"
// export * from "./charts"
export { default as stackedlist } from "./StackedList.svelte"
export { default as card } from "./Card.svelte"
export { default as cardhorizontal } from "./CardHorizontal.svelte"
export { default as rowdetail } from "./RowDetail.svelte"
export { default as newrow } from "./NewRow.svelte"
export { default as datepicker } from "./DatePicker.svelte"
export { default as icon } from "./Icon.svelte"
export * from "./charts"