@bagelink/vue 0.0.188 → 0.0.190

package/src/components/form/inputs/DatePicker.vue

@@ -0,0 +1,153 @@
+<template>
+	<div class="datetime-wrap">
+		<div class="date-wrap">
+			<VDatepicker
+				inline
+				week-start="0"
+				v-model="selectedDate"
+				:highlight-week-days="[6]"
+				:enable-time-picker="false"
+				:month-change-on-scroll="false"
+				v-bind="options"
+			>
+				<template #action-buttons/>
+				<template #action-preview/>
+			</VDatepicker>
+		</div>
+		<div class="time-wrap" v-if="showTimeWrap">
+			<template v-for="hr in hours" :key="hr">
+				<input type="radio" :id="`${hr}_${name}`" :name="name" :value="hr" v-model="selectedHour" >
+				<label :for="`${hr}_${name}`">{{ hr }}</label>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import VDatepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+defineProps<{ name: string, options: Record<string, any>, showTimeWrap: boolean}>();
+const selectedDate = $ref(null);
+const selectedHour = $ref();
+
+const hours = Array.from({ length: 18 }, (_, index) => {
+	const hour = Math.floor(index / 2) + 9;
+	const minute = index % 2 === 0 ? '00' : '30';
+	return `${hour}:${minute}`;
+});
+</script>
+<style>
+.datetime-wrap {
+  display: flex;
+  gap: 3rem;
+  padding: 1rem;
+}
+
+.time-wrap {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+}
+
+.time-wrap input {
+  display: none;
+}
+
+.time-wrap label {
+  background: var(--input-bg);
+  border-radius: var(--btn-border-radius);
+  line-height: calc(var(--btn-height) * 0.9);
+  display: block;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  text-align: center;
+  font-size: 16px;
+  color: var(--bgl-primary);
+  border: 1px solid var(--bgl-primary);
+}
+
+.time-wrap input[type="radio"]:checked+label {
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+}
+
+.time-wrap label:hover {
+  filter: var(--bgl-hover-filter);
+}
+
+.time-wrap label:active {
+  filter: var(--bgl-active-filter);
+}
+
+.dp__theme_light {
+  --dp-background-color: var(--bgl-white);
+  --dp-text-color: var(--bgl-black);
+  --dp-hover-color: var(--input-bg);
+  --dp-hover-text-color: var(--bgl-black);
+  --dp-hover-icon-color: var(--bgl-primary);
+  --dp-primary-color: var(--bgl-primary);
+  --dp-primary-disabled-color: var(--bgl-primary);
+  --dp-primary-text-color: var(--bgl-white);
+  --dp-secondary-color: var(--bgl-gray);
+  --dp-border-color: transparent;
+  --dp-menu-border-color: transparent;
+  --dp-scroll-bar-background: transparent;
+  --dp-scroll-bar-color: var(--bgl-gray);
+  --dp-icon-color: var(--bgl-gray);
+  --dp-highlight-color: var(--bgl-gray-light);
+}
+
+:root {
+  --dp-font-family: inherit;
+  --dp-cell-border-radius: 100%;
+  --dp-common-transition: all 200s ease-in;
+
+  --dp-cell-size: 40px;
+  /*Width and height of calendar cell*/
+  --dp-menu-min-width: 280px;
+  /*Adjust the min width of the menu*/
+  --dp-row-margin: 8px 0;
+  /*Adjust the spacing between rows in the calendar*/
+}
+
+.dp__calendar_header {
+  font-weight: 400;
+  padding: 10px 0 0;
+  margin-bottom: -10px;
+}
+
+.dp__calendar_row>div:last-child {
+  pointer-events: none;
+}
+.dp__outer_menu_wrap.dp--menu-wrapper{
+filter: drop-shadow(0 0 20px var(--bgl-shadow));
+}
+.dp__input{
+  background: var(--input-bg);
+    border: none;
+    padding: 0.7rem;
+    border-radius: var(--input-border-radius);
+    color: var(--input-color);
+    min-width: calc(var(--input-height) * 3);
+    width: 100%;
+}
+.dp__input:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 10px #00000012;
+}
+@media screen and (max-width: 767px) {
+  .datetime-wrap {
+    flex-wrap: wrap;
+    padding: 0rem;
+    gap: 1rem;
+    justify-content: center;
+  }
+
+  :root {
+    --dp-menu-min-width: 200px;
+    --dp-cell-size: 35px;
+  }
+}
+</style>

package/src/components/form/inputs/index.ts

@@ -20,3 +20,4 @@ export { default as Checkbox } from './Checkbox.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
 export { default as DynamicLinkField } from './DynamicLinkField.vue';
 export { default as PlainText } from './PlainText.vue';
+export { default as DatePicker } from './DatePicker.vue';

package/src/components/formkit/FileUploader.vue

@@ -142,8 +142,8 @@ function animateCircle(e: DragEvent) {
 
 function emitValue() {
 	// const fileValues = files.map((f) => f.serverFile?.id);
-	const relationshipKey = props.context?.attrs?.relationshipKey;
-	if (!computedMultiple) return props.context?.node.input(relationshipKey ? files[0].serverFile.id : files[0].serverFile);
+	const relationshipObjKey = props.context?.attrs?.relationshipObjKey;
+	if (!computedMultiple) return props.context?.node.input(relationshipObjKey ? files[0].serverFile.id : files[0].serverFile);
 	// eslint-disable-next-line no-alert
 	return alert('not implemented');
 }
@@ -202,8 +202,8 @@ async function addFiles(addedFiles: FileList) {
 
 onMounted(() => {
 	dropZoneEl?.addEventListener('dragover', animateCircle);
-	const relationshipKey = props.context?.attrs?.relationshipKey;
-	const imageObj = relationshipKey ? props.context?.node?.parent?.value[relationshipKey] : props.context?.node?.value;
+	const relationshipObjKey = props.context?.attrs?.relationshipObjKey;
+	const imageObj = relationshipObjKey ? props.context?.node?.parent?.value[relationshipObjKey] : props.context?.node?.value;
 	if (!computedMultiple && imageObj) {
 		files.push({
 			serverFile: imageObj,