@bagelink/vue 1.0.24 → 1.0.30

package/dist/types/TableSchema.d.ts

@@ -5,7 +5,7 @@ export type EmitOrderT = `${string} ${SortDirectionsT}`;
 export interface TableSchemaProps<T extends Record<string, any> = Record<string, any>> {
     data: T[];
     schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>);
-    showFields?: string[];
+    columns?: string[];
     useServerSort?: boolean;
     selectable?: boolean;
     onLastItemVisible?: () => void;
@@ -28,7 +28,7 @@ export interface TableVirtualizationOptions<T> {
 export interface TableDataOptions<T> {
     data: Ref<T[]> | ComputedRef<T[]>;
     schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>);
-    showFields?: string[];
+    columns?: string[];
     sortField: string;
     sortDirection: SortDirectionsT;
     useServerSort?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACpF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC5C,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB"}
+{"version":3,"file":"TableSchema.d.ts","sourceRoot":"","sources":["../../src/types/TableSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAE3C,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,CAAA;AAC5C,MAAM,MAAM,UAAU,GAAG,GAAG,MAAM,IAAI,eAAe,EAAE,CAAA;AAEvD,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACpF,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,cAAc,CAAC,CAAC;IAChC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;CAC3D;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,UAAU,EAAE,OAAO,GAAG,SAAS,CAAA;IAC/B,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAA;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC5C,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,IAAI,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,CAAA;IACjC,MAAM,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,eAAe,CAAA;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAA;CACvB"}

package/dist/utils/index.d.ts

@@ -14,7 +14,7 @@ export declare function denullify(itemData?: {
     [key: string]: any;
 }, fieldID?: string): any;
 export declare const isDate: (dateToTest: any) => boolean;
-export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
+export declare function getFallbackSchema<T>(data?: any[], columns?: string[]): BglFormSchemaT<T>;
 export declare function sleep(ms?: number): Promise<unknown>;
 export declare function appendScript(src: string, options?: {
     id?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAO5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,OAAO,CAAC,EAAE,MAAM,EAAE,GAChB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAO5C;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,GAAE,GAAe,GAAG,GAAG,CAa1F"}

package/dist/utils/timeAgo.d.ts

@@ -1,5 +1,5 @@
 type AvailableTimeLanguages = 'en' | 'es' | 'fr' | 'he';
 export declare function timeAgo(date: string | Date, lang?: AvailableTimeLanguages): string;
-export declare function formatDate(date?: string | Date, format?: string): string;
+export declare function formatDate(date?: string | Date, format?: string, locale?: string): string;
 export {};
 //# sourceMappingURL=timeAgo.d.ts.map

package/dist/utils/timeAgo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAWA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAqDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AAkBD,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,GAAE,MAAmB,UAkB3E"}
+{"version":3,"file":"timeAgo.d.ts","sourceRoot":"","sources":["../../src/utils/timeAgo.ts"],"names":[],"mappings":"AAWA,KAAK,sBAAsB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAqDvD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,GAAE,MAAmB,EAAE,MAAM,CAAC,EAAE,MAAM,UAyF5F"}

package/package.json

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

package/src/components/DataPreview.vue

@@ -17,7 +17,7 @@ const {
 } = useTableData<T>({
 	data,
 	schema: props.schema,
-	showFields: props.showFields,
+	columns: props.columns,
 	useServerSort: false
 })
 

package/src/components/DataTable/DataTable.vue

@@ -38,6 +38,9 @@ const selectedItems = defineModel<string[]>(
 )
 
 const data = computed(() => props.data)
+const schema = computed(() => props.schema)
+const columns = computed(() => props.columns)
+const useServerSort = computed(() => props.useServerSort)
 
 const {
 	computedSchema,
@@ -45,15 +48,9 @@ const {
 	sortField,
 	sortDirection,
 	toggleSort
-} = useTableData<T>({
-	data,
-	schema: props.schema,
-	showFields: props.showFields,
-	useServerSort: props.useServerSort,
-	onSort: (field, direction) => {
-		emit('orderBy', `${field} ${direction}`.trim() as EmitOrderT)
-	}
-})
+} = useTableData<T>({ data, schema, columns, useServerSort, onSort: (field, direction) => {
+	emit('orderBy', `${field} ${direction}`.trim() as EmitOrderT)
+} })
 
 const {
 	computedSelectedItems,

package/src/components/DataTable/tableTypes.ts

@@ -6,12 +6,21 @@ export type EmitOrderT = `${string} ${SortDirectionsT}`
 export interface TableSchemaProps<T extends Record<string, any> = Record<string, any>> {
 	data: T[]
 	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	showFields?: string[]
+	columns?: string[]
 	useServerSort?: boolean
 	selectable?: boolean
 	onLastItemVisible?: () => void
 }
 
+export interface TableDataOptions<T> {
+	data: T[]
+	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
+	columns?: string[]
+	sortField: string
+	sortDirection: SortDirectionsT
+	useServerSort?: boolean
+}
+
 export interface SortingOptions<T> {
 	onSort: (field: string, direction: SortDirectionsT) => void
 }
@@ -27,12 +36,3 @@ export interface TableVirtualizationOptions<T> {
 	itemHeight: number
 	onLastItemVisible?: () => void
 }
-
-export interface TableDataOptions<T> {
-	data: T[]
-	schema?: BglFormSchemaT<T> | (() => BglFormSchemaT<T>)
-	showFields?: string[]
-	sortField: string
-	sortDirection: SortDirectionsT
-	useServerSort?: boolean
-}

package/src/components/DataTable/useTableData.ts

@@ -1,6 +1,7 @@
+import type { ComputedRef } from 'vue'
 import type { TableDataOptions, SortDirectionsT } from '../../types/TableSchema'
 import { useBglSchema, isDate } from '@bagelink/vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 const NON_DIGIT_REGEX = /[^\d.-]/g
 
@@ -10,7 +11,12 @@ const SLOT_VALUE_COMPONENTS = new Set(['div', 'span', 'p'])
 // Components that should receive their value as src attribute
 const SRC_VALUE_COMPONENTS = new Set(['img', 'iframe'])
 
-export interface UseTableDataOptions<T> extends Omit<TableDataOptions<T>, 'sortField' | 'sortDirection'> {
+// Extend the base options interface to include computed refs
+export interface UseTableDataOptions<T> {
+	data: TableDataOptions<T>['data']
+	schema?: ComputedRef<TableDataOptions<T>['schema']> | TableDataOptions<T>['schema']
+	columns?: ComputedRef<string[] | undefined> | string[]
+	useServerSort?: ComputedRef<boolean | undefined> | boolean | undefined
 	onSort?: (field: string, direction: SortDirectionsT) => void
 }
 
@@ -24,17 +30,24 @@ interface TransformedDataBase {
 type TransformedData<T> = T & TransformedDataBase
 
 export function useTableData<T extends Record<string, any>>(options: UseTableDataOptions<T>) {
-	// Create reactive reference to data prop
-
 	// Sorting state
 	const sortField = ref('')
 	const sortDirection = ref<SortDirectionsT>('ASC')
+	// Helper function to get the value from a possibly computed ref
+	function getValue<V>(value: ComputedRef<V> | V): V {
+		return (value as ComputedRef<V>).value !== undefined
+			? (value as ComputedRef<V>).value
+			: value as V
+	}
 
-	const computedSchema = computed(() => useBglSchema<T>({
-		schema: options.schema,
-		showFields: options.showFields,
-		data: options.data.value,
-	}))
+	// Create a computed property for the schema that will react to changes in options.columns
+	const computedSchema = computed(() => {
+		return useBglSchema<T>({
+			schema: getValue(options.schema),
+			columns: getValue(options.columns),
+			data: options.data.value,
+		})
+	})
 
 	function transform(rowData: T): TransformedData<T> {
 		const transformed = { ...rowData } as TransformedData<T>
@@ -73,7 +86,9 @@ export function useTableData<T extends Record<string, any>>(options: UseTableDat
 
 	const computedData = computed(() => {
 		const currentData = options.data.value
-		if (!sortField.value || options.useServerSort === true) {
+		const useServerSortValue = getValue(options.useServerSort)
+
+		if (!sortField.value || useServerSortValue === true) {
 			return currentData.map(transform)
 		}
 

package/src/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { IconType } from '@bagelink/vue'
+import type { IconType, ThemeType } from '@bagelink/vue'
 import type { TriggerEvent } from 'floating-vue'
 import { Btn } from '@bagelink/vue'
 import { Dropdown as DDown } from 'floating-vue'
@@ -29,6 +29,7 @@ const {
 	flat?: boolean
 	disabled?: boolean
 	icon?: IconType
+	color?: ThemeType
 	triggerClass?: string
 	iconEnd?: IconType
 	border?: boolean
@@ -111,6 +112,7 @@ defineExpose({ show, hide, shown })
 				:flat="flat"
 				:outline="outline"
 				:round="round"
+				:color="color"
 			/>
 		</slot>
 		<template #popper="{ hide, show }">

package/src/components/Icon/Icon.vue

@@ -46,7 +46,7 @@ const isFaBrand = $computed(() => FONT_AWESOME_BRANDS_ICONS.includes(iconRender)
 }
 </style>
 
-<style scoped>
+<style>
 .bgl_icon-font {
 	font-family: 'Material Symbols Outlined', serif !important;
 }

package/src/components/Modal.vue

@@ -88,7 +88,7 @@ onUnmounted(() => {
 				<Title v-if="title" class="modal-title" tag="h3" :label="title" />
 			</header>
 
-			<div v-else class="sticky bg-popup z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
+			<div v-else class="sticky z-index-999 -mt-1 -ms-1 px-025 h-30px pt-025 modal-no-title">
 				<Btn
 					class="position-start"
 					icon="close"

package/src/components/Spreadsheet/Index.vue

@@ -702,6 +702,7 @@ const columnOptions = computed(() => {
 							v-for="col in columnOptions"
 							:key="col.key"
 							v-model="visibleColumns"
+							@update:modelValue="val => undefined"
 							:value="col.key"
 							:label="col.label || col.key"
 						/>

package/src/components/form/BagelForm.vue

@@ -9,13 +9,15 @@ export interface BagelFormProps<_T> {
 	modelValue?: _T
 	schema?: BglFormSchemaFnT<_T>
 	tag?: 'form' | 'template'
+	class?: string
 	onSubmit?: (data: _T) => Promise<void> | void
 }
 
 const props = withDefaults(defineProps<BagelFormProps<T>>(), {
 	modelValue: undefined,
 	schema: undefined,
-	tag: 'form'
+	tag: 'form',
+	class: ''
 })
 
 const emit = defineEmits<{
@@ -132,7 +134,7 @@ defineExpose({ form, isDirty, validateForm })
 
 <template>
 	<template v-if="formState !== 'success' || !$slots.success">
-		<form v-if="props.tag === 'form'" ref="form" @submit.prevent="handleSubmit">
+		<form v-if="props.tag === 'form'" ref="form" :class="props.class" @submit.prevent="handleSubmit">
 			<template v-if="resolvedSchema">
 				<template v-for="field in (resolvedSchema as Field[])" :key="field.id">
 					<component :is="renderSchemaField(field)" />
@@ -143,7 +145,7 @@ defineExpose({ form, isDirty, validateForm })
 		</form>
 		<template v-else>
 			<template v-for="field in (resolvedSchema as Field[])" :key="field.id">
-				<component :is="renderSchemaField(field)" />
+				<component :is="renderSchemaField(field)" :class="props.class" />
 			</template>
 		</template>
 	</template>

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

@@ -1,22 +1,22 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends boolean | undefined | any[]">
 import { onMounted } from 'vue'
 
-const props = withDefaults(defineProps<{
+const { defaultValue = false, id } = defineProps<{
 	label?: string
 	id?: string
 	title?: string
 	small?: boolean
 	required?: boolean
-	defaultValue?: boolean
+	defaultValue?: T
 	value?: any
-}>(), { defaultValue: false })
+}>()
 
-const inputId = $computed(() => props.id || Math.random().toString(36).slice(7))
+const inputId = $computed(() => id || Math.random().toString(36).slice(7))
 
-const checked = defineModel<boolean | undefined | any[]>('modelValue', { default: undefined })
+const checked = defineModel<T>('modelValue', { default: undefined })
 
 onMounted(() => {
-	if (checked.value === undefined) checked.value = props.defaultValue
+	if (checked.value === undefined) checked.value = defaultValue as T
 })
 </script>
 

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Btn } from '@bagelink/vue'
 import { watch } from 'vue'
 
 const props = withDefaults(
@@ -26,13 +27,40 @@ watch(
 </script>
 
 <template>
-	<div class="bagel-input" :class="{ small }" :title="label">
+	<div class="bagel-input  " :class="{ small }" :title="label">
 		<label>
 			{{ label }}
-			<input
-				:id="id" v-model="inputVal" type="color" :placeholder="placeholder || label"
-				:class="{ 'no-edit': !editMode }" :required="required" v-bind="nativeInputAttrs"
-			>
+			<div class="flex bg-input rounded px-025 colorInputPickWrap">
+				<input
+					:id="id"
+					v-model="inputVal" class="border" type="color" :placeholder="placeholder || label"
+					:class="{ 'no-edit': !editMode, 'opacity-1': !inputVal }" :required="required" v-bind="nativeInputAttrs"
+				>
+				<input
+					v-model="inputVal"
+					class="flex-grow-4 border colorInputPick"
+					style="width: 50px"
+					type="text"
+					placeholder="Enter color"
+				>
+				<Btn :class="{ 'not-allowed opacity-3': !inputVal }" round flat thin icon="clear" @click="inputVal = ''" />
+			</div>
 		</label>
 	</div>
 </template>
+
+<style>
+.colorInputPick{
+    --input-font-size: 12px;
+	height: calc(var(--input-height) - 9px) !important;
+	background: transparent !important;
+}
+.colorInputPick:focus{
+	outline: none;
+	box-shadow: none !important;
+}
+.colorInputPickWrap:focus-within {
+	box-shadow: inset 0 0 10px #00000021;
+	outline-color: var(--input-bg);
+}
+</style>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { modeType } from '../../Calendar/typings/types'
-import { Btn, NumberInput, Dropdown, TextInput } from '@bagelink/vue'
+import { Btn, NumberInput, Dropdown, TextInput, formatDate } from '@bagelink/vue'
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
@@ -20,6 +20,7 @@ const props = withDefaults(
 		max?: string | Date
 		timezone?: string
 		mode?: modeType
+		defaultValue?: string | Date
 		firstDayOfWeek?: WEEK_START_DAY
 		locale?: string
 		center?: boolean
@@ -49,28 +50,7 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 function useFormatting() {
 	const formatDisplayDate = (date: Date | string | undefined): string => {
 		if (!date) return ''
-		const dateObj = typeof date === 'string' ? new Date(date) : date
-
-		const options: Intl.DateTimeFormatOptions = {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-			...(props.enableTime && {
-				hour: '2-digit',
-				minute: '2-digit',
-			}),
-			timeZone: props.timezone
-		}
-
-		return dateObj.toLocaleString(props.locale || undefined, options)
-	}
-
-	const formatDate = (date: Date | string | undefined): string => {
-		if (!date) return ''
-		const dateObj = typeof date === 'string' ? new Date(date) : date
-		return props.enableTime
-			? dateObj.toISOString().slice(0, 16)
-			: dateObj.toISOString().split('T')[0]
+		return formatDate(date, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy')
 	}
 
 	const parseUserInput = (input: string): Date | null => {
@@ -97,7 +77,7 @@ function useFormatting() {
 
 	return {
 		formatDisplayDate,
-		formatDate,
+
 		parseUserInput
 	}
 }
@@ -131,14 +111,15 @@ function useDateValidation() {
 
 // Date state composable
 function useDateState() {
-	const { formatDisplayDate, formatDate } = useFormatting()
+	const { formatDisplayDate } = useFormatting()
 
 	const formattedDisplayValue = computed(() => formatDisplayDate(props.modelValue))
-	const formattedMin = computed(() => formatDate(props.min))
-	const formattedMax = computed(() => formatDate(props.max))
+	const formattedMin = computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
+	const formattedMax = computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
 	const selectedDate = computed(() => {
-		if (!props.modelValue) return null
-		return typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
+		const value = props.modelValue || props.defaultValue
+		if (!value) return null
+		return typeof value === 'string' ? new Date(value) : value
 	})
 
 	return {
@@ -381,11 +362,9 @@ const { hours, minutes, handleHourInput, handleMinuteInput, timezoneDisplay } =
 function selectDate(date: Date | null) {
 	if (!date || !props.editMode) return
 
-	// Create date in the target timezone
-	const tzOffset = new Date().getTimezoneOffset()
-	const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
-
 	if (props.enableTime) {
+		// Create date in the target timezone
+		const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
 		const currentHours = selectedDate.value?.getHours() ?? new Date().getHours()
 		const currentMinutes = selectedDate.value?.getMinutes() ?? new Date().getMinutes()
 		newDate.setHours(currentHours)
@@ -393,11 +372,13 @@ function selectDate(date: Date | null) {
 
 		// Adjust for timezone when time is enabled
 		if (props.timezone === 'UTC') {
+			const tzOffset = new Date().getTimezoneOffset()
 			newDate.setMinutes(newDate.getMinutes() + tzOffset)
 		}
 		emit('update:modelValue', newDate.toISOString())
 	} else {
 		// For date-only selection, ensure we're working with UTC midnight
+		// This ensures the date displayed matches the date selected regardless of timezone
 		const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
 		emit('update:modelValue', utcDate.toISOString().split('T')[0])
 		isOpen.value = false

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { modeType } from '../../Calendar/typings/types'
-import { Btn, NumberInput, Dropdown } from '@bagelink/vue'
+import { Btn, NumberInput, Dropdown, formatDate } from '@bagelink/vue'
 import Time, { WEEK_START_DAY } from '../../Calendar/helpers/Time'
 
 const props = withDefaults(
@@ -41,36 +41,19 @@ const time = new Time(props.firstDayOfWeek, props.locale)
 
 function formatDisplayDate(date: Date | string | undefined): string {
 	if (!date) return ''
-	const dateObj = typeof date === 'string' ? new Date(date) : date
-
-	if (props.enableTime) {
-		return dateObj.toLocaleString(props.locale || undefined, {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit',
-			timeZone: props.timezone
-		})
-	}
-
-	return dateObj.toLocaleString(props.locale || undefined, {
-		year: 'numeric',
-		month: 'short',
-		day: 'numeric',
-		timeZone: props.timezone
-	})
+	console.log('date', date)
+	return formatDate(date, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy', props.locale)
 }
 
-function formatDate(date: Date | string | undefined): string {
-	if (!date) return ''
-	const dateObj = typeof date === 'string' ? new Date(date) : date
-	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
-}
+// function formatDate(date: Date | string | undefined): string {
+// 	if (!date) return ''
+// 	const dateObj = typeof date === 'string' ? new Date(date) : date
+// 	return props.enableTime ? dateObj.toISOString().slice(0, 16) : dateObj.toISOString().split('T')[0]
+// }
 
 const formattedDisplayValue = $computed(() => formatDisplayDate(props.modelValue))
-const formattedMin = $computed(() => formatDate(props.min))
-const formattedMax = $computed(() => formatDate(props.max))
+const formattedMin = $computed(() => formatDate(props.min, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
+const formattedMax = $computed(() => formatDate(props.max, props.enableTime ? 'dd.mm.yy HH:MM' : 'dd.mm.yy'))
 
 const selectedDate = $computed(() => {
 	if (!props.modelValue) return null

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

@@ -14,7 +14,7 @@ interface NumberInputProps {
 	iconStart?: IconType
 	icon?: IconType
 	label?: string
-	defaultValue?: number
+	defaultValue?: number | string
 	placeholder?: string
 	disabled?: boolean
 	required?: boolean

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

@@ -37,8 +37,7 @@ const props = withDefaults(
 const password = defineModel<string>('modelValue')
 const showPwd = defineModel<boolean>('showPwd', { default: false })
 
-const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility'
-)
+const toggleShowPwdIcon = $computed(() => showPwd.value ? 'visibility_off' : 'visibility')
 const inputType = $computed(() => (showPwd.value ? 'text' : 'password'))
 </script>
 

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { IconType, Option } from '@bagelink/vue'
+import type { AlignedPlacement } from '../../Dropdown.vue'
 import {
 	Btn,
 	Card,
@@ -26,12 +27,14 @@ interface PropTypes {
 	hideLabel?: boolean
 	defaultValue?: Option
 	clearable?: boolean
+	placement?: AlignedPlacement
 	searchPlaceholder?: string
 	onSearch?: (search: string) => Promise<Option[]>
 }
 
 const props = withDefaults(defineProps<PropTypes>(), {
 	placeholder: 'Select',
+	placement: 'bottom-start',
 })
 
 const emit = defineEmits(['update:modelValue']) // Add 'search' event
@@ -229,7 +232,7 @@ onMounted(() => {
 	<Dropdown
 		ref="dropdown"
 		v-model:shown="open"
-		placement="bottom-start"
+		:placement="placement"
 		class="bagel-input selectinput"
 		no-auto-focus
 	>

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

@@ -396,7 +396,7 @@ onMounted(initializeCountry)
 								v-for="(pb, index) in sortedCountries"
 								:key="pb.iso2 + isPreferred(pb)"
 								role="option"
-								class="flex gap-075"
+								class="flex gap-075 pointer hover"
 								tabindex="-1"
 								:aria-selected="activeCountryCode === pb.iso2 && !isPreferred(pb)
 								"
@@ -425,7 +425,6 @@ onMounted(initializeCountry)
 					:disabled="disabled"
 					type="tel"
 					:autocomplete="autocomplete"
-					class="vti__input"
 					:pattern="computedInputOptions.pattern"
 					:minlength="computedInputOptions.minlength"
 					:maxlength="computedInputOptions.maxlength"

package/src/components/layout/TabsNav.vue

@@ -31,14 +31,15 @@ const tabsWrap = ref<HTMLElement | undefined>(undefined)
 const tabs = ref<HTMLElement[]>([])
 
 function updateIndicator() {
-	const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
-	if (activeTab && tabsWrap.value) {
-		const { offsetLeft, offsetWidth } = activeTab
-		tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
-		if (tabsWrap.value) {
+	nextTick(() => {
+		if (!tabsWrap.value) return
+		const activeTab = tabs.value.find(tab => tab.classList.contains('active'))
+		if (activeTab) {
+			const { offsetLeft, offsetWidth } = activeTab
+			tabsWrap.value.style.setProperty('--indicator-left', `${offsetLeft}px`)
 			tabsWrap.value.style.setProperty('--indicator-width', `${offsetWidth}px`)
 		}
-	}
+	})
 }
 
 function selectTab(tab: TabType | string) {
@@ -71,6 +72,14 @@ onMounted(() => {
 	updateIndicator()
 	window.addEventListener('resize', updateIndicator)
 })
+
+watch(
+	() => tabs.value,
+	() => {
+		nextTick(() => { updateIndicator() })
+	},
+	{ deep: true }
+)
 onBeforeUnmount(() => {
 	window.removeEventListener('resize', updateIndicator)
 })