@mixd-id/web-scaffold 0.1.2301231369 → 0.2.240702

package/LICENSE

@@ -1,3 +1,4 @@
+
 MIT License
 
 Copyright (c) 2022 mixd-id

package/docs/components/Header2.md

@@ -0,0 +1,16 @@
+# Header 2
+
+### Properties
+| Name                     | Type   | Default | Description                |
+|--------------------------|--------|---------|----------------------------|
+| `logo`                   | Array  | []      | Responsive Array of Object |
+| `logo[].url`             | String |         | Logo url                   |
+| `icons`                  | Array  | {}      | Responsive Array of Object |
+| `icons[].items`          | Array  | {}      | Array of Object            |
+| `icons[].items[].icon`   | String |         | (required) icon value      |
+| `icons[].items[].target` | String |    | (required) target value    |
+| `icons[].items[].text`   | String | route   | route, search              |
+| `menu[].items[].icon`    | String |      | svg, image                 |
+| `menu[].items[].text`    | String |      |                  |
+| `menu[].items[].target`  | String |      |               |
+| `menu[].items[].items`   | Array  |      |            |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231369",
+  "version": "0.2.240702",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -11,12 +11,26 @@
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
+    "./components/*": "./src/components/*",
+    "./mixin/*": "./src/mixin/*",
+    "./widgets/*": "./src/widgets/*",
+    "./middleware/http/trim-string": "./src/middleware/http/trim-string.js",
     "./helpers": {
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"
     },
+    "./wss": {
+      "require": "./src/utils/wss.js",
+      "import": "./src/utils/wss.mjs"
+    },
     "./importer": "./src/utils/importer.js",
-    "./listpage1": "./src/utils/listpage1.js"
+    "./listpage1": "./src/utils/listpage1.js",
+    "./listview": "./src/utils/listview.js",
+    "./preset-selector": {
+      "require": "./src/utils/preset-selector.js",
+      "import": "./src/utils/preset-selector.mjs"
+    },
+    "./web": "./src/utils/web.js"
   },
   "dependencies": {
     "@faker-js/faker": "^7.3.0",
@@ -24,13 +38,14 @@
     "@tailwindcss/line-clamp": "^0.4.0",
     "@vueuse/core": "^9.0.2",
     "adm-zip": "^0.5.10",
-    "axios": "^1.3.4",
     "chart.js": "^4.2.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
-    "daisyui": "^2.19.0",
+    "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",
@@ -40,11 +55,13 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",
+    "redis": "^4.6.13",
     "serve-static": "^1.15.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",
-    "vue-router": "^4.0.14"
+    "vue-router": "^4.0.14",
+    "ws": "^8.16.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.2.0",

package/src/App.vue

@@ -4,6 +4,14 @@
 
 <script>
 
+export default {
+  name: 'App',
+
+  setup(){
+
+  }
+}
+
 </script>
 
 <style>
@@ -14,4 +22,4 @@
 <style module>
 
 
-</style>
+</style>

package/src/components/Ahref.vue

@@ -1,34 +1,200 @@
 <template>
-	<a v-if="isExternalLink" :href="href" :target="target">
-		<slot />
+	<a v-if="isExternalLink" :href="href" :target="target" :class="compClass" :style="computedStyle">
+		<slot>{{ text }}</slot>
 	</a>
-	<router-link v-else :to="href" :target="target">
-		<slot />
+	<router-link v-else :to="href" :target="target" :class="compClass">
+		<slot>{{ text }}</slot>
 	</router-link>
 </template>
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+
 export default {
 
+	mixins: [ componentMixin ],
+
 	props: {
 
-		href: String,
+		href: {
+			type: String,
+			default: ''
+		},
+
+		target: String,
 
-		target: String
+		text: String,
+
+		variant: {
+			type: [ String, Number ],
+			default: "primary" // primary|secondary|outline, default:primary
+		},
 
 	},
 
 	computed: {
 
 		isExternalLink() {
-			return typeof this.href === 'string' && (this.href.startsWith('http') || this.href.startsWith('tel:'))
-		}
+			return typeof this.href === 'string' && this.href.indexOf('://') > 0
+		},
+
+		compClass(){
+			return [
+				this.$style.button,
+				this.$style['button-' + this.variant]
+			]
+				.filter(_ => _)
+				.join(' ')
+		},
+
 	},
 }
 </script>
 
 <style module>
 
+.button{
+	@apply p-2 h-[var(--h-cp)];
+	@apply relative flex items-center justify-center;
+	@apply whitespace-nowrap text-ellipsis overflow-hidden;
+	@apply rounded-lg;
+}
+.button>*:first-child{
+	@apply flex items-center justify-center
+}
+.button:disabled{
+	@apply opacity-60;
+}
+.button:active{
+	@apply top-[1px] left-[1px] relative;
+}
+
+.button-primary{
+	@apply bg-primary-500 text-white rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--primary-700));
+	border: solid 1px rgb(var(--primary-400));
+}
+.button-primary:focus{
+	outline-color: rgb(var(--primary-800));
+	border-color: rgb(var(--primary-600));
+}
+.button-primary:hover{
+	@apply bg-primary-600;
+	outline-color: rgb(var(--primary-800))
+}
+.button-primary:disabled{
+	@apply bg-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply top-0 left-0;
+	outline: solid 1px rgb(var(--primary-700));
+}
+.button-primary *{
+	@apply text-white fill-white;
+}
+.button-primary.loading *{
+	@apply fill-transparent
+}
+.button-primary .svgBg{
+	stroke: #fff;
+	stroke-opacity: 25%;
+}
+.button-primary .svgHg{
+	fill: #fff;
+	fill-opacity: 75%;
+}
+
+.button-outline{
+	@apply bg-transparent text-primary-500;
+	outline: solid 1px rgb(var(--primary-700));
+}
+.button-outline:hover{
+	outline-color: rgb(var(--primary-800))
+}
+.button-outline:disabled{
+	@apply opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply text-text border-primary-500;
+}
+.button-outline *{
+	@apply text-primary-500 fill-primary-500;
+}
+.button-outline.loading *{
+	@apply fill-transparent
+}
+.button-outline .svgBg{
+	stroke: rgb(var(--primary-600));
+	stroke-opacity: 50%;
+}
+.button-outline .svgHg{
+	fill: rgb(var(--primary));
+	fill-opacity: 100%;
+}
+
+.button-secondary{
+	@apply bg-secondary text-text-500 rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--secondary-700));
+	border: solid 1px rgb(var(--secondary-400));
+}
+.button-secondary:hover{
+	@apply bg-secondary-600;
+	outline-color: rgb(var(--secondary-800))
+}
+.button-secondary:disabled{
+	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	outline: solid 1px rgb(var(--secondary-700));
+}
+.button-secondary *{
+	@apply text-text-500 fill-white;
+}
+.button-secondary.loading *{
+	@apply fill-transparent
+}
+.button-secondary .svgBg{
+	stroke: rgb(var(--text-400));
+	stroke-opacity: 25%;
+}
+.button-secondary .svgHg{
+	fill: rgb(var(--text-500));
+	fill-opacity: 75%;
+}
+
+.button-red{
+	@apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
+}
+.button-red:hover{
+	@apply bg-red-600 border-red-600;
+}
+.button-red:disabled{
+	@apply bg-red-500 border-red-500 opacity-50 top-0 left-0 cursor-not-allowed;
+}
+.button-red *{
+	@apply text-white fill-white;
+}
+.button-red.loading *{
+	@apply fill-transparent
+}
+.button-red .svgBg{
+	@apply stroke-red-400;
+	stroke-opacity: 50%;
+}
+.button-red .svgHg{
+	@apply fill-text-500;
+	fill-opacity: 100%;
+}
+
+.button-minimal{
+	@apply border-[2px] border-transparent;
+}
+.button-minimal:hover{
+}
+.button-minimal .svgBg{
+	stroke: rgb(var(--text-500));
+	stroke-opacity: 25%;
+}
+.button-minimal .svgHg{
+	fill: rgb(var(--text));
+	fill-opacity: 75%;
+}
 
-</style>
+</style>

package/src/components/Alert.vue

@@ -1,43 +1,48 @@
 <template>
 	<Teleport to=".YWxl">
 		<Transition name="alert-outer">
-			<div v-if="!!state" :class="$style.alert" ref="alert">
+			<div v-if="isOpen" :class="$style.alert" ref="alert">
 				<Transition name="alert" @after-appear="onAfterAppear" appear>
-					<div class="p-4 flex flex-col items-center leading-6">
-						
-						<slot v-if="$slots['icon']" name="icon"></slot>
-						<svg v-else-if="mode === 'alert'" width="100" height="100" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
-							<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
-							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
-						</svg>
-						<svg v-else-if="mode === 'confirm'" width="100" height="100" class="fill-text-300" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
-							<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
-							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
-						</svg>
-						
-						<div class="my-4 text-center flex-1 overflow-y-auto">
-							<h5 class="my-1 break-all">{{ title }}</h5>
-							<p class="break-all overflow-y-auto whitespace-pre-line text-left">{{ description }}</p>
+					<div :class="$style.cont1">
+
+						<div :class="$style.cont2">
+							<slot v-if="$slots['icon']" name="icon"></slot>
+							<svg width="100" height="100" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 13.75C12.4142 13.75 12.75 13.4142 12.75 13V8.00001C12.75 7.5858 12.4142 7.25001 12 7.25001C11.5858 7.25001 11.25 7.5858 11.25 8.00001V13C11.25 13.4142 11.5858 13.75 12 13.75Z"/>
+								<path d="M13 16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16C11 15.4477 11.4477 15 12 15C12.5523 15 13 15.4477 13 16Z"/>
+								<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
+							</svg>
+							<h5 :class="$style.title">{{ title }}</h5>
 						</div>
-						
-						<div class="mt-4" v-if="mode === 'alert'">
-							<Button @click="$emit('dismiss')" class="min-w-[88px]">
-								<strong class="px-4">
-									{{ text }}
-								</strong>
-							</Button>
+
+						<div :class="$style.details">
+							<p class="text-center break-words whitespace-pre-line" v-if="message">{{ message }}</p>
+							<p class="text-center break-words max-w-[420px] whitespace-pre-line" v-if="stack">{{ stack }}</p>
+						</div>
+
+						<div :class="$style.details" v-if="details">
+							<div v-if="!showDetails" class="text-center">
+								<button type="button" class="text-primary" @click="showDetails = true">Open Details</button>
+							</div>
+							<div v-else class="flex flex-col gap-4">
+								<div v-for="(v, k) in details">
+									<small class="font-bold">{{ k }}</small>
+									<div class="block break-all text-sm">{{ v }}</div>
+								</div>
+
+								<div class="self-stretch text-center">
+									<button type="button" class="text-primary text-sm" @click="copy">Copy Details</button>
+								</div>
+							</div>
 						</div>
-						<div class="mt-4 flex flex-row gap-2" v-else-if="mode === 'confirm'">
-							<Button @click="$emit('confirm')" class="min-w-[88px]">
+
+						<div>
+							<br />
+							<Button ref="btnOK" @click="onConfirm">
 								<strong class="px-4">
-									{{ text }}
+									{{ buttonText }}
 								</strong>
 							</Button>
-							<Button variant="minimal" @click="$emit('dismiss')" class="min-w-[88px] px-4 hover:text-primary">
-								Cancel
-							</Button>
 						</div>
 					</div>
 				</Transition>
@@ -48,69 +53,148 @@
 
 <script>
 
+import {copyToClipboard, unPascalCase} from "../utils/helpers.mjs";
+import Button from "./Button.vue";
+
 export default{
 
-	props: {
-		state: Object,
-		mode: {
-			type: String,
-			default: 'alert' // alert | confirm
+  components: {
+    Button
+  },
+
+	methods: {
+
+		/**
+		 * @param {object} obj - The alert object
+		 * @param {string} [obj.title] - The title of the alert
+		 * @param {string} obj.message - The message of the alert
+		 * @param {string} [obj.buttonText] - The text of the button
+		 * @param {function} [obj.onConfirm] - The callback function when the alert button is clicked
+		 */
+		open(obj){
+			this.alert = obj
+			this.isOpen = true
+			this.showDetails = false
+		},
+
+		close(){
+			this.isOpen = false
+		},
+
+		copy(){
+			const text = []
+			for(let key in this.details){
+				text.push(`${key}\n${this.details[key]}\n\n`)
+			}
+			copyToClipboard(text.join("\n"))
 		},
-		text: {
-			type: String,
-			default: 'OK'
+
+		onAfterAppear(){
+      window.setTimeout(() => {
+        console.log(this.$refs)
+      }, 2000)
+			//this.$refs.btnOK.focus()
+			this.$emit('appear')
+
+		},
+
+		onConfirm(){
+			if(typeof this.alert.onConfirm === 'function'){
+				this.alert.onConfirm()
+			}
+			this.close()
 		}
+
 	},
 
 	computed: {
 
+		buttonText(){
+			return this.alert.buttonText ?? this.$t('OK')
+		},
+
+    err(){
+      return this.alert.reason && this.alert.reason.response ? this.alert.reason.response.data :
+          (this.alert.response && this.alert.response.data ? this.alert.response.data : this.alert)
+    },
+
 		title(){
-			let title
 
-			if(this.state && this.state.title){
-				if(typeof this.state.title === 'object' && this.state.title.type === 'ValidationError'){
-					title = 'Validation error'
-				}
-				else{
-					title = this.state.title
-				}
+			if(this.err.title){
+				return this.err.title
+			}
+			else if(this.err.name){
+				return unPascalCase(this.err.name)
+			}
+			else if(this.err.type){
+				return unPascalCase(this.err.type)
 			}
+			else if(this.err.status){
+				return `Error ${this.err.status}`
+			}
+			else{
+				return this.$t('Alert')
+			}
+		},
 
-			return title
+		message(){
+			if(this.err.errors){
+				return typeof this.err.errors === 'object' &&
+            Object.keys(this.err.errors).length > 0 ?
+            Object.values(this.err.errors).map(_ => {
+              if(Array.isArray(_))
+                return _
+              return JSON.stringify(_)
+            })
+              .join("\n"):
+            this.err.errors
+			}
+      else if(this.err.reason){
+        if(this.err.reason.stack){
+          return this.err.reason.stack
+        }
+        else{
+          return this.err.reason
+        }
+      }
+			else if(this.err.message){
+				return this.err.message
+			}
+			else{
+				return ''
+			}
 		},
 
-		description(){
-			let description
+    stack(){
+      if(this.err.stack){
+        return this.err.stack
+      }
+    },
 
-			if(this.state){
+		details(){
 
-				if(typeof this.state.title === 'object' && this.state.title.type === 'ValidationError'){
-					description = {}
-					for(let key in this.state.title.errors){
-						this.state.title.errors[key].forEach((text) => {
-							description[text] = 1
-						})
-					}
-					description = Object.keys(description).join("\n")
-				}
-				else{
-					description = this.state.description
+			if(this.alert.details && typeof this.alert.details === 'object'){
+				const details = {}
+				for(let key in this.alert.details){
+					if([ 'name', 'title', 'message' ].includes(key)) continue
+
+					details[key] = typeof this.alert.details[key] === 'object' ?
+						JSON.stringify(this.alert.details[key]) :
+						this.alert.details[key]
 				}
+				return Object.keys(details).length > 0 ? details : null
 			}
 
-			return description
 		}
 
 	},
 
-	emits: [ 'appear', 'confirm', 'dismiss' ],
-
-	methods: {
-
-		onAfterAppear(){
-			this.$emit('appear')
+	data(){
+		return {
+			alert: {},
+			isOpen: false,
+			showDetails: false
 		}
-
 	}
 
 }
@@ -120,15 +204,37 @@ export default{
 <style module>
 
 .alert{
-	@apply fixed top-0 left-0 flex w-screen h-screen px-8;
-	@apply items-center justify-center bg-black/70 backdrop-blur-md;
+	@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;
 }
+[data-theme="dark"] .alert{
+  @apply bg-black/50;
+}
 
 .alert>*{
-	@apply max-h-[50vh] overflow-y-auto bg-base-500 rounded-xl;
+	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;
 	@apply border-[1px] border-text-50;
-	@apply min-w-[280px] max-w-[80vw] md:max-w-[400px];
+	@apply min-w-[280px] max-w-[80vw] md:max-w-[480px];
+}
+
+.cont1{
+	@apply flex flex-col items-center p-6 gap-1;
+}
+
+.cont2{
+	@apply flex flex-col items-center;
+}
+
+.title{
+	@apply text-center;
+}
+
+.details{
+	@apply flex-1 flex flex-col gap-4 overflow-auto min-h-[1.6rem] self-stretch;
+}
+.details::-webkit-scrollbar {
+	display: none;
 }
 
 </style>
@@ -157,4 +263,4 @@ export default{
 	opacity: 0;
 }
 
-</style>
+</style>