@platforma-sdk/ui-vue 1.64.0 → 1.65.0

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAdvancedFilter.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends RootFilter\">\nimport { PlBtnSecondary, PlCheckbox, PlElementList } from \"@milaboratories/uikit\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { computed, toRaw } from \"vue\";\nimport FilterEditor from \"./FilterEditor.vue\";\nimport OperandButton from \"./OperandButton.vue\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport type {\n  CommonFilter,\n  EditableFilter,\n  NodeFilter,\n  PlAdvancedFilterColumnId,\n  RootFilter,\n  SourceOptionInfo,\n} from \"./types\";\nimport { createNewGroup, getNewId, isValidColumnId } from \"./utils\";\n\nconst model = defineModel<T>(\"filters\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /** List of ids of sources (columns, axes) that can be selected in filters */\n    items: SourceOptionInfo[];\n    /** List of supported filter types */\n    supportedFilters?: typeof SUPPORTED_FILTER_TYPES;\n    /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */\n    enableDnd?: boolean;\n    /** If true - \"Add group\" button is shown below the filter groups */\n    enableAddGroupButton?: boolean;\n    /** Loading function for unique values for Equal/InSet filters and fixed axes options. */\n    getSuggestOptions: (params: {\n      columnId: PlAdvancedFilterColumnId;\n      axisIdx?: number;\n      searchStr: string;\n      searchType: \"value\" | \"label\";\n    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  }>(),\n  {\n    supportedFilters: () => SUPPORTED_FILTER_TYPES,\n    getSuggestModel: undefined,\n\n    enableDnd: false,\n    enableAddGroupButton: false,\n  },\n);\n\nconst firstColumnId = computed(() => props.items[0]?.id);\nconst emptyGroup: NodeFilter[] = [\n  {\n    id: -1,\n    type: \"and\",\n    filters: [],\n    isExpanded: true,\n  },\n];\n\nfunction getRootGroups() {\n  if (model.value.type !== \"or\" && model.value.type !== \"and\") {\n    throw new Error('Invalid model structure, expected root to be \"or\" or \"and\" group');\n  }\n  return model.value.filters;\n}\n\nfunction getRootGroup(idx: number): NodeFilter {\n  const groups = getRootGroups();\n  const group = groups[idx];\n  if (group.type !== \"and\" && group.type !== \"or\" && group.type !== \"not\") {\n    throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n  }\n  return group;\n}\n\nfunction getRootGroupContent(idx: number): Exclude<NodeFilter, { type: \"not\" }> {\n  const group = getRootGroup(idx);\n\n  if (group.type !== \"not\") {\n    return group;\n  }\n\n  if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n    throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n  }\n\n  return group.filter;\n}\n\nfunction addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {\n  const group = getRootGroupContent(groupIdx);\n\n  group.filters.push({\n    ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n    column: selectedSourceId,\n    id: getNewId(),\n    isExpanded: true,\n  } as CommonFilter);\n}\n\nfunction removeFilterFromGroup(groupIdx: number, filterIdx: number) {\n  const group = getRootGroupContent(groupIdx);\n\n  if (group.filters.length === 1 && filterIdx === 0) {\n    removeGroup(groupIdx);\n  } else {\n    group.filters.splice(filterIdx, 1);\n  }\n}\nfunction inverseRootNode(groupIdx: number) {\n  const groups = getRootGroups();\n  const group = groups[groupIdx];\n  if (group.type === \"not\") {\n    if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n      throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n    }\n    groups[groupIdx] = group.filter;\n  } else {\n    const type = groups[groupIdx].type;\n    if (type !== \"and\" && type !== \"or\" && type !== \"not\") {\n      throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n    }\n\n    groups[groupIdx] = {\n      id: getNewId(),\n      isExpanded: true,\n      type: \"not\",\n      filter: groups[groupIdx],\n    };\n  }\n}\n\nfunction getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: \"not\" }> {\n  return item.type === \"not\"\n    ? (item.filter as Exclude<T, { type: \"not\" }>)\n    : (item as Exclude<T, { type: \"not\" }>);\n}\n\nfunction removeGroup(groupIdx: number) {\n  const groups = getRootGroups();\n  groups.splice(groupIdx, 1);\n}\nfunction addGroup(selectedSourceId: PlAdvancedFilterColumnId) {\n  const newGroup = createNewGroup(selectedSourceId);\n  const groups = getRootGroups();\n  groups.push(newGroup);\n}\n\nfunction handleDropToExistingGroup(groupIdx: number, event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addColumnToGroup(groupIdx, draggedId);\n    }\n  }\n}\nfunction handleDropToNewGroup(event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addGroup(draggedId);\n    }\n  }\n}\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction validateFilter<T extends CommonFilter>(item: T): EditableFilter {\n  if (item.type === \"and\" || item.type === \"or\" || item.type === \"not\") {\n    throw new Error(\"Invalid filter structure, expected leaf filter\");\n  }\n\n  return item as EditableFilter;\n}\n\nfunction updateFilter(filters: CommonFilter[], idx: number, updatedFilter: EditableFilter) {\n  filters[idx] = toRaw(updatedFilter as CommonFilter);\n}\n</script>\n<template>\n  <div>\n    <PlElementList\n      v-model:items=\"model.filters\"\n      :get-item-key=\"(filter) => filter.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"(filter) => filter.isExpanded === true\"\n      :on-expand=\"\n        (group) => {\n          group.isExpanded = !group.isExpanded;\n        }\n      \"\n      :disableDragging=\"false\"\n      :disableRemoving=\"false\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n    >\n      <template #item-title> Filter group </template>\n      <template #item-content=\"{ item, index }\">\n        <div\n          :class=\"$style.groupContent\"\n          dropzone=\"true\"\n          @drop=\"(event) => handleDropToExistingGroup(index, event)\"\n          @dragover=\"dragOver\"\n        >\n          <PlCheckbox\n            :model-value=\"item.type === 'not'\"\n            :class=\"$style.notCheckbox\"\n            @update:model-value=\"inverseRootNode(index)\"\n          >\n            Filter Out\n          </PlCheckbox>\n          <template v-for=\"(_, filterIdx) in getNotContent(item).filters\" :key=\"filterIdx\">\n            <FilterEditor\n              :filter=\"validateFilter(getNotContent(item).filters[filterIdx])\"\n              :operand=\"getNotContent(item).type\"\n              :column-options=\"items\"\n              :supported-filters=\"props.supportedFilters\"\n              :get-suggest-options=\"props.getSuggestOptions\"\n              :enable-dnd=\"Boolean(props.enableDnd)\"\n              :is-last=\"filterIdx === getNotContent(item).filters.length - 1\"\n              :on-change-operand=\"(v) => (getNotContent(item).type = v)\"\n              :on-delete=\"() => removeFilterFromGroup(index, filterIdx)\"\n              @update:filter=\"\n                (value) => updateFilter(getNotContent(item).filters, filterIdx, value)\n              \"\n            />\n          </template>\n          <div v-if=\"props.enableDnd\" :class=\"$style.dropzone\">\n            <div>Drop dimensions here</div>\n          </div>\n          <PlBtnSecondary v-else icon=\"add\" @click=\"addColumnToGroup(index, firstColumnId)\">\n            Add filter\n          </PlBtnSecondary>\n        </div>\n      </template>\n      <template #item-after=\"{ index }\">\n        <OperandButton\n          v-if=\"props.enableAddGroupButton || index < getRootGroups().length - 1\"\n          :class=\"$style.buttonWrapper\"\n          :active=\"model.type\"\n          :disabled=\"index === getRootGroups().length - 1\"\n          :on-select=\"(v) => (model.type = v)\"\n        />\n      </template>\n    </PlElementList>\n\n    <!-- Last group - always empty, just for adding new groups -->\n    <PlElementList\n      v-if=\"props.enableAddGroupButton\"\n      :items=\"emptyGroup\"\n      :get-item-key=\"(group) => group.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"() => true\"\n      :disableDragging=\"true\"\n      :disableRemoving=\"true\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n      dropzone=\"true\"\n      @drop=\"handleDropToNewGroup\"\n      @dragover=\"dragOver\"\n    >\n      <template #item-title>Filter group</template>\n      <template #item-content>\n        <div v-if=\"enableDnd\" :class=\"$style.dropzone\">\n          <div>Drop dimensions here</div>\n        </div>\n        <slot v-else name=\"add-group-buttons\">\n          <PlBtnSecondary icon=\"add\" @click=\"addGroup(firstColumnId)\"> Add filter </PlBtnSecondary>\n        </slot>\n      </template>\n    </PlElementList>\n  </div>\n</template>\n<style module>\n.filterGroup {\n  background: var(--bg-base-light);\n}\n.filterGroup:hover {\n  background: rgba(99, 224, 36, 0.12);\n}\n.filterGroupTitle {\n  background: none;\n}\n.filterGroupContent {\n  padding: 4px 24px 24px 24px;\n}\n.groupContent {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.notCheckbox {\n  margin: 4px 0;\n}\n.dropzone {\n  border-radius: 6px;\n  border: 1.5px dashed var(--color-div-grey);\n  color: var(--txt-03);\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  height: 40px;\n  cursor: default;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.buttonWrapper {\n  margin-top: 8px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\n:global(.sortable-chosen) .buttonWrapper {\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAdvancedFilter.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends RootFilter\">\nimport { PlBtnSecondary, PlCheckbox, PlElementList } from \"@milaboratories/uikit\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { produce } from \"immer\";\nimport { computed } from \"vue\";\nimport FilterEditor from \"./FilterEditor.vue\";\nimport OperandButton from \"./OperandButton.vue\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport type {\n  CommonFilter,\n  EditableFilter,\n  NodeFilter,\n  Operand,\n  PlAdvancedFilterColumnId,\n  RootFilter,\n  SourceOptionInfo,\n} from \"./types\";\nimport { createNewGroup, getNewId, isValidColumnId } from \"./utils\";\n\nconst props = withDefaults(\n  defineProps<{\n    filters: T;\n    onUpdateFilters: (filters: T) => void;\n    /** List of ids of sources (columns, axes) that can be selected in filters */\n    options: SourceOptionInfo[];\n    /** List of supported filter types */\n    supportedFilters?: typeof SUPPORTED_FILTER_TYPES;\n    /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */\n    enableDnd?: boolean;\n    /** If true - \"Add group\" button is shown below the filter groups */\n    enableAddGroupButton?: boolean;\n    /** If true - eye icon is shown per group to toggle suppression */\n    enableToggling?: boolean;\n    /** Function to determine if a filter is pinned */\n    isPinned?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a filter is removable */\n    isRemovable?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a filter is draggable */\n    isDraggable?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a group is complete */\n    isCompletedGroup?: (group: NodeFilter, index: number) => boolean;\n    /** Loading function for unique values for Equal/InSet filters and fixed axes options. */\n    getSuggestOptions: (params: {\n      columnId: PlAdvancedFilterColumnId;\n      axisIdx?: number;\n      searchStr: string;\n      searchType: \"value\" | \"label\";\n    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  }>(),\n  {\n    supportedFilters: () => SUPPORTED_FILTER_TYPES,\n    isCompletedGroup: () => false,\n    isPinned: () => false,\n    isRemovable: () => true,\n    isDraggable: () => true,\n\n    getSuggestModel: undefined,\n\n    enableDnd: false,\n    enableAddGroupButton: false,\n    enableToggling: false,\n  },\n);\nconst produceFiltersUpdate = (updater: (draft: T) => void) => {\n  props.onUpdateFilters(produce(props.filters, updater));\n};\n\nconst firstColumnId = computed(() => props.options[0]?.id);\nconst emptyGroup: NodeFilter[] = [\n  {\n    id: -1,\n    type: \"and\",\n    filters: [],\n    isExpanded: true,\n  },\n];\n\nconst rootFilters = computed({\n  get: () => props.filters.filters,\n  set: (filters) => props.onUpdateFilters({ ...props.filters, filters: filters }),\n});\n\nfunction getRootGroups() {\n  if (props.filters.type !== \"or\" && props.filters.type !== \"and\") {\n    throw new Error('Invalid model structure, expected root to be \"or\" or \"and\" group');\n  }\n  return props.filters.filters;\n}\n\nfunction getDraftGroupContent(\n  draft: RootFilter,\n  idx: number,\n): Exclude<NodeFilter, { type: \"not\" }> {\n  const group = draft.filters[idx];\n  if (group.type === \"not\") {\n    if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n      throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n    }\n    return group.filter;\n  }\n  if (group.type !== \"and\" && group.type !== \"or\") {\n    throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n  }\n  return group;\n}\n\nfunction getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: \"not\" }> {\n  return item.type === \"not\"\n    ? (item.filter as Exclude<T, { type: \"not\" }>)\n    : (item as Exclude<T, { type: \"not\" }>);\n}\n\nfunction addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = getDraftGroupContent(draft, groupIdx);\n    group.filters.push({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: selectedSourceId,\n      id: getNewId(),\n      isExpanded: true,\n    } as CommonFilter);\n  });\n}\n\nfunction removeFilterFromGroup(groupIdx: number, filterIdx: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = getDraftGroupContent(draft, groupIdx);\n    if (group.filters.length === 1 && filterIdx === 0) {\n      draft.filters.splice(groupIdx, 1);\n    } else {\n      group.filters.splice(filterIdx, 1);\n    }\n  });\n}\n\nfunction inverseRootNode(groupIdx: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = draft.filters[groupIdx];\n    if (group.type === \"not\") {\n      if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n        throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n      }\n      draft.filters[groupIdx] = {\n        ...draft.filters[groupIdx],\n        ...group.filter,\n      };\n    } else {\n      const type = draft.filters[groupIdx].type;\n      if (type !== \"and\" && type !== \"or\" && type !== \"not\") {\n        throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n      }\n      draft.filters[groupIdx] = {\n        ...draft.filters[groupIdx],\n        id: getNewId(),\n        type: \"not\",\n        filter: draft.filters[groupIdx],\n      };\n    }\n  });\n}\n\nfunction addGroup(selectedSourceId: PlAdvancedFilterColumnId) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters.push(createNewGroup(selectedSourceId));\n  });\n}\n\nfunction updateFilter(groupIdx: number, filterIdx: number, updatedFilter: EditableFilter) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    getDraftGroupContent(draft, groupIdx).filters[filterIdx] = updatedFilter as CommonFilter;\n  });\n}\n\nfunction handleDropToExistingGroup(groupIdx: number, event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addColumnToGroup(groupIdx, draggedId);\n    }\n  }\n}\n\nfunction handleDropToNewGroup(event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addGroup(draggedId);\n    }\n  }\n}\n\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction toggleExpand(_: NodeFilter, index: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters[index].isExpanded = !draft.filters[index].isExpanded;\n  });\n}\n\nfunction toggleSuppress(_: NodeFilter, index: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters[index].isSuppressed = !draft.filters[index].isSuppressed;\n  });\n}\n\nfunction changeGroupOperand(index: number, v: Operand) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    getDraftGroupContent(draft, index).type = v;\n  });\n}\n\nfunction changeRootOperand(v: Operand) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.type = v;\n  });\n}\n\nfunction validateFilter<T extends CommonFilter>(item: T): EditableFilter {\n  if (item.type === \"and\" || item.type === \"or\" || item.type === \"not\") {\n    throw new Error(\"Invalid filter structure, expected leaf filter\");\n  }\n\n  return item as EditableFilter;\n}\n</script>\n<template>\n  <div>\n    <PlElementList\n      v-model:items=\"rootFilters\"\n      :get-item-key=\"(filter) => filter.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"(filter) => filter.isExpanded === true\"\n      :on-expand=\"toggleExpand\"\n      :is-toggled=\"(item) => item.isSuppressed === true\"\n      :on-toggle=\"toggleSuppress\"\n      :is-pinned=\"(item, index) => props.isPinned?.(item, index) === true\"\n      :is-pinnable=\"() => false\"\n      :is-removable=\"(item, index) => props.isRemovable?.(item, index) === true\"\n      :is-draggable=\"(item, index) => props.isDraggable?.(item, index) === true\"\n      :disable-toggling=\"props.enableToggling !== true\"\n      :disable-dragging=\"false\"\n      :disable-removing=\"false\"\n    >\n      <template #item-title=\"{ item, index }\">\n        <slot name=\"group-title\" :item=\"item\" :index=\"index\">Filter group</slot>\n      </template>\n      <template #item-content=\"{ item, index }\">\n        <div\n          :class=\"[\n            $style.groupContent,\n            {\n              [$style.suppressedLabel]: item.isSuppressed,\n            },\n          ]\"\n          dropzone=\"true\"\n          @drop=\"(event) => handleDropToExistingGroup(index, event)\"\n          @dragover=\"dragOver\"\n        >\n          <PlCheckbox\n            :model-value=\"item.type === 'not'\"\n            :class=\"$style.notCheckbox\"\n            @update:model-value=\"inverseRootNode(index)\"\n          >\n            Filter Out\n          </PlCheckbox>\n          <template v-for=\"(_, filterIdx) in getNotContent(item).filters\" :key=\"filterIdx\">\n            <FilterEditor\n              :filter=\"validateFilter(getNotContent(item).filters[filterIdx])\"\n              :operand=\"getNotContent(item).type\"\n              :column-options=\"options\"\n              :supported-filters=\"props.supportedFilters\"\n              :get-suggest-options=\"props.getSuggestOptions\"\n              :enable-dnd=\"Boolean(props.enableDnd)\"\n              :is-last=\"filterIdx === getNotContent(item).filters.length - 1\"\n              @delete=\"() => removeFilterFromGroup(index, filterIdx)\"\n              @update-filter=\"(value) => updateFilter(index, filterIdx, value)\"\n              @change-operand=\"(v) => changeGroupOperand(index, v)\"\n            />\n          </template>\n          <div v-if=\"props.enableDnd\" :class=\"$style.dropzone\">\n            <div>Drop dimensions here</div>\n          </div>\n          <PlBtnSecondary\n            v-else-if=\"!props.isCompletedGroup(item, index)\"\n            icon=\"add\"\n            @click=\"addColumnToGroup(index, firstColumnId)\"\n          >\n            Add filter\n          </PlBtnSecondary>\n        </div>\n      </template>\n      <template #item-after=\"{ index }\">\n        <OperandButton\n          v-if=\"props.enableAddGroupButton || index < getRootGroups().length - 1\"\n          :class=\"$style.buttonWrapper\"\n          :active=\"props.filters.type\"\n          :disabled=\"index === getRootGroups().length - 1\"\n          :on-select=\"changeRootOperand\"\n        />\n      </template>\n    </PlElementList>\n\n    <!-- Last group - always empty, just for adding new groups -->\n    <PlElementList\n      v-if=\"props.enableAddGroupButton\"\n      :items=\"emptyGroup\"\n      :get-item-key=\"(group) => group.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"() => true\"\n      :disableDragging=\"true\"\n      :disableRemoving=\"true\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n      dropzone=\"true\"\n      @drop=\"handleDropToNewGroup\"\n      @dragover=\"dragOver\"\n    >\n      <template #item-title=\"{ item, index }\">\n        <slot name=\"group-title\" :item=\"item\" :index=\"index + getRootGroups().length\"\n          >Filter group</slot\n        >\n      </template>\n      <template #item-content>\n        <div v-if=\"enableDnd\" :class=\"$style.dropzone\">\n          <div>Drop dimensions here</div>\n        </div>\n        <slot v-else name=\"add-group-buttons\">\n          <PlBtnSecondary icon=\"add\" @click=\"addGroup(firstColumnId)\"> Add filter </PlBtnSecondary>\n        </slot>\n      </template>\n    </PlElementList>\n  </div>\n</template>\n<style module>\n.filterGroup {\n  background: var(--bg-base-light);\n}\n.filterGroup:hover {\n  background: rgba(99, 224, 36, 0.12);\n}\n.filterGroupTitle {\n  background: none;\n}\n.filterGroupContent {\n  padding: 4px 24px 24px 24px;\n}\n.groupContent {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.notCheckbox {\n  margin: 4px 0;\n}\n.suppressedLabel {\n  filter: grayscale(100%);\n  pointer-events: none;\n}\n.dropzone {\n  border-radius: 6px;\n  border: 1.5px dashed var(--color-div-grey);\n  color: var(--txt-03);\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  height: 40px;\n  cursor: default;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.buttonWrapper {\n  margin-top: 8px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\n:global(.sortable-chosen) .buttonWrapper {\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.style.js

@@ -1,11 +1,12 @@
 import './PlAdvancedFilter.vue.css';var e = {
-	filterGroup: "_filterGroup_hlpl5_2",
-	filterGroupTitle: "_filterGroupTitle_hlpl5_8",
-	filterGroupContent: "_filterGroupContent_hlpl5_11",
-	groupContent: "_groupContent_hlpl5_14",
-	notCheckbox: "_notCheckbox_hlpl5_19",
-	dropzone: "_dropzone_hlpl5_22",
-	buttonWrapper: "_buttonWrapper_hlpl5_36"
+	filterGroup: "_filterGroup_1n7q5_2",
+	filterGroupTitle: "_filterGroupTitle_1n7q5_8",
+	filterGroupContent: "_filterGroupContent_1n7q5_11",
+	groupContent: "_groupContent_1n7q5_14",
+	notCheckbox: "_notCheckbox_1n7q5_19",
+	suppressedLabel: "_suppressedLabel_1n7q5_22",
+	dropzone: "_dropzone_1n7q5_26",
+	buttonWrapper: "_buttonWrapper_1n7q5_40"
 };
 //#endregion
 export { e as default };

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlAdvancedFilter.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends RootFilter\">\nimport { PlBtnSecondary, PlCheckbox, PlElementList } from \"@milaboratories/uikit\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { computed, toRaw } from \"vue\";\nimport FilterEditor from \"./FilterEditor.vue\";\nimport OperandButton from \"./OperandButton.vue\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport type {\n  CommonFilter,\n  EditableFilter,\n  NodeFilter,\n  PlAdvancedFilterColumnId,\n  RootFilter,\n  SourceOptionInfo,\n} from \"./types\";\nimport { createNewGroup, getNewId, isValidColumnId } from \"./utils\";\n\nconst model = defineModel<T>(\"filters\", { required: true });\n\nconst props = withDefaults(\n  defineProps<{\n    /** List of ids of sources (columns, axes) that can be selected in filters */\n    items: SourceOptionInfo[];\n    /** List of supported filter types */\n    supportedFilters?: typeof SUPPORTED_FILTER_TYPES;\n    /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */\n    enableDnd?: boolean;\n    /** If true - \"Add group\" button is shown below the filter groups */\n    enableAddGroupButton?: boolean;\n    /** Loading function for unique values for Equal/InSet filters and fixed axes options. */\n    getSuggestOptions: (params: {\n      columnId: PlAdvancedFilterColumnId;\n      axisIdx?: number;\n      searchStr: string;\n      searchType: \"value\" | \"label\";\n    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  }>(),\n  {\n    supportedFilters: () => SUPPORTED_FILTER_TYPES,\n    getSuggestModel: undefined,\n\n    enableDnd: false,\n    enableAddGroupButton: false,\n  },\n);\n\nconst firstColumnId = computed(() => props.items[0]?.id);\nconst emptyGroup: NodeFilter[] = [\n  {\n    id: -1,\n    type: \"and\",\n    filters: [],\n    isExpanded: true,\n  },\n];\n\nfunction getRootGroups() {\n  if (model.value.type !== \"or\" && model.value.type !== \"and\") {\n    throw new Error('Invalid model structure, expected root to be \"or\" or \"and\" group');\n  }\n  return model.value.filters;\n}\n\nfunction getRootGroup(idx: number): NodeFilter {\n  const groups = getRootGroups();\n  const group = groups[idx];\n  if (group.type !== \"and\" && group.type !== \"or\" && group.type !== \"not\") {\n    throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n  }\n  return group;\n}\n\nfunction getRootGroupContent(idx: number): Exclude<NodeFilter, { type: \"not\" }> {\n  const group = getRootGroup(idx);\n\n  if (group.type !== \"not\") {\n    return group;\n  }\n\n  if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n    throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n  }\n\n  return group.filter;\n}\n\nfunction addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {\n  const group = getRootGroupContent(groupIdx);\n\n  group.filters.push({\n    ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n    column: selectedSourceId,\n    id: getNewId(),\n    isExpanded: true,\n  } as CommonFilter);\n}\n\nfunction removeFilterFromGroup(groupIdx: number, filterIdx: number) {\n  const group = getRootGroupContent(groupIdx);\n\n  if (group.filters.length === 1 && filterIdx === 0) {\n    removeGroup(groupIdx);\n  } else {\n    group.filters.splice(filterIdx, 1);\n  }\n}\nfunction inverseRootNode(groupIdx: number) {\n  const groups = getRootGroups();\n  const group = groups[groupIdx];\n  if (group.type === \"not\") {\n    if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n      throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n    }\n    groups[groupIdx] = group.filter;\n  } else {\n    const type = groups[groupIdx].type;\n    if (type !== \"and\" && type !== \"or\" && type !== \"not\") {\n      throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n    }\n\n    groups[groupIdx] = {\n      id: getNewId(),\n      isExpanded: true,\n      type: \"not\",\n      filter: groups[groupIdx],\n    };\n  }\n}\n\nfunction getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: \"not\" }> {\n  return item.type === \"not\"\n    ? (item.filter as Exclude<T, { type: \"not\" }>)\n    : (item as Exclude<T, { type: \"not\" }>);\n}\n\nfunction removeGroup(groupIdx: number) {\n  const groups = getRootGroups();\n  groups.splice(groupIdx, 1);\n}\nfunction addGroup(selectedSourceId: PlAdvancedFilterColumnId) {\n  const newGroup = createNewGroup(selectedSourceId);\n  const groups = getRootGroups();\n  groups.push(newGroup);\n}\n\nfunction handleDropToExistingGroup(groupIdx: number, event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addColumnToGroup(groupIdx, draggedId);\n    }\n  }\n}\nfunction handleDropToNewGroup(event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addGroup(draggedId);\n    }\n  }\n}\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction validateFilter<T extends CommonFilter>(item: T): EditableFilter {\n  if (item.type === \"and\" || item.type === \"or\" || item.type === \"not\") {\n    throw new Error(\"Invalid filter structure, expected leaf filter\");\n  }\n\n  return item as EditableFilter;\n}\n\nfunction updateFilter(filters: CommonFilter[], idx: number, updatedFilter: EditableFilter) {\n  filters[idx] = toRaw(updatedFilter as CommonFilter);\n}\n</script>\n<template>\n  <div>\n    <PlElementList\n      v-model:items=\"model.filters\"\n      :get-item-key=\"(filter) => filter.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"(filter) => filter.isExpanded === true\"\n      :on-expand=\"\n        (group) => {\n          group.isExpanded = !group.isExpanded;\n        }\n      \"\n      :disableDragging=\"false\"\n      :disableRemoving=\"false\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n    >\n      <template #item-title> Filter group </template>\n      <template #item-content=\"{ item, index }\">\n        <div\n          :class=\"$style.groupContent\"\n          dropzone=\"true\"\n          @drop=\"(event) => handleDropToExistingGroup(index, event)\"\n          @dragover=\"dragOver\"\n        >\n          <PlCheckbox\n            :model-value=\"item.type === 'not'\"\n            :class=\"$style.notCheckbox\"\n            @update:model-value=\"inverseRootNode(index)\"\n          >\n            Filter Out\n          </PlCheckbox>\n          <template v-for=\"(_, filterIdx) in getNotContent(item).filters\" :key=\"filterIdx\">\n            <FilterEditor\n              :filter=\"validateFilter(getNotContent(item).filters[filterIdx])\"\n              :operand=\"getNotContent(item).type\"\n              :column-options=\"items\"\n              :supported-filters=\"props.supportedFilters\"\n              :get-suggest-options=\"props.getSuggestOptions\"\n              :enable-dnd=\"Boolean(props.enableDnd)\"\n              :is-last=\"filterIdx === getNotContent(item).filters.length - 1\"\n              :on-change-operand=\"(v) => (getNotContent(item).type = v)\"\n              :on-delete=\"() => removeFilterFromGroup(index, filterIdx)\"\n              @update:filter=\"\n                (value) => updateFilter(getNotContent(item).filters, filterIdx, value)\n              \"\n            />\n          </template>\n          <div v-if=\"props.enableDnd\" :class=\"$style.dropzone\">\n            <div>Drop dimensions here</div>\n          </div>\n          <PlBtnSecondary v-else icon=\"add\" @click=\"addColumnToGroup(index, firstColumnId)\">\n            Add filter\n          </PlBtnSecondary>\n        </div>\n      </template>\n      <template #item-after=\"{ index }\">\n        <OperandButton\n          v-if=\"props.enableAddGroupButton || index < getRootGroups().length - 1\"\n          :class=\"$style.buttonWrapper\"\n          :active=\"model.type\"\n          :disabled=\"index === getRootGroups().length - 1\"\n          :on-select=\"(v) => (model.type = v)\"\n        />\n      </template>\n    </PlElementList>\n\n    <!-- Last group - always empty, just for adding new groups -->\n    <PlElementList\n      v-if=\"props.enableAddGroupButton\"\n      :items=\"emptyGroup\"\n      :get-item-key=\"(group) => group.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"() => true\"\n      :disableDragging=\"true\"\n      :disableRemoving=\"true\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n      dropzone=\"true\"\n      @drop=\"handleDropToNewGroup\"\n      @dragover=\"dragOver\"\n    >\n      <template #item-title>Filter group</template>\n      <template #item-content>\n        <div v-if=\"enableDnd\" :class=\"$style.dropzone\">\n          <div>Drop dimensions here</div>\n        </div>\n        <slot v-else name=\"add-group-buttons\">\n          <PlBtnSecondary icon=\"add\" @click=\"addGroup(firstColumnId)\"> Add filter </PlBtnSecondary>\n        </slot>\n      </template>\n    </PlElementList>\n  </div>\n</template>\n<style module>\n.filterGroup {\n  background: var(--bg-base-light);\n}\n.filterGroup:hover {\n  background: rgba(99, 224, 36, 0.12);\n}\n.filterGroupTitle {\n  background: none;\n}\n.filterGroupContent {\n  padding: 4px 24px 24px 24px;\n}\n.groupContent {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.notCheckbox {\n  margin: 4px 0;\n}\n.dropzone {\n  border-radius: 6px;\n  border: 1.5px dashed var(--color-div-grey);\n  color: var(--txt-03);\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  height: 40px;\n  cursor: default;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.buttonWrapper {\n  margin-top: 8px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\n:global(.sortable-chosen) .buttonWrapper {\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"PlAdvancedFilter.vue_vue_type_style_index_0_lang.module.js","names":[],"sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends RootFilter\">\nimport { PlBtnSecondary, PlCheckbox, PlElementList } from \"@milaboratories/uikit\";\nimport type { ListOptionBase } from \"@platforma-sdk/model\";\nimport { produce } from \"immer\";\nimport { computed } from \"vue\";\nimport FilterEditor from \"./FilterEditor.vue\";\nimport OperandButton from \"./OperandButton.vue\";\nimport { DEFAULT_FILTER_TYPE, DEFAULT_FILTERS, SUPPORTED_FILTER_TYPES } from \"./constants\";\nimport type {\n  CommonFilter,\n  EditableFilter,\n  NodeFilter,\n  Operand,\n  PlAdvancedFilterColumnId,\n  RootFilter,\n  SourceOptionInfo,\n} from \"./types\";\nimport { createNewGroup, getNewId, isValidColumnId } from \"./utils\";\n\nconst props = withDefaults(\n  defineProps<{\n    filters: T;\n    onUpdateFilters: (filters: T) => void;\n    /** List of ids of sources (columns, axes) that can be selected in filters */\n    options: SourceOptionInfo[];\n    /** List of supported filter types */\n    supportedFilters?: typeof SUPPORTED_FILTER_TYPES;\n    /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */\n    enableDnd?: boolean;\n    /** If true - \"Add group\" button is shown below the filter groups */\n    enableAddGroupButton?: boolean;\n    /** If true - eye icon is shown per group to toggle suppression */\n    enableToggling?: boolean;\n    /** Function to determine if a filter is pinned */\n    isPinned?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a filter is removable */\n    isRemovable?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a filter is draggable */\n    isDraggable?: (item: NodeFilter, index: number) => boolean;\n    /** Function to determine if a group is complete */\n    isCompletedGroup?: (group: NodeFilter, index: number) => boolean;\n    /** Loading function for unique values for Equal/InSet filters and fixed axes options. */\n    getSuggestOptions: (params: {\n      columnId: PlAdvancedFilterColumnId;\n      axisIdx?: number;\n      searchStr: string;\n      searchType: \"value\" | \"label\";\n    }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;\n  }>(),\n  {\n    supportedFilters: () => SUPPORTED_FILTER_TYPES,\n    isCompletedGroup: () => false,\n    isPinned: () => false,\n    isRemovable: () => true,\n    isDraggable: () => true,\n\n    getSuggestModel: undefined,\n\n    enableDnd: false,\n    enableAddGroupButton: false,\n    enableToggling: false,\n  },\n);\nconst produceFiltersUpdate = (updater: (draft: T) => void) => {\n  props.onUpdateFilters(produce(props.filters, updater));\n};\n\nconst firstColumnId = computed(() => props.options[0]?.id);\nconst emptyGroup: NodeFilter[] = [\n  {\n    id: -1,\n    type: \"and\",\n    filters: [],\n    isExpanded: true,\n  },\n];\n\nconst rootFilters = computed({\n  get: () => props.filters.filters,\n  set: (filters) => props.onUpdateFilters({ ...props.filters, filters: filters }),\n});\n\nfunction getRootGroups() {\n  if (props.filters.type !== \"or\" && props.filters.type !== \"and\") {\n    throw new Error('Invalid model structure, expected root to be \"or\" or \"and\" group');\n  }\n  return props.filters.filters;\n}\n\nfunction getDraftGroupContent(\n  draft: RootFilter,\n  idx: number,\n): Exclude<NodeFilter, { type: \"not\" }> {\n  const group = draft.filters[idx];\n  if (group.type === \"not\") {\n    if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n      throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n    }\n    return group.filter;\n  }\n  if (group.type !== \"and\" && group.type !== \"or\") {\n    throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n  }\n  return group;\n}\n\nfunction getNotContent<T extends CommonFilter>(item: T): Exclude<T, { type: \"not\" }> {\n  return item.type === \"not\"\n    ? (item.filter as Exclude<T, { type: \"not\" }>)\n    : (item as Exclude<T, { type: \"not\" }>);\n}\n\nfunction addColumnToGroup(groupIdx: number, selectedSourceId: PlAdvancedFilterColumnId) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = getDraftGroupContent(draft, groupIdx);\n    group.filters.push({\n      ...DEFAULT_FILTERS[DEFAULT_FILTER_TYPE],\n      column: selectedSourceId,\n      id: getNewId(),\n      isExpanded: true,\n    } as CommonFilter);\n  });\n}\n\nfunction removeFilterFromGroup(groupIdx: number, filterIdx: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = getDraftGroupContent(draft, groupIdx);\n    if (group.filters.length === 1 && filterIdx === 0) {\n      draft.filters.splice(groupIdx, 1);\n    } else {\n      group.filters.splice(filterIdx, 1);\n    }\n  });\n}\n\nfunction inverseRootNode(groupIdx: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    const group = draft.filters[groupIdx];\n    if (group.type === \"not\") {\n      if (group.filter.type !== \"and\" && group.filter.type !== \"or\") {\n        throw new Error('Invalid group structure, expected \"and\" or \"or\" group inside \"not\"');\n      }\n      draft.filters[groupIdx] = {\n        ...draft.filters[groupIdx],\n        ...group.filter,\n      };\n    } else {\n      const type = draft.filters[groupIdx].type;\n      if (type !== \"and\" && type !== \"or\" && type !== \"not\") {\n        throw new Error('Invalid group structure, expected \"and\", \"or\" or \"not\" group');\n      }\n      draft.filters[groupIdx] = {\n        ...draft.filters[groupIdx],\n        id: getNewId(),\n        type: \"not\",\n        filter: draft.filters[groupIdx],\n      };\n    }\n  });\n}\n\nfunction addGroup(selectedSourceId: PlAdvancedFilterColumnId) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters.push(createNewGroup(selectedSourceId));\n  });\n}\n\nfunction updateFilter(groupIdx: number, filterIdx: number, updatedFilter: EditableFilter) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    getDraftGroupContent(draft, groupIdx).filters[filterIdx] = updatedFilter as CommonFilter;\n  });\n}\n\nfunction handleDropToExistingGroup(groupIdx: number, event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addColumnToGroup(groupIdx, draggedId);\n    }\n  }\n}\n\nfunction handleDropToNewGroup(event: DragEvent) {\n  const dataTransfer = event.dataTransfer;\n  if (dataTransfer?.getData(\"text/plain\")) {\n    const draggedId = dataTransfer.getData(\"text/plain\");\n    if (isValidColumnId(draggedId)) {\n      addGroup(draggedId);\n    }\n  }\n}\n\nfunction dragOver(event: DragEvent) {\n  event.preventDefault();\n}\n\nfunction toggleExpand(_: NodeFilter, index: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters[index].isExpanded = !draft.filters[index].isExpanded;\n  });\n}\n\nfunction toggleSuppress(_: NodeFilter, index: number) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.filters[index].isSuppressed = !draft.filters[index].isSuppressed;\n  });\n}\n\nfunction changeGroupOperand(index: number, v: Operand) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    getDraftGroupContent(draft, index).type = v;\n  });\n}\n\nfunction changeRootOperand(v: Operand) {\n  produceFiltersUpdate((draft: RootFilter) => {\n    draft.type = v;\n  });\n}\n\nfunction validateFilter<T extends CommonFilter>(item: T): EditableFilter {\n  if (item.type === \"and\" || item.type === \"or\" || item.type === \"not\") {\n    throw new Error(\"Invalid filter structure, expected leaf filter\");\n  }\n\n  return item as EditableFilter;\n}\n</script>\n<template>\n  <div>\n    <PlElementList\n      v-model:items=\"rootFilters\"\n      :get-item-key=\"(filter) => filter.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"(filter) => filter.isExpanded === true\"\n      :on-expand=\"toggleExpand\"\n      :is-toggled=\"(item) => item.isSuppressed === true\"\n      :on-toggle=\"toggleSuppress\"\n      :is-pinned=\"(item, index) => props.isPinned?.(item, index) === true\"\n      :is-pinnable=\"() => false\"\n      :is-removable=\"(item, index) => props.isRemovable?.(item, index) === true\"\n      :is-draggable=\"(item, index) => props.isDraggable?.(item, index) === true\"\n      :disable-toggling=\"props.enableToggling !== true\"\n      :disable-dragging=\"false\"\n      :disable-removing=\"false\"\n    >\n      <template #item-title=\"{ item, index }\">\n        <slot name=\"group-title\" :item=\"item\" :index=\"index\">Filter group</slot>\n      </template>\n      <template #item-content=\"{ item, index }\">\n        <div\n          :class=\"[\n            $style.groupContent,\n            {\n              [$style.suppressedLabel]: item.isSuppressed,\n            },\n          ]\"\n          dropzone=\"true\"\n          @drop=\"(event) => handleDropToExistingGroup(index, event)\"\n          @dragover=\"dragOver\"\n        >\n          <PlCheckbox\n            :model-value=\"item.type === 'not'\"\n            :class=\"$style.notCheckbox\"\n            @update:model-value=\"inverseRootNode(index)\"\n          >\n            Filter Out\n          </PlCheckbox>\n          <template v-for=\"(_, filterIdx) in getNotContent(item).filters\" :key=\"filterIdx\">\n            <FilterEditor\n              :filter=\"validateFilter(getNotContent(item).filters[filterIdx])\"\n              :operand=\"getNotContent(item).type\"\n              :column-options=\"options\"\n              :supported-filters=\"props.supportedFilters\"\n              :get-suggest-options=\"props.getSuggestOptions\"\n              :enable-dnd=\"Boolean(props.enableDnd)\"\n              :is-last=\"filterIdx === getNotContent(item).filters.length - 1\"\n              @delete=\"() => removeFilterFromGroup(index, filterIdx)\"\n              @update-filter=\"(value) => updateFilter(index, filterIdx, value)\"\n              @change-operand=\"(v) => changeGroupOperand(index, v)\"\n            />\n          </template>\n          <div v-if=\"props.enableDnd\" :class=\"$style.dropzone\">\n            <div>Drop dimensions here</div>\n          </div>\n          <PlBtnSecondary\n            v-else-if=\"!props.isCompletedGroup(item, index)\"\n            icon=\"add\"\n            @click=\"addColumnToGroup(index, firstColumnId)\"\n          >\n            Add filter\n          </PlBtnSecondary>\n        </div>\n      </template>\n      <template #item-after=\"{ index }\">\n        <OperandButton\n          v-if=\"props.enableAddGroupButton || index < getRootGroups().length - 1\"\n          :class=\"$style.buttonWrapper\"\n          :active=\"props.filters.type\"\n          :disabled=\"index === getRootGroups().length - 1\"\n          :on-select=\"changeRootOperand\"\n        />\n      </template>\n    </PlElementList>\n\n    <!-- Last group - always empty, just for adding new groups -->\n    <PlElementList\n      v-if=\"props.enableAddGroupButton\"\n      :items=\"emptyGroup\"\n      :get-item-key=\"(group) => group.id\"\n      :item-class=\"$style.filterGroup\"\n      :item-class-content=\"$style.filterGroupContent\"\n      :item-class-title=\"$style.filterGroupTitle\"\n      :is-expanded=\"() => true\"\n      :disableDragging=\"true\"\n      :disableRemoving=\"true\"\n      :disableToggling=\"true\"\n      :disablePinning=\"true\"\n      dropzone=\"true\"\n      @drop=\"handleDropToNewGroup\"\n      @dragover=\"dragOver\"\n    >\n      <template #item-title=\"{ item, index }\">\n        <slot name=\"group-title\" :item=\"item\" :index=\"index + getRootGroups().length\"\n          >Filter group</slot\n        >\n      </template>\n      <template #item-content>\n        <div v-if=\"enableDnd\" :class=\"$style.dropzone\">\n          <div>Drop dimensions here</div>\n        </div>\n        <slot v-else name=\"add-group-buttons\">\n          <PlBtnSecondary icon=\"add\" @click=\"addGroup(firstColumnId)\"> Add filter </PlBtnSecondary>\n        </slot>\n      </template>\n    </PlElementList>\n  </div>\n</template>\n<style module>\n.filterGroup {\n  background: var(--bg-base-light);\n}\n.filterGroup:hover {\n  background: rgba(99, 224, 36, 0.12);\n}\n.filterGroupTitle {\n  background: none;\n}\n.filterGroupContent {\n  padding: 4px 24px 24px 24px;\n}\n.groupContent {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.notCheckbox {\n  margin: 4px 0;\n}\n.suppressedLabel {\n  filter: grayscale(100%);\n  pointer-events: none;\n}\n.dropzone {\n  border-radius: 6px;\n  border: 1.5px dashed var(--color-div-grey);\n  color: var(--txt-03);\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  height: 40px;\n  cursor: default;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.buttonWrapper {\n  margin-top: 8px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\n:global(.sortable-chosen) .buttonWrapper {\n  visibility: hidden;\n}\n</style>\n"],"mappings":""}

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.vue.css

@@ -1 +1 @@
-._filterGroup_hlpl5_2{background:var(--bg-base-light)}._filterGroup_hlpl5_2:hover{background:#63e0241f}._filterGroupTitle_hlpl5_8{background:0 0}._filterGroupContent_hlpl5_11{padding:4px 24px 24px}._groupContent_hlpl5_14{flex-direction:column;gap:12px;display:flex}._notCheckbox_hlpl5_19{margin:4px 0}._dropzone_hlpl5_22{border:1.5px dashed var(--color-div-grey);color:var(--txt-03);cursor:default;border-radius:6px;justify-content:center;align-items:center;height:40px;font-family:Manrope;font-size:14px;font-style:normal;font-weight:500;display:flex}._buttonWrapper_hlpl5_36{align-items:center;height:56px;margin-top:8px;display:flex}.sortable-chosen ._buttonWrapper_hlpl5_36{visibility:hidden}
+._filterGroup_1n7q5_2{background:var(--bg-base-light)}._filterGroup_1n7q5_2:hover{background:#63e0241f}._filterGroupTitle_1n7q5_8{background:0 0}._filterGroupContent_1n7q5_11{padding:4px 24px 24px}._groupContent_1n7q5_14{flex-direction:column;gap:12px;display:flex}._notCheckbox_1n7q5_19{margin:4px 0}._suppressedLabel_1n7q5_22{filter:grayscale();pointer-events:none}._dropzone_1n7q5_26{border:1.5px dashed var(--color-div-grey);color:var(--txt-03);cursor:default;border-radius:6px;justify-content:center;align-items:center;height:40px;font-family:Manrope;font-size:14px;font-style:normal;font-weight:500;display:flex}._buttonWrapper_1n7q5_40{align-items:center;height:56px;margin-top:8px;display:flex}.sortable-chosen ._buttonWrapper_1n7q5_40{visibility:hidden}

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.vue.d.ts

@@ -1,20 +1,28 @@
 import { ListOptionBase } from '@platforma-sdk/model';
 import { SUPPORTED_FILTER_TYPES } from './constants';
-import { PlAdvancedFilterColumnId, RootFilter, SourceOptionInfo } from './types';
+import { NodeFilter, PlAdvancedFilterColumnId, RootFilter, SourceOptionInfo } from './types';
 declare const _default: <T extends RootFilter>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:filters"?: ((value: T) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:filters"> & ({
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
         filters: T;
-    } & {
+        onUpdateFilters: (filters: T) => void;
         /** List of ids of sources (columns, axes) that can be selected in filters */
-        items: SourceOptionInfo[];
+        options: SourceOptionInfo[];
         /** List of supported filter types */
         supportedFilters?: typeof SUPPORTED_FILTER_TYPES;
         /** If true - new filter can be added by droppind element into filter group; else new column is added by button click */
         enableDnd?: boolean;
         /** If true - "Add group" button is shown below the filter groups */
         enableAddGroupButton?: boolean;
+        /** If true - eye icon is shown per group to toggle suppression */
+        enableToggling?: boolean;
+        /** Function to determine if a filter is pinned */
+        isPinned?: (item: NodeFilter, index: number) => boolean;
+        /** Function to determine if a filter is removable */
+        isRemovable?: (item: NodeFilter, index: number) => boolean;
+        /** Function to determine if a filter is draggable */
+        isDraggable?: (item: NodeFilter, index: number) => boolean;
+        /** Function to determine if a group is complete */
+        isCompletedGroup?: (group: NodeFilter, index: number) => boolean;
         /** Loading function for unique values for Equal/InSet filters and fixed axes options. */
         getSuggestOptions: (params: {
             columnId: PlAdvancedFilterColumnId;
@@ -22,13 +30,21 @@ declare const _default: <T extends RootFilter>(__VLS_props: NonNullable<Awaited<
             searchStr: string;
             searchType: "value" | "label";
         }) => ListOptionBase<string | number>[] | Promise<ListOptionBase<string | number>[]>;
-    }) & Partial<{}>> & import('vue').PublicProps;
+    } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
+        'group-title'?(_: {
+            item: NodeFilter<import('./types').RequiredMeta>;
+            index: number;
+        }): any;
+        'group-title'?(_: {
+            item: NodeFilter;
+            index: number;
+        }): any;
         'add-group-buttons'?(_: {}): any;
     };
-    emit: (evt: "update:filters", value: T) => void;
+    emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/PlAdvancedFilter/PlAdvancedFilter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlAdvancedFilter.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"names":[],"mappings":"AAqUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,OAAO,EAAwC,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC3F,OAAO,KAAK,EAIV,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EACjB,MAAM,SAAS,CAAC;yBAGA,CAAC,SAAS,UAAU,EACpC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAqfO,mBAAmB,CAAC;;;iBAjUjB,CAAC;;QAhLR,6EAA6E;eACtE,gBAAgB,EAAE;QACzB,qCAAqC;2BAClB,OAAO,sBAAsB;QAChD,wHAAwH;oBAC5G,OAAO;QACnB,oEAAoE;+BAC7C,OAAO;QAC9B,yFAAyF;2BACtE,CAAC,MAAM,EAAE;YAC1B,QAAQ,EAAE,wBAAwB,CAAC;YACnC,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;SAC/B,KAAK,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;oBAmeM,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;qCAhD+B,GAAG;;;EAoDzC,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAhgBzE,wBAggB4E;AAc5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"PlAdvancedFilter.vue.d.ts","sourceRoot":"","sources":["../../../src/components/PlAdvancedFilter/PlAdvancedFilter.vue"],"names":[],"mappings":"AAyYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK3D,OAAO,EAAwC,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAC3F,OAAO,KAAK,EAGV,UAAU,EAEV,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EACjB,MAAM,SAAS,CAAC;yBAGA,CAAC,SAAS,UAAU,EACpC,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WA6jBO,mBAAmB,CAAC;iBA3jBf,CAAC;yBACO,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI;QACrC,6EAA6E;iBACpE,gBAAgB,EAAE;QAC3B,qCAAqC;2BAClB,OAAO,sBAAsB;QAChD,wHAAwH;oBAC5G,OAAO;QACnB,oEAAoE;+BAC7C,OAAO;QAC9B,kEAAkE;yBACjD,OAAO;QACxB,kDAAkD;mBACvC,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QACvD,qDAAqD;sBACvC,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QAC1D,qDAAqD;sBACvC,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QAC1D,mDAAmD;2BAChC,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QAChE,yFAAyF;2BACtE,CAAC,MAAM,EAAE;YAC1B,QAAQ,EAAE,wBAAwB,CAAC;YACnC,OAAO,CAAC,EAAE,MAAM,CAAC;YACjB,SAAS,EAAE,MAAM,CAAC;YAClB,UAAU,EAAE,OAAO,GAAG,OAAO,CAAC;SAC/B,KAAK,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;mBAiiBM,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;;;YArDwB,GAAG;;;;YACF,GAAG;qCACG,GAAG;;UAqDtC,EAAE;EAEL,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAxkBzE,wBAwkB4E;AAe5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}