@mixd-id/web-scaffold 0.2.240706 → 0.2.250801009

package/src/components/Datepicker.vue

@@ -1,24 +1,51 @@
 <template>
 
-	<div v-if="mode === ''" :class="compClass">
-		<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 v-if="mode === ''" :class="compClass" class="divide-x divide-border-50">
+    <div class="w-[80px] flex flex-row items-center relative">
+      <select v-model="DD" class="text-left w-full flex-1 px-3">
+        <option disabled selected>Tanggal</option>
+        <option v-for="d in 31" :value="d.toString().padStart(2, '0')">{{ d }}</option>
+      </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" 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 class="w-[120px] flex flex-row items-center relative">
+      <select v-model="MM" class="text-left w-full flex-1 px-3">
+        <option disabled selected>Bulan</option>
+        <option v-for="mmm in months" :value="mmm[0]">{{ mmm[1] }}</option>
+      </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" 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 class="w-[100px] flex flex-row items-center relative">
+      <select v-model="YYYY" class="text-left w-full flex-1 px-3">
+        <option disabled selected>Tahun</option>
+        <option v-for="yyyy in years" :value="yyyy">{{ yyyy }}</option>
+      </select>
+
+      <div class="absolute top-0 bottom-0 right-0 p-2 flex justify-center items-center pointer-events-none">
+        <svg class="fill-text-300" 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>
 
   <div v-else :class="compClass">
 
 		<div v-if="mode === 'popup'" ref="popup"
-				 @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.modelValue } : null"
+				 @click="!readonly ? contextMenu = { caller:$refs.popup, value:this.mModelValue } : null"
 				 class="flex-1">
 			<input class="flex-1" type="text" readonly :value="DMMMYYYY"/>
 			<div :class="$style.arrow" v-if="!readonly">
@@ -51,8 +78,11 @@
 			</div>
 		</div>
 
-		<ContextMenu v-if="mode === 'popup'" :state="!!(contextMenu.caller)" :caller="contextMenu.caller ?? null"
-			@dismiss="contextMenu = {}">
+		<ContextMenu v-if="mode === 'popup'"
+                 class="mt-3"
+                 :state="!!(contextMenu.caller)"
+                 :caller="contextMenu.caller ?? null"
+                 @dismiss="contextMenu = {}">
 			<div class="p-4">
 				<div class="flex items-center">
 					<h4 class="flex-1">{{ contextMenuTitle }}</h4>
@@ -70,10 +100,14 @@
 				<div class="grid grid-cols-7 gap-2 mt-2">
 					<div v-for="i in 7">{{ getDayOfWeekLabel(i) }}</div>
 					<button type="button" :class="buttonStyle(d.value)"
+                  :disabled="(allowedDates && !allowedDates.includes(d.value)) || (onlyTodayAndFuture && isValidTodayAndFuture(d.value)) || (pastOnly && isPast(d.value))"
 									v-for="d in contextMenuDates" @click="setValue(d.value)">
 						{{ d.date }}
 					</button>
 				</div>
+        <div class="mt-6">
+          <button type="button" class="text-primary" @click="this.$emit('update:modelValue', 'today')">Today</button>
+        </div>
 			</div>
 		</ContextMenu>
 
@@ -96,15 +130,13 @@ 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 ?? props.defaultValue).format('DD'))
-		const MM = ref(dayjs(props.modelValue ?? props.defaultValue).format('MM'))
-		const YYYY = ref(dayjs(props.modelValue ?? props.defaultValue).format('YYYY'))
+		const DD = ref(dayjs(props.mModelValue ?? props.defaultValue).format('DD'))
+		const MM = ref(dayjs(props.mModelValue ?? props.defaultValue).format('MM'))
+		const YYYY = ref(dayjs(props.mModelValue ?? props.defaultValue).format('YYYY'))
 
 		watch([ YYYY, MM, DD ], (to) => {
 			emit('update:modelValue', to.join('-'))
@@ -140,18 +172,33 @@ export default{
 
 		readonly: undefined,
 
+    allowedDates: Array,
+
+    onlyTodayAndFuture: Boolean,
+    pastOnly: Boolean,
+
   },
 
   computed:{
 
+    mModelValue(){
+      if(this.modelValue === 'today')
+        return dayjs().format('YYYY-MM-DD')
+      return this.modelValue
+    },
+
 		DMMMYYYY(){
-			return this.modelValue ? dayjs(this.modelValue).format('D MMM YYYY') : ''
+			return this.mModelValue ? dayjs(this.mModelValue).format('D MMM YYYY') : ''
 		},
 
 		YYYYMMM(){
 			return dayjs(this.contextMenu.value).format('YYYY-MM')
 		},
 
+    today(){
+      return dayjs().format('YYYY-MM-DD')
+    },
+
     compClass(){
       return [
         this.$style.datepicker,
@@ -181,17 +228,22 @@ export default{
 			for(let i = 1 ; i <= 42 ; i++){
 				if(startDayOfMonth > 0){
 					startDayOfMonth--
+          const value = dayjsInput.subtract(1, 'month')
+              .format(`YYYY-MM-${(endDateOfLastMonth - startDayOfMonth).toString().padStart(2, '0')}`)
+
 					dates.push({
 						date: endDateOfLastMonth - startDayOfMonth,
-						value: year + '-' + month.toString().padStart(2, '0') + '-' + (endDateOfLastMonth - startDayOfMonth).toString().padStart(2, '0'),
-						type: -1
+						value,
+            type: -1
 					})
 				}
 				else if(currentDate > endDateOfMonth){
-					dates.push({
+          const value = dayjsInput.add(1, 'month').format(`YYYY-MM-${nextDate.toString().padStart(2, '0')}`)
+
+          dates.push({
 						date: nextDate,
-						value: year + '-' + (month + 2).toString().padStart(2, '0') + '-' + nextDate.toString().padStart(2, '0'),
-						type: 1
+						value,
+            type: 1
 					})
 					nextDate++
 				}
@@ -227,7 +279,7 @@ export default{
 		buttonStyle(val){
 			return [
 				this.$style.button,
-				this.modelValue === val ? this.$style.selected : '',
+				this.mModelValue === val ? this.$style.selected : '',
 				dayjs(val).format('YYYY-MM') !== this.YYYYMMM ? this.$style.otherMonth : ''
 			]
 			.join(' ')
@@ -247,6 +299,14 @@ export default{
 
 		},
 
+    isValidTodayAndFuture(val){
+      return val.localeCompare(this.today) < 0
+    },
+
+    isPast(val){
+      return val.localeCompare(this.today) > 0
+    },
+
 		setValue(d){
 			this.$emit('update:modelValue', d)
 			this.$emit('change', d)
@@ -264,16 +324,15 @@ export default{
 <style module>
 
 .datepicker {
-	@apply min-h-[var(--h-cp)];
-	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
+	@apply flex overflow-hidden cursor-pointer relative;
+  @apply border-[1px] border-border-200 bg-base-400 rounded-lg;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){
-	@apply hover:border-text-300
+	@apply hover:border-border-300
 }
 .datepicker select{
-	@apply appearance-none p-2 bg-transparent text-center w-full outline-none;
+	@apply appearance-none p-2 bg-transparent text-center outline-none;
 }
 .datepicker input{
 	@apply appearance-none p-2 bg-transparent w-full outline-none;
@@ -290,14 +349,20 @@ export default{
 .button{
 	@apply rounded-full aspect-square;
 }
-.button:hover{
+.button:not(:disabled){
+  @apply cursor-default;
+}
+.button:disabled{
+  @apply text-text-300;
+}
+.button:not(:disabled):hover{
   @apply bg-primary-200;
 }
 .button.selected{
   @apply bg-primary text-white;
 }
-.button.otherMonth{
-	@apply text-text-300;
+.button:not(:disabled).otherMonth{
+	@apply text-text-400;
 }
 
 .arrow{
@@ -314,11 +379,7 @@ export default{
 }
 
 .mode-{
-	@apply flex flex-row gap-2;
-}
-.mode- select{
-	@apply rounded-lg;
-	@apply min-h-[var(--h-cp)];
+	@apply inline-flex flex-row;
 }
 .mode- select:first-child{
 	@apply w-12;

package/src/components/DayTimeRange.vue

@@ -14,9 +14,10 @@
           <option value="thu">Thu</option>
           <option value="fri">Fri</option>
           <option value="sat">Sat</option>
+          <option value="-">Holiday</option>
         </select>
       </div>
-      <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-text-100 divide-y divide-text-100">
+      <div class="flex-1 flex flex-col gap-1 pl-2 border-l-[1px] border-border-100 divide-y divide-text-100">
         <div v-for="(range, i) in val.value" class="flex flex-row">
           <div class="flex-1 flex flex-row">
             <input type="time" v-model="val.value[i][0]" @blur="updateModelValue()">
@@ -110,7 +111,7 @@ export default{
 <style module>
 
 .comp{
-  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
+  @apply border-[1px] border-border-200 bg-base-500 rounded-lg;
   @apply inline-flex flex-col divide-y divide-text-100;
 }
 

package/src/components/Dropdown.vue

@@ -161,10 +161,10 @@ export default {
 
 .dropdown{
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-500;
+	@apply border-[1px] border-border-200 bg-base-400;
 }
 .dropdown:not(.readonly){
-	@apply hover:border-text-300;
+	@apply hover:border-border-300;
 }
 .dropdown.readonly{
   @apply bg-text-50;
@@ -176,9 +176,12 @@ export default {
 }
 
 .dropdown option{
-  @apply bg-base-50 text-text;
+  @apply bg-base-300 text-text;
 }
 
+.dropdown select[disabled]{
+  @apply cursor-not-allowed;
+}
 .dropdown option[disabled]{
 	@apply text-text-300;
 }
@@ -190,7 +193,7 @@ export default {
 }
 
 .arrow svg{
-	@apply block fill-text-200;
+	@apply block fill-text-300;
 }
 .dropdown:hover svg{
 	@apply fill-text-300;

package/src/components/Flex.vue

@@ -1,11 +1,12 @@
 <template>
 	<div :class="$style.Flex" :style="computedStyle">
 
-		<component v-for="(item, idx) in cItems"
-							 :is="item.type"
-               :key="item.key"
-               :data="data"
-							 :="item" />
+		<slot name="default">
+      <component v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+    </slot>
 
 	</div>
 </template>
@@ -16,48 +17,21 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
-  computed: {
-
-    cItems(){
-
-      if(!this.dataKey)
-        return this.items
-
-      const page = this.getPage()
-      const obj = page.data?.find(_ => _.key === this.dataKey)
-
-      if(this.editMode !== 'design'){
-        return obj ?
-            obj.value.map(_ => ({
-              ...this.items[0],
-              data: _
-            })) :
-            []
-      }
-      else{
-        return this.items.length > 0 ? [
-          this.items[0]
-        ] :
-        []
-      }
-    }
-
-  },
-
-  inject: [ 'getPage' ],
-
 	mixins: [ componentMixin ],
 
 	props:{
-
 		items: Array,
-
-    dataKey: String,
-
+		flexColumns: Array,
+		columnType: Array,
     data: Object
-
 	},
 
+  provide(){
+    return {
+      parentData: this.data
+    }
+  }
+
 }
 
 </script>

package/src/components/GHeatMaps.vue

@@ -14,7 +14,7 @@
 
     <div class="flex flex-row">
 
-      <div class="flex-1 flex items-center justify-center divide-x divide-text-50 border-l-[1px] border-r-[1px] border-text-50">
+      <div class="flex-1 flex items-center justify-center divide-x divide-border-50 border-l-[1px] border-r-[1px] border-border-50">
         <button type="button" class="p-1 px-3 hover:bg-primary text-text-400" @click="zoomOut">
           <svg width="16" height="16" class="fill-text-500 hover:fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"/></svg>
         </button>
@@ -311,7 +311,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col h-[40vh] border-[1px] border-text-50 bg-base-500 rounded-xl overflow-hidden;
+	@apply flex flex-col h-[40vh] border-[1px] border-border-50 bg-base-500 rounded-xl overflow-hidden;
 }
 
 </style>

package/src/components/Grid.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="$style.comp" :style="computedStyle">
-
-    <component v-for="item in items"
-							 :is="item.type"
-               :key="item.key"
-							 :="item" />
-
+    <slot>
+      <component v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+    </slot>
   </div>
 </template>
 

package/src/components/HTMLEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="overflow-x-auto bg-text-50">
+		<div class="overflow-x-auto bg-base-400" :class="containerClass" v-if="!readonly">
 			<div class="flex flex-row">
 				<button class="p-3" type="button" @click="format('bold')">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
@@ -21,7 +21,7 @@
 				<button class="p-3" type="button" ref="listBtn" @click="$refs.listContext.open($refs.listBtn)">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
 				</button>
-				<button class="p-3" type="button" @click="createImage">
+				<button v-if="canUpload" class="p-3" type="button" @click="createImage">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>
 				</button>
 				<button class="p-3" type="button" @click="createLink">
@@ -30,12 +30,12 @@
 				<button class="p-3" type="button" @click="removeFormat">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
 				</button>
-				<button @click="createTable">Table</button>
+				<button @click="createTable" class="text-text-400">Table</button>
 			</div>
 		</div>
 
-		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste" spellcheck="false"
-						 @input="onInput" @click="onClick"
+		<article ref="article" :contenteditable="!readonly" v-html="html" @paste="onPaste" spellcheck="false"
+						 @input="onInput" @click="onClick" :class="itemClass"
 						 @blur="onBlur">
 		</article>
 
@@ -137,10 +137,10 @@
 		  </template>
 		  <div class="flex-1 flex flex-col gap-5 p-5">
 				<div>
-					<Image class="min-h-[100px] bg-base-300 rounded-xl" ref="image" :src="newImage.src" editable="true"
+					<Image class="min-h-[100px] bg-text-50 cursor-pointer rounded-xl" ref="image" :src="newImage.src" editable="true"
 						 @click="$refs.image.edit()" @change="onImageChanged">
 					  <template #empty="{ instance }">
-							<div class="absolute right-0 top-0 bottom-0 left-0 flex items-center justify-center">
+							<div class="absolute text-primary underline right-0 top-0 bottom-0 left-0 flex items-center justify-center">
 								Click to Add Image...
 							</div>
 						</template>
@@ -258,11 +258,19 @@ export default{
 
 	props:{
 		modelValue: String,
-		uploadImage: String
+		uploadImage: String,
+		uploadImageFn: String,
+    containerClass: String,
+    itemClass: String,
+    readonly: Boolean
 	},
 
 	computed: {
 
+    canUpload(){
+      return `${this.uploadImage ?? ''}`.length > 0 || typeof this.uploadImageFn === 'function'
+    },
+
 		linkCanSave(){
 			return this.newLink.href && this.newLink.text
 		},
@@ -308,8 +316,8 @@ export default{
 			}
 			else{
 				this.newImage = {
-					width: "",
-					height: "",
+					width: "120px",
+					height: "120px",
 					element: null
 				}
 			}
@@ -374,6 +382,7 @@ export default{
 	</tr>
 </table>`);
 
+      this.$refs.tableModal.close()
 		},
 
 		removeFormat(){
@@ -545,11 +554,15 @@ export default{
 <style module>
 
 .comp{
-	@apply flex-1 flex flex-col border-[1px] border-text-200 rounded-lg;
+	@apply flex-1 flex flex-col border-[1px] border-border-200 rounded-lg overflow-hidden;
+}
+
+.comp article:before{
+  content: " "
 }
 
 .comp article {
-	@apply min-h-[var(--h-cp)] w-full outline-none p-2 leading-6;
+	@apply w-full outline-none p-3 leading-6 bg-base-400;
 	@apply flex-1 overflow-auto;
 }
 
@@ -566,10 +579,10 @@ export default{
 }
 
 .comp table{
-	@apply border-[1px] border-text-200 border-collapse;
+	@apply border-[1px] border-border-200 border-collapse;
 }
 .comp table th, .comp table td{
-	@apply border-[1px] border-text-200 p-3 text-left;
+	@apply border-[1px] border-border-200 p-3 text-left;
 }
 
 </style>