@contena/meteor-component-library 5.6.2 → 5.7.0

package/dist/mt-grant-permission-service-banner-dc1f0940.js

@@ -0,0 +1,190 @@
+import './mt-grant-permission-service-banner.css';
+"use strict";
+const vue = require("vue");
+const index = require("./index-e582fef8.js");
+const vueI18n = require("vue-i18n");
+const mtIcon_vue_vue_type_style_index_0_lang = require("./mt-icon.vue_vue_type_style_index_0_lang-228a1bb5.js");
+const MtText = require("./common/MtText.js");
+const MtButton = require("./common/MtButton.js");
+const channel = require("./channel-41ddc4ca.js");
+const index$1 = require("./index-fab01d0b.js");
+const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-9c783a34.js");
+const isService = channel.createSender("contextIsService", {});
+const grant = channel.createSender("servicePermissionGrant", {});
+const isGranted = channel.createSender("servicePermissionIsGranted", {});
+function useServicePermission() {
+  const isGranting = vue.ref(false);
+  const isService$1 = index.computedAsync(async () => {
+    try {
+      return await isService();
+    } catch {
+      return null;
+    }
+  }, null);
+  const permissionGranted = index.computedAsync(async () => {
+    try {
+      return await isGranted();
+    } catch {
+      return null;
+    }
+  }, null);
+  const isShowPermissionUI = vue.computed(
+    () => isService$1.value === true && permissionGranted.value === false
+  );
+  async function grant$1() {
+    if (isGranting.value)
+      return;
+    isGranting.value = true;
+    try {
+      await grant();
+    } catch (error) {
+      console.error("Error granting permission:", error);
+      throw error;
+    } finally {
+      isGranting.value = false;
+    }
+  }
+  return {
+    isGranting,
+    isService: isService$1,
+    permissionGranted,
+    isShowPermissionUI,
+    grant: grant$1
+  };
+}
+const dispatch = channel.createSender("telemetryDispatch");
+const _hoisted_1 = {
+  key: 0,
+  class: "mt-grant-permission-service-banner__container"
+};
+const _hoisted_2 = ["aria-labelledby"];
+const _hoisted_3 = { class: "mt-grant-permission-service-banner__body" };
+const _hoisted_4 = { class: "mt-grant-permission-service-banner__actions" };
+const _hoisted_5 = { class: "mt-grant-permission-service-banner__label--short" };
+const _hoisted_6 = { class: "mt-grant-permission-service-banner__label--long" };
+const __default__ = {
+  name: "MtGrantPermissionServiceBanner"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  emits: ["grant-success", "grant-error", "more-info"],
+  setup(__props, { emit: __emit }) {
+    const { t } = vueI18n.useI18n({
+      messages: {
+        en: {
+          title: "Grant permissions to activate this service.",
+          description: "Only the data needed to function will be accessed.",
+          grantLabel: "Grant permissions",
+          grantLongLabel: "Grant permissions and activate",
+          moreInfo: "More info",
+          moreInfoUrl: "https://developer.contena.cn/docs/"
+        },
+        zh: {
+          title: "授予权限以启用此服务。",
+          description: "仅访问此功能运行所需的数据。",
+          grantLabel: "授予权限",
+          grantLongLabel: "授予权限并启用",
+          moreInfo: "了解更多",
+          moreInfoUrl: "https://developer.contena.cn/docs/"
+        }
+      }
+    });
+    const titleId = vue.useId();
+    const emit = __emit;
+    const { isGranting, isShowPermissionUI, grant: grant2 } = useServicePermission();
+    const appInfo = index.computedAsync(async () => {
+      return await index$1.getAppInformation();
+    }, null);
+    function track(event, data) {
+      dispatch({ event, data }).catch(() => void 0);
+    }
+    async function handleGrantPermission() {
+      var _a, _b;
+      track(`${(_a = appInfo.value) == null ? void 0 : _a.name}_grant_permission_clicked`, {
+        contena_version: (_b = appInfo.value) == null ? void 0 : _b.version
+      });
+      try {
+        await grant2();
+        emit("grant-success");
+      } catch (error) {
+        emit("grant-error", error);
+      }
+    }
+    function handleClickMoreInfo() {
+      var _a;
+      track(`${(_a = appInfo.value) == null ? void 0 : _a.name}_grant_permission_more_info`);
+      emit("more-info");
+    }
+    return (_ctx, _cache) => {
+      return vue.unref(isShowPermissionUI) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("section", {
+          class: "mt-grant-permission-service-banner",
+          "aria-labelledby": vue.unref(titleId)
+        }, [
+          vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
+            class: "mt-grant-permission-service-banner__icon",
+            name: "regular-trust",
+            size: "32",
+            decorative: ""
+          }),
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createVNode(MtText, {
+              id: vue.unref(titleId),
+              as: "h3",
+              weight: "bold",
+              size: "xs",
+              class: "mt-grant-permission-service-banner__title"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(t)("title")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"]),
+            vue.createVNode(MtText, {
+              size: "2xs",
+              color: "color-text-secondary-default",
+              class: "mt-grant-permission-service-banner__description"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(t)("description")), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          vue.createElementVNode("div", _hoisted_4, [
+            vue.createVNode(MtButton, {
+              variant: "primary",
+              class: "mt-grant-permission-service-banner__grant",
+              "is-loading": vue.unref(isGranting),
+              onClick: handleGrantPermission
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(vue.unref(t)("grantLabel")), 1),
+                vue.createElementVNode("span", _hoisted_6, vue.toDisplayString(vue.unref(t)("grantLongLabel")), 1)
+              ]),
+              _: 1
+            }, 8, ["is-loading"]),
+            vue.createVNode(MtButton, {
+              is: "a",
+              variant: "secondary",
+              class: "mt-grant-permission-service-banner__more-info",
+              href: vue.unref(t)("moreInfoUrl"),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: handleClickMoreInfo
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(vue.unref(t)("moreInfo")), 1)
+              ]),
+              _: 1
+            }, 8, ["href"])
+          ])
+        ], 8, _hoisted_2)
+      ])) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const mtGrantPermissionServiceBanner_vue_vue_type_style_index_0_scoped_038d2bc3_lang = "";
+const mtGrantPermissionServiceBanner = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-038d2bc3"]]);
+exports.mtGrantPermissionServiceBanner = mtGrantPermissionServiceBanner;
+exports.useServicePermission = useServicePermission;

package/dist/mt-grant-permission-service-banner.css

@@ -1,88 +1 @@
-
-.mt-grant-permission-service-banner__container[data-v-95188d4f] {
-  container-type: inline-size;
-  container-name: mt-grant-permission-service-banner;
-  background: var(--color-elevation-surface-raised);
-}
-.mt-grant-permission-service-banner[data-v-95188d4f] {
-  display: grid;
-  gap: var(--scale-size-8) var(--scale-size-12);
-  padding: var(--scale-size-24) var(--scale-size-20);
-  border: 1px solid var(--color-border-primary-default);
-  border-radius: var(--border-radius-card);
-  background-color: var(--color-elevation-surface-raised);
-  grid-template-areas:
-    "icon"
-    "body"
-    "actions";
-  justify-items: center;
-  text-align: center;
-}
-.mt-grant-permission-service-banner__icon[data-v-95188d4f] {
-  grid-area: icon;
-  color: var(--color-icon-positive-default);
-}
-.mt-grant-permission-service-banner__body[data-v-95188d4f] {
-  grid-area: body;
-  display: flex;
-  flex-direction: column;
-  gap: var(--scale-size-2);
-  min-width: 0;
-}
-.mt-grant-permission-service-banner__title[data-v-95188d4f] {
-  margin-block-end: 0;
-}
-.mt-grant-permission-service-banner__description[data-v-95188d4f] {
-  text-wrap: pretty;
-}
-.mt-grant-permission-service-banner__actions[data-v-95188d4f] {
-  grid-area: actions;
-  display: flex;
-  gap: var(--scale-size-8);
-  flex-direction: column;
-  justify-self: stretch;
-  margin-block-start: var(--scale-size-8);
-}
-.mt-grant-permission-service-banner__actions .mt-button[data-v-95188d4f] {
-  width: 100%;
-}
-.mt-grant-permission-service-banner__label--long[data-v-95188d4f] {
-  display: none;
-}
-@container mt-grant-permission-service-banner (width >= 25rem) {
-.mt-grant-permission-service-banner[data-v-95188d4f] {
-    grid-template-columns: auto 1fr;
-    grid-template-areas:
-      "icon body"
-      ".    actions";
-    justify-items: start;
-    text-align: start;
-    padding: var(--scale-size-20);
-}
-.mt-grant-permission-service-banner__actions[data-v-95188d4f] {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-}
-.mt-grant-permission-service-banner__actions .mt-button[data-v-95188d4f] {
-    width: auto;
-}
-.mt-grant-permission-service-banner__label--short[data-v-95188d4f] {
-    display: none;
-}
-.mt-grant-permission-service-banner__label--long[data-v-95188d4f] {
-    display: revert;
-}
-}
-@container mt-grant-permission-service-banner (width >= 43rem) {
-.mt-grant-permission-service-banner[data-v-95188d4f] {
-    grid-template-columns: auto 1fr auto;
-    grid-template-areas: "icon body actions";
-    align-items: center;
-    padding: var(--scale-size-16) var(--scale-size-20);
-}
-.mt-grant-permission-service-banner__actions[data-v-95188d4f] {
-    flex-wrap: nowrap;
-    margin-block-start: 0;
-}
-}
+.mt-grant-permission-service-banner__container[data-v-038d2bc3]{container-type:inline-size;container-name:mt-grant-permission-service-banner;background:var(--color-elevation-surface-raised)}.mt-grant-permission-service-banner[data-v-038d2bc3]{display:grid;gap:var(--scale-size-8) var(--scale-size-12);padding:var(--scale-size-24) var(--scale-size-20);border:1px solid var(--color-border-primary-default);border-radius:var(--border-radius-card);background-color:var(--color-elevation-surface-raised);grid-template-areas:"icon" "body" "actions";justify-items:center;text-align:center}.mt-grant-permission-service-banner__icon[data-v-038d2bc3]{grid-area:icon;color:var(--color-icon-positive-default)}.mt-grant-permission-service-banner__body[data-v-038d2bc3]{grid-area:body;display:flex;flex-direction:column;gap:var(--scale-size-2);min-width:0}.mt-grant-permission-service-banner__title[data-v-038d2bc3]{margin-block-end:0}.mt-grant-permission-service-banner__description[data-v-038d2bc3]{text-wrap:pretty}.mt-grant-permission-service-banner__actions[data-v-038d2bc3]{grid-area:actions;display:flex;gap:var(--scale-size-8);flex-direction:column;justify-self:stretch;margin-block-start:var(--scale-size-8)}.mt-grant-permission-service-banner__actions .mt-button[data-v-038d2bc3]{width:100%}.mt-grant-permission-service-banner__label--long[data-v-038d2bc3]{display:none}@container mt-grant-permission-service-banner (width >= 25rem){.mt-grant-permission-service-banner[data-v-038d2bc3]{grid-template-columns:auto 1fr;grid-template-areas:"icon body" ".    actions";justify-items:start;text-align:start;padding:var(--scale-size-20)}.mt-grant-permission-service-banner__actions[data-v-038d2bc3]{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}.mt-grant-permission-service-banner__actions .mt-button[data-v-038d2bc3]{width:auto}.mt-grant-permission-service-banner__label--short[data-v-038d2bc3]{display:none}.mt-grant-permission-service-banner__label--long[data-v-038d2bc3]{display:revert}}@container mt-grant-permission-service-banner (width >= 43rem){.mt-grant-permission-service-banner[data-v-038d2bc3]{grid-template-columns:auto 1fr auto;grid-template-areas:"icon body actions";align-items:center;padding:var(--scale-size-16) var(--scale-size-20)}.mt-grant-permission-service-banner__actions[data-v-038d2bc3]{flex-wrap:nowrap;margin-block-start:0}}

package/dist/mt-help-text.css

@@ -1,33 +1 @@
-
-.mt-help-text {
-&[data-v-c924e281] {
-  color: var(--color-icon-brand-default);
-  display: inline-flex;
-  align-items: center;
-  height: var(--scale-size-16);
-  width: var(--scale-size-16);
-  justify-content: center;
-  position: relative;
-  border-radius: var(--border-radius-round);
-}
-&[data-v-c924e281]:focus-visible {
-    outline-offset: 0.25rem;
-    outline: 2px solid var(--color-border-brand-default);
-}
-&[data-v-c924e281]:where(:hover, :focus-visible) {
-    color: var(--color-icon-brand-hover);
-}
-}
-.mt-help-text[data-v-c924e281]::after {
-  content: "";
-  display: block;
-  position: absolute;
-  inset: 0;
-  scale: 0.9;
-  background-color: var(--color-static-white);
-  z-index: -1;
-  border-radius: var(--border-radius-round);
-}
-.mt-help-text__tooltip-text[data-v-c924e281] {
-  display: none;
-}
+.mt-help-text[data-v-c924e281]{color:var(--color-icon-brand-default);display:inline-flex;align-items:center;height:var(--scale-size-16);width:var(--scale-size-16);justify-content:center;position:relative;border-radius:var(--border-radius-round)}.mt-help-text[data-v-c924e281]:focus-visible{outline-offset:.25rem;outline:2px solid var(--color-border-brand-default)}.mt-help-text[data-v-c924e281]:where(:hover,:focus-visible){color:var(--color-icon-brand-hover)}.mt-help-text[data-v-c924e281]:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;scale:.9;background-color:var(--color-static-white);z-index:-1;border-radius:var(--border-radius-round)}.mt-help-text__tooltip-text[data-v-c924e281]{display:none}

package/dist/mt-highlight-text.css

@@ -1,5 +1 @@
-
-.mt-highlight-text__highlight {
-  color: var(--color-text-brand-default);
-  font-weight: var(--font-weight-bold);
-}
+.mt-highlight-text__highlight{color:var(--color-text-brand-default);font-weight:var(--font-weight-bold)}