Skip to content

Commit

Permalink
feat: vue
Browse files Browse the repository at this point in the history
  • Loading branch information
jaskang committed Nov 16, 2023
1 parent f691982 commit 3338af4
Show file tree
Hide file tree
Showing 20 changed files with 379 additions and 254 deletions.
206 changes: 105 additions & 101 deletions packages/docs-vue/core/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,131 @@
<script setup lang="ts">
import { AnchorGroup } from '@zonda/vue'
import { ref } from 'vue'
import { ref } from 'vue'
import config from './config'
import Button from '../pages/Button.mdx'
const currKey = ref('assadfas')
</script>
<template>
<div class="supports-backdrop-blur:bg-white/60 sticky top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10">
<div class="max-w-8xl mx-auto">
<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">
<a class="mr-3 w-[2.0625rem] flex-none overflow-hidden md:w-auto" href="/">
<span class="sr-only">Tailwind CSS home page</span>
</a>
<div
class="supports-backdrop-blur:bg-white/60 sticky top-0 z-40 w-full flex-none bg-white/95 backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10"
>
<div class="max-w-8xl mx-auto">
<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">
<a class="mr-3 w-[2.0625rem] flex-none overflow-hidden md:w-auto" href="/">
<span class="sr-only">Tailwind CSS home page</span>
</a>

<div class="relative ml-auto hidden items-center lg:flex">
<nav class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-200">
<ul class="flex space-x-8">
<li>
<a
class="hover:text-sky-500 dark:hover:text-sky-400"
href="/docs/installation"
>
Docs
</a>
</li>
<li>
<a
class="hover:text-sky-500 dark:hover:text-sky-400"
href="https://tailwindui.com/?ref=top"
>
Components
</a>
</li>
<li>
<a class="hover:text-sky-500 dark:hover:text-sky-400" href="/blog">
Blog
</a>
</li>
<li>
<a class="hover:text-sky-500 dark:hover:text-sky-400" href="/showcase">
Showcase
</a>
</li>
</ul>
</nav>
</div>
<button
class="-my-1 ml-auto flex h-8 w-8 items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 lg:hidden"
type="button"
>
<span class="sr-only">Search</span>
<svg
aria-hidden="true"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
width="24"
>
<path d="m19 19-3.5-3.5"></path>
<circle cx="11" cy="11" r="6"></circle>
</svg>
</button>
<div class="-my-1 ml-2 lg:hidden">
<button
class="flex h-8 w-8 items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
type="button"
>
<span class="sr-only">Navigation</span>
<svg aria-hidden="true" fill="none" height="24" width="24">
<path
d="M12 6v.01M12 12v.01M12 18v.01M12 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
></path>
</svg>
</button>
</div>
</div>
<div class="relative ml-auto hidden items-center lg:flex">
<nav class="text-sm font-semibold leading-6 text-slate-700 dark:text-slate-200">
<ul class="flex space-x-8">
<li>
<a class="hover:text-sky-500 dark:hover:text-sky-400" href="/docs/installation">
Docs
</a>
</li>
<li>
<a
class="hover:text-sky-500 dark:hover:text-sky-400"
href="https://tailwindui.com/?ref=top"
>
Components
</a>
</li>
<li>
<a class="hover:text-sky-500 dark:hover:text-sky-400" href="/blog"> Blog </a>
</li>
<li>
<a class="hover:text-sky-500 dark:hover:text-sky-400" href="/showcase">
Showcase
</a>
</li>
</ul>
</nav>
</div>
<div class="flex items-center border-b border-slate-900/10 p-4 dark:border-slate-50/[0.06] lg:hidden">
<button
class="-my-1 ml-auto flex h-8 w-8 items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300 lg:hidden"
type="button"
>
<span class="sr-only">Search</span>
<svg
aria-hidden="true"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
width="24"
>
<path d="m19 19-3.5-3.5"></path>
<circle cx="11" cy="11" r="6"></circle>
</svg>
</button>
<div class="-my-1 ml-2 lg:hidden">
<button
class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
class="flex h-8 w-8 items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
type="button"
>
<span class="sr-only">Navigation</span>
<svg height="24" width="24">
<svg aria-hidden="true" fill="none" height="24" width="24">
<path
d="M5 6h14M5 12h14M5 18h14"
fill="none"
d="M12 6v.01M12 12v.01M12 18v.01M12 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
stroke-linejoin="round"
stroke-width="1.5"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="max-w-8xl mx-auto flex 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-[19rem] overflow-y-auto pb-10 pl-8 pr-6 lg:block ">
<AnchorGroup :items="config.sidebar" :v-model:selectedKey="currKey" />
</div>
<div class="lg:pl-[19.5rem] ">
<div class="mx-auto max-w-3xl pt-10 xl:ml-0 xl:mr-[15.5rem] xl:max-w-none xl:pr-16">
<div class="prose prose-sm flex-1">
<Button />
</div>
</div>
</div>
<div class="fixed bottom-0 right-[max(0px,calc(50%-45rem))] top-[3.8125rem] z-20 hidden w-[19.5rem] overflow-y-auto py-10 xl:block">
<div class="px-8">
<h5 class="mb-4 text-sm font-semibold leading-6 text-slate-900 dark:text-slate-100">
On this page
</h5>
</div>
<div
class="flex items-center border-b border-slate-900/10 p-4 dark:border-slate-50/[0.06] lg:hidden"
>
<button
class="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
type="button"
>
<span class="sr-only">Navigation</span>
<svg height="24" width="24">
<path
d="M5 6h14M5 12h14M5 18h14"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
></path>
</svg>
</button>
</div>
</div>
</div>
<div class="max-w-8xl mx-auto flex 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-[19rem] overflow-y-auto pb-10 pl-8 pr-6 lg:block"
>
<AnchorGroup :groups="config.sidebar" v-model:selectedKey="currKey" />
</div>
<div class="lg:pl-[19.5rem]">
<div class="mx-auto max-w-3xl pt-10 xl:ml-0 xl:mr-[15.5rem] xl:max-w-none xl:pr-16">
<div class="prose prose-sm flex-1">
<Button />
</div>
</div>
</div>
<div
class="fixed bottom-0 right-[max(0px,calc(50%-45rem))] top-[3.8125rem] z-20 hidden w-[19.5rem] overflow-y-auto py-10 xl:block"
>
<div class="px-8">
<h5 class="mb-4 text-sm font-semibold leading-6 text-slate-900 dark:text-slate-100">
On this page
</h5>
</div>
</div>
</div>
</template>
10 changes: 5 additions & 5 deletions packages/docs-vue/core/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { type AnchorGroupProps } from '@zonda/vue'
import { type IAnchorGroup } from '@zonda/vue'

export type Config = {
nav: AnchorGroupProps['items']
sidebar: AnchorGroupProps['items']
nav: IAnchorGroup[]
sidebar: IAnchorGroup[]
}

export default {
nav: [],
sidebar: [
{
title: '基础组件',
children: [
items: [
{
key: '/docs/getting-started/installation',
title: '按钮 Button',
Expand All @@ -19,7 +19,7 @@ export default {
},
{
title: 'Array',
children: [
items: [
{
key: '/docs/array/alphabetical',
title: 'alphabetical',
Expand Down
9 changes: 4 additions & 5 deletions packages/docs-vue/tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,19 @@ const preset = require('@zonda/preset')
const typography = require('@tailwindcss/typography')
const path = require('node:path')


module.exports = {
darkMode: 'class',
darkMode: 'class',
content: [
'./index.html',
'./core/**/*.{ts,tsx,md,mdx}',
'./pages/**/*.{ts,tsx,md,mdx}',
'./core/**/*.{ts,tsx,vue,mdx}',
'./pages/**/*.{ts,tsx,vue,mdx}',
path.resolve(__dirname, '../style/src/**/*.ts'),
path.resolve(__dirname, '../react/src/**/*.{ts,tsx}'),
path.resolve(__dirname, '../vue/src/**/*.{ts,tsx,vue}'),
// './node_modules/@zonda/style/src/**/*.{ts}',
// './node_modules/@zonda/react/src/**/*.{ts,tsx}',
// './node_modules/@zonda/vue/src/**/*.{ts,tsx,vue}',
],
],
theme: {
extend: {
maxWidth: {
Expand Down
2 changes: 2 additions & 0 deletions packages/docs-vue/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { defineConfig } from 'vite'

// import react from '@vitejs/plugin-react-swc'
import vue from '@vitejs/plugin-vue'
import jsx from '@vitejs/plugin-vue-jsx'
import mdx from '@mdx-js/rollup'
import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
Expand All @@ -14,6 +15,7 @@ export default defineConfig({
jsxImportSource: 'vue',
}),
vue(),
jsx(),
],
resolve: {
alias: {
Expand Down
10 changes: 5 additions & 5 deletions packages/style/src/anchor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ export function createAnchorItemStyle() {

export function createAnchorStyle() {
return {
anchorWarper: '',
anchor:
"before:content-[' '] relative ps-[2px] text-sm before:absolute before:start-0 before:top-0 before:h-full before:border-s-2 before:border-s-gray-100",
anchorCursor:
'bg-primary-500 absolute start-0 top-1 inline-block h-6 w-[2px] transition-transform',
warper: '',
css: "before:content-[' '] relative ps-[2px] text-sm before:absolute before:start-0 before:top-0 before:h-full before:border-s-2 before:border-s-gray-100",
cursor: 'bg-primary-500 absolute start-0 top-1 inline-block h-6 w-[2px] transition-transform',
itemWarper: 'cursor-pointer px-4 py-1.5',
itemCreator: (disabled: boolean) => anchorItemCss({ disabled }),
}
}
4 changes: 2 additions & 2 deletions packages/style/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export { type ColorName, type ColorLv, type ColorAlias, createVars, cvar } from './utils/style'
export { createButtonStyle } from './button'
export { createAnchorStyle, createAnchorItemStyle } from './anchor'
export { createButtonStyle } from './Button'
export { createAnchorStyle, createAnchorItemStyle } from './Anchor'
39 changes: 0 additions & 39 deletions packages/vue/src/Anchor/Anchor.vue
View file

This file was deleted.

Loading

0 comments on commit 3338af4

Please sign in to comment.