feat: ui improvements & custom tiles (#78)

* fix: publish example tiles

* fix: remove profile menu

* feat: improve mobile design

* feat: improve ui

* feat: improve mobile ui

* fix: paddings

* feat: secondary menu icon

* feat: switch to heroicons

* feat: dynamic tile components

* docs: form builder

Author: jofmi

README.md

@@ -180,16 +180,41 @@ definePageMeta({
 });
 ```
 
-## Icons
+## Types
+
+To add types to the database schema of the directus client, add a file `your-extension/index.d.ts` with the following content:
+
+```ts
+declare global {
+  interface CollectivoSchema {
+    example_collection: ExampleCollection[];
+  }
+
+  interface ExampleCollection {
+    id: number;
+    example_field: string;
+  }
+}
 
-Collectivo uses [`nuxt-ui`](https://ui.nuxt.com/getting-started/theming#icons) and [`Iconify`](https://iconify.design/) to load icons. They have to be defined as `i-{collection_name}-{icon_name}`.
+export {};
+```
 
-By default, Collectivo loads the following to icon libraries:
+You can then enjoy type checking when using directus:
 
-- [System UIcons](https://icones.js.org/collection/system-uicons) for the UI
-- [Mono Icons](https://icones.js.org/collection/mi) for form components
+```ts
+const directus = useDirectus();
+const data = await directus.request(readItems("example_collection"));
+```
 
-Additional libraries can be loaded in `nuxt.config.ts`.
+Typescript will then know that data is a `ExampleCollection[]` and that `data[0].example_field` is a string.
+
+## Icons
+
+Collectivo uses [`nuxt-ui`](https://ui.nuxt.com/getting-started/theming#icons) and [`Iconify`](https://iconify.design/) to load icons. They have to be defined as `i-{collection_name}-{icon_name}`. By default, Collectivo uses the [HeroIcons](https://icones.js.org/collection/heroicons) library. Additional libraries can be loaded in [`nuxt.config.ts`](https://ui.nuxt.com/getting-started/theming#icons).
+
+## Dashboard
+
+You can create custom components that can be displayed inside a dashboard tile. To do so, create a new component file `components/global/`. Then, add a new dashboard tile to your database and set the field `Component` to the name of your tile.
 
 # API Reference
 
@@ -254,13 +279,26 @@ export default defineNuxtPlugin(() => {
   const menu = useCollectivoMenus();
   menu.value.main.push({
     label: "My menu item",
-    icon: "i-system-uicons-cubes",
+    icon: "i-heroicons-star",
     to: "/my/path",
     order: 100
   });
 }
 ```
 
+### `CollectivoFormBuilder`
+
+This component can be used to build forms.
+
+Attributes:
+
+- `data: Record<string, any>`: Data to populate the initial form
+- `fields: CollectivoFormField[]`: Defines the structure of the form
+- `submit: (data: Record<string, any>) => Promise<void>`: Function to be called when form is submitted
+- `submit-label: string`: Label of the submit button
+
+To see the different possible form fields, check out the available types of `CollectivoFormField` in `index.d.ts`.
+
 ## Backend
 
 The following utility functions can be used for server-side scripts (within `/my-extension/server/`)

collectivo/collectivo/components/collectivo/form/Builder.vue

@@ -234,7 +234,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 async function onError(event: FormErrorEvent) {
   toast.add({
     title: t("Some fields are not filled in correctly"),
-    icon: "i-mi-warning",
+    icon: "i-heroicons-exclamation-triangle",
     color: "red",
     timeout: 0,
   });
@@ -467,7 +467,7 @@ async function fillOutAll() {
         variant="solid"
         color="green"
         size="lg"
-        icon="i-mi-circle-check"
+        icon="i-heroicons-check-16-solid"
         :loading="loading"
         type="submit"
       >

collectivo/collectivo/components/collectivo/form/Page.vue

@@ -62,7 +62,7 @@ async function onSubmit(data: any) {
     toast.add({
       title: t("There was an error"),
       description: err instanceof Error ? err.message : undefined,
-      icon: "i-mi-warning",
+      icon: "i-heroicons-exclamation-triangle",
       color: "red",
       timeout: 0,
     });
@@ -83,7 +83,7 @@ async function onSubmit(data: any) {
       <slot name="success">
         <div class="flex flex-col items-center justify-center space-y-4">
           <UIcon
-            name="i-system-uicons-check"
+            name="i-heroicons-check-16-solid"
             class="w-[64px] h-[64px] text-primary"
           />
           <h1 class="text-2xl font-bold text-center">

collectivo/collectivo/components/global/tilesExample.vue

@@ -0,0 +1 @@
+<template>Hello World!</template>

collectivo/collectivo/error.vue

@@ -7,7 +7,10 @@ const error = useError();
     <div
       class="flex flex-row items-center gap-5 rounded-xl p-[25px] bg-white shadow-lg"
     >
-      <UIcon name="i-system-uicons-warning-hex" class="text-6xl text-red-500" />
+      <UIcon
+        name="i-heroicons-exclamation-triangle"
+        class="text-6xl text-red-500"
+      />
       <div v-if="!error">
         <h2>Unknown Error</h2>
         <p>Something went wrong.</p>

collectivo/collectivo/index.d.ts

@@ -31,13 +31,6 @@ declare global {
     tags_users: CollectivoUser[] | number[];
   }
 
-  interface CollectivoTileButton {
-    id: number;
-    tiles_label: string;
-    tiles_path: string;
-    tiles_is_external: boolean;
-  }
-
   interface CollectivoTile {
     id: number;
     sort: number;
@@ -46,6 +39,14 @@ declare global {
     tiles_status: "published" | "draft" | "archived";
     tiles_buttons: CollectivoTileButton[];
     tiles_color: string;
+    tiles_component: string;
+  }
+
+  interface CollectivoTileButton {
+    id: number;
+    tiles_label: string;
+    tiles_path: string;
+    tiles_is_external: boolean;
   }
 
   interface CollectivoExtension {

collectivo/collectivo/layouts/components/MenuItem.vue

@@ -23,34 +23,29 @@ async function filterItem(item: CollectivoMenuItem) {
 
 <template>
   <div v-if="visible">
-    <!-- IF item.to is function -->
     <div v-if="item.click">
-      <a class="item cursor-pointer" @click="item.click()">
-        <span class="item__icon">
-          <slot name="icon">
-            <UIcon v-if="item.icon" :name="item.icon" class="link-icon" />
-          </slot>
-        </span>
+      <a class="item" @click="item.click()">
+        <slot name="icon">
+          <UIcon v-if="item.icon" :name="item.icon" class="item__icon" />
+        </slot>
         <span class="item__title">{{ t(item.label) }}</span>
       </a>
     </div>
     <div v-else-if="item.external">
       <a :href="item.to" :target="item.target ?? '_blank'" class="item">
-        <span class="item__icon">
-          <slot name="icon">
-            <UIcon v-if="item.icon" :name="item.icon" class="link-icon" />
-          </slot>
-        </span>
+        <slot name="icon">
+          <UIcon v-if="item.icon" :name="item.icon" class="item__icon" />
+        </slot>
+
         <span class="item__title">{{ t(item.label) }}</span>
       </a>
     </div>
     <div v-else>
       <NuxtLink :to="item.to" class="item">
-        <span class="item__icon">
-          <slot name="icon">
-            <UIcon v-if="item.icon" :name="item.icon" class="link-icon"
-          /></slot>
-        </span>
+        <slot name="icon">
+          <UIcon v-if="item.icon" :name="item.icon" class="item__icon" />
+        </slot>
+
         <span class="item__title">{{ t(item.label) }}</span>
       </NuxtLink>
     </div>
@@ -59,56 +54,36 @@ async function filterItem(item: CollectivoMenuItem) {
 
 <style lang="scss">
 .item {
-  @apply flex flex-col items-center p-3 mb-1 rounded-xl transition-all;
+  @apply flex flex-col items-center px-3 py-4 mb-2 rounded-xl transition-all cursor-pointer min-w-20;
   &__icon {
-    @apply block mb-1;
+    @apply h-5 w-5 lg:h-6 lg:w-6 mb-2;
   }
 
   &__title {
     @apply md:text-xs lg:text-sm font-semibold;
     letter-spacing: 0.28px;
   }
 
-  &:hover {
-    @apply bg-primary-50;
-    .item__title {
-      @apply text-primary-900;
-    }
-
-    .item__icon {
-      .link-icon {
-        @apply text-primary-900;
-      }
-    }
-  }
-
+  &:hover,
   &.router-link-exact-active {
-    @apply bg-primary-50;
-    .item__title {
-      @apply text-primary-900;
-    }
-
-    .item__icon {
-      .link-icon {
-        @apply text-primary-900;
-      }
-    }
+    @apply bg-primary-50 text-primary-900;
   }
 }
 
-.link-icon {
-  @apply h-7 w-7 md:h-6 lg:h-[30px] md:w-6 lg:w-[30px];
-}
-
 .mobile-menu-item {
   @apply p-0 mb-0;
-  .item__icon {
-    @apply mb-[7px];
-  }
 
-  .item__title {
-    @apply text-xs;
-    letter-spacing: 0.24px;
+  .item {
+    @apply py-2.5 px-2.5 mb-0 mx-0;
+
+    &__icon {
+      @apply mb-1;
+    }
+
+    &__title {
+      @apply text-xs;
+      letter-spacing: 0.24px;
+    }
   }
 
   &.router-link-exact-active {

collectivo/collectivo/layouts/components/MobileHeader.vue

@@ -2,17 +2,53 @@
 import Logo from "./Logo.vue";
 import ProfileMenu from "./ProfileMenu.vue";
 import PageTitle from "./PageTitle.vue";
+
+const pageTitle = useCollectivoTitle();
+const { t } = useI18n();
+
+const scrollY = ref(0);
+
+const updateScroll = () => {
+  scrollY.value = window.scrollY;
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", updateScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", updateScroll);
+});
+
+const headerClass = computed(() =>
+  scrollY.value === 0 ? "mobile-header" : "mobile-header border-bottom",
+);
 </script>
 
 <template>
-  <div class="mobile-header">
-    <PageTitle />
-    <ProfileMenu />
+  <div :class="headerClass">
+    <div class="mobile-page-title">
+      {{ t(pageTitle) }}
+    </div>
+    <div class="pt-[1px]"><ProfileMenu /></div>
   </div>
+  <div class="h-header"></div>
 </template>
 
 <style lang="scss" scoped>
+.mobile-page-title {
+  @apply text-2xl font-bold;
+}
+
+.border-bottom {
+  @apply border-b-[1px] bg-white border-gray-200;
+}
+
+.h-header {
+  @apply h-[60px] md:hidden;
+}
+
 .mobile-header {
-  @apply px-[25px] py-5 md:hidden flex items-center justify-between;
+  @apply h-[68px] px-[25px]  pt-[20px] md:hidden flex items-start justify-between transition fixed top-0 w-full z-10;
 }
 </style>

collectivo/collectivo/layouts/components/MobileMenu.vue

@@ -33,11 +33,8 @@ const publicMenuItems = Object.values(menus.value.public).sort(
 </template>
 
 <style lang="scss" scoped>
-.mobile-menu-item {
-  @apply w-20;
-}
 .mobile-menu {
-  @apply bg-white px-3 pt-2 pb-1 fixed bottom-0 w-full z-10 md:hidden border-t-2 border-gray-500;
+  @apply bg-white px-3 py-[5px] fixed bottom-0 w-full z-10 md:hidden border-t-[1px] border-gray-200;
   box-shadow: 4px 0px 48px 0px rgba(220, 226, 239, 0.5);
 
   &__inner {

collectivo/collectivo/layouts/components/ProfileMenu.vue

@@ -48,30 +48,16 @@ for (const [key, value] of Object.entries(locales)) {
 </script>
 
 <template>
-  <template v-if="!user.isAuthenticated">
-    <UDropdown
-      :items="topRightMenuNoAuthItems"
-      :popper="{ placement: 'bottom-start' }"
-    >
-      <UIcon class="icon" name="i-system-uicons-translate"></UIcon>
+  <UDropdown
+    :items="user.isAuthenticated ? topRightMenuItems : topRightMenuNoAuthItems"
+    :popper="{ placement: 'bottom-start' }"
+  >
+    <UIcon class="icon" name="i-heroicons-bars-3-16-solid" />
 
-      <template #item="{ item }">
-        <span>{{ t(item.label) }}</span>
-      </template>
-    </UDropdown>
-  </template>
-  <template v-else>
-    <UDropdown
-      :items="topRightMenuItems"
-      :popper="{ placement: 'bottom-start' }"
-    >
-      <UIcon class="icon" name="i-system-uicons-user-male-circle" />
-
-      <template #item="{ item }">
-        <span>{{ t(item.label) }}</span>
-      </template>
-    </UDropdown>
-  </template>
+    <template #item="{ item }">
+      <span>{{ t(item.label) }}</span>
+    </template>
+  </UDropdown>
 </template>
 
 <style lang="scss" scoped>