@bagelink/vue 0.0.168 → 0.0.172

package/dist/plugins/bagel.d.ts

@@ -1,10 +1,13 @@
 import type { InjectionKey, Plugin } from 'vue';
 import { Bagel } from '@bagelink/sdk';
 export declare const bagelInjectionKey: InjectionKey<Bagel>;
+export declare const i18nTInjectionKey: InjectionKey<(key: string) => string>;
 export declare function useBagel(): Bagel;
+export declare function useI18nT(): (key: string) => string;
 export interface BagelOptions {
     host: string;
     onError?: (err: Error) => void;
+    i18nT?: (key: string) => string;
 }
 export declare const BagelVue: Plugin;
 //# sourceMappingURL=bagel.d.ts.map

package/dist/plugins/bagel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,eAAO,MAAM,iBAAiB,qBAAyC,CAAC;AAExE,wBAAgB,QAAQ,UAKvB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IAEZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,MAMtB,CAAC"}
+{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,eAAO,MAAM,iBAAiB,qBAAyC,CAAC;AACxE,eAAO,MAAM,iBAAiB,qBAEvB,MAAM,KAAK,MAAM,CACvB,CAAC;AAEF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,4BAKvB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IAEZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC;IAEhC,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,MAStB,CAAC"}

package/dist/style.css

@@ -860,90 +860,90 @@ th[data-v-fb5b163a] {
 }
 
 .person-card {
-  border: 1.1px solid var(--border-color);
-  /* background: var(--input-bg); */
-  border-radius: var(--card-border-radius);
-  padding: 1rem;
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-  position: relative;
+	border: 1.1px solid var(--border-color);
+	/* background: var(--input-bg); */
+	border-radius: var(--card-border-radius);
+	padding: 1rem;
+	margin-bottom: 0.5rem;
+	font-size: 1rem;
+	position: relative;
 }
 .person-card p {
-  margin: 0;
+	margin: 0;
 }
 .person-card-details {
-  font-size: 14px;
-  margin-bottom: 2px;
-  line-height: 1.3;
-  display: flex;
+	font-size: 14px;
+	margin-bottom: 2px;
+	line-height: 1.3;
+	display: flex;
 }
 .person-card-details p {
-  color: var(--input-color);
-  opacity: 0.6;
+	color: var(--input-color);
+	opacity: 0.6;
 }
 .person-card-details.badge p {
-  opacity: 1;
+	opacity: 1;
 }
 .person-card-details p:nth-child(2) {
-  opacity: 1;
-  padding-inline-end: 0.5rem;
+	opacity: 1;
+	padding-inline-end: 0.5rem;
 }
 .person-card-details .icon-font {
-  color: var(--bgl-primary);
-  padding-inline-end: 0.25rem;
+	color: var(--bgl-primary);
+	padding-inline-end: 0.25rem;
 }
 .person-card-edit {
-  position: absolute;
-  inset-inline-end: 1rem;
+	position: absolute;
+	inset-inline-end: 1rem;
 }
 .person-card-details-wrap {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
 }
 .person-card-icon {
-  background: var(--bgl-gray);
-  height: 30px;
-  width: 30px;
-  border-radius: 100%;
-  text-transform: uppercase;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  font-size: 12px;
+	background: var(--bgl-gray);
+	height: 30px;
+	width: 30px;
+	border-radius: 100%;
+	text-transform: uppercase;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+	font-size: 12px;
 }
 .person-card-icon-wrap {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  padding-bottom: 0.75rem;
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-bottom: 0.75rem;
 }
 @media screen and (max-width: 910px) {
 .person-card-icon-wrap {
-    padding-bottom: 0.5rem;
+		padding-bottom: 0.5rem;
 }
 .person-card {
-    padding: 0.75rem;
-    position: relative;
+		padding: 0.75rem;
+		position: relative;
 }
 .person-card-edit {
-    /* position: relative; */
-    inset-inline-end: 0.5rem;
-    margin-bottom: 1rem;
-    justify-content: flex-end;
+		/* position: relative; */
+		inset-inline-end: 0.5rem;
+		margin-bottom: 1rem;
+		justify-content: flex-end;
 }
 .person-card-name {
-    max-width: calc(100% - 170px);
+		max-width: calc(100% - 170px);
 }
 }
 
-.data[data-v-0350cc0c] {
+.data[data-v-86e783b9] {
 	border: 1.1px solid var(--border-color);
 	padding: 20px;
 	border-radius: var(--input-border-radius);
 }
-.data-row[data-v-0350cc0c] {
+.data-row[data-v-86e783b9] {
 	display: flex;
 	justify-content: space-between;
 	padding-bottom: 0.5rem;
@@ -951,7 +951,7 @@ th[data-v-fb5b163a] {
 	opacity: 0.8;
 	border-bottom: 1px solid var(--border-color);
 }
-.data-link[data-v-0350cc0c] {
+.data-link[data-v-86e783b9] {
 	display: block;
 	font-size: var(--input-font-size);
 	margin-bottom: 2px;
@@ -959,135 +959,6 @@ th[data-v-fb5b163a] {
 	color: var(--input-color);
 }
 
-/* .uploading-wrap {
-	width: 100%;
-} */
-
-/* .uploading {
-	margin: 0.5rem;
-} */
-
-/* .img-label .icon-font {
-	font-size: 30px;
-	margin-bottom: 10px;
-} */
-
-/* .img-label span {
-	text-decoration: underline;
-}
-
-.file-input {
-	display: none;
-} */
-.files-wrapper {
-	/* flex-direction: column;
-	border-radius: 10px; */
-	/*overflow: hidden;*/
-	/* min-height: 100px;
-	font-size: var(--input-font-size); */
-}
-.drop-zone {
-	/* background-color: var(--bgl-bg);
-	height: 100%;
-	width: 100%;
-	flex-grow: 1;
-	position: relative;
-	overflow: hidden;
-	cursor: pointer;
-	transition: var(--bgl-transition);
-	outline: dashed 1px var(--bgl-black-tint);
-	border-radius: 10px;
-	padding: 1px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	color: var(--input-color); */
-}
-.drop-zone:hover {
-	/* color: var(--bgl-primary);
-	outline: dashed 1px var(--bgl-primary-tint); */
-}
-.drop-circle {
-	/* pointer-events: none;
-	position: absolute;
-	width: 100px;
-	height: 100px;
-	border-radius: 50%;
-	background-color: var(--bgl-primary-tint);
-	display: flex;
-	top: v-bind(circleTop);
-	left: v-bind(circleLeft);
-	transform: translate(-50%, -50%) scale(1);
-	transform-origin: left top; */
-}
-
-/* .drop-circle.active {
-    color: red;
-    background-color: black;
-    transform: translate(-50%, -50%) scale(1);
-    transition: transform 0.2s ease-in-out;
-} */
-.load-file-bar {
-	/* display: flex;
-	align-items: center;
-	justify-content: space-between;
-	background: var(--bgl-white);
-	border-radius: var(--btn-border-radius);
-	width: 100%;
-	color: var(--input-color);
-	height: var(--btn-height);
-	padding: 0.5rem;
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-	white-space: nowrap; */
-}
-.load-file-bar p {
-	/* width: calc(100% - 40px);
-	overflow: hidden;
-	text-overflow: ellipsis; */
-}
-.load-file-bar span {
-	/* font-size: 10px; */
-}
-.pie {
-	/* width: 30px;
-	height: 30px;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center; */
-}
-
-/* .pie:before {
-	content: '';
-	position: absolute;
-	border-radius: 50%;
-	inset: 0;
-	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-	-webkit-mask: radial-gradient(
-		farthest-side,
-		#0000 calc(99% - var(--b)),
-		#000 calc(100% - var(--b))
-	);
-	mask: radial-gradient(
-		farthest-side,
-		#0000 calc(99% - var(--b)),
-		#000 calc(100% - var(--b))
-	);
-} */
-
-/* .pop-enter-active {
-	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
-}
-
-.pop-leave-active {
-	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
-}
-
-.pop-enter-from,
-.pop-leave-to {
-	scale: 0;
-} */
 /* .group-wrap * {
   outline: 1px solid red;
 } */
@@ -1624,154 +1495,150 @@ input:checked + .slider[data-v-d0543d4b]:before {
 }
 
 .uploading-wrap {
-  width: 100%;
-  padding-right: 5px;
-  padding-left: 5px;
+	width: 100%;
+	padding-right: 5px;
+	padding-left: 5px;
 }
 
 /*
 .uploading {}
 */
 .img-label .icon-font {
-  font-size: 30px;
-  margin-bottom: 10px;
+	font-size: 30px;
+	margin-bottom: 10px;
 }
 .img-label span {
-  text-decoration: underline;
+	text-decoration: underline;
 }
 .file-input {
-  display: none;
+	display: none;
 }
 .files-wrapper {
-  flex-direction: column;
-  border-radius: 10px;
-  /*overflow: hidden;*/
-  min-height: calc(var(--input-height) * 1.5);
+	flex-direction: column;
+	border-radius: 10px;
+	/*overflow: hidden;*/
+	min-height: calc(var(--input-height) * 1.5);
 
-  font-size: var(--input-font-size);
+	font-size: var(--input-font-size);
 }
 .drop-zone {
-  background-color: var(--input-bg);
-  height: 100%;
-  width: 100%;
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  outline: dashed 1px var(--border-color);
-  border-radius: 10px;
-  padding: 1px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--input-color);
+	background-color: var(--input-bg);
+	height: 100%;
+	width: 100%;
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	outline: dashed 1px var(--border-color);
+	border-radius: 10px;
+	padding: 1px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: var(--input-color);
 }
 .drop-zone:hover {
-  color: var(--bgl-primary);
-  outline: dashed 1px var(--bgl-primary-tint);
+	color: var(--bgl-primary);
+	outline: dashed 1px var(--bgl-primary-tint);
 }
 .drop-circle {
-  pointer-events: none;
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  background-color: var(--bgl-primary-tint);
-  display: flex;
-  transform: translate(-50%, -50%) scale(1);
-  transform-origin: left top;
+	pointer-events: none;
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	background-color: var(--bgl-primary-tint);
+	display: flex;
+	transform: translate(-50%, -50%) scale(1);
+	transform-origin: left top;
 }
 .load-file-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--bgl-white);
-  border-radius: var(--btn-border-radius);
-  width: 100%;
-  color: var(--input-color);
-  height: var(--btn-height);
-  padding: 0.5rem;
-  height: 46px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-  white-space: nowrap;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: var(--bgl-white);
+	border-radius: var(--btn-border-radius);
+	width: 100%;
+	color: var(--input-color);
+	height: var(--btn-height);
+	padding: 0.5rem;
+	height: 46px;
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+	white-space: nowrap;
 }
 .load-file-bar p {
-  width: calc(100% - 40px);
-  overflow: hidden;
-  text-overflow: ellipsis;
+	width: calc(100% - 40px);
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .load-file-bar span {
-  font-size: 10px;
+	font-size: 10px;
 }
 .pie {
-  width: 30px;
-  height: 30px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	width: 30px;
+	height: 30px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 .pie:before {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-  inset: 0;
-  transition: all 0.2s ease-in-out;
-  background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
-  -webkit-mask: radial-gradient(
-    farthest-side,
-    #0000 calc(99% - var(--b)),
-    #000 calc(100% - var(--b))
-  );
-  mask: radial-gradient(
-    farthest-side,
-    #0000 calc(99% - var(--b)),
-    #000 calc(100% - var(--b))
-  );
+	content: "";
+	position: absolute;
+	border-radius: 50%;
+	inset: 0;
+	transition: all 0.2s ease-in-out;
+	background: conic-gradient(var(--bgl-primary) calc(var(--p) * 1%), #0000 0);
+	-webkit-mask: radial-gradient(farthest-side,
+			#0000 calc(99% - var(--b)),
+			#000 calc(100% - var(--b)));
+	mask: radial-gradient(farthest-side,
+			#0000 calc(99% - var(--b)),
+			#000 calc(100% - var(--b)));
 }
 .pie .success {
-  transform: scale(0);
-  opacity: 0;
-  transition: all 0.3s ease-in-out;
+	transform: scale(0);
+	opacity: 0;
+	transition: all 0.3s ease-in-out;
 }
 .pie .progress {
-  position: absolute;
-  font-size: 10px;
+	position: absolute;
+	font-size: 10px;
 }
 .pie.complete .progress {
-  display: none;
+	display: none;
 }
 .pie.complete .success {
-  transform: scale(1.3);
-  opacity: 1;
+	transform: scale(1.3);
+	opacity: 1;
 }
 .pie.complete:before {
-  background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
+	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
 .pie.complete {
-  color: var(--bgl-green);
+	color: var(--bgl-green);
 }
 
 .pop-enter-active {
-  transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .pop-leave-active {
-  transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
+	transition: scale 0.2s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .pop-enter-from,
 .pop-leave-to {
-  scale: 0;
+	scale: 0;
 }
 .delete-btn {
-  margin-inline-end: -30px;
-  opacity: 0;
-  margin-inline-start: 10px;
+	margin-inline-end: -30px;
+	opacity: 0;
+	margin-inline-start: 10px;
 }
 .uploading-wrap:hover .delete-btn {
-  opacity: 1;
-  margin-inline-end: 0;
+	opacity: 1;
+	margin-inline-end: 0;
 }
 
 .person-card {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.168",
+  "version": "0.0.172",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/DataPreview.vue

@@ -45,19 +45,18 @@
 </template>
 
 <script lang="ts" setup>
-import { keyToLabel } from '@bagelink/vue';
+import { keyToLabel, useI18nT } from '@bagelink/vue';
+
+const i18nT = useI18nT();
 
 const keysToIgnore = ['id', 'person_id', 'person', 'created_at', 'updated_at'];
 
 // const props =
-withDefaults(defineProps<{
+defineProps<{
 	data: Record<string, any>,
 	schema?: Record<string, any>[],
 	title?: string,
-	i18nT: (str: string) => string,
-}>(), {
-	i18nT: (str: string) => str,
-});
+}>();
 </script>
 
 <style scoped>

package/src/components/FormSchema.vue

@@ -30,34 +30,31 @@ import { reactive } from 'vue';
 import { type FormKitSchemaDefinition } from '@formkit/core';
 
 import { Btn } from '@bagelink/vue';
-import { useModal } from '..';
+import { useModal, useI18nT } from '..';
 
 const { showModal } = useModal();
+const i18nT = useI18nT();
 const emits = defineEmits(['update:modelValue', 'submit']);
 const handleEmit = (val: any) => emits('update:modelValue', val);
 const runSubmit = (val: any) => emits('submit', val);
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
 	modelValue?: any;
 	schema: FormKitSchemaDefinition;
 	// eslint-disable-next-line no-unused-vars
 	onDelete?: ((id: string) => void);
-	// eslint-disable-next-line no-unused-vars
-	i18nT?: (key: string) => string;
-}>(), {
-	i18nT: (key: string) => key,
-});
+}>();
 
 const data = reactive({
 	...props.modelValue,
-	t: (val: string) => props.i18nT(val),
+	t: (val: string) => i18nT?.(val) || val,
 });
 
 const runDelete = () => {
 	showModal(
 		{
 			class: 'small-modal',
-			title: props.i18nT('Are you sure?'),
+			title: i18nT('Are you sure?'),
 			actions: [
 				{
 					value: 'Confirm',
@@ -67,7 +64,7 @@ const runDelete = () => {
 				{ value: 'Cancel', color: 'gray' },
 			],
 		},
-		{ default: props.i18nT('form.deleteMessage') },
+		{ default: i18nT('form.deleteMessage') },
 	);
 };
 </script>