@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/src/components/TreeView.vue

@@ -3,16 +3,22 @@
 
 		<TreeViewItem v-for="(item, index) in modelValue"
 									:item="item"
+                  :depth="0"
 									:parent="modelValue"
 									:selected-item="selectedItem"
 									@moveup="moveUp(item)"
 									@movedown="moveDown(item)"
 									@change="$emit('change')"
-									@remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { modelValue.splice(index, 1);$emit('change') }})"
-									@add="(items) => $emit('add', items)">
-			<template #default="{ item, parent }">
-				<slot :item="item" :parent="parent"></slot>
+									@remove="modelValue.splice(index, 1);$emit('change')"
+									@add="(items) => $emit('add', items)"
+                  @duplicate="(parent, item) => $emit('duplicate', parent, item)">
+			<template #default="{ item, parent, depth }">
+				<slot :item="item" :parent="parent" :depth="depth"></slot>
 			</template>
+
+      <template #item="{ item, parent, depth }">
+        <slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
+      </template>
 		</TreeViewItem>
 
 	</div>
@@ -21,7 +27,6 @@
 <script>
 
 import TreeViewItem from "./TreeViewItem.vue";
-import {copyToClipboard, getClipboardData} from "../utils/helpers.mjs";
 
 export default{
 
@@ -29,7 +34,7 @@ export default{
 
 	emits: [ 'add', 'change', 'paste' ],
 
-	inject: [ 'confirm', 'toast' ],
+	inject: [ 'toast' ],
 
 	props: {
 
@@ -42,20 +47,20 @@ export default{
 	methods: {
 
 		copy(){
-			if(this.selectedItem){
+			/*if(this.selectedItem){
 				copyToClipboard(JSON.stringify(this.selectedItem))
 					.then(() => this.toast('Copied to clipboard'))
-			}
+			}*/
 		},
 
 		paste(){
-			getClipboardData().then(text => {
+			/*getClipboardData().then(text => {
 				try{
 					const item = JSON.parse(text)
 					this.$emit('paste', item)
 				}
 				catch(e){}
-			})
+			})*/
 		},
 
 		moveDown(item){

package/src/components/TreeView2.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="$style.comp">
+
+    <TreeViewItem2 v-for="(item, index) in items"
+                   :item="item"
+                   :index="index"
+                   :parent="items"
+                   :container-class="containerClass">
+      <template #default="{ item, index, parent }">
+        <slot :item="item" :index="index" :parent="parent"></slot>
+      </template>
+    </TreeViewItem2>
+
+  </div>
+</template>
+
+<script setup>
+
+import TreeViewItem2 from "./TreeViewItem2.vue";
+
+
+const { } = defineProps({
+
+  containerClass: String,
+
+  items: Array
+
+})
+
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col gap-1;
+}
+
+</style>

package/src/components/TreeViewItem.vue

@@ -12,24 +12,30 @@
 				<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>
 			</button>
 
-			<div class="flex-1 flex px-3">
-        <slot :item="item" :parent="parent"></slot>
-      </div>
-
-      <div class="flex flex-row items-center">
-        <button v-if="item && Array.isArray(item.items)"
-                type="button"
-                class="p-1"
-                @click="add">
-          <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
-        </button>
-
-        <button type="button"
-                class="p-1"
-                @click="$emit('remove')">
-          <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-        </button>
-      </div>
+      <slot name="item" :item="item" :parent="parent" :depth="depth">
+        <div class="flex-1 flex px-3">
+          <slot :item="item" :parent="parent"></slot>
+        </div>
+
+        <div class="flex flex-row items-center">
+          <button v-if="item && Array.isArray(item.items)"
+                  type="button"
+                  class="p-1"
+                  @click="add">
+            <svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
+          </button>
+
+          <button type="button" class="p-1" @click="duplicate">
+            <svg class="fill-text-300 hover:fill-primary" width="13" height="13" 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="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"/></svg>
+          </button>
+
+          <button type="button"
+                  class="p-1"
+                  @click="$emit('remove')">
+            <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
+          </button>
+        </div>
+      </slot>
 
 		</div>
     <div ref="container"
@@ -39,14 +45,20 @@
       <TreeViewItem v-for="(subItem, index) in item.items"
                     :item="subItem"
                     :parent="item.items"
+                    :depth="depth + 1"
                     :selected-item="selectedItem"
                     @moveup="moveUp(subItem)"
                     @movedown="moveDown(subItem)"
-                    @remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
+                    @remove="item.items.splice(index, 1); $emit('change')"
                     @add="(items) => $emit('add', items)"
+                    @duplicate="(parent, item) => $emit('duplicate', parent, item)"
                     @change="$emit('change')">
-        <template #default="{ item }">
-          <slot :item="item"></slot>
+        <template #default="{ item, parent, depth }">
+          <slot :item="item" :parent="parent" :depth="depth"></slot>
+        </template>
+
+        <template #item="{ item, parent, depth }">
+          <slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
         </template>
       </TreeViewItem>
     </div>
@@ -62,9 +74,9 @@ export default{
 
   name: 'TreeViewItem',
 
-	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
+	emits: [ 'add', 'change', 'duplicate', 'moveup', 'movedown', 'remove' ],
 
-	inject: [ 'confirm', 'toast', 'store', 'getConfig' ],
+	inject: [ 'toast', 'store' ],
 
 	props: {
 		item: Object,
@@ -77,6 +89,8 @@ export default{
 			type: [ Number, String ],
 			default: 1
 		},
+
+    depth: Number
 	},
 
 	methods: {
@@ -102,6 +116,10 @@ export default{
       this.childCollapsed = false
 		},
 
+    duplicate(){
+      this.$emit('duplicate', this.parent, this.item)
+    },
+
 		mouseDown(e){
       if(!this.$el || this.$el.nodeType !== 1) return
 
@@ -299,12 +317,15 @@ export default{
 	computed: {
 
     componentStore(){
-      if(this.store && this.store.components){
-        if(!this.store.components.treeviewitem)
-          this.store.components.treeviewitem = {}
+      if(!this.store) return this.store
 
-        return this.store.components.treeviewitem
-      }
+      if(!this.store.components)
+        this.store.components = {}
+
+      if(!this.store.components.treeviewitem)
+        this.store.components.treeviewitem = {}
+
+      return this.store.components.treeviewitem
     },
 
     isSelected(){
@@ -350,6 +371,14 @@ export default{
     childCollapsed(to){
       if(this.item.uid && this.componentStore){
         this.componentStore[this.item.uid] = to
+
+        const keys = Object.keys(this.componentStore)
+        if(keys.length > 100){
+          const removedKeys = keys.slice(0, keys.length - 100)
+          for(let i in removedKeys){
+            delete this.componentStore[removedKeys[i]]
+          }
+        }
       }
       else{
         console.warn('[TreeviewItem] not saving collapsed state', {
@@ -402,7 +431,7 @@ export default{
 <style module>
 
 .item{
-	@apply bg-base-300 dark:bg-base-400 flex flex-row py-1 items-center rounded-lg mb-1;
+	@apply bg-base-300 hover:bg-text-50 flex flex-row py-1 items-center rounded-lg mb-1;
 	@apply border-[1px] border-transparent cursor-pointer;
 }
 .item.active{

package/src/components/TreeViewItem2.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :class="$style.comp">
+
+    <slot name="default" :item="item" :index="index" :parent="parent">
+      <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, index) in item.items"
+                     :item="subItem"
+                     :index="index"
+                     :parent="item.items"
+                     :container-class="containerClass">
+        <template #default="{ item, index, parent }">
+          <slot :item="item" :index="index" :parent="parent"></slot>
+        </template>
+      </TreeViewItem2>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+const { } = defineProps({
+
+  containerClass: String,
+
+  item: Object,
+
+  index: Number,
+
+  parent: Array
+})
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.item{
+  @apply bg-base-400 hover:bg-base-500;
+}
+
+.subitems {
+  @apply ml-4 flex flex-col gap-1 mt-1;
+}
+
+</style>

package/src/components/Uploader.vue

@@ -0,0 +1,45 @@
+<template>
+	<div :class="$style.comp" @click="$refs.file.click()">
+		<input type="file" :multiple="Boolean(multiple)" :accept="accept" ref="file" class="hidden" @change="onUpload"/>
+    <slot name="default"></slot>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'change' ],
+
+  props:{
+
+    accept: undefined,
+    multiple: undefined,
+
+  },
+
+  methods: {
+
+    onUpload(e){
+      const files = []
+      for(let i = 0; i < e.target.files.length; i++){
+        files.push(e.target.files[i])
+      }
+
+      this.$emit('change', files)
+      this.$refs.file.value = null
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply cursor-pointer;
+}
+
+</style>

package/src/components/Video.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="$style.comp"
+       @click="onClick">
+    <video v-if="actualSrc" ref="video"
+           @ended="playing = false">
+      <source :src="actualSrc" type="video/mp4">
+    </video>
+
+    <slot v-else name="empty" :instance="this"></slot>
+
+    <div v-if="!playing && actualSrc" :class="$style.play">
+      <button type="button" @click.stop="play" class="w-[36px] h-[36px] flex items-center justify-center rounded-full bg-white/30">
+        <svg width="21" height="21" class="fill-white" 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="M176 480C148.6 480 128 457.6 128 432v-352c0-25.38 20.4-47.98 48.01-47.98c8.686 0 17.35 2.352 25.02 7.031l288 176C503.3 223.8 512 239.3 512 256s-8.703 32.23-22.97 40.95l-288 176C193.4 477.6 184.7 480 176 480z"/></svg>
+      </button>
+    </div>
+
+    <input v-if="Boolean(editable)" class="hidden" type="file" accept="video/*" ref="file" @change="onChange"/>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'click', 'change' ],
+
+  props: {
+
+    editable:{
+      type: [ Boolean, String ],
+      default: false
+    },
+
+    src: undefined,
+
+  },
+
+  data(){
+    return {
+      actualSrc: null,
+      playing: false,
+    }
+  },
+
+  methods: {
+
+    edit(){
+      if(this.$refs.file){
+        this.$refs.file.click()
+      }
+    },
+
+    onChange(e){
+      if(e.target.files.length > 0){
+        var reader = new FileReader();
+        reader.addEventListener('load', () => {
+          this.$emit('change', reader.result, e.target.files[0])
+          this.$refs.file.value = null
+        }, false)
+        reader.readAsDataURL(e.target.files[0]);
+      }
+    },
+
+    onClick(e){
+      if(this.playing){
+        this.$refs.video.pause()
+        this.playing = false
+      }
+      else{
+        this.$emit('click', e, this)
+      }
+    },
+
+    play(){
+      this.$refs.video.play()
+      this.playing = true
+    }
+
+  },
+
+  watch: {
+
+    src: {
+      immediate: true,
+      handler(to){
+        if(to instanceof File){
+          var reader = new FileReader();
+          reader.addEventListener('load', () => {
+            this.actualSrc = reader.result
+          }, false)
+          reader.readAsDataURL(to);
+        }
+        else{
+          this.actualSrc = to
+          //this.actualSrc = 'https://www.kliknss.co.id/images/big_buck_bunny_240p_1mb.mp4'
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply flex-1 flex items-center justify-center relative overflow-hidden;
+}
+
+.play{
+  @apply absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+</style>

package/src/components/VirtualGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.virtualGrid" @click="resize">
+  <div :class="$style.virtualGrid">
 
     <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
       <div :class="spacerClass" ref="spacer" :style="spacerStyle">
@@ -18,14 +18,14 @@
       <div class="flex flex-row gap-2 items-center">
         <small class="text-text-400">Column</small>
         <select v-model="config.gridColumn"
-                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
+                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-border-100 text-center">
           <option v-for="i in 8" :value="i">{{ i }}</option>
         </select>
       </div>
       <div class="flex flex-row gap-2 items-center">
         <small class="text-text-400">Gap</small>
         <select v-model="config.gridGap"
-                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-text-100 text-center">
+                class="appearance-none outline-none text-text-400 w-[20px] bg-transparent border-[1px] border-border-100 text-center">
           <option v-for="i in 8" :value="`gap-${i}`">{{ i }}</option>
         </select>
       </div>
@@ -82,6 +82,8 @@ export default{
           this.isOnEndScroll = false
         }
       }
+
+      this.scrolled = this.scrollTop > 0
     }, 16),
 
     init(){
@@ -218,6 +220,8 @@ export default{
       isOnEndScroll: false,
       selectedIndex: -1,
       state: 1,
+      scrolled: false,
+      scrollerCache: {}
     }
   },
 
@@ -227,11 +231,11 @@ export default{
 
   watch: {
 
-    column(to){
+    column(){
       this.resize()
     },
 
-    gap(to){
+    gap(){
       this.resize()
     },
 
@@ -246,6 +250,19 @@ export default{
       }
     },
 
+    scrollerStyle(to){
+      if(this.scrolled && this.scrollerCache?.id){
+        const index = this.items.findIndex(_ => _.id === this.scrollerCache.id)
+        const addToScroll = (index - this.scrollerCache.index) * this.itemHeight
+        this.scrollTop = this.$el.scrollTop = this.scrollTop + addToScroll
+      }
+
+      this.scrollerCache = {
+        id: (this.items ?? [])[this.visibleStartIndex]?.id,
+        index: this.visibleStartIndex
+      }
+    },
+
   }
 
 }
@@ -256,6 +273,7 @@ export default{
 
 .virtualGrid{
   @apply flex-1 overflow-y-auto;
+  @apply md:border-[1px] border-border-50 md:bg-base-400;
 }
 
 .scroller{
@@ -268,13 +286,12 @@ export default{
 .spacer{
   will-change: auto;
   position: relative;
-  @apply grid;
+  @apply grid divide-y divide-border-50 border-t-[1px] border-border-50;
 }
 
 .calc{
   @apply absolute invisible max-w-full;
   top: -10000px;
-
 }
 
 </style>