@mixd-id/web-scaffold 0.1.230406001

package/src/components/TableView.vue

@@ -0,0 +1,201 @@
+<template>
+	<div :class="computedClass">
+
+		<TableViewHead v-if="header" :columns="columns" @resize="(idx, d) => $emit('resize', idx, d)"></TableViewHead>
+
+		<table cellpadding="0" cellspacing="0">
+
+			<thead>
+				<tr>
+					<th v-for="column in columns" :style="columnStyle(column)"></th>
+					<th :class="$style.spacer"></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr v-for="item in items" @click="activate($event.target.closest('tr'))">
+					<td v-for="column in columns" :style="tdStyle(column)">
+						<slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="item"></slot>
+						<label v-else>{{ formatText(item[column.key], column) }}</label>
+					</td>
+					<td :class="$style.spacer">
+						<slot name="mobile" :item="item"></slot>
+					</td>
+				</tr>
+			</tbody>
+
+		</table>
+
+		<div v-if="hasNext" ref="loadNext" class="p-2 text-center">Load...</div>
+
+	</div>
+</template>
+
+<script>
+
+import TableViewHead from "./TableViewHead.vue";
+import dayjs from "dayjs";
+import { h } from "vue";
+
+const DEFAULT_COLUMN_WIDTH = 125
+
+export default{
+
+	components: {
+		TableViewHead
+	},
+
+	props:{
+		columns: Array,
+		items: Array,
+		header: {
+			type: Boolean,
+			default: true
+		},
+		hasNext: {
+			type: Boolean,
+			default: false
+		},
+		mobileView: {
+			type: [ Boolean, String ],
+			default: false
+		}
+	},
+
+	computed:{
+
+		computedClass(){
+
+			return [
+				this.$style.comp,
+				Boolean(this.mobileView) ? this.$style.mobileView : ''
+			]
+			.join(' ')
+		}
+
+	},
+
+	data(){
+		return {
+			activeTr: null
+		}
+	},
+
+	methods:{
+
+		activate(tr){
+			if(this.activeTr){
+				this.activeTr.classList.remove(this.$style.activeTr)
+			}
+			tr.classList.add(this.$style.activeTr)
+			this.activeTr = tr
+		},
+
+		columnStyle(column){
+
+			const width = parseInt(column.width)
+
+			return {
+				width: (!isNaN(width) ? width : DEFAULT_COLUMN_WIDTH) + 'px'
+			}
+		},
+
+		onNext(){
+			this.$emit('next')
+		},
+
+		formatText(text, column){
+
+			if(column.format){
+				const [ type, params ] = column.format.toString().split('|')
+
+				switch(type){
+
+					case 'currency':
+						text = parseInt(text)
+						if(isNaN(text)) text = '-'
+						text = text.toLocaleString()
+						break
+
+					case 'date':
+						const dateFormat = params ?? 'YYYY-MM-DD'
+						text = dayjs(text).format(dateFormat)
+						break
+				}
+			}
+
+			return text
+		},
+
+		tdStyle(column){
+
+			const style = {}
+
+			if(column.align){
+				style['textAlign'] = column.align
+			}
+
+			return style
+		},
+
+	},
+
+	watch:{
+
+		hasNext(to){
+			if(to){
+				this.$nextTick(() => {
+					if(this.$refs.loadNext){
+						this.$observe.always(this.$refs.loadNext, this.onNext)
+					}
+				})
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply bg-base
+}
+
+.comp table{
+	@apply border-collapse bg-base;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.comp tbody td{
+	@apply relative border-b-[1px] border-text-50;
+}
+
+.comp td,
+.comp th{
+	vertical-align: top;
+	@apply hidden md:table-cell
+}
+.comp td.spacer{
+	@apply table-cell w-full md:hidden
+}
+.comp.mobileView td,
+.comp.mobileView th{
+	@apply hidden
+}
+.comp.mobileView td.spacer{
+	@apply table-cell w-full
+}
+
+.comp td>label{
+	@apply p-2 block
+}
+
+.activeTr{
+	@apply bg-text-50
+}
+
+</style>

package/src/components/TableViewHead.vue

@@ -0,0 +1,159 @@
+<template>
+	<div :class="computedClass">
+		<table cellpadding="0" cellspacing="0">
+
+			<thead>
+				<tr>
+					<th v-for="column in columns" :style="columnStyle(column)"></th>
+					<th :class="$style.spacer"></th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<tr>
+					<td v-for="column in columns" :style="tdStyle(column)">
+						<div v-if="isHTML(column.title)" v-html="column.title"></div>
+						<label v-else>{{ column.title }}</label>
+						<div :class="$style.separator" ref="separators" @mousedown="onSeparator"></div>
+					</td>
+					<td :class="$style.spacer"></td>
+				</tr>
+			</tbody>
+
+		</table>
+	</div>
+</template>
+
+<script>
+
+const DEFAULT_COLUMN_WIDTH = 125
+
+export default{
+
+	props:{
+
+		columns: Array,
+
+		mobileView: {
+			type: [ Boolean, String ],
+			default: false
+		}
+
+	},
+
+	computed: {
+
+		computedClass(){
+			return [
+				this.$style.comp,
+				Boolean(this.mobileView) ? this.$style.mobileView : ''
+			]
+			.join(' ')
+		}
+
+	},
+
+	methods:{
+
+		columnStyle(column){
+
+			const width = parseInt(column.width)
+
+			return {
+				width: (!isNaN(width) ? width : DEFAULT_COLUMN_WIDTH) + 'px'
+			}
+		},
+
+		tdStyle(column){
+
+			const style = {}
+
+			if(column.align){
+				style['textAlign'] = column.align
+			}
+
+			return style
+		},
+
+		isHTML(text){
+			return text.toString().indexOf('<') >= 0 &&
+				text.toString().indexOf('>') >= 0
+		},
+
+		onSeparator(e){
+
+			const comp = e.target
+			const idx = this.$refs.separators.indexOf(comp)
+
+			let x1 = e.touches ? e.touches[0].clientX : e.clientX
+			const onMouseMove = (e) => {
+				const x2 = e.touches ? e.touches[0].clientX : e.clientX
+				const d = x2 - x1
+				x1 = x2
+				this.$emit('resize', idx, d)
+			}
+
+			const onMouseUp = (e) => {
+				window.removeEventListener('mousemove', onMouseMove)
+				window.removeEventListener('mouseup', onMouseUp)
+			}
+
+			window.addEventListener('mousemove', onMouseMove)
+			window.addEventListener('mouseup', onMouseUp)
+
+		}
+
+	},
+
+	watch: {
+
+		column:{
+			handler(to){
+				console.log('column changed')
+			},
+			deep: true
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply hidden md:block bg-base;
+}
+.comp.mobileView{
+	@apply hidden
+}
+
+.comp table{
+	@apply border-collapse;
+	table-layout: fixed;
+	width: 100%;
+}
+
+.comp tbody td{
+	@apply bg-base relative border-r-[1px] border-text-50;
+	vertical-align: top;
+}
+
+.comp td>label{
+	@apply p-2 block
+}
+
+.comp label{
+	@apply text-text-300
+}
+
+.separator{
+	@apply absolute top-0 right-0 bottom-0 w-[5px] cursor-e-resize;
+}
+
+.spacer{
+	@apply w-full
+}
+
+</style>

package/src/components/Tabs.vue

@@ -0,0 +1,74 @@
+<template>
+	<div :class="$style.comp">
+		<button v-for="(item, index) in items" :class="tabClass(item)"
+			@click="onClick(item)" type="button" >
+			<slot v-if="$slots.tab" name="tab" :="{ item, index }"></slot>
+			<div v-else :class="$style.item">
+				{{ item.text }}
+			</div>
+		</button>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change', 'update:modelValue' ],
+
+	props: {
+		modelValue: undefined,
+		bodyClass: String,
+		items: Array
+	},
+
+	computed: {
+
+	},
+
+	methods: {
+
+		onClick(item){
+			this.$emit('update:modelValue', item.value)
+			this.$emit('change', item.value)
+		},
+
+		tabClass(item){
+			return [
+				this.bodyClass,
+				item.value === this.modelValue ? 'active' : ''
+			]
+				.join(' ')
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply overflow-x-auto;
+	@apply flex flex-row;
+	scrollbar-width: none;
+}
+.comp::-webkit-scrollbar {
+	display: none;
+}
+
+.comp>*{
+	@apply border-b-[2px] border-transparent;
+	@apply p-2;
+}
+
+.comp>*[class*="active"]{
+	@apply border-b-[2px] border-primary;
+}
+
+.item{
+	@apply whitespace-nowrap overflow-hidden;
+}
+
+</style>

package/src/components/TextEditor.vue

@@ -0,0 +1,85 @@
+<template>
+	<div :class="$style.comp">
+		<Textbox v-model="modelValue.text" @blur="$emit('change')" class="border-none"/>
+		<div class="bg-base-300 flex flex-row gap-2 border-t-[1px] border-text-200 px-2">
+			<Dropdown v-model="modelValue.tagName" size="sm" variant="transparent">
+				<option value="default">Default</option>
+				<option value="h1">Heading 1</option>
+				<option value="h2">Heading 2</option>
+				<option value="h3">Heading 3</option>
+				<option value="h4">Heading 4</option>
+				<option value="h5">Heading 5</option>
+				<option value="custom">Custom</option>
+			</Dropdown>
+			<Dropdown v-if="modelValue.style && modelValue.tagName === 'custom'"
+								v-model="modelValue.style.fontFamily" size="sm" variant="transparent">
+				<option value="default">Default</option>
+				<option value="Arial">Arial</option>
+				<option value="Arial Black">Arial Black</option>
+				<option value="Impact">Impact</option>
+				<option value="Helvetica">Helvetica</option>
+			</Dropdown>
+			<Dropdown v-if="modelValue.style && modelValue.tagName === 'custom'"
+								v-model="modelValue.style.fontSize" size="sm" variant="transparent">
+				<option value="default">Default</option>
+				<option value="48px">48px</option>
+				<option value="42px">42px</option>
+				<option value="36px">36px</option>
+				<option value="32px">32px</option>
+				<option value="28px">28px</option>
+				<option value="24px">24px</option>
+				<option value="22px">22px</option>
+				<option value="21px">21px</option>
+				<option value="20px">20px</option>
+				<option value="18px">18px</option>
+				<option value="16px">16px</option>
+				<option value="14px">14px</option>
+				<option value="13px">13px</option>
+				<option value="12px">12px</option>
+				<option value="11px">11px</option>
+			</Dropdown>
+		</div>
+	</div>
+</template>
+
+<script>
+
+/**
+ * modelValue: { text:"", style:"", tagName:"" }
+ */
+
+export default{
+
+	props: {
+
+		modelValue: Object
+
+	},
+
+	mounted() {
+		if(this.modelValue){
+			if(!this.modelValue.style){
+				this.modelValue.style = {
+					fontFamily: 'default',
+					fontSize: 'default',
+				}
+			}
+
+			if(!this.modelValue.tagName){
+				this.modelValue.tagName = 'default'
+			}
+		}
+		console.log('mounted', this.modelValue)
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
+}
+
+</style>

package/src/components/Textarea.vue

@@ -0,0 +1,184 @@
+<template>
+	<div :class="computedClass">
+		<slot name="start"></slot>
+		<textarea @keyup="onKeyUp"
+			:placeholder="placeholder" :rows="rows" ref="input" @blur="onBlur" @input="onInput"
+			:value="modelValue" />
+		<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,
+		rows: String,
+
+	},
+
+	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.$style.active : '',
+				this.align ? this.$style['align-' + this.align] : '',
+				this.size ? this.$style['size-' + this.size] : ''
+			].join(' ')
+		},
+
+		isDisabled(){
+
+		}
+
+	},
+
+	data(){
+		return {
+			isActive: false
+		}
+	},
+
+	mounted() {
+	},
+
+	methods:{
+
+		select(){
+			this.$refs.input.select()
+		},
+
+		onKeyUp(e){
+			if(e.keyCode === 13 && this.$refs.input.value.length > 0){
+				this.$emit('submit')
+			}
+			else if(e.keyCode === 27 && this.clearable){
+				this.$emit('clear')
+			}
+		},
+
+		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-100 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;
+}
+
+.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-3; }
+
+
+.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>