@bagelink/vue 1.7.80 → 1.7.84

package/dist/utils/queryFilter.d.ts

@@ -0,0 +1,177 @@
+/**
+ * SCIM 2.0 Query Builder
+ *
+ * Type-safe query builder for SCIM 2.0 filtering.
+ *
+ * @example
+ * ```typescript
+ * // Array-based (recommended for UI)
+ * const filters: QueryConditions<Person> = [
+ *   { field: 'first_name', op: 'eq', value: 'John' },
+ *   { field: 'age', op: 'gt', value: 18, connector: 'and' },
+ * ]
+ * buildQuery(filters) // → 'first_name eq "John" and age gt 18'
+ *
+ * // Range query (same field twice)
+ * const rangeFilters: QueryConditions<Donation> = [
+ *   { field: 'amount', op: 'ge', value: 100 },
+ *   { field: 'amount', op: 'le', value: 500, connector: 'and' },
+ * ]
+ * buildQuery(rangeFilters) // → 'amount ge 100 and amount le 500'
+ * ```
+ */
+type Primitive = string | number | boolean | null;
+type DeepKeyOf<T> = T extends Primitive ? never : {
+    [K in keyof T & string]: K | `${K}.${DeepKeyOf<T[K]>}`;
+}[keyof T & string];
+/**
+ * SCIM 2.0 comparison operators
+ */
+export type ComparisonOperator = 'eq' | 'ne' | 'gt' | 'ge' | 'lt' | 'le' | 'co' | 'sw' | 'ew' | 'pr';
+/**
+ * SCIM 2.0 logical operators
+ */
+export type LogicalOperator = 'and' | 'or';
+/**
+ * A single filter condition
+ */
+export interface FilterCondition<T extends Record<string, any> = Record<string, any>> {
+    field: DeepKeyOf<T> | string;
+    op: ComparisonOperator;
+    value?: Primitive;
+    connector?: LogicalOperator;
+}
+/**
+ * Array of filter conditions - the primary way to define queries
+ */
+export type QueryConditions<T extends Record<string, any> = Record<string, any>> = FilterCondition<T>[];
+/**
+ * Build a SCIM 2.0 query string from conditions array
+ *
+ * @example
+ * ```typescript
+ * buildQuery<Person>([
+ *   { field: 'name', op: 'eq', value: 'John' },
+ *   { field: 'age', op: 'gt', value: 18, connector: 'and' },
+ * ])
+ * // → 'name eq "John" and age gt 18'
+ * ```
+ */
+export declare function buildQuery<T extends Record<string, any>>(conditions: QueryConditions<T>): string;
+/**
+ * Query Builder for SCIM 2.0 filtering
+ */
+export declare class QueryFilter<T extends Record<string, any>> {
+    private parts;
+    /**
+     * Equal comparison
+     */
+    eq<K extends DeepKeyOf<T>>(field: K, value: Primitive): this;
+    /**
+     * Not equal comparison
+     */
+    ne<K extends DeepKeyOf<T>>(field: K, value: Primitive): this;
+    /**
+     * Greater than comparison
+     */
+    gt<K extends DeepKeyOf<T>>(field: K, value: number | string): this;
+    /**
+     * Greater than or equal comparison
+     */
+    ge<K extends DeepKeyOf<T>>(field: K, value: number | string): this;
+    /**
+     * Less than comparison
+     */
+    lt<K extends DeepKeyOf<T>>(field: K, value: number | string): this;
+    /**
+     * Less than or equal comparison
+     */
+    le<K extends DeepKeyOf<T>>(field: K, value: number | string): this;
+    /**
+     * Contains comparison (for strings)
+     */
+    co<K extends DeepKeyOf<T>>(field: K, value: string): this;
+    /**
+     * Starts with comparison (for strings)
+     */
+    sw<K extends DeepKeyOf<T>>(field: K, value: string): this;
+    /**
+     * Ends with comparison (for strings)
+     */
+    ew<K extends DeepKeyOf<T>>(field: K, value: string): this;
+    /**
+     * Present check (field has a value)
+     */
+    pr<K extends DeepKeyOf<T>>(field: K): this;
+    /**
+     * AND logical operator
+     */
+    and(): this;
+    /**
+     * OR logical operator
+     */
+    or(): this;
+    /**
+     * NOT logical operator
+     */
+    not(): this;
+    /**
+     * Group expressions with parentheses
+     */
+    group(builderFn: (qb: QueryFilter<T>) => QueryFilter<T>): this;
+    /**
+     * Add raw query string (use with caution)
+     */
+    raw(query: string): this;
+    /**
+     * Clear the query
+     */
+    clear(): this;
+    /**
+     * Build the final query string
+     */
+    build(): string;
+    /**
+     * Convert to string automatically (allows using builder without .build())
+     */
+    toString(): string;
+    /**
+     * Allow implicit string conversion
+     */
+    [Symbol.toPrimitive](hint: string): string | number;
+    /**
+     * Format value for SCIM 2.0 query
+     */
+    private formatValue;
+}
+/**
+ * Build a query string from conditions
+ *
+ * @example
+ * ```typescript
+ * // From conditions array
+ * query<Person>([
+ *   { field: 'first_name', op: 'eq', value: 'John' },
+ *   { field: 'age', op: 'gt', value: 18, connector: 'and' },
+ * ])
+ * // → 'first_name eq "John" and age gt 18'
+ *
+ * // Empty returns empty string
+ * query([]) // → ''
+ * ```
+ */
+export declare function query<T extends Record<string, any>>(conditions: QueryConditions<T>): string;
+/**
+ * Create a query that checks if any of the fields match the value
+ */
+export declare function anyOf<T extends Record<string, any>>(fields: Array<DeepKeyOf<T> | string>, value: Primitive): string;
+/**
+ * Create a range query (field >= min and field <= max)
+ */
+export declare function range<T extends Record<string, any>>(field: DeepKeyOf<T> | string, min: number | string, max: number | string): string;
+/**
+ * Create a search query across multiple string fields (OR)
+ */
+export declare function search<T extends Record<string, any>>(fields: Array<DeepKeyOf<T> | string>, searchTerm: string): string;
+export {};
+//# sourceMappingURL=queryFilter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"queryFilter.d.ts","sourceRoot":"","sources":["../../src/utils/queryFilter.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/Filter.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { ComparisonOperator, QueryConditions, FilterCondition, LogicalOperator } from '../utils/queryFilter'
+import { Btn, DateInput, Dropdown, SelectInput, TextInput, type Option } from '@bagelink/vue'
+import { computed } from 'vue'
+
+type OptionsSource = Option[] | ((query: string) => Promise<Option[]>)
+
+const props = defineProps<{
+	fields: Array<{
+		label: string
+		value: string
+		type?: 'string' | 'number' | 'boolean' | 'date'
+		options?: OptionsSource
+	}>
+}>()
+
+const emit = defineEmits<{
+	change: [value: QueryConditions<T>]
+}>()
+
+const model = defineModel<QueryConditions<T>>({ default: () => [] })
+
+const allOperatorOptions: { label: string, value: ComparisonOperator }[] = [
+	{ label: 'שווה ל', value: 'eq' },
+	{ label: 'לא שווה ל', value: 'ne' },
+	{ label: 'גדול מ', value: 'gt' },
+	{ label: 'גדול או שווה ל', value: 'ge' },
+	{ label: 'קטן מ', value: 'lt' },
+	{ label: 'קטן או שווה ל', value: 'le' },
+	{ label: 'מכיל', value: 'co' },
+	{ label: 'מתחיל ב', value: 'sw' },
+	{ label: 'מסתיים ב', value: 'ew' },
+	{ label: 'קיים', value: 'pr' },
+]
+
+const connectorOptions: { label: string, value: LogicalOperator }[] = [
+	{ label: 'וגם', value: 'and' },
+	{ label: 'או', value: 'or' },
+]
+
+function getOperatorsForType(fieldType: string, hasOptions: boolean) {
+	if (hasOptions) {
+		return allOperatorOptions.filter(o => ['eq', 'ne', 'pr'].includes(o.value))
+	}
+	switch (fieldType) {
+		case 'boolean':
+			return allOperatorOptions.filter(o => ['eq', 'ne', 'pr'].includes(o.value))
+		case 'number':
+		case 'date':
+			return allOperatorOptions.filter(o => ['eq', 'ne', 'gt', 'ge', 'lt', 'le', 'pr'].includes(o.value))
+		default:
+			return allOperatorOptions.filter(o => ['eq', 'ne', 'co', 'sw', 'ew', 'pr'].includes(o.value))
+	}
+}
+
+function getFieldOptions(fieldValue: string): OptionsSource | undefined {
+	return props.fields.find(f => f.value === fieldValue)?.options
+}
+
+const booleanOptions = [
+	{ label: 'כן', value: 'true' },
+	{ label: 'לא', value: 'false' },
+]
+
+function parseValue(value: any): any {
+	const str = String(value ?? '')
+	if (str === 'true') return true
+	if (str === 'false') return false
+	if (str === 'null') return null
+	if (str !== '' && !Number.isNaN(Number(str))) return Number(str)
+	return value
+}
+
+function updateCondition(index: number, updates: Partial<FilterCondition<T>>) {
+	const newConditions = [...model.value]
+	newConditions[index] = { ...newConditions[index], ...updates }
+
+	// Parse value if provided
+	if ('value' in updates) {
+		newConditions[index].value = parseValue(updates.value)
+	}
+
+	model.value = newConditions
+	emit('change', newConditions)
+}
+
+function addCondition() {
+	const field = props.fields[0]?.value || ''
+	const newCondition: FilterCondition<T> = {
+		field,
+		op: 'eq',
+		value: '',
+		connector: model.value.length > 0 ? 'and' : undefined,
+	}
+	const newConditions = [...model.value, newCondition]
+	model.value = newConditions
+	emit('change', newConditions)
+}
+
+function removeCondition(index: number) {
+	const newConditions = model.value.filter((_, i) => i !== index)
+	// Clear connector on first item
+	if (newConditions.length > 0 && newConditions[0].connector) {
+		newConditions[0] = { ...newConditions[0], connector: undefined }
+	}
+	model.value = newConditions
+	emit('change', newConditions)
+}
+
+function clearAll() {
+	model.value = []
+	emit('change', [])
+}
+
+function getFieldType(fieldValue: string): string {
+	return props.fields.find(f => f.value === fieldValue)?.type || 'string'
+}
+
+function needsValue(op: ComparisonOperator): boolean {
+	return op !== 'pr'
+}
+
+function displayValue(value: any): string {
+	if (value === null) return 'null'
+	if (value === true) return 'true'
+	if (value === false) return 'false'
+	return String(value ?? '')
+}
+
+const activeFiltersCount = computed(() => {
+	return model.value.filter(c => c.field !== '' && (c.op === 'pr' || (c.value !== undefined && c.value !== ''))).length
+})
+</script>
+
+<template>
+	<Dropdown
+		flat placement="bottom-start" icon="filter_alt"
+		:value="activeFiltersCount > 0 ? `פילטר (${activeFiltersCount})` : 'פילטר'" thin :auto-hide="false"
+	>
+		<div class="filter-builder">
+			<TransitionGroup name="condition">
+				<div
+					v-for="(condition, index) in model" :key="index" class="flex gap-05 bg-gray-20 rounded p-025"
+					:class="condition.connector === 'or' ? 'mt-05' : ''"
+				>
+					<!-- Connector (AND/OR) -->
+					<SelectInput
+						v-if="index > 0" :model-value="condition.connector" :options="connectorOptions"
+						style="width: 75px"
+						@update:model-value="(v: LogicalOperator) => updateCondition(index, { connector: v })"
+					/>
+					<div v-else-if="model.length > 1" style="width: 100px" />
+
+					<!-- Field selector -->
+					<SelectInput
+						:model-value="condition.field" :options="fields" placeholder="בחר שדה" class="field-select"
+						@update:model-value="(v: string) => updateCondition(index, { field: v })"
+					/>
+
+					<!-- Operator selector -->
+					<SelectInput
+						:model-value="condition.op"
+						:options="getOperatorsForType(getFieldType(condition.field as string), !!getFieldOptions(condition.field as string))"
+						class="operator-select"
+						@update:model-value="(v: ComparisonOperator) => updateCondition(index, { op: v })"
+					/>
+
+					<!-- Value input - type-specific -->
+					<template v-if="needsValue(condition.op)">
+						<SelectInput
+							v-if="getFieldOptions(condition.field as string)" :model-value="displayValue(condition.value)"
+							:options="getFieldOptions(condition.field as string)!" placeholder="בחר" class="value-input" searchable
+							@update:model-value="(v: string) => updateCondition(index, { value: v })"
+						/>
+						<SelectInput
+							v-else-if="getFieldType(condition.field as string) === 'boolean'"
+							:model-value="displayValue(condition.value)" :options="booleanOptions" placeholder="בחר"
+							class="value-input" @update:model-value="(v: string) => updateCondition(index, { value: v })"
+						/>
+						<DateInput
+							v-else-if="getFieldType(condition.field as string) === 'date'"
+							:model-value="displayValue(condition.value)" placeholder="בחר תאריך" class="value-input"
+							@update:model-value="(v: any) => updateCondition(index, { value: String(v) })"
+						/>
+						<TextInput
+							v-else-if="getFieldType(condition.field as string) === 'number'"
+							:model-value="displayValue(condition.value)" placeholder="0" type="number" class="value-input"
+							@update:model-value="(v: string) => updateCondition(index, { value: v })"
+						/>
+						<TextInput
+							v-else :model-value="displayValue(condition.value)" placeholder="ערך" class="value-input"
+							@update:model-value="(v: string) => updateCondition(index, { value: v })"
+						/>
+					</template>
+					<div v-else class="value-placeholder" />
+
+					<!-- Remove button -->
+					<Btn icon="close" flat round thin color="gray" @click="removeCondition(index)" />
+				</div>
+			</TransitionGroup>
+
+			<div class="flex gap-05 mt-075">
+				<Btn icon="add" flat thin value="הוסף תנאי" @click="addCondition" />
+				<Btn v-if="model.length > 0" icon="delete_sweep" flat thin color="gray" value="נקה הכל" @click="clearAll" />
+			</div>
+		</div>
+	</Dropdown>
+</template>
+
+<style scoped>
+.filter-builder {
+  --input-font-size: 12px;
+  --input-height: 30px;
+  /* --input-border-radius: 100px; */
+  /* --input-bg: var(--bgl-primary-light); */
+  /* --input-color: var(--bgl-primary); */
+  min-width: 520px;
+  max-width: 90vw;
+  padding: 0.5rem;
+}
+
+.field-select {
+  flex: 1;
+  min-width: 120px;
+  margin: 0;
+}
+
+.operator-select {
+  min-width: 120px;
+  margin: 0;
+}
+
+.value-input {
+  flex: 1;
+  min-width: 100px;
+  margin: 0;
+}
+
+.value-placeholder {
+  flex: 1;
+  min-width: 100px;
+}
+
+/* Transition animations */
+.condition-enter-active,
+.condition-leave-active {
+  transition: all 0.25s ease;
+}
+
+.condition-enter-from {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.condition-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+:dir(rtl) .condition-enter-from {
+  transform: translateX(10px);
+}
+
+:dir(rtl) .condition-leave-to {
+  transform: translateX(-10px);
+}
+</style>

package/src/components/index.ts

@@ -19,6 +19,7 @@ export { Draggable, useDraggable, vDraggable } from './draggable'
 export { default as DragOver } from './DragOver.vue'
 export { default as Dropdown } from './Dropdown.vue'
 export { default as FieldSetVue } from './FieldSetVue.vue'
+export { default as Filter } from './Filter.vue'
 export { default as Flag } from './Flag.vue'
 export * from './form'
 export { default as Icon } from './Icon/Icon.vue'

package/src/styles/appearance.css

@@ -120,6 +120,18 @@
     object-fit: scale-down;
 }
 
+.object-position-top {
+    object-position: top;
+}
+
+.object-position-center {
+    object-position: center;
+}
+
+.object-position-bottom {
+    object-position: bottom;
+}
+
 .shadow-10 {
     box-shadow: 0 0 10px 0 var(--bgl-shadow) !important;
 }
@@ -435,6 +447,18 @@
         object-fit: scale-down;
     }
 
+    .m_object-position-top {
+        object-position: top;
+    }
+
+    .m_object-position-center {
+        object-position: center;
+    }
+
+    .m_object-position-bottom {
+        object-position: bottom;
+    }
+
     .m_shadow-light {
         box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     }