Fix/UI ux minor issues 11 (#80)

* Bump version to 3.4.11 in package.json

* Bump version to 3.4.10

* Fix: Update input label and add id for YouTube video input; set font-weight to normal for button

* Fix: Remove unnecessary blank line in DefaultBuilderComponents.vue

* Refactor placeholder image generation in component.ts

- Removed the import of getPlaceholderImageDataUrl and defined it locally.
- Updated all instances of placeholder image URLs in component data to use the new local function.
- Added SVG cover images for various components to enhance visual representation.
- Ensured all HTML code snippets utilize the new placeholder image function for consistency.

* Fix: Update category button styles for active state

Author: qaiswardag

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myissue/vue-website-page-builder",
-  "version": "3.4.9",
+  "version": "3.4.10",
   "description": "Vue 3 page builder component with drag & drop functionality.",
   "type": "module",
   "main": "./dist/vue-website-page-builder.umd.cjs",

src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue

@@ -210,8 +210,14 @@ const handleModalIframeSrc = function () {
         <div class="pbx-myInputGroup">
           <div class="pbx-myPrimaryFormOrganizationHeaderDescriptionSection">
             <div class="pbx-myPrimaryFormOrganizationHeader">
-              <label for="video" class="pbx-myPrimaryInputLabel">Video url:</label>
-              <input v-model="iframeSrc" type="text" class="pbx-myPrimaryInput" name="video" />
+              <label for="youtube-video" class="pbx-myPrimaryInputLabel">Video url:</label>
+              <input
+                id="youtube-video"
+                v-model="iframeSrc"
+                type="text"
+                class="pbx-myPrimaryInput"
+                name="video"
+              />
               <div
                 v-if="urlError"
                 class="pbx-min-h-[2.5rem] pbx-flex pbx-items-center pbx-justify-start"

src/css/style.css

@@ -476,6 +476,7 @@
   border-radius: 0.5rem;
   cursor: pointer;
   line-height: 1.5;
+  font-weight: normal;
 }
 
 .pbx-myPrimarySelect {

src/tests/DefaultComponents/DefaultBuilderComponents.vue

@@ -3,10 +3,8 @@ import { ref, computed } from 'vue'
 import componentHelpers from '../../utils/html-elements/componentHelpers'
 import components from '../../utils/html-elements/component'
 import { usePageBuilderModal } from '../../composables/usePageBuilderModal'
-import { generateComponentPreview } from '../../utils/componentPreviews'
 import type { ComponentObject } from '../../types'
 import { getPageBuilder } from '../../composables/builderInstance'
-
 import { useTranslations } from '../../composables/useTranslations'
 
 const { translate } = useTranslations()
@@ -70,11 +68,6 @@ const convertToComponentObject = function (comp: any): ComponentObject {
     title: comp.title,
   }
 }
-
-// Get SVG preview for component
-const getSvgPreview = (title: string) => {
-  return generateComponentPreview(title)
-}
 </script>
 
 <style scoped>
@@ -148,7 +141,11 @@ const getSvgPreview = (title: string) => {
             :key="category"
             @click="selectedCategory = category"
             class="pbx-mySecondaryButton pbx-text-xs pbx-px-4"
-            :class="{ active: selectedCategory === category }"
+            :class="[
+              selectedCategory === category
+                ? 'pbx-bg-myPrimaryLinkColor pbx-text-white hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white'
+                : 'hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white',
+            ]"
           >
             {{ translate(category) }}
           </button>
@@ -168,7 +165,7 @@ const getSvgPreview = (title: string) => {
               <!-- Use SVG preview instead of external images -->
               <div
                 class="pbx-max-h-72 pbx-cursor-pointer pbx-bg-white pbx-mx-auto pbx-flex pbx-items-center pbx-justify-center"
-                v-html="getSvgPreview(comp.title)"
+                v-html="comp.cover_image"
               ></div>
             </div>
             <div class="pbx-p-3">