fix(demo): improve cms-text-element (#283)

* fix(demo): improve cms-text-element * chore: add changesets
shopware · Jun 30, 2023 · 7bff62f · 7bff62f
1 parent aed2413
commit 7bff62f
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 41 deletions.
diff --git a/.changeset/curvy-rabbits-provide.md b/.changeset/curvy-rabbits-provide.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Fixed initial listing suring search
diff --git a/.changeset/ninety-stingrays-destroy.md b/.changeset/ninety-stingrays-destroy.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/cms-base": minor
+---
+
+CmsElementText has now proper support for colors and align, when set in admin panel
diff --git a/.changeset/twelve-oranges-enjoy.md b/.changeset/twelve-oranges-enjoy.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Moved UnoCSS config into separate file, enabled preflight for styles reset
diff --git a/packages/cms-base/components/public/cms/element/CmsElementText.vue b/packages/cms-base/components/public/cms/element/CmsElementText.vue
@@ -2,9 +2,12 @@
 import type { CmsElementText } from "@shopware-pwa/composables-next";
 import { useCmsElementConfig } from "@shopware-pwa/composables-next";
 import { h } from "vue";
-import { CSSProperties } from "vue";
 import { decodeHTML } from "entities";
-import { getOptionsFromNode } from "../../../../helpers/html-to-vue/getOptionsFromNode";
+import { CSSProperties } from "vue";
+import {
+  getOptionsFromNode,
+  NodeObject,
+} from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import { renderHtml } from "../../../../helpers/html-to-vue/renderToHtml";
 
 const props = defineProps<{
@@ -28,7 +31,7 @@ const CmsTextRender = () => {
     textTransformer: (text: string) => decodeHTML(text),
     extraComponentsMap: {
       link: {
-        conditions(node: any) {
+        conditions(node: NodeObject) {
           return (
             node.type === "tag" &&
             node.name === "a" &&
@@ -48,19 +51,26 @@ const CmsTextRender = () => {
         },
       },
       button: {
-        conditions(node: any) {
+        conditions(node: NodeObject) {
           return (
             node.type === "tag" &&
             node.name === "a" &&
             node.attrs?.class?.match(/btn\s?/)
           );
         },
-        renderer(node: any, children: any, createElement: any) {
-          const btnClass =
-            "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
-          const _class = node?.attrs?.class
-            .replace("btn-secondary", `${btnClass} bg-brand-dark text-white`)
-            .replace("btn-primary", `${btnClass} bg-brand-primary text-white`);
+        renderer(node: NodeObject, children: any, createElement: any) {
+          let _class = "";
+          if (node?.attrs?.class) {
+            const btnClass =
+              "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
+
+            _class = node?.attrs?.class
+              .replace("btn-secondary", `${btnClass} bg-brand-dark text-white`)
+              .replace(
+                "btn-primary",
+                `${btnClass} bg-brand-primary text-white`
+              );
+          }
 
           return createElement(
             "a",
@@ -72,6 +82,30 @@ const CmsTextRender = () => {
           );
         },
       },
+      font: {
+        conditions(node: NodeObject) {
+          return node.type === "tag" && node.name === "font";
+        },
+        renderer(node: NodeObject, children: any, createElement: any) {
+          // convert from <font color="#ce0000">Headline 1</font> to <span style="color:#ce0000">Headline 1</span>
+          let newStyle = null;
+          const styleColor = node?.attrs?.color;
+          if (styleColor) {
+            const currentStyle = node.attrs?.style ?? "";
+            newStyle = `color:${styleColor};${currentStyle}`;
+            delete node.attrs?.color;
+          }
+
+          return createElement(
+            "span",
+            {
+              style: newStyle,
+              ...getOptionsFromNode(node).attrs,
+            },
+            [...children]
+          );
+        },
+      },
     },
   };
   const rawHtml =

diff --git a/packages/cms-base/helpers/html-to-vue/getOptionsFromNode.ts b/packages/cms-base/helpers/html-to-vue/getOptionsFromNode.ts
@@ -1,15 +1,46 @@
+export type NodeObject = {
+  type: string;
+  name: string;
+  attrs?: Options;
+  children: NodeObject[];
+  voidElement: boolean;
+  content: string;
+};
+
 type Options = {
-  style: String;
-  class: String;
-  attrs: Object;
+  align?: string;
+  attrs?: Record<string, string>;
+  class?: string;
+  color?: string;
+  style?: string;
 };
 
 export function getOptionsFromNode(node: any): Options {
-  const { style, class: classArs, ...rest } = node.attrs;
+  let style = null;
+  let classNames = null;
+  let align = null;
+
+  if (node.attrs.style && node.attrs.style !== "") {
+    style = node.attrs.style;
+    delete node.attrs.style; // we delete the nodes otherwise it would be added to rest again
+  }
+
+  if (node.attrs.class && node.attrs.class !== "") {
+    classNames = node.attrs.class;
+    delete node.attrs.class;
+  }
+
+  if (node.attrs.align && node.attrs.align !== "") {
+    align = node.attrs.align;
+    delete node.attrs.align;
+  }
+
+  const attrs = Object.keys(node.attrs).length === 0 ? null : { ...node.attrs };
 
   return {
-    style,
-    attrs: rest,
-    class: classArs,
+    align: align,
+    attrs: attrs,
+    class: classNames,
+    style: style,
   };
 }
diff --git a/packages/composables/src/useListing.ts b/packages/composables/src/useListing.ts
@@ -279,7 +279,6 @@ export function createListingComposable<ELEMENTS_TYPE>({
       const searchCriteria = merge({}, searchDefaults, criteria);
       const result = await searchMethod(searchCriteria);
       return result;
-      await setInitialListing(result);
     } catch (e) {
       throw e;
     } finally {

diff --git a/templates/vue-demo-store/nuxt.config.ts b/templates/vue-demo-store/nuxt.config.ts
@@ -1,4 +1,3 @@
-import transformerDirective from "@unocss/transformer-directives";
 import i18nConfig from "./i18n/src/config";
 import { VueDisableInputsBeforeMount } from "vite-vue-plugin-disable-inputs";
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
@@ -37,32 +36,12 @@ export default defineNuxtConfig({
   vueuse: {
     ssrHandlers: true,
   },
-  // Unocss bug fix https://github.com/nuxt/framework/issues/7623
-  experimental: {
-    inlineSSRStyles: false,
-  },
   nitro: {
     compressPublicAssets: true,
   },
   unocss: {
-    uno: true, // enabled `@unocss/preset-uno`
-    icons: true, // enabled `@unocss/preset-icons`
-    attributify: true, // enabled `@unocss/preset-attributify`,
-    preflight: true,
-    transformers: [transformerDirective()],
-    theme: {
-      extend: {
-        width: "width",
-        height: "height",
-      },
-      colors: {
-        brand: {
-          primary: "#189eff",
-          light: "#5ebbff",
-          dark: "#0081df",
-        },
-      },
-    },
+    preflight: true, // this is needed by @unocss/reset
+    // for presets, theme config, ... look at the uno.config.ts file
   },
   router: {
     options: {

diff --git a/templates/vue-demo-store/uno.config.ts b/templates/vue-demo-store/uno.config.ts
@@ -0,0 +1,66 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+} from "unocss";
+import transformerDirectives from "@unocss/transformer-directives";
+
+export default defineConfig({
+  theme: {
+    extend: {
+      width: "width",
+      height: "height",
+    },
+    colors: {
+      brand: {
+        primary: "#189eff",
+        light: "#5ebbff",
+        dark: "#0081df",
+      },
+    },
+  },
+  presets: [
+    presetUno(),
+    presetIcons({
+      collections: {
+        carbon: () =>
+          import("@iconify-json/carbon/icons.json").then((i) => i.default),
+      },
+    }),
+    presetAttributify(),
+    presetTypography(),
+  ],
+  transformers: [transformerDirectives()],
+  preflights: [
+    // preflights can be used to set some base styles
+    {
+      getCSS: () => `
+      h1 {
+        line-height: 2.5rem;
+        font-size: 2.25rem;
+      }
+      h2 {
+        line-height: 2rem;
+        font-size: 1.75rem;
+      }
+      h3 {
+        line-height: 1.5rem;
+        font-size: 1.25rem;
+      }
+      ol,
+      ul,
+      dl {
+        list-style-type: disc;
+        padding-left: 40px;
+        margin-top: 0;
+        margin-bottom: 1rem;
+      }
+      ol {
+        list-style-type: decimal;
+      }
+      `,
+    },
+  ],
+});