@mixd-id/web-scaffold 0.1.240411061 → 0.1.250801001

package/package.json

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

package/src/components/Button.vue

@@ -226,7 +226,7 @@ export default{
 }
 
 .button-minimal{
-  @apply border-transparent bg-transparent text-white;
+  @apply border-transparent bg-transparent text-text;
   @apply hover:bg-transparent hover:border-transparent;
 }
 .button-minimal .svgBg{

package/src/components/Confirm.vue

@@ -18,12 +18,12 @@
 						</div>
 
 						<div class="mt-4 flex flex-row gap-2">
-							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px]" tabindex="0">
+							<Button ref="btnOK" @click="onConfirm" class="min-w-[88px] text-lg" tabindex="0">
 								<strong class="px-4">
 									{{ buttonText[0] }}
 								</strong>
 							</Button>
-							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary">
+							<Button variant="minimal" @click="onDismiss" class="min-w-[88px] px-4 hover:text-primary text-lg">
 								{{ buttonText[1] }}
 							</Button>
 						</div>
@@ -122,7 +122,7 @@ export default{
 }
 
 .confirm>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
+	@apply max-h-[60vh] overflow-y-auto bg-base-300 rounded-xl;
 	@apply border-[1px] border-text-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
@@ -132,7 +132,7 @@ export default{
 }
 
 .cont2{
-	@apply my-4 text-center flex-1 overflow-y-auto;
+	@apply my-4 text-center flex-1 overflow-y-auto px-6;
 }
 
 .title{
@@ -140,7 +140,7 @@ export default{
 }
 
 .description{
-	@apply overflow-y-auto whitespace-pre-line text-center;
+	@apply overflow-y-auto whitespace-pre-line text-center text-lg;
 	overflow-wrap: break-word;
 	word-wrap: break-word;
 	-ms-word-break: break-all;

package/src/components/ContextMenu.vue

@@ -241,7 +241,7 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed bg-base-300 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply fixed bg-base-400 min-w-[150px] overflow-y-auto;
 	@apply whitespace-nowrap shadow-2xl border-[1px] border-text-100 mt-[1px];
   z-index: 180;
 }
@@ -249,7 +249,7 @@ export default {
 @media screen and (min-width: 640px){
 
 	.contextMenu{
-		@apply fixed min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed min-w-[150px] overflow-y-auto;
 	}
 
 }

package/src/components/Dropdown.vue

@@ -161,7 +161,7 @@ export default {
 
 .dropdown{
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-300;
+	@apply border-[1px] border-text-200 bg-base-400;
 }
 .dropdown:not(.readonly){
 	@apply hover:border-text-300;

package/src/components/List.vue

@@ -133,14 +133,16 @@
               <VirtualTable
                   ref="table"
                   :columns="columns"
-                  class="flex-1 bg-base-300"
+                  class="flex-1 bg-base-400"
                   :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/Modal.vue

@@ -358,7 +358,7 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply bg-base-300 dark:bg-base-400 w-full;
+	@apply bg-base-300 w-full;
 	@apply border-[1px] border-text-50 flex max-h-[90vh] max-w-full;
 	@apply rounded-xl overflow-hidden transition-all;
   z-index: 101;

package/src/components/MultilineText.vue

@@ -148,9 +148,6 @@ export default{
 .textarea>textarea::-webkit-scrollbar{
 	display: none;
 }
-.textarea>textarea::placeholder{
-	@apply text-text-200;
-}
 .textarea.readonly{
 	@apply bg-text-50;
 }

package/src/components/Textarea.vue

@@ -155,9 +155,6 @@ export default{
 .textarea>textarea::-webkit-scrollbar{
 	display: none;
 }
-.textarea>textarea::placeholder{
-	@apply text-text-200;
-}
 .textarea.readonly{
 	@apply bg-text-50;
 }

package/src/components/Textbox.vue

@@ -182,7 +182,7 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 bg-base-300 hover:border-text-300 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-400 hover:border-text-300 rounded-lg;
 	@apply overflow-hidden;
 }
 .textbox.active{

package/src/components/TreeMenu.vue

@@ -16,7 +16,7 @@
         {{ menu.text }}
       </router-link>
 
-      <ContextMenu class="rounded-none"
+      <ContextMenu class="rounded-none bg-base-300"
                    @dismiss="submenu1State = null"
                    :ref="`menu-${index}`">
         <div class="divide-y divide-text-50 min-w-[200px] flex flex-col">
@@ -41,7 +41,7 @@
               {{ submenu.text }}
             </router-link>
 
-            <ContextMenu :ref="`menu-${index}-${submenuIndex}`" class="rounded-none" position="right">
+            <ContextMenu :ref="`menu-${index}-${submenuIndex}`" class="rounded-none bg-base-300" position="right">
               <div class="divide-y divide-text-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">

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:{
 
@@ -846,7 +848,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col overflow-hidden bg-base-300;
+	@apply flex flex-col overflow-hidden;
 	@apply border-[1px] border-text-50 rounded-lg;
 }
 

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")))

package/src/themes/default/index.js

@@ -17,12 +17,12 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       "--h-cp-lg": '3.6rem',
 
       '--base-50': '235, 237, 240',
-      '--base-300': '255, 255, 255',
-      '--base-400': '248, 247, 248',
-      '--base-500': '248, 247, 248',
+      '--base-300': '239, 240, 241',
+      '--base-400': '249, 250, 251',
+      '--base-500': '255, 255, 255',
       '--base': '255, 255, 255',
 
-      "--text-50": '238, 238, 238',
+      "--text-50": '232, 232, 232',
       "--text-100": '223, 223, 223',
       "--text-200": '217, 217, 217',
       "--text-300": '176, 176, 176',
@@ -58,28 +58,20 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       '--whatsapp-500': '0, 93, 75',
 
       '--facebook-100': '205, 215, 231',
-      '--facebook-500': '8, 102, 255',
-
-      '--panel-none': 'transparent',
-      '--panel-300': 'rgb(235, 237, 240)',
-      '--panel-400': 'rgb(245, 247, 250)',
-      '--panel-500': 'rgb(255, 255, 255)',
+      '--facebook-500': '8, 102, 255'
     },
 
     'html[data-theme="dark"], .html[data-theme="dark"]': {
 
-      "--base-50": '22, 26, 33',
-      "--base-300": '17, 21, 28',
-      "--base-400": '0, 0, 0',
-      "--base-500": '0, 0, 0',
-      "--base": '22, 26, 33',
-
-      "--text-50": '33, 39, 46',
-      "--text-100": '48, 54, 61',
-      "--text-200": '58, 64, 71',
-      "--text-300": '87, 87, 87',
-      "--text-400": '191, 193, 197',
-      "--text-500": '191, 193, 197',
+      "--base-300": '12, 13, 14',
+      "--base-400": '33, 33, 33',
+      "--base-500": '48, 48, 48',
+
+      "--text-50": '56, 56, 56',
+      "--text-100": '67, 67, 67',
+      "--text-200": '78, 78, 78',
+      "--text-300": '89, 89, 89',
+      "--text-500": '234, 234, 236',
       "--text": '234, 234, 236',
 
       "--primary-50": '24, 34, 51',
@@ -109,7 +101,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       'text-rendering': 'optimizeLegibility',
       'fontSize': '15px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgb(var(--base-500))'
+      'backgroundColor': 'rgb(var(--base-300))'
     },
 
     '@media screen and (orientation: portrait)': {

package/src/widgets/Dashboard/DataTableSetting.vue

@@ -240,8 +240,4 @@ export default{
   @apply flex-1 flex flex-col;
 }
 
-.columnTextbox input::placeholder{
-  @apply text-text;
-}
-
 </style>

package/src/widgets/Dashboard/VirtualTableSetting.vue

@@ -227,8 +227,4 @@ export default{
   @apply flex-1 flex flex-col;
 }
 
-.columnTextbox input::placeholder{
-  @apply text-text;
-}
-
 </style>

package/src/widgets/Dashboard.vue

@@ -1843,10 +1843,6 @@ export default {
   @apply hover:border-primary-300 hover:bg-primary-100;
 }
 
-.columnTextbox input::placeholder {
-  @apply text-text;
-}
-
 .listMenu{
   @apply flex flex-row items-center gap-1 hover:bg-text-50 px-3 rounded-xl;
 }

package/src/widgets/PresetBar.vue

@@ -963,10 +963,6 @@ export default{
   @apply flex flex-col relative;
 }
 
-.columnTextbox input::placeholder{
-  @apply text-text;
-}
-
 .presetBtn{
   @apply flex flex-row items-center gap-3 px-3 p-2 hover:bg-text-50;
 }

package/src/widgets/PresetBarPivot.vue

@@ -195,8 +195,4 @@ export default{
 
 }
 
-.columnTextbox input::placeholder{
-  @apply text-text;
-}
-
 </style>