9 |
10 |
11 | Keep design system
12 |
13 | Component design systems can help developers to be more productive
14 | by providing them with a ready-made set of components to use.
15 |
16 |
17 |
18 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/content/docs/components/avatar.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Avatar"
3 | description: "The Avatar component in the Keep Vue allows you to display user avatars or profile images in a consistent and visually appealing manner. With customizable options for placeholders, shapes, status icons, and sizes, you can create versatile avatars to suit your design needs."
4 | ---
5 |
6 | The Avatar component in the Keep Vue allows you to display user avatars or profile images in a consistent and visually appealing manner.
7 |
8 | ## Default Avatar
9 |
10 | When you enable the placeholder option, a default avatar image appears when there's no user image available.
11 |
12 | ::DefaultAvatar
13 | ::
14 |
15 | ## Avatar Status
16 |
17 | The avatar's status reflects the user's availability.
18 |
19 | ::AvatarWithStatus
20 | ::
21 |
22 | ## Avatar Group
23 |
24 | Display multiple avatars in a group setting. Customize the layout for visually appealing designs.
25 |
26 | ::AvatarWithGroup
27 | ::
28 |
--------------------------------------------------------------------------------
/content/docs/components/card.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Card"
3 | description: "The card component in Keep Vue offers a variety of button types, sizes, and states to meet your design needs. With options for icons and destructiveness, you can create visually appealing and functional buttons for your product."
4 | ---
5 |
6 | ## Default Card
7 |
8 | The Default Card in Keep Vue is a foundational component that provides a clean and straightforward appearance. It serves as a starting point for creating more complex card designs.
9 |
10 | ::DefaultCard
11 | ::
12 |
13 | ## Card with avatar
14 |
15 | Any component can be placed inside the card, including avatars.
16 |
17 | ::CardWithAvatar
18 | ::
19 |
20 | ## Card with product
21 |
22 | Any component can be placed inside the card, including avatars.
23 | ::ProductCard
24 | ::
25 |
26 | ## Register Card
27 |
28 | Here we design a demo register card for the user. Customize it as desired using the class props.
29 | ::RegisterCard
30 | ::
31 |
--------------------------------------------------------------------------------
/content/docs/components/number-input.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Number"
3 | description: "Number Input Component is a user interface element designed for collecting numeric input from users. It provides a field where users can enter numerical values, such as integers or decimals, using keyboard input or arrow buttons."
4 | ---
5 |
6 | ## Default Number Input
7 |
8 | Default Number Input is a simple numeric input field with two buttons for incrementing and decrementing the value.You can use all the properties that an input element needs to. By default we set the `min value = 0` and `max value = 100`
9 |
10 | ::DefaultNumberInput
11 | ::
12 |
--------------------------------------------------------------------------------
/content/docs/components/progress.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Progress"
3 | description: "The Progress Bar Component in the Keep Vue allows you to visually represent the progress or completion of a task or process."
4 | ---
5 |
6 | ## Default Progress
7 |
8 | Default Progress allows you to visually represent the progress or completion of a task or process.
9 | ::DefaultProgress
10 | ::
11 |
12 | ## Line Progress
13 |
14 | ::DefaultLineProgress
15 | ::
16 |
17 | ## Customize Circle Progress
18 |
19 | ::CustomizeCircleProgress
20 | ::
21 |
22 | ## Customize Line Progress
23 |
24 | ::CustomizeLineProgress
25 | ::
26 |
27 | ## Circle Progress API
28 |
29 | Explore the available props for the Circle Progress component.
30 | ::CircleProgressApi
31 | ::
32 |
33 | ## Line Progress API
34 |
35 | Explore the available props for the Line Progress component.
36 | ::LineProgressApi
37 | ::
38 |
--------------------------------------------------------------------------------
/content/docs/components/slider.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Slider"
3 | description: "The slider component in the Keep Vue allows users to select a value within a specified range. With customizable options for the control handle type, scale display, label, and tooltip, you can create versatile sliders that fit your design needs."
4 | ---
5 |
6 | ## Default Slider
7 |
8 | To use the Slider, you must bind the slider's `ref` value to the `v-model`.
9 |
10 | ::DefaultSlider
11 | ::
12 |
13 | ## Double Slider
14 |
15 | ::DoubleSlider
16 | ::
17 |
18 | ## API Reference
19 |
20 | Explore the props for the slider component. For more information.
21 | ::SliderApi
22 | ::
23 | For more props see the documentation of [Radix Vue Slider](https://www.radix-vue.com/components/slider.html#api-reference)
24 |
25 |
26 |
27 | ## Reference
28 |
29 | To learn more about the Slider, please see the documentation of [Radix Vue Slider](https://www.radix-vue.com/components/slider.html).
30 |
--------------------------------------------------------------------------------
/content/docs/components/spinner.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Spinner"
3 | description: "A Spinner Component is a visual user interface element commonly found in web and mobile applications. It is used to indicate ongoing processes or loading states, providing users with a visual cue that something is happening in the background."
4 | ---
5 |
6 | ## Default Spinner
7 |
8 | The "Default Spinner" is a loading indicator that uses the "info" color and appears in a larger size.
9 | ::DefaultSpinner
10 | ::
11 |
12 | ## Spinner Colors
13 |
14 | By offering a variety of color variants for spinner components, applications can enhance communication with users and provide visual cues that match the context of the displayed information or actions. Here is available color variants for the spinner: `primary` `secondary` `success` `warning` and `error`.
15 |
16 | ::SpinnerColors
17 | ::
18 |
19 | ## API Reference
20 |
21 | Explore the available props for the spinner component.
22 | ::SpinnerApi
23 |
24 | ::
25 |
--------------------------------------------------------------------------------
/content/docs/components/table.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Table"
3 | description: "Table Component is a fundamental user interface element used to present data in a structured and organized format. Tables consist of rows and columns, with each row representing a data entry and each column representing a specific attribute or field. Tables are commonly used to display tabular data, such as lists, grids, or datasets, making information easier to comprehend and compare."
4 | ---
5 |
6 | ## Default Table
7 |
8 | ::DefaultTable
9 | ::
10 |
11 | ## Product Table
12 |
13 | ::ProductTable
14 | ::
15 |
16 | ## Orders Table
17 |
18 | ::OrdersTable
19 | ::
20 |
21 | ## Teams Table
22 |
23 | ::TeamTable
24 | ::
25 |
--------------------------------------------------------------------------------
/content/docs/components/tabs.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Tab"
3 | description: "The Tab Group Component in the Keep Vue allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container."
4 | ---
5 |
6 | ## Default Tabs
7 |
8 | The Default Tabs component showcases the basic implementation of tabs.
9 | ::DefaultTabs
10 | ::
11 |
12 | ## Tabs With Icon
13 |
14 | ::TabsWithIcon
15 | ::
16 |
17 | ## Tabs Fill variant
18 |
19 | Display tabs fill variant by setting the `variant` prop to `fill`.
20 | ::TabsFill
21 | ::
22 |
23 | ## Tabs Underline variant
24 |
25 | Display tabs underline variant by setting the `variant` prop to `underline`.
26 | ::TabsUnderline
27 | ::
28 |
29 | ## Tabs API Reference
30 |
31 | Explore the available props for the `` component.
32 | ::TabsApi
33 | ::
34 |
35 | ## Tabs Items API Reference
36 |
37 | Explore the available props for the `` component.
38 | ::TabsItemApi
39 | ::
40 |
--------------------------------------------------------------------------------
/content/docs/getting-started/1.introduction.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Introduction"
3 | description: "Keep Vue is an open-source component library built on top of Vue and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications. Install Keep Vue in your Vue application or NuxtJS Application following step bellow."
4 | ---
5 |
6 | ## Vue Application
7 |
8 | Setting Up Keep Vue in Vite Vue Application
9 |
10 | ::IntroductionForVue
11 | ::
12 |
13 | ## Nuxt Application
14 |
15 | Setting Up Keep Vue in Nuxt Application
16 |
17 | ::IntroductionForNuxt
18 | ::
19 |
--------------------------------------------------------------------------------
/content/docs/getting-started/3.colors.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Colors"
3 | description: "The color palette includes primary, secondary, success, warning, and error colors. The primary color is used for branding and main actions, while the secondary color complements the primary and is used for secondary elements. The success color, usually green, indicates positive actions. The warning color, often yellow or orange, is used for cautionary information, and the error color, typically red, signifies errors or critical actions."
4 | ---
5 |
6 | ## Colors
7 |
8 | Keep Vue includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.
9 | ::ColorsTable
10 | ::
11 |
12 | ## Customize color palette
13 |
14 | You can customize the color palette by following these steps:
15 | ::CustomizeSteps
16 | ::
17 |
--------------------------------------------------------------------------------
/content/docs/getting-started/4.dark-mode.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Dark Mode"
3 | description: "Dark Mode is a user interface design option that uses a darker color palette, typically black or dark grey, for backgrounds and light-colored text and icons. It reduces eye strain in low-light environments, conserves battery life on OLED and AMOLED screens, and can enhance visual appeal."
4 | ---
5 |
6 | ## Vue
7 |
8 | Setting up dark mode in Vue project.
9 | ::DarkModeForVue
10 | ::
11 |
12 | ## Vue JS Reference
13 |
14 | To learn more about the Vue Use Dark Mode, please see the documentation of [VueUse](https://vueuse.org/core/useDark/#usedark)
15 |
16 | ## Nuxt JS
17 |
18 | Setting up dark mode in NuxtJs Project.
19 | ::DarkModeForNuxt
20 | ::
21 |
22 | ## Nuxt JS Reference
23 |
24 | To learn more about the Nuxt Color Mode, please see the documentation of [Nuxt Color Mode](https://color-mode.nuxtjs.org/#features)
25 |
--------------------------------------------------------------------------------
/content/docs/layout/2.column.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Column - Tailwind CSS Columns"
3 | raw: true
4 | description: "Utilities for controlling the number of columns within an element."
5 | ---
6 |
7 | ## Layout One
8 |
9 | ::LayoutOne
10 | ::
11 |
12 | ## Layout Two
13 |
14 | ::LayoutTwo
15 | ::
16 |
17 | ## Reference
18 |
19 | If you want to know more about columns layouts then you can read the documentation of tailwind css [columns](https://tailwindcss.com/docs/columns) sections.
20 |
--------------------------------------------------------------------------------
/content/docs/layout/3.flex.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Flex"
3 | description: "A flex layout is a design approach that leverages the flex box model to create flexible and responsive arrangements of elements within a container. It allows items to dynamically adjust their size, alignment, and distribution, making it ideal for building responsive and visually appealing user interfaces."
4 | ---
5 |
6 | ## Layout One
7 |
8 | ::FlexLayoutOne
9 | ::
10 |
11 | ## Layout Two
12 |
13 | ::FlexLayoutTwo
14 | ::
15 |
16 | ## Layout Three
17 |
18 | ::FlexLayoutThree
19 | ::
20 |
21 | If you want to know more about flex layouts then you can read the documentation of tailwind css [flex](https://tailwindcss.com/docs/flex) sections.
22 |
--------------------------------------------------------------------------------
/content/docs/layout/4.grid.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Grid"
3 | description: "A grid layout is a design technique that organizes content into rows and columns, providing a structured and flexible way to arrange elements on a webpage."
4 | ---
5 |
6 | ## Layout One
7 |
8 | ::GridLayoutOne
9 | ::
10 |
11 | ## Layout Two
12 |
13 | ::GridLayoutTwo
14 | ::
15 |
16 | ## Layout Three
17 |
18 | ::GridLayoutThree
19 | ::
20 |
21 | ## Layout Four
22 |
23 | ::GridLayoutFour
24 | ::
25 |
26 | ## Reference
27 |
28 | If you want to know more about grid layouts then you can read the documentation of tailwind css [grid](https://tailwindcss.com/docs/grid-template-columns) sections.
29 |
--------------------------------------------------------------------------------
/error.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |