@bagelink/vue 1.7.92 → 1.7.94

package/package.json

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

package/src/components/Filter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
+import type { Option } from '@bagelink/vue'
 import type { ComparisonOperator } from '../utils/queryFilter'
-import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput, type Option } from '@bagelink/vue'
+import { Btn, DateInput, Dropdown, Icon, SelectInput, TextInput } from '@bagelink/vue'
 import { computed } from 'vue'
 
 type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
@@ -275,11 +276,8 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 
 <template>
 	<Dropdown
-		flat
-		placement="bottom-end"
-		icon="filter_alt"
-		:value="activeFiltersCount > 0 ? `${currentTexts.filter} (${activeFiltersCount})` : currentTexts.filter"
-		thin
+		flat placement="bottom-end" icon="filter_alt"
+		:value="activeFiltersCount > 0 ? `${currentTexts.filter} (${activeFiltersCount})` : currentTexts.filter" thin
 		:auto-hide="false"
 	>
 		<div class="p-1 m_p-05">
@@ -294,22 +292,21 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 
 				<TransitionGroup name="condition">
 					<div
-						v-for="(condition, index) in conditions"
-						:key="condition.id"
+						v-for="(condition, index) in conditions" :key="condition.id"
 						class="grid filter-row gap-025 align-items-center p-025"
 					>
 						<!-- Connector (AND/OR) - display only for now -->
 						<div v-if="index > 0" class="min-w-20px">
-							<span class="txt12 opacity-6">{{ condition.connector === 'or' ? currentTexts.connectors.or : currentTexts.connectors.and }}</span>
+							<span v-if="condition.connector === 'or'" class="txt12 opacity-6">{{
+								currentTexts.connectors.or }}</span>
+							<span v-else class="txt12 opacity-6">{{ currentTexts.connectors.and }}</span>
 						</div>
 						<div v-else class="min-w-20px" />
 
 						<!-- Field selector -->
 						<SelectInput
-							:model-value="condition.field"
-							:options="fields"
-							:placeholder="currentTexts.placeholders.selectField"
-							class="m-0 light-input borderHover"
+							:model-value="condition.field" :options="fields"
+							:placeholder="currentTexts.placeholders.selectField" class="m-0 light-input borderHover"
 							@update:model-value="(v: string) => onFieldChange(condition.field, v, condition)"
 						/>
 
@@ -324,56 +321,54 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 						<!-- Value input - type-specific -->
 						<template v-if="needsValue(condition.operator)">
 							<SelectInput
-								v-if="getFieldOptions(condition.field)"
-								:model-value="condition.value"
+								v-if="getFieldOptions(condition.field)" :model-value="condition.value"
 								:options="getFieldOptions(condition.field)!"
 								:placeholder="currentTexts.placeholders.selectOption"
-								class="m-0 light-input borderHover"
-								searchable
+								class="m-0 light-input borderHover" searchable
 								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
 							/>
 							<SelectInput
 								v-else-if="getFieldType(condition.field) === 'boolean'"
-								:model-value="condition.value"
-								:options="booleanOptions"
+								:model-value="condition.value" :options="booleanOptions"
 								:placeholder="currentTexts.placeholders.selectOption"
 								class="m-0 light-input borderHover"
 								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
 							/>
 							<DateInput
 								v-else-if="getFieldType(condition.field) === 'date'"
-								:model-value="condition.value"
-								:placeholder="currentTexts.placeholders.selectDate"
+								:model-value="condition.value" :placeholder="currentTexts.placeholders.selectDate"
 								class="m-0 light-input borderHover"
 								@update:model-value="(v: any) => onValueChange(condition.field, condition.operator, String(v))"
 							/>
 							<TextInput
 								v-else-if="getFieldType(condition.field) === 'number'"
-								:model-value="condition.value"
-								placeholder="0"
-								type="number"
+								:model-value="condition.value" placeholder="0" type="number"
 								class="m-0 light-input borderHover"
 								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
 							/>
 							<TextInput
-								v-else
-								:model-value="condition.value"
-								:placeholder="currentTexts.placeholders.enterValue"
-								class="m-0 light-input borderHover"
+								v-else :model-value="condition.value"
+								:placeholder="currentTexts.placeholders.enterValue" class="m-0 light-input borderHover"
 								@update:model-value="(v: string) => onValueChange(condition.field, condition.operator, v)"
 							/>
 						</template>
 						<div v-else />
 
 						<!-- Remove button -->
-						<Btn icon="close" thin flat size="small" class="m_bg-gray-40 m_px-3 m_mx-auto" @click="removeCondition(condition.field)" />
+						<Btn
+							icon="close" thin flat size="small" class="m_bg-gray-40 m_px-3 m_mx-auto"
+							@click="removeCondition(condition.field)"
+						/>
 					</div>
 				</TransitionGroup>
 			</div>
 
 			<div class="flex gap-1 space-between">
 				<Btn icon="add" flat thin :value="currentTexts.buttons.addCondition" @click="addCondition" />
-				<Btn v-if="conditions.length > 0" icon="delete_sweep" flat thin color="gray" :value="currentTexts.buttons.clearAll" @click="clearAll" />
+				<Btn
+					v-if="conditions.length > 0" icon="delete_sweep" flat thin color="gray"
+					:value="currentTexts.buttons.clearAll" @click="clearAll"
+				/>
 			</div>
 		</div>
 	</Dropdown>
@@ -383,29 +378,31 @@ function onValueChange(field: string, operator: ComparisonOperator, value: strin
 .filter-row {
 	grid-template-columns: auto minmax(90px, 0.5fr) minmax(170px, 0.75fr) minmax(120px, 0.5fr) auto;
 }
-																/* Transition animations */
+
+/* Transition animations */
 .condition-enter-active,
 .condition-leave-active {
-  transition: all 0.25s ease;
+	transition: all 0.25s ease;
 }
 
 .condition-enter-from {
-  opacity: 0;
-  transform: translateX(-10px);
+	opacity: 0;
+	transform: translateX(-10px);
 }
 
 .condition-leave-to {
-  opacity: 0;
-  transform: translateX(10px);
+	opacity: 0;
+	transform: translateX(10px);
 }
 
 :dir(rtl) .condition-enter-from {
-  transform: translateX(10px);
+	transform: translateX(10px);
 }
 
 :dir(rtl) .condition-leave-to {
-  transform: translateX(-10px);
+	transform: translateX(-10px);
 }
+
 @media (max-width: 910px) {
 	.filter-row {
 		grid-template-columns: auto;