diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index f85bc76..e3c70be 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -28,9 +28,17 @@ export default defineConfig({ text: 'Components', items: [ { text: 'Catalog', link: '/components/' }, + { text: 'Alert', link: '/components/alert' }, { text: 'Button', link: '/components/button' }, - { text: 'Input', link: '/components/input' }, { text: 'Card', link: '/components/card' }, + { text: 'Checkbox', link: '/components/checkbox' }, + { text: 'Dialog', link: '/components/dialog' }, + { text: 'Drawer', link: '/components/drawer' }, + { text: 'Input', link: '/components/input' }, + { text: 'Select', link: '/components/select' }, + { text: 'Table', link: '/components/table' }, + { text: 'Tabs', link: '/components/tabs' }, + { text: 'Toast', link: '/components/toast' }, ], }, ], diff --git a/docs/components/alert.md b/docs/components/alert.md new file mode 100644 index 0000000..8eef6f9 --- /dev/null +++ b/docs/components/alert.md @@ -0,0 +1,82 @@ +# Alert + +The `bq-alert` component displays contextual feedback messages for user actions, such as success confirmations, warnings, and error notifications. + +## Basic Usage + +```html + + This is an informational message. + +``` + +## Variants + +```html + + This is an informational alert. + + + + Operation completed successfully. + + + + Please review the following issues. + + + + Something went wrong. Please try again. + +``` + +## Dismissible + +```html + + Your changes have been saved. + +``` + +## With Custom Content + +```html + +

You have used 90% of your storage.

+ Upgrade Plan + +``` + +## Without Title + +```html + + A simple informational message without a title. + +``` + +## Properties + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `variant` | `info \| success \| warning \| danger` | `info` | Visual style indicating the alert type | +| `title` | `string` | `''` | Alert heading text | +| `dismissible` | `boolean` | `false` | Shows a close button to dismiss the alert | + +## Events + +| Event | Detail | Description | +|-------|--------|-------------| +| `bq-close` | — | Fired when the alert is dismissed via the close button | + +## Slots + +| Slot | Description | +|------|-------------| +| *(default)* | Alert body content | + +## CSS Parts + +| Part | Description | +|------|-------------| +| `alert` | The main alert container | diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md new file mode 100644 index 0000000..2953f12 --- /dev/null +++ b/docs/components/checkbox.md @@ -0,0 +1,71 @@ +# Checkbox + +The `bq-checkbox` component is an accessible checkbox input supporting checked, indeterminate, and disabled states with optional hint text. + +## Basic Usage + +```html + +``` + +## Checked + +```html + +``` + +## Indeterminate + +```html + +``` + +## With Hint + +```html + +``` + +## Disabled + +```html + + +``` + +## Properties + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `label` | `string` | — | Checkbox label text | +| `checked` | `boolean` | `false` | Whether the checkbox is checked | +| `indeterminate` | `boolean` | `false` | Displays the indeterminate (mixed) state | +| `disabled` | `boolean` | `false` | Disables the checkbox | +| `name` | `string` | — | Form field name | +| `value` | `string` | — | Value submitted with the form | +| `hint` | `string` | — | Helper text displayed below the label | + +## Events + +| Event | Detail | Description | +|-------|--------|-------------| +| `bq-change` | `{ checked: boolean }` | Fired when the checked state changes | + +## Slots + +| Slot | Description | +|------|-------------| +| *(default)* | Custom label content (overrides the `label` property) | + +## CSS Parts + +| Part | Description | +|------|-------------| +| `wrapper` | The outer checkbox wrapper | +| `control` | The checkbox input control | +| `input` | The native checkbox input | +| `label` | Label text element | +| `hint` | Hint text element | diff --git a/docs/components/dialog.md b/docs/components/dialog.md new file mode 100644 index 0000000..e1203e0 --- /dev/null +++ b/docs/components/dialog.md @@ -0,0 +1,96 @@ +# Dialog + +The `bq-dialog` component is a modal dialog overlay used for confirmations, forms, and focused interactions. It traps focus and supports keyboard dismissal. + +## Basic Usage + +```html + + Open Dialog + + + +

Are you sure you want to continue?

+ +``` + +## Sizes + +```html + +

Compact dialog for simple messages.

+ + + +

Default size, suitable for most use cases.

+ + + +

Large dialog for complex content.

+ + + +

Extra-large dialog for data-heavy views.

+ + + +

Full-screen dialog for immersive experiences.

+ +``` + +## Non-Dismissible + +```html + +

You must complete this action before continuing.

+
+ Acknowledge +
+ +``` + +## With Footer + +```html + +

You have unsaved changes. Do you want to save before leaving?

+
+ Discard + Save +
+ +``` + +## Properties + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `open` | `boolean` | `false` | Controls visibility of the dialog | +| `title` | `string` | — | Dialog heading text | +| `size` | `sm \| md \| lg \| xl \| full` | `md` | Width preset for the dialog | +| `dismissible` | `boolean` | `true` | Allows closing via overlay click, Escape key, and close button | + +## Events + +| Event | Detail | Description | +|-------|--------|-------------| +| `bq-close` | — | Fired when the dialog is dismissed | + +## Slots + +| Slot | Description | +|------|-------------| +| *(default)* | Dialog body content | +| `footer` | Footer area, typically used for action buttons | + +## CSS Parts + +| Part | Description | +|------|-------------| +| `overlay` | Background overlay behind the dialog | +| `dialog` | The dialog container | +| `header` | Header section containing the title and close button | +| `title` | Title text element | +| `close` | Close / dismiss button | +| `body` | Body content area | +| `footer` | Footer section | diff --git a/docs/components/drawer.md b/docs/components/drawer.md new file mode 100644 index 0000000..34001fe --- /dev/null +++ b/docs/components/drawer.md @@ -0,0 +1,101 @@ +# Drawer + +The `bq-drawer` component is a slide-in side panel used for navigation menus, detail views, and supplementary content. + +## Basic Usage + +```html + + Open Drawer + + + +

Drawer body content goes here.

+ +``` + +## Placement Variants + +```html + +

Slides in from the right.

+ + + +

Slides in from the left.

+ + + +

Slides in from the top.

+ + + +

Slides in from the bottom.

+ +``` + +## Sizes + +```html + +

Narrow side panel.

+ + + +

Default width panel.

+ + + +

Wide panel for detailed content.

+ + + +

Full-width panel.

+ +``` + +## With Footer + +```html + +

Update your profile information below.

+
+ Cancel + Save +
+ +``` + +## Properties + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `open` | `boolean` | `false` | Controls visibility of the drawer | +| `title` | `string` | — | Drawer heading text | +| `placement` | `right \| left \| top \| bottom` | `right` | Edge from which the drawer slides in | +| `size` | `sm \| md \| lg \| full` | `md` | Width (or height for top/bottom) of the drawer | + +## Events + +| Event | Detail | Description | +|-------|--------|-------------| +| `bq-close` | — | Fired when the drawer is dismissed | + +## Slots + +| Slot | Description | +|------|-------------| +| *(default)* | Drawer body content | +| `footer` | Footer area, typically used for action buttons | + +## CSS Parts + +| Part | Description | +|------|-------------| +| `backdrop` | Background overlay behind the drawer | +| `drawer` | The drawer container | +| `header` | Header section containing the title and close button | +| `title` | Title text element | +| `close` | Close / dismiss button | +| `body` | Body content area | +| `footer` | Footer section | diff --git a/docs/components/select.md b/docs/components/select.md new file mode 100644 index 0000000..e263e69 --- /dev/null +++ b/docs/components/select.md @@ -0,0 +1,96 @@ +# Select + +The `bq-select` component is a dropdown selection input with label, error state, and size options. + +## Basic Usage + +```html + + + + + +``` + +## With Error + +```html + + + + + +``` + +## With Placeholder + +```html + + + + + +``` + +## Disabled + +```html + + + + + +``` + +## Sizes + +```html + + + + + + + + + + + +``` + +## Properties + +| Property | Type | Default | Description | +|----------|------|---------|-------------| +| `label` | `string` | — | Select label | +| `value` | `string` | — | Currently selected value | +| `placeholder` | `string` | — | Placeholder text when no option is selected | +| `name` | `string` | — | Form field name | +| `disabled` | `boolean` | `false` | Disables the select | +| `required` | `boolean` | `false` | Marks the field as required | +| `error` | `string` | — | Error message displayed below the select | +| `size` | `sm \| md \| lg` | `md` | Select size | + +## Events + +| Event | Detail | Description | +|-------|--------|-------------| +| `bq-change` | `{ value: string }` | Fired when the selected value changes | + +## Slots + +| Slot | Description | +|------|-------------| +| *(default)* | `