@bagelink/vue 0.0.769 → 0.0.773

package/src/components/Pill.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { Btn, MaterialIcon } from '@bagelink/vue'
+import { useSlots } from 'vue'
+import type { MaterialIcons, ThemeType } from '@bagelink/vue'
+
+const props = withDefaults(
+	defineProps<{
+		disabled?: boolean
+		icon?: MaterialIcons
+		iconEnd?: MaterialIcons
+		color?: ThemeType
+		theme?: ThemeType
+		flat?: boolean
+		border?: boolean
+		outline?: boolean
+		loading?: boolean
+		value?: string
+		round?: boolean
+		btnStart?: boolean
+		btnEnd?: boolean
+
+	}>(),
+	{
+		onClick: () => '',
+		loading: false,
+		round: false,
+		disabled: false,
+		border: false,
+		outline: false,
+		btnStart: true
+	},
+)
+
+const slots = useSlots()
+
+const computedTheme = $computed(
+	() => {
+		if (props.disabled) return 'gray-light'
+		return (props.color || props.theme)
+	},
+)
+
+const computedDefaultColors = $computed(
+	() => ({
+		backgroundColor: 'var(--bgl-primary)',
+		color: props.flat ? 'var(--bgl-text-color)' : 'var(--bgl-light-text)',
+	}),
+)
+
+function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
+	return {
+		...computedDefaultColors,
+		...theme,
+		color: props.flat
+			? theme.backgroundColor as string
+			: theme.color as string,
+	}
+}
+
+const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
+	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
+	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
+	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
+	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
+	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
+	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
+	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
+	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
+	'blue': getThemeColors({}),
+}
+
+const cumputedTextColor = $computed(
+	() => (themes[computedTheme as ThemeType]?.color ?? computedDefaultColors.color),
+)
+
+const computedBackgroundColor = $computed(
+	() => (themes[computedTheme as ThemeType]?.backgroundColor ?? computedDefaultColors.backgroundColor),
+)
+</script>
+
+<template>
+	<div
+		:disabled="disabled" :class="{
+			'bgl_pill': !icon || slots.default || value,
+			round,
+			'bgl_flatPill': flat,
+			'bgl_pill-border': border || outline,
+		}"
+	>
+		<div class="bgl_pill-flex">
+			<div v-if="loading" class="loading" />
+			<div v-else>
+				<div v-if="btnStart" class="flex h-100">
+					<Btn class="bgl_pill-btn " thin icon="close" />
+				</div>
+			</div>
+			<MaterialIcon v-if="icon" :icon="icon" />
+			<slot />
+			<template v-if="!slots.default && value">
+				{{ value }}
+			</template>
+			<MaterialIcon v-if="props.iconEnd" :icon="props.iconEnd" />
+			<div v-if="loading" class="loading" />
+			<div v-else>
+				<div v-if="props.btnEnd" class="flex h-100">
+					<Btn class="bgl_pill-btn" thin icon="close" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.bgl_pill-btn{
+	color: var(--pill-btn-color);
+	background: var(--pill-btn-bg);
+	width: calc(var(--pill-height) / 1.25)!important;
+	height: calc(var(--pill-height) / 1.25)!important;
+}
+.loading {
+  border: 1px solid var(--bgl-light-text);
+  border-bottom: 2px solid var(--bgl-light-text);
+  animation: spin 1s linear infinite;
+  border-radius: 100px;
+  width: 1rem;
+  height: 1rem;
+  margin: auto;
+}
+.bgl_flatPill .loading {
+	border-bottom: 2px solid var(--bgl-text-color);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.bgl_pill {
+  padding-inline: 0.25rem;
+  transition: var(--bgl-transition);
+  background-color: v-bind(computedBackgroundColor);
+  color: v-bind(cumputedTextColor);
+  display: inline-block;
+  margin-inline-end: 0.25rem;
+  border-radius: var(--pill-border-radius);
+  height: var(--pill-height);
+  vertical-align: middle;
+  margin-bottom: 0.25rem;
+}
+
+.bgl_pill[disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.bgl_pill-flex {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  justify-content: center;
+  height: 100%;
+}
+.bgl_pill.bgl_flatPill {
+  background: transparent;
+}
+
+.bgl_pill.round {
+  border-radius: 1000px;
+}
+
+.bgl_pill-border {
+  outline: 1px solid v-bind(computedBackgroundColor);
+  color: v-bind(computedBackgroundColor);
+  background: transparent;
+}
+</style>

package/src/components/TableSchema.vue

@@ -17,12 +17,14 @@ const {
 	data,
 	schema,
 	showFields,
-	// useServerSort = false
+	useServerSort = false,
+	disableSelect = false
 } = defineProps<{
 	data: T[]
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
 	showFields?: string[]
-	// useServerSort?: boolean
+	useServerSort?: boolean
+	disableSelect?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -40,18 +42,18 @@ const computedItemHiehgt = $computed(() => `${itemHeight.value}px`)
 let sortField = $ref('')
 let sortDirection = $ref<SortDirectionsT>('ASC')
 
-const selectedItems = defineModel<T[]>(
+const selectedItems = defineModel<string[]>(
 	'selectedItems',
 	{
-		default: () => [] as T[],
-		set: (value: T[]) => {
+		default: [] as string[],
+		set: (value: string[]) => {
 			setTimeout(updateAllSelectorState, 0)
 			return value
 		},
 	}
 )
 
-const isSelectable = $computed(() => Array.isArray(selectedItems.value))
+const isSelectable = $computed(() => disableSelect === false && Array.isArray(selectedItems.value))
 
 const computedSortField = $computed(() => `_transformed_${sortField}`)
 
@@ -79,37 +81,40 @@ function transform(rowData: any) {
 }
 
 const computedData = computed(() => {
-	// const dta = [...data].map(transform)
-	const dta = data.map(transform)
-	if (sortField as string) {
-		return dta.sort((a, b) => {
-			let aValue = a[computedSortField] ?? a[sortField] ?? ''
-			let bValue = b[computedSortField] ?? b[sortField] ?? ''
-
-			if (isDate(aValue) && isDate(bValue)) {
-				// ? now we can sort by as number
-				aValue = new Date(aValue).getTime()
-				bValue = new Date(bValue).getTime()
-			}
-
-			const numAValue = Number.parseInt(`${aValue}`.replace(/[^\d.-]/g, ''), 10)
-			const numBValue = Number.parseInt(`${bValue}`.replace(/[^\d.-]/g, ''), 10)
-
-			if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
-				if (sortDirection === 'ASC') return numAValue - numBValue
-				return numBValue - numAValue
-			}
-
-			if (typeof aValue === 'string') {
-				if (sortDirection === 'ASC') return aValue.localeCompare(bValue)
-				return bValue.localeCompare(aValue)
-			}
-
-			if (sortDirection === 'ASC') return aValue < bValue ? -1 : 1
-			return aValue < bValue ? 1 : -1
-		})
-	}
-	return dta
+	if (!sortField || useServerSort === true) return data.map(transform)
+
+	return (
+		data
+			.map(transform)
+			.sort(
+				(a, z) => {
+					let aValue = a[computedSortField] ?? a[sortField] ?? ''
+					let bValue = z[computedSortField] ?? z[sortField] ?? ''
+
+					if (isDate(aValue) && isDate(bValue)) {
+					// ? now we can sort by as number
+						aValue = new Date(aValue).getTime()
+						bValue = new Date(bValue).getTime()
+					}
+
+					const numAValue = Number.parseInt(`${aValue}`.replace(/[^\d.-]/g, ''), 10)
+					const numBValue = Number.parseInt(`${bValue}`.replace(/[^\d.-]/g, ''), 10)
+
+					if (!Number.isNaN(numAValue) && !Number.isNaN(numBValue)) {
+						if (sortDirection === 'ASC') return numAValue - numBValue
+						return numBValue - numAValue
+					}
+
+					if (typeof aValue === 'string') {
+						if (sortDirection === 'ASC') return aValue.localeCompare(bValue)
+						return bValue.localeCompare(aValue)
+					}
+
+					if (sortDirection === 'ASC') return aValue < bValue ? -1 : 1
+					return aValue < bValue ? 1 : -1
+				}
+			)
+	)
 })
 
 function sort(fieldname: string) {
@@ -150,7 +155,7 @@ function updateAllSelectorState() {
 	if (!allSelector) return
 	const allSelected
 		= computedData.value.length === computedSelectedItems.length
-		&& computedData.value.every((s: any) => computedSelectedItems.includes(s.id))
+		&& computedData.value.every(s => computedSelectedItems.includes(s.id))
 	allSelector.checked = allSelected
 	allSelector.indeterminate = !allSelected && computedSelectedItems.length > 0
 }

package/src/components/index.ts

@@ -25,8 +25,9 @@ export { default as ModalConfirm } from './ModalConfirm.vue'
 export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
-export { default as RouterWrapper } from './RouterWrapper.vue'
+export { default as Pill } from './Pill.vue'
 
+export { default as RouterWrapper } from './RouterWrapper.vue'
 export { default as TableSchema } from './TableSchema.vue'
 export { default as Title } from './Title.vue'
 export { default as TopBar } from './TopBar.vue'

package/src/styles/layout.css

@@ -22,6 +22,10 @@
     border-radius: var(--btn-border-radius) !important;
 }
 
+.rounded-thin {
+    border-radius: calc(var(--btn-border-radius) / 1.5) !important;
+}
+
 .radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }
@@ -1841,6 +1845,10 @@
     height: 30vh;
 }
 
+.h-28px {
+    height: 28px;
+}
+
 .h-30px {
     height: 30px;
 }

package/src/styles/mobilLayout.css

@@ -44,6 +44,10 @@
         border-radius: var(--btn-border-radius) !important;
     }
 
+    .m_rounded-thin {
+        border-radius: calc(var(--btn-border-radius) / 1.5) !important;
+    }
+
     .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
@@ -1466,6 +1470,10 @@
         height: 30vh;
     }
 
+    .m_h-28px {
+        height: 28px;
+    }
+
     .m_h-30px {
         height: 30px;
     }

package/src/styles/theme.css

@@ -34,6 +34,8 @@
     --bgl-selection-bg: var(--bgl-blue-dark);
     --bgl-selection-color: var(--bgl-white);
     --bgl-scrollbar-thumb: var(--bgl-gray);
+    --pill-btn-color: var(--bgl-white);
+    --pill-btn-bg: var(--placeholder-color)
 }
 
 /* TYPE */
@@ -52,6 +54,8 @@
     --btn-border-radius: 10px;
     --btn-padding: 30px;
     --btn-height: 40px;
+    --pill-border-radius: 8px;
+    --pill-height: 30px;
 }
 
 /* MISC */

package/src/utils/index.ts

@@ -3,7 +3,6 @@ import type { Attributes, BglFormSchemaT } from '@bagelink/vue'
 export function debounce<T extends (...args: any[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void {
 	let timeoutId: ReturnType<typeof setTimeout> | undefined
 
-
 	return function (...args: Parameters<T>) {
 		if (timeoutId) {
 			clearTimeout(timeoutId)