Merge branch 'main' of https://github.com/inikoo/wowsbar into main

inikoo · Dec 11, 2024 · 05a13ff · 05a13ff
2 parents a39beef + d6886c6
commit 05a13ff
Show file tree

Hide file tree

Showing 19 changed files with 153 additions and 155 deletions.
diff --git a/...t/stock_images/announcement/Elegant 1.png → ...images/announcement/Elegant/Elegant 1.png b/...t/stock_images/announcement/Elegant 1.png → ...images/announcement/Elegant/Elegant 1.png
diff --git a/...t/stock_images/announcement/Elegant 2.png → ...images/announcement/Elegant/Elegant 2.png b/...t/stock_images/announcement/Elegant 2.png → ...images/announcement/Elegant/Elegant 2.png
diff --git a/...s/art/stock_images/announcement/Fun 1.png → ...t/stock_images/announcement/Fun/Fun 1.png b/...s/art/stock_images/announcement/Fun 1.png → ...t/stock_images/announcement/Fun/Fun 1.png
diff --git a/...s/art/stock_images/announcement/Fun 2.png → ...t/stock_images/announcement/Fun/Fun 2.png b/...s/art/stock_images/announcement/Fun 2.png → ...t/stock_images/announcement/Fun/Fun 2.png
diff --git a/.../stock_images/announcement/Majestic 1.png → ...ages/announcement/Majestic/Majestic 1.png b/.../stock_images/announcement/Majestic 1.png → ...ages/announcement/Majestic/Majestic 1.png
diff --git a/.../stock_images/announcement/Majestic 2.png → ...ages/announcement/Majestic/Majestic 2.png b/.../stock_images/announcement/Majestic 2.png → ...ages/announcement/Majestic/Majestic 2.png
diff --git a/.../stock_images/announcement/Majestic 3.png → ...ages/announcement/Majestic/Majestic 3.png b/.../stock_images/announcement/Majestic 3.png → ...ages/announcement/Majestic/Majestic 3.png
diff --git a/...art/stock_images/announcement/Party 1.png → ...ock_images/announcement/Party/Party 1.png b/...art/stock_images/announcement/Party 1.png → ...ock_images/announcement/Party/Party 1.png
diff --git a/...art/stock_images/announcement/Party 2.png → ...ock_images/announcement/Party/Party 2.png b/...art/stock_images/announcement/Party 2.png → ...ock_images/announcement/Party/Party 2.png
diff --git a/resources/js/Components/Pure/PureDatePicker.vue b/resources/js/Components/Pure/PureDatePicker.vue
@@ -5,7 +5,7 @@ import DatePicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
 const props = defineProps<{
-    modelValue: Date
+    modelValue: Date | string
     format?: string  // 'dd MMMM yyyy'
     timePicker?: boolean
     required?: boolean

diff --git a/resources/js/Components/Utils/GalleryManagement/GalleryUpload.vue b/resources/js/Components/Utils/GalleryManagement/GalleryUpload.vue
@@ -12,7 +12,7 @@ library.add(faUpload, faImages)
 const modelFiles = defineModel('files')
 
 const props = defineProps<{
-    uploadRoute: routeType
+    uploadRoute?: routeType
     useCrop?: boolean
     isLoading?: boolean
     fileLimit?: number

diff --git a/...es/js/Components/Workshop/Announcement/Templates/Information/AnnouncementInformation1.vue b/...es/js/Components/Workshop/Announcement/Templates/Information/AnnouncementInformation1.vue
@@ -194,7 +194,7 @@ const defaultContainerData = {
     },
     "text": {
         "color": "rgb(255,255,255)",
-        "fontFamily": "sans-serif"
+        "fontFamily": "Arial, sans-serif"
     },
     "isCenterHorizontal": true,
     // "additional_style": {
@@ -301,17 +301,17 @@ const componentDefaultData = {
 }
 
 // Data: to publish in website
-const compiled_layout = computed(() => {
-    return `<div id="wowsbar_announcement" class="tw-flex tw-items-center tw-justify-between" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.container_properties))}">
-        <div class="tw-whitespace-nowrap" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields.text_2.block_properties))}">
-            ${props.announcementData?.fields.text_2.text}
-        </div>
+// const compiled_layout = computed(() => {
+//     return `<div id="wowsbar_announcement" class="tw-flex tw-items-center tw-justify-between" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.container_properties))}">
+//         <div class="tw-whitespace-nowrap" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields.text_2.block_properties))}">
+//             ${props.announcementData?.fields.text_2.text}
+//         </div>
         
-        <div class="tw-whitespace-nowrap" v-html="" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields.text_1.block_properties))}">
-            ${props.announcementData?.fields.text_1.text}
-        </div>
-    </div>`
-})
+//         <div class="tw-whitespace-nowrap" v-html="" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields.text_1.block_properties))}">
+//             ${props.announcementData?.fields.text_1.text}
+//         </div>
+//     </div>`
+// })
 
 // const _text_1 = ref(null)
 // const _buttonClose = ref(null)
@@ -321,10 +321,13 @@ const onClickClose = () => {
 }
 
 const openFieldWorkshop = inject('openFieldWorkshop')
+const onClickOpenFieldWorkshop = (index: number) => {
+    openFieldWorkshop.value = index
+}
 
 
 defineExpose({
-    compiled_layout,
+    // compiled_layout,
     fieldSideEditor
 })
 
@@ -339,7 +342,7 @@ defineExpose({
         <!-- <template> -->
             <div
                 ref="_text_2"
-                @click="() => openFieldWorkshop = 2"
+                @click="() => onClickOpenFieldWorkshop(2)"
                 class="announcement-component-editable"
                 v-html="announcementData?.fields.text_2.text"
                 :style="propertiesToHTMLStyle(announcementData?.fields.text_2.block_properties)"
@@ -348,7 +351,7 @@ defineExpose({
 
             <div
                 ref="_text_1"
-                @click="() => openFieldWorkshop = 1"
+                @click="() => onClickOpenFieldWorkshop(1)"
                 class="announcement-component-editable"
                 v-html="announcementData?.fields.text_1.text"
                 :style="propertiesToHTMLStyle(announcementData?.fields.text_1.block_properties)"

diff --git a/...ts/Workshop/Announcement/Templates/Information/AnnouncementInformation2TransitionText.vue b/...ts/Workshop/Announcement/Templates/Information/AnnouncementInformation2TransitionText.vue
@@ -1,13 +1,12 @@
 <script setup lang='ts'>
 import Moveable from "vue3-moveable"
 import { propertiesToHTMLStyle, onDrag, styleToString } from '@/Composables/usePropertyWorkshop'
-import type { BlockProperties } from '@/Composables/usePropertyWorkshop'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faTimes } from '@fal'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { computed, ref, onMounted, onBeforeUnmount, watch } from "vue"
 import { closeIcon } from '@/Composables/useAnnouncement'
-import { AnnouncementData } from "@/types/Announcement"
+import type { AnnouncementData, BlockProperties } from "@/types/Announcement"
 import { inject } from "vue"
 import { trans } from "laravel-vue-i18n";
 library.add(faTimes)
@@ -178,7 +177,7 @@ const defaultContainerData = {
     },
     "text": {
         "color": "rgba(255,255,255,1)",
-        "fontFamily": "Raleway"
+        "fontFamily": "'Raleway', sans-serif"
     },
     "isCenterHorizontal": false,
     // "additional_style": {
@@ -219,24 +218,28 @@ const componentDefaultData = {
 // }
 
 
-const compiled_layout = computed(() => {
-    const script = `<script> const information_2_sentence = ${JSON.stringify(props.announcementData?.fields?.text_transition_1?.multi_text || [])}; let index = 0; const sentenceElem = document.getElementById("wowsbar_sentence_multi_text"); setInterval(() => { if(sentenceElem) { sentenceElem.className = 'fade-out'; sentenceElem.addEventListener('animationend', () => { index = (index + 1) % information_2_sentence.length; sentenceElem.textContent = information_2_sentence[index]; sentenceElem.className = 'fade-in'; }, { once: true }); }}, 5000) <\/script>`
+// const compiled_layout = computed(() => {
+//     const script = `<script> const information_2_sentence = ${JSON.stringify(props.announcementData?.fields?.text_transition_1?.multi_text || [])}; let index = 0; const sentenceElem = document.getElementById("wowsbar_sentence_multi_text"); setInterval(() => { if(sentenceElem) { sentenceElem.className = 'fade-out'; sentenceElem.addEventListener('animationend', () => { index = (index + 1) % information_2_sentence.length; sentenceElem.textContent = information_2_sentence[index]; sentenceElem.className = 'fade-in'; }, { once: true }); }}, 5000) <\/script>`
 
-    return `
-    <div id="wowsbar_announcement" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.container_properties))}">
-        <div class="-tw-my-4">
-            <div class="tw-flex tw-w-full tw-text-center tw-px-10">
-                <p id="wowsbar_sentence_multi_text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                    ${props.announcementData?.fields?.text_transition_1?.multi_text?.[0]}
-                </p>
-            </div>
-        </div>
-    </div>
-    ${script}
-    `
-})
+//     return `
+//     <div id="wowsbar_announcement" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.container_properties))}">
+//         <div class="-tw-my-4">
+//             <div class="tw-flex tw-w-full tw-text-center tw-px-10">
+//                 <p id="wowsbar_sentence_multi_text" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+//                     ${props.announcementData?.fields?.text_transition_1?.multi_text?.[0]}
+//                 </p>
+//             </div>
+//         </div>
+//     </div>
+//     ${script}
+//     `
+// })
 
 const openFieldWorkshop = inject('openFieldWorkshop')
+const onClickOpenFieldWorkshop = (index?: number) => {
+    if (!index) return
+    openFieldWorkshop.value = index
+}
 
 
 const indexTextActive = ref(0)
@@ -307,7 +310,7 @@ watch(
 );
 
 defineExpose({
-    compiled_layout,
+    // compiled_layout,
     fieldSideEditor
 })
 </script>
@@ -318,7 +321,7 @@ defineExpose({
         class="flex justify-center items-center overflow-hidden"
         :style="propertiesToHTMLStyle(announcementData?.container_properties)"
     >
-        <div ref="__multitext_container" @click="() => openFieldWorkshop = 1" class="announcement-component-editable -my-4">
+        <div ref="__multitext_container" @click="() => onClickOpenFieldWorkshop(1)" class="announcement-component-editable -my-4">
             <div class="flex w-full text-center px-10 scale-75 md:scale-100">
                 <p id="wowsbar_sentence_multi_text" v-html="announcementData?.fields?.text_transition_1?.multi_text?.[0] || ''" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></p>
             </div>

diff --git a/resources/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo1.vue b/resources/js/Components/Workshop/Announcement/Templates/Promo/AnnouncementPromo1.vue
@@ -184,7 +184,7 @@ const defaultContainerData = {
     },
     "text": {
         "color": "rgba(10,10,10,1)",
-        "fontFamily": "Raleway"
+        "fontFamily": "'Raleway', sans-serif"
     },
     "isCenterHorizontal": false
 }
@@ -223,7 +223,7 @@ const defaultFieldsData = {
             "properties": {
                 "text": {
                     "color": "rgba(255, 255, 255, 1)",
-                    "fontFamily": null
+                    "fontFamily": "Arial, sans-serif"
                 },
                 "background": {
                     "type": "color",
@@ -323,36 +323,39 @@ const onClickClose = () => {
 }
 
 
-const compiled_layout = computed(() => {
+// const compiled_layout = computed(() => {
 
-    const text_1_element = props.announcementData?.fields?.text_1?.text ? `<div
-            class="tw-text-sm tw-leading-6 tw-whitespace-nowrap "
-            style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields?.text_1?.block_properties, { toRemove: ['position', 'top', 'left'] }))}"
-        >
-            ${props.announcementData?.fields?.text_1?.text}
-        </div>` : ''
+//     const text_1_element = props.announcementData?.fields?.text_1?.text ? `<div
+//             class="tw-text-sm tw-leading-6 tw-whitespace-nowrap "
+//             style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields?.text_1?.block_properties, { toRemove: ['position', 'top', 'left'] }))}"
+//         >
+//             ${props.announcementData?.fields?.text_1?.text}
+//         </div>` : ''
 
-    const button_element = props.announcementData?.fields?.button_1?.text ? `<a
-        href="${props.announcementData?.fields.button_1.link.href || '#'}" target="${props.announcementData?.fields.button_1.link.target}"
-        class="tw-inline-flex tw-items-center"
-        style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields.button_1?.container?.properties))}"
-    >
-        ${props.announcementData?.fields.button_1.text}
-    </a>` : ''
+//     const button_element = props.announcementData?.fields?.button_1?.text ? `<a
+//         href="${props.announcementData?.fields.button_1.link.href || '#'}" target="${props.announcementData?.fields.button_1.link.target}"
+//         class="tw-inline-flex tw-items-center"
+//         style="${styleToString(propertiesToHTMLStyle(props.announcementData?.fields.button_1?.container?.properties))}"
+//     >
+//         ${props.announcementData?.fields.button_1.text}
+//     </a>` : ''
 
 
-    return `<div id="wowsbar_announcement" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.container_properties))}">
-        <div class="tw-flex tw-gap-x-4 tw-items-center tw-justify-center tw-w-full tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-y-1/2 -tw-translate-x-1/2">
-            ${text_1_element}
-            ${button_element}
-        </div>
-    </div>`
-})
+//     return `<div id="wowsbar_announcement" style="${styleToString(propertiesToHTMLStyle(props.announcementData?.container_properties))}">
+//         <div class="tw-flex tw-gap-x-4 tw-items-center tw-justify-center tw-w-full tw-absolute tw-top-1/2 tw-left-1/2 -tw-translate-y-1/2 -tw-translate-x-1/2">
+//             ${text_1_element}
+//             ${button_element}
+//         </div>
+//     </div>`
+// })
 
 const openFieldWorkshop = inject('openFieldWorkshop')
+const onClickOpenFieldWorkshop = (index: number) => {
+    openFieldWorkshop.value = index
+}
 
 defineExpose({
-    compiled_layout,
+    // compiled_layout,
     fieldSideEditor
 })
     // <button
@@ -375,7 +378,7 @@ defineExpose({
             <div
                 v-if="announcementData?.fields?.text_1"
                 ref="_text_1"
-                @click="() => (openFieldWorkshop = 1)"
+                @click="() => (onClickOpenFieldWorkshop(1))"
                 class="text-sm announcement-component-editable text-center md:text-left"
                 v-html="announcementData?.fields.text_1.text"
                 :style="propertiesToHTMLStyle(announcementData?.fields.text_1.block_properties, { toRemove: ['position', 'top', 'left'] })"
@@ -385,7 +388,7 @@ defineExpose({
 
             <button
                 v-if="announcementData?.fields?.button_1?.text"
-                @click="() => (onClickClose(), openFieldWorkshop = 2)"
+                @click="() => (onClickClose(), onClickOpenFieldWorkshop(2))"
                 :href="announcementData?.fields.button_1.link.href || '#'"
                 :target="announcementData?.fields.button_1.link.target" 
                 v-html="announcementData?.fields.button_1.text"