npm - wally-ui - Versions diffs - 1.2.1 → 1.4.0 - Mend

wally-ui 1.2.1 → 1.4.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 (41) hide show

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

@@ -13,7 +13,7 @@
                 standalone architecture and Tailwind CSS that integrate seamlessly with your projects.
             </p>
         </div>
         <div class="w-full max-w-md">
             <code
                 class="w-full mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
@@ -23,18 +23,23 @@
         </div>
         <div class="mt-4 w-full max-w-md flex flex-col gap-2">
-            <a href="/components" class="text-blue-500 underline">
+            <a href="/documentation" class="text-blue-500 underline">
                 Documentation
             </a>
+            <a href="/documentation/components" class="text-blue-500 underline">
+                Components
+            </a>
             <a href="/mcp" class="text-blue-500 underline">
                 MCP Server
             </a>
             <div class="flex gap-4 mt-2">
-                <a href="https://github.com/WalissonCF/wally-ui" target="_blank" class="text-blue-500 underline text-sm">
+                <a href="https://github.com/WalissonCF/wally-ui" target="_blank"
+                    class="text-blue-500 underline text-sm">
                     GitHub
                 </a>
-                <a href="https://www.npmjs.com/package/wally-ui" target="_blank" class="text-blue-500 underline text-sm">
+                <a href="https://www.npmjs.com/package/wally-ui" target="_blank"
+                    class="text-blue-500 underline text-sm">
                     NPM
                 </a>
             </div>

package/playground/showcase/src/app/pages/home/home.ts CHANGED Viewed

@@ -6,6 +6,4 @@ import { Component } from '@angular/core';
   templateUrl: './home.html',
   styleUrl: './home.css'
 })
-export class Home {
-}
+export class Home {}

package/playground/showcase/src/app/pages/mcp/mcp.html CHANGED Viewed

@@ -188,7 +188,7 @@
       <a href="https://modelcontextprotocol.io/" target="_blank" class="text-blue-500 underline hover:text-blue-700">
         Model Context Protocol
       </a>
-      <a href="/components" class="text-blue-500 underline hover:text-blue-700">
+      <a href="/documentation/components" class="text-blue-500 underline hover:text-blue-700">
         Browse Components
       </a>
     </div>

package/playground/showcase/src/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
-  <title>Showcase</title>
+  <title>Wally UI</title>
   <base href="/">
   <script>
@@ -16,7 +16,13 @@
     );
   </script>
+  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
+    crossorigin="anonymous"></script>
+  <meta name="robots" content="index, follow">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Wally UI - Angular component library">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

package/playground/showcase/src/styles.css CHANGED Viewed

@@ -3,4 +3,550 @@
 @custom-variant dark (&:where(.dark, .dark *));
-@custom-variant dark-data (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant dark-data (&:where([data-theme=dark], [data-theme=dark] *));
+/* Default Dark Theme for Prism.js */
+pre[class*="language-"],
+code[class*="language-"] {
+    color: #d4d4d4;
+    font-size: 13px;
+    text-shadow: none;
+    font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+    text-shadow: none;
+    background: #264F78;
+}
+@media print {
+    pre[class*="language-"],
+    code[class*="language-"] {
+        text-shadow: none;
+    }
+}
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    background: #1e1e1e;
+}
+:not(pre)>code[class*="language-"] {
+    padding: .1em .3em;
+    border-radius: .3em;
+    color: #db4c69;
+    background: #1e1e1e;
+}
+/*********************************************************
+* Tokens - Dark Theme
+*/
+.namespace {
+    opacity: .7;
+}
+.token.doctype .token.doctype-tag {
+    color: #569CD6;
+}
+.token.doctype .token.name {
+    color: #9cdcfe;
+}
+.token.comment,
+.token.prolog {
+    color: #6a9955;
+}
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+    color: #d4d4d4;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+    color: #b5cea8;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+    color: #ce9178;
+}
+.language-css .token.string.url {
+    text-decoration: underline;
+}
+.token.operator,
+.token.entity {
+    color: #d4d4d4;
+}
+.token.operator.arrow {
+    color: #569CD6;
+}
+.token.atrule {
+    color: #ce9178;
+}
+.token.atrule .token.rule {
+    color: #c586c0;
+}
+.token.atrule .token.url {
+    color: #9cdcfe;
+}
+.token.atrule .token.url .token.function {
+    color: #dcdcaa;
+}
+.token.atrule .token.url .token.punctuation {
+    color: #d4d4d4;
+}
+.token.keyword {
+    color: #569CD6;
+}
+.token.keyword.module,
+.token.keyword.control-flow {
+    color: #c586c0;
+}
+.token.function,
+.token.function .token.maybe-class-name {
+    color: #dcdcaa;
+}
+.token.regex {
+    color: #d16969;
+}
+.token.important {
+    color: #569cd6;
+}
+.token.italic {
+    font-style: italic;
+}
+.token.constant {
+    color: #9cdcfe;
+}
+.token.class-name,
+.token.maybe-class-name {
+    color: #4ec9b0;
+}
+.token.console {
+    color: #9cdcfe;
+}
+.token.parameter {
+    color: #9cdcfe;
+}
+.token.interpolation {
+    color: #9cdcfe;
+}
+.token.punctuation.interpolation-punctuation {
+    color: #569cd6;
+}
+.token.boolean {
+    color: #569cd6;
+}
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+    color: #9cdcfe;
+}
+.token.selector {
+    color: #d7ba7d;
+}
+.token.escape {
+    color: #d7ba7d;
+}
+.token.tag {
+    color: #569cd6;
+}
+.token.tag .token.punctuation {
+    color: #808080;
+}
+.token.cdata {
+    color: #808080;
+}
+.token.attr-name {
+    color: #9cdcfe;
+}
+.token.attr-value,
+.token.attr-value .token.punctuation {
+    color: #ce9178;
+}
+.token.attr-value .token.punctuation.attr-equals {
+    color: #d4d4d4;
+}
+.token.entity {
+    color: #569cd6;
+}
+.token.namespace {
+    color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific - Dark Theme
+*/
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+    color: #9cdcfe;
+}
+pre[class*="language-css"],
+code[class*="language-css"] {
+    color: #ce9178;
+}
+pre[class*="language-html"],
+code[class*="language-html"] {
+    color: #d4d4d4;
+}
+.language-regex .token.anchor {
+    color: #dcdcaa;
+}
+.language-html .token.punctuation {
+    color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"]>code[class*="language-"] {
+    position: relative;
+    z-index: 1;
+}
+.line-highlight.line-highlight {
+    background: #f7ebc6;
+    box-shadow: inset 5px 0 0 #f7d87c;
+    z-index: 0;
+}
+/* Light Theme Override - GHColors theme by Avi Aryan */
+@media (prefers-color-scheme: light) {
+    code[class*="language-"],
+    pre[class*="language-"] {
+        color: #393A34;
+        font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        font-size: .9em;
+        line-height: 1.2em;
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+    }
+    pre>code[class*="language-"] {
+        font-size: 1em;
+    }
+    pre[class*="language-"]::-moz-selection,
+    pre[class*="language-"] ::-moz-selection,
+    code[class*="language-"]::-moz-selection,
+    code[class*="language-"] ::-moz-selection {
+        background: #b3d4fc;
+    }
+    pre[class*="language-"]::selection,
+    pre[class*="language-"] ::selection,
+    code[class*="language-"]::selection,
+    code[class*="language-"] ::selection {
+        background: #b3d4fc;
+    }
+    /* Code blocks */
+    pre[class*="language-"] {
+        padding: 1em;
+        margin: .5em 0;
+        overflow: auto;
+        border: 1px solid #dddddd;
+        background-color: white;
+    }
+    /* Inline code */
+    :not(pre)>code[class*="language-"] {
+        padding: .2em;
+        padding-top: 1px;
+        padding-bottom: 1px;
+        background: #f8f8f8;
+        border: 1px solid #dddddd;
+    }
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+        color: #999988;
+        font-style: italic;
+    }
+    .token.namespace {
+        opacity: .7;
+    }
+    .token.string,
+    .token.attr-value {
+        color: #e3116c;
+    }
+    .token.punctuation,
+    .token.operator {
+        color: #393A34;
+        /* no highlight */
+    }
+    .token.entity,
+    .token.url,
+    .token.symbol,
+    .token.number,
+    .token.boolean,
+    .token.variable,
+    .token.constant,
+    .token.property,
+    .token.regex,
+    .token.inserted {
+        color: #36acaa;
+    }
+    .token.atrule,
+    .token.keyword,
+    .token.attr-name,
+    .language-autohotkey .token.selector {
+        color: #00a4db;
+    }
+    .token.function,
+    .token.deleted,
+    .language-autohotkey .token.tag {
+        color: #9a050f;
+    }
+    .token.tag,
+    .token.selector,
+    .language-autohotkey .token.keyword {
+        color: #00009f;
+    }
+    .token.important,
+    .token.function,
+    .token.bold {
+        font-weight: bold;
+    }
+    .token.italic {
+        font-style: italic;
+    }
+}
+/* Manual light mode class support */
+html:not(.dark) code[class*="language-"],
+html:not(.dark) pre[class*="language-"] {
+    color: #393A34;
+    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: .9em;
+    line-height: 1.2em;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+html:not(.dark) pre>code[class*="language-"] {
+    font-size: 1em;
+}
+html:not(.dark) pre[class*="language-"]::-moz-selection,
+html:not(.dark) pre[class*="language-"] ::-moz-selection,
+html:not(.dark) code[class*="language-"]::-moz-selection,
+html:not(.dark) code[class*="language-"] ::-moz-selection {
+    background: #b3d4fc;
+}
+html:not(.dark) pre[class*="language-"]::selection,
+html:not(.dark) pre[class*="language-"] ::selection,
+html:not(.dark) code[class*="language-"]::selection,
+html:not(.dark) code[class*="language-"] ::selection {
+    background: #b3d4fc;
+}
+/* Code blocks */
+html:not(.dark) pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    background-color: white;
+}
+/* Inline code */
+html:not(.dark) :not(pre)>code[class*="language-"] {
+    padding: .2em;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+}
+html:not(.dark) .token.comment,
+html:not(.dark) .token.prolog,
+html:not(.dark) .token.doctype,
+html:not(.dark) .token.cdata {
+    color: #999988;
+    font-style: italic;
+}
+html:not(.dark) .token.namespace {
+    opacity: .7;
+}
+html:not(.dark) .token.string,
+html:not(.dark) .token.attr-value {
+    color: #e3116c;
+}
+html:not(.dark) .token.punctuation,
+html:not(.dark) .token.operator {
+    color: #393A34;
+    /* no highlight */
+}
+html:not(.dark) .token.entity,
+html:not(.dark) .token.url,
+html:not(.dark) .token.symbol,
+html:not(.dark) .token.number,
+html:not(.dark) .token.boolean,
+html:not(.dark) .token.variable,
+html:not(.dark) .token.constant,
+html:not(.dark) .token.property,
+html:not(.dark) .token.regex,
+html:not(.dark) .token.inserted {
+    color: #36acaa;
+}
+html:not(.dark) .token.atrule,
+html:not(.dark) .token.keyword,
+html:not(.dark) .token.attr-name,
+html:not(.dark) .language-autohotkey .token.selector {
+    color: #00a4db;
+}
+html:not(.dark) .token.function,
+html:not(.dark) .token.deleted,
+html:not(.dark) .language-autohotkey .token.tag {
+    color: #9a050f;
+}
+html:not(.dark) .token.tag,
+html:not(.dark) .token.selector,
+html:not(.dark) .language-autohotkey .token.keyword {
+    color: #00009f;
+}
+html:not(.dark) .token.important,
+html:not(.dark) .token.function,
+html:not(.dark) .token.bold {
+    font-weight: bold;
+}
+html:not(.dark) .token.italic {
+    font-style: italic;
+}
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+}
+code {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    display: block;
+}

package/playground/showcase/src/app/pages/components/breadcrumb-docs/breadcrumb-docs.ts DELETED Viewed

@@ -1,43 +0,0 @@
-import { Component } from '@angular/core';
-import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
-import { AiPromptService } from '../../../core/services/ai-prompt.service';
-@Component({
-  selector: 'app-breadcrumb-docs',
-  imports: [
-    Breadcrumb
-  ],
-  templateUrl: './breadcrumb-docs.html',
-  styleUrl: './breadcrumb-docs.css'
-})
-export class BreadcrumbDocs {
-  breadcrumbItems: BreadcrumbItem[] = [
-    { label: 'Home', url: '/' },
-    { label: 'Components', url: '/components' },
-    { label: 'Breadcrumb' }
-  ];
-  exampleBreadcrumbs: BreadcrumbItem[] = [
-    { label: 'Home', url: '/' },
-    { label: 'Components', url: '/components' },
-    { label: 'Breadcrumb' }
-  ];
-  simpleBreadcrumbs: BreadcrumbItem[] = [
-    { label: 'Components' }
-  ];
-  constructor(
-    private aiPromptService: AiPromptService
-  ) { }
-  get claudeUrl(): string {
-    return this.aiPromptService.generateClaudeUrl();
-  }
-  get chatGptUrl(): string {
-    return this.aiPromptService.generateChatGptUrl();
-  }
-}

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

@@ -1,41 +0,0 @@
-import { Component, signal, WritableSignal } from '@angular/core';
-import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
-import { Button } from '../../../components/button/button';
-import { AiPromptService } from '../../../core/services/ai-prompt.service';
-@Component({
-  selector: 'app-button-docs',
-  imports: [
-    Button,
-    Breadcrumb
-  ],
-  templateUrl: './button-docs.html',
-  styleUrl: './button-docs.css'
-})
-export class ButtonDocs {
-  breadcrumbItems: BreadcrumbItem[] = [
-    { label: 'Home', url: '/' },
-    { label: 'Components', url: '/components' },
-    { label: 'Button' }
-  ];
-  clickMessage: WritableSignal<string> = signal<string>('');
-  constructor(
-    private aiPromptService: AiPromptService
-  ) {}
-  handleClick(): void {
-    this.clickMessage.set('Button clicked!');
-  }
-  get claudeUrl(): string {
-    return this.aiPromptService.generateClaudeUrl();
-  }
-  get chatGptUrl(): string {
-    return this.aiPromptService.generateChatGptUrl();
-  }
-}