@myissue/vue-website-page-builder 3.0.1

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@myissue/vue-website-page-builder",
+  "version": "v3.0.1",
+  "description": "🚧 DEVELOPMENT VERSION - Vue.js page builder component with drag & drop functionality. Not ready for production use.",
+  "type": "module",
+  "main": "./dist/vue-website-page-builder.umd.cjs",
+  "module": "./dist/vue-website-page-builder.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-website-page-builder.js",
+      "require": "./dist/vue-website-page-builder.umd.cjs"
+    },
+    "./style.css": "./dist/vue-website-page-builder.css"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "page-builder",
+    "drag-drop",
+    "website-builder",
+    "components",
+    "development"
+  ],
+  "author": {
+    "name": "qaiswardag",
+    "url": "https://github.com/qaiswardag"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/qaiswardag/vue-website-page-builder.git"
+  },
+  "bugs": {
+    "url": "https://github.com/qaiswardag/vue-website-page-builder/issues"
+  },
+  "homepage": "https://github.com/qaiswardag/vue-website-page-builder#readme",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build:lib": "vite build --mode lib",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.16",
+    "@tiptap/extension-bold": "^2.1.10",
+    "@tiptap/extension-heading": "^2.1.10",
+    "@tiptap/extension-link": "^2.1.10",
+    "@tiptap/extension-list-item": "^2.1.10",
+    "@tiptap/pm": "^2.1.10",
+    "@tiptap/starter-kit": "^2.1.10",
+    "@tiptap/vue-3": "^2.1.10",
+    "@vuepic/vue-datepicker": "^7.2.0",
+    "date-fns": "^2.30.0",
+    "pinia": "^2.1.7",
+    "uuid": "^9.0.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tailwindcss/forms": "^0.5.8",
+    "@tailwindcss/typography": "^0.5.14",
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@types/uuid": "^10.0.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "~10.0.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^7.0.2",
+    "postcss": "^8.4.39",
+    "prettier": "3.5.3",
+    "tailwindcss": "^3.4.6",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

package/src/App.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref, computed, nextTick, onBeforeMount } from 'vue'
+import PageBuilderModal from '@/Components/Modals/PageBuilderModal.vue'
+import HomeSection from '@/Components/Homepage/HomeSection.vue'
+import Footer from '@/Components/Homepage/Footer.vue'
+import Navbar from '@/Components/Homepage/Navbar.vue'
+import PageBuilderView from '@/PageBuilder/PageBuilder.vue'
+import PageBuilder from '@/composables/PageBuilder.ts'
+import FullScreenSpinner from '@/Components/Loaders/FullScreenSpinner.vue'
+import { usePageBuilderStateStore } from '@/stores/page-builder-state'
+import { useUserStore } from '@/stores/user'
+import { useMediaLibraryStore } from '@/stores/media-library'
+
+const mediaLibraryStore = useMediaLibraryStore()
+const pageBuilderStateStore = usePageBuilderStateStore()
+const userStore = useUserStore()
+const openPageBuilder = ref(false)
+
+const pageBuilderPrimaryHandler = ref(null)
+const pageBuilderSecondaryHandler = ref(null)
+const pageBuilder = new PageBuilder(pageBuilderStateStore, mediaLibraryStore)
+const formType = ref('create')
+
+const getIsLoading = computed(() => {
+  return userStore.getIsLoading
+})
+
+const pathPageBuilderStorageCreate = `page-builder-create-post`
+const pathPageBuilderStorageUpdate = `page-builder-update-post-id-1`
+
+const handlePageBuilder = async function () {
+  userStore.setIsLoading(true)
+
+  await nextTick()
+  openPageBuilder.value = true
+
+  if (formType.value === 'create') {
+    pageBuilderStateStore.setComponents([])
+    pageBuilder.areComponentsStoredInLocalStorage()
+  }
+
+  // handle click
+  pageBuilderPrimaryHandler.value = async function () {
+    userStore.setIsLoading(true)
+
+    if (formType.value === 'update') {
+      await nextTick()
+      pageBuilder.saveComponentsLocalStorageUpdate()
+    }
+
+    openPageBuilder.value = false
+    userStore.setIsLoading(false)
+  }
+
+  // handle click
+  pageBuilderSecondaryHandler.value = async function () {
+    userStore.setIsLoading(true)
+
+    // save to local storage if new resource
+    if (formType.value === 'create') {
+      await nextTick()
+      pageBuilder.saveComponentsLocalStorage()
+      await nextTick()
+    }
+    // save to local storage if update
+    if (formType.value === 'update') {
+      await nextTick()
+      pageBuilder.synchronizeDOMAndComponents()
+      await nextTick()
+    }
+
+    openPageBuilder.value = false
+
+    userStore.setIsLoading(false)
+  }
+
+  userStore.setIsLoading(false)
+
+  // end modal
+}
+// Builder # End
+const handleDraftForUpdate = async function () {
+  userStore.setIsLoading(true)
+
+  if (formType.value === 'update') {
+    await nextTick()
+    pageBuilder.areComponentsStoredInLocalStorageUpdate()
+    await nextTick()
+    pageBuilder.setEventListenersForElements()
+
+    userStore.setIsLoading(false)
+  }
+}
+
+onBeforeMount(() => {
+  // Define local storage key name before on mount
+  pageBuilderStateStore.setLocalStorageItemName(pathPageBuilderStorageCreate)
+
+  // Define local storage key name before on mount
+  pageBuilderStateStore.setLocalStorageItemNameUpdate(pathPageBuilderStorageUpdate)
+})
+</script>
+
+<template>
+  <teleport to="body">
+    <FullScreenSpinner v-if="getIsLoading"></FullScreenSpinner>
+  </teleport>
+  <PageBuilderModal
+    :show="openPageBuilder"
+    updateOrCreate="create"
+    @pageBuilderPrimaryHandler="pageBuilderPrimaryHandler"
+    @pageBuilderSecondaryHandler="pageBuilderSecondaryHandler"
+    @handleDraftForUpdate="handleDraftForUpdate"
+  >
+    <PageBuilderView></PageBuilderView>
+  </PageBuilderModal>
+
+  <Navbar @handleButton="handlePageBuilder"></Navbar>
+  <HomeSection @handleButton="handlePageBuilder"></HomeSection>
+
+  <Footer></Footer>
+</template>

package/src/Components/Homepage/Footer.vue

@@ -0,0 +1,42 @@
+<script setup>
+const version = __APP_VERSION__;
+</script>
+
+<template>
+  <div class="flex justify-between gap-2 bg-red-100 py-10 lg:px-12 px-4">
+    <div>
+      <p class="myPrimaryParagraph">
+        <a
+          href="https://github.com/qaiswardag/vue-website-page-builder"
+          target="_blank"
+          class="myPrimaryLink text-myPrimaryDarkGrayColor"
+          >Qais Wardag | GitHub
+        </a>
+      </p>
+      <p class="myPrimaryParagraph mt-2">
+        <span class="text-myPrimaryDarkGrayColor text-xs">{{ version }}</span>
+      </p>
+    </div>
+    <div>
+      <a
+        href="https://github.com/qaiswardag/vue-website-page-builder"
+        target="_blank"
+        class="text-myPrimaryDarkGrayColor"
+      >
+        <span class="sr-only">GitHub</span>
+        <svg
+          class="h-6 w-6"
+          fill="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </a>
+    </div>
+  </div>
+</template>