ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update all components to be renderable and styleable

master
Andrew Kingston 6 years ago
parent
1a8d781c8c
commit
cdb8ff3563
24 changed files with 135 additions and 135 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
  2. 2
      packages/client/src/store/routes.js
  3. 7
      packages/client/src/store/screens.js
  4. 5
      packages/standard-components/src/Card.svelte
  5. 5
      packages/standard-components/src/CardHorizontal.svelte
  6. 7
      packages/standard-components/src/DataForm.svelte
  7. 5
      packages/standard-components/src/DataFormWide.svelte
  8. 17
      packages/standard-components/src/DatePicker.svelte
  9. 5
      packages/standard-components/src/Form.svelte
  10. 9
      packages/standard-components/src/Icon.svelte
  11. 15
      packages/standard-components/src/Image.svelte
  12. 25
      packages/standard-components/src/Input.svelte
  13. 8
      packages/standard-components/src/LinkedRowSelector.svelte
  14. 2
      packages/standard-components/src/NewRow.svelte
  15. 18
      packages/standard-components/src/RichText.svelte
  16. 20
      packages/standard-components/src/RowDetail.svelte
  17. 7
      packages/standard-components/src/StackedList.svelte
  18. 5
      packages/standard-components/src/attachments/Dropzone.svelte
  19. 8
      packages/standard-components/src/charts/ApexChart.svelte
  20. 19
      packages/standard-components/src/charts/BarChart.svelte
  21. 17
      packages/standard-components/src/charts/CandleStickChart.svelte
  22. 19
      packages/standard-components/src/charts/LineChart.svelte
  23. 17
      packages/standard-components/src/charts/PieChart.svelte
  24. 26
      packages/standard-components/src/index.js

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"

Write Preview
Loading…
Cancel
Save