Remove dusk attrs

Author: stevebauman

components/ButtonResize.vue

@@ -1,6 +1,6 @@
 <template>
     <button
-        dusk="button-resize"
+       
         :style="{ transform: `scale(${zoomScale})` }"
         class="z-20 bg-white border border-gray-700 rounded-full shadow exclude-from-panzoom active:bg-ui-gray-700 hover:scale-200"
     ></button>

components/Canvas.vue

@@ -13,7 +13,7 @@
         <div
             v-bind="backgroundAttributes"
             class="absolute inset-0"
-            :dusk="`background-${background}`"
+           
             :data-hide="background === 'transparent'"
         ></div>
 
@@ -74,7 +74,7 @@
         <Divider
             v-if="!preview"
             data-hide
-            dusk="canvas-height"
+           
             :number="height"
             :zoom-scale="zoomScale"
             :style="{ marginRight: `-${3.5 * Math.pow(zoomScale, 0.5)}rem` }"
@@ -83,7 +83,7 @@
 
         <Separator
             v-if="!preview"
-            dusk="canvas-width"
+           
             :number="width"
             :zoom-scale="zoomScale"
             :style="{ marginBottom: `-${3.5 * Math.pow(zoomScale, 0.5)}rem` }"

components/ControlFitToWindow.vue

@@ -3,7 +3,7 @@
         <Button
             size="xs"
             class="rounded-l-lg"
-            dusk="button-fit-to-window"
+           
             :rounded="false"
             @click="$emit('apply')"
         >
@@ -13,7 +13,7 @@
 
         <ButtonLock
             size="xs"
-            dusk="button-lock-fit-to-window"
+           
             :rounded="false"
             :locked="lockWindowSize"
             :class="{ 'rounded-r-lg': !lockWindowSize }"
@@ -27,14 +27,14 @@
                     v-if="lockWindowSize"
                     size="xs"
                     class="rounded-r-lg"
-                    dusk="button-lock-fit-to-window-settings"
+                   
                     :rounded="false"
                 >
                     <SettingsIcon class="w-4 h-4" />
                 </Button>
             </template>
 
-            <div dusk="popover-fit-to-window" class="flex flex-col divide-y divide-ui-gray-800">
+            <div class="flex flex-col divide-y divide-ui-gray-800">
                 <div class="grid grid-cols-2 gap-2 divide-x divide-ui-gray-800">
                     <div class="flex items-center justify-between w-full gap-2 px-3 py-2">
                         <Label class="w-full text-center"> Padding X </Label>
@@ -44,7 +44,7 @@
                             type="number"
                             class="w-16 text-center"
                             :value="lockWindowPaddingX"
-                            dusk="input-fit-to-window-padding-x"
+                           
                             @input="$emit('update:lock-window-padding-x', $event)"
                         />
                     </div>
@@ -57,7 +57,7 @@
                             type="number"
                             class="w-16 text-center"
                             :value="lockWindowPaddingY"
-                            dusk="input-fit-to-window-padding-y"
+                           
                             @input="$emit('update:lock-window-padding-y', $event)"
                         />
                     </div>

components/ControlTabs.vue

@@ -5,7 +5,7 @@
                 v-for="{ name, title } in tabs"
                 :key="name"
                 class="w-full"
-                :dusk="`button-tab-${name}`"
+               
                 :active="active === name && open"
                 @click="
                     () => {

components/Dropdown.vue

@@ -16,12 +16,12 @@
                 v-if="open"
                 class="highlight origin-top-right absolute right-0 z-30 w-56 shadow bg-ui-gray-700 rounded-lg overflow-hidden ring-1 ring-ui-gray-800"
             >
-                <div class="py-1 shadow-lg" dusk="dropdown-menu">
+                <div class="py-1 shadow-lg">
                     <a
                         href="#"
                         v-for="item in items"
                         :key="item.name"
-                        :dusk="`option-${item.name}`"
+                       
                         @click.prevent="() => { item.click(); open = false; }"
                         class="block p-2 mx-2 my-1 text-xs font-medium transition duration-150 ease-in-out rounded-md text-ui-gray-100 hover:bg-ui-gray-900 focus:outline-none focus:ring-0 focus:bg-ui-gray-900"
                     >

components/Editor.vue

@@ -12,7 +12,7 @@
                     </label>
 
                     <Select
-                        dusk="select-language"
+                       
                         name="language"
                         :value="language"
                         :options="languages"
@@ -31,7 +31,7 @@
                         </label>
 
                         <Select
-                            dusk="select-tab-size"
+                           
                             :value="tabSize"
                             :options="[2, 4]"
                             @input="$emit('update:tab-size', $event)"
@@ -89,7 +89,7 @@
 
                         <ToolbarButton
                             v-if="canRemove && canMoveUp"
-                            dusk="button-move-up"
+                           
                             class="mr-0.5 rounded-l-lg"
                             @click="$emit('up', id)"
                             v-tooltip="{
@@ -105,7 +105,7 @@
 
                         <ToolbarButton
                             v-if="canRemove"
-                            dusk="button-remove"
+                           
                             :class="{ 'rounded-l-lg': !canMoveUp }"
                             class="mr-0.5"
                             @click="$emit('remove', id)"
@@ -118,7 +118,7 @@
                         </ToolbarButton>
 
                         <ToolbarButton
-                            dusk="button-add"
+                           
                             :class="{
                                 'mr-0.5': canMoveDown,
                                 'rounded-r-lg': !canMoveDown,
@@ -135,7 +135,7 @@
 
                         <ToolbarButton
                             v-if="canRemove && canMoveDown"
-                            dusk="button-move-down"
+                           
                             class="rounded-r-lg"
                             @click="$emit('down', id)"
                             v-tooltip="{
@@ -154,7 +154,7 @@
                         <ToolbarButton
                             v-if="landscape"
                             class="rounded-l-lg"
-                            dusk="button-toggle-portrait"
+                           
                             @click="$emit('update:layout')"
                             v-tooltip="{
                                 content: 'Toggle Layout',
@@ -167,7 +167,7 @@
                         <ToolbarButton
                             v-else
                             class="rounded-l-lg"
-                            dusk="button-toggle-landscape"
+                           
                             @click="$emit('update:layout')"
                             v-tooltip="{
                                 content: 'Toggle Layout',
@@ -179,7 +179,7 @@
 
                         <ToolbarButton
                             class="rounded-r-lg"
-                            dusk="button-toggle-reverse"
+                           
                             @click="$emit('update:reverse')"
                             v-tooltip="{
                                 content: 'Move Editor Pane',

components/FileDropdown.vue

@@ -19,7 +19,7 @@
                 v-if="open"
                 class="highlight origin-top-left absolute left-0 top-full mt-1 z-30 w-56 shadow bg-ui-gray-700 overflow-hidden rounded-lg ring-1 ring-ui-gray-800"
             >
-                <div dusk="dropdown-file" class="py-2 shadow-lg space-y-1">
+                <div class="py-2 shadow-lg space-y-1">
                     <template v-for="(option, index) in options" :key="option.name ?? index">
                         <div v-if="option.separator" class="h-px bg-ui-gray-800 mx-2"></div>
 

components/Modal.vue

@@ -34,7 +34,7 @@
                     <XIcon class="text-ui-gray-300 h-4 w-4" />
                 </button>
 
-                <div class="px-6 pb-6">
+                <div class="px-6 pb-6" v-bind="$attrs">
                     <Scrollbar class="max-h-[50rem]">
                         <slot />
                     </Scrollbar>
@@ -48,6 +48,8 @@
 import { XIcon } from 'lucide-vue-next';
 
 export default {
+    inheritAttrs: false,
+
     components: { XIcon },
 
     props: {

components/ModalChangelog.vue

@@ -1,15 +1,23 @@
 <template>
-    <Modal v-bind="$attrs" size="sm" class="space-y-4" header="Changelog">
-        <nuxt-content :document="content" />
+    <Modal v-bind="$attrs" size="sm" header="Changelog">
+        <div class="prose prose-invert prose-sm max-w-none p-4" v-html="content" />
     </Modal>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue';
+
 export default {
-    data: () => ({ content: null }),
+    setup() {
+        const content = ref('');
+
+        onMounted(async () => {
+            const md = await import('@/content/changelog.md?raw');
+            const { marked } = await import('marked');
+            content.value = marked(md.default);
+        });
 
-    async fetch() {
-        this.content = await this.$content('changelog').fetch();
+        return { content };
     },
 };
 </script>

components/ModalHelp.vue

@@ -1,15 +1,23 @@
 <template>
     <Modal v-bind="$attrs" size="sm" class="space-y-4" header="Help Guide">
-        <nuxt-content :document="content" />
+        <div class="prose prose-invert prose-sm max-w-none p-4" v-html="content" />
     </Modal>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue';
+
 export default {
-    data: () => ({ content: null }),
+    setup() {
+        const content = ref('');
+
+        onMounted(async () => {
+            const md = await import('@/content/help.md?raw');
+            const { marked } = await import('marked');
+            content.value = marked(md.default);
+        });
 
-    async fetch() {
-        this.content = await this.$content('help').fetch();
+        return { content };
     },
 };
 </script>