@wujibase/tds-ui-vue3

🎨 Vue 3 version of TDS UI components - Navigation and Footer components for Vue 3 applications.

Features

• ✅ Pure Vue 3 components - No need to install React dependencies
• ✅ TdsNavigation - Responsive navigation bar with dropdown menus
• ✅ TdsHomeFooter - Footer component for TDS applications
• ✅ Full TypeScript support - Complete type definitions
• ✅ Zero configuration - Works out of the box
• ✅ Lightweight - All dependencies bundled, only Vue required

Installation

npm install @wujibase/tds-ui-vue3

Peer Dependencies

Only Vue 3 is required:

npm install vue

Note: React and React-DOM are already bundled in this package, so you don't need to install them separately.

Usage

Basic Example

import { TdsNavigation, TdsHomeFooter } from '@wujibase/tds-ui-vue3'
import '@wujibase/tds-ui-vue3/dist/style.css'

export default {
  components: {
    TdsNavigation,
    TdsHomeFooter
  }
}

In Vue 3 SFC (Composition API)

<template>
  <div>
    <TdsNavigation 
      :isProd="true"
      :isMobile="false"
      :activeMenu="0"
      class="wuji-tds-ui"
    />
    
    <main>
      <!-- Your content -->
    </main>
    
    <TdsHomeFooter 
      :isProd="true"
      :isMobile="false"
      class="wuji-tds-ui"
    />
  </div>
</template>

<script setup lang="ts">
import { TdsNavigation, TdsHomeFooter, TdsItem } from '@wujibase/tds-ui-vue3'
import '@wujibase/tds-ui-vue3/dist/style.css'

// TdsItem.Home = 0
// TdsItem.Bugly = 1
// ... etc
</script>

With TypeScript

import { TdsNavigation, TdsItem, type TdsNavigationProps } from '@wujibase/tds-ui-vue3'

// Full type support
const props: TdsNavigationProps = {
  isProd: true,
  isMobile: false,
  activeMenu: TdsItem.Home,
  width: 1200,
  position: 'fixed'
}

Components

TdsNavigation

Responsive navigation bar component with dropdown menus.

Props:

interface TdsNavigationProps {
  className?: string
  width?: number | string          // Default: 1200
  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'  // Default: 'fixed'
  activeMenu: TdsItem             // Current active menu item
  isProd: boolean                 // Production or test environment
  isMobile?: boolean              // Mobile mode, default: false
  isWoa?: boolean                 // WOA version, default: false
}

Example:

<TdsNavigation 
  :isProd="true"
  :isMobile="false"
  :activeMenu="TdsItem.Home"
  width="1200"
  position="fixed"
/>

TdsHomeFooter

Footer component for TDS applications.

Props:

interface TdsHomeFooterProps {
  className?: string
  isProd: boolean                 // Production or test environment
  isMobile?: boolean              // Mobile mode, default: false
}

Example:

<TdsHomeFooter 
  :isProd="true"
  :isMobile="false"
/>

TdsItem Enum

Available menu items:

enum TdsItem {
  Home = 0,
  Bugly = 1,
  TDesgin = 2,
  Wuji = 3,
  Kuikly = 4,
  Shiply = 5,
  Rightly = 6,
  UTest = 7,
  More = 8,
  // ... more items
}

Styling

The package includes all necessary styles. Import the CSS file in your main entry file:

// main.ts
import '@wujibase/tds-ui-vue3/dist/style.css'

Or import in your component:

<style>
@import '@wujibase/tds-ui-vue3/dist/style.css';
</style>

Important Notes

1. No React Required: This package bundles React internally, so you don't need to install React or React-DOM in your Vue project.

2. Bundle Size: The package includes React (~130KB gzipped), so the total bundle size is larger than a pure Vue component library. This is a trade-off for not having to maintain separate implementations.

3. SSR Support: Currently, this package is designed for client-side rendering. SSR support may be added in future versions.

4. Responsive Design: Both components support responsive design and will adapt to mobile devices when isMobile prop is set to true.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues, please file them on the GitHub issue tracker.