@bagelink/vue 0.0.182 → 0.0.188

package/dist/index.mjs

@@ -1190,7 +1190,7 @@ function isAbsoluteURL(url) {
   return /^([a-z][a-z\d+\-.]*:)?\/\//i.test(url);
 }
 function combineURLs(baseURL, relativeURL) {
-  return relativeURL ? baseURL.replace(/\/+$/, "") + "/" + relativeURL.replace(/^\/+/, "") : baseURL;
+  return relativeURL ? baseURL.replace(/\/?\/$/, "") + "/" + relativeURL.replace(/^\/+/, "") : baseURL;
 }
 function buildFullPath(baseURL, requestedURL) {
   if (baseURL && !isAbsoluteURL(requestedURL)) {
@@ -1614,7 +1614,7 @@ function mergeConfig(config1, config2) {
   });
   return config;
 }
-const VERSION = "1.6.2";
+const VERSION = "1.6.3";
 const validators$1 = {};
 ["object", "boolean", "number", "function", "string", "symbol"].forEach((type3, i2) => {
   validators$1[type3] = function validator2(thing) {
@@ -2386,7 +2386,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment$1, null, [
         createElementVNode("span", _hoisted_1$Z, null, 512),
-        createTextVNode(" " + toDisplayString(_ctx.input) + " ", 1)
+        createTextVNode(" " + toDisplayString(_ctx.input), 1)
       ], 64);
     };
   }
@@ -17816,9 +17816,10 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       (_h = (_g = (_f = dropCircle.value) == null ? void 0 : _f.style) == null ? void 0 : _g.setProperty) == null ? void 0 : _h.call(_g, "top", `${top2}px`);
     }
     function emitValue() {
-      var _a;
+      var _a, _b, _c;
+      const relationshipKey = (_b = (_a = props2.context) == null ? void 0 : _a.attrs) == null ? void 0 : _b.relationshipKey;
       if (!computedMultiple.value)
-        return (_a = props2.context) == null ? void 0 : _a.node.input(files.value[0].serverFile);
+        return (_c = props2.context) == null ? void 0 : _c.node.input(relationshipKey ? files.value[0].serverFile.id : files.value[0].serverFile);
       return alert("not implemented");
     }
     const isImg = (file) => {
@@ -17872,16 +17873,18 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       uploadFiles();
     }
     onMounted(() => {
-      var _a, _b, _c, _d, _e, _f, _g;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       (_a = dropZoneEl.value) == null ? void 0 : _a.addEventListener("dragover", animateCircle);
-      if (!computedMultiple.value && ((_b = props2.context) == null ? void 0 : _b.value)) {
+      const relationshipKey = (_c = (_b = props2.context) == null ? void 0 : _b.attrs) == null ? void 0 : _c.relationshipKey;
+      const imageObj = relationshipKey ? (_f = (_e = (_d = props2.context) == null ? void 0 : _d.node) == null ? void 0 : _e.parent) == null ? void 0 : _f.value[relationshipKey] : (_h = (_g = props2.context) == null ? void 0 : _g.node) == null ? void 0 : _h.value;
+      if (!computedMultiple.value && imageObj) {
         files.value.push({
-          serverFile: (_c = props2.context) == null ? void 0 : _c.value,
+          serverFile: imageObj,
           uploaded: true,
           uploading: false,
           progress: 100,
-          dataUrl: (_e = (_d = props2.context) == null ? void 0 : _d.value) == null ? void 0 : _e.url,
-          name: (_g = (_f = props2.context) == null ? void 0 : _f.value) == null ? void 0 : _g.name
+          dataUrl: imageObj == null ? void 0 : imageObj.url,
+          name: imageObj == null ? void 0 : imageObj.name
         });
       }
     });
@@ -28580,9 +28583,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props2 = __props;
-    const data2 = computed(
-      () => props2.locale === "he" ? [...props2.data].reverse() : props2.data
-    );
+    const data2 = computed(() => props2.locale === "he" ? [...props2.data].reverse() : props2.data);
     const meanValue = computed(() => {
       const sum = props2.data.reduce((acc, curr) => acc + +curr.total_value, 0);
       return sum / props2.data.length;
@@ -28609,11 +28610,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       total_value: {
         color: BRAND_COLOR,
         label: "סכום",
-        format: (v) => `₪${v.toLocaleString()}`
+        format: (v) => {
+          var _a;
+          return `₪${((_a = v == null ? void 0 : v.toLocaleString) == null ? void 0 : _a.call(v)) || ""}`;
+        }
       },
       total_count: {
         label: "מספר התרומות",
-        format: (v) => `${v.toLocaleString()}`
+        format: (v) => {
+          var _a;
+          return `${((_a = v == null ? void 0 : v.toLocaleString) == null ? void 0 : _a.call(v)) || ""}`;
+        }
       }
     };
     let chartSize = ref(null);

package/dist/style.css

@@ -2235,37 +2235,37 @@ input[type='email'][data-v-ed81a514] {
 }
 
 .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;
+		height: 140px;
 }
 .layer-axis-x .tick {
-    opacity: 0;
-    font-size: 0;
+		opacity: 0;
+		font-size: 0;
 }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.182",
+  "version": "0.0.188",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -50,11 +50,10 @@
     "./tsconfig.json",
     "./vite.config.ts"
   ],
-  "dependencies": {
-    "vue": "^3.3.11"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@vue-macros/reactivity-transform": "^0.4.0"
+    "vue": "^3.4.3",
+    "@vue-macros/reactivity-transform": "^0.4.1"
   },
   "peerDependencies": {
     "@bagelink/sdk": "*",
@@ -74,37 +73,37 @@
   },
   "peerDependenciesMeta": {
     "vue3-charts": {
-      "option": true
+      "optional": true
     },
     "@formkit/vue": {
-      "option": true
+      "optional": true
     },
     "@formkit/core": {
-      "option": true
+      "optional": true
     },
     "vue-draggable-next": {
-      "option": true
+      "optional": true
     },
     "prosemirror-commands": {
-      "option": true
+      "optional": true
     },
     "prosemirror-history": {
-      "option": true
+      "optional": true
     },
     "prosemirror-keymap": {
-      "option": true
+      "optional": true
     },
     "prosemirror-model": {
-      "option": true
+      "optional": true
     },
     "prosemirror-schema-basic": {
-      "option": true
+      "optional": true
     },
     "prosemirror-state": {
-      "option": true
+      "optional": true
     },
     "prosemirror-view": {
-      "option": true
+      "optional": true
     }
   },
   "publishConfig": {

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/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 relationshipKey = props.context?.attrs?.relationshipKey;
+	if (!computedMultiple) return props.context?.node.input(relationshipKey ? files[0].serverFile.id : files[0].serverFile);
 	// eslint-disable-next-line no-alert
 	return alert('not implemented');
 }
@@ -157,7 +157,7 @@ function uploadFiles() {
 		if (file.uploaded || file.uploading || !file.file) return;
 		file.uploading = true;
 		file.serverFile = await bagel.uploadFile(file.file, {
-			onUploadProgress: (e) => (file.progress = e.progress * 100 - 1),
+			onUploadProgress: (e: any) => (file.progress = e.progress * 100 - 1),
 		});
 		file.progress += 1;
 		emitValue();
@@ -202,14 +202,16 @@ async function addFiles(addedFiles: FileList) {
 
 onMounted(() => {
 	dropZoneEl?.addEventListener('dragover', animateCircle);
-	if (!computedMultiple && props.context?.value) {
+	const relationshipKey = props.context?.attrs?.relationshipKey;
+	const imageObj = relationshipKey ? props.context?.node?.parent?.value[relationshipKey] : 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,
 		});
 	}
 });

package/tsconfig.json

@@ -35,36 +35,6 @@
 			"@bagelink/vue/*": [
 				"./vue/src/*"
 			],
-			// "#": [
-			// 	"./src/index.ts"
-			// ],
-			// "#/*": [
-			// 	"./src/*"
-			// ],
-			// "#/components": [
-			// 	"./src/components/index.ts"
-			// ],
-			// "#/components/*": [
-			// 	"./src/components/*"
-			// ],
-			// "#/types": [
-			// 	"./src/types/index.ts"
-			// ],
-			// "#/types/*": [
-			// 	"./src/types/*"
-			// ],
-			// "#/utils": [
-			// 	"./src/utils/index.ts"
-			// ],
-			// "#/utils/*": [
-			// 	"./src/utils/*"
-			// ],
-			// "#/plugins": [
-			// 	"./src/plugins/index.ts"
-			// ],
-			// "#/plugins/*": [
-			// 	"./src/plugins/*"
-			// ],
 		},
 	},
 	"include": [