Fix selected component border in builder preview

This commit is contained in:
Andrew Kingston 2020-11-17 12:20:40 +00:00
parent 65610fde3c
commit b01ec8da0f
3 changed files with 7 additions and 4 deletions

View File

@ -17,7 +17,7 @@
}
const getComponentTypeName = component => {
let [componentName] = component._component.match(/[a-z]*$/)
let [componentName] = component._component.match(/[a-zA-Z]*$/)
return componentName || "element"
}

View File

@ -44,9 +44,11 @@ export default `<html>
if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
} catch(_) { }
console.log(data.selectedComponentType)
selectedComponentStyle = document.createElement('style');
document.head.appendChild(selectedComponentStyle)
var selectedCss = '.' + data.selectedComponentType + '-' + data.selectedComponentId + '{ border: 2px solid #0055ff; }'
var selectedCss = '[data-bb-id="' + data.selectedComponentType + '-' + data.selectedComponentId + '"]' + '{border:2px solid #0055ff !important;}'
selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
styles = document.createElement('style')

View File

@ -1,14 +1,15 @@
<script>
import { linkable } from "@budibase/component-sdk"
import { linkable, styleable } from "@budibase/component-sdk"
export let url = ""
export let text = ""
export let openInNewTab = false
export let styles
$: target = openInNewTab ? "_blank" : "_self"
</script>
<a href={url} use:linkable {target}>
<a href={url} use:linkable {target} use:styleable={styles}>
{text}
<slot />
</a>