@tekkare/auriga 0.2.194 → 0.2.199

package/dist/runtime/components/argResourceCard.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="arg_resource_card">
+    <div v-if="!hideProvider && data.provider" class="arg_resource_card_provider">
+      <arg-icon :name="data.icon || 'FileText'" size="14" color="var(--primary)" />
+      <span>{{ data.provider }}</span>
+    </div>
+    <p class="arg_resource_card_title">{{ data.title || "Untitled" }}</p>
+    <div class="arg_resource_card_meta">
+      <span v-if="data.identification" class="arg_resource_card_id">
+        {{ data.identification }}
+      </span>
+      <span v-if="data.identification && data.publication_date" class="arg_resource_card_dot">
+        ·
+      </span>
+      <arg-date
+        v-if="data.publication_date"
+        :raw-date="data.publication_date"
+        lang="en"
+        compact
+      />
+    </div>
+    <div v-if="data.source" class="arg_resource_card_source">
+      <arg-tags :set-style="data.source.flag || 'blue'">
+        {{ data.source.label }}
+      </arg-tags>
+    </div>
+    <div class="arg_resource_card_actions">
+      <button
+        class="arg_resource_card_action_btn arg_resource_card_action_danger"
+        title="Remove"
+        @click="emit('onRemove', data)"
+      >
+        <arg-icon name="Trash" size="16" color="currentColor" />
+      </button>
+      <button
+        class="arg_resource_card_action_btn"
+        title="Annotate"
+        @click="emit('onAnnotate', data)"
+      >
+        <arg-icon name="PencilSimple" size="16" color="currentColor" />
+        <span v-if="data.countAnnotation" class="arg_resource_card_badge">
+          {{ data.countAnnotation }}
+        </span>
+      </button>
+      <button
+        class="arg_resource_card_action_btn arg_resource_card_action_primary"
+        title="Open"
+        @click="emit('onOpen', data)"
+      >
+        <arg-icon name="ArrowSquareOut" size="16" color="currentColor" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface ResourceItem {
+  id: string;
+  title: string;
+  identification?: string;
+  publication_date?: string;
+  source?: { flag: string; label: string };
+  resourceType?: string;
+  card_link?: string;
+  resource_link?: string;
+  countAnnotation?: number;
+  countryName?: string;
+  price?: number;
+  priceVariation?: number;
+  currency?: string;
+  currencySymbol?: string;
+  atcCode?: string;
+  manufacturer?: string;
+  diagnosisLabel?: string;
+  diagnosisType?: string;
+  year?: string;
+  hospitalizations?: number | null;
+  cancerCode?: string;
+  cases?: number | null;
+  rate?: number | null;
+  metricType?: string;
+  geneName?: string;
+  linkedCount?: number;
+  linkedLabel?: string;
+  icd10Codes?: string[];
+  provider?: string;
+  icon?: string;
+}
+
+withDefaults(
+  defineProps<{
+    data: ResourceItem;
+    hideProvider?: boolean;
+  }>(),
+  {
+    hideProvider: false,
+  }
+);
+
+const emit = defineEmits<{
+  onRemove: [item: ResourceItem];
+  onAnnotate: [item: ResourceItem];
+  onOpen: [item: ResourceItem];
+}>();
+</script>
+
+<style scoped>
+.arg_resource_card{background:var(--base-white,#fff);border:1px solid var(--light,#ececf2);border-radius:10px;display:flex;flex-direction:column;gap:8px;padding:16px;transition:box-shadow .15s ease,border-color .15s ease}.arg_resource_card:hover{border-color:var(--primary,#2176ff);box-shadow:0 2px 8px rgba(33,118,255,.08)}.arg_resource_card_provider{align-items:center;color:var(--primary,#2176ff);display:flex;font-size:12px;font-weight:600;gap:6px;letter-spacing:.5px;text-transform:uppercase}.arg_resource_card_title{color:var(--darkest,#1a1a2e);display:-webkit-box;font-size:14px;font-weight:600;line-height:1.4;margin:0;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.arg_resource_card_meta{align-items:center;color:var(--dark,#6c6c8a);display:flex;font-size:12px;gap:6px}.arg_resource_card_id{font-weight:500}.arg_resource_card_dot,.arg_resource_card_id{color:var(--medium,#9999b0)}.arg_resource_card_actions,.arg_resource_card_source{align-items:center;display:flex}.arg_resource_card_actions{border-top:1px solid var(--light,#ececf2);gap:4px;margin-top:4px;padding-top:8px}.arg_resource_card_action_btn{align-items:center;background:transparent;border:1px solid var(--light,#ececf2);border-radius:8px;color:var(--dark,#6c6c8a);cursor:pointer;display:flex;height:32px;justify-content:center;position:relative;transition:all .15s ease;width:32px}.arg_resource_card_action_btn:hover{background:var(--lightest,#f5f5fa);border-color:var(--medium,#9999b0)}.arg_resource_card_action_danger:hover{background:#fef2f2;border-color:#e74c3c;color:#e74c3c}.arg_resource_card_action_primary:hover{background:rgba(33,118,255,.05);border-color:var(--primary,#2176ff);color:var(--primary,#2176ff)}.arg_resource_card_badge{align-items:center;background:var(--primary,#2176ff);border-radius:8px;color:#fff;display:flex;font-size:10px;font-weight:700;height:16px;justify-content:center;min-width:16px;padding:0 4px;position:absolute;right:-4px;top:-4px}
+</style>

package/dist/runtime/components/argResourceTable.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="arg_resource_table">
+    <arg-table
+      :heads="columnHeaders"
+      :contents="tableContents"
+      :column-type="columnTypes"
+      :column-style="columnStyle"
+      :full-table-scroll="true"
+      :max-height="maxHeight"
+      :sort="true"
+    >
+      <template #Source="{ value }">
+        <arg-tags v-if="value && value.label" :set-style="value.flag || 'blue'">
+          {{ value.label }}
+        </arg-tags>
+        <span v-else class="arg_resource_table_empty">—</span>
+      </template>
+
+      <template #Date="{ value }">
+        <arg-date v-if="value" :raw-date="value" lang="en" compact />
+        <span v-else class="arg_resource_table_empty">—</span>
+      </template>
+
+      <template #Price="{ value }">
+        <span v-if="value && value.amount != null" class="arg_resource_table_price">
+          {{ value.symbol || '' }}{{ formatNumber(value.amount) }}
+          <span v-if="value.variation != null" :class="value.variation >= 0 ? 'arg_resource_table_up' : 'arg_resource_table_down'">
+            {{ value.variation >= 0 ? '+' : '' }}{{ value.variation.toFixed(1) }}%
+          </span>
+        </span>
+        <span v-else class="arg_resource_table_empty">—</span>
+      </template>
+
+      <template #Number="{ value }">
+        <span v-if="value != null">{{ formatNumber(value) }}</span>
+        <span v-else class="arg_resource_table_empty">—</span>
+      </template>
+
+      <template #Tags="{ value }">
+        <div v-if="value && value.length" class="arg_resource_table_tags">
+          <arg-tags v-for="(tag, i) in value.slice(0, 3)" :key="i" set-style="gray">
+            {{ tag }}
+          </arg-tags>
+          <span v-if="value.length > 3" class="arg_resource_table_more">+{{ value.length - 3 }}</span>
+        </div>
+        <span v-else class="arg_resource_table_empty">—</span>
+      </template>
+
+      <template #Actions="{ value }">
+        <div class="arg_resource_table_actions">
+          <button
+            class="arg_resource_table_action_btn"
+            title="Remove"
+            @click="emit('onRemove', value)"
+          >
+            <arg-icon name="Trash" size="16" color="var(--dark)" />
+          </button>
+          <button
+            class="arg_resource_table_action_btn"
+            title="Annotate"
+            @click="emit('onAnnotate', value)"
+          >
+            <arg-icon name="PencilSimple" size="16" color="var(--dark)" />
+            <span v-if="value.countAnnotation" class="arg_resource_table_badge">
+              {{ value.countAnnotation }}
+            </span>
+          </button>
+          <button
+            class="arg_resource_table_action_btn"
+            title="Open"
+            @click="emit('onOpen', value)"
+          >
+            <arg-icon name="ArrowSquareOut" size="16" color="var(--primary)" />
+          </button>
+        </div>
+      </template>
+    </arg-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+export interface ResourceItem {
+  id: string;
+  title: string;
+  identification?: string;
+  publication_date?: string;
+  source?: { flag: string; label: string };
+  resourceType?: string;
+  card_link?: string;
+  resource_link?: string;
+  countAnnotation?: number;
+  countryName?: string;
+  price?: number;
+  priceVariation?: number;
+  currency?: string;
+  currencySymbol?: string;
+  atcCode?: string;
+  manufacturer?: string;
+  diagnosisLabel?: string;
+  diagnosisType?: string;
+  year?: string;
+  hospitalizations?: number | null;
+  cancerCode?: string;
+  cases?: number | null;
+  rate?: number | null;
+  metricType?: string;
+  geneName?: string;
+  linkedCount?: number;
+  linkedLabel?: string;
+  icd10Codes?: string[];
+  provider?: string;
+  icon?: string;
+}
+
+type Variant =
+  | "default"
+  | "drugPrices"
+  | "approvals"
+  | "hospitalization"
+  | "incidence"
+  | "gene"
+  | "disease";
+
+const props = withDefaults(
+  defineProps<{
+    data: ResourceItem[];
+    variant?: Variant;
+    showSourceTag?: boolean;
+    maxHeight?: number;
+  }>(),
+  {
+    variant: "default",
+    showSourceTag: false,
+    maxHeight: 200,
+  }
+);
+
+const emit = defineEmits<{
+  onRemove: [item: ResourceItem];
+  onAnnotate: [item: ResourceItem];
+  onOpen: [item: ResourceItem];
+}>();
+
+interface ColumnConfig {
+  header: string;
+  type: string;
+  size?: string;
+  align?: string;
+  getValue: (item: ResourceItem) => any;
+}
+
+const variantColumns = computed<ColumnConfig[]>(() => {
+  switch (props.variant) {
+    case "drugPrices":
+      return [
+        { header: "Title", type: "", size: "3", align: "", getValue: (i) => i.title || "—" },
+        { header: "Country", type: "", size: "1", align: "", getValue: (i) => i.countryName || "—" },
+        {
+          header: "Price",
+          type: "Price",
+          size: "1",
+          align: "",
+          getValue: (i) => ({
+            amount: i.price,
+            variation: i.priceVariation,
+            symbol: i.currencySymbol || i.currency || "",
+          }),
+        },
+        { header: "ATC Code", type: "", size: "1", align: "", getValue: (i) => i.atcCode || "—" },
+        { header: "Date", type: "Date", size: "1", align: "", getValue: (i) => i.publication_date },
+        { header: "Actions", type: "Actions", size: "1", align: "center", getValue: (i) => i },
+      ];
+
+    case "approvals":
+      return [
+        { header: "Title", type: "", size: "3", align: "", getValue: (i) => i.title || "—" },
+        { header: "ATC", type: "", size: "1", align: "", getValue: (i) => i.atcCode || "—" },
+        { header: "Manufacturer", type: "", size: "1", align: "", getValue: (i) => i.manufacturer || "—" },
+        { header: "Date", type: "Date", size: "1", align: "", getValue: (i) => i.publication_date },
+        {
+          header: "Source",
+          type: "Source",
+          size: "1",
+          align: "",
+          getValue: (i) => i.source,
+        },
+        { header: "Actions", type: "Actions", size: "1", align: "center", getValue: (i) => i },
+      ];
+
+    case "hospitalization":
+      return [
+        { header: "Country", type: "", size: "2", align: "", getValue: (i) => i.countryName || "—" },
+        { header: "Diagnosis", type: "", size: "2", align: "", getValue: (i) => i.diagnosisLabel || "—" },
+        { header: "Type", type: "", size: "1", align: "", getValue: (i) => i.diagnosisType || "—" },
+        { header: "Year", type: "", size: "1", align: "", getValue: (i) => i.year || "—" },
+        {
+          header: "Hospitalizations",
+          type: "Number",
+          size: "1",
+          align: "right",
+          getValue: (i) => i.hospitalizations,
+        },
+        { header: "Actions", type: "Actions", size: "1", align: "center", getValue: (i) => i },
+      ];
+
+    case "incidence":
+      return [
+        { header: "Country", type: "", size: "2", align: "", getValue: (i) => i.countryName || "—" },
+        { header: "Cancer", type: "", size: "2", align: "", getValue: (i) => i.cancerCode || i.title || "—" },
+        { header: "Type", type: "", size: "1", align: "", getValue: (i) => i.metricType || "—" },
+        { header: "Year", type: "", size: "1", align: "", getValue: (i) => i.year || "—" },
+        { header: "Cases", type: "Number", size: "1", align: "right", getValue: (i) => i.cases },
+        { header: "Actions", type: "Actions", size: "1", align: "center", getValue: (i) => i },
+      ];
+
+    case "gene":
+      return [
+        { header: "Symbol", type: "", size: "1", align: "", getValue: (i) => i.identification || i.id },
+        { header: "Name", type: "", size: "3", align: "", getValue: (i) => i.geneName || i.title || "—" },
+        {
+          header: "Linked Diseases",
+          type: "Number",
+          size: "1",
+          align: "right",
+          getValue: (i) => i.linkedCount,
+        },
+        { header: "Actions", type: "Actions", size: "1", align: "center", getValue: (i) => i },
+      ];
+
+    case "disease":
+      return [
+        { header: "Name", type: "", size: "3", align: "", getValue: (i) => i.title || "—" },
+        {
+          header: "ICD10",
+          type: "Tags",
+          size: "2",
+          align: "",
+          getValue: (i) => i.icd10Codes || [],
+        },
+        {
+          header: "Linked Genes",
+          type: "Number",
+          size: "1",
+          align: "right",
+          getValue: (i) => i.linkedCount,
+        },
+        { header: "Actions", type: "Actions", size: "1", align: "center", getValue: (i) => i },
+      ];
+
+    default: {
+      const cols: ColumnConfig[] = [
+        { header: "Title", type: "", size: "3", align: "", getValue: (i) => i.title || "—" },
+        { header: "ID", type: "", size: "1", align: "", getValue: (i) => i.identification || "—" },
+        { header: "Date", type: "Date", size: "1", align: "", getValue: (i) => i.publication_date },
+      ];
+      if (props.showSourceTag) {
+        cols.push({
+          header: "Source",
+          type: "Source",
+          size: "1",
+          align: "",
+          getValue: (i) => i.source,
+        });
+      }
+      cols.push({
+        header: "Actions",
+        type: "Actions",
+        size: "1",
+        align: "center",
+        getValue: (i) => i,
+      });
+      return cols;
+    }
+  }
+});
+
+const columnHeaders = computed(() => variantColumns.value.map((c) => c.header));
+
+const columnTypes = computed(() => variantColumns.value.map((c) => c.type));
+
+const columnStyle = computed(() => ({
+  size: variantColumns.value.map((c) => c.size || ""),
+  align: variantColumns.value.map((c) => c.align || ""),
+}));
+
+const tableContents = computed(() =>
+  props.data.map((item) => ({
+    values: variantColumns.value.map((col) => col.getValue(item)),
+  }))
+);
+
+function formatNumber(value: number | null | undefined): string {
+  if (value == null) return "—";
+  return value.toLocaleString();
+}
+</script>
+
+<style scoped>
+.arg_resource_table{width:100%}.arg_resource_table_empty{color:var(--medium,#9999b0)}.arg_resource_table_price{align-items:center;display:inline-flex;font-weight:500;gap:6px}.arg_resource_table_up{color:var(--system-success,#2ecc71);font-size:12px;font-weight:600}.arg_resource_table_down{color:#e74c3c;font-size:12px;font-weight:600}.arg_resource_table_tags{align-items:center;display:flex;flex-wrap:wrap;gap:4px}.arg_resource_table_more{color:var(--dark,#6c6c8a);font-size:12px;font-weight:600}.arg_resource_table_actions{align-items:center;display:flex;gap:4px;justify-content:center}.arg_resource_table_action_btn{align-items:center;background:transparent;border:none;border-radius:6px;cursor:pointer;display:flex;height:28px;justify-content:center;position:relative;transition:background .15s ease;width:28px}.arg_resource_table_action_btn:hover{background:var(--lightest,#f5f5fa)}.arg_resource_table_badge{align-items:center;background:var(--primary,#2176ff);border-radius:8px;color:#fff;display:flex;font-size:10px;font-weight:700;height:16px;justify-content:center;min-width:16px;padding:0 4px;position:absolute;right:-2px;top:-2px}
+</style>

package/dist/runtime/components/argToolbarContent.vue

@@ -1,62 +1,54 @@
 <template>
-  <div
-    class="info_main_container"
-    :class="infoOpen ? 'info_main_container_open' : ''"
-  >
-    <div class="oip_info_container" @click.stop>
-      <div v-if="infoOpen" class="oip_info_close" @click="closeInfo()">
-        <arg-icon name="X" size="20" />
-        <p>{{ langData }}</p>
-      </div>
-      <div
-        class="oip_info_section"
-        :class="infoOpen ? 'oip_info_section_open' : 'oip_info_section'"
-      >
-        <div class="oip_info_sidebar">
+  <arg-drawer :open="infoOpen" side="right" :width="620" @on-close="closeInfo()">
+    <div v-if="infoOpen" class="oip_info_close" @click="closeInfo()">
+      <arg-icon name="X" size="20" />
+      <p>{{ langData }}</p>
+    </div>
+    <div class="oip_info_section">
+      <div class="oip_info_sidebar">
+        <div
+          v-for="(item, index) in toolbarArray"
+          :key="index"
+          class="oip_info_menu"
+          :class="trueActiveMenu === item.name ? 'active_info_menu' : ''"
+          @click="openMenu(item.name)"
+        >
+          <div class="oip_row v-center gap-4">
+            <arg-icon
+              :name="item.icon"
+              size="20"
+              :color="trueActiveMenu === item.name ? '' : 'var(--dark)'"
+            />
+            <p>{{ getLabel(item.name) }}</p>
+          </div>
           <div
-            v-for="(item, index) in toolbarArray"
-            :key="index"
-            class="oip_info_menu"
-            :class="trueActiveMenu === item.name ? 'active_info_menu' : ''"
-            @click="openMenu(item.name)"
+            v-if="item.name === 'Sources' && sourceAmount > 0"
+            class="arg_source_amount"
           >
-            <div class="oip_row v-center gap-4">
-              <arg-icon
-                :name="item.icon"
-                size="20"
-                :color="trueActiveMenu === item.name ? '' : 'var(--dark)'"
-              />
-              <p>{{ getLabel(item.name) }}</p>
-            </div>
-            <div
-              v-if="item.name === 'Sources' && sourceAmount > 0"
-              class="arg_source_amount"
-            >
-              {{ sourceAmount }}
-            </div>
-            <div
-              v-if="item.name !== 'Sources' && item?.size && item?.size > 0"
-              class="arg_source_amount"
-            >
-              {{ item?.size }}
-            </div>
+            {{ sourceAmount }}
           </div>
-        </div>
-        <div class="oip_info_content">
           <div
-            v-for="(item, index) in toolbarArray"
-            :key="index"
-            :class="[
-              'toolbar_menu_content',
-              trueActiveMenu === item.name ? '' : 'hide',
-            ]"
+            v-if="item.name !== 'Sources' && item?.size && item?.size > 0"
+            class="arg_source_amount"
           >
-            <slot :name="item.name" />
+            {{ item?.size }}
           </div>
         </div>
       </div>
+      <div class="oip_info_content">
+        <div
+          v-for="(item, index) in toolbarArray"
+          :key="index"
+          :class="[
+            'toolbar_menu_content',
+            trueActiveMenu === item.name ? '' : 'hide',
+          ]"
+        >
+          <slot :name="item.name" />
+        </div>
+      </div>
     </div>
-  </div>
+  </arg-drawer>
 </template>
 
 <script>
@@ -68,9 +60,10 @@ import {
   watch
 } from "vue";
 import argIcon from "./argIcon.vue";
+import argDrawer from "./argDrawer.vue";
 export default defineComponent({
   name: "argToolbarContent",
-  components: { argIcon },
+  components: { argIcon, argDrawer },
   props: {
     toolbarOpen: {
       type: Boolean,
@@ -136,29 +129,10 @@ export default defineComponent({
         trueActiveMenu.value = new_active_menu;
       }
     );
-    watch(
-      () => infoOpen.value,
-      () => {
-        if (infoOpen.value) {
-          setTimeout(() => {
-            document.addEventListener("click", closeInfo);
-          }, 500);
-        } else document.removeEventListener("click", closeInfo);
-      }
-    );
     onMounted(() => {
       trueActiveMenu.value = props.activeMenu;
       infoOpen.value = props.toolbarOpen;
     });
-    function toggleBodyOverflow(state) {
-      if (typeof window !== "undefined") {
-        const body = document.querySelector("html");
-        if (body) {
-          state ? body.style.setProperty("overflow", "hidden") : body.style.removeProperty("overflow");
-        }
-      }
-    }
-    watch(infoOpen, toggleBodyOverflow, { immediate: true });
     function openMenu(item) {
       trueActiveMenu.value = item;
       emit("update:Menu", trueActiveMenu.value);
@@ -183,5 +157,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.info_main_container{background-color:transparent;opacity:0;transition:background-color .3s linear,opacity .4s linear;z-index:0}.info_main_container_open{background-color:rgba(0,0,0,.4);bottom:0;height:100%;left:0;opacity:1;position:fixed;top:0;width:100%;z-index:99}.oip_info_menu{align-items:center;align-self:stretch;border-bottom:2px solid transparent;color:var(--dark);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:500;gap:4px;justify-content:space-between;line-height:normal;padding:0 16px 4px}.active_info_menu{border-bottom:2px solid var(--primary-primary,#2176ff)!important;color:var(--darkest)!important}.oip_info_item svg{flex-basis:100%}.oip_info_item:hover{background:rgba(237,237,243,.65)}.oip_info_close{align-items:center;background:var(--white);border-radius:var(--s,8px);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:400;gap:6px;line-height:160%;margin:24px;padding:6px 12px 6px 8px}.oip_info_close:hover{background:var(--light)!important}.oip_info_section{align-items:flex-start;display:flex;flex-direction:row;height:0;overflow:hidden;transition:all .5s ease;width:0}.oip_info_section_open{height:100%;width:620px}.oip_info_sidebar{background:var(--base-demi-fond,#f9f9fa);gap:16px;padding:24px 0;width:160px}.oip_info_content,.oip_info_sidebar{align-items:flex-start;align-self:stretch;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid var(--light,#ececf2);display:flex;flex-direction:column}.oip_info_content{background:var(--base-white,#fff);border-radius:var(--None,0);gap:24px;overflow-y:scroll;padding:24px;width:460px}.oip_info_content::-webkit-scrollbar{height:5px!important;width:5px!important}.oip_info_content::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.oip_info_content::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.oip_info_container{align-items:flex-start;display:inline-flex;height:100%;position:fixed;right:0;top:0;z-index:999}.hide{display:none}.arg_source_amount{align-items:center;background:var(--system-alert,#ef4444);border-radius:30px;color:var(--white);display:flex;flex-direction:column;font-size:10px;font-style:normal;font-weight:900;height:var(--m,16px);justify-content:center;line-height:normal;width:var(--m,16px)}.toolbar_menu_content{align-self:stretch}
+.oip_info_menu{align-items:center;align-self:stretch;border-bottom:2px solid transparent;color:var(--dark);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:500;gap:4px;justify-content:space-between;line-height:normal;padding:0 16px 4px}.active_info_menu{border-bottom:2px solid var(--primary-primary,#2176ff)!important;color:var(--darkest)!important}.oip_info_item svg{flex-basis:100%}.oip_info_item:hover{background:rgba(237,237,243,.65)}.oip_info_close{align-items:center;background:var(--white);border-radius:var(--s,8px);cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:400;gap:6px;line-height:160%;margin:24px;padding:6px 12px 6px 8px}.oip_info_close:hover{background:var(--light)!important}.oip_info_section{align-items:flex-start;display:flex;flex-direction:row;height:100%}.oip_info_sidebar{background:var(--base-demi-fond,#f9f9fa);gap:16px;padding:24px 0;width:160px}.oip_info_content,.oip_info_sidebar{align-items:flex-start;align-self:stretch;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-left:1px solid var(--light,#ececf2);display:flex;flex-direction:column}.oip_info_content{background:var(--base-white,#fff);border-radius:var(--None,0);gap:24px;overflow-y:scroll;padding:24px;width:460px}.oip_info_content::-webkit-scrollbar{height:5px!important;width:5px!important}.oip_info_content::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.oip_info_content::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.hide{display:none}.arg_source_amount{align-items:center;background:var(--system-alert,#ef4444);border-radius:30px;color:var(--white);display:flex;flex-direction:column;font-size:10px;font-style:normal;font-weight:900;height:var(--m,16px);justify-content:center;line-height:normal;width:var(--m,16px)}.toolbar_menu_content{align-self:stretch}
 </style>

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

@@ -65,5 +65,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     toolbarArray: unknown[];
 }, {}, {
     argIcon: any;
+    argDrawer: any;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.194",
+  "version": "0.2.199",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -39,6 +39,7 @@
     "@vueuse/integrations": "^10.11.1",
     "apexcharts": "^3.54.1",
     "fuse.js": "^6.6.2",
+    "muuri": "^0.9.5",
     "posthog-js": "^1.222.0",
     "save": "^2.9.0",
     "vue-apexcharts": "^1.7.0",