@milaboratories/uikit 2.11.6 → 2.11.7

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.7",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -35,14 +35,14 @@
     "@platforma-sdk/model": "1.63.1"
   },
   "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/build-configs": "2.0.0",
+    "@milaboratories/ts-configs": "1.2.3",
+    "@milaboratories/ts-builder": "1.3.1"
   },
   "scripts": {
     "dev": "ts-builder serve --target browser-lib --build-config ./build.browser-lib.config.js",

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>