Custom-component-lib-vue NPM

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:

Install the library via npm:

npm install custom-component-lib-vue

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'

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)
})

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
  }
]

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>