@mixd-id/web-scaffold 0.1.250801008 → 0.1.250801009

package/package.json

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

package/src/components/Card.vue

@@ -19,13 +19,13 @@
           </div>
         </slot>
 
-        <slot name="default"></slot>
+        <slot name="default" :context="context"></slot>
 
       </div>
     </Transition>
   </Teleport>
 	<div v-else :class="computedClass">
-    <slot name="default"></slot>
+    <slot name="default" :context="context"></slot>
 	</div>
 </template>
 
@@ -76,7 +76,8 @@ export default{
   data(){
     return {
       mounted: false,
-      _state: false
+      _state: false,
+      context: {}
     }
   },
 
@@ -100,7 +101,9 @@ export default{
 
     },
 
-    open(){
+    open(context = {}){
+      this.context = context
+
       if(this.query){
 
       }
@@ -129,6 +132,11 @@ export default{
 
     class: String,
 
+    dismissable: {
+      type: Boolean,
+      default: false
+    },
+
     float: Boolean,
 
     height: {
@@ -218,4 +226,13 @@ html[data-theme='dark'] .overlay{
   @apply bg-black/50;
 }
 
+@media screen and (max-width: 640px){
+
+  .modal {
+    width: 100% !important;
+    max-height: 90vh;
+    @apply self-end;
+  }
+
+}
 </style>

package/src/components/List.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col bg-base-400 md:bg-transparent"
+       v-intersect="onVisibleChange">
 
     <div v-if="readyState >= 1"
          class="flex-1 flex flex-row">
@@ -36,14 +37,14 @@
                 :preset="preset"
                 :presetSelector="$refs.presetSelector"
                 :compPrefix="compPrefix">
-            <div class="flex flex-col md:flex-row gap-3 md:items-end overflow-hidden p-3 md:p-0 md:panel-none border-b-[1px] border-border-50 md:border-none"
+            <div class="flex flex-col md:flex-row gap-3 md:items-end overflow-hidden p-3 pb-1 md:p-0"
                  :class="headerClass">
-
-              <div class="flex md:flex-1 flex-row items-end gap-3">
+              <div class="flex md:flex-1 flex-row items-end md:gap-3 py-1 md:py-0">
+                <slot name="left"></slot>
 
                 <div class="flex flex-row gap-2 md:gap-3 items-center px-3" ref="title">
                   <div class="flex flex-col whitespace-nowrap text-ellipsis overflow-hidden">
-                    <div class="cursor-pointer group leading-5" @click="$refs.contextMenu.open($refs.title)">
+                    <div class="cursor-pointer group leading-4" @click="$refs.contextMenu.open($refs.title)">
                       <small class="text-text-400 text-xs">{{ title ?? 'Untitled' }}</small>
                       <div class="flex flex-row items-baseline gap-1">
                         <h3 class="whitespace-nowrap relative text-ellipsis overflow-hidden group-hover:text-primary">
@@ -90,8 +91,9 @@
 
                 <slot name="toolbar">
                 </slot>
+
                 <slot name="right-toolbar">
-                  <div class="flex flex-row gap-2" v-if="Boolean(toolbar)">
+                  <div class="hidden md:flex flex-row gap-2" v-if="Boolean(toolbar)">
                     <Textbox v-if="canSearch"
                              class="flex-1 md:w-[240px]"
                              placeholder="Search..."
@@ -106,26 +108,6 @@
                         </div>
                       </template>
                     </Textbox>
-
-                    <div v-if="false && $slots.gridItem"
-                         class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-border-50 rounded-lg">
-                      <Radio v-model="preset.view"
-                             name="view"
-                             value="table"
-                             :custom="true"
-                             class="p-2 px-3 rounded-lg rounded-r-none"
-                             :class="preset.view === 'table' ? 'bg-primary-500' : 'bg-base-500'">
-                        <svg width="14" height="14" :class="preset.view === 'table' ? 'fill-white' : 'fill-text'" 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="M448 32H64.05C28.7 32 .0492 60.65 .0492 96v320c0 35.35 28.65 64 64 64h383.1c35.35 0 64-28.65 64-64V96C512 60.65 483.4 32 448 32zM224 416H64v-96h160V416zM224 256H64V160h160V256zM448 416h-160v-96h160V416zM448 256h-160V160h160V256z"/></svg>
-                      </Radio>
-                      <Radio v-model="preset.view"
-                             name="view"
-                             value="grid"
-                             :custom="true"
-                             class="p-2 px-3 bg-base-500 rounded-lg rounded-l-none"
-                             :class="preset.view === 'grid' ? 'bg-primary-500' : 'bg-base-500'">
-                        <svg width="14" height="14" :class="preset.view === 'grid' ? 'fill-white' : 'fill-text'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M144 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C176 302.3 161.7 288 144 288zM368 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C400 302.3 385.7 288 368 288zM592 288h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96C624 302.3 609.7 288 592 288zM144 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C176 78.33 161.7 64 144 64zM368 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C400 78.33 385.7 64 368 64zM592 64h-96c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32V96C624 78.33 609.7 64 592 64z"/></svg>
-                      </Radio>
-                    </div>
                   </div>
                 </slot>
               </div>
@@ -133,6 +115,27 @@
             </div>
           </slot>
 
+          <div class="md:hidden">
+            <slot name="mobile-toolbar">
+              <div class="p-3">
+                <Textbox v-if="canSearch"
+                         placeholder="Search..."
+                         class="bg-base-300"
+                         clearable="1"
+                         maxlength="100"
+                         v-model="preset.search"
+                         @clear="delete preset.search; load()"
+                         @keyup.enter="load">
+                  <template #start>
+                    <div class="p-2 pr-0">
+                      <svg width="14" height="14" class="fill-text-300" 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="M504.1 471l-134-134C399.1 301.5 415.1 256.8 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM48 208c0-88.22 71.78-160 160-160s160 71.78 160 160s-71.78 160-160 160S48 296.2 48 208z"/></svg>
+                    </div>
+                  </template>
+                </Textbox>
+              </div>
+            </slot>
+          </div>
+
           <div class="flex-1 flex" ref="content">
             <div v-if="readyState === 2" class="flex-1 flex items-center justify-center">
               <svg class="animate-spin" width="36" height="36" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
@@ -288,7 +291,7 @@ import VirtualGrid from "./VirtualGrid.vue";
 import PresetSelector from "../widgets/PresetSelector.vue";
 import {generatePivotColumns, generateTotalColumns, setupConfig, sortsFn} from "../utils/preset-selector.mjs";
 import PresetBar from "../widgets/PresetBar.vue";
-import {groupBy, invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
+import {invokeAfterIdle, queueForLater} from "../utils/helpers.mjs";
 
 export default{
 
@@ -899,40 +902,42 @@ export default{
       if(column){
         delete column.freeze
       }
-    }
+    },
 
-  },
+    onVisibleChange({ inViewport, entry }){
+      if(inViewport){
+        this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+
+        this.loadPreset()
+            .finally(() => {
+              this.readyState = 1
+              this.$nextTick(() => {
+                this.calcItemsPerPage()
+                this.load()
+                this.loadExt()
+              })
+            })
 
-  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
+        if(this.subscribeKey){
+          this.useSocket().send('user.subscribe', { name:this.subscribeKey })
+          this.useSocket().on(this.subscribeKey, this.onSignal)
+        }
 
-  mounted(){
-    this.$addResizeListener(this.$el, () => this.compPrefix = this.$util.calculateMediaPrefix(this.$el.clientWidth))
+        window.addEventListener('keydown', this.onKeyDown)
 
-    this.loadPreset()
-        .finally(() => {
-          this.readyState = 1
-          this.$nextTick(() => {
-            this.calcItemsPerPage()
-            this.load()
-            this.loadExt()
-          })
+        this.queue = queueForLater({
+          pop: this.loadQueued,
+          delay: this.updateInterval
         })
 
-    if(this.subscribeKey){
-      this.useSocket().send('user.subscribe', { name:this.subscribeKey })
-      this.useSocket().on(this.subscribeKey, this.onSignal)
-    }
-
-    window.addEventListener('keydown', this.onKeyDown)
-
-    this.queue = queueForLater({
-      pop: this.loadQueued,
-      delay: this.updateInterval
-    })
+        this.useSocket().on('connect', this.onConnect)
+      }
+    },
 
-    this.useSocket().on('connect', this.onConnect)
   },
 
+  components: {PresetBar, PresetSelector, VirtualGrid, VirtualTable},
+
   unmounted() {
     this.$removeResizeListener(this.$el)
     window.removeEventListener('keydown', this.onKeyDown)

package/src/components/Timepicker.vue

@@ -92,7 +92,7 @@ export default{
 
 .timepicker{
   @apply inline-flex flex-row items-center;
-  @apply bg-base-300 border-[1px] border-border-200 rounded-lg;
+  @apply bg-base-400 border-[1px] border-border-200 rounded-lg;
   @apply divide-x divide-border-50;
 }
 

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">
@@ -273,7 +273,7 @@ export default{
 
 .virtualGrid{
   @apply flex-1 overflow-y-auto;
-  @apply border-[1px] border-border-50 bg-base-400;
+  @apply md:border-[1px] border-border-50 md:bg-base-400;
 }
 
 .scroller{
@@ -286,7 +286,7 @@ export default{
 .spacer{
   will-change: auto;
   position: relative;
-  @apply grid;
+  @apply grid divide-y divide-border-50 border-t-[1px] border-border-50;
 }
 
 .calc{

package/src/directives/intersect.js

@@ -0,0 +1,26 @@
+// directives/intersect.js
+export default {
+  mounted(el, binding) {
+    const callback = binding.value;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          callback({
+            inViewport: entry.isIntersecting,
+            entry
+          });
+        });
+      },
+      {
+        threshold: 0.1, // adjust sensitivity
+      }
+    );
+
+    observer.observe(el);
+    el._observer = observer;
+  },
+  unmounted(el) {
+    if (el._observer) el._observer.disconnect();
+  }
+};

package/src/index.js

@@ -2,6 +2,8 @@ import {defineAsyncComponent, ref} from "vue"
 import {arrayPush, arrayRemove, arrayUnshift, downloadUrl, invokeAfterIdle, observeInit} from './utils/helpers.mjs'
 import dayjs from "dayjs";
 import {useDevice} from './hooks/device.js'
+import IntersectDirective from './directives/intersect';
+
 
 let _UNIQID = 0
 const uniqid = (additionalKey = '') => {
@@ -425,6 +427,8 @@ export default{
       app.config.globalProperties.$mounted.value = true
     }
 
+    app.directive('intersect', IntersectDirective)
+
     app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
     app.component('Paragraph', defineAsyncComponent(() => import("./components/Paragraph.vue")))
     app.component('Alert', defineAsyncComponent(() => import("./components/Alert.vue")))