@milaboratories/uikit 2.2.87 → 2.2.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.87",
+  "version": "2.2.88",
   "type": "module",
   "main": "dist/pl-uikit.js",
   "module": "dist/pl-uikit.js",
@@ -33,9 +33,9 @@
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
+    "@platforma-sdk/model": "^1.34.10",
     "@milaboratories/eslint-config": "^1.0.4",
-    "@milaboratories/helpers": "^1.6.13",
-    "@platforma-sdk/model": "^1.34.10"
+    "@milaboratories/helpers": "^1.6.14"
   },
   "scripts": {
     "dev": "vite",

package/src/components/PlAutocomplete/PlAutocomplete.vue

@@ -363,7 +363,7 @@ watch(() => optionsRequest.loading || modelOptionRequest.loading, (loading) => {
 
           <div class="pl-autocomplete__controls">
             <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
-            <PlIcon16 v-if="clearable && hasValue" name="delete-clear" @click.stop="clear" />
+            <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
             <slot name="append" />
             <div class="pl-autocomplete__arrow-wrapper" @click.stop="toggleOpen">
               <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" />

package/src/components/PlAutocomplete/pl-autocomplete.scss

@@ -185,16 +185,16 @@
 
     margin-left: auto;
 
-    .icon-delete-clear {
-      cursor: pointer;
-    }
-
     .mask-16,
     .mask-24 {
       --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
+    .clear {
+      --icon-color: var(--ic-02);
+    }
+
     .mask-loading {
       --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;

package/src/components/PlDropdown/PlDropdown.vue

@@ -334,7 +334,7 @@ watchPostEffect(() => {
 
           <div class="pl-dropdown__controls">
             <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
-            <PlIcon16 v-if="clearable && hasValue" name="delete-clear" @click.stop="clear" />
+            <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
             <slot name="append" />
             <div class="pl-dropdown__arrow-wrapper" @click.stop="toggleOpen">
               <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" />

package/src/components/PlDropdown/pl-dropdown.scss

@@ -183,16 +183,17 @@
     gap: 6px;
     margin-left: auto;
 
-    .icon-delete-clear {
-      cursor: pointer;
-    }
-
+    
     .mask-16,
     .mask-24 {
       --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
+    .clear {
+      --icon-color: var(--ic-02);
+    }
+
     .mask-loading {
       --icon-color: var(--ic-accent);
       animation: spin 2.5s linear infinite;

package/src/components/PlDropdownLegacy/PlDropdownLegacy.vue

@@ -337,7 +337,7 @@ watchPostEffect(() => {
 
           <div class="ui-dropdown__controls">
             <PlMaskIcon24 v-if="isLoadingOptions" name="loading" />
-            <PlIcon16 v-if="clearable && hasValue" name="delete-clear" @click.stop="clear" />
+            <PlIcon16 v-if="clearable && hasValue" class="clear" name="delete-clear" @click.stop="clear" />
             <slot name="append" />
             <div v-if="arrowIconLarge" class="arrow-icon" :class="[`icon-24 ${arrowIconLarge}`]" @click.stop="toggleOpen" />
             <div v-else-if="arrowIcon" class="arrow-icon" :class="[`icon-16 ${arrowIcon}`]" @click.stop="toggleOpen" />

package/src/components/PlDropdownLegacy/pl-dropdown-legacy.scss

@@ -181,16 +181,16 @@
     gap: 6px;
     margin-left: auto;
 
-    .icon-delete-clear {
-      cursor: pointer;
-    }
-
     .mask-16,
     .mask-24 {
       --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
+    .clear {
+      --icon-color: var(--ic-02);
+    }
+
     .mask-loading {
       --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;

package/src/components/PlFileInput/PlFileInput.vue

@@ -193,7 +193,7 @@ if (!props.cellStyle) {
         {{ fileName }}
       </div>
       <div v-if="uploadStats" class="pl-file-input__stats">{{ uploadStats }}</div>
-      <PlMaskIcon24 v-if="modelValue" name="close" @click.stop="clear" />
+      <PlMaskIcon24 v-if="modelValue" class="pl-file-input__clear" name="close" @click.stop="clear" />
       <DoubleContour class="pl-file-input__contour" />
     </div>
     <div v-if="hasErrors" class="pl-file-input__error">

package/src/components/PlFileInput/pl-file-input.scss

@@ -54,6 +54,10 @@
     width: 0;
   }
 
+  &__clear {
+    --icon-color: var(--ic-02);
+  }
+
   &__filename {
     width: 100%;
     border: none;

package/src/components/PlSearchField/PlSearchField.vue

@@ -77,6 +77,7 @@ const clear = () => emit('update:modelValue', '');
   }
 
   .clear {
+    --icon-color: var(--ic-02);
     cursor: pointer;
     margin-left: auto;
     display: var(--pl-search-field-clear-display);

package/src/components/PlSvg/registry.ts

@@ -1,28 +1,36 @@
 import { uniqueId } from '@milaboratories/helpers';
 
-let defs: SVGDefsElement | null = null;
+declare global {
+  interface Window {
+    SvgRegistryRawSvgMap: Map<string, SvgMeta>;
+    SvgRegistryDefsElement: SVGDefsElement;
+  }
+}
+
+function createSpriteContainer() {
+  const defsElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  defsElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  defsElement.style.display = 'none';
+  document.body.prepend(defsElement);
+  return defsElement;
+}
+
+// prevent multiple definitions of the same SVG registry in different builds
+window.SvgRegistryRawSvgMap = window.SvgRegistryRawSvgMap ?? new Map<string, SvgMeta>();
+window.SvgRegistryDefsElement = window.SvgRegistryDefsElement ?? createSpriteContainer();
+
 export type SvgMeta = {
   spriteId: string;
   defaultWidth: number;
   defaultHeight: number;
 };
-const registeredRaw = new Map<string, SvgMeta>();
-
-function ensureSpriteContainer() {
-  if (defs) return;
 
-  defs = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  defs.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  defs.style.display = 'none';
-
-  document.body.prepend(defs);
-}
+const registeredRaw = window.SvgRegistryRawSvgMap;
+const defsElement = window.SvgRegistryDefsElement;
 
 export function registerSvg(raw: string, name?: string): SvgMeta {
   if (!registeredRaw.has(raw)) {
-    const id = `svg-${name ? `${name}-` : ''}${uniqueId()}`;
-
-    ensureSpriteContainer();
+    const id = `svg-${name ? `${name}-` : ''}${uniqueId(16)}`;
 
     const widthMatch = raw.match(/width="(\d+)(px)?"/)?.[1];
     const heightMatch = raw.match(/height="(\d+)(px)?"/)?.[1];
@@ -47,8 +55,8 @@ export function registerSvg(raw: string, name?: string): SvgMeta {
     template.innerHTML = preparedSvg;
 
     const symbol = template.content.firstElementChild;
-    if (symbol && defs) {
-      defs.appendChild(symbol);
+    if (symbol && defsElement) {
+      defsElement.appendChild(symbol);
     }
 
     registeredRaw.set(raw, {

package/src/components/PlTextField/pl-text-field.scss

@@ -94,6 +94,7 @@
 
   &__clearable {
     display: var(--show-clearable) !important;
+    --icon-color: var(--ic-02) !important;
   }
 
   &__helper {