@platforma-sdk/ui-vue 1.42.24 → 1.42.34

package/.turbo/turbo-build.log

@@ -1,10 +1,10 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.42.24 build /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.42.34 build /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder build --target browser-lib
 
 Building browser-lib project...
-↳ vite.js build --config configs/vite.browser-lib.config.js --mode production
+↳ vite.js build --config /configs/vite.browser-lib.config.js --mode production
 vite v6.3.5 building for production...
 transforming...
 ✓ 238 modules transformed.
@@ -144,35 +144,34 @@ computing gzip size...
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/functions/coerce.js                   1.18 kB │ gzip:  0.58 kB │ map:  3.54 kB
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/min-version.js                 1.20 kB │ gzip:  0.57 kB │ map:  2.88 kB
 dist/components/PlMultiSequenceAlignment/multi-sequence-alignment.js                           1.23 kB │ gzip:  0.70 kB │ map:  4.70 kB
-dist/plugins/Monetization/UserCabinetCard.vue3.js                                              1.24 kB │ gzip:  0.66 kB │ map:  0.11 kB
+dist/plugins/Monetization/RunStatus.vue2.js                                                    1.27 kB │ gzip:  0.59 kB │ map:  2.46 kB
 dist/components/PlAgDataTable/PlAgOverlayLoading.vue.js                                        1.30 kB │ gzip:  0.66 kB │ map:  1.40 kB
-dist/plugins/Monetization/RunStatus.vue2.js                                                    1.32 kB │ gzip:  0.61 kB │ map:  2.66 kB
 dist/createModel.js                                                                            1.39 kB │ gzip:  0.65 kB │ map:  3.91 kB
 dist/components/PlAgDataTable/types.js                                                         1.40 kB │ gzip:  0.56 kB │ map:  9.46 kB
 dist/utils.js                                                                                  1.51 kB │ gzip:  0.69 kB │ map:  3.53 kB
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/ranges/outside.js                     1.55 kB │ gzip:  0.65 kB │ map:  3.99 kB
+dist/plugins/Monetization/UserCabinetCard.vue3.js                                              1.55 kB │ gzip:  0.77 kB │ map:  0.11 kB
 dist/components/PlAgDataTable/sources/focus-row.js                                             1.57 kB │ gzip:  0.75 kB │ map:  2.65 kB
 dist/components/PlAgCsvExporter/export-csv.js                                                  1.60 kB │ gzip:  0.73 kB │ map:  3.72 kB
 dist/AgGridVue/createAgGridColDef.js                                                           1.61 kB │ gzip:  0.72 kB │ map:  9.40 kB
-dist/plugins/Monetization/RunStatus.vue3.js                                                    1.63 kB │ gzip:  0.77 kB │ map:  0.11 kB
 dist/aggrid.js                                                                                 1.65 kB │ gzip:  0.79 kB │ map:  3.09 kB
 dist/internal/createAppModel.js                                                                1.73 kB │ gzip:  0.77 kB │ map:  4.81 kB
+dist/plugins/Monetization/RunStatus.vue3.js                                                    1.79 kB │ gzip:  0.82 kB │ map:  0.11 kB
 dist/internal/UpdateSerializer.js                                                              1.86 kB │ gzip:  0.80 kB │ map:  4.63 kB
 dist/components/PlMultiSequenceAlignment/markup.js                                             1.99 kB │ gzip:  1.02 kB │ map:  6.53 kB
-dist/plugins/Monetization/UserCabinetCard.vue2.js                                              2.11 kB │ gzip:  0.88 kB │ map:  3.01 kB
 dist/defineApp.js                                                                              2.15 kB │ gzip:  0.96 kB │ map:  9.58 kB
-dist/plugins/Monetization/useInfo.js                                                           2.19 kB │ gzip:  0.81 kB │ map:  4.33 kB
+dist/plugins/Monetization/useInfo.js                                                           2.18 kB │ gzip:  0.80 kB │ map:  4.32 kB
 dist/components/PlAgTextAndButtonCell/PlAgTextAndButtonCell.vue.js                             2.20 kB │ gzip:  1.05 kB │ map:  2.83 kB
 dist/components/PlAnnotations/components/PlAnnotationCreateDialog.vue.js                       2.35 kB │ gzip:  0.96 kB │ map:  2.64 kB
-dist/plugins/Monetization/LimitCard.vue3.js                                                    2.55 kB │ gzip:  0.92 kB │ map:  0.11 kB
+dist/plugins/Monetization/UserCabinetCard.vue2.js                                              2.36 kB │ gzip:  0.95 kB │ map:  3.49 kB
 dist/components/PlAgDataTable/PlAgDataTableSheets.vue2.js                                      2.57 kB │ gzip:  1.16 kB │ map:  5.30 kB
 dist/components/PlTableFilters/PlTableFiltersV2.vue3.js                                        2.58 kB │ gzip:  0.94 kB │ map:  0.12 kB
 dist/components/PlTableFilters/filters-state.js                                                2.60 kB │ gzip:  1.08 kB │ map:  7.95 kB
-dist/plugins/Monetization/LimitCard.vue2.js                                                    2.61 kB │ gzip:  0.88 kB │ map:  4.83 kB
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/classes/comparator.js                 2.65 kB │ gzip:  0.94 kB │ map:  6.36 kB
 dist/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue3.js                    2.71 kB │ gzip:  1.14 kB │ map:  0.13 kB
 dist/node_modules/.pnpm/fast-json-patch@3.1.1/node_modules/fast-json-patch/module/helpers.js   2.79 kB │ gzip:  1.21 kB │ map:  8.92 kB
 dist/components/PlAgDataTable/sources/row-number.js                                            3.10 kB │ gzip:  1.34 kB │ map:  8.36 kB
+dist/plugins/Monetization/LimitCard.vue3.js                                                    3.10 kB │ gzip:  1.09 kB │ map:  0.11 kB
 dist/components/PlMultiSequenceAlignment/SeqLogo.vue.js                                        3.11 kB │ gzip:  1.26 kB │ map:  6.04 kB
 dist/composition/fileContent.js                                                                3.15 kB │ gzip:  1.17 kB │ map:  9.49 kB
 dist/components/PlTableFilters/PlTableAddFilterV2.vue.js                                       3.16 kB │ gzip:  1.27 kB │ map:  3.95 kB
@@ -186,11 +185,12 @@ computing gzip size...
 dist/components/PlMultiSequenceAlignment/MultiSequenceAlignmentView.vue2.js                    3.56 kB │ gzip:  1.19 kB │ map:  5.67 kB
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/index.js                              3.67 kB │ gzip:  1.01 kB │ map:  5.45 kB
 dist/components/PlAgGridColumnManager/PlAgGridColumnManager.vue2.js                            3.84 kB │ gzip:  1.52 kB │ map:  4.99 kB
+dist/plugins/Monetization/LimitCard.vue2.js                                                    3.84 kB │ gzip:  1.15 kB │ map:  7.17 kB
 dist/components/PlAnnotations/components/PlAnnotationsModal.vue2.js                            3.89 kB │ gzip:  1.38 kB │ map:  5.48 kB
 dist/node_modules/.pnpm/semver@7.7.2/node_modules/semver/internal/re.js                        4.03 kB │ gzip:  1.23 kB │ map: 12.92 kB
 dist/components/PlAnnotations/components/FilterSidebar.vue2.js                                 4.50 kB │ gzip:  1.67 kB │ map:  5.97 kB
 dist/components/PlAnnotations/components/DynamicForm.vue2.js                                   4.52 kB │ gzip:  1.41 kB │ map:  6.96 kB
-dist/plugins/Monetization/MonetizationSidebar.vue.js                                           4.73 kB │ gzip:  1.76 kB │ map:  5.01 kB
+dist/plugins/Monetization/MonetizationSidebar.vue.js                                           4.70 kB │ gzip:  1.74 kB │ map:  4.91 kB
 dist/components/PlMultiSequenceAlignment/chemical-properties.js                                4.75 kB │ gzip:  1.67 kB │ map: 11.78 kB
 dist/components/BlockLayout.vue2.js                                                            4.96 kB │ gzip:  1.83 kB │ map:  2.96 kB
 dist/components/PlAnnotations/components/FilterSidebar.vue3.js                                 5.48 kB │ gzip:  1.59 kB │ map:  0.11 kB
@@ -215,7 +215,7 @@ computing gzip size...
 dist/components/PlAgRowNumHeader.vue.js                                                       44.65 kB │ gzip: 29.29 kB │ map:  3.70 kB
 dist/AgGridVue/useAgGridOptions.js                                                            49.29 kB │ gzip: 30.15 kB │ map: 16.35 kB
 dist/components/PlAgDataTable/PlAgDataTableV2.vue2.js                                         50.33 kB │ gzip: 31.04 kB │ map: 33.70 kB
-[vite:dts] Declaration files built in 8654ms.
+[vite:dts] Declaration files built in 9971ms.
 
-✓ built in 10.58s
+✓ built in 11.87s
 Build completed successfully

package/.turbo/turbo-type-check.log

@@ -1,6 +1,6 @@
  WARN  Issue while reading "/home/runner/_work/platforma/platforma/.npmrc". Failed to replace env in config: ${NPMJS_TOKEN}
 
-> @platforma-sdk/ui-vue@1.42.24 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
+> @platforma-sdk/ui-vue@1.42.34 type-check /home/runner/_work/platforma/platforma/sdk/ui-vue
 > ts-builder types --target browser-lib
 
 ↳ vue-tsc.js --noEmit --project ./tsconfig.json

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @platforma-sdk/ui-vue
 
+## 1.42.34
+
+### Patch Changes
+
+- Updated dependencies [e8f0e58]
+  - @milaboratories/uikit@2.4.6
+
+## 1.42.26
+
+### Patch Changes
+
+- 5714f79: Fix Monetization sidebar appearance
+
 ## 1.42.24
 
 ### Patch Changes

package/dist/plugins/Monetization/LimitCard.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as g, computed as i, createElementBlock as u, openBlock as d, normalizeClass as n, createElementVNode as l, toDisplayString as t, createTextVNode as o, normalizeStyle as p } from "vue";
-const S = { key: 0 }, B = { key: 1 }, c = /* @__PURE__ */ g({
+import { defineComponent as w, computed as i, createElementBlock as u, openBlock as r, normalizeClass as t, createElementVNode as n, toDisplayString as o, createTextVNode as y, createCommentVNode as p, normalizeStyle as b } from "vue";
+const F = { key: 0 }, N = { key: 1 }, A = { key: 0 }, C = { key: 1 }, T = /* @__PURE__ */ w({
   __name: "LimitCard",
   props: {
     type: {},
@@ -9,57 +9,70 @@ const S = { key: 0 }, B = { key: 1 }, c = /* @__PURE__ */ g({
     available: {},
     unit: {}
   },
-  setup(m) {
-    const s = m, v = i(() => s.available === null ? 0 : s.toSpend / s.available * 100), y = i(() => s.available === null ? 0 : s.used / s.available * 100), b = i(() => s.available === null ? 100 : 100 - y.value - v.value), $ = i(() => s.type === "unique_launches" ? "Runs Limits" : s.type === "volume_limit" ? "Volume Limits" : s.label), f = (e) => (e / 1024 / 1024 / 1024).toFixed(2) + " GB", r = (e) => s.type === "volume_limit" ? f(e) : e;
-    return (e, a) => (d(), u("div", {
-      class: n(e.$style.container)
+  setup(B) {
+    const l = B, s = i(() => l.available === null ? null : l.available + l.toSpend + l.used), v = i(() => l.available === null ? !1 : l.available < 0), $ = i(() => l.available === null ? null : l.available + l.toSpend), m = (e) => Math.max(0, Math.min(100, e)), g = i(() => s.value === null || s.value === 0 || v.value ? 0 : m(l.toSpend / s.value * 100)), S = i(() => s.value === null || s.value === 0 ? 0 : m(l.used / s.value * 100)), k = i(() => l.available === null || s.value === null || s.value === 0 ? 100 : v.value ? 0 : m(l.available / s.value * 100)), c = i(() => l.type === "unique_launches" ? "Runs Limits" : l.type === "volume_limit" ? "Volume Limits" : l.label), L = (e) => (e / 1024 / 1024 / 1024).toFixed(2) + " GB", d = (e) => l.type === "volume_limit" ? L(e) : e, f = (e) => Number(e.toFixed(2)) > 0;
+    return (e, a) => (r(), u("div", {
+      class: t(e.$style.container)
     }, [
-      l("span", {
-        class: n(e.$style.label)
-      }, t($.value), 3),
-      l("div", {
-        class: n(e.$style.content)
+      n("span", {
+        class: t(e.$style.label)
+      }, o(c.value), 3),
+      n("div", {
+        class: t(e.$style.content)
       }, [
-        l("div", {
-          class: n(e.$style.contentAvailable)
+        n("div", {
+          class: t(e.$style.contentAvailable)
         }, [
-          a[0] || (a[0] = o(" Available: ")),
-          a[1] || (a[1] = l("div", { style: { flex: "1" } }, null, -1)),
-          e.available !== null ? (d(), u("span", S, [
-            l("strong", null, t(r(e.available)), 1),
-            o(" / " + t(r(e.available + e.toSpend + e.used)), 1)
-          ])) : (d(), u("span", B, "Unlimited"))
-        ], 2),
-        l("div", {
-          class: n(e.$style.progressBar)
-        }, [
-          l("span", {
-            class: n(e.$style.progressBarAvailable),
-            style: p({ width: `${b.value}%` })
-          }, null, 6),
-          l("span", {
-            class: n(e.$style.progressBarToSpend),
-            style: p({ width: `${v.value}%` })
-          }, null, 6),
-          l("span", {
-            class: n(e.$style.progressBarUsed),
-            style: p({ width: `${y.value}%` })
-          }, null, 6)
+          n("div", null, [
+            a[0] || (a[0] = y(" Available: ")),
+            a[1] || (a[1] = n("div", { style: { flex: "1" } }, null, -1)),
+            $.value !== null ? (r(), u("span", F, [
+              n("strong", null, o(d($.value)), 1),
+              y(" / " + o(d(e.available + e.toSpend + e.used)), 1)
+            ])) : (r(), u("span", N, "Unlimited"))
+          ]),
+          n("div", {
+            class: t([e.$style.afterRun, { [e.$style.exceeded]: v.value }])
+          }, [
+            v.value ? (r(), u("span", A, "Too many files selected")) : p("", !0),
+            a[2] || (a[2] = n("span", { style: { flex: "1" } }, null, -1)),
+            a[3] || (a[3] = n("span", null, "After run:", -1)),
+            e.available !== null ? (r(), u("span", C, o(d(e.available)) + " / " + o(d(e.available + e.toSpend + e.used)), 1)) : p("", !0)
+          ], 2),
+          n("div", {
+            class: t([e.$style.progressBar, { [e.$style.exceeded]: v.value }])
+          }, [
+            f(k.value) ? (r(), u("span", {
+              key: 0,
+              class: t(e.$style.progressBarAvailable),
+              style: b({ width: `${k.value.toFixed(2)}%` })
+            }, null, 6)) : p("", !0),
+            f(g.value) ? (r(), u("span", {
+              key: 1,
+              class: t(e.$style.progressBarToSpend),
+              style: b({ width: `${g.value.toFixed(2)}%` })
+            }, null, 6)) : p("", !0),
+            f(S.value) ? (r(), u("span", {
+              key: 2,
+              class: t(e.$style.progressBarUsed),
+              style: b({ width: `${S.value.toFixed(2)}%` })
+            }, null, 6)) : p("", !0)
+          ], 2)
         ], 2),
-        l("div", {
-          class: n(e.$style.legends)
+        n("div", {
+          class: t(e.$style.legends)
         }, [
-          l("div", {
-            class: n(e.$style.usedLegend)
+          n("div", {
+            class: t(e.$style.toSpendLegend)
           }, [
-            a[2] || (a[2] = l("span", null, null, -1)),
-            o(" Used: " + t(r(e.used)), 1)
+            a[4] || (a[4] = n("span", null, null, -1)),
+            y(" To spend: " + o(d(e.toSpend)), 1)
           ], 2),
-          l("div", {
-            class: n(e.$style.toSpendLegend)
+          n("div", {
+            class: t(e.$style.usedLegend)
           }, [
-            a[3] || (a[3] = l("span", null, null, -1)),
-            o(" To spend: " + t(r(e.toSpend)), 1)
+            a[5] || (a[5] = n("span", null, null, -1)),
+            y(" Used: " + o(d(e.used)), 1)
           ], 2)
         ], 2)
       ], 2)
@@ -67,6 +80,6 @@ const S = { key: 0 }, B = { key: 1 }, c = /* @__PURE__ */ g({
   }
 });
 export {
-  c as default
+  T as default
 };
 //# sourceMappingURL=LimitCard.vue2.js.map

package/dist/plugins/Monetization/LimitCard.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitCard.vue2.js","sources":["../../../src/plugins/Monetization/LimitCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  type: 'unique_launches' | 'volume_limit';\n  label: string;\n  used: number;\n  toSpend: number;\n  available: number | null; // If available is null it means Unlimited\n  unit?: string;\n}>();\n\nconst toSpendPercentage = computed(() => {\n  if (props.available === null) return 0;\n  return (props.toSpend / props.available) * 100;\n});\n\nconst usedPercentage = computed(() => {\n  if (props.available === null) return 0;\n  return (props.used / props.available) * 100;\n});\n\nconst availablePercentage = computed(() => {\n  if (props.available === null) return 100;\n  return 100 - usedPercentage.value - toSpendPercentage.value;\n});\n\nconst computedLabel = computed(() => {\n  if (props.type === 'unique_launches') return 'Runs Limits';\n  if (props.type === 'volume_limit') return 'Volume Limits';\n  return props.label;\n});\n\nconst toGB = (v: number) => {\n  return (v / 1024 / 1024 / 1024).toFixed(2) + ' GB';\n};\n\nconst formatUnit = (v: number) => {\n  if (props.type === 'volume_limit') return toGB(v);\n  return v;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span :class=\"$style.label\">{{ computedLabel }}</span>\n    <div :class=\"$style.content\">\n      <div :class=\"$style.contentAvailable\">\n        Available:\n        <div style=\"flex: 1\" />\n        <span v-if=\"available !== null\"><strong>{{ formatUnit(available) }}</strong> / {{ formatUnit(available + toSpend + used) }}</span>\n        <span v-else>Unlimited</span>\n      </div>\n      <div :class=\"$style.progressBar\">\n        <span :class=\"$style.progressBarAvailable\" :style=\"{ width: `${availablePercentage}%` }\" />\n        <span :class=\"$style.progressBarToSpend\" :style=\"{ width: `${toSpendPercentage}%` }\" />\n        <span :class=\"$style.progressBarUsed\" :style=\"{ width: `${usedPercentage}%` }\" />\n      </div>\n      <div :class=\"$style.legends\">\n        <div :class=\"$style.usedLegend\">\n          <span/>\n          Used: {{ formatUnit(used) }}\n        </div>\n        <div :class=\"$style.toSpendLegend\">\n          <span/>\n          To spend: {{ formatUnit(toSpend) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  background-color: var(--bg-base-light);\n  border-radius: 6px;\n  padding: 10px 12px 16px 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  border: 1px solid var(--border-color-div-grey);\n}\n\n.label {\n  display: block;\n  margin-bottom: 30px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px; /* 142.857% */\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.contentAvailable {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  strong {\n    font-size: 28px;\n    font-weight: 500;\n    line-height: 36px; /* 128.571% */\n    letter-spacing: -0.56px;\n  }\n}\n\n.progressBar {\n  width: 100%;\n  height: 8px;\n  background-color: #E0E0E0;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color-default);\n  > span {\n    display: block;\n    height: 100%;\n  }\n}\n\n.progressBarAvailable {\n  background-color: #49CC49;\n  border-radius: 4px;\n}\n\n.progressBarUsed {\n  background-color: #FFCECC;\n  border-radius: 4px;\n}\n\n.progressBarToSpend {\n  background-color: #FAF5AA;\n  border-radius: 4px;\n}\n\n.legends {\n  display: flex;\n  gap: 8px;\n\n  > div {\n    flex: 1;\n  }\n\n  span {\n    display: block;\n    border-radius: 1px;\n    border: 1px solid var(--border-color-default);\n    width: 16px;\n    height: 16px;\n  }\n}\n\n.usedLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #FFCECC;\n  }\n}\n\n.toSpendLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #FAF5AA;\n  }\n}\n</style>\n"],"names":["props","__props","toSpendPercentage","computed","usedPercentage","availablePercentage","computedLabel","toGB","v","formatUnit"],"mappings":";;;;;;;;;;;;AAGA,UAAMA,IAAQC,GASRC,IAAoBC,EAAS,MAC7BH,EAAM,cAAc,OAAa,IAC7BA,EAAM,UAAUA,EAAM,YAAa,GAC5C,GAEKI,IAAiBD,EAAS,MAC1BH,EAAM,cAAc,OAAa,IAC7BA,EAAM,OAAOA,EAAM,YAAa,GACzC,GAEKK,IAAsBF,EAAS,MAC/BH,EAAM,cAAc,OAAa,MAC9B,MAAMI,EAAe,QAAQF,EAAkB,KACvD,GAEKI,IAAgBH,EAAS,MACzBH,EAAM,SAAS,oBAA0B,gBACzCA,EAAM,SAAS,iBAAuB,kBACnCA,EAAM,KACd,GAEKO,IAAO,CAACC,OACJA,IAAI,OAAO,OAAO,MAAM,QAAQ,CAAC,IAAI,OAGzCC,IAAa,CAACD,MACdR,EAAM,SAAS,iBAAuBO,EAAKC,CAAC,IACzCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LimitCard.vue2.js","sources":["../../../src/plugins/Monetization/LimitCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nconst props = defineProps<{\n  type: 'unique_launches' | 'volume_limit';\n  label: string;\n  used: number;\n  toSpend: number;\n  available: number | null; // If available is null it means Unlimited\n  unit?: string;\n}>();\n\nconst total = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend + props.used;\n});\n\nconst exceeded = computed(() => {\n  if (props.available === null) return false;\n  return props.available < 0;\n});\n\nconst availableNow = computed(() => {\n  if (props.available === null) return null;\n  return props.available + props.toSpend;\n});\n\nconst clampPercentage = (n: number) => Math.max(0, Math.min(100, n));\n\nconst toSpendPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  if (exceeded.value) return 0;\n  return clampPercentage((props.toSpend / total.value) * 100);\n});\n\nconst usedPercentage = computed(() => {\n  if (total.value === null) return 0;\n  if (total.value === 0) return 0;\n  return clampPercentage((props.used / total.value) * 100);\n});\n\nconst availablePercentage = computed(() => {\n  if (props.available === null) return 100;\n  if (total.value === null) return 100;\n  if (total.value === 0) return 100;\n  if (exceeded.value) return 0;\n  return clampPercentage(props.available / total.value * 100);\n});\n\nconst computedLabel = computed(() => {\n  if (props.type === 'unique_launches') return 'Runs Limits';\n  if (props.type === 'volume_limit') return 'Volume Limits';\n  return props.label;\n});\n\nconst toGB = (v: number) => {\n  return (v / 1024 / 1024 / 1024).toFixed(2) + ' GB';\n};\n\nconst formatUnit = (v: number) => {\n  if (props.type === 'volume_limit') return toGB(v);\n  return v;\n};\n\nconst showBar = (n: number) => {\n  return Number(n.toFixed(2)) > 0;\n};\n</script>\n\n<template>\n  <div :class=\"$style.container\">\n    <span :class=\"$style.label\">{{ computedLabel }}</span>\n    <div :class=\"$style.content\">\n      <div :class=\"$style.contentAvailable\">\n        <div>\n          Available:\n          <div style=\"flex: 1\" />\n          <span v-if=\"availableNow !== null\"><strong>{{ formatUnit(availableNow) }}</strong> / {{ formatUnit(available! + toSpend + used) }}</span>\n          <span v-else>Unlimited</span>\n        </div>\n        <div :class=\"[$style.afterRun, { [$style.exceeded]: exceeded }]\">\n          <span v-if=\"exceeded\">Too many files selected</span>\n          <span style=\"flex: 1\" />\n          <span>After run:</span>\n          <span v-if=\"available !== null\">{{ formatUnit(available) }} / {{ formatUnit(available + toSpend + used) }}</span>\n        </div>\n        <div :class=\"[$style.progressBar, { [$style.exceeded]: exceeded }]\">\n          <span v-if=\"showBar(availablePercentage)\" :class=\"$style.progressBarAvailable\" :style=\"{ width: `${availablePercentage.toFixed(2)}%` }\" />\n          <span v-if=\"showBar(toSpendPercentage)\" :class=\"$style.progressBarToSpend\" :style=\"{ width: `${toSpendPercentage.toFixed(2)}%` }\" />\n          <span v-if=\"showBar(usedPercentage)\" :class=\"$style.progressBarUsed\" :style=\"{ width: `${usedPercentage.toFixed(2)}%` }\" />\n        </div>\n      </div>\n      <div :class=\"$style.legends\">\n        <div :class=\"$style.toSpendLegend\">\n          <span/>\n          To spend: {{ formatUnit(toSpend) }}\n        </div>\n        <div :class=\"$style.usedLegend\">\n          <span/>\n          Used: {{ formatUnit(used) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style module>\n.container {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--bg-base-light);\n  border-radius: 6px;\n  padding: 10px 12px 16px 12px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  border: 1px solid var(--border-color-div-grey);\n}\n\n.label {\n  display: block;\n  min-height: 36px;\n  margin-bottom: 8px;\n  color: var(--txt-01);\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px; /* 142.857% */\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.contentAvailable {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  > div {\n    display: flex;\n    align-items: flex-start;\n  }\n  >div:first-child {\n    gap: 8px;\n    strong {\n      font-size: 28px;\n      font-weight: 500;\n      line-height: 36px; /* 128.571% */\n      letter-spacing: -0.56px;\n    }\n  }\n}\n\n.afterRun {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px;\n  color: var(--txt-03);\n  &.exceeded {\n    color: var(--txt-error);\n  }\n}\n\n.progressBar {\n  width: 100%;\n  height: 12px;\n  background-color: #E0E0E0;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color-default);\n  > span {\n    display: block;\n    height: 100%;\n    outline: 1px solid var(--border-color-default);\n  }\n  &.exceeded {\n    opacity: 0.2;\n  }\n}\n\n.progressBarAvailable {\n  background: linear-gradient(270deg, #A1E59C 0%, #D0F5B0 98.81%);\n}\n\n.progressBarUsed {\n  background-color: #FFCECC;\n}\n\n.progressBarToSpend {\n  background-color: #FAF5AA;\n}\n\n.legends {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n\n  span {\n    display: block;\n    border-radius: 1px;\n    border: 1px solid var(--border-color-default);\n    width: 12px;\n    height: 12px;\n  }\n}\n\n.usedLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #FFCECC;\n  }\n}\n\n.toSpendLegend {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    background: #FAF5AA;\n  }\n}\n</style>\n"],"names":["props","__props","total","computed","exceeded","availableNow","clampPercentage","n","toSpendPercentage","usedPercentage","availablePercentage","computedLabel","toGB","v","formatUnit","showBar"],"mappings":";;;;;;;;;;;;AAGA,UAAMA,IAAQC,GASRC,IAAQC,EAAS,MACjBH,EAAM,cAAc,OAAa,OAC9BA,EAAM,YAAYA,EAAM,UAAUA,EAAM,IAChD,GAEKI,IAAWD,EAAS,MACpBH,EAAM,cAAc,OAAa,KAC9BA,EAAM,YAAY,CAC1B,GAEKK,IAAeF,EAAS,MACxBH,EAAM,cAAc,OAAa,OAC9BA,EAAM,YAAYA,EAAM,OAChC,GAEKM,IAAkB,CAACC,MAAc,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKA,CAAC,CAAC,GAE7DC,IAAoBL,EAAS,MAC7BD,EAAM,UAAU,QAChBA,EAAM,UAAU,KAChBE,EAAS,QAAc,IACpBE,EAAiBN,EAAM,UAAUE,EAAM,QAAS,GAAG,CAC3D,GAEKO,IAAiBN,EAAS,MAC1BD,EAAM,UAAU,QAChBA,EAAM,UAAU,IAAU,IACvBI,EAAiBN,EAAM,OAAOE,EAAM,QAAS,GAAG,CACxD,GAEKQ,IAAsBP,EAAS,MAC/BH,EAAM,cAAc,QACpBE,EAAM,UAAU,QAChBA,EAAM,UAAU,IAAU,MAC1BE,EAAS,QAAc,IACpBE,EAAgBN,EAAM,YAAYE,EAAM,QAAQ,GAAG,CAC3D,GAEKS,IAAgBR,EAAS,MACzBH,EAAM,SAAS,oBAA0B,gBACzCA,EAAM,SAAS,iBAAuB,kBACnCA,EAAM,KACd,GAEKY,IAAO,CAACC,OACJA,IAAI,OAAO,OAAO,MAAM,QAAQ,CAAC,IAAI,OAGzCC,IAAa,CAACD,MACdb,EAAM,SAAS,iBAAuBY,EAAKC,CAAC,IACzCA,GAGHE,IAAU,CAACR,MACR,OAAOA,EAAE,QAAQ,CAAC,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/plugins/Monetization/LimitCard.vue3.js

@@ -1,29 +1,33 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_1qgbe_2{display:flex;flex-direction:column;gap:8px;background-color:var(--bg-base-light);border-radius:6px;padding:10px 12px 16px;color:var(--txt-01);font-size:14px;font-weight:500;line-height:20px;border:1px solid var(--border-color-div-grey)}._label_1qgbe_16{display:block;margin-bottom:30px;color:var(--txt-01);font-size:14px;font-weight:600;line-height:20px}._content_1qgbe_25{display:flex;flex-direction:column;gap:20px}._contentAvailable_1qgbe_31{display:flex;align-items:flex-start;gap:8px}._contentAvailable_1qgbe_31 strong{font-size:28px;font-weight:500;line-height:36px;letter-spacing:-.56px}._progressBar_1qgbe_43{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;display:flex;align-items:center;border:1px solid var(--border-color-default)}._progressBar_1qgbe_43>span{display:block;height:100%}._progressBarAvailable_1qgbe_57{background-color:#49cc49;border-radius:4px}._progressBarUsed_1qgbe_62{background-color:#ffcecc;border-radius:4px}._progressBarToSpend_1qgbe_67{background-color:#faf5aa;border-radius:4px}._legends_1qgbe_72{display:flex;gap:8px}._legends_1qgbe_72>div{flex:1}._legends_1qgbe_72 span{display:block;border-radius:1px;border:1px solid var(--border-color-default);width:16px;height:16px}._usedLegend_1qgbe_89{display:flex;align-items:center;gap:8px}._usedLegend_1qgbe_89 span{background:#ffcecc}._toSpendLegend_1qgbe_98{display:flex;align-items:center;gap:8px}._toSpendLegend_1qgbe_98 span{background:#faf5aa}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
-const e = "_container_1qgbe_2", s = "_label_1qgbe_16", n = "_content_1qgbe_25", o = "_contentAvailable_1qgbe_31", r = "_progressBar_1qgbe_43", t = "_progressBarAvailable_1qgbe_57", _ = "_progressBarUsed_1qgbe_62", a = "_progressBarToSpend_1qgbe_67", g = "_legends_1qgbe_72", l = "_usedLegend_1qgbe_89", d = "_toSpendLegend_1qgbe_98", c = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._container_17ssa_2{display:flex;flex-direction:column;background-color:var(--bg-base-light);border-radius:6px;padding:10px 12px 16px;color:var(--txt-01);font-size:14px;font-weight:500;line-height:20px;border:1px solid var(--border-color-div-grey)}._label_17ssa_15{display:block;min-height:36px;margin-bottom:8px;color:var(--txt-01);font-size:14px;font-weight:600;line-height:20px}._content_17ssa_25{display:flex;flex-direction:column;gap:16px}._contentAvailable_17ssa_31{display:flex;flex-direction:column;gap:6px}._contentAvailable_17ssa_31>div{display:flex;align-items:flex-start}._contentAvailable_17ssa_31>div:first-child{gap:8px}._contentAvailable_17ssa_31>div:first-child strong{font-size:28px;font-weight:500;line-height:36px;letter-spacing:-.56px}._afterRun_17ssa_50{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;color:var(--txt-03)}._afterRun_17ssa_50._exceeded_17ssa_60{color:var(--txt-error)}._progressBar_17ssa_65{width:100%;height:12px;background-color:#e0e0e0;display:flex;align-items:center;border:1px solid var(--border-color-default)}._progressBar_17ssa_65>span{display:block;height:100%;outline:1px solid var(--border-color-default)}._progressBar_17ssa_65._exceeded_17ssa_60{opacity:.2}._progressBarAvailable_17ssa_82{background:linear-gradient(270deg,#a1e59c,#d0f5b0 98.81%)}._progressBarUsed_17ssa_86{background-color:#ffcecc}._progressBarToSpend_17ssa_90{background-color:#faf5aa}._legends_17ssa_94{display:flex;justify-content:space-between;gap:8px}._legends_17ssa_94 span{display:block;border-radius:1px;border:1px solid var(--border-color-default);width:12px;height:12px}._usedLegend_17ssa_108{display:flex;align-items:center;gap:8px}._usedLegend_17ssa_108 span{background:#ffcecc}._toSpendLegend_17ssa_117{display:flex;align-items:center;gap:8px}._toSpendLegend_17ssa_117 span{background:#faf5aa}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+const e = "_container_17ssa_2", s = "_label_17ssa_15", n = "_content_17ssa_25", a = "_contentAvailable_17ssa_31", r = "_afterRun_17ssa_50", o = "_exceeded_17ssa_60", _ = "_progressBar_17ssa_65", t = "_progressBarAvailable_17ssa_82", d = "_progressBarUsed_17ssa_86", c = "_progressBarToSpend_17ssa_90", l = "_legends_17ssa_94", g = "_usedLegend_17ssa_108", p = "_toSpendLegend_17ssa_117", B = {
   container: e,
   label: s,
   content: n,
-  contentAvailable: o,
-  progressBar: r,
+  contentAvailable: a,
+  afterRun: r,
+  exceeded: o,
+  progressBar: _,
   progressBarAvailable: t,
-  progressBarUsed: _,
-  progressBarToSpend: a,
-  legends: g,
-  usedLegend: l,
-  toSpendLegend: d
+  progressBarUsed: d,
+  progressBarToSpend: c,
+  legends: l,
+  usedLegend: g,
+  toSpendLegend: p
 };
 export {
+  r as afterRun,
   e as container,
   n as content,
-  o as contentAvailable,
-  c as default,
+  a as contentAvailable,
+  B as default,
+  o as exceeded,
   s as label,
-  g as legends,
-  r as progressBar,
+  l as legends,
+  _ as progressBar,
   t as progressBarAvailable,
-  a as progressBarToSpend,
-  _ as progressBarUsed,
-  d as toSpendLegend,
-  l as usedLegend
+  c as progressBarToSpend,
+  d as progressBarUsed,
+  p as toSpendLegend,
+  g as usedLegend
 };
 //# sourceMappingURL=LimitCard.vue3.js.map

package/dist/plugins/Monetization/LimitCard.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"LimitCard.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"LimitCard.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/plugins/Monetization/MonetizationSidebar.vue.js

@@ -1,39 +1,39 @@
-import { defineComponent as h, ref as T, computed as s, createElementBlock as P, openBlock as n, Fragment as S, createBlock as l, createCommentVNode as u, unref as e, withCtx as i, createVNode as d, createTextVNode as x, toDisplayString as E, renderList as L, createElementVNode as N, Teleport as M, withModifiers as R } from "vue";
+import { defineComponent as T, ref as U, computed as s, createElementBlock as P, openBlock as n, Fragment as S, createBlock as l, createCommentVNode as u, unref as e, withCtx as i, createVNode as d, createTextVNode as x, toDisplayString as E, renderList as L, createElementVNode as N, Teleport as M, withModifiers as R } from "vue";
 import { PlSlideModal as I, PlDropdown as O, PlBtnSecondary as q, PlAlert as D, PlBtnGhost as $, PlIcon24 as A } from "@milaboratories/uikit";
 import { useButtonTarget as F } from "./useButtonTarget.js";
 import { useInfo as G } from "./useInfo.js";
 import K from "./UserCabinetCard.vue.js";
-import W from "./RunStatus.vue.js";
-import j from "./LimitCard.vue.js";
-import H from "./EndOfPeriod.vue.js";
-const oe = /* @__PURE__ */ h({
+import j from "./RunStatus.vue.js";
+import H from "./LimitCard.vue.js";
+import J from "./EndOfPeriod.vue.js";
+const oe = /* @__PURE__ */ T({
   __name: "MonetizationSidebar",
-  setup(J) {
-    const p = T(!1), {
+  setup(Q) {
+    const p = U(!1), {
       result: o,
-      error: m,
+      error: f,
       hasMonetization: c,
-      canRun: f,
-      status: v,
-      customerEmail: b,
-      endOfBillingPeriod: y,
-      limits: g,
-      refresh: w,
-      isLoading: B
-    } = G(), k = F(c), V = s(() => {
+      canRun: v,
+      status: B,
+      customerEmail: m,
+      endOfBillingPeriod: b,
+      limits: y,
+      refresh: V,
+      isLoading: g
+    } = G(), k = F(c), _ = s(() => {
       var a;
       return (a = o.value) == null ? void 0 : a.productName;
     }), C = s(() => {
       if (!o.value) return;
       const a = new URL(`https://scientist.platforma.bio/product/${o.value.productKey}`);
-      return b.value && a.searchParams.set("email", b.value), a.toString();
-    }), z = s(() => o.value ? [
+      return m.value && a.searchParams.set("email", m.value), a.toString();
+    }), h = s(() => o.value ? [
       {
         label: o.value.productName,
         value: o.value.productName
       }
-    ] : []), U = s(() => {
-      switch (v.value) {
+    ] : []), w = s(() => {
+      switch (B.value) {
         case "active":
           return "";
         case "limits_exceeded":
@@ -44,12 +44,10 @@ const oe = /* @__PURE__ */ h({
           return "Select a subscription plan in the Scientist Cabinet.";
         case "inactive":
           return "Not found billing period.";
-        case "awaiting":
-          return "Waiting for monetization information";
         default:
-          return "Unknown status: " + v.value;
+          return "";
       }
-    }), _ = s(() => f.value ? "monetization-on" : "monetization-off");
+    }), z = s(() => v.value ? "monetization-on" : "monetization-off");
     return (a, r) => (n(), P(S, null, [
       e(c) ? (n(), l(e(I), {
         key: 0,
@@ -65,12 +63,13 @@ const oe = /* @__PURE__ */ h({
           d(e(O), {
             label: "Product",
             readonly: "",
-            "model-value": V.value,
-            options: z.value
+            "model-value": _.value,
+            options: h.value
           }, null, 8, ["model-value", "options"]),
-          d(W, {
-            "can-run": e(f),
-            "status-text": U.value
+          d(j, {
+            "can-run": e(v),
+            "is-loading": e(g),
+            "status-text": w.value
           }, {
             default: i(() => [
               d(e(q), {
@@ -79,30 +78,31 @@ const oe = /* @__PURE__ */ h({
                 size: "small",
                 style: { "margin-left": "auto" },
                 icon: "loading",
-                loading: e(B),
-                onClick: e(w)
+                loading: e(g),
+                onClick: e(V)
               }, null, 8, ["loading", "onClick"])
             ]),
             _: 1
-          }, 8, ["can-run", "status-text"]),
-          e(m) ? (n(), l(e(D), {
+          }, 8, ["can-run", "is-loading", "status-text"]),
+          e(f) ? (n(), l(e(D), {
             key: 0,
             type: "error"
           }, {
             default: i(() => [
-              x(E(e(m)), 1)
+              x(E(e(f)), 1)
             ]),
             _: 1
           })) : u("", !0),
           C.value ? (n(), l(K, {
             key: 1,
+            email: e(m),
             "user-cabinet-url": C.value
-          }, null, 8, ["user-cabinet-url"])) : u("", !0),
-          e(y) ? (n(), l(H, {
+          }, null, 8, ["email", "user-cabinet-url"])) : u("", !0),
+          e(b) ? (n(), l(J, {
             key: 2,
-            "end-of-period": e(y)
+            "end-of-period": e(b)
           }, null, 8, ["end-of-period"])) : u("", !0),
-          e(g) ? (n(!0), P(S, { key: 3 }, L(e(g), (t) => (n(), l(j, {
+          e(y) ? (n(!0), P(S, { key: 3 }, L(e(y), (t) => (n(), l(H, {
             key: t.type,
             type: t.type,
             label: t.type,
@@ -121,7 +121,7 @@ const oe = /* @__PURE__ */ h({
           onClick: r[1] || (r[1] = R((t) => p.value = !0, ["stop"]))
         }, {
           append: i(() => [
-            d(e(A), { name: _.value }, null, 8, ["name"])
+            d(e(A), { name: z.value }, null, 8, ["name"])
           ]),
           default: i(() => [
             r[3] || (r[3] = x(" Subscription "))

package/dist/plugins/Monetization/MonetizationSidebar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonetizationSidebar.vue.js","sources":["../../../src/plugins/Monetization/MonetizationSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { PlSlideModal, PlBtnGhost, PlDropdown, PlAlert, PlIcon24, PlBtnSecondary } from '@milaboratories/uikit';\nimport { useButtonTarget } from './useButtonTarget';\nimport { useInfo } from './useInfo';\nimport UserCabinetCard from './UserCabinetCard.vue';\nimport RunStatus from './RunStatus.vue';\nimport LimitCard from './LimitCard.vue';\nimport EndOfPeriod from './EndOfPeriod.vue';\n\nconst isOpen = ref(false);\n\nconst {\n  result,\n  error,\n  hasMonetization,\n  canRun,\n  status,\n  customerEmail,\n  endOfBillingPeriod,\n  limits,\n  refresh,\n  isLoading,\n} = useInfo();\n\nconst teleportTarget = useButtonTarget(hasMonetization);\n\nconst productName = computed(() => result.value?.productName);\n\nconst userCabinetUrl = computed(() => {\n  if (!result.value) return undefined;\n\n  const u = new URL(`https://scientist.platforma.bio/product/${result.value.productKey}`);\n\n  if (customerEmail.value) {\n    u.searchParams.set('email', customerEmail.value);\n  }\n\n  return u.toString();\n});\n\nconst options = computed(() => {\n  if (!result.value) return [];\n\n  return [\n    {\n      label: result.value.productName,\n      value: result.value.productName,\n    },\n  ];\n});\n\nconst statusText = computed(() => {\n  switch (status.value) {\n    case 'active':\n      return '';\n    case 'limits_exceeded':\n      return 'Usage limits exceeded for the current billing period.';\n    case 'payment_required':\n      return 'Payment required to continue using the service.';\n    case 'select-tariff':\n      return 'Select a subscription plan in the Scientist Cabinet.';\n    case 'inactive':\n      return 'Not found billing period.';\n    case 'awaiting':\n      return 'Waiting for monetization information';\n    default:\n      return 'Unknown status: ' + status.value;\n  }\n});\n\nconst btnIcon = computed(() => {\n  if (canRun.value) return 'monetization-on';\n  return 'monetization-off';\n});\n</script>\n\n<template>\n  <PlSlideModal v-if=\"hasMonetization\" v-model=\"isOpen\">\n    <template #title>\n      <div class=\"flex items-center gap-2\">\n        <span>Subscription</span>\n      </div>\n    </template>\n    <PlDropdown label=\"Product\" readonly :model-value=\"productName\" :options=\"options\" />\n    <RunStatus :can-run=\"canRun\" :status-text=\"statusText\">\n      <PlBtnSecondary\n        title=\"Refresh status\"\n        round\n        size=\"small\"\n        style=\"margin-left: auto;\"\n        icon=\"loading\"\n        :loading=\"isLoading\"\n        @click=\"refresh\"\n      />\n    </RunStatus>\n    <PlAlert v-if=\"error\" type=\"error\">\n      {{ error }}\n    </PlAlert>\n    <UserCabinetCard v-if=\"userCabinetUrl\" :user-cabinet-url=\"userCabinetUrl\" />\n    <EndOfPeriod v-if=\"endOfBillingPeriod\" :end-of-period=\"endOfBillingPeriod\" />\n    <template v-if=\"limits\">\n      <LimitCard\n        v-for=\"limit in limits\"\n        :key=\"limit.type\"\n        :type=\"limit.type\"\n        :label=\"limit.type\"\n        :used=\"limit.used\"\n        :to-spend=\"limit.toSpend\"\n        :available=\"limit.available\"\n      />\n    </template>\n  </PlSlideModal>\n  <!-- Teleport to the title slot -->\n  <Teleport v-if=\"hasMonetization && teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost @click.stop=\"isOpen = true\">\n      Subscription\n      <template #append>\n        <PlIcon24 :name=\"btnIcon\" />\n      </template>\n    </PlBtnGhost>\n  </Teleport>\n</template>\n"],"names":["isOpen","ref","result","error","hasMonetization","canRun","status","customerEmail","endOfBillingPeriod","limits","refresh","isLoading","useInfo","teleportTarget","useButtonTarget","productName","computed","_a","userCabinetUrl","u","options","statusText","btnIcon"],"mappings":";;;;;;;;;;;AAUA,UAAMA,IAASC,EAAI,EAAK,GAElB;AAAA,MACJ,QAAAC;AAAA,MACA,OAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,QAAAC;AAAA,MACA,QAAAC;AAAA,MACA,eAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,IACEC,EAAA,GAEEC,IAAiBC,EAAgBV,CAAe,GAEhDW,IAAcC,EAAS,MAAA;;AAAM,cAAAC,IAAAf,EAAO,UAAP,gBAAAe,EAAc;AAAA,KAAW,GAEtDC,IAAiBF,EAAS,MAAM;AACpC,UAAI,CAACd,EAAO,MAAO;AAEnB,YAAMiB,IAAI,IAAI,IAAI,2CAA2CjB,EAAO,MAAM,UAAU,EAAE;AAEtF,aAAIK,EAAc,SAChBY,EAAE,aAAa,IAAI,SAASZ,EAAc,KAAK,GAG1CY,EAAE,SAAA;AAAA,IACX,CAAC,GAEKC,IAAUJ,EAAS,MAClBd,EAAO,QAEL;AAAA,MACL;AAAA,QACE,OAAOA,EAAO,MAAM;AAAA,QACpB,OAAOA,EAAO,MAAM;AAAA,MAAA;AAAA,IACtB,IANwB,CAAA,CAQ3B,GAEKmB,IAAaL,EAAS,MAAM;AAChC,cAAQV,EAAO,OAAA;AAAA,QACb,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO,qBAAqBA,EAAO;AAAA,MAAA;AAAA,IAEzC,CAAC,GAEKgB,IAAUN,EAAS,MACnBX,EAAO,QAAc,oBAClB,kBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MonetizationSidebar.vue.js","sources":["../../../src/plugins/Monetization/MonetizationSidebar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { PlSlideModal, PlBtnGhost, PlDropdown, PlAlert, PlIcon24, PlBtnSecondary } from '@milaboratories/uikit';\nimport { useButtonTarget } from './useButtonTarget';\nimport { useInfo } from './useInfo';\nimport UserCabinetCard from './UserCabinetCard.vue';\nimport RunStatus from './RunStatus.vue';\nimport LimitCard from './LimitCard.vue';\nimport EndOfPeriod from './EndOfPeriod.vue';\n\nconst isOpen = ref(false);\n\nconst {\n  result,\n  error,\n  hasMonetization,\n  canRun,\n  status,\n  customerEmail,\n  endOfBillingPeriod,\n  limits,\n  refresh,\n  isLoading,\n} = useInfo();\n\nconst teleportTarget = useButtonTarget(hasMonetization);\n\nconst productName = computed(() => result.value?.productName);\n\nconst userCabinetUrl = computed(() => {\n  if (!result.value) return undefined;\n\n  const u = new URL(`https://scientist.platforma.bio/product/${result.value.productKey}`);\n\n  if (customerEmail.value) {\n    u.searchParams.set('email', customerEmail.value);\n  }\n\n  return u.toString();\n});\n\nconst options = computed(() => {\n  if (!result.value) return [];\n\n  return [\n    {\n      label: result.value.productName,\n      value: result.value.productName,\n    },\n  ];\n});\n\nconst statusText = computed(() => {\n  switch (status.value) {\n    case 'active':\n      return '';\n    case 'limits_exceeded':\n      return 'Usage limits exceeded for the current billing period.';\n    case 'payment_required':\n      return 'Payment required to continue using the service.';\n    case 'select-tariff':\n      return 'Select a subscription plan in the Scientist Cabinet.';\n    case 'inactive':\n      return 'Not found billing period.';\n    default:\n      return '';\n  }\n});\n\nconst btnIcon = computed(() => {\n  if (canRun.value) return 'monetization-on';\n  return 'monetization-off';\n});\n</script>\n\n<template>\n  <PlSlideModal v-if=\"hasMonetization\" v-model=\"isOpen\">\n    <template #title>\n      <div class=\"flex items-center gap-2\">\n        <span>Subscription</span>\n      </div>\n    </template>\n    <PlDropdown label=\"Product\" readonly :model-value=\"productName\" :options=\"options\" />\n    <RunStatus :can-run=\"canRun\" :is-loading=\"isLoading\" :status-text=\"statusText\">\n      <PlBtnSecondary\n        title=\"Refresh status\"\n        round\n        size=\"small\"\n        style=\"margin-left: auto;\"\n        icon=\"loading\"\n        :loading=\"isLoading\"\n        @click=\"refresh\"\n      />\n    </RunStatus>\n    <PlAlert v-if=\"error\" type=\"error\">\n      {{ error }}\n    </PlAlert>\n    <UserCabinetCard v-if=\"userCabinetUrl\" :email=\"customerEmail\" :user-cabinet-url=\"userCabinetUrl\" />\n    <EndOfPeriod v-if=\"endOfBillingPeriod\" :end-of-period=\"endOfBillingPeriod\" />\n    <template v-if=\"limits\">\n      <LimitCard\n        v-for=\"limit in limits\"\n        :key=\"limit.type\"\n        :type=\"limit.type\"\n        :label=\"limit.type\"\n        :used=\"limit.used\"\n        :to-spend=\"limit.toSpend\"\n        :available=\"limit.available\"\n      />\n    </template>\n  </PlSlideModal>\n  <!-- Teleport to the title slot -->\n  <Teleport v-if=\"hasMonetization && teleportTarget\" :to=\"teleportTarget\">\n    <PlBtnGhost @click.stop=\"isOpen = true\">\n      Subscription\n      <template #append>\n        <PlIcon24 :name=\"btnIcon\" />\n      </template>\n    </PlBtnGhost>\n  </Teleport>\n</template>\n"],"names":["isOpen","ref","result","error","hasMonetization","canRun","status","customerEmail","endOfBillingPeriod","limits","refresh","isLoading","useInfo","teleportTarget","useButtonTarget","productName","computed","_a","userCabinetUrl","u","options","statusText","btnIcon"],"mappings":";;;;;;;;;;;AAUA,UAAMA,IAASC,EAAI,EAAK,GAElB;AAAA,MACJ,QAAAC;AAAA,MACA,OAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,QAAAC;AAAA,MACA,QAAAC;AAAA,MACA,eAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,IACEC,EAAA,GAEEC,IAAiBC,EAAgBV,CAAe,GAEhDW,IAAcC,EAAS,MAAA;;AAAM,cAAAC,IAAAf,EAAO,UAAP,gBAAAe,EAAc;AAAA,KAAW,GAEtDC,IAAiBF,EAAS,MAAM;AACpC,UAAI,CAACd,EAAO,MAAO;AAEnB,YAAMiB,IAAI,IAAI,IAAI,2CAA2CjB,EAAO,MAAM,UAAU,EAAE;AAEtF,aAAIK,EAAc,SAChBY,EAAE,aAAa,IAAI,SAASZ,EAAc,KAAK,GAG1CY,EAAE,SAAA;AAAA,IACX,CAAC,GAEKC,IAAUJ,EAAS,MAClBd,EAAO,QAEL;AAAA,MACL;AAAA,QACE,OAAOA,EAAO,MAAM;AAAA,QACpB,OAAOA,EAAO,MAAM;AAAA,MAAA;AAAA,IACtB,IANwB,CAAA,CAQ3B,GAEKmB,IAAaL,EAAS,MAAM;AAChC,cAAQV,EAAO,OAAA;AAAA,QACb,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb,CAAC,GAEKgB,IAAUN,EAAS,MACnBX,EAAO,QAAc,oBAClB,kBACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/plugins/Monetization/RunStatus.vue.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     canRun: boolean | undefined;
     statusText: string | undefined;
+    isLoading?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/plugins/Monetization/RunStatus.vue2.js

@@ -1,44 +1,41 @@
-import { defineComponent as p, computed as a, createElementBlock as r, openBlock as l, createElementVNode as n, createCommentVNode as o, normalizeClass as t, renderSlot as d, toDisplayString as u } from "vue";
-import "@milaboratories/uikit";
-const $ = /* @__PURE__ */ p({
+import { defineComponent as i, computed as d, createElementBlock as a, openBlock as l, createElementVNode as n, createCommentVNode as p, normalizeClass as s, renderSlot as y, toDisplayString as o } from "vue";
+const g = /* @__PURE__ */ i({
   __name: "RunStatus",
   props: {
     canRun: { type: Boolean },
-    statusText: {}
+    statusText: {},
+    isLoading: { type: Boolean }
   },
-  setup(i) {
-    const s = i;
-    a(() => s.canRun ? "Can run" : "Cannot run: check your monetization settings");
-    const c = a(() => s.canRun ? "Ready to run" : "Cannot run");
-    return (e, m) => (l(), r("div", null, [
+  setup(r) {
+    const t = r, u = d(() => t.isLoading ? "Updating..." : t.canRun ? "Ready to run" : "Cannot run");
+    return (e, c) => (l(), a("div", null, [
       n("div", {
-        class: t([{ [e.$style["can-run"]]: e.canRun }, e.$style.container])
+        class: s([{ [e.$style["can-run"]]: e.canRun, [e.$style.loading]: e.isLoading }, e.$style.container])
       }, [
         n("div", {
-          class: t(e.$style.badge)
+          class: s(e.$style.badge)
         }, [
           n("i", {
-            class: t(e.$style.blob)
+            class: s(e.$style.blob)
           }, [
             n("span", null, [
               n("span", {
-                class: t(e.$style.dot)
+                class: s(e.$style.dot)
               }, null, 2)
             ])
           ], 2),
-          n("span", null, u(c.value), 1)
+          n("span", null, o(u.value), 1)
         ], 2),
-        o("", !0),
-        d(e.$slots, "default")
+        y(e.$slots, "default")
       ], 2),
-      e.statusText ? (l(), r("div", {
+      e.statusText ? (l(), a("div", {
         key: 0,
-        class: t(e.$style.statusText)
-      }, u(e.statusText), 3)) : o("", !0)
+        class: s(e.$style.statusText)
+      }, o(e.statusText), 3)) : p("", !0)
     ]));
   }
 });
 export {
-  $ as default
+  g as default
 };
 //# sourceMappingURL=RunStatus.vue2.js.map