@milaboratories/uikit 2.6.0 → 2.6.2

package/dist/utils/DoubleContour.vue.js

@@ -1,16 +1,23 @@
-import e from "./DoubleContour.vue2.js";
-import { createElementBlock as r, openBlock as t, createElementVNode as s, normalizeProps as n, guardReactiveProps as a, renderSlot as c } from "vue";
-import d from "../_virtual/_plugin-vue_export-helper.js";
-const l = { class: "double-contour" };
-function p(o, i, m, u, f, _) {
-  return t(), r("div", l, [
-    s("div", n(a(o.$attrs)), [
-      c(o.$slots, "default")
-    ], 16)
-  ]);
-}
-const h = /* @__PURE__ */ d(e, [["render", p]]);
+import { defineComponent as o, createElementBlock as t, openBlock as r, normalizeClass as n, createElementVNode as s, normalizeProps as a, guardReactiveProps as l, renderSlot as i } from "vue";
+const u = {
+  inheritAttrs: !1
+}, m = /* @__PURE__ */ o({
+  ...u,
+  __name: "DoubleContour",
+  props: {
+    groupPosition: { default: void 0 }
+  },
+  setup(p) {
+    return (e, d) => (r(), t("div", {
+      class: n(["double-contour", { [e.groupPosition]: !0 }])
+    }, [
+      s("div", a(l(e.$attrs)), [
+        i(e.$slots, "default")
+      ], 16)
+    ], 2));
+  }
+});
 export {
-  h as default
+  m as default
 };
 //# sourceMappingURL=DoubleContour.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DoubleContour.vue.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_render","_ctx","_cache","$props","$setup","$data","$options","$attrs","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeProps","_guardReactiveProps"],"mappings":";;;;AAUI,SAAAA,EAAAC,GAEMC,GAZVC,GAAAC,GAAAC,GAAAC,GAUiBC;SACXC,EAAA,GAAQC,EAAA,OAAAC,GAAA;AAAA,IAAAC,EAAA,OAAAC,EAAAC,EAAAZ,EAAA,MAAA,CAAA,GAAA;AAAA;;;;;"}
+{"version":3,"file":"DoubleContour.vue.js","sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(defineProps<{\n  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n}>(), {\n  groupPosition: undefined,\n});\n</script>\n\n<script lang=\"ts\">\n\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"{ [groupPosition]: true }\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div{\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"names":["__default__"],"mappings":";AAUA,MAAAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;"}

package/dist/utils/DoubleContour.vue2.js

@@ -1,7 +1,23 @@
-const t = {
+import { defineComponent as o, createElementBlock as t, openBlock as r, normalizeClass as n, createElementVNode as s, normalizeProps as a, guardReactiveProps as l, renderSlot as i } from "vue";
+const u = {
   inheritAttrs: !1
-};
+}, m = /* @__PURE__ */ o({
+  ...u,
+  __name: "DoubleContour",
+  props: {
+    groupPosition: { default: void 0 }
+  },
+  setup(p) {
+    return (e, d) => (r(), t("div", {
+      class: n(["double-contour", { [e.groupPosition]: !0 }])
+    }, [
+      s("div", a(l(e.$attrs)), [
+        i(e.$slots, "default")
+      ], 16)
+    ], 2));
+  }
+});
 export {
-  t as default
+  m as default
 };
 //# sourceMappingURL=DoubleContour.vue2.js.map

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

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"DoubleContour.vue2.js","sources":["../../src/utils/DoubleContour.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nwithDefaults(defineProps<{\n  groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';\n}>(), {\n  groupPosition: undefined,\n});\n</script>\n\n<script lang=\"ts\">\n\nexport default {\n  inheritAttrs: false,\n};\n</script>\n\n<template>\n  <div class=\"double-contour\" :class=\"{ [groupPosition]: true }\">\n    <div v-bind=\"$attrs\">\n      <slot />\n    </div>\n  </div>\n</template>\n<style>\n.double-contour {\n  &.top > div {\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom > div {\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.right > div {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n.double-contour {\n  &.top-left > div{\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n.double-contour {\n  &.top-right > div {\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-left > div {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.bottom-right > div {\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n}\n.double-contour {\n  &.middle > div {\n    border-radius: 0;\n  }\n}\n</style>\n"],"names":["__default__"],"mappings":";AAUA,MAAAA,IAAe;AAAA,EACb,cAAc;AAChB;;;;;;;;;;;;;;;;"}

package/dist/utils/DoubleContour.vue3.js

@@ -0,0 +1,7 @@
+(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".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}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import o from "./DoubleContour.vue.js";
+
+export {
+  o as default
+};
+//# sourceMappingURL=DoubleContour.vue3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleContour.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -32,7 +32,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "canonicalize": "~2.1.0",
     "@milaboratories/helpers": "1.12.0",
-    "@platforma-sdk/model": "1.45.30"
+    "@platforma-sdk/model": "1.45.35"
   },
   "devDependencies": {
     "jsdom": "^25.0.1",
@@ -40,10 +40,10 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "typescript": "~5.6.3",
-    "@milaboratories/ts-builder": "1.0.5",
+    "@milaboratories/ts-configs": "1.0.6",
     "@milaboratories/build-configs": "1.0.8",
     "@milaboratories/eslint-config": "1.0.5",
-    "@milaboratories/ts-configs": "1.0.6"
+    "@milaboratories/ts-builder": "1.0.5"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -92,6 +92,10 @@ const props = withDefaults(
      * Formatter for the selected value if its label is absent
      */
     formatValue?: (value: M) => string;
+    /**
+     * Makes some of corners not rounded
+     * */
+    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
   }>(),
   {
     modelSearch: undefined,
@@ -107,6 +111,7 @@ const props = withDefaults(
     arrowIconLarge: undefined,
     optionSize: 'small',
     formatValue: (v: M) => String(v),
+    groupPosition: undefined,
   },
 );
 
@@ -397,7 +402,7 @@ watch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {
           />
           <div v-if="!renderedOptionsRef.length" class="nothing-found">Nothing found</div>
         </DropdownOverlay>
-        <DoubleContour class="pl-autocomplete__contour" />
+        <DoubleContour class="pl-autocomplete__contour" :group-position="groupPosition" />
       </div>
     </div>
     <div v-if="computedError" class="pl-autocomplete__error">{{ computedError }}</div>

package/src/components/PlAutocompleteMulti/PlAutocompleteMulti.vue

@@ -119,6 +119,10 @@ const props = withDefaults(
      * The text to display when no options are found.
      */
     emptyOptionsText?: string;
+    /**
+     * Makes some of corners not rounded
+     * */
+    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
   }>(),
   {
     modelValue: () => [],
@@ -131,6 +135,7 @@ const props = withDefaults(
     debounce: 300,
     emptyOptionsText: 'Nothing found',
     sourceId: undefined,
+    groupPosition: undefined,
   },
 );
 
@@ -406,7 +411,7 @@ const computedError = computed(() => {
           />
           <div v-if="!filteredOptionsRef.length && !isOptionsLoading" class="nothing-found">{{ emptyOptionsText }}</div>
         </DropdownOverlay>
-        <DoubleContour class="pl-autocomplete-multi__contour" />
+        <DoubleContour class="pl-autocomplete-multi__contour" :group-position="groupPosition" />
       </div>
     </div>
     <div v-if="computedError" class="pl-autocomplete-multi__error">{{ computedError }}</div>

package/src/components/PlDropdown/PlDropdown.vue

@@ -60,6 +60,10 @@ const props = withDefaults(
      * Error message displayed below the dropdown (optional)
      */
     error?: unknown;
+    /**
+     * Shows red border even without an error message
+     */
+    errorStatus?: boolean;
     /**
      * Placeholder text shown when no value is selected.
      */
@@ -88,12 +92,17 @@ const props = withDefaults(
      * Option list item size
      */
     optionSize?: 'small' | 'medium';
+    /**
+     * Makes some of corners not rounded
+     * */
+    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
   }>(),
   {
     label: '',
     helper: undefined,
     loadingOptionsHelper: undefined,
     error: undefined,
+    showErrorMessage: true,
     placeholder: '...',
     clearable: false,
     required: false,
@@ -102,6 +111,7 @@ const props = withDefaults(
     arrowIconLarge: undefined,
     optionSize: 'small',
     options: undefined,
+    groupPosition: undefined,
   },
 );
 
@@ -316,7 +326,7 @@ watchPostEffect(() => {
       ref="rootRef"
       :tabindex="tabindex"
       class="pl-dropdown"
-      :class="{ open: data.open, error, disabled: isDisabled }"
+      :class="{ open: data.open, error: error || errorStatus, disabled: isDisabled }"
       @keydown="handleKeydown"
       @focusout="onFocusOut"
     >
@@ -367,7 +377,7 @@ watchPostEffect(() => {
           :option-size="optionSize"
           :select-option="selectOptionWrapper"
         />
-        <DoubleContour class="pl-dropdown__contour" />
+        <DoubleContour class="pl-dropdown__contour" :group-position="groupPosition" />
       </div>
     </div>
     <div v-if="computedError" class="pl-dropdown__error">{{ computedError }}</div>

package/src/components/PlDropdownMulti/PlDropdownMulti.vue

@@ -66,6 +66,10 @@ const props = withDefaults(
      * If `true`, the dropdown component is disabled and cannot be interacted with.
      */
     disabled?: boolean;
+    /**
+     * Makes some of corners not rounded
+     * */
+    groupPosition?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle';
   }>(),
   {
     modelValue: () => [],
@@ -76,6 +80,7 @@ const props = withDefaults(
     required: false,
     disabled: false,
     options: undefined,
+    groupPosition: undefined,
   },
 );
 
@@ -308,7 +313,7 @@ watchPostEffect(() => {
           />
           <div v-if="!filteredOptionsRef.length" class="nothing-found">Nothing found</div>
         </DropdownOverlay>
-        <DoubleContour class="pl-dropdown-multi__contour" />
+        <DoubleContour class="pl-dropdown-multi__contour" :group-position="groupPosition" />
       </div>
     </div>
     <div v-if="error" class="pl-dropdown-multi__error">{{ getErrorMessage(error) }}</div>

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/PlSvg/PlSvg.vue

@@ -18,20 +18,23 @@ const uri = computedAsync(async () => {
   if (typeof props.name === 'string') return import(`../../assets/icons/icon-assets-min/${props.name}.svg?raw`).then((m) => m.default);
   return undefined;
 });
+
 const svgMeta = computed(() => (uri.value == null ? undefined : registerSvg(uri.value, props.name)));
-const styleSize = computed(() =>
-  svgMeta.value == null
-    ? undefined
-    : `--svg-width: ${getSize(props.width, svgMeta.value.defaultWidth)}; --svg-height: ${getSize(props.height, svgMeta.value.defaultHeight)};`,
-);
+
+const toPx = (value: undefined | number | string) => {
+  if (typeof value === 'number') return `${value}px`;
+  if (typeof value === 'string') return value;
+  return;
+};
+
+const styleSize = computed(() => ({
+  '--svg-width': toPx(props.width ?? svgMeta.value?.defaultWidth),
+  '--svg-height': toPx(props.height ?? svgMeta.value?.defaultHeight),
+}));
+
 const styleColor = computed(() => getStyleColor('fill', props.color));
 const styleStroke = computed(() => getStyleColor('stroke', props.stroke));
 
-function getSize(propSize: undefined | number | string, svgSize: number): string {
-  if (propSize != null) return typeof propSize === 'string' ? propSize : `${propSize}px`;
-  return `${svgSize}px`;
-}
-
 function getStyleColor(prop: 'fill' | 'stroke', color: undefined | string | string[]): undefined | string {
   if (Array.isArray(color)) {
     return color.reduce((acc, color, i) => acc + `--svg-${prop}-${i}: ${color};`, '');

package/src/components/PlTextField/PlTextField.vue

@@ -16,7 +16,7 @@ import DoubleContour from '../../utils/DoubleContour.vue';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import { useValidation } from '../../utils/useValidation';
 import { PlIcon16 } from '../PlIcon16';
-import { PlMaskIcon24 } from '../PlMaskIcon24';
+import { PlIcon24 } from '../PlIcon24';
 import { PlSvg } from '../PlSvg';
 import { PlTooltip } from '../PlTooltip';
 import './pl-text-field.scss';
@@ -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);
@@ -214,10 +218,10 @@ useLabelNotch(rootRef);
       />
       <div class="pl-text-field__append" @click="setFocusOnInput">
         <PlIcon16 v-if="canShowClearable" class="pl-text-field__clearable" name="delete-clear" @click.stop="clear" />
-        <PlMaskIcon24 v-if="type === 'password'" :name="passwordIcon" style="cursor: pointer" @click.stop="togglePasswordVisibility" />
+        <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(' ') }}