builderius integration: variable picker

assets/integration/builderius/constant.js

@@ -1,15 +1,3 @@
-// const brx = document.querySelector('.brx-body');
-// const brxGlobalProp = document.querySelector('.brx-body').__vue_app__.config.globalProperties;
-// const brxIframe = document.getElementById('bricks-builder-iframe');
-// const brxIframeGlobalProp = brxIframe.contentDocument.querySelector('.brx-body').__vue_app__.config.globalProperties;
-
-// export {
-//     brx,
-//     brxGlobalProp,
-//     brxIframe,
-//     brxIframeGlobalProp
-// };
-
 const uni = document.getElementById('builderiusPanel');
 const uniIframe = document.getElementById('builderInner');
 

assets/integration/builderius/main.js

@@ -3,15 +3,6 @@ import { logger } from '@/integration/common/logger.js';
 logger('Loading...');
 
 (async () => {
-    // while (!document.querySelector('.brx-body')?.__vue_app__) {
-    //     await new Promise(resolve => setTimeout(resolve, 100));
-    // }
-
-    // while (!document.getElementById('bricks-builder-iframe')?.contentDocument.querySelector('.brx-body')?.__vue_app__) {
-    //     await new Promise(resolve => setTimeout(resolve, 100));
-    // }
-
-
     while (!document.getElementById('builderInner')?.contentDocument.querySelector('#builderiusBuilder')) {
         await new Promise(resolve => setTimeout(resolve, 100));
     }
@@ -23,10 +14,10 @@ logger('Loading...');
     // await import('./modules/plain-classses/main.js');
     // await import('./modules/color-palette/main.js');
     // await import('./modules/variables/main.js');
-    // await import('./modules/html2bricks/main.js');
+    // await import('./modules/html2builderius/main.js');
     await import('./modules/generate-cache/main.js');
     await import('./modules/monaco/main.js');
-    // await import('./modules/variable-picker/main.js');
+    await import('./modules/variable-picker/main.js');
 
     logger('Modules loaded!');
 })();

assets/integration/builderius/modules/variable-picker/App.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { inject } from 'vue';
+import PanelHeader from './components/PanelHeader.vue';
+import PanelBody from './components/PanelBody.vue';
+
+const isOpen = inject('isOpen');
+</script>
+
+<template>
+    <div v-show="isOpen" id="windpressbuilderius-variable-app-container" v-resizable.br="{ minWidth: 300, minHeight: 500 }" class="flex flex:column w:full h:full fg:$(base-2) bg:$(primary-1) r:10 overflow:hidden box-shadow:$(builder-box-shadow) outline:1|solid|$(accent-normal)">
+        <PanelHeader />
+        <Suspense>
+            <PanelBody />
+        </Suspense>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

assets/integration/builderius/modules/variable-picker/components/ColorVariableItems.vue

@@ -0,0 +1,33 @@
+<script setup>
+const props = defineProps({
+    variableItems: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <div class="{m:10;pb:15}>div bb:1|solid|$(primary-3)>div:not(:last-child)">
+        <div v-for="(color, key) in variableItems" :key="key" class="">
+            <div class="variable-section-title font:14 my:10">
+                {{ key }}
+            </div>
+
+            <template v-if="color.DEFAULT">
+                <div class="variable-section-items">
+                    <button @click="(event) => $emit('previewChose', event, color.DEFAULT.key)" @mouseenter="(event) => $emit('previewEnter', event, color.DEFAULT.key)" @mouseleave="$emit('previewLeave')" v-tooltip="{ placement: 'top', content: `var(${color.DEFAULT.key})` }" :class="`bg:\$\(${color.DEFAULT.key.slice(2)}\)`" class="w:full r:4 h:24 border:1|solid|transparent border:white:hover cursor:pointer"></button>
+                </div>
+            </template>
+
+            <!-- if has shades and shades > 0 -->
+            <template v-if="color.shades && Object.keys(color.shades).length > 0">
+                <div :class="[{}, true ? `grid-template-cols:repeat(${Object.keys(color.shades).length},auto)` : '']" class="variable-section-items grid r:4 overflow:hidden">
+                    <div v-for="(shade, shadeKey) in color.shades" :key="shadeKey" class="flex gap:10">
+                        <button @click="(event) => $emit('previewChose', event, shade.key)" @mouseenter="(event) => $emit('previewEnter', event, shade.key)" @mouseleave="$emit('previewLeave')" v-tooltip="{ placement: 'top', content: `var(${shade.key})` }" :class="`bg:\$\(${shade.key.slice(2)}\)`" class="w:full h:24 border:1|solid|transparent border:white:hover cursor:pointer"></button>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>

assets/integration/builderius/modules/variable-picker/components/CommonVariableItems.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props = defineProps({
+    variableItems: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <div class="{m:10;pb:15}>div bb:1|solid|$(primary-3)>div:not(:last-child)">
+        <div v-for="(item, key) in variableItems" :key="key" class="">
+            <div class="variable-section-title font:14 my:10">
+                {{ key.replace('_', '-') }}
+            </div>
+
+            <div class="variable-section-items flex flex:row gap:8 flex-wrap:wrap">
+                <template v-if="item.length > 0">
+                    <button v-for="(subItem, subItemKey) in item" :key="subItemKey" @click="(event) => $emit('previewChose', event, subItem.key)" @mouseenter="(event) => $emit('previewEnter', event, subItem.key)" @mouseleave="$emit('previewLeave')" v-tooltip="{ placement: 'top', content: `var(${subItem.key})` }" class=" px:12 py:8 r:8 fg:$(base-1) fg:$(accent-normal):hover bg:$(primary-3) bg:$(primary-2):hover b:0 cursor:pointer {opacity:.5}>span opacity:100:hover>span">
+                        <span class="font:14">{{ subItem.label }}</span>
+                    </button>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

assets/integration/builderius/modules/variable-picker/components/ExpansionPanel.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { useStorage } from '@vueuse/core';
+import { ref } from 'vue';
+
+const props = defineProps({
+    namespace: {
+        type: String,
+        required: true,
+    },
+    name: {
+        type: String,
+        required: true,
+    },
+});
+
+const sectionRef = ref(null);
+
+const expand = useStorage(
+    `windpressbuilderius-variable-app.ui.expansion-panels.${props.namespace}`,
+    { [`${props.name}`]: false },
+    undefined,
+    { mergeDefaults: true }
+);
+
+function togglePanel(val) {
+    expand.value[props.name] = val === null ? !expand.value[props.name] : val;
+}
+
+function scrollIntoView() {
+    sectionRef.value.scrollIntoView();
+}
+
+defineExpose({
+    togglePanel,
+    scrollIntoView
+});
+</script>
+
+<template>
+    <div ref="sectionRef" class="expansion-panel m:10 mr:4">
+        <div @click="expand[name] = !expand[name]" :class="{'bg:$(primary-3)!' : expand[name]}" class="expansion-panel__header flex bg:$(primary-2) bg:$(primary-3):hover justify-content:space-between p:10 r:8 cursor:pointer">
+            <div class="flex-grow:1">
+                <slot name="header"></slot>
+            </div>
+            <div>
+                <font-awesome-icon :icon="['fas', 'chevron-right']" :class="{ 'rotate(-90)': expand[name] }" class="~duration:300 font:18" />
+            </div>
+        </div>
+        <Transition>
+            <div v-if="expand[name]" class="expansion-panel__body">
+                <slot></slot>
+            </div>
+        </Transition>
+
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.expansion-panel__header {
+    line-height: 1.7;
+}
+
+/* we will explain what these classes do next! */
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>