@mixd-id/web-scaffold 0.1.230406001

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 mixd-id
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Web Scaffold for mixd.id
+
+This scaffold based on express vitejs vuejs

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@mixd-id/web-scaffold",
+  "private": false,
+  "version": "0.1.230406001",
+  "scripts": {
+    "dev": "vite serve",
+    "build": "vite build",
+    "start": "node server.js"
+  },
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./themes/default": "./src/themes/default/index.js",
+    "./helpers": {
+      "require": "./src/utils/helpers.js",
+      "import": "./src/utils/helpers.mjs"
+    },
+    "./importer": "./src/utils/importer.js",
+    "./listpage1": "./src/utils/listpage1.js"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^7.3.0",
+    "@googlemaps/js-api-loader": "^1.15.1",
+    "@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",
+    "dayjs": "^1.11.2",
+    "exceljs": "^4.3.0",
+    "express": "^4.18.1",
+    "file-type": "^18.2.1",
+    "glob": "^8.0.3",
+    "lodash": "^4.17.21",
+    "md5": "^2.3.0",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.14",
+    "prismjs": "^1.28.0",
+    "serve-static": "^1.15.0",
+    "tailwindcss": "^3.2.4",
+    "vue": "^3.2.25",
+    "vue-chartjs": "^5.2.0",
+    "vue-router": "^4.0.14"
+  },
+  "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",
+    "url": "git+https://github.com/mixd-id/web-scaffold.git"
+  },
+  "keywords": [
+    "mixd",
+    "mixd.id",
+    "mixd-id"
+  ],
+  "author": "mixd.id",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mixd-id/web-scaffold/issues"
+  },
+  "homepage": "https://github.com/mixd-id/web-scaffold#readme"
+}

package/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+	<router-view></router-view>
+</template>
+
+<script>
+
+</script>
+
+<style>
+
+
+</style>
+
+<style module>
+
+
+</style>

package/src/components/Ahref.vue

@@ -0,0 +1,34 @@
+<template>
+	<a v-if="isExternalLink" :href="href" :target="target">
+		<slot />
+	</a>
+	<router-link v-else :to="href" :target="target">
+		<slot />
+	</router-link>
+</template>
+
+<script>
+
+export default {
+
+	props: {
+
+		href: String,
+
+		target: String
+
+	},
+
+	computed: {
+
+		isExternalLink() {
+			return typeof this.href === 'string' && (this.href.startsWith('http') || this.href.startsWith('tel:'))
+		}
+	},
+}
+</script>
+
+<style module>
+
+
+</style>

package/src/components/Alert.vue

@@ -0,0 +1,160 @@
+<template>
+	<Teleport to=".YWxl">
+		<Transition name="alert-outer">
+			<div v-if="!!state" :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>
+						
+						<div class="mt-4" v-if="mode === 'alert'">
+							<Button @click="$emit('dismiss')" class="min-w-[88px]">
+								<strong class="px-4">
+									{{ text }}
+								</strong>
+							</Button>
+						</div>
+						<div class="mt-4 flex flex-row gap-2" v-else-if="mode === 'confirm'">
+							<Button @click="$emit('confirm')" class="min-w-[88px]">
+								<strong class="px-4">
+									{{ text }}
+								</strong>
+							</Button>
+							<Button variant="minimal" @click="$emit('dismiss')" class="min-w-[88px] px-4 hover:text-primary">
+								Cancel
+							</Button>
+						</div>
+					</div>
+				</Transition>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		state: Object,
+		mode: {
+			type: String,
+			default: 'alert' // alert | confirm
+		},
+		text: {
+			type: String,
+			default: 'OK'
+		}
+	},
+
+	computed: {
+
+		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
+				}
+			}
+
+			return title
+		},
+
+		description(){
+			let description
+
+			if(this.state){
+
+				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
+				}
+			}
+
+			return description
+		}
+
+	},
+
+	emits: [ 'appear', 'confirm', 'dismiss' ],
+
+	methods: {
+
+		onAfterAppear(){
+			this.$emit('appear')
+		}
+
+	}
+
+}
+
+</script>
+
+<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;
+	z-index: 60;
+}
+
+.alert>*{
+	@apply max-h-[50vh] 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];
+}
+
+</style>
+
+<style>
+
+.alert-outer-enter-active,
+.alert-outer-leave-active {
+	transition: opacity 100ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.alert-outer-enter-from,
+.alert-outer-leave-to {
+	opacity: 0;
+}
+
+.alert-enter-active,
+.alert-leave-active {
+	transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+	transform: translate3d(0, 0, 0);
+}
+
+.alert-enter-from,
+.alert-leave-to {
+	transform: translate3d(0, 20px, 0);
+	opacity: 0;
+}
+
+</style>

package/src/components/Button.vue

@@ -0,0 +1,253 @@
+<template>
+	<button :class="computedClass" :disabled="isDisabled">
+		<div>
+			<slot></slot>
+		</div>
+		<div v-if="isLoading" :class="$style.loadingPane">
+			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+				<circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
+				<path :class="$style.svgHg" 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>
+	</button>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+
+		variant: {
+			type: [ String, Number ],
+			default: "primary" // primary|secondary|outline, default:primary
+		},
+
+		size: {
+			type: [ String ],
+			default: '' // sm|md|lg, default: md
+		},
+
+		spacing: {
+			type: [ String, Number ],
+			default: '' // 0|1|2|3, default: 2
+		},
+
+		state:  {
+			type: [ String, Number ],
+			default: 1
+		}, // -1:disabled, 1:normal, 2:loading, default: normal
+
+	},
+
+	computed:{
+
+		computedClass(){
+
+			return [
+				this.$style.button,
+				this.$style['variant-' + this.variant],
+				this.$style['size-' + this.size],
+				this.$style['spacing-' + this.spacing],
+				parseInt(this.computedState) === 2 ? this.$style.loading : '',
+			]
+				.join(' ')
+		},
+
+		isDisabled(){
+			return parseInt(this.computedState) !== 1
+		},
+
+		isLoading(){
+			return parseInt(this.computedState) === 2
+		},
+
+		computedState(){
+			return this.state ?? this._state
+		}
+
+	},
+
+	data(){
+		return {
+			_state: null
+		}
+	},
+
+	methods:{
+
+		focus(){
+			this.$el.focus()
+		},
+
+		setState(state){
+			console.log('setState', state)
+			this._state = state
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.button{
+	@apply 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-50;
+}
+
+.size-sm{
+	@apply h-[var(--h-cp-sm)];
+}
+.size-lg{
+	@apply h-[var(--h-cp-lg)];
+}
+
+.variant-,
+.variant-primary{
+	@apply bg-primary-500 text-white border-[2px] border-primary-500;
+}
+.variant-:hover,
+.variant-primary:hover{
+	@apply bg-primary-600 border-primary-600;
+}
+.variant-:active,
+.variant-primary:active{
+	@apply top-[1px] left-[1px] relative;
+}
+.variant-:disabled,
+.variant-primary:disabled{
+	@apply top-0 left-0 cursor-not-allowed;
+}
+.variant- *,
+.variant-primary *{
+	@apply text-white fill-white;
+}
+.variant-.loading *,
+.variant-primary.loading *{
+	@apply fill-transparent
+}
+.variant- .svgBg,
+.variant-primary .svgBg{
+	stroke: #fff;
+	stroke-opacity: 25%;
+}
+.variant- .svgHg,
+.variant-primary .svgHg{
+	fill: #fff;
+	fill-opacity: 75%;
+}
+
+.variant-outline{
+	@apply bg-transparent text-primary-500 border-[2px] border-primary-500;
+}
+.variant-outline:hover{
+	@apply border-primary-300 text-primary-300;
+}
+.variant-outline:active{
+	@apply top-[1px] left-[1px] active:relative;
+}
+.variant-outline:disabled{
+	@apply opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply text-primary-500 border-primary-500;
+}
+.variant-outline *{
+	@apply text-primary-500 fill-primary-500;
+}
+.variant-outline.loading *{
+	@apply fill-transparent
+}
+.variant-outline .svgBg{
+	stroke: var(--primary);
+	stroke-opacity: 25%;
+}
+.variant-outline .svgHg{
+	fill: var(--primary);
+	fill-opacity: 75%;
+}
+
+.variant-secondary{
+	@apply bg-secondary text-primary rounded-md border-[2px] border-secondary;
+}
+.variant-secondary:hover{
+	@apply bg-secondary-600 border-secondary-600;
+}
+.variant-secondary:active{
+	@apply top-[1px] left-[1px] relative;
+}
+.variant-secondary:disabled{
+	@apply bg-secondary-500 border-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+}
+.variant-secondary *{
+	@apply text-primary fill-primary;
+}
+.variant-secondary.loading *{
+	@apply fill-transparent
+}
+.variant-secondary .svgBg{
+	stroke: var(--text);
+	stroke-opacity: 25%;
+}
+.variant-secondary .svgHg{
+	fill: #fff;
+	fill-opacity: 75%;
+}
+
+.variant-minimal{
+	@apply border-[2px] border-transparent;
+}
+.variant-minimal:hover{
+}
+.variant-minimal .svgBg{
+	stroke: var(--base-500);
+	stroke-opacity: 25%;
+}
+.variant-minimal .svgHg{
+	fill: var(--text);
+	fill-opacity: 75%;
+}
+
+.loadingPane{
+	@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center pl-1;
+}
+.loading>*:first-child{
+	@apply opacity-0
+}
+.loading:hover{
+}
+.loading:active{
+	@apply top-0 left-0;
+}
+.loading>*{
+	opacity: 0;
+}
+.loading .loadingPane{
+	opacity: 1;
+}
+
+.spacing-,
+.spacing-2{
+	@apply p-2
+}
+.spacing-1{
+	@apply p-1
+}
+.spacing-3{
+	@apply p-3
+}
+
+.spinner{
+	@apply animate-spin h-5 w-5;
+}
+
+</style>

package/src/components/ButtonGroup.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="button-group">
+    <div class="flex items-center" @click="showPopup">
+      <div class="flex-1">
+        {{ text }}
+      </div>
+      <div>
+        <slot name="icon"></slot>
+      </div>
+    </div>
+    <div class="bg-popup">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  name: "ButtonGroup",
+
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    anchor: {
+      type: String,
+      default: "left"
+    }
+  },
+
+  methods: {
+
+    hidePopup(){
+
+      const popup = this.$el.querySelector('.bg-popup')
+      const transitionEnd = () => {
+        popup.classList.remove('on')
+        popup.removeEventListener('transitionend', transitionEnd)
+        window.removeEventListener('click', this.hidePopup)
+      }
+
+      popup.addEventListener('transitionend', transitionEnd)
+      popup.classList.remove('active')
+
+    },
+
+    showPopup(e){
+
+      e.preventDefault()
+      e.stopPropagation()
+
+      const popup = this.$el.querySelector('.bg-popup')
+      popup.style.top = (this.$el.clientHeight + 10) + "px"
+      popup.style.left = this.anchor === 'left' ? 0 : ''
+      popup.style.right = this.anchor === 'right' ? 0 : ''
+      popup.classList.add('on')
+
+      window.setTimeout(() => {
+        popup.classList.add('active')
+      }, 100)
+
+      window.addEventListener('click', this.hidePopup)
+    }
+
+  }
+
+}
+
+</script>
+
+<style>
+
+.button-group{
+  position: relative;
+  @apply inline-block;
+  @apply cursor-pointer;
+}
+
+.bg-popup{
+  display: none;
+  position: absolute;
+  background: #fff;
+}
+.bg-popup.on{
+  display: block;
+  opacity: 0;
+  transform: translate3d(0, -10%, 0);
+  transition: all 200ms cubic-bezier(0.25, 1, 0.5, 1);
+}
+.bg-popup.active {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+}
+.bg-popup button{
+  white-space: nowrap;
+}
+
+</style>