forked from tsai/budibase
Andrew Kingston
6 years ago
28 changed files with 264 additions and 195 deletions
@ -0,0 +1,39 @@ |
|||
<script> |
|||
import { DataList, Label } from "@budibase/bbui" |
|||
import { currentAsset, store } from "builderStore" |
|||
import { getActionProviderComponents } from "builderStore/dataBinding" |
|||
|
|||
export let parameters |
|||
|
|||
$: actionProviders = getActionProviderComponents( |
|||
$currentAsset.props, |
|||
$store.selectedComponentId, |
|||
"ValidateForm" |
|||
) |
|||
$: console.log(actionProviders) |
|||
</script> |
|||
|
|||
<div class="root"> |
|||
<Label size="m" color="dark">Form</Label> |
|||
<DataList secondary bind:value={parameters.componentId} label="asd"> |
|||
<option value="" /> |
|||
{#if actionProviders} |
|||
{#each actionProviders as component} |
|||
<option value={component._id}>{component._instanceName}</option> |
|||
{/each} |
|||
{/if} |
|||
</DataList> |
|||
</div> |
|||
|
|||
<style> |
|||
.root { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.root :global(> div) { |
|||
flex: 1; |
|||
margin-left: var(--spacing-l); |
|||
} |
|||
</style> |
|||
@ -1,15 +0,0 @@ |
|||
<script> |
|||
import { getContext, setContext } from "svelte" |
|||
import { createDataStore } from "../store" |
|||
|
|||
export let row |
|||
|
|||
// Clone and create new data context for this component tree |
|||
const dataContext = getContext("data") |
|||
const component = getContext("component") |
|||
const newData = createDataStore($dataContext) |
|||
setContext("data", newData) |
|||
$: newData.actions.addContext(row, $component.id) |
|||
</script> |
|||
|
|||
<slot /> |
|||
@ -0,0 +1,29 @@ |
|||
<script> |
|||
import { getContext, setContext } from "svelte" |
|||
import { createContextStore } from "../store" |
|||
|
|||
export let data |
|||
export let actions |
|||
|
|||
// Clone and create new data context for this component tree |
|||
const context = getContext("context") |
|||
const component = getContext("component") |
|||
const newContext = createContextStore($context) |
|||
setContext("context", newContext) |
|||
|
|||
// Add data context |
|||
$: { |
|||
if (data !== undefined) { |
|||
newContext.actions.provideData($component.id, data) |
|||
} |
|||
} |
|||
|
|||
// Add actions context |
|||
$: { |
|||
actions?.forEach(({ type, callback }) => { |
|||
newContext.actions.provideAction($component.id, type, callback) |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<slot /> |
|||
@ -1,3 +1,7 @@ |
|||
export const TableNames = { |
|||
USERS: "ta_users", |
|||
} |
|||
|
|||
export const ActionTypes = { |
|||
ValidateForm: "ValidateForm", |
|||
} |
|||
|
|||
@ -1,21 +0,0 @@ |
|||
import { writable } from "svelte/store" |
|||
|
|||
const createBindingStore = () => { |
|||
const store = writable({}) |
|||
|
|||
const setBindableValue = (componentId, value) => { |
|||
store.update(state => { |
|||
if (componentId) { |
|||
state[componentId] = value |
|||
} |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
subscribe: store.subscribe, |
|||
actions: { setBindableValue }, |
|||
} |
|||
} |
|||
|
|||
export const bindingStore = createBindingStore() |
|||
@ -0,0 +1,34 @@ |
|||
import { writable } from "svelte/store" |
|||
import { cloneDeep } from "lodash/fp" |
|||
|
|||
export const createContextStore = existingContext => { |
|||
const store = writable({ ...existingContext }) |
|||
|
|||
// Adds a data context layer to the tree
|
|||
const provideData = (componentId, data) => { |
|||
store.update(state => { |
|||
if (componentId) { |
|||
state[componentId] = data |
|||
state[`${componentId}_draft`] = cloneDeep(data) |
|||
state.closestComponentId = componentId |
|||
} |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
// Adds an action context layer to the tree
|
|||
const provideAction = (componentId, actionType, callback) => { |
|||
store.update(state => { |
|||
if (actionType && componentId) { |
|||
state[`${componentId}_${actionType}`] = callback |
|||
} |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
subscribe: store.subscribe, |
|||
update: store.update, |
|||
actions: { provideData, provideAction }, |
|||
} |
|||
} |
|||
@ -1,26 +0,0 @@ |
|||
import { writable } from "svelte/store" |
|||
import { cloneDeep } from "lodash/fp" |
|||
|
|||
export const createDataStore = existingContext => { |
|||
const store = writable({ ...existingContext }) |
|||
|
|||
// Adds a context layer to the data context tree
|
|||
const addContext = (row, componentId) => { |
|||
store.update(state => { |
|||
if (componentId) { |
|||
state[componentId] = row |
|||
state[`${componentId}_draft`] = cloneDeep(row) |
|||
state.closestComponentId = componentId |
|||
} |
|||
return state |
|||
}) |
|||
} |
|||
|
|||
return { |
|||
subscribe: store.subscribe, |
|||
update: store.update, |
|||
actions: { addContext }, |
|||
} |
|||
} |
|||
|
|||
export const dataStore = createDataStore() |
|||
@ -1,14 +0,0 @@ |
|||
<script> |
|||
import { getContext } from "svelte" |
|||
|
|||
const { styleable, setBindableValue } = getContext("sdk") |
|||
const component = getContext("component") |
|||
|
|||
let value |
|||
|
|||
function onBlur() { |
|||
setBindableValue($component.id, value) |
|||
} |
|||
</script> |
|||
|
|||
<input bind:value on:blur={onBlur} use:styleable={$component.styles} /> |
|||
@ -1,14 +1,14 @@ |
|||
<script> |
|||
import { getContext } from "svelte" |
|||
|
|||
const { DataProvider, styleable } = getContext("sdk") |
|||
const { Provider, styleable } = getContext("sdk") |
|||
const component = getContext("component") |
|||
|
|||
export let table |
|||
</script> |
|||
|
|||
<div use:styleable={$component.styles}> |
|||
<DataProvider row={{ tableId: table }}> |
|||
<Provider data={{ tableId: table }}> |
|||
<slot /> |
|||
</DataProvider> |
|||
</Provider> |
|||
</div> |
|||
|
|||
Loading…
Reference in new issue