@milaboratories/uikit 2.11.6 → 2.11.8

package/dist/utils/TextLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextLabel.js","names":[],"sources":["../../src/utils/TextLabel.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.textLabel\">\n    <div :class=\"$style.label\">\n      <div :class=\"$style.labelText\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.textLabel {\n  padding: 0px 12px;\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.labelText {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label::after {\n  display: block;\n  flex: 1;\n  content: \"\";\n  height: 1px;\n  background-color: var(--border-color-div-grey);\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;aACE,EAMM,OAAA,EANA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAC3B,EAIM,OAAA,EAJA,OAAK,EAAE,EAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAEM,OAAA,EAFA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAC3B,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"TextLabel.js","names":[],"sources":["../../src/utils/TextLabel.vue"],"sourcesContent":["<template>\n  <div :class=\"$style.textLabel\">\n    <div :class=\"$style.label\">\n      <div :class=\"$style.labelText\">\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.textLabel {\n  padding: 0px 12px;\n}\n\n.label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  color: var(--txt-03);\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 16px;\n}\n\n.labelText {\n  display: inline-block;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.label::after {\n  display: block;\n  flex: 1;\n  content: \"\";\n  height: 1px;\n  background-color: var(--border-color-div-grey);\n  width: 100%;\n}\n</style>\n"],"mappings":";;;;;;aACE,EAMM,OAAA,EANA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAC3B,EAIM,OAAA,EAJA,OAAK,EAAE,EAAA,OAAO,MAAK,EAAA,EAAA,CACvB,EAEM,OAAA,EAFA,OAAK,EAAE,EAAA,OAAO,UAAS,EAAA,EAAA,CAC3B,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}

package/dist/utils/TextLabel.style.js

@@ -3,6 +3,7 @@ import './TextLabel.vue.css';var e = {
 	label: "_label_v2o3d_5",
 	labelText: "_labelText_v2o3d_15"
 };
+//#endregion
 export { e as default };
 
 //# sourceMappingURL=TextLabel.style.js.map

package/dist/utils/useLabelNotch.js

@@ -3,10 +3,8 @@ import { call as n } from "../helpers/utils.js";
 import { onChanged as r } from "../composition/utils.js";
 import { startResizeObserving as i, stopResizeObserving as a } from "../global/resizeObserver.js";
 import { onBeforeUnmount as o } from "vue";
+//#region src/utils/useLabelNotch.ts
 var s = 8, c = 4;
-/**
-* Adjust the width of the cutout on the clip path for the notched label (TextField, Dropdown)
-*/
 function l(l, u = "label") {
 	let d = /* @__PURE__ */ new Set();
 	r(() => {
@@ -21,6 +19,7 @@ function l(l, u = "label") {
 		Array.from(d.values()).map((e) => a(e));
 	});
 }
+//#endregion
 export { l as useLabelNotch };
 
 //# sourceMappingURL=useLabelNotch.js.map

package/dist/utils/useLabelNotch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLabelNotch.js","names":[],"sources":["../../src/utils/useLabelNotch.ts"],"sourcesContent":["import { onBeforeUnmount, type Ref } from \"vue\";\nimport { tap, tapIf } from \"../helpers/functions\";\nimport { onChanged } from \"../composition/utils\";\nimport { call } from \"../helpers/utils\";\nimport { startResizeObserving, stopResizeObserving } from \"../global/resizeObserver\";\n\nconst offset = 8; // see --label-offset-left-x css var\n\nconst contourOffset = 4; // see --contour-offset css var\n\n/**\n * Adjust the width of the cutout on the clip path for the notched label (TextField, Dropdown)\n */\nexport function useLabelNotch(root: Ref<HTMLElement | undefined>, labelSelector = \"label\") {\n  const labels = new Set<Element>();\n\n  onChanged(() => {\n    tapIf(root?.value, (el) => {\n      const label = el.querySelector(labelSelector);\n\n      if (!label) {\n        return;\n      }\n\n      labels.add(label);\n\n      startResizeObserving(label, () => {\n        const rightOffset = call(() => {\n          return (\n            label.getBoundingClientRect().width +\n            tap(offset, (n) => (Number.isNaN(n) ? contourOffset : n + contourOffset))\n          ); //\n        });\n\n        if (el.style.getPropertyValue(\"--label-offset-right-x\") !== `${rightOffset}px`) {\n          el.style.setProperty(\"--label-offset-right-x\", `${rightOffset}px`);\n        }\n      });\n    });\n  });\n\n  onBeforeUnmount(() => {\n    Array.from(labels.values()).map((el) => stopResizeObserving(el));\n  });\n}\n"],"mappings":";;;;;AAMA,IAAM,IAAS,GAET,IAAgB;;;;AAKtB,SAAgB,EAAc,GAAoC,IAAgB,SAAS;CACzF,IAAM,oBAAS,IAAI,KAAc;AA2BjC,CAzBA,QAAgB;AACd,IAAM,GAAM,QAAQ,MAAO;GACzB,IAAM,IAAQ,EAAG,cAAc,EAAc;AAExC,SAIL,EAAO,IAAI,EAAM,EAEjB,EAAqB,SAAa;IAChC,IAAM,IAAc,QAEhB,EAAM,uBAAuB,CAAC,QAC9B,EAAI,IAAS,MAAO,OAAO,MAAM,EAAE,GAAG,IAAgB,IAAI,EAAe,CAE3E;AAEF,IAAI,EAAG,MAAM,iBAAiB,yBAAyB,KAAK,GAAG,EAAY,OACzE,EAAG,MAAM,YAAY,0BAA0B,GAAG,EAAY,IAAI;KAEpE;IACF;GACF,EAEF,QAAsB;AACpB,QAAM,KAAK,EAAO,QAAQ,CAAC,CAAC,KAAK,MAAO,EAAoB,EAAG,CAAC;GAChE"}
+{"version":3,"file":"useLabelNotch.js","names":[],"sources":["../../src/utils/useLabelNotch.ts"],"sourcesContent":["import { onBeforeUnmount, type Ref } from \"vue\";\nimport { tap, tapIf } from \"../helpers/functions\";\nimport { onChanged } from \"../composition/utils\";\nimport { call } from \"../helpers/utils\";\nimport { startResizeObserving, stopResizeObserving } from \"../global/resizeObserver\";\n\nconst offset = 8; // see --label-offset-left-x css var\n\nconst contourOffset = 4; // see --contour-offset css var\n\n/**\n * Adjust the width of the cutout on the clip path for the notched label (TextField, Dropdown)\n */\nexport function useLabelNotch(root: Ref<HTMLElement | undefined>, labelSelector = \"label\") {\n  const labels = new Set<Element>();\n\n  onChanged(() => {\n    tapIf(root?.value, (el) => {\n      const label = el.querySelector(labelSelector);\n\n      if (!label) {\n        return;\n      }\n\n      labels.add(label);\n\n      startResizeObserving(label, () => {\n        const rightOffset = call(() => {\n          return (\n            label.getBoundingClientRect().width +\n            tap(offset, (n) => (Number.isNaN(n) ? contourOffset : n + contourOffset))\n          ); //\n        });\n\n        if (el.style.getPropertyValue(\"--label-offset-right-x\") !== `${rightOffset}px`) {\n          el.style.setProperty(\"--label-offset-right-x\", `${rightOffset}px`);\n        }\n      });\n    });\n  });\n\n  onBeforeUnmount(() => {\n    Array.from(labels.values()).map((el) => stopResizeObserving(el));\n  });\n}\n"],"mappings":";;;;;;AAMA,IAAM,IAAS,GAET,IAAgB;AAKtB,SAAgB,EAAc,GAAoC,IAAgB,SAAS;CACzF,IAAM,oBAAS,IAAI,KAAc;AA2BjC,CAzBA,QAAgB;AACd,IAAM,GAAM,QAAQ,MAAO;GACzB,IAAM,IAAQ,EAAG,cAAc,EAAc;AAExC,SAIL,EAAO,IAAI,EAAM,EAEjB,EAAqB,SAAa;IAChC,IAAM,IAAc,QAEhB,EAAM,uBAAuB,CAAC,QAC9B,EAAI,IAAS,MAAO,OAAO,MAAM,EAAE,GAAG,IAAgB,IAAI,EAAe,CAE3E;AAEF,IAAI,EAAG,MAAM,iBAAiB,yBAAyB,KAAK,GAAG,EAAY,OACzE,EAAG,MAAM,YAAY,0BAA0B,GAAG,EAAY,IAAI;KAEpE;IACF;GACF,EAEF,QAAsB;AACpB,QAAM,KAAK,EAAO,QAAQ,CAAC,CAAC,KAAK,MAAO,EAAoB,EAAG,CAAC;GAChE"}

package/dist/utils/useValidation.js

@@ -1,4 +1,5 @@
 import { computed as e } from "vue";
+//#region src/utils/useValidation.ts
 function t(e, t) {
 	let n = [];
 	return t && t.length > 0 && t.forEach((t) => {
@@ -12,6 +13,7 @@ function t(e, t) {
 function n(n, r) {
 	return e(() => t(n.value, r));
 }
+//#endregion
 export { n as useValidation };
 
 //# sourceMappingURL=useValidation.js.map

package/dist/utils/useValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useValidation.js","names":[],"sources":["../../src/utils/useValidation.ts"],"sourcesContent":["import { computed, type Ref } from \"vue\";\n\n// Validation rules similar to those in Vuetify\n\nexport function validateFormValue<T>(value: T, rules: ((v: T) => boolean | string)[]) {\n  const errors: string[] = [];\n  if (rules && rules.length > 0) {\n    rules.forEach((rule) => {\n      const err = rule(value);\n      if (typeof err === \"string\") {\n        errors.push(err);\n      }\n    });\n  }\n  return {\n    isValid: errors.length === 0,\n    errors: errors,\n  };\n}\n\nexport function useValidation<T>(val: Ref<T>, rules: ((v: T) => boolean | string)[]) {\n  return computed(() => {\n    return validateFormValue(val.value, rules);\n  });\n}\n"],"mappings":";AAIA,SAAgB,EAAqB,GAAU,GAAuC;CACpF,IAAM,IAAmB,EAAE;AAS3B,QARI,KAAS,EAAM,SAAS,KAC1B,EAAM,SAAS,MAAS;EACtB,IAAM,IAAM,EAAK,EAAM;AACvB,EAAI,OAAO,KAAQ,YACjB,EAAO,KAAK,EAAI;GAElB,EAEG;EACL,SAAS,EAAO,WAAW;EACnB;EACT;;AAGH,SAAgB,EAAiB,GAAa,GAAuC;AACnF,QAAO,QACE,EAAkB,EAAI,OAAO,EAAM,CAC1C"}
+{"version":3,"file":"useValidation.js","names":[],"sources":["../../src/utils/useValidation.ts"],"sourcesContent":["import { computed, type Ref } from \"vue\";\n\n// Validation rules similar to those in Vuetify\n\nexport function validateFormValue<T>(value: T, rules: ((v: T) => boolean | string)[]) {\n  const errors: string[] = [];\n  if (rules && rules.length > 0) {\n    rules.forEach((rule) => {\n      const err = rule(value);\n      if (typeof err === \"string\") {\n        errors.push(err);\n      }\n    });\n  }\n  return {\n    isValid: errors.length === 0,\n    errors: errors,\n  };\n}\n\nexport function useValidation<T>(val: Ref<T>, rules: ((v: T) => boolean | string)[]) {\n  return computed(() => {\n    return validateFormValue(val.value, rules);\n  });\n}\n"],"mappings":";;AAIA,SAAgB,EAAqB,GAAU,GAAuC;CACpF,IAAM,IAAmB,EAAE;AAS3B,QARI,KAAS,EAAM,SAAS,KAC1B,EAAM,SAAS,MAAS;EACtB,IAAM,IAAM,EAAK,EAAM;AACvB,EAAI,OAAO,KAAQ,YACjB,EAAO,KAAK,EAAI;GAElB,EAEG;EACL,SAAS,EAAO,WAAW;EACnB;EACT;;AAGH,SAAgB,EAAiB,GAAa,GAAuC;AACnF,QAAO,QACE,EAAkB,EAAI,OAAO,EAAM,CAC1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.11.6",
+  "version": "2.11.8",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -32,17 +32,17 @@
     "sortablejs": "^1.15.6",
     "vue": "^3.5.24",
     "@milaboratories/helpers": "1.14.1",
-    "@platforma-sdk/model": "1.63.1"
+    "@platforma-sdk/model": "1.63.12"
   },
   "devDependencies": {
-    "@vitest/coverage-istanbul": "^4.0.18",
+    "@vitest/coverage-istanbul": "^4.1.3",
     "jsdom": "^25.0.1",
     "svgo": "^3.3.2",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.18",
-    "@milaboratories/build-configs": "1.5.2",
-    "@milaboratories/ts-builder": "1.3.0",
-    "@milaboratories/ts-configs": "1.2.2"
+    "vitest": "^4.1.3",
+    "@milaboratories/ts-builder": "1.3.1",
+    "@milaboratories/ts-configs": "1.2.3",
+    "@milaboratories/build-configs": "2.0.0"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

package/src/components/PlDialogModal/PlDialogModal.vue

@@ -74,6 +74,7 @@ const props = withDefaults(
     closable: true,
     noContentGutters: false,
     actionsHasTopBorder: true,
+    closeOnOutsideClick: true,
     size: undefined,
   },
 );

package/src/components/PlNumberField/PlNumberField.vue

@@ -23,7 +23,7 @@ export default {
   generic="
     R extends true | false,
     V extends undefined | number,
-    C extends Exclude<V, R extends true ? undefined : never>
+    C extends Exclude<V, [R] extends [true] ? undefined : never>
   "
 >
 import "./pl-number-field.scss";

package/src/components/PlTextField/PlTextField.vue

@@ -13,7 +13,7 @@ export default {
   generic="
     R extends true | false,
     V extends undefined | string,
-    C extends Exclude<V, R extends true ? undefined : never>
+    C extends Exclude<V, [R] extends [true] ? undefined : never>
   "
 >
 import { computed, ref, useSlots } from "vue";
@@ -37,13 +37,10 @@ const model = defineModel<V>({
 });
 
 const props = defineProps<{
+  /** The string specifies whether the field should be a password or not, value could be "password" or undefined. */
+  type?: "password";
   /** The label to display above the input field. */
   label?: string;
-  /**
-   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
-   * If a function, calls it to get the reset value.
-   */
-  clearable?: (R extends true ? never : boolean) | (() => C);
   /** If `true`, the input field is marked as required and will show an error if left empty. */
   required?: R;
   /** An error message to display below the input field. */
@@ -58,10 +55,13 @@ const props = defineProps<{
   dashed?: boolean;
   /** A prefix text to display inside the input field before the value. */
   prefix?: string;
+  /**
+   * If `true`, a clear icon will appear in the input field to clear the value (set it to empty string).
+   * If a function, calls it to get the reset value.
+   */
+  clearable?: ([R] extends [true] ? never : boolean) | (() => C);
   /** Additional validity check for input value that must return an error text if failed */
   validate?: (v: V) => string | undefined;
-  /** 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"

package/src/utils/DoubleContour.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-withDefaults(
+const props = withDefaults(
   defineProps<{
     groupPosition?:
       | "top"
@@ -25,7 +25,7 @@ export default {
 </script>
 
 <template>
-  <div class="double-contour" :class="{ [groupPosition]: true }">
+  <div class="double-contour" :class="props.groupPosition">
     <div v-bind="$attrs">
       <slot />
     </div>