fix(omi-templates): ts error & can't change primary color in dark mode

Tencent · Jan 25, 2024 · 972056a · 972056a
1 parent 764e2c7
commit 972056a
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 14 deletions.
diff --git a/packages/omi-templates/package-lock.json b/packages/omi-templates/package-lock.json
diff --git a/packages/omi-templates/package.json b/packages/omi-templates/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
+    "@types/markdown-it": "^13.0.7",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.45.0",
     "postcss": "^8.4.31",

diff --git a/packages/omi-templates/src/components/customize.tsx b/packages/omi-templates/src/components/customize.tsx
@@ -15,10 +15,11 @@ let currentTheme = ''
 class Customize extends Component {
   @bind
   onColorClick(evt: MouseEvent) {
-    this.state.selectedColor = evt.currentTarget.dataset.color
-    currentTheme = this.state.selectedColor
-    this.update()
-    setPrimary(evt.currentTarget.dataset.color.replace(/hsl\(|\)/g, ''))
+    const target = evt.currentTarget as HTMLElement;
+    this.state.selectedColor = target.dataset.color || '';
+    currentTheme = this.state.selectedColor;
+    this.update();
+    target.dataset.color && setPrimary(target.dataset.color.replace(/hsl\(|\)/g, ''));
   }
 
   colors = [

diff --git a/packages/omi-templates/src/components/md-docs.tsx b/packages/omi-templates/src/components/md-docs.tsx
@@ -32,11 +32,11 @@ export class MarkdownRenderer extends Component {
     const codes = Array.from(this.shadowRoot?.querySelectorAll('code') || [])
     codes.forEach((code) => {
       const arr = code.className.match(/{([\S\s]*)}/)
-      let pre = code.parentNode
+      let pre = code.parentNode as HTMLElement
       if (arr) {
         pre.setAttribute('data-line', arr[1])
       }
-      if (code.className) {
+      if (code.className && pre) {
         pre.className = code.className
         const temp = code.className.match(/language-\w*/g)?.[0]
         const lan = temp?.split('-')[1] || 'markup'

diff --git a/packages/omi-templates/src/components/navbar.tsx b/packages/omi-templates/src/components/navbar.tsx
@@ -1,7 +1,46 @@
 import { tag, Component, bind, classNames } from 'omi'
 
+type Props = {
+  menuItems: {
+    text: string
+    href: string
+    target: string
+    name: string
+    path: string
+    value: string
+    type: string
+    img?: string
+    inner?: string
+    children: any[]
+  }[]
+  active: string
+}
+
+type MenuItem = {
+  text: string
+  href: string
+  target: string
+  name: string
+  path: string
+  value: string
+  type: string
+  img?: string
+  inner?: string
+  children: any[]
+}
+
+type MenuItemChild = {
+  text: string
+  href: string
+  target: string
+  name: string
+  path: string
+  value: string
+  type: string
+}
+
 @tag('o-navbar')
-export class Navbar extends Component {
+export class Navbar extends Component<Props> {
   static css = `
   :host {
     display: block;
@@ -18,7 +57,7 @@ export class Navbar extends Component {
   }
 
   @bind
-  onMenuClick(evt, menuItem) {
+  onMenuClick(evt: MouseEvent, menuItem: MenuItem) {
     this.state.menu = false
     this.state.active = menuItem.value
     this.update()
@@ -29,7 +68,7 @@ export class Navbar extends Component {
   }
 
   @bind
-  onSubMenuClick(evt, menuItem) {
+  onSubMenuClick(evt: MouseEvent, menuItem: MenuItemChild) {
     this.state.menu = false
     evt.stopPropagation()
     this.state.active = menuItem.value
@@ -46,7 +85,7 @@ export class Navbar extends Component {
     this.update()
   }
 
-  renderMenuItemChild(menuItemChild) {
+  renderMenuItemChild(menuItemChild: MenuItemChild) {
     switch (menuItemChild.type) {
       case 'title':
         return (
@@ -158,7 +197,7 @@ export class Navbar extends Component {
           )}
         >
           <ul class="w-[288px] mx-auto md:w-full md:flex md:flex-row text-left">
-            {this.props.menuItems.map((menuItem) => {
+            {this.props.menuItems.map((menuItem: MenuItem) => {
               return (
                 <li
                   onClick={(evt) => this.onMenuClick(evt, menuItem)}
@@ -222,7 +261,7 @@ export class Navbar extends Component {
                     )}
                     {menuItem.children && (
                       <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-gray-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-200 delay-200 rounded-md hover:text-primary">
-                        {menuItem.children.map((menuItemChild) => {
+                        {menuItem.children.map((menuItemChild: MenuItemChild) => {
                           return this.renderMenuItemChild(menuItemChild)
                         })}
                       </ul>

diff --git a/packages/omi-templates/src/index.css b/packages/omi-templates/src/index.css
@@ -44,7 +44,7 @@ body {
   --popover: 222.2 84% 4.9%;
   --popover-foreground: 210 40% 98%;
 
-  --primary: 219 100% 43%;
+  /* --primary: 219 100% 43%; */
   --primary-foreground: 0 0% 85%;
 
   --secondary: 0, 0%, 40%;

diff --git a/packages/omi-templates/src/pages/chat.tsx b/packages/omi-templates/src/pages/chat.tsx
@@ -3,7 +3,7 @@
  https://github.com/envomer/tailwindcss-chat 
 
 */
-export function Chat(props) {
+export function Chat() {
   return (
     <div class="w-full h-[calc(100vh-60px)] dark:brightness-90">
       <div class="flex h-full">