feat: List

src/Anchor/Anchor.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, type PropType } from 'vue'
 import type { AnchorItem } from './types'
+import { List } from '../Base'
 
 defineOptions({ name: 'Anchor' })
 const emit = defineEmits<{ change: [key: string, item: AnchorItem] }>()
@@ -16,6 +17,7 @@ const onSelect = (item: AnchorItem) => {
 }
 </script>
 <template>
+  <List :items=""> </List>
   <div class="text-sm leading-6 text-slate-700" :class="[!isCustom && deep === 0 ? 'border-l border-slate-200 ' : '']">
     <div
       v-for="item in items"

src/Base/RingInput.vue → src/Base/BaseInput/BaseInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type PropType } from 'vue'
 
-defineOptions({ name: 'RingInput' })
+defineOptions({ name: 'BaseInput' })
 
 const borderMap = {
   default: 'ring-slate-300',
@@ -37,7 +37,7 @@ const props = defineProps({
     :disabled="disabled"
     :data-focused="focused"
     :class="[
-      `z-ring-input flex items-center rounded-md text-sm ring-1 shadow-sm transition-all  ring-inset
+      `z-ring-input flex items-center rounded-md text-sm shadow-sm ring-1 ring-inset  transition-all
       focus-within:z-10 focus-within:ring-2 
       data-[focused=true]:z-10 data-[focused=true]:ring-2 
       ${focusedBorderMap[status]} 

src/Base/BaseInput/index.ts

@@ -0,0 +1 @@
+export { default as BaseInput } from './BaseInput.vue'

src/Base/List/List.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref, computed, type PropType } from 'vue'
+import type { IListItem } from './types'
+
+defineOptions({ name: 'TList' })
+defineProps({
+  current: String,
+  items: Array as PropType<IListItem[]>,
+  deep: { type: Number, default: 0 },
+  itemClass: String,
+})
+const emit = defineEmits<{ select: [item: IListItem, deep: number] }>()
+const slots = defineSlots<{ item(props: { item: IListItem; deep: number; active: boolean }): any }>()
+
+const selectHandler = (item: IListItem, deep: number) => {
+  emit('select', item, deep)
+}
+</script>
+<template>
+  <ul>
+    <li v-for="item in items" :key="item.key" @click="selectHandler(item, deep)">
+      <slot name="item" :item="item" :deep="deep" :active="current === item.key"></slot>
+      <TList
+        v-if="item.children && item.children.length > 0"
+        :items="item.children"
+        :deep="deep + 1"
+        @select="selectHandler"
+      >
+        <template #item="props">
+          <slot name="item" v-bind="props" />
+        </template>
+      </TList>
+    </li>
+  </ul>
+</template>

src/Base/List/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from './List.vue'
+export type { IListItem, IListItemLink } from './types'

src/Base/List/types.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'vue'
+
+export type IListItemLink = string | { href: string; target: string }
+
+export type IListItem = {
+  key: string
+  icon?: Component
+  label?: string
+  disable?: boolean
+  link?: IListItemLink
+  onClick?: (item: IListItem) => void
+  children?: IListItem[]
+}

src/Base/Popper/index.ts

@@ -1,2 +1,3 @@
 export { default as Popper } from './Popper.vue'
+
 export type { PopperPlacement, PopperSizeMode, PopperTrigger, PopperVirtualElement } from './core'

src/Base/index.ts

@@ -0,0 +1,3 @@
+export * from './BaseInput'
+export * from './Popper'
+export * from './List'

src/Input/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type VNode, ref } from 'vue'
 import { useModelValue } from '../use/useModelValue'
-import RingInput from '../Base/RingInput.vue'
+import { BaseInput } from '../Base'
 
 defineOptions({ name: 'Input' })
 const emit = defineEmits<{
@@ -61,7 +61,7 @@ defineExpose({
 })
 </script>
 <template>
-  <RingInput :disabled="disabled">
+  <BaseInput :disabled="disabled">
     <span v-if="prefix || slots.prefix" class="z-input_prefix flex h-full items-center text-slate-500">
       <slot name="prefix">
         <span class="pl-3">
@@ -71,7 +71,7 @@ defineExpose({
     </span>
     <input
       ref="inputRef"
-      class="z-input_input disabled block w-full flex-1 border-none bg-transparent py-1.5 px-3 text-sm leading-6 outline-none placeholder:text-slate-400 focus:outline-none"
+      class="z-input_input disabled block w-full flex-1 border-none bg-transparent px-3 py-1.5 text-sm leading-6 outline-none placeholder:text-slate-400 focus:outline-none"
       :class="{
         'pl-1': prefix || slots.prefix,
         'pr-1': suffix || slots.suffix,
@@ -95,5 +95,5 @@ defineExpose({
         </span>
       </slot>
     </span>
-  </RingInput>
+  </BaseInput>
 </template>

src/Menu/MenuItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, type PropType } from 'vue'
 import type { MenuItemRawType } from './types'
-import { Popper } from '../Base/Popper'
+import { Popper } from '../Base'
 import Menu from './Menu.vue'
 
 defineOptions({ name: 'MenuItem' })

src/Popover/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type PropType, ref } from 'vue'
-import { Popper, type PopperPlacement, type PopperSizeMode, type PopperTrigger } from '../Base/Popper'
+import { Popper, type PopperPlacement, type PopperSizeMode, type PopperTrigger } from '../Base'
 
 defineOptions({ name: 'Popover' })
 defineProps({

src/Tooltip/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { type PropType } from 'vue'
-import { Popper, type PopperPlacement } from '../Base/Popper'
+import { Popper, type PopperPlacement } from '../Base'
 
 defineOptions({ name: 'Tooltip' })
 defineProps({
@@ -12,7 +12,7 @@ defineProps({
   <Popper trigger="hover" :placement="placement">
     <slot />
     <template #content>
-      <div class="z-tooltip ring-opacity-5 rounded bg-white ring-1 shadow-md ring-slate-200">
+      <div class="z-tooltip rounded bg-white shadow-md ring-1 ring-slate-200 ring-opacity-5">
         <slot name="content">
           <div class="px-2">
             {{ content }}