@mixd-id/web-scaffold 0.1.230406400 → 0.1.240411002

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406400",
+  "version": "0.1.240411002",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -14,7 +14,6 @@
     "./components/*": "./src/components/*",
     "./widgets/*": "./src/widgets/*",
     "./mixin/component": "./src/mixin/component.js",
-
     "./mixin/edit-mode": "./src/mixin/edit-mode.js",
     "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",
     "./helpers": {
@@ -24,31 +23,31 @@
     "./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"
     },
+    "./preset-selector.cjs": "./src/utils/preset-selector.cjs",
     "./preset-selector.js": "./src/utils/preset-selector.js",
     "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
-
-    "./web": "./src/utils/web.js"
+    "./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",
@@ -56,36 +55,26 @@
     "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",
     "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",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
-    "nprogress": "^0.2.0",
     "pinia": "^2.0.2",
     "prismjs": "1.30.0",
     "redis": "^4.6.13",
-    "sequelize": "^6.37.5",
-    "serve-static": "2.1.0",
+    "sequelize": "^6.37.6",
     "tailwindcss": "^3.2.4",
     "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/ChartBar.vue

@@ -7,10 +7,9 @@
 
 <script>
 
-import { Bar } from 'vue-chartjs';
-import Chart from 'chart.js/auto'
+import {Bar} from 'vue-chartjs';
 import dayjs from "dayjs";
-import groupBy from "lodash/groupBy";
+import {groupBy} from "../utils/helpers.mjs";
 
 export default{
 

package/src/components/ColorPicker3.vue

@@ -0,0 +1,94 @@
+<template>
+  <div :class="$style.comp">
+
+    <Dropdown v-model="mode" @change="calculate">
+      <option value="solid">Solid</option>
+      <option value="linear">Linear Gradient</option>
+      <option value="radial">Radial Gradient</option>
+    </Dropdown>
+
+    <div class="h-[8px]" :style="{ background:computedBackground }"></div>
+
+    <div v-if="mode === 'solid'">
+      <input type="color" v-model="color1" @change="calculate" />
+    </div>
+
+    <div v-else class="flex flex-row gap-3">
+      <input type="color" v-model="color1" @change="calculate" />
+      <div class="flex-1"></div>
+      <input type="color" v-model="color2" @change="calculate" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+  emits: [ 'update:modelValue' ],
+
+  props: {
+
+    modelValue: String
+
+  },
+
+  methods: {
+
+    calculate(){
+      this.$emit('update:modelValue', this.computedBackground)
+    }
+  },
+
+  mounted() {
+    console.log(this.modelValue)
+
+    if(`${this.modelValue ?? ''}`.substring(0, 1) === '#'){
+      this.color1 = this.modelValue
+      this.mode = 'solid'
+    }
+    else if(`${this.modelValue ?? ''}`.indexOf('linear-') >= 0){
+      const match = this.modelValue.match(/linear-gradient\(([^,]+),([^,]+),([^)]+)\)/)
+
+      this.mode = 'linear'
+      this.color1 = ((match ?? [])[2] ?? '').trim()
+      this.color2 = ((match ?? [])[3] ?? '').trim()
+    }
+    else if(`${this.modelValue ?? ''}`.indexOf('radial-') >= 0){
+      const match = this.modelValue.match(/radial-gradient\(([^,]+),([^,]+),([^)]+)\)/)
+
+      this.mode = 'radial'
+      this.color1 = ((match ?? [])[2] ?? '').trim()
+      this.color2 = ((match ?? [])[3] ?? '').trim()
+    }
+  },
+
+  data() {
+    return {
+      mode: "solid", // solid, linear, radial
+      color1: "#ff0000",
+      color2: "#0000ff",
+    };
+  },
+
+  computed: {
+    computedBackground() {
+      if (this.mode === "solid") {
+        return this.color1;
+      } else if (this.mode === "linear") {
+        return `linear-gradient(to right, ${this.color1}, ${this.color2})`;
+      } else {
+        return `radial-gradient(circle, ${this.color1}, ${this.color2})`;
+      }
+    },
+  },
+};
+</script>
+
+<style module>
+
+.comp {
+  @apply flex flex-col gap-2;
+}
+
+</style>

package/src/components/Confirm.vue

@@ -28,6 +28,8 @@
 							</Button>
 						</div>
 
+            <slot name="end"></slot>
+
 					</div>
 				</Transition>
 			</div>

package/src/components/ContextMenu.vue

@@ -209,7 +209,7 @@ export default {
 
 								default:
 									left = Math.round(rect.x)
-									top = Math.round(rect.y + rect.height + 8)
+									top = Math.round(rect.y + rect.height)
 									//maxHeight = window.innerHeight - Math.round(rect.y + rect.height + 16)
 									transformOrigin = 'top left'
 									break
@@ -226,8 +226,8 @@ export default {
 							}
 
 							if(top){
-								if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight - 16)){
-									top = window.innerHeight - (this.$refs.contextMenu.clientHeight + 16)
+								if(top + this.$refs.contextMenu.clientHeight >= (window.innerHeight)){
+									top = window.innerHeight - (this.$refs.contextMenu.clientHeight)
 
 									if(transformOrigin === 'top left'){
 										transformOrigin = 'bottom left'
@@ -251,6 +251,7 @@ export default {
 								top: top ? top +  'px' : top,
 								bottom: bottom ? bottom +  'px' : bottom,
 								maxHeight: maxHeight ? maxHeight + 'px' : maxHeight,
+                minWidth: `${caller.clientWidth}px`,
 								transformOrigin: transformOrigin
 							}
 
@@ -312,9 +313,10 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply fixed bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
 	@apply border-[2px] border-text-200 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
+  z-index: 100;
 	opacity: 0;
 }
 
@@ -326,7 +328,7 @@ export default {
 @media screen(md){
 
 	.contextMenu{
-		@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed bg-base-400 min-w-[150px] overflow-y-auto rounded-lg;
 		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 		opacity: 0;

package/src/components/Datepicker.vue

@@ -1,18 +1,45 @@
 <template>
 
-	<div v-if="mode === ''" :class="compClass">
-		<select v-model="DD">
-			<option disabled selected>Tanggal</option>
-			<option v-for="d in 31" :value="d.toString().padStart(2, '0')">{{ d }}</option>
-		</select>
-		<select v-model="MM">
-			<option disabled selected>Bulan</option>
-			<option v-for="mmm in months" :value="mmm[0]">{{ mmm[1] }}</option>
-		</select>
-		<select v-model="YYYY">
-			<option disabled selected>Tahun</option>
-			<option v-for="yyyy in years" :value="yyyy">{{ yyyy }}</option>
-		</select>
+	<div v-if="mode === ''" :class="compClass" class="divide-x divide-text-50">
+    <div class="w-[50px] flex flex-row items-center relative">
+      <select v-model="DD" class="text-left w-full flex-1 px-3">
+        <option disabled selected>Tanggal</option>
+        <option v-for="d in 31" :value="d.toString().padStart(2, '0')">{{ d }}</option>
+      </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="w-[60px] flex flex-row items-center relative">
+      <select v-model="MM" class="text-left w-full flex-1 px-3">
+        <option disabled selected>Bulan</option>
+        <option v-for="mmm in months" :value="mmm[0]">{{ mmm[1] }}</option>
+      </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="w-[70px] flex flex-row items-center relative">
+      <select v-model="YYYY" class="text-left w-full flex-1 px-3">
+        <option disabled selected>Tahun</option>
+        <option v-for="yyyy in years" :value="yyyy">{{ yyyy }}</option>
+      </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+        </svg>
+      </div>
+    </div>
+
 	</div>
 
   <div v-else :class="compClass">
@@ -70,7 +97,7 @@
 				<div class="grid grid-cols-7 gap-2 mt-2">
 					<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
 					<button type="button" :class="buttonStyle(d.value)"
-                  :disabled="(allowedDates && !allowedDates.includes(d.value)) || (onlyTodayAndFuture && isValidTodayAndFuture(d.value))"
+                  :disabled="(allowedDates && !allowedDates.includes(d.value)) || (onlyTodayAndFuture && isValidTodayAndFuture(d.value)) || (pastOnly && isPast(d.value))"
 									v-for="d in contextMenuDates" @click="setValue(d.value)">
 						{{ d.date }}
 					</button>
@@ -146,7 +173,8 @@ export default{
 
     allowedDates: Array,
 
-    onlyTodayAndFuture: Boolean
+    onlyTodayAndFuture: Boolean,
+    pastOnly: Boolean,
 
   },
 
@@ -274,6 +302,10 @@ export default{
       return val.localeCompare(this.today) < 0
     },
 
+    isPast(val){
+      return val.localeCompare(this.today) > 0
+    },
+
 		setValue(d){
 			this.$emit('update:modelValue', d)
 			this.$emit('change', d)
@@ -291,8 +323,7 @@ export default{
 <style module>
 
 .datepicker {
-	@apply min-h-[var(--h-cp)];
-	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
+	@apply inline-flex overflow-hidden cursor-pointer relative min-w-[160px];
   @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
 	@apply cursor-pointer;
 }
@@ -300,7 +331,7 @@ export default{
 	@apply hover:border-text-300
 }
 .datepicker select{
-	@apply appearance-none p-2 bg-transparent text-center w-full outline-none;
+	@apply appearance-none p-2 bg-transparent text-center outline-none;
 }
 .datepicker input{
 	@apply appearance-none p-2 bg-transparent w-full outline-none;
@@ -310,7 +341,7 @@ export default{
 }
 .datepicker input[type=radio]{
 	@apply hidden;
-}K
+}
 .datepicker input[type=radio]:checked + label{
 }
 
@@ -347,11 +378,7 @@ export default{
 }
 
 .mode-{
-	@apply flex flex-row gap-2;
-}
-.mode- select{
-	@apply rounded-lg;
-	@apply min-h-[var(--h-cp)];
+	@apply inline-flex flex-row;
 }
 .mode- select:first-child{
 	@apply w-12;

package/src/components/Dropdown.vue

@@ -179,6 +179,9 @@ export default {
   @apply bg-base-50 text-text;
 }
 
+.dropdown select[disabled]{
+  @apply cursor-not-allowed;
+}
 .dropdown option[disabled]{
 	@apply text-text-300;
 }
@@ -190,7 +193,7 @@ export default {
 }
 
 .arrow svg{
-	@apply block fill-text-200;
+	@apply block fill-text-300;
 }
 .dropdown:hover svg{
 	@apply fill-text-300;

package/src/components/Flex.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.Flex" :style="computedStyle">
 
-		<component v-for="(item, idx) in items"
+		<component v-for="item in items"
 							 :is="item.type"
                :key="item.key"
 							 :="item" />

package/src/components/HTMLEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="overflow-x-auto bg-text-50" :class="containerClass">
+		<div class="overflow-x-auto bg-text-50" :class="containerClass" v-if="!readonly">
 			<div class="flex flex-row">
 				<button class="p-3" type="button" @click="format('bold')">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
@@ -34,7 +34,7 @@
 			</div>
 		</div>
 
-		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste" spellcheck="false"
+		<article ref="article" :contenteditable="!readonly" v-html="html" @paste="onPaste" spellcheck="false"
 						 @input="onInput" @click="onClick" :class="itemClass"
 						 @blur="onBlur">
 		</article>
@@ -262,6 +262,7 @@ export default{
 		uploadImageFn: String,
     containerClass: String,
     itemClass: String,
+    readonly: Boolean
 	},
 
 	computed: {

package/src/components/Image.vue

@@ -5,7 +5,11 @@
        @mousedown="onMouseDown"
        :style="computedStyle">
 
-		<slot v-if="status === 0" name="empty" :instance="this"></slot>
+		<slot v-if="status === 0" name="empty" :instance="this">
+      <div :class="$style.loading">
+        <svg width="50%" height="50%" 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="M447.1 32h-384C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"/></svg>
+      </div>
+    </slot>
 
     <slot v-else-if="status === 1" name="loading">
       <div :class="$style.loading + (spinnerType === 'shimmer' ? ' ' + $style.shimmer : '')">
@@ -16,7 +20,11 @@
     <div v-else-if="status === 2 && actualSrc.indexOf('<svg') >= 0" v-html="actualSrc"></div>
     <img v-else-if="status === 2" :class="computedItemClass" :src="actualSrc" ref="img" :alt="alt" />
 
-		<slot v-else-if="status === 3" name="error" :instance="this"></slot>
+		<slot v-else-if="status === 3" name="error" :instance="this">
+      <div :class="$style.loading">
+        <svg width="50%" height="50%" class="fill-text-300" 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="M630.8 469.1l-55.95-43.85C575.3 422.2 575.1 419.2 575.1 416l.0034-320c0-35.35-28.65-64-64-64H127.1C113.6 32 100.4 36.98 89.78 45.06L38.81 5.113C28.34-3.058 13.31-1.246 5.109 9.192C-3.063 19.63-1.235 34.72 9.187 42.89L601.2 506.9C605.6 510.3 610.8 512 615.1 512c7.125 0 14.17-3.156 18.91-9.188C643.1 492.4 641.2 477.3 630.8 469.1zM223.1 149.6l-64.29-50.39C164.2 97.15 169.9 96 175.1 96c26.51 0 48 21.49 48 48C223.1 145.9 223.4 147.7 223.1 149.6zM331.2 234.3l23.45-35.18C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l103.9 155.9L331.2 234.3zM145.1 416c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l16.43-24.65L63.99 146.8L63.99 416c0 35.35 28.65 64 64 64h361.1l-81.66-64H145.1z"/></svg>
+      </div>
+    </slot>
 
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 
@@ -209,9 +217,9 @@ export default{
 			else if(Array.isArray(this.src)){
 
 				const src = {}
-				src['all'] = (this.src[0].indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' : '') + this.src[0]
+				src['all'] = ((this.src[0] ?? '').indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' : '') + this.src[0]
 				if(this.src[1]){
-					src['md'] = (this.src[1].indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' : '') + this.src[1]
+					src['md'] = ((this.src[1] ?? '').indexOf('://') < 0 ? import.meta.env.VITE_IMAGE_HOST + '/' : '') + this.src[1]
 				}
 
 				let imgSrc