@milaboratories/uikit 2.6.1 → 2.6.3

package/src/components/PlElementList/PlElementList.vue

@@ -14,6 +14,10 @@ const props = withDefaults(
     getItemKey?: (item: T, index: number) => K;
 
     itemClass?: string | string[] | ((item: T, index: number) => string | string[]);
+    itemClassTitle?: string | string[] | ((item: T, index: number) => string | string[]);
+    itemClassBefore?: string | string[] | ((item: T, index: number) => string | string[]);
+    itemClassAfter?: string | string[] | ((item: T, index: number) => string | string[]);
+    itemClassContent?: string | string[] | ((item: T, index: number) => string | string[]);
     isActive?: (item: T, index: number) => boolean;
 
     disableDragging?: boolean;
@@ -43,6 +47,10 @@ const props = withDefaults(
     getItemKey: (item: T) => JSON.stringify(item) as K,
 
     itemClass: undefined,
+    itemClassTitle: undefined,
+    itemClassContent: undefined,
+    itemClassBefore: undefined,
+    itemClassAfter: undefined,
     isActive: undefined,
 
     disableDragging: undefined,
@@ -78,6 +86,8 @@ const emits = defineEmits<{
 const slots = defineSlots<{
   ['item-title']: (props: { item: T; index: number }) => unknown;
   ['item-content']?: (props: { item: T; index: number }) => unknown;
+  ['item-before']?: (props: { item: T; index: number }) => unknown;
+  ['item-after']?: (props: { item: T; index: number }) => unknown;
 }>();
 
 const dndSortingEnabled = computed((): boolean => {
@@ -237,12 +247,19 @@ function handleRemove(item: T, index: number) {
   itemsRef.value.splice(index, 1);
 }
 
-const getItemClass = (item: T, index: number): null | string | string[] => {
-  if (typeof props.itemClass === 'function') {
-    return props.itemClass(item, index);
-  }
-  return props.itemClass ?? null;
-};
+function getClassFunction(propsItemClass: string | string[] | ((item: T, index: number) => string | string[]) | undefined): (item: T, index: number) => null | string | string[] {
+  return (item: T, index: number): null | string | string[] => {
+    if (typeof propsItemClass === 'function') {
+      return propsItemClass(item, index);
+    }
+    return propsItemClass ?? null;
+  };
+}
+const getItemClass = getClassFunction(props.itemClass);
+const getItemClassTitle = getClassFunction(props.itemClassTitle);
+const getItemClassContent = getClassFunction(props.itemClassContent);
+const getItemClassBefore = getClassFunction(props.itemClassBefore);
+const getItemClassAfter = getClassFunction(props.itemClassAfter);
 
 </script>
 
@@ -252,6 +269,10 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
       <PlElementListItem
         v-for="(pinnedItem, pinnedIndex) in pinnedItemsRef" :key="pinnedKeysRef[pinnedIndex]"
         :class="[$style.item, getItemClass(pinnedItem, pinnedIndex)]"
+        :titleClass="getItemClassTitle(pinnedItem, pinnedIndex)"
+        :contentClass="getItemClassContent(pinnedItem, pinnedIndex)"
+        :beforeClass="getItemClassBefore(pinnedItem, pinnedIndex)"
+        :afterClass="getItemClassAfter(pinnedItem, pinnedIndex)"
 
         :index="pinnedIndex"
         :item="pinnedItem"
@@ -272,18 +293,28 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
         @pin="handlePin"
         @expand="handleExpand"
       >
+        <template v-if="slots['item-before']" #before="{ item, index }">
+          <slot :index="index" :item="item" name="item-before" />
+        </template>
         <template #title="{ item, index }">
           <slot :index="index" :item="item" name="item-title" />
         </template>
         <template v-if="slots['item-content']" #content="{ item, index }">
           <slot :index="index" :item="item" name="item-content" />
         </template>
+        <template v-if="slots['item-after']" #after="{ item, index }">
+          <slot :index="index" :item="item" name="item-after" />
+        </template>
       </PlElementListItem>
     </div>
     <div v-if="hasUnpinnedItems" ref="unpinnedContainerRef" :class="$style.list">
       <PlElementListItem
         v-for="(unpinnedItem, unpinnedIndex) in unpinnedItemsRef" :key="unpinnedKeysRef[unpinnedIndex]"
         :class="[$style.item, getItemClass(unpinnedItem, unpinnedIndex)]"
+        :titleClass="getItemClassTitle(unpinnedItem, unpinnedIndex)"
+        :contentClass="getItemClassContent(unpinnedItem, unpinnedIndex)"
+        :beforeClass="getItemClassBefore(unpinnedItem, unpinnedIndex)"
+        :afterClass="getItemClassAfter(unpinnedItem, unpinnedIndex)"
 
         :index="unpinnedIndex + (pinnedItemsRef?.length ?? 0)"
         :item="unpinnedItem"
@@ -310,6 +341,9 @@ const getItemClass = (item: T, index: number): null | string | string[] => {
         <template v-if="slots['item-content']" #content="{ item, index }">
           <slot :index="index" :item="item" name="item-content" />
         </template>
+        <template v-if="slots['item-after']" #after="{ item, index }">
+          <slot :index="index" :item="item" name="item-after" />
+        </template>
       </PlElementListItem>
     </div>
   </div>

package/src/components/PlElementList/PlElementListItem.vue

@@ -16,13 +16,22 @@ const props = defineProps<{
   isToggled: boolean;
   isPinnable: boolean;
   isPinned: boolean;
+  titleClass: string | string[] | null;
+  contentClass: string | string[] | null;
+  afterClass: string | string[] | null;
+  beforeClass: string | string[] | null;
 }>();
+defineOptions({ inheritAttrs: false });
 
 const slots = defineSlots<{
   title: (props: { item: T; index: number }) => unknown;
   content?: (props: { item: T; index: number }) => unknown;
+  after?: (props: { item: T; index: number }) => unknown;
+  before?: (props: { item: T; index: number }) => unknown;
 }>();
 const hasContentSlot = computed(() => slots['content'] !== undefined);
+const hasAfterSlot = computed(() => slots['after'] !== undefined);
+const hasBeforeSlot = computed(() => slots['before'] !== undefined);
 
 const emit = defineEmits<{
   (e: 'expand', item: T, index: number): void;
@@ -33,65 +42,73 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div
-    :class="[$style.root, {
-      [$style.active]: props.isActive,
-      [$style.pinned]: props.isPinned,
-      [$style.opened]: props.isExpanded,
-      [$style.disabled]: props.isToggled,
-    }]"
-  >
+  <div>
+    <div v-if="hasBeforeSlot" :class="beforeClass">
+      <slot name="before" :item="props.item" :index="props.index" />
+    </div>
     <div
-      :class="[$style.head, {
-        [$style.clickable]: hasContentSlot,
+      :class="[$style.root, $attrs.class, {
+        [$style.active]: props.isActive,
+        [$style.pinned]: props.isPinned,
+        [$style.opened]: props.isExpanded,
+        [$style.disabled]: props.isToggled,
       }]"
-      @click="isExpandable && emit('expand', props.item, props.index)"
     >
       <div
-        v-if="props.showDragHandle"
-        :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]"
-        :data-draggable="props.isDraggable"
+        :class="[$style.head, titleClass, {
+          [$style.clickable]: hasContentSlot,
+        }]"
+        @click="isExpandable && emit('expand', props.item, props.index)"
       >
-        <PlIcon16 name="drag-dots" />
-      </div>
-      <PlIcon16 v-if="isExpandable" :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]" name="chevron-down" />
-
-      <div :class="$style.title">
-        <slot name="title" :item="props.item" :index="props.index" />
-      </div>
-
-      <div :class="[$style.actions, $style.showOnHover]">
         <div
-          v-if="props.isToggable"
-          :class="[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]"
-          @click.stop="emit('toggle', props.item, props.index)"
+          v-if="props.showDragHandle"
+          :class="[$style.action, $style.draggable, { [$style.disable]: !props.isDraggable } ]"
+          :data-draggable="props.isDraggable"
         >
-          <PlIcon24 :name="props.isToggled === true ? 'view-hide' : 'view-show'" size="16" />
+          <PlIcon16 name="drag-dots" />
         </div>
-        <div
-          v-if="props.isPinnable"
-          :class="[$style.action, $style.clickable, {
-            [$style.disable]: !props.isPinnable,
-            [$style.activated]: props.isPinned,
-          }]"
-          @click.stop="emit('pin', props.item, props.index)"
-        >
-          <PlIcon24 name="pin" size="16" />
+        <PlIcon16 v-if="isExpandable" :class="[$style.contentChevron, { [$style.opened]: props.isExpanded }]" name="chevron-down" />
+
+        <div :class="$style.title">
+          <slot name="title" :item="props.item" :index="props.index" />
         </div>
-        <div
-          v-if="props.isRemovable"
-          :class="[$style.action, $style.clickable]"
-          @click.stop="emit('remove', props.item, props.index)"
-        >
-          <PlIcon16 name="close" />
+
+        <div :class="[$style.actions, $style.showOnHover]">
+          <div
+            v-if="props.isToggable"
+            :class="[$style.action, $style.clickable, { [$style.disable]: !props.isToggable }]"
+            @click.stop="emit('toggle', props.item, props.index)"
+          >
+            <PlIcon24 :name="props.isToggled === true ? 'view-hide' : 'view-show'" size="16" />
+          </div>
+          <div
+            v-if="props.isPinnable"
+            :class="[$style.action, $style.clickable, {
+              [$style.disable]: !props.isPinnable,
+              [$style.activated]: props.isPinned,
+            }]"
+            @click.stop="emit('pin', props.item, props.index)"
+          >
+            <PlIcon24 name="pin" size="16" />
+          </div>
+          <div
+            v-if="props.isRemovable"
+            :class="[$style.action, $style.clickable]"
+            @click.stop="emit('remove', props.item, props.index)"
+          >
+            <PlIcon16 name="close" />
+          </div>
         </div>
       </div>
+      <div
+        v-if="hasContentSlot && props.isExpanded"
+        :class="[$style.body, contentClass, { [$style.disabled]: props.isToggled }]"
+      >
+        <slot name="content" :item="props.item" :index="props.index" />
+      </div>
     </div>
-    <div
-      v-if="hasContentSlot && props.isExpanded"
-      :class="[$style.body, { [$style.disabled]: props.isToggled }]"
-    >
-      <slot name="content" :item="props.item" :index="props.index" />
+    <div v-if="hasAfterSlot" :class="afterClass">
+      <slot name="after" :item="props.item" :index="props.index" />
     </div>
   </div>
 </template>

package/src/components/PlNumberField/PlNumberField.vue

@@ -47,6 +47,8 @@ const props = withDefaults(defineProps<{
   errorMessage?: string;
   /** Additional validity check for input value that must return an error text if failed */
   validate?: (v: number) => string | undefined;
+  /** Makes some of corners not rounded */
+  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
 }>(), {
   step: 1,
   label: undefined,
@@ -57,6 +59,7 @@ const props = withDefaults(defineProps<{
   updateOnEnter: false,
   errorMessage: undefined,
   validate: undefined,
+  groupPosition: undefined,
 });
 
 const modelValue = defineModel<number | undefined>({ required: true });
@@ -239,7 +242,7 @@ const onMousedown = (ev: MouseEvent) => {
     @keydown="handleKeyPress($event)"
   >
     <div class="pl-number-field__main-wrapper d-flex">
-      <DoubleContour class="pl-number-field__contour"/>
+      <DoubleContour class="pl-number-field__contour" :group-position="groupPosition"/>
       <div
         class="pl-number-field__wrapper flex-grow d-flex flex-align-center"
         :class="{withoutArrows: !useIncrementButtons}"

package/src/components/PlTextField/PlTextField.vue

@@ -83,6 +83,10 @@ const props = defineProps<{
    * The string specifies whether the field should be a password or not, value could be "password" or undefined.
    */
   type?: 'password';
+  /**
+   * Makes some of corners not rounded
+   * */
+  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
 }>();
 
 const rootRef = ref<HTMLInputElement | undefined>(undefined);
@@ -217,7 +221,7 @@ useLabelNotch(rootRef);
         <PlIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click.stop="togglePasswordVisibility" />
         <slot name="append" />
       </div>
-      <DoubleContour class="pl-text-field__contour" />
+      <DoubleContour class="pl-text-field__contour" :group-position="groupPosition" />
     </div>
     <div v-if="hasErrors" class="pl-text-field__error">
       {{ displayErrors.join(' ') }}

package/src/composition/filters/metadata.ts

@@ -23,6 +23,27 @@ export const filterUiMetadata = {
     },
     supportedFor: isNumericValueType,
   },
+  notEqual: {
+    label: 'Col ≠ X (Not Equal)',
+    form: {
+      column: {
+        label: 'Column',
+        fieldType: 'SUniversalPColumnId',
+        defaultValue: () => undefined,
+      },
+      type: {
+        label: 'Predicate',
+        fieldType: 'FilterType',
+        defaultValue: () => 'notEqual',
+      },
+      x: {
+        label: 'X',
+        fieldType: 'number',
+        defaultValue: () => 0,
+      },
+    },
+    supportedFor: isNumericValueType,
+  },
   lessThan: {
     label: 'Col < X (Less Than)',
     form: {
@@ -450,6 +471,90 @@ export const filterUiMetadata = {
     },
     supportedFor: () => false,
   },
+  patternMatchesRegularExpression: {
+    label: 'Col ~ X (Matches Regular Expression)',
+    form: {
+      column: {
+        label: 'Column',
+        fieldType: 'SUniversalPColumnId',
+        defaultValue: () => undefined,
+      },
+      type: {
+        label: 'Predicate',
+        fieldType: 'FilterType',
+        defaultValue: () => 'patternMatchesRegularExpression',
+      },
+      value: {
+        label: 'Seq',
+        fieldType: 'string',
+        defaultValue: () => '',
+      },
+    },
+    supportedFor: isStringValueType,
+  },
+  patternFuzzyContainSubsequence: {
+    label: 'Col ~ Seq (Fuzzy Contain Subsequence)',
+    form: {
+      column: {
+        label: 'Column',
+        fieldType: 'SUniversalPColumnId',
+        defaultValue: () => undefined,
+      },
+      type: {
+        label: 'Predicate',
+        fieldType: 'FilterType',
+        defaultValue: () => 'patternFuzzyContainSubsequence',
+      },
+      value: {
+        label: 'Set',
+        fieldType: 'string',
+        defaultValue: () => '',
+      },
+    },
+    supportedFor: isStringValueType,
+  },
+  inSet: {
+    label: 'Col ∈ Set (In Set)',
+    form: {
+      column: {
+        label: 'Column',
+        fieldType: 'SUniversalPColumnId',
+        defaultValue: () => undefined,
+      },
+      type: {
+        label: 'Predicate',
+        fieldType: 'FilterType',
+        defaultValue: () => 'inSet',
+      },
+      value: {
+        fieldType: 'unknown[]',
+        label: 'Set',
+        defaultValue: () => [],
+      },
+    },
+    supportedFor: isStringValueType,
+  },
+  notInSet: {
+    label: 'Col ∉ Set (Not In Set)',
+    form: {
+      column: {
+        label: 'Column',
+        fieldType: 'SUniversalPColumnId',
+        defaultValue: () => undefined,
+      },
+      type: {
+        label: 'Predicate',
+        fieldType: 'FilterType',
+        defaultValue: () => 'notInSet',
+      },
+      value: {
+        label: 'Seq',
+        fieldType: 'unknown[]',
+        defaultValue: () => [],
+      },
+    },
+    supportedFor: isStringValueType,
+  },
 } satisfies FilterSpecMetadataRecord<FilterSpecType>;
 
 export function getFilterUiTypeOptions(columnSpec?: SimplifiedPColumnSpec) {

package/src/utils/DoubleContour.vue

@@ -1,15 +1,81 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+withDefaults(defineProps<{
+  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
+}>(), {
+  groupPosition: undefined,
+});
+</script>
 
 <script lang="ts">
+
 export default {
   inheritAttrs: false,
 };
 </script>
 
 <template>
-  <div class="double-contour">
+  <div class="double-contour" :class="{ [groupPosition]: true }">
     <div v-bind="$attrs">
       <slot />
     </div>
   </div>
 </template>
+<style>
+.double-contour {
+  &.top > div {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+.double-contour {
+  &.bottom > div {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+.double-contour {
+  &.left > div {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+.double-contour {
+  &.right > div {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+.double-contour {
+  &.top-left > div{
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+.double-contour {
+  &.top-right > div {
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+.double-contour {
+  &.bottom-left > div {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+.double-contour {
+  &.bottom-right > div {
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+  }
+}
+.double-contour {
+  &.middle > div {
+    border-radius: 0;
+  }
+}
+</style>

package/dist/utils/DoubleContour.vue2.js

@@ -1,7 +0,0 @@
-const t = {
-  inheritAttrs: !1
-};
-export {
-  t as default
-};
-//# sourceMappingURL=DoubleContour.vue2.js.map

package/dist/utils/DoubleContour.vue2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DoubleContour.vue2.js","sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup></script>\n\n<script lang=\"ts\">\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n"],"names":["_sfc_main"],"mappings":"AAGA,MAAAA,IAAe;AAAA,EACb,cAAc;AAChB;"}