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 => { const getComponentTypeName = component => {
let [componentName] = component._component.match(/[a-z]*$/) let [componentName] = component._component.match(/[a-zA-Z]*$/)
return componentName || "element" return componentName || "element"
} }

View File

@ -44,9 +44,11 @@ export default `<html>
if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle) if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
} catch(_) { } } catch(_) { }
console.log(data.selectedComponentType)
selectedComponentStyle = document.createElement('style'); selectedComponentStyle = document.createElement('style');
document.head.appendChild(selectedComponentStyle) 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)) selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
styles = document.createElement('style') styles = document.createElement('style')

View File

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