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

typing

This commit is contained in:
Peter Clement 2025-01-24 13:48:00 +00:00
parent 20de1b7492
commit 7c52166d0d
10 changed files with 226 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import "@spectrum-css/picker/dist/index-vars.css"
import "@spectrum-css/popover/dist/index-vars.css"
import "@spectrum-css/menu/dist/index-vars.css"
@ -11,43 +11,61 @@
import Tags from "../../Tags/Tags.svelte"
import Tag from "../../Tags/Tag.svelte"
import ProgressCircle from "../../ProgressCircle/ProgressCircle.svelte"
import { PopoverAlignment } from "../../constants"
export let id = null
export let disabled = false
export let fieldText = ""
export let fieldIcon = ""
export let fieldColour = ""
export let isPlaceholder = false
export let placeholderOption = null
export let options = []
export let isOptionSelected = () => false
export let isOptionEnabled = () => true
export let onSelectOption = () => {}
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionIcon = () => null
export let id: string | undefined = undefined
export let disabled: boolean = false
export let fieldText: string = ""
export let fieldIcon: string = ""
export let fieldColour: string = ""
export let isPlaceholder: boolean = false
export let placeholderOption: string | undefined | boolean = undefined
export let options: any[] = []
export let isOptionSelected = (_value: any) => false
export let isOptionEnabled = (_value: any) => true
export let onSelectOption: (_value: any) => void = () => {}
export let getOptionLabel: (_option: any, _idx?: number) => string = option =>
option
export let getOptionValue: (_option: any, _idx?: number) => any = option =>
option
export let getOptionIcon: (
_option: any,
_idx?: number
) => string | undefined = () => undefined
export let useOptionIconImage = false
export let getOptionColour = () => null
export let getOptionSubtitle = () => null
export let open = false
export let readonly = false
export let quiet = false
export let autoWidth = false
export let autocomplete = false
export let sort = false
export let searchTerm = null
export let customPopoverHeight
export let align = "left"
export let footer = null
export let customAnchor = null
export let loading
export let onOptionMouseenter = () => {}
export let onOptionMouseleave = () => {}
export let getOptionColour: (
_option: any,
_idx?: number
) => string | undefined = () => undefined
export let getOptionSubtitle: (
_option: any,
_idx?: number
) => string | undefined = () => undefined
export let open: boolean = false
export let readonly: boolean = false
export let quiet: boolean = false
export let autoWidth: boolean | undefined = false
export let autocomplete: boolean = false
export let sort: boolean = false
export let searchTerm: string | null = null
export let customPopoverHeight: string | undefined = undefined
export let align: PopoverAlignment | undefined = PopoverAlignment.Left
export let footer: string | undefined = undefined
export let customAnchor: HTMLElement | undefined = undefined
export let loading: boolean = false
export let onOptionMouseenter: (
_e: MouseEvent,
_option: any
) => void = () => {}
export let onOptionMouseleave: (
_e: MouseEvent,
_option: any
) => void = () => {}
const dispatch = createEventDispatcher()
let button
let component
let button: any
let component: any
$: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
$: filteredOptions = getFilteredOptions(
@ -56,7 +74,7 @@
getOptionLabel
)
const onClick = e => {
const onClick = (e: MouseEvent) => {
e.preventDefault()
e.stopPropagation()
dispatch("click")
@ -67,7 +85,11 @@
open = !open
}
const getSortedOptions = (options, getLabel, sort) => {
const getSortedOptions = (
options: any[],
getLabel: (_option: any) => string,
sort: boolean
) => {
if (!options?.length || !Array.isArray(options)) {
return []
}
@ -81,17 +103,21 @@
})
}
const getFilteredOptions = (options, term, getLabel) => {
const getFilteredOptions = (
options: any[],
term: string | null,
getLabel: (_option: any) => string
) => {
if (autocomplete && term) {
const lowerCaseTerm = term.toLowerCase()
return options.filter(option => {
return options.filter((option: any) => {
return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
})
}
return options
}
const onScroll = e => {
const onScroll = (e: any) => {
const scrollPxThreshold = 100
const scrollPositionFromBottom =
e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop
@ -151,18 +177,20 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<Popover
anchor={customAnchor ? customAnchor : button}
align={align || "left"}
align={align || PopoverAlignment.Left}
{open}
on:close={() => (open = false)}
useAnchorWidth={!autoWidth}
maxWidth={autoWidth ? 400 : null}
maxWidth={autoWidth ? 400 : undefined}
customHeight={customPopoverHeight}
maxHeight={360}
>
<div
class="popover-content"
class:auto-width={autoWidth}
use:clickOutside={() => (open = false)}
use:clickOutside={() => {
open = false
}}
>
{#if autocomplete}
<Search

16
packages/bbui/src/Form/Core/Search.svelte
View File

@ -1,19 +1,19 @@
<script>
<script lang="ts">
import "@spectrum-css/search/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
export let value = null
export let placeholder = null
export let value: any = null
export let placeholder: string | undefined = undefined
export let disabled = false
export let id = null
export let updateOnChange = true
export let quiet = false
export let inputRef
export let inputRef: HTMLInputElement | undefined = undefined
const dispatch = createEventDispatcher()
let focus = false
const updateValue = value => {
const updateValue = (value: any) => {
dispatch("change", value)
}
@ -21,19 +21,19 @@
focus = true
}
const onBlur = event => {
const onBlur = (event: any) => {
focus = false
updateValue(event.target.value)
}
const onInput = event => {
const onInput = (event: any) => {
if (!updateOnChange) {
return
}
updateValue(event.target.value)
}
const updateValueOnEnter = event => {
const updateValueOnEnter = (event: any) => {
if (event.key === "Enter") {
updateValue(event.target.value)
}

76
packages/bbui/src/Form/Core/Select.svelte
View File

@ -1,33 +1,43 @@
<script>
<script lang="ts">
import { createEventDispatcher } from "svelte"
import Picker from "./Picker.svelte"
export let value = null
export let id = null
export let placeholder = "Choose an option"
export let disabled = false
export let options = []
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let getOptionIcon = () => null
export let getOptionColour = () => null
export let getOptionSubtitle = () => null
export let compare = null
import { PopoverAlignment } from "../../constants"
export let value: any = null
export let id: string | undefined = undefined
export let placeholder: string | boolean = "Choose an option"
export let disabled: boolean = false
export let options: any[] = []
export let getOptionLabel = (option: any) => option
export let getOptionValue = (_option: any, _idx: number | undefined) =>
_option
export let getOptionIcon: (
_option: any,
_idx?: number
) => string | undefined = () => undefined
export let getOptionColour: (
_option: any,
_idx?: number
) => string | undefined = () => undefined
export let getOptionSubtitle: (
_option: any,
_idx?: number
) => string | undefined = () => undefined
export let compare: any = null
export let useOptionIconImage = false
export let isOptionEnabled
export let readonly = false
export let quiet = false
export let autoWidth = false
export let autocomplete = false
export let sort = false
export let align
export let footer = null
export let open = false
export let tag = null
export let searchTerm = null
export let loading
export let readonly: boolean = false
export let quiet: boolean = false
export let autoWidth: boolean = false
export let autocomplete: boolean = false
export let sort: boolean = false
export let align: PopoverAlignment | undefined = PopoverAlignment.Left
export let footer: string | undefined = undefined
export let open: boolean = false
export let searchTerm: string | undefined = undefined
export let loading: boolean | undefined = undefined
export let onOptionMouseenter = () => {}
export let onOptionMouseleave = () => {}
export let customPopoverHeight: string | undefined = undefined
const dispatch = createEventDispatcher()
@ -35,24 +45,28 @@
$: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
$: fieldColour = getFieldAttribute(getOptionColour, value, options)
function compareOptionAndValue(option, value) {
function compareOptionAndValue(option: any, value: any) {
return typeof compare === "function"
? compare(option, value)
: option === value
}
const getFieldAttribute = (getAttribute, value, options) => {
const getFieldAttribute = (getAttribute: any, value: any, options: any) => {
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
const index = options.findIndex((option, idx) =>
const index = options.findIndex((option: any, idx: number) =>
compareOptionAndValue(getOptionValue(option, idx), value)
)
return index !== -1 ? getAttribute(options[index], index) : null
}
const getFieldText = (value, options, placeholder) => {
const getFieldText = (
value: any,
options: any,
placeholder: boolean | string
) => {
if (value == null || value === "") {
// Explicit false means use no placeholder and allow an empty fields
if (placeholder === false) {
@ -67,7 +81,7 @@
)
}
const selectOption = value => {
const selectOption = (value: any) => {
dispatch("change", value)
open = false
}
@ -98,14 +112,14 @@
{isOptionEnabled}
{autocomplete}
{sort}
{tag}
{onOptionMouseenter}
{onOptionMouseleave}
isPlaceholder={value == null || value === ""}
placeholderOption={placeholder === false
? null
? undefined
: placeholder || "Choose an option"}
isOptionSelected={option => compareOptionAndValue(option, value)}
onSelectOption={selectOption}
{loading}
{customPopoverHeight}
/>

29
packages/bbui/src/Form/Core/TextField.svelte
View File

@ -1,25 +1,25 @@
<script>
<script lang="ts">
import "@spectrum-css/textfield/dist/index-vars.css"
import { createEventDispatcher, onMount, tick } from "svelte"
export let value = null
export let placeholder = null
export let placeholder: string | undefined = undefined
export let type = "text"
export let disabled = false
export let id = null
export let readonly = false
export let updateOnChange = true
export let quiet = false
export let align
export let align: "left" | "right" | "center" | undefined = undefined
export let autofocus = false
export let autocomplete = null
export let autocomplete: boolean | undefined
const dispatch = createEventDispatcher()
let field
let field: any
let focus = false
const updateValue = newValue => {
const updateValue = (newValue: any) => {
if (readonly || disabled) {
return
}
@ -37,7 +37,7 @@
focus = true
}
const onBlur = event => {
const onBlur = (event: any) => {
if (readonly || disabled) {
return
}
@ -45,14 +45,14 @@
updateValue(event.target.value)
}
const onInput = event => {
const onInput = (event: any) => {
if (readonly || !updateOnChange || disabled) {
return
}
updateValue(event.target.value)
}
const updateValueOnEnter = event => {
const updateValueOnEnter = (event: any) => {
if (readonly || disabled) {
return
}
@ -61,13 +61,20 @@
}
}
const getInputMode = type => {
const getInputMode = (type: any) => {
if (type === "bigint") {
return "numeric"
}
return type === "number" ? "decimal" : "text"
}
$: autocompleteValue =
typeof autocomplete === "boolean"
? autocomplete
? "on"
: "off"
: undefined
onMount(async () => {
if (disabled) return
focus = autofocus
@ -104,7 +111,7 @@
class="spectrum-Textfield-input"
style={align ? `text-align: ${align};` : ""}
inputmode={getInputMode(type)}
{autocomplete}
autocomplete={autocompleteValue}
/>
</div>

14
packages/bbui/src/Form/Field.svelte
View File

@ -1,14 +1,14 @@
<script>
<script lang="ts">
import "@spectrum-css/fieldlabel/dist/index-vars.css"
import FieldLabel from "./FieldLabel.svelte"
import Icon from "../Icon/Icon.svelte"
export let id = null
export let label = null
export let labelPosition = "above"
export let error = null
export let helpText = null
export let tooltip = ""
export let id: string | undefined = undefined
export let label: string | undefined = undefined
export let labelPosition: string = "above"
export let error: string | undefined = undefined
export let helpText: string | undefined = undefined
export let tooltip: string | undefined = undefined
</script>
<div class="spectrum-Form-item" class:above={labelPosition === "above"}>

15
packages/bbui/src/Form/Input.svelte
View File

@ -1,24 +1,24 @@
<script>
<script lang="ts">
import Field from "./Field.svelte"
import TextField from "./Core/TextField.svelte"
import { createEventDispatcher } from "svelte"
export let value = null
export let label = null
export let value: any = undefined
export let label: string | undefined = undefined
export let labelPosition = "above"
export let placeholder = null
export let placeholder: string | undefined = undefined
export let type = "text"
export let disabled = false
export let readonly = false
export let error = null
export let updateOnChange = true
export let quiet = false
export let autofocus
export let autocomplete
export let autofocus: boolean | undefined = undefined
export let autocomplete: boolean | undefined = undefined
export let helpText = null
const dispatch = createEventDispatcher()
const onChange = e => {
const onChange = (e: any) => {
value = e.detail
dispatch("change", e.detail)
}
@ -27,7 +27,6 @@
<Field {helpText} {label} {labelPosition} {error}>
<TextField
{updateOnChange}
{error}
{disabled}
{readonly}
{value}

56
packages/bbui/src/Form/Select.svelte
View File

@ -1,44 +1,44 @@
<script>
<script lang="ts">
import Field from "./Field.svelte"
import Select from "./Core/Select.svelte"
import { createEventDispatcher } from "svelte"
import { PopoverAlignment } from "../constants"
export let value = null
export let label = undefined
export let disabled = false
export let readonly = false
export let labelPosition = "above"
export let error = null
export let placeholder = "Choose an option"
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
export let getOptionSubtitle = option => option?.subtitle
export let getOptionIcon = option => option?.icon
export let getOptionColour = option => option?.colour
export let value: string | undefined = undefined
export let label: string | undefined = undefined
export let disabled: boolean = false
export let readonly: boolean = false
export let labelPosition: string = "above"
export let error: string | undefined = undefined
export let placeholder: string = "Choose an option"
export let options: any[] = []
export let getOptionLabel = (option: any) => extractProperty(option, "label")
export let getOptionValue = (option: any) => extractProperty(option, "value")
export let getOptionSubtitle = (option: any) => option?.subtitle
export let getOptionIcon = (option: any) => option?.icon
export let getOptionColour = (option: any) => option?.colour
export let useOptionIconImage = false
export let isOptionEnabled = undefined
export let quiet = false
export let autoWidth = false
export let sort = false
export let tooltip = ""
export let autocomplete = false
export let customPopoverHeight = undefined
export let align = undefined
export let footer = null
export let tag = null
export let helpText = null
export let compare = undefined
export let quiet: boolean = false
export let autoWidth: boolean = false
export let sort: boolean = false
export let tooltip: string | undefined = undefined
export let autocomplete: boolean = false
export let customPopoverHeight: string | undefined = undefined
export let align: PopoverAlignment | undefined = PopoverAlignment.Left
export let footer: string | undefined = undefined
export let helpText: string | undefined = undefined
export let compare: any = undefined
export let onOptionMouseenter = () => {}
export let onOptionMouseleave = () => {}
const dispatch = createEventDispatcher()
const onChange = e => {
const onChange = (e: any) => {
value = e.detail
dispatch("change", e.detail)
}
const extractProperty = (value, property) => {
const extractProperty = (value: any, property: any) => {
if (value && typeof value === "object") {
return value[property]
}
@ -49,7 +49,6 @@
<Field {helpText} {label} {labelPosition} {error} {tooltip}>
<Select
{quiet}
{error}
{disabled}
{readonly}
{value}
@ -68,7 +67,6 @@
{isOptionEnabled}
{autocomplete}
{customPopoverHeight}
{tag}
{compare}
{onOptionMouseenter}
{onOptionMouseleave}

40
packages/bbui/src/StatusLight/StatusLight.svelte
View File

@ -1,25 +1,25 @@
<script>
<script lang="ts">
import "@spectrum-css/statuslight"
export let size = "M"
export let celery = false
export let yellow = false
export let fuchsia = false
export let indigo = false
export let seafoam = false
export let chartreuse = false
export let magenta = false
export let purple = false
export let neutral = false
export let info = false
export let positive = false
export let notice = false
export let negative = false
export let disabled = false
export let active = false
export let color = null
export let square = false
export let hoverable = false
export let size: string = "M"
export let celery: boolean = false
export let yellow: boolean = false
export let fuchsia: boolean = false
export let indigo: boolean = false
export let seafoam: boolean = false
export let chartreuse: boolean = false
export let magenta: boolean = false
export let purple: boolean = false
export let neutral: boolean = false
export let info: boolean = false
export let positive: boolean = false
export let notice: boolean = false
export let negative: boolean = false
export let disabled: boolean = false
export let active: boolean = false
export let color: string | undefined = undefined
export let square: boolean = false
export let hoverable: boolean = false
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->

40
packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
View File

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { Icon, Input, Drawer, Button } from "@budibase/bbui"
import {
readableToRuntimeBinding,
@ -10,25 +10,25 @@
import { builderStore } from "@/stores/builder"
export let panel = ClientBindingPanel
export let value = ""
export let bindings = []
export let title
export let placeholder
export let label
export let disabled = false
export let allowHBS = true
export let allowJS = true
export let allowHelpers = true
export let updateOnChange = true
export let key
export let disableBindings = false
export let forceModal = false
export let value: any = ""
export let bindings: any[] = []
export let title: string | undefined = undefined
export let placeholder: string | undefined = undefined
export let label: string | undefined = undefined
export let disabled: boolean = false
export let allowHBS: boolean = true
export let allowJS: boolean = true
export let allowHelpers: boolean = true
export let updateOnChange: boolean = true
export let key: string | null = null
export let disableBindings: boolean = false
export let forceModal: boolean = false
export let context = null
export let autocomplete
export let autocomplete: boolean | undefined = undefined
const dispatch = createEventDispatcher()
let bindingDrawer
let bindingDrawer: any
let currentVal = value
$: readableValue = runtimeToReadableBinding(bindings, value)
@ -38,7 +38,7 @@
const saveBinding = () => {
onChange(tempValue)
onBlur()
builderStore.propertyFocus()
builderStore.propertyFocus(null)
bindingDrawer.hide()
}
@ -46,7 +46,7 @@
save: saveBinding,
})
const onChange = value => {
const onChange = (value: any) => {
currentVal = readableToRuntimeBinding(bindings, value)
dispatch("change", currentVal)
}
@ -55,8 +55,8 @@
dispatch("blur", currentVal)
}
const onDrawerHide = e => {
builderStore.propertyFocus()
const onDrawerHide = (e: any) => {
builderStore.propertyFocus(null)
dispatch("drawerHide", e.detail)
}
</script>

6
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte
View File

@ -265,7 +265,7 @@
</div>
</div>
{/if}
<div style="opacity: 0.5; ">
<div class="link-opacity">
<Link
href="https://docs.budibase.com/docs/app-state"
target="_blank"
@ -329,4 +329,8 @@
align-items: flex-start;
gap: var(--spacing-xs);
}
.link-opacity {
opacity: 0.5;
}
</style>