@bagelink/vue 1.2.147 → 1.2.151

package/dist/style.css

@@ -1,4 +1,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
+.expand-enter-active,
+.expand-leave-active {
+	transition: all 0.2s;
+	transition-delay: 0ms;
+}
+.expand-enter-from,
+.expand-leave-to {
+	max-height: 0;
+}
+.expand-enter-to,
+.expand-leave-from {
+	max-height: 300px;
+}
+
 .accordion-item[data-v-3334f637] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
@@ -41,20 +55,6 @@
 	text-decoration: underline;
 }
 
-.expand-enter-active,
-.expand-leave-active {
-	transition: all 0.2s;
-	transition-delay: 0ms;
-}
-.expand-enter-from,
-.expand-leave-to {
-	max-height: 0;
-}
-.expand-enter-to,
-.expand-leave-from {
-	max-height: 300px;
-}
-
 .bgl_btn[data-v-99c4aa53] {
   --btn-bg: var(--bgl-primary);
   --btn-color: var(--bgl-light-text);
@@ -262,10 +262,6 @@ display: block;
   object-fit: cover;
 }
 
-.inline[data-v-689f051f] {
-	display: inline;
-}
-
 .pill {
 	border-radius: 10px;
 	padding: 4px 8px;
@@ -308,6 +304,10 @@ display: block;
 	color: var(--bgl-red);
 }
 
+.inline[data-v-689f051f] {
+	display: inline;
+}
+
 .bgl_vid iframe[data-v-1c895c6c],
 .bgl_vid video[data-v-1c895c6c] {
 	width: 100%;
@@ -1090,13 +1090,12 @@ tbody tr[data-v-f795f660]:hover {
 	background: var(--bgl-gray-light);
 }
 
-.drag-over-container[data-v-b8085ae2] {
+.drag-over-container[data-v-2d9b6701] {
   position: relative;
 }
-.drag-overlay[data-v-b8085ae2] {
+.drag-overlay[data-v-2d9b6701] {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
@@ -1104,20 +1103,20 @@ tbody tr[data-v-f795f660]:hover {
   justify-content: center;
   align-items: center;
   z-index: 10;
-  border: 2px dashed #ccc;
+  border: 1px dashed #ccc;
   border-radius: 4px;
 }
-.drag-message[data-v-b8085ae2] {
+.drag-message[data-v-2d9b6701] {
   color: white;
   font-size: 1.5rem;
   font-weight: bold;
   text-align: center;
   padding: 1rem;
 }
-.is-dragging[data-v-b8085ae2] {
-  outline: 2px dashed #4CAF50;
+.is-dragging[data-v-2d9b6701] {
+  outline: 1px dashed #4CAF50;
 }
-.is-disabled[data-v-b8085ae2] {
+.is-disabled[data-v-2d9b6701] {
   opacity: 0.6;
   cursor: not-allowed;
 }
@@ -1408,6 +1407,12 @@ fieldset[data-v-f7e758e5] {
     color: var(--label-color) !important;
 }
 
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
+}
+
 .code-editor-container[data-v-de01e351] {
 	margin-bottom: 0.5rem;
 	height: 100%;
@@ -1476,12 +1481,6 @@ fieldset[data-v-f7e758e5] {
 	color: transparent;
 }
 
-/* Global styles */
-pre code.hljs {
-	padding: 0 !important;
-	background: transparent !important;
-}
-
 .colorInputPick{
     --input-font-size: 12px;
 	height: calc(var(--input-height) - 9px) !important;
@@ -1960,42 +1959,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-cced5e42] {
-	width: 100%;
-}
-.selectinput-option[data-v-cced5e42] {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns:1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
-	margin-block: 0.15rem;
-}
-.selectinput-option .bgl_icon-font[data-v-cced5e42]{
-	line-height: normal;
-}
-.selectinput-options.multiselect .selectinput-option[data-v-cced5e42] {
-	grid-template-columns: 10px 1fr;
-}
-.selectinput-options[data-v-cced5e42] {
-	max-height: 300px;
-	overflow-y: auto;
-}
-.selectinput-option[data-v-cced5e42]:hover, .highlight[data-v-cced5e42] {
-	background: var(--bgl-gray-20);
-}
-.isEmpty p[data-v-cced5e42] {
-	opacity: 0.3;
-}
-.selected[data-v-cced5e42]{
-	/* background: var(--bgl-primary-tint); */
-	background: var(--bgl-selected);
-}
-
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
@@ -2036,6 +1999,42 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	/* color: var(--input-color); */
 }
 
+.selectinput[data-v-cced5e42] {
+	width: 100%;
+}
+.selectinput-option[data-v-cced5e42] {
+	padding: 6px 12px;
+	cursor: pointer;
+	border-radius: 5px;
+	transition: all 0.2s;
+	display: grid;
+	grid-template-columns:1fr;
+	justify-content: space-between;
+	width: 100%;
+	font-size: var(--input-font-size);
+	margin-block: 0.15rem;
+}
+.selectinput-option .bgl_icon-font[data-v-cced5e42]{
+	line-height: normal;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-cced5e42] {
+	grid-template-columns: 10px 1fr;
+}
+.selectinput-options[data-v-cced5e42] {
+	max-height: 300px;
+	overflow-y: auto;
+}
+.selectinput-option[data-v-cced5e42]:hover, .highlight[data-v-cced5e42] {
+	background: var(--bgl-gray-20);
+}
+.isEmpty p[data-v-cced5e42] {
+	opacity: 0.3;
+}
+.selected[data-v-cced5e42]{
+	/* background: var(--bgl-primary-tint); */
+	background: var(--bgl-selected);
+}
+
 .bgl_input .canvas {
 	width: 100%;
 	height: 100%;
@@ -2051,6 +2050,40 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	border-radius: var(--input-border-radius);
 }
 
+.table-row .bagel-input input,
+.table-row .bagel-input textarea,
+.table-row .bagel-input .input {
+	border-radius: 0;
+	background: transparent;
+	color: var(--bgl-text-color);
+}
+.table-row .bagel-input textarea {
+	resize: none;
+	min-height: 40px;
+	overflow: auto;
+	margin: 0px;
+	padding: 0.64rem 0.7rem 0;
+}
+.table-row .bagel-input {
+	margin: 0;
+}
+.table-row .bagel-input input:focus-visible,
+.table-row .bagel-input textarea:focus-visible,
+.table-row .bagel-input .input:focus-visible {
+	background: var(--border-color);
+}
+.ghost {
+	opacity: 0;
+	background: #c8ebfb;
+}
+.sortable-chosen {
+	cursor: grabbing !important;
+	border-color: transparent;
+	background: var(--bgl-box-bg);
+	border-radius: 10px;
+	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
+}
+
 .table-side-scroll[data-v-e9632f79] {
 	overflow: auto;
 	margin-inline-start: -1rem;
@@ -2157,40 +2190,6 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	opacity: 1;
 }
 
-.table-row .bagel-input input,
-.table-row .bagel-input textarea,
-.table-row .bagel-input .input {
-	border-radius: 0;
-	background: transparent;
-	color: var(--bgl-text-color);
-}
-.table-row .bagel-input textarea {
-	resize: none;
-	min-height: 40px;
-	overflow: auto;
-	margin: 0px;
-	padding: 0.64rem 0.7rem 0;
-}
-.table-row .bagel-input {
-	margin: 0;
-}
-.table-row .bagel-input input:focus-visible,
-.table-row .bagel-input textarea:focus-visible,
-.table-row .bagel-input .input:focus-visible {
-	background: var(--border-color);
-}
-.ghost {
-	opacity: 0;
-	background: #c8ebfb;
-}
-.sortable-chosen {
-	cursor: grabbing !important;
-	border-color: transparent;
-	background: var(--bgl-box-bg);
-	border-radius: 10px;
-	box-shadow: 0 0 10px 0 rgb(0 0 0 /20%);
-}
-
 .tel-input[data-v-24f599bf] {
 	direction: ltr;
 	text-align: left;
@@ -2268,58 +2267,58 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-eeb2bf31] {
+.bagel-input textarea[data-v-9b37d57d] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-eeb2bf31] {
+.bagel-input.text-input textarea[data-v-9b37d57d] {
 	resize: none;
 }
-.code textarea[data-v-eeb2bf31] {
+.code textarea[data-v-9b37d57d] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
-.code textarea[data-v-eeb2bf31]::placeholder {
+.code textarea[data-v-9b37d57d]::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-eeb2bf31] {
+.bagel-input.small[data-v-9b37d57d] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-eeb2bf31] {
+.bagel-input.dense label[data-v-9b37d57d] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-eeb2bf31]:disabled {
+.bagel-input input[data-v-9b37d57d]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-eeb2bf31] {
+.bagel-input label[data-v-9b37d57d] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap .bgl_icon-font[data-v-eeb2bf31] {
+.textInputIconWrap .bgl_icon-font[data-v-9b37d57d] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input[data-v-eeb2bf31]{
+.textInputIconWrap input[data-v-9b37d57d]{
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
-.txtInputIconStart .iconStart[data-v-eeb2bf31] {
+.txtInputIconStart .iconStart[data-v-9b37d57d] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.txtInputIconStart input[data-v-eeb2bf31], .txtInputIconStart textarea[data-v-eeb2bf31]{
+.txtInputIconStart input[data-v-9b37d57d], .txtInputIconStart textarea[data-v-9b37d57d]{
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }
-.bagel-input.small textarea[data-v-eeb2bf31] {
+.bagel-input.small textarea[data-v-9b37d57d] {
 	height: 30px;
 }
 
@@ -4549,25 +4548,30 @@ body>div:has(.spreadsheet) ::-webkit-scrollbar-track {
   -moz-user-drag: none;
 }
 
-.bgl-lightbox[data-v-1fd40019]:has(.bgl_vid) {
+.bgl-lightbox[data-v-7e4e35b2]:has(.bgl_vid) {
 	width: 90vw;
 }
-.bgl-lightbox[data-v-1fd40019]:has(.vid_short) {
-	width: unset;
+.bgl-lightbox[data-v-7e4e35b2]:has(.vid_short) {
+	width: auto;
+	aspect-ratio: 9/16;
+	height: 90vh;
+}
+.bgl-lightbox:has(.vid_short) .bgl-lightbox-item[data-v-7e4e35b2] * {
+    max-height:unset !important;
 }
-.lightbox-image[data-v-1fd40019]{
+.lightbox-image[data-v-7e4e35b2]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-1fd40019] {
+.bgl-lightbox-overlay[data-v-7e4e35b2] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-1fd40019] {
+.bgl-lightbox[data-v-7e4e35b2] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-1fd40019]{
-	animation: 500ms ease bgl-lightbox-load-1fd40019;
+.bgl-lightbox-item[data-v-7e4e35b2]{
+	animation: 500ms ease bgl-lightbox-load-7e4e35b2;
 }
-@keyframes bgl-lightbox-load-1fd40019 {
+@keyframes bgl-lightbox-load-7e4e35b2 {
 from {
     scale:0.7;
 }
@@ -4575,44 +4579,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-1fd40019] * {
+.bgl-lightbox-item[data-v-7e4e35b2] * {
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-1fd40019;
+	animation: 200ms ease bgl-lightbox-load-7e4e35b2;
 	transition: max-height 200ms ease;
 }
-.bgl-lightbox-item.zoomed[data-v-1fd40019] * {
+.bgl-lightbox-item.zoomed[data-v-7e4e35b2] * {
 	max-height: calc(100vh - 90px);
 	height: calc(100vh - 90px);
 }
-.navigation[data-v-1fd40019] {
+.navigation[data-v-7e4e35b2] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.thumbnail[data-v-1fd40019] {
+.thumbnail[data-v-7e4e35b2] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-1fd40019]:hover {
+.thumbnail[data-v-7e4e35b2]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-1fd40019]:active {
+.thumbnail[data-v-7e4e35b2]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-1fd40019] {
+.thumbnail.active[data-v-7e4e35b2] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-1fd40019]{
+.file-info[data-v-7e4e35b2]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-1fd40019]{
+.file-info[data-v-7e4e35b2]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-1fd40019] *{
+.file-info[data-v-7e4e35b2] *{
 	text-align: center !important;
 	margin-inline: 0 !important;
 	max-width: 100% !important;
@@ -15503,6 +15507,9 @@ select {
 }.txt12,
 .txt-12 {
     font-size: 12px;
+}.txt11,
+.txt-11 {
+    font-size: 11px;
 }.txt10,
 .txt-10 {
     font-size: 10px;

package/package.json

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

package/src/components/DragOver.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '@bagelink/vue'
 import { ref } from 'vue'
 
 const props = defineProps<{
@@ -85,9 +86,7 @@ function handleDrop(e: DragEvent) {
 	>
 		<slot />
 		<div v-if="isDragging && !disabled" class="drag-overlay">
-			<div class="drag-message">
-				Drop files here to upload
-			</div>
+			<Icon name="download" color="white" size="2" />
 		</div>
 	</div>
 </template>
@@ -99,8 +98,7 @@ function handleDrop(e: DragEvent) {
 
 .drag-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
@@ -108,7 +106,7 @@ function handleDrop(e: DragEvent) {
   justify-content: center;
   align-items: center;
   z-index: 10;
-  border: 2px dashed #ccc;
+  border: 1px dashed #ccc;
   border-radius: 4px;
 }
 
@@ -121,7 +119,7 @@ function handleDrop(e: DragEvent) {
 }
 
 .is-dragging {
-  outline: 2px dashed #4CAF50;
+  outline: 1px dashed #4CAF50;
 }
 
 .is-disabled {

package/src/components/form/inputs/TextInput.vue

@@ -103,18 +103,18 @@ onMounted(() => {
 
 			<input
 				v-if="!multiline && !autoheight && !code && inputRows < 2"
-				:id="id"
+				:id
 				ref="input"
 				v-model.trim="inputVal"
-				:name="name"
-				:title="title"
-				:autocomplete="autocomplete"
-				:type="type"
+				:name
+				:title
+				:autocomplete
+				:type
 				:rows="1"
 				:placeholder="placeholder || label"
-				:disabled="disabled"
-				:required="required"
-				:pattern="pattern"
+				:disabled
+				:required
+				:pattern
 				v-bind="nativeInputAttrs"
 				@focusout="onFocusout"
 				@focus="onFocus"
@@ -122,17 +122,17 @@ onMounted(() => {
 			>
 			<textarea
 				v-else
-				:id="id"
+				:id
 				ref="input"
 				v-model="inputVal"
-				:name="name"
-				:title="title"
-				:type="type"
+				:name
+				:title
+				:type
 				:rows="inputRows"
 				:placeholder="placeholder || label"
-				:disabled="disabled"
-				:required="required"
-				:pattern="pattern"
+				:disabled
+				:required
+				:pattern
 				v-bind="nativeInputAttrs"
 				@input="updateInputVal"
 				@focusout="onFocusout"
@@ -145,7 +145,7 @@ onMounted(() => {
 			/>
 			<Icon
 				v-if="icon"
-				:icon="icon"
+				:icon
 			/>
 		</label>
 	</div>

package/src/components/form/inputs/Upload/useFileUpload.ts

@@ -1,11 +1,12 @@
+import type { MaybeRefOrGetter } from 'vue'
 import type { BglFile, QueueFile } from './upload.types'
 import { useBagel } from '@bagelink/vue'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, toValue, } from 'vue'
 import { files } from './upload'
 
 interface UseFileUploadProps {
 	multiple?: boolean
-	dirPath?: string
+	dirPath?: MaybeRefOrGetter<string>
 	accept?: string
 	disabled?: boolean
 	namespace?: string
@@ -109,7 +110,7 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 					onUploadProgress: (e: ProgressEvent) => {
 						file.progress = (e.loaded / e.total) * 100 - 1
 					},
-					dirPath: props.dirPath
+					dirPath: toValue(props.dirPath)
 				})
 				pk.value.push(data.path_key)
 			} catch (error) {
@@ -142,8 +143,9 @@ export function useFileUpload(props: UseFileUploadProps = {}) {
 
 	// Load initial files
 	onMounted(() => {
-		if (props.dirPath) {
-			files.list(props.dirPath)
+		const dirPath = toValue(props.dirPath)
+		if (dirPath) {
+			files.list(dirPath)
 				.then((response) => {
 					const responseData = Array.isArray(response.data)
 						? response.data

package/src/components/lightbox/Lightbox.vue

@@ -201,7 +201,12 @@ defineExpose({ open, close })
 	width: 90vw;
 }
 .bgl-lightbox:has(.vid_short) {
-	width: unset;
+	width: auto;
+	aspect-ratio: 9/16;
+	height: 90vh;
+}
+.bgl-lightbox:has(.vid_short) .bgl-lightbox-item * {
+    max-height:unset !important;
 }
 .lightbox-image{
 	object-fit: contain;

package/src/styles/text.css

@@ -159,6 +159,11 @@
     font-size: 12px;
 }
 
+.txt11,
+.txt-11 {
+    font-size: 11px;
+}
+
 .txt10,
 .txt-10 {
     font-size: 10px;

package/dist/components/Icon.vue.d.ts

@@ -1,16 +0,0 @@
-import { IconType } from '..';
-type __VLS_Props = {
-    icon?: IconType;
-    name?: IconType;
-    size?: number | string;
-    color?: string;
-    round?: boolean;
-    weight?: number | string;
-    fontAwesome?: boolean;
-    fill?: boolean;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: number | string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-export default _default;
-//# sourceMappingURL=Icon.vue.d.ts.map

package/dist/components/Icon.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.vue.d.ts","sourceRoot":"","sources":["../../src/components/Icon.vue"],"names":[],"mappings":"AAoIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAK7C,KAAK,WAAW,GAAG;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;CACd,CAAC;;UANM,MAAM,GAAG,MAAM;;AAgIvB,wBAOG"}