Custom Components Library based on Vue 3 + Vite + Shadcn

This is a custom npm component library based on Vue 3 + Vite + Shadcn. It provides a collection of reusable components that can be easily integrated into Vue projects. With the power of Vue 3, the lightning-fast build tool Vite, and the shader language Shadcn, this library offers a seamless development experience and stunning visual effects. Whether you're building a web application or a creative project, this library has got you covered.

To get started, simply install the library via npm:

npm install custom-component-lib-vue

Then, import the components you need in your Vue project:

import { EButton, ECard, EModal } from 'custom-component-lib-vue';

export default {
    components: {
        EButton,
        ECard,
        EModal
    },
    // ...
}

Then, import the styles in main.js of your Vue project:

import 'custom-component-lib-vue/style.css';
    // ...

You can now use these components in your templates:

<template>
    <div>
        <EButton>Click me</EButton>
        <ECard title="Hello">This is a card component</Card>
        <EModal :visible="showModal" @close="showModal = false">This is a modal component</EModal>
    </div>
</template>

ESidebar Component

The ESidebar component is a versatile and customizable sidebar component for your application. It provides a navigational menu, which can be toggled open or closed, and optionally displays a sign-out button.

Props

The table below outlines the props that can be passed to the ESidebar component:

| Prop Name | Type | Required | Default | Description | |-----------------|----------|----------|----------------|--------------------------------------------------| | title | String | Yes | 'Menu Title' | The title displayed at the top of the sidebar. | | isOpen | Boolean | Yes | false | Determines if the sidebar is open or closed. | | displaySignout| Boolean | No | true | Option to display the sign-out button. | | menuList | Array | Yes | N/A | Array of menu items to be displayed in the sidebar. | | pathname | String | Yes | N/A | Current pathname used to highlight active menu item. | | toggleSidebar | Function | Yes | N/A | Function to toggle the open/close state of the sidebar. |

Usage

Below is an example of how to use the ESidebar component in your application:

<template>
  <div id="app">
    <ESidebar
      :title="'My Menu'"
      :isOpen="true"
      :displaySignout="true"
      :menuList="menuList"
      :pathname="pathname"
      :toggleSidebar="toggleSidebar"
    />
  </div>
</template>

<script setup>
import ESidebar from './components/ESidebar.vue';

const getMenuList = (pathname) => {
  return [
    {
      groupLabel: '',
      menus: [
        {
          href: '/dashboard',
          label: 'Dashboard',
          active: pathname.includes('/dashboard'),
          icon: LayoutGrid,
          submenus: []
        }
      ]
    },
    {
      groupLabel: 'Contents',
      menus: [
        {
          href: '',
          label: 'Posts',
          active: pathname.includes('/posts'),
          icon: SquarePen,
          submenus: [
            {
              href: '/posts',
              label: 'All Posts',
              active: pathname === '/posts'
            },
            {
              href: '/posts/new',
              label: 'New Post',
              active: pathname === '/posts/new'
            }
          ]
        },
        {
          href: '/categories',
          label: 'Categories',
          active: pathname.includes('/categories'),
          icon: Bookmark,
          submenus: []
        },
        {
          href: '/tags',
          label: 'Tags',
          active: pathname.includes('/tags'),
          icon: Tag,
          submenus: []
        }
      ]
    },
  ]
}

const pathname = '/dashboard'

const menuList = getMenuList(pathname)

const toggleSidebar = () => {
  // Your toggle logic here
}
</script>

EMultiSelect custom component from the Custom Components Library, follow these steps:

1. Install the library via npm:

npm install custom-component-lib-vue

2. Import the EMultiSelect component in your Vue project:

import { EMultiSelect } from 'custom-component-lib-vue';

import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as zod from 'zod'
import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/shadcn-components/ui/form'

import { Icons } from '@/shadcn-components/ui/icons/icons'
import { Button } from '@/shadcn-components/ui/button'
import { Card } from '@/shadcn-components/ui/card'

3. Difine Form Schema

const FormSchema = toTypedSchema(
  zod.object({
    frameworks: zod.array(zod.string()).min(1, { message: 'Please select at least one framework.' })
  })
)

const form = useForm({
  validationSchema: FormSchema,
  initialValues: {
    frameworks: ['sveltekit', 'nuxt.js']
  }
})

const handleChildEvent = (message) => {
  form.setFieldValue('frameworks', message)
}

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted!', values.frameworks)
})

4. Set Field options which need to be used

const frameworksList = [
  {
    value: 'next.js',
    label: 'Next.js',
    icon: Icons.dog
  },
  {
    value: 'sveltekit',
    label: 'SvelteKit',
    icon: Icons.cat
  },
  {
    value: 'nuxt.js',
    label: 'Nuxt.js',
    icon: Icons.turtle
  },
  {
    value: 'remix',
    label: 'Remix',
    icon: Icons.rabbit
  },
  {
    value: 'astro',
    label: 'Astro',
    icon: Icons.fish
  }
]

5. Use the EMultiSelect component in your templates inside of the form:

<template>
  <div class="min-h-screen:calc(100vh - 3rem) flex flex-col items-center justify-start space-y-3 p-3">
    <Card class="w-full max-w-2xl p-5">
      <form @submit="onSubmit" class="space-y-8">
        <FormField name="frameworks" :control="form.control" v-slot="{ field }">
          <FormItem>
            <FormLabel>Frameworks</FormLabel>
            <FormControl>
              <EMultiSelect
                :options="frameworksList"
                placeholder="Select frameworks"
                @onValueChange="handleChildEvent"
                :defaultValue="field.value"
                variant="secondary"
                :maxCount="3" />
            </FormControl>
            <FormDescription> Choose the frameworks you are interested in. </FormDescription>
            <FormMessage />
          </FormItem>
        </FormField>
        <Button type="submit"> Submit </Button>
      </form>
    </Card>
  </div>
</template>

6. Handle the selected options by accessing the handleChildEvent function in your Vue component's methods.

That's it! You can now use the EMultiSelect custom component in your Vue project to enable multi-select functionality.

Happy coding with Custom Components Library! For more information on how to use each component, please refer to the documentation.

Happy coding with Custom Components Library!