@mixd-id/web-scaffold 0.1.250801001 → 0.1.250801003

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.250801001",
+  "version": "0.1.250801003",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Alert.vue

@@ -204,7 +204,7 @@ export default{
 }
 
 .alert>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
+	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
 	@apply border-[1px] border-text-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }

package/src/components/Confirm.vue

@@ -122,7 +122,7 @@ export default{
 }
 
 .confirm>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-300 rounded-xl;
+	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
 	@apply border-[1px] border-text-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }

package/src/components/ContextMenu.vue

@@ -241,8 +241,8 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed bg-base-400 min-w-[150px] overflow-y-auto;
-	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-100 mt-[1px];
+	@apply fixed bg-base-400 dark:bg-base-300 min-w-[150px] overflow-y-auto rounded-lg;
+	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-50 mt-[1px];
   z-index: 180;
 }
 

package/src/components/Dropdown.vue

@@ -161,7 +161,7 @@ export default {
 
 .dropdown{
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-400;
+	@apply border-[1px] border-text-200 bg-base-300;
 }
 .dropdown:not(.readonly){
 	@apply hover:border-text-300;

package/src/components/HTMLEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="overflow-x-auto bg-text-50" :class="containerClass" v-if="!readonly">
+		<div class="overflow-x-auto bg-base-400" :class="containerClass" v-if="!readonly">
 			<div class="flex flex-row">
 				<button class="p-3" type="button" @click="format('bold')">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
@@ -30,7 +30,7 @@
 				<button class="p-3" type="button" @click="removeFormat">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
 				</button>
-				<button @click="createTable">Table</button>
+				<button @click="createTable" class="text-text-400">Table</button>
 			</div>
 		</div>
 
@@ -382,6 +382,7 @@ export default{
 	</tr>
 </table>`);
 
+      this.$refs.tableModal.close()
 		},
 
 		removeFormat(){
@@ -553,11 +554,11 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col border-[1px] border-text-200 rounded-lg;
+	@apply flex-1 flex flex-col border-[1px] border-text-200 rounded-lg overflow-hidden;
 }
 
 .comp article {
-	@apply min-h-[var(--h-cp)] w-full outline-none p-2 leading-6;
+	@apply min-h-[var(--h-cp)] w-full outline-none p-3 leading-6 bg-base-300;
 	@apply flex-1 overflow-auto;
 }
 

package/src/components/List.vue

@@ -88,14 +88,17 @@
               </div>
 
               <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
-                <Textbox v-if="canSearch" class="flex-1 md:w-[240px]" placeholder="Search..." clearable="1"
+                <Textbox v-if="canSearch"
+                         class="flex-1 md:w-[240px] bg-base-400 border-text-50"
+                         placeholder="Search..."
+                         clearable="1"
                          maxlength="100"
                          v-model="preset.search"
                          @clear="delete preset.search; load()"
                          @keyup.enter="load">
                   <template #start>
                     <div class="p-2 pr-0">
-                      <svg width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
+                      <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
                     </div>
                   </template>
                 </Textbox>

package/src/components/MarkdownEdit.vue

@@ -0,0 +1,128 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row divide-x divide-text-50 px-3">
+      <button type="button" class="p-3" @click="addMarkdown('table')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('unordered-list')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M48 208C21.49 208 0 229.5 0 256s21.49 48 48 48S96 282.5 96 256S74.51 208 48 208zM48 368C21.49 368 0 389.5 0 416s21.49 48 48 48S96 442.5 96 416S74.51 368 48 368zM48 48C21.49 48 0 69.49 0 96s21.49 48 48 48S96 122.5 96 96S74.51 48 48 48zM192 128h288c17.67 0 32-14.33 32-31.1S497.7 64 480 64H192C174.3 64 160 78.33 160 95.1S174.3 128 192 128zM480 224H192C174.3 224 160 238.3 160 256s14.33 32 32 32h288c17.67 0 32-14.33 32-32S497.7 224 480 224zM480 384H192c-17.67 0-32 14.33-32 32s14.33 32 32 32h288c17.67 0 32-14.33 32-32S497.7 384 480 384z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('ordered-list')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 224H224C206.3 224 192 238.3 192 256s14.33 32 32 32h256c17.67 0 32-14.33 32-32S497.7 224 480 224zM224 128h256c17.67 0 32-14.33 32-32s-14.33-32-32-32H224C206.3 64 192 78.33 192 96S206.3 128 224 128zM480 384H224c-17.67 0-32 14.33-32 32s14.33 32 32 32h256c17.67 0 32-14.33 32-32S497.7 384 480 384zM40 224h80C133.3 224 144 213.3 144 199.1s-10.75-24-24-24h-16V55.99c0-8.594-4.594-16.53-12.06-20.81C84.5 30.91 75.28 30.95 67.91 35.25l-32 18.67C24.47 60.61 20.59 75.3 27.28 86.75C33.13 96.85 45.31 101.1 56 97.29v78.71h-16c-13.25 0-24 10.75-24 24S26.75 224 40 224zM136.3 432h-49.44l36.4-32.48c29.92-25.83 33.54-71.36 8.049-101.5C118.6 282.1 100.7 273.8 80.89 272.2C61.27 270.7 41.93 276.9 26.92 289.9L14.42 300.7c-10.04 8.656-11.17 23.81-2.527 33.86c8.672 10.06 23.8 11.14 33.78 2.516l12.51-10.79c5.24-4.531 12.1-6.672 18.96-6.156c6.926 .5469 13.2 3.734 17.62 8.969c8.703 10.28 7.486 25.26-3.057 34.36l-83.7 74.67c-7.424 6.625-9.982 17.16-6.457 26.47C5.119 473.8 14.01 480 23.96 480h112.4c13.23 0 23.96-10.75 23.96-23.1C160.3 442.8 149.5 432 136.3 432z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('bold')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M321.1 242.4C340.1 220.1 352 191.6 352 160c0-70.59-57.42-128-128-128L32 32.01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128C384 305.3 358.6 264.8 321.1 242.4zM112 96.01H224c35.3 0 64 28.72 64 64s-28.7 64-64 64H112V96.01zM256 416H112v-128H256c35.3 0 64 28.71 64 63.1S291.3 416 256 416z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('italic')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192C369.7 32.01 384 46.33 384 64.01z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('heading1')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M544 384h-32v-288c0-11.09-5.75-21.38-15.17-27.22c-9.438-5.844-21.23-6.344-31.14-1.406l-64 32c-15.81 7.906-22.22 27.12-14.31 42.94c7.906 15.78 27.09 22.16 42.94 14.31L448 147.8v236.2h-32c-17.67 0-32 14.31-32 32s14.33 32 32 32h128c17.67 0 32-14.31 32-32S561.7 384 544 384zM288 64.01c-17.67 0-32 14.31-32 32v128H64v-128c0-17.69-14.33-32-32-32s-32 14.31-32 32v320c0 17.69 14.33 32 32 32s32-14.31 32-32v-128h192v128c0 17.69 14.33 32 32 32s32-14.31 32-32v-320C320 78.33 305.7 64.01 288 64.01z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('heading2')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M608 384h-126l100.4-92.5c51.84-47.75 56.81-127.3 11.3-181.2c-22.75-26.94-54.64-43.28-89.8-46.09c-35.09-2.938-69.25 8.344-95.97 31.38l-25.09 21.59c-13.39 11.53-14.91 31.72-3.375 45.13c11.55 13.38 31.72 14.94 45.13 3.375l25.09-21.59c13.69-11.78 31.05-17.66 49.16-16.06c18 1.438 34.33 9.812 45.98 23.59c23.31 27.56 20.77 68.34-5.781 92.81l-160.7 148c-9.703 8.938-12.94 22.88-8.141 35.16S386.8 448 400 448H608c17.67 0 32-14.31 32-32S625.7 384 608 384zM288 64.01c-17.67 0-32 14.31-32 32v128H64v-128c0-17.69-14.33-32-32-32s-32 14.31-32 32v320c0 17.69 14.33 32 32 32s32-14.31 32-32v-128h192v128c0 17.69 14.33 32 32 32s32-14.31 32-32v-320C320 78.33 305.7 64.01 288 64.01z"/></svg>
+      </button>
+      <button type="button" class="p-3" @click="addMarkdown('heading3')">
+        <svg width="13" height="13" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M523.9 211.7l91.03-93.38c8.984-9.219 11.58-22.91 6.578-34.78C616.5 71.73 604.9 64.01 592 64.01l-192-.0778c-17.67 0-32 14.39-32 32.08s14.33 32 32 32h116.1l-91.02 93.34c-8.984 9.219-11.58 22.91-6.578 34.78C423.5 267.1 435.1 275.7 448 275.7h73.84C551.7 275.7 576 299.1 576 329.9s-24.3 54.16-54.16 54.16h-62.53c-13.16 0-24.8-8.375-28.95-20.88c-5.578-16.75-23.69-25.88-40.48-20.22c-16.77 5.594-25.83 23.72-20.23 40.47c12.89 38.66 48.94 64.63 89.67 64.63h62.53C587 448 640 395 640 329.9C640 265.4 588.1 212.8 523.9 211.7zM288 64.01c-17.67 0-32 14.31-32 32v128H64v-128c0-17.69-14.33-32-32-32s-32 14.31-32 32v320c0 17.69 14.33 32 32 32s32-14.31 32-32v-128h192v128c0 17.69 14.33 32 32 32s32-14.31 32-32v-320C320 78.33 305.7 64.01 288 64.01z"/></svg>
+      </button>
+    </div>
+
+    <textarea ref="textarea" class="flex-1 outline-none p-6 bg-transparent" :value="modelValue" @keyup="keyUp" />
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  props: {
+
+    modelValue: String
+
+  },
+
+  methods: {
+
+    addMarkdown(type){
+      let content = ''
+
+      switch(type){
+
+        case 'table':
+          content = `| Header 1 | Header 2 |\n| -------- | -------- |\n| Cell 1  | Cell 2  |\n| Cell 3  | Cell 4  |\n`;
+          break;
+
+        case 'unordered-list':
+          content = `- Item 1\n- Item 2\n- Item 3\n`;
+          break;
+
+        case 'ordered-list':
+          content = `1. Item 1\n2. Item 2\n3. Item 3\n`;
+          break;
+
+        case 'bold':
+          content = `**Bold Text**`;
+          break;
+
+        case 'italic':
+          content = `*Italic Text*`;
+          break;
+
+        case 'heading1':
+          content = `# Heading 1\n`;
+          break;
+
+        case 'heading2':
+          content = `## Heading 2\n`;
+          break;
+
+        case 'heading3':
+          content = `### Heading 3\n`;
+          break;
+
+        case 'line':
+          content = `---\n`;
+          break;
+
+        case 'component-template-1':
+          content = `#### ⏰ TLDR;
+\`\`\`html
+
+\`\`\`
+
+\`\`\`javascript
+
+\`\`\`
+---
+### Properties
+| Key | Type | Required | Remark |
+| -------- | -------- | -------- | -------- |
+### Events
+| Event | Arguments | Remark |
+| -------- | -------- | -------- |
+`
+          break
+
+      }
+
+      this.$emit('update:modelValue', this.modelValue + content)
+    },
+
+    keyUp(event){
+      this.$emit('update:modelValue', event.target.value)
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex flex-col divide-y divide-text-50 relative;
+  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
+}
+
+</style>

package/src/components/MarkdownPreview.vue

@@ -0,0 +1,102 @@
+<template>
+  <article v-html="markedText" :class="$style.comp" />
+</template>
+
+<script setup>
+
+import { computed } from "vue";
+import {marked} from "marked";
+
+const { modelValue } = defineProps({
+  modelValue: String
+})
+
+const renderer = new marked.Renderer();
+
+renderer.image = function(args) {
+  const { href, title, text, tokens } = args
+
+  if (/\.(mp4|webm|ogg)$/i.test(href)) {
+    return `
+<video controls style="max-width:100%;">
+  <source src="${href}" type="video/${href.split('.').pop()}">
+  Your browser does not support the video tag.
+</video>`;
+  }
+
+  return marked.Renderer.prototype.image.call(this, args);
+};
+
+marked.setOptions({
+  highlight: function (code, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(code, { language: lang }).value
+    }
+    return hljs.highlightAuto(code).value
+  },
+  langPrefix: 'hljs language-',
+  gfm: true,
+  breaks: true,
+})
+
+marked.setOptions({ renderer });
+
+const markedText = computed(() => {
+  return marked.parse(modelValue)
+})
+
+</script>
+
+<style module>
+
+.comp{
+  @apply p-6 bg-base-300 overflow-y-auto;
+}
+.comp>*{
+  @apply mb-2;
+}
+.comp>h1, .comp>h2, .comp>h3, .comp>h4, .comp>h5, .comp>h6{
+  @apply mb-6;
+}
+.comp>* + h1, .comp>* + h2, .comp>* + h3, .comp>* + h4, .comp>* + h5, .comp>* + h6{
+  @apply mt-8;
+}
+.comp>hr{
+  @apply mt-0 mb-4;
+}
+.comp ol, .comp ul{
+  @apply ml-8;
+}
+.comp ol{
+  @apply list-decimal;
+}
+.comp ul{
+  @apply list-disc;
+}
+.comp strong, .comp label, .comp p, .comp li{
+  @apply text-lg;
+}
+.comp table{
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.comp th{
+  @apply text-left;
+}
+.comp th, .comp td{
+  @apply p-2 px-5 border-[1px] border-text-50;
+}
+.comp hr{
+  @apply border-text-200 my-4;
+}
+.comp pre{
+  @apply rounded-2xl overflow-hidden;
+}
+.comp code{
+  @apply !bg-primary-100 p-1 text-sm;
+}
+.comp code *{
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+
+</style>

package/src/components/Modal.vue

@@ -358,7 +358,7 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply bg-base-300 w-full;
+	@apply bg-base-400 dark:bg-base-300 w-full;
 	@apply border-[1px] border-text-50 flex max-h-[90vh] max-w-full;
 	@apply rounded-xl overflow-hidden transition-all;
   z-index: 101;

package/src/components/MultilineText.vue

@@ -137,7 +137,7 @@ export default{
 <style module>
 
 .textarea{
-	@apply flex items-start border-[1px] border-text-200 bg-base-300 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-text-200 bg-base-400 rounded-lg overflow-hidden;
 }
 .textarea textarea{
 	@apply flex-1 outline-none p-2 bg-transparent resize-none;

package/src/components/Textbox.vue

@@ -182,7 +182,7 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 bg-base-400 hover:border-text-300 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
 	@apply overflow-hidden;
 }
 .textbox.active{

package/src/components/TreeView2.vue

@@ -1,11 +1,12 @@
 <template>
   <div :class="$style.comp">
 
-    <TreeViewItem2 v-for="item in items"
+    <TreeViewItem2 v-for="(item, index) in items"
                    :item="item"
+                   :index="index"
                    :container-class="containerClass">
-      <template #default="{ item }">
-        <slot :item="item"></slot>
+      <template #default="{ item, index }">
+        <slot :item="item" :index="index"></slot>
       </template>
     </TreeViewItem2>
 

package/src/components/TreeViewItem2.vue

@@ -1,18 +1,20 @@
 <template>
   <div :class="$style.comp">
 
-    <slot name="default" :item="item">
+    <slot name="default" :item="item" :index="index">
       <div :class="$style.item">
         <label>{{ item.title }}</label>
       </div>
     </slot>
 
-    <div v-if="(item.items ?? []).length > 0" :class="containerClass ?? $style.subitems">
-      <TreeViewItem2 v-for="subItem in item.items"
+    <div v-if="(item.items ?? []).length > 0"
+         :class="containerClass ?? $style.subitems">
+      <TreeViewItem2 v-for="(subItem, index) in item.items"
                      :item="subItem"
+                     :index="index"
                      :container-class="containerClass">
-        <template #default="{ item }">
-          <slot :item="item"></slot>
+        <template #default="{ item, index }">
+          <slot :item="item" :index="index"></slot>
         </template>
       </TreeViewItem2>
     </div>
@@ -26,7 +28,9 @@ const { } = defineProps({
 
   containerClass: String,
 
-  item: Object
+  item: Object,
+
+  index: Number
 })
 
 </script>
@@ -38,7 +42,7 @@ const { } = defineProps({
 }
 
 .item{
-  @apply bg-text-50 hover:bg-text-100;
+  @apply bg-base-400 hover:bg-base-500;
 }
 
 .subitems {

package/src/components/VirtualTable.vue

@@ -898,11 +898,11 @@ export default{
 }
 
 .table tbody tr.trHover{
-  @apply bg-base-500;
+  @apply bg-text-50;
 }
 
 .table tbody tr.trSelected{
-	@apply bg-primary-50;
+	@apply bg-text-100;
 }
 
 .highlight{

package/src/index.js

@@ -634,6 +634,8 @@ export default{
     app.component('Checkout', defineAsyncComponent(() => import("./components/Checkout.vue")))
     app.component('CheckoutSetting', defineAsyncComponent(() => import("./widgets/CheckoutSetting.vue")))
     app.component('TreeMenu', defineAsyncComponent(() => import("./components/TreeMenu.vue")))
+    app.component('MarkdownEdit', defineAsyncComponent(() => import("./components/MarkdownEdit.vue")))
+    app.component('MarkdownPreview', defineAsyncComponent(() => import("./components/MarkdownPreview.vue")))
   }
 
 }

package/src/themes/default/index.js

@@ -22,8 +22,8 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '--base-500': '255, 255, 255',
       '--base': '255, 255, 255',
 
-      "--text-50": '232, 232, 232',
-      "--text-100": '223, 223, 223',
+      "--text-50": '233, 233, 233',
+      "--text-100": '226, 226, 226',
       "--text-200": '217, 217, 217',
       "--text-300": '176, 176, 176',
       "--text-400": '116, 116, 116',
@@ -64,13 +64,13 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
     'html[data-theme="dark"], .html[data-theme="dark"]': {
 
       "--base-300": '12, 13, 14',
-      "--base-400": '33, 33, 33',
-      "--base-500": '48, 48, 48',
+      "--base-400": '17, 21, 28',
+      "--base-500": '27, 31, 39',
 
-      "--text-50": '56, 56, 56',
-      "--text-100": '67, 67, 67',
-      "--text-200": '78, 78, 78',
-      "--text-300": '89, 89, 89',
+      "--text-50": '28, 34, 41',
+      "--text-100": '36, 40, 47',
+      "--text-200": '65, 67, 69',
+      "--text-300": '81, 82, 83',
       "--text-500": '234, 234, 236',
       "--text": '234, 234, 236',
 

package/src/widgets/PresetBar.vue

@@ -158,7 +158,7 @@
           <slot name="toolbar" :edit="true"></slot>
         </div>
 
-        <div class="flex items-center justify-center border-b-[1px] border-text-100 px-3">
+        <div class="flex items-center justify-center border-b-[1px] border-text-50 px-3">
           <Tabs :items="tabItems[config.type ?? 'list']" v-model="configParams.presetBarTabIndex" />
         </div>