@bagelink/vue 0.0.1004 → 0.0.1008

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

@@ -1 +1 @@
-{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAAA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAmDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UA8B/E"}
+{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAAA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAsDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAmC/E"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1004",
+  "version": "0.0.1008",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -80,7 +80,6 @@
     "access": "public"
   },
   "dependencies": {
-    "heic2any": "^0.0.4",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.9",
     "floating-vue": "^5.2.2",

package/src/components/BglVideo.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { watch } from 'vue'
+
 interface Props {
 	src?: string
 	autoplay?: boolean
@@ -6,14 +8,35 @@ interface Props {
 	aspectRatio?: string
 	controls?: boolean
 	loop?: boolean
+	status?: string
+	playsinline?: boolean
 }
 
 const props = defineProps<Props>()
 
+const videoFormat = $computed(() => props.src?.split('.').pop()?.split('?').shift()?.toLowerCase() || 'mp4')
+
 const aspectRatio = $computed(
 	() => props.aspectRatio?.replace(':', '/') || '16/9',
 )
 
+const video = $ref<HTMLVideoElement | null>()
+
+function play() {
+	video?.play()
+}
+
+function pause() {
+	video?.pause()
+}
+
+watch(() => props.status, (status) => {
+	if (status === 'play') play()
+	if (status === 'pause') pause()
+})
+
+defineExpose({ play, pause })
+
 const embedType = $computed<'YouTube' | 'Vimeo' | undefined>(() => {
 	const youtubeRegex = /youtube\.com|youtu\.be/
 	if (youtubeRegex.test(props.src || '')) return 'YouTube'
@@ -58,14 +81,16 @@ const videoUrl = $computed(() => {
 		/>
 		<video
 			v-else-if="src"
-			:src="src"
+			ref="video"
 			:autoplay="autoplay"
 			:muted="mute"
 			:loop="loop"
 			:style="{ aspectRatio }"
 			:controls="controls"
-			playsinline
-		/>
+			:playsinline="playsinline"
+		>
+			<source :src="src" :type="`video/${videoFormat}`">
+		</video>
 	</div>
 </template>
 

package/src/components/Btn.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MaterialIcons, ThemeType } from '@bagelink/vue'
 import { MaterialIcon, Loading } from '@bagelink/vue'
-import { useSlots } from 'vue'
+import { useSlots, type SetupContext } from 'vue'
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
@@ -54,7 +54,7 @@ const bind = $computed(() => {
 	}
 	return obj
 })
-const slots = useSlots()
+const slots: SetupContext["slots"] = useSlots()
 </script>
 
 <template>

package/src/components/Image.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { Skeleton, normalizeURL, normalizeDimension } from '@bagelink/vue'
+import { Skeleton, normalizeURL, normalizeDimension, appendScript } from '@bagelink/vue'
 import { watch } from 'vue'
 
+declare global {
+	interface Window {
+		heic2any: any
+	}
+}
+
 const { height, width, alt = '', src } = defineProps<{
 	src: string
 	alt?: string
@@ -35,10 +41,10 @@ async function loadImage(src: string) {
 			}
 		}
 		try {
+			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/heic2any/0.0.1/index.min.js')
 			const response = await fetch(src)
 			const blob = await response.blob()
-			const { default: heic2any } = await import('heic2any')
-			const convertedBlob = await heic2any({ blob }) as Blob
+			const convertedBlob = await window.heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
 			// Only attempt to cache if the cache API is available
 			if ('caches' in window) {
@@ -72,9 +78,8 @@ watch(() => src, loadImage, { immediate: true })
 <style scoped>
 .img-web-kit {
 	max-width: 100%;
-    vertical-align: middle;
-    border: 0;
+	vertical-align: middle;
+	border: 0;
 	width: 100%;
-
 }
 </style>

package/src/components/Modal.vue

@@ -80,8 +80,8 @@ onUnmounted(() => {
 					:style="{ float: side ? 'left' : 'right' }"
 					flat
 					icon="close"
-					@click="closeModal"
 					thin
+					@click="closeModal"
 				/>
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
 			</header>
@@ -113,6 +113,8 @@ onUnmounted(() => {
 <style>
 .modal{
 	color: var(--bgl-popup-text);
+	/* display: flex;
+	flex-direction: column; */
 }
 .modal-title {
 	text-align: center;

package/src/components/ModalForm.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import {
 	BagelForm,
-	type BglFormSchemaT,
+	type BglFormSchemaFnT,
 	Btn,
 	type BtnOptions,
 	Modal,
@@ -14,7 +14,7 @@ const props = defineProps<{
 	width?: string
 	dismissable?: boolean
 	actions?: BtnOptions[]
-	schema: BglFormSchemaT | (() => BglFormSchemaT)
+	schema: BglFormSchemaFnT<any>
 
 	onSubmit?: (formData: any) => Promise<void>
 

package/src/components/Pill.vue

@@ -86,7 +86,7 @@ const computedBackgroundColor = $computed(
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btn" class="flex h-100">
-					<Btn class="bgl_pill-btn" thin v-bind="btn" />
+					<Btn class="bgl_pill-btn" round thin v-bind="btn" />
 				</div>
 			</div>
 			<MaterialIcon v-if="icon" :icon="icon" />
@@ -98,7 +98,7 @@ const computedBackgroundColor = $computed(
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btnEnd" class="flex h-100">
-					<Btn class="bgl_pill-btn" thin v-bind="btnEnd" />
+					<Btn class="bgl_pill-btn" round thin v-bind="btnEnd" />
 				</div>
 			</div>
 		</div>

package/src/components/TableSchema.vue

@@ -5,9 +5,13 @@ import {
 	MaterialIcon,
 	isDate,
 	keyToLabel,
-	useBglSchema,
+	useBglSchema
 } from '@bagelink/vue'
-import { useVirtualList, useIntersectionObserver, until } from '@vueuse/core'
+import {
+	useVirtualList,
+	useIntersectionObserver,
+	until
+} from '@vueuse/core'
 import { computed, useSlots, watch } from 'vue'
 
 export type SortDirectionsT = 'ASC' | 'DESC'
@@ -19,7 +23,7 @@ const {
 	showFields,
 	onLastItemVisible,
 	useServerSort = false,
-	selectable = false
+	selectable = false,
 } = defineProps<{
 	data: T[]
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
@@ -36,55 +40,36 @@ const emit = defineEmits<{
 	'lastItemVisible': []
 }>()
 
-const slots = useSlots()
-const loading = defineModel('loading', { default: false })
+const NON_DIGIT_REGEX = /[^\d.-]/g
 
-const itemHeight = defineModel('itemHeight', { default: 50 })
-const computedItemHeight = $computed(() => `${itemHeight.value}px`)
-
-let sortField = $ref('')
-let sortDirection = $ref<SortDirectionsT>('ASC')
+const slots: any = useSlots()
 
+const loading = defineModel('loading', { default: false })
+const itemHeight = defineModel('itemHeight', { default: 50 })
 const selectedItems = defineModel<string[]>(
 	'selectedItems',
 	{
 		default: [] as string[],
-		set: (value: string[]) => {
-			setTimeout(updateAllSelectorState, 0)
-			return value
-		},
+		set: (value: string[]) => value,
 	}
 )
 
-const isSelectable = $computed(() => selectable === true && Array.isArray(selectedItems.value))
+let sortField = $ref('')
+let sortDirection = $ref<SortDirectionsT>('ASC')
 
-const computedSortField = $computed(() => `_transformed_${sortField}`)
+const allSelectorEl = $ref<HTMLInputElement | undefined>()
+const lastItemEl = $ref<HTMLTableRowElement | null>()
 
+const computedSelectedItems = $computed(() => selectedItems.value)
+const computedItemHeight = $computed(() => `${itemHeight.value}px`)
+const isSelectable = $computed(() => selectable === true && Array.isArray(selectedItems.value))
+const computedSortField = $computed(() => `_transformed_${sortField}`)
 const computedSchema = $computed(() => useBglSchema<T>({
 	schema,
 	showFields,
 	data,
 }))
 
-function transform(rowData: any) {
-	const obj: { [key: string]: any } = { ...rowData }
-	const schemaFields = computedSchema.filter(f => f.id)
-
-	for (const field of schemaFields) {
-		const fieldData = rowData[`${field.id}`]
-
-		const newFieldVal = field.transform?.(fieldData, rowData)
-
-		Object.assign(obj, {
-			[`${field.id}`]: fieldData,
-			[`_transformed_${field.id}`]: newFieldVal,
-		})
-	}
-	return obj
-}
-
-const NON_DIGIT_REGEX = /[^\d.-]/g
-
 const computedData = computed(() => {
 	if (!sortField || useServerSort === true) return data.map(transform)
 
@@ -122,6 +107,23 @@ const computedData = computed(() => {
 	)
 })
 
+function transform(rowData: any) {
+	const obj: { [key: string]: any } = { ...rowData }
+	const schemaFields = computedSchema.filter(f => f.id)
+
+	for (const field of schemaFields) {
+		const fieldData = rowData[`${field.id}`]
+
+		const newFieldVal = field.transform?.(fieldData, rowData)
+
+		Object.assign(obj, {
+			[`${field.id}`]: fieldData,
+			[`_transformed_${field.id}`]: newFieldVal,
+		})
+	}
+	return obj
+}
+
 function sort(fieldname: string) {
 	if (sortField === fieldname) {
 		if (sortDirection === 'ASC') sortDirection = 'DESC'
@@ -130,11 +132,9 @@ function sort(fieldname: string) {
 		sortField = fieldname
 		sortDirection = 'ASC'
 	}
-
 	emit('orderBy', `${fieldname} ${sortDirection}`.trim() as EmitOrderT)
 }
 
-// #region ? VIRTUAL LIST
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
 	computedData,
 	{
@@ -143,64 +143,53 @@ const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
 	}
 )
 
-watch(
-	() => computedData.value.length,
-	(newLength, oldLength) => {
-		if (newLength === oldLength || onLastItemVisible !== undefined) return
-		scrollTo(0)
-	}
-)
-// #endregion ? VIRTUAL LIST
-
-// #region ? SELECT COLUMN
-const allSelector = $ref<HTMLInputElement | undefined>()
-const computedSelectedItems = $computed(() => selectedItems.value)
-
 function updateAllSelectorState() {
-	if (!allSelector) return
-	const allSelected
-		= computedData.value.length === computedSelectedItems.length
+	if (!allSelectorEl) return
+	const allSelected = computedData.value.length === computedSelectedItems.length
 		&& computedData.value.every(s => s.id && computedSelectedItems.includes(s.id))
-	allSelector.checked = allSelected
-	allSelector.indeterminate = !allSelected && computedSelectedItems.length > 0
+	allSelectorEl.checked = allSelected
+	allSelectorEl.indeterminate = !allSelected && computedSelectedItems.length > 0
 }
 
 function toggleSelectItem(item: { [key: string]: any }) {
 	if (computedSelectedItems.length === 0) {
 		const obj = { ...item }
-		Object.keys(obj).forEach((key) => {
-			if (key.startsWith('_transformed_')) delete obj[key]
-		})
-
+		Object.keys(obj).forEach(key => key.startsWith('_transformed_') && delete obj[key])
 		emit('select', obj as T)
 		return
 	}
 	const index = computedSelectedItems.indexOf(item.id)
-	if (index > -1) {
-		computedSelectedItems.splice(index, 1)
-	} else {
-		computedSelectedItems.push(item.id)
-	}
+	index > -1 ? computedSelectedItems.splice(index, 1) : computedSelectedItems.push(item.id)
 }
 
 function toggleSelectAll(event: Event) {
 	const value = (event.target as HTMLInputElement).checked
 	selectedItems.value = value ? computedData.value.map((d: any) => d.id) : []
 }
-// #endregion ? SELECT COLUMN
-
-const lastItem = $ref<HTMLTableRowElement | null>()
 
 async function registerLastItemObserver() {
-	await until(() => lastItem).toBeTruthy()
+	await until(() => lastItemEl).toBeTruthy()
 
-	useIntersectionObserver(lastItem, ([entry]) => {
+	useIntersectionObserver(lastItemEl, ([entry]) => {
 		if (entry.isIntersecting && computedData.value.length) {
 			emit('lastItemVisible')
 		}
 	})
 }
 
+watch(
+	() => computedData.value.length,
+	(newLength, oldLength) => {
+		if (newLength === oldLength || onLastItemVisible !== undefined) return
+		scrollTo(0)
+	}
+)
+
+watch(
+	() => computedSelectedItems.length,
+	() => { updateAllSelectorState() }
+)
+
 watch(
 	() => loading.value,
 	(newLoadingVal, oldLoadingVal) => {
@@ -228,7 +217,7 @@ watch(
 				<thead class="row first-row">
 					<th v-if="isSelectable">
 						<input
-							ref="allSelector"
+							ref="allSelectorEl"
 							type="checkbox"
 							@click.stop
 							@change="toggleSelectAll"
@@ -292,7 +281,7 @@ watch(
 							</div>
 						</td>
 					</tr>
-					<tr v-if="onLastItemVisible !== undefined" ref="lastItem" />
+					<tr v-if="onLastItemVisible !== undefined" ref="lastItemEl" style="height: 1px;" />
 				</tbody>
 			</table>
 		</div>

package/src/components/form/BglField.vue

@@ -66,7 +66,8 @@ function setFieldData(key: string, val: any) {
 	return data
 }
 
-function getFieldData(obj: Record<string, any>, key: string) {
+function getFieldData(obj: any, key: string) {
+	if (typeof obj !== 'object' || obj === null) return obj
 	const keys = key.split(objPathRegex)
 	let result = obj
 	for (const k of keys) {

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -60,7 +60,6 @@ export function useEditor() {
 				styles.add(style)
 			}
 		})
-
 		updateListStyles(styles)
 		state.selectedStyles = styles
 	}

package/src/components/form/inputs/RichText/utils/media.ts

@@ -1,4 +1,7 @@
 import type { EditorState, Modal } from '../richTextTypes'
+import { bagelFormUtils } from '@bagelink/vue'
+
+const { frmRow, numField } = bagelFormUtils
 
 export function insertImage(modal: Modal, state: EditorState) {
 	const { range, doc } = state
@@ -9,15 +12,34 @@ export function insertImage(modal: Modal, state: EditorState) {
 		schema: [
 			{ id: 'src', $el: 'file', attrs: { bindkey: 'url' } },
 			{ id: 'alt', $el: 'text', label: 'Alt Text' },
+			frmRow(
+				numField('width', 'Width', { min: 1 }),
+				numField('height', 'Height', { min: 1 }),
+			),
+			{ id: 'figcaption', $el: 'check', label: 'Show Caption' },
 		],
-		onSubmit: (data: { src: string, alt: string }) => {
+		onSubmit: (data: Record<string, any>) => {
 			if (data.src) {
 				const img = doc.createElement('img')
-				img.src = data.src
-				img.alt = data.alt
-				// range.deleteContents()
+				Object.assign(img, {
+					src: data.src,
+					alt: data.alt || '',
+					width: data.width || undefined,
+					height: data.height || undefined
+				})
+
+				const node = data.figcaption
+					? (() => {
+						const figcaption = doc.createElement('figcaption')
+						figcaption.textContent = data.alt
+						const figure = doc.createElement('figure')
+						figure.append(img, figcaption)
+						return figure
+					})()
+					: img
+
 				range.collapse(false)
-				range.insertNode(img)
+				range.insertNode(node)
 			}
 		}
 	})

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

@@ -12,7 +12,7 @@ import {
 import { onMounted, watch } from 'vue'
 import 'floating-vue/style.css'
 
-const props = defineProps<{
+interface PropTypes {
 	options: Option[]
 	placeholder?: string
 	disabled?: boolean
@@ -28,11 +28,16 @@ const props = defineProps<{
 	clearable?: boolean
 	searchPlaceholder?: string
 	onSearch?: (search: string) => Promise<Option[]>
-}>()
+}
+
+const props = withDefaults(defineProps<PropTypes>(), {
+	searchPlaceholder: 'Search',
+	placeholder: 'Select',
+})
 
 const emit = defineEmits(['update:modelValue']) // Add 'search' event
 
-const searchPlaceholder = $computed(() => props.searchPlaceholder || 'Search')
+const searchPlaceholder = $computed(() => props.searchPlaceholder)
 
 const searchInput = $ref<HTMLElement | undefined>()
 
@@ -46,7 +51,7 @@ let selected = $ref(false)
 let open = $ref(false)
 
 const selectedLabel = $computed((): string => {
-	if (selectedItemCount === 0) return props.placeholder || 'Select'
+	if (selectedItemCount === 0) return props.placeholder
 	if (selectedItemCount > 4) {
 		const str = selectedItems
 			.slice(0, 4)

package/src/components/layout/SidebarMenu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { NavLink } from '@bagelink/vue'
-import { Btn, Card, Icon } from '@bagelink/vue'
+import { Btn, Card, Icon, useDebounceFn } from '@bagelink/vue'
 import { useSlots } from 'vue'
 
 const props = defineProps<{
@@ -14,11 +14,10 @@ const emit = defineEmits(['update:open'])
 const slots = useSlots()
 
 let isOpen = $ref(props.open)
-
-function toggleMenu() {
+const toggleMenu = useDebounceFn(() => {
 	isOpen = !isOpen
 	emit('update:open', isOpen)
-}
+})
 </script>
 
 <template>
@@ -43,7 +42,6 @@ function toggleMenu() {
 				v-tooltip.right="{
 					content: nav.label,
 					disabled: open,
-					class: ['nav-tooltip'],
 				}"
 				:to="nav.to"
 				class="nav-button px-075 me-auto w-100"

package/src/components/layout/Tabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { VNode } from 'vue'
+import type { SetupContext, VNode } from 'vue'
 import { type Tab, TabsNav } from '@bagelink/vue'
 import { defineComponent, h, useSlots } from 'vue'
 
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits(['update:modelValue'])
-const slots = useSlots()
+const slots: SetupContext["slots"] = useSlots()
 const group = Math.random().toString(36).slice(7)
 const { currentTab } = useTabs(group)
 

package/src/components/layout/TabsNav.vue

@@ -34,7 +34,9 @@ function updateIndicator() {
 	if (activeTab && tabsWrap.value) {
 		const { offsetLeft, offsetWidth } = activeTab
 		tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
-		tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+		if (tabsWrap.value) {
+			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
+		}
 	}
 }
 
@@ -75,7 +77,7 @@ onBeforeUnmount(() => {
 
 <template>
 	<div
-		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap"
+		ref="tabsWrap" class="grid auto-flow-columns relative fit-content bgl_tabs_wrap overflow-hidden"
 		:class="{ 'bgl_flat-tabs': flat, 'bgl_vertical-tabs': vertical }"
 	>
 		<button