1
0
Fork 0
mirror of synced 2024-06-13 16:05:06 +12:00

Add new tag component to client apps

This commit is contained in:
Andrew Kingston 2021-12-08 13:06:15 +00:00
parent ba2588d44e
commit f2445226d5
6 changed files with 123 additions and 1009 deletions

View file

@ -74,6 +74,7 @@
"heading",
"text",
"button",
"tag",
"divider",
"image",
"backgroundimage",

View file

@ -819,6 +819,57 @@
}
]
},
"tag": {
"name": "Tag",
"icon": "TextParagraph",
"showSettingsBar": true,
"settings": [
{
"type": "text",
"label": "Text",
"key": "text"
},
{
"type": "select",
"label": "Size",
"key": "size",
"defaultValue": "M",
"showInBar": true,
"barStyle": "picker",
"options": [{
"label": "Small",
"value": "S"
}, {
"label": "Medium",
"value": "M"
}, {
"label": "Large",
"value": "L"
}]
},
{
"type": "color",
"label": "Color",
"key": "color",
"showInBar": true,
"barSeparator": false
},
{
"type": "boolean",
"label": "Show delete icon",
"key": "closable",
"showInBar": true,
"barIcon": "TagItalic",
"barTitle": "Show delete icon"
},
{
"type": "event",
"label": "On click delete icon",
"key": "onClick",
"dependsOn": "closable"
}
]
},
"image": {
"name": "Image",
"description": "A basic component for displaying images",

View file

@ -35,6 +35,7 @@
"@spectrum-css/divider": "^1.0.3",
"@spectrum-css/link": "^3.1.3",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/tag": "^3.1.4",
"@spectrum-css/typography": "^3.0.2",
"@spectrum-css/vars": "^3.0.1",
"apexcharts": "^3.22.1",

View file

@ -0,0 +1,59 @@
<script>
import "@spectrum-css/tag/dist/index-vars.css"
import { ClearButton } from "@budibase/bbui"
import { getContext } from "svelte"
export let onClick
export let text = ""
export let color
export let closable = false
export let size = "M"
const component = getContext("component")
const { styleable, builderStore } = getContext("sdk")
// Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style.
$: styles = enrichStyles($component.styles, color)
$: componentText = getComponentText(text, $builderStore, $component)
const getComponentText = (text, builderState, componentState) => {
if (!builderState.inBuilder || componentState.editing) {
return text || " "
}
return text || componentState.name || "Placeholder text"
}
const enrichStyles = (styles, color) => {
if (!color) {
return styles
}
return {
...styles,
normal: {
...styles?.normal,
"background-color": color,
"border-color": color,
color: "white",
"--spectrum-clearbutton-medium-icon-color": "white",
},
}
}
</script>
<div class="spectrum-Tag spectrum-Tag--size{size}" use:styleable={styles}>
<span class="spectrum-Tag-label">{componentText}</span>
{#if closable}
<ClearButton on:click={onClick} />
{/if}
</div>
<style>
.spectrum-Tag--sizeS,
.spectrum-Tag--sizeM {
padding: 0 var(--spectrum-global-dimension-size-100);
}
.spectrum-Tag--sizeL {
padding: 0 var(--spectrum-global-dimension-size-150);
}
</style>

View file

@ -29,6 +29,7 @@ export { default as backgroundimage } from "./BackgroundImage.svelte"
export { default as daterangepicker } from "./DateRangePicker.svelte"
export { default as cardstat } from "./CardStat.svelte"
export { default as spectrumcard } from "./SpectrumCard.svelte"
export { default as tag } from "./Tag.svelte"
export * from "./charts"
export * from "./forms"
export * from "./table"

File diff suppressed because it is too large Load diff