@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/components/ListContextMenu.vue

@@ -0,0 +1,88 @@
+<template>
+  <ContextMenu ref="contextMenu" class="mt-1">
+    <div class="flex flex-col min-w-[200px]">
+
+      <div class="p-1 sticky top-0 bg-base-500" @click.stop>
+        <Textbox :clearable="true" @clear="search = ''" placeholder="Search or add..." v-model="search" />
+      </div>
+
+      <button v-if="viewedItems.length > 0" v-for="text in viewedItems" class="w-full p-3 text-left flex flex-row menu-item"
+              @click="select(text)">
+        {{ text }}
+      </button>
+
+      <button v-else-if="search.length > 0" type="button" class="w-full p-3 text-primary" @click="add(search)">
+        Tambah {{ search }}
+      </button>
+
+    </div>
+  </ContextMenu>
+</template>
+
+<script>
+import ContextMenu from "./ContextMenu.vue";
+
+export default{
+  components: {ContextMenu},
+
+  emits: [ 'select' ],
+
+  props: {
+    items: Array
+  },
+
+  computed: {
+
+    viewedItems(){
+      return (this.items ?? [])
+        .filter(text => {
+          return text.toLowerCase().includes(this.search.toLowerCase())
+        })
+        .sort((a, b) => {
+          return a.toLowerCase().localeCompare(b.toLowerCase())
+        })
+    }
+
+  },
+
+  data(){
+    return {
+      search: '',
+      cb: null
+    }
+  },
+
+  methods: {
+
+    add(text){
+      if(`${text}`.length < 1) return
+
+      this.items.push(text)
+      this.select(text)
+    },
+
+    select(text){
+      this.$emit('select', text)
+      if(typeof this.cb === 'function')
+        this.cb(text)
+    },
+
+    open(caller, cb){
+      this.search = ''
+      this.cb = cb
+      this.$refs.contextMenu.open(caller)
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/ListItem.vue

@@ -15,7 +15,6 @@ export default{
 
 	props: {
 		items: [ Array, Object ],
-		bodyClass: String,
 		containerClass: String,
 	},
 
@@ -24,7 +23,7 @@ export default{
   computed: {
 
     computedContainerClass(){
-      return this.containerClass ?? this.bodyClass
+      return this.containerClass ?? this.$style.container
     }
 
   },
@@ -117,7 +116,7 @@ export default{
           this.$el.querySelectorAll('[data-reorder]').forEach((comp) => {
             if(comp.closest(`.${this.$style.comp}`) === this.$el){
               comp.addEventListener('mousedown', this.onDrag)
-              comp.addEventListener('touchstart', this.onDrag)
+              comp.addEventListener('touchstart', this.onDrag, { passive:true })
             }
           })
         }
@@ -144,13 +143,16 @@ export default{
 <style module>
 
 .comp{
-  @apply bg-base-500;
 }
 
 .comp .dragover{
 	@apply opacity-50
 }
 
+.container{
+  @apply flex flex-col gap-1;
+}
+
 .comp [data-reorder]{
   @apply cursor-move;
 }

package/src/components/ListPage1.vue

@@ -29,7 +29,7 @@
 				</div>
 				<div :class="$style.optArea">
 					<Dropdown class="w-[150px]" :value="preset.name" mode="custom" position="bottom-right">
-						<div class="min-w-[240px] divide-y divide-text-50 p-2 flex flex-col gap-2">
+						<div class="min-w-[240px] divide-y divide-border-50 p-2 flex flex-col gap-2">
 							<div v-for="(_preset, idx) in configs.presets" class="cursor-pointer flex flex-row hover:bg-primary-100 rounded-md">
 								<div class="flex-1 p-3" @click="selectPreset(_preset)">
 									{{ _preset.name }}
@@ -37,14 +37,14 @@
 							</div>
 						</div>
 					</Dropdown>
-					<button class="border-[1px] border-text-200 bg-base-50 hover:border-text-300 rounded-lg p-3"
+					<button class="border-[1px] border-border-200 bg-base-300 hover:border-border-300 rounded-lg p-3"
 									@click="openPreset(presetIdx)">
 						<svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="fill-text-300 hover:fill-primary"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 256V160H224v96H64zm0 64H224v96H64V320zm224 96V320H448v96H288zM448 256H288V160H448v96zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>
 					</button>
 				</div>
 			</div>
 
-			<div class="flex-1 mb-4 flex flex-col bg-base-500 border-text-50 border-[1px] relative" v-if="presetSummary && !isLoading">
+			<div class="flex-1 mb-4 flex flex-col bg-base-500 border-border-50 border-[1px] relative" v-if="presetSummary && !isLoading">
 				<div v-if="isSummaryLoading" :class="$style.overlay">
 					<svg class="animate-spin aspect-square w-[48px] h-[48px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 				</div>
@@ -140,7 +140,7 @@
 				</div>
 			</ContextMenu>
 
-			<div v-if="count > 0 && !summaryTeleport" class="flex flex-row bg-base-500 divide-x divide-text-50 border-[1px] border-text-50">
+			<div v-if="count > 0 && !summaryTeleport" class="flex flex-row bg-base-500 divide-x divide-border-50 border-[1px] border-border-50">
 				<div class="p-2 px-3 text-text-400">
 					Count: {{ count }}
 				</div>
@@ -154,7 +154,7 @@
 
 		</div>
 
-		<div v-if="configs.presetOpen" class="w-[360px] border-l-[1px] border-text-50 bg-base-500 flex flex-col">
+		<div v-if="configs.presetOpen" class="w-[360px] border-l-[1px] border-border-50 bg-base-500 flex flex-col">
 
 			<div v-if="configs.presetOpenIdx === -1" class="flex-1 flex flex-col">
 
@@ -163,9 +163,9 @@
 					<br />
 				</div>
 
-				<div class="flex-1 overflow-y-auto border-t-[1px] border-text-50">
+				<div class="flex-1 overflow-y-auto border-t-[1px] border-border-50">
 					<div v-for="(preset, idx) in configs.presets"
-							 class="px-6 py-3 flex flex-row gap-2 items-center border-b-[1px] border-text-50 hover:bg-text-50 cursor-pointer">
+							 class="px-6 py-3 flex flex-row gap-2 items-center border-b-[1px] border-border-50 hover:bg-text-50 cursor-pointer">
 						<div class="px-2">
 							<Checkbox :checked="idx === configs.presetIdx" @change="selectPreset(preset)" />
 						</div>
@@ -294,7 +294,7 @@
 
 						<div v-if="configs.summaryOpenIdx === -1">
 							<div v-for="(summary, idx) in preset.summaries">
-								<div class="flex flex-row items-center gap-3 border-text-50 border-[1px] p-2 rounded-lg">
+								<div class="flex flex-row items-center gap-3 border-border-50 border-[1px] p-2 rounded-lg">
 									<div class="px-2">
 										<Checkbox v-model="summary.enabled" @change="enableSummary(idx)" />
 									</div>
@@ -555,8 +555,7 @@
 
 import throttle from "lodash/throttle";
 import {urlQuery} from "../utils/helpers.mjs";
-import { Bar, Line } from 'vue-chartjs'
-import Chart from 'chart.js/auto'
+import {Bar, Line} from 'vue-chartjs'
 import dayjs from "dayjs";
 import VirtualTable from "./VirtualTable.vue";
 
@@ -618,7 +617,7 @@ export default{
 		presetAppearances(){
 			return this.preset.appearances ?? {}
 		},
-		
+
 		presetSortedColumns(){
 			const c = {};
 			(this.preset.sorts ?? []).forEach((_) => c[_.key] = _.type);
@@ -630,7 +629,7 @@ export default{
 			return this.preset.filters.filter((_) => _.key === this.selectedColumn)
 		},
 
-		
+
 		computedDataSource(){
 			return this.datasource ?? this.model
 		},
@@ -640,7 +639,7 @@ export default{
 				this.presetSummary.title :
 				this.title
 		},
-		
+
 
 		headerSlots(){
 			const slots = {}
@@ -1387,10 +1386,10 @@ export default{
 	}
 
 	.vscroll{
-		@apply flex-1 flex border-t-[1px] border-b-[1px] border-text-50;
+		@apply flex-1 flex border-t-[1px] border-b-[1px] border-border-50;
 	}
 	.vscroll>*>*{
-		@apply bg-base-500 divide-y divide-text-50;
+		@apply bg-base-500 divide-y divide-border-50;
 	}
 
 	.optArea{

package/src/components/ListView.vue

@@ -21,7 +21,7 @@
 								<h4 class="flex-1">Select Preset</h4>
 								<button type="button" class="text-primary" @click="openPreset">Settings</button>
 							</div>
-							<div class="border-text-50 border-[1px] divide-y divide-text-50 bg-base-400 rounded-lg overflow-hidden">
+							<div class="border-border-50 border-[1px] divide-y divide-border-50 bg-base-400 rounded-lg overflow-hidden">
 								<button type="button" v-for="(preset, idx) in config.presets"
 												class="p-3 text-left hover:bg-primary hover:text-white block w-full"
 												@click="selectPreset(idx)">
@@ -45,7 +45,7 @@
 								</div>
 							</template>
 							<template #foot>
-								<div class="p-6 py-4 border-t-[1px] border-text-50">
+								<div class="p-6 py-4 border-t-[1px] border-border-50">
 									<Button class="w-full md:w-[90px]" @click="applyPreset">Apply</Button>
 								</div>
 							</template>
@@ -77,7 +77,7 @@
 				</div>
 			</div>
 
-			<div v-if="$device.media === ''" class="px-6 pb-4 border-b-[1px] border-text-50 bg-base-400 dark:bg-base-300">
+			<div v-if="$device.media === ''" class="px-6 pb-4 border-b-[1px] border-border-50 bg-base-400 dark:bg-base-300">
 				<Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
 								 @keyup.enter="load" :class="$style.searchBox2">
 					<template #start>
@@ -209,8 +209,7 @@
 <script>
 
 import throttle from "lodash/throttle";
-import { Bar, Line } from 'vue-chartjs'
-import Chart from 'chart.js/auto'
+import {Bar, Line} from 'vue-chartjs'
 import dayjs from "dayjs";
 
 export default{
@@ -956,7 +955,7 @@ export default{
 }
 
 .mobileItem{
-	@apply p-3 border-[1px] border-text-100 bg-base-300 rounded-lg;
+	@apply p-3 border-[1px] border-border-100 bg-base-300 rounded-lg;
 }
 
 </style>

package/src/components/ListViewSettings.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="styleComp">
-    <div class="border-r-[1px] border-text-50 bg-base-400">
+    <div class="border-r-[1px] border-border-50 bg-base-400">
 
       <div class="p-6 flex flex-row">
         <h3 class="md:flex-1">Presets</h3>
@@ -152,7 +152,7 @@
 
           <div v-if="config.summaryOpenIdx === -1">
 
-						<div class="border-text-50 border-[1px] rounded-lg overflow-hidden divide-y divide-text-50">
+						<div class="border-border-50 border-[1px] rounded-lg overflow-hidden divide-y divide-border-50">
 							<div v-for="(summary, idx) in preset.summaries">
 								<div class="flex flex-row items-center gap-3 px-2">
 									<div class="p-2">

package/src/components/LogViewerItem.vue

@@ -110,7 +110,7 @@ export default{
 }
 
 .container{
-  @apply ml-3 flex flex-col divide-y divide-text-50;
+  @apply ml-3 flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/components/MarkdownEdit.vue

@@ -0,0 +1,128 @@
+<template>
+	<div :class="$style.comp">
+    <div class="flex flex-row divide-x divide-border-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-border-50 relative;
+  @apply border-[1px] border-border-200 bg-base-300 hover:border-border-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-border-50;
+}
+.comp hr{
+  @apply border-border-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/MenuItem1.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="$style.comp">
+
+    <div v-for="obj in menu" :class="$style.rootMenu">
+      {{ obj.text }}
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+import {defineComponent} from "vue";
+import {componentMixin} from "../mixin/component";
+
+defineComponent({
+  mixins: [componentMixin],
+});
+
+const { menu } = defineProps({
+  menu: Array
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-row gap-2;
+}
+
+.rootMenu{
+  @apply p-3;
+}
+
+</style>