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

tweaks

This commit is contained in:
Peter Clement 2025-02-11 13:27:12 +00:00
parent c26d9f4e13
commit dc202f63a9
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte
View File

@ -1,13 +1,28 @@
<script> <script>
import { onMount } from "svelte" import { onMount } from "svelte"
import { Input } from "@budibase/bbui" import { Input, Icon, Body, AbsTooltip } from "@budibase/bbui"
import { previewStore } from "@/stores/builder" import { previewStore } from "@/stores/builder"
export let baseRoute = "" export let baseRoute = ""
export let testValue = "" export let testValue = ""
// Extract route parameters (anything starting with :)
$: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || [] $: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || []
$: placeholder = (() => {
// Helper function to extract the route parameters
// e.g /employees/:id/:name becomes /employees/1/John for the placeholder
if (!routeParams.length) return "Add test values"
const segments = baseRoute.split("/").slice(2)
let paramCount = 1
return segments
.map(segment => {
if (segment.startsWith(":")) {
return paramCount++
}
return segment
})
.join("/")
})()
$: { $: {
if ($previewStore.selectedComponentContext?.url?.testValue !== undefined) { if ($previewStore.selectedComponentContext?.url?.testValue !== undefined) {
testValue = $previewStore.selectedComponentContext.url.testValue testValue = $previewStore.selectedComponentContext.url.testValue
@ -25,8 +40,18 @@
</script> </script>
<div class="url-test-section"> <div class="url-test-section">
<div class="label">URL Variable Testing</div> <div class="info">
<div class="url-pattern">Pattern: {baseRoute}</div> <Body size="XS">URL Variable Testing</Body>
<AbsTooltip
text="Test how your screen behaves with different URL parameters. Enter values in the format shown in the placeholder."
position={"bottom"}
noWrap
>
<div class="icon">
<Icon name="InfoOutline" size="S" disabled hoverable />
</div>
</AbsTooltip>
</div>
<div class="url-test-container"> <div class="url-test-container">
<div class="base-input"> <div class="base-input">
<Input disabled={true} value={`/${baseRoute.split("/")[1]}/`} /> <Input disabled={true} value={`/${baseRoute.split("/")[1]}/`} />
@ -35,9 +60,7 @@
<Input <Input
value={testValue} value={testValue}
on:change={onVariableChange} on:change={onVariableChange}
placeholder={routeParams.length placeholder={`${placeholder}`}
? `e.g. ${routeParams.map(p => p.slice(1)).join("/")}`
: "Add test values"}
/> />
</div> </div>
</div> </div>
@ -49,18 +72,13 @@
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }
.label { .info {
font-size: var(--spectrum-global-dimension-font-size-75); display: flex;
font-weight: 500; align-items: center;
gap: var(--spacing-s);
margin-bottom: var(--spacing-s); margin-bottom: var(--spacing-s);
} }
.url-pattern {
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--spectrum-global-color-gray-700);
margin-bottom: var(--spacing-xs);
}
.url-test-container { .url-test-container {
display: flex; display: flex;
width: 100%; width: 100%;
@ -86,9 +104,4 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
/* Override input styles to make them look connected */
.url-test-container :global(.spectrum-Textfield:focus-within) {
z-index: 1;
}
</style> </style>

3
packages/client/src/stores/routes.ts
View File

@ -122,14 +122,13 @@ const createRouteStore = () => {
const setTestUrlParams = (route: string, testValue: string) => { const setTestUrlParams = (route: string, testValue: string) => {
const routeSegments = route.split("/").slice(2) const routeSegments = route.split("/").slice(2)
const testSegments = testValue.split("/") const testSegments = testValue.split("/")
const params: Record<string, string> = {}
const params: Record<string, string> = {}
routeSegments.forEach((segment, index) => { routeSegments.forEach((segment, index) => {
if (segment.startsWith(":") && index < testSegments.length) { if (segment.startsWith(":") && index < testSegments.length) {
params[segment.slice(1)] = testSegments[index] params[segment.slice(1)] = testSegments[index]
} }
}) })
store.update(state => ({ ...state, testUrlParams: params })) store.update(state => ({ ...state, testUrlParams: params }))
} }
return { return {