mgv-backoffice 1.18.0 → 1.20.0

package/src/components/BaseSidebar.vue

@@ -1,9 +1,19 @@
 <script setup lang="ts">
-import { ref, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline'
+import {
+  Bars3Icon,
+  XMarkIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  MoonIcon,
+  SunIcon,
+  BellIcon,
+} from '@heroicons/vue/24/outline'
 import { useTheme } from '../composables/useTheme'
 import { useMobileSidebar } from '../composables/useMobileSidebar'
+import { useSidebarCollapse } from '../composables/useSidebarCollapse'
+import { useNotifications } from '../composables/useNotifications'
 import type { NavSection } from '../types/sidebar'
 
 interface Props {
@@ -17,6 +27,10 @@ interface Props {
   version?: string
   /** Whether to render the dark/light toggle in the footer. */
   showThemeToggle?: boolean
+  /** Whether to render the desktop collapse toggle (icon-only rail). */
+  collapsible?: boolean
+  /** Whether to render the notifications bell button. */
+  showNotifications?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -24,12 +38,20 @@ const props = withDefaults(defineProps<Props>(), {
   appName: '',
   version: '',
   showThemeToggle: true,
+  collapsible: true,
+  showNotifications: false,
 })
 
 const router = useRouter()
 const route = useRoute()
 const { isDark, toggleTheme } = useTheme()
 const { mobileOpen, close: closeMobile, toggle: toggleMobile } = useMobileSidebar()
+const { collapsed, toggle: toggleCollapsed } = useSidebarCollapse()
+const { unreadCount, togglePanel: toggleNotifications } = useNotifications()
+
+// Whether the icon-only rail styling applies. Only relevant on desktop
+// (`lg:`) — on mobile the sidebar is always the full off-canvas panel.
+const isRail = computed(() => props.collapsible && collapsed.value)
 
 // Refs needed for the mobile focus management.
 const closeMobileButton = ref<HTMLButtonElement | null>(null)
@@ -103,17 +125,21 @@ function navigate(name: string) {
     <aside
       role="navigation"
       aria-label="Main navigation"
-      class="fixed top-0 left-0 h-screen w-60 flex flex-col border-r transition-transform duration-300 lg:pointer-events-auto"
+      class="fixed top-0 left-0 h-screen w-60 flex flex-col border-r transition-all duration-300 lg:pointer-events-auto"
       :class="[
         isDark ? 'bg-gray-900 border-gray-800' : 'bg-white border-gray-200',
         mobileOpen ? 'translate-x-0 z-50' : '-translate-x-full max-lg:pointer-events-none lg:translate-x-0 z-50',
+        collapsible && collapsed ? 'lg:w-16' : 'lg:w-60',
       ]"
     >
       <div class="flex flex-col h-full">
         <!-- Logo -->
-        <div class="px-5 pt-5 pb-4 flex items-center justify-center relative">
+        <div
+          class="px-5 pt-5 pb-4 flex items-center justify-center relative"
+          :class="{ 'lg:px-2': isRail }"
+        >
           <button type="button" @click="goHome" class="cursor-pointer" aria-label="Go to home">
-            <slot name="logo" :size="52" />
+            <slot name="logo" :size="isRail ? 36 : 52" />
           </button>
           <button
             ref="closeMobileButton"
@@ -130,7 +156,10 @@ function navigate(name: string) {
         <!-- Nav -->
         <nav class="flex-1 overflow-y-auto px-3 space-y-6">
           <div v-for="section in sections" :key="section.title">
-            <p class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+            <p
+              class="px-2 mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500"
+              :class="{ 'lg:hidden': isRail }"
+            >
               {{ section.title }}
             </p>
             <ul class="space-y-0.5">
@@ -138,27 +167,64 @@ function navigate(name: string) {
                 <button
                   type="button"
                   :aria-current="isActive(item.name) ? 'page' : undefined"
+                  :title="isRail ? item.label : undefined"
                   @click="navigate(item.name)"
                   class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors w-full text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-                  :class="isActive(item.name)
-                    ? (isDark
-                        ? 'bg-emerald-500/15 text-emerald-300'
-                        : 'bg-emerald-50 text-emerald-700')
-                    : (isDark
-                        ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
-                        : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100')"
+                  :class="[
+                    isActive(item.name)
+                      ? (isDark
+                          ? 'bg-emerald-500/15 text-emerald-300'
+                          : 'bg-emerald-50 text-emerald-700')
+                      : (isDark
+                          ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                          : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'),
+                    { 'lg:justify-center': isRail },
+                  ]"
                 >
                   <component :is="item.icon" class="w-[18px] h-[18px] shrink-0" />
-                  {{ item.label }}
+                  <span :class="{ 'lg:hidden': isRail }">{{ item.label }}</span>
                 </button>
               </li>
             </ul>
           </div>
         </nav>
 
-        <!-- Bottom: Theme toggle, status slot, footer slot -->
+        <!-- Bottom: Notifications, theme toggle, status slot, footer slot -->
         <div class="px-4 py-4 border-t transition-colors space-y-3"
           :class="isDark ? 'border-gray-800' : 'border-gray-200'">
+          <!--
+            Notifications bell: toggles the shared `BaseNotificationPanel`
+            (via useNotifications). The unread badge reads the same shared
+            count. Drop a `<BaseNotificationPanel />` in your layout to
+            render the panel itself.
+          -->
+          <button
+            v-if="showNotifications"
+            type="button"
+            @click="toggleNotifications"
+            title="Notifications"
+            :aria-label="unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications'"
+            class="relative flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="[
+              isDark
+                ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
+              { 'lg:justify-center': isRail },
+            ]"
+          >
+            <span class="relative shrink-0">
+              <BellIcon class="w-[18px] h-[18px]" aria-hidden="true" />
+              <!-- Unread badge -->
+              <span
+                v-if="unreadCount > 0"
+                class="absolute -top-1.5 -right-1.5 min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-semibold leading-4 text-center"
+              >
+                {{ unreadCount > 99 ? '99+' : unreadCount }}
+              </span>
+            </span>
+            <span :class="{ 'lg:hidden': isRail }">Notifications</span>
+          </button>
+
           <button
             v-if="showThemeToggle"
             type="button"
@@ -167,38 +233,81 @@ function navigate(name: string) {
             :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
             :aria-pressed="isDark"
             class="flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
-            :class="isDark
-              ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
-              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'"
+            :class="[
+              isDark
+                ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
+              { 'lg:justify-center': isRail },
+            ]"
           >
-            {{ isDark ? 'Switch to light' : 'Switch to dark' }}
+            <!-- Icon stand-in shown only on the collapsed desktop rail. -->
+            <component
+              :is="isDark ? SunIcon : MoonIcon"
+              class="hidden w-[18px] h-[18px] shrink-0"
+              :class="{ 'lg:block': isRail }"
+              aria-hidden="true"
+            />
+            <span :class="{ 'lg:hidden': isRail }">{{ isDark ? 'Switch to light' : 'Switch to dark' }}</span>
             <span class="ml-auto relative w-9 h-5 rounded-full transition-colors"
-              :class="isDark ? 'bg-emerald-600' : 'bg-gray-300'">
+              :class="[isDark ? 'bg-emerald-600' : 'bg-gray-300', { 'lg:hidden': isRail }]">
               <span class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300"
                 :class="isDark ? 'translate-x-4' : 'translate-x-0'" />
             </span>
           </button>
 
+          <!--
+            Desktop-only collapse toggle: shrinks the sidebar to an
+            icon-only rail. Hidden on mobile, where the off-canvas menu is
+            controlled by the open/close buttons instead.
+          -->
+          <button
+            v-if="collapsible"
+            type="button"
+            @click="toggleCollapsed"
+            :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+            :aria-pressed="collapsed"
+            class="hidden lg:flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            :class="[
+              isDark
+                ? 'text-gray-400 hover:text-gray-100 hover:bg-gray-800'
+                : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100',
+              { 'lg:justify-center': isRail },
+            ]"
+          >
+            <component
+              :is="collapsed ? ChevronDoubleRightIcon : ChevronDoubleLeftIcon"
+              class="w-[18px] h-[18px] shrink-0"
+              aria-hidden="true"
+            />
+            <span :class="{ 'lg:hidden': isRail }">Collapse</span>
+          </button>
+
           <!--
             `status` slot: consumers drop in their own indicator (e.g.
             health check, sync status). The wrapper handles spacing only.
+            Hidden on the collapsed desktop rail where there's no room.
           -->
-          <slot name="status" />
+          <div :class="{ 'lg:hidden': isRail }">
+            <slot name="status" />
+          </div>
 
           <!--
             `footer` slot: links / version / etc. If not provided and
             either `appName` or `version` is set, we render a default
-            "appName vVersion" line.
+            "appName vVersion" line. Hidden on the collapsed desktop rail.
           -->
-          <slot name="footer">
-            <div
-              v-if="appName || version"
-              class="flex items-center justify-center gap-2 text-xs"
-              :class="isDark ? 'text-gray-500' : 'text-gray-500'"
-            >
-              <span>{{ appName }}<template v-if="appName && version"> </template><template v-if="version">v{{ version }}</template></span>
-            </div>
-          </slot>
+          <div :class="{ 'lg:hidden': isRail }">
+            <slot name="footer">
+              <div
+                v-if="appName || version"
+                class="flex items-center justify-center gap-2 text-xs"
+                :class="isDark ? 'text-gray-500' : 'text-gray-500'"
+              >
+                <span>{{ appName }}<template v-if="appName && version"> </template><template v-if="version">v{{ version }}</template></span>
+              </div>
+            </slot>
+          </div>
         </div>
       </div>
     </aside>

package/src/composables/useNotifications.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useNotifications } from './useNotifications'
+
+describe('useNotifications', () => {
+  beforeEach(() => {
+    // Singleton state persists across tests — reset it each time.
+    const { clear, closePanel } = useNotifications()
+    clear()
+    closePanel()
+  })
+
+  it('counts only unread notifications', () => {
+    const { setNotifications, unreadCount } = useNotifications()
+    setNotifications([
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b', read: true },
+      { id: 3, title: 'c' },
+    ])
+    expect(unreadCount.value).toBe(2)
+  })
+
+  it('markAllRead clears the unread count', () => {
+    const { setNotifications, markAllRead, unreadCount } = useNotifications()
+    setNotifications([
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+    ])
+    expect(unreadCount.value).toBe(2)
+    markAllRead()
+    expect(unreadCount.value).toBe(0)
+  })
+
+  it('markRead marks a single notification read', () => {
+    const { setNotifications, markRead, unreadCount } = useNotifications()
+    setNotifications([
+      { id: 1, title: 'a' },
+      { id: 2, title: 'b' },
+    ])
+    markRead(1)
+    expect(unreadCount.value).toBe(1)
+  })
+
+  it('add prepends newest-first and remove deletes by id', () => {
+    const { add, remove, notifications } = useNotifications()
+    add({ id: 1, title: 'first' })
+    add({ id: 2, title: 'second' })
+    expect(notifications.value.map((n) => n.id)).toEqual([2, 1])
+    remove(1)
+    expect(notifications.value.map((n) => n.id)).toEqual([2])
+  })
+
+  it('toggles and sets the panel open state', () => {
+    const { open, openPanel, closePanel, togglePanel } = useNotifications()
+    expect(open.value).toBe(false)
+    openPanel()
+    expect(open.value).toBe(true)
+    togglePanel()
+    expect(open.value).toBe(false)
+    togglePanel()
+    expect(open.value).toBe(true)
+    closePanel()
+    expect(open.value).toBe(false)
+  })
+})

package/src/composables/useNotifications.ts

@@ -0,0 +1,81 @@
+import { ref, computed } from 'vue'
+import type { NotificationItem } from '../types/notification'
+
+/**
+ * Shared notification state for the sidebar bell + `BaseNotificationPanel`.
+ *
+ * Module-scoped singleton (mirrors useMobileSidebar / useToast) so the
+ * sidebar's unread badge, the bell's open/close toggle, and the panel all
+ * read and mutate the same source. The consuming app owns the data: call
+ * `setNotifications()` (or `add()`) to feed it in.
+ *
+ * There's only ever one notification surface per app, so a singleton is
+ * the right shape here.
+ */
+const notifications = ref<NotificationItem[]>([])
+const open = ref(false)
+
+const unreadCount = computed(
+  () => notifications.value.filter((n) => !n.read).length,
+)
+
+export function useNotifications() {
+  function openPanel() {
+    open.value = true
+  }
+  function closePanel() {
+    open.value = false
+  }
+  function togglePanel() {
+    open.value = !open.value
+  }
+
+  /** Replace the whole list (typical after a fetch). */
+  function setNotifications(items: NotificationItem[]) {
+    notifications.value = items
+  }
+
+  /** Prepend a single notification (newest first). */
+  function add(item: NotificationItem) {
+    notifications.value = [item, ...notifications.value]
+  }
+
+  /** Remove one by id. */
+  function remove(id: NotificationItem['id']) {
+    notifications.value = notifications.value.filter((n) => n.id !== id)
+  }
+
+  /** Mark a single notification read. */
+  function markRead(id: NotificationItem['id']) {
+    notifications.value = notifications.value.map((n) =>
+      n.id === id ? { ...n, read: true } : n,
+    )
+  }
+
+  /** Mark every notification read (clears the badge). */
+  function markAllRead() {
+    notifications.value = notifications.value.map((n) =>
+      n.read ? n : { ...n, read: true },
+    )
+  }
+
+  /** Remove every notification. */
+  function clear() {
+    notifications.value = []
+  }
+
+  return {
+    notifications,
+    unreadCount,
+    open,
+    openPanel,
+    closePanel,
+    togglePanel,
+    setNotifications,
+    add,
+    remove,
+    markRead,
+    markAllRead,
+    clear,
+  }
+}

package/src/composables/useSidebarCollapse.ts

@@ -0,0 +1,64 @@
+import { ref, watch, effectScope } from 'vue'
+
+/**
+ * Shared collapsed/expanded state for the desktop sidebar.
+ *
+ * Module-scoped singleton (mirrors useMobileSidebar) so `BaseSidebar` and
+ * the page layout (`BaseAppLayout`, which offsets `<main>` by the sidebar
+ * width) stay in sync. When collapsed, the sidebar shrinks to an icon-only
+ * rail on desktop.
+ *
+ * The preference is persisted to localStorage. The first consumer can pass
+ * an options object to override the key; subsequent callers reuse the same
+ * singleton and the option is only consulted on the first call.
+ */
+export interface UseSidebarCollapseOptions {
+  /** localStorage key used to persist the preference. */
+  storageKey?: string
+}
+
+const collapsed = ref(false)
+
+let initialized = false
+let configuredStorageKey = 'mgv-sidebar-collapsed'
+
+function initialize(storageKey: string) {
+  if (initialized) {
+    return
+  }
+  initialized = true
+  configuredStorageKey = storageKey
+
+  if (typeof window !== 'undefined') {
+    const saved = window.localStorage?.getItem(configuredStorageKey)
+    if (saved) {
+      collapsed.value = saved === 'true'
+    }
+
+    // Detached scope so the persistence watcher lives for the app's
+    // lifetime and is NOT torn down when the first consuming component
+    // unmounts.
+    const scope = effectScope(true)
+    scope.run(() => {
+      watch(collapsed, (value) => {
+        window.localStorage?.setItem(configuredStorageKey, String(value))
+      })
+    })
+  }
+}
+
+export function useSidebarCollapse(options?: UseSidebarCollapseOptions) {
+  initialize(options?.storageKey ?? configuredStorageKey)
+
+  function collapse() {
+    collapsed.value = true
+  }
+  function expand() {
+    collapsed.value = false
+  }
+  function toggle() {
+    collapsed.value = !collapsed.value
+  }
+
+  return { collapsed, collapse, expand, toggle }
+}

package/src/index.ts

@@ -30,6 +30,9 @@ export { default as BasePageHeader } from './components/BasePageHeader.vue'
 export { default as BaseToolbarButton } from './components/BaseToolbarButton.vue'
 export { default as BaseActionButton } from './components/BaseActionButton.vue'
 export { default as BaseCopyButton } from './components/BaseCopyButton.vue'
+export { default as BaseGoogleSignInButton } from './components/BaseGoogleSignInButton.vue'
+export { default as BaseLoginForm } from './components/BaseLoginForm.vue'
+export { default as BaseNotificationPanel } from './components/BaseNotificationPanel.vue'
 
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
@@ -40,6 +43,9 @@ export { useEscapeKey } from './composables/useEscapeKey'
 export { useDebouncedRef } from './composables/useDebounce'
 export { useToast } from './composables/useToast'
 export { useMobileSidebar } from './composables/useMobileSidebar'
+export { useSidebarCollapse } from './composables/useSidebarCollapse'
+export type { UseSidebarCollapseOptions } from './composables/useSidebarCollapse'
+export { useNotifications } from './composables/useNotifications'
 
 // Enums
 export { AlertEnum } from './enums/AlertEnum'
@@ -57,6 +63,8 @@ export { PositioningEnum } from './enums/PositioningEnum'
 export type { BreadCrumb } from './components/BaseBreadcrumb.vue'
 export type { NavItem, NavSection } from './types/sidebar'
 export type { EntityPickerItem } from './types/entityPicker'
+export type { LoginCredentials } from './types/auth'
+export type { NotificationItem } from './types/notification'
 
 // Utils
 export { getBaseColor, getBaseColorOf } from './utils/util'

package/src/types/auth.ts

@@ -0,0 +1,11 @@
+/**
+ * Credentials emitted by `BaseLoginForm` on submit.
+ *
+ * `remember` is only present when the form is rendered with the
+ * "remember me" checkbox enabled.
+ */
+export interface LoginCredentials {
+  email: string
+  password: string
+  remember?: boolean
+}

package/src/types/notification.ts

@@ -0,0 +1,20 @@
+/**
+ * A single entry rendered in `BaseNotificationPanel` and counted by the
+ * sidebar's unread badge.
+ *
+ *   • `id`      — stable key, used for list rendering and mark/remove ops.
+ *   • `title`   — bold headline line.
+ *   • `message` — optional secondary line.
+ *   • `time`    — optional pre-formatted timestamp (e.g. "2h ago"). The
+ *                 library does not format dates for you.
+ *   • `read`    — unread entries are highlighted and count toward the badge.
+ *   • `type`    — drives the small status dot colour.
+ */
+export interface NotificationItem {
+  id: string | number
+  title: string
+  message?: string
+  time?: string
+  read?: boolean
+  type?: 'info' | 'success' | 'warning' | 'error'
+}

package/dist/src/components/BaseAppLayout.vue.d.ts

@@ -1,31 +0,0 @@
-interface Props {
-    /**
-     * Whether the sidebar should currently be rendered. Defaults to true.
-     * Set to false for routes that should occupy the full viewport (e.g.
-     * landing / marketing pages).
-     */
-    showSidebar?: boolean;
-    /** Skip-link label. Defaults to "Skip to main content". */
-    skipLinkLabel?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        sidebar?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    showSidebar: boolean;
-    skipLinkLabel: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/src/components/BasePageHeader.vue.d.ts

@@ -1,31 +0,0 @@
-type IconColor = 'emerald' | 'sky' | 'red' | 'amber';
-type __VLS_Props = {
-    title: string;
-    subtitle?: string;
-    iconColor?: IconColor;
-    maxWidthClass?: string;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        icon?(_: {
-            iconClass: string;
-        }): any;
-        actions?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    subtitle: string;
-    maxWidthClass: string;
-    iconColor: IconColor;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/src/components/BaseSidebar.vue.d.ts

@@ -1,46 +0,0 @@
-import { NavSection } from '../types/sidebar';
-interface Props {
-    /** Nav sections (groups of items). */
-    sections: NavSection[];
-    /** Route name to navigate to when the logo / home button is clicked. */
-    homeRouteName?: string;
-    /** Optional app name shown in the footer next to the version. */
-    appName?: string;
-    /** Optional version string shown in the footer. */
-    version?: string;
-    /** Whether to render the dark/light toggle in the footer. */
-    showThemeToggle?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        logo?(_: {
-            size: number;
-        }): any;
-        logo?(_: {
-            size: number;
-        }): any;
-        status?(_: {}): any;
-        footer?(_: {}): any;
-    };
-    refs: {
-        closeMobileButton: HTMLButtonElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
-    homeRouteName: string;
-    appName: string;
-    version: string;
-    showThemeToggle: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    closeMobileButton: HTMLButtonElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/src/components/ColoredSquares.vue.d.ts

@@ -1,27 +0,0 @@
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    color: {
-        type: StringConstructor;
-        required: false;
-    };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    color: {
-        type: StringConstructor;
-        required: false;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};