@mixd-id/web-scaffold 0.2.240705 → 0.2.250801009

package/docs/components/Dashboard.md

@@ -0,0 +1,56 @@
+# Dashboard
+Dashboard components
+
+## Configs
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| params | Object | {} | | Dashboard parameters |
+| params.presetUid | String | "" | | Preset unique identifier |
+
+## Samples
+```json
+{
+  "params": {
+    "presetUid": "abc",
+    "viewUid": "def"
+  },
+  
+  "presets": [
+
+    {
+      "name": "Preset Name",
+      
+      "views": [
+        {
+          "type": "Grid",
+          "uid": ":uid"
+        }
+      ],
+      
+      "datasource": {
+        
+        ":uid": {
+          "uid": ":uid",
+          "datasourceUid": "234",
+          "filters": [],
+          "sorts": [],
+          "groups": [],
+          "pivot": []
+        },
+        
+      }
+      
+    }
+    
+  ]
+}
+```
+
+
+## Sub Components
+
+### Dashboard Configs
+Dashboard configuration panel
+
+### Dashboard Component Selector
+Component selector for adding component to preset views

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.2.240705",
+  "version": "0.2.250801009",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -12,7 +12,6 @@
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
     "./components/*": "./src/components/*",
-    "./mixin/*": "./src/mixin/*",
     "./widgets/*": "./src/widgets/*",
     "./mixin/component": "./src/mixin/component.js",
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
@@ -21,58 +20,67 @@
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"
     },
+    "./helpers.js": "./src/utils/helpers.js",
+    "./helpers.mjs": "./src/utils/helpers.mjs",
+    "./queue": "./src/utils/queue.js",
     "./wss": {
       "require": "./src/utils/wss.js",
       "import": "./src/utils/wss.mjs"
     },
+    "./wss.js": "./src/utils/wss.js",
+    "./wss.mjs": "./src/utils/wss.mjs",
     "./importer": "./src/utils/importer.js",
     "./listpage1": "./src/utils/listpage1.js",
     "./dashboard": "./src/utils/dashboard.js",
     "./listview": "./src/utils/listview.js",
     "./preset-selector": {
-      "require": "./src/utils/preset-selector.js",
+      "require": "./src/utils/preset-selector.cjs",
       "import": "./src/utils/preset-selector.mjs"
     },
-    "./web": "./src/utils/web.js"
+    "./hooks/*": "./src/hooks/*",
+    "./preset-selector.cjs": "./src/utils/preset-selector.cjs",
+    "./preset-selector.js": "./src/utils/preset-selector.js",
+    "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
+    "./list": {
+      "import": "./src/utils/list.mjs"
+    },
+    "./list.mjs": "./src/utils/list.mjs",
+    "./web": {
+      "require": "./src/utils/web.js",
+      "import": "./src/utils/web.mjs"
+    }
   },
   "dependencies": {
-    "@faker-js/faker": "^7.3.0",
-    "@googlemaps/js-api-loader": "^1.15.1",
+    "@googlemaps/js-api-loader": "^1.16.8",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
+    "axios": "1.8.2",
+    "bcrypt": "^5.1.1",
     "chart.js": "^4.2.1",
     "compression": "^1.7.4",
-    "cookie-parser": "^1.4.6",
-    "cors": "^2.8.5",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.2",
     "eventemitter2": "^6.4.7",
-    "events": "^3.3.0",
     "exceljs": "^4.3.0",
-    "express": "^4.18.1",
     "file-type": "^18.2.1",
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "marked": "^16.4.1",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
-    "nprogress": "^0.2.0",
     "pinia": "^2.0.2",
-    "prismjs": "^1.28.0",
+    "prismjs": "1.30.0",
     "redis": "^4.6.13",
-    "serve-static": "^1.15.0",
+    "sequelize": "^6.37.7",
     "tailwindcss": "^3.2.4",
+    "tinycolor2": "^1.6.0",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",
     "vue-router": "^4.0.14",
     "ws": "^8.16.0"
   },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^2.2.0",
-    "autoprefixer": "^10.4.4",
-    "postcss": "^8.4.12",
-    "vite": "^2.8.0"
-  },
   "description": "This scaffold based on express vitejs vuejs",
   "repository": {
     "type": "git",

package/src/components/404.vue

@@ -0,0 +1,61 @@
+<template>
+	<div :class="$style.el">
+
+    <div>
+      <h1>{{ title }}</h1>
+      <p>{{ description }}</p>
+    </div>
+
+    <slot>
+      <component v-if="items?.length > 0"
+                 v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+
+      <router-link v-else :to="{ path:'/' }" class="text-primary">
+        Back to Home
+      </router-link>
+    </slot>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  props: {
+
+    description: {
+      type: String,
+      default: 'The page you are looking for does not exist.'
+    },
+
+    title: {
+      type: String,
+      default: 'Page Not Found'
+    },
+
+    items: Array
+
+  },
+
+  methods: {
+
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply w-full max-w-[600px] mx-auto;
+  @apply flex flex-col gap-8 items-center justify-center;
+  @apply min-h-[60vh]
+}
+
+</style>

package/src/components/AccountIcon.vue

@@ -0,0 +1,19 @@
+<template>
+	<button type="button">
+
+  </button>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Ahref.vue

@@ -55,7 +55,7 @@ export default {
 <style module>
 
 .button{
-	@apply p-2 h-[var(--h-cp)];
+	@apply p-2;
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
 	@apply rounded-lg;

package/src/components/Alert.vue

@@ -54,14 +54,9 @@
 <script>
 
 import {copyToClipboard, unPascalCase} from "../utils/helpers.mjs";
-import Button from "./Button.vue";
 
 export default{
 
-  components: {
-    Button
-  },
-
 	methods: {
 
 		/**
@@ -90,12 +85,8 @@ export default{
 		},
 
 		onAfterAppear(){
-      window.setTimeout(() => {
-        console.log(this.$refs)
-      }, 2000)
-			//this.$refs.btnOK.focus()
+			this.$refs.btnOK.focus()
 			this.$emit('appear')
-
 		},
 
 		onConfirm(){
@@ -206,15 +197,15 @@ export default{
 .alert{
 	@apply fixed top-0 left-0 flex w-screen h-screen;
 	@apply items-center justify-center bg-white/50 backdrop-blur-md;
-	z-index: 60;
+	z-index: 150;
 }
 [data-theme="dark"] .alert{
   @apply bg-black/50;
 }
 
 .alert>*{
-	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
-	@apply border-[1px] border-text-50;
+	@apply max-h-[60vh] overflow-y-auto bg-base-400 dark:bg-base-300 rounded-xl;
+	@apply border-[1px] border-border-50;
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
 }
 

package/src/components/ArrayList.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="$style.comp">
+    <div class="flex-1 flex flex-row flex-wrap gap-1">
+      <div v-for="item in items">
+        <slot name="default" :item="item">
+          <div :class="$style.item">
+            {{ item.name }}
+
+            <button type="button" @click="$emit('remove', item)">
+              <svg width="11" height="11" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+            </button>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <button type="button" class="p-2" @click="$emit('add')">
+      <svg width="14" height="14" class="fill-text-300 hover: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="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/></svg>
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default{
+
+  emits: [ 'add', 'remove' ],
+
+  props: {
+    items: Array
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply min-w-[200px] p-1;
+  @apply border-[1px] border-border-200 bg-base-300 hover:border-border-300 rounded-lg;
+  @apply flex flex-row items-start flex-nowrap;
+}
+
+.item{
+  @apply border-[1px] border-border-200 hover:border-border-300 rounded-lg p-1 px-2;
+  @apply flex flex-row items-center gap-2;
+}
+
+</style>

package/src/components/Article.vue

@@ -1,19 +1,16 @@
 <template>
-	<div :class="$style.comp" :style="computedStyle">
-    <article ref="article" :class="$style.article"
-             v-html="computedHtml"
-             :contenteditable="editMode === 1"
-             @input="onInput"
-             @click="onClick"
-             @paste="onPaste"></article>
-  </div>
+  <article :class="$style.article"
+           v-html="computedHtml"
+           :style="computedStyle"
+           @input="onInput"
+           @click="onClick"
+           @paste="onPaste" />
 </template>
 
 <script>
 
-import { componentMixin } from '../mixin/component';
+import {componentMixin} from '../mixin/component';
 import {getSelection, restoreSelection, saveSelection} from "../utils/selection";
-import {applyDatasourceReplacer} from "../utils/helpers.mjs";
 
 export default{
 
@@ -28,7 +25,7 @@ export default{
 	methods: {
 
 		getSelection(){
-			const { text = '', href = '', target = '' } = saveSelection(this.$refs.article)
+			const { text = '', href = '', target = '' } = saveSelection(this.$el)
 			return {
 				text,
 				href,
@@ -56,7 +53,7 @@ export default{
 
 		onClick(){
 			if(this.editMode){
-				let { element } = getSelection(this.$refs.article)
+				let { element } = getSelection(this.$el)
 
 				const table = this.closest(element, 'table')
 
@@ -82,7 +79,7 @@ export default{
 				uid: this.uid,
 				type: 'setProp',
 				value: {
-					htmlText: this.$refs.article.innerHTML
+					htmlText: this.$el.innerHTML
 				}
 			}, '*')
 		},
@@ -101,7 +98,7 @@ export default{
 
 		addTableColumn(){
 
-			let { element } = getSelection(this.$refs.article)
+			let { element } = getSelection(this.$el)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -130,7 +127,7 @@ export default{
 
 		addTableRow(){
 
-			let { element } = getSelection(this.$refs.article)
+			let { element } = getSelection(this.$el)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -154,7 +151,7 @@ export default{
 
 		removeTableRow(){
 
-			let { element } = getSelection(this.$refs.article)
+			let { element } = getSelection(this.$el)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -171,7 +168,7 @@ export default{
 
 		removeTableColumn(){
 
-			let { element } = getSelection(this.$refs.article)
+			let { element } = getSelection(this.$el)
 			if(element.nodeType !== 1)
 				element = element.parentNode
 			const table = this.closest(element, 'table')
@@ -232,7 +229,7 @@ export default{
 
 						case 'saveSelection':
 						case 'getSelection':
-							const sel = saveSelection(this.$refs.article)
+							const sel = saveSelection(this.$el)
 							const { text, target, href } = sel
 							result = {
 								text,
@@ -257,7 +254,7 @@ export default{
 							break
 
 						case 'removeLink':
-							const { element } = getSelection(this.$refs.article)
+							const { element } = getSelection(this.$el)
 
 							let a = element
 							while(a && a.tagName !== 'A'){
@@ -316,7 +313,7 @@ export default{
 									document.execCommand(type, false, value);
 									break
 							}
-              this.$refs.article.focus()
+              this.$el.focus()
 							break
 
 					}
@@ -325,16 +322,16 @@ export default{
 				}
 
 			})
+
+      this.$el.setAttribute('contenteditable', 'true')
 		}
 	},
 
   computed: {
 
     computedHtml(){
-      if(this.editMode && this.editMode === 1)
-        return this.htmlText
-      return applyDatasourceReplacer(this.htmlText, this.pageData)
-    },
+      return this.htmlText
+    }
 
   },
 
@@ -350,11 +347,8 @@ export default{
 
 <style module>
 
-.comp{
-  @apply relative;
-}
-
 .article{
+  @apply relative;
 }
 .article *{
 }
@@ -382,11 +376,11 @@ export default{
 .article font[size='7']{ @apply text-4xl; }
 
 .article table{
-	@apply border-[1px] border-text-200 border-collapse w-full;
+	@apply border-[1px] border-border-200 border-collapse w-full;
 	table-layout: fixed;
 }
 .article table th, .article table td{
-	@apply border-[1px] border-text-200 p-3 text-left;
+	@apply border-[1px] border-border-200 p-3 text-left;
 	@apply break-words;
 }