@caido-utils/components 0.3.1 → 0.4.0

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: unknown[];
+    modelValue: unknown[] | undefined;
     options: unknown[];
     optionLabel?: string;
     optionValue?: string;

package/dist/MultiSelect/Container.vue

@@ -4,7 +4,7 @@ import { computed } from "vue";
 
 const props = withDefaults(
   defineProps<{
-    modelValue: unknown[];
+    modelValue: unknown[] | undefined;
     options: unknown[];
     optionLabel?: string;
     optionValue?: string;

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: unknown[];
+    modelValue: unknown[] | undefined;
     options: unknown[];
     optionLabel?: string;
     optionValue?: string;

package/dist/index.d.ts

@@ -9,4 +9,3 @@ export { default as MenuButton } from "./MenuButton/Container.vue";
 export { default as MultiSelect } from "./MultiSelect/Container.vue";
 export { default as RequestEditor } from "./RequestEditor/Container.vue";
 export { default as ResponseEditor } from "./ResponseEditor/Container.vue";
-export { default as Table } from "./Table/Container.vue";

package/dist/index.js

@@ -9,4 +9,3 @@ export { default as MenuButton } from "./MenuButton/Container.vue";
 export { default as MultiSelect } from "./MultiSelect/Container.vue";
 export { default as RequestEditor } from "./RequestEditor/Container.vue";
 export { default as ResponseEditor } from "./ResponseEditor/Container.vue";
-export { default as Table } from "./Table/Container.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@caido-utils/components",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "type": "module",
   "files": [
     "dist"

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

@@ -1,36 +0,0 @@
-import type { MenuItem } from "primevue/menuitem";
-declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>>, never>, never> & {
-        items: T[];
-        selected: T[];
-        columns: {
-            key: string;
-            header: string;
-            width: string;
-            sortable?: boolean;
-            sortType?: "string" | "number" | "date";
-        }[];
-        rowKey: (item: T) => string;
-        activeKey?: string;
-        emptyMessage?: string;
-        selectable?: boolean;
-        scrollKey?: string;
-        contextMenu?: MenuItem[];
-        resizable?: boolean;
-    } & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {
-        [x: string]: ((props: {
-            item: any;
-            value: any;
-        }) => any) | undefined;
-    };
-    emit: ((evt: "row-click", item: T) => void) & ((evt: "row-contextmenu", item: T, event: MouseEvent) => void) & ((evt: "update:selected", value: T[]) => void);
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/dist/Table/Container.vue

@@ -1,512 +0,0 @@
-<script lang="ts">
-const scrollMemory = new Map<string, number>();
-</script>
-
-<script setup lang="ts" generic="T extends Record<string, unknown>">
-import ContextMenu from "primevue/contextmenu";
-import type { MenuItem } from "primevue/menuitem";
-import VirtualScroller from "primevue/virtualscroller";
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  shallowRef,
-  triggerRef,
-  watch,
-} from "vue";
-
-type SortType = "string" | "number" | "date";
-
-type Column = {
-  key: string;
-  header: string;
-  width: string;
-  sortable?: boolean;
-  sortType?: SortType;
-};
-
-type SortOrder = "asc" | "desc" | undefined;
-
-const props = withDefaults(
-  defineProps<{
-    items: T[];
-    selected: T[];
-    columns: Column[];
-    rowKey: (item: T) => string;
-    activeKey?: string;
-    emptyMessage?: string;
-    selectable?: boolean;
-    scrollKey?: string;
-    contextMenu?: MenuItem[];
-    resizable?: boolean;
-  }>(),
-  { selectable: false, resizable: false },
-);
-
-const emit = defineEmits<{
-  "update:selected": [value: T[]];
-  "row-click": [item: T];
-  "row-contextmenu": [item: T, event: MouseEvent];
-}>();
-
-const contextMenuRef = ref();
-
-function onRowContextMenu(item: T, event: MouseEvent) {
-  event.preventDefault();
-  emit("row-contextmenu", item, event);
-  if (props.contextMenu && contextMenuRef.value) {
-    contextMenuRef.value.show(event);
-  }
-}
-
-const selectedKeys = ref(new Set<string>());
-
-watch(
-  () => props.selected,
-  (val) => {
-    const keys = new Set<string>();
-    for (const item of val) {
-      keys.add(props.rowKey(item));
-    }
-    selectedKeys.value = keys;
-  },
-  { immediate: true },
-);
-
-function syncSelection() {
-  const result: T[] = [];
-  for (const item of props.items) {
-    if (selectedKeys.value.has(props.rowKey(item))) {
-      result.push(item);
-    }
-  }
-  emit("update:selected", result);
-}
-
-function toggleSelection(item: T) {
-  const key = props.rowKey(item);
-  if (selectedKeys.value.has(key)) {
-    selectedKeys.value.delete(key);
-  } else {
-    selectedKeys.value.add(key);
-  }
-  syncSelection();
-}
-
-function toggleAll() {
-  if (selectedKeys.value.size === props.items.length) {
-    selectedKeys.value.clear();
-  } else {
-    for (const item of props.items) {
-      selectedKeys.value.add(props.rowKey(item));
-    }
-  }
-  syncSelection();
-}
-
-const allSelected = computed(
-  () =>
-    props.items.length > 0 && selectedKeys.value.size === props.items.length,
-);
-
-function onRowClick(item: T) {
-  emit("row-click", item);
-}
-
-function isSelected(item: T): boolean {
-  return selectedKeys.value.has(props.rowKey(item));
-}
-
-function isActive(item: T): boolean {
-  if (props.activeKey === undefined) return false;
-  return props.rowKey(item) === props.activeKey;
-}
-
-const sortKey = ref<string | undefined>(undefined);
-const sortOrder = ref<SortOrder>(undefined);
-
-function toggleSort(col: Column) {
-  if (!col.sortable) return;
-
-  if (sortKey.value !== col.key) {
-    sortKey.value = col.key;
-    sortOrder.value = "asc";
-  } else if (sortOrder.value === "asc") {
-    sortOrder.value = "desc";
-  } else {
-    sortKey.value = undefined;
-    sortOrder.value = undefined;
-  }
-}
-
-const sortedItems = computed(() => {
-  if (sortKey.value === undefined || sortOrder.value === undefined) {
-    return props.items;
-  }
-
-  const key = sortKey.value;
-  const col = props.columns.find((c) => c.key === key);
-  const type = col?.sortType ?? "string";
-  const dir = sortOrder.value === "asc" ? 1 : -1;
-  const sorted = [...props.items];
-
-  sorted.sort((a, b) => {
-    const aVal = a[key];
-    const bVal = b[key];
-
-    if (aVal === undefined || aVal === "") return 1;
-    if (bVal === undefined || bVal === "") return -1;
-
-    if (type === "number") {
-      return (Number(aVal) - Number(bVal)) * dir;
-    }
-
-    if (type === "date") {
-      return (
-        (new Date(String(aVal)).getTime() - new Date(String(bVal)).getTime()) *
-        dir
-      );
-    }
-
-    return String(aVal).localeCompare(String(bVal)) * dir;
-  });
-
-  return sorted;
-});
-
-const VIRTUAL_THRESHOLD = 100;
-const useVirtual = computed(
-  () => sortedItems.value.length >= VIRTUAL_THRESHOLD,
-);
-
-const scrollerKey = ref(0);
-const containerRef = ref<HTMLElement>();
-let resizeObserver: ResizeObserver | undefined;
-
-function getScrollElement(): HTMLElement | undefined {
-  if (!containerRef.value) return undefined;
-  if (useVirtual.value) {
-    return (
-      containerRef.value.querySelector<HTMLElement>(".p-virtualscroller") ??
-      undefined
-    );
-  }
-  return containerRef.value;
-}
-
-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;
-  }
-}
-
-// Resizable columns
-const headerTableRef = ref<HTMLTableElement>();
-const columnWidths = shallowRef<number[]>([]);
-const widthsInitialized = ref(false);
-const resizing = ref(false);
-const resizeColIndex = ref(-1);
-const resizeStartX = ref(0);
-const resizeStartWidth = ref(0);
-
-const colStyles = computed(() =>
-  props.columns.map((col, i) => {
-    if (
-      props.resizable &&
-      widthsInitialized.value &&
-      columnWidths.value[i] !== undefined
-    ) {
-      return { width: `${columnWidths.value[i]}px` };
-    }
-    return { width: col.width };
-  }),
-);
-
-function initColumnWidths() {
-  if (!props.resizable || !headerTableRef.value) return;
-  const tableWidth = headerTableRef.value.offsetWidth;
-  if (tableWidth === 0) return;
-  const ths = headerTableRef.value.querySelectorAll("thead th");
-  const startIdx = props.selectable ? 1 : 0;
-  const rawWidths: number[] = [];
-  let fixedTotal = 0;
-  let zeroCount = 0;
-  for (let i = startIdx; i < ths.length; i++) {
-    const w = (ths[i] as HTMLElement).offsetWidth;
-    rawWidths.push(w);
-    if (w === 0) {
-      zeroCount++;
-    } else {
-      fixedTotal += w;
-    }
-  }
-  const checkboxWidth =
-    props.selectable && startIdx === 1
-      ? (ths[0] as HTMLElement).offsetWidth
-      : 0;
-  const remaining = tableWidth - checkboxWidth - fixedTotal;
-  const flexWidth =
-    zeroCount > 0 ? Math.max(30, Math.floor(remaining / zeroCount)) : 0;
-  const widths = rawWidths.map((w) => (w === 0 ? flexWidth : w));
-  columnWidths.value = widths;
-  widthsInitialized.value = true;
-}
-
-function onResizeStart(colIndex: number, event: MouseEvent) {
-  resizing.value = true;
-  resizeColIndex.value = colIndex;
-  resizeStartX.value = event.clientX;
-  resizeStartWidth.value = columnWidths.value[colIndex] ?? 0;
-  document.addEventListener("mousemove", onResizeMove);
-  document.addEventListener("mouseup", onResizeEnd);
-  document.body.style.cursor = "col-resize";
-  document.body.style.userSelect = "none";
-}
-
-function onResizeMove(event: MouseEvent) {
-  if (!resizing.value) return;
-  const delta = event.clientX - resizeStartX.value;
-  const newWidth = Math.max(30, resizeStartWidth.value + delta);
-  columnWidths.value[resizeColIndex.value] = newWidth;
-  triggerRef(columnWidths);
-}
-
-function onResizeEnd() {
-  resizing.value = false;
-  resizeColIndex.value = -1;
-  document.removeEventListener("mousemove", onResizeMove);
-  document.removeEventListener("mouseup", onResizeEnd);
-  document.body.style.cursor = "";
-  document.body.style.userSelect = "";
-}
-
-watch(
-  () => props.columns.map((c) => c.key).join(","),
-  async () => {
-    if (!props.resizable) return;
-    widthsInitialized.value = false;
-    await nextTick();
-    initColumnWidths();
-  },
-);
-
-watch(scrollerKey, async () => {
-  await nextTick();
-  attachScrollListener();
-  restoreScrollPosition();
-});
-
-onMounted(() => {
-  if (containerRef.value === undefined) return;
-  resizeObserver = new ResizeObserver((entries) => {
-    const entry = entries[0];
-    if (entry !== undefined && entry.contentRect.height > 0) {
-      scrollerKey.value++;
-    }
-  });
-  resizeObserver.observe(containerRef.value);
-
-  if (!useVirtual.value) {
-    nextTick(() => {
-      attachScrollListener();
-      restoreScrollPosition();
-    });
-  }
-
-  nextTick(() => initColumnWidths());
-});
-
-onBeforeUnmount(() => {
-  detachScrollListener();
-  resizeObserver?.disconnect();
-  if (resizing.value) {
-    onResizeEnd();
-  }
-});
-</script>
-
-<template>
-  <ContextMenu v-if="contextMenu" ref="contextMenuRef" :model="contextMenu" />
-  <div class="h-full flex flex-col min-h-0">
-    <table
-      ref="headerTableRef"
-      class="w-full border-collapse"
-      :style="{ tableLayout: 'fixed' }"
-    >
-      <colgroup>
-        <col v-if="selectable" style="width: 32px" />
-        <col v-for="(col, i) in columns" :key="col.key" :style="colStyles[i]" />
-      </colgroup>
-      <thead>
-        <tr>
-          <th
-            v-if="selectable"
-            class="px-2 py-1.5 bg-surface-900 sticky top-0 z-10"
-          >
-            <div
-              class="w-3.5 h-3.5 rounded-sm border cursor-pointer flex items-center justify-center transition-colors"
-              :class="
-                allSelected
-                  ? 'bg-amber-500 border-amber-500'
-                  : 'border-surface-500 hover:border-surface-300'
-              "
-              @click="toggleAll()"
-            >
-              <i
-                v-if="allSelected"
-                class="fas fa-check text-[8px] text-white"
-              />
-            </div>
-          </th>
-          <th
-            v-for="(col, i) in columns"
-            :key="col.key"
-            class="px-2.5 py-1.5 font-mono text-sm font-semibold text-surface-300 text-left bg-surface-900 border-b border-surface-700/50 sticky top-0 z-10 select-none"
-            :class="resizable ? 'relative' : ''"
-          >
-            <span
-              class="flex items-center gap-1.5"
-              :class="
-                col.sortable
-                  ? 'cursor-pointer hover:text-surface-100 transition-colors'
-                  : ''
-              "
-              @click="toggleSort(col)"
-            >
-              {{ col.header }}
-              <i
-                v-if="col.sortable && sortKey === col.key"
-                :class="[
-                  'fas text-[9px]',
-                  sortOrder === 'asc' ? 'fa-chevron-up' : 'fa-chevron-down',
-                ]"
-              />
-            </span>
-            <div
-              v-if="resizable"
-              class="absolute top-0 -right-px w-1.5 h-full cursor-col-resize bg-surface-700 hover:bg-amber-500 z-20"
-              @mousedown.prevent.stop="onResizeStart(i, $event)"
-            />
-          </th>
-        </tr>
-      </thead>
-    </table>
-    <div
-      ref="containerRef"
-      class="flex-1 min-h-0"
-      :class="useVirtual ? 'overflow-hidden' : 'overflow-y-auto'"
-    >
-      <div
-        v-if="sortedItems.length === 0"
-        class="flex flex-col items-center justify-center h-full gap-3 text-surface-500"
-      >
-        <i class="fas fa-inbox text-3xl text-surface-600" />
-        <span class="text-sm">{{ emptyMessage ?? "No data" }}</span>
-      </div>
-      <VirtualScroller
-        v-else
-        :key="scrollerKey"
-        :items="sortedItems"
-        :item-size="33"
-        :disabled="!useVirtual"
-        class="h-full"
-      >
-        <template
-          #content="{
-            items: visibleItems,
-            styleClass,
-            contentRef,
-            contentStyle,
-          }"
-        >
-          <table
-            :ref="contentRef"
-            :class="styleClass"
-            class="w-full border-collapse"
-            :style="{ tableLayout: 'fixed', ...contentStyle }"
-          >
-            <colgroup>
-              <col v-if="selectable" style="width: 32px" />
-              <col
-                v-for="(col, i) in columns"
-                :key="col.key"
-                :style="colStyles[i]"
-              />
-            </colgroup>
-            <tbody>
-              <tr
-                v-for="item in visibleItems as T[]"
-                :key="rowKey(item)"
-                class="cursor-pointer"
-                :class="[
-                  isActive(item)
-                    ? 'bg-amber-400/15 hover:bg-amber-400/25'
-                    : isSelected(item)
-                      ? 'bg-amber-400/10 hover:bg-amber-400/15'
-                      : 'even:bg-white/5 hover:bg-white/10',
-                ]"
-                @click="onRowClick(item)"
-                @contextmenu="onRowContextMenu(item, $event)"
-              >
-                <td
-                  v-if="selectable"
-                  class="px-2 py-1.5 border-b border-surface-700/50"
-                  @click.stop="toggleSelection(item)"
-                >
-                  <div
-                    class="w-3.5 h-3.5 rounded-sm border cursor-pointer flex items-center justify-center transition-colors"
-                    :class="
-                      isSelected(item)
-                        ? 'bg-amber-500 border-amber-500'
-                        : 'border-surface-600 hover:border-surface-400'
-                    "
-                  >
-                    <i
-                      v-if="isSelected(item)"
-                      class="fas fa-check text-[8px] text-white"
-                    />
-                  </div>
-                </td>
-                <td
-                  v-for="col in columns"
-                  :key="col.key"
-                  class="px-2.5 py-1.5 font-mono text-[13px] font-medium text-surface-200 overflow-hidden text-ellipsis whitespace-nowrap border-b border-surface-700/50"
-                >
-                  <slot
-                    :name="`cell-${col.key}`"
-                    :item="item"
-                    :value="item[col.key]"
-                  >
-                    <span class="truncate block">{{ item[col.key] }}</span>
-                  </slot>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </template>
-      </VirtualScroller>
-    </div>
-  </div>
-</template>

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

@@ -1,36 +0,0 @@
-import type { MenuItem } from "primevue/menuitem";
-declare const _default: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{}>>, never>, never> & {
-        items: T[];
-        selected: T[];
-        columns: {
-            key: string;
-            header: string;
-            width: string;
-            sortable?: boolean;
-            sortType?: "string" | "number" | "date";
-        }[];
-        rowKey: (item: T) => string;
-        activeKey?: string;
-        emptyMessage?: string;
-        selectable?: boolean;
-        scrollKey?: string;
-        contextMenu?: MenuItem[];
-        resizable?: boolean;
-    } & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {
-        [x: string]: ((props: {
-            item: any;
-            value: any;
-        }) => any) | undefined;
-    };
-    emit: ((evt: "row-click", item: T) => void) & ((evt: "row-contextmenu", item: T, event: MouseEvent) => void) & ((evt: "update:selected", value: T[]) => void);
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};