Skip to content

Commit

Permalink
feat: codepreview
Browse files Browse the repository at this point in the history
  • Loading branch information
jaskang committed Jul 10, 2023
1 parent be8795f commit 13e97a0
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 36 deletions.
5 changes: 2 additions & 3 deletions docs/.vitepress/theme/CodePreview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ defineExpose({ dark, showCode })
}"
class="relative mt-4 overflow-hidden rounded-xl border dark:border-slate-500/50"
>
<div class="not-prose bg-slate-50 transition-colors dark:bg-slate-800">
<div class="bg-slate-50 transition-colors dark:bg-slate-800">
<div class="flex justify-end gap-2 border-b bg-slate-100 p-2 dark:border-slate-500/50 dark:bg-slate-700/50">
<TSwitch v-model:checked="dark">
<template #on><MoonIcon class="text-gray-900" /></template>
Expand All @@ -43,7 +43,7 @@ defineExpose({ dark, showCode })
class="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-slate-700/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]"
style="background-position: 10px 10px"
></div>
<div class="demo relative overflow-auto p-4">
<div class="demo relative overflow-auto p-4 text-sm">
<slot name="default"></slot>
</div>
</div>
Expand All @@ -54,4 +54,3 @@ defineExpose({ dark, showCode })
</div>
</div>
</template>
<style lang="scss"></style>
6 changes: 3 additions & 3 deletions docs/.vitepress/theme/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default defineComponent({

const isDark = useDark()
return () => (
<div class="sticky top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 supports-backdrop-blur:bg-white/60 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10">
<div class="sticky min-h-screen top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 supports-backdrop-blur:bg-white/60 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10">
<div class="mx-auto max-w-8xl">
<div class="mx-4 border-b border-slate-900/10 py-4 dark:border-slate-300/10 lg:mx-0 lg:border-0 lg:px-8">
<div class="relative flex items-center">
Expand Down Expand Up @@ -103,9 +103,9 @@ export default defineComponent({
</div>
</div>
<div class="overflow-hidden">
<div class="mx-auto max-w-8xl px-4 sm:px-6 md:px-8">
<div class="mx-auto min-h-[calc(100vh_-_62px)] max-w-8xl px-4 sm:px-6 md:px-8">
<div class="fixed inset-0 left-[max(0px,calc(50%-45rem))] right-auto top-[3.8125rem] z-20 hidden w-[19.5rem] overflow-y-auto px-8 pb-10 lg:block">
<TVSidebar open="isSidebarOpen"></TVSidebar>
<TVSidebar open={isSidebarOpen.value}></TVSidebar>
</div>
<div class="lg:pl-[19.5rem]">
<TVContent />
Expand Down
25 changes: 13 additions & 12 deletions docs/components/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,67 @@

```vue preview
<template>
<span>方位</span>
<div class="flex justify-center">
<div class="grid grid-cols-5 gap-2">
<div></div>
<TTooltip placement="top-start">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>top-start</template>
</TTooltip>
<TTooltip placement="top">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>top</template>
</TTooltip>
<TTooltip placement="top-end">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>top-end</template>
</TTooltip>
<div></div>
<TTooltip placement="left-start">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>left-start</template>
</TTooltip>
<div></div>
<div></div>
<div></div>
<TTooltip placement="right-start">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>right-start</template>
</TTooltip>
<TTooltip placement="left">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>left</template>
</TTooltip>
<div></div>
<div></div>
<div></div>
<TTooltip placement="right">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>right</template>
</TTooltip>
<TTooltip placement="left-end">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>left-end</template>
</TTooltip>
<div></div>
<div></div>
<div></div>
<TTooltip placement="right-end">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>right-end</template>
</TTooltip>
<div></div>
<TTooltip placement="bottom-start">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>bottom-start</template>
</TTooltip>
<TTooltip placement="bottom">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>bottom</template>
</TTooltip>
<TTooltip placement="bottom-end">
<TButton size="xl"><div class="text-sm/4">tooltip</div></TButton>
<TButton><div class="text-sm/4">tooltip</div></TButton>
<template #content>bottom-end</template>
</TTooltip>
<div></div>
Expand Down
48 changes: 31 additions & 17 deletions src/components/List/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const List = defineComponent({
change: (val: Required<ListProps>['value']) => true,
},
slots: Object as SlotsType<{
default: () => VNode
item: (props: { item: OptionItem; selected: boolean }) => VNode[]
}>,
setup(props, { slots, emit, attrs }) {
const { colors } = useTheme()
Expand Down Expand Up @@ -72,7 +72,7 @@ export const List = defineComponent({
setVal(item.value)
}
}
const isActived = (item: OptionItem) => {
const isSelected = (item: OptionItem) => {
if (props.multiple) {
return (val.value as any[]).includes(item.value)
}
Expand All @@ -85,22 +85,36 @@ export const List = defineComponent({
tabindex="-1"
>
{props.options.length > 0 ? (
props.options.map(item => (
<li
class={[
'relative flex cursor-default select-none px-3 py-2 transition-colors ease-in-out',
isActived(item)
? 'cursor-pointer bg-[--t-list-accent-color] font-semibold text-white'
: item.disabled
? 'font-normal text-gray-400'
: 'cursor-pointer font-normal text-gray-700 hover:bg-gray-100',
]}
onClick={() => itemClickHandler(item)}
>
<span class="block truncate"> {item.label} </span>
</li>
))
props.options.map(item =>
slots.item ? (
slots.item({ item, selected: isSelected(item) })
) : (
<li
class={[
'relative flex cursor-default select-none px-3 py-2 transition-colors ease-in-out',
item.disabled
? 'font-normal text-gray-400'
: isSelected(item)
? 'cursor-pointer font-semibold hover:text-white hover:bg-[--t-list-accent-color]'
: 'cursor-pointer font-normal text-gray-700 hover:text-white hover:bg-[--t-list-accent-color]',
]}
onClick={() => itemClickHandler(item)}
>
<span class="flex-1 block truncate">{item.label} </span>
{isSelected(item) && (
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
)}
</li>
)
)
) : (
// TODO: no data
<li>没有数据</li>
)}
</ul>
Expand Down
69 changes: 69 additions & 0 deletions src/components/Menu/VerticalMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import {
computed,
defineComponent,
type ExtractPropTypes,
type ExtractPublicPropTypes,
type PropType,
ref,
type SlotsType,
type VNode,
} from 'vue'

import { useTheme } from '@/theme'

const props = {
color: {
type: String as PropType<Color>,
},
loading: Boolean,
disabled: Boolean,
}

export type VerticalMenuProps = ExtractPropTypes<typeof props>

export type VerticalMenuPublicProps = ExtractPublicPropTypes<typeof props>

export type VerticalMenuCssVars = {
'--t-btn-text-color': string
'--t-btn-border-color': string
'--t-btn-bg': string

'--t-btn-text-color-hover': string
'--t-btn-border-color-hover': string
'--t-btn-bg-hover': string

'--t-btn-ring-color': string
}

export const VerticalMenu = defineComponent({
name: 'TVerticalMenu',
props,
emits: {} as {
click(payload: MouseEvent): void
},
slots: Object as SlotsType<{
default: { foo: string; bar: number }
item: { data: number }
}>,
setup(props, { slots, emit }) {
const { colors } = useTheme()

const { cssVars, cls } = useStyle(() => {
return {
...props,
}
})

const hasIcon = computed(() => !!slots.icon || props.loading)
const onClick = (e: MouseEvent) => {
if (!props.disabled) {
emit('click', e)
}
}
return () => (
<div style={cssVars.value} class={cls.value}>
{slots.default?.()}
</div>
)
},
})
2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"types": ["node", "jsdom"],
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
"@/*": ["./src/*"]
}
}
}

1 comment on commit 13e97a0

@vercel
Copy link

@vercel vercel bot commented on 13e97a0 Jul 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.