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

Merge pull request #15777 from Budibase/feat/color-picker-ts-conversion 

TS conversion for ColorPicker component
This commit is contained in:
Peter Clement 2025-03-20 10:25:49 +00:00 committed by GitHub
parent 5c65613c41 cd36b68805
commit aa8cb35e84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/bbui/src/ColorPicker/ColorPicker.svelte
View File

@ -1,4 +1,4 @@
<script> <script lang="ts">
import Popover from "../Popover/Popover.svelte" import Popover from "../Popover/Popover.svelte"
import Layout from "../Layout/Layout.svelte" import Layout from "../Layout/Layout.svelte"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
@ -11,15 +11,17 @@
getThemeClassNames, getThemeClassNames,
DefaultAppTheme, DefaultAppTheme,
} from "@budibase/shared-core" } from "@budibase/shared-core"
import type { Theme } from "@budibase/types"
import type { PopoverAlignment } from "../constants"
export let value export let value: string | undefined = undefined
export let size = "M" export let size: "S" | "M" | "L" = "M"
export let spectrumTheme export let spectrumTheme: Theme | undefined = undefined
export let offset export let offset: number | undefined = undefined
export let align export let align: PopoverAlignment | undefined = undefined
let dropdown let dropdown: Popover | undefined
let preview let preview: HTMLElement | undefined
$: customValue = getCustomValue(value) $: customValue = getCustomValue(value)
$: checkColor = getCheckColor(value) $: checkColor = getCheckColor(value)
@ -124,7 +126,7 @@
}, },
] ]
const getThemeClasses = theme => { const getThemeClasses = (theme: Theme | undefined) => {
if (!theme) { if (!theme) {
return "" return ""
} }
@ -132,12 +134,12 @@
return getThemeClassNames(theme) return getThemeClassNames(theme)
} }
const onChange = value => { const onChange = (value: string | null) => {
dispatch("change", value) dispatch("change", value)
dropdown.hide() dropdown?.hide()
} }
const getCustomValue = value => { const getCustomValue = (value: string | undefined) => {
if (!value) { if (!value) {
return value return value
} }
@ -152,11 +154,11 @@
return found ? null : value return found ? null : value
} }
const prettyPrint = color => { const prettyPrint = (color: string) => {
return capitalise(color.split("-").join(" ")) return capitalise(color.split("-").join(" "))
} }
const getCheckColor = value => { const getCheckColor = (value: string | undefined) => {
// Use dynamic color for theme grays // Use dynamic color for theme grays
if (value?.includes("-gray-")) { if (value?.includes("-gray-")) {
return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value) return /^.*(gray-(50|75|100|200|300|400|500))\)$/.test(value)
@ -187,7 +189,7 @@
bind:this={preview} bind:this={preview}
class="preview size--{size || 'M'}" class="preview size--{size || 'M'}"
on:click={() => { on:click={() => {
dropdown.toggle() dropdown?.toggle()
}} }}
> >
<div <div