Merge pull request #233 from PrestaSafe/add-btn-list

3.1.0 preview.

_dev/src/components/Block.vue

@@ -65,7 +65,7 @@ let data = await HttpClient.get(url, params);
 <template>
   <div class="flex items-center gap-x-2 p-4 bg-gray-100 hover:bg-gray-200 rounded cursor-pointer transition-colors" @click="AddOnZOne(code)">
     <Icon v-if="icon_path == ''" :name="icon" class="h-10 w-10 shrink-0 text-indigo" />
-    <img v-else :src="icon_path" class="h-10 w-10 shrink-0 text-indigo" />
+    <img v-else :src="icon_path" class="max-h-16 max-w-16 shrink-0 text-indigo" />
     <div class="flex-1">
       <h3 class="text-lg font-bold">{{ name }}</h3>
       <p class="text-sm text-gray-600">{{ description }}</p>

_dev/src/components/FieldRepeater.vue

@@ -16,7 +16,7 @@ import Button from './Button.vue'
 import FileUpload from './form/FileUpload.vue'
 import Choices from './form/Choices.vue'
 import Icon from './Icon.vue'
-
+// import Slider from './Slider.vue'
 // tinyMCE 
 import Editor from '@tinymce/tinymce-vue'
 
@@ -34,7 +34,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 // Vue
 import { defineComponent, defineProps, ref, defineEmits, onMounted } from 'vue'
-let date = ref('2024/02/23')
+
 defineComponent({
   FormControl,
   Accordion,
@@ -145,6 +145,7 @@ const toolbarOptions = [
       <Title :title="f.label" />
       <VueDatePicker :model-value="formatDateFromString(f.value)" :enable-time-picker="false" @update:modelValue="f.value = $event" />
     </div>  
+
   </div>
 </template>
 

_dev/src/components/Header.vue

@@ -56,9 +56,9 @@ const globalSave = () => {
   emitter.emit('globalSave')
 }
 
-const changeIframeSize = (size, height) => {
+const changeIframeSize = (size, height, device = null) => {
   sizeSelected.value = size
-  emitter.emit('changeIframeSize', size, height)
+  emitter.emit('changeIframeSize', size, height, device)
 }
 
 let settingsEnabled = ref(true)
@@ -106,16 +106,16 @@ const adminURL = ajax_urls.adminURL
       <!-- header dropdown with demo parameters-->
       <!-- Copyright <a class="text-indigo" href="https://www.prestasafe.com">www.prestasafe.com</a> -->
       <div class="border-gray-200">
-        <ButtonLight @click="changeIframeSize('w-full', 'h-full')"
+        <ButtonLight @click="changeIframeSize('w-full', 'h-full', 'desktop')"
           :class="sizeSelected == 'w-full' ? 'bg-black bg-opacity-10' : ''" icon="ComputerDesktopIcon"
           class="p-2" />
-        <ButtonLight @click="changeIframeSize('w-5/6', 'h-5/6')"
+        <ButtonLight @click="changeIframeSize('w-5/6', 'h-5/6', 'tablet')"
           :class="sizeSelected == 'w-5/6' ? 'bg-black bg-opacity-10 -rotate-90' : '-rotate-90'" icon="DeviceTabletIcon"
           class="p-2" />
-        <ButtonLight @click="changeIframeSize('w-6/12', 'h-full')"
+        <ButtonLight @click="changeIframeSize('w-6/12', 'h-full' , 'tablet')"
           :class="sizeSelected == 'w-6/12' ? 'bg-black bg-opacity-10' : ''" icon="DeviceTabletIcon"
           class="p-2" />
-        <ButtonLight @click="changeIframeSize('w-4/12', 'h-full')"
+        <ButtonLight @click="changeIframeSize('w-4/12', 'h-full', 'mobile')"
           :class="sizeSelected == 'w-4/12' ? 'bg-black bg-opacity-10' : ''" icon="DevicePhoneMobileIcon"
           class="p-2" />
         <!-- <ButtonLight @click="changeIframeSize('w-3/6', 'h-3/6')" :class="sizeSelected == 'w-4/12' ? 'bg-black bg-opacity-10 -rotate-90' : '-rotate-90'" icon="DevicePhoneMobileIcon" class="p-2" /> -->

_dev/src/components/LeftPanel.vue

@@ -251,13 +251,15 @@ const deleteAllBlocks = async () => {
         <SortableList :items="groups" group="menu-group">
           <template v-slot="{ element }">
             <!-- group of element (collapsable) -->
+
             <MenuGroup
               @changeState="loadStateConfig"
               @pushEmptyState="loadEmptyState(element)"
               :id="element.id"
               :id_prettyblocks="element.id_prettyblocks"
               :title="element.title"
               :icon="element.icon"
+              :icon_path="element.icon_path"
               :config="true"
               :element="element"
               :is_parent="true"

_dev/src/components/MenuGroup.vue

@@ -12,6 +12,7 @@ defineProps({
   id_prettyblocks: Number,
   title: String,
   icon: String,
+  icon_path: String,
   config: Boolean,
   element: Object,
   is_parent: Boolean,
@@ -34,7 +35,7 @@ const emit = defineEmits(['pushEmptyState', 'changeState'])
     <template v-slot:header="props">
       <!-- has the collapse button is inside the menu item, need to pass by a slot -->
       <MenuItem @click="changeState(element)" class="w-full" :id="id" :element="element" :config="config" :title="title"
-        :icon="icon">
+        :icon="icon" :icon_path="icon_path">
       <div class="cursor-pointer mr-2" @click="props.collapse" v-if="element.can_repeat">
         <Icon name="ChevronRightIcon" v-if="props.isCollapsed" />
         <Icon name="ChevronDownIcon" v-else />

_dev/src/components/MenuItem.vue

@@ -11,6 +11,7 @@ const props = defineProps({
   id: String, // unique id for each block
   title: String,
   icon: String,
+  icon_path: String,
   config: Boolean,
   element: Object,
   is_child: Boolean
@@ -97,7 +98,8 @@ const highLightBlock = () => {
     <!-- icon and name of item -->
     <div :class="['flex items-center flex-grow pr-2', { disabled }]">
       <!-- {{ element }} -->
-      <Icon :name="icon" class="h-5 w-5 mr-2"></Icon>
+      <img :src="icon_path" class="h-7 mr-2" v-if="icon_path" />
+      <Icon :name="icon" v-else class="h-5 w-5 mr-2"></Icon>
       <p class="flex-grow w-0 text-ellipsis whitespace-nowrap overflow-hidden select-none">
         {{ title }}
       </p>