@mixd-id/web-scaffold 0.2.250801012 → 0.2.250801013

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.2.250801012",
+  "version": "0.2.250801013",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -154,6 +154,7 @@
   "author": "mixd.id",
   "license": "ISC",
   "files": [
+    "src",
     "docs/components"
   ],
   "bugs": {

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

@@ -0,0 +1,200 @@
+<template>
+	<a v-if="isExternalLink" :href="href" :target="target" :class="compClass" :style="computedStyle">
+		<slot>{{ text }}</slot>
+	</a>
+	<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: {
+			type: String,
+			default: ''
+		},
+
+		target: String,
+
+		text: String,
+
+		variant: {
+			type: [ String, Number ],
+			default: "primary" // primary|secondary|outline, default:primary
+		},
+
+	},
+
+	computed: {
+
+		isExternalLink() {
+			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;
+	@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>

package/src/components/Alert.vue

@@ -0,0 +1,257 @@
+<template>
+	<Teleport to=".YWxl">
+		<Transition name="alert-outer">
+			<div v-if="isOpen" :class="$style.alert" ref="alert">
+				<Transition name="alert" @after-appear="onAfterAppear" appear>
+					<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="$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>
+							<br />
+							<Button ref="btnOK" @click="onConfirm">
+								<strong class="px-4">
+									{{ buttonText }}
+								</strong>
+							</Button>
+						</div>
+					</div>
+				</Transition>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<script>
+
+import {copyToClipboard, unPascalCase} from "../utils/helpers.mjs";
+
+export default{
+
+	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"))
+		},
+
+		onAfterAppear(){
+			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(){
+
+			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')
+			}
+		},
+
+		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 ''
+			}
+		},
+
+    stack(){
+      if(this.err.stack){
+        return this.err.stack
+      }
+    },
+
+		details(){
+
+			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
+			}
+
+		}
+
+	},
+
+	data(){
+		return {
+			alert: {},
+			isOpen: false,
+			showDetails: false
+		}
+	}
+
+}
+
+</script>
+
+<style module>
+
+.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: 150;
+}
+[data-theme="dark"] .alert{
+  @apply bg-black/50;
+}
+
+.alert>*{
+	@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];
+}
+
+.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>
+
+<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/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>