Make all form components use fill width of container
This commit is contained in:
Andrew Kingston
parent
aec4939b93
commit
544f94954c
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "^1.58.4",
|
||||
"@budibase/bbui": "^1.58.5",
|
||||
"@budibase/client": "^0.7.6",
|
||||
"@budibase/colorpicker": "1.0.1",
|
||||
"@budibase/string-templates": "^0.7.6",
|
||||
|
|
|
|||
|
|
@ -842,11 +842,10 @@
|
|||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@budibase/bbui@^1.58.4":
|
||||
version "1.58.4"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
|
||||
integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
|
||||
|
||||
"@budibase/bbui@^1.58.5":
|
||||
version "1.58.5"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
|
||||
integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
|
||||
dependencies:
|
||||
markdown-it "^12.0.2"
|
||||
quill "^1.3.7"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
|
||||
"dependencies": {
|
||||
"@adobe/spectrum-css-workflow-icons": "^1.1.0",
|
||||
"@budibase/bbui": "^1.58.4",
|
||||
"@budibase/bbui": "^1.58.5",
|
||||
"@budibase/svelte-ag-grid": "^0.0.16",
|
||||
"@spectrum-css/actionbutton": "^1.0.0-beta.1",
|
||||
"@spectrum-css/button": "^3.0.0-beta.6",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
Input,
|
||||
} from "@budibase/bbui"
|
||||
|
||||
const { API, styleable, DataProvider, builderStore } = getContext("sdk")
|
||||
const { API, styleable, Provider, builderStore } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
export let table = []
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
if (!isEmpty(table)) {
|
||||
const tableDef = await API.fetchTableDefinition(table)
|
||||
schema = tableDef.schema
|
||||
rows = await API.searchTable({
|
||||
rows = await API.searchTableData({
|
||||
tableId: table,
|
||||
search: parsedSearch,
|
||||
pagination: {
|
||||
|
|
@ -107,18 +107,16 @@
|
|||
{#if loaded}
|
||||
{#if rows.length > 0}
|
||||
{#if $component.children === 0 && $builderStore.inBuilder}
|
||||
<p>Add some components too</p>
|
||||
<p><i class="ri-image-line" />Add some components to display</p>
|
||||
{:else}
|
||||
{#each rows as row}
|
||||
<DataProvider {row}>
|
||||
<Provider data={row}>
|
||||
<slot />
|
||||
</DataProvider>
|
||||
</Provider>
|
||||
{/each}
|
||||
{/if}
|
||||
{:else if $builderStore.inBuilder}
|
||||
<p>Feed me some data</p>
|
||||
{:else}
|
||||
<p>{noRowsMessage}</p>
|
||||
{:else if noRowsMessage}
|
||||
<p><i class="ri-search-2-line" />{noRowsMessage}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="pagination">
|
||||
|
|
@ -133,11 +131,19 @@
|
|||
|
||||
<style>
|
||||
p {
|
||||
margin: 0 var(--spacing-m);
|
||||
background-color: var(--grey-2);
|
||||
color: var(--grey-6);
|
||||
font-size: var(--font-size-s);
|
||||
padding: var(--spacing-l);
|
||||
border-radius: var(--border-radius-s);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #f5f5f5;
|
||||
border: #ccc 1px solid;
|
||||
padding: var(--spacing-m);
|
||||
}
|
||||
p i {
|
||||
margin-bottom: var(--spacing-m);
|
||||
font-size: 1.5rem;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.query-builder {
|
||||
|
|
|
|||
|
|
@ -49,3 +49,9 @@
|
|||
</div>
|
||||
{/if}
|
||||
</Field>
|
||||
|
||||
<style>
|
||||
.spectrum-Checkbox {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import Field from "./Field.svelte"
|
||||
import "flatpickr/dist/flatpickr.css"
|
||||
import "@spectrum-css/inputgroup/dist/index-vars.css"
|
||||
import { generateID } from "../helpers"
|
||||
|
||||
export let field
|
||||
export let label
|
||||
|
|
@ -14,8 +15,9 @@
|
|||
let open = false
|
||||
let flatpickr
|
||||
|
||||
$: flatpickrId = `${$fieldState?.id}-${generateID()}-wrapper`
|
||||
$: flatpickrOptions = {
|
||||
element: `#${$fieldState?.id}-wrapper`,
|
||||
element: `#${flatpickrId}`,
|
||||
enableTime: enableTime || false,
|
||||
altInput: true,
|
||||
altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
|
||||
|
|
@ -46,9 +48,7 @@
|
|||
// duplicate input field.
|
||||
// We need to blur both because the focus styling does not get properly
|
||||
// applied.
|
||||
const els = document.querySelectorAll(
|
||||
`#${$fieldState.fieldId}-wrapper input`
|
||||
)
|
||||
const els = document.querySelectorAll(`#${flatpickrId} input`)
|
||||
els.forEach(el => el.blur())
|
||||
}
|
||||
</script>
|
||||
|
|
@ -62,9 +62,9 @@
|
|||
on:close={onClose}
|
||||
options={flatpickrOptions}
|
||||
on:change={handleChange}
|
||||
element={`#${$fieldState.fieldId}-wrapper`}>
|
||||
element={`#${flatpickrId}`}>
|
||||
<div
|
||||
id={`${$fieldState.fieldId}-wrapper`}
|
||||
id={flatpickrId}
|
||||
aria-disabled="false"
|
||||
aria-invalid={!$fieldState.valid}
|
||||
class:is-invalid={!$fieldState.valid}
|
||||
|
|
@ -124,14 +124,11 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.flatpickr {
|
||||
width: var(
|
||||
--spectrum-alias-single-line-width,
|
||||
var(--spectrum-global-dimension-size-2400)
|
||||
);
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flatpickr .spectrum-Textfield {
|
||||
width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.overlay {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -61,8 +61,13 @@
|
|||
</FieldGroupFallback>
|
||||
|
||||
<style>
|
||||
label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.spectrum-Form-itemField {
|
||||
width: 360px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
|
@ -73,4 +78,9 @@
|
|||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
margin-top: var(--spectrum-global-dimension-size-75);
|
||||
}
|
||||
|
||||
.spectrum-FieldLabel--right,
|
||||
.spectrum-FieldLabel--left {
|
||||
padding-right: var(--spectrum-global-dimension-size-200);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,20 @@
|
|||
setContext("fieldGroup", { labelPosition })
|
||||
</script>
|
||||
|
||||
<div use:styleable={$component.styles}>
|
||||
<div class="wrapper" use:styleable={$component.styles}>
|
||||
<div
|
||||
class="spectrum-Form"
|
||||
class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.spectrum-Form {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -168,5 +168,6 @@
|
|||
<style>
|
||||
div {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -65,4 +65,7 @@
|
|||
div :global(.ql-snow .ql-formats:after) {
|
||||
display: none;
|
||||
}
|
||||
div :global(.ql-editor p) {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -100,7 +100,10 @@
|
|||
}
|
||||
.spectrum-Popover {
|
||||
max-height: 240px;
|
||||
width: var(--spectrum-global-dimension-size-2400);
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
.spectrum-Picker {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -58,3 +58,9 @@
|
|||
</div>
|
||||
{/if}
|
||||
</Field>
|
||||
|
||||
<style>
|
||||
.spectrum-Textfield {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@
|
|||
lodash "^4.17.19"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@budibase/bbui@^1.58.4":
|
||||
version "1.58.4"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
|
||||
integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
|
||||
"@budibase/bbui@^1.58.5":
|
||||
version "1.58.5"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
|
||||
integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
|
||||
dependencies:
|
||||
markdown-it "^12.0.2"
|
||||
quill "^1.3.7"
|
||||
|
|
|
|||
Loading…
Reference in a new issue