@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/components/TableViewHead.vue

@@ -123,7 +123,7 @@ export default{
 <style module>
 
 .comp{
-	@apply hidden md:block bg-base;
+	@apply hidden md:block;
 }
 .comp.mobileView{
 	@apply hidden
@@ -136,7 +136,7 @@ export default{
 }
 
 .comp tbody td{
-	@apply bg-base relative border-r-[1px] border-text-50;
+	@apply bg-base relative border-r-[1px] border-border-50;
 	vertical-align: top;
 }
 

package/src/components/Tabs.vue

@@ -83,7 +83,7 @@ export default{
 }
 .comp>*{
 	@apply border-b-[2px] border-transparent;
-	@apply p-2;
+	@apply p-2 px-3;
 }
 .comp>*[class*="active"]{
 	@apply border-b-[2px] border-primary;

package/src/components/Testimonial.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.comp">
+	<div :class="$style.comp" :style="computedStyle">
 		<div :class="$style.head">
 			<h2 v-if="title">{{ title }}</h2>
 			<p v-if="description" v-html="description"></p>
@@ -32,7 +32,7 @@
 
 <script>
 
-import { componentMixin } from '../mixin/component';
+import {componentMixin} from '../mixin/component';
 import dayjs from "dayjs";
 
 export default{

package/src/components/Text.vue

@@ -1,38 +1,26 @@
 <template>
-	<div v-html="html" :class="$style.comp"></div>
+	<component :is="tag" v-html="htmlText2[$device.mediaIndex]"></component>
 </template>
 
 <script>
 
 import {componentMixin} from "../mixin/component";
-import {strVars} from "../utils/helpers.mjs";
 
 export default{
 
-  computed: {
-
-    html(){
-      let text = this.htmlText2[this.$device.mediaIndex]
-
-      if(this.editMode !== 'design' && this.data){
-        text = strVars(text, this.data)
-      }
-
-      return text
-    }
-
-  },
-
   mixins: [ componentMixin ],
 
   props: {
 
+    tag: {
+      type: String,
+      default: 'div'
+    },
+
     htmlText2: {
       type: Array,
       default: () => []
-    },
-
-    data: Object
+    }
 
   }
 
@@ -42,8 +30,5 @@ export default{
 
 <style module>
 
-  .comp{
-    @apply whitespace-pre-wrap;
-  }
 
 </style>

package/src/components/TextEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 		<Textbox v-model="modelValue.text" @blur="$emit('change')" class="border-none"/>
-		<div class="bg-base-300 flex flex-row gap-2 border-t-[1px] border-text-200 px-2">
+		<div class="bg-base-300 flex flex-row gap-2 border-t-[1px] border-border-200 px-2">
 			<Dropdown v-model="modelValue.tagName" size="sm" variant="transparent">
 				<option value="default">Default</option>
 				<option value="h1">Heading 1</option>
@@ -79,7 +79,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+	@apply flex flex-col border-[1px] border-border-200 bg-base-300 rounded-lg overflow-hidden;
 }
 
-</style>
+</style>

package/src/components/TextWithTag.vue

@@ -1,21 +1,23 @@
 <template>
-	<div :class="$style.comp">
-
-		<div class="flex flex-row items-start">
-      <span contenteditable="true" spellcheck="false"
-         ref="html"
-         v-html="html"
-         :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
-         @blur="saveSelection($refs.html)"
-          @paste="onPaste"
-         @input="onInput"></span>
-
-      <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
-        <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
-      </button>
+  <div :class="$style.comp" @click="log(modelValue)">
+
+    <div class="flex flex-row items-start">
+      <span :contenteditable="!readonly" spellcheck="false"
+            ref="html"
+            v-html="html"
+            :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
+            @blur="onBlur"
+            @paste="onPaste"
+            @input="onInput"></span>
+
+      <slot name="end" :comp="this">
+        <button v-if="variant === 'minimal' && !readonly" type="button" class="p-3" @click="$refs.modal.open()">
+          <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
+        </button>
+      </slot>
     </div>
 
-    <div v-if="variant !== 'minimal'" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
+    <div v-if="variant !== 'minimal' && !readonly" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
       <div class="flex-1 flex flex-row gap-2 overflow-x-auto p-1" :class="$style.noScrollbar">
         <button type="button" v-for="item in viewedItems" :class="$style.tag2" class="text-xs" @click="add(item)">{{ item.text ?? item.value }}</button>
       </div>
@@ -57,7 +59,7 @@
 
       </div>
     </Modal>
-	</div>
+  </div>
 </template>
 
 <script>
@@ -66,7 +68,7 @@ import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
-  emits: [ 'update:modelValue' ],
+  emits: [ 'blur', 'update:modelValue' ],
 
   props:{
 
@@ -76,7 +78,12 @@ export default{
 
     modelValue: String,
 
-    items: Array,
+    items: {
+      type: Array,
+      default: () => []
+    },
+
+    readonly: Boolean,
 
     variant: String,
 
@@ -118,7 +125,7 @@ export default{
 
       let range = selection.getRangeAt(0);
       if(range.commonAncestorContainer.parentNode !== this.$refs.html &&
-        range.commonAncestorContainer !== this.$refs.html) return
+          range.commonAncestorContainer !== this.$refs.html) return
 
       let currentNode = range.startContainer;
 
@@ -146,6 +153,10 @@ export default{
 
       this.insertElement(el)
       this.onInput()
+
+      const itemExists = this.items.find(_ => _.value === item.value)
+      if(!itemExists)
+        this.items.push(item)
     },
 
     add(item){
@@ -174,6 +185,11 @@ export default{
       e.target.parentNode.removeChild(e.target)
     },
 
+    onBlur(){
+      this.saveSelection(this.$refs.html)
+      this.$emit('blur')
+    },
+
     onPaste(e){
       e.preventDefault()
       const text = e.clipboardData.getData('text/plain')
@@ -205,8 +221,8 @@ export default{
 
     modelValue: {
       immediate: true,
-      handler(val){
-        if(this.isInternal){
+      handler(val) {
+        if (this.isInternal) {
           this.isInternal = false
           return
         }
@@ -214,7 +230,7 @@ export default{
         let html = val ?? ''
 
         let customItems = []
-        if(typeof this.itemFn === 'function'){
+        if (typeof this.itemFn === 'function') {
           customItems = this.itemFn(html)
         }
 
@@ -223,8 +239,23 @@ export default{
           ...customItems
         ]
 
-        for(let item of items){
-          html = html.replaceAll(item.value, `<span title="${item.value.replaceAll('"', '')}" class="${this.$style.tag}" contenteditable="false" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
+        if(items.length === 0){
+          const match = html.match(/{{(.*?)}}/g)
+
+          if(match){
+            for(let tag of match){
+              items.push({
+                text: tag.replace(/{{(.*?)}}/, '$1').trim(),
+                value: tag
+              })
+            }
+          }
+        }
+
+        for (let item of items) {
+          html = html.replaceAll(item.value, `<span title="${item.value.replaceAll('"', '')}" ` +
+            `class="${this.$style.tag}" contenteditable="false" data-value="${item.value}">` +
+            `${item.text ?? item.value}</span>`, 'gi')
         }
 
         this.html = html
@@ -239,28 +270,28 @@ export default{
 
 <style module>
 
-.comp{
-  @apply border-[1px] border-text-200 bg-base-50 rounded-lg min-w-[100px];
+.comp {
+  @apply border-[1px] border-border-200 bg-base-300 rounded-lg min-w-[100px];
   @apply flex flex-col gap-2;
   @apply overflow-hidden;
   @apply divide-y divide-text-100;
 }
 
-.content{
+.content {
   @apply flex-1 whitespace-pre-line outline-none p-2;
 }
 
-.comp .tag{
+.comp .tag {
   @apply bg-text-100 p-1 rounded-lg whitespace-nowrap relative top-[-1px];
   @apply font-mono text-sm;
 }
 
-.tag2{
+.tag2 {
   @apply bg-text-50 p-1 rounded-lg px-2 cursor-pointer whitespace-nowrap;
   @apply hover:bg-text-100 hover:text-white;
 }
 
-.noScrollbar::-webkit-scrollbar{
+.noScrollbar::-webkit-scrollbar {
   display: none;
 }
 

package/src/components/Textarea.vue

@@ -144,7 +144,7 @@ export default{
 
 .textarea{
 	@apply min-h-[var(--h-cp)];
-	@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-border-200 bg-base-400 rounded-lg overflow-hidden;
 	@apply !max-h-[200px];
 }
 .textarea textarea{
@@ -155,36 +155,31 @@ export default{
 .textarea>textarea::-webkit-scrollbar{
 	display: none;
 }
-.textarea>textarea::placeholder{
-	@apply text-text-200;
-}
 .textarea.readonly{
 	@apply bg-text-50;
 }
 
-.size-sm{ @apply min-h-[var(--h-cp-sm)]; }
-.size-sm textarea{ @apply text-sm; }
-
-.size-lg{ @apply min-h-[var(--h-cp-lg)]; }
-.size-lg textarea{ @apply text-lg p-2; }
-
-
 .active{
-	@apply border-primary
+  @apply border-primary
 }
 
 .state--2{
-	@apply border-red-500
+  @apply border-red-500
 }
 
 .align-left>input{
-	@apply text-left
+  @apply text-left
 }
 .align-center>input{
-	@apply text-center
+  @apply text-center
 }
 .align-right>input{
-	@apply text-right
+  @apply text-right
 }
 
+.size-sm textarea{ @apply text-sm; }
+
+.size-lg{ @apply min-h-[var(--h-cp-lg)]; }
+.size-lg textarea{ @apply text-lg p-2; }
+
 </style>

package/src/components/Textbox.vue

@@ -9,7 +9,7 @@
 					 :value="displayedValue" :readonly="Boolean(readonly)" @paste="onPaste"
            :class="itemClass" @click="$emit('input-click')"
 			@keydown="onKeyDown"/>
-		<button class="mr-2" v-if="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
+		<button class="mr-2" v-show="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
 			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
 				<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
 			</svg>
@@ -53,6 +53,7 @@ export default{
 
 		placeholder: String,
 		readonly: undefined,
+		disabled: undefined,
 		maxlength: {
       type: [ String, Number ],
       default: 255
@@ -72,9 +73,9 @@ export default{
 		computedClass(){
 			return [
 				this.$style.textbox,
-				this.$style['variant-' + this.variant],
 				this.$style['state-' + this.computedState],
 				this.readonly ? this.$style.readonly : '',
+				this.disabled ? this.$style.disabled : '',
 				this.isActive && !this.readonly ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
 				this.size ? this.$style['size-' + this.size] : ''
@@ -182,25 +183,18 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
+  @apply border-[1px] border-border-200 bg-base-400 hover:border-border-300 rounded-lg;
 	@apply overflow-hidden;
 }
-
-.textbox.readonly{
-	@apply bg-text-50;
+.textbox.active{
+  @apply !border-primary-600
 }
-
-.size-sm input{ @apply text-sm; }
-
-
 .textbox>input{
-	@apply flex-1 outline-none p-2 bg-transparent;
-	font-size: inherit;
+  @apply flex-1 outline-none p-2 bg-transparent;
+  font-size: inherit;
 }
 
-.active{
-	@apply border-primary
-}
+.size-sm input{ @apply text-sm; }
 
 .state--2{
 	@apply border-red-500
@@ -219,8 +213,4 @@ export default{
 	@apply text-right
 }
 
-.textbox.variant-minimal{
-  @apply border-transparent;
-}
-
 </style>

package/src/components/Timepicker.vue

@@ -1,27 +1,36 @@
 <template>
   <span :class="computedClass">
-    <div>
-      <slot></slot>
-    </div>
-    <div class="flex-1">
-      <select @change="onChanged" ref="hour" :disabled="readonly">
+
+    <div class="w-[56px] flex flex-row items-center relative">
+      <select @change="onChanged" ref="hour" class="text-left w-full flex-1 px-3" :disabled="readonly">
         <option v-for="_hour in 24" :value="(_hour - 1).toString().padStart(2, '0')"
-          :selected="(_hour - 1) === computedHour">
+                :selected="(_hour - 1) === computedHour">
           {{ (_hour - 1).toString().padStart(2, '0') }}
         </option>
       </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+        </svg>
+      </div>
     </div>
-    <div>
-      <label>:</label>
-    </div>
-    <div class="flex-1">
-      <select @change="onChanged" ref="minute" :disabled="readonly">
+
+    <div class="w-[56px] flex flex-row items-center relative">
+      <select @change="onChanged" ref="minute" class="text-left w-full flex-1 px-3" :disabled="readonly">
         <option v-for="_minute in 60" :value="(_minute - 1).toString().padStart(2, '0')"
-          :selected="(_minute - 1) === computedMinute">
+                :selected="(_minute - 1) === computedMinute">
           {{ (_minute - 1).toString().padStart(2, '0') }}
         </option>
       </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+        </svg>
+      </div>
     </div>
+
   </span>
 </template>
 
@@ -82,7 +91,9 @@ export default{
 <style module>
 
 .timepicker{
-  @apply inline-flex flex-row items-center bg-base-50;
+  @apply inline-flex flex-row items-center;
+  @apply bg-base-400 border-[1px] border-border-200 rounded-lg;
+  @apply divide-x divide-border-50;
 }
 
 .timepicker label{
@@ -91,11 +102,10 @@ export default{
 
 .timepicker select{
   @apply w-full p-2 appearance-none bg-transparent outline-none;
-	@apply border-[1px] border-text-200 rounded-lg;
 	@apply text-center;
 }
 .timepicker:not(.readonly) select{
-	@apply hover:border-text-300;
+	@apply hover:border-border-300;
 }
 
 .timepicker.timepicker-sm select{

package/src/components/Toast.vue

@@ -83,8 +83,10 @@ export default{
 <style>
 
 .YWxl{
-	@apply fixed top-0 left-0 right-0;
-	z-index: 61;
+	@apply fixed top-0 w-full;
+  z-index: 150;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
 }
 
 .YWxl-enter-active,
@@ -107,7 +109,7 @@ export default{
 
 .item{
 	@apply flex p-3 gap-4;
-	@apply max-w-[90vw] md:max-w-[480px] bg-base-500 mx-auto rounded-xl border-[1px] border-text-100;
+	@apply max-w-[90vw] md:max-w-[480px] bg-base-500 mx-auto rounded-xl border-[1px] border-border-100;
 	@apply min-h-[var(--h-cp)];
 	z-index: 61;
 }

package/src/components/TreeMenu.vue

@@ -0,0 +1,122 @@
+<template>
+	<div :class="$style.el">
+
+    <div v-for="(menu, index) in value" class="flex flex-row gap-1">
+
+      <button v-if="menu.items"
+              :ref="`btn-${index}`"
+              class="p-2 px-6 flex items-center"
+              type="button"
+              @click="openSubmenu1(`${index}`)">
+        {{ menu.text }}
+        <svg class="fill-text-300 pointer-events-none" height="19" viewBox="0 0 24 24" width="19" xmlns="http://www.w3.org/2000/svg"><path class="secondary" d="M15.3 10.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z" fill-rule="evenodd"/></svg>
+      </button>
+
+      <router-link v-else :to="menu.target" class="p-2 px-6">
+        {{ menu.text }}
+      </router-link>
+
+      <ContextMenu class="rounded-none bg-base-300"
+                   @dismiss="submenu1State = null"
+                   :ref="`menu-${index}`">
+        <div class="divide-y divide-border-50 min-w-[200px] flex flex-col">
+          <div v-for="(submenu, submenuIndex) in menu.items"
+               class="flex-1 flex flex-col">
+
+            <div v-if="submenu.items" class="flex flex-col menu-item"
+                 :ref="`btn-${index}-${submenuIndex}`"
+                 @click.stop
+                 @mouseover="openSubmenu2(`${index}-${submenuIndex}`)">
+              <div class="flex flex-row items-center p-3 px-4 pr-2">
+                <div class="flex-1">
+                  {{ submenu.text }}
+                </div>
+                <svg class="fill-text-300" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
+                  <path clip-rule="evenodd" d="M8.21967 19.0303C7.92678 18.7374 7.92678 18.2626 8.21967 17.9697L14.0126 12.1768C14.1102 12.0791 14.1102 11.9209 14.0126 11.8232L8.21967 6.03033C7.92678 5.73744 7.92678 5.26256 8.21967 4.96967C8.51256 4.67678 8.98744 4.67678 9.28033 4.96967L15.0732 10.7626C15.7566 11.446 15.7566 12.554 15.0732 13.2374L9.28033 19.0303C8.98744 19.3232 8.51256 19.3232 8.21967 19.0303Z" fill-rule="evenodd" />
+                </svg>
+              </div>
+            </div>
+
+            <router-link v-else :to="submenu.target" class="p-3 px-6 menu-item">
+              {{ submenu.text }}
+            </router-link>
+
+            <ContextMenu :ref="`menu-${index}-${submenuIndex}`" class="rounded-none bg-base-300" position="right">
+              <div class="divide-y divide-border-50 min-w-[200px] flex flex-col">
+                <div v-for="(submenu2, submenuIndex) in submenu.items" class="flex-1 flex flex-col">
+                  <div v-if="submenu2.items" class="flex flex-col menu-item">
+                    <div class="flex flex-row items-center p-3 px-4 pr-2">
+                      <div class="flex-1">
+                        {{ submenu2.text }}
+                      </div>
+                      <svg class="fill-text-300" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
+                        <path clip-rule="evenodd" d="M8.21967 19.0303C7.92678 18.7374 7.92678 18.2626 8.21967 17.9697L14.0126 12.1768C14.1102 12.0791 14.1102 11.9209 14.0126 11.8232L8.21967 6.03033C7.92678 5.73744 7.92678 5.26256 8.21967 4.96967C8.51256 4.67678 8.98744 4.67678 9.28033 4.96967L15.0732 10.7626C15.7566 11.446 15.7566 12.554 15.0732 13.2374L9.28033 19.0303C8.98744 19.3232 8.51256 19.3232 8.21967 19.0303Z" fill-rule="evenodd" />
+                      </svg>
+                    </div>
+                  </div>
+                  <router-link v-else :to="submenu2.target" class="p-3 px-6 menu-item">
+                    {{ submenu2.text }}
+                  </router-link>
+                </div>
+              </div>
+            </ContextMenu>
+
+          </div>
+        </div>
+      </ContextMenu>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  props: {
+
+    value: Array
+
+  },
+
+  methods: {
+
+    openSubmenu1(id){
+      if(this.submenu1State)
+        this.$refs['menu-' + this.submenu1State][0].close()
+
+      this.$refs['menu-' + id][0].open(this.$refs['btn-' + id][0])
+      this.submenu1State = id
+    },
+
+    openSubmenu2(id){
+      if(this.submenu2State)
+        this.$refs['menu-' + this.submenu2State][0].close()
+
+      if(this.submenu1State !== id.split('-')[0])
+        return
+
+      this.$refs['menu-' + id][0].open(this.$refs['btn-' + id][0])
+      this.submenu2State = id
+    }
+
+  },
+
+  data(){
+    return {
+      submenu1State: null,
+      submenu2State: null
+    }
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply flex flex-row gap-1;
+}
+
+</style>