@bagelink/vue 0.0.1133 → 0.0.1137

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" /> -->