Update to Material 3 style

README.md

@@ -35,6 +35,6 @@ Please check `lib/components` folder to see what kind of components we provide.
 
 ## Showcase
 
-The showcase code is located in `dev` folder.
+The showcase code is located in `doc` folder.
 
 Checkout how the components work by launching the project with `npm run dev`.

babel.config.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@vue/babel-plugin-jsx"
+  ]
+}

doc/components/action-bar.module.styl

@@ -0,0 +1,10 @@
+.action-bar
+  display: flex
+  width: 100%
+  align-items: center
+  justify-content: space-between
+
+  .action-button
+    padding: 15px
+    margin: 0
+    font-size: 16px

doc/components/action-bar.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from 'vue'
+
+import { LctBtn } from '../../lib'
+import style from './action-bar.module.styl'
+import { LancetLogo } from './lancet-logo'
+
+const ActionBar = defineComponent({
+  setup () {
+    return () => (
+      <div class={style.actionBar}>
+        <LctBtn class={style.actionButton} text circle={50}>
+          <LancetLogo width={20}/>
+        </LctBtn>
+      </div>
+    )
+  }
+})
+
+export {
+  ActionBar
+}

doc/components/app-drawer.module.styl

@@ -0,0 +1,4 @@
+.app-drawer
+  .nav-button
+    width: 100%
+    margin: 5px 0

doc/components/app-drawer.tsx

@@ -0,0 +1,57 @@
+import { defineComponent, ref, watch } from 'vue'
+import { useRoute, RouterLink } from 'vue-router'
+
+import { LctList, LctGroupList, LctListItem, LctBtn } from '../../lib'
+import { isArray } from '../../lib/utils/type'
+import { pageConfig } from '../config/page'
+
+import style from './app-drawer.module.styl'
+
+const AppDrawer = defineComponent({
+  setup () {
+    const route = useRoute()
+
+    const createListItem = (name: string, label: string) => (
+      <LctListItem>
+        <RouterLink to={{ name }}>
+          <LctBtn
+            class={style.navButton} textAlign='left'
+            text={route.name !== name}
+          >{label}</LctBtn>
+        </RouterLink>
+      </LctListItem>
+    )
+
+    const ListContent = pageConfig.map(config => {
+      if (!isArray(config.pages)) {
+        return createListItem(config.name as string, config.label)
+      }
+
+      const isOpen = ref(false)
+      const childrenPageNames = config.pages.map(child => child.name)
+
+      // Only watch for once to set initial status.
+      const unwatch = watch(route, () => {
+        const routeName = route.name as string
+        isOpen.value = childrenPageNames.includes(routeName) ?? false
+        unwatch()
+      })
+
+      return (
+        <LctGroupList v-model={isOpen} icon={config.icon} text={config.label}>{
+          config.pages.map(child => createListItem(child.name, child.label))
+        }</LctGroupList>
+      )
+    })
+
+    return () => (
+      <div class={style.appDrawer}>
+        <LctList>{ListContent}</LctList>
+      </div>
+    )
+  }
+})
+
+export {
+  AppDrawer
+}

doc/components/form-showcase.tsx

@@ -2,7 +2,7 @@ import { defineComponent, ref } from 'vue'
 import {
   LctBtn, LctCard, LctCheckbox, LctDatepicker, LctForm,
   LctInput, LctRadio, LctRadioGroup, LctSelect,
-  LctTextfield, LancetColorScheme, useDialog,
+  LctTextfield, LctColorScheme, useDialog,
   useToast
 } from '../../lib'
 import { isString } from '../../lib/utils/type'
@@ -47,7 +47,7 @@ const FormShowcase = defineComponent({
         onConfirm: async dialog => {
           await new Promise(resolve => setTimeout(resolve, 1000))
           dialog.close()
-          createToast('操作成功.', LancetColorScheme.Success)
+          createToast('操作成功.', LctColorScheme.Success)
         }
       })
     }
@@ -62,7 +62,7 @@ const FormShowcase = defineComponent({
     }
 
     return () => (
-      <LctCard title='表单' elevated withMargin>
+      <LctCard title='表单' withMargin>
         <LctForm v-model={isDataValid.value} onSubmit={onSubmit} ref={formRef}>
           <LctTextfield
             v-model={userInput.value.username}
@@ -85,7 +85,7 @@ const FormShowcase = defineComponent({
             rules={validator.gender}
             icon='face' label='性别' required
           >
-            <LctRadio value={UserGender.Male} label={User.getGenderLabel(UserGender.Male)} color={LancetColorScheme.Primary} />
+            <LctRadio value={UserGender.Male} label={User.getGenderLabel(UserGender.Male)} color={LctColorScheme.Primary} />
             <LctRadio value={UserGender.Female} label={User.getGenderLabel(UserGender.Female)} />
             <LctRadio value={UserGender.Unknown} label={User.getGenderLabel(UserGender.Unknown)} />
           </LctRadioGroup>
@@ -116,7 +116,7 @@ const FormShowcase = defineComponent({
           </div>
 
           <div>
-            <LctBtn type='submit' color={LancetColorScheme.Primary}>提交</LctBtn>
+            <LctBtn type='submit' color={LctColorScheme.Primary}>提交</LctBtn>
             <LctBtn outlined onClick={onValidateButtonClick}>验证</LctBtn>
           </div>
         </LctForm>

doc/components/lancet-logo.tsx

@@ -0,0 +1,30 @@
+import { defineComponent, PropType } from 'vue'
+import { LctMica } from '../../lib'
+
+import LancetLogoSvg from '../assets/lancet-logo.svg'
+
+const LancetLogo = defineComponent({
+  props: {
+    width: {
+      type: Number as PropType<number>,
+      default: 100
+    }
+  },
+
+  setup (props) {
+    return () => (
+      <LctMica
+        class='lancet-logo primary-fill'
+        style={`width: ${props.width}px; border-radius: ${props.width * 0.2}px; overflow: hidden; margin: 0 auto`}
+      >
+        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+        {/* @ts-ignore */}
+        <LancetLogoSvg style='display: block' />
+      </LctMica>
+    )
+  }
+})
+
+export {
+  LancetLogo
+}

doc/components/switcher-showcase.tsx

@@ -1,34 +1,49 @@
 import { defineComponent, ref } from 'vue'
-import { LctCard, LctSwitcher } from '../../lib'
+import { LctColorScheme, LctCard, LctSwitcher } from '../../lib'
+
+const spanStyle = {
+  display: 'inline-block',
+  width: '120px',
+  'vertical-align': 'middle'
+}
 
 const SwitcherShowcase = defineComponent({
   setup () {
     const selected = ref(false)
     const loading = ref(false)
     const disabled = ref(false)
     const name = ref('John Smith')
+    const themes = ref(true)
 
     return () => (
-      <LctCard title='Switcher' elevated withMargin>
+      <LctCard title='Switcher' withMargin>
         <div>
+          <span style={spanStyle}>Selected: {selected.value.toString()}</span>
           <LctSwitcher v-model={selected.value} style='vertical-align: middle'/>
-          <span style='vertical-align: middle'>Selected: {selected.value.toString()}</span>
         </div>
 
         <div>
+          <span style={spanStyle}>Loading</span>
           <LctSwitcher v-model={loading.value} loading={true} style='vertical-align: middle'/>
-          <span style='vertical-align: middle'>Loading</span>
         </div>
 
         <div>
+          <span style={spanStyle}>Disabled</span>
+          <LctSwitcher modelValue={true} disabled={true} style='vertical-align: middle'/>
           <LctSwitcher v-model={disabled.value} disabled={true} style='vertical-align: middle'/>
-          <span style='vertical-align: middle'>Disabled</span>
         </div>
 
         <div>
           <LctSwitcher v-model={name.value} trueValue={'John Smith'} falseValue={'LancerComet'} style='vertical-align: middle'/>
           <span style='vertical-align: middle'>Custom binding: {name.value}</span>
         </div>
+
+        <div>
+          <LctSwitcher v-model={themes.value} style='vertical-align: middle' color={LctColorScheme.Primary}/>
+          <LctSwitcher v-model={themes.value} style='vertical-align: middle' color={LctColorScheme.Success}/>
+          <LctSwitcher v-model={themes.value} style='vertical-align: middle' color={LctColorScheme.Warning}/>
+          <LctSwitcher v-model={themes.value} style='vertical-align: middle' color={LctColorScheme.Error}/>
+        </div>
       </LctCard>
     )
   }

doc/components/table-showcase.tsx

@@ -30,39 +30,26 @@ const TableShowcase = defineComponent({
       value: 'email',
       align: 'left'
     }, {
-      text: '操作',
-      value: 'email'
+      text: '操作'
     }]
 
     const slots = {
-      header: (headers?: LctHeader<ListItem>[]) => {
-        return (
-          <tr>
-            {headers?.map(value => (
-              <th>{value.text}</th>))
-            }
-          </tr>
-        )
-      },
       items: (items?: ListItem) => {
         return (
           <tr>
             <td>{items?.id}</td>
             <td>{items?.firstName}</td>
             <td>{items?.lastName}</td>
             <td>{items?.email}</td>
-            <td><LctBtn>操作</LctBtn></td>
+            <td><LctBtn>Operation</LctBtn></td>
           </tr>
         )
       }
     }
 
     return () => (
-      <LctCard title='表格' elevated withMargin>
-        <label>表格一</label>
-        <LctTable items={items} headers={headers} style={'margin:20px 0'}/>
-        <label>表格二</label>
-        <LctTable items={items} headers={headers} v-slots={slots} style={'margin:20px 0'}/>
+      <LctCard title='表格' withMargin>
+        <LctTable items={items} headers={headers} style={'margin:20px 0'} v-slots={slots} />
       </LctCard>
     )
   }