@designcrowd/library.brand-page 5.12.6-shape-1 → 5.12.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.12.6-shape-1",
+  "version": "5.12.6",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/background-shape/BackgroundShape.mixin.ts

@@ -21,7 +21,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+    return { svgData: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -44,19 +44,11 @@ export default defineComponent({
 
       if (this.isFullBackground) {
         attributes.push('preserveAspectRatio="xMidYMid slice"');
-        attributes.push(`height="100%" width="100%"`);
+        attributes.push('style="width: 100%; height: 100%;"');
       }
 
       return attributes.join(' ');
     },
-
-    objectUrl(): string {
-      if (!this.useObjectElement) {
-        return this.svgDataObjectUrl;
-      }
-
-      return this.viewModel.name;
-    },
   },
   watch: {
     'viewModel.style.color': {
@@ -87,11 +79,6 @@ export default defineComponent({
         return;
       }
 
-      if (this.svgDataObjectUrl) {
-        // clean up previous Object URL
-        URL.revokeObjectURL(this.svgDataObjectUrl);
-      }
-
       if (isURL(this.viewModel.name)) {
         if (!this.isValidSvgUrl(this.viewModel.name)) {
           return;
@@ -109,19 +96,12 @@ export default defineComponent({
           this.originalSvgData,
           this.viewModel.style.color,
         );
-      } else {
-        this.svgData = this.originalSvgData;
       }
 
       this.svgData = this.svgData.replace(
         '<svg ',
         `<svg ${this.svgAttributes} `,
       );
-
-      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
-
-      // Create an Object URL
-      this.svgDataObjectUrl = URL.createObjectURL(blob);
     },
   },
 });

package/src/brand-page/components/background-shape/BackgroundShape.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="c-shape-background">
-    <div :style="backgroundShapesStyle" class="c-shape c-shape-object">
-      <object class="tw-w-full tw-h-full" :data="objectUrl" />
+    <div
+      v-if="useObjectElement"
+      :style="backgroundShapesStyle"
+      class="c-shape c-shape-object"
+    >
+      <object class="tw-w-full tw-h-full" :data="viewModel.name" />
     </div>
+    <div
+      v-else
+      :style="backgroundShapesStyle"
+      class="c-shape"
+      v-html="svgData"
+    />
   </div>
 </template>
 <script>

package/src/brand-page/components/media/Shape.mixin.ts

@@ -34,7 +34,7 @@ export default defineComponent({
     },
   },
   data() {
-    return { svgData: '', svgDataObjectUrl: '', originalSvgData: '' };
+    return { svgData: '', originalSvgData: '' };
   },
   computed: {
     useObjectElement(): boolean {
@@ -53,10 +53,6 @@ export default defineComponent({
     },
 
     objectUrl() {
-      if (!this.useObjectElement) {
-        return this.svgDataObjectUrl;
-      }
-
       let dimensionQuery = ``;
 
       if (this.size) {
@@ -72,7 +68,7 @@ export default defineComponent({
       const attributes: string[] = [];
 
       if (this.size) {
-        attributes.push(`height="${this.size}" width="${this.size}"`);
+        attributes.push(`height=${this.size} width=${this.size}`);
       }
 
       return attributes.join(' ');
@@ -129,11 +125,6 @@ export default defineComponent({
         return;
       }
 
-      if (this.svgDataObjectUrl) {
-        // clean up previous Object URL
-        URL.revokeObjectURL(this.svgDataObjectUrl);
-      }
-
       this.svgData = applyColorReplacementsToSvgString(
         this.originalSvgData,
         this.colorReplacements,
@@ -143,11 +134,6 @@ export default defineComponent({
         '<svg ',
         `<svg ${this.svgAttributes} `,
       );
-
-      const blob = new Blob([this.svgData], { type: 'image/svg+xml' });
-
-      // Create an Object URL
-      this.svgDataObjectUrl = URL.createObjectURL(blob);
     },
   },
 });

package/src/brand-page/components/media/Shape.vue

@@ -1,11 +1,18 @@
 <template>
   <div :class="imgClasses">
     <div
+      v-if="useObjectElement"
       class="c-shape c-shape-object"
       :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
     >
       <object :style="objectStyle" :data="objectUrl" />
     </div>
+    <div
+      v-else
+      class="c-shape"
+      :class="{ 'tw-flex tw-justify-center tw-items-center': size }"
+      v-html="svgData"
+    />
   </div>
 </template>
 <script>