diff --git a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js index 486ff76697..67a1d1c916 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js +++ b/packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js @@ -98,7 +98,7 @@ const createScreen = table => { limit: 1, }) - const repeater = new Component("@budibase/standard-components/list") + const repeater = new Component("@budibase/standard-components/repeater") .instanceName("Repeater") .customProps({ dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`, diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json index 3f58fc7a89..9dadf2aa25 100644 --- a/packages/builder/src/components/design/AppPreview/componentStructure.json +++ b/packages/builder/src/components/design/AppPreview/componentStructure.json @@ -2,7 +2,8 @@ "container", "dataprovider", "datagrid", - "list", + "table", + "repeater", "button", "search", { diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte index d3183636d6..3a87bc9db1 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte @@ -11,6 +11,7 @@ export let value = "" export let onChange = () => {} export let multiselect = false + export let placeholder $: datasource = getDatasourceForProvider($currentAsset, componentInstance) $: schema = getSchemaForDatasource(datasource).schema @@ -18,7 +19,7 @@ {#if multiselect} - + {:else} - + {/if} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte index b18b06d3ba..f84c495ec4 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte @@ -4,6 +4,7 @@ export let options = [] export let value = [] export let onChange = () => {} + export let placeholder let boundValue = getValidOptions(value, options) @@ -26,6 +27,7 @@ align="right" extraThin secondary + {placeholder} value={boundValue} on:change={setValue}> {#each options as option} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte index c464ed84e0..2ff67f1c30 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte @@ -7,6 +7,7 @@ export let value = "" export let styleBindingProperty export let onChange = () => {} + export let placeholder let open = null let rotate = "" @@ -108,7 +109,7 @@ $: displayLabel = selectedOption && selectedOption.label ? selectedOption.label - : value || "Choose option" + : value || placeholder || "Choose option"
+ export let value + + +{value} diff --git a/packages/standard-components/src/table/BooleanRenderer.svelte b/packages/standard-components/src/table/BooleanRenderer.svelte new file mode 100644 index 0000000000..a8d86efdea --- /dev/null +++ b/packages/standard-components/src/table/BooleanRenderer.svelte @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/standard-components/src/table/CellRenderer.svelte b/packages/standard-components/src/table/CellRenderer.svelte new file mode 100644 index 0000000000..7374bc337c --- /dev/null +++ b/packages/standard-components/src/table/CellRenderer.svelte @@ -0,0 +1,26 @@ + + +{#if value != null && value !== ''} + {#if plainTypes.includes(type)} + {value} + {:else if type === 'boolean'} + + {:else if type === 'datetime'} + + {:else if type === 'link'} + + {:else if type === 'attachment'} + + {/if} +{/if} diff --git a/packages/standard-components/src/table/DateTimeRenderer.svelte b/packages/standard-components/src/table/DateTimeRenderer.svelte new file mode 100644 index 0000000000..fbde2999e1 --- /dev/null +++ b/packages/standard-components/src/table/DateTimeRenderer.svelte @@ -0,0 +1,7 @@ + + +{dayjs(value).format('MMMM D YYYY, HH:mm')} diff --git a/packages/standard-components/src/table/RelationshipRenderer.svelte b/packages/standard-components/src/table/RelationshipRenderer.svelte new file mode 100644 index 0000000000..7096101582 --- /dev/null +++ b/packages/standard-components/src/table/RelationshipRenderer.svelte @@ -0,0 +1,15 @@ + + +{#if value && value.length} + {#each value as item} + {#if item && item.primaryDisplay} + + {item.primaryDisplay} + + {/if} + {/each} +{/if} diff --git a/packages/standard-components/src/table/Table.svelte b/packages/standard-components/src/table/Table.svelte new file mode 100644 index 0000000000..930b5a343a --- /dev/null +++ b/packages/standard-components/src/table/Table.svelte @@ -0,0 +1,136 @@ + + +
+ + + + {#each fields as field} + + {/each} + + + + {#each sortedRows as row} + + {#each fields as field} + + {/each} + + {/each} + +
sortBy(field)}> +
+ {schema[field]?.name} + +
+
+
+ +
+
+
+ + diff --git a/packages/standard-components/src/table/index.js b/packages/standard-components/src/table/index.js new file mode 100644 index 0000000000..410fe1ff6c --- /dev/null +++ b/packages/standard-components/src/table/index.js @@ -0,0 +1 @@ +export { default as table } from "./Table.svelte" diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock index 8a026bd592..236a7104b0 100644 --- a/packages/standard-components/yarn.lock +++ b/packages/standard-components/yarn.lock @@ -132,72 +132,82 @@ estree-walker "^1.0.1" picomatch "^2.2.2" -"@spectrum-css/actionbutton@^1.0.0-beta.1": - version "1.0.0-beta.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6" - integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ== +"@spectrum-css/actionbutton@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577" + integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw== -"@spectrum-css/button@^3.0.0-beta.6": - version "3.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a" - integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg== +"@spectrum-css/button@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643" + integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA== -"@spectrum-css/checkbox@^3.0.0-beta.6": - version "3.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374" - integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ== +"@spectrum-css/checkbox@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8" + integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw== -"@spectrum-css/fieldlabel@^3.0.0-beta.7": - version "3.0.0-beta.7" - resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114" - integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog== +"@spectrum-css/fieldlabel@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.1.tgz#39f7c0f25cc2ff402afeff005341b0832f7c588c" + integrity sha512-LMfwrwIq8wEEvxFLobdLvXRwKrp8o9Fty4iJ9aYl2Rj1uXkfRd8qLz9HGZjLEE1OuJgoTBgamYABl7EvoA5PLw== -"@spectrum-css/icon@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb" - integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA== +"@spectrum-css/icon@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177" + integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ== -"@spectrum-css/inputgroup@^3.0.0-beta.7": - version "3.0.0-beta.7" - resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.0-beta.7.tgz#9829812e349bf973fb8835f0586bf013c8c38d23" - integrity sha512-pZDpYhtTKZUVG31Rtx7imdwK2ohLyVuTEsl+mj2yDKn+2TOwYRxr6LdbfNhFN4xd0GtSqapKYfbgKBWYpIyiSw== +"@spectrum-css/inputgroup@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.1.tgz#8c5b257b57b3b2cf04e99355709365fa0d6838cc" + integrity sha512-asBRa1jTlld6plkcq4ySO+xl+OJlCMSOLoAFdSSIJowcSlCV0yDy7oeOhf5YQv9mMHFWTKlWUSoAKDZTguIPxA== -"@spectrum-css/menu@^3.0.0-beta.5": - version "3.0.0-beta.5" - resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74" - integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw== +"@spectrum-css/label@^2.0.9": + version "2.0.9" + resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb" + integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A== -"@spectrum-css/page@^3.0.0-beta.0": - version "3.0.0-beta.0" - resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58" - integrity sha512-+OD+l3aLisykxJnHfLkdkxMS1Uj1vKGYpKil7W0r5lSWU44eHyRgb8ZK5Vri1+sUO5SSf/CTybeVwtXME9wMLA== +"@spectrum-css/menu@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe" + integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg== + +"@spectrum-css/page@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846" + integrity sha512-LAlKF8km5BlsGPpZ2SNtwKOQIHn1lz0X93aczGZVZceOg73O4gyeoT5cx4vi1z+KtBRY5VMDWx3XgGtUwwjqwA== dependencies: - "@spectrum-css/vars" "^3.0.0-beta.2" + "@spectrum-css/vars" "^3.0.1" -"@spectrum-css/picker@^1.0.0-beta.3": - version "1.0.0-beta.3" - resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965" - integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ== +"@spectrum-css/picker@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.1.tgz#98991198576d26bd14160824e7b6f3c278ff930b" + integrity sha512-Rv4/UBOdNW1gs7WVBCJnPD5VFly8MqP++psDX6kcugUIcfJy0GC3acvElotmKRlCDk8Qxks2W2A0jKeSgphTmA== -"@spectrum-css/popover@^3.0.0-beta.6": - version "3.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2" - integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ== +"@spectrum-css/popover@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc" + integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q== -"@spectrum-css/stepper@^3.0.0-beta.7": - version "3.0.0-beta.7" - resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.0-beta.7.tgz#fc78435ce878c5e233af13e43ed2c3e8671a2bbc" - integrity sha512-TQL2OBcdEgbHBwehMGgqMuWdKZZQPGcBRV5FlF0TUdOT58lEqFAO43Gajqvyte1P23lNmnX8KuMwkRfQdn0RzA== +"@spectrum-css/stepper@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.1.tgz#7f270f53505e7dbe082591e8ea1c4c8f397e045a" + integrity sha512-IvZlGFJ8QPr9tUz5xvVN4hASaTRDPdKu9IIp25q/x0ecgSrKAM55e3EBWEYWy1H1JI3h+zlPnNRuK0VLhDbCYA== -"@spectrum-css/textfield@^3.0.0-beta.6": - version "3.0.0-beta.6" - resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6" - integrity sha512-U7P8C3Xx8h5X+r+dZu1qbxceIxBn7ZSmMvJyC7MPSPcU3EwdzCUepERNGX7NrQdcX91XSNlPUOF7hZUognBwhQ== +"@spectrum-css/table@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd" + integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug== -"@spectrum-css/vars@^3.0.0-beta.2": - version "3.0.0-beta.2" - resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157" - integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA== +"@spectrum-css/textfield@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.1.tgz#e875b8e37817378ad08fc4af7d53026df38911e5" + integrity sha512-MUV5q87CVxbkNdSNoxGrFbgyKc51ft/WWf3aVEoPdPw5yBnXqFe1w1YmAit5zYDOOhhs58sCLAlUcCMlOpkgrA== + +"@spectrum-css/vars@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e" + integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w== "@types/color-name@^1.1.1": version "1.1.1" @@ -864,6 +874,11 @@ csso@^4.0.2: dependencies: css-tree "1.0.0-alpha.39" +dayjs@^1.10.4: + version "1.10.4" + resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2" + integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw== + deep-equal@^1.0.1: version "1.1.1" resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"