@mixd-id/web-scaffold 0.1.240411066 → 0.1.240411068

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411066",
+  "version": "0.1.240411068",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -64,6 +64,7 @@
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "marked": "^15.0.12",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "pinia": "^2.0.2",

package/src/components/Textbox.vue

@@ -1,12 +1,12 @@
 <template>
 	<div :class="computedClass">
 		<slot name="start"></slot>
-		<input :type="computedType" :disabled="isDisabled" @focus="isActive = true"
+		<input :type="computedType" @focus="isActive = true"
            @input="onInput"
            @blur="onBlur"
            @keyup="(e) => $emit('keyup', e)"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
-					 :value="displayedValue" :readonly="Boolean(readonly)" @paste="onPaste"
+					 :value="displayedValue" :readonly="Boolean(readonly) || Boolean(disabled)" @paste="onPaste"
            :class="itemClass" @click="$emit('input-click')"
 			@keydown="onKeyDown"/>
 		<button class="mr-2" v-show="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
@@ -186,9 +186,15 @@ export default{
   @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
 	@apply overflow-hidden;
 }
-.textbox.active{
+.textbox.active:not(.disabled){
   @apply !border-primary-600
 }
+.textbox.disabled{
+  @apply bg-text-50 hover:border-text-200 cursor-not-allowed;
+}
+.textbox.disabled *{
+  @apply cursor-not-allowed;
+}
 .textbox>input{
   @apply flex-1 outline-none p-2 bg-transparent;
   font-size: inherit;

package/src/components/TreeView.vue

@@ -1,9 +1,10 @@
 <template>
 	<div :class="$style.comp">
-
+{{ itemsKey }}xxx
 		<TreeViewItem v-for="(item, index) in modelValue"
 									:item="item"
                   :depth="0"
+                  :items-key="itemsKey"
 									:parent="modelValue"
 									:selected-item="selectedItem"
 									@moveup="moveUp(item)"
@@ -40,7 +41,12 @@ export default{
 
 		modelValue: Array,
 
-		selectedItem: Object
+		selectedItem: Object,
+
+    itemsKey: {
+      type: String,
+      default: "items"
+    }
 
 	},
 

package/src/components/TreeViewItem.vue

@@ -6,7 +6,7 @@
 				 @mousedown="mouseDown">
 
       <button type="button" class="p-1 w-[18px]"
-              v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
+              v-if="(item[itemsKey] ?? []).length > 0"
 							@click="childCollapsed = !childCollapsed">
 				<svg v-if="!childCollapsed" width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
 				<svg v-else width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
@@ -18,7 +18,7 @@
         </div>
 
         <div class="flex flex-row items-center">
-          <button v-if="item && Array.isArray(item.items)"
+          <button v-if="item && Array.isArray(item[itemsKey])"
                   type="button"
                   class="p-1"
                   @click="add">
@@ -39,17 +39,18 @@
 
 		</div>
     <div ref="container"
-         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6"
+         v-show="item && Array.isArray(item[itemsKey]) && !childCollapsed" class="ml-6"
          @mousemove.stop=""
          @mouseout.stop="">
-      <TreeViewItem v-for="(subItem, index) in item.items"
+      <TreeViewItem v-for="(subItem, index) in item[itemsKey]"
                     :item="subItem"
-                    :parent="item.items"
+                    :parent="item[itemsKey]"
                     :depth="depth + 1"
+                    :items-key="itemsKey"
                     :selected-item="selectedItem"
                     @moveup="moveUp(subItem)"
                     @movedown="moveDown(subItem)"
-                    @remove="item.items.splice(index, 1); $emit('change')"
+                    @remove="item[itemsKey].splice(index, 1); $emit('change')"
                     @add="(items) => $emit('add', items)"
                     @duplicate="(parent, item) => $emit('duplicate', parent, item)"
                     @change="$emit('change')">
@@ -90,29 +91,31 @@ export default{
 			default: 1
 		},
 
-    depth: Number
+    depth: Number,
+
+    itemsKey: String
 	},
 
 	methods: {
 
 		moveDown(item){
-			const idx = this.item.items.indexOf(item)
-			if(idx < this.item.items.length - 1){
-				this.item.items.splice(idx + 1, 0, this.item.items.splice(idx, 1)[0])
+			const idx = this.item[this.itemsKey].indexOf(item)
+			if(idx < this.item[this.itemsKey].length - 1){
+				this.item[this.itemsKey].splice(idx + 1, 0, this.item[this.itemsKey].splice(idx, 1)[0])
 				this.$emit('change')
 			}
 		},
 
 		moveUp(item){
-			const idx = this.item.items.indexOf(item)
+			const idx = this.item[this.itemsKey].indexOf(item)
 			if(idx - 1 >= 0){
-				this.item.items.splice(idx - 1, 0, this.item.items.splice(idx, 1)[0])
+				this.item[this.itemsKey].splice(idx - 1, 0, this.item[this.itemsKey].splice(idx, 1)[0])
 				this.$emit('change')
 			}
 		},
 
 		add(){
-			this.$emit('add', this.item.items)
+			this.$emit('add', this.item[this.itemsKey])
       this.childCollapsed = false
 		},
 
@@ -239,7 +242,7 @@ export default{
 			if(this.item === dragged.item) return
 
       // Drag to own child is not allowed
-      if(dragged.item.items && dragged.item.items.indexOf(this.item) > -1){
+      if(dragged.item[this.itemsKey] && dragged.item[this.itemsKey].indexOf(this.item) > -1){
         return
       }
 
@@ -249,7 +252,7 @@ export default{
 
 			if(dragged.target !== this.item){
 				const rect = this.$refs.item.getBoundingClientRect()
-        const hasChildItems = Array.isArray(this.item.items)
+        const hasChildItems = Array.isArray(this.item[this.itemsKey])
 
         dragged.targetArea = hasChildItems ? [
           Math.round(rect.y + (rect.height * (2 / 3))),
@@ -286,14 +289,14 @@ export default{
       else if(dragged.dragArea === 3){
 
         // Drag to own parent is not allowed
-        if(this.item.items && this.item.items.indexOf(dragged.item) > -1){
+        if(this.item[this.itemsKey] && this.item[this.itemsKey].indexOf(dragged.item) > -1){
           return
         }
 
         if(guide1.parentNode)
           guide1.parentNode.removeChild(guide1)
         this.$refs.item.classList.add(this.$style.dragInto)
-        dragged.targetParent = this.item.items
+        dragged.targetParent = this.item[this.itemsKey]
         dragged.refItem = this.$refs.item
       }