docs: fix theme editor

Akryum · Jun 20, 2023 · 19a7979 · 19a7979
1 parent 5e106c4
commit 19a7979
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 69 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -52,6 +52,7 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     indent: 'off',
     '@typescript-eslint/no-this-alias': 'off',
+    'func-call-spacing': 'off',
   },
   ignorePatterns: [
     'node_modules/',

diff --git a/docs/.vitepress/components/theme-editor/ConfigEditor.vue b/docs/.vitepress/components/theme-editor/ConfigEditor.vue
@@ -75,7 +75,7 @@ export default {
 
 <template>
   <div class="overflow-hidden flex flex-col items-stretch">
-    <div class="text-gray-500 flex items-center border-b border-gray-100">
+    <div class="text-gray-500 flex items-center border-b border-gray-100 dark:border-gray-800">
       <ToolIcon class="w-4 h-4 mx-2" />
       <span class="flex-1">
         Theme Configuration
@@ -94,15 +94,15 @@ export default {
 
     <div class="overflow-auto">
       <template v-if="tab === 'general'">
-        <div class="flex space-x-1 hover:bg-gray-50 p-2">
+        <div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Theme name:</span>
           <input
             v-model="theme.name"
-            class="w-0 flex-1 border border-gray-300 rounded px-1"
+            class="w-0 flex-1 border border-gray-300 dark:border-gray-700 rounded px-1"
           >
         </div>
 
-        <div class="flex space-x-1 hover:bg-gray-50 p-2">
+        <div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <label for="extend">Inherit another theme:</label>
           <select
             id="extend"
@@ -124,7 +124,7 @@ export default {
           </select>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Reset CSS:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -142,7 +142,7 @@ export default {
       </template>
 
       <template v-if="tab === 'display'">
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Triggers:</span>
           <label class="flex items-center space-x-1">
             <input
@@ -167,7 +167,7 @@ export default {
           </template>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Delay (ms):</span>
           <label class="flex items-center space-x-1">
             <input
@@ -210,7 +210,7 @@ export default {
           </template>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Auto hide:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -226,7 +226,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Eager mount:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -244,7 +244,7 @@ export default {
       </template>
 
       <template v-if="tab === 'position'">
-        <div class="flex space-x-1 hover:bg-gray-50 p-2">
+        <div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <label for="placement">Placement:</label>
           <select
             id="placement"
@@ -266,7 +266,7 @@ export default {
           </select>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Strategy:</span>
           <label
             v-for="value of [undefined, 'absolute', 'fixed']"
@@ -282,7 +282,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Distance (px):</span>
           <label class="flex items-center space-x-1">
             <input
@@ -308,7 +308,7 @@ export default {
           </template>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Skidding (px):</span>
           <label class="flex items-center space-x-1">
             <input
@@ -334,7 +334,7 @@ export default {
           </template>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Arrow padding (px):</span>
           <label class="flex items-center space-x-1">
             <input
@@ -360,7 +360,7 @@ export default {
           </template>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Instant move:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -376,7 +376,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Handle resize:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -392,7 +392,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Compute transform origin:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -408,7 +408,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Prevent overflow:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -424,7 +424,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Overflow padding (px):</span>
           <label class="flex items-center space-x-1">
             <input
@@ -450,7 +450,7 @@ export default {
           </template>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Arrow overflow:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -466,7 +466,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Flip:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -482,7 +482,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Shift:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -498,7 +498,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Shift cross axis:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -514,7 +514,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Auto size:</span>
           <label
             v-for="value of [undefined, true, false, 'min', 'max']"
@@ -530,7 +530,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Auto boundary max size:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -548,7 +548,7 @@ export default {
       </template>
 
       <template v-if="tab === 'directive'">
-        <div class="flex space-x-3 hover:bg-gray-50 p-2">
+        <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Allow HTML content:</span>
           <label
             v-for="value of [undefined, true, false]"
@@ -564,7 +564,7 @@ export default {
           </label>
         </div>
 
-        <div class="flex space-x-1 hover:bg-gray-50 p-2">
+        <div class="flex space-x-1 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
           <span>Loading placeholder content:</span>
           <label class="flex items-center space-x-1">
             <input
@@ -576,7 +576,7 @@ export default {
           <input
             v-if="!inheritLoadingContent"
             v-model="theme.config.loadingContent"
-            class="w-0 flex-1 border border-gray-300 rounded px-1"
+            class="w-0 flex-1 border border-gray-300 dark:border-gray-700 rounded px-1"
           >
         </div>
       </template>

diff --git a/docs/.vitepress/components/theme-editor/CreateTheme.vue b/docs/.vitepress/components/theme-editor/CreateTheme.vue
@@ -47,7 +47,7 @@ export default {
 
 <template>
   <ThemeModal>
-    <div class="text-lg border-b border-gray-100">
+    <div class="text-lg border-b border-gray-100 dark:border-gray-800">
       Create theme
     </div>
 

diff --git a/docs/.vitepress/components/theme-editor/Sandbox.vue b/docs/.vitepress/components/theme-editor/Sandbox.vue
@@ -52,7 +52,7 @@ export default {
       [settings.darkClass]: settings.darkMode,
     }"
   >
-    <div class="flex-none border-b border-gray-100 p-1 flex items-center space-x-2 overflow-x-auto">
+    <div class="flex-none border-b border-gray-100 dark:border-gray-800 p-1 flex items-center space-x-2 overflow-x-auto">
       <span>Shown:</span>
       <label
         v-for="n in 3"

diff --git a/docs/.vitepress/components/theme-editor/StyleEditor.vue b/docs/.vitepress/components/theme-editor/StyleEditor.vue
@@ -84,7 +84,7 @@ export default {
 
 <template>
   <div class="overflow-hidden flex flex-col items-stretch">
-    <div class="flex items-center border-b border-gray-100">
+    <div class="flex items-center border-b border-gray-100 dark:border-gray-800">
       <div class="flex-1 flex items-center p-2 text-gray-500">
         <PenToolIcon class="w-4 h-4 mr-2" />
         Style
@@ -103,7 +103,7 @@ export default {
       v-if="currentStyle"
       class="flex-1 overflow-auto flex flex-col items-stretch"
     >
-      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+      <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
         <label for="backgroundColor">Background color:</label>
         <label class="flex items-center space-x-1">
           <input
@@ -132,7 +132,7 @@ export default {
         </template>
       </div>
 
-      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+      <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
         <label for="backgroundColor">Text color:</label>
         <label class="flex items-center space-x-1">
           <input
@@ -161,7 +161,7 @@ export default {
         </template>
       </div>
 
-      <div class="hover:bg-gray-50 p-2 space-y-2">
+      <div class="hover:bg-gray-50 dark:hover:bg-gray-800 p-2 space-y-2">
         <div class="flex space-x-3">
           <label for="backgroundColor">Padding:</label>
           <label class="flex items-center space-x-1">
@@ -279,7 +279,7 @@ export default {
         </div>
       </div>
 
-      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+      <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
         <label for="backgroundColor">Border:</label>
         <label class="flex items-center space-x-1">
           <input
@@ -305,7 +305,7 @@ export default {
         </template>
       </div>
 
-      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+      <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
         <label for="backgroundColor">Border radius:</label>
         <label class="flex items-center space-x-1">
           <input
@@ -330,7 +330,7 @@ export default {
         </template>
       </div>
 
-      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+      <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
         <label for="backgroundColor">Drop shadow:</label>
         <label class="flex items-center space-x-1">
           <input
@@ -392,7 +392,7 @@ export default {
         </template>
       </div>
 
-      <div class="flex space-x-3 hover:bg-gray-50 p-2">
+      <div class="flex space-x-3 hover:bg-gray-50 dark:hover:bg-gray-800 p-2">
         <label for="backgroundColor">Arrow:</label>
         <label class="flex items-center space-x-1">
           <input

diff --git a/docs/.vitepress/components/theme-editor/Tabs.vue b/docs/.vitepress/components/theme-editor/Tabs.vue
@@ -1,22 +1,30 @@
-<script>
-export default {
-  props: [
-    'value',
-    'tabs',
-  ],
+<script lang="ts" setup>
+export interface Tab {
+  id: string
+  label: string
+  icon?: string
 }
+
+defineProps<{
+  modelValue: string
+  tabs: Tab[]
+}>()
+
+defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
 </script>
 
 <template>
-  <div class="flex-none flex">
+  <div class="flex-none flex dark:text-gray-200">
     <button
       v-for="(tab, index) in tabs"
       :key="index"
-      class="px-3 py-2 relative hover:bg-green-100 flex items-center"
+      class="px-3 py-2 relative hover:bg-green-100 dark:hover:bg-green-900 flex items-center"
       :class="{
-        'text-green-500 font-medium': value === tab.id,
+        'text-green-500 font-medium': modelValue === tab.id,
       }"
-      @click="$emit('input', tab.id)"
+      @click="$emit('update:modelValue', tab.id)"
     >
       <component
         :is="tab.icon"
@@ -29,7 +37,7 @@ export default {
       </slot>
 
       <div
-        v-if="value === tab.id"
+        v-if="modelValue === tab.id"
         class="absolute bottom-0 left-0 w-full border-b-2 border-green-500"
       />
     </button>