@bagelink/vue 0.0.140 → 0.0.145

package/dist/utils/index.d.ts

@@ -5,5 +5,6 @@ export declare function computeFields(modelValue: Record<string, any>): BagelFie
 export declare const copyText: (text: string, cb?: ((msg: string) => void) | undefined) => Promise<void>;
 export declare const useFormkit: () => unknown;
 export declare const initials: (...strArr: string[]) => string;
+export declare function useEscape(event: KeyboardEvent, closeModel: () => void): void;
 export { formatString } from './strings';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,EAAE,CAmB3E;AAED,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,QAAS,MAAM,WAG3B,CAAC;AAEZ,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,UAAU,EAAE,CAmB3E;AAED,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAAiD,CAAC;AAE9F,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.140",
+  "version": "0.0.145",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,7 +51,7 @@
     "./vite.config.ts"
   ],
   "dependencies": {
-    "vue": "^3.3.8"
+    "vue": "^3.3.9"
   },
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.0"

package/src/components/FormSchema.vue

@@ -43,7 +43,7 @@ const props = withDefaults(defineProps<{
 	// 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) => string;
 }>(), {
 	i18nT: (key: string) => key,
 });

package/src/components/Modal.vue

@@ -31,8 +31,8 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import { type BtnOptions, Btn } from '@bagelink/vue';
+import { onMounted, onUnmounted } from 'vue';
+import { type BtnOptions, Btn, useEscape } from '@bagelink/vue';
 import '../styles/modal.css';
 
 defineProps<{
@@ -44,12 +44,6 @@ defineProps<{
 
 let isActive = $ref<boolean>(false);
 
-onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-});
-
 const emit = defineEmits(['update:isModalVisible']);
 
 const closeModal = () => {
@@ -58,4 +52,23 @@ const closeModal = () => {
 		emit('update:isModalVisible', false);
 	}, 200);
 };
+
+const escapeKeyClose = (e: KeyboardEvent) => useEscape(e, () => closeModal());
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+
+	document.addEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
+onUnmounted(() => {
+	document.removeEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
 </script>

package/src/components/ModalForm.vue

@@ -34,8 +34,10 @@
 
 <script lang="ts" setup>
 import { type FormKitSchemaDefinition } from '@formkit/core';
-import { onMounted } from 'vue';
-import { Btn, FormSchema, BtnOptions } from '@bagelink/vue';
+import { onMounted, onUnmounted } from 'vue';
+import {
+	Btn, FormSchema, BtnOptions, useEscape,
+} from '@bagelink/vue';
 import '../styles/modal.css';
 
 // import { BagelField } from '@bagelink/vue';
@@ -62,12 +64,6 @@ const computedFormSchema = $computed(() => {
 
 let isActive = $ref<boolean>(false);
 
-onMounted(() => {
-	setTimeout(() => {
-		isActive = true;
-	}, 1);
-});
-
 const emit = defineEmits(['update:isModalVisible', 'update:modelValue']);
 const handleEmit = (value: any) => {
 	emit('update:modelValue', value);
@@ -93,6 +89,25 @@ const runDelete = () => {
 	props.onDelete?.(props.modelValue?.id);
 	closeModal();
 };
+
+const escapeKeyClose = (e: KeyboardEvent) => useEscape(e, () => closeModal());
+
+onMounted(() => {
+	setTimeout(() => {
+		isActive = true;
+	}, 1);
+
+	document.addEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
+onUnmounted(() => {
+	document.removeEventListener(
+		'keydown',
+		escapeKeyClose,
+	);
+});
 </script>
 
 <style scoped>

package/src/components/formkit/FileUploader.vue

@@ -106,8 +106,8 @@ const files = $ref<UploadFile[]>([]);
 
 const props = withDefaults(defineProps<{
 	context: Record<string, any>;
-	dragDropLabel: string;
-	browseLabel: string;
+	dragDropLabel?: string;
+	browseLabel?: string;
 }>(), {
 	dragDropLabel: 'Drag and drop your files here',
 	browseLabel: 'or browse',

package/src/index.ts

@@ -5,3 +5,4 @@ export { ModalPlugin, useModal } from './plugins/modal';
 export * from './utils';
 export * from './types';
 export * from './components';
+import './styles/bagel.css';

package/src/plugins/modal.ts

@@ -1,5 +1,5 @@
 import {
-	h, InjectionKey, ref, inject, defineComponent,
+	h, InjectionKey, inject, defineComponent,
 } from 'vue';
 import type { Plugin } from 'vue';
 import type { BtnOptions } from '@bagelink/vue';
@@ -51,30 +51,32 @@ interface ModalComponentProps {
 
 export const ModalPlugin: Plugin = {
 	install: (app) => {
-		const modalStack = ref<ModalComponentProps[]>([]);
+		const modalStack = $ref<ModalComponentProps[]>([]);
+
+		const hideModal = (index: number) => {
+			// console.log('hideModal', index);
+			modalStack.splice(index, 1);
+		};
+
 		const showModal = (
 			isForm: boolean,
 			options: ModalOptions | ModalFormOptions,
 			slots: Record<string, any> = {},
 		) => {
-			modalStack.value.push({
+			modalStack.push({
 				modalOptions: options,
 				isModalForm: isForm,
 				componentSlots: slots,
 			});
 		};
 
-		const hideModal = (index: number) => {
-			// console.log('hideModal', index);
-			modalStack.value.splice(index, 1);
-		};
-
 		app.provide(ModalSymbol, {
 			modalForm: (options: ModalFormOptions, slots?: Record<string, any>) => showModal(true, options, slots),
 			showModal: (options: ModalOptions, slots?: Record<string, any>) => showModal(false, options, slots),
-			hideModal: (index = modalStack.value.length - 1) => hideModal(index),
+			hideModal: (index = modalStack.length - 1) => hideModal(index),
 			// modalOptions,
 		});
+
 		const ModalComponent = defineComponent({
 			data() {
 				return {
@@ -82,7 +84,7 @@ export const ModalPlugin: Plugin = {
 				};
 			},
 			render() {
-				return modalStack.value.map((modal, index) => {
+				return modalStack.map((modal, index) => {
 					const renderComponent = modal.isModalForm ? ModalForm : Modal;
 					return h(
 						renderComponent,

package/src/styles/bagel.css

@@ -0,0 +1,37 @@
+@import "layout.css";
+@import "inputs.css";
+@import "buttons.css";
+@import "text.css";
+@import "scrollbar.css";
+@import "theme.css";
+@import "transitions.css";
+@import "./fonts/Ploni.css";
+
+:root {
+    --transition: all 0.2s cubic-bezier(0.1, 0.5, 0.33, 1);
+    --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+}
+
+@media (min-width: 992px) {}
+
+@media screen and (max-width: 910px) {
+
+    body {
+        min-height: 100vh;
+        min-height: -webkit-fill-available;
+        height: -webkit-fill-available;
+
+    }
+
+    html {
+        height: -webkit-fill-available;
+
+    }
+}

package/src/styles/buttons.css

@@ -0,0 +1,56 @@
+button,
+.btn,
+.btn-txt,
+.btn-icon {
+    font-family: inherit;
+    white-space: nowrap;
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    border: none;
+    transition: var(--bgl-transition);
+    border-radius: var(--btn-border-radius);
+    line-height: var(--btn-height);
+    font-size: var(--input-font-size);
+    display: inline-block;
+    height: var(--btn-height);
+    padding: 0
+}
+
+.btn-close {
+    margin-top: -20px;
+    margin-inline-end: -20px;
+    margin-inline-start: auto;
+    margin-bottom: 15px;
+    transition: var(--bgl-transition);
+    height: 30px;
+    width: 30px;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 100%;
+    outline: 2px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-close:hover {
+    background: var(--bgl-gray-light);
+    opacity: 1;
+}
+
+.btn-close:active {
+    background: var(--bgl-gray);
+}
+
+.btn-close::before {
+    content: "close";
+    font-family: "Material Symbols Outlined", serif;
+}
+
+
+@media screen and (max-width: 910px) {
+    .btn {
+        padding: 0 20px;
+    }
+}

package/src/styles/fonts/Ploni.css

@@ -0,0 +1,71 @@
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 200;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-ultralight.woff2) format('woff2'), url(./Ploni/ploni-ultralight.woff) format('woff'), url(./Ploni/ploni-ultralight.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 300;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-light.woff2) format('woff2'), url(./Ploni/ploni-light.woff) format('woff'), url(./Ploni/ploni-light.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 400;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-regular.woff2) format('woff2'), url(./Ploni/ploni-regular.woff) format('woff'), url(./Ploni/ploni-regular.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 500;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-medium.woff2) format('woff2'), url(./Ploni/ploni-medium.woff) format('woff'), url(./Ploni/ploni-medium.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 600;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-demibold.woff2) format('woff2'), url(./Ploni/ploni-demibold.woff) format('woff'), url(./Ploni/ploni-demibold.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 700;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-bold.woff2) format('woff2'), url(./Ploni/ploni-bold.woff) format('woff'), url(./Ploni/ploni-bold.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 800;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-ultrabold.woff2) format('woff2'), url(./Ploni/ploni-ultrabold.woff) format('woff'), url(./Ploni/ploni-ultrabold.eot) format('eot')
+}
+
+@font-face {
+    font-family: 'Ploni';
+    font-style: normal;
+    font-weight: 900;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url(./Ploni/ploni-black.woff2) format('woff2'), url(./Ploni/ploni-black.woff) format('woff'), url(./Ploni/ploni-black.eot) format('eot')
+}