qdadm 0.55.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -29,7 +29,7 @@
     "./utils": "./src/utils/index.js",
     "./modules/debug": "./src/modules/debug/index.js",
     "./styles": "./src/styles/index.scss",
-    "./styles/breakpoints": "./src/styles/_breakpoints.scss",
+    "./styles/variables": "./src/styles/_variables.scss",
     "./gen": "./src/gen/index.js",
     "./gen/vite-plugin": "./src/gen/vite-plugin.js"
   },

package/src/components/InfoBanner.vue

@@ -0,0 +1,96 @@
+<script setup>
+/**
+ * InfoBanner - Consistent message banner component
+ *
+ * Wraps PrimeVue Message with standardized styling and icon support.
+ *
+ * @example
+ * // Simple usage
+ * <InfoBanner severity="warn">
+ *   Settings will be lost on refresh.
+ * </InfoBanner>
+ *
+ * // With custom icon
+ * <InfoBanner severity="success" icon="pi-check-circle">
+ *   Operation completed successfully.
+ * </InfoBanner>
+ *
+ * // Without icon
+ * <InfoBanner severity="info" :icon="false">
+ *   Just some information.
+ * </InfoBanner>
+ */
+import Message from 'primevue/message'
+import { computed } from 'vue'
+
+const props = defineProps({
+  // Severity level: info, success, warn, error, secondary, contrast
+  severity: {
+    type: String,
+    default: 'info',
+    validator: (v) => ['info', 'success', 'warn', 'error', 'secondary', 'contrast'].includes(v)
+  },
+  // Custom icon class (e.g., 'pi-user'). Set to false to hide icon.
+  icon: {
+    type: [String, Boolean],
+    default: null
+  },
+  // Allow closing the banner
+  closable: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Default icons per severity
+const defaultIcons = {
+  info: 'pi-info-circle',
+  success: 'pi-check-circle',
+  warn: 'pi-exclamation-triangle',
+  error: 'pi-times-circle',
+  secondary: 'pi-info-circle',
+  contrast: 'pi-info-circle'
+}
+
+const iconClass = computed(() => {
+  if (props.icon === false) return null
+  if (props.icon) return `pi ${props.icon}`
+  return `pi ${defaultIcons[props.severity]}`
+})
+</script>
+
+<template>
+  <Message
+    :severity="severity"
+    :closable="closable"
+    class="info-banner"
+  >
+    <div class="info-banner-content">
+      <i v-if="iconClass" :class="iconClass" class="info-banner-icon"></i>
+      <span class="info-banner-text">
+        <slot />
+      </span>
+    </div>
+  </Message>
+</template>
+
+<style scoped>
+.info-banner-content {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.info-banner-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.info-banner-text {
+  flex: 1;
+}
+
+.info-banner-text :deep(strong) {
+  font-weight: 600;
+}
+</style>

package/src/components/display/BannerZone.vue

@@ -0,0 +1,61 @@
+<script setup>
+/**
+ * BannerZone - Renders programmatic banners from useInfoBanner
+ *
+ * Place this component where you want banners to appear (typically
+ * at the top of page content).
+ *
+ * @example
+ * <template>
+ *   <div class="page-content">
+ *     <BannerZone />
+ *     <!-- rest of page content -->
+ *   </div>
+ * </template>
+ */
+import { useInfoBanner } from '../../composables/useInfoBanner.js'
+import InfoBanner from '../InfoBanner.vue'
+
+const { banners, hideBanner } = useInfoBanner()
+</script>
+
+<template>
+  <TransitionGroup name="banner" tag="div" class="banner-zone">
+    <InfoBanner
+      v-for="banner in banners"
+      :key="banner.id"
+      :severity="banner.severity"
+      :icon="banner.icon"
+      :closable="banner.closable"
+      @close="hideBanner(banner.id)"
+    >
+      <span v-html="banner.message"></span>
+    </InfoBanner>
+  </TransitionGroup>
+</template>
+
+<style scoped>
+.banner-zone {
+  position: relative;
+}
+
+/* Transition animations */
+.banner-enter-active,
+.banner-leave-active {
+  transition: all 0.3s ease;
+}
+
+.banner-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.banner-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.banner-move {
+  transition: transform 0.3s ease;
+}
+</style>

package/src/components/index.js

@@ -10,6 +10,7 @@ export { default as PageHeader } from './layout/PageHeader.vue'
 export { default as Breadcrumb } from './layout/Breadcrumb.vue'
 export { default as PageNav } from './layout/PageNav.vue'
 export { default as Zone } from './layout/Zone.vue'
+export { default as SidebarBox } from './layout/SidebarBox.vue'
 
 // Default zone components
 export { default as DefaultHeader } from './layout/defaults/DefaultHeader.vue'
@@ -59,6 +60,8 @@ export { default as EmptyState } from './display/EmptyState.vue'
 export { default as IntensityBar } from './display/IntensityBar.vue'
 export { default as BoolCell } from './BoolCell.vue'
 export { default as SeverityTag } from './SeverityTag.vue'
+export { default as InfoBanner } from './InfoBanner.vue'
+export { default as BannerZone } from './display/BannerZone.vue'
 
 // Pages
 export { default as LoginPage } from './pages/LoginPage.vue'