@platforma-sdk/ui-vue 1.14.2 → 1.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.14.2",
+  "version": "1.14.5",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -38,7 +38,7 @@
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
     "@platforma-sdk/model": "^1.14.1",
-    "@milaboratories/uikit": "^2.2.18"
+    "@milaboratories/uikit": "^2.2.19"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",

package/src/components/PlTableFilters/PlTableFilterEntry.vue

@@ -8,6 +8,7 @@ const entry = defineModel<PlTableFiltersStateEntry>({ required: true });
 const props = defineProps<{
   column: Readonly<PTableColumnSpec>;
   options: Readonly<ListOption<PlTableFilterType>[]>;
+  disabled?: boolean;
 }>();
 const { column, options } = toRefs(props);
 </script>
@@ -17,6 +18,7 @@ const { column, options } = toRefs(props);
     <PlDropdown
       :model-value="entry.filter.type"
       :options="options"
+      :disabled="disabled"
       label="Predicate"
       @update:model-value="(type) => (entry = changeFilterType(entry, type!))"
     />
@@ -30,13 +32,28 @@ const { column, options } = toRefs(props);
         entry.filter.type === 'number_greaterThanOrEqualTo'
       "
     >
-      <PlTextField v-model="entry.filter.reference" :parse="(value: string): number => parseNumber(column, value)" label="Reference value" />
+      <PlTextField
+        v-model="entry.filter.reference"
+        :disabled="disabled"
+        :parse="(value: string): number => parseNumber(column, value)"
+        label="Reference value"
+      />
     </template>
     <template v-if="entry.filter.type === 'number_between'">
-      <PlTextField v-model="entry.filter.lowerBound" :parse="(value: string): number => parseNumber(column, value)" label="Lower bound" />
-      <PlToggleSwitch v-model="entry.filter.includeLowerBound" label="Include lower bound" />
-      <PlTextField v-model="entry.filter.upperBound" :parse="(value: string): number => parseNumber(column, value)" label="Upper bound" />
-      <PlToggleSwitch v-model="entry.filter.includeUpperBound" label="Include upper bound" />
+      <PlTextField
+        v-model="entry.filter.lowerBound"
+        :disabled="disabled"
+        :parse="(value: string): number => parseNumber(column, value)"
+        label="Lower bound"
+      />
+      <PlToggleSwitch v-model="entry.filter.includeLowerBound" :disabled="disabled" label="Include lower bound" />
+      <PlTextField
+        v-model="entry.filter.upperBound"
+        :disabled="disabled"
+        :parse="(value: string): number => parseNumber(column, value)"
+        label="Upper bound"
+      />
+      <PlToggleSwitch v-model="entry.filter.includeUpperBound" :disabled="disabled" label="Include upper bound" />
     </template>
     <template
       v-if="
@@ -46,16 +63,32 @@ const { column, options } = toRefs(props);
         entry.filter.type === 'string_doesNotContain'
       "
     >
-      <PlTextField v-model="entry.filter.reference" :parse="(value: string): string => parseString(column, value)" label="Reference value" />
+      <PlTextField
+        v-model="entry.filter.reference"
+        :disabled="disabled"
+        :parse="(value: string): string => parseString(column, value)"
+        label="Reference value"
+      />
     </template>
     <template v-if="entry.filter.type === 'string_matches' || entry.filter.type === 'string_doesNotMatch'">
-      <PlTextField v-model="entry.filter.reference" :parse="parseRegex" label="Reference value" />
+      <PlTextField v-model="entry.filter.reference" :disabled="disabled" :parse="parseRegex" label="Reference value" />
     </template>
     <template v-if="entry.filter.type === 'string_containsFuzzyMatch'">
-      <PlTextField v-model="entry.filter.reference" :parse="(value: string): string => parseString(column, value)" label="Reference value" />
-      <Slider v-model="entry.filter.maxEdits" :max="5" breakpoints label="Maximum nuber of substitutions and indels" />
-      <PlToggleSwitch v-model="entry.filter.substitutionsOnly" label="Substitutions only" />
-      <PlDropdown v-model="entry.filter.wildcard" :options="makeWildcardOptions(column, entry.filter.reference)" clearable label="Wildcard symbol" />
+      <PlTextField
+        v-model="entry.filter.reference"
+        :disabled="disabled"
+        :parse="(value: string): string => parseString(column, value)"
+        label="Reference value"
+      />
+      <Slider v-model="entry.filter.maxEdits" :max="5" :disabled="disabled" breakpoints label="Maximum nuber of substitutions and indels" />
+      <PlToggleSwitch v-model="entry.filter.substitutionsOnly" :disabled="disabled" label="Substitutions only" />
+      <PlDropdown
+        v-model="entry.filter.wildcard"
+        :disabled="disabled"
+        :options="makeWildcardOptions(column, entry.filter.reference)"
+        clearable
+        label="Wildcard symbol"
+      />
     </template>
   </div>
 </template>

package/src/components/PlTableFilters/PlTableFilters.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ListOption } from '@milaboratories/uikit';
 import { PlBtnGhost, PlIcon24, PlSlideModal, PlMaskIcon16, PlMaskIcon24 } from '@milaboratories/uikit';
-import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, ref, toRefs, watch } from 'vue';
 import type {
   PlTableFiltersModel,
   PlTableFilterType,
@@ -176,6 +176,35 @@ const toggleExpandFilter = (columnId: PlTableFilterColumnId) => {
   if (!openState[columnId]) openState[columnId] = true;
   else delete openState[columnId];
 };
+
+const scrollIsActive = ref(false);
+const filterManager = ref<HTMLElement>();
+let observer: ResizeObserver;
+onMounted(() => {
+  observer = new ResizeObserver(() => {
+    const parent = filterManager.value?.parentElement;
+    if (!parent) return;
+    scrollIsActive.value = parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth;
+  });
+  if (filterManager.value && filterManager.value.parentElement) {
+    observer.observe(filterManager.value!.parentElement);
+  }
+});
+
+watch(filterManager, (newElement, oldElement) => {
+  if (oldElement?.parentElement) {
+    observer.unobserve(oldElement.parentElement);
+  }
+  if (newElement?.parentElement) {
+    observer.observe(newElement.parentElement);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (observer !== undefined) {
+    observer.disconnect();
+  }
+});
 </script>
 
 <template>
@@ -190,11 +219,11 @@ const toggleExpandFilter = (columnId: PlTableFilterColumnId) => {
 
   <PlSlideModal v-model="showManager" :close-on-outside-click="false">
     <template #title>Manage Filters</template>
-    <div class="pl-filter-manager d-flex flex-column gap-6">
+    <div ref="filterManager" class="pl-filter-manager d-flex flex-column gap-6">
       <div
         v-for="(entry, index) in reactiveModel.state"
         :key="entry.columnId"
-        :class="{ open: openState[entry.columnId] }"
+        :class="{ open: openState[entry.columnId], disabled: entry.disabled }"
         class="pl-filter-manager__filter"
       >
         <div class="pl-filter-manager__header d-flex align-center gap-8" @click="toggleExpandFilter(entry.columnId)">
@@ -202,7 +231,7 @@ const toggleExpandFilter = (columnId: PlTableFilterColumnId) => {
             <PlMaskIcon16 name="chevron-right" />
           </div>
 
-          <div class="pl-filter-manager__title flex-grow-1 text-s">{{ getColumnName(columnsById[entry.columnId], index) }}</div>
+          <div class="pl-filter-manager__title flex-grow-1 text-s-btn">{{ getColumnName(columnsById[entry.columnId], index) }}</div>
 
           <div class="pl-filter-manager__actions d-flex gap-12">
             <div class="pl-filter-manager__toggle" @click.stop="entry.disabled = !entry.disabled">
@@ -216,10 +245,19 @@ const toggleExpandFilter = (columnId: PlTableFilterColumnId) => {
         </div>
 
         <div class="pl-filter-manager__content d-flex gap-24 p-24 flex-column">
-          <PlTableFilterEntry v-model="reactiveModel.state[index]" :column="columnsById[entry.columnId]" :options="filterOptions[entry.columnId]" />
+          <PlTableFilterEntry
+            v-model="reactiveModel.state[index]"
+            :disabled="entry.disabled"
+            :column="columnsById[entry.columnId]"
+            :options="filterOptions[entry.columnId]"
+          />
 
           <div class="d-flex justify-center">
-            <div class="pl-filter-manager__revert-btn text-s d-flex align-center gap-8" @click="resetFilter(index)">
+            <div
+              :class="{ disabled: entry.disabled }"
+              class="pl-filter-manager__revert-btn text-s-btn d-flex align-center gap-8"
+              @click="resetFilter(index)"
+            >
               Revert Settings to Default
               <PlMaskIcon24 name="reverse" />
             </div>
@@ -227,11 +265,13 @@ const toggleExpandFilter = (columnId: PlTableFilterColumnId) => {
         </div>
       </div>
 
-      <div v-if="columnOptions.length > 0" class="pl-filter-manager__add-btn" @click="showAddFilter = true">
-        <div class="pl-filter-manager__add-btn-icon">
-          <PlMaskIcon16 name="add" />
+      <div :class="{ 'pt-24': scrollIsActive }" class="pl-filter-manager__add-action-wrapper">
+        <div v-if="columnOptions.length > 0" class="pl-filter-manager__add-btn" @click="showAddFilter = true">
+          <div class="pl-filter-manager__add-btn-icon">
+            <PlMaskIcon16 name="add" />
+          </div>
+          <div class="pl-filter-manager__add-btn-title text-s-btn">Add Filter</div>
         </div>
-        <div class="pl-filter-manager__add-btn-title">Add Filter</div>
       </div>
 
       <div v-if="!filterOptionsPresent">No filters applicable</div>

package/src/components/PlTableFilters/pl-table-filters.scss

@@ -1,11 +1,20 @@
 .pl-filter-manager {
     $this: &;
 
-    &__add-btn {
-        height: 40px;
+    .text-s {
+        font-weight: 600;
+    }
+
+    &__add-action-wrapper {
         position: sticky;
         bottom: -16px;
         background-color: var(--bg-elevated-01);
+        transition: all .15s ease-in-out;
+    }
+
+    &__add-btn {
+        height: 40px;
+        background-color: var(--bg-elevated-01);
         display: flex;
         align-items: center;
         gap: 8px;
@@ -17,6 +26,12 @@
         cursor: pointer;
     }
 
+    &__add-btn:hover {
+        border-radius: 6px;
+        border: 1px dashed var(--border-color-focus, #49CC49);
+        background: rgba(99, 224, 36, 0.12);
+    }
+
     &__add-btn-title {
         flex-grow: 1;
     }
@@ -51,11 +66,29 @@
 
     &__toggle,
     &__delete {
+        display: none;
+
         .mask-24 {
             background-color: var(--ic-02);
         }
     }
 
+    &__toggle:hover {
+        .mask-24 {
+            background-color: var(--ic-01);
+        }
+    }
+
+    &__delete:hover {
+        .mask-24 {
+            background-color: var(--ic-01);
+        }
+    }
+
+    &__filter:hover &__toggle,
+    &__filter:hover &__delete {
+        display: block;
+    }
 
     &__filter {
         border-radius: 6px;
@@ -65,6 +98,18 @@
         overflow: auto;
     }
 
+    &__filter.disabled {
+
+        #{$this}__expand-icon,
+        #{$this}__title {
+            opacity: 0.3;
+        }
+    }
+
+    &__filter:hover {
+        background-color: var(--bg-elevated-01);
+    }
+
     &__filter.open {
         background-color: var(--bg-elevated-01);
 
@@ -95,4 +140,9 @@
     &__revert-btn:hover {
         background-color: var(--btn-sec-hover-grey);
     }
-}
+
+    &__revert-btn.disabled {
+        opacity: 0.3;
+        pointer-events: none;
+    }
+}