feat: added Code Inline

Flowko · Flowko · commit be166a95028e · 2024-01-21T12:51:43.000+01:00
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { ECodeBlock, useRender } from 'vue-email'
+import { ECodeBlock, ECodeInline, useRender } from 'vue-email'
 import Test from './components/Test.vue'
 
 const email = ref('')
@@ -25,6 +25,7 @@ const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
   <Suspense>
     <ECodeBlock style="padding: 20px;" :code="code" lang="typescript" theme="dracula" />
   </Suspense>
+  <ECodeInline>@vue-email/nuxt</ECodeInline>
   <iframe :srcdoc="email" />
 </template>
 
diff --git a/src/components/ECodeBlock.ts b/src/components/ECodeBlock.ts
@@ -60,14 +60,5 @@ export default defineComponent({
           }),
         ]),
       ])
-
-    // const htmlCode = await codeToHtml(code, {
-    //   lang,
-    //   theme,
-    // })
-
-    // return () => h('clean-component', {
-    //   innerHTML: htmlCode,
-    // })
   },
 })
diff --git a/src/components/ECodeInline.ts b/src/components/ECodeInline.ts
@@ -0,0 +1,42 @@
+import type { CSSProperties, PropType } from 'vue'
+import { defineComponent, h } from 'vue'
+
+export default defineComponent({
+  name: 'ECodeInline',
+  props: {
+    class: {
+      type: String,
+      default: '',
+    },
+    style: {
+      type: Object as PropType<CSSProperties>,
+    },
+  },
+  setup(props, { slots }) {
+    return () =>
+      [h('style', null, `
+      meta ~ .cino {
+        display: none !important;
+        opacity: 0 !important;
+      }
+
+      meta ~ .cio {
+        display: block !important;
+      }
+    `), h('code', {
+        ...props,
+        class: [
+          props.class,
+          'cino',
+        ],
+        style: props.style,
+      }, slots.default?.()), h('span', {
+        ...props,
+        class: [
+          props.class,
+          'cio',
+        ],
+        style: { ...props.style, display: 'none' },
+      }, slots.default?.())]
+  },
+})
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -17,3 +17,4 @@ export { default as EText } from './EText'
 export { default as EMarkdown } from './EMarkdown'
 export { default as EStyle } from './EStyle'
 export { default as ECodeBlock } from './ECodeBlock'
+export { default as ECodeInline } from './ECodeInline'
