@bagelink/vue 0.0.734 → 0.0.738

package/dist/style.css

@@ -1,14 +1,17 @@
 @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://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
-.bgl-lightbox-overlay[data-v-c3c26420] {
+.lightbox-image[data-v-c061443c]{
+	object-fit: contain;
+}
+.bgl-lightbox-overlay[data-v-c061443c] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-c3c26420] {
+.bgl-lightbox[data-v-c061443c] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-c3c26420]{
-	animation: 500ms ease bgl-lightbox-load-c3c26420;
+.bgl-lightbox-item[data-v-c061443c]{
+	animation: 500ms ease bgl-lightbox-load-c061443c;
 }
-@keyframes bgl-lightbox-load-c3c26420 {
+@keyframes bgl-lightbox-load-c061443c {
 from {
     scale:0.7;
 }
@@ -16,32 +19,32 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-c3c26420] * {
+.bgl-lightbox-item[data-v-c061443c] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-c3c26420;
+	animation: 200ms ease bgl-lightbox-load-c061443c;
 }
-.navigation[data-v-c3c26420] {
+.navigation[data-v-c061443c] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-c3c26420] {
+.navigation-btn[data-v-c061443c] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-c3c26420] {
+.thumbnail[data-v-c061443c] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-c3c26420]:hover {
+.thumbnail[data-v-c061443c]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-c3c26420]:active {
+.thumbnail[data-v-c061443c]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-c3c26420] {
+.thumbnail.active[data-v-c061443c] {
 	opacity: 1;
 	outline: 2px solid white;
 }
@@ -1361,10 +1364,10 @@ display: block;
 }
 .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-25fde24f] {
+.selectinput[data-v-be6303fe] {
 	width: 100%;
 }
-.selectinput-option[data-v-25fde24f] {
+.selectinput-option[data-v-be6303fe] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1376,21 +1379,24 @@ display: block;
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-25fde24f] {
+.selectinput-option .bgl_icon-font[data-v-be6303fe]{
+	line-height: normal;
+}
+.selectinput-options.multiselect .selectinput-option[data-v-be6303fe] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-25fde24f] {
+.selectinput-options[data-v-be6303fe] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-25fde24f]:hover {
+.selectinput-option[data-v-be6303fe]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-25fde24f] {
+.isEmpty p[data-v-be6303fe] {
 	opacity: 0.3;
 }
-.selected[data-v-25fde24f]{
-	background: var(--input-bg);
+.selected[data-v-be6303fe]{
+	background: var(--bgl-primary-tint);
 }
 
 .bagel-input label {
@@ -1801,7 +1807,7 @@ display: block;
 	color: var(--bgl-white);
 }
 
-.fileUploadWrap[data-v-a0ae528d] {
+.fileUploadWrap[data-v-e8b1219f] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
 	text-align: center;
@@ -1813,7 +1819,7 @@ display: block;
 	background: var(--input-bg);
 	height: 215px;
 }
-.bagel-input .fileUploadWrap.fileDropZone[data-v-a0ae528d] {
+.bagel-input .fileUploadWrap.fileDropZone[data-v-e8b1219f] {
 	background: var(--input-bg);
 	display: flex;
 	align-items: center;
@@ -1821,14 +1827,14 @@ display: block;
 	color: var(--bgl-gray);
 	flex-direction: column;
 }
-.fileUploadWrap.dragover[data-v-a0ae528d],
-.fileUploadWrap[data-v-a0ae528d]:hover {
+.fileUploadWrap.dragover[data-v-e8b1219f],
+.fileUploadWrap[data-v-e8b1219f]:hover {
 	box-shadow: inset 0 0 10px #00000012;
 }
-.fileUploadWrap[style*="height: auto;"][data-v-a0ae528d] {
+.fileUploadWrap[style*="height: auto;"][data-v-e8b1219f] {
 	min-height: 215px;
 }
-.multi-image-item-preview[data-v-a0ae528d] {
+.multi-image-item-preview[data-v-e8b1219f] {
 	border: 1px solid var(--border-color) !important;
 	border-radius: var(--input-border-radius);
 	margin: 0.5rem !important;
@@ -1842,12 +1848,12 @@ display: block;
 	gap: 1rem;
 	align-items: center;
 }
-.multi-image-item-preview p[data-v-a0ae528d] {
+.multi-image-item-preview p[data-v-e8b1219f] {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.multi-preview[data-v-a0ae528d]{
+.multi-preview[data-v-e8b1219f]{
 	width: 40px;
 	height: 40px;
 	border-radius: var(--input-border-radius);
@@ -1858,17 +1864,17 @@ display: block;
 	align-items: center;
 	display: flex;
 }
-.bgl-single-preview[data-v-a0ae528d]{
+.bgl-single-preview[data-v-e8b1219f]{
 	height: 100%;
 	position: relative;
 }
-.bgl-single-preview + .fileUploadPlaceHolder[data-v-a0ae528d]{
+.bgl-single-preview + .fileUploadPlaceHolder[data-v-e8b1219f]{
 	position: absolute;
 	inset: 0;
 	margin: auto;
 	top: calc(50% - 2rem);
 }
-.single-image-item-preview[data-v-a0ae528d] {
+.single-image-item-preview[data-v-e8b1219f] {
 	height: 100%;
 	min-height: 100%;
 	position: relative;
@@ -1876,13 +1882,13 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-a0ae528d] {
+.fileUploadWrap[style*="height: auto"] .single-image-item-preview[data-v-e8b1219f] {
 	min-height: 215px;
 }
-.fileUploadWrap[style*="height: auto"] .single-preview[data-v-a0ae528d] {
+.fileUploadWrap[style*="height: auto"] .single-preview[data-v-e8b1219f] {
 	margin: 0rem !important;
 }
-.single-preview[data-v-a0ae528d]{
+.single-preview[data-v-e8b1219f]{
 	border-radius: var(--input-border-radius);
 	margin: 1rem;
 	padding: 0px;
@@ -1892,17 +1898,17 @@ display: block;
 	background: var(--bgl-gray-light);
 	box-shadow: 0 0 10px #00000012;
 }
-.bgl_fill-image.single-image-item-preview[data-v-a0ae528d] {
+.bgl_fill-image.single-image-item-preview[data-v-e8b1219f] {
 	height: 100%;
 }
-.bgl_fill-image.single-image-item-preview .single-preview[data-v-a0ae528d]{
+.bgl_fill-image.single-image-item-preview .single-preview[data-v-e8b1219f]{
 	border-radius: unset;
 	object-fit: cover;
 	box-shadow: unset;
 	width: 100%;
 	height: auto;
 }
-.single-image-item-preview .pie[data-v-a0ae528d] {
+.single-image-item-preview .pie[data-v-e8b1219f] {
 	transform-origin: top;
 	transform: scale(1.4);
 	position: absolute;
@@ -1916,31 +1922,31 @@ display: block;
 	border: none !important;
 	padding: 0 !important;
 }
-.bgl_oval-upload[data-v-a0ae528d] {
+.bgl_oval-upload[data-v-e8b1219f] {
 	border-radius: 100% !important;
 	overflow: hidden;
 }
-.bgl_oval-upload p[data-v-a0ae528d] {
+.bgl_oval-upload p[data-v-e8b1219f] {
 		padding: 0.75rem !important;
 		font-size: 12px
 }
-.bgl_oval-upload .fileUploadPlaceHolder[data-v-a0ae528d]{
+.bgl_oval-upload .fileUploadPlaceHolder[data-v-e8b1219f]{
 		top: 0;
 }
-.bgl_oval-upload .pie[data-v-a0ae528d] {
+.bgl_oval-upload .pie[data-v-e8b1219f] {
 		transform: scale(1);
 }
-.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-a0ae528d] {
+.bgl_oval-upload span.bgl_icon-font.color-primary[data-v-e8b1219f] {
 		transform: scale(0.4) !important;
 }
-.bgl_oval-upload .single-image-item-preview[data-v-a0ae528d]{
+.bgl_oval-upload .single-image-item-preview[data-v-e8b1219f]{
 		height: 100%;
 }
-.bgl_oval-upload .single-preview[data-v-a0ae528d] {
+.bgl_oval-upload .single-preview[data-v-e8b1219f] {
 		margin: 0;
 		height: 100% !important;
 }
-.pie[data-v-a0ae528d] {
+.pie[data-v-e8b1219f] {
 	width: 30px;
 	height: 30px;
 	position: relative;
@@ -1948,7 +1954,7 @@ display: block;
 	align-items: center;
 	justify-content: center;
 }
-.pie[data-v-a0ae528d]:before {
+.pie[data-v-e8b1219f]:before {
 	content: '';
 	position: absolute;
 	border-radius: 50%;
@@ -1966,26 +1972,26 @@ display: block;
 		#000 calc(100% - var(--b))
 	);
 }
-.pie .success[data-v-a0ae528d] {
+.pie .success[data-v-e8b1219f] {
 	transform: scale(0);
 	opacity: 0;
 	transition: all 0.3s ease-in-out;
 }
-.pie .progress[data-v-a0ae528d] {
+.pie .progress[data-v-e8b1219f] {
 	position: absolute;
 	font-size: 10px;
 }
-.pie.complete .progress[data-v-a0ae528d] {
+.pie.complete .progress[data-v-e8b1219f] {
 	display: none;
 }
-.pie.complete .success[data-v-a0ae528d] {
+.pie.complete .success[data-v-e8b1219f] {
 	transform: scale(1.3);
 	opacity: 1;
 }
-.pie.complete[data-v-a0ae528d]:before {
+.pie.complete[data-v-e8b1219f]:before {
 	background: conic-gradient(var(--bgl-green) calc(var(--p) * 1%), #0000 0);
 }
-.pie.complete[data-v-a0ae528d] {
+.pie.complete[data-v-e8b1219f] {
 	color: var(--bgl-green);
 }
 
@@ -7140,6 +7146,9 @@ select {
 .line-height-2 {
     line-height: 2;
 }
+.line-height-normal {
+    line-height: normal;
+}
 .ellipsis {
     overflow: hidden;
     display: block;
@@ -7496,6 +7505,10 @@ select {
         line-height: 2;
     }
 
+    .m_line-height-normal {
+        line-height: normal;
+    }
+
     .m_ellipsis {
         overflow: hidden;
         display: block;

package/package.json

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

package/src/components/ListItem.vue

@@ -19,6 +19,7 @@ defineProps<{
 		:to="to"
 		class="flex gap-1 list-item"
 		:class="{ 'notClickable': !(to || onClick), 'no-border-list': flat }"
+		@click="onClick"
 	>
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />

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

@@ -257,7 +257,7 @@ function drop(e: DragEvent) {
 					</div>
 				</div>
 
-				<div v-if="!multiple" class="bgl-single-preview">
+				<div v-if="!multiple && (storageFiles.length > 0 || fileQueue.length > 0)" class="bgl-single-preview">
 					<div
 						v-for="file in storageFiles"
 						:key="file.id"
@@ -297,7 +297,7 @@ function drop(e: DragEvent) {
 				:fileQueue
 				:browse
 			>
-				<p class="p-1 flex column hover fileUploadPlaceHolder">
+				<p class="p-1 flex column hover fileUploadPlaceHolder justify-content-center mb-05">
 					<Icon icon="upload_2" />
 					Drop files here or click to upload
 				</p>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Btn, TextInput } from '@bagelink/vue'
+
+type TextInputT = InstanceType<typeof TextInput>
+
+type TextInputPropT = Omit<TextInputT['$props'], (`${string}modelValue` | `ref${string}` | `onVnode${string}` | 'key')>
+
+const props = defineProps<{ txtInputProps: TextInputPropT }>()
+
+const password = defineModel<string>('modelValue')
+const showPwd = defineModel<string>('showPwd', { default: false })
+
+const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
+const inputType = $computed(() => showPwd.value ? 'text' : 'password')
+</script>
+
+<template>
+	<div class="relative">
+		<TextInput v-model="password" class="mb-0" :type="inputType" v-bind="txtInputProps" />
+		<Btn flat thin class="m-05 position-bottom-end" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
+	</div>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -243,7 +243,7 @@ onMounted(() => {
 					<div
 						v-for="(option, i) in filteredOptions"
 						:key="`${option}${i}`"
-						class="selectinput-option hover gap-1"
+						class="selectinput-option hover gap-1 align-items-center"
 						:class="{ selected: isSelected(option) }"
 						role="option"
 						tabindex="0"
@@ -252,14 +252,18 @@ onMounted(() => {
 						@keydown.enter="select(option)"
 					>
 						<template v-if="multiselect">
-							<Icon v-if="isSelected(option)" icon="select_check_box" />
+							<Icon
+								v-if="isSelected(option)" :size="1.1
+								" icon="select_check_box"
+							/>
 							<Icon
 								v-if="!isSelected(option)"
 								class="opacity-3"
 								icon="check_box_outline_blank"
+								:size="1.1"
 							/>
 						</template>
-						<span>
+						<span class="block">
 							{{ getLabel(option) }}
 						</span>
 					</div>
@@ -287,6 +291,9 @@ onMounted(() => {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
+.selectinput-option .bgl_icon-font{
+	line-height: normal;
+}
 .selectinput-options.multiselect .selectinput-option {
 	grid-template-columns: 10px 1fr;
 
@@ -304,7 +311,7 @@ onMounted(() => {
 	opacity: 0.3;
 }
 .selected{
-	background: var(--input-bg);
+	background: var(--bgl-primary-tint);
 }
 </style>
 

package/src/components/form/inputs/index.ts

@@ -15,5 +15,6 @@ export { default as TelInput } from './TelInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
 export { default as RichText2 } from './RichText2/index.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
+export { default as PasswordInput } from './PasswordInput.vue'
 
 export { Dropdown } from 'floating-vue'

package/src/components/lightbox/Lightbox.vue

@@ -13,7 +13,7 @@ function open(item: LightboxItem, groupItems: LightboxItem[] = []) {
 	currentItem = item
 	if (!groupItems.length) return
 	group = groupItems
-	currentIndex = groupItems.indexOf(item)
+	currentIndex = groupItems.findIndex(({ src }) => item.src === src)
 	document.addEventListener('keydown', handleKeydown)
 }
 
@@ -75,17 +75,30 @@ defineExpose({ open, close })
 			@keydown.right="next"
 			@click="close"
 		>
-			<div class="bgl-lightbox relative vw90 txt-center" @click.stop>
+			<div v-if="group && group.length > 1" class="navigation flex space-between px-3 w-100 absolute">
+				<Btn
+					class="navigation-btn oval"
+					icon="arrow_back"
+					@click="prev"
+				/>
+				<Btn
+					class="navigation-btn oval"
+					icon="arrow_forward"
+					@click="next"
+				/>
+			</div>
+			<div class="bgl-lightbox relative txt-center" @click.stop>
 				<Btn flat class="fixed top-1 end-1 color-white" icon="close" @click="close" />
 				<div class="bgl-lightbox-item">
 					<template v-if="currentItem?.type === 'image'">
-						<img :src="currentItem?.src" alt="Preview">
+						<img :src="currentItem?.src" alt="Preview" class="vw90 lightbox-image">
 					</template>
 					<template v-else-if="currentItem?.type === 'video'">
 						<BglVideo
 							:src="currentItem?.src"
 							autoplay
 							controls
+							class="vw90"
 						/>
 					</template>
 					<template v-else-if="currentItem?.type === 'pdf'">
@@ -95,6 +108,7 @@ defineExpose({ open, close })
 							width="100%"
 							height="1080"
 							:title="currentItem?.name"
+							class="vw90"
 						>
 					</template>
 					<template v-else>
@@ -105,22 +119,10 @@ defineExpose({ open, close })
 						</div>
 					</template>
 				</div>
-				<div v-if="group && group.length > 1" class="navigation flex space-between w-100 absolute">
-					<Btn
-						class="navigation-btn oval user-select-none"
-						icon="arrow_back"
-						@click="prev"
-					/>
-					<Btn
-						class="navigation-btn oval user-select-none"
-						icon="arrow_forward"
-						@click="next"
-					/>
-				</div>
 				<div
 					v-if="group && group.length > 1"
 					class="flex justify-content-center mt-2 overflow
-					 p-1 fixed bottom start end gap-1 m_justify-content-start"
+					p-1 fixed bottom start end gap-1 m_justify-content-start"
 				>
 					<template
 						v-for="(item, index) in group"
@@ -151,6 +153,10 @@ defineExpose({ open, close })
 </template>
 
 <style scoped>
+.lightbox-image{
+	object-fit: contain;
+}
+
 .bgl-lightbox-overlay {
 	background: rgba(0, 0, 0, 0.8);
 }

package/src/styles/text.css

@@ -263,6 +263,10 @@
     line-height: 2;
 }
 
+.line-height-normal {
+    line-height: normal;
+}
+
 .ellipsis {
     overflow: hidden;
     display: block;
@@ -640,6 +644,10 @@
         line-height: 2;
     }
 
+    .m_line-height-normal {
+        line-height: normal;
+    }
+
     .m_ellipsis {
         overflow: hidden;
         display: block;