@milaboratories/uikit 2.4.1 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/uikit",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -30,8 +30,8 @@
     "d3-selection": "^3.0.0",
     "d3-axis": "^3.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "@platforma-sdk/model": "^1.42.15",
-    "@milaboratories/helpers": "^1.6.19"
+    "@milaboratories/helpers": "^1.6.19",
+    "@platforma-sdk/model": "^1.42.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
@@ -41,8 +41,8 @@
     "vue-tsc": "^2.2.10",
     "yarpm": "^1.2.0",
     "svgo": "^3.3.2",
-    "@milaboratories/eslint-config": "^1.0.4",
     "@milaboratories/ts-configs": "1.0.5",
+    "@milaboratories/eslint-config": "^1.0.4",
     "@milaboratories/build-configs": "1.0.5"
   },
   "scripts": {

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/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;;;;;;;;;;;;;;;"}

package/dist/generated/components/svg/images/SvgRequired.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SvgRequired.vue.js","sources":["../../../../../src/generated/components/svg/images/SvgRequired.vue"],"sourcesContent":["<!-- ⚠️ AUTOGENERATED. DO NOT EDIT. -->\n<script lang=\"ts\">\nimport '../svg-styles.css';\nexport default { name: 'SvgRequired' };\n</script>\n\n<template>\n  <div class=\"svg-icon SvgRequired\" style=\"width: 5px; height: 12px\" />\n</template>\n\n<style>\n  .SvgRequired { background-image: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%225%22%20height%3D%2212%22%20viewBox%3D%220%200%205%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.51685%204.8L2.5%203.34159L3.47612%204.8L4.39607%204.12743L3.31461%202.7469L5%202.25133L4.64888%201.16106L3.00562%201.77699L3.06882%200H1.93118L1.99438%201.77699L0.351124%201.16106L0%202.25133L1.68539%202.7469L0.59691%204.12743L1.51685%204.8Z%22%20fill%3D%22%23F1222F%22%2F%3E%3C%2Fsvg%3E\"); }\n</style>\n"],"names":["_hoisted_1"],"mappings":";;;;AAOoC,MAAAA,IAAA;AAAA,EAAA,OAAA;AAAA;;;;;;"}