npm - wally-ui - Versions diffs - 1.8.0 → 1.10.0 - Mend

wally-ui 1.8.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html CHANGED Viewed

@@ -70,6 +70,10 @@
           <wally-button [loading]="true">
             Loading
           </wally-button>
+          <wally-button variant="primary">Primary Button</wally-button>
+          <wally-button variant="secondary">Secondary Button</wally-button>
+          <wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
+          <wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
           <div class="w-full flex justify-center items-center gap-2">
             <div class="w-full">
@@ -134,6 +138,45 @@
       </div>
     </section>
+    <!-- Button Variants -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
+        Button Variants
+      </h2>
+      <div class="space-y-8">
+        <!-- Primary Variant -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
+            Primary (Default)
+          </h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="primaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-button variant="primary">Primary Button</wally-button>
+          </div>
+        </div>
+        <!-- Secondary Variant -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">
+            Secondary
+          </h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="secondaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <div class="flex flex-col gap-2">
+              <wally-button variant="secondary">Secondary Button</wally-button>
+              <wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
+              <wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
     <!-- States -->
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
@@ -287,8 +330,10 @@
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button ariaLabel="Save document">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="size-5">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
               </svg>
             </wally-button>
           </div>
@@ -318,65 +363,101 @@
               Processing...
             </wally-button>
           </div>
-          <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
-            Automatically sets <code class="bg-gray-200 dark:bg-[#121212] px-1 py-0.5 rounded text-xs">aria-busy="true"</code> when loading
-          </p>
         </div>
       </div>
     </section>
-    <!-- Properties -->
+    <!-- API Reference -->
     <section class="mb-8">
-      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
-      <div class="space-y-4">
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyTypeCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyDisabledCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Whether the button is disabled</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyLoadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner when true</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyShowNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyAriaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Accessible label for screen readers (essential for icon-only buttons)</p>
-        </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyAriaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Indicates pressed state for toggle buttons</p>
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">API Reference</h2>
+      <div class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-gray-50 dark:bg-gray-900">
+              <tr>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
+                <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">'button'</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">HTML button type (button, submit, reset)</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">variant</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">'primary' | 'secondary'</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">'primary'</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Button visual style variant</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Whether the button is disabled</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables button</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">showNotification</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Shows notification badge indicator</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers (essential for icon-only buttons)</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaPressed</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean | undefined</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">undefined</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">Indicates pressed state for toggle buttons</td>
+              </tr>
+              <tr>
+                <td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaDescribedBy</td>
+                <td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
+                <td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
+                <td class="p-4 text-gray-700 dark:text-gray-300">References element(s) that describe the button</td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+      </div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyAriaDescribedByCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      <!-- Events Table -->
+      <div class="mt-6">
+        <h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Events</h3>
+        <div class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900">
+                <tr>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Event</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Payload</th>
+                  <th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td class="p-4 font-mono text-blue-600 dark:text-blue-400">click</td>
+                  <td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
+                  <td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">References element(s) that describe the button</p>
         </div>
       </div>
     </section>
@@ -388,11 +469,11 @@
       <div class="space-y-4">
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
           <div class="flex items-center gap-2 mb-2">
-            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Button Variants</h3>
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Additional Button Variants</h3>
             <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">
-            Multiple button styles including outline, ghost, destructive, and secondary variants.
+            Additional button styles including outline, ghost, and destructive variants.
           </p>
         </div>

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts CHANGED Viewed

@@ -29,6 +29,10 @@ export class ButtonDocs {
   importCode = getFormattedCode(ButtonCodeExamples.import, 'typescript');
   componentImportCode = getFormattedCode(ButtonCodeExamples.componentImport, 'typescript');
   basicUsageTemplateCode = getFormattedCode(ButtonCodeExamples.basicUsage, 'html');
+  // Variants
+  primaryVariantCode = getFormattedCode(ButtonCodeExamples.primaryVariant, 'html');
+  secondaryVariantCode = getFormattedCode(ButtonCodeExamples.secondaryVariant, 'html');
   disabledCode = getFormattedCode(ButtonCodeExamples.disabled, 'html');
   loadingCode = getFormattedCode(ButtonCodeExamples.loading, 'html');
   notificationCode = getFormattedCode(ButtonCodeExamples.notification, 'html');

package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.examples.ts CHANGED Viewed

@@ -18,6 +18,45 @@ export const CarouselCodeExamples = {
   <div>Item 2</div>
 </wally-carousel>`,
+  // With navigation indicators
+  withNavigationIndicators: `<wally-carousel [isNavigationIndicator]="true">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</wally-carousel>`,
+  // Image carousel
+  imageCarousel: `<div class="w-full h-80">
+  <wally-carousel>
+    <div class="w-full h-full">
+      <img src="/api/placeholder/600/320" alt="Image 1" class="w-full h-full object-cover">
+    </div>
+    <div class="w-full h-full">
+      <img src="/api/placeholder/600/320" alt="Image 2" class="w-full h-full object-cover">
+    </div>
+    <div class="w-full h-full">
+      <img src="/api/placeholder/600/320" alt="Image 3" class="w-full h-full object-cover">
+    </div>
+  </wally-carousel>
+</div>`,
+  // Product showcase
+  productShowcase: `<div class="w-full h-96">
+  <wally-carousel>
+    <div class="w-full h-full bg-white border-2 border-gray-200 rounded-lg p-6 flex flex-col items-center justify-center">
+      <div class="w-20 h-20 bg-blue-500 rounded-lg mb-4"></div>
+      <h3 class="text-lg font-semibold text-gray-900">Product A</h3>
+      <p class="text-gray-600 text-center">Amazing features and benefits</p>
+      <span class="text-xl font-bold text-blue-600 mt-2">$99</span>
+    </div>
+    <div class="w-full h-full bg-white border-2 border-gray-200 rounded-lg p-6 flex flex-col items-center justify-center">
+      <div class="w-20 h-20 bg-green-500 rounded-lg mb-4"></div>
+      <h3 class="text-lg font-semibold text-gray-900">Product B</h3>
+      <p class="text-gray-600 text-center">Premium quality guaranteed</p>
+      <span class="text-xl font-bold text-green-600 mt-2">$149</span>
+    </div>
+  </wally-carousel>
+</div>`,
   // Custom content example
   customContent: `<wally-carousel>
   <div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
@@ -30,19 +69,64 @@ export const CarouselCodeExamples = {
   </div>
 </wally-carousel>`,
-  // Properties
-  properties: `// Component properties
-// The carousel automatically detects child elements and creates navigation
-// Currently no input properties - content projection only
-// Available interactions:
-// • Click navigation buttons (Previous/Next)
-// • Click dot indicators for direct navigation
-// • Touch/swipe gestures on mobile and desktop
-// • Keyboard navigation (Arrow keys, Home, End)
-// Auto-detected features:
-totalItemsCount: number;              // Automatically set based on child elements
-currentVisibleItemIndex: number;     // Currently visible slide index (0-based)
-navigationDotsArray: any[];          // Auto-generated dot indicators`
+  // Responsive design example
+  responsiveExample: `<!-- Different sizes for different use cases -->
+<!-- Hero carousel - full width, tall -->
+<div class="w-full h-96">
+  <wally-carousel>
+    <div>Hero slide 1</div>
+    <div>Hero slide 2</div>
+  </wally-carousel>
+</div>
+<!-- Product gallery - square aspect ratio -->
+<div class="w-full aspect-square max-w-md">
+  <wally-carousel>
+    <div>Product image 1</div>
+    <div>Product image 2</div>
+  </wally-carousel>
+</div>
+<!-- Mobile testimonials - compact -->
+<div class="w-full h-48 sm:h-64">
+  <wally-carousel>
+    <div>Testimonial 1</div>
+    <div>Testimonial 2</div>
+  </wally-carousel>
+</div>`,
+  // Individual properties
+  propertyIsNavigationIndicator: `isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);`,
+  propertyTotalItemsCount: `totalItemsCount: number (read-only);`,
+  propertyCurrentVisibleItemIndex: `currentVisibleItemIndex: number (read-only);`,
+  propertyNavigationIndicatorsArray: `navigationIndicatorsArray: any[] (read-only);`,
+  // API Methods
+  apiMethods: `// Public navigation methods
+navigateToNextItem(): void;           // Go to next slide
+navigateToPreviousItem(): void;       // Go to previous slide
+navigateToSpecificItem(index: number): void;  // Jump to specific slide
+// Public calculation methods
+calculateNextItemIndex(current: number): number;     // Get next index
+calculatePreviousItemIndex(current: number): number; // Get previous index
+// Public positioning methods
+updateItemElementPosition(element: HTMLElement, index: number): void;
+updateAllItemElementPositions(): void;`,
+  // Keyboard shortcuts
+  keyboardShortcuts: `// Keyboard navigation (when carousel is focused)
+ArrowLeft  → Previous slide
+ArrowRight → Next slide
+Home       → First slide
+End        → Last slide`,
+  // Touch gestures
+  touchGestures: `// Touch and mouse gestures
+Swipe Left  → Next slide
+Swipe Right → Previous slide
+Click Dots  → Jump to specific slide
+Drag        → Same as swipe (desktop)`
 };