@milaboratories/uikit 2.6.1 → 2.6.2

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/components/PlAccordion/ExpandTransition.vue.js

@@ -1,27 +0,0 @@
-import { defineComponent as n, createBlock as r, openBlock as a, Transition as s, withCtx as p, renderSlot as c } from "vue";
-const f = /* @__PURE__ */ n({
-  __name: "ExpandTransition",
-  setup(l) {
-    const t = (e) => {
-      e.classList.add("expand-collapse-fix"), e.style.setProperty("--component-height", e.scrollHeight + "px");
-    }, o = (e) => {
-      e.style.removeProperty("--component-height"), e.classList.remove("expand-collapse-fix");
-    };
-    return (e, i) => (a(), r(s, {
-      name: "expand-collapse",
-      onEnter: t,
-      onLeave: t,
-      onAfterEnter: o,
-      onAfterLeave: o
-    }, {
-      default: p(() => [
-        c(e.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-});
-export {
-  f as default
-};
-//# sourceMappingURL=ExpandTransition.vue.js.map

package/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACA,UAAMA,IAAU,CAACC,MAAgB;AAC/B,MAAAA,EAAG,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC7DA,EAAG,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}