@mixd-id/web-scaffold 0.1.240411052 → 0.1.240411054

package/log.txt

@@ -0,0 +1,7 @@
+[2025-06-28 16:30:51]
+POST https://198.168.4.239/ksapisvr
+--
+{"api_jsonkolnss":[{"Request":"HASIL","attempt":"0","noBukti":"KSSOE312506000008745","noHP":"085339156956","linkFoto":"https://www.kliknss.co.id/images/kols/097da1af5ef3f112e6ce0d771bdcbeda.jpg","lat":"-10.0409983","long":"124.5253983","jamFoto":"14:02:09","statusKunjungan":"3","lokasiKunjungan":"05","bertemuDengan":"org tua","hubDenganKonsumen":"KELUARGA","konsBayarTarik":"1","tanggalJanjiBayar":"","tanggalKunjunganUlang":"","penyebabKonsTidakBayar":"","historisKons":"","noHPKons":"08552364562","alamatRumahSkr":"desa takarii","keberadaanKonsumen":"01","pekerjaanSkr":"AG","subPekerjaan":"63","unitBisaDiFoto":"Y","keberadaanUnit":"11","klasifikasiKons":"999","layakTdkLayak":"","latMulai":"-10.0408867","lonMulai":"124.5252633","latSampai":"-10.0409114","lonSampai":"124.5252886","latSelesai":"-10.0409983","lonSelesai":"124.5253983","jamMulai":"13:58:54","jamSampai":"13:59:11","jamSelesai":"13:59:14","linkFotoBerkas":"https://www.kliknss.co.id/images/kols/9dbec61757412e358e9a68013aa80f25.jpg","jamKirim":"2025-06-28 16:51:04.695692","tempatDikunjungi":"rmh org tya","hariLuang":"Senin","jamLuang":"10:00 - 12:00","kodePelacakan":"","latFotoPelacakan":"","longFotoPelacakan":"","jamFotoPelacakan":"","provPelacakan":"","kotaPelacakan":"","kecPelacakan":"","kelPelacakan":"","kodePosPelacakan":"","alamatPelacakan":"","provPemegangUnit":"","kotaPemegangUnit":"","kecPemegangUnit":"","kelPemegangUnit":"","kodePosPemegangUnit":"","alamatPemegangUnit":"","hubPemegangUnit":"","hubPemegangUnitLainnya":"","namaPemegangUnit":"","ketTidakTerlacak":"","Suspect":"TIDAK","KetKunjKolvsAlmtagih":"TIDAK SESUAI","JrkKunjKolvsAlmtagih":"29652.31661401902","KetKunjKolvsResurvey":"TIDAK SESUAI","JrkKunjKolvsResurvey":"29652.31661401902","KetKunjKolvsSurvey":"TIDAK SESUAI","JrkKunjKolvsSurvey":"32674.530270079635","KetKunjKolvsTmptKerja":"TIDAK SESUAI","JrkKunjKolvsTmptKerja":"32674.530270079635","KetKunjKolvsKelSurvey":"TIDAK SESUAI","JrkKunjKolvsKelSurvey":"52918.18337137214"}]}
+
+E================ t= 61ms
+{"status":-1,"message":"ap_rdjsn gagal, response=master label  di program tidak ditemukan/tidak urut di jawaban server","data":"ap_rdjsn gagal, response=master label  di program tidak ditemukan/tidak urut di jawaban server  "}

package/package.json

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

package/src/components/Carousel.vue

@@ -11,12 +11,23 @@
 			</div>
     </div>
 
-    <div v-if="items && items.length > 1" :class="$style.carouselNext" @click="next(true)">
-      <slot name="next"></slot>
+    <div v-if="useNextPrev && items && items.length > 1" :class="$style.carouselNext" @click="next(true)">
+      <slot name="next">
+        <div class="p-3">
+          <button :class="$style.btn">
+            <svg :class="$style.btnSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M438.6 278.6l-160 160C272.4 444.9 264.2 448 256 448s-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L338.8 288H32C14.33 288 .0016 273.7 .0016 256S14.33 224 32 224h306.8l-105.4-105.4c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160C451.1 245.9 451.1 266.1 438.6 278.6z"/></svg>
+          </button>
+        </div>
+      </slot>
     </div>
 
-		<div v-if="items && items.length > 1" :class="$style.carouselPrev" @click="prev">
+		<div v-if="useNextPrev && items && items.length > 1" :class="$style.carouselPrev" @click="prev">
       <slot name="prev">
+        <div class="p-3">
+          <button :class="$style.btn">
+            <svg :class="$style.btnSvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
+          </button>
+        </div>
       </slot>
     </div>
 
@@ -55,6 +66,8 @@ export default{
 
 		useLegend: [ Boolean, Number ],
 
+    useNextPrev: [ Boolean, Number ],
+
   },
 
   emits: [ 'change' ],
@@ -301,6 +314,7 @@ export default{
 .comp{
 	overflow: hidden;
 	position: relative;
+  @apply flex flex-col;
 }
 
 .comp img{
@@ -308,11 +322,11 @@ export default{
 }
 
 .carouselNext{
-	@apply absolute top-0 bottom-0 right-0 w-[20px];
+	@apply absolute top-0 bottom-0 right-0 flex items-center justify-center;
 }
 
 .carouselPrev{
-	@apply absolute top-0 bottom-0 left-0 w-[20px];
+	@apply absolute top-0 bottom-0 left-0 flex items-center justify-center;
 }
 
 .inner{
@@ -338,5 +352,12 @@ export default{
 	@apply bg-primary-500;
 }
 
+.btn{
+  @apply w-[32px] h-[32px] md:w-[48px] md:h-[48px] rounded-full bg-black/50 flex items-center justify-center opacity-50 hover:opacity-70;
+}
+.btnSvg{
+  @apply w-[19px] h-[19px] md:w-[32px] md:h-[32px] fill-white/70 hover:fill-white/90;
+}
+
 
 </style>

package/src/components/Checkbox.vue

@@ -141,7 +141,7 @@ export default {
 }
 
 .comp label{
-	@apply flex flex-row items-start gap-2;
+	@apply flex flex-row items-start;
 }
 
 .comp label *{

package/src/components/ContextMenu.vue

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

package/src/components/List.vue

@@ -128,13 +128,16 @@
               <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>
             </div>
 
-            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
+            <div v-else-if="presetView === 'table' || pivotEnabled" class="flex-1 flex flex-col" :class="pivotEnabled ? 'p-3 panel-400 md:p-0' : ''">
               <VirtualTable
                   ref="table"
                   :columns="columns"
                   class="flex-1 bg-base-300"
                   :items="dataItems"
                   :enumCache="enumCache"
+                  :freeze-left="freezeLeft"
+                  @freeze="freeze"
+                  @unfreeze="unfreeze"
                   @scroll-end="loadNext"
                   @item-click="onTableItemClick">
 
@@ -439,7 +442,7 @@ export default{
           }
         }
         else{
-          const defaultConfig = setupConfig(await this.defaultConfig())
+          const defaultConfig = setupConfig(typeof this.defaultConfig === 'function' ? await this.defaultConfig() : {})
           Object.assign(this.cConfig, defaultConfig)
 
           return new Promise(resolve => resolve())
@@ -853,6 +856,26 @@ export default{
         }
 
       }
+    },
+
+    freeze(key){
+      const freezed = this.columns.find(_ => _.freeze)
+      if(freezed){
+        delete freezed.freeze
+      }
+
+      const column = this.columns.find(_ => _.key === key)
+      if(column){
+        column.freeze = true
+      }
+    },
+
+    unfreeze(key){
+
+      const column = this.columns.find(_ => _.key === key)
+      if(column){
+        delete column.freeze
+      }
     }
 
   },
@@ -1079,6 +1102,10 @@ export default{
 
     computedSrc(){
       return this.src ?? `${this.controller}.load`
+    },
+
+    freezeLeft(){
+      return (this.preset?.columns).findIndex(_ => _.freeze) + 1
     }
 
   },

package/src/components/VirtualTable.vue

@@ -5,11 +5,15 @@
       <table :class="$style.table">
         <thead>
           <tr>
-            <th v-for="column in freezeLeftColumns" :style="thStyle(column)" :class="thClass(column)"
+            <th v-for="column in freezeLeftColumns"
+                :ref="`column${column.key}`"
+                :style="thStyle(column)"
+                :class="`${$style.freezed} ${thClass(column)}`"
                 v-tooltip="column.tooltip">
-              <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
-              <div v-else :class="headerColumnClass(column)">
-                <span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
+              <div :class="headerColumnClass(column)"
+                   @click="$refs.columnMenu.open($refs[`column${column.key}`][0], { key:column.key, freeze:column.freeze })">
+                <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+                <span v-else>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
               </div>
               <div :class="$style.separator" @mousedown="startResize($event, column)"></div>
             </th>
@@ -21,11 +25,15 @@
         <table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
           <thead>
             <tr>
-              <th v-for="column in unfreezedColumns" :style="thStyle(column)" :class="thClass(column)"
+              <th v-for="column in unfreezedColumns"
+                  :ref="`column${column.key}`"
+                  :style="thStyle(column)"
+                  :class="thClass(column)"
                   v-tooltip="column.tooltip">
-                <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
-                <div v-else :class="headerColumnClass(column)">
-                  <span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
+                <div :class="headerColumnClass(column)"
+                     @click="$refs.columnMenu.open($refs[`column${column.key}`][0], { key:column.key, freeze:column.freeze })">
+                  <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+                  <span v-else>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
                 </div>
                 <div :class="$style.separator" @mousedown="startResize($event, column)"></div>
               </th>
@@ -34,6 +42,32 @@
           </thead>
         </table>
       </div>
+
+      <ContextMenu ref="columnMenu" position="bottom-left" class="mt-2 rounded-md">
+        <template #default="{ context }">
+          <div class="flex flex-col min-w-[200px] min-h-[160px]">
+
+            <br />
+
+            <button v-if="!context?.freeze" class="w-full p-2 border-y-[1px] border-text-50 text-left flex flex-row px-3 items-center menu-item"
+                    @click="freeze(context.key)">
+              <div class="w-[24px]">
+                <svg width="14" height="14" class="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="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"/></svg>
+              </div>
+              Freeze
+            </button>
+
+            <button v-else class="w-full p-2 border-y-[1px] border-text-50 text-left flex flex-row px-3 items-center menu-item"
+                    @click="unfreeze(context.key)">
+              <div class="w-[24px]">
+                <svg width="14" height="14" class="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="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"/></svg>
+              </div>
+              Unfreeze
+            </button>
+
+          </div>
+        </template>
+      </ContextMenu>
 		</div>
 
 		<div ref="cont" class="flex-1 overflow-y-auto" @scroll.passive="handleScroll">
@@ -136,11 +170,12 @@
           <div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
             <h5 class="text-text-300">No data available</h5>
           </div>
-          <slot name="end"></slot>
         </div>
 
       </div>
 
+      <slot name="end"></slot>
+
       <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
         <table :class="$style.table">
           <tbody>
@@ -172,7 +207,7 @@ export default{
 
   inject: [ 'emitRoot', 'listStyle' ],
 
-	emits: [ 'scroll-end', 'item-click' ],
+	emits: [ 'freeze', 'unfreeze', 'scroll-end', 'item-click' ],
 
 	props:{
 
@@ -405,9 +440,24 @@ export default{
     thClass(column){
       let classNames = []
 
+      let align
       if(column.align){
-        classNames.push(`text-${column.align}`)
+        align = column.align
+      }
+      else{
+        switch(column.type){
+          case 'currency':
+          case 'number':
+            align = 'right'
+            break
+
+          default:
+            if(column.key.startsWith('_'))
+              align = 'center'
+            break
+        }
       }
+      classNames.push(`text-${align}`)
 
       return classNames.join(' ')
     },
@@ -691,11 +741,18 @@ export default{
 			switch(column.type){
 
 				case 'date':
+				case 'datetime':
 					dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
 					val = dayjs(value)
 					text = val.isValid() ? val.format(dateFormat) : value
 					break
 
+				case 'time':
+					dateFormat = column.format ?? ' HH:mm:ss'
+					val = dayjs(value)
+					text = val.isValid() ? val.format(dateFormat) : value
+					break
+
 				case 'currency':
 					const num = parseInt(value)
 					text = !isNaN(num) ? num.toLocaleString() : ''
@@ -729,7 +786,15 @@ export default{
 
 		setState(state){
 			this.state = state
-		}
+		},
+
+    freeze(key){
+      this.$emit('freeze', key)
+    },
+
+    unfreeze(key){
+      this.$emit('unfreeze', key)
+    }
 
 	},
 
@@ -882,4 +947,8 @@ export default{
   @apply px-3 uppercase font-bold;
 }
 
+.freezed{
+  @apply bg-base-500;
+}
+
 </style>

package/src/widgets/CarouselSetting.vue

@@ -40,6 +40,12 @@
                 <Checkbox v-model="item.props.useLegend" @change="apply"/>
               </div>
             </div>
+            <div>
+              <label class="text-text-400">Prev/Next</label>
+              <div class="mt-1">
+                <Checkbox v-model="item.props.useNextPrev" @change="apply"/>
+              </div>
+            </div>
             <div>
               <label class="text-text-400">Infinite</label>
               <div class="mt-1">

package/src/widgets/EmbeddedVideoSetting.vue

@@ -1,11 +1,13 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-			<label class="text-text-400">Video URL</label>
-			<Textbox v-model="item.props.videoUrl"
-							 @keyup.enter="$emit('change')" />
-		</div>
+    <div class="p-6 py-4 flex flex-col gap-4">
+      <div>
+        <label class="text-text-400">Video URL</label>
+        <Textbox v-model="item.props.videoUrl"
+                 @keyup.enter="$emit('change')" />
+      </div>
+    </div>
 
 		<ComponentSetting2 :item="item"
 											:view-type="viewType"

package/src/widgets/StyleSetting.vue

@@ -400,10 +400,14 @@ export default{
           ['Montserrat', 'Montserrat, sans-serif'],
           ['Noto Sans', '"Noto Sans", sans-serif'],
           ['Oswald', 'Oswald, sans-serif'],
+          ['Oxygen', 'Oxygen, sans-serif'],
           ['Poppins', 'Poppins, sans-serif'],
+          ['Quantico', 'Quantico, sans-serif'],
           ['Raleway', 'Raleway, sans-serif'],
+          ['Reddit Sans', '"Reddit Sans", sans-serif'],
           ['Roboto', '"Roboto", sans-serif'],
           ['Roboto Slab', '"Roboto Slab", serif'],
+          ['Volkhov', 'Volkhov, serif'],
           ['Work Sans', '"Work Sans", serif'],
         ],
 

package/src/widgets/WebPageBuilder.vue

@@ -754,10 +754,14 @@ export default{
         'Montserrat, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');`,
         '"Noto Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');`,
         'Oswald, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');`,
+        'Oxygen, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');`,
         'Poppins, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');`,
+        'Quantico, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Quantico:wght@400;700&display=swap"');`,
         'Raleway, sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');`,
+        '"Reddit Sans", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:wght@400;700&display=swap');`,
         '"Roboto", sans-serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');`,
         '"Roboto Slab", serif': `@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;800&display=swap');`,
+        'Volkhov, serif': `@import url('https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&display=swap');`,
         '"Work Sans", serif': `@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');`,
       }