@bagelink/vue 0.0.899 → 0.0.901

package/dist/components/lightbox/Lightbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AAoQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAYpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAO5D;AAED,iBAAS,KAAK,SAGb;;;;;AAidD,wBAMG"}
+{"version":3,"file":"Lightbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.vue"],"names":[],"mappings":"AA0RA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AASpD,iBAAS,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,CAAC,EAAE,YAAY,EAAE,QAO5D;AAED,iBAAS,KAAK,SAGb;;;;;AAqeD,wBAMG"}

package/dist/index.cjs

@@ -18663,11 +18663,11 @@ const _hoisted_11$1 = {
 };
 const _hoisted_12$1 = ["src"];
 const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7" };
-const _hoisted_14 = {
+const _hoisted_14$1 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_15 = ["src"];
+const _hoisted_15$1 = ["src"];
 const _hoisted_16 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
   __name: "FileUpload",
@@ -19009,7 +19009,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: vue.normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: vue.normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
+                    fileQ.progress < 100 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14$1, vue.toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : vue.createCommentVNode("", true),
                     vue.createVNode(vue.unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -19020,7 +19020,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_15)) : vue.createCommentVNode("", true)
+                  }, null, 8, _hoisted_15$1)) : vue.createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : vue.createCommentVNode("", true)
@@ -55231,7 +55231,7 @@ class Bagel {
 }
 const _hoisted_1 = {
   key: 0,
-  class: "navigation flex space-between px-3 w-100 absolute"
+  class: "navigation flex space-between px-3 w-100 absolute m_px-1"
 };
 const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between px-1" };
 const _hoisted_3 = {
@@ -55244,16 +55244,18 @@ const _hoisted_6 = ["src"];
 const _hoisted_7 = ["src", "title"];
 const _hoisted_8 = {
   key: 3,
-  class: "file-info txt-white flex align-items-start gap-1"
+  class: "file-info txt-white flex m_block align-items-start gap-025"
 };
 const _hoisted_9 = { class: "txt-start" };
-const _hoisted_10 = { class: "m-0" };
-const _hoisted_11 = { class: "m-0" };
-const _hoisted_12 = {
+const _hoisted_10 = { class: "mx-0 light" };
+const _hoisted_11 = { class: "semi word-break-all" };
+const _hoisted_12 = { class: "mx-0" };
+const _hoisted_13 = { class: "semi" };
+const _hoisted_14 = {
   key: 0,
   class: "flex justify-content-center mt-2 overflow p-1 fixed bottom start end gap-1 m_justify-content-start"
 };
-const _hoisted_13 = ["src", "onClick"];
+const _hoisted_15 = ["src", "onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Lightbox",
   setup(__props, { expose: __expose }) {
@@ -55435,13 +55437,26 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     class: "vw90"
                   }, null, 8, _hoisted_7)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
                     vue.createVNode(vue.unref(_sfc_main$c), {
-                      class: "m-0",
+                      class: "m-0 m_none",
                       icon: "draft",
-                      size: 3
+                      size: 10,
+                      weight: "12"
+                    }),
+                    vue.createVNode(vue.unref(_sfc_main$c), {
+                      class: "m-0 none m_block m_-mb-1",
+                      icon: "draft",
+                      size: 4,
+                      weight: "2"
                     }),
                     vue.createElementVNode("div", _hoisted_9, [
-                      vue.createElementVNode("p", _hoisted_10, " File: " + vue.toDisplayString((_p = vue.unref(currentItem)) == null ? void 0 : _p.name), 1),
-                      vue.createElementVNode("p", _hoisted_11, " Type: " + vue.toDisplayString((_q = vue.unref(currentItem)) == null ? void 0 : _q.type), 1),
+                      vue.createElementVNode("p", _hoisted_10, [
+                        _cache[5] || (_cache[5] = vue.createTextVNode(" File: ")),
+                        vue.createElementVNode("span", _hoisted_11, vue.toDisplayString((_p = vue.unref(currentItem)) == null ? void 0 : _p.name), 1)
+                      ]),
+                      vue.createElementVNode("p", _hoisted_12, [
+                        _cache[6] || (_cache[6] = vue.createTextVNode(" Type: ")),
+                        vue.createElementVNode("span", _hoisted_13, vue.toDisplayString((_q = vue.unref(currentItem)) == null ? void 0 : _q.type), 1)
+                      ]),
                       vue.createVNode(vue.unref(Btn), {
                         href: (_r2 = vue.unref(currentItem)) == null ? void 0 : _r2.src,
                         target: "_blank",
@@ -55453,7 +55468,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     ])
                   ]))
                 ]),
-                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
+                vue.unref(group) && vue.unref(group).length > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(group), (item, index2) => {
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index2 }, [
                       item.type === "image" ? (vue.openBlock(), vue.createElementBlock("img", {
@@ -55462,7 +55477,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
-                      }, null, 10, _hoisted_13)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
+                      }, null, 10, _hoisted_15)) : (vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$c), {
                         key: 1,
                         class: vue.normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: vue.unref(currentIndex) === index2 }]),
                         icon: "description",
@@ -55480,7 +55495,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ceb84fe"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8f24aae"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {

package/dist/index.mjs

@@ -18661,11 +18661,11 @@ const _hoisted_11$1 = {
 };
 const _hoisted_12$1 = ["src"];
 const _hoisted_13$1 = { class: "position-start m-05 flex opacity-7" };
-const _hoisted_14 = {
+const _hoisted_14$1 = {
   key: 0,
   class: "progress"
 };
-const _hoisted_15 = ["src"];
+const _hoisted_15$1 = ["src"];
 const _hoisted_16 = { class: "p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "FileUpload",
@@ -19007,7 +19007,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["pie", { complete: fileQ.progress === 100 }]),
                     style: normalizeStyle([`--p:${fileQ.progress}`, { "--b": "2px" }])
                   }, [
-                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_14, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
+                    fileQ.progress < 100 ? (openBlock(), createElementBlock("span", _hoisted_14$1, toDisplayString(`${fileQ.progress.toFixed(0)}`), 1)) : createCommentVNode("", true),
                     createVNode(unref(_sfc_main$c), {
                       class: "success",
                       icon: "check"
@@ -19018,7 +19018,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                     class: "single-preview",
                     src: fileToUrl(fileQ.file),
                     alt: ""
-                  }, null, 8, _hoisted_15)) : createCommentVNode("", true)
+                  }, null, 8, _hoisted_15$1)) : createCommentVNode("", true)
                 ], 2);
               }), 128))
             ])) : createCommentVNode("", true)
@@ -55229,7 +55229,7 @@ class Bagel {
 }
 const _hoisted_1 = {
   key: 0,
-  class: "navigation flex space-between px-3 w-100 absolute"
+  class: "navigation flex space-between px-3 w-100 absolute m_px-1"
 };
 const _hoisted_2 = { class: "flex start fixed top-1 w-100 space-between px-1" };
 const _hoisted_3 = {
@@ -55242,16 +55242,18 @@ const _hoisted_6 = ["src"];
 const _hoisted_7 = ["src", "title"];
 const _hoisted_8 = {
   key: 3,
-  class: "file-info txt-white flex align-items-start gap-1"
+  class: "file-info txt-white flex m_block align-items-start gap-025"
 };
 const _hoisted_9 = { class: "txt-start" };
-const _hoisted_10 = { class: "m-0" };
-const _hoisted_11 = { class: "m-0" };
-const _hoisted_12 = {
+const _hoisted_10 = { class: "mx-0 light" };
+const _hoisted_11 = { class: "semi word-break-all" };
+const _hoisted_12 = { class: "mx-0" };
+const _hoisted_13 = { class: "semi" };
+const _hoisted_14 = {
   key: 0,
   class: "flex justify-content-center mt-2 overflow p-1 fixed bottom start end gap-1 m_justify-content-start"
 };
-const _hoisted_13 = ["src", "onClick"];
+const _hoisted_15 = ["src", "onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Lightbox",
   setup(__props, { expose: __expose }) {
@@ -55433,13 +55435,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     class: "vw90"
                   }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("div", _hoisted_8, [
                     createVNode(unref(_sfc_main$c), {
-                      class: "m-0",
+                      class: "m-0 m_none",
                       icon: "draft",
-                      size: 3
+                      size: 10,
+                      weight: "12"
+                    }),
+                    createVNode(unref(_sfc_main$c), {
+                      class: "m-0 none m_block m_-mb-1",
+                      icon: "draft",
+                      size: 4,
+                      weight: "2"
                     }),
                     createElementVNode("div", _hoisted_9, [
-                      createElementVNode("p", _hoisted_10, " File: " + toDisplayString((_p = unref(currentItem)) == null ? void 0 : _p.name), 1),
-                      createElementVNode("p", _hoisted_11, " Type: " + toDisplayString((_q = unref(currentItem)) == null ? void 0 : _q.type), 1),
+                      createElementVNode("p", _hoisted_10, [
+                        _cache[5] || (_cache[5] = createTextVNode(" File: ")),
+                        createElementVNode("span", _hoisted_11, toDisplayString((_p = unref(currentItem)) == null ? void 0 : _p.name), 1)
+                      ]),
+                      createElementVNode("p", _hoisted_12, [
+                        _cache[6] || (_cache[6] = createTextVNode(" Type: ")),
+                        createElementVNode("span", _hoisted_13, toDisplayString((_q = unref(currentItem)) == null ? void 0 : _q.type), 1)
+                      ]),
                       createVNode(unref(Btn), {
                         href: (_r2 = unref(currentItem)) == null ? void 0 : _r2.src,
                         target: "_blank",
@@ -55451,7 +55466,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ])
                   ]))
                 ]),
-                unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                unref(group) && unref(group).length > 1 ? (openBlock(), createElementBlock("div", _hoisted_14, [
                   (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(group), (item, index2) => {
                     return openBlock(), createElementBlock(Fragment$1, { key: index2 }, [
                       item.type === "image" ? (openBlock(), createElementBlock("img", {
@@ -55460,7 +55475,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         src: item.src,
                         alt: "",
                         onClick: ($event) => selectItem(index2)
-                      }, null, 10, _hoisted_13)) : (openBlock(), createBlock(unref(_sfc_main$c), {
+                      }, null, 10, _hoisted_15)) : (openBlock(), createBlock(unref(_sfc_main$c), {
                         key: 1,
                         class: normalizeClass(["thumbnail object-fit-cover hover opacity-5 ed flex bg-popup justify-content-center align-items-center flex-shrink-0", { active: unref(currentIndex) === index2 }]),
                         icon: "description",
@@ -55478,7 +55493,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6ceb84fe"]]);
+const Lightbox$1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8f24aae"]]);
 const groups = {};
 let clickHandler = (_e2) => void 0;
 const lightboxDirective = {

package/dist/style.css

@@ -3488,19 +3488,19 @@ tbody tr[data-v-d8ca38b1]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-6ceb84fe]{
+.lightbox-image[data-v-d8f24aae]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-6ceb84fe] {
+.bgl-lightbox-overlay[data-v-d8f24aae] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-6ceb84fe] {
+.bgl-lightbox[data-v-d8f24aae] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-6ceb84fe]{
-	animation: 500ms ease bgl-lightbox-load-6ceb84fe;
+.bgl-lightbox-item[data-v-d8f24aae]{
+	animation: 500ms ease bgl-lightbox-load-d8f24aae;
 }
-@keyframes bgl-lightbox-load-6ceb84fe {
+@keyframes bgl-lightbox-load-d8f24aae {
 from {
     scale:0.7;
 }
@@ -3508,37 +3508,48 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-6ceb84fe] * {
+.bgl-lightbox-item[data-v-d8f24aae] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-6ceb84fe;
+	animation: 200ms ease bgl-lightbox-load-d8f24aae;
 }
-.navigation[data-v-6ceb84fe] {
+.navigation[data-v-d8f24aae] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-6ceb84fe] {
+.navigation-btn[data-v-d8f24aae] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-6ceb84fe] {
+.thumbnail[data-v-d8f24aae] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-6ceb84fe]:hover {
+.thumbnail[data-v-d8f24aae]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-6ceb84fe]:active {
+.thumbnail[data-v-d8f24aae]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-6ceb84fe] {
+.thumbnail.active[data-v-d8f24aae] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-6ceb84fe]{
-	min-width: 180px
+.file-info[data-v-d8f24aae]{
+	max-width: 420px
+}
+@media screen and (max-width: 910px) {
+.file-info[data-v-d8f24aae]{
+	max-width: 220px;
+	text-align: center !important;
+}
+.file-info[data-v-d8f24aae] *{
+	text-align: center !important;
+	margin-inline: 0 !important;;
+	max-width: 100% !important;
+}
 }
 
 

package/package.json

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

package/src/components/lightbox/Lightbox.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { LightboxItem } from './lightbox.types'
 import { BglVideo, Btn, Icon, Zoomer } from '@bagelink/vue'
 
 import { watch } from 'vue'
+import type { LightboxItem } from './lightbox.types'
 
 let isOpen = $ref(false)
 let currentItem = $ref<LightboxItem>()
@@ -84,7 +84,7 @@ defineExpose({ open, close })
 			@keydown.right="next"
 			@click="clickOutside"
 		>
-			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute">
+			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute m_px-1">
 				<Btn
 					class="navigation-btn oval"
 					icon="arrow_back"
@@ -144,14 +144,22 @@ defineExpose({ open, close })
 						>
 					</template>
 					<template v-else>
-						<div class="file-info txt-white flex align-items-start gap-1">
-							<Icon class="m-0" icon="draft" :size="3" />
+						<div class="file-info txt-white flex m_block align-items-start gap-025">
+							<Icon class="m-0 m_none" icon="draft" :size="10" weight="12" />
+							<Icon class="m-0 none m_block m_-mb-1" icon="draft" :size="4" weight="2" />
+
 							<div class="txt-start">
-								<p class="m-0">
-									File: {{ currentItem?.name }}
+								<p class="mx-0 light">
+									File:
+									<span class="semi word-break-all ">
+										{{ currentItem?.name }}
+									</span>
 								</p>
-								<p class="m-0">
-									Type: {{ currentItem?.type }}
+								<p class="mx-0 ">
+									Type:
+									<span class="semi">
+										{{ currentItem?.type }}
+									</span>
 								</p>
 								<Btn :href="currentItem?.src" target="_blank" round thin class="mt-1" value="Open file" />
 								<!-- <a :href="currentItem?.src" target="_blank">Open file</a> -->
@@ -253,6 +261,17 @@ defineExpose({ open, close })
 	outline: 2px solid white;
 }
 .file-info{
-	min-width: 180px
+	max-width: 420px
+}
+@media screen and (max-width: 910px) {
+	.file-info{
+	max-width: 220px;
+	text-align: center !important;
+}
+.file-info *{
+	text-align: center !important;
+	margin-inline: 0 !important;;
+	max-width: 100% !important;
+}
 }
 </style>