@bagelink/vue 0.0.927 → 0.0.933

package/dist/utils/index.d.ts

@@ -13,10 +13,11 @@ export declare function denullify(itemData?: {
     [key: string]: any;
 }, fieldID?: string): any;
 export declare const isDate: (dateToTest: any) => boolean;
-export * as bagelFormUtils from './BagelFormUtils';
-export { useLang } from './lang';
-export { formatString } from './strings';
 export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
 export declare function sleep(ms?: number): Promise<unknown>;
 export declare function appendScript(src: string): Promise<void>;
+export * as bagelFormUtils from './BagelFormUtils';
+export { useLang } from './lang';
+export { formatString } from './strings';
+export { useDebounceFn } from '@vueuse/core';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/package.json

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

package/src/components/Card.vue

@@ -27,6 +27,7 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 <template>
 	<component
 		:is="is"
+		v-ripple="!!to"
 		:to="to"
 		class="bgl_card"
 		:class="{

package/src/components/TableSchema.vue

@@ -7,8 +7,8 @@ import {
 	keyToLabel,
 	useBglSchema,
 } from '@bagelink/vue'
-import { useVirtualList } from '@vueuse/core'
-import { computed, useSlots, watch, onMounted, onUnmounted } from 'vue'
+import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
+import { computed, useSlots, watch, onMounted } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
 export type EmitOrderT = `${string} ${SortDirectionsT}`
@@ -188,24 +188,22 @@ function toggleSelectAll(event: Event) {
 	selectedItems.value = value ? computedData.value.map((d: any) => d.id) : []
 }
 // #endregion ? SELECT COLUMN
+
 const lastItem = $ref<HTMLTableRowElement | null>()
-let observer: IntersectionObserver | undefined
 
-function registerLastItemObserver() {
-	if (onLastItemVisible === undefined) return
-	observer = new IntersectionObserver(([entry]) => {
+async function registerLastItemObserver() {
+	await until(() => lastItem).toBeTruthy()
+
+	useIntersectionObserver(lastItem, ([entry]) => {
 		if (entry.isIntersecting && computedData.value.length) {
-			void onLastItemVisible()
+			void onLastItemVisible?.()
 		}
 	})
-	if (lastItem) observer.observe(lastItem)
 }
 
 onMounted(() => {
-	registerLastItemObserver()
+	void registerLastItemObserver()
 })
-
-onUnmounted(() => { observer?.disconnect() })
 </script>
 
 <template>

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

@@ -2,7 +2,7 @@
 import {
 	MaterialIcon,
 	type MaterialIcons,
-	debounce,
+	useDebounceFn,
 } from '@bagelink/vue'
 import { onMounted, watch } from 'vue'
 
@@ -51,13 +51,14 @@ const rows = $computed(() => {
 	return 1
 })
 
-const debounceUpdate = debounce(() => { emit('debounce', inputVal) }, props.debounceDelay)
+const debounceUpdate = useDebounceFn(() => { emit('debounce', inputVal) }, props.debounceDelay)
+
 function updateInputVal() {
 	if (props.disabled) return
 
 	emit('update:modelValue', inputVal as string)
 
-	debounceUpdate()
+	void debounceUpdate()
 }
 
 watch(
@@ -94,33 +95,33 @@ onMounted(() => {
 
 			<input
 				v-if="!multiline && !autoheight && !code"
-				:id="id"
+				:id
 				ref="input"
 				v-model.trim="inputVal"
-				:title="title"
-				:autocomplete="autocomplete"
+				:title
+				:autocomplete
 				:type="type"
 				:rows="1"
 				:placeholder="placeholder || label"
 				:disabled
-				:required="required"
-				:pattern="pattern"
+				:required
+				:pattern
 				v-bind="nativeInputAttrs"
 				@focusout="onFocusout"
 				@input="updateInputVal"
 			>
 			<textarea
 				v-else
-				:id="id"
+				:id
 				ref="input"
 				v-model="inputVal"
-				:title="title"
-				:type="type"
-				:rows="rows"
+				:title
+				:type
+				:rows
 				:placeholder="placeholder || label"
 				:disabled
-				:required="required"
-				:pattern="pattern"
+				:required
+				:pattern
 				v-bind="nativeInputAttrs"
 				@input="updateInputVal"
 				@focusout="onFocusout"
@@ -133,7 +134,7 @@ onMounted(() => {
 			/>
 			<MaterialIcon
 				v-if="icon"
-				:icon="icon"
+				:icon
 			/>
 		</label>
 	</div>

package/src/plugins/ripple.ts

@@ -1,12 +1,7 @@
-import type { Directive } from 'vue'
-
-const ripple: Directive<HTMLElement> = {
-	mounted(el: HTMLElement) {
-		if (getComputedStyle(el).position === 'static') {
-			el.style.position = 'relative'
-		}
-		el.style.overflow = 'hidden'
+import type { Directive, DirectiveBinding } from 'vue'
 
+const ripple: Directive<HTMLElement, boolean> = {
+	mounted(el: HTMLElement, binding: DirectiveBinding<boolean>) {
 		const clickHandler = (e: MouseEvent) => {
 			const rect = el.getBoundingClientRect()
 			const size = Math.max(rect.width, rect.height)
@@ -27,11 +22,30 @@ const ripple: Directive<HTMLElement> = {
 			})
 
 			el.appendChild(ripple)
-			// setTimeout(() => { ripple.remove() }, 600)
+			setTimeout(() => { ripple.remove() }, 600)
 		};
 
 		(el as any).__rippleClickHandler = clickHandler
-		el.addEventListener('mousedown', clickHandler)
+
+		if (binding.value !== false) {
+			if (getComputedStyle(el).position === 'static') {
+				el.style.position = 'relative'
+			}
+			el.style.overflow = 'hidden'
+			el.addEventListener('mousedown', clickHandler)
+		}
+	},
+	updated(el: HTMLElement, binding: DirectiveBinding<boolean>) {
+		const clickHandler = (el as any).__rippleClickHandler
+		if (binding.value === false) {
+			el.removeEventListener('mousedown', clickHandler)
+		} else {
+			if (getComputedStyle(el).position === 'static') {
+				el.style.position = 'relative'
+			}
+			el.style.overflow = 'hidden'
+			el.addEventListener('mousedown', clickHandler)
+		}
 	},
 	unmounted(el: HTMLElement) {
 		const clickHandler = (el as any).__rippleClickHandler

package/src/utils/index.ts

@@ -91,12 +91,6 @@ export function denullify(itemData?: { [key: string]: any }, fieldID?: string) {
 
 export const isDate = (dateToTest: any) => !Number.isNaN(Date.parse(dateToTest))
 
-export * as bagelFormUtils from './BagelFormUtils'
-
-export { useLang } from './lang'
-
-export { formatString } from './strings'
-
 export function getFallbackSchema<T>(
 	data?: any[],
 	showFields?: string[]
@@ -132,3 +126,10 @@ export function appendScript(src: string): Promise<void> {
 		document.head.append(script)
 	})
 }
+
+export * as bagelFormUtils from './BagelFormUtils'
+
+export { useLang } from './lang'
+
+export { formatString } from './strings'
+export { useDebounceFn } from '@vueuse/core'