@bagelink/vue 1.2.43 → 1.2.48

package/dist/style.css

@@ -2367,18 +2367,18 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	height: 30px;
 }
 
-.bagel-input.bgl-toggle[data-v-ebe691ee]{
+.bagel-input.bgl-toggle[data-v-c5e45931]{
     display: unset !important;
 }
-.bagel-input.bgl-toggle[data-v-ebe691ee] *{
+.bagel-input.bgl-toggle[data-v-c5e45931] *{
   cursor: pointer !important;
 }
-.bagel-input.bgl-toggle input[data-v-ebe691ee]{
+.bagel-input.bgl-toggle input[data-v-c5e45931]{
     padding:  unset !important;
     min-width:  unset !important;
     margin: 0 !important;
 }
-.bgl-toggle input[data-v-ebe691ee] {
+.bgl-toggle input[data-v-c5e45931] {
     appearance: none;
     position: relative;
     display: inline-block;
@@ -2391,7 +2391,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
     transition: 0.25s linear all;
     outline: 1px solid var(--border-color);
 }
-.bgl-toggle input[data-v-ebe691ee]::before {
+.bgl-toggle input[data-v-c5e45931]::before {
   position: absolute;
   content: "";
   height: calc(var(--input-height) / 2 - 2px);
@@ -2404,7 +2404,7 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
   transition: 0.2s;
   box-shadow:0 1px 5px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
 }
-.bgl-toggle label[data-v-ebe691ee] {
+.bgl-toggle label[data-v-c5e45931] {
   padding-inline-start: 0.5rem;
   transition: var(--bgl-transition);
   cursor: pointer;
@@ -2413,30 +2413,30 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
   font-size: var(--input-font-size);
   vertical-align: middle;
 }
-.bgl-toggle label[data-v-ebe691ee]:hover {
+.bgl-toggle label[data-v-c5e45931]:hover {
   filter: brightness(90%);
 }
-.bgl-toggle label[data-v-ebe691ee]:active {
+.bgl-toggle label[data-v-c5e45931]:active {
   filter: var(--bgl-active-filter);
 }
-.bgl-toggle input[data-v-ebe691ee]:focus-visible {
+.bgl-toggle input[data-v-c5e45931]:focus-visible {
     outline: -webkit-focus-ring-color auto 1px;
     outline-offset: 2px
 }
-.bgl-toggle input[data-v-ebe691ee]:focus {
+.bgl-toggle input[data-v-c5e45931]:focus {
     outline-color: transparent;
 }
-.bgl-toggle input[data-v-ebe691ee]:focus-visible {
+.bgl-toggle input[data-v-c5e45931]:focus-visible {
     outline: -webkit-focus-ring-color auto 1px;
     outline-offset: 2px
 }
-.bgl-toggle[data-v-ebe691ee] :checked{
+.bgl-toggle[data-v-c5e45931] :checked{
   background: var(--bgl-primary);
 }
-.bgl-toggle[data-v-ebe691ee] :checked::before{
+.bgl-toggle[data-v-c5e45931] :checked::before{
   margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
 }
-.bgl-toggle input:checked + label[data-v-ebe691ee] {
+.bgl-toggle input:checked + label[data-v-c5e45931] {
     color: var(--bgl-primary) !important;
 }
 .fileUploadWrap[data-v-d8f3ff01] {
@@ -2904,7 +2904,6 @@ button.list-item {
 	pointer-events: none;
 }
 .list-item {
-	padding: 0.6rem 1rem;
 	min-height: -webkit-fit-content;
 	min-height: -moz-fit-content;
 	min-height: fit-content;
@@ -2915,6 +2914,9 @@ button.list-item {
 	text-decoration: none;
 	position: relative;
 }
+.list-item > *{
+	margiin-bottom: 0;
+}
 .list-item::after {
 	content: '';
 	position: absolute;
@@ -2933,7 +2935,7 @@ button.list-item {
 }
 .list-item:hover,
 .list-item.router-link-active {
-	background-color: var(--bgl-primary-light);
+	background-color: var(--bgl-primary-tint);
 }
 .notClickable:hover{
 	background-color:unset;
@@ -3796,7 +3798,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 .leaflet-marker-icon {
 	cursor: pointer;
 }
-.bg-dark {
+.bg-dark-modal {
     position: fixed;
     top: 0;
     right: 0;
@@ -3903,16 +3905,16 @@ svg.leaflet-image-layer.leaflet-interactive path {
     transform: translateX(0%);
 }
 
-.bg-dark.is-active {
+.bg-dark-modal.is-active {
     opacity: 1;
     pointer-events: all;
 }
 
-body:has(.bg-dark.is-active) {
+body:has(.bg-dark-modal.is-active) {
     overflow: hidden;
 }
 
-.is-side.bg-dark.is-active {
+.is-side.bg-dark-modal.is-active {
     opacity: 1;
     align-items: stretch;
 }
@@ -16490,6 +16492,8 @@ select {
     color: var(--bgl-blue-light) !important;
 }.bg-bg {
     background: var(--bgl-bg) !important;
+}.bg-dark {
+    background: var(--bgl-dark-bg);
 }.color-bg {
     color: var(--bgl-bg) !important;
 }.bg-input {
@@ -17028,6 +17032,14 @@ select {
         background: var(--label-color) !important;
     }
 
+    .m_bg-bg {
+        background: var(--bgl-bg) !important;
+    }
+
+    .m_bg-dark {
+        background: var(--bgl-dark-bg);
+    }
+
     .m_bg-gray-light {
         background: var(--bgl-gray-light) !important;
     }

package/dist/utils/calendar/dateUtils.d.ts

@@ -17,7 +17,7 @@ export declare function timeAgo(date: string | Date, lang?: AvailableTimeLanguag
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export declare function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date;
+export declare function handleTimezone(date: Date, intFmtOpt: Intl.DateTimeFormatOptions): Date;
 export declare function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions): {
     AmPm: string;
     DD: string;

package/dist/utils/calendar/dateUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAyBvE;AAqDD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAuCpH;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB;;;;;;;;;;;;;;EAqB/G;AAcD,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC7F,GAAG,CAAC,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AACD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACzB,IAAI,CAAC,EAAE,QAAQ,EACf,IAAI,GAAE,iBAAsB,GAC1B,MAAM,CAuER;AACD,eAAO,MAAM,OAAO,mBAAa,CAAA"}
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/calendar/dateUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,KAAK,EAAE,sBAAsB,EAAE,uBAAuB,EAAkC,MAAM,sBAAsB,CAAA;AAE3H,UAAU,gBAAgB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,gBAAgB,QAyBvE;AAqDD,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,IAAI,GAAE,sBAA6B,UAsD/E;AASD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CA2CtF;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,qBAAqB;;;;;;;;;;;;;;EAyB/G;AAcD,MAAM,WAAW,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;IAC7F,GAAG,CAAC,EAAE,uBAAuB,CAAA;IAC7B,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAA;CACX;AACD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACzB,IAAI,CAAC,EAAE,QAAQ,EACf,IAAI,GAAE,iBAAsB,GAC1B,MAAM,CAuER;AACD,eAAO,MAAM,OAAO,mBAAa,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.43",
+  "version": "1.2.48",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "@vueuse/core": "^13.0.0",
+    "@vueuse/core": "^13.1.0",
     "axios": "^1.8.4",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.12.6",

package/src/components/ListItem.vue

@@ -15,6 +15,8 @@ const props = defineProps<{
 	lead?: string
 	iconEnd?: IconType
 	target?: '_blank' | '_self'
+	thin?: boolean
+	fullWidth?: boolean
 	onClick?: () => void
 }>()
 
@@ -25,6 +27,10 @@ const isComponent = $computed(() => {
 	return 'div'
 })
 
+const isClickable = $computed(() => {
+	return props.to || props.href || props.onClick
+})
+
 const bind = $computed(() => {
 	const obj: { [key: string]: any } = {}
 	if (props.to) obj.to = props.to
@@ -44,27 +50,36 @@ const bind = $computed(() => {
 	<component
 		:is="isComponent"
 		v-bind="bind"
+		v-ripple="isClickable"
 		class="flex gap-05 list-item"
+		:class="{ 'py-1': !props.thin,
+			'py-05': props.thin,
+			'px-1': !props.fullWidth,
+			'px-0': props.fullWidth,
+		}"
 		@click="onClick"
 	>
 		<Avatar v-if="src || showAvatar" style="flex-basis: 1;" :name="title" :src="src" :size="40" />
 		<Icon v-if="icon" size="1.2" class="color-primary" :icon="icon" />
 
-		<div>
-			<p v-if="lead" class="txt10 no-margin txt-gray ellipsis txt-start">
+		<div class="txt-start">
+			<p v-if="lead" class="txt10 m-0 p-0 txt-gray ellipsis">
 				{{ lead }}
 				<slot name="lead" />
 			</p>
-			<p class="no-margin ellipsis line-height-14 pb-025 txt-start">
+			<p class="m-0 p-0 ellipsis-1 line-height-14 pb-025">
 				{{ title }}
 				<slot />
 			</p>
-			<p v-if="subtitle" class="txt12 no-margin txt-gray ellipsis">
+			<p v-if="subtitle" class="txt12 m-0 p-0 opacity-7 ellipsis-1">
 				{{ subtitle }}
 				<slot name="subtitle" />
 			</p>
 		</div>
-		<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
+		<div class="flex-grow-1" />
+		<slot name="action">
+			<Icon v-if="iconEnd" :icon="iconEnd" class="transition-400" />
+		</slot>
 	</component>
 </template>
 
@@ -83,7 +98,6 @@ button.list-item {
 	pointer-events: none;
 }
 .list-item {
-	padding: 0.6rem 1rem;
 	min-height: -webkit-fit-content;
 	min-height: -moz-fit-content;
 	min-height: fit-content;
@@ -94,6 +108,9 @@ button.list-item {
 	text-decoration: none;
 	position: relative;
 }
+.list-item > *{
+	margiin-bottom: 0;
+}
 
 .list-item::after {
 	content: '';
@@ -114,7 +131,7 @@ button.list-item {
 
 .list-item:hover,
 .list-item.router-link-active {
-	background-color: var(--bgl-primary-light);
+	background-color: var(--bgl-primary-tint);
 }
 .notClickable:hover{
 	background-color:unset;

package/src/components/Modal.vue

@@ -70,7 +70,7 @@ onUnmounted(() => {
 
 <template>
 	<div
-		class="bg-dark"
+		class="bg-dark-modal"
 		:class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
 		@click="() => (dismissable ? closeModal() : '')"
 		@keydown.esc="closeModal"

package/src/components/form/FieldArray.vue

@@ -4,6 +4,7 @@ import type {
 	AttributeValue,
 	Attributes,
 	BagelFieldOptions,
+	BaseBagelField,
 	BglFormSchemaFnT,
 	Field,
 	Path
@@ -11,27 +12,33 @@ import type {
 import { BagelForm, Btn, Loading, Icon } from '@bagelink/vue'
 import { ref, onMounted, computed, watch } from 'vue'
 
+export interface FieldArrayProps<T, P extends Path<T>> {
+	el?: any
+	id: string
+	label?: string
+	placeholder?: string
+	children?: Field<T>[]
+	class?: AttributeValue | AttributeFn<T, P>
+	attrs?: Attributes<T, P>
+	required?: boolean
+	disabled?: boolean
+	helptext?: string
+	options?: BagelFieldOptions<T>
+	defaultValue?: any
+	add?: boolean
+	delete?: boolean
+	transform?: (value: T) => T
+	schema?: BglFormSchemaFnT<T>
+	modelValue: T[]
+	type?: 'object' | 'number' | 'text'
+}
+
+export interface PrimitiveArrFieldT extends BaseBagelField<{ value: string }, 'value'> {
+	type: FieldArrayProps<{ value: string }, 'value'>['type']
+}
+
 const props = withDefaults(
-	defineProps<{
-		el?: any
-		id: string
-		label?: string
-		placeholder?: string
-		children?: Field<T>[]
-		class?: AttributeValue | AttributeFn<T, P>
-		attrs?: Attributes<T, P>
-		required?: boolean
-		disabled?: boolean
-		helptext?: string
-		options?: BagelFieldOptions<T>
-		defaultValue?: any
-		add?: boolean
-		delete?: boolean
-		transform?: (value: T) => T
-		schema?: BglFormSchemaFnT<T>
-		modelValue: T[]
-		type?: 'object' | 'number' | 'text'
-	}>(),
+	defineProps<FieldArrayProps<T, P>>(),
 	{
 		delete: true,
 		add: true,
@@ -54,18 +61,18 @@ watch(() => props.modelValue, (newValue) => {
 }, { deep: true })
 
 // Generate schema for primitive types
-const primitiveSchema = computed(() => {
+const primitiveSchema = computed<PrimitiveArrFieldT[]>(() => {
 	if (props.type === 'text') {
-		return [{ id: 'value', type: 'text', label: '' }]
+		return [{ id: 'value', type: 'text', label: '', $el: 'text' }]
 	} else if (props.type === 'number') {
-		return [{ id: 'value', type: 'number', label: '' }]
+		return [{ id: 'value', type: 'number', label: '', $el: 'number' }]
 	}
 	return []
 })
 
 // Resolve schema
 async function resolveSchema() {
-	// For primitive types, use the predefined schema
+	// For primitive types, use the predefined schemaks
 	if (props.type !== 'object') {
 		resolvedSchemaData.value = primitiveSchema.value
 		schemaState.value = 'loaded'

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

@@ -2,7 +2,7 @@
 import { onMounted } from 'vue'
 
 const props = withDefaults(defineProps<{
-	label: string
+	label?: string
 	id?: string
 	title?: string
 	small?: boolean

package/src/styles/appearance.css

@@ -173,6 +173,10 @@
     background: var(--bgl-bg) !important;
 }
 
+.bg-dark {
+    background: var(--bgl-dark-bg);
+}
+
 .color-bg {
     color: var(--bgl-bg) !important;
 }
@@ -1015,6 +1019,14 @@
         background: var(--label-color) !important;
     }
 
+    .m_bg-bg {
+        background: var(--bgl-bg) !important;
+    }
+
+    .m_bg-dark {
+        background: var(--bgl-dark-bg);
+    }
+
     .m_bg-gray-light {
         background: var(--bgl-gray-light) !important;
     }

package/src/styles/modal.css

@@ -1,4 +1,4 @@
-.bg-dark {
+.bg-dark-modal {
     position: fixed;
     top: 0;
     right: 0;
@@ -105,16 +105,16 @@
     transform: translateX(0%);
 }
 
-.bg-dark.is-active {
+.bg-dark-modal.is-active {
     opacity: 1;
     pointer-events: all;
 }
 
-body:has(.bg-dark.is-active) {
+body:has(.bg-dark-modal.is-active) {
     overflow: hidden;
 }
 
-.is-side.bg-dark.is-active {
+.is-side.bg-dark-modal.is-active {
     opacity: 1;
     align-items: stretch;
 }

package/src/utils/calendar/dateUtils.ts

@@ -158,7 +158,7 @@ function getBrowserNavigatorLocale(): string {
  * @param timeZone The timezone to use (e.g., 'UTC', 'America/New_York')
  * @returns Date parts with timezone adjustment applied
  */
-export function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtOpt: Intl.DateTimeFormatOptions): Date {
+export function handleTimezone(date: Date, intFmtOpt: Intl.DateTimeFormatOptions): Date {
 	// If timeZone is UTC, convert to UTC directly
 	if (intFmtOpt.timeZone === 'UTC') {
 		const utcDate = new Date(date.getTime())
@@ -168,14 +168,18 @@ export function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtO
 
 	// For other timezones, use the Intl API
 	try {
-		// Get the target timezone's offset at this specific date
-		const formatter = new Intl.DateTimeFormat(locale, intFmtOpt)
+		// Always use en-US locale for parsing date parts to ensure Latin numerals
+		const formatter = new Intl.DateTimeFormat('en-US', {
+			...intFmtOpt,
+			month: 'numeric' // Force numeric month format
+		})
 
 		// Format the date in the target timezone
 		const formattedParts = formatter.formatToParts(date)
 
 		// Extract date components from formatted parts
 		const parts: Record<string, number> = {}
+
 		formattedParts.forEach((part) => {
 			if (part.type !== 'literal' && part.type !== 'timeZoneName') {
 				parts[part.type] = Number.parseInt(part.value, 10)
@@ -201,8 +205,10 @@ export function handleTimezone(date: Date, locale: Intl.LocalesArgument, intFmtO
 
 export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmtOpt?: Intl.DateTimeFormatOptions) {
 	// Apply timezone adjustment if specified
-	const d = intFmtOpt?.timeZone ? handleTimezone(date, locale, intFmtOpt) : date
-	// const d = date
+	const d = intFmtOpt?.timeZone ? handleTimezone(date, intFmtOpt) : date
+
+	// Use numeric formatting for year to ensure consistency across locales
+	const year = d.getFullYear().toString()
 
 	/// keep-sorted
 	return {
@@ -217,8 +223,10 @@ export function getDatePartsMap(date: Date, locale: Intl.LocalesArgument, intFmt
 		MMMM: d.toLocaleString(locale, { month: 'long' }),
 		ss: String(d.getSeconds()).padStart(2, '0'),
 		sss: String(d.getMilliseconds()).padStart(3, '0'),
-		YY: String(d.getFullYear()).slice(-2),
-		YYYY: String(d.getFullYear()),
+
+		// Always use Latin numerals for year to ensure consistency
+		YY: year.slice(-2),
+		YYYY: year,
 	}
 }