@tekkare/auriga 0.2.194 → 0.2.198

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.194"
+  "version": "0.2.198"
 }

package/dist/runtime/components/argAccordionMenu.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="arg_accordion_menu">
+    <div
+      v-for="(section, sIndex) in menu"
+      :key="sIndex"
+      class="arg_accordion_section"
+    >
+      <!-- Section Header -->
+      <div
+        class="arg_accordion_header"
+        :class="{ active: openSections[sIndex] }"
+        @click="toggleSection(sIndex)"
+      >
+        <span class="arg_accordion_title">{{ section.title }}</span>
+        <div
+          class="arg_accordion_chevron"
+          :class="{ rotated: openSections[sIndex] }"
+        >
+          <arg-icon name="CaretDown" size="16" color="var(--medium)" />
+        </div>
+      </div>
+
+      <!-- Section Content -->
+      <div
+        class="arg_accordion_content"
+        :class="{ open: openSections[sIndex] }"
+      >
+        <!-- Direct items -->
+        <template v-if="section.items">
+          <NuxtLink
+            v-for="(item, iIndex) in section.items"
+            :key="'item-' + iIndex"
+            :to="item.to || '#'"
+            class="arg_accordion_item"
+            activeClass="is-active"
+            @click="$emit('onNavigate', item)"
+          >
+            <div class="arg_accordion_item_left">
+              <arg-icon v-if="item.icon" :name="item.icon" size="20" />
+              <span>{{ item.label }}</span>
+            </div>
+            <span
+              v-if="item.haveData !== undefined"
+              class="arg_accordion_indicator"
+              :class="item.haveData ? 'has-data' : 'no-data'"
+            />
+          </NuxtLink>
+        </template>
+
+        <!-- Sub-sections -->
+        <template v-if="section.subSections">
+          <div
+            v-for="(sub, subIndex) in section.subSections"
+            :key="'sub-' + subIndex"
+            class="arg_accordion_sub_section"
+          >
+            <div
+              class="arg_accordion_sub_header"
+              @click="toggleSubSection(sIndex, subIndex)"
+            >
+              <span class="arg_accordion_sub_label">{{ sub.label }}</span>
+              <div
+                class="arg_accordion_sub_chevron"
+                :class="{ rotated: openSubSections[sIndex + '-' + subIndex] }"
+              >
+                <arg-icon name="CaretDown" size="12" />
+              </div>
+            </div>
+            <div
+              class="arg_accordion_sub_content"
+              :class="{ open: openSubSections[sIndex + '-' + subIndex] }"
+            >
+              <NuxtLink
+                v-for="(item, iIndex) in sub.items"
+                :key="'subitem-' + iIndex"
+                :to="item.to || '#'"
+                class="arg_accordion_item"
+                activeClass="is-active"
+                @click="$emit('onNavigate', item)"
+              >
+                <div class="arg_accordion_item_left">
+                  <arg-icon v-if="item.icon" :name="item.icon" size="20" />
+                  <span>{{ item.label }}</span>
+                </div>
+                <span
+                  v-if="item.haveData !== undefined"
+                  class="arg_accordion_indicator"
+                  :class="item.haveData ? 'has-data' : 'no-data'"
+                />
+              </NuxtLink>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, reactive } from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argAccordionMenu",
+  components: { argIcon },
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    singleOpen: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["onNavigate"],
+  setup(props) {
+    const openSections = reactive({});
+    const openSubSections = reactive({});
+    props.menu.forEach((section, index) => {
+      openSections[index] = section.defaultOpen ?? index === 0;
+    });
+    props.menu.forEach((section, sIndex) => {
+      section.subSections?.forEach((_sub, subIndex) => {
+        openSubSections[`${sIndex}-${subIndex}`] = true;
+      });
+    });
+    function toggleSection(index) {
+      if (props.singleOpen) {
+        const wasOpen = openSections[index];
+        Object.keys(openSections).forEach((key) => {
+          openSections[Number(key)] = false;
+        });
+        openSections[index] = !wasOpen;
+      } else {
+        openSections[index] = !openSections[index];
+      }
+    }
+    function toggleSubSection(sectionIndex, subIndex) {
+      const key = `${sectionIndex}-${subIndex}`;
+      openSubSections[key] = !openSubSections[key];
+    }
+    return {
+      openSections,
+      openSubSections,
+      toggleSection,
+      toggleSubSection
+    };
+  }
+});
+</script>
+
+<style scoped>
+.arg_accordion_menu{display:flex;flex-direction:column;width:100%}.arg_accordion_section{border-bottom:1px solid var(--light,#ececf2);margin-bottom:4px;padding-bottom:8px}.arg_accordion_section:last-child{border-bottom:none}.arg_accordion_header{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:8px;transition:background-color .2s ease}.arg_accordion_header:hover{background-color:var(--light,#ececf2)}.arg_accordion_title{font-size:13px;font-weight:700;line-height:normal}.arg_accordion_chevron{align-items:center;display:flex;transition:transform .2s ease}.arg_accordion_chevron.rotated{transform:rotate(180deg)}.arg_accordion_content{max-height:0;overflow:hidden;padding-left:12px;padding-right:8px;transition:max-height .3s ease}.arg_accordion_content.open{margin-top:4px;max-height:600px}.arg_accordion_item{align-items:center;align-self:stretch;border-radius:4px;color:var(--darkest,#1a1a2e);display:flex;font-size:14px;font-weight:400;gap:8px;justify-content:space-between;line-height:160%;padding:8px;text-decoration:none}.arg_accordion_item:hover:not(.is-active){background:var(--light,#ececf2)}.arg_accordion_item.is-active{background:rgba(33,118,255,.1)}.arg_accordion_item svg{color:var(--dark,#6c6c8a)!important}.arg_accordion_item.is-active svg,.arg_accordion_item:hover:not(.is-active) svg{color:var(--primary,#2176ff)!important}.arg_accordion_item_left{align-items:center;display:flex;gap:8px}.arg_accordion_indicator{border-radius:50%;flex-shrink:0;height:10px;width:10px}.arg_accordion_indicator.has-data{background-color:var(--system-success,#2ecc71)}.arg_accordion_indicator.no-data{background-color:#bdbdd2}.arg_accordion_sub_section{margin-bottom:8px}.arg_accordion_sub_header{align-items:center;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;padding:4px 8px;transition:background-color .2s ease}.arg_accordion_sub_header:hover{background-color:var(--light,#ececf2)}.arg_accordion_sub_label{color:var(--dark,#6c6c8a);font-size:12px;font-weight:700}.arg_accordion_sub_chevron{align-items:center;color:var(--medium,#9999b0);display:flex;transition:transform .2s ease}.arg_accordion_sub_chevron.rotated{transform:rotate(180deg)}.arg_accordion_sub_content{background:rgba(234,236,248,.4);border-radius:8px;margin-top:4px;max-height:0;overflow:hidden;padding:0 8px;transition:max-height .2s ease,padding .2s ease}.arg_accordion_sub_content.open{max-height:300px;padding:8px}
+</style>

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

@@ -0,0 +1,48 @@
+import { type PropType } from "vue";
+interface AccordionMenuItem {
+    label: string;
+    icon?: string;
+    to?: string;
+    haveData?: boolean;
+}
+interface AccordionSubSection {
+    label: string;
+    items: AccordionMenuItem[];
+}
+interface AccordionSection {
+    title: string;
+    defaultOpen?: boolean;
+    items?: AccordionMenuItem[];
+    subSections?: AccordionSubSection[];
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    menu: {
+        type: PropType<AccordionSection[]>;
+        required: true;
+    };
+    singleOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    openSections: Record<number, boolean>;
+    openSubSections: Record<string, boolean>;
+    toggleSection: (index: number) => void;
+    toggleSubSection: (sectionIndex: number, subIndex: number) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onNavigate"[], "onNavigate", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    menu: {
+        type: PropType<AccordionSection[]>;
+        required: true;
+    };
+    singleOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onOnNavigate?: ((...args: any[]) => any) | undefined;
+}>, {
+    singleOpen: boolean;
+}, {}, {
+    argIcon: any;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/argDashboardSection.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="arg_dashboard_section">
+    <div class="arg_dashboard_section_header" @click="toggleCollapse">
+      <div class="arg_dashboard_drag_handle" @click.stop>
+        <arg-icon name="DotsSixVertical" size="16" color="var(--medium)" />
+      </div>
+      <div class="arg_dashboard_section_left">
+        <arg-icon :name="icon" size="20" color="var(--primary)" />
+        <span class="arg_dashboard_section_title">{{ title }}</span>
+        <span class="arg_dashboard_section_count">{{ count }}</span>
+      </div>
+      <div class="arg_dashboard_section_right">
+        <div class="arg_dashboard_section_actions" @click.stop>
+          <slot name="headerActions" />
+        </div>
+        <div class="arg_dashboard_section_separator"></div>
+        <div class="arg_dashboard_section_caret">
+          <arg-icon
+            :name="collapsed ? 'CaretRight' : 'CaretDown'"
+            size="16"
+            color="var(--dark)"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="!collapsed"
+      class="arg_dashboard_section_content"
+      :style="maxHeight ? { maxHeight: maxHeight + 'px', overflowY: 'auto' } : {}"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    icon: string;
+    count: number;
+    defaultCollapsed?: boolean;
+    maxHeight?: number;
+  }>(),
+  {
+    defaultCollapsed: false,
+    maxHeight: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  collapseChange: [collapsed: boolean];
+}>();
+
+const collapsed = ref(props.defaultCollapsed);
+
+watch(
+  () => props.defaultCollapsed,
+  (val) => {
+    collapsed.value = val;
+  }
+);
+
+function toggleCollapse() {
+  collapsed.value = !collapsed.value;
+  emit("collapseChange", collapsed.value);
+}
+</script>
+
+<style scoped>
+.arg_dashboard_section{background:var(--base-white,#fff);border:1px solid var(--light,#ececf2);border-radius:10px;overflow:hidden}.arg_dashboard_section_header{align-items:center;background:var(--lightest,#f5f5fa);border-bottom:1px solid var(--light,#ececf2);cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:background .15s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.arg_dashboard_section_header:hover{background:var(--light,#ececf2)}.arg_dashboard_drag_handle{align-items:center;border-radius:4px;cursor:grab;display:flex;padding:2px;transition:background .15s ease}.arg_dashboard_drag_handle:hover{background:var(--light,#ececf2)}.arg_dashboard_drag_handle:active{cursor:grabbing}.arg_dashboard_section_left{align-items:center;display:flex;flex:1;gap:8px;min-width:0}.arg_dashboard_section_title{color:var(--darkest,#1a1a2e);font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.arg_dashboard_section_count{background:rgba(33,118,255,.1);border-radius:10px;color:var(--primary,#2176ff);font-size:12px;font-weight:600;padding:2px 8px;white-space:nowrap}.arg_dashboard_section_right{align-items:center;display:flex;flex-shrink:0;gap:8px}.arg_dashboard_section_actions{align-items:center;display:flex;gap:4px}.arg_dashboard_section_separator{background:var(--light,#ececf2);height:20px;width:1px}.arg_dashboard_section_caret{align-items:center;display:flex;transition:transform .2s ease}.arg_dashboard_section_content{padding:0}
+</style>

package/dist/runtime/components/argDrawer.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    :class="[
+      'arg_drawer_container',
+      open ? 'arg_drawer_open' : '',
+    ]"
+    @click.self="$emit('onClose')"
+  >
+    <div
+      class="arg_drawer_panel"
+      :class="[
+        side === 'left' ? 'arg_drawer_left' : 'arg_drawer_right',
+        open ? 'arg_drawer_visible' : '',
+      ]"
+      :style="{ width: panelWidth }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from "vue";
+export default defineComponent({
+  name: "argDrawer",
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    side: {
+      type: String,
+      default: "right",
+      validator: (value) => ["left", "right"].includes(value)
+    },
+    width: {
+      type: [String, Number],
+      default: 400
+    }
+  },
+  emits: ["onClose"],
+  setup(props) {
+    const panelWidth = computed(() => {
+      return typeof props.width === "number" ? `${props.width}px` : props.width;
+    });
+    return { panelWidth };
+  }
+});
+</script>
+
+<style scoped>
+.arg_drawer_container{background-color:transparent;display:flex;height:100vh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:background-color .35s ease,opacity .35s ease;width:100%}.arg_drawer_open{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(0,0,0,.6);opacity:1;pointer-events:auto;z-index:99}.arg_drawer_panel{background:var(--base-white,#fff);height:100%;overflow-y:auto;position:absolute;top:0;transition:transform .35s ease}.arg_drawer_right{right:0;transform:translateX(100%)}.arg_drawer_left{left:0;transform:translateX(-100%)}.arg_drawer_visible{transform:translateX(0)}
+</style>

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

@@ -0,0 +1,38 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>, {
+    panelWidth: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onClose"[], "onClose", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    side: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>> & Readonly<{
+    onOnClose?: ((...args: any[]) => any) | undefined;
+}>, {
+    width: string | number;
+    open: boolean;
+    side: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/argFooter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="oip_footer">
     <p>
-      ©2024 Tekkare®.
+      ©{{ new Date().getFullYear() }} Tekkare®.
       {{ langData?.rights }}
     </p>
     <a href="https://openinnovationprogram.com/legal-notices" target="_blank">{{

package/dist/runtime/components/argLoginPage.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="arg_login_landing">
+    <!-- Animated background blobs -->
+    <div class="arg_login_background">
+      <div class="arg_login_blob arg_login_blob_1"></div>
+      <div class="arg_login_blob arg_login_blob_2"></div>
+      <div class="arg_login_blob arg_login_blob_3"></div>
+      <div class="arg_login_blob arg_login_blob_4"></div>
+      <div class="arg_login_blob arg_login_blob_5"></div>
+      <div class="arg_login_blob arg_login_blob_6"></div>
+      <div class="arg_login_blob arg_login_blob_7"></div>
+    </div>
+
+    <div class="arg_login_content">
+      <div class="arg_login_card">
+        <!-- Logo -->
+        <div class="arg_login_logo">
+          <slot name="logo">
+            <span v-if="appEmoji" class="arg_login_logo_emoji">{{ appEmoji }}</span>
+          </slot>
+        </div>
+
+        <!-- Title -->
+        <h1 class="arg_login_title">{{ appName }}</h1>
+        <p v-if="appSubtitle" class="arg_login_subtitle">{{ appSubtitle }}</p>
+
+        <!-- Description -->
+        <p v-if="appDescription" class="arg_login_description">{{ appDescription }}</p>
+
+        <!-- Sign-in button -->
+        <button
+          class="arg_login_button"
+          :disabled="loading"
+          @click="$emit('onLogin')"
+        >
+          <svg
+            v-if="!loading"
+            class="arg_login_button_icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
+            />
+          </svg>
+          <span v-if="loading" class="arg_login_spinner"></span>
+          {{ buttonLabel }}
+        </button>
+
+        <!-- Features grid -->
+        <div v-if="features.length > 0" class="arg_login_features">
+          <div
+            v-for="(feature, index) in features"
+            :key="index"
+            class="arg_login_feature"
+          >
+            <div class="arg_login_feature_icon">{{ feature.icon }}</div>
+            <span>{{ feature.label }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Default slot for extra content below the card -->
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Feature {
+  icon: string;
+  label: string;
+}
+
+withDefaults(
+  defineProps<{
+    appName?: string;
+    appSubtitle?: string;
+    appDescription?: string;
+    appEmoji?: string;
+    buttonLabel?: string;
+    loading?: boolean;
+    features?: Feature[];
+  }>(),
+  {
+    appName: "Application",
+    appSubtitle: "",
+    appDescription: "",
+    appEmoji: "",
+    buttonLabel: "Sign in to Continue",
+    loading: false,
+    features: () => [],
+  }
+);
+
+defineEmits<{
+  onLogin: [];
+}>();
+</script>
+
+<style scoped>
+.arg_login_landing{align-items:center;background:linear-gradient(135deg,#f8fafc,#e0e7ff 50%,#ddd6fe);display:flex;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.arg_login_background{inset:0;overflow:hidden;position:absolute}.arg_login_blob{animation:arg_login_float 20s ease-in-out infinite;border-radius:50%;filter:blur(150px);opacity:.5;position:absolute}.arg_login_blob_1{background:linear-gradient(135deg,#1e3a8a,#3b82f6);height:900px;left:-200px;top:-300px;width:900px}.arg_login_blob_2{animation-delay:-7s;background:linear-gradient(135deg,#ec4899,#f472b6);bottom:-250px;height:800px;right:-200px;width:800px}.arg_login_blob_3{animation-delay:-14s;background:linear-gradient(135deg,#8b5cf6,#a78bfa);height:700px;left:50%;top:50%;transform:translate(-50%,-50%);width:700px}.arg_login_blob_4{animation-delay:-10s;background:linear-gradient(135deg,#06b6d4,#67e8f9);height:600px;left:5%;top:60%;width:600px}.arg_login_blob_5{animation-delay:-5s;background:linear-gradient(135deg,#3b82f6,#60a5fa);height:550px;right:10%;top:10%;width:550px}.arg_login_blob_6{animation-delay:-12s;background:linear-gradient(135deg,#a855f7,#c084fc);bottom:20%;height:500px;left:20%;width:500px}.arg_login_blob_7{animation-delay:-3s;background:linear-gradient(135deg,#ec4899,#f472b6);height:450px;left:35%;top:5%;width:450px}@keyframes arg_login_float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(-30px,-20px) scale(1.02)}}.arg_login_content{max-width:480px;padding:24px;position:relative;width:100%;z-index:10}.arg_login_card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.8);border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.15);padding:48px 40px;text-align:center}.arg_login_logo{align-items:center;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:20px;box-shadow:0 10px 40px -10px rgba(99,102,241,.5);display:flex;height:80px;justify-content:center;margin:0 auto 24px;width:80px}.arg_login_logo_emoji{font-size:40px}.arg_login_title{color:#1e293b;font-size:36px;font-weight:800;letter-spacing:-.5px;margin:0 0 4px}.arg_login_subtitle{color:#6366f1;font-size:14px;font-weight:600;letter-spacing:2px;margin:0 0 24px;text-transform:uppercase}.arg_login_description{color:#64748b;font-size:16px;line-height:1.6;margin:0 0 32px}.arg_login_button{align-items:center;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:12px;box-shadow:0 4px 15px -3px rgba(99,102,241,.4);color:#fff;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;gap:10px;justify-content:center;padding:16px 32px;transition:all .3s ease;width:100%}.arg_login_button:hover:not(:disabled){box-shadow:0 8px 25px -5px rgba(99,102,241,.5);transform:translateY(-2px)}.arg_login_button:active:not(:disabled){transform:translateY(0)}.arg_login_button:disabled{cursor:not-allowed;opacity:.7}.arg_login_button_icon,.arg_login_spinner{height:20px;width:20px}.arg_login_spinner{animation:arg_login_spin .6s linear infinite;border:2px solid hsla(0,0%,100%,.3);border-radius:50%;border-top-color:#fff}@keyframes arg_login_spin{to{transform:rotate(1turn)}}.arg_login_features{border-top:1px solid #e2e8f0;display:grid;gap:16px;grid-template-columns:repeat(2,1fr);margin-top:32px;padding-top:32px}.arg_login_feature{align-items:center;color:#475569;display:flex;font-size:14px;font-weight:500;gap:10px}.arg_login_feature_icon{align-items:center;background:linear-gradient(135deg,#ede9fe,#e0e7ff);border-radius:10px;display:flex;flex-shrink:0;font-size:18px;height:36px;justify-content:center;width:36px}@media (max-width:480px){.arg_login_card{padding:32px 24px}.arg_login_title{font-size:28px}.arg_login_features{grid-template-columns:1fr}}
+</style>

package/dist/runtime/components/argModal.vue

@@ -6,16 +6,25 @@
       isSource ? 'set-width' : '',
     ]"
   >
-    <div v-show="open" class="arg_modal" :class="isSource ? 'row' : 'col'">
-      <slot />
+    <div class="arg_modal" :class="[isSource ? 'row' : 'col', open ? 'arg_modal_visible' : '']">
+      <div v-if="$slots.header" class="arg_modal_header">
+        <slot name="header" />
+        <div class="arg_modal_close" @click="$emit('onClose')">
+          <arg-icon name="X" size="16" color="var(--dark)" />
+        </div>
+      </div>
+      <div class="arg_modal_body" :class="{ 'no-header': !$slots.header, 'no-footer': !$slots.footer }">
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="arg_modal_footer">
+        <slot name="footer" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import {
-  defineComponent
-} from "vue";
+import { defineComponent } from "vue";
 export default defineComponent({
   name: "argModal",
   props: {
@@ -27,9 +36,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     }
-  }
+  },
+  emits: ["onClose"]
 });
 </script>
 <style scoped>
-.arg_modal_container{align-items:center;background-color:transparent;bottom:0;display:flex;flex-direction:column;height:0;justify-content:center;left:0;opacity:0;position:fixed;transition:all .35s ease;width:0}.arg_modal_open{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(0,0,0,.6);height:100vh;opacity:1;width:100%;z-index:99}.arg_modal{align-items:flex-start;background:var(--base-white,#fff);border-radius:12px;display:flex;flex-shrink:0;height:100%;width:100%}.arg_modal.row{flex-direction:row;max-height:711px;max-width:1014px}.arg_modal.col{flex-direction:column;max-height:663px;max-width:966px;padding:24px}.arg_modal_open.set-width{padding:0 15%;width:70%}
+.arg_modal_container{align-items:center;background-color:transparent;display:flex;flex-direction:column;height:100vh;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:background-color .35s ease,opacity .35s ease;width:100%}.arg_modal_open{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:rgba(0,0,0,.6);opacity:1;pointer-events:auto;z-index:99}.arg_modal{align-items:flex-start;background:var(--base-white,#fff);border-radius:12px;display:flex;flex-shrink:0;height:100%;opacity:0;transform:scale(.95);transition:transform .35s ease,opacity .35s ease;width:100%}.arg_modal_visible{opacity:1;transform:scale(1)}.arg_modal.row{flex-direction:row;max-height:711px;max-width:1014px}.arg_modal.col{flex-direction:column;max-height:663px;max-width:966px}.arg_modal_open.set-width{padding:0 15%;width:70%}.arg_modal_header{align-items:center;align-self:stretch;border-bottom:1px solid var(--light,#ececf2);display:flex;justify-content:space-between;padding:24px}.arg_modal_body{align-self:stretch;flex:1;overflow-y:auto;padding:24px}.arg_modal_body.no-header.no-footer{overflow-y:visible;padding:0}.arg_modal_footer{align-items:center;align-self:stretch;border-top:1px solid var(--light,#ececf2);display:flex;gap:16px;padding:24px}.arg_modal_close{align-items:center;border-radius:4px;cursor:pointer;display:flex;justify-content:center;padding:6px}.arg_modal_close:hover{background-color:var(--lightest,#f5f5fa)}
 </style>

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onClose"[], "onClose", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     open: {
         type: BooleanConstructor;
         default: boolean;
@@ -16,7 +16,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+    onOnClose?: ((...args: any[]) => any) | undefined;
+}>, {
     open: boolean;
     isSource: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/argNoLicense.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="arg_no_license_landing">
+    <!-- Animated background blobs -->
+    <div class="arg_no_license_background">
+      <div class="arg_no_license_blob arg_no_license_blob_1"></div>
+      <div class="arg_no_license_blob arg_no_license_blob_2"></div>
+      <div class="arg_no_license_blob arg_no_license_blob_3"></div>
+      <div class="arg_no_license_blob arg_no_license_blob_4"></div>
+      <div class="arg_no_license_blob arg_no_license_blob_5"></div>
+      <div class="arg_no_license_blob arg_no_license_blob_6"></div>
+      <div class="arg_no_license_blob arg_no_license_blob_7"></div>
+    </div>
+
+    <div class="arg_no_license_content">
+      <div class="arg_no_license_card">
+        <!-- Icon -->
+        <div class="arg_no_license_icon_container">
+          <slot name="icon">
+            <svg
+              class="arg_no_license_icon"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+              />
+            </svg>
+          </slot>
+        </div>
+
+        <!-- Title -->
+        <h1 class="arg_no_license_title">{{ title }}</h1>
+
+        <!-- Description -->
+        <p class="arg_no_license_description">
+          <template v-if="description">{{ description }}</template>
+          <template v-else>
+            You need a <strong>{{ appName }}</strong> license to access this application.
+          </template>
+        </p>
+
+        <!-- Default slot for action content -->
+        <slot />
+
+        <!-- Footer slot -->
+        <div v-if="$slots.footer" class="arg_no_license_footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    appName?: string;
+    title?: string;
+    description?: string;
+  }>(),
+  {
+    appName: "Application",
+    title: "License Required",
+    description: "",
+  }
+);
+</script>
+
+<style scoped>
+.arg_no_license_landing{align-items:center;background:linear-gradient(135deg,#f8fafc,#e0e7ff 50%,#ddd6fe);display:flex;justify-content:center;min-height:100vh;overflow:hidden;position:relative}.arg_no_license_background{inset:0;overflow:hidden;position:absolute}.arg_no_license_blob{animation:arg_no_license_float 20s ease-in-out infinite;border-radius:50%;filter:blur(150px);opacity:.5;position:absolute}.arg_no_license_blob_1{background:linear-gradient(135deg,#1e3a8a,#3b82f6);height:900px;left:-200px;top:-300px;width:900px}.arg_no_license_blob_2{animation-delay:-7s;background:linear-gradient(135deg,#ec4899,#f472b6);bottom:-250px;height:800px;right:-200px;width:800px}.arg_no_license_blob_3{animation-delay:-14s;background:linear-gradient(135deg,#8b5cf6,#a78bfa);height:700px;left:50%;top:50%;transform:translate(-50%,-50%);width:700px}.arg_no_license_blob_4{animation-delay:-10s;background:linear-gradient(135deg,#06b6d4,#67e8f9);height:600px;left:5%;top:60%;width:600px}.arg_no_license_blob_5{animation-delay:-5s;background:linear-gradient(135deg,#3b82f6,#60a5fa);height:550px;right:10%;top:10%;width:550px}.arg_no_license_blob_6{animation-delay:-12s;background:linear-gradient(135deg,#a855f7,#c084fc);bottom:20%;height:500px;left:20%;width:500px}.arg_no_license_blob_7{animation-delay:-3s;background:linear-gradient(135deg,#ec4899,#f472b6);height:450px;left:35%;top:5%;width:450px}@keyframes arg_no_license_float{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(-30px,-20px) scale(1.02)}}.arg_no_license_content{max-width:480px;padding:24px;position:relative;width:100%;z-index:10}.arg_no_license_card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.8);border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,.15);padding:48px 40px;text-align:center}.arg_no_license_icon_container{align-items:center;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:20px;box-shadow:0 10px 40px -10px rgba(245,158,11,.5);display:flex;height:80px;justify-content:center;margin:0 auto 1.5rem;width:80px}.arg_no_license_icon{color:#fff;height:40px;width:40px}.arg_no_license_title{color:#1f2937;font-size:1.75rem;font-weight:700;margin:0 0 1rem}.arg_no_license_description{color:#6b7280;font-size:1rem;line-height:1.6;margin:0 0 1.5rem}.arg_no_license_description strong{color:#6366f1}.arg_no_license_footer{border-top:1px solid #e5e7eb;display:flex;gap:.75rem;justify-content:center;margin-top:1.5rem;padding-top:1.5rem}@media (max-width:480px){.arg_no_license_card{padding:32px 24px}.arg_no_license_title{font-size:1.5rem}}
+</style>