-
-
-
-
+
+
+
+
+
`;
@@ -52,6 +62,13 @@ export const _Sizes: Story = {
},
render: () => ({
components: { Switch },
+ setup() {
+ const lg = ref(false);
+ const base = ref(false);
+ const sm = ref(false);
+ const xs = ref(false);
+ return { lg, base, sm, xs };
+ },
template: sizesCode,
}),
};
diff --git a/resources/js/stories/Table.stories.ts b/resources/js/stories/Table.stories.ts
index 1788607ee1e..cbef35a1baa 100644
--- a/resources/js/stories/Table.stories.ts
+++ b/resources/js/stories/Table.stories.ts
@@ -1,9 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Table, TableColumns, TableColumn, TableRows, TableRow, TableCell, Badge } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Badge, Table, TableCell, TableColumn, TableColumns, TableRow, TableRows} from '@ui';
const meta = {
- title: 'Components/Table',
+ title: 'Layout/Table',
component: Table,
+ subcomponents: {
+ TableColumns,
+ TableColumn,
+ TableRows,
+ TableRow,
+ TableCell,
+ },
argTypes: {},
} satisfies Meta
;
diff --git a/resources/js/stories/Tabs.stories.ts b/resources/js/stories/Tabs.stories.ts
index e45a777982e..7b68239c332 100644
--- a/resources/js/stories/Tabs.stories.ts
+++ b/resources/js/stories/Tabs.stories.ts
@@ -1,11 +1,23 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Tabs, TabList, TabTrigger, TabContent } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {TabContent, TabList, Tabs, TabTrigger} from '@ui';
+import {ref} from 'vue';
const meta = {
- title: 'Components/Tabs',
+ title: 'Layout/Tabs',
component: Tabs,
+ subcomponents: {
+ TabList,
+ TabTrigger,
+ TabContent,
+ },
argTypes: {
- defaultTab: { control: 'text' },
+ 'update:modelValue': {
+ description: 'Event handler called when the tab changes.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: string) => void' }
+ }
+ }
},
} satisfies Meta;
@@ -13,20 +25,20 @@ export default meta;
type Story = StoryObj;
const defaultCode = `
-
+
-
-
-
+
+
+
-
- Tab 1 content
+
+ Content of Tab 1
-
- Tab 2 content
+
+ Content of Tab 2
-
- Tab 3 content
+
+ Content of Tab 3
`;
@@ -40,6 +52,10 @@ export const _DocsIntro: Story = {
},
render: () => ({
components: { Tabs, TabList, TabTrigger, TabContent },
+ setup() {
+ const activeTab = ref('tab1');
+ return { activeTab };
+ },
template: defaultCode,
}),
};
diff --git a/resources/js/stories/Textarea.stories.ts b/resources/js/stories/Textarea.stories.ts
index 1ce17d77698..e42297f0137 100644
--- a/resources/js/stories/Textarea.stories.ts
+++ b/resources/js/stories/Textarea.stories.ts
@@ -1,18 +1,20 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Textarea } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Textarea} from '@ui';
const meta = {
- title: 'Components/Textarea',
+ title: 'Forms/Textarea',
component: Textarea,
argTypes: {
- label: { control: 'text' },
- placeholder: { control: 'text' },
- disabled: { control: 'boolean' },
- elastic: { control: 'boolean' },
- rows: { control: 'number' },
resize: {
control: 'select',
- options: ['none', 'vertical', 'horizontal', 'both'],
+ options: ['both', 'horizontal', 'vertical', 'none'],
+ },
+ 'update:modelValue': {
+ description: 'Event handler called when the textarea is updated.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: string) => void' }
+ }
},
},
} satisfies Meta;
diff --git a/resources/js/stories/TimePicker.stories.ts b/resources/js/stories/TimePicker.stories.ts
new file mode 100644
index 00000000000..56c029a3d2f
--- /dev/null
+++ b/resources/js/stories/TimePicker.stories.ts
@@ -0,0 +1,66 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ref} from 'vue';
+import {TimePicker} from '@ui';
+
+const meta = {
+ title: 'Forms/TimePicker',
+ component: TimePicker,
+ argTypes: {
+ granularity: {
+ control: 'select',
+ options: ['hour', 'minute', 'second'],
+ },
+ 'update:modelValue': {
+ description: 'Event handler called when the time value changes.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: TimeValue) => void' }
+ }
+ }
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const defaultCode = `
+
+`;
+
+export const _DocsIntro: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: defaultCode }
+ }
+ },
+ render: () => ({
+ components: { TimePicker },
+ setup() {
+ const time = ref(null);
+ return { time };
+ },
+ template: defaultCode,
+ }),
+};
+
+const withSecondsCode = `
+
+`;
+
+export const _WithSeconds: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: withSecondsCode }
+ }
+ },
+ render: () => ({
+ components: { TimePicker },
+ setup() {
+ const time = ref(null);
+ return { preciseTime: time };
+ },
+ template: withSecondsCode,
+ }),
+};
diff --git a/resources/js/stories/Toggle.stories.ts b/resources/js/stories/Toggle.stories.ts
new file mode 100644
index 00000000000..d855c925a85
--- /dev/null
+++ b/resources/js/stories/Toggle.stories.ts
@@ -0,0 +1,320 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {ToggleGroup, ToggleItem} from '@ui';
+import {ref} from 'vue';
+
+const meta = {
+ title: 'Forms/Toggle',
+ component: ToggleGroup,
+ subcomponents: {
+ ToggleItem,
+ },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['xs', 'sm', 'base'],
+ },
+ variant: {
+ control: 'select',
+ options: ['default', 'primary', 'filled', 'ghost'],
+ },
+ 'update:modelValue': {
+ description: 'Event handler called when the selected options change.',
+ table: {
+ category: 'events',
+ type: { summary: '(value: string | string[]) => void' }
+ }
+ }
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const introCode = `
+
+
+
+
+
+`;
+
+export const _DocsIntro: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: introCode },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected = ref('list');
+ return { selected };
+ },
+ template: introCode,
+ }),
+};
+
+const defaultCode = `
+
+
+
+
+
+`;
+
+export const Default: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: defaultCode },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected = ref('option1');
+ return { selected };
+ },
+ template: defaultCode,
+ }),
+};
+
+const variantsCode = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const Variants: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: variantsCode },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected1 = ref('option1');
+ const selected2 = ref('option1');
+ const selected3 = ref('option1');
+ const selected4 = ref('option1');
+ return { selected1, selected2, selected3, selected4 };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
+const sizesCode = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const Sizes: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: sizesCode },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected1 = ref('option1');
+ const selected2 = ref('option1');
+ const selected3 = ref('option1');
+ return { selected1, selected2, selected3 };
+ },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
+const withIconsCode = `
+
+
+
+
+
+`;
+
+export const WithIcons: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: withIconsCode },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected = ref('tree');
+ return { selected };
+ },
+ template: withIconsCode,
+ }),
+};
+
+const iconOnlyCode = `
+
+
+
+
+
+`;
+
+export const IconOnly: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: { code: iconOnlyCode },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected = ref('bold');
+ return { selected };
+ },
+ template: iconOnlyCode,
+ }),
+};
+
+const multipleCode = `
+
+
+
+
+
+`;
+
+export const Multiple: Story = {
+ tags: ['!dev'],
+ parameters: {
+ docs: {
+ source: {
+ code: `${multipleCode}
+Selected: {{ selected.join(', ') || 'none' }}
`
+ },
+ },
+ },
+ render: () => ({
+ components: { ToggleGroup, ToggleItem },
+ setup() {
+ const selected = ref(['bold', 'italic']);
+ return { selected };
+ },
+ template: `
+
+ ${multipleCode}
+
Selected: {{ selected.join(', ') || 'none' }}
+