@geniusdynamics/ns8-ui-lib 1.0.2 → 1.0.4

package/dist/src/components/NS/cards/NSBackupCard.vue.d.ts

@@ -4,7 +4,7 @@ interface Backup {
     date: string;
     size: string;
     enabled: boolean;
-    status?: 'success' | 'error' | 'running' | 'pending';
+    status?: "success" | "error" | "running" | "pending";
 }
 interface Status {
     [key: string]: {

package/dist/src/components/NS/empty-state/NSEmptyState.vue.d.ts

@@ -5,8 +5,8 @@ interface Props {
     lottiePath?: string;
     lottieData?: any;
     animationTitle?: string;
-    size?: 'default' | 'sm' | 'lg';
-    variant?: 'default' | 'muted';
+    size?: "default" | "sm" | "lg";
+    variant?: "default" | "muted";
     loop?: boolean | number;
     animateOnHover?: boolean;
     autoPlay?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geniusdynamics/ns8-ui-lib",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Vue 3 library for NethServer 8 UI with TailwindCSS and Shadcn Vue",
   "keywords": [
     "nethserver",

package/src/components/NS/cards/NSBackupCard.vue

@@ -1,111 +1,130 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { Save, AlertCircle, CheckCircle, Loader2, MoreHorizontal } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Skeleton } from '@/components/ui/skeleton'
-import { cn } from '@/lib/utils'
+import { computed } from "vue";
+import {
+  Save,
+  AlertCircle,
+  CheckCircle,
+  Loader2,
+  MoreHorizontal,
+} from "lucide-vue-next";
+import { Button } from "@/components/ui/button";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 
 interface Backup {
-  id: string
-  name: string
-  date: string
-  size: string
-  enabled: boolean
-  status?: 'success' | 'error' | 'running' | 'pending'
+  id: string;
+  name: string;
+  date: string;
+  size: string;
+  enabled: boolean;
+  status?: "success" | "error" | "running" | "pending";
 }
 
 interface Status {
   [key: string]: {
-    success?: boolean
-    message?: string
-  }
+    success?: boolean;
+    message?: string;
+  };
 }
 
 interface Props {
-  title?: string
-  loading?: boolean
-  backups?: Backup[]
-  status?: Status
-  noBackupMessage?: string
-  statusLabel?: string
-  statusSuccessLabel?: string
-  backupDisabledLabel?: string
-  light?: boolean
-  maxHeight?: string
-  class?: string
+  title?: string;
+  loading?: boolean;
+  backups?: Backup[];
+  status?: Status;
+  noBackupMessage?: string;
+  statusLabel?: string;
+  statusSuccessLabel?: string;
+  backupDisabledLabel?: string;
+  light?: boolean;
+  maxHeight?: string;
+  class?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: 'Backup',
+  title: "Backup",
   loading: false,
   backups: () => [],
   status: () => ({}),
-  noBackupMessage: 'No backups available',
-  statusLabel: 'Status',
-  statusSuccessLabel: 'Enabled',
-  backupDisabledLabel: 'Disabled',
+  noBackupMessage: "No backups available",
+  statusLabel: "Status",
+  statusSuccessLabel: "Enabled",
+  backupDisabledLabel: "Disabled",
   light: false,
-})
+});
 
 const emit = defineEmits<{
-  backup: [backupId: string]
-  restore: [backupId: string]
-  delete: [backupId: string]
-  enable: [backupId: string]
-  disable: [backupId: string]
-}>()
+  backup: [backupId: string];
+  restore: [backupId: string];
+  delete: [backupId: string];
+  enable: [backupId: string];
+  disable: [backupId: string];
+}>();
 
-const hasBackups = computed(() => props.backups.length > 0)
-const backupsContainingInstance = computed(() => props.backups.filter(backup => backup.enabled))
-const singleBackup = computed(() => backupsContainingInstance.value.length === 1 ? backupsContainingInstance.value[0] : null)
+const hasBackups = computed(() => props.backups.length > 0);
+const backupsContainingInstance = computed(() =>
+  props.backups.filter((backup) => backup.enabled),
+);
+const singleBackup = computed(() =>
+  backupsContainingInstance.value.length === 1
+    ? backupsContainingInstance.value[0]
+    : null,
+);
 
 const getStatusIcon = (backup: Backup) => {
   switch (backup.status) {
-    case 'success':
-      return CheckCircle
-    case 'error':
-      return AlertCircle
-    case 'running':
-      return Loader2
+    case "success":
+      return CheckCircle;
+    case "error":
+      return AlertCircle;
+    case "running":
+      return Loader2;
     default:
-      return null
+      return null;
   }
-}
+};
 
 const getStatusClass = (backup: Backup) => {
   switch (backup.status) {
-    case 'success':
-      return 'text-green-600'
-    case 'error':
-      return 'text-destructive'
-    case 'running':
-      return 'text-blue-600'
+    case "success":
+      return "text-green-600";
+    case "error":
+      return "text-destructive";
+    case "running":
+      return "text-blue-600";
     default:
-      return 'text-muted-foreground'
+      return "text-muted-foreground";
   }
-}
+};
 
 const containerClasses = computed(() => {
-  return cn('w-full', props.class)
-})
+  return cn("w-full", props.class);
+});
 
 const cardClasses = computed(() => {
   return cn(
-    'transition-all duration-200 hover:shadow-md',
-    props.light ? 'bg-background/95' : 'bg-background'
-  )
-})
+    "transition-all duration-200 hover:shadow-md",
+    props.light ? "bg-background/95" : "bg-background",
+  );
+});
 
 const tableWrapperClasses = computed(() => {
-  return cn('w-full overflow-auto', {
-    'max-h-64': props.maxHeight
-  })
-})
+  return cn("w-full overflow-auto", {
+    "max-h-64": props.maxHeight,
+  });
+});
 
 const tableClasses = computed(() => {
-  return 'w-full min-w-[300px]'
-})
+  return "w-full min-w-[300px]";
+});
 </script>
 
 <template>
@@ -125,7 +144,10 @@ const tableClasses = computed(() => {
       </div>
 
       <!-- No backups state -->
-      <div v-else-if="!hasBackups" class="flex items-center gap-3 text-muted-foreground">
+      <div
+        v-else-if="!hasBackups"
+        class="flex items-center gap-3 text-muted-foreground"
+      >
         <AlertCircle class="h-5 w-5" />
         <span>{{ noBackupMessage }}</span>
       </div>
@@ -138,10 +160,7 @@ const tableClasses = computed(() => {
             <div class="flex items-center justify-between py-2 border-b">
               <span class="text-sm font-medium">{{ statusLabel }}</span>
               <div class="flex items-center gap-2">
-                <span
-                  v-if="!singleBackup.enabled"
-                  class="text-destructive"
-                >
+                <span v-if="!singleBackup.enabled" class="text-destructive">
                   {{ backupDisabledLabel }}
                 </span>
                 <span
@@ -231,7 +250,7 @@ const tableClasses = computed(() => {
                       :class="cn('h-4 w-4', getStatusClass(backup))"
                     />
                     <span :class="getStatusClass(backup)">
-                      {{ backup.status || 'Unknown' }}
+                      {{ backup.status || "Unknown" }}
                     </span>
                   </div>
                 </td>
@@ -269,4 +288,4 @@ const tableClasses = computed(() => {
       </div>
     </CardContent>
   </Card>
-</template>
+</template>

package/src/components/NS/empty-state/NSEmptyState.vue

@@ -1,133 +1,148 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { FileX, Search, InBox, AlertCircle, Info } from 'lucide-vue-next'
-import { NSLottieAnimation } from '@/components/NS/lottie-animation'
-import { cn } from '@/lib/utils'
+import { computed } from "vue";
+import {
+  FileX,
+  Search,
+  AlertCircle,
+  Info,
+  BoxIcon,
+  Inbox,
+} from "lucide-vue-next";
+import { NSLottieAnimation } from "@/components/NS/lottie-animation";
+import { cn } from "@/lib/utils";
 
 interface Props {
-  title?: string
-  description?: string
-  icon?: string | object
-  lottiePath?: string // Path to Lottie JSON file
-  lottieData?: any // Direct Lottie animation data
-  animationTitle?: string
-  size?: 'default' | 'sm' | 'lg'
-  variant?: 'default' | 'muted'
-  loop?: boolean | number
-  animateOnHover?: boolean
-  autoPlay?: boolean
-  class?: string
-  iconClass?: string
-  titleClass?: string
-  descriptionClass?: string
+  title?: string;
+  description?: string;
+  icon?: string | object;
+  lottiePath?: string; // Path to Lottie JSON file
+  lottieData?: any; // Direct Lottie animation data
+  animationTitle?: string;
+  size?: "default" | "sm" | "lg";
+  variant?: "default" | "muted";
+  loop?: boolean | number;
+  animateOnHover?: boolean;
+  autoPlay?: boolean;
+  class?: string;
+  iconClass?: string;
+  titleClass?: string;
+  descriptionClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  title: 'No data available',
-  size: 'default',
-  variant: 'default',
+  title: "No data available",
+  size: "default",
+  variant: "default",
   loop: true,
   animateOnHover: false,
   autoPlay: true,
-})
+});
 
 const DefaultIcon = computed(() => {
   if (props.icon) {
-    return null // Use custom icon
+    return null; // Use custom icon
   }
-  
+
   // Choose appropriate default icon based on title content
-  const title = props.title?.toLowerCase() || ''
-  
-  if (title.includes('search') || title.includes('find') || title.includes('result')) {
-    return Search
-  } else if (title.includes('empty') || title.includes('no') || title.includes('data')) {
-    return FileX
-  } else if (title.includes('message') || title.includes('notification') || title.includes('alert')) {
-    return InBox
-  } else if (title.includes('error') || title.includes('warning')) {
-    return AlertCircle
+  const title = props.title?.toLowerCase() || "";
+
+  if (
+    title.includes("search") ||
+    title.includes("find") ||
+    title.includes("result")
+  ) {
+    return Search;
+  } else if (
+    title.includes("empty") ||
+    title.includes("no") ||
+    title.includes("data")
+  ) {
+    return FileX;
+  } else if (
+    title.includes("message") ||
+    title.includes("notification") ||
+    title.includes("alert")
+  ) {
+    return Inbox;
+  } else if (title.includes("error") || title.includes("warning")) {
+    return AlertCircle;
   } else {
-    return Info
+    return Info;
   }
-})
+});
 
 const iconComponent = computed(() => {
-  if (typeof props.icon === 'object') {
-    return props.icon // Vue component
+  if (typeof props.icon === "object") {
+    return props.icon; // Vue component
   }
-  
-  if (typeof props.icon === 'string') {
+
+  if (typeof props.icon === "string") {
     // Map string to Lucide icons
     const iconMap: Record<string, any> = {
-      'file-x': FileX,
-      'search': Search,
-      'inbox': InBox,
-      'alert-circle': AlertCircle,
-      'info': Info,
-    }
-    
-    return iconMap[props.icon] || DefaultIcon.value
+      "file-x": FileX,
+      search: Search,
+      inbox: Inbox,
+      "alert-circle": AlertCircle,
+      info: Info,
+    };
+
+    return iconMap[props.icon] || DefaultIcon.value;
   }
-  
-  return DefaultIcon.value
-})
+
+  return DefaultIcon.value;
+});
 
 const containerClasses = computed(() => {
   const sizeClasses = {
-    default: 'p-8',
-    sm: 'p-4',
-    lg: 'p-12'
-  }
+    default: "p-8",
+    sm: "p-4",
+    lg: "p-12",
+  };
 
   const variantClasses = {
-    default: 'text-foreground',
-    muted: 'text-muted-foreground'
-  }
+    default: "text-foreground",
+    muted: "text-muted-foreground",
+  };
 
   return cn(
-    'flex flex-col items-center justify-center text-center',
+    "flex flex-col items-center justify-center text-center",
     sizeClasses[props.size],
     variantClasses[props.variant],
-    props.class
-  )
-})
+    props.class,
+  );
+});
 
 const iconClasses = computed(() => {
   const sizeClasses = {
-    default: 'h-16 w-16',
-    sm: 'h-12 w-12',
-    lg: 'h-20 w-20'
-  }
+    default: "h-16 w-16",
+    sm: "h-12 w-12",
+    lg: "h-20 w-20",
+  };
 
-  return cn('text-muted-foreground', sizeClasses[props.size], props.iconClass)
-})
+  return cn("text-muted-foreground", sizeClasses[props.size], props.iconClass);
+});
 
 const titleClasses = computed(() => {
   return cn(
-    'text-lg font-semibold mb-2',
+    "text-lg font-semibold mb-2",
     {
-      'text-foreground': props.variant === 'default',
-      'text-muted-foreground': props.variant === 'muted'
+      "text-foreground": props.variant === "default",
+      "text-muted-foreground": props.variant === "muted",
     },
-    props.titleClass
-  )
-})
+    props.titleClass,
+  );
+});
 
 const descriptionClasses = computed(() => {
   return cn(
-    'text-sm max-w-md mb-6',
+    "text-sm max-w-md mb-6",
     {
-      'text-muted-foreground': props.variant === 'default',
-      'text-muted-foreground/70': props.variant === 'muted'
+      "text-muted-foreground": props.variant === "default",
+      "text-muted-foreground/70": props.variant === "muted",
     },
-    props.descriptionClass
-  )
-})
-
-const hasIconSlot = computed(() => !!$slots.icon)
-const hasDescriptionSlot = computed(() => !!$slots.description)
-const hasActionsSlot = computed(() => !!$slots.actions)
+    props.descriptionClass,
+  );
+});
 </script>
 
 <template>
@@ -147,10 +162,10 @@ const hasActionsSlot = computed(() => !!$slots.actions)
           :play-on-hover="true"
           :stop-on-hover-out="true"
         />
-        
+
         <!-- Custom icon or default Lucide icon -->
         <component
-          v-else-if="iconComponent && !hasIconSlot"
+          v-else-if="iconComponent && !$slots.icon"
           :is="iconComponent"
           :class="iconClasses"
         />
@@ -158,25 +173,19 @@ const hasActionsSlot = computed(() => !!$slots.actions)
     </div>
 
     <!-- Title section -->
-    <h3
-      v-if="title || $slots.title"
-      :class="titleClasses"
-    >
+    <h3 v-if="title || $slots.title" :class="titleClasses">
       <slot name="title">{{ title }}</slot>
     </h3>
 
     <!-- Description section -->
-    <div
-      v-if="hasDescriptionSlot || description"
-      :class="descriptionClasses"
-    >
+    <div v-if="$slots.description || description" :class="descriptionClasses">
       <slot name="description">
         <p>{{ description }}</p>
       </slot>
     </div>
 
     <!-- Actions section -->
-    <div v-if="hasActionsSlot" class="mt-4">
+    <div v-if="$slots.actions" class="mt-4">
       <slot name="actions" />
     </div>
 
@@ -185,4 +194,4 @@ const hasActionsSlot = computed(() => !!$slots.actions)
       <slot name="extra" />
     </div>
   </div>
-</template>
+</template>