@nvent-addon/app 0.4.5 → 0.5.0

package/dist/runtime/app/components/trigger/BasicInfoCard.vue

@@ -0,0 +1,168 @@
+<template>
+  <component :is="noCard ? 'div' : UCard">
+    <template
+      v-if="!noCard"
+      #header
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-info"
+          class="w-5 h-5 text-blue-500"
+        />
+        <h2 class="text-lg font-semibold">
+          Basic Information
+        </h2>
+      </div>
+    </template>
+
+    <UForm
+      nested
+      :schema="schema"
+      :class="noCard ? 'space-y-6' : 'space-y-4'"
+    >
+      <UFormField
+        name="name"
+        label="Trigger Name"
+        required
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">{{ isEdit ? "Cannot be changed after creation" : "Use lowercase letters, numbers, and hyphens only" }}</span>
+        </template>
+        <UInput
+          v-model="formState.name"
+          :placeholder="formState.name ? 'my-trigger' : 'e.g., user-signup-trigger'"
+          :disabled="isEdit"
+          icon="i-lucide-tag"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField
+        name="displayName"
+        label="Display Name"
+        required
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Human-readable name shown in the UI</span>
+        </template>
+        <UInput
+          v-model="formState.displayName"
+          :placeholder="formState.displayName || 'e.g., User Signup Trigger'"
+          icon="i-lucide-type"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField
+        name="description"
+        label="Description"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Optional description of what this trigger does</span>
+        </template>
+        <UTextarea
+          v-model="formState.description"
+          placeholder="Describe what this trigger does..."
+          :rows="3"
+          class="w-full"
+        />
+      </UFormField>
+
+      <UFormField
+        label="Trigger Type"
+        name="type"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Cannot be changed after creation</span>
+        </template>
+        <div class="flex items-center gap-2">
+          <UIcon
+            :name="getTriggerIcon(formState.type)"
+            class="w-5 h-5"
+            :class="getTriggerIconColor(formState.type)"
+          />
+          <UBadge
+            :label="formState.type"
+            :color="getTriggerTypeColor(formState.type)"
+            variant="subtle"
+            size="md"
+          />
+        </div>
+      </UFormField>
+
+      <UFormField
+        label="Scope"
+        name="scope"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Cannot be changed after creation</span>
+        </template>
+        <UBadge
+          :label="formState.scope"
+          color="neutral"
+          variant="subtle"
+          size="md"
+        />
+      </UFormField>
+    </UForm>
+  </component>
+</template>
+
+<script setup>
+import { UCard } from "#components";
+import { z } from "zod";
+const { noCard = false, isEdit = false } = defineProps({
+  noCard: { type: Boolean, required: false },
+  isEdit: { type: Boolean, required: false }
+});
+const formState = defineModel({ type: Object, ...{ required: true } });
+const getTriggerIcon = (type) => {
+  switch (type) {
+    case "event":
+      return "i-lucide-radio";
+    case "webhook":
+      return "i-lucide-webhook";
+    case "schedule":
+      return "i-lucide-clock";
+    case "manual":
+      return "i-lucide-hand";
+    default:
+      return "i-lucide-zap";
+  }
+};
+const getTriggerIconColor = (type) => {
+  switch (type) {
+    case "event":
+      return "text-blue-500";
+    case "webhook":
+      return "text-purple-500";
+    case "schedule":
+      return "text-emerald-500";
+    case "manual":
+      return "text-amber-500";
+    default:
+      return "text-gray-500";
+  }
+};
+const getTriggerTypeColor = (type) => {
+  switch (type) {
+    case "event":
+      return "primary";
+    case "webhook":
+      return "success";
+    case "schedule":
+      return "warning";
+    case "manual":
+      return "neutral";
+    default:
+      return "neutral";
+  }
+};
+const schema = z.object({
+  name: z.string().min(1, "Name is required").regex(/^[a-z0-9-]+$/, "Use lowercase letters, numbers, and hyphens only"),
+  displayName: z.string().min(1, "Display name is required"),
+  description: z.string(),
+  type: z.enum(["event", "webhook", "schedule", "manual"]),
+  scope: z.enum(["flow", "run"])
+});
+</script>

package/dist/runtime/app/components/trigger/BasicInfoCard.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    noCard?: boolean;
+    isEdit?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue: {
+        name: string;
+        displayName: string;
+        description: string;
+        type: 'event' | 'webhook' | 'schedule' | 'manual';
+        scope: 'flow' | 'run';
+    };
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        name: string;
+        displayName: string;
+        description: string;
+        type: "event" | "webhook" | "schedule" | "manual";
+        scope: "flow" | "run";
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        name: string;
+        displayName: string;
+        description: string;
+        type: "event" | "webhook" | "schedule" | "manual";
+        scope: "flow" | "run";
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{FlowSchedulesList.d.vue.ts → trigger/DangerZone.d.vue.ts}

@@ -1,12 +1,10 @@
 type __VLS_Props = {
-    flowName: string;
+    isDeleting: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    loadSchedules: () => Promise<void>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    updated: () => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdated?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/trigger/DangerZone.vue

@@ -0,0 +1,46 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-alert-triangle"
+          class="w-5 h-5 text-red-500"
+        />
+        <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">
+          Danger Zone
+        </h2>
+      </div>
+    </template>
+
+    <div class="space-y-4">
+      <div class="flex items-start justify-between p-4 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg">
+        <div>
+          <h3 class="font-semibold text-red-900 dark:text-red-100">
+            Delete this trigger
+          </h3>
+          <p class="text-sm text-red-700 dark:text-red-300 mt-1">
+            Once deleted, this trigger cannot be recovered. All subscriptions will be removed.
+          </p>
+        </div>
+        <UButton
+          color="error"
+          variant="outline"
+          :loading="isDeleting"
+          @click="$emit('delete')"
+        >
+          <template #leading>
+            <UIcon name="i-lucide-trash-2" />
+          </template>
+          Delete
+        </UButton>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup>
+defineProps({
+  isDeleting: { type: Boolean, required: true }
+});
+defineEmits(["delete"]);
+</script>

package/dist/runtime/app/components/{FlowSchedulesList.vue.d.ts → trigger/DangerZone.vue.d.ts}

@@ -1,12 +1,10 @@
 type __VLS_Props = {
-    flowName: string;
+    isDeleting: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    loadSchedules: () => Promise<void>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    updated: () => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdated?: (() => any) | undefined;
+    onDelete?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/trigger/EditHeader.d.vue.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    isSaving: boolean;
+    hasChanges: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    back: () => any;
+    save: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/trigger/EditHeader.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="border-b border-gray-200 dark:border-gray-800 px-6 py-4 bg-white dark:bg-gray-900 shrink-0">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <UButton
+          icon="i-lucide-arrow-left"
+          size="sm"
+          color="neutral"
+          variant="ghost"
+          @click="$emit('back')"
+        />
+        <div>
+          <h1 class="text-xl font-semibold flex items-center gap-2">
+            <UIcon
+              name="i-lucide-pencil"
+              class="w-5 h-5 text-blue-500"
+            />
+            <span>Edit Trigger</span>
+          </h1>
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">
+            Modify trigger configuration and subscriptions
+          </p>
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          @click="$emit('cancel')"
+        >
+          Cancel
+        </UButton>
+        <UButton
+          color="primary"
+          :loading="isSaving"
+          :disabled="!hasChanges"
+          @click="$emit('save')"
+        >
+          <template #leading>
+            <UIcon name="i-lucide-save" />
+          </template>
+          Save Changes
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isSaving: { type: Boolean, required: true },
+  hasChanges: { type: Boolean, required: true }
+});
+defineEmits(["back", "cancel", "save"]);
+</script>

package/dist/runtime/app/components/trigger/EditHeader.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    isSaving: boolean;
+    hasChanges: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    back: () => any;
+    save: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onBack?: (() => any) | undefined;
+    onSave?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/trigger/EventConfig.d.vue.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    noCard?: boolean;
+    name?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: {
+        event: string;
+        filter: string;
+    };
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        event: string;
+        filter: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        event: string;
+        filter: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/trigger/EventConfig.vue

@@ -0,0 +1,68 @@
+<template>
+  <component :is="noCard ? 'div' : UCard">
+    <template
+      v-if="!noCard"
+      #header
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-radio"
+          class="w-5 h-5 text-blue-500"
+        />
+        <h2 class="text-lg font-semibold">
+          Event Configuration
+        </h2>
+      </div>
+    </template>
+
+    <UForm
+      nested
+      :name="name"
+      :schema="schema"
+      :class="noCard ? 'space-y-6' : 'space-y-4'"
+    >
+      <UFormField
+        label="Event Name"
+        name="event"
+        required
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">The event type to listen for</span>
+        </template>
+        <UInput
+          v-model="config.event"
+          placeholder="user.created"
+          icon="i-lucide-radio"
+        />
+      </UFormField>
+
+      <UFormField
+        label="Event Filter (JSON)"
+        name="filter"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Optional JSON filter to match specific event payloads</span>
+        </template>
+        <UTextarea
+          v-model="config.filter"
+          placeholder="{&quot;status&quot;: &quot;active&quot;}"
+          :rows="4"
+        />
+      </UFormField>
+    </UForm>
+  </component>
+</template>
+
+<script setup>
+import { UCard } from "#components";
+import { z } from "zod";
+const { noCard = false, name = "config" } = defineProps({
+  noCard: { type: Boolean, required: false },
+  name: { type: String, required: false }
+});
+const config = defineModel({ type: Object, ...{ required: true } });
+const schema = z.object({
+  event: z.string().min(1, "Event name is required"),
+  filter: z.string().optional()
+});
+</script>

package/dist/runtime/app/components/trigger/EventConfig.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    noCard?: boolean;
+    name?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: {
+        event: string;
+        filter: string;
+    };
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        event: string;
+        filter: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        event: string;
+        filter: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/trigger/FlowSubscriptions.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    subscriptions: string[];
+    flows: Array<{
+        name?: string;
+        id?: string;
+    }> | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (flowName: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((flowName: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/trigger/FlowSubscriptions.vue

@@ -0,0 +1,128 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-git-branch"
+          class="w-5 h-5 text-purple-500"
+        />
+        <h2 class="text-lg font-semibold">
+          Flow Subscriptions
+        </h2>
+        <UBadge
+          :label="subscriptions.length.toString()"
+          color="primary"
+          variant="subtle"
+          size="sm"
+        />
+      </div>
+    </template>
+
+    <div class="space-y-4">
+      <UFormField
+        label="Search Flows"
+        name="flowSearch"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Select flows that should be triggered by this trigger</span>
+        </template>
+        <UInput
+          v-model="searchQuery"
+          placeholder="Search flows..."
+          icon="i-lucide-search"
+        />
+      </UFormField>
+
+      <div
+        v-if="filteredFlows.length > 0"
+        class="max-h-64 overflow-y-auto space-y-2 border border-gray-200 dark:border-gray-800 rounded-lg p-3"
+      >
+        <div
+          v-for="flow in filteredFlows"
+          :key="getFlowId(flow)"
+          class="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-900/50 rounded-lg transition-colors"
+        >
+          <div class="flex items-center gap-2 min-w-0">
+            <UIcon
+              name="i-lucide-git-branch"
+              class="w-4 h-4 text-blue-500 shrink-0"
+            />
+            <span class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ getFlowId(flow) }}</span>
+          </div>
+          <ClientOnly>
+            <UCheckbox
+              :model-value="isFlowSubscribed(getFlowId(flow))"
+              @update:model-value="$emit('toggle', getFlowId(flow))"
+            />
+          </ClientOnly>
+        </div>
+      </div>
+
+      <div
+        v-else
+        class="text-center py-8 text-gray-500 dark:text-gray-400"
+      >
+        <UIcon
+          name="i-lucide-search-x"
+          class="w-8 h-8 mx-auto mb-2 opacity-50"
+        />
+        <p class="text-sm">
+          No flows found
+        </p>
+      </div>
+
+      <!-- Selected Flows -->
+      <div
+        v-if="subscriptions.length > 0"
+        class="space-y-2"
+      >
+        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+          Selected Flows ({{ subscriptions.length }})
+        </label>
+        <div class="flex flex-wrap gap-2">
+          <UBadge
+            v-for="flowName in subscriptions"
+            :key="flowName"
+            :label="flowName"
+            color="primary"
+            variant="subtle"
+            size="md"
+          >
+            <template #trailing>
+              <UButton
+                icon="i-lucide-x"
+                size="2xs"
+                color="neutral"
+                variant="ghost"
+                square
+                @click="$emit('toggle', flowName)"
+              />
+            </template>
+          </UBadge>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup>
+import { ref, computed } from "#imports";
+const props = defineProps({
+  subscriptions: { type: Array, required: true },
+  flows: { type: [Array, null], required: true }
+});
+defineEmits(["toggle"]);
+const searchQuery = ref("");
+const getFlowId = (flow) => flow.id || flow.name || "";
+const filteredFlows = computed(() => {
+  if (!props.flows) return [];
+  const query = searchQuery.value.toLowerCase();
+  return props.flows.filter((flow) => {
+    const flowId = getFlowId(flow);
+    return flowId.toLowerCase().includes(query);
+  });
+});
+const isFlowSubscribed = (flowName) => {
+  return props.subscriptions.includes(flowName);
+};
+</script>

package/dist/runtime/app/components/trigger/FlowSubscriptions.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    subscriptions: string[];
+    flows: Array<{
+        name?: string;
+        id?: string;
+    }> | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: (flowName: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((flowName: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/trigger/ScheduleConfig.d.vue.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    noCard?: boolean;
+    name?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: {
+        cron?: string;
+        interval?: number;
+        timezone: string;
+    };
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        cron?: string;
+        interval?: number;
+        timezone: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        cron?: string;
+        interval?: number;
+        timezone: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;