@nvent-addon/app 0.4.5

package/dist/runtime/app/components/FlowStepSelector.vue

@@ -0,0 +1,238 @@
+<template>
+  <div :class="ui.root">
+    <button
+      v-for="item in items"
+      :key="item.value"
+      type="button"
+      :class="itemClasses(item)"
+      @click="$emit('update:modelValue', item.value)"
+    >
+      <!-- Status Icon or All Icon -->
+      <div
+        class="flex-shrink-0"
+        :class="item.step.showAllIndicator ? '' : 'mt-0.5'"
+      >
+        <div
+          v-if="item.step.showAllIndicator"
+          class="w-6 h-6 rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-800"
+        >
+          <UIcon
+            name="i-lucide-layers"
+            class="w-3 h-3 text-gray-600 dark:text-gray-400"
+          />
+        </div>
+        <div
+          v-else
+          class="w-8 h-8 rounded-full flex items-center justify-center"
+          :class="getStepStatusBg(item.step.status)"
+        >
+          <UIcon
+            :name="getStepStatusIcon(item.step.status)"
+            class="w-4 h-4"
+            :class="getStepStatusIconColor(item.step.status)"
+          />
+        </div>
+      </div>
+
+      <!-- Step Details -->
+      <div class="flex-1 min-w-0 ml-3">
+        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+          {{ item.step.key }}
+        </h4>
+        <div
+          v-if="!item.step.showAllIndicator"
+          class="flex items-center gap-3 mt-1 text-xs text-gray-500"
+        >
+          <span
+            class="capitalize"
+            :class="getStepStatusTextColor(item.step.status)"
+          >
+            {{ item.step.status || "pending" }}
+          </span>
+          <span v-if="item.step.attempt && item.step.attempt > 1">
+            Attempt {{ item.step.attempt }}
+          </span>
+        </div>
+        <div
+          v-else
+          class="mt-1 text-xs text-gray-500"
+        >
+          Show all events from all steps
+        </div>
+
+        <!-- Additional Details (from description slot) -->
+        <div
+          v-if="!item.step.showAllIndicator && (item.step.startedAt || item.step.completedAt || item.step.error || item.step.awaitType)"
+          class="mt-3"
+        >
+          <!-- Timing Info -->
+          <div
+            v-if="item.step.startedAt || item.step.completedAt"
+            class="flex items-center gap-4 text-xs text-gray-500"
+          >
+            <div
+              v-if="item.step.startedAt"
+              class="flex items-center gap-1"
+            >
+              <UIcon
+                name="i-lucide-clock"
+                class="w-3 h-3"
+              />
+              <span>{{ formatTime(item.step.startedAt) }}</span>
+            </div>
+            <div
+              v-if="item.step.completedAt"
+              class="flex items-center gap-1"
+            >
+              <UIcon
+                name="i-lucide-check-circle"
+                class="w-3 h-3"
+              />
+              <span>{{ formatTime(item.step.completedAt) }}</span>
+            </div>
+          </div>
+
+          <!-- Error Message -->
+          <div
+            v-if="item.step.error"
+            class="mt-2"
+          >
+            <div
+              class="p-2 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/30 rounded text-xs text-red-600 dark:text-red-400"
+              :title="String(item.step.error || '')"
+            >
+              <div class="flex items-start gap-1">
+                <UIcon
+                  name="i-lucide-alert-circle"
+                  class="w-3 h-3 flex-shrink-0 mt-0.5"
+                />
+                <p class="line-clamp-2 break-all">
+                  {{ item.step.error }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Await Info -->
+          <div
+            v-if="item.step.awaitType"
+            class="mt-2 p-2 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-900/30 rounded text-xs text-blue-600 dark:text-blue-400"
+          >
+            <div class="flex items-center gap-1">
+              <UIcon
+                name="i-lucide-timer"
+                class="w-3 h-3"
+              />
+              <span>Waiting: {{ item.step.awaitType }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+import { twMerge } from "tailwind-merge";
+import { UIcon } from "#components";
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  items: { type: Array, required: true },
+  ui: { type: Object, required: false }
+});
+defineEmits(["update:modelValue"]);
+const defaultUi = {
+  root: "space-y-3",
+  itemBase: "w-full flex items-start border rounded-lg text-sm p-3.5 transition-colors text-left hover:bg-gray-50 dark:hover:bg-gray-900/50",
+  item: "border-gray-200 dark:border-gray-800",
+  itemSelected: "border-primary bg-primary/5 dark:bg-primary/10"
+};
+const ui = computed(() => ({
+  root: twMerge(defaultUi.root, props.ui?.root),
+  itemBase: twMerge(defaultUi.itemBase, props.ui?.itemBase),
+  item: props.ui?.item || defaultUi.item,
+  itemSelected: props.ui?.itemSelected || defaultUi.itemSelected
+}));
+const itemVariants = computed(() => tv({
+  base: ui.value.itemBase,
+  variants: {
+    selected: {
+      true: ui.value.itemSelected,
+      false: ui.value.item
+    }
+  }
+}));
+const itemClasses = (item) => {
+  return itemVariants.value({
+    selected: props.modelValue === item.value
+  });
+};
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp);
+  const now = /* @__PURE__ */ new Date();
+  const diff = now.getTime() - date.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (days > 0)
+    return `${days}d ago`;
+  if (hours > 0)
+    return `${hours}h ago`;
+  if (minutes > 0)
+    return `${minutes}m ago`;
+  if (seconds > 10)
+    return `${seconds}s ago`;
+  return "just now";
+};
+const getStepStatusBg = (status) => {
+  switch (status) {
+    case "completed":
+      return "bg-emerald-50 dark:bg-emerald-900/20";
+    case "failed":
+      return "bg-red-50 dark:bg-red-900/20";
+    case "running":
+      return "bg-blue-50 dark:bg-blue-900/20";
+    default:
+      return "bg-gray-50 dark:bg-gray-900/20";
+  }
+};
+const getStepStatusIcon = (status) => {
+  switch (status) {
+    case "completed":
+      return "i-lucide-check-circle";
+    case "failed":
+      return "i-lucide-x-circle";
+    case "running":
+      return "i-lucide-loader-circle";
+    default:
+      return "i-lucide-circle";
+  }
+};
+const getStepStatusIconColor = (status) => {
+  switch (status) {
+    case "completed":
+      return "text-emerald-600 dark:text-emerald-400";
+    case "failed":
+      return "text-red-600 dark:text-red-400";
+    case "running":
+      return "text-blue-600 dark:text-blue-400 animate-spin";
+    default:
+      return "text-gray-400";
+  }
+};
+const getStepStatusTextColor = (status) => {
+  switch (status) {
+    case "completed":
+      return "text-emerald-600 dark:text-emerald-400";
+    case "failed":
+      return "text-red-600 dark:text-red-400";
+    case "running":
+      return "text-blue-600 dark:text-blue-400";
+    default:
+      return "text-gray-500";
+  }
+};
+</script>

package/dist/runtime/app/components/FlowStepSelector.vue.d.ts

@@ -0,0 +1,22 @@
+import type { ClassValue } from 'tailwind-variants';
+type __VLS_Props = {
+    modelValue: string;
+    items: Array<{
+        value: string;
+        label: string;
+        step: any;
+    }>;
+    ui?: {
+        root?: ClassValue;
+        item?: ClassValue;
+        itemSelected?: ClassValue;
+        itemBase?: ClassValue;
+    };
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/JobScheduling.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    queue: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/JobScheduling.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex justify-end">
+      <Button
+        icon="i-heroicons-clock"
+        color="neutral"
+        variant="outline"
+        @click="jobSchedulerEditor = !jobSchedulerEditor"
+      >
+        Job Scheduler
+      </Button>
+    </div>
+    <UForm
+      :schema="schema"
+      :state="state"
+      @submit="onSubmit"
+    >
+      <UCard
+        v-if="jobSchedulerEditor"
+        :ui="{
+  body: 'space-y-6'
+}"
+      >
+        <UFormField
+          label="Name"
+          name="name"
+        >
+          <UInput
+            v-model="state.name"
+            placeholder="Name"
+            class="w-full"
+          />
+        </UFormField>
+        <UTabs
+          v-model="state.scheduleType"
+          :items="scheduleInputTypes"
+          size="xs"
+          default-value="every"
+          variant="pill"
+          color="neutral"
+          :ui="{
+  list: 'w-28 self-start',
+  content: 'w-full'
+}"
+        >
+          <template #content="{ item }">
+            <UFormField name="scheduleValue">
+              <UInput
+                v-if="item.value === 'every'"
+                v-model="state.scheduleValue"
+                class="w-full"
+                type="number"
+              />
+              <UInput
+                v-if="item.value === 'cron'"
+                v-model="state.scheduleValue"
+                class="w-full"
+                type="string"
+              />
+            </UFormField>
+          </template>
+        </UTabs>
+        <div>
+          <div class="text-sm font-bold mb-2">
+            Job
+          </div>
+          <div class="flex flex-col space-y-2 p-2 rounded-sm ring-1 ring-gray-200 dark:ring-gray-800 shadow">
+            <UFormField
+              label="Name"
+              name="jobName"
+            >
+              <UInput
+                v-model="state.jobName"
+                placeholder="Job Name"
+                class="w-full"
+              />
+            </UFormField>
+            <UFormField
+              label="Data"
+              name="jobData"
+            >
+              <JsonEditorVue
+                v-model="state.jobData"
+                :main-menu-bar="false"
+                mode="text"
+              />
+            </UFormField>
+          </div>
+        </div>
+        <template #footer>
+          <div class="flex justify-end">
+            <Button
+              type="submit"
+              color="neutral"
+              variant="outline"
+              class="cursor-pointer"
+            >
+              Create
+            </Button>
+          </div>
+        </template>
+      </UCard>
+    </UForm>
+    <div>
+      <div
+        v-if="scheduler && scheduler.length > 0"
+        class="space-y-4"
+      >
+        <div
+          v-for="item of scheduler"
+          :key="item.key"
+          class="flex flex-col rounded-sm ring-1 ring-gray-200 dark:ring-gray-800 shadow p-4"
+        >
+          <div class="flex justify-end">
+            <Button
+              icon="i-heroicons-x-circle"
+              color="error"
+              variant="outline"
+              class="cursor-pointer"
+              @click="deleteScheduledJob(item.key)"
+            />
+          </div>
+          <div>
+            <span class="text-sm font-bold">Name:</span> {{ item.key }}
+          </div>
+          <div>
+            <span class="text-sm font-bold">Next schedule:</span> {{
+              new Date(item.next).toLocaleString("de", {
+  day: "numeric",
+  month: "short",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hour12: false
+})
+            }}
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <UAlert
+          color="info"
+          title="No scheduled jobs"
+          variant="subtle"
+          icon="i-heroicons-information-circle"
+          class="flex items-center space-x-2"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { z } from "zod";
+import { ref, useFetch } from "#imports";
+const props = defineProps({
+  queue: { type: String, required: true }
+});
+const jobSchedulerEditor = ref(false);
+const scheduleInputTypes = [
+  { label: "Every", value: "every" },
+  { label: "Cron", value: "cron" }
+];
+const {
+  data: scheduler,
+  refresh
+} = await useFetch(`/api/_queue/${props.queue}/job/scheduler`, {
+  method: "GET"
+});
+const state = ref({
+  name: void 0,
+  scheduleType: "every",
+  scheduleValue: void 0,
+  jobName: void 0,
+  jobData: void 0
+});
+const schema = z.object({
+  name: z.string().regex(/^\S*$/gm, "No spaces allowed"),
+  scheduleType: z.enum(["every", "cron"]),
+  scheduleValue: z.any(),
+  jobName: z.string().regex(/^\S*$/gm, "No spaces allowed"),
+  jobData: z.string().default("{}")
+});
+async function onSubmit(event) {
+  await $fetch(`/api/_queue/${props.queue}/job/scheduler`, {
+    method: "POST",
+    body: {
+      name: event.data.name,
+      scheduleType: event.data.scheduleType,
+      scheduleValue: event.data.scheduleValue,
+      jobName: event.data.jobName,
+      jobData: JSON.stringify(event.data.jobData)
+    }
+  });
+  refresh();
+}
+const deleteScheduledJob = async (id) => {
+  await $fetch(`/api/_queue/${props.queue}/job/scheduler/${id}`, {
+    method: "DELETE"
+  });
+  refresh();
+};
+</script>

package/dist/runtime/app/components/JobScheduling.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    queue: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ListItem.d.vue.ts

@@ -0,0 +1,23 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    title?: string;
+    link: string;
+    origin?: string | null;
+    dropdown?: DropdownMenuItem[];
+};
+declare var __VLS_24: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    origin: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/ListItem.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    :to="link"
+    class="rounded-lg divide-y divide-gray-200 dark:divide-gray-800 ring-1 ring-gray-200 dark:ring-gray-800 shadow bg-white dark:bg-gray-900"
+  >
+    <div class="px-4 py-5 sm:p-6">
+      <div class="flex flex-col md:flex-row">
+        <div class="flex-none flex flex-col justify-between space-y-2">
+          <ULink
+            class="inline-flex items-center gap-1"
+            @click="push(link)"
+          >
+            <span class="text-lg font-semibold">{{ title }}</span>
+            <UIcon
+              name="i-heroicons-arrow-up-right"
+              class="w-5 h-5 text-primary-500"
+            />
+          </ULink>
+          <div class="flex flex-wrap items-center gap-2">
+            <div class="inline-flex gap-1 items-center">
+              <UIcon
+                name="i-heroicons-check-circle"
+                class="w-4 h-4 text-green-500"
+              />
+              <span class="text-sm">Active</span>
+            </div>
+            <UBadge
+              v-if="origin"
+              size="sm"
+              color="neutral"
+            >
+              <span v-if="origin === 'local'">Local</span>
+              <span v-if="origin === 'remote'">Remote</span>
+            </UBadge>
+          </div>
+        </div>
+        <div class="grow pr-12">
+          <div class="flex flex-row gap-4 justify-end">
+            <slot />
+          </div>
+        </div>
+        <div class="flex-none">
+          <div class="flex gap-2 items-center">
+            <UDropdownMenu
+              :items="dropdown"
+            >
+              <UButton
+                icon="i-heroicons-ellipsis-vertical"
+                color="neutral"
+                variant="outline"
+              />
+            </UDropdownMenu>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useComponentRouter } from "#imports";
+import { ULink, UDropdownMenu, UButton, UIcon, UBadge } from "#components";
+defineProps({
+  title: { type: String, required: false, default: "" },
+  link: { type: String, required: true },
+  origin: { type: [String, null], required: false, default: null },
+  dropdown: { type: Array, required: false }
+});
+const { push } = useComponentRouter();
+</script>

package/dist/runtime/app/components/ListItem.vue.d.ts

@@ -0,0 +1,23 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    title?: string;
+    link: string;
+    origin?: string | null;
+    dropdown?: DropdownMenuItem[];
+};
+declare var __VLS_24: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    origin: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/QueueConfigDetails.d.vue.ts

@@ -0,0 +1,45 @@
+interface QueueConfig {
+    name?: string;
+    prefix?: string;
+    limiter?: {
+        max?: number;
+        duration?: number;
+        groupKey?: string;
+    };
+    defaultJobOptions?: {
+        attempts?: number;
+        backoff?: {
+            type?: string;
+            delay?: number;
+        };
+        priority?: number;
+        timeout?: number;
+        removeOnComplete?: boolean | number;
+        removeOnFail?: boolean | number;
+    };
+}
+interface WorkerConfig {
+    concurrency?: number;
+    lockDurationMs?: number;
+    maxStalledCount?: number;
+    drainDelayMs?: number;
+    pollingIntervalMs?: number;
+    autorun?: boolean;
+}
+interface Props {
+    queueName: string;
+    queueConfig?: QueueConfig;
+    workerConfig?: WorkerConfig;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;