diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index e4b2f02..364e368 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -22,6 +22,7 @@ function getComponents() {
{ text: 'Badge', link: '/components/badge/badge' },
{ text: 'Button', link: '/components/button/button' },
{ text: 'Card', link: '/components/card/card' },
+ { text: 'Divider', link: '/components/divider/divider' },
];
}
diff --git a/docs/components/divider/divider.md b/docs/components/divider/divider.md
new file mode 100644
index 0000000..99adada
--- /dev/null
+++ b/docs/components/divider/divider.md
@@ -0,0 +1,85 @@
+
+
+# bo-divider
+
+A divider is a thin line that groups content in a list or separates sections.
+
+
+
+## Basic usage
+
+The component to use is called `bo-divider`.
+
+```vue
+
+```
+
+## Props
+
+| Prop name | Type | Default value |
+| ---------------- | ------------------ | -------------------------- |
+| `id` | `string` | `undefined` |
+| `variant` | `BoDividerVariant` | `BoDividerVariant.primary` |
+| `color-hex` | `string` | `undefined` |
+| `tailwind-color` | `string` | `undefined` |
+
+## Variants
+
+To change the style of the divider, you can use the `variant` prop.
+
+The available values for the `variant` prop are:
+
+- `default`
+- `dotted`
+- `dashed`
+
+
+
+
+
+
+
+```vue
+
+```
+
+## Colors
+
+There are two ways to change the color of the divider.
+
+- By using the `color-hex` prop
+- By using the `tailwind-color` prop
+
+### Color by hex
+
+To change the color of the divider, you can use the `color-hex` prop.
+
+
+
+
+
+
+
+```vue
+
+
+
+```
+
+### Color by tailwind
+
+To change the color of the divider, you can also use the `tailwind-color` prop. This accepts any valid border color from the [Tailwind CSS documentation](https://tailwindcss.com/docs/border-color).
+
+
+
+
+
+
+
+```vue
+
+
+
+```
diff --git a/src/components/bo_card/BoCard.vue b/src/components/bo_card/BoCard.vue
index 2a1be94..8e415a5 100644
--- a/src/components/bo_card/BoCard.vue
+++ b/src/components/bo_card/BoCard.vue
@@ -1,7 +1,7 @@
@@ -33,7 +33,7 @@ import { BoFontFamily, BoFontSize, BoFontWeight, BoText, BoTextColor } from '@/c
import type { StyleConstruct } from '@/types';
import { TailwindUtils } from '@/utils';
import { computed, toRefs } from 'vue';
-import type { BoCardProps } from './types';
+import type { BoCardProps } from './bo_card';
const props = withDefaults(defineProps
(), {
padding: () => ({
diff --git a/src/components/bo_card/__stories__/bo_card.mdx b/src/components/bo_card/__stories__/bo_card.mdx
deleted file mode 100644
index 7280159..0000000
--- a/src/components/bo_card/__stories__/bo_card.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks'
-import * as BoCardStories from './bo_card.stories'
-
-
-
-# bo-card
-
-A card is a container that holds related content and actions. The `bo-card` component is a component that can be used to display a card in various ways.
-
-## Basic usage
-
-The component to use is called `bo-card`.
-
-```html
-
-
- // some content
-
-
-```
-
-## Props
-
-- `title` - The title of the card (optional)
- - default: `undefined`
-- `description` - The description of the card (optional)
- - default: `undefined`
-- `clickable` - Whether the card is clickable (optional)
- - default: `false`
-- `widthInPx` - The width of the card in pixels (optional)
- - default: `undefined`
-- `widthInPercent` - The width of the card in percent (optional)
- - default: `undefined`
-- `widthAsTailwindClass` - The width of the card as a tailwind class (optional)
- - default: `undefined`
-
-## Examples
-
-
-
-
-## Title and description
-
-In case you don't want to use the `content` slot, you can use the `title` and `description` props to display a title and description.
-
-
-
-## Clickable
-
-To make the card clickable, you can use the `clickable` prop.
-This will add a cursor pointer and a hover effect to the card.
-
-
-
-## No padding
-
-To remove the padding from the card, you can use the `padding` prop.
-The `padding` prop should be an object with the following properties:
-
-- `top` - Whether to add padding to the top (optional)
- - default: `true`
-- `right` - Whether to add padding to the right (optional)
- - default: `true`
-- `bottom` - Whether to add padding to the bottom (optional)
- - default: `true`
-- `left` - Whether to add padding to the left (optional)
- - default: `true`
-
-
-
-## Width in px
-
-To set the width of the card in pixels, you can use the `widthInPx` prop.
-
-
-
-## Width in percent
-
-To set the width of the card in percent, you can use the `widthInPercent` prop.
-
-
-
-## Width as tailwind class
-
-To set the width of the card as a tailwind class, you can use the `widthAsTailwindClass` prop.
-
-
diff --git a/src/components/bo_card/__stories__/bo_card.stories.ts b/src/components/bo_card/__stories__/bo_card.stories.ts
deleted file mode 100644
index 188b3b6..0000000
--- a/src/components/bo_card/__stories__/bo_card.stories.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-import { BoBadge, BoBadgeVariant } from '@/components/bo_badge'
-import { BoCard } from '@/components/bo_card'
-import {
- BoFontFamily,
- BoFontSize,
- BoText,
- BoTextColor,
-} from '@/components/bo_text'
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-const meta = {
- title: 'Components/bo-card',
- component: BoCard,
- argTypes: {
- content: {
- description: 'The main slot of the card',
- table: {
- category: 'slots',
- subcategory: 'optional',
- },
- },
- title: {
- description: 'The title of the card',
- control: { type: 'text' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- },
- description: {
- description: 'The description of the card',
- control: { type: 'text' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- },
- clickable: {
- description: 'Whether the card is clickable',
- control: { type: 'boolean' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- defaultValue: false,
- },
- widthInPx: {
- description: 'The width of the card in pixels',
- control: { type: 'number' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- },
- widthInPercent: {
- description: 'The width of the card in percent',
- control: { type: 'number' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- },
- widthAsTailwindClass: {
- description: 'The width of the card as a tailwind class',
- control: { type: 'text' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- },
- padding: {
- description: 'The padding of the card',
- control: { type: 'object' },
- table: {
- category: 'props',
- subcategory: 'optional',
- },
- defaultValue: {
- top: true,
- right: true,
- bottom: true,
- left: true,
- },
- },
- },
-} satisfies Meta
-
-export default meta
-type Story = StoryObj
-
-export const Example: Story = {
- render: () => ({
- components: { BoCard, BoBadge },
- template: `
-
-
-
-
-
-
-
-
-
-
- `,
- }),
-}
-
-export const TitleAndDescription: Story = {
- render: () => ({
- components: { BoCard },
- template: `
-
- `,
- }),
-}
-
-export const Clickable: Story = {
- render: () => ({
- components: { BoCard },
- template: `
-
- `,
- }),
-}
-
-export const NoPadding: Story = {
- render: () => ({
- components: { BoCard, BoText },
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
- `,
- }),
-}
-
-export const WidthInPx: Story = {
- render: () => ({
- components: { BoCard },
- template: `
-
- `,
- }),
-}
-
-export const WidthInPercent: Story = {
- render: () => ({
- components: { BoCard },
- template: `
-
- `,
- }),
-}
-
-export const WidthAsTailwindClass: Story = {
- render: () => ({
- components: { BoCard },
- template: `
-
- `,
- }),
-}
diff --git a/src/components/bo_card/types.ts b/src/components/bo_card/bo_card.ts
similarity index 100%
rename from src/components/bo_card/types.ts
rename to src/components/bo_card/bo_card.ts
diff --git a/src/components/bo_card/index.ts b/src/components/bo_card/index.ts
index 3e763ba..491fa72 100644
--- a/src/components/bo_card/index.ts
+++ b/src/components/bo_card/index.ts
@@ -1,2 +1,2 @@
-export { default as BoCard } from './BoCard.vue'
-export * from './types'
+export { default as BoCard } from './BoCard.vue';
+export * from './bo_card';
diff --git a/src/components/bo_divider/BoDivider.vue b/src/components/bo_divider/BoDivider.vue
index 33082aa..6338e99 100644
--- a/src/components/bo_divider/BoDivider.vue
+++ b/src/components/bo_divider/BoDivider.vue
@@ -1,58 +1,64 @@
-
+
diff --git a/src/components/bo_divider/__stories__/bo_divider.mdx b/src/components/bo_divider/__stories__/bo_divider.mdx
deleted file mode 100644
index b8d5a9b..0000000
--- a/src/components/bo_divider/__stories__/bo_divider.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks'
-import * as BoDividerStories from './bo_divider.stories'
-
-
-
-# bo-divider
-
-A divider is a thin line that groups content in a list or separates sections.
-
-## Basic usage
-
-The component to use is called `bo-divider`.
-
-```html
-
-```
-
-## Props
-
-- `variant` - The variant of the divider (optional)
- - default: `BoDividerVariant.primary`
-- `type` - The type of the divider (optional)
- - default: `BoDividerType.default`
-
-## Examples
-
-
-
-
-## Variants
-
-To change the color of the component, you can use the predifened `BoDividerVariant` enum. The `BoDividerVariant` enum includes the following variants:
-
-- `primary`
-- `secondary`
-- `danger`
-- `warning`
-- `success`
-- `dark`
-
-
-
-## Types
-
-The `type` prop can be used to change the type of the divider. The `type` prop should be a member of the `BoDividerType` enum.
-
-- `default`
-- `dotted`
-- `dashed`
-
-
diff --git a/src/components/bo_divider/__stories__/bo_divider.stories.ts b/src/components/bo_divider/__stories__/bo_divider.stories.ts
deleted file mode 100644
index b56b981..0000000
--- a/src/components/bo_divider/__stories__/bo_divider.stories.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { BoDivider, BoDividerType, BoDividerVariant } from '@/components/bo_divider'
-import BoText from '@/components/bo_text/BoText.vue'
-import { StorybookUtils } from '@/utils'
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-const meta = {
- title: 'Components/bo-divider',
- component: BoDivider,
- argTypes: {
- variant: {
- description: 'The variant of the divider',
- control: { type: 'select' },
- options: Object.values(BoDividerVariant),
- table: {
- category: 'props',
- subcategory: 'optional',
- type: {
- summary: 'BoDividerVariant',
- detail: StorybookUtils.stringEnumFormatter(BoDividerVariant, 'BoDividerVariant'),
- },
- },
- defaultValue: BoDividerVariant.primary,
- },
- type: {
- description: 'The type of the divider',
- control: { type: 'select' },
- options: Object.values(BoDividerType),
- table: {
- category: 'props',
- subcategory: 'optional',
- type: {
- summary: 'BoDividerType',
- detail: StorybookUtils.stringEnumFormatter(BoDividerType, 'BoDividerType'),
- },
- },
- defaultValue: BoDividerType.default,
- },
- },
-} satisfies Meta
-
-export default meta
-type Story = StoryObj
-
-export const Example: Story = {
- render: (args) => ({
- components: { BoDivider },
- setup() {
- return { args }
- },
- template: `
-
-
-
- `,
- }),
- args: {
- variant: BoDividerVariant.primary,
- type: BoDividerType.default,
- },
-}
-
-export const Variants: Story = {
- render: (args) => ({
- components: { BoDivider },
- setup() {
- const variants = Object.values(BoDividerVariant)
- return { variants, args }
- },
- template: `
-
-
- default
-
-
- {{ variants[1] }}
-
-
- {{ variants[2] }}
-
-
- {{ variants[3] }}
-
-
- {{ variants[4] }}
-
- `,
- }),
- args: {
- variant: BoDividerVariant.primary,
- type: BoDividerType.default,
- },
-}
-
-export const Types: Story = {
- render: (args) => ({
- components: { BoDivider, BoText },
- setup() {
- const types = Object.values(BoDividerType)
- return { types, ...args }
- },
- template: `
-
-
-
- {{ type }}
-
-
- `,
- }),
- args: {},
-}
diff --git a/src/components/bo_divider/bo_divider.ts b/src/components/bo_divider/bo_divider.ts
new file mode 100644
index 0000000..5912106
--- /dev/null
+++ b/src/components/bo_divider/bo_divider.ts
@@ -0,0 +1,12 @@
+export type BoDividerProps = {
+ id?: string;
+ variant?: BoDividerVariant;
+ colorHex?: string;
+ tailwindColor?: string;
+};
+
+export enum BoDividerVariant {
+ default = 'default',
+ dotted = 'dotted',
+ dashed = 'dashed',
+}
diff --git a/src/components/bo_divider/constants.ts b/src/components/bo_divider/constants.ts
deleted file mode 100644
index f2a713c..0000000
--- a/src/components/bo_divider/constants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export enum BoDividerVariant {
- primary = 'primary',
- secondary = 'secondary',
- danger = 'danger',
- warning = 'warning',
- success = 'success',
- dark = 'dark',
-}
-
-export enum BoDividerType {
- default = 'default',
- dotted = 'dotted',
- dashed = 'dashed',
-}
diff --git a/src/components/bo_divider/index.ts b/src/components/bo_divider/index.ts
index 12b80ab..a8f5ebe 100644
--- a/src/components/bo_divider/index.ts
+++ b/src/components/bo_divider/index.ts
@@ -1,3 +1,2 @@
-export { default as BoDivider } from './BoDivider.vue'
-export * from './constants'
-export * from './types'
+export { default as BoDivider } from './BoDivider.vue';
+export * from './bo_divider';
diff --git a/src/components/bo_divider/types.ts b/src/components/bo_divider/types.ts
deleted file mode 100644
index 6e794d0..0000000
--- a/src/components/bo_divider/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { BoDividerType, BoDividerVariant } from './constants'
-
-export type BoDividerProps = {
- variant?: BoDividerVariant
- type?: BoDividerType
-}
diff --git a/src/components/bo_modal/BoSlotModal.vue b/src/components/bo_modal/BoSlotModal.vue
index 2f4683a..0b65179 100644
--- a/src/components/bo_modal/BoSlotModal.vue
+++ b/src/components/bo_modal/BoSlotModal.vue
@@ -41,13 +41,13 @@
-
+