@bagelink/vue 0.0.823 → 0.0.827

package/dist/style.css

@@ -1188,10 +1188,10 @@ p {
 }
 .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-94b45d29] {
+.selectinput[data-v-e3164caf] {
 	width: 100%;
 }
-.selectinput-option[data-v-94b45d29] {
+.selectinput-option[data-v-e3164caf] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1203,23 +1203,23 @@ p {
 	font-size: var(--input-font-size);
 	margin-block: 0.15rem;
 }
-.selectinput-option .bgl_icon-font[data-v-94b45d29]{
+.selectinput-option .bgl_icon-font[data-v-e3164caf]{
 	line-height: normal;
 }
-.selectinput-options.multiselect .selectinput-option[data-v-94b45d29] {
+.selectinput-options.multiselect .selectinput-option[data-v-e3164caf] {
 	grid-template-columns: 10px 1fr;
 }
-.selectinput-options[data-v-94b45d29] {
+.selectinput-options[data-v-e3164caf] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-94b45d29]:hover {
+.selectinput-option[data-v-e3164caf]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-94b45d29] {
+.isEmpty p[data-v-e3164caf] {
 	opacity: 0.3;
 }
-.selected[data-v-94b45d29]{
+.selected[data-v-e3164caf]{
 	/* background: var(--bgl-primary-tint); */
 	background: var(--bgl-selected);
 }
@@ -1814,27 +1814,27 @@ p {
   transform: translateX(-20px);
 }
 
-.skeleton-wrap[data-v-a06bec19] {
-	--skeleton-radius: 0.25rem;
-	--skeleton-bg: #f0f0f0;
-	--skeleton-margin: 1rem;
+.skeleton-wrap[data-v-9a44f23a] {
 	margin-bottom: var(--skeleton-margin);
 }
-.skeleton[data-v-a06bec19] {
-	animation: skeleton-a06bec19 2s infinite;
+.skeleton[data-v-9a44f23a] {
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
+    position: relative;
+    overflow: hidden;
 }
-@keyframes skeleton-a06bec19 {
-0% {
-		opacity: 0.5;
-}
-50% {
-		opacity: 1;
+.skeleton[data-v-9a44f23a]::before {
+    content: "";
+    background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
+    animation: loadingAnimation-9a44f23a 1s ease-in-out infinite;
+    position: absolute;
+    inset: 0px;
+    transform: translateX(-100%);
 }
-100% {
-		opacity: 0.5;
+@keyframes loadingAnimation-9a44f23a {
+to {
+        transform: translateX(100%);
 }
 }
 
@@ -13225,7 +13225,9 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --pill-btn-color: var(--bgl-white);
     --pill-btn-bg: var(--placeholder-color);
-    --bgl-selected: var(--bgl-gray-light)
+    --bgl-selected: var(--bgl-gray-light);
+    --skeleton-bg: #f0f0f0;
+    --skeleton-pulse: var(--bgl-bg);
 }
 /* TYPE */
 :root {
@@ -13244,6 +13246,8 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
     --btn-height: 40px;
     --pill-border-radius: 8px;
     --pill-height: 30px;
+    --skeleton-radius: 0.25rem;
+    --skeleton-margin: 1rem;
 }
 /* MISC */
 :root {

package/dist/utils/BagelFormUtils.d.ts

@@ -16,6 +16,7 @@ interface TextInputOptions extends InputOptions {
 interface SlctInputOptions extends InputOptions {
     searchable?: boolean;
     multiselect?: boolean;
+    onSearch?: (search: string) => any;
 }
 interface NumFieldOptions extends InputOptions {
     max?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,KAAK,EAAE,KAAK,MAAM,EAAY,MAAM,eAAe,CAAA;AAGjG,UAAU,YAAY;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,KAAK,WAAW,GAAG,YAAY,CAAA;AAE/B,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,UAAU,gBAAiB,SAAQ,YAAY;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,eAAgB,SAAQ,YAAY;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,KAAK,eAAe,GAAG,YAAY,CAAA;AAEnC,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,WAAW,GAAE,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,EAAE,IAAI,GAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAIjI;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe;;;;;;;;EAWzB;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,gBAAgB,GACxB,KAAK,CAgBP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,MAAM,EAAE,CAAC,EACrC,MAAM,CAAC,EAAE,gBAAgB,GACvB,KAAK,CAgBP;AAED,wBAAgB,UAAU,CACzB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAQP;AAED,wBAAgB,SAAS,CACxB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,WAAW,GACnB,KAAK,CAaP;AAED,wBAAgB,QAAQ,CACvB,EAAE,EAAE,MAAM,EACV,KAAK,CAAC,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,eAAe,GACvB,KAAK,CAoBP;AAED,wBAAgB,MAAM,CAAC,GAAG,QAAQ,EAAE,KAAK,EAAE;;;;EAM1C;AAED,wBAAgB,OAAO,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBrE;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,KAAK,CAO5F;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAG,KAAK,GAAG,SAAS,CASvF"}
+{"version":3,"file":"BagelFormUtils.d.ts","sourceRoot":"","sources":["../../src/utils/BagelFormUtils.ts"],"names":[],"mappings":"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"}

package/package.json

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

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

@@ -2,6 +2,7 @@
 import {
 	Btn,
 	Card,
+	Skeleton,
 	Dropdown,
 	Icon,
 	type MaterialIcons,
@@ -26,9 +27,10 @@ const props = defineProps<{
 	defaultValue?: Option
 	clearable?: boolean
 	searchPlaceholder?: string
+	onSearch?: (search: string) => Promise<Option[]>
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue']) // Add 'search' event
 
 const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
 
@@ -60,17 +62,35 @@ const selectedLabel = $computed((): string => {
 	return selectedItems.map(item => getLabel(item)).join(', ')
 })
 
-const filteredOptions = $computed(() =>	props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
-	return (
-		Boolean(option)
-		&& (searchTerm.every(s => getLabel(option).match(s))
+let serverOptions: Option[] = $ref([])
+let isSearching = $ref(false)
+
+async function runServerSearch() {
+	if (props.onSearch !== undefined) {
+		isSearching = true
+		serverOptions = await props.onSearch(search)
+		isSearching = false
+	}
+}
+
+const filteredOptions = $computed(() => {
+	if (props.onSearch !== undefined) {
+		if (isSearching) return []
+		if (search.trim().length) return serverOptions
+		return props.options
+	}
+	return props.options.filter((option) => {
+		const searchTerm = search
+			.split(/\s+/)
+			.filter(Boolean)
+			.map(t => new RegExp(t.replaceAll(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi'))
+		return (
+			Boolean(option)
+			&& (searchTerm.every(s => getLabel(option).match(s))
+			)
 		)
-	)
-}))
+	})
+})
 
 const isSelected = (option: Option) => selectedItems.find(item => getValue(option) === getValue(item)) !== undefined
 
@@ -87,7 +107,7 @@ function updateOpen(visible: boolean) {
 		if (props.searchable && !props.multiselect && selectedItemCount) search = selectedLabel as string
 		setTimeout(
 			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			350,
+			100,
 		)
 	}
 }
@@ -176,6 +196,7 @@ watch(
 )
 
 onMounted(() => {
+	console.log('mounted')
 	if (props.defaultValue !== undefined) {
 		const defaultOption = props.options.find(
 			o => getValue(o) === getValue(props.defaultValue),
@@ -193,6 +214,7 @@ onMounted(() => {
 		ref="dropdown"
 		placement="bottom-start"
 		class="bagel-input selectinput"
+		noAutoFocus
 		@hide="updateOpen(false)"
 	>
 		<template #trigger>
@@ -207,6 +229,7 @@ onMounted(() => {
 						dense
 						:placeholder="searchPlaceholder"
 						icon="search"
+						@debounce="runServerSearch"
 						@input="selected = false"
 					/>
 					<button
@@ -249,6 +272,7 @@ onMounted(() => {
 				</div>
 			</label>
 		</template>
+		<Skeleton v-if="isSearching" :count="3" width="230px" height="30px" class="mx-1 my-05" />
 		<Card
 			class="p-05"
 			:style="{ width: fullWidth ? '100%' : 'auto' }"

package/src/components/layout/Skeleton.vue

@@ -4,11 +4,15 @@ const {
 	height = '50px',
 	width = 'auto',
 	borderRadius = 'var(--skeleton-radius)',
+	round = false,
+	class: className = '',
 } = defineProps<{
-	count?: number
+	count?: number | string
 	height?: string
 	width?: string
+	round?: boolean
 	borderRadius?: string
+	class?: string
 }>()
 import { useSlots } from 'vue'
 
@@ -16,37 +20,39 @@ const slots = useSlots()
 </script>
 
 <template>
-	<template v-for="i in count" :key="i">
-		<div v-if="slots.default" class="skeleton-wrap">
+	<template v-for="i in +count" :key="i">
+		<div v-if="slots.default" class="skeleton-wrap" :class="className">
 			<slot />
 		</div>
-		<div v-else class="skeleton" :style="{ height, width, borderRadius }" />
+		<div v-else class="skeleton" :style="{ height, width, borderRadius }" :class="{ round, [className as string]: true }" />
 	</template>
 </template>
 
 <style scoped>
 .skeleton-wrap {
-	--skeleton-radius: 0.25rem;
-	--skeleton-bg: #f0f0f0;
-	--skeleton-margin: 1rem;
 	margin-bottom: var(--skeleton-margin);
 }
+
 .skeleton {
-	animation: skeleton 2s infinite;
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton::before {
+    content: "";
+    background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
+    animation: loadingAnimation 1s ease-in-out infinite;
+    position: absolute;
+    inset: 0px;
+    transform: translateX(-100%);
 }
 
-@keyframes skeleton {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.5;
-	}
+@keyframes loadingAnimation {
+    to {
+        transform: translateX(100%);
+    }
 }
 </style>

package/src/styles/theme.css

@@ -36,7 +36,9 @@
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --pill-btn-color: var(--bgl-white);
     --pill-btn-bg: var(--placeholder-color);
-    --bgl-selected: var(--bgl-gray-light)
+    --bgl-selected: var(--bgl-gray-light);
+    --skeleton-bg: #f0f0f0;
+    --skeleton-pulse: var(--bgl-bg);
 }
 
 /* TYPE */
@@ -57,6 +59,8 @@
     --btn-height: 40px;
     --pill-border-radius: 8px;
     --pill-height: 30px;
+    --skeleton-radius: 0.25rem;
+    --skeleton-margin: 1rem;
 }
 
 /* MISC */

package/src/utils/BagelFormUtils.ts

@@ -21,6 +21,7 @@ interface TextInputOptions extends InputOptions {
 interface SlctInputOptions extends InputOptions {
 	searchable?: boolean
 	multiselect?: boolean
+	onSearch?: (search: string) => any
 }
 
 interface NumFieldOptions extends InputOptions {
@@ -80,6 +81,7 @@ export function slctField(
 	label?: string,
 	options?: Option[] | (() => Option[]),
 	config?: SlctInputOptions,
+
 ): Field {
 	return {
 		$el: 'select',
@@ -94,6 +96,7 @@ export function slctField(
 			disabled: config?.disabled,
 			searchable: config?.searchable,
 			multiselect: config?.multiselect,
+			onSearch: config?.onSearch,
 		},
 	}
 }