@mixd-id/web-scaffold 0.1.250801002 → 0.1.250801003

package/package.json

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

package/src/components/MarkdownEdit.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col divide-y divide-text-50 relative">
+	<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>
@@ -27,7 +27,7 @@
       </button>
     </div>
 
-    <textarea ref="textarea" class="flex-1 outline-none p-6 bg-transparent" :value="modelValue" />
+    <textarea ref="textarea" class="flex-1 outline-none p-6 bg-transparent" :value="modelValue" @keyup="keyUp" />
 	</div>
 </template>
 
@@ -108,6 +108,10 @@ export default{
       this.$emit('update:modelValue', this.modelValue + content)
     },
 
+    keyUp(event){
+      this.$emit('update:modelValue', event.target.value)
+    }
+
   }
 
 }
@@ -117,7 +121,8 @@ export default{
 <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/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>

package/src/index.js

@@ -635,6 +635,7 @@ export default{
     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")))
   }
 
 }