@bagelink/vue 0.0.1135 → 0.0.1137

package/dist/types/BtnOptions.d.ts

@@ -1,10 +1,10 @@
-import { MaterialIcons, ThemeType } from '.';
+import { IconType, ThemeType } from '.';
 export interface BtnOptions {
     onClick?: () => void;
     color?: ThemeType;
     theme?: ThemeType;
     disabled?: boolean;
-    icon?: MaterialIcons;
+    icon?: IconType;
     flat?: boolean;
     thin?: boolean;
     type?: 'button' | 'submit' | 'reset';

package/dist/types/BtnOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,GAAG,CAAA;AAEjD,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB"}
+{"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,CAAA;AAE5C,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;CAChB"}

package/dist/types/NavLink.d.ts

@@ -1,8 +1,8 @@
-import { MaterialIcons } from './materialIcons';
+import { IconType } from '..';
 export interface NavLink {
     label: string;
     to?: string;
-    icon: MaterialIcons;
+    icon: IconType;
     localized?: string;
     children?: NavLink[];
     onClick?: () => void;

package/dist/types/NavLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,MAAM,WAAW,OAAO;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,aAAa,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB"}
+{"version":3,"file":"NavLink.d.ts","sourceRoot":"","sources":["../../src/types/NavLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE7C,MAAM,WAAW,OAAO;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,QAAQ,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB"}

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
-import { MaterialIcons } from './materialIcons';
+import { IconType, MaterialIcons } from '../components/Icon/types';
 export type { ModalApi, ModalComponentProps, ModalComponentProps as ModalFormComponentProps, ModalFormOptions, ModalOptions, } from '../plugins/modal';
-export type { MaterialIcons };
+export type { IconType, MaterialIcons };
 export * from './BagelForm';
 export * from './BtnOptions';
 export type { StorageFile } from './file';
@@ -9,7 +9,7 @@ export type { Tables, TableToTypeMapping } from '../../../sdk/src/index.ts';
 export type Tab = {
     label: string;
     id: string;
-    icon?: MaterialIcons;
+    icon?: IconType;
 } | string;
 export type ThemeType = 'light' | 'white' | 'red' | 'gray' | 'gray-light' | 'black' | 'green' | 'yellow' | 'primary' | 'blue';
 export type Option = string | number | {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,QAAQ,EACR,mBAAmB,EACnB,mBAAmB,IAAI,uBAAuB,EAC9C,gBAAgB,EAChB,YAAY,GACZ,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,aAAa,CAAA;CACpB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAET,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GACtB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,QAAQ,EACR,mBAAmB,EACnB,mBAAmB,IAAI,uBAAuB,EAC9C,gBAAgB,EAChB,YAAY,GACZ,MAAM,kBAAkB,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAEvE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAA;AAEvC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAEzC,YAAY,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACxC,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CACf,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,SAAS,GACpB,OAAO,GACL,OAAO,GACP,KAAK,GACL,MAAM,GACN,YAAY,GACZ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,SAAS,GACT,MAAM,CAAA;AAET,MAAM,MAAM,MAAM,GACf,MAAM,GACN,MAAM,GACN;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GACtB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAA;AAE5C,MAAM,MAAM,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA"}

package/package.json

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

package/src/components/AccordionItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { MaterialIcon } from '@bagelink/vue'
+import { Icon } from '@bagelink/vue'
 import { inject, watch, computed } from 'vue'
 
 const props = defineProps<{
@@ -74,7 +74,7 @@ function toggle() {
 				v-if="iconPosition === 'start'"
 				class="accordion-icon" :class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
 			>
-				<MaterialIcon :icon="computedIcon" />
+				<Icon :icon="computedIcon" />
 			</span>
 
 			<slot name="head">
@@ -87,7 +87,7 @@ function toggle() {
 				v-if="iconPosition === 'end'"
 				class="accordion-icon" :class="[iconClass, { open: isOpen && iconType === 'expand_more' }]"
 			>
-				<MaterialIcon :icon="computedIcon" />
+				<Icon :icon="computedIcon" />
 			</span>
 		</button>
 		<Transition name="expand">

package/src/components/Alert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
 import Btn from './Btn.vue'
 
@@ -7,7 +7,7 @@ interface Props {
 	message: string
 	dismissable?: boolean
 	type?: 'info' | 'warning' | 'error'
-	icon?: MaterialIcons | 'none'
+	icon?: IconType | 'none'
 }
 
 withDefaults(

package/src/components/Badge.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import { Icon } from '@bagelink/vue'
 
 interface Props {
 	color?: 'green' | 'red' | 'blue' | 'light' | 'gray' | 'yellow'
 	size?: string
 	text: string
-	icon?: MaterialIcons
-	iconEnd?: MaterialIcons
+	icon?: IconType
+	iconEnd?: IconType
 }
 
 defineProps<Props>()

package/src/components/Btn.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
+import type { IconType, ThemeType } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
-import { MaterialIcon, Loading } from '@bagelink/vue'
+import { Icon, Loading } from '@bagelink/vue'
 import { useSlots } from 'vue'
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean
-		icon?: MaterialIcons
-		iconEnd?: MaterialIcons
+		icon?: IconType
+		iconEnd?: IconType
 		color?: ThemeType
 		theme?: ThemeType
 		flat?: boolean
@@ -81,12 +81,12 @@ const slots: SetupContext['slots'] = useSlots()
 	>
 		<Loading v-if="loading" class="h-100p" size="15" />
 		<div v-else class="bgl_btn-flex">
-			<MaterialIcon v-if="icon" :icon="icon" />
+			<Icon v-if="icon" :icon="icon" />
 			<slot />
 			<template v-if="!slots.default && value">
 				{{ value }}
 			</template>
-			<MaterialIcon v-if="iconEnd" :icon="iconEnd" />
+			<Icon v-if="iconEnd" :icon="iconEnd" />
 		</div>
 	</component>
 </template>

package/src/components/Carousel.vue

@@ -37,7 +37,7 @@ const THRESHOLDS = {
 const GAP_PERCENT = 1
 
 // Template refs and state
-const bglSlider = $ref<HTMLElement>()
+const bglSlider = $ref<HTMLElement | undefined>()
 const isSliderAvailable = $computed(() => !!bglSlider)
 
 let itemCount = $ref(props.items)
@@ -124,7 +124,7 @@ function animateTransform(start: number, end: number, duration: number) {
 // Navigation
 function goToSlide(index: number, isTouchNav = false) {
 	countSlides()
-	if (!isSliderAvailable || index < 0 || index >= slideCount) return
+	if (!isSliderAvailable || !bglSlider || index < 0 || index >= slideCount) return
 
 	const containerWidth = bglSlider.offsetWidth
 	const gapWidth = (containerWidth * GAP_PERCENT) / 100
@@ -161,7 +161,7 @@ function prev() {
 
 // Height management
 function calcHeight() {
-	if (!isSliderAvailable) return
+	if (!isSliderAvailable || !bglSlider) return
 	try {
 		const activeSlide = bglSlider.children[activeSlideIndex]
 		if (!activeSlide) return
@@ -180,7 +180,7 @@ function updateHeight() {
 
 // Slide management
 function countSlides() {
-	if (!isSliderAvailable) return
+	if (!isSliderAvailable || !bglSlider) return
 	slideCount = bglSlider.children.length
 }
 
@@ -192,7 +192,7 @@ function handleSlideChange() {
 }
 
 function handleResize() {
-	if (!isSliderAvailable) return
+	if (!isSliderAvailable || !bglSlider) return
 	itemCount = window.innerWidth < 600
 		? 1
 		: window.innerWidth < 991
@@ -221,7 +221,7 @@ function preventDefaultClick(e: MouseEvent) {
 
 async function disableDrag() {
 	await nextTick()
-	if (!isSliderAvailable) return
+	if (!isSliderAvailable || !bglSlider) return
 
 	const elements = Array.from(bglSlider.querySelectorAll('img, a')) as HTMLElement[]
 	elements.forEach((el) => {
@@ -250,7 +250,7 @@ function startDrag(e: MouseEvent) {
 }
 
 function onDrag(e: MouseEvent) {
-	if (!isSliderAvailable || !isPressed) return
+	if (!isSliderAvailable || !bglSlider || !isPressed) return
 
 	const x = e.pageX
 	const distance = x - startX
@@ -276,7 +276,7 @@ function endDrag() {
 	document.removeEventListener('mousemove', onDrag)
 	document.removeEventListener('mouseup', endDrag)
 
-	if (!isSliderAvailable) return
+	if (!isSliderAvailable || !bglSlider) return
 
 	const currentTransform = getCurrentTransform()
 	const singleItemWidth = bglSlider.offsetWidth / itemCount
@@ -331,7 +331,7 @@ function onTouchStart(e: TouchEvent) {
 }
 
 function onTouchMove(e: TouchEvent) {
-	if (!isSliderAvailable || !isPressed) return
+	if (!isSliderAvailable || !bglSlider || !isPressed) return
 
 	const touch = e.touches[0]
 	const x = touch.pageX
@@ -400,7 +400,7 @@ function onTouchMove(e: TouchEvent) {
 }
 
 function onTouchEnd() {
-	if (!isSliderAvailable || !isPressed || !isHorizontalScroll) {
+	if (!isSliderAvailable || !bglSlider || !isPressed || !isHorizontalScroll) {
 		isPressed = false
 		hasScrollDirectionLock = false
 		return
@@ -493,7 +493,7 @@ function onTouchEnd() {
 
 // Wheel events
 function onWheel(e: WheelEvent) {
-	if (!props.allowScroll || !isSliderAvailable || isPressed || isDragging) return
+	if (!props.allowScroll || !isSliderAvailable || !bglSlider || isPressed || isDragging) return
 
 	const isHorizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY)
 	if (!isHorizontal) return
@@ -539,7 +539,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-	if (isSliderAvailable) {
+	if (isSliderAvailable && bglSlider) {
 		Array.from(bglSlider.children).forEach((child) => {
 			const element = child as HTMLElement
 			element.removeEventListener('click', preventDefaultClick)

package/src/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import { Btn } from '@bagelink/vue'
 import { Dropdown as DDown } from 'floating-vue'
 
@@ -12,9 +12,9 @@ defineProps<{
 	thin?: boolean
 	flat?: boolean
 	disabled?: boolean
-	icon?: MaterialIcons
+	icon?: IconType
 	triggerClass?: string
-	iconEnd?: MaterialIcons
+	iconEnd?: IconType
 	border?: boolean
 	outline?: boolean
 	round?: boolean

package/src/components/Icon/Icon.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { IconType } from '@bagelink/vue'
+import { FONT_AWESOME_ICONS, MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
+
+const props = defineProps<{
+	icon?: IconType
+	name?: IconType
+	size?: number | string
+	color?: string
+	weight?: number | string
+}>()
+
+const iconRender = (props.icon || props.name) as IconType
+
+const iconRenderType = $computed(() => {
+	if (MATERIAL_ICONS.includes(iconRender)) return 'material'
+	if (FONT_AWESOME_ICONS.includes(iconRender) || FONT_AWESOME_BRANDS_ICONS.includes(iconRender)) return 'font-awesome'
+	return 'material'
+})
+
+const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender))
+</script>
+
+<template>
+	<span
+		v-if="iconRenderType === 'material'"
+		class="bgl_icon-font"
+		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
+	>
+		{{ iconRender }}
+	</span>
+	<i
+		v-else-if="iconRenderType === 'font-awesome'"
+		class="fa" :class="[`fa-${iconRender}`, { 'fa-brands': isFaBrand }]"
+		:style="{ 'fontSize': `${size}rem`, color, 'font-variation-settings': `'wght' ${weight || 400}` }"
+	/>
+</template>
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
+[dir='rtl'] .data-row .bgl_icon-font,
+[dir='rtl'] .embedded-field .bgl_icon-font,
+[dir='rtl'] .rich-text-editor .toolbar .bgl_icon-font {
+	transform: rotateY(180deg) !important;
+}
+</style>
+
+<!-- <style src="./font-awesome.css" /> -->