@mouseless/baked 0.19.0

package/dist/runtime/components/MenuPage.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="space-y-4">
+    <Bake
+      v-if="header"
+      name="header"
+      :descriptor="header"
+    />
+    <div
+      v-if="sectionsData.length > 0"
+      class="flex flex-col gap-6"
+    >
+      <div
+        v-for="section in sectionsData"
+        :key="section.title"
+      >
+        <h2
+          v-if="section.title"
+          class="
+            text-zinc-400 dark:text-zinc-600
+            text-xs font-bold
+          "
+        >
+          {{ l(section.title).toLocaleUpperCase(locale) }}
+        </h2>
+        <Divider
+          v-if="section.title"
+          type="dashed"
+          class="mt-2"
+        />
+        <div
+          class="
+            grid gap-4 grid-cols-1
+            md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-6
+          "
+        >
+          <Bake
+            v-for="(link, i) in section.links"
+            :key="link.title"
+            :name="`links/${i}`"
+            :descriptor="link.component"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="sectionsData.length === 0">
+      {{ lc("No item available!") }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRuntimeConfig } from "#app";
+import { Bake } from "#components";
+import { useContext, useLocalization } from "#imports";
+import { Divider } from "primevue";
+import { ref, watch } from "vue";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { localize: lc } = useLocalization({ group: "MenuPage" });
+const { public: { composables } } = useRuntimeConfig();
+const { schema } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, default: null }
+});
+const { header, sections, filterPageContextKey } = schema;
+const locale = composables?.useFormat?.locale || "en-US";
+const sectionsData = ref(sections);
+const page = context.injectPage();
+if (filterPageContextKey) {
+  watch(
+    () => page[filterPageContextKey],
+    (newValue, oldValue) => {
+      if (newValue === oldValue || newValue === void 0) {
+        return;
+      }
+      if (!newValue.trim()) {
+        sectionsData.value = sections;
+        return;
+      }
+      const searchTerm = newValue.toLocaleLowerCase(locale);
+      const sectionsWithFilteredLinks = sections.map((section) => ({
+        title: section.title,
+        links: section.links.filter((link) => {
+          const title = l(link.title);
+          return title?.toLocaleLowerCase(locale).startsWith(searchTerm);
+        })
+      }));
+      sectionsData.value = sectionsWithFilteredLinks.filter((section) => section.links.length > 0);
+    },
+    { immediate: true }
+  );
+}
+</script>

package/dist/runtime/components/MenuPage.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/Message.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/Message.vue

@@ -0,0 +1,33 @@
+<template>
+  <Message
+    :severity="severity"
+    :pt="{ text: { class: 'min-w-[10rem] min-h-[1.5rem]' } }"
+  >
+    <template
+      v-if="icon"
+      #icon
+    >
+      <i :class="`pi ${icon}`" />
+    </template>
+    <Skeleton
+      v-if="loading"
+      height="1.5rem"
+      width="100%"
+    />
+    <span v-else-if="data">{{ localizeMessage ? l(data) : data }}</span>
+    <span v-else>-</span>
+  </Message>
+</template>
+
+<script setup>
+import { Message, Skeleton } from "primevue";
+import { useContext, useLocalization } from "#imports";
+const context = useContext();
+const { localize: l } = useLocalization();
+const { schema } = defineProps({
+  schema: { type: null, default: null },
+  data: { type: null, default: null }
+});
+const { icon, severity, localizeMessage } = schema;
+const loading = context.injectLoading();
+</script>

package/dist/runtime/components/Message.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/ModalLayout.d.vue.ts

@@ -0,0 +1,18 @@
+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 = {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly schema: any;
+    readonly data: any;
+};

package/dist/runtime/components/ModalLayout.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="h-screen">
+    <div class="flex flex-col gap-8 justify-center items-center h-3/4">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  schema: { type: null, default: null },
+  data: { type: null, default: null }
+});
+</script>

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

@@ -0,0 +1,18 @@
+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 = {
+    default?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly schema: any;
+    readonly data: any;
+};

package/dist/runtime/components/Money.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/Money.vue

@@ -0,0 +1,27 @@
+<template>
+  <Skeleton
+    v-if="loading"
+    height="1.5rem"
+  />
+  <span
+    v-else-if="data"
+    v-tooltip.bottom="tooltip"
+    class="max-sm:select-none"
+  >{{ 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 { asCurrency } = useFormat();
+const { data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const loading = context.injectLoading();
+const display = computed(() => asCurrency(data));
+const tooltip = computed(() => display.value.shortened ? `${asCurrency(data, { shorten: false })}` : null);
+</script>

package/dist/runtime/components/Money.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/NavLink.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/NavLink.vue

@@ -0,0 +1,30 @@
+<template>
+  <Skeleton
+    v-if="loading"
+    height="1.5rem"
+  />
+  <Button
+    v-else-if="data"
+    as="router-link"
+    link
+    :label="l(text)"
+    :to
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Button, Skeleton } from "primevue";
+import { useContext, useFormat, useLocalization } from "#imports";
+const context = useContext();
+const { format } = useFormat();
+const { localize: l } = useLocalization();
+const { schema, data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const { path, idProp, textProp } = schema;
+const loading = context.injectLoading();
+const to = computed(() => format(path, [data[idProp]]));
+const text = computed(() => data[textProp]);
+</script>

package/dist/runtime/components/NavLink.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/None.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/None.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="bg-red-500 p-1 rounded-md">
+    <Skeleton
+      v-if="loading"
+      width="3rem"
+      class="inline-block"
+    />
+    <code v-else-if="data">
+      {{ json }}
+    </code>
+  </span>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Skeleton } from "primevue";
+import { useContext } from "#imports";
+const context = useContext();
+const { data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const loading = context.injectLoading();
+const json = computed(() => JSON.stringify(data));
+</script>

package/dist/runtime/components/None.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/Number.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/Number.vue

@@ -0,0 +1,27 @@
+<template>
+  <Skeleton
+    v-if="loading"
+    height="1.5rem"
+  />
+  <span
+    v-else-if="data"
+    v-tooltip.bottom="tooltip"
+    class="max-sm:select-none"
+  >{{ 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 { asNumber } = useFormat();
+const { data } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, required: true }
+});
+const loading = context.injectLoading();
+const display = computed(() => asNumber(data));
+const tooltip = computed(() => display.value.shortened ? `${asNumber(data, { shorten: false })}` : null);
+</script>

package/dist/runtime/components/Number.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/Page.d.vue.ts

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

package/dist/runtime/components/Page.vue

@@ -0,0 +1,24 @@
+<template>
+  <Bake
+    :name="name"
+    :descriptor="descriptor"
+    :class="classes"
+  />
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { useRoute, useRuntimeConfig } from "#app";
+import { useContext, useFormat, useHead, usePages } from "#imports";
+import { Bake } from "#components";
+const context = useContext();
+const { asClasses } = useFormat();
+const pages = usePages();
+const route = useRoute();
+const { public: { components } } = useRuntimeConfig();
+useHead({ title: components?.Page?.title });
+context.providePage(reactive({}));
+const name = route.params?.baked === "" ? "index" : route.params?.baked.join("/");
+const descriptor = await pages.fetch(name);
+const classes = [asClasses("page"), asClasses(name, "b-route--")];
+</script>

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

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

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

@@ -0,0 +1,22 @@
+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 = {
+    actions?: ((props: {}) => any) | undefined;
+} & {
+    actions?: ((props: {}) => any) | undefined;
+} & {
+    extra?: ((props: {}) => any) | undefined;
+};
+declare const __VLS_props: {
+    readonly schema: any;
+    readonly data: any;
+};

package/dist/runtime/components/PageTitle.vue

@@ -0,0 +1,171 @@
+<template>
+  <div
+    id="page-title"
+    class="
+      sticky -top-1 z-10 space-y-4 bg-body
+      max-md:space-y-0 max-lg:space-y-2
+    "
+  >
+    <div
+      class="
+        flex gap-2 items-start
+        md:max-xl:items-center
+      "
+    >
+      <div
+        class="
+          w-full mt-1
+          flex flex-row gap-2
+          items-baseline justify-start
+          xl:flex-col xl:mt-2
+        "
+      >
+        <div class="grid">
+          <h1 class="font-bold text-xl truncate">
+            {{ l(title) }}
+          </h1>
+        </div>
+        <div class="relative">
+          <div
+            data-testid="description"
+            class="
+              text-sm text-gray-600 dark:text-gray-400
+              text-nowrap overflow-hidden
+              hidden xl:grid
+            "
+          >
+            <span class="truncate">
+              {{ l(description) || '&nbsp;' }}
+            </span>
+          </div>
+          <Button
+            v-if="description"
+            v-tooltip.focus.bottom="{ value: l(description) }"
+            class="xl:hidden"
+            icon="pi pi-info-circle"
+            variant="text"
+            size="small"
+            rounded
+          />
+        </div>
+      </div>
+      <div
+        v-focustrap
+        class="
+          min-w-min flex gap-2 row-span-2 items-end text-nowrap
+          max-lg:text-sm md:max-xl:items-center xl:pt-6
+        "
+      >
+        <template v-if="isMd">
+          <Bake
+            v-for="action in actions"
+            :key="action.schema.name"
+            :name="`actions/${action.schema.name}`"
+            :descriptor="action"
+          />
+          <slot
+            v-if="$slots.actions"
+            name="actions"
+          />
+        </template>
+        <template v-else>
+          <Button
+            v-if="actions?.length > 0 || $slots.actions"
+            variant="text"
+            icon="pi pi-filter"
+            class="lg:hidden"
+            rounded
+            @click="togglePopover"
+          />
+          <PersistentPopover
+            ref="popover"
+            fixed
+            class="!z-[1002]"
+          >
+            <div
+              class="
+              flex flex-col flex-start
+              justify-between w-full
+              gap-4 text-sm px-2 py-2"
+            >
+              <Bake
+                v-for="action in actions"
+                :key="action.schema.name"
+                :name="`actions/${action.schema.name}`"
+                :descriptor="action"
+              />
+              <slot
+                v-if="$slots.actions"
+                name="actions"
+              />
+            </div>
+          </PersistentPopover>
+        </template>
+      </div>
+    </div>
+    <slot name="extra" />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { Button } from "primevue";
+import { useRuntimeConfig } from "#app";
+import { Bake, PersistentPopover } from "#components";
+import { useBreakpoints, useHead, useLocalization } from "#imports";
+const { isMd } = useBreakpoints();
+const { localize: l } = useLocalization();
+const { public: { components } } = useRuntimeConfig();
+const { schema } = defineProps({
+  schema: { type: null, required: true },
+  data: { type: null, default: null }
+});
+const { title, description, actions } = schema;
+const popover = ref();
+useHead({
+  title: components?.Page?.title ? `${components.Page.title} - ${title}` : title
+});
+onMounted(() => {
+  const el = document.querySelector("#page-title");
+  if (!el) {
+    return;
+  }
+  const observer = new IntersectionObserver(
+    ([e]) => {
+      toggleClasses(
+        e.target,
+        e.intersectionRatio < 1,
+        [
+          "-mx-4",
+          "px-4",
+          "pb-4",
+          "border-b",
+          "border-slate-300",
+          "dark:border-zinc-800",
+          "drop-shadow",
+          "md:max-xl:pt-4",
+          "max-md:pt-2"
+        ]
+      );
+    },
+    { threshold: [1] }
+  );
+  try {
+    observer.observe(el);
+  } catch (e) {
+    console.warn(e);
+  }
+});
+function toggleClasses(element, toggle, classes) {
+  for (const cls of classes) {
+    element.classList.toggle(cls, toggle);
+  }
+}
+function togglePopover(event) {
+  popover.value.toggle(event);
+}
+</script>
+
+<style scoped>
+.sticky{top:-1px}
+</style>