@mixd-id/web-scaffold 0.1.230406228 → 0.1.230406230

package/package.json

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

package/src/components/MultilineText.vue

@@ -0,0 +1,184 @@
+<template>
+	<div :class="computedClass">
+		<slot name="start"></slot>
+		<textarea :maxlength="maxlength"
+			:placeholder="placeholder" :rows="rows" ref="input" @focus="isActive = true" @blur="onBlur" @input="onInput"
+			:value="modelValue" :readonly="Boolean(readonly)" />
+		<div v-if="state === -2 && !!(errors)">
+			<svg width="24" height="24" 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>
+		<slot name="end"></slot>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	name: 'Textarea',
+
+	props: {
+
+		align: {
+			type: String
+		},
+
+		customClass: String,
+
+		state: {
+			type: Number,
+			default: 1 // 1:normal, -1:disabled, -2:error
+		},
+
+		variant: {
+			type: String,
+			default: ''
+		},
+
+		size: {
+			type: String,
+			default: ''
+		},
+
+		errors:{
+			type: [ String, Array ],
+			default: ''
+		},
+
+		modelValue: [ String, Number ],
+
+		placeholder: String,
+
+		readonly: undefined,
+
+		rows: String,
+
+    maxlength: undefined,
+
+	},
+
+	watch:{
+
+		modelValue(to, from){
+			this.$emit('update:modelValue', to)
+			this.$emit('change', to)
+			this.$nextTick(() => {
+				this.$el.style.height = '';
+				this.$el.style.height = this.$refs.input.scrollHeight + 'px'
+			})
+		}
+
+	},
+
+	emits: [ 'update:modelValue', 'change', 'submit', 'blur' ],
+
+	computed: {
+
+		computedState(){
+			if(this.errors){
+				return -2
+			}
+			else{
+				return this.state
+			}
+		},
+
+		computedClass(){
+			return this.customClass ?? [
+				this.$style.textarea,
+				this.$style['state-' + this.computedState],
+				this.isActive && !this.readonly ? this.$style.active : '',
+				this.align ? this.$style['align-' + this.align] : '',
+				this.readonly ? this.$style.readonly : '',
+				this.size ? this.$style['size-' + this.size] : ''
+			].join(' ')
+		},
+
+		isDisabled(){
+
+		}
+
+	},
+
+	data(){
+		return {
+			isActive: false
+		}
+	},
+
+	mounted() {
+	},
+
+	methods:{
+
+		select(){
+			this.$refs.input.select()
+		},
+
+		onInput(e){
+			this.$emit('update:modelValue', e.target.value)
+		},
+
+		onBlur(){
+			this.isActive = false
+			this.$emit('blur')
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.textarea{
+	@apply min-h-[var(--h-cp)];
+	@apply flex items-start border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+	@apply !max-h-[200px];
+}
+.textarea textarea{
+	@apply flex-1 outline-none p-2 bg-transparent resize-none;
+	@apply self-stretch;
+	scrollbar-width: none;
+}
+.textarea>textarea::-webkit-scrollbar{
+	display: none;
+}
+.textarea>textarea::placeholder{
+	@apply text-text-200;
+}
+.textarea.readonly{
+	@apply bg-text-50;
+}
+
+.size-sm{ @apply min-h-[var(--h-cp-sm)]; }
+.size-sm textarea{ @apply text-sm; }
+
+.size-lg{ @apply min-h-[var(--h-cp-lg)]; }
+.size-lg textarea{ @apply text-lg p-2; }
+
+
+.active{
+	@apply border-primary
+}
+
+.state--2{
+	@apply border-red-500
+}
+
+.align-left>input{
+	@apply text-left
+}
+.align-center>input{
+	@apply text-center
+}
+.align-right>input{
+	@apply text-right
+}
+
+</style>

package/src/components/Textarea.vue

@@ -10,7 +10,7 @@
 				<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>sad
+		</div>
 		<slot name="end"></slot>
 	</div>
 </template>
@@ -91,7 +91,7 @@ export default{
 			return this.customClass ?? [
 				this.$style.textarea,
 				this.$style['state-' + this.computedState],
-				this.isActive ? this.$style.active : '',
+				this.isActive && !this.readonly ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
 				this.readonly ? this.$style.readonly : '',
 				this.size ? this.$style['size-' + this.size] : ''

package/src/index.js

@@ -412,6 +412,7 @@ export default{
     app.component('Tabs', defineAsyncComponent(() => import("./components/Tabs.vue")))
     app.component('Textbox', defineAsyncComponent(() => import("./components/Textbox.vue")))
     app.component('Textarea', defineAsyncComponent(() => import("./components/Textarea.vue")))
+    app.component('MultilineText', defineAsyncComponent(() => import("./components/MultilineText.vue")))
     app.component('Timepicker', defineAsyncComponent(() => import("./components/Timepicker.vue")))
     app.component('Toast', defineAsyncComponent(() => import("./components/Toast.vue")))
     app.component('TreeView', defineAsyncComponent(() => import("./components/TreeView.vue")))