@mixd-id/web-scaffold 0.1.230406018 → 0.1.230406020

package/package.json

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

package/src/components/Alert.vue

@@ -3,7 +3,7 @@
 		<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">
+					<div :class="$style.cont1">
 						<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"/>
@@ -16,9 +16,9 @@
 							<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-words overflow-y-auto whitespace-pre-line text-center">{{ description }}</p>
+						<div :class="$style.cont2">
+							<h5 :class="$style.title">{{ title }}</h5>
+							<p :class="$style.description">{{ description }}</p>
 						</div>
 						
 						<div class="mt-4" v-if="mode === 'alert'">
@@ -140,6 +140,22 @@ export default{
 	@apply min-w-[280px] max-w-[80vw] md:max-w-[400px];
 }
 
+.cont1{
+	@apply p-4 flex flex-col items-center leading-6;
+}
+
+.cont2{
+	@apply my-4 text-center flex-1 overflow-y-auto;
+}
+
+.title{
+	@apply my-1 break-words;
+}
+
+.description{
+	@apply break-words overflow-y-auto whitespace-pre-line text-center;
+}
+
 </style>
 
 <style>

package/src/components/Dropdown.vue

@@ -157,7 +157,7 @@ export default {
 
 .dropdown select,
 .dropdown input{
-	@apply appearance-none outline-none p-2 bg-transparent cursor-pointer;
+	@apply appearance-none outline-none p-2 bg-transparent cursor-pointer w-full;
 }
 
 .arrow{

package/src/components/Textbox.vue

@@ -1,9 +1,9 @@
 <template>
 	<div :class="computedClass">
 		<slot name="start"></slot>
-		<input :type="type" :disabled="isDisabled" @focus="isActive = true" @blur="onBlur"
+		<input :type="computedType" :disabled="isDisabled" @focus="isActive = true" @blur="onBlur"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
-					 :value="modelValue ?? value" @input="onInput" :readonly="Boolean(readonly)"
+					 :value="displayedValue" @input="onInput" :readonly="Boolean(readonly)"
 			@keydown="onKeyDown"/>
 		<div v-if="!!(errors)">
 			<svg :class="$style.svg" width="24" height="24" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -100,6 +100,36 @@ export default{
 
 		isDisabled(){
 			return this.state === 2
+		},
+
+		displayedValue(){
+			if(this.isActive){
+				return this.modelValue ?? this.value
+			}
+			else{
+				switch(this.type){
+
+					case 'number':
+						const val = parseInt(this.modelValue)
+						return isNaN(val) ? '' : val.toLocaleString()
+
+					default:
+						return this.modelValue ?? this.value
+
+				}
+			}
+		},
+
+		computedType(){
+
+			switch(this.type){
+
+				case 'number':
+					return 'text'
+
+				default:
+					return this.type
+			}
 		}
 
 	},