1
0
Fork 0
mirror of synced 2024-06-17 18:04:42 +12:00

Add button variant, size and quiet settings to dynamic filter. Allow dyanmic filter button text to be edited inline

This commit is contained in:
Andrew Kingston 2021-11-22 14:48:34 +00:00
parent 74289a4588
commit ae19581288
2 changed files with 74 additions and 9 deletions

View file

@ -247,7 +247,6 @@
"description": "A basic html button that is ready for styling",
"icon": "Button",
"editable": true,
"illegalChildren": ["section"],
"showSettingsBar": true,
"settings": [
{
@ -2650,6 +2649,8 @@
"dynamicfilter": {
"name": "Dynamic Filter",
"icon": "FilterEdit",
"showSettingsBar": true,
"editable": true,
"settings": [
{
"type": "dataProvider",
@ -2665,8 +2666,69 @@
{
"type": "text",
"label": "Button text",
"key": "buttonText",
"key": "text",
"defaultValue": "Filter"
},
{
"type": "select",
"showInBar": true,
"label": "Button variant",
"key": "type",
"options": [
{
"label": "Primary",
"value": "primary"
}, {
"label": "Secondary",
"value": "secondary"
},
{
"label": "Action",
"value": "cta"
},
{
"label": "Warning",
"value": "warning"
},
{
"label": "Over Background",
"value": "overBackground"
}
],
"defaultValue": "primary"
},
{
"type": "select",
"label": "Button size",
"showInBar": true,
"key": "size",
"options": [
{
"label": "Small",
"value": "S"
},
{
"label": "Medium",
"value": "M"
},
{
"label": "Large",
"value": "L"
},
{
"label": "Extra large",
"value": "XL"
}
],
"defaultValue": "M"
},
{
"type": "boolean",
"label": "Quiet button",
"key": "quiet",
"showInBar": true,
"barIcon": "VisibilityOff",
"barTitle": "Quiet variant"
}
]
},

View file

@ -8,7 +8,10 @@
export let dataProvider
export let allowedFields
export let buttonText
export let text = ""
export let size = "M"
export let type = "primary"
export let quiet = false
const component = getContext("component")
const { builderStore, ActionTypes, getAction } = getContext("sdk")
@ -28,7 +31,7 @@
)
$: schema = dataProvider?.schema
$: schemaFields = getSchemaFields(schema, allowedFields)
$: text = getText(buttonText, filters)
$: buttonText = getButtonText(text, filters)
// Add query extension to data provider
$: {
@ -40,12 +43,12 @@
}
}
const getText = (buttonText, filters) => {
let text = buttonText || "Edit filters"
const getButtonText = (text, filters) => {
let buttonText = text || "Filter"
if (filters?.length) {
text += ` (${filters.length})`
buttonText += ` (${filters.length})`
}
return text
return buttonText
}
const getSchemaFields = (schema, allowedFields) => {
@ -77,7 +80,7 @@
})
</script>
<Button onClick={openEditor} {text} />
<Button onClick={openEditor} text={buttonText} {size} {type} {quiet} />
<Modal bind:this={modal}>
<ModalContent title={text} size="XL" onConfirm={updateQuery}>