@code-coaching/vuetiful 0.16.3 → 0.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.16.3",
+  "version": "0.16.5",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/components/atoms/VCodeBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CssClasses, vClipboard, VButton } from "@/index";
+import { CssClasses, VButton, vClipboard } from "@/index";
 import { useHighlight } from "@/services/highlight.service";
 import "highlight.js/styles/github-dark.css";
 import { ref } from "vue";
@@ -68,7 +68,9 @@ function onCopyClick() {
 </script>
 
 <template v-if="language && code">
-  <div class="code-block bg-neutral-900/90 text-sm text-white shadow rounded-container-token">
+  <div
+    class="code-block max-w-full bg-neutral-900/90 text-sm text-white shadow rounded-container-token"
+  >
     <header
       :class="`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${headerClass}`"
     >

package/src/components/molecules/VPreview.test.ts

@@ -70,24 +70,4 @@ describe("VPreview", () => {
       expect(after.classes()).not.toContain("w-full");
     });
   })
-});
-
-// test("VPreview", () => {
-//   const wrapper = mount(VPreview, {
-//     slots: {
-//       preview: "<div data-test='preview-slot'>Preview</div>",
-//       source: "<div data-test='source-slot'>Source</div>",
-//     },
-//   });
-
-//   const previewerPreview = wrapper.find("[data-test='previewer-preview']");
-//   const previewSlot = previewerPreview.find("[data-test='preview-slot']");
-
-//   console.log(wrapper.html());
-//   const previewerSource = wrapper.find("[data-test='previewer-source']");
-//   expect(previewerSource.exists()).toBe(false);
-//   const sourceSlot = previewerSource.find("[data-test='source-slot']");
-
-//   expect(previewSlot.exists()).toBe(true);
-//   expect(sourceSlot.exists()).toBe(true);
-// })
+});

package/src/components/molecules/VPreview.vue

@@ -4,8 +4,8 @@ import { ref } from "vue";
 
 const backgrounds: Record<string, string> = {
   "bg-transparent": "bg-transparent",
-  neutral: "bg-white/25 dark:bg-black/25",
   "neutral-opaque": "bg-white/50 dark:bg-black/50",
+  neutral: "bg-surface-100-800-token",
 
   "variant-filled-surface": "variant-filled-surface",
   "variant-filled-primary": "variant-filled-primary",
@@ -197,7 +197,7 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
           data-test="previewer-preview"
           :class="`vuetiful-previewer-preview mx-auto flex duration-300 ${
             radioSize === 'mobile'
-              ? 'mobile-screen flex h-[812px]  max-w-[375px] flex-col overflow-hidden rounded-3xl border-8 border-black/50 p-2 shadow-2xl dark:border-white/50'
+              ? 'mobile-screen flex h-[812px] max-w-[375px] flex-col overflow-hidden rounded-3xl border-8 border-black/50 p-2 shadow-2xl dark:border-white/50'
               : 'w-full items-center justify-center'
           } ${regionPreview}`"
         >
@@ -216,7 +216,7 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
     <template v-if="tabView === 'code'">
       <div
         data-test="previewer-source"
-        :class="`vuetiful-previewer-source space-y-4 p-4 bg-surface-200-700-token ${regionSource}`"
+        :class="`vuetiful-previewer-source p-4 ${backgrounds['neutral']} ${regionSource}`"
       >
         <slot name="source">(source)</slot>
       </div>