Remove deprecated props, fix warnings, remove old code
This commit is contained in:
Andrew Kingston
parent
48a5a50e85
commit
a54dd9509f
|
|
@ -15,8 +15,6 @@ export class Component extends BaseStructure {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "",
|
||||
_instanceName: "",
|
||||
_children: [],
|
||||
|
|
|
|||
|
|
@ -1,127 +0,0 @@
|
|||
<script>
|
||||
import { keys, map, includes, filter } from "lodash/fp"
|
||||
import EventEditorModal from "./EventEditorModal.svelte"
|
||||
import { Modal } from "@budibase/bbui"
|
||||
|
||||
export const EVENT_TYPE = "event"
|
||||
export let component
|
||||
|
||||
let events = []
|
||||
let selectedEvent = null
|
||||
let modal
|
||||
|
||||
$: {
|
||||
events = Object.keys(component)
|
||||
// TODO: use real events
|
||||
.filter(propName => ["onChange", "onClick", "onLoad"].includes(propName))
|
||||
.map(propName => ({
|
||||
name: propName,
|
||||
handlers: component[propName] || [],
|
||||
}))
|
||||
}
|
||||
|
||||
const openModal = event => {
|
||||
selectedEvent = event
|
||||
modal.show()
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="newevent" on:click={() => openModal()}>
|
||||
<i class="icon ri-add-circle-fill" />
|
||||
Create New Event
|
||||
</button>
|
||||
|
||||
<div class="root">
|
||||
<form on:submit|preventDefault class="form-root">
|
||||
{#each events as event, index}
|
||||
{#if event.handlers.length > 0}
|
||||
<div
|
||||
class:selected={selectedEvent && selectedEvent.index === index}
|
||||
class="handler-container budibase__nav-item"
|
||||
on:click={() => openModal({ ...event, index })}>
|
||||
<span class="event-name">{event.name}</span>
|
||||
<span class="edit-text">EDIT</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<Modal bind:this={modal} width="600px">
|
||||
<EventEditorModal eventOptions={events} event={selectedEvent} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
font-size: 10pt;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newevent {
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--grey-4);
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
margin: 0px 0px 12px 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: var(--background);
|
||||
color: var(--ink);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 2ms;
|
||||
}
|
||||
|
||||
.newevent:hover {
|
||||
background: var(--grey-1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-root {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.handler-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 2px solid var(--grey-1);
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.event-name {
|
||||
margin-top: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: rgba(22, 48, 87, 0.6);
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.edit-text {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
align-self: end;
|
||||
justify-self: end;
|
||||
font-size: 10px;
|
||||
color: rgba(35, 65, 105, 0.4);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--blue);
|
||||
background: var(--grey-1) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<script>
|
||||
import { Input, DataList, Select } from "@budibase/bbui"
|
||||
import { automationStore, allScreens } from "builderStore"
|
||||
|
||||
export let parameter
|
||||
|
||||
let isOpen = false
|
||||
|
||||
const capitalize = s => {
|
||||
if (typeof s !== "string") return ""
|
||||
return s.charAt(0).toUpperCase() + s.slice(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="handler-option">
|
||||
{#if parameter.name === 'automation'}<span>{parameter.name}</span>{/if}
|
||||
{#if parameter.name === 'automation'}
|
||||
<Select on:change bind:value={parameter.value}>
|
||||
<option value="" />
|
||||
{#each $automationStore.automations.filter(wf => wf.live) as automation}
|
||||
<option value={automation._id}>{automation.name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
{:else if parameter.name === 'url'}
|
||||
<DataList on:change bind:value={parameter.value}>
|
||||
<option value="" />
|
||||
{#each $allScreens as screen}
|
||||
<option value={screen.routing.route}>
|
||||
{screen.props._instanceName}
|
||||
</option>
|
||||
{/each}
|
||||
</DataList>
|
||||
{:else}
|
||||
<Input
|
||||
name={parameter.name}
|
||||
label={capitalize(parameter.name)}
|
||||
on:change
|
||||
value={parameter.value} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.handler-option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
import Component from "./Component.svelte"
|
||||
|
||||
// Keep route params up to date
|
||||
export let params
|
||||
export let params = {}
|
||||
$: routeStore.actions.setRouteParams(params || {})
|
||||
|
||||
// Get the screen definition for the current route
|
||||
|
|
|
|||
|
|
@ -31,8 +31,6 @@ const MAIN = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_appId: "inst_app_80b_f158d4057d2c4bedb0042d42fda8abaf",
|
||||
_instanceName: "Header",
|
||||
|
|
@ -58,12 +56,6 @@ const MAIN = {
|
|||
_code: "",
|
||||
logoUrl:
|
||||
"https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg",
|
||||
title: "",
|
||||
backgroundColor: "",
|
||||
color: "",
|
||||
borderWidth: "",
|
||||
borderColor: "",
|
||||
borderStyle: "",
|
||||
_appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
|
||||
_instanceName: "Navigation",
|
||||
_children: [
|
||||
|
|
@ -88,11 +80,6 @@ const MAIN = {
|
|||
url: "/",
|
||||
openInNewTab: false,
|
||||
text: "Home",
|
||||
color: "",
|
||||
hoverColor: "",
|
||||
underline: false,
|
||||
fontSize: "",
|
||||
fontFamily: "initial",
|
||||
_appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
|
||||
_instanceName: "Home Link",
|
||||
_children: [],
|
||||
|
|
@ -143,8 +130,6 @@ const MAIN = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -181,13 +166,7 @@ const UNAUTHENTICATED = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
loginRedirect: "",
|
||||
usernameLabel: "Username",
|
||||
passwordLabel: "Password",
|
||||
loginButtonLabel: "Login",
|
||||
buttonClass: "",
|
||||
_instanceName: "Login",
|
||||
inputClass: "",
|
||||
_children: [],
|
||||
title: "Log in to {{ name }}",
|
||||
buttonText: "Log In",
|
||||
|
|
@ -213,8 +192,6 @@ const UNAUTHENTICATED = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,8 +19,6 @@ exports.HOME_SCREEN = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_children: [
|
||||
{
|
||||
|
|
@ -35,7 +33,6 @@ exports.HOME_SCREEN = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
text: "Welcome to your Budibase App 👋",
|
||||
type: "h2",
|
||||
_appId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394",
|
||||
|
|
@ -61,8 +58,6 @@ exports.HOME_SCREEN = {
|
|||
selected: {},
|
||||
},
|
||||
_code: "",
|
||||
className: "",
|
||||
onLoad: [],
|
||||
type: "div",
|
||||
_appId: "inst_app_2cc_ca3383f896034e9295345c05f7dfca0c",
|
||||
_instanceName: "Video Container",
|
||||
|
|
|
|||
|
|
@ -18,13 +18,7 @@
|
|||
"description": "A basic header navigation component",
|
||||
"children": true,
|
||||
"props": {
|
||||
"logoUrl": "string",
|
||||
"title": "string",
|
||||
"backgroundColor": "string",
|
||||
"color": "string",
|
||||
"borderWidth": "string",
|
||||
"borderColor": "string",
|
||||
"borderStyle": "string"
|
||||
"logoUrl": "string"
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
|
|
@ -32,7 +26,6 @@
|
|||
"description": "an html <button />",
|
||||
"props": {
|
||||
"text": "string",
|
||||
"className": "string",
|
||||
"disabled": "bool",
|
||||
"onClick": "event"
|
||||
},
|
||||
|
|
@ -65,23 +58,8 @@
|
|||
"name": "Login Control",
|
||||
"description": "A control that accepts username, password an also handles password resets",
|
||||
"props": {
|
||||
"logo": "asset",
|
||||
"loginRedirect": "string",
|
||||
"logo": "string",
|
||||
"title": "string",
|
||||
"usernameLabel": {
|
||||
"type": "string",
|
||||
"default": "Username"
|
||||
},
|
||||
"passwordLabel": {
|
||||
"type": "string",
|
||||
"default": "Password"
|
||||
},
|
||||
"loginButtonLabel": {
|
||||
"type": "string",
|
||||
"default": "Login"
|
||||
},
|
||||
"buttonClass": "string",
|
||||
"inputClass": "string",
|
||||
"buttonText": "string"
|
||||
},
|
||||
"tags": [
|
||||
|
|
@ -96,7 +74,6 @@
|
|||
"bindable": "value",
|
||||
"description": "An HTML input",
|
||||
"props": {
|
||||
"value": "string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
|
|
@ -122,27 +99,15 @@
|
|||
"week"
|
||||
],
|
||||
"default": "text"
|
||||
},
|
||||
"onChange": "event",
|
||||
"className": "string"
|
||||
}
|
||||
},
|
||||
"tags": [
|
||||
"form"
|
||||
]
|
||||
},
|
||||
"option": {
|
||||
"name": "Option",
|
||||
"description": "An HTML <option>, to be used with <select>",
|
||||
"children": false,
|
||||
"props": {
|
||||
"value": "string",
|
||||
"text": "string"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"name": "Text",
|
||||
"description": "stylable block of text",
|
||||
"children": false,
|
||||
"props": {
|
||||
"text": "string",
|
||||
"type": {
|
||||
|
|
@ -155,16 +120,6 @@
|
|||
"container"
|
||||
]
|
||||
},
|
||||
"textfield": {
|
||||
"name": "Textfield",
|
||||
"description": "A component that allows the user to input text.",
|
||||
"props": {
|
||||
"label": "string",
|
||||
"type": "string",
|
||||
"value": "string",
|
||||
"onchange": "event"
|
||||
}
|
||||
},
|
||||
"richtext": {
|
||||
"name": "Rich Text",
|
||||
"description": "A component that allows the user to enter long form text.",
|
||||
|
|
@ -186,17 +141,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"datatable": {
|
||||
"description": "an HTML table that fetches data from a table or view and displays it.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"datasource": "tables",
|
||||
"stripeColor": "string",
|
||||
"borderColor": "string",
|
||||
"backgroundColor": "string",
|
||||
"color": "string"
|
||||
}
|
||||
},
|
||||
"datagrid": {
|
||||
"name": "Grid",
|
||||
"description": "a datagrid component with functionality to add, remove and edit rows.",
|
||||
|
|
@ -238,21 +182,6 @@
|
|||
"data": true,
|
||||
"props": {}
|
||||
},
|
||||
"datalist": {
|
||||
"description": "A configurable data list that attaches to your backend tables.",
|
||||
"data": true,
|
||||
"props": {
|
||||
"table": "tables",
|
||||
"layout": {
|
||||
"type": "options",
|
||||
"default": "list",
|
||||
"options": [
|
||||
"list",
|
||||
"grid"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"list": {
|
||||
"name": "Repeater",
|
||||
"description": "A configurable data list that attaches to your backend tables.",
|
||||
|
|
@ -656,8 +585,7 @@
|
|||
"description": "Date Picker",
|
||||
"bindable": "value",
|
||||
"props": {
|
||||
"placeholder": "string",
|
||||
"value": "string"
|
||||
"placeholder": "string"
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
|
|
@ -666,36 +594,13 @@
|
|||
"props": {
|
||||
"url": "string",
|
||||
"openInNewTab": "bool",
|
||||
"text": "string",
|
||||
"color": "string",
|
||||
"hoverColor": "string",
|
||||
"underline": "bool",
|
||||
"fontSize": "string",
|
||||
"fontFamily": {
|
||||
"type": "options",
|
||||
"default": "initial",
|
||||
"styleBindingProperty": "font-family",
|
||||
"options": [
|
||||
"initial",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Arial",
|
||||
"Arial Black",
|
||||
"Comic Sans MS",
|
||||
"Impact",
|
||||
"Lucida Sans Unicode"
|
||||
]
|
||||
}
|
||||
"text": "string"
|
||||
}
|
||||
},
|
||||
"image": {
|
||||
"description": "an HTML <img> tag",
|
||||
"props": {
|
||||
"url": "string",
|
||||
"className": "string",
|
||||
"description": "string",
|
||||
"height": "string",
|
||||
"width": "string"
|
||||
"url": "string"
|
||||
}
|
||||
},
|
||||
"container": {
|
||||
|
|
@ -703,8 +608,6 @@
|
|||
"children": true,
|
||||
"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
|
||||
"props": {
|
||||
"className": "string",
|
||||
"onLoad": "event",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"options": [
|
||||
|
|
@ -736,7 +639,6 @@
|
|||
"name": "Heading",
|
||||
"description": "An HTML H1 - H6 tag",
|
||||
"props": {
|
||||
"className": "string",
|
||||
"text": "string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
|
|
@ -752,19 +654,5 @@
|
|||
}
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
"thead": {
|
||||
"name": "Table Head",
|
||||
"description": "an HTML <thead> tab",
|
||||
"props": {
|
||||
"className": "string"
|
||||
}
|
||||
},
|
||||
"tbody": {
|
||||
"name": "Table Body",
|
||||
"description": "an HTML <tbody> tab",
|
||||
"props": {
|
||||
"className": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
const { styleable } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
export let className = ""
|
||||
export let type = "div"
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
const component = getContext("component")
|
||||
|
||||
export let logoUrl
|
||||
export let title
|
||||
|
||||
const logOut = () => {
|
||||
authStore.actions.logOut()
|
||||
|
|
@ -18,7 +17,6 @@
|
|||
{#if logoUrl}
|
||||
<img class="logo" alt="logo" src={logoUrl} height="48" />
|
||||
{/if}
|
||||
{#if title}<span>{title}</span>{/if}
|
||||
</a>
|
||||
<div class="nav__controls">
|
||||
<div on:click={logOut}>Log out</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
<script>
|
||||
import Input from "./Input.svelte"
|
||||
export let _bb
|
||||
|
||||
export let label = ""
|
||||
export let value = ""
|
||||
export let onchange = () => {}
|
||||
</script>
|
||||
|
||||
<Input type="text" {_bb} {label} {value} {onchange} />
|
||||
|
|
@ -5,7 +5,6 @@ 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 textfield } from "./Textfield.svelte"
|
||||
export { default as richtext } from "./RichText.svelte"
|
||||
export { default as button } from "./Button.svelte"
|
||||
export { default as login } from "./Login.svelte"
|
||||
|
|
|
|||
Loading…
Reference in New Issue