@tekkare/auriga 0.2.229 → 0.2.233

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.2.229"
+  "version": "0.2.233"
 }

package/dist/runtime/components/argSteplineChart.vue

@@ -44,6 +44,21 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    // Drops the legend without touching the axes, the labels or the tooltip,
+    // which `small` also turns off. ApexCharts stops reserving the strip it
+    // sits in, so the plot takes the whole height.
+    hideLegend: {
+      type: Boolean,
+      default: false
+    },
+    // A stepline holds its value until the next change, so a series repeats
+    // the same number at every category in between and the chart ends up
+    // paved with identical labels. With this on, a point keeps its label only
+    // when it is the first, the last, or an actual change.
+    hideUnchangedLabels: {
+      type: Boolean,
+      default: false
+    },
     height: {
       type: String,
       default: "auto"
@@ -227,7 +242,7 @@ export default defineComponent({
           showForSingleSeries: true,
           showForNullSeries: true,
           showForZeroSeries: true,
-          show: true,
+          show: !props.hideLegend,
           position: "bottom",
           fontFamily: "Figtree, sans-serif",
           fontSize: "14px",
@@ -253,6 +268,20 @@ export default defineComponent({
           },
           formatter: function(value, opt) {
             const seriesData = props.series;
+            if (props.hideUnchangedLabels && value !== null) {
+              const data = seriesData[opt.seriesIndex]?.data ?? [];
+              const isLast = opt.dataPointIndex === data.length - 1;
+              let previous = null;
+              for (let i = opt.dataPointIndex - 1; i >= 0; i -= 1) {
+                if (data[i] !== null && data[i] !== void 0) {
+                  previous = data[i];
+                  break;
+                }
+              }
+              if (previous !== null && !isLast && previous === value) {
+                return "";
+              }
+            }
             if (props.hasPercentages && value !== null) {
               const formatValue = new Intl.NumberFormat("fr-FR", {
                 maximumFractionDigits: 1

package/dist/runtime/components/argSteplineChart.vue.d.ts

@@ -12,6 +12,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    hideLegend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideUnchangedLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     height: {
         type: StringConstructor;
         default: string;
@@ -74,6 +82,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    hideLegend: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideUnchangedLabels: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     height: {
         type: StringConstructor;
         default: string;
@@ -123,8 +139,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     options: Record<string, any>;
     colors: unknown[];
     french: boolean;
+    hideLegend: boolean;
     tooltipOptions: Record<string, any>;
     formatDate: boolean;
+    hideUnchangedLabels: boolean;
     dataType: string;
     hasPercentages: boolean;
     currency: string;

package/dist/runtime/components/argTermsGate.vue

@@ -0,0 +1,176 @@
+<template>
+  <div v-if="open" class="arg_terms_gate">
+    <div class="arg_terms_gate_card">
+      <span class="arg_terms_gate_eyebrow">
+        {{ updated ? "Terms of use updated" : "Terms of use" }}
+      </span>
+
+      <h2 class="arg_terms_gate_title">
+        {{ updated ? "Please review the new terms" : "Before you continue" }}
+      </h2>
+
+      <p class="arg_terms_gate_intro">
+        {{
+          updated
+            ? "Our terms of use have changed. Please read and accept the new version to keep using the platform."
+            : "Please read and accept our terms of use to start using the platform."
+        }}
+      </p>
+
+      <div class="arg_terms_gate_doc">
+        <div class="arg_terms_gate_doc_head">
+          <strong>{{ terms?.title || "Terms of use" }}</strong>
+          <span class="arg_terms_gate_version">
+            Version {{ terms?.version }}<template v-if="publishedLabel">, {{ publishedLabel }}</template>
+          </span>
+        </div>
+        <p v-if="terms?.summary" class="arg_terms_gate_summary">{{ terms.summary }}</p>
+        <a
+          v-if="terms?.url"
+          :href="terms.url"
+          target="_blank"
+          rel="noopener"
+          class="arg_terms_gate_link"
+        >
+          Read the full document
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" stroke-linecap="round" />
+            <path d="M15 3h6v6M10 14 21 3" stroke-linecap="round" />
+          </svg>
+        </a>
+      </div>
+
+      <label class="arg_terms_gate_check">
+        <input v-model="checked" type="checkbox" :disabled="saving" />
+        <span>I have read and I accept the terms of use.</span>
+      </label>
+
+      <p v-if="error" class="arg_terms_gate_error">{{ error }}</p>
+
+      <button
+        type="button"
+        class="arg_terms_gate_button"
+        :disabled="!checked || saving"
+        @click="accept"
+      >
+        {{ saving ? "Saving..." : "Accept and continue" }}
+      </button>
+
+      <button type="button" class="arg_terms_gate_decline" :disabled="saving" @click="decline">
+        Decline and sign out
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute } from "#app";
+const CACHE_KEY = "terms_accepted";
+const IGNORED_PREFIX = "/auth";
+export default defineComponent({
+  name: "argTermsGate",
+  props: {
+    api: {
+      type: Object,
+      required: true
+    },
+    /** Only check once the user is authenticated. */
+    enabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["accepted", "declined"],
+  setup(props, { emit }) {
+    const route = useRoute();
+    const open = ref(false);
+    const terms = ref(null);
+    const updated = ref(false);
+    const checked = ref(false);
+    const saving = ref(false);
+    const error = ref("");
+    const publishedLabel = computed(() => {
+      if (!terms.value?.publishedAt) return "";
+      const date = new Date(terms.value.publishedAt);
+      return Number.isNaN(date.getTime()) ? "" : date.toLocaleDateString();
+    });
+    function cache(value) {
+      try {
+        if (value) sessionStorage.setItem(CACHE_KEY, "1");
+        else sessionStorage.removeItem(CACHE_KEY);
+      } catch {
+      }
+    }
+    function cached() {
+      try {
+        return !!sessionStorage.getItem(CACHE_KEY);
+      } catch {
+        return false;
+      }
+    }
+    async function check() {
+      if (!import.meta.client || !props.enabled || open.value || cached()) return;
+      if (route.path.startsWith(IGNORED_PREFIX)) return;
+      try {
+        const status = await props.api.get();
+        if (status?.accepted) {
+          cache(true);
+          return;
+        }
+        if (!status?.current) return;
+        terms.value = status.current;
+        updated.value = !!status.previouslyAccepted;
+        open.value = true;
+      } catch {
+      }
+    }
+    async function accept() {
+      if (!terms.value || !checked.value) return;
+      error.value = "";
+      saving.value = true;
+      try {
+        await props.api.accept(terms.value.id);
+        cache(true);
+        open.value = false;
+        emit("accepted", { version: terms.value.version });
+      } catch (e) {
+        const code = e?.statusCode || e?.response?.status;
+        if (code === 409) {
+          error.value = "A newer version was just published. Reloading...";
+          setTimeout(() => window.location.reload(), 1200);
+        } else {
+          error.value = e?.data?.message || "Could not record your acceptance. Please try again.";
+        }
+      } finally {
+        saving.value = false;
+      }
+    }
+    function decline() {
+      cache(false);
+      emit("declined");
+    }
+    let previousOverflow = "";
+    watch(open, (value) => {
+      if (!import.meta.client) return;
+      if (value) {
+        previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = previousOverflow;
+      }
+    });
+    watch(() => props.enabled, check);
+    watch(() => route.path, check);
+    onMounted(check);
+    onBeforeUnmount(() => {
+      if (import.meta.client && open.value) document.body.style.overflow = previousOverflow;
+    });
+    return { open, terms, updated, checked, saving, error, publishedLabel, accept, decline };
+  }
+});
+</script>
+
+<style scoped>
+.arg_terms_gate{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(0,0,0,.6);display:flex;inset:0;justify-content:center;padding:24px;position:fixed;z-index:1000}.arg_terms_gate_card{background-color:var(--white,#fff);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);font-family:inherit;max-height:calc(100vh - 48px);max-width:480px;overflow-y:auto;padding:28px;width:100%}.arg_terms_gate_eyebrow{color:var(--primary);display:inline-block;font-size:13px;font-weight:600;margin-bottom:10px}.arg_terms_gate_title{color:var(--darkest);font-size:22px;font-weight:700;margin:0 0 8px}.arg_terms_gate_intro{color:var(--dark);font-size:14px;line-height:1.6;margin:0 0 20px}.arg_terms_gate_doc{border:1px solid var(--light);border-radius:10px;display:flex;flex-direction:column;gap:10px;margin-bottom:18px;padding:16px}.arg_terms_gate_doc_head{color:var(--darkest);display:flex;flex-direction:column;font-size:15px;gap:2px}.arg_terms_gate_version{color:var(--dark);font-size:12px;font-weight:400}.arg_terms_gate_summary{color:var(--dark);font-size:14px;line-height:1.6;margin:0;white-space:pre-line}.arg_terms_gate_link{align-items:center;color:var(--primary);display:inline-flex;font-size:14px;font-weight:600;gap:6px;text-decoration:none}.arg_terms_gate_link:hover{text-decoration:underline}.arg_terms_gate_check{align-items:flex-start;color:var(--darkest);cursor:pointer;display:flex;font-size:14px;gap:10px;line-height:1.5;margin-bottom:16px}.arg_terms_gate_check input{accent-color:var(--primary);cursor:pointer;flex-shrink:0;height:18px;margin:2px 0 0;width:18px}.arg_terms_gate_error{color:#d92d20;font-size:13px;margin:0 0 12px}.arg_terms_gate_button{background-color:var(--primary);border:none;border-radius:8px;color:var(--white,#fff);cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;height:48px;transition:filter .15s,transform .1s;width:100%}.arg_terms_gate_button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.arg_terms_gate_button:disabled{cursor:not-allowed;opacity:.5}.arg_terms_gate_decline{background-color:transparent;border:none;color:var(--dark);cursor:pointer;font-family:inherit;font-size:13px;height:40px;margin-top:10px;width:100%}.arg_terms_gate_decline:hover:not(:disabled){color:var(--darkest);text-decoration:underline}
+</style>

package/dist/runtime/components/argTermsGate.vue.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Blocking terms of use gate.
+ *
+ * Shows a modal the user cannot dismiss until they accept the latest published
+ * terms of use, on first login and again after each new version. Presentation
+ * and flow live here; the host app only supplies its own API client, so this
+ * component stays free of any auth or fetch wiring.
+ *
+ * Usage (in the app, once, next to <arg-style />):
+ *   <arg-terms-gate
+ *     :api="termsApi"
+ *     :enabled="status === 'authenticated'"
+ *     @accepted="onTermsAccepted"
+ *     @declined="signOut({ callbackUrl: '/' })"
+ *   />
+ *
+ * The /auth pages are skipped on purpose: the first-login onboarding lives
+ * there, and two blocking screens at once would stack on top of each other.
+ *
+ * `api` must expose:
+ *   get(): Promise<{ current: TermsVersion | null, accepted: boolean, previouslyAccepted: boolean }>
+ *   accept(termsVersionId: string): Promise<unknown>
+ */
+interface TermsVersion {
+    id: string;
+    version: string;
+    title: string | null;
+    url: string;
+    summary: string | null;
+    publishedAt: string;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    api: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    /** Only check once the user is authenticated. */
+    enabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    open: import("vue").Ref<boolean, boolean>;
+    terms: import("vue").Ref<{
+        id: string;
+        version: string;
+        title: string | null;
+        url: string;
+        summary: string | null;
+        publishedAt: string;
+    } | null, TermsVersion | {
+        id: string;
+        version: string;
+        title: string | null;
+        url: string;
+        summary: string | null;
+        publishedAt: string;
+    } | null>;
+    updated: import("vue").Ref<boolean, boolean>;
+    checked: import("vue").Ref<boolean, boolean>;
+    saving: import("vue").Ref<boolean, boolean>;
+    error: import("vue").Ref<string, string>;
+    publishedLabel: import("vue").ComputedRef<string>;
+    accept: () => Promise<void>;
+    decline: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("accepted" | "declined")[], "accepted" | "declined", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    api: {
+        type: ObjectConstructor;
+        required: true;
+    };
+    /** Only check once the user is authenticated. */
+    enabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onAccepted?: ((...args: any[]) => any) | undefined;
+    onDeclined?: ((...args: any[]) => any) | undefined;
+}>, {
+    enabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.229",
+  "version": "0.2.233",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",