@dcodegroup-au/page-builder 0.2.8 → 0.3.0

package/src/components/builders/VideoGrid.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="rounded-xl bg-gray-50 px-6 py-5">
+    <div class="flex justify-between pb-2">
+      <div class="flex justify-between w-full py-1">
+        <div>
+          <p class="text-lg font-semibold text-gray-900">
+            {{ componentData.name }}
+          </p>
+          <p class="text-sm text-gray-600 mt-1">
+            This section can contain up to {{ componentData.max_items }} videos
+          </p>
+        </div>
+        <div>
+          <a
+              @click="addItem"
+              class="text-sm cursor-pointer flex items-center justify-center gap-1 rounded-[99px] border border-brand-600 bg-brand-500 px-3.5 py-2 font-semibold text-white hover:bg-brand-600"
+              :class="{ 'border-gray-100 bg-gray-100 !text-gray-400 hover:bg-gray-100': componentData.data?.length >= componentData.max_items }"
+          >
+            <PlusIcon class="h-5 w-5"></PlusIcon>
+            <span>Add</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-3">
+      <div
+          v-for="(item, index) in componentData.data"
+          class="flex flex-col gap-4 rounded-xl px-6 py-4 bg-gray-200"
+          :key="index"
+          :ref="index === componentData.data.length - 1 ? (el) => (lastItemRef = el) : null"
+      >
+        <div class="flex items-center justify-between">
+          <div class="text-lg font-semibold text-gray-900">
+            Video #{{ index + 1 }}
+          </div>
+          <div class="relative flex items-end">
+            <ActionMenu @removeItem="handleDeleteItem(index)"/>
+          </div>
+        </div>
+        <div class="flex flex-col gap-6">
+          <div class="flex flex-col gap-1.5">
+            <VFileUpload
+                name="image"
+                type="video"
+                height="h-[250px]"
+                v-model="item.video"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VModal ref="modalRef" entity="logo" :callback="deleteCallback"></VModal>
+</template>
+<script setup>
+import {ref, inject} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import {defaultProps} from "@/components/helpers/defaultProps";
+import ActionMenu from "@/components/common/ActionMenu.vue";
+import VModal from "@/components/common/Modal.vue";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
+
+const emit = defineEmits(["update"]);
+
+const props = defineProps({
+  ...defaultProps,
+});
+
+const componentData = ref(props.data.component);
+const modalRef = ref(null);
+const lastItemRef = ref(null);
+const deleteItemIndex = ref(null);
+
+function addItem() {
+  if (!componentData.value.hasOwnProperty('data')) {
+    componentData.value.data = [];
+  }
+
+  if (componentData.value.data?.length >= componentData.value.max_items) {
+    return;
+  }
+  componentData.value.data?.push({
+    video: null,
+  });
+
+  emit("update", false);
+}
+
+const handleDeleteItem = (index) => {
+  deleteItemIndex.value = index;
+  modalRef?.value?.open(index);
+}
+
+const deleteCallback = (index) => {
+  componentData.value.data?.splice(index, 1);
+  emit("update", false);
+};
+</script>

package/src/components/common/Button.vue

@@ -0,0 +1,53 @@
+<template>
+  <card v-if="button" :title="button?.name ?? 'Primary button'" class="flex flex-col gap-4 rounded-xl px-6 py-5 mt-4" :classes="classes" :class="classes">
+    <div class="flex flex-col gap-8">
+      <VToggle name="show" v-model="button.show" title="Show Button" />
+      <input-wrapper
+          is-vertical
+          field="button.label"
+          label-text="Button Label *"
+          class="w-full mb-4"
+          :value="button.label"
+          :limit="20"
+      >
+        <input
+            v-model="button.label"
+            name="button.label"
+            type="text"
+            placeholder="Label"
+            :maxlength="20"
+            class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
+        />
+      </input-wrapper>
+      <linked-to
+          name="primary"
+          v-model:type="button.type"
+          v-model:url="button.url"
+          v-model:openInNewTab="button.open_in_new_tab"
+          :sites="sites"
+      />
+    </div>
+  </card>
+</template>
+
+<script setup>
+import Card from "@/components/common/Card.vue";
+import InputWrapper from "@/components/common/InputWrapper.vue";
+import VToggle from "@/components/common/Toggle.vue";
+import LinkedTo from "@/components/common/LinkedTo.vue";
+
+const props = defineProps({
+  button: {
+    type: Object,
+    required: true,
+  },
+  sites: {
+    type: Array,
+    required: true,
+  },
+  classes: {
+    type: String,
+    default: 'bg-gray-50'
+  }
+});
+</script>

package/src/components/common/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-xl bg-gray-50 px-6 py-5">
+  <div class="rounded-xl px-6 py-5" :class="classes">
     <div class="pb-5" v-if="title">
       <div class="text-lg font-semibold text-gray-900">
         {{ title }}
@@ -23,5 +23,9 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  classes: {
+    type: String,
+    default: "bg-gray-50 p",
+  }
 });
 </script>

package/src/components/common/FileUpload.vue

@@ -138,7 +138,7 @@ onMounted(() => {
   }
 
   .dz-preview {
-    @apply bg-gray-50 flex gap-1 h-[198px] p-4 items-center rounded-lg;
+    @apply bg-gray-200 flex gap-1 h-[198px] p-4 items-center rounded-lg;
 
     .dz-image {
       @apply w-[100px] object-cover;

package/src/components/common/Icon.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div v-if="IconComponent" @click="handleClick">
+      <component :class="iconClasses" :is="IconComponent" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { defineEmits, onMounted, shallowRef } from "vue";
+import * as Icons from "@/components/helpers/bundleIcons.js";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  iconClasses: {
+    type: String,
+    default: "h-8 w-8",
+  },
+});
+
+const IconComponent = shallowRef(null);
+const emit = defineEmits(["selectIcon"]);
+
+const loadIcon = (name) => {
+  try {
+    IconComponent.value = Icons[name];
+  } catch (error) {
+    console.error(`Failed to load icon: ${name}`, error);
+  }
+};
+
+const handleClick = () => {
+  emit("selectIcon", props.icon);
+};
+
+onMounted(() => {
+  loadIcon(props.icon);
+});
+</script>

package/src/components/common/IconSelector.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="relative block" v-click-outside="handleClickOutside">
+    <div
+        class="flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white hover:border-brand-300 active:border-brand-300 active:ring-4 active:ring-brand-700/[.24]"
+        @click="toggleDropdown"
+    >
+      <IconComponent v-if="model" :icon="model" icon-classes="w-5 h-5" :key="model"></IconComponent>
+      <PlusIcon class="h-5 w-5" v-else/>
+    </div>
+    <div
+        v-show="isDropdownOpen"
+        class="absolute left-[70%] top-[100%] z-10 flex w-[504px] flex-col rounded-xl border border-gray-300 bg-white"
+    >
+      <div class="flex flex-col gap-4 p-4">
+        <div class="relative">
+          <input
+              v-model="search"
+              type="text"
+              placeholder="Search all 1000+ icons"
+              class="w-full border border-gray-300 rounded px-3 py-2"
+          />
+          <button
+              v-if="search.length > 0"
+              @click="search = ''"
+              class="absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 cursor-pointer"
+          >
+            ✕
+          </button>
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm font-medium text-gray-900">
+            <span v-if="icons.length > 0 && search.length > 0"> Search result </span>
+            <span v-else-if="icons.length < 1 && search.length > 0"> No search result </span>
+            <span v-else-if="search.length < 1 && icons.length > 0"> Frequently used icons </span>
+          </p>
+          <div class="flex max-h-[196px] flex-wrap gap-1.5 overflow-y-auto">
+            <IconComponent
+                class="cursor-pointer rounded p-1 hover:bg-gray-100"
+                icon-classes="w-8 h-8"
+                :icon="icon.name"
+                :key="icon.name"
+                v-for="icon in icons"
+                @selectIcon="update"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-between rounded-b-xl bg-gray-100 px-4 py-3">
+        <p class="text-sm font-medium text-gray-900">Not sure about the icon names?</p>
+        <a
+            href="https://www.untitledui.com/free-icons"
+            target="_blank"
+            class="text-blue-500 underline"
+        >
+          View all icons
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useClickOutside } from "@/components/helpers/clickOutSide.js";
+export default {
+  directives: {
+    clickOutside: useClickOutside,
+  },
+};
+</script>
+
+<script setup>
+import {ref, watch, onMounted} from "vue";
+import PlusIcon from "@/assets/img/icons/plus.svg";
+import IconComponent from "./Icon.vue";
+import iconsData from "@/assets/icons.json";
+
+const model = ref(null);
+const search = ref("");
+const icons = ref([]);
+const isDropdownOpen = ref(false);
+
+function toggleDropdown() {
+  isDropdownOpen.value = !isDropdownOpen.value;
+}
+
+watch(search, (value) => {
+  icons.value = iconsData.filter((icon) =>
+      icon.name.toLowerCase().includes(value.toLowerCase())
+  );
+});
+
+function update(event) {
+  model.value = event;
+  isDropdownOpen.value = false; // Close dropdown after selection
+}
+
+function handleClickOutside() {
+  if (isDropdownOpen.value) {
+    toggleDropdown();
+  }
+}
+
+onMounted(() => {
+  icons.value = iconsData.slice(0, 30); // Load the first 30 icons by default
+});
+</script>

package/src/components/common/LinkedTo.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="flex flex-col gap-2">
-      <component :is="getComponentByType(type)" v-model:url="url" :sites="sites"/>
+      <component :is="getComponentByType(type)" v-model:url="url" v-model="url" :sites="sites"/>
       <input type="hidden" name="url" :value="url" />
     </div>
     <div class="flex items-center gap-2">
@@ -27,9 +27,14 @@
 </template>
 
 <script setup>
-import VToggle from "@/components/common/VToggle.vue";
+import {inject} from "vue";
+import VToggle from "@/components/common/Toggle.vue";
 import SiteContent from "@/components/common/SiteContent.vue";
 import ExternalPage from "@/components/common/ExternalPage.vue";
+import DefaultFileUpload from "@/components/common/FileUpload.vue";
+
+// Inject the FileUpload component or fallback to the default one
+const VFileUpload = inject("VFileUpload", DefaultFileUpload);
 
 const type = defineModel("type", { default: "site-content" });
 const url = defineModel("url");
@@ -39,7 +44,7 @@ defineProps({
   label: { type: String, required: false },
   sites: { type: Object, required: true },
   name: { type: String, required: true },
-  options: { type: Array, required: false, default: ["site-content", "external-page"] },
+  options: { type: Array, required: false, default: ["site-content", "external-page", 'download'] },
 });
 
 const toReadableWords = (input) => {
@@ -54,6 +59,7 @@ const getComponentByType = (type) => {
   const components = {
     "site-content": SiteContent,
     "external-page": ExternalPage,
+    "download": VFileUpload,
   };
   return components[type] || null;
 };