@bagelink/vue 0.0.742 → 0.0.747

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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, watch } from 'vue'
-import { Dropdown } from 'floating-vue'
 import 'floating-vue/style.css'
 import {
 	Btn,
 	Card,
+	Dropdown,
 	Icon,
 	type MaterialIcons,
 	type Option,
@@ -182,95 +182,94 @@ onMounted(() => {
 		ref="dropdown"
 		placement="bottom-start"
 		class="bagel-input selectinput"
-		@click.stop
 		@hide="updateOpen(false)"
 	>
-		<label>
-			{{ label }}
-			<div class="flex gap-05">
-				<button
-					:disabled="disabled"
-					type="button"
-					class="selectinput-btn"
-					:class="{ isEmpty: selectedItemCount === 0 }"
-					@keydown="openOptions"
-					@click="updateOpen(true)"
-				>
-					<Icon v-if="icon" :icon="icon" />
-					<p v-if="!hideLabel">
-						{{ selectedLabel }}
-					</p>
-
-					<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
-						<Btn
-							flat
+		<template #trigger>
+			<label>
+				{{ label }}
+				<div class="flex gap-05">
+					<button
+						:disabled="disabled"
+						type="button"
+						class="selectinput-btn"
+						:class="{ isEmpty: selectedItemCount === 0 }"
+						@keydown="openOptions"
+						@click="updateOpen(true)"
+					>
+						<Icon v-if="icon" :icon="icon" />
+						<p v-if="!hideLabel">
+							{{ selectedLabel }}
+						</p>
+
+						<div v-if="clearable && selectedItemCount > 0" class="ms-auto ps-05 me-05">
+							<Btn
+								flat
+								thin
+								icon="clear"
+								class="color-gray"
+								@click="selectedItems = []; emitUpdate()"
+							/>
+						</div>
+						<Icon
+							v-if="!disabled"
 							thin
-							icon="clear"
-							class="color-gray"
-							@click="selectedItems = []; emitUpdate()"
+							v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
 						/>
-					</div>
-					<Icon
-						v-if="!disabled"
-						thin
-						v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
-					/>
-				</button>
-				<input
-					v-if="required"
-					tabindex="-1"
-					style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
-					:value="selectedItems"
-					required
-					@input="updateOpen(true)"
-				>
-			</div>
-		</label>
-		<template #popper>
-			<Card
-				class="p-05"
-				:style="{ width: fullWidth ? '100%' : 'auto' }"
-			>
-				<TextInput
-					v-if="searchable"
-					ref="searchInput"
-					v-model="search"
-					dense
-					placeholder="Search"
-					icon="search"
-				/>
-				<div class="selectinput-options" :class="{ multiselect }">
-					<div
-						v-for="(option, i) in filteredOptions"
-						:key="`${option}${i}`"
-						class="selectinput-option hover gap-1 align-items-center"
-						:class="{ selected: isSelected(option) }"
-						role="option"
-						tabindex="0"
-						:aria-selected="isSelected(option)"
-						@click="select(option)"
-						@keydown.enter="select(option)"
+					</button>
+					<input
+						v-if="required"
+						tabindex="-1"
+						style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
+						:value="selectedItems"
+						required
+						@input="updateOpen(true)"
 					>
-						<template v-if="multiselect">
-							<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 class="block">
-							{{ getLabel(option) }}
-						</span>
-					</div>
 				</div>
-				<slot name="last" />
-			</Card>
+			</label>
 		</template>
+		<Card
+			class="p-05"
+			:style="{ width: fullWidth ? '100%' : 'auto' }"
+		>
+			<TextInput
+				v-if="searchable"
+				ref="searchInput"
+				v-model="search"
+				dense
+				placeholder="Search"
+				icon="search"
+			/>
+			<div class="selectinput-options" :class="{ multiselect }">
+				<div
+					v-for="(option, i) in filteredOptions"
+					:key="`${option}${i}`"
+					class="selectinput-option hover gap-1 align-items-center"
+					:class="{ selected: isSelected(option) }"
+					role="option"
+					tabindex="0"
+					:aria-selected="isSelected(option)"
+					@click="select(option)"
+					@keydown.enter="select(option)"
+				>
+					<template v-if="multiselect">
+						<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 class="block">
+						{{ getLabel(option) }}
+					</span>
+				</div>
+			</div>
+			<slot name="last" />
+		</Card>
 	</Dropdown>
 </template>
 

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

@@ -260,6 +260,8 @@ function findCountryByDialCode(dialCode: number) {
 	return filteredCountries.find(country => Number(country.dialCode) === dialCode)
 }
 
+const phoneDropdown = $ref<typeof Dropdown>()
+
 function chooseCountry(country?: string) {
 	if (!country) return
 	const parsedCountry = findCountry(country)
@@ -274,6 +276,7 @@ function chooseCountry(country?: string) {
 
 	activeCountryCode = parsedCountry.iso2 || ''
 	// emitInput(phone);
+	phoneDropdown?.hide()
 }
 
 function onBlur() { emit('blur') }
@@ -325,62 +328,60 @@ function handleInput(e: KeyboardEvent) {
 			>
 				<Dropdown
 					v-if="!computedDropDownOptions.hide"
-					placement="bottom"
+					ref="phoneDropdown"
+					placement="bottom-start"
 					:disabled="computedDropDownOptions.disabled"
 					@hide="open = false"
 				>
-					<span
-						class="flex gap-05"
-						@click="open = true"
-					>
-						<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
-						<Flag
-							v-if="computedDropDownOptions.showFlags && activeCountryCode"
-							:country="activeCountryCode"
-						/>
-					</span>
-					<template #popper="{ hide }">
-						<div class="p-075 tel-countryp-dropdown">
-							<TextInput
-								v-if="searchable"
-								v-model="searchQuery"
-								aria-label="Search by country name or country code"
-								placeholder="Search"
-								icon="search"
+					<template #trigger>
+						<span
+							class="flex gap-05"
+							@click="open = true"
+						>
+							<Icon :icon="open ? 'collapse_all' : 'expand_all'" />
+							<Flag
+								v-if="computedDropDownOptions.showFlags && activeCountryCode"
+								:country="activeCountryCode"
 							/>
+						</span>
+					</template>
+					<div class="p-075 tel-countryp-dropdown">
+						<TextInput
+							v-if="searchable"
+							v-model="searchQuery"
+							aria-label="Search by country name or country code"
+							placeholder="Search"
+							icon="search"
+						/>
 
-							<ul
-								class="overflow-y p-0"
-								:style="{ 'max-height': '400px' }"
-								:class="dropdownOpenDirection"
-								role="listbox"
+						<ul
+							class="overflow-y p-0"
+							:style="{ 'max-height': '400px' }"
+							:class="dropdownOpenDirection"
+							role="listbox"
+						>
+							<li
+								v-for="(pb, index) in sortedCountries"
+								:key="pb.iso2 + isPreferred(pb)"
+								role="option"
+								class="flex gap-075"
+								tabindex="-1"
+								:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
+								"
+								@click="chooseCountry(pb.iso2)"
+								@mousemove="selectedIndex = index"
 							>
-								<li
-									v-for="(pb, index) in sortedCountries"
-									:key="pb.iso2 + isPreferred(pb)"
-									role="option"
-									class="flex gap-075"
-									tabindex="-1"
-									:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
-									"
-									@click="
-										chooseCountry(pb.iso2);
-										hide();
-									"
-									@mousemove="selectedIndex = index"
-								>
-									<Flag
-										v-if="computedDropDownOptions.showFlags"
-										:country="pb.iso2"
-									/>
-									<p class="tel-country">{{ pb.name }}</p>
-									<span v-if="computedDropDownOptions.showDialCodeInList">
-										+{{ pb.dialCode }}
-									</span>
-								</li>
-							</ul>
-						</div>
-					</template>
+								<Flag
+									v-if="computedDropDownOptions.showFlags"
+									:country="pb.iso2"
+								/>
+								<p class="tel-country">{{ pb.name }}</p>
+								<span v-if="computedDropDownOptions.showDialCodeInList">
+									+{{ pb.dialCode }}
+								</span>
+							</li>
+						</ul>
+					</div>
 				</Dropdown>
 
 				<!-- ref="refInput" -->

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

@@ -16,5 +16,3 @@ 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/index.ts

@@ -24,6 +24,7 @@ export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as MapEmbed } from './MapEmbed.vue'
 export { default as Flag } from './Flag.vue'
 export { default as AddressSearch } from './AddressSearch.vue'
+export { default as Dropdown } from './Dropdown.vue'
 
 export * from './form'
 export * from './dashboard'

package/src/components/lightbox/Lightbox.vue

@@ -88,7 +88,7 @@ defineExpose({ open, close })
 				/>
 			</div>
 			<div class="bgl-lightbox relative txt-center" @click.stop>
-				<Btn flat class="fixed top-1 end-1 color-white" icon="close" @click="close" />
+				<Btn flat class="fixed top-1 start-1 color-white" icon="close" @click="close" />
 				<div class="bgl-lightbox-item">
 					<template v-if="currentItem?.type === 'image'">
 						<img :src="currentItem?.src" alt="Preview" class="vw90 lightbox-image">

package/src/composables/index.ts

@@ -1,4 +1,5 @@
-import { type BglFormSchemaFnT, type BglFormSchemaT, getFallbackSchema } from '@bagelink/vue'
+import { type BglFormSchemaFnT, type BglFormSchemaT, type IfAny, getFallbackSchema } from '@bagelink/vue'
+
 import type { Ref, UnwrapRef } from 'vue'
 import { ref, watch } from 'vue'
 
@@ -25,9 +26,14 @@ export function useBglSchema<T = Record<string, unknown>>(
 	return getFallbackSchema(data, showFields)
 }
 
-export function useLocalStorage<T>(key: string, initialValue: T): Ref<UnwrapRef<T>> {
+export function useLocalStorage<T>(
+	key: string,
+	initialValue: T
+): [T] extends [Ref<any, any>] ?
+		IfAny<T, Ref<T, T>, T> :
+		Ref<UnwrapRef<T>, T | UnwrapRef<T>> {
 	const storedValue = localStorage.getItem(key)
-	const initial = storedValue ? JSON.parse(storedValue) : initialValue
+	const initial = storedValue !== null ? JSON.parse(storedValue) : initialValue
 	const value = ref<T>(initial)
 
 	watch(() => value.value, (val) => {

package/src/styles/inputs.css

@@ -231,7 +231,8 @@ select {
     width: 100%;
 }
 
-[dir='rtl'] .bagel-input input[type="email"] {
+[dir='rtl'] .bagel-input input[type="email"],
+[dir='rtl'] .tel-input input[type="tel"] {
     direction: ltr;
     text-align: right;
 }
@@ -251,7 +252,8 @@ select {
 .bagel-input .bgl_btn:focus,
 .bagel-input button:focus {
     outline-color: rgba(0, 0, 0, 0.05);
-    box-shadow: inset 0 0 10px #00000012;
+    box-shadow: inset 0 0 10px #00000021;
+    outline-color: var(--input-bg);
 
 }
 

package/src/styles/layout.css

@@ -53,6 +53,10 @@
     align-content: center;
 }
 
+.align-content-space-between {
+    align-content: space-between;
+}
+
 .align-items-top {
     align-items: flex-start !important;
 }

package/src/styles/mobilLayout.css

@@ -76,6 +76,10 @@
         align-content: center;
     }
 
+    .m_align-content-space-between {
+        align-content: space-between;
+    }
+
     .m_align-items-top {
         align-items: flex-start !important;
     }

package/src/styles/modal.css

@@ -80,8 +80,8 @@
     opacity: 1;
     max-width: 600px;
     width: 90%;
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     margin-inline-start: auto;
     margin-inline-end: 20px;
     min-height: calc(100vh - 40px);

package/src/styles/text.css

@@ -370,6 +370,10 @@
     word-break: break-word;
 }
 
+.word-break-all {
+    word-break: break-all;
+}
+
 .uppercase {
     text-transform: uppercase;
 }
@@ -809,6 +813,10 @@
         word-break: break-word;
     }
 
+    .m_word-break-all {
+        word-break: break-all;
+    }
+
     .m_uppercase {
         text-transform: uppercase;
     }

package/src/types/index.ts

@@ -38,3 +38,6 @@ export type Option =
 	| number
 	| Record<string, any>
 	| { label: string, value: string | number }
+
+
+export type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N