@bagelink/vue 1.9.63 → 1.9.69

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.63",
+  "version": "1.9.69",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Filter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { Option } from '@bagelink/vue'
-import type { ComparisonOperator, LogicalOperator, QueryConditions } from './queryFilter'
-import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n } from '@bagelink/vue'
+import type { ComparisonOperator, LogicalOperator, QueryConditions } from '../utils/queryFilter'
+import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, useI18n, useDebounceFn } from '@bagelink/vue'
 import { computed } from 'vue'
 
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
@@ -31,6 +31,8 @@ const model = defineModel<QueryConditions<T>>({ default: () => [] })
 
 const { $t } = useI18n()
 
+const debouncedEmit = useDebounceFn((value: QueryConditions<T>) => { emit('change', value) }, 400)
+
 let conditionIdCounter = 0
 function generateId() {
 	return `cond_${++conditionIdCounter}_${Date.now()}`
@@ -132,7 +134,8 @@ const booleanOptions = computed(() => [
 	{ label: currentTexts.value.boolean.false, value: 'false' },
 ])
 
-function parseValue(value: string): string | number | boolean | null {
+function parseValue(value: string | number | boolean | null): string | number | boolean | null {
+	if (typeof value === 'number' || typeof value === 'boolean' || value === null) return value
 	if (value === 'true') return true
 	if (value === 'false') return false
 	if (value === 'null') return null
@@ -140,7 +143,7 @@ function parseValue(value: string): string | number | boolean | null {
 	return value
 }
 
-function updateConditionAtIndex(index: number, updates: Partial<{ field: string, op: ComparisonOperator, value: string, connector: LogicalOperator }>) {
+function updateConditionAtIndex(index: number, updates: Partial<{ field: string, op: ComparisonOperator, value: string | number | boolean | null, connector: LogicalOperator }>) {
 	const newModel = [...model.value]
 	const existing = newModel[index]
 	if (!existing) return
@@ -153,7 +156,8 @@ function updateConditionAtIndex(index: number, updates: Partial<{ field: string,
 
 	newModel[index] = updated
 	model.value = newModel
-	emit('change', newModel)
+	const completeConditions = newModel.filter(c => c.field && c.op && (c.op === 'pr' || (c.value !== '' && c.value !== null && c.value !== undefined)))
+	debouncedEmit(completeConditions)
 }
 
 function addCondition() {
@@ -166,7 +170,7 @@ function addCondition() {
 	}
 	const newModel = [...model.value, newCondition]
 	model.value = newModel
-	emit('change', newModel)
+	// don't emit incomplete new condition
 }
 
 function removeCondition(index: number) {
@@ -179,13 +183,13 @@ function removeCondition(index: number) {
 	// Clean up ID mapping
 	conditionIds.delete(index)
 	model.value = newModel
-	emit('change', newModel)
+	debouncedEmit(newModel)
 }
 
 function clearAll() {
 	conditionIds.clear()
 	model.value = []
-	emit('change', [])
+	debouncedEmit([])
 }
 
 function getFieldType(fieldValue: string): string {
@@ -197,11 +201,11 @@ function needsValue(operator: ComparisonOperator): boolean {
 }
 
 const activeFiltersCount = computed(() => {
-	return conditions.value.filter(c => Boolean(c.field) && (c.operator === 'pr' || Boolean(c.value))).length
+	return conditions.value.filter((c: UICondition) => Boolean(c.field) && (c.operator === 'pr' || Boolean(c.value))).length
 })
 
 function getConditionIndex(id: string): number {
-	return conditions.value.findIndex(c => c.id === id)
+	return conditions.value.findIndex((c: UICondition) => c.id === id)
 }
 
 function onFieldChange(id: string, newField: string) {
@@ -244,8 +248,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 				<TransitionGroup name="condition">
 					<div
 						v-for="(condition, index) in conditions" :key="condition.id"
-						class="grid filter-row gap-025 align-items-center pt-025"
-						:class="{
+						class="grid filter-row gap-025 align-items-center pt-025" :class="{
 							'mt-025': index > 0 && condition.connector === 'or',
 							'pt-075 border-top-or': index > 0 && condition.connector === 'or',
 						}"
@@ -253,16 +256,14 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 						<!-- Connector (AND/OR) -->
 						<div v-if="index > 0" class="min-w-100px">
 							<SelectInput
-								:model-value="condition.connector || 'and'"
-								:options="[
+								:model-value="condition.connector || 'and'" :options="[
 									{ label: currentTexts.connectors.and, value: 'and' },
 									{ label: currentTexts.connectors.or, value: 'or' },
-								]"
-								class="m-0 and-or-select txt-12"
+								]" class="m-0 and-or-select txt-12"
 								@update:model-value="(v: LogicalOperator) => onConnectorChange(condition.id, v)"
 							/>
 						</div>
-						<div v-else class="" />
+						<div v-else />
 
 						<!-- Field selector -->
 						<SelectInput
@@ -340,6 +341,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 	--input-font-size: 12px !important;
 	--input-background-color: transparent !important;
 }
+
 .and-or-select .selectinput-btn {
 	border: none;
 	width: 100%;

package/src/components/Modal.vue

@@ -160,6 +160,9 @@ function openModal() {
 	color: var(--bgl-popup-text) !important;
 }
 
+.modal .rich-text-editor .bgl_btn.bgl_btn_flat.active {
+	color: var(--bgl-white) !important;
+}
 .modal-footer>div {
 	gap: 1rem;
 	display: flex;

package/src/i18n/index.ts

@@ -1,5 +1,5 @@
 import type { Composer, I18n } from 'vue-i18n'
-import { createI18n as createVueI18n, useI18n as useVueI18n } from 'vue-i18n'
+import { createI18n as createVueI18n } from 'vue-i18n'
 import en from './locales/en.json'
 import es from './locales/es.json'
 import fr from './locales/fr.json'
@@ -91,19 +91,21 @@ interface UseI18nReturn {
 }
 
 /**
- * useI18n wrapper that returns bagelink's typed i18n functions
+ * useI18n wrapper that returns bagelink's typed i18n functions.
+ * Uses the global i18n instance directly to work in all contexts,
+ * including dialog containers mounted in a secondary app instance.
  */
 export function useI18n(): UseI18nReturn {
-	const { t, locale, availableLocales, fallbackLocale, n, d } = useVueI18n()
+	const global = getI18n().global as Composer
 
 	return {
-		$t: t,
-		t,
-		locale,
-		availableLocales,
-		fallbackLocale,
-		n,
-		d,
+		$t: global.t,
+		t: global.t,
+		locale: global.locale,
+		availableLocales: global.availableLocales,
+		fallbackLocale: global.fallbackLocale,
+		n: global.n,
+		d: global.d,
 	}
 }