@milaboratories/uikit 2.2.83 → 2.2.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.2.83",
+  "version": "2.2.85",
   "type": "module",
   "main": "dist/pl-uikit.js",
   "module": "dist/pl-uikit.js",
@@ -12,7 +12,9 @@
       "default": "./dist/pl-uikit.js"
     },
     "./styles": "./dist/pl-uikit.css",
-    "./styles/mixins": "./src/assets/mixins.scss"
+    "./styles/mixins": "./src/assets/mixins.scss",
+    "./svg/icons/*": "./src/assets/icons/icon-assets-min/*",
+    "./svg/images/*": "./src/assets/images/*"
   },
   "dependencies": {
     "vue": "^3.5.13",
@@ -32,8 +34,8 @@
     "svgo": "^3.3.2",
     "@types/d3": "^7.4.3",
     "@milaboratories/helpers": "^1.6.12",
-    "@platforma-sdk/model": "^1.34.0",
-    "@milaboratories/eslint-config": "^1.0.4"
+    "@milaboratories/eslint-config": "^1.0.4",
+    "@platforma-sdk/model": "^1.34.10"
   },
   "scripts": {
     "dev": "vite",

package/scripts/parse-icons.js

@@ -46,22 +46,14 @@ async function generateIconsArtifacts() {
     dict[size].push({ name: icon, svg });
   }
 
-  for (const [size, list] of Object.entries(dict)) {
+  for (const [size] of Object.entries(dict)) {
     const json = {};
 
-    const lines = list.map(({ name, svg }) => {
-      const icon = name.split('.')[0];
-      json[icon] = name;
-      return `  ${icon}: url('${svg}')`; // keep extension
-    });
-
     const names = Object.keys(json)
       .map((k) => `  '${k}'`)
       .join(',\n');
 
-    await fp.writeFile(`./src/assets/icons/icons-${size}-generated.scss`, `$icons${size}: (\n${lines.join(',\n')}\n)`);
-    await fp.writeFile(`./src/generated/icons-${size}.ts`, `export const maskIcons${size} = [\n${names},\n] as const;\n`);
-    await fp.writeFile(`./src/assets/icons/icons-${size}-generated.json`, JSON.stringify(json, null, 2));
+    await fp.writeFile(`./src/generated/icons-${size}.ts`, `export const icons${size} = [\n${names},\n] as const;\n`);
   }
 }
 

package/src/assets/base-btn.scss

@@ -38,7 +38,7 @@
   transition: box-shadow 0.05s ease-in-out;
 
   box-shadow: var(--focus-shadow), var(--append-shadow), var(--shape-shadow),
-    var(--active-shadow), var(--drop-shadow);
+  var(--active-shadow), var(--drop-shadow);
 
   // @todo
   &.justifyCenter {
@@ -97,14 +97,6 @@
     --focus-shadow: inset 0 0 0 2px var(--border-color-focus);
   }
 
-  .mask {
-    background-color: var(--color-text);
-  }
-
-  .mask-16 {
-    background-color: var(--color-text);
-  }
-
   .icon {
     display: block;
     width: 16px;
@@ -124,7 +116,7 @@
     flex-direction: row-reverse;
   }
 
-  >span {
+  > span {
     display: inline-flex;
   }
 }

package/src/assets/base.scss

@@ -70,8 +70,6 @@
   --divider-color: var(--txt-01); // @TODO
 
   --pl-dropdown-options-bg: #fff;
-
-  --mask-icon-bg-color: #000;
 }
 
 [data-theme='dark'] {

package/src/assets/ui.scss

@@ -15,6 +15,5 @@
 @use './input-range';
 @use './sortable';
 @use './layout';
-@use './icons/icons-set';
 @use './css-utils';
 @use './file-base-input';

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

@@ -191,13 +191,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 

package/src/components/PlBtnSplit/PlBtnSplit.vue

@@ -6,7 +6,7 @@ import type { ListOption } from '../../types';
 import { useElementPosition } from '../../composition/usePosition';
 import { normalizeListOptions } from '../../helpers/utils';
 import { deepEqual } from '@milaboratories/helpers';
-import PlMaskIcon16 from '../PlMaskIcon16/PlMaskIcon16.vue';
+import { PlMaskIcon16 } from '../PlMaskIcon16';
 
 const props = defineProps<{
   /**

package/src/components/PlBtnSplit/pl-btn-split.scss

@@ -59,7 +59,7 @@
 
     &__icon,
     .mask-loading {
-        background-color: var(--border-color);
+        --icon-color: var(--border-color);
     }
 
     &__icon-container {

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

@@ -189,13 +189,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(--ic-accent);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 

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

@@ -187,13 +187,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(#07AD3E);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 

package/src/components/PlDropdownMulti/pl-dropdown-multi.scss

@@ -195,13 +195,13 @@
 
     .mask-16,
     .mask-24 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
 
     .mask-loading {
+      --icon-color: var(--ic-accent);
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
     }
   }
 
@@ -306,7 +306,7 @@
 
     .mask-loading {
       animation: spin 2.5s linear infinite;
-      background-color: #07AD3E;
+      --icon-color: var(--ic-accent);
     }
   }
 

package/src/components/PlErrorAlert/PlErrorAlert.vue

@@ -86,7 +86,7 @@ function onCopy() {
 }
 
 .titleIcon {
-  background-color: var(--txt-error);
+  --icon-color: var(--txt-error);
 }
 
 .titleText {

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

@@ -11,8 +11,8 @@
   --label-offset-left-x: 8px;
   --label-offset-right-x: 8px;
   --prefix-color: var(--color-placeholder);
-  --icon-color: #000;
   --contour-offset: 2px;
+  --icon-color: #000;
 
   width: 100%;
   height: var(--control-height, 40px);
@@ -37,7 +37,6 @@
   .mask-24 {
     display: block;
     min-width: 24px;
-    background-color: var(--icon-color);
   }
 
   .mask-close {
@@ -114,23 +113,6 @@
     color: var(--prefix-color);
   }
 
-  &__append {
-    padding-right: 12px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-
-    .icon {
-      cursor: pointer;
-    }
-
-    .mask {
-      background-color: var(--control-mask-fill);
-      cursor: pointer;
-    }
-  }
-
   &__helper {
     @include field-helper();
   }

package/src/components/PlIcon16/PlIcon16.vue

@@ -1,23 +1,42 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
 import type { MaskIconName16, Size } from '../../types';
+import { PlSvg } from '../PlSvg';
+import { computed } from 'vue';
 
 const props = defineProps<{
   name: MaskIconName16;
-  size?: Size;
+  size?: number | string | Size;
+  color?: string | string[];
+  stroke?: string | string[];
 }>();
 
-const style = computed(() => (props.size === 'large' ? '--icon-size: 24px' : ''));
-
-const className = computed(() => `icon-16 icon-${props.name}`);
+const size = computed(() => {
+  if (typeof props.size === 'string') {
+    if (props.size === 'small') return 12;
+    if (props.size === 'medium') return 16;
+    if (props.size === 'large') return 24;
+  }
+  return props.size ?? 16;
+});
 </script>
 
 <template>
-  <i :style="style" :class="[className, $style.icon]" />
+  <PlSvg
+    :name="`16_${props.name}`"
+    :class="['icon-16', 'mask-16', `icon-${props.name}`, `mask-${props.name}`, $style.icon]"
+    :width="size"
+    :height="size"
+    :color="props.color"
+    :stroke="props.stroke"
+  />
 </template>
 
 <style module>
 .icon {
+  /* pass color to svg variable */
+  --svg-fill-0: var(--icon-color, var(--mask-icon-bg-color));
+  --svg-fill-1: var(--icon-color, var(--mask-icon-bg-color));
+  --svg-fill-2: var(--icon-color, var(--mask-icon-bg-color));
   display: inline-block;
 }
 </style>

package/src/components/PlIcon24/PlIcon24.vue

@@ -1,21 +1,42 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
 import type { MaskIconName24, Size } from '../../types';
+import { PlSvg } from '../PlSvg';
+import { computed } from 'vue';
 
 const props = defineProps<{
   name: MaskIconName24;
-  size?: Size;
+  size?: number | string | Size;
+  color?: string | string[];
+  stroke?: string | string[];
 }>();
 
-const className = computed(() => `icon-24 icon-${props.name}`);
+const size = computed(() => {
+  if (typeof props.size === 'string') {
+    if (props.size === 'small') return 16;
+    if (props.size === 'medium') return 24;
+    if (props.size === 'large') return 32;
+  }
+  return props.size ?? 24;
+});
 </script>
 
 <template>
-  <i :class="[className, $style.icon]" />
+  <PlSvg
+    :name="`24_${props.name}`"
+    :class="['icon-24', 'mask-24', `icon-${props.name}`, `mask-${props.name}`, $style.icon]"
+    :width="size"
+    :height="size"
+    :color="props.color"
+    :stroke="props.stroke"
+  />
 </template>
 
 <style module>
 .icon {
+  /* pass color to svg variable */
+  --svg-fill-0: var(--icon-color, var(--mask-icon-bg-color));
+  --svg-fill-1: var(--icon-color, var(--mask-icon-bg-color));
+  --svg-fill-2: var(--icon-color, var(--mask-icon-bg-color));
   display: inline-block;
 }
 </style>

package/src/components/PlLogView/pl-log-view.scss

@@ -49,12 +49,12 @@
     cursor: pointer;
 
     .mask-24 {
-      background-color: var(--ic-02);
+      --icon-color: var(--ic-02);
     }
 
     &:hover {
       .mask-24 {
-        background-color: var(--txt-01);
+        --icon-color: var(--txt-01);
       }
     }
   }

package/src/components/PlMaskIcon16/index.ts

@@ -1 +1,4 @@
-export { default as PlMaskIcon16 } from './PlMaskIcon16.vue';
+/**
+ * @deprecated use PlIcon16, color can be setted with the css variable `--svg-fill-0` or component prop `color`
+ */
+export { default as PlMaskIcon16 } from '../PlIcon16/PlIcon16.vue';

package/src/components/PlMaskIcon24/index.ts

@@ -1 +1,4 @@
-export { default as PlMaskIcon24 } from './PlMaskIcon24.vue';
+/**
+ * @deprecated use PlIcon24, color can be setted with the css variable `--svg-fill-0` or component prop `color`
+ */
+export { default as PlMaskIcon24 } from '../PlIcon24/PlIcon24.vue';

package/src/components/PlProgressCell/PlProgressCell.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import './pl-progress-cell.scss';
-import PlMaskIcon24 from '../PlMaskIcon24/PlMaskIcon24.vue';
+import { computed } from 'vue';
+import { PlMaskIcon24 } from '../PlMaskIcon24';
 import type { PlProgressCellProps } from './types';
 import { getErrorMessage } from '../../helpers/error.ts';
 

package/src/components/PlProgressCell/pl-progress-cell.scss

@@ -7,7 +7,7 @@
     border-radius: 2px;
 
     .mask-error {
-        background: var(--txt-error);
+        --icon-color: var(--txt-error);
     }
 
     &.not-started {

package/src/components/PlSvg/PlSvg.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { computedAsync } from '@vueuse/core';
+import { registerSvg } from './registry.ts';
+import type { MaskIconName16, MaskIconName24 } from '../../types';
+
+const props = defineProps<{
+  uri?: string;
+  name?: `16_${MaskIconName16}` | `24_${MaskIconName24}`;
+  width?: number | string;
+  height?: number | string;
+  color?: string | string[];
+  stroke?: string | string[];
+}>();
+
+const uri = computedAsync(async () => {
+  if (typeof props.uri === 'string') return Promise.resolve(props.uri);
+  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)));
+const styleSize = computed(() =>
+  svgMeta.value == null
+    ? undefined
+    : `--svg-width: ${getSize(props.width, svgMeta.value.defaultWidth)}; --svg-height: ${getSize(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};`, '');
+  }
+
+  if (typeof color === 'string' && color.length > 0) {
+    return `--svg-${prop}-0: ${color};`;
+  }
+
+  return undefined;
+}
+</script>
+
+<template>
+  <svg v-if="svgMeta" :style="[styleSize, styleColor, styleStroke]" :class="$style.svg">
+    <use :href="`#${svgMeta.spriteId}`" />
+  </svg>
+</template>
+
+<style module>
+.svg {
+  --svg-width: unset;
+  --svg-height: unset;
+  --svg-fill-0: unset; /* can be in any quantity, depends on the icon (--svg-fill-X) */
+  --svg-fill-1: unset; /* can be in any quantity, depends on the icon (--svg-fill-X) */
+  --svg-fill-2: unset; /* can be in any quantity, depends on the icon (--svg-fill-X) */
+  --svg-stroke-0: unset; /* can be in any quantity, depends on the icon (--svg-stroke-X) */
+
+  width: var(--svg-width);
+  height: var(--svg-height);
+}
+</style>

package/src/components/PlSvg/index.ts

@@ -0,0 +1 @@
+export { default as PlSvg } from './PlSvg.vue';

package/src/components/PlSvg/registry.ts

@@ -0,0 +1,60 @@
+let defs: SVGDefsElement | null = null;
+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);
+}
+
+export function registerSvg(raw: string): SvgMeta {
+  if (!registeredRaw.has(raw)) {
+    const id = `svg-${registeredRaw.size}`;
+
+    ensureSpriteContainer();
+
+    const widthMatch = raw.match(/width="(\d+)(px)?"/)?.[1];
+    const heightMatch = raw.match(/height="(\d+)(px)?"/)?.[1];
+    const viewBoxParts = raw.match(/viewBox="[-+]?\d*\.?\d+(?:e[-+]?\d+)?"/);
+    const viewBoxWidthMatch = viewBoxParts?.[2];
+    const viewBoxHeightMatch = viewBoxParts?.[3];
+    let width = Number(viewBoxWidthMatch ?? widthMatch ?? 16);
+    width = isNaN(width) ? 16 : width;
+    let height = Number(viewBoxHeightMatch ?? heightMatch ?? 16);
+    height = isNaN(height) ? 16 : height;
+    const viewBox = `0 0 ${width} ${height}`;
+
+    let fillIdx = 0;
+    let strokeIdx = 0;
+    const preparedSvg = raw
+      .replace(/^<svg[^>]*>/, `<svg id="${id}" viewBox="${viewBox}">`)
+      .replace(/<\/svg>\s*$/, '</svg>')
+      .replace(/\bfill\s*=\s*(['"])(.*?)\1/gi, (_, q, value) => `fill=${q}var(--svg-fill-${fillIdx++}, ${value})${q}`)
+      .replace(/\bstroke\s*=\s*(['"])(.*?)\1/gi, (_, q, value) => `stroke=${q}var(--svg-stroke-${strokeIdx++}, ${value})${q}`);
+
+    const template = document.createElement('template');
+    template.innerHTML = preparedSvg;
+
+    const symbol = template.content.firstElementChild;
+    if (symbol && defs) {
+      defs.appendChild(symbol);
+    }
+
+    registeredRaw.set(raw, {
+      spriteId: id,
+      defaultWidth: width,
+      defaultHeight: height,
+    });
+  }
+
+  return registeredRaw.get(raw)!;
+}

package/src/components/PlTextArea/pl-textarea.scss

@@ -70,13 +70,6 @@
     flex-direction: row;
     align-items: center;
     gap: 4px;
-    .icon {
-      cursor: pointer;
-    }
-    .mask {
-      background-color: var(--control-mask-fill);
-      cursor: pointer;
-    }
   }
 
   &__helper {

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

@@ -87,7 +87,7 @@
       cursor: pointer;
     }
     .mask-16 {
-      background-color: var(--control-mask-fill);
+      --icon-color: var(--control-mask-fill);
       cursor: pointer;
     }
   }

package/src/generated/icons-16.ts

@@ -1,4 +1,4 @@
-export const maskIcons16 = [
+export const icons16 = [
   'add',
   'arrow-down',
   'arrow-left',

package/src/generated/icons-24.ts

@@ -1,4 +1,4 @@
-export const maskIcons24 = [
+export const icons24 = [
   'add-layer',
   'add',
   'align-center',

package/src/index.ts

@@ -3,6 +3,20 @@ import './assets/ui.scss';
 // @TODO review
 import * as DataTable from './components/DataTable';
 import ThemeSwitcher from './components/ThemeSwitcher.vue';
+// @TODO review (may be private)
+import DropdownListItem from './components/DropdownListItem.vue';
+
+// @TODO review
+import ContextProvider from './components/ContextProvider.vue';
+import Slider from './components/Slider.vue';
+import { showContextMenu } from './components/contextMenu/index.ts';
+// for new version
+import LongText from './components/LongText.vue';
+import SliderRangeTriple from './components/SliderRangeTriple.vue';
+import SliderRange from './components/SliderRange.vue';
+import Scrollable from './components/Scrollable.vue';
+
+import { allCssVariables } from './demo-site-data/all-css-variables.ts';
 
 /**
  * Layout components
@@ -61,6 +75,7 @@ export * from './components/PlFileDialog';
 export * from './components/PlFileInput';
 export * from './components/PlNotificationAlert';
 
+export * from './components/PlSvg';
 export * from './components/PlMaskIcon16';
 export * from './components/PlMaskIcon24';
 export * from './components/PlIcon16';
@@ -73,14 +88,6 @@ export * from './components/PlRadio';
 
 export * from './colors';
 
-// @TODO review (may be private)
-import DropdownListItem from './components/DropdownListItem.vue';
-
-// @TODO review
-import ContextProvider from './components/ContextProvider.vue';
-import Slider from './components/Slider.vue';
-import { showContextMenu } from './components/contextMenu/index.ts';
-
 /**
  * Usables
  */
@@ -116,20 +123,9 @@ export * from './utils/DropdownOverlay';
  */
 export { useLabelNotch } from './utils/useLabelNotch.ts';
 
-// for new version
-import LongText from './components/LongText.vue';
-import SliderRangeTriple from './components/SliderRangeTriple.vue';
-import SliderRange from './components/SliderRange.vue';
-import Scrollable from './components/Scrollable.vue';
-
-import icons16 from './assets/icons/icons-16-generated.json';
-import icons24 from './assets/icons/icons-24-generated.json';
-
-import { allCssVariables } from './demo-site-data/all-css-variables.ts';
-
 export type * from './types';
 
-export { maskIcons16, maskIcons24 } from './types';
+export { icons16, icons24 } from './types';
 
 export * from './helpers/dom';
 
@@ -147,5 +143,5 @@ export { showContextMenu };
 export { LongText, SliderRangeTriple, SliderRange, Scrollable };
 
 // @todo
-const DemoData = { allCssVariables: allCssVariables(), icons16, icons24 };
+const DemoData = { allCssVariables: allCssVariables() };
 export { DemoData };