@mixd-id/web-scaffold 0.1.2301231346 → 0.1.2301231348

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.2301231346",
+  "version": "0.1.2301231348",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Ahref.vue

@@ -1,54 +1,28 @@
 <template>
-	<a v-if="isExternalLink" :class="computedClass" v-bind="$attrs" :href="to" target="_blank">
+	<a v-if="isExternalLink" :href="href" :target="target">
 		<slot />
 	</a>
-	<router-link v-else :="$props" :class="computedClass">
+	<router-link v-else :to="href" :target="target">
 		<slot />
 	</router-link>
 </template>
 
 <script>
-import { RouterLink } from 'vue-router'
 
 export default {
 
 	props: {
-		...RouterLink.props,
-		to: {
-			type: String,
-			required: true
-		},
-		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: [ String, Number ],
+
+		href: String,
+
+		target: String
+
 	},
 
 	computed: {
 
 		isExternalLink() {
-			return typeof this.to === 'string' && (this.to.startsWith('http') || this.to.startsWith('tel:'))
-		},
-
-		computedClass(){
-
-			return [
-				this.$style.button,
-				this.$style['variant-' + this.variant],
-				this.$style['size-' + this.size],
-				this.$style['spacing-' + this.spacing],
-				parseInt(this.state) === 2 ? this.$style.loading : '',
-			]
-				.join(' ')
+			return typeof this.href === 'string' && (this.href.startsWith('http') || this.href.startsWith('tel:'))
 		}
 	},
 }
@@ -57,152 +31,4 @@ export default {
 <style module>
 
 
-.button{
-	@apply relative inline-flex items-center justify-center;
-	@apply whitespace-nowrap text-ellipsis overflow-hidden;
-}
-.button>*:first-child{
-	@apply flex items-center justify-center
-}
-.button:disabled{
-	@apply opacity-50;
-}
-
-.variant-,
-.variant-primary{
-	@apply bg-primary-500 text-white rounded-md 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 rounded-md 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-500 text-primary rounded-md border-[2px] border-secondary-500;
-}
-.variant-secondary:hover{
-	@apply bg-secondary-400 border-secondary-400;
-}
-.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-white fill-white;
-}
-.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 .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
-}
-.loading>*:first-child{
-	@apply opacity-0
-}
-.loading:hover{
-	@apply bg-primary
-}
-.loading:active{
-	@apply top-0 left-0;
-}
-
-.spacing-,
-.spacing-2{
-	@apply p-2
-}
-.spacing-1{
-	@apply p-1
-}
-.spacing-3{
-	@apply p-3
-}
-
-.size-sm{
-	@apply text-sm
-}
-.size-lg{
-	@apply text-lg
-}
-.size-xl{
-	@apply text-xl
-}
-
-.spinner{
-	@apply animate-spin h-5 w-5;
-}
-
 </style>

package/src/components/Alert.vue

@@ -17,7 +17,7 @@
 							<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">
+						<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>
@@ -35,10 +35,8 @@
 									{{ text }}
 								</strong>
 							</Button>
-							<Button variant="minimal" @click="$emit('dismiss')" class="min-w-[88px]">
-								<label class="px-4">
-									Cancel
-								</label>
+							<Button variant="minimal" @click="$emit('dismiss')" class="min-w-[88px] px-4 hover:text-primary">
+								Cancel
 							</Button>
 						</div>
 					</div>

package/src/components/Button.vue

@@ -1,8 +1,6 @@
 <template>
 	<button :class="computedClass" :disabled="isDisabled">
-		<div>
-			<slot></slot>
-		</div>
+		<slot></slot>
 		<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>
@@ -33,10 +31,7 @@ export default{
 			default: '' // 0|1|2|3, default: 2
 		},
 
-		state: {
-			type: [ String, Number ],
-			default: 1 // -1:disabled, 1:normal, 2:loading, default: normal
-		}
+		state:  [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal
 
 	},
 
@@ -49,29 +44,44 @@ export default{
 				this.$style['variant-' + this.variant],
 				this.$style['size-' + this.size],
 				this.$style['spacing-' + this.spacing],
-				parseInt(this.state) === 2 ? this.$style.loading : '',
+				parseInt(this.computedState) === 2 ? this.$style.loading : '',
 			]
 				.join(' ')
 		},
 
 		isDisabled(){
-			return parseInt(this.state) === -1
+			return parseInt(this.computedState) === -1
 		},
 
 		isNormal(){
-			return parseInt(this.state) !== 2
+			return parseInt(this.computedState) !== 2
 		},
 
 		isLoading(){
-			return parseInt(this.state) === 2
+			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
 		}
 
 	}

package/src/components/DynamicTemplate.vue

@@ -0,0 +1,44 @@
+<template>
+	<div :class="$style.comp">
+		<component :is="components"></component>
+	</div>
+</template>
+
+<script>
+
+import * as Vue from "vue/dist/vue.esm-bundler";
+
+export default{
+
+	props: [ 'template' ],
+
+	data(){
+		return {
+			components: null
+		}
+	},
+
+	watch: {
+
+		template: {
+			immediate: true,
+			handler(to){
+				this.components = Vue.compile(to)
+			}
+		}
+
+	}
+
+
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>