@mouseless/baked 1.0.3 → 1.1.0

package/dist/runtime/components/{ReportPage.vue → TabbedPage.vue}

@@ -1,12 +1,12 @@
 <template>
-  <div class="space-y-4">
+  <div class="flex flex-col gap-4">
     <PageTitle :schema="title">
       <template
-        v-if="queryParameters?.length > 0"
-        #actions
+        v-if="inputs?.length > 0"
+        #inputs
       >
-        <QueryParameters
-          :parameters="queryParameters"
+        <Inputs
+          :inputs
           @ready="onReady"
           @changed="onChanged"
         />
@@ -40,7 +40,7 @@
       severity="info"
     >
       <i class="pi pi-info-circle" />
-      <span class="ml-3">{{ lc("Select required values to view this report") }}</span>
+      <span class="ml-3">{{ lc("Select required values to view this page") }}</span>
     </Message>
     <div
       v-if="ready"
@@ -51,97 +51,79 @@
         :key="`${uniqueKey}-${tab.id}`"
         v-model="currentTab"
         :when="tab.id"
-        :class="{ 'max-w-screen-xl 3xl:max-w-screen-2xl': !tab.fullScreen }"
-        class="w-full"
       >
-        <template v-if="tab.fullScreen">
-          <template
-            v-for="content in tab.contents"
-            :key="`content-${content.key}`"
-          >
-            <Bake
-              v-if="content.showWhen ? page[content.showWhen] : true"
-              :name="`tabs/${tab.id}/contents/${content.key}`"
-              :descriptor="content.component"
-            />
-          </template>
+        <template #default="{ hidden }">
+          <Contents
+            :contents="tab.contents"
+            :name-prefix="`tabs/${tab.id}`"
+            :full-screen="tab.fullScreen"
+            :class="{ hidden }"
+          />
         </template>
-        <div
-          v-else
-          class="b-ReportPage--grid grid grid-cols-1 lg:grid-cols-2 gap-4"
-        >
-          <template
-            v-for="content in tab.contents"
-            :key="`content-${content.key}`"
-          >
-            <div
-              v-if="content.showWhen ? page[content.showWhen] : true"
-              :class="{ 'lg:col-span-2': !content.narrow }"
-            >
-              <Bake
-                :name="`tabs/${tab.id}/contents/${content.key}`"
-                :descriptor="content.component"
-              />
-            </div>
-          </template>
-        </div>
       </DeferredTabContent>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { Message, Tab, TabList, Tabs } from "primevue";
-import { useContext, useLocalization } from "#imports";
-import { Bake, DeferredTabContent, PageTitle, QueryParameters } from "#components";
+import { useContext, useLocalization, useReactionHandler } from "#imports";
+import { Bake, Contents, DeferredTabContent, Inputs, PageTitle } from "#components";
 const context = useContext();
 const { localize: l } = useLocalization();
-const { localize: lc } = useLocalization({ group: "ReportPage" });
+const { localize: lc } = useLocalization({ group: "TabbedPage" });
+const reactionHandler = useReactionHandler();
 const { schema } = defineProps({
-  schema: { type: null, required: true },
-  data: { type: null, default: null }
+  schema: { type: null, required: true }
 });
-const { title, queryParameters, tabs } = schema;
-const page = context.injectPage();
-const ready = ref(queryParameters.length === 0);
+const { title, inputs, tabs } = schema;
+const path = context.injectPath();
+const ready = ref(inputs.length === 0);
 const uniqueKey = ref();
 const currentTab = ref(tabs.length > 0 ? tabs[0].id : "");
-const shownTabs = computed(() => tabs.filter((tab) => tab.showWhen ? page[tab.showWhen] : true));
+const tabVisible = reactive(tabs.reduce((prev, cur) => ({ ...prev, [cur.id]: true }), {}));
+const shownTabs = computed(() => tabs.filter((tab) => tabVisible[tab.id]));
 const lastTab = ref();
+const tabReactions = [];
 const showRequiredMessage = ref(false);
-onMounted(() => {
-  showRequiredMessage.value = !ready.value;
-});
 for (const tab of tabs) {
-  if (!tab.showWhen) {
+  if (!tab.reactions) {
     continue;
   }
-  watch(
-    () => page[tab.showWhen],
-    (show, previousShow) => {
-      if (show === previousShow) {
-        return;
-      }
-      if (currentTab.value === tab.id && !show) {
+  const tabReaction = reactionHandler.create(`${path}/tabs/${tab.id}`, {
+    reload() {
+    },
+    show(visible) {
+      tabVisible[tab.id] = visible;
+      if (currentTab.value === tab.id && !visible) {
         lastTab.value = currentTab.value;
         const firstAvailableTab = shownTabs.value[0];
         if (firstAvailableTab) {
           currentTab.value = firstAvailableTab.id;
         }
-      } else if (lastTab.value === tab.id && show) {
+      } else if (lastTab.value === tab.id && visible) {
         currentTab.value = lastTab.value;
         lastTab.value = null;
       }
-    },
-    { immediate: true }
-  );
+    }
+  });
+  tabReaction.bind(tab.reactions);
+  tabReactions.push(tabReaction);
 }
+onMounted(() => {
+  showRequiredMessage.value = !ready.value;
+});
+onBeforeUnmount(() => {
+  for (const tabReaction of tabReactions) {
+    tabReaction.unbind();
+  }
+});
 function onReady(value) {
   ready.value = value;
   showRequiredMessage.value = !value;
 }
-function onChanged(value) {
-  uniqueKey.value = value;
+function onChanged(event) {
+  uniqueKey.value = event.uniqueKey;
 }
 </script>

package/dist/runtime/components/TabbedPage.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Text.d.vue.ts

@@ -1,11 +1,21 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
-};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/Text.vue

@@ -1,27 +1,23 @@
 <template>
-  <Skeleton
-    v-if="loading"
-    height="1.5rem"
-  />
-  <span
-    v-else-if="data"
-    v-tooltip.bottom="tooltip"
-  >{{ text }}</span>
-  <span v-else>-</span>
+  <AwaitLoading :skeleton="{ height: '1.5rem' }">
+    <span
+      v-if="data"
+      v-tooltip.bottom="tooltip"
+    >{{ text }}</span>
+    <span v-else>-</span>
+  </AwaitLoading>
 </template>
 
 <script setup>
 import { computed } from "vue";
-import { Skeleton } from "primevue";
-import { useContext, useFormat } from "#imports";
-const context = useContext();
+import { useFormat } from "#imports";
+import { AwaitLoading } from "#components";
 const { truncate } = useFormat();
 const { schema, data } = defineProps({
   schema: { type: null, required: true },
   data: { type: null, required: true }
 });
 const { maxLength } = schema;
-const loading = context.injectLoading();
 const lengthIsExceeded = computed(() => maxLength && data.length > maxLength);
 const text = computed(() => lengthIsExceeded.value ? truncate(data, maxLength) : data);
 const tooltip = computed(() => ({

package/dist/runtime/components/Text.vue.d.ts

@@ -1,11 +1,21 @@
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
-    schema: any;
-    data: any;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const __VLS_props: {
-    readonly schema: any;
-    readonly data: any;
-};
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    schema: {
+        type: null;
+        required: true;
+    };
+    data: {
+        type: null;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/composables/useActionExecuter.d.ts

@@ -0,0 +1,7 @@
+export default function _default(): {
+    execute: ({ action, contextData, events }: {
+        action: any;
+        contextData: any;
+        events: any;
+    }) => Promise<void>;
+};

package/dist/runtime/composables/useActionExecuter.js

@@ -0,0 +1,108 @@
+import { useRuntimeConfig } from "#app";
+import { useComposableResolver, useDataFetcher, usePathBuilder, useUnref } from "#imports";
+
+export default function() {
+  const actions = {
+    "Composite": Composite({ actionExecuter: { execute } }),
+    "Local": Local(),
+    "Publish": Publish(),
+    "Remote": Remote({ actionExecuter: { execute } })
+  };
+
+  async function execute({ action, contextData, events }) {
+    const executer = actions[action?.type];
+
+    await executer.execute({ action, contextData, events });
+  }
+
+  return {
+    execute
+  };
+}
+
+function Composite({ actionExecuter }) {
+  async function execute({ action, contextData, events }) {
+    for(const part of action.parts) {
+      await actionExecuter.execute({ action: part, contextData, events });
+    }
+  }
+
+  return {
+    execute
+  };
+}
+
+function Local() {
+  const composableResolver = useComposableResolver();
+  const dataFetcher = useDataFetcher();
+
+  async function execute({ action, contextData }) {
+    const composable = (await composableResolver.resolve(action.composable)).default();
+
+    if(composable.run) {
+      const options = action.options ? await dataFetcher.fetch({ data: action.options, contextData }) : { };
+
+      return await composable.run(options);
+    }
+
+    throw new Error("Action composable should have async `run`");
+  }
+
+  return {
+    execute
+  };
+}
+
+function Publish() {
+  const dataFetcher = useDataFetcher();
+
+  async function execute({ action, contextData, events }) {
+    const data = action.data ? await dataFetcher.fetch({ data: action.data, contextData }) : undefined;
+
+    if(action.event) {
+      await events.publish(action.event, data);
+    }
+
+    if(action.pageContextKey) {
+      contextData.page[action.pageContextKey] = data;
+    }
+  }
+
+  return {
+    execute
+  };
+}
+
+function Remote({ actionExecuter }) {
+  const dataFetcher = useDataFetcher();
+  const pathBuilder = usePathBuilder();
+  const { public: { apiBaseURL } } = useRuntimeConfig();
+  const unref = useUnref();
+
+  async function execute({ action, contextData, events }) {
+    const headers = action.headers ? unref.deepUnref(await dataFetcher.fetch({ data: action.headers, contextData })) : { };
+    const query = action.query ? unref.deepUnref(await dataFetcher.fetch({ data: action.query, contextData })) : null;
+    const params = action.params ? unref.deepUnref(await dataFetcher.fetch({ data: action.params, contextData })) : { };
+    const body = action.method === "GET"
+      ? null
+      : (action.body ? unref.deepUnref(await dataFetcher.fetch({ data: action.body, contextData })) : { });
+
+    const response = await $fetch(pathBuilder.build(action.path, params), {
+      baseURL: apiBaseURL,
+      method: action.method,
+      headers: headers,
+      query: query,
+      body: body
+    });
+
+    await actionExecuter.execute({
+      action: action.postAction,
+      contextData: { ...contextData, response },
+      events
+    });
+  }
+
+  return {
+    execute
+  };
+}

package/dist/runtime/composables/useConstraintEvaluator.d.ts

@@ -0,0 +1,7 @@
+export default function _default(): {
+    evaluate: ({ constraint, value, contextData }: {
+        constraint: any;
+        value: any;
+        contextData: any;
+    }) => Promise<any>;
+};

package/dist/runtime/composables/useConstraintEvaluator.js

@@ -0,0 +1,58 @@
+import { useComposableResolver, useDataFetcher } from "#imports";
+
+export default function() {
+  const constraints = {
+    "Composable": Composable(),
+    "Is": Is(),
+    "IsNot": IsNot()
+  };
+
+  async function evaluate({ constraint, value, contextData }) {
+    if(!constraint) { return true; }
+
+    const evaluator = constraints[constraint.type];
+
+    return await evaluator.evaluate({ constraint, contextData, value });
+  }
+
+  return {
+    evaluate
+  };
+}
+
+function Composable() {
+  const composableResolver = useComposableResolver();
+  const dataFetcher = useDataFetcher();
+
+  async function evaluate({ constraint, value, contextData }) {
+    const options = constraint.options ? await dataFetcher.fetch({ data: constraint.options, contextData }) : { };
+    const composable = (await composableResolver.resolve(constraint.composable)).default(options);
+    if(!composable.validate) { throw new Error("Constraint composable should have `validate`"); }
+
+    return composable.validate(value);
+  }
+
+  return {
+    evaluate
+  };
+}
+
+function Is() {
+  async function evaluate({ constraint, value }) {
+    return constraint.is === value;
+  }
+
+  return {
+    evaluate
+  };
+}
+
+function IsNot() {
+  async function evaluate({ constraint, value }) {
+    return constraint.isNot !== value;
+  }
+
+  return {
+    evaluate
+  };
+}

package/dist/runtime/composables/useContext.d.ts

@@ -1,15 +1,20 @@
 export default function _default(): {
     injectPath: () => string;
-    providePath: (name: any) => void;
+    providePath: (value: any) => void;
+    injectContextData: () => {
+        page: any;
+        parent: null;
+    };
     injectDataDescriptor: () => null;
     provideDataDescriptor: (value: any) => void;
-    injectData: () => {
-        ParentData: null;
-        Custom: null;
-    };
-    provideData: (value: any, key: any) => void;
+    injectEvents: () => any;
+    provideEvents: (value: any) => void;
+    injectExecuting: () => import("vue").Ref<boolean, boolean>;
+    provideExecuting: (value: any) => void;
     injectLoading: () => import("vue").Ref<boolean, boolean>;
     provideLoading: (value: any) => void;
-    injectPage: () => any;
-    providePage: (value: any) => void;
+    injectPageContext: () => any;
+    providePageContext: (value: any) => void;
+    injectParentContext: () => null;
+    provideParentContext: (value: any) => void;
 };

package/dist/runtime/composables/useContext.js

@@ -1,15 +1,21 @@
 import { inject, provide, ref } from "vue";
 
 export default function() {
-  function providePath(name) {
-    const path = inject("__bake_path", null);
-    provide("__bake_path", path ? `${path}/${name}` : name);
+  function providePath(value) {
+    provide("__bake_path", value);
   }
 
   function injectPath() {
     return inject("__bake_path", "");
   }
 
+  function injectContextData() {
+    return {
+      page: injectPageContext(),
+      parent: injectParentContext()
+    };
+  }
+
   function injectDataDescriptor() {
     return inject("__bake_data_descriptor", null);
   }
@@ -18,15 +24,20 @@ export default function() {
     return provide("__bake_data_descriptor", value);
   }
 
-  function injectData() {
-    return {
-      ParentData: inject("__bake_injected_data:ParentData", null),
-      Custom: inject("__bake_injected_data:Custom", null)
-    };
+  function injectEvents() {
+    return inject("__bake_events");
+  }
+
+  function provideEvents(value) {
+    provide("__bake_events", value);
+  }
+
+  function injectExecuting() {
+    return inject("__bake_executing", ref(false));
   }
 
-  function provideData(value, key) {
-    provide(`__bake_injected_data:${key}`, value);
+  function provideExecuting(value) {
+    return provide("__bake_executing", value);
   }
 
   function injectLoading() {
@@ -37,24 +48,37 @@ export default function() {
     provide("__bake_loading", value);
   }
 
-  function injectPage() {
-    return inject("__bake_page");
+  function injectPageContext() {
+    return inject("__bake_page_context");
+  }
+
+  function providePageContext(value) {
+    provide("__bake_page_context", value);
+  }
+
+  function injectParentContext() {
+    return inject("__bake_parent_context", null);
   }
 
-  function providePage(value) {
-    provide("__bake_page", value);
+  function provideParentContext(value) {
+    provide("__bake_parent_context", value);
   }
 
   return {
     injectPath,
     providePath,
+    injectContextData,
     injectDataDescriptor,
     provideDataDescriptor,
-    injectData,
-    provideData,
+    injectEvents,
+    provideEvents,
+    injectExecuting,
+    provideExecuting,
     injectLoading,
     provideLoading,
-    injectPage,
-    providePage
+    injectPageContext,
+    providePageContext,
+    injectParentContext,
+    provideParentContext
   };
 }

package/dist/runtime/composables/useDataFetcher.d.ts

@@ -1,15 +1,15 @@
 export default function _default(): {
     shouldLoad: (dataType: any) => boolean;
-    get: ({ data, injectedData }: {
+    get: ({ data, contextData }: {
         data: any;
-        injectedData: any;
+        contextData: any;
     }) => any;
-    fetch: ({ data, injectedData }: {
+    fetch: ({ data, contextData }: {
         data: any;
-        injectedData: any;
+        contextData: any;
     }) => Promise<any>;
-    fetchParameters: ({ data, injectedData }: {
+    fetchParameters: ({ data, contextData }: {
         data: any;
-        injectedData: any;
+        contextData: any;
     }) => Promise<any>;
 };