@bagelink/vue 0.0.1133 → 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/DatePick.vue

@@ -232,18 +232,21 @@ const timezoneDisplay = $computed(() => {
 			</div>
 
 			<template #popper>
-				<div class="calendar-container">
-					<div class="calendar-section">
-						<div class="calendar-header">
+				<div
+					class="
+			 flex gap-075 p-05 m_flex-wrap calendar-container justify-content-center h-100p"
+				>
+					<div class="calendar-section border-end m_border-none pe-05 m_p-0">
+						<div class="flex space-between pb-1">
 							<template v-if="currentView === 'days'">
 								<Btn flat icon="chevron_left" @click="previousMonth" />
-								<div class="month-year-selector">
-									<button class="month-btn" @click="currentView = 'months'">
+								<div class="flex gap-05">
+									<Btn flat class="month-btn" @click="currentView = 'months'">
 										{{ currentMonthValue.formatted.month }}
-									</button>
-									<button class="year-btn" @click="currentView = 'years'">
+									</Btn>
+									<Btn flat class="year-btn" @click="currentView = 'years'">
 										{{ currentMonthValue.formatted.year }}
-									</button>
+									</Btn>
 								</div>
 								<Btn flat icon="chevron_right" @click="nextMonth" />
 							</template>
@@ -254,8 +257,11 @@ const timezoneDisplay = $computed(() => {
 							</template>
 						</div>
 
-						<div v-if="currentView === 'days'" class="calendar-grid">
-							<div v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="day" class="weekday">
+						<div v-if="currentView === 'days'" class="calendar-grid grid gap-025">
+							<div
+								v-for="day in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="day" class=" txt-center
+							txt-12 opacity-6"
+							>
 								{{ day }}
 							</div>
 
@@ -263,7 +269,7 @@ const timezoneDisplay = $computed(() => {
 								v-for="(date, index) in currentMonthDays"
 								:key="index"
 								type="button"
-								class="day"
+								class="day aspect-ratio-1 flex align-items-center justify-content-center pointer round txt14 p-0"
 								:class="{
 									selected: isSelected(date),
 									today: isToday(date),
@@ -276,11 +282,11 @@ const timezoneDisplay = $computed(() => {
 							</button>
 						</div>
 
-						<div v-else-if="currentView === 'months'" class="month-grid">
+						<div v-else-if="currentView === 'months'" class="month-grid grid gap-05 p-05">
 							<button
 								v-for="month in months"
 								:key="month.value"
-								class="month-item"
+								class="month-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none "
 								:class="{
 									selected: month.value === currentMonthValue.month,
 									disabled: month.disabled,
@@ -292,11 +298,11 @@ const timezoneDisplay = $computed(() => {
 							</button>
 						</div>
 
-						<div v-else class="year-grid">
+						<div v-else class="year-grid grid gap-05 p-0">
 							<button
 								v-for="year in years"
 								:key="year.value"
-								class="year-item"
+								class="year-item flex align-items-center justify-content-center pointer rounded p-05 txt14 border-none"
 								:class="{
 									selected: year.value === currentMonthValue.year,
 									disabled: year.disabled,
@@ -309,8 +315,8 @@ const timezoneDisplay = $computed(() => {
 						</div>
 					</div>
 
-					<div v-if="enableTime && currentView === 'days'" class="time-picker">
-						<div class="time-input-group">
+					<div v-if="enableTime && currentView === 'days'" class="time-picker flex column gap-1 w-120px">
+						<div class="flex gap-025 ">
 							<NumberInput
 								center
 								:model-value="hours"
@@ -321,7 +327,9 @@ const timezoneDisplay = $computed(() => {
 								:padZero="2"
 								@update:model-value="handleHourInput"
 							/>
-							<span>:</span>
+							<p class="pb-075">
+								:
+							</p>
 							<NumberInput
 								center
 								:model-value="minutes"
@@ -333,7 +341,7 @@ const timezoneDisplay = $computed(() => {
 								@update:model-value="handleMinuteInput"
 							/>
 						</div>
-						<span class="timezone-display">{{ timezoneDisplay }}</span>
+						<span class="txt-center opacity-6 txt14">{{ timezoneDisplay }}</span>
 						<Btn v-if="selectedDate" flat @click="isOpen = false">
 							Done
 						</Btn>
@@ -345,209 +353,79 @@ const timezoneDisplay = $computed(() => {
 </template>
 
 <style scoped>
-.bagel-input {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-	position: relative;
-}
-
-.date-picker-container {
-	position: relative;
-}
-
-.date-input {
-	padding: 0.5rem;
-	border: 1px solid #ddd;
-	border-radius: 4px;
-	font-size: 1rem;
-	width: 100%;
-	background: white;
-}
-
-.date-input:focus {
-	outline: none;
-	border-color: #4a90e2;
-	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
-}
-
-.date-input:disabled {
-	background-color: #f5f5f5;
-	cursor: not-allowed;
-}
-
-.small .date-input {
-	padding: 0.25rem;
-	font-size: 0.875rem;
-}
-
-.required {
-	color: #ff4d4f;
-	margin-left: 4px;
+.calendar-container{
+	max-width: 90vw;
 }
-
-.calendar-popup {
-	background: white;
-	border: 1px solid #ddd;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	padding: 1rem;
-}
-
-.calendar-container {
-	display: flex;
-	gap: 1rem;
-}
-
 .calendar-section {
-	width: 300px;
-}
-
-.calendar-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 1rem;
-}
-
-.month-year-selector {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-}
-
-.month-btn,
-.year-btn {
-	background: none;
-	border: none;
-	font-weight: 500;
-	cursor: pointer;
-	padding: 0.25rem 0.5rem;
-	border-radius: 4px;
-}
-
-.month-btn:hover,
-.year-btn:hover {
-	background-color: #f5f5f5;
+	min-width: 280px;
 }
 
 .calendar-grid {
-	display: grid;
 	grid-template-columns: repeat(7, 1fr);
-	gap: 0.25rem;
 }
 
 .month-grid {
-	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(4, 1fr);
-	gap: 0.5rem;
-	padding: 0.5rem;
 }
 
 .year-grid {
-	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(7, 1fr);
-	gap: 0.5rem;
-	padding: 0.5rem;
 }
 
 .month-item,
 .year-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border: none;
 	background: none;
-	cursor: pointer;
-	border-radius: 4px;
-	font-size: 0.875rem;
-	color: #333;
-	padding: 0.5rem;
-	min-height: 2.5rem;
+	color: var(--bgl-text-color);
 }
 
 .month-item:hover:not(.disabled),
 .year-item:hover:not(.disabled) {
-	background-color: #f5f5f5;
+	background: var(--bgl-box-bg);
+	filter:var(--bgl-hover-filter);
+}
+
+.month-item:active:not(.disabled),
+.year-item:active:not(.disabled) {
+	background: var(--bgl-box-bg);
+	filter:var(--bgl-active-filter);
 }
 
 .month-item.selected,
 .year-item.selected {
-	background-color: #4a90e2;
+	background-color: var(--bgl-primary);
 	color: white;
 }
 
 .month-item.disabled,
 .year-item.disabled {
-	color: #ccc;
-	cursor: not-allowed;
-}
-
-.weekday {
-	text-align: center;
-	font-size: 0.875rem;
-	color: #666;
-	padding: 0.5rem 0;
+	opacity: 0.6;
+	filter: grayscale(0.3);
 }
 
 .day {
-	aspect-ratio: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	border: none;
 	background: none;
-	cursor: pointer;
-	border-radius: 50%;
-	font-size: 0.875rem;
-	color: #333;
-	padding: 0;
+	color: var(--bgl-text-color);
 }
 
 .day:hover:not(.disabled) {
-	background-color: #f5f5f5;
+	background-color: var(--input-bg);
 }
 
 .day.selected {
-	background-color: #4a90e2;
-	color: white;
+	background-color: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .day.today:not(.selected) {
-	border: 1px solid #4a90e2;
+	border: 1px solid var(--bgl-primary);
 }
 
 .day.disabled {
-	color: #ccc;
-	cursor: not-allowed;
-}
-
-.timezone-display {
-	color: #666;
-	font-size: 0.875rem;
-	text-align: center;
-}
-
-.time-picker {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	border-left: 1px solid #ddd;
-	width: 100px;
-	align-items: center;
-}
-
-.time-input-group {
-	display: flex;
-	align-items: center;
-	gap: 0.25rem;
-}
-
-.time-input-group span {
-	font-size: 1.25rem;
-	color: #666;
-	padding: 0 0.25rem;
+  opacity: 0.6;
+  filter: grayscale(0.3);
+  cursor: not-allowed;
 }
 </style>

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
@@ -102,7 +102,7 @@ watch(() => modelValue, (newVal) => {
 			txtInputIconStart: iconStart,
 		}"
 	>
-		<label :for="id">
+		<div :for="id">
 			{{ label }}
 			<div class="gap-025" :class="{ 'column flex': layout === 'vertical', 'flex': layout === 'horizontal' }">
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="add" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="increment" />
@@ -129,7 +129,9 @@ watch(() => modelValue, (newVal) => {
 					@keydown.up.prevent="increment"
 					@keydown.down.prevent="decrement"
 				>
-				<p v-if="helptext">{{ helptext }}</p>
+				<p v-if="helptext">
+					{{ helptext }}
+				</p>
 				<Icon
 					v-if="iconStart"
 					class="iconStart"
@@ -140,12 +142,13 @@ watch(() => modelValue, (newVal) => {
 					:icon
 				/>
 				<Btn v-if="layout && btnLayouts.includes(layout)" flat icon="remove" class="radius" :class="[{ 'bgl-big-ctrl-num-btn': layout === 'vertical' }]" tabindex="-1" @click="decrement" />
+
 				<div v-if="spinner && (!layout || !btnLayouts.includes(layout))" class="flex column spinner">
 					<Btn icon="add" flat thin class="bgl-ctrl-num-btn ctrl-add color-gray top-bgl-ctrl-num-btn" :disabled="!canAdd" tabindex="-1" @click="increment" />
 					<Btn icon="remove" flat thin class="bgl-ctrl-num-btn ctrl-remove color-gray" :disabled="!canDecrement" tabindex="-1" @click="decrement" />
 				</div>
 			</div>
-		</label>
+		</div>
 	</div>
 </template>
 

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<{