wally-ui 1.12.1 → 1.13.1

package/playground/showcase/src/app/pages/documentation/components/dropdown-menu-docs/dropdown-menu-docs.ts

@@ -0,0 +1,127 @@
+import { Component } from '@angular/core';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { DropdownMenuCodeExamples } from './dropdown-menu-docs.examples';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { Button } from '../../../../components/button/button';
+import { DropdownMenu } from '../../../../components/dropdown-menu/dropdown-menu';
+import { DropdownMenuTrigger } from '../../../../components/dropdown-menu/dropdown-menu-trigger/dropdown-menu-trigger';
+import { DropdownMenuContent } from '../../../../components/dropdown-menu/dropdown-menu-content/dropdown-menu-content';
+import { DropdownMenuItem } from '../../../../components/dropdown-menu/dropdown-menu-item/dropdown-menu-item';
+import { DropdownMenuLabel } from '../../../../components/dropdown-menu/dropdown-menu-label/dropdown-menu-label';
+import { DropdownMenuSeparator } from '../../../../components/dropdown-menu/dropdown-menu-separator/dropdown-menu-separator';
+import { DropdownMenuGroup } from '../../../../components/dropdown-menu/dropdown-menu-group/dropdown-menu-group';
+import { DropdownMenuSub } from '../../../../components/dropdown-menu/dropdown-menu-sub/dropdown-menu-sub';
+import { DropdownMenuSubTrigger } from '../../../../components/dropdown-menu/dropdown-menu-sub-trigger/dropdown-menu-sub-trigger';
+import { DropdownMenuSubContent } from '../../../../components/dropdown-menu/dropdown-menu-sub-content/dropdown-menu-sub-content';
+
+@Component({
+  selector: 'app-dropdown-menu-docs',
+  imports: [
+    Button,
+    Breadcrumb,
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuGroup,
+    DropdownMenuSub,
+    DropdownMenuSubTrigger,
+    DropdownMenuSubContent
+  ],
+  templateUrl: './dropdown-menu-docs.html'
+})
+export class DropdownMenuDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Dropdown Menu' }
+  ];
+
+  installationCode = getFormattedCode(DropdownMenuCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(DropdownMenuCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(DropdownMenuCodeExamples.componentImport, 'typescript');
+
+  basicUsageCode = getFormattedCode(DropdownMenuCodeExamples.basicUsage, 'html');
+  withLabelCode = getFormattedCode(DropdownMenuCodeExamples.withLabel, 'html');
+  withGroupsCode = getFormattedCode(DropdownMenuCodeExamples.withGroups, 'html');
+  withSubmenusCode = getFormattedCode(DropdownMenuCodeExamples.withSubmenus, 'html');
+  withIconsCode = getFormattedCode(DropdownMenuCodeExamples.withIcons, 'html');
+  hoverModeCode = getFormattedCode(DropdownMenuCodeExamples.hoverMode, 'html');
+  positioningCode = getFormattedCode(DropdownMenuCodeExamples.positioning, 'html');
+  disabledItemsCode = getFormattedCode(DropdownMenuCodeExamples.disabledItems, 'html');
+  destructiveActionCode = getFormattedCode(DropdownMenuCodeExamples.destructiveAction, 'html');
+  componentTsCode = getFormattedCode(DropdownMenuCodeExamples.componentTs, 'typescript');
+  realWorldExampleCode = getFormattedCode(DropdownMenuCodeExamples.realWorldExample, 'html');
+  nestedSubmenuExampleCode = getFormattedCode(DropdownMenuCodeExamples.nestedSubmenuExample, 'html');
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  onProfile(): void {
+    console.log('Navigate to profile');
+  }
+
+  onSettings(): void {
+    console.log('Navigate to settings');
+  }
+
+  onBilling(): void {
+    console.log('Navigate to billing');
+  }
+
+  onLogout(): void {
+    console.log('User logged out');
+  }
+
+  onNew(): void {
+    console.log('New action');
+  }
+
+  onOpen(): void {
+    console.log('Open action');
+  }
+
+  onEdit(): void {
+    console.log('Edit action');
+  }
+
+  onDuplicate(): void {
+    console.log('Duplicate action');
+  }
+
+  onArchive(): void {
+    console.log('Archive action');
+  }
+
+  onDelete(): void {
+    console.log('Delete action');
+  }
+
+  onShareEmail(): void {
+    console.log('Share via email');
+  }
+
+  onShareLink(): void {
+    console.log('Copy share link');
+  }
+
+  onShareSocial(): void {
+    console.log('Share on social media');
+  }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

package/playground/showcase/src/app/pages/home/home.html

@@ -1,8 +1,8 @@
 <main class="min-h-dvh subpixel-antialiased font-mono bg-white dark:bg-[#0a0a0a]" role="main">
     <div class="w-full min-h-dvh flex flex-col items-center justify-center px-4 py-12 sm:px-6 md:px-8 lg:px-12">
-        <!-- <div class="w-full max-w-4xl">
+        <div class="w-full max-w-4xl">
             <wally-ai-chat></wally-ai-chat>
-        </div> -->
+        </div>
 
         <article class="w-full max-w-3xl">
             <header class="w-full mb-10 sm:mb-12 space-y-6">
@@ -23,8 +23,9 @@
                 <div class="space-y-3 text-xs sm:text-sm leading-relaxed text-neutral-700 dark:text-neutral-300">
                     <p>
                         <span class="text-neutral-500 dark:text-neutral-500">01: </span>
-                        <strong class="text-[#0a0a0a] dark:text-white">Stop searching for the perfect Angular
-                            components.</strong>
+                        <strong class="text-[#0a0a0a] dark:text-white">
+                            Stop searching for the perfect Angular components.
+                        </strong>
                         Wally UI is a <strong>free, open source design system</strong> built for modern developers and
                         <strong>AI coding assistants</strong>.
                     </p>
@@ -135,13 +136,16 @@
                                         class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white group-hover:text-white dark:group-hover:text-[#0a0a0a] uppercase tracking-wide transition-colors duration-150">
                                         <span aria-hidden="true">&gt;_ </span>Chat SDK
                                     </h4>
-                                    <span class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider" aria-label="Status: Coming Soon">
+                                    <span
+                                        class="text-[10px] font-bold bg-blue-500 text-white px-2 py-1 uppercase tracking-wider"
+                                        aria-label="Status: Coming Soon">
                                         COMING SOON
                                     </span>
                                 </div>
                                 <p
                                     class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-300 dark:group-hover:text-neutral-600 transition-colors duration-150">
-                                    Complete chat development SDK: AI interface with message matrix (ai: 1/2, me: 1/1), streaming data service, and full visual customization using Wally UI components
+                                    Complete chat development SDK: AI interface with message matrix (ai: 1/2, me: 1/1),
+                                    streaming data service, and full visual customization using Wally UI components
                                 </p>
                             </div>
                         </div>