@yunlefun/vue 0.0.2 → 0.0.3

package/build.config.ts

@@ -0,0 +1,17 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    './src/index',
+  ],
+
+  declaration: true,
+  clean: true,
+  rollup: {
+    emitCJS: true,
+  },
+  externals: [
+    'unplugin-vue-components',
+    '@nuxt/kit',
+  ],
+})

package/components/YlfBottomMenu.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-gray-100">
+    <nav class="flex justify-between mx-auto">
+      <slot />
+    </nav>
+  </div>
+</template>

package/components/YlfBottomMenuItem.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { BottomMenuItem } from '@yunlefun/vue-components'
+
+defineProps<{
+  active: boolean
+  item: BottomMenuItem
+}>()
+
+const emit = defineEmits(['click'])
+</script>
+
+<template>
+  <button
+    :class="{
+      active,
+    }"
+    class="ylf-bottom-menu-item hover:text-gray-900 cursor-pointer transition"
+    flex="~ 1"
+    justify="center" items="center"
+    text-gray-800 dark="text-white"
+    hover="text-blue-500"
+    p="2"
+    :to="item.to"
+    @click="emit('click', item)"
+  >
+    <div flex="~ col" justify="center" items="center">
+      <slot>
+        <div text-xl :class="(active && item.activeIcon) || item.icon" />
+        <span text-xs mt="1">
+          {{ item.title }}
+        </span>
+      </slot>
+    </div>
+  </button>
+</template>
+
+<style lang="scss">
+.ylf-bottom-menu-item {
+  color: var(--ylf-c-text, black);
+  background-color: var(--ylf-bottom-menu-c-bg, #fff);
+
+  &.active {
+    color: var(--ylf-c-primary, dodgerblue);
+  }
+}
+
+.dark {
+  .ylf-bottom-menu-item {
+    --ylf-bottom-menu-c-bg: #222;
+  }
+}
+</style>

package/components/bottom-menu/demo.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { BottomMenuItem } from '@yunlefun/vue-components'
+import { ref } from 'vue'
+
+const items: BottomMenuItem[] = [
+  {
+    icon: 'i-ri-home-line',
+    activeIcon: 'i-ri-home-fill',
+    title: '首页',
+    to: '/',
+  },
+  {
+    icon: 'i-ri-compass-2-line',
+    activeIcon: 'i-ri-compass-2-fill',
+    title: '发现',
+    to: '/discover',
+  },
+  {
+    icon: 'i-ri-user-line',
+    activeIcon: 'i-ri-user-fill',
+    title: '我的',
+    to: '/user',
+  },
+]
+
+const active = ref('/')
+function onClick(item: BottomMenuItem) {
+  active.value = item.to || ''
+}
+</script>
+
+<template>
+  <YlfBottomMenu shadow>
+    <YlfBottomMenuItem
+      v-for="item in items"
+      :key="item.to"
+      :item="item"
+      :active="active === item.to"
+      @click="onClick"
+    />
+  </YlfBottomMenu>
+</template>

package/components/bottom-menu/index.md

@@ -0,0 +1,4 @@
+---
+title: Bottom Menu
+title_zh: 底部菜单
+---

package/components/bottom-menu/index.ts

@@ -0,0 +1,20 @@
+export interface BottomMenuItem {
+  title: string
+  /**
+   * @description icon class
+   */
+  icon: string
+  /**
+   * @description active icon class
+   */
+  activeIcon?: string
+  /**
+   * @description RouterLink to
+   */
+  to?: string
+  /**
+   * onClick
+   * @returns
+   */
+  onClick?: () => void
+}

package/index.md

@@ -0,0 +1,35 @@
+# Components
+
+## Usage
+
+```bash
+pnpm add -D @yunlefun/vue-components
+```
+
+### Add auto import resolver for vue components
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { YlfResolver } from '@yunlefun/vue-components/auto-import-resolver'
+import Components from 'unplugin-vue-components/vite'
+
+export default defineConfig({
+  plugins: [
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['vue', 'md'],
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/components.d.ts',
+      resolvers: [
+        // add @yunlefun/vue-components auto import resolver
+        YlfResolver(),
+      ],
+    }),
+  ]
+})
+```
+
+You can use `<YlfXxx />` components in your vue files directly.

package/nuxt.js

@@ -0,0 +1,14 @@
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  hooks: {
+    'components:dirs': (dirs) => {
+      const { resolve } = createResolver(import.meta.url)
+      // Add ./components dir to the list
+      dirs.push({
+        path: fileURLToPath(resolve('./components')),
+        prefix: '',
+      })
+    },
+  },
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yunlefun/vue",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Components for YunLeFun",
   "exports": {
     "./components/*": "./components/*",
@@ -16,10 +16,6 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "auto-import-resolver.d.ts"
-  ],
   "scripts": {
     "build": "unbuild",
     "prepublishOnly": "npm run build",

package/src/README.md

@@ -0,0 +1,3 @@
+# @yunlefun/vue
+
+- `components`: Source Vue Components.

package/src/app.config.ts

@@ -0,0 +1 @@
+export default {}

package/src/index.ts

@@ -0,0 +1,13 @@
+import { dirname, resolve } from 'node:path'
+
+import { fileURLToPath } from 'node:url'
+
+// other exports
+export * from './types'
+
+// shim
+export const _dirname = typeof __dirname !== 'undefined'
+  ? __dirname
+  : dirname(fileURLToPath(import.meta.url))
+
+export const componentsDir = resolve(_dirname, '../components')

package/src/module.ts

@@ -0,0 +1 @@
+type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string } }>

package/src/types.ts

@@ -0,0 +1 @@
+export * from '../components/bottom-menu'

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}