@mouseless/baked 0.19.0

package/dist/runtime/components/Rate.vue

@@ -0,0 +1,22 @@
+<template>
+  <Skeleton
+    v-if="loading"
+    height="1.5rem"
+  />
+  <span v-else-if="data">{{ display }}</span>
+  <span v-else>-</span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Skeleton } from "primevue";
+import { useContext, useFormat } from "#imports";
+const context = useContext();
+const { asPercentage } = useFormat();
+const { data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const loading = context.injectLoading();
+const display = computed(() => asPercentage(data));
+</script>

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

@@ -0,0 +1,11 @@
+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;
+};

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

@@ -0,0 +1,11 @@
+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;
+};

package/dist/runtime/components/ReportPage.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="space-y-4">
+    <PageTitle :schema="title">
+      <template
+        v-if="queryParameters?.length > 0"
+        #actions
+      >
+        <QueryParameters
+          :parameters="queryParameters"
+          @ready="onReady"
+          @changed="onChanged"
+        />
+      </template>
+      <template #extra>
+        <Tabs
+          v-if="ready && tabs.length > 1"
+          v-model:value="currentTab"
+          class="!-mb-4 overflow-x-auto overflow-y-hidden"
+        >
+          <TabList :pt="{ root: '!bg-transparent' }">
+            <Tab
+              v-for="tab in shownTabs"
+              :key="tab.id"
+              :value="tab.id"
+              class="space-x-2"
+            >
+              <Bake
+                v-if="tab.icon"
+                :name="`tabs/${tab.id}/icon`"
+                :descriptor="tab.icon"
+              />
+              <span v-if="tab.title">{{ l(tab.title) }}</span>
+            </Tab>
+          </TabList>
+        </Tabs>
+      </template>
+    </PageTitle>
+    <Message
+      v-if="showRequiredMessage"
+      severity="info"
+    >
+      <i class="pi pi-info-circle" />
+      <span class="ml-3">{{ lc("Select required values to view this report") }}</span>
+    </Message>
+    <div
+      v-if="ready"
+      class="pt-4 flex flex-col gap-4 items-center"
+    >
+      <DeferredTabContent
+        v-for="tab in shownTabs"
+        :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>
+        <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 { Message, Tab, TabList, Tabs } from "primevue";
+import { useContext, useLocalization } from "#imports";
+import { Bake, DeferredTabContent, PageTitle, QueryParameters } from "#components";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { localize: lc } = useLocalization({ group: "ReportPage" });
+const { schema } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, default: null }
+});
+const { title, queryParameters, tabs } = schema;
+const page = context.injectPage();
+const ready = ref(queryParameters.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 lastTab = ref();
+const showRequiredMessage = ref(false);
+onMounted(() => {
+  showRequiredMessage.value = !ready.value;
+});
+for (const tab of tabs) {
+  if (!tab.showWhen) {
+    continue;
+  }
+  watch(
+    () => page[tab.showWhen],
+    (show, previousShow) => {
+      if (show === previousShow) {
+        return;
+      }
+      if (currentTab.value === tab.id && !show) {
+        lastTab.value = currentTab.value;
+        const firstAvailableTab = shownTabs.value[0];
+        if (firstAvailableTab) {
+          currentTab.value = firstAvailableTab.id;
+        }
+      } else if (lastTab.value === tab.id && show) {
+        currentTab.value = lastTab.value;
+        lastTab.value = null;
+      }
+    },
+    { immediate: true }
+  );
+}
+function onReady(value) {
+  ready.value = value;
+  showRequiredMessage.value = !value;
+}
+function onChanged(value) {
+  uniqueKey.value = value;
+}
+</script>

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

@@ -0,0 +1,11 @@
+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;
+};

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

@@ -0,0 +1,11 @@
+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;
+};

package/dist/runtime/components/Select.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    v-if="loading"
+    class="min-w-40"
+  >
+    <Skeleton class="min-h-10" />
+  </div>
+  <FloatLabel
+    v-else-if="data"
+    variant="on"
+  >
+    <Select
+      v-model="selected"
+      v-bind="$attrs"
+      :input-id="path"
+      :options="data"
+      :placeholder="label"
+      :show-clear
+      class="hide-placeholder"
+    >
+      <template #value="slotProps">
+        <span>
+          {{ getValueLabel(slotProps) }}
+        </span>
+      </template>
+      <template #option="slotProps">
+        <span>{{ getOptionLabel(slotProps) }}</span>
+      </template>
+    </Select>
+    <label for="period">{{ l(label) }}</label>
+  </FloatLabel>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { FloatLabel, Select, Skeleton } from "primevue";
+import { useContext, useUiStates, useLocalization } from "#imports";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { value: { selectStates } } = useUiStates();
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const model = defineModel({ type: null, required: true });
+const { label, localizeLabel, optionLabel, optionValue, showClear, selectionPageContextKey, stateful } = schema;
+const loading = context.injectLoading();
+const path = context.injectPath();
+const page = context.injectPage();
+const selected = ref();
+watch(
+  [() => data, () => model.value],
+  ([_data, _model]) => {
+    if (!_data) {
+      return;
+    }
+    const value = stateful ? selectStates[path] ?? _model : _model;
+    setSelected(value);
+  },
+  { immediate: true }
+);
+watch(selected, (newSelected) => setModel(newSelected));
+function getOptionLabel(slotProps) {
+  const result = slotProps.option[optionLabel] ?? slotProps.option;
+  return localizeLabel ? l(result) : result;
+}
+function getValueLabel(slotProps) {
+  const result = slotProps.value?.[optionLabel] ?? slotProps.value ?? label;
+  return localizeLabel ? l(result) : result;
+}
+function setModel(selected2) {
+  const selectedValue = optionValue ? selected2?.[optionValue] : selected2;
+  model.value = selectedValue;
+  if (stateful) {
+    selectStates[path] = selectedValue;
+  }
+}
+function getValueOf(option) {
+  return optionValue ? option?.[optionValue] : option;
+}
+function setSelected(value) {
+  if (!data) {
+    return;
+  }
+  selected.value = optionValue ? data.filter((o) => o[optionValue] === value)[0] : value;
+  if (selectionPageContextKey) {
+    for (const currentValue of data.map(getValueOf)) {
+      setPageContext(currentValue, false);
+    }
+    const selectedValue = getValueOf(selected.value);
+    if (selectedValue !== void 0) {
+      setPageContext(selectedValue, true);
+    }
+  }
+  if (stateful) {
+    const selectedValue = optionValue ? selected.value?.[optionValue] : selected.value;
+    if (model.value !== selectedValue) {
+      setModel(selected.value);
+    }
+  }
+}
+function setPageContext(key, value) {
+  page[`${selectionPageContextKey}:${key}`] = value;
+  page[`!${selectionPageContextKey}:${key}`] = !value;
+}
+</script>
+
+<style>
+/*
+placeholder gives select the initial width, but it overlaps with label so it is
+hidden
+*/
+.hide-placeholder .p-placeholder {
+  visibility: hidden;
+}
+
+.p-select-label {
+  font-size: inherit;
+}
+</style>

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

@@ -0,0 +1,11 @@
+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;
+};

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

@@ -0,0 +1,11 @@
+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;
+};

package/dist/runtime/components/SelectButton.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    v-if="loading"
+    class="min-w-60"
+  >
+    <Skeleton class="min-h-10" />
+  </div>
+  <SelectButton
+    v-else-if="data"
+    v-model="selected"
+    :options="data"
+    :allow-empty
+    :data-key="optionValue"
+    :pt="{ pcToggleButton: { root: { class: 'text-[length:inherit]' } } }"
+  >
+    <template #option="slotProps">
+      <span>{{ getOptionLabel(slotProps) }}</span>
+    </template>
+  </SelectButton>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { SelectButton, Skeleton } from "primevue";
+import { useContext, useLocalization, useUiStates } from "#imports";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { value: { selectButtonStates } } = useUiStates();
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const model = defineModel({ type: null, required: true });
+const { allowEmpty = false, localizeLabel, optionLabel, optionValue, stateful, selectionPageContextKey } = schema;
+const loading = context.injectLoading();
+const path = context.injectPath();
+const page = context.injectPage();
+const selected = ref();
+watch(
+  [() => data, () => model.value],
+  ([_data, _model]) => {
+    if (!_data) {
+      return;
+    }
+    const value = stateful ? selectButtonStates[path] ?? _model : _model;
+    setSelected(value);
+  },
+  { immediate: true }
+);
+watch(selected, (newSelected) => setModel(newSelected));
+function getOptionLabel(slotProps) {
+  const result = slotProps.option[optionLabel] ?? slotProps.option;
+  return localizeLabel ? l(result) : result;
+}
+function setModel(selected2) {
+  const selectedValue = optionValue ? selected2?.[optionValue] : selected2;
+  model.value = selectedValue;
+  if (stateful) {
+    selectButtonStates[path] = selectedValue;
+  }
+}
+function getValueOf(option) {
+  return optionValue ? option?.[optionValue] : option;
+}
+function setSelected(value) {
+  if (!data) {
+    return;
+  }
+  selected.value = optionValue ? data.filter((o) => o[optionValue] === value)[0] : value;
+  if (selectionPageContextKey) {
+    for (const currentValue of data.map(getValueOf)) {
+      setPageContext(currentValue, false);
+    }
+    const selectedValue = getValueOf(selected.value);
+    if (selectedValue !== void 0) {
+      setPageContext(selectedValue, true);
+    }
+  }
+  if (stateful) {
+    const selectedValue = optionValue ? selected.value?.[optionValue] : selected.value;
+    if (model.value !== selectedValue) {
+      setModel(selected.value);
+    }
+  }
+}
+function setPageContext(key, value) {
+  page[`${selectionPageContextKey}:${key}`] = value;
+  page[`!${selectionPageContextKey}:${key}`] = !value;
+}
+</script>
+
+<style>
+.p-popover-content .p-selectbutton{@apply max-sm:flex-col}.p-popover-content .p-selectbutton .p-togglebutton:first-child{@apply max-sm:rounded-t-lg max-sm:rounded-es-none}.p-popover-content .p-selectbutton .p-togglebutton:last-child{@apply max-sm:rounded-b-lg max-sm:rounded-se-none}
+</style>

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

@@ -0,0 +1,11 @@
+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;
+};

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

@@ -0,0 +1,20 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: 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>;
+type __VLS_Slots = {
+    footer?: ((props: {}) => any) | undefined;
+} & {
+    footer?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly schema: any;
+    readonly data: any;
+};

package/dist/runtime/components/SideMenu.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="
+      b-component--SideMenu--placeholder
+      min-w-[5.25rem]
+      max-md:min-h-16 max-md:mt-1 max-md:w-full
+      2xl:min-w-64
+    "
+  />
+  <nav
+    v-bind="$attrs"
+    class="
+      fixed z-10
+      p-4 bg-slate-100 dark:bg-zinc-900
+      flex flex-col justify-start gap-2
+      md:top-0 md:left-0 md:h-screen
+      max-md:bottom-0 max-md:w-full max-md:p-2
+      max-md:flex-row max-md:justify-between max-md:items-center
+      max-md:border-t max-md:border-slate-300 max-md:dark:border-zinc-800
+      max-md:drop-shadow-[0_-2px_2px_rgba(0,0,0,0.1)]
+      2xl:min-w-64
+    "
+  >
+    <RouterLink
+      to="/"
+      class="
+        flex mt-4 mb-8 w-full min-w-[3.25rem]
+        max-2xs:hidden
+        max-md:my-0 max-md:w-10
+      "
+    >
+      <Logo
+        :src="logo"
+        class="2xl:hidden"
+      />
+      <Logo
+        :src="largeLogo"
+        class="hidden 2xl:block"
+      />
+    </RouterLink>
+    <div
+      class="
+        flex flex-col gap-2 h-full
+        max-md:h-fit max-md:flex-row
+        max-md:overflow-x-auto max-md:snap-x
+      "
+    >
+      <template v-if="loading">
+        <Skeleton class="py-6 min-w-[3.25rem] max-md:snap-start" />
+        <Skeleton class="py-6 min-w-[3.25rem] max-md:snap-start" />
+      </template>
+      <template v-else-if="data">
+        <SideMenuItem
+          v-for="item in menu"
+          :key="item.title"
+          :item="item"
+          :path="data.path"
+          class="max-md:snap-start"
+        />
+      </template>
+    </div>
+    <div v-if="$slots.footer || footer">
+      <div v-if="isMd">
+        <Bake
+          v-if="footer"
+          name="footer"
+          :descriptor="footer"
+        />
+        <slot
+          v-else
+          name="footer"
+        />
+      </div>
+      <template v-else>
+        <Button
+          severity="secondary"
+          icon="pi pi-cog"
+          class="w-[3.25rem] h-[3.25rem]"
+          variant="text"
+          rounded
+          @click="togglePopover"
+        />
+        <PersistentPopover
+          ref="popover"
+          fixed
+          class="w-1/2 min-w-fit !z-[1002]"
+        >
+          <Bake
+            v-if="footer"
+            name="footer"
+            :descriptor="footer"
+          />
+          <slot
+            v-else
+            name="footer"
+          />
+        </PersistentPopover>
+      </template>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { RouterLink } from "vue-router";
+import { Button, Skeleton } from "primevue";
+import { Bake, Logo, PersistentPopover, SideMenuItem } from "#components";
+import { useBreakpoints, useContext } from "#imports";
+const { isMd } = useBreakpoints();
+const context = useContext();
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const { logo, largeLogo, menu, footer } = schema;
+const loading = context.injectLoading();
+const popover = ref();
+function togglePopover(event) {
+  popover.value.toggle(event);
+}
+</script>

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

@@ -0,0 +1,20 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: 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>;
+type __VLS_Slots = {
+    footer?: ((props: {}) => any) | undefined;
+} & {
+    footer?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly schema: any;
+    readonly data: any;
+};

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

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    item: Record<string, any>;
+    path: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_props: {
+    readonly item: Record<string, any>;
+    readonly path: string;
+};

package/dist/runtime/components/SideMenuItem.vue

@@ -0,0 +1,33 @@
+<template>
+  <RouterLink :to="item.route">
+    <Button
+      v-tooltip="{ value: l(item.title), showDelay: 300, class: '2xl:!hidden max-md:!hidden' }"
+      :text="!selected"
+      :pt="{
+        label: { class: 'max-2xl:hidden leading-none' }
+      }"
+      :icon="item.icon"
+      :severity="selected ? 'primary':'secondary'"
+      size="large"
+      class="
+        px-4 py-3.5 w-full
+        2xl:justify-start 2xl:gap-4
+      "
+      :label="l(item.title)"
+      :disabled="item.disabled"
+    />
+  </RouterLink>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { Button } from "primevue";
+import { useLocalization } from "#imports";
+const { localize: l } = useLocalization();
+const { item, path } = defineProps({
+  item: { type: Object, required: true },
+  path: { type: String, required: true }
+});
+const selected = computed(() => item.route === path || item.route !== "/" && path.startsWith(item.route));
+</script>