@caido-utils/components 0.1.0

package/dist/ButtonGroup/Container.d.vue.ts

@@ -0,0 +1,34 @@
+type Option = {
+    label: string;
+    value: string;
+};
+type __VLS_Props = {
+    modelValue: string;
+    options: Option[];
+    size?: "small" | "large" | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    size: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    size: string;
+}>>>, {
+    size: "small" | "large";
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/ButtonGroup/Container.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import SelectButton from "primevue/selectbutton";
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+withDefaults(
+  defineProps<{
+    modelValue: string;
+    options: Option[];
+    size?: "small" | "large" | undefined;
+  }>(),
+  {
+    size: "small",
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+</script>
+
+<template>
+  <SelectButton
+    :modelValue="modelValue"
+    :options="options"
+    optionLabel="label"
+    optionValue="value"
+    :allowEmpty="false"
+    :size="size"
+    class="text-xs"
+    @update:modelValue="emit('update:modelValue', $event)"
+  />
+</template>

package/dist/ButtonGroup/Container.vue.d.ts

@@ -0,0 +1,34 @@
+type Option = {
+    label: string;
+    value: string;
+};
+type __VLS_Props = {
+    modelValue: string;
+    options: Option[];
+    size?: "small" | "large" | undefined;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    size: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    size: string;
+}>>>, {
+    size: "small" | "large";
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/Card/Container.d.vue.ts

@@ -0,0 +1,12 @@
+declare var __VLS_7: any, __VLS_8: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Card/Container.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import PrimeCard from "primevue/card";
+
+defineOptions({
+  inheritAttrs: false,
+});
+</script>
+
+<template>
+  <PrimeCard
+    v-bind="$attrs"
+    :pt="{
+      body: { class: 'h-full p-0' },
+      content: { class: 'h-full flex flex-col' },
+    }"
+  >
+    <template v-for="(_, slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </PrimeCard>
+</template>

package/dist/Card/Container.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_7: any, __VLS_8: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ContextMenu/Container.d.vue.ts

@@ -0,0 +1,9 @@
+declare function show(event: MouseEvent): void;
+declare function hide(): void;
+declare function toggle(event: MouseEvent): void;
+declare const _default: import("vue").DefineComponent<{}, {
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/ContextMenu/Container.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import ContextMenu from "primevue/contextmenu";
+import type { MenuItem } from "primevue/menuitem";
+import { ref } from "vue";
+
+defineProps<{
+  items: MenuItem[];
+}>();
+
+const menuRef = ref();
+
+function show(event: MouseEvent) {
+  menuRef.value?.show(event);
+}
+
+function hide() {
+  menuRef.value?.hide();
+}
+
+function toggle(event: MouseEvent) {
+  menuRef.value?.toggle(event);
+}
+
+defineExpose({ show, hide, toggle });
+
+const menuPt = {
+  itemContent: { class: "!bg-transparent hover:!bg-surface-700" },
+};
+</script>
+
+<template>
+  <ContextMenu
+    ref="menuRef"
+    :model="items"
+    class="border border-surface-600 shadow-lg text-sm"
+    :pt="menuPt"
+  />
+</template>

package/dist/ContextMenu/Container.vue.d.ts

@@ -0,0 +1,9 @@
+declare function show(event: MouseEvent): void;
+declare function hide(): void;
+declare function toggle(event: MouseEvent): void;
+declare const _default: import("vue").DefineComponent<{}, {
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/DataTable/Container.d.vue.ts

@@ -0,0 +1,68 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    items: Record<string, unknown>[];
+    columns: {
+        field: string;
+        header: string;
+        sortable?: boolean;
+    }[];
+    rowHeight?: number;
+    selectable?: boolean | "single" | "multiple";
+    selection?: Record<string, unknown>[] | null;
+    activeRow?: Record<string, unknown> | null;
+    scrollKey?: string;
+}>, {
+    rowHeight: number;
+    selectable: boolean;
+    selection: () => never[];
+    activeRow: null;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    items: Record<string, unknown>[];
+    columns: {
+        field: string;
+        header: string;
+        sortable?: boolean;
+    }[];
+    rowHeight?: number;
+    selectable?: boolean | "single" | "multiple";
+    selection?: Record<string, unknown>[] | null;
+    activeRow?: Record<string, unknown> | null;
+    scrollKey?: string;
+}>, {
+    rowHeight: number;
+    selectable: boolean;
+    selection: () => never[];
+    activeRow: null;
+}>>>, {
+    rowHeight: number;
+    selectable: boolean | "single" | "multiple";
+    selection: Record<string, unknown>[] | null;
+    activeRow: Record<string, unknown> | null;
+}, {}>, {
+    [x: string]: ((props: {
+        item: any;
+        value: any;
+    }) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/DataTable/Container.vue

@@ -0,0 +1,295 @@
+<script lang="ts">
+const scrollMemory = new Map<string, number>();
+const ROW_HEIGHT = 33;
+</script>
+
+<script setup lang="ts">
+import DataTable from "primevue/datatable";
+import Column from "primevue/column";
+import Checkbox from "primevue/checkbox";
+import {
+  ref,
+  computed,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  watch,
+  useAttrs,
+} from "vue";
+
+type ColumnDef = {
+  field: string;
+  header: string;
+  sortable?: boolean;
+};
+
+const props = withDefaults(
+  defineProps<{
+    items: Record<string, unknown>[];
+    columns: ColumnDef[];
+    rowHeight?: number;
+    selectable?: boolean | "single" | "multiple";
+    selection?: Record<string, unknown>[] | null;
+    activeRow?: Record<string, unknown> | null;
+    scrollKey?: string;
+  }>(),
+  {
+    rowHeight: ROW_HEIGHT,
+    selectable: false,
+    selection: () => [],
+    activeRow: null,
+  },
+);
+
+const emit = defineEmits<{
+  "update:selection": [value: Record<string, unknown>[]];
+  "update:activeRow": [value: Record<string, unknown> | null];
+  "row-select": [event: { data: Record<string, unknown> }];
+  "row-unselect": [event: { data: Record<string, unknown> }];
+  "row-click": [event: { data: Record<string, unknown> }];
+}>();
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const containerRef = ref<HTMLElement>();
+const tableKey = ref(0);
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  if (!containerRef.value) return;
+  resizeObserver = new ResizeObserver((entries) => {
+    if (entries[0] && entries[0].contentRect.height > 0) {
+      tableKey.value++;
+      resizeObserver?.disconnect();
+    }
+  });
+  resizeObserver.observe(containerRef.value);
+});
+
+function getScrollElement(): HTMLElement | undefined {
+  if (!containerRef.value) return undefined;
+  return (
+    containerRef.value.querySelector<HTMLElement>(".p-virtualscroller") ??
+    containerRef.value.querySelector<HTMLElement>(
+      "[data-pc-section='tablecontainer']",
+    ) ??
+    undefined
+  );
+}
+
+function onScroll(e: Event) {
+  if (!props.scrollKey) return;
+  const target = e.target as HTMLElement;
+  scrollMemory.set(props.scrollKey, target.scrollTop);
+}
+
+function attachScrollListener() {
+  const el = getScrollElement();
+  el?.addEventListener("scroll", onScroll, { passive: true });
+}
+
+function detachScrollListener() {
+  const el = getScrollElement();
+  el?.removeEventListener("scroll", onScroll);
+}
+
+function restoreScrollPosition() {
+  if (!props.scrollKey) return;
+  const saved = scrollMemory.get(props.scrollKey);
+  if (saved === undefined || saved <= 0) return;
+  const el = getScrollElement();
+  if (el) {
+    el.scrollTop = saved;
+  }
+}
+
+watch(tableKey, async () => {
+  await nextTick();
+  attachScrollListener();
+  restoreScrollPosition();
+});
+
+onBeforeUnmount(() => {
+  detachScrollListener();
+  resizeObserver?.disconnect();
+});
+
+const isMultiple = props.selectable === "multiple";
+
+const attrs = useAttrs();
+const dataKeyAttr = (attrs["dataKey"] as string) ?? "id";
+
+function getRowKey(row: Record<string, unknown>): unknown {
+  return row[dataKeyAttr];
+}
+
+// --- Selection logic ---
+
+const selectionKeys = computed(() => {
+  const keys = new Set<unknown>();
+  if (Array.isArray(props.selection)) {
+    for (const row of props.selection) {
+      keys.add(getRowKey(row));
+    }
+  }
+  return keys;
+});
+
+function isRowSelected(row: Record<string, unknown>): boolean {
+  return selectionKeys.value.has(getRowKey(row));
+}
+
+const allSelected = computed(() => {
+  return (
+    props.items.length > 0 && selectionKeys.value.size === props.items.length
+  );
+});
+
+function toggleRow(row: Record<string, unknown>) {
+  const sel = Array.isArray(props.selection) ? [...props.selection] : [];
+  const key = getRowKey(row);
+  const idx = sel.findIndex((r) => getRowKey(r) === key);
+  if (idx >= 0) {
+    sel.splice(idx, 1);
+    emit("update:selection", sel);
+    emit("row-unselect", { data: row });
+  } else {
+    sel.push(row);
+    emit("update:selection", sel);
+    emit("row-select", { data: row });
+  }
+}
+
+function toggleAll() {
+  if (allSelected.value) {
+    emit("update:selection", []);
+  } else {
+    emit("update:selection", [...props.items]);
+  }
+}
+
+function isCheckboxClick(e: Event): boolean {
+  const target = e.target as HTMLElement;
+  return !!target.closest("[data-pc-name='checkbox']");
+}
+
+function onRowClick(event: {
+  originalEvent: Event;
+  data: Record<string, unknown>;
+}) {
+  if (!props.selectable) return;
+  if (isMultiple && isCheckboxClick(event.originalEvent)) return;
+  emit("row-click", event);
+
+  if (isMultiple && selectionKeys.value.size > 0) {
+    // Multi mode with active checkboxes: toggle row
+    toggleRow(event.data);
+  } else {
+    // Single highlight
+    emit("update:activeRow", event.data);
+    emit("row-select", event);
+  }
+}
+
+// --- Styling ---
+
+const ACTIVE_CLASS = "!bg-white/25 !text-inherit hover:!bg-white/30";
+
+function activeRowClass(data: Record<string, unknown>): string {
+  const key = getRowKey(data);
+
+  if (props.activeRow && key === getRowKey(props.activeRow)) {
+    return ACTIVE_CLASS;
+  }
+
+  if (isMultiple && selectionKeys.value.has(key)) {
+    return ACTIVE_CLASS;
+  }
+
+  return "";
+}
+
+const tablePt = {};
+
+const tablePtOptions = {
+  mergeSections: true,
+  mergeProps: true,
+};
+
+const columnPt = {
+  headerCell: {
+    class:
+      "px-2.5 py-1.5 font-mono text-sm font-semibold !bg-transparent !text-inherit !border-surface-700/50 !border-t-0 !border-b-0",
+  },
+  sort: {
+    class: "!text-inherit",
+  },
+  bodyCell: {
+    class:
+      "px-2.5 py-1.5 font-mono text-[13px] font-medium overflow-hidden text-ellipsis whitespace-nowrap !border-surface-700/50",
+  },
+};
+</script>
+
+<template>
+  <div ref="containerRef" class="h-full min-h-0">
+    <DataTable
+      :key="tableKey"
+      :value="items"
+      scrollable
+      scrollHeight="flex"
+      size="small"
+      stripedRows
+      :virtualScrollerOptions="{ itemSize: props.rowHeight }"
+      resizableColumns
+      columnResizeMode="fit"
+      rowHover
+      :rowClass="activeRowClass"
+      :pt="tablePt"
+      :ptOptions="tablePtOptions"
+      @row-click="onRowClick($event)"
+      v-bind="$attrs"
+    >
+      <Column v-if="isMultiple" headerStyle="width: 3rem" :pt="columnPt">
+        <template #header>
+          <Checkbox :modelValue="allSelected" binary @change="toggleAll" />
+        </template>
+        <template #body="{ data }">
+          <Checkbox
+            :modelValue="isRowSelected(data)"
+            binary
+            @change="toggleRow(data)"
+          />
+        </template>
+      </Column>
+      <Column
+        v-for="col in columns"
+        :key="col.field"
+        :field="col.field"
+        :header="col.header"
+        :sortable="col.sortable"
+        :style="{ height: `${props.rowHeight}px` }"
+        :pt="columnPt"
+      >
+        <template v-if="col.sortable" #sorticon="{ sorted, sortOrder }">
+          <i
+            v-if="sorted"
+            :class="[
+              'fas text-[9px]',
+              sortOrder === 1 ? 'fa-chevron-up' : 'fa-chevron-down',
+            ]"
+          />
+        </template>
+        <template v-if="$slots[`cell-${col.field}`]" #body="{ data }">
+          <slot
+            :name="`cell-${col.field}`"
+            :item="data"
+            :value="data[col.field]"
+          />
+        </template>
+      </Column>
+    </DataTable>
+  </div>
+</template>

package/dist/DataTable/Container.vue.d.ts

@@ -0,0 +1,68 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    items: Record<string, unknown>[];
+    columns: {
+        field: string;
+        header: string;
+        sortable?: boolean;
+    }[];
+    rowHeight?: number;
+    selectable?: boolean | "single" | "multiple";
+    selection?: Record<string, unknown>[] | null;
+    activeRow?: Record<string, unknown> | null;
+    scrollKey?: string;
+}>, {
+    rowHeight: number;
+    selectable: boolean;
+    selection: () => never[];
+    activeRow: null;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    items: Record<string, unknown>[];
+    columns: {
+        field: string;
+        header: string;
+        sortable?: boolean;
+    }[];
+    rowHeight?: number;
+    selectable?: boolean | "single" | "multiple";
+    selection?: Record<string, unknown>[] | null;
+    activeRow?: Record<string, unknown> | null;
+    scrollKey?: string;
+}>, {
+    rowHeight: number;
+    selectable: boolean;
+    selection: () => never[];
+    activeRow: null;
+}>>>, {
+    rowHeight: number;
+    selectable: boolean | "single" | "multiple";
+    selection: Record<string, unknown>[] | null;
+    activeRow: Record<string, unknown> | null;
+}, {}>, {
+    [x: string]: ((props: {
+        item: any;
+        value: any;
+    }) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};