Kudzu-UI

// vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx'

export default {
  plugins: [
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    })
  ]
}

import { defineComponent } from 'vue'
import vueLogo from './assets/vue.svg'
import styles from './App.module.less'

export default defineComponent({
  name: 'App',

  setup() {
    return () => (
      <div id="App" class={styles.App}>
        <div>
          <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class={styles.logo} alt="Vite logo" />
          </a>
          <a href="https://vuejs.org/" target="_blank">
            <img src={vueLogo} class={`${styles.logo} ${styles.vue}`} alt="Vue logo" />
          </a>
        </div>
        Kudzu UI
      </div>
    )
  }
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import pxtoviewport from 'postcss-px-to-viewport'

const pxtoviewportConfig = pxtoviewport({
  viewportWidth: 1366, // 设计稿的视口宽度
})

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      // options are passed on to @vue/babel-plugin-jsx
    }),
  ],
  css: {
    postcss: {
      plugins: [pxtoviewportConfig]
    }
  }
})

// Internal code, don't use in your app!
export * from './install'
export * from './util'

import { App, Plugin } from 'vue';

export const withInstall = (component: any): Plugin => {
  return {
    install(app: App) {
      app.component(component.name, component);
    },
  };
}

export const getImageUrl = (src: string): string => {
  return new URL(src, import.meta.url).href
}

import { defineComponent } from 'vue'
import './index.less'

export default defineComponent({
  name: 'KuButton',

  // 启用了类型推导
  props: {
    // message: String
  },

  emits: {
    click(payload: { event: Event }) {
      // 执行运行时校验
      return payload.event
    }
  },

  setup(props, { emit, slots }) {
    const handleClick = (event: Event) => {
      emit('click', { event })
    };

    return () => (
      <button class="ku-button" onClick={handleClick} >
        { slots.default ? slots.default() : null }
      </button>
    )
  }
})

import { createApp } from 'vue'
import './style.less'
import App from './App'

import KudzuUI from '../packages'

createApp(App).use(KudzuUI).mount('#app')

import { withInstall } from '@kudzu/utils'
import Button from './src/index'

export const kuButton = withInstall(Button)

export { Button }

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "@kudzu/*": ["packages/*"],
      "@examples/*": ["examples/*"],
    },
  }
}
// vite.config.js
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@kudzu': path.resolve(__dirname, './packages')
    }
  }
})

/** 
 * 根据 /packages 目录下的组件所生成的模块导出，请勿手动修改
 */
import { App, Plugin } from 'vue'

import { KuButtonPlugin } from './components/Button'

const kuPlugin: Plugin = {
  install(app: App) {
    KuButtonPlugin.install?.(app)
  },
};

export default kuPlugin;

export * from './components/Button'

import { createApp } from 'vue'
import './style.less'
import App from './App'

import KudzuUI from '../packages'

createApp(App).use(KudzuUI).mount('#app')

import { defineComponent } from 'vue'
import vueLogo from './assets/vue.svg'
import styles from './App.module.less'

export default defineComponent({
  name: 'App',

  setup() {
    return () => (
      <div id="App" class={styles.App}>
        <ku-button onClick={(a: Event) => console.log(a)}>Kudzu UI Button</ku-button>
      </div>
    )
  }
})

import { createRouter, createWebHistory, RouterOptions } from 'vue-router'

const routes = [{
  title: '按钮',
  name: 'Button',
  path: '/components/Button',
  component: () => import(`@kudzu/Button/docs/README.md`),
}]

const routerConfig = {
  history: createWebHistory(),
  routes,
  scrollBehavior(to: any, from: any) {
    if (to.path !== from.path) {
      return { top: 0 }
    }
  },
};

const router = createRouter(routerConfig as RouterOptions)

export default router

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module "*.less" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.md' {
  import type { ComponentOptions } from 'vue'
  const Component: ComponentOptions
  export default Component
}

declare module "*.json"

import Markdown from 'vite-plugin-md'

export default defineConfig({
  plugins: [
    vue({ include: [/\.vue$/, /\.md$/] }),
    Markdown(),
  ],
})

import { defineComponent, reactive } from 'vue'
import styles from './App.module.less'
import ComponentList from '@kudzu/list.json'

interface ComponentsItem {
  compName: String;
  compZhName: String;
}
interface LinkItem {
  path: String;
  name: String;
}

export default defineComponent({
  name: 'App',

  setup() {
    const data = reactive({
      links: ComponentList.map((item: ComponentsItem) => ({
        path: `/components/${item.compName}`,
        name: item.compZhName
      }))
    })

    return () => (
      <div id="App" class={styles.App}>
        <aside class={styles.aside}>
          { data.links.map((v: LinkItem) => {
              return <router-link key={v.path} to={v.path}>{ v.name }</router-link>
            }) 
          }
        </aside>
        <main class={styles.main}>
          <router-view />
        </main>
      </div>
    )
  }
})

/** 
 * 根据 /packages 目录下的组件所生成的组件类侧边导航栏配置，请勿手动修改
 */
 import { createRouter, createWebHistory, RouterOptions } from 'vue-router'
 import Index from './views/Index'
 import GetStart from './docs/get-start.md'
 import Button from '../packages/components/Button/docs/README.md' // 单独列出，处理github pages的点击无法跳转问题
 
 const routes = [
  {
    title: '首页',
    name: 'Index',
    path: '/',
    component: Index,
    redirect: '/get-start'
  },
  {
    title: '起步',
    name: 'GetStart',
    path: '/get-start',
    component: GetStart,
  },
  {
    title: '按钮',
    name: 'Button',
    path: '/components/button',
    component: Button,
  }
 ]

 const routerConfig = {
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
  scrollBehavior(to: any, from: any) {
    if (to.path !== from.path) {
      return { top: 0 }
    }
  },
}

const router = createRouter(routerConfig as RouterOptions)
 
export default router

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import pxtoviewport from 'postcss-px-to-viewport'
import path from 'path'
import Markdown from 'vite-plugin-md'
import VueMacros from 'unplugin-vue-macros/vite'

const pxtoviewportConfig = pxtoviewport({
  viewportWidth: 1366, // 设计稿的视口宽度
})

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: vue({ include: [/\.vue$/, /\.md$/] }),
        vueJsx: vueJsx({
          // options are passed on to @vue/babel-plugin-jsx
        }),
      },
    }),
    Markdown(),
  ],
  css: {
    postcss: {
      plugins: [pxtoviewportConfig]
    }
  },
  resolve: {
    alias: {
      '@kudzu': path.resolve(__dirname, './packages')
    }
  }
})

import { defineComponent, onMounted, reactive } from "vue"

export default defineComponent({
  props: {
    /** 组件名称 */
    compName: {
      type: String,
      default: '',
      require: true,
    },
    /** 要显示代码的组件 */
    demoName: {
      type: String,
      default: '',
      require: true,
    },
  },

  setup(props) {
    const data = reactive({
      sourceCode: '',
    })

    onMounted(async () => {
      data.sourceCode =  (
        // 此处只能使用相对路径或者绝对路径
        await import(`../../packages/${props.compName}/demo/${props.demoName}.vue?raw`)
      ).default
    })

    return () => (
      <pre>{ data.sourceCode }</pre>
    )
  }
})

const isDev = import.meta.env.MODE === 'development';

if (isDev) {
  this.sourceCode = (
    await import(/* @vite-ignore */ `../../packages/${this.compName}/docs/${this.demoName}.vue?raw`)
  ).default;
} else {
  this.sourceCode = await fetch(`/packages/${this.compName}/docs/${this.demoName}.vue`).then((res) => res.text());
}

import { nextTick } from "vue"
import PrismJS from 'prismjs' // markdown高亮
import '@examples/assets/prism.css' // 高亮主题

setup(props) {
    onMounted(async () => {
      // 省略。。。
      await nextTick() // 确保在源码都渲染好了以后再执行高亮
      PrismJS.highlightAll()
    })
  }
}

declare module "prismjs"

import { defineComponent, onMounted, reactive, nextTick, ref } from "vue"
import PrismJS from 'prismjs' // markdown高亮
import '@examples/assets/prism.css' // 高亮主题
import style from '@examples/components/Preview.module.less'

export default defineComponent({
  props: {
    /** 组件名称 */
    compName: {
      type: String,
      default: '',
      require: true,
    },
    /** 要显示代码的组件 */
    demoName: {
      type: String,
      default: '',
      require: true,
    },
  },

  setup(props, { slots }) {
    const sourceCode = ref<any>(null)
    const data = reactive({
      sourceCode: '',
      height: '0'
    })

    onMounted(async () => {
      data.sourceCode = (
        // 此处只能使用相对路径或者绝对路径
        await import(`../../packages/${props.compName}/demo/${props.demoName}.vue?raw`)
      ).default

      await nextTick() // 确保在源码都渲染好了以后再执行高亮
      PrismJS.highlightAll()
    })

    const changeSourceCodeStatus = () => {
      console.log()
      data.height === '0' ? data.height = getComputedStyle(sourceCode.value).height : data.height = '0'
      nextTick(() => {
        // 确保在源码都渲染好了以后再执行高亮
        PrismJS.highlightAll()
      })
    }

    return () => (
      <div class={style.preview}>
        <div class={style.display}>{ slots.default ? slots.default() : null }</div>
        <pre 
          style={{ height: data.height, padding: data.height === '0' ? '0' : '20px' }}
          class="language-html"
        >
          <code ref={sourceCode} class="language-html">{data.sourceCode}</code>
        </pre>
        <div class={style.control} onClick={changeSourceCodeStatus}>
          { data.height === 'hide' ? <span>显示代码</span> : <span>隐藏代码</span> }
        </div>
      </div>
    )
  }
})

import { withInstall } from '@kudzu/utils'
import Button from './src/index'

export const KuButtonPlugin = withInstall(Button)

export { Button }

// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      // the proper extensions will be added
      fileName: 'my-lib',
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})
// lib/main.js
import Foo from './Foo.vue'
import Bar from './Bar.vue'
export { Foo, Bar }