Fix selected component border in builder preview

6 years ago · 5fbf3502ce
3 changed files with 7 additions and 4 deletions
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@ -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"
  }

--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@ -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')
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -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>