@tekkare/auriga 0.2.192 → 0.2.198

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.192",
+  "version": "0.2.198",
   "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",