@milaboratories/uikit 2.4.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -31,7 +31,7 @@
     "d3-axis": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "@milaboratories/helpers": "^1.6.19",
-    "@platforma-sdk/model": "^1.42.10"
+    "@platforma-sdk/model": "^1.42.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",

package/src/components/PlLogView/PlLogView.vue

@@ -17,6 +17,8 @@ import { useLogHandle } from './useLogHandle';
 import { useLabelNotch } from '../../utils/useLabelNotch';
 import DoubleContour from '../../utils/DoubleContour.vue';
 import { PlTooltip } from '../PlTooltip';
+import { PlIcon24 } from '../PlIcon24';
+import { downloadContent } from '../../helpers/dom';
 
 const getOutputError = <T>(o?: ValueOrErrors<T>) => {
   if (o && o.ok === false) {
@@ -67,6 +69,10 @@ const props = defineProps<{
    * Do not scroll to bottom on content change. Default is false (scroll to bottom).
    */
   disableAutoScroll?: boolean;
+  /**
+   * If provided, a download icon will be shown and the content will be downloaded when clicked.
+   */
+  downloadFilename?: string;
 }>();
 
 const logState = useLogHandle(props);
@@ -81,6 +87,16 @@ const computedError = computed(() => logState.value?.error ?? props.error ?? get
 
 const computedValue = computed(() => logState.value?.lines ?? props.value ?? okOptional(props.output));
 
+const computedValueToCopy = computed(() => {
+  if (props.valueToCopy) {
+    return props.valueToCopy;
+  }
+  if (computedValue.value && typeof computedValue.value === 'string') {
+    return computedValue.value;
+  }
+  return undefined;
+});
+
 const copyActive = ref(false);
 
 useLabelNotch(root);
@@ -93,18 +109,21 @@ const onClickCopy = () => {
     copyActive.value = false;
   }, 1200);
 
-  let toCopy: string | undefined = undefined;
-  if (props.valueToCopy) {
-    toCopy = props.valueToCopy;
-  } else if (computedValue.value && typeof computedValue.value === 'string') {
-    toCopy = computedValue.value;
-  }
+  const toCopy = computedValueToCopy.value;
 
   if (toCopy !== undefined) {
     navigator.clipboard.writeText(toCopy);
   }
 };
 
+const onClickDownload = (filename: string) => {
+  const toDownload = computedValueToCopy.value;
+
+  if (toDownload !== undefined) {
+    downloadContent([toDownload, 'text/plain'], filename);
+  }
+};
+
 const optionallyScrollDown = () => {
   if (props.disableAutoScroll) {
     return;
@@ -149,6 +168,10 @@ const onContentScroll = (ev: Event) => {
         <PlMaskIcon24 title="Copy content" :name="iconName" @click="onClickCopy" />
         <template #tooltip>{{ copyActive ? 'copied' : 'copy' }}</template>
       </PlTooltip>
+      <PlTooltip v-if="downloadFilename" :close-delay="800" position="top">
+        <PlIcon24 name="download" @click="() => onClickDownload(downloadFilename!)" />
+        <template #tooltip>download</template>
+      </PlTooltip>
     </div>
     <div v-if="computedError" class="pl-log-view__error">{{ computedError }}</div>
     <div v-else ref="contentRef" class="pl-log-view__content" @scroll="onContentScroll">{{ computedValue }}</div>

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

@@ -48,14 +48,10 @@
     right: 12px;
     cursor: pointer;
 
-    .mask-24 {
-      --icon-color: var(--ic-02);
-    }
+    --icon-color: var(--ic-02);
 
-    &:hover {
-      .mask-24 {
-        --icon-color: var(--txt-01);
-      }
+    > *:hover {
+      --icon-color: var(--txt-01);
     }
   }
 

package/src/helpers/dom.ts

@@ -1,5 +1,7 @@
 import { animate, makeEaseOut } from './utils';
 
+export { downloadContent } from './downloadContent';
+
 export function isElementVisible(parent: HTMLElement, el: HTMLElement) {
   const scrollTop = parent.scrollTop;
   const parentHeight = parent.getBoundingClientRect().height;

package/src/helpers/downloadContent.ts

@@ -0,0 +1,75 @@
+type MimeType =
+  | 'text/plain'
+  | 'text/html'
+  | 'text/css'
+  | 'text/javascript'
+  | 'text/csv'
+  | 'application/json'
+  | 'application/xml'
+  | 'application/pdf'
+  | 'application/zip'
+  | 'application/octet-stream'
+  | 'image/png'
+  | 'image/jpeg'
+  | 'image/gif'
+  | 'image/svg+xml'
+  | 'audio/mpeg'
+  | 'audio/wav'
+  | 'video/mp4'
+  | 'video/webm'
+  | (string & {});
+
+type DownloadableContent =
+  | [string, MimeType]
+  | [Blob, MimeType]
+  | [ArrayBuffer, MimeType]
+  | [Uint8Array, MimeType]
+  | [Int8Array, MimeType]
+  | [Uint16Array, MimeType]
+  | [Int16Array, MimeType]
+  | [Uint32Array, MimeType]
+  | [Int32Array, MimeType]
+  | [Float32Array, MimeType]
+  | [Float64Array, MimeType]
+  | [DataView, MimeType]
+  | Blob // Blob already has mimeType
+  | File; // File already has mimeType
+
+export const downloadContent = (content: DownloadableContent, filename: string) => {
+  let blob: Blob;
+
+  if (content instanceof Blob) {
+    blob = content;
+  } else if (content instanceof File) {
+    blob = content;
+  } else if (Array.isArray(content) && content.length === 2) {
+    const [data, mimeType] = content;
+    if (typeof data === 'string') {
+      blob = new Blob([data], { type: mimeType });
+    } else if (data instanceof ArrayBuffer || ArrayBuffer.isView(data)) {
+      blob = new Blob([data], { type: mimeType });
+    } else if (data instanceof Blob) {
+      blob = new Blob([data], { type: mimeType });
+    } else {
+      throw new Error(`Unsupported data type for download. Received data of type ${typeof data}.`);
+    }
+  } else {
+    throw new Error('Invalid content type. Content must be a Blob, File, or [data, mimeType] tuple.');
+  }
+
+  const objectUrl = URL.createObjectURL(blob);
+
+  try {
+    const link = document.createElement('a');
+    link.href = objectUrl;
+    link.download = filename;
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  } catch (error) {
+    throw new Error(`Failed to download ${filename}`, { cause: error });
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+};

package/.turbo/turbo-test.log

@@ -1,133 +0,0 @@
- WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
-
-> @milaboratories/uikit@2.4.0 test /home/runner/_work/platforma/platforma/lib/ui/uikit
-> vitest run
-
-
- RUN  v2.1.9 /home/runner/_work/platforma/platforma/lib/ui/uikit
-
-stdout | src/components/PlChartHistogram/scales.spec.ts > Scales > logspace
-res [
-  1,
-  2.7825594022071245,
-  7.742636826811269,
-  21.544346900318835,
-  59.94842503189409,
-  166.8100537200059,
-  464.15888336127773,
-  1291.5496650148827,
-  3593.813663804626,
-  10000
-]
-
- ✓ src/components/PlChartHistogram/scales.spec.ts (1 test) 6ms
-TAP version 13
-# Subtest: Test useValidation
-ok 1 - Test useValidation
-  ---
-  duration_ms: 2.370136
-  type: 'suite'
-  ...
- ✓ src/__tests__/compositions/useValidation.spec.ts (5 tests) 6ms
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-TAP version 13
-# Subtest: Colors
-ok 1 - Colors
-  ---
-  duration_ms: 2.024173
-  type: 'suite'
-  ...
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
- ✓ src/colors/__tests__/colors.spec.ts (2 tests) 8ms
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
- ✓ src/components/PlRadio/__tests__/PlRadioGroup.spec.ts (7 tests | 1 skipped) 54ms
- ✓ src/components/PlCheckbox/__tests__/PlCheckbox.spec.ts (1 test) 44ms
- ↓ src/__tests__/use-debounce-fn.test.ts (1 test | 1 skipped)
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
- ✓ src/components/PlFileDialog/utils.test.ts (5 tests) 5ms
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
- ✓ src/components/PlBtnPrimary/__tests__/BtnPrimary.spec.ts (1 test) 20ms
-stdout | src/components/PlBtnSplit/__tests__/PlBtnSplit.spec.ts > PlBtnSplit.vue > Toggles dropdown on menu activator click
-DOMWrapper {
-  isDisabled: [Function (anonymous)],
-  wrapperElement: HTMLDivElement { [Symbol(_vei)]: { onClick: [Function] } }
-}
-
- ✓ src/components/PlNumberField/__tests__/PlNumberField.spec.ts (10 tests) 132ms
- ✓ src/components/PlBtnSplit/__tests__/PlBtnSplit.spec.ts (9 tests) 106ms
-DEPRECATION WARNING [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
-
-More info: https://sass-lang.com/d/legacy-js-api
-
- ✓ src/components/PlTextArea/__tests__/PlTextArea.spec.ts (2 tests) 98ms
- ✓ src/components/PlDropdownLegacy/__tests__/PlDropdownLegacy.spec.ts (1 test) 86ms
- ✓ src/components/PlTextField/__tests__/TextField.spec.ts (3 tests) 89ms
-stdout | src/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.ts > PlDropdownMulti > modelValue
-options [
-  HTMLDivElement { [Symbol(_vei)]: { onClick: [Function] } },
-  HTMLDivElement { [Symbol(_vei)]: { onClick: [Function] } }
-]
-
- ✓ src/components/PlDropdownMulti/__tests__/PlDropdownMulti.spec.ts (1 test) 109ms
- ✓ src/components/PlDropdownMultiRef/__tests__/PlDropdownMultiRef.spec.ts (1 test) 160ms
- ✓ src/components/PlDropdown/__tests__/PlDropdown.spec.ts (1 test) 106ms
- ✓ src/components/PlDropdownRef/__tests__/PlDropdownRef.spec.ts (1 test) 113ms
- ✓ src/components/PlAutocomplete/__tests__/PlAutocomplete.spec.ts (1 test) 728ms
-   ✓ PlAutocomplete > modelValue 726ms
-
- Test Files  17 passed | 1 skipped (18)
-      Tests  51 passed | 2 skipped (53)
-   Start at  10:52:58
-   Duration  4.83s (transform 7.98s, setup 1.05s, collect 20.47s, tests 1.87s, environment 25.23s, prepare 9.86s)
-

package/dist/components/PlAccordion/ExpandTransition.vue.js

@@ -1,27 +0,0 @@
-import { defineComponent as n, createBlock as r, openBlock as a, Transition as s, withCtx as p, renderSlot as c } from "vue";
-const f = /* @__PURE__ */ n({
-  __name: "ExpandTransition",
-  setup(l) {
-    const t = (e) => {
-      e.classList.add("expand-collapse-fix"), e.style.setProperty("--component-height", e.scrollHeight + "px");
-    }, o = (e) => {
-      e.style.removeProperty("--component-height"), e.classList.remove("expand-collapse-fix");
-    };
-    return (e, i) => (a(), r(s, {
-      name: "expand-collapse",
-      onEnter: t,
-      onLeave: t,
-      onAfterEnter: o,
-      onAfterLeave: o
-    }, {
-      default: p(() => [
-        c(e.$slots, "default")
-      ]),
-      _: 3
-    }));
-  }
-});
-export {
-  f as default
-};
-//# sourceMappingURL=ExpandTransition.vue.js.map

package/dist/components/PlAccordion/ExpandTransition.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandTransition.vue.js","sources":["../../../src/components/PlAccordion/ExpandTransition.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst onStart = (el: Element) => {\n  el.classList.add('expand-collapse-fix');\n  (el as HTMLElement).style.setProperty('--component-height', el.scrollHeight + 'px');\n};\n\nconst onAfter = (el: Element) => {\n  (el as HTMLElement).style.removeProperty('--component-height');\n  el.classList.remove('expand-collapse-fix');\n};\n</script>\n\n<template>\n  <Transition name=\"expand-collapse\" @enter=\"onStart\" @leave=\"onStart\" @after-enter=\"onAfter\" @after-leave=\"onAfter\">\n    <slot/>\n  </Transition>\n</template>\n\n<style>\n.expand-collapse-fix {\n  overflow: hidden;\n}\n\n.expand-collapse-enter-active,\n.expand-collapse-leave-active {\n  transition:\n    height 0.2s ease-in-out,\n    opacity 0.2s ease-in-out;\n  height: var(--component-height);\n}\n\n.expand-collapse-enter-from,\n.expand-collapse-leave-to {\n  opacity: 0.5;\n  height: 0;\n}\n</style>\n"],"names":["onStart","el","onAfter"],"mappings":";;;;AACM,UAAAA,IAAU,CAACC,MAAgB;AAC5B,MAAAA,EAAA,UAAU,IAAI,qBAAqB,GACrCA,EAAmB,MAAM,YAAY,sBAAsBA,EAAG,eAAe,IAAI;AAAA,IACpF,GAEMC,IAAU,CAACD,MAAgB;AAC9B,MAAAA,EAAmB,MAAM,eAAe,oBAAoB,GAC1DA,EAAA,UAAU,OAAO,qBAAqB;AAAA,IAC3C;;;;;;;;;;;;;;;"}