@caido-utils/components 0.1.0

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

@@ -0,0 +1,64 @@
+type __VLS_Props = {
+    title: string;
+    width: string;
+    showBack?: boolean;
+    showFooter?: boolean;
+    actionLabel?: string;
+    actionIcon?: string;
+    actionDisabled?: boolean;
+    actionLoading?: boolean;
+    cancelLabel?: string;
+    contentClass?: string;
+};
+declare var __VLS_26: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    footer?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>>>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+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/Dialog/Container.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+
+withDefaults(
+  defineProps<{
+    title: string;
+    width: string;
+    showBack?: boolean;
+    showFooter?: boolean;
+    actionLabel?: string;
+    actionIcon?: string;
+    actionDisabled?: boolean;
+    actionLoading?: boolean;
+    cancelLabel?: string;
+    contentClass?: string;
+  }>(),
+  {
+    showBack: false,
+    showFooter: true,
+    actionLabel: "Confirm",
+    actionDisabled: false,
+    actionLoading: false,
+    cancelLabel: "Cancel",
+  },
+);
+
+const emit = defineEmits<{
+  close: [];
+  back: [];
+  action: [];
+}>();
+</script>
+
+<template>
+  <Dialog
+    :visible="true"
+    modal
+    :closable="false"
+    :style="{ width }"
+    :content-class="contentClass"
+    @update:visible="emit('close')"
+  >
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <div class="flex items-center gap-3">
+          <Button
+            v-if="showBack"
+            icon="fas fa-arrow-left"
+            text
+            severity="secondary"
+            size="small"
+            @click="emit('back')"
+          />
+          <span class="font-semibold text-lg">{{ title }}</span>
+        </div>
+        <Button
+          icon="fas fa-times"
+          text
+          severity="secondary"
+          size="small"
+          @click="emit('close')"
+        />
+      </div>
+    </template>
+
+    <slot />
+
+    <template v-if="showFooter" #footer>
+      <slot name="footer">
+        <div class="flex justify-end gap-2">
+          <Button
+            :label="cancelLabel"
+            severity="secondary"
+            text
+            @click="emit('close')"
+          />
+          <Button
+            :label="actionLabel"
+            :icon="actionIcon"
+            :disabled="actionDisabled"
+            :loading="actionLoading"
+            @click="emit('action')"
+          />
+        </div>
+      </slot>
+    </template>
+  </Dialog>
+</template>

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

@@ -0,0 +1,64 @@
+type __VLS_Props = {
+    title: string;
+    width: string;
+    showBack?: boolean;
+    showFooter?: boolean;
+    actionLabel?: string;
+    actionIcon?: string;
+    actionDisabled?: boolean;
+    actionLoading?: boolean;
+    cancelLabel?: string;
+    contentClass?: string;
+};
+declare var __VLS_26: {}, __VLS_28: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    footer?: (props: typeof __VLS_28) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}>>>, {
+    showBack: boolean;
+    showFooter: boolean;
+    actionLabel: string;
+    actionDisabled: boolean;
+    actionLoading: boolean;
+    cancelLabel: string;
+}, {}>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+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/HttpqlInput/Container.d.vue.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    modelValue: string;
+    placeholder?: string;
+    loading?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    placeholder: string;
+    loading: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    placeholder: string;
+    loading: boolean;
+}>>>, {
+    placeholder: string;
+    loading: boolean;
+}, {}>;
+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/HttpqlInput/Container.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue";
+import {
+  getSuggestions,
+  tokenize,
+  type SuggestionItem,
+  type TokenType,
+} from "./suggestions";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    placeholder?: string;
+    loading?: boolean;
+  }>(),
+  {
+    placeholder: "Enter an HTTPQL query...",
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  submit: [];
+}>();
+
+const inputRef = ref<HTMLInputElement>();
+const cursorPos = ref(0);
+const highlightedIndex = ref(0);
+const showSuggestions = ref(false);
+
+const context = computed(() =>
+  getSuggestions(props.modelValue, cursorPos.value),
+);
+
+const filtered = computed(() => context.value.items);
+const category = computed(() => context.value.category);
+
+const tokens = computed(() => tokenize(props.modelValue));
+
+const TOKEN_COLORS: Record<TokenType, string> = {
+  field: "text-[#90C191]",
+  operator: "text-[#FEC418]",
+  value: "text-[#CE9178]",
+  logical: "text-surface-100",
+  paren: "text-surface-100",
+  text: "text-surface-100",
+};
+
+function updateCursor() {
+  cursorPos.value = inputRef.value?.selectionStart ?? props.modelValue.length;
+}
+
+function onInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  emit("update:modelValue", target.value);
+  nextTick(() => {
+    updateCursor();
+    highlightedIndex.value = 0;
+    showSuggestions.value = filtered.value.length > 0;
+  });
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (!showSuggestions.value || filtered.value.length === 0) {
+    if (e.key === "Enter") {
+      emit("submit");
+    }
+    return;
+  }
+
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      highlightedIndex.value =
+        (highlightedIndex.value + 1) % filtered.value.length;
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      highlightedIndex.value =
+        (highlightedIndex.value - 1 + filtered.value.length) %
+        filtered.value.length;
+      break;
+    case "Tab":
+    case "Enter":
+      e.preventDefault();
+      acceptSuggestion(filtered.value[highlightedIndex.value]!);
+      break;
+    case "Escape":
+      e.preventDefault();
+      showSuggestions.value = false;
+      break;
+  }
+}
+
+function acceptSuggestion(item: SuggestionItem) {
+  const { partial, suffix } = context.value;
+  const before = props.modelValue.slice(0, cursorPos.value - partial.length);
+  const after = props.modelValue.slice(cursorPos.value);
+  const inserted = item.value + suffix;
+  const newValue = before + inserted + after;
+  const newCursor = before.length + inserted.length;
+
+  emit("update:modelValue", newValue);
+  showSuggestions.value = false;
+  highlightedIndex.value = 0;
+
+  nextTick(() => {
+    if (inputRef.value) {
+      inputRef.value.selectionStart = newCursor;
+      inputRef.value.selectionEnd = newCursor;
+      inputRef.value.focus();
+      cursorPos.value = newCursor;
+      // Re-evaluate suggestions after accepting (e.g. after namespace. show fields)
+      const ctx = getSuggestions(newValue, newCursor);
+      if (ctx.items.length > 0) {
+        showSuggestions.value = true;
+      }
+    }
+  });
+}
+
+function onFocus() {
+  updateCursor();
+  if (filtered.value.length > 0) {
+    showSuggestions.value = true;
+  }
+}
+
+function onBlur() {
+  // Delay to allow click on suggestion item
+  setTimeout(() => {
+    showSuggestions.value = false;
+  }, 150);
+}
+
+function onClick() {
+  nextTick(() => {
+    updateCursor();
+    highlightedIndex.value = 0;
+    showSuggestions.value = filtered.value.length > 0;
+  });
+}
+
+function onScroll() {
+  const overlay = inputRef.value?.previousElementSibling as HTMLElement | null;
+  if (overlay && inputRef.value) {
+    overlay.scrollLeft = inputRef.value.scrollLeft;
+  }
+}
+</script>
+
+<template>
+  <div class="relative">
+    <div
+      class="relative overflow-hidden rounded border border-surface-600 bg-surface-950 focus-within:border-surface-400 transition-colors"
+    >
+      <!-- Colored overlay -->
+      <div
+        class="absolute inset-0 px-3 py-1.5 text-sm font-mono whitespace-pre pointer-events-none overflow-hidden"
+        aria-hidden="true"
+      >
+        <span
+          v-for="(token, i) in tokens"
+          :key="i"
+          :class="TOKEN_COLORS[token.type]"
+          >{{ token.text }}</span
+        >
+      </div>
+      <!-- Actual input (transparent text, visible caret) -->
+      <input
+        ref="inputRef"
+        :value="modelValue"
+        :placeholder="placeholder"
+        type="text"
+        autocomplete="off"
+        spellcheck="false"
+        :class="[
+          'relative w-full bg-transparent py-1.5 pl-3 text-sm font-mono text-transparent caret-surface-100 placeholder-surface-500 outline-none',
+          loading ? 'pr-8' : 'pr-3',
+        ]"
+        @input="onInput"
+        @keydown="onKeydown"
+        @focus="onFocus"
+        @blur="onBlur"
+        @click="onClick"
+        @scroll="onScroll"
+      />
+      <i
+        v-if="loading"
+        class="fas fa-circle-notch animate-spin absolute right-2.5 top-1/2 mt-[-6px] text-surface-400 text-xs pointer-events-none"
+      />
+    </div>
+    <div
+      v-if="showSuggestions && filtered.length > 0"
+      class="absolute left-0 right-0 top-full mt-1 z-50 border border-surface-600 rounded bg-surface-950 shadow-lg text-sm font-mono overflow-hidden"
+    >
+      <div
+        v-if="category"
+        class="px-3 py-1 text-xs text-surface-400 bg-surface-800 border-b border-surface-700"
+      >
+        {{ category }}
+      </div>
+      <ul class="max-h-48 overflow-y-auto">
+        <li
+          v-for="(item, index) in filtered"
+          :key="item.value"
+          class="flex items-center gap-2 px-3 py-1 cursor-pointer transition-colors"
+          :class="
+            index === highlightedIndex
+              ? 'bg-white/15 text-surface-100'
+              : 'text-surface-300 hover:bg-white/10'
+          "
+          @mousedown.prevent="acceptSuggestion(item)"
+        >
+          <span class="text-surface-500 text-xs w-3 shrink-0">x</span>
+          <span class="flex-1">{{ item.value }}</span>
+          <span v-if="item.description" class="text-surface-500 text-xs">{{
+            item.description
+          }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    modelValue: string;
+    placeholder?: string;
+    loading?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    placeholder: string;
+    loading: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    placeholder: string;
+    loading: boolean;
+}>>>, {
+    placeholder: string;
+    loading: boolean;
+}, {}>;
+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/HttpqlInput/suggestions.d.ts

@@ -0,0 +1,24 @@
+export type SuggestionItem = {
+    value: string;
+    description?: string;
+};
+export type SuggestionContext = {
+    /** Category label for the dropdown header */
+    category: string;
+    /** Suggestions to show */
+    items: SuggestionItem[];
+    /** The partial text being typed that should be replaced on accept */
+    partial: string;
+    /** Suffix to append after accepting (e.g. "." after namespace, " " after operator) */
+    suffix: string;
+};
+/**
+ * Analyze the query text left of the cursor to determine what suggestions to show.
+ */
+export declare function getSuggestions(query: string, cursorPos: number): SuggestionContext;
+export type TokenType = "field" | "operator" | "value" | "logical" | "paren" | "text";
+export type Token = {
+    type: TokenType;
+    text: string;
+};
+export declare function tokenize(query: string): Token[];