@bagelink/vue 0.0.1135 → 0.0.1137

package/src/components/Icon/types.ts

@@ -0,0 +1,6 @@
+import type { FONT_AWESOME_ICONS, MATERIAL_ICONS } from './constants'
+
+export type FontAwesomeIcons = (typeof FONT_AWESOME_ICONS)[number]
+export type MaterialIcons = (typeof MATERIAL_ICONS)[number]
+
+export type IconType = MaterialIcons | FontAwesomeIcons

package/src/components/ListItem.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
 
 defineProps<{
 	src?: string
 	showAvatar?: boolean
 	to?: string
-	icon?: MaterialIcons
+	icon?: IconType
 	title?: string
 	subtitle?: string
 	flat?: boolean

package/src/components/NavBar.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import type { MaterialIcons, NavLink } from '@bagelink/vue'
-import { MaterialIcon } from '@bagelink/vue'
+import type { IconType, NavLink } from '@bagelink/vue'
+import { Icon } from '@bagelink/vue'
 import { onMounted } from 'vue'
 
 withDefaults(
 	defineProps<{
 		footerLinks?: NavLink[]
 		links?: NavLink[]
-		homeIcon?: MaterialIcons
+		homeIcon?: IconType
 		homeLabel?: string
 		homeTo?: string
 	}>(),
@@ -48,7 +48,7 @@ onMounted(calcIsOpen)
 			@click="toggleMenu"
 			@keypress.enter="toggleMenu"
 		>
-			<MaterialIcon icon="chevron_right" class="top-arrow" />
+			<Icon icon="chevron_right" class="top-arrow" />
 		</div>
 
 		<div class="full-nav">
@@ -62,7 +62,7 @@ onMounted(calcIsOpen)
 						:to="link.to"
 						@click="link.onClick?.()"
 					>
-						<MaterialIcon :icon="link.icon" />
+						<Icon :icon="link.icon" />
 						<div class="tooltip">
 							{{ link.label }}
 						</div>
@@ -79,7 +79,7 @@ onMounted(calcIsOpen)
 					:to="link.to"
 					@click="link.onClick?.()"
 				>
-					<MaterialIcon :icon="link.icon" />
+					<Icon :icon="link.icon" />
 					<div class="tooltip">
 						{{ link.label }}
 					</div>

package/src/components/Pill.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { MaterialIcons, ThemeType } from '@bagelink/vue'
-import { Btn, MaterialIcon } from '@bagelink/vue'
+import type { IconType, ThemeType } from '@bagelink/vue'
+import { Btn, Icon } from '@bagelink/vue'
 import { useSlots } from 'vue'
 
 interface BtnProp {
-	icon?: MaterialIcons
+	icon?: IconType
 	onClick: () => void
 	value?: string
 }
 
 const props = defineProps<{
 	disabled?: boolean
-	icon?: MaterialIcons
-	iconEnd?: MaterialIcons
+	icon?: IconType
+	iconEnd?: IconType
 	color?: ThemeType
 	theme?: ThemeType
 	flat?: boolean
@@ -90,12 +90,12 @@ const computedBackgroundColor = $computed(
 					<Btn class="bgl_pill-btn" round thin v-bind="btn" />
 				</div>
 			</div>
-			<MaterialIcon v-if="icon" :icon="icon" />
+			<Icon v-if="icon" :icon="icon" />
 			<slot />
 			<template v-if="!slots.default && (value)">
 				{{ value || modelValue }}
 			</template>
-			<MaterialIcon v-if="iconEnd" :icon="iconEnd" />
+			<Icon v-if="iconEnd" :icon="iconEnd" />
 			<div v-if="loading" class="loading" />
 			<div v-else>
 				<div v-if="btnEnd" class="flex h-100">

package/src/components/TableSchema.vue

@@ -2,8 +2,7 @@
 import type { BglFormSchemaT } from '@bagelink/vue'
 import {
 	BglComponent,
-
-	MaterialIcon,
+	Icon,
 	isDate,
 	keyToLabel,
 	useBglSchema
@@ -110,7 +109,7 @@ const computedData = computed(() => {
 
 function transform(rowData: any) {
 	const obj: { [key: string]: any } = { ...rowData }
-	const schemaFields = computedSchema.filter(f => f.id)
+	const schemaFields = computedSchema.filter((f: any) => f.id)
 
 	for (const field of schemaFields) {
 		const fieldData = rowData[`${field.id}`]
@@ -235,7 +234,7 @@ watch(
 								class="list-arrows"
 								:class="{ sorted: sortField === field.id }"
 							>
-								<MaterialIcon
+								<Icon
 									:class="{ desc: sortDirection === 'DESC' }"
 									icon="keyboard_arrow_up"
 								/>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import { Icon, Btn } from '@bagelink/vue'
 import { watch } from 'vue'
 
@@ -11,8 +11,8 @@ interface NumberInputProps {
 	max?: number
 	step?: number
 	spinner?: boolean
-	iconStart?: MaterialIcons
-	icon?: MaterialIcons
+	iconStart?: IconType
+	icon?: IconType
 	label?: string
 	placeholder?: string
 	disabled?: boolean

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import { Btn, TextInput } from '@bagelink/vue'
 
 export interface TextInputProps {
@@ -15,8 +15,8 @@ export interface TextInputProps {
 	shrink?: boolean
 	disabled?: boolean
 	nativeInputAttrs?: { [key: string]: any }
-	icon?: MaterialIcons
-	iconStart?: MaterialIcons
+	icon?: IconType
+	iconStart?: IconType
 	multiline?: boolean
 	autoheight?: boolean
 	code?: boolean

package/src/components/form/inputs/RichText/richTextTypes.d.ts

@@ -1,4 +1,4 @@
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 
 export interface Modal {
 	showModalForm: (options: {
@@ -76,6 +76,6 @@ export type ToolbarConfig = ToolbarConfigOption[]
 export interface ToolbarOption {
 	name: ToolbarConfigOption
 	label?: string
-	icon?: MaterialIcons
+	icon?: IconType
 	class?: string
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { MaterialIcons, Option } from '@bagelink/vue'
+import type { IconType, Option } from '@bagelink/vue'
 import {
 	Btn,
 	Card,
@@ -22,7 +22,7 @@ interface PropTypes {
 	label?: string
 	fullWidth?: boolean
 	multiselect?: boolean
-	icon?: MaterialIcons
+	icon?: IconType
 	hideLabel?: boolean
 	defaultValue?: Option
 	clearable?: boolean

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Btn, MaterialIcon, formatString } from '@bagelink/vue'
+import { Btn, Icon, formatString } from '@bagelink/vue'
 import { onMounted, ref } from 'vue'
 import { VueDraggableNext } from 'vue-draggable-next'
 
@@ -105,7 +105,7 @@ onMounted(() => {
 						class="flex table-row"
 					>
 						<div class="table-reorder">
-							<MaterialIcon icon="more_vert" />
+							<Icon icon="more_vert" />
 						</div>
 						<div
 							v-for="field in entityMeta?.fields"
@@ -123,7 +123,7 @@ onMounted(() => {
 						</div>
 
 						<div class="table-action">
-							<MaterialIcon
+							<Icon
 								icon="delete"
 								@click="removeRow(index)"
 							/>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { MaterialIcons } from '@bagelink/vue'
+import type { IconType } from '@bagelink/vue'
 import {
-	MaterialIcon,
+	Icon,
 	useDebounceFn
 
 } from '@bagelink/vue'
@@ -23,8 +23,8 @@ const props = withDefaults(
 		disabled?: boolean
 		type?: string
 		nativeInputAttrs?: { [key: string]: any }
-		icon?: MaterialIcons
-		iconStart?: MaterialIcons
+		icon?: IconType
+		iconStart?: IconType
 		multiline?: boolean
 		autoheight?: boolean
 		code?: boolean
@@ -125,12 +125,12 @@ onMounted(() => {
 				@focusout="onFocusout"
 			/>
 			<p v-if="helptext">{{ helptext }}</p>
-			<MaterialIcon
+			<Icon
 				v-if="iconStart"
 				class="iconStart"
 				:icon="iconStart"
 			/>
-			<MaterialIcon
+			<Icon
 				v-if="icon"
 				:icon
 			/>

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
+export { default as Icon } from './Icon/Icon.vue'
 export { default as IframeVue } from './IframeVue.vue'
 export { default as Image } from './Image.vue'
 export * from './layout'
@@ -22,8 +23,6 @@ export { default as ListItem } from './ListItem.vue'
 export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed.vue'
-export { default as MaterialIcon } from './MaterialIcon.vue'
-export { default as Icon } from './MaterialIcon.vue'
 
 export { default as Modal } from './Modal.vue'
 export { default as ModalConfirm } from './ModalConfirm.vue'

package/src/components/layout/TabsNav.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 { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useTabs } from './tabsManager'
@@ -7,7 +7,7 @@ import { useTabs } from './tabsManager'
 interface TabType {
 	id?: string
 	label?: string
-	icon?: MaterialIcons
+	icon?: IconType
 }
 
 const props = defineProps<{