@bagelink/vue 0.0.744 → 0.0.747

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

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/dist/utils/lang.d.ts

@@ -1,9 +1,9 @@
 declare function $tdb<T extends Record<string, string>>(langEl?: T): string;
 export declare function useLang(): {
-    lang: import('vue').WritableComputedRef<string>;
+    lang: import('vue').WritableComputedRef<string, string>;
     $tdb: typeof $tdb;
-    availableLangs: import('vue').WritableComputedRef<string[]>;
-    defaultLang: import('vue').WritableComputedRef<string>;
+    availableLangs: import('vue').WritableComputedRef<string[], string[]>;
+    defaultLang: import('vue').WritableComputedRef<string, string>;
 };
 export {};
 //# sourceMappingURL=lang.d.ts.map

package/package.json

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

package/src/components/AddressSearch.vue

@@ -22,7 +22,6 @@ async function searchAddresses() {
 	const geocodeUrl = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(addressURL)}`
 	const res = await fetch(geocodeUrl)
 	searchResults = await res.json() || []
-	console.log(suggestion)
 	suggestion?.show()
 }
 </script>
@@ -30,7 +29,9 @@ async function searchAddresses() {
 <template>
 	<div class="relative">
 		<Dropdown ref="suggestion" :noAutoFocus="true" placement="bottom-start">
-			<TextInput v-model="addressInput" placeholder="Enter address" @debounce="searchAddresses" />
+			<template #trigger>
+				<TextInput v-model="addressInput" placeholder="Enter address" @debounce="searchAddresses" />
+			</template>
 			<template #popper>
 				<ListView class="-mt-2 hm-300px">
 					<ListItem v-for="(result, index) in searchResults" :key="index" icon="location_on" :title="result.display_name" @click="emitAddress(result)" />

package/src/components/Dropdown.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { Btn, type MaterialIcons } from '@bagelink/vue'
+import { Dropdown as DDown } from 'floating-vue'
+
+export declare type Side = 'top' | 'right' | 'bottom' | 'left' | 'auto'
+export declare type Alignment = 'start' | 'end'
+export declare type AlignedPlacement = `${Side}-${Alignment}`
+
+defineProps<{
+	value?: string
+	thin?: boolean
+	flat?: boolean
+	disabled?: boolean
+	icon?: MaterialIcons
+	triggerClass?: string
+	// 'icon.end'?: MaterialIcons
+	border?: boolean
+	outline?: boolean
+	round?: boolean
+	placement?: 'auto' | AlignedPlacement
+	noAutoFocus?: boolean
+	// theme
+	// referenceNode
+	// shown
+	// showGroup
+	// ariaId
+	// disabled
+	// positioningDisabled
+	// placement
+	// delay
+	// distance
+	// skidding
+	// triggers
+	// showTriggers
+	// hideTriggers
+	// popperTriggers
+	// popperShowTriggers
+	// popperHideTriggers
+	// container
+	// boundary
+	// strategy
+	// autoHide
+	// handleResize
+	// instantMove
+	// eagerMount
+	// popperClass
+	// computeTransformOrigin
+	// autoMinSize
+	// autoSize
+	// autoMaxSize
+	// autoBoundaryMaxSize
+	// preventOverflow
+	// overflowPadding
+
+}>()
+const emit = defineEmits(['show', 'hide'])
+const ddownRef = $ref<typeof DDown>()
+const show = () =>	ddownRef?.show()
+const hide = () => ddownRef?.hide()
+defineExpose({ show, hide })
+</script>
+
+<template>
+	<DDown ref="ddownRef" :disabled="disabled" :noAutoFocus="noAutoFocus" :placement="placement" @hide="emit('hide')" @show="emit('show')">
+		<slot name="trigger">
+			<Btn :class="triggerClass" :icon="icon" :value="value" :thin="thin" :flat="thin" />
+		</slot>
+		<template #popper>
+			<slot />
+		</template>
+	</DDown>
+</template>

package/src/components/ListItem.vue

@@ -17,7 +17,7 @@ defineProps<{
 	<component
 		:is="to ? 'RouterLink' : 'div'"
 		:to="to"
-		class="flex gap-1 list-item"
+		class="flex gap-05 list-item"
 		:class="{ 'notClickable': !(to || onClick), 'no-border-list': flat }"
 		@click="onClick"
 	>
@@ -59,6 +59,14 @@ defineProps<{
 	bottom: 0;
 	border-bottom: 1px solid var(--border-color);
 }
+.list-item:last-child::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	border-bottom: none;
+}
 
 .list-item:hover,
 .list-item.router-link-active {

package/src/components/ModalConfirm.vue

@@ -21,7 +21,7 @@ function select(val: boolean) {
 			{{ message }}
 		</p>
 		<template #footer>
-			<Btn flat thin value="Cancel" @click="select(false)" />
+			<Btn flat thin class="color-black" value="Cancel" @click="select(false)" />
 			<Btn color="green" value="Confirm" @click="select(true)" />
 		</template>
 	</Modal>

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

@@ -20,6 +20,12 @@ const inputType = $computed(() => showPwd.value ? 'text' : 'password')
 <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" />
+		<Btn flat thin class="mx-05 m-password position-bottom-end" :icon="toggleShowPwdIcon" @click="showPwd = !showPwd" />
 	</div>
 </template>
+
+<style>
+.m-password{
+	margin-block: calc(var(--input-height) / 2 - 15px);
+}
+</style>

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

@@ -252,7 +252,7 @@ select {
 .bagel-input .bgl_btn:focus,
 .bagel-input button:focus {
     outline-color: rgba(0, 0, 0, 0.05);
-    box-shadow: inset 0 0 10px #00000042;
+    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