@mixd-id/web-scaffold 0.1.240411061 → 0.1.240411062

package/package.json

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

package/src/components/List.vue

@@ -137,10 +137,12 @@
                   :items="dataItems"
                   :enumCache="enumCache"
                   :freeze-left="freezeLeft"
+                  :item-class="itemClass"
                   @freeze="freeze"
                   @unfreeze="unfreeze"
                   @scroll-end="loadNext"
-                  @item-click="onTableItemClick">
+                  @item-click="onTableItemClick"
+                  @dragover="(...args) => $emit('dragover', ...args)">
 
                 <template v-for="(_, slot) in headerSlots" #[slot]="{ item, index }">
                   <div :class="getHeader(slot.replace('col-', ''))">
@@ -281,7 +283,7 @@ import {groupBy, invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
-  emits: [ 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
+  emits: [ 'dragover', 'after-load', 'open-preset', 'signal', 'pivot-item-click' ],
 
   inject: [ 'socket', 'toast' ],
 
@@ -322,6 +324,7 @@ export default{
       type: String,
       default: "md:p-5 md:gap-3"
     },
+    itemClass: String,
     toolbar: {
       type: [ String, Boolean ],
       default: true

package/src/components/TreeView2.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="$style.comp">
+
+    <TreeViewItem2 v-for="item in items"
+                   :item="item"
+                   :container-class="containerClass">
+      <template #default="{ item }">
+        <slot :item="item"></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/TreeViewItem2.vue

@@ -0,0 +1,48 @@
+<template>
+  <div :class="$style.comp">
+
+    <slot name="default" :item="item">
+      <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"
+                     :item="subItem"
+                     :container-class="containerClass">
+        <template #default="{ item }">
+          <slot :item="item"></slot>
+        </template>
+      </TreeViewItem2>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+
+const { } = defineProps({
+
+  containerClass: String,
+
+  item: Object
+})
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+.item{
+  @apply bg-text-50 hover:bg-text-100;
+}
+
+.subitems {
+  @apply ml-4 flex flex-col gap-1 mt-1;
+}
+
+</style>

package/src/components/Uploader.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="$style.comp" @click="$refs.file.click()">
-		<input type="file" :multiple="Boolean(multiple)" ref="file" class="hidden" @change="onUpload"/>
+		<input type="file" :multiple="Boolean(multiple)" :accept="accept" ref="file" class="hidden" @change="onUpload"/>
     <slot name="default"></slot>
 	</div>
 </template>
@@ -13,7 +13,8 @@ export default{
 
   props:{
 
-    multiple: undefined
+    accept: undefined,
+    multiple: undefined,
 
   },
 

package/src/components/VirtualTable.vue

@@ -89,6 +89,7 @@
               <tbody>
                 <tr v-for="(item, index) in visibleItems"
                     :key="item"
+                    @dragover="(e) => $emit('dragover', e, item)"
                     @mouseover="hover(item, index)" @mouseout="hoverIndex = -1"
                     @click="select(item, index)"
                     :class="trClass(item, index)">
@@ -131,6 +132,7 @@
                 <tbody ref="tbody">
                   <tr v-for="(item, index) in visibleItems"
                       :key="item"
+                      @dragover="(e) => $emit('dragover', e, item)"
                       @mouseover="hover(item, index)" @mouseout="hoverIndex = -1"
                       @click="select(item, index)"
                       :class="trClass(item, index)">
@@ -207,7 +209,7 @@ export default{
 
   inject: [ 'emitRoot', 'listStyle' ],
 
-	emits: [ 'freeze', 'unfreeze', 'scroll-end', 'item-click' ],
+	emits: [ 'dragover', 'freeze', 'unfreeze', 'scroll-end', 'item-click' ],
 
 	props:{
 

package/src/index.js

@@ -494,6 +494,8 @@ export default{
     app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
     app.component('TreeView', defineAsyncComponent(() => import("./components/TreeView.vue")))
     app.component('TreeViewItem', defineAsyncComponent(() => import("./components/TreeViewItem.vue")))
+    app.component('TreeView2', defineAsyncComponent(() => import("./components/TreeView2.vue")))
+    app.component('TreeViewItem2', defineAsyncComponent(() => import("./components/TreeViewItem2.vue")))
     app.component('Uploader', defineAsyncComponent(() => import("./components/Uploader.vue")))
     app.component('VirtualGrid', defineAsyncComponent(() => import("./components/VirtualGrid.vue")))
     app.component('VirtualScroll', defineAsyncComponent(() => import("./components/VirtualScroll.vue")))