@nvent-addon/app 0.4.5 → 0.5.0

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

@@ -0,0 +1,375 @@
+<template>
+  <component :is="noCard ? 'div' : UCard">
+    <template
+      v-if="!noCard"
+      #header
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-clock"
+          class="w-5 h-5 text-emerald-500"
+        />
+        <h2 class="text-lg font-semibold">
+          Schedule Configuration
+        </h2>
+      </div>
+    </template>
+
+    <UForm
+      nested
+      :name="name"
+      :schema="schema"
+      :class="noCard ? 'space-y-6' : 'space-y-4'"
+    >
+      <!-- Schedule Type Toggle -->
+      <UFormField
+        label="Schedule Type"
+        name="scheduleType"
+      >
+        <URadioGroup
+          v-model="scheduleType"
+          :items="scheduleTypeOptions"
+        />
+      </UFormField>
+
+      <!-- Simple Interval Mode -->
+      <template v-if="scheduleType === 'interval'">
+        <UFormField
+          label="Run Every"
+          name="interval"
+          required
+        >
+          <template #hint>
+            <span class="text-xs text-gray-500">How often should this trigger run?</span>
+          </template>
+          <div class="flex gap-2">
+            <UInput
+              v-model="intervalValue"
+              type="number"
+              min="1"
+              placeholder="5"
+              icon="i-lucide-timer"
+              class="flex-1"
+            />
+            <USelectMenu
+              v-model="intervalUnit"
+              :items="intervalUnitOptions"
+              value-key="value"
+              class="w-32"
+            />
+          </div>
+        </UFormField>
+      </template>
+
+      <!-- Simple Preset Mode -->
+      <template v-if="scheduleType === 'preset'">
+        <UFormField
+          label="Schedule Preset"
+          name="preset"
+          required
+        >
+          <template #hint>
+            <span class="text-xs text-gray-500">Choose a common schedule pattern</span>
+          </template>
+          <USelectMenu
+            v-model="selectedPreset"
+            :items="presetOptions"
+            value-key="value"
+            placeholder="Select a preset"
+            class="w-full"
+          >
+            <template #label>
+              <div
+                v-if="selectedPreset"
+                class="flex items-center gap-2"
+              >
+                <UIcon
+                  :name="selectedPreset.icon"
+                  class="w-4 h-4"
+                />
+                <span>{{ selectedPreset.label }}</span>
+              </div>
+              <span v-else>Select a preset</span>
+            </template>
+            <template #option="{ option }">
+              <div class="flex items-center justify-between gap-2 w-full">
+                <div class="flex items-center gap-2">
+                  <UIcon
+                    :name="option.icon"
+                    class="w-4 h-4"
+                  />
+                  <span>{{ option.label }}</span>
+                </div>
+                <span class="text-xs text-gray-500">{{ option.description }}</span>
+              </div>
+            </template>
+          </USelectMenu>
+        </UFormField>
+      </template>
+
+      <!-- Advanced Cron Mode -->
+      <template v-if="scheduleType === 'cron'">
+        <UFormField
+          label="Cron Expression"
+          name="cron"
+          required
+        >
+          <template #hint>
+            <span class="text-xs text-gray-500">Standard cron format (minute hour day month weekday)</span>
+          </template>
+          <UInput
+            v-model="config.cron"
+            placeholder="0 0 * * *"
+            icon="i-lucide-clock"
+            :hint="cronHint"
+          />
+        </UFormField>
+
+        <div
+          v-if="config.cron"
+          class="p-3 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-900/30 rounded-lg"
+        >
+          <div class="flex items-start gap-2">
+            <UIcon
+              name="i-lucide-info"
+              class="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5"
+            />
+            <div class="text-xs text-blue-600 dark:text-blue-400">
+              <div class="font-medium mb-1">
+                Cron Pattern: {{ config.cron }}
+              </div>
+              <div class="text-blue-500 dark:text-blue-500">
+                {{ cronDescription }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Timezone Selection -->
+      <UFormField
+        label="Timezone"
+        name="timezone"
+        required
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">Select the timezone for this schedule</span>
+        </template>
+        <USelectMenu
+          v-model="config.timezone"
+          :items="timezoneOptions"
+          searchable
+          placeholder="Search timezone..."
+          class="w-full"
+        >
+          <template #label>
+            <div class="flex items-center gap-2">
+              <UIcon
+                name="i-lucide-globe"
+                class="w-4 h-4"
+              />
+              <span>{{ config.timezone }}</span>
+            </div>
+          </template>
+        </USelectMenu>
+      </UFormField>
+    </UForm>
+  </component>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "#imports";
+import { UCard } from "#components";
+import { z } from "zod";
+const { noCard = false, name = "schedule" } = defineProps({
+  noCard: { type: Boolean, required: false },
+  name: { type: String, required: false }
+});
+const config = defineModel({ type: Object, ...{ required: true } });
+const scheduleType = ref("interval");
+const intervalValue = ref(5);
+const intervalUnit = ref("minutes");
+const scheduleTypeOptions = [
+  { value: "interval", label: "Simple Interval", description: "Run every N minutes/hours/days" },
+  { value: "preset", label: "Common Patterns", description: "Daily, weekly, monthly, etc." },
+  { value: "cron", label: "Advanced (Cron)", description: "Custom cron expression" }
+];
+const intervalUnitOptions = [
+  { label: "Seconds", value: "seconds" },
+  { label: "Minutes", value: "minutes" },
+  { label: "Hours", value: "hours" },
+  { label: "Days", value: "days" }
+];
+const presetOptions = [
+  { value: "* * * * *", label: "Every Minute", description: "* * * * *", icon: "i-lucide-clock" },
+  { value: "0 * * * *", label: "Every Hour", description: "0 * * * *", icon: "i-lucide-clock" },
+  { value: "0 0 * * *", label: "Daily at Midnight", description: "0 0 * * *", icon: "i-lucide-sun" },
+  { value: "0 9 * * *", label: "Daily at 9 AM", description: "0 9 * * *", icon: "i-lucide-sunrise" },
+  { value: "0 17 * * *", label: "Daily at 5 PM", description: "0 17 * * *", icon: "i-lucide-sunset" },
+  { value: "0 0 * * 0", label: "Weekly (Sunday)", description: "0 0 * * 0", icon: "i-lucide-calendar" },
+  { value: "0 0 * * 1", label: "Weekly (Monday)", description: "0 0 * * 1", icon: "i-lucide-calendar" },
+  { value: "0 0 1 * *", label: "Monthly (1st)", description: "0 0 1 * *", icon: "i-lucide-calendar-days" },
+  { value: "0 0 1 1 *", label: "Yearly (Jan 1st)", description: "0 0 1 1 *", icon: "i-lucide-calendar-clock" }
+];
+const selectedPreset = ref(presetOptions[0]);
+const timezoneOptions = [
+  "UTC",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Toronto",
+  "America/Mexico_City",
+  "America/Sao_Paulo",
+  "Europe/London",
+  "Europe/Paris",
+  "Europe/Berlin",
+  "Europe/Rome",
+  "Europe/Madrid",
+  "Europe/Amsterdam",
+  "Asia/Tokyo",
+  "Asia/Shanghai",
+  "Asia/Hong_Kong",
+  "Asia/Singapore",
+  "Asia/Dubai",
+  "Asia/Kolkata",
+  "Australia/Sydney",
+  "Australia/Melbourne",
+  "Pacific/Auckland"
+];
+if (config.value.cron) {
+  const matchingPreset = presetOptions.find((p) => p.value === config.value.cron);
+  if (matchingPreset) {
+    scheduleType.value = "preset";
+    selectedPreset.value = matchingPreset;
+  } else {
+    scheduleType.value = "cron";
+  }
+} else if (config.value.interval) {
+  scheduleType.value = "interval";
+  const seconds = config.value.interval;
+  if (seconds % 86400 === 0) {
+    intervalValue.value = seconds / 86400;
+    intervalUnit.value = "days";
+  } else if (seconds % 3600 === 0) {
+    intervalValue.value = seconds / 3600;
+    intervalUnit.value = "hours";
+  } else if (seconds % 60 === 0) {
+    intervalValue.value = seconds / 60;
+    intervalUnit.value = "minutes";
+  } else {
+    intervalValue.value = seconds;
+    intervalUnit.value = "seconds";
+  }
+} else {
+  scheduleType.value = "interval";
+  intervalValue.value = 5;
+  intervalUnit.value = "minutes";
+  config.value.interval = 300;
+  config.value.cron = void 0;
+}
+watch(intervalUnit, (newUnit, oldUnit) => {
+  if (scheduleType.value === "interval" && oldUnit && newUnit !== oldUnit) {
+    const multipliers = {
+      seconds: 1,
+      minutes: 60,
+      hours: 3600,
+      days: 86400
+    };
+    const oldMultiplier = multipliers[oldUnit] || 1;
+    const newMultiplier = multipliers[newUnit] || 1;
+    const currentSeconds = Number(intervalValue.value) * oldMultiplier;
+    const newValue = currentSeconds / newMultiplier;
+    intervalValue.value = Math.max(1, Math.round(newValue * 100) / 100);
+  }
+});
+watch([intervalValue, intervalUnit], () => {
+  if (scheduleType.value === "interval") {
+    const multiplier = {
+      seconds: 1,
+      minutes: 60,
+      hours: 3600,
+      days: 86400
+    }[intervalUnit.value] || 1;
+    const numValue = Number(intervalValue.value) || 1;
+    config.value.interval = numValue * multiplier;
+    config.value.cron = void 0;
+  }
+}, { immediate: false });
+watch(selectedPreset, (newPreset) => {
+  if (scheduleType.value === "preset" && newPreset) {
+    config.value.cron = newPreset.value;
+    config.value.interval = void 0;
+  }
+});
+watch(scheduleType, (newType) => {
+  if (newType === "interval") {
+    const multiplier = {
+      seconds: 1,
+      minutes: 60,
+      hours: 3600,
+      days: 86400
+    }[intervalUnit.value] || 1;
+    config.value.interval = intervalValue.value * multiplier;
+    config.value.cron = void 0;
+  } else if (newType === "preset") {
+    config.value.cron = selectedPreset.value?.value || "0 0 * * *";
+    config.value.interval = void 0;
+  } else if (newType === "cron") {
+    if (!config.value.cron) {
+      config.value.cron = "0 0 * * *";
+    }
+    config.value.interval = void 0;
+  }
+});
+const cronHint = computed(() => {
+  return "Format: minute(0-59) hour(0-23) day(1-31) month(1-12) weekday(0-6)";
+});
+const cronDescription = computed(() => {
+  if (!config.value.cron)
+    return "";
+  const parts = config.value.cron.trim().split(/\s+/);
+  if (parts.length !== 5)
+    return "Invalid cron expression (must have 5 parts)";
+  const [minute = "*", hour = "*", day = "*", month = "*", weekday = "*"] = parts;
+  const descriptions = [];
+  if (minute === "*")
+    descriptions.push("every minute");
+  else if (minute.includes("/"))
+    descriptions.push(`every ${minute.split("/")[1]} minutes`);
+  else descriptions.push(`at minute ${minute}`);
+  if (hour === "*")
+    descriptions.push("of every hour");
+  else if (hour.includes("/"))
+    descriptions.push(`every ${hour.split("/")[1]} hours`);
+  else descriptions.push(`at ${hour}:00`);
+  if (day !== "*") {
+    descriptions.push(`on day ${day}`);
+  }
+  if (month !== "*") {
+    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const monthIndex = Number.parseInt(month) - 1;
+    if (monthIndex >= 0 && monthIndex < 12) {
+      descriptions.push(`in ${months[monthIndex]}`);
+    }
+  }
+  if (weekday !== "*") {
+    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    const dayIndex = Number.parseInt(weekday);
+    if (dayIndex >= 0 && dayIndex < 7) {
+      descriptions.push(`on ${days[dayIndex]}`);
+    }
+  }
+  return descriptions.join(", ");
+});
+const schema = z.object({
+  cron: z.string().optional(),
+  interval: z.number().min(1, "Interval must be at least 1 second").optional(),
+  timezone: z.string().min(1, "Timezone is required"),
+  scheduleType: z.enum(["interval", "preset", "cron"]).optional(),
+  preset: z.string().optional()
+}).refine(
+  (data) => data.cron || data.interval,
+  { message: "Please configure a schedule", path: ["interval"] }
+);
+</script>

package/dist/runtime/app/components/trigger/ScheduleConfig.vue.d.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;

package/dist/runtime/app/components/{FlowScheduleDialog.d.vue.ts → trigger/StatusConfig.d.vue.ts}

@@ -1,16 +1,16 @@
 type __VLS_Props = {
-    flowName: string;
+    status?: 'active' | 'inactive' | 'retired';
+    name?: string;
+    nested?: boolean;
 };
 type __VLS_ModelProps = {
-    modelValue?: boolean;
+    modelValue?: 'active' | 'inactive' | 'retired';
 };
 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: boolean) => any;
-    scheduled: () => any;
+    "update:modelValue": (value: "active" | "inactive" | "retired") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onScheduled?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "active" | "inactive" | "retired") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,78 @@
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-power"
+          class="w-5 h-5"
+        />
+        <h3 class="font-semibold">
+          Status
+        </h3>
+      </div>
+    </template>
+
+    <div class="space-y-4">
+      <UFormField
+        :name="name ? `${name}.status` : 'status'"
+        label="Trigger Status"
+        description="Control whether this trigger is enabled or disabled"
+      >
+        <URadioGroup
+          v-model="model"
+          :items="statusOptions"
+          variant="card"
+        />
+      </UFormField>
+
+      <UAlert
+        v-if="model === 'inactive'"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-alert-triangle"
+        title="Trigger is paused"
+        description="This trigger will not fire while inactive. Re-activate it when ready."
+      />
+
+      <UAlert
+        v-if="model === 'retired'"
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-archive"
+        title="Trigger is retired"
+        description="Retired triggers are permanently disabled but kept for historical reference. Consider deleting if no longer needed."
+      />
+    </div>
+  </UCard>
+</template>
+
+<script setup>
+const props = defineProps({
+  status: { type: String, required: false },
+  name: { type: String, required: false },
+  nested: { type: Boolean, required: false }
+});
+const model = defineModel({ type: String, ...{
+  default: "active"
+} });
+if (props.status) {
+  model.value = props.status;
+}
+const statusOptions = [
+  {
+    value: "active",
+    label: "Active",
+    description: "Trigger is enabled and will fire when conditions are met"
+  },
+  {
+    value: "inactive",
+    label: "Inactive",
+    description: "Trigger is temporarily disabled but can be re-enabled later"
+  },
+  {
+    value: "retired",
+    label: "Retired",
+    description: "Trigger is permanently disabled but kept for historical reference"
+  }
+];
+</script>

package/dist/runtime/app/components/{FlowScheduleDialog.vue.d.ts → trigger/StatusConfig.vue.d.ts}

@@ -1,16 +1,16 @@
 type __VLS_Props = {
-    flowName: string;
+    status?: 'active' | 'inactive' | 'retired';
+    name?: string;
+    nested?: boolean;
 };
 type __VLS_ModelProps = {
-    modelValue?: boolean;
+    modelValue?: 'active' | 'inactive' | 'retired';
 };
 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: boolean) => any;
-    scheduled: () => any;
+    "update:modelValue": (value: "active" | "inactive" | "retired") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onScheduled?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "active" | "inactive" | "retired") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    noCard?: boolean;
+    name?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: {
+        path: string;
+        method: string;
+        requireAuth: boolean;
+        authHeader: 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: {
+        path: string;
+        method: string;
+        requireAuth: boolean;
+        authHeader: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        path: string;
+        method: string;
+        requireAuth: boolean;
+        authHeader: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,97 @@
+<template>
+  <component :is="noCard ? 'div' : UCard">
+    <template
+      v-if="!noCard"
+      #header
+    >
+      <div class="flex items-center gap-2">
+        <UIcon
+          name="i-lucide-webhook"
+          class="w-5 h-5 text-purple-500"
+        />
+        <h2 class="text-lg font-semibold">
+          Webhook Configuration
+        </h2>
+      </div>
+    </template>
+
+    <UForm
+      nested
+      :name="name"
+      :schema="schema"
+      :class="noCard ? 'space-y-6' : 'space-y-4'"
+    >
+      <UFormField
+        label="Webhook Path"
+        name="path"
+        required
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">The URL path where this webhook will listen</span>
+        </template>
+        <UInput
+          v-model="config.path"
+          placeholder="/my-trigger-name"
+          icon="i-lucide-link"
+        />
+      </UFormField>
+
+      <UFormField
+        label="HTTP Method"
+        name="method"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">The HTTP method to accept</span>
+        </template>
+        <USelectMenu
+          v-model="config.method"
+          :items="['GET', 'POST', 'PUT', 'PATCH', 'DELETE']"
+          placeholder="Select method"
+        />
+      </UFormField>
+
+      <UFormField
+        label="Authentication"
+        name="requireAuth"
+      >
+        <ClientOnly>
+          <UCheckbox
+            v-model="config.requireAuth"
+            label="Require authentication"
+          />
+        </ClientOnly>
+      </UFormField>
+
+      <UFormField
+        v-if="config.requireAuth"
+        label="Auth Header Name"
+        name="authHeader"
+      >
+        <template #hint>
+          <span class="text-xs text-gray-500">The header name to check for authentication</span>
+        </template>
+        <UInput
+          v-model="config.authHeader"
+          placeholder="X-API-Key"
+          icon="i-lucide-key"
+        />
+      </UFormField>
+    </UForm>
+  </component>
+</template>
+
+<script setup>
+import { UCard } from "#components";
+import { z } from "zod";
+const { noCard = false, name = "webhook" } = defineProps({
+  noCard: { type: Boolean, required: false },
+  name: { type: String, required: false }
+});
+const config = defineModel({ type: Object, ...{ required: true } });
+const schema = z.object({
+  path: z.string().min(1, "Webhook path is required"),
+  method: z.enum(["GET", "POST", "PUT", "PATCH", "DELETE"]),
+  requireAuth: z.boolean(),
+  authHeader: z.string().optional()
+});
+</script>

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    noCard?: boolean;
+    name?: string;
+};
+type __VLS_ModelProps = {
+    modelValue: {
+        path: string;
+        method: string;
+        requireAuth: boolean;
+        authHeader: 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: {
+        path: string;
+        method: string;
+        requireAuth: boolean;
+        authHeader: string;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        path: string;
+        method: string;
+        requireAuth: boolean;
+        authHeader: string;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;