@bagelink/vue 0.0.186 → 0.0.190

package/src/components/dashboard/Lineart.vue

@@ -1,100 +1,121 @@
 <template>
-  <div ref="chartContainer" class="chart-line">
-    <Chart
-      v-if="chartSize"
-      :size="chartSize"
-      :data="data"
-      :margin="chartMargin"
-      :axis="axisConfig"
-    >
-      <template #layers>
-        <Grid :center="true" strokeDasharray="2,2" :hideY="true" />
-        <Area
-          aria-label="Profit/Loss"
-          :dataKeys="['date', 'total_value']"
-          type="monotone"
-          :areaStyle="{ fill: 'url(#grad)' }"
-        />
-        <Line
-          :dataKeys="['date', 'total_value']"
-          type="monotone"
-          :dotStyle="dotStyling"
-          :lineStyle="{ stroke: BRAND_COLOR, r: 2 }"
-        />
-        <Marker
-          v-if="displayMarker"
-          :value="meanValue"
-          label="ממוצע"
-          :color="BRAND_COLOR"
-          :strokeWidth="2"
-          strokeDasharray="6 6"
-        />
-        <defs>
-          <linearGradient id="grad" gradientTransform="rotate(90)">
-            <stop offset="0%" :stop-color="BRAND_COLOR" stop-opacity="1" />
-            <stop offset="100%" stop-color="white" stop-opacity="0.4" />
-          </linearGradient>
-        </defs>
-      </template>
-      <template #widgets>
-        <Tooltip color="white" :config="tooltipConfiguration" />
-      </template>
-    </Chart>
-  </div>
+	<div
+		ref="chartContainer"
+		class="chart-line"
+	>
+		<Chart
+			v-if="chartSize"
+			:size="chartSize"
+			:data="data"
+			:margin="chartMargin"
+			:axis="axisConfig"
+		>
+			<template #layers>
+				<Grid
+					:center="true"
+					strokeDasharray="2,2"
+					:hideY="true"
+				/>
+				<Area
+					aria-label="Profit/Loss"
+					:dataKeys="['date', 'total_value']"
+					type="monotone"
+					:areaStyle="{ fill: 'url(#grad)' }"
+				/>
+				<Line
+					:dataKeys="['date', 'total_value']"
+					type="monotone"
+					:dotStyle="dotStyling"
+					:lineStyle="{ stroke: BRAND_COLOR, r: 2 }"
+				/>
+				<Marker
+					v-if="displayMarker"
+					:value="meanValue"
+					label="ממוצע"
+					:color="BRAND_COLOR"
+					:strokeWidth="2"
+					strokeDasharray="6 6"
+				/>
+				<defs>
+					<linearGradient
+						id="grad"
+						gradientTransform="rotate(90)"
+					>
+						<stop
+							offset="0%"
+							:stop-color="BRAND_COLOR"
+							stop-opacity="1"
+						/>
+						<stop
+							offset="100%"
+							stop-color="white"
+							stop-opacity="0.4"
+						/>
+					</linearGradient>
+				</defs>
+			</template>
+			<template #widgets>
+				<Tooltip
+					color="white"
+					:config="tooltipConfiguration"
+				/>
+			</template>
+		</Chart>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from "vue";
-import { Chart, Grid, Line, Area, Tooltip, Marker } from "vue3-charts";
-import type { ChartAxis, Data } from "vue3-charts/dist/types";
+import { onMounted, onUnmounted } from 'vue';
+import {
+	Chart, Grid, Line, Area, Tooltip, Marker,
+} from 'vue3-charts';
+import type { ChartAxis, Data } from 'vue3-charts/dist/types';
 
 const props = defineProps<{ data: Data[]; locale: string }>();
 
-const data = $computed(() =>
-  props.locale === "he" ? [...props.data].reverse() : props.data
-);
+const data = $computed(() => (props.locale === 'he' ? [...props.data].reverse() : props.data));
 
 interface Size {
-  width: number;
-  height: number;
+	width: number;
+	height: number;
 }
 
 // Computed properties
 const meanValue = $computed(() => {
-  const sum = props.data.reduce((acc, curr) => acc + +curr.total_value, 0);
-  return sum / props.data.length;
+	const sum = props.data.reduce((acc, curr) => acc + +curr.total_value, 0);
+	return sum / props.data.length;
 });
 
 const axisConfig = $computed<ChartAxis>(() => ({
-  primary: {
-    type: "band",
-    rotate: true,
-    ticks: 5,
-    domain: ["dataMin", "dataMax"],
-    tickValues:
-      props.data?.length > 100 ? [""] : props.data.map((d: any) => d.date),
-  },
-  secondary: {
-    domain: ["dataMin", "dataMax * 1.05"],
-    type: "linear",
-    ticks: 8,
-  },
+	primary: {
+		type: 'band',
+		rotate: true,
+		ticks: 5,
+		domain: ['dataMin', 'dataMax'],
+		tickValues:
+			props.data?.length > 100 ? [''] : props.data.map((d: any) => d.date),
+	},
+	secondary: {
+		domain: ['dataMin', 'dataMax * 1.05'],
+		type: 'linear',
+		ticks: 8,
+	},
 }));
 
 // Constants
-const BRAND_COLOR = "var(--bgl-primary)";
+const BRAND_COLOR = 'var(--bgl-primary)';
 
 const tooltipConfiguration = {
-  date: { label: "תאריך" },
-  total_value: {
-    color: BRAND_COLOR,
-    label: "סכום",
-    format: (v: number) => `₪${v.toLocaleString()}`,
-  },
-  total_count: {
-    label: "מספר התרומות",
-    format: (v: number) => `${v.toLocaleString()}`,
-  },
+	date: { label: 'תאריך' },
+	total_value: {
+		color: BRAND_COLOR,
+		label: 'סכום',
+		format: (v: number) => `₪${v?.toLocaleString?.() || ''}`,
+	},
+	total_count: {
+		label: 'מספר התרומות',
+		format: (v: number) => `${v?.toLocaleString?.() || ''}`,
+	},
 };
 
 // Refs
@@ -102,83 +123,83 @@ let chartSize = $ref<Size | null>(null);
 const chartContainer = $ref<HTMLElement>();
 const displayMarker = $ref(true);
 const chartMargin = $ref({
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
+	left: 0,
+	top: 0,
+	right: 0,
+	bottom: 0,
 });
 
 // Functions
 const adjustChartSize = () => {
-  chartSize = null;
-  const el = chartContainer;
-  if (!el) return;
-  const { width, height } = el.getBoundingClientRect();
-  chartSize = { width: width - 5, height: height - 10 };
-  console.log(chartSize);
+	chartSize = null;
+	const el = chartContainer;
+	if (!el) return;
+	const { width, height } = el.getBoundingClientRect();
+	chartSize = { width: width - 5, height: height - 10 };
+	console.log(chartSize);
 };
 
 const handleResize = () => {
-  setTimeout(adjustChartSize, 300);
+	setTimeout(adjustChartSize, 300);
 };
 
 // Lifecycle hooks
 onMounted(() => {
-  adjustChartSize();
-  window.addEventListener("resize", handleResize);
+	adjustChartSize();
+	window.addEventListener('resize', handleResize);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("resize", handleResize);
+	window.removeEventListener('resize', handleResize);
 });
 
 // Style Configurations
 const dotStyling = (ctx: Record<string, any>) => ({
-  r: ctx.active ? 5 : 1,
-  fill: BRAND_COLOR,
+	r: ctx.active ? 5 : 1,
+	fill: BRAND_COLOR,
 });
 </script>
 
 <style>
 .chart-line {
-  width: 100%;
-  height: 300px;
+	width: 100%;
+	height: 300px;
 }
 
 [dir="rtl"] .chart-line {
-  direction: ltr;
+	direction: ltr;
 }
 
-.chart-line .v-tooltip-content > div {
-  border: none !important;
-  border-radius: 6px !important;
-  background-color: black !important;
-  opacity: 0.7;
-  padding: 0.5rem 1rem !important;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
-  font-weight: 300;
+.chart-line .v-tooltip-content>div {
+	border: none !important;
+	border-radius: 6px !important;
+	background-color: black !important;
+	opacity: 0.7;
+	padding: 0.5rem 1rem !important;
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+	font-weight: 300;
 }
 
-.chart-line .v-tooltip-content > div b {
-  font-weight: 400;
+.chart-line .v-tooltip-content>div b {
+	font-weight: 400;
 }
 
 .layer-grid g:last-child {
-  display: none;
+	display: none;
 }
 
 .layer-axis-x .tick:nth-child(2n + 1) {
-  opacity: 0;
+	opacity: 0;
 }
 
 @media screen and (max-width: 910px) {
-  .chart-line {
-    height: 140px;
-  }
-
-  .layer-axis-x .tick {
-    opacity: 0;
-    font-size: 0;
-  }
+	.chart-line {
+		height: 140px;
+	}
+
+	.layer-axis-x .tick {
+		opacity: 0;
+		font-size: 0;
+	}
 }
 </style>

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);
-	// console.log({ files });
-	if (!computedMultiple) return props.context?.node.input(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,14 +202,16 @@ async function addFiles(addedFiles: FileList) {
 
 onMounted(() => {
 	dropZoneEl?.addEventListener('dragover', animateCircle);
-	if (!computedMultiple && props.context?.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: props.context?.value,
+			serverFile: imageObj,
 			uploaded: true,
 			uploading: false,
 			progress: 100,
-			dataUrl: props.context?.value?.url,
-			name: props.context?.value?.name,
+			dataUrl: imageObj?.url,
+			name: imageObj?.name,
 		});
 	}
 });