@mixd-id/web-scaffold 0.1.230406001

package/src/components/Datepicker.vue

@@ -0,0 +1,312 @@
+<template>
+
+  <div :class="className">
+
+    <div v-if="mode === '' || mode === 'simple'">
+			<select v-model="DD">
+				<option disabled selected>Tanggal</option>
+				<option v-for="d in 31" :value="d.toString().padStart(2, '0')">{{ d }}</option>
+			</select>
+			<select v-model="MM">
+				<option disabled selected>Bulan</option>
+				<option v-for="mmm in months" :value="mmm[0]">{{ mmm[1] }}</option>
+			</select>
+			<select v-model="YYYY">
+				<option disabled selected>Tahun</option>
+				<option v-for="yyyy in years" :value="yyyy">{{ yyyy }}</option>
+			</select>
+    </div>
+
+		<div v-else-if="mode === 'popup'" ref="popup" @click="contextMenu = { caller:$refs.popup, value:this.modelValue }"
+				 class="flex-1">
+			<input class="flex-1" type="text" readonly :value="DMMMYYYY"/>
+			<div :class="$style.arrow">
+				<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+					<path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+				</svg>
+			</div>
+		</div>
+
+		<div v-else-if="mode === 'calendar'" class="p-2">
+			<div class="flex items-center">
+				<h4 class="flex-1">{{ contextMenuTitle }}</h4>
+				<button type="button" @click.stop="contextMenuPrevMonth()" class="p-2">
+					<svg width="24" height="24" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
+					</svg>
+				</button>
+				<button type="button" @click.stop="contextMenuNextMonth()" class="p-2">
+					<svg width="24" height="24" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+						<path d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"/>
+					</svg>
+				</button>
+			</div>
+			<div class="grid grid-cols-7 gap-2">
+				<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
+				<button type="button" :class="buttonStyle(d.value)"
+								v-for="d in contextMenuDates" @click="setValue(d.value)">
+					{{ d.date }}
+				</button>
+			</div>
+		</div>
+
+		<ContextMenu v-if="mode === 'popup'" :state="!!(contextMenu.caller)" :caller="contextMenu.caller ?? null"
+			@dismiss="contextMenu = {}">
+			<div class="p-4">
+				<div class="flex items-center">
+					<h4 class="flex-1">{{ contextMenuTitle }}</h4>
+					<button type="button" @click.stop="contextMenuPrevMonth()" class="p-2">
+						<svg width="24" height="24" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+							<path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
+						</svg>
+					</button>
+					<button type="button" @click.stop="contextMenuNextMonth()" class="p-2">
+						<svg width="24" height="24" class="fill-text" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+							<path d="M13.4697 17.9697C13.1768 18.2626 13.1768 18.7374 13.4697 19.0303C13.7626 19.3232 14.2374 19.3232 14.5303 19.0303L20.3232 13.2374C21.0066 12.554 21.0066 11.446 20.3232 10.7626L14.5303 4.96967C14.2374 4.67678 13.7626 4.67678 13.4697 4.96967C13.1768 5.26256 13.1768 5.73744 13.4697 6.03033L18.6893 11.25H4C3.58579 11.25 3.25 11.5858 3.25 12C3.25 12.4142 3.58579 12.75 4 12.75H18.6893L13.4697 17.9697Z"/>
+						</svg>
+					</button>
+				</div>
+				<div class="grid grid-cols-7 gap-2">
+					<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
+					<button type="button" :class="buttonStyle(d.value)"
+									v-for="d in contextMenuDates" @click="setValue(d.value)">
+						{{ d.date }}
+					</button>
+				</div>
+			</div>
+		</ContextMenu>
+
+  </div>
+
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import {ref, watch} from "vue";
+
+const MONTHS = []
+for(let i = 0 ; i < 12 ; i++){
+  MONTHS.push([ dayjs(new Date(2020, i, 1)).format('MM'), dayjs(new Date(2020, i, 1)).format('MMM')])
+}
+
+const YEARS = []
+const currentYear = parseInt(dayjs().format('YYYY'))
+for(let i = -100 ; i < 50 ; i++){
+	YEARS.push(currentYear + i)
+}
+
+const currentDate = dayjs().format('YYYY-MM-DD')
+
+export default{
+
+  setup(props, { emit }){
+
+		const DD = ref(dayjs(props.modelValue).format('DD'))
+		const MM = ref(dayjs(props.modelValue).format('MM'))
+		const YYYY = ref(dayjs(props.modelValue).format('YYYY'))
+
+		watch([ YYYY, MM, DD ], (to) => {
+			emit('update:modelValue', to.join('-'))
+		})
+
+    return {
+			DD,
+			MM,
+			YYYY
+    }
+  },
+
+  props:{
+
+    mode:{
+      type: [ String ],
+      default: '' // simple|calendar|popup|range, default: simple
+    },
+
+    variant:{
+      type: String,
+      default: ''
+    },
+
+    size:{
+      type: String,
+      default: ''
+    },
+
+    modelValue:{
+      type: String,
+      default: currentDate
+    }
+
+  },
+
+  computed:{
+
+		DMMMYYYY(){
+			return this.modelValue ? dayjs(this.modelValue).format('D MMM YYYY') : ''
+		},
+
+		YYYYMMM(){
+			return dayjs(this.contextMenu.value).format('YYYY-MM')
+		},
+
+    className(){
+      return [
+        this.$style.datepicker,
+        this.$style['mode-' + this.mode]
+      ]
+      .join(' ')
+      .trim()
+    },
+
+		contextMenuTitle(){
+			return dayjs(this.contextMenu.value ?? undefined).format('MMM YYYY')
+		},
+
+		contextMenuDates(){
+
+			const dayjsInput = dayjs(this.contextMenu.value ?? undefined)
+			const year = parseInt(dayjsInput.format('YYYY'))
+			const month = parseInt(dayjsInput.format('M')) - 1
+
+			const dates = []
+			let startDayOfMonth = dayjs(new Date(year, month, 1)).format('d')
+			let endDateOfMonth = dayjs(new Date(year, month + 1, 0)).format('D')
+			let endDateOfLastMonth = dayjs(new Date(year, month, 0)).format('D')
+			let currentDate = 1
+			let nextDate = 1
+			for(let i = 1 ; i <= 42 ; i++){
+				if(startDayOfMonth > 0){
+					startDayOfMonth--
+					dates.push({
+						date: endDateOfLastMonth - startDayOfMonth,
+						value: year + '-' + month.toString().padStart(2, '0') + '-' + (endDateOfLastMonth - startDayOfMonth).toString().padStart(2, '0'),
+						type: -1
+					})
+				}
+				else if(currentDate > endDateOfMonth){
+					dates.push({
+						date: nextDate,
+						value: year + '-' + (month + 2).toString().padStart(2, '0') + '-' + nextDate.toString().padStart(2, '0'),
+						type: 1
+					})
+					nextDate++
+				}
+				else{
+					dates.push({
+						date:currentDate,
+						value: year + '-' + (month + 1).toString().padStart(2, '0') + '-' + currentDate.toString().padStart(2, '0'),
+						type: 0
+					})
+					currentDate++
+				}
+			}
+
+			return dates
+		}
+
+  },
+
+  data(){
+    return {
+			months: MONTHS,
+			years: YEARS,
+			contextMenu: {}
+    }
+  },
+
+  watch:{
+
+  },
+
+  methods:{
+
+		buttonStyle(val){
+			return [
+				this.$style.button,
+				this.modelValue === val ? this.$style.selected : '',
+				dayjs(val).format('YYYY-MM') !== this.YYYYMMM ? this.$style.otherMonth : ''
+			]
+			.join(' ')
+		},
+
+		getDayOfWeekLabel(i){
+			return dayjs('2022-07-30').add(i, 'day').format('ddd')
+		},
+
+		contextMenuNextMonth(){
+			this.contextMenu.value = dayjs(this.contextMenu.value ?? undefined).add(1, 'month').format('YYYY-MM-DD')
+		},
+
+		contextMenuPrevMonth(){
+
+			this.contextMenu.value = dayjs(this.contextMenu.value ?? undefined).add(-1, 'month').format('YYYY-MM-DD')
+
+		},
+
+		setValue(d){
+			this.$emit('update:modelValue', d)
+			this.$emit('change', d)
+		}
+
+  },
+
+	mounted() {
+  }
+
+}
+
+</script>
+
+<style module>
+
+.datepicker {
+	@apply h-[var(--h-cp)];
+	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
+	@apply border-[1px] border-text-200 bg-base-50;
+	@apply hover:border-text-300 cursor-pointer;
+}
+.datepicker select{
+	@apply appearance-none p-2 bg-transparent text-center w-full outline-none;
+}
+.datepicker input{
+	@apply appearance-none p-2 bg-transparent w-full outline-none;
+}
+.datepicker label{
+	@apply block p-2 text-center;
+}
+.datepicker input[type=radio]{
+	@apply hidden;
+}
+.datepicker input[type=radio]:checked + label{
+}
+
+.button{
+	@apply rounded-full aspect-square;
+}
+.button.otherMonth{
+	@apply text-text-300;
+}
+
+.arrow{
+	@apply absolute right-0 pointer-events-none bg-base-50 px-2;
+	top: 50%;
+	transform: translate3d(0, -50%, 0);
+}
+.arrow svg{
+	@apply block fill-text-300;
+}
+
+.datepicker.mode-calendar{
+  @apply p-2 h-auto;
+}
+
+.datepicker-date--1, .datepicker-date-1{
+  @apply text-gray-500;
+}
+
+.selected{
+	@apply bg-primary;
+}
+
+</style>

package/src/components/Dropdown.vue

@@ -0,0 +1,198 @@
+<template>
+
+	<div :class="computedClass">
+
+		<select v-if="[ 1 ].includes(mode)" class="flex-1" ref="select" @change="onChanged" :disabled="disabled"
+						:value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
+			<slot></slot>
+		</select>
+
+		<input v-else-if="[ 2, 'custom' ].includes(mode)" type="text" class="flex-1" readonly :disabled="disabled"
+					 @click="openContextMenu" ref="input"
+					 :value="modelValue ?? value" @input="$emit('update:modelValue', $event.target.value)" />
+		<div :class="$style.arrow">
+			<svg width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path fill-rule="evenodd" clip-rule="evenodd" d="M4.96967 8.71967C5.26256 8.42678 5.73744 8.42678 6.03033 8.71967L11.8232 14.5126C11.9209 14.6102 12.0791 14.6102 12.1768 14.5126L17.9697 8.71967C18.2626 8.42677 18.7374 8.42677 19.0303 8.71967C19.3232 9.01256 19.3232 9.48743 19.0303 9.78033L13.2374 15.5732C12.554 16.2566 11.446 16.2566 10.7626 15.5732L4.96967 9.78033C4.67678 9.48744 4.67678 9.01256 4.96967 8.71967Z"/>
+			</svg>
+		</div>
+
+		<ContextMenu v-if="[ 2, 'custom' ].includes(mode)" ref="contextMenu" :position="position"
+				 :state="!!contextMenu"
+				 :caller="(contextMenu ?? {}).caller ?? null"
+				 @dismiss="contextMenu = null"
+				 @open="attachEvent">
+			<slot></slot>
+		</ContextMenu>
+	</div>
+
+</template>
+
+<script>
+
+export default {
+
+	props: {
+
+		mode: {
+			type: [ String, Number ],
+			default: 1
+		},
+
+		disabled: undefined,
+
+		modelValue: [ String, Number ],
+
+		variant: String,
+
+		size: String,
+
+		position: String,
+
+		width: String,
+
+		state: {
+			type: [ Number, String ],
+			default: 1 // 1:normal, -1:disabled, -2:error
+		},
+
+		errors:{
+			type: [ String, Array ],
+			default: ''
+		},
+
+		value: undefined
+
+	},
+
+	computed:{
+
+		computedState(){
+			if(this.errors){
+				return -2
+			}
+			else{
+				return this.state
+			}
+		},
+
+		computedClass(){
+
+			return [
+				this.$style.dropdown,
+				this.$style['state-' + this.computedState],
+				this.$style['variant-' + this.variant],
+				this.$style['size-' + this.size],
+			]
+				.join(' ')
+		}
+
+	},
+
+	emits: [
+		"update:modelValue", "change"
+	],
+
+	data(){
+		return {
+			contextMenu: null,
+			contextMenuLeft: null,
+			contextMenuTop: null,
+		}
+	},
+
+	mounted(){
+
+	},
+
+	methods: {
+
+		attachEvent(){
+			this.$refs.contextMenu.$refs.contextMenu.querySelectorAll('[data-value]').forEach((itemEl) => {
+				itemEl.addEventListener('click', this.onItemClick)
+			})
+		},
+
+		onItemClick(e){
+
+			let [ value, text ] = e.target.closest('[data-value]').getAttribute('data-value').split('|')
+			if(!text) text = value
+
+			this.$refs.input.value = text
+			this.contextMenu = null
+			this.$emit('update:modelValue', value)
+			this.$emit('change', value)
+		},
+
+		onChanged(){
+			this.$emit('update:modelValue', this.$refs.select.value)
+			this.$emit('change', this.$refs.select.value)
+		},
+
+		openContextMenu(){
+
+			const { x, y } = this.$el.getBoundingClientRect()
+			this.contextMenuLeft = Math.round(x)
+			this.contextMenuTop = Math.round(y)
+
+			this.contextMenu = {
+				caller: this.$el
+			}
+
+		}
+
+	}
+
+
+}
+
+</script>
+
+<style module>
+
+.dropdown{
+	@apply h-[var(--h-cp)];
+	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
+	@apply border-[1px] border-text-200 bg-base-50 hover:border-text-300;
+}
+
+.dropdown select,
+.dropdown input{
+	@apply appearance-none outline-none p-2 bg-transparent cursor-pointer;
+}
+
+.arrow{
+	@apply absolute right-0 pointer-events-none px-2;
+	top: 50%;
+	transform: translate3d(0, -50%, 0);
+}
+
+.arrow svg{
+	@apply block fill-text-200;
+}
+.dropdown:hover svg{
+	@apply fill-text-300;
+}
+
+
+.size-sm{
+	@apply border-[1px]
+}
+
+.size-sm select,
+.size-sm input{
+	@apply p-0;
+}
+
+.size-sm .arrow{
+	@apply p-2
+}
+
+.variant-transparent{
+	@apply bg-transparent border-transparent hover:border-transparent
+}
+
+.state--2{
+	@apply border-red-500
+}
+
+</style>

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>

package/src/components/ErrorText.vue

@@ -0,0 +1,36 @@
+<template>
+	<div :class="$style.comp" v-if="error" @click="$emit('dismissError')">
+		<div v-if="error.response && error.response.data && error.response.data.errors">
+			<div v-for="(text, key) in error.response.data.errors">
+				<div v-if="!errorKey || key === errorKey">
+					<div v-for="txt in text">{{ txt }}</div>
+				</div>
+			</div>
+		</div>
+		<div v-else-if="error.message" class="p-2 bg-base-500">{{ error.message }}</div>
+		<div v-else>
+			<pre>{{ error }}</pre>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		error: Object,
+		errorKey: String
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp *{
+	@apply text-red-500;
+}
+
+</style>

package/src/components/Feed.vue

@@ -0,0 +1,118 @@
+<template>
+
+	<div :class="$style.comp">
+		<div v-if="items" v-for="(item, idx) in items">
+			<slot name="item" :item="item"></slot>
+		</div>
+		<div @click="loadNext" ref="next">
+			<div v-if="nextPage && nextPage > page && this.state === 1">
+				<slot v-if="$slots.next" name="next" :nextPage="nextPage" :page="page"></slot>
+				<div v-else class="flex items-center justify-center cursor-pointer">
+					Load more...
+				</div>
+			</div>
+		</div>
+		<div v-if="state === 2">
+			<slot v-if="$slots.loading" name="loading"></slot>
+			<div v-else class="flex items-center justify-center p-2">
+				<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+					<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+					<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+				</svg>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+
+export default{
+
+	props:{
+
+		src: [ String, Function ],
+
+		itemsPerPage: {
+			type: [ Number, String ],
+			default: 12
+		},
+
+		manual: {
+			type: Boolean,
+			default: false
+		}
+
+	},
+
+	mounted() {
+		if(!this.manual){
+			this.load()
+		}
+	},
+
+	data(){
+		return {
+			page: 1,
+			nextPage: null,
+			items: null,
+			state: 1,
+		}
+	},
+
+	methods:{
+
+		async load(){
+			if(typeof this.src === 'function'){
+
+				this.state = 2
+				this.items = null
+				this.page = 1
+				const { items, page, nextPage } = await this.src({
+					page: this.page,
+					itemsPerPage: this.itemsPerPage
+				})
+				this.state = 1
+
+				this.items = items
+				this.nextPage = nextPage
+				if(page) this.page = page
+
+				this.$observe.always(this.$refs.next, () => {
+					this.loadNext()
+				})
+			}
+		},
+
+		async loadNext(){
+
+			if(!(this.nextPage && this.nextPage > this.page)) return
+
+			if(typeof this.src === 'function'){
+
+				this.state = 2
+				const { items, page, nextPage } = await this.src({
+					page: this.nextPage,
+					itemsPerPage: this.itemsPerPage
+				})
+				this.state = 1
+
+				this.items.push(...items)
+				this.nextPage = nextPage
+				if(page) this.page = page
+			}
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>