Deployment of v1.2.18

components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     LocaleSwitcher: typeof import('./src/components/LocaleSwitcher.vue')['default']
     Logo: typeof import('./src/components/Logo.vue')['default']
     MigrationDialog: typeof import('./src/components/MigrationDialog.vue')['default']
+    ModalDialog: typeof import('./src/components/ModalDialog.vue')['default']
     NewStructureModal: typeof import('./src/components/NewStructureModal.vue')['default']
     Prompt: typeof import('./src/components/Prompt.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

docs/structure.md

@@ -447,6 +447,9 @@ triggers:
 
     # URL called when the trigger is executed
     url: https://json.ms/?action=build
+
+    # Location of the trigger button (structure, toolbar, data)
+    location: editor
 
     # HTTP method used for the request
     method: POST

package.json

@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",

src/assets/example-structure.yaml

@@ -22,6 +22,7 @@ triggers:
     label: Build
     icon: mdi-play
     url: [BUILD_URL]/build
+    location: structure
     method: POST
     headers:
       Content-Type: application/json

src/components/ActionBar.vue

@@ -6,6 +6,14 @@ import {useGlobalStore} from '@/stores/global';
 import {computed} from "vue";
 import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
+import TriggerMenu from "@/components/TriggerMenu.vue";
+import type {IStructure, IStructureData} from "@/interfaces";
+
+const structure = defineModel<IStructure>({ required: true });
+const { structureData, userData } = defineProps<{
+  structureData: IStructureData,
+  userData: any,
+}>();
 
 const globalStore = useGlobalStore();
 const modelStore = useModelStore();
@@ -56,6 +64,12 @@ const reset = () => {
 </script>
 
 <template>
+  <TriggerMenu
+    :model-value="structureData"
+    :structure="structure"
+    :user-data="userData"
+    location="data"
+  />
   <div
     v-if="globalStore.session.loggedIn"
     class="w-100 pr-3"

src/components/EndpointManagerModal.vue

@@ -7,6 +7,7 @@ import {deepToRaw} from '@/utils';
 import {useStructure} from '@/composables/structure';
 import Rules from '@/rules';
 import {useEndpoints} from "@/composables/endpoints";
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const globalStore = useGlobalStore();
 const visible = defineModel<boolean>({ default: false });
@@ -68,75 +69,72 @@ watch(visible, () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="visible"
     :persistent="!isPristine"
+    title="Endpoint Manager"
+    prepend-icon="mdi-webhook"
     width="600"
     scrollable
   >
-    <v-card
-      title="Endpoint Manager"
-      prepend-icon="mdi-webhook"
-    >
-      <v-card-text>
+    <v-card-text>
 
-        <p class="mb-4">
-          Every endpoint you create instantiate a new <i>cypher</i> and <i>secret API key</i> that you can reuse with other projects. That way, you can centralize your data on a specific server if required.
-        </p>
+      <p class="mb-4">
+        Every endpoint you create instantiate a new <i>cypher</i> and <i>secret API key</i> that you can reuse with other projects. That way, you can centralize your data on a specific server if required.
+      </p>
 
-        <v-alert type="info" variant="tonal" class="mb-4">
-          To get assistance with running your own endpoint instance, be sure to consult the Integration panel.
-        </v-alert>
+      <v-alert type="info" variant="tonal" class="mb-4">
+        To get assistance with running your own endpoint instance, be sure to consult the Integration panel.
+      </v-alert>
 
-        <ListBuilder
-          v-model="endpointList"
-          :disabled="saving"
-          :remove-item-callback="onRemoveItemCallback"
-          :default-item="{
-            url: '',
-            secret: '',
-            cypher: '',
-          }"
-        >
-          <template #default="{ item }">
-            <v-text-field
-              v-model="item.url"
-              :rules="getStructureRules('server_url')"
-              clearable
-              required
-              persistent-hint
-              hint="This field is required"
-            >
-              <template #label>
-                <span class="mr-2 text-error">*</span> Endpoint
-              </template>
-              <template v-if="item.url && Rules.isUrl(item.url) && !item.url.startsWith('https://')" #message>
-                <span class="text-error">It is not safe to use an unsecured protocol (HTTP) to communicate your data. Please be aware that your information may be vulnerable to interception by unauthorized parties. For your safety, we recommend using a secure connection (HTTPS) to protect your sensitive data during transmission.</span>
-              </template>
-              <template v-if="!item.uuid" #prepend-inner>
-                <v-icon icon="mdi-new-box" />
-              </template>
-            </v-text-field>
-          </template>
-        </ListBuilder>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn
-          :loading="saving"
-          :disabled="isPristine || saving"
-          :color="isPristine ? undefined : 'primary'"
-          variant="flat"
-          @click="save"
-        >
-          Save and close
-        </v-btn>
-        <v-btn
-          :disabled="saving"
-          @click="close"
-        >
-          Cancel
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+      <ListBuilder
+        v-model="endpointList"
+        :disabled="saving"
+        :remove-item-callback="onRemoveItemCallback"
+        :default-item="{
+          url: '',
+          secret: '',
+          cypher: '',
+        }"
+      >
+        <template #default="{ item }">
+          <v-text-field
+            v-model="item.url"
+            :rules="getStructureRules('server_url')"
+            clearable
+            required
+            persistent-hint
+            hint="This field is required"
+          >
+            <template #label>
+              <span class="mr-2 text-error">*</span> Endpoint
+            </template>
+            <template v-if="item.url && Rules.isUrl(item.url) && !item.url.startsWith('https://')" #message>
+              <span class="text-error">It is not safe to use an unsecured protocol (HTTP) to communicate your data. Please be aware that your information may be vulnerable to interception by unauthorized parties. For your safety, we recommend using a secure connection (HTTPS) to protect your sensitive data during transmission.</span>
+            </template>
+            <template v-if="!item.uuid" #prepend-inner>
+              <v-icon icon="mdi-new-box" />
+            </template>
+          </v-text-field>
+        </template>
+      </ListBuilder>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        :loading="saving"
+        :disabled="isPristine || saving"
+        :color="isPristine ? undefined : 'primary'"
+        variant="flat"
+        @click="save"
+      >
+        Save and close
+      </v-btn>
+      <v-btn
+        :disabled="saving"
+        @click="close"
+      >
+        Cancel
+      </v-btn>
+    </v-card-actions>
+  </ModalDialog>
 </template>

src/components/Error.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useGlobalStore } from '@/stores/global';
+import ModalDialog from '@/components/ModalDialog.vue';
 
 const globalStore = useGlobalStore();
 const close = () => {
@@ -17,25 +18,22 @@ const close = () => {
 </script>
 
 <template>
-  <v-dialog
+  <ModalDialog
     v-model="globalStore.error.visible"
+    :text="globalStore.error.body"
+    :title="globalStore.error.title || 'Error'"
+    color="error"
+    prepend-icon="mdi-alert"
+    max-width="400"
     width="auto"
     persistent
     scrollable
   >
-    <v-card
-      :text="globalStore.error.body"
-      :title="globalStore.error.title || 'Error'"
-      color="error"
-      prepend-icon="mdi-alert"
-      max-width="400"
-    >
-      <template #actions>
-        <v-btn
-          text="Close"
-          @click="close"
-        />
-      </template>
-    </v-card>
-  </v-dialog>
+    <v-card-actions>
+      <v-btn
+        text="Close"
+        @click="close"
+      />
+    </v-card-actions>
+  </ModalDialog>
 </template>