Default
@@ -309,16 +317,16 @@ import {
FasTrashCan,
} from '@fastybird/web-ui-icons';
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- setup() {
- return { FasMagnifyingGlass, FasPenToSquare, FasEnvelope, FasCheck, FasStar, FasTrashCan };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ setup() {
+ return { FasMagnifyingGlass, FasPenToSquare, FasEnvelope, FasCheck, FasStar, FasTrashCan };
+ },
+ template: `
Default
@@ -353,14 +361,14 @@ import {
`,
- }),
+ }),
};
export const Disabled: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Default
@@ -380,13 +388,13 @@ export const Disabled: Story = {
Danger
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Default
@@ -405,14 +413,14 @@ export const Disabled: Story = {
Danger
`,
- }),
+ }),
};
export const Link: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Default
Primary
@@ -421,13 +429,13 @@ export const Link: Story = {
Warning
Danger
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Default
Primary
@@ -436,14 +444,14 @@ export const Link: Story = {
Warning
Danger
`,
- }),
+ }),
};
export const LinkDisabled: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Plain
Primary
@@ -452,13 +460,13 @@ export const LinkDisabled: Story = {
Warning
Danger
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Plain
Primary
@@ -467,14 +475,14 @@ export const LinkDisabled: Story = {
Warning
Danger
`,
- }),
+ }),
};
export const Text: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Plain
Primary
@@ -483,13 +491,13 @@ export const Text: Story = {
Warning
Danger
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Plain
Primary
@@ -498,14 +506,14 @@ export const Text: Story = {
Warning
Danger
`,
- }),
+ }),
};
export const TextBg: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Plain
Primary
@@ -514,13 +522,13 @@ export const TextBg: Story = {
Warning
Danger
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Plain
Primary
@@ -529,14 +537,14 @@ export const TextBg: Story = {
Warning
Danger
`,
- }),
+ }),
};
export const TextDisabled: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Plain
Primary
@@ -545,13 +553,13 @@ export const TextDisabled: Story = {
Warning
Danger
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Plain
Primary
@@ -560,14 +568,14 @@ export const TextDisabled: Story = {
Warning
Danger
`,
- }),
+ }),
};
export const Icon: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Search
Upload
`,
- }),
+ }),
};
export const Loading: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Loading
Loading
@@ -659,16 +667,16 @@ export const Loading: Story = {
stroke-linecap: round;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton, FbIcon },
- setup() {
- return { FasSpinner };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton, FbIcon },
+ setup() {
+ return { FasSpinner };
+ },
+ template: `
Loading
Loading
@@ -692,14 +700,14 @@ export const Loading: Story = {
Loading
`,
- }),
+ }),
};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Large
@@ -729,16 +737,16 @@ export const Sizes: Story = {
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- setup() {
- return { FasMagnifyingGlass };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ setup() {
+ return { FasMagnifyingGlass };
+ },
+ template: `
Large
@@ -764,14 +772,14 @@ import { FasMagnifyingGlass } from '@fastybird/web-ui-icons';
`,
- }),
+ }),
};
export const Tag: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
button
div
@@ -785,13 +793,13 @@ export const Tag: Story = {
a
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
button
div
@@ -805,14 +813,14 @@ export const Tag: Story = {
a
`,
- }),
+ }),
};
export const CustomColor: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Default
Plain
@@ -820,13 +828,13 @@ export const CustomColor: Story = {
Disabled
Disabled Plain
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ template: `
Default
Plain
@@ -834,5 +842,5 @@ export const CustomColor: Story = {
Disabled
Disabled Plain
`,
- }),
+ }),
};
diff --git a/docs/src/components/card/fb-card.mdx b/docs/src/components/card/fb-card.mdx
index 1ff6c51d..c32ecd73 100644
--- a/docs/src/components/card/fb-card.mdx
+++ b/docs/src/components/card/fb-card.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
-import * as CardStories from './fb-card.stories';
+import { Canvas, Meta, Controls, Story } from "@storybook/blocks";
+import * as CardStories from "./fb-card.stories";
@@ -31,8 +31,8 @@ The header and footer part can be omitted.
A borderless card on a gray background.
-
-
+
+
## Shadow
diff --git a/docs/src/components/card/fb-card.stories.scss b/docs/src/components/card/fb-card.stories.scss
index 3f8deeed..a3b79ae4 100644
--- a/docs/src/components/card/fb-card.stories.scss
+++ b/docs/src/components/card/fb-card.stories.scss
@@ -1,26 +1,26 @@
.fb-card-story-block {
- &-–flex {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- gap: 20px;
- }
+ &-–flex {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 20px;
+ }
- .fb-card-story-block__item {
- max-width: 480px;
- margin-bottom: 20px;
+ .fb-card-story-block__item {
+ max-width: 480px;
+ margin-bottom: 20px;
- .fb-card-story-block__item-actions {
- display: flex;
+ .fb-card-story-block__item-actions {
+ display: flex;
- .fb-card-story-block__item-actions-button {
- flex: 1;
- }
- }
- }
+ .fb-card-story-block__item-actions-button {
+ flex: 1;
+ }
+ }
+ }
- .fb-card-story-block__in-column-item {
- width: 100%;
- margin: 10px 0;
- }
+ .fb-card-story-block__in-column-item {
+ width: 100%;
+ margin: 10px 0;
+ }
}
diff --git a/docs/src/components/card/fb-card.stories.ts b/docs/src/components/card/fb-card.stories.ts
index f3d8f836..47d4cc24 100644
--- a/docs/src/components/card/fb-card.stories.ts
+++ b/docs/src/components/card/fb-card.stories.ts
@@ -1,148 +1,180 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbCard, FbButton, FbDivider, FbRow, FbCol, CardShadowTypes } from '@fastybird/web-ui-components';
-import { FasGear, FasEllipsis, FasPencil } from '@fastybird/web-ui-icons';
-import { VariantTypes, EffectTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbCard, FbButton, FbDivider, FbRow, FbCol, CardShadowTypes } from "@fastybird/web-ui-components";
+import { FasGear, FasEllipsis, FasPencil } from "@fastybird/web-ui-icons";
+import { VariantTypes, EffectTypes } from "@fastybird/web-ui-constants";
// @ts-ignore
-import imageFile from './../../../static/example_01.jpg';
+import imageFile from "./../../../static/example_01.jpg";
-import './fb-card.stories.scss';
+import "./fb-card.stories.scss";
const meta: Meta
= {
- component: FbCard,
- title: 'Components/Data/Card',
- argTypes: {
- header: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the card header',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- default: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'customize default content',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- footer: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the card footer',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- extra: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the extra part of the card header',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- cover: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the card cover used for images',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- variant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'card variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- effect: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['', EffectTypes.LIGHT, EffectTypes.DARK],
- description: 'card theme style',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: EffectTypes.LIGHT },
- },
- },
- headerVariant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'card header variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- bodyVariant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'card body variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- footerVariant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: ['', VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'card footer variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- shadow: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [CardShadowTypes.ALWAYS, CardShadowTypes.HOVER, CardShadowTypes.NEVER],
- description: 'when to show card shadows',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: CardShadowTypes.ALWAYS },
- },
- },
- bordered: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'when to show card border',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- loading: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'when to show card loading animation',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- },
- args: {
- effect: EffectTypes.LIGHT,
- shadow: CardShadowTypes.ALWAYS,
- bordered: true,
- loading: false,
- },
- excludeStories: /.*Data$/,
+ component: FbCard,
+ title: "Components/Data/Card",
+ argTypes: {
+ header: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the card header",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ default: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "customize default content",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ footer: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the card footer",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ extra: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the extra part of the card header",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ cover: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the card cover used for images",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ variant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [
+ "",
+ VariantTypes.DEFAULT,
+ VariantTypes.PRIMARY,
+ VariantTypes.INFO,
+ VariantTypes.SUCCESS,
+ VariantTypes.WARNING,
+ VariantTypes.DANGER,
+ ],
+ description: "card variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ effect: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: ["", EffectTypes.LIGHT, EffectTypes.DARK],
+ description: "card theme style",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: EffectTypes.LIGHT },
+ },
+ },
+ headerVariant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [
+ "",
+ VariantTypes.DEFAULT,
+ VariantTypes.PRIMARY,
+ VariantTypes.INFO,
+ VariantTypes.SUCCESS,
+ VariantTypes.WARNING,
+ VariantTypes.DANGER,
+ ],
+ description: "card header variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ bodyVariant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [
+ "",
+ VariantTypes.DEFAULT,
+ VariantTypes.PRIMARY,
+ VariantTypes.INFO,
+ VariantTypes.SUCCESS,
+ VariantTypes.WARNING,
+ VariantTypes.DANGER,
+ ],
+ description: "card body variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ footerVariant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [
+ "",
+ VariantTypes.DEFAULT,
+ VariantTypes.PRIMARY,
+ VariantTypes.INFO,
+ VariantTypes.SUCCESS,
+ VariantTypes.WARNING,
+ VariantTypes.DANGER,
+ ],
+ description: "card footer variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ shadow: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [CardShadowTypes.ALWAYS, CardShadowTypes.HOVER, CardShadowTypes.NEVER],
+ description: "when to show card shadows",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: CardShadowTypes.ALWAYS },
+ },
+ },
+ bordered: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "when to show card border",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ loading: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "when to show card loading animation",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ },
+ args: {
+ effect: EffectTypes.LIGHT,
+ shadow: CardShadowTypes.ALWAYS,
+ bordered: true,
+ loading: false,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -150,19 +182,19 @@ export default meta;
type Story = StoryObj;
export const Component: Story = {
- tags: ['hideInSidebar'],
- args: {
- header: 'Card name',
- default: 'Card body content',
- footer: 'Footer content',
- },
+ tags: ["hideInSidebar"],
+ args: {
+ header: "Card name",
+ default: "Card body content",
+ footer: "Footer content",
+ },
};
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -184,13 +216,13 @@ export const BasicUsage: Story = {
max-width: 480px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard },
+ template: `
@@ -203,14 +235,14 @@ export const BasicUsage: Story = {
Footer content
`,
- }),
+ }),
};
export const Simple: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{{ 'List item ' + o }}
@@ -222,26 +254,26 @@ export const Simple: Story = {
max-width: 480px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard },
+ template: `
`,
- }),
+ }),
};
export const NoBorder: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -263,13 +295,13 @@ export const NoBorder: Story = {
max-width: 480px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard },
+ template: `
@@ -282,14 +314,14 @@ export const NoBorder: Story = {
Footer content
`,
- }),
+ }),
};
export const Shadow: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Always
Hover
@@ -301,26 +333,26 @@ export const Shadow: Story = {
max-width: 480px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard },
+ template: `
Always
Hover
Never
`,
- }),
+ }),
};
export const Variants: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -391,13 +423,13 @@ export const Variants: Story = {
margin: 10px 0;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard, FbRow, FbCol },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard, FbRow, FbCol },
+ template: `
@@ -461,14 +493,14 @@ export const Variants: Story = {
`,
- }),
+ }),
};
export const VariantsDark: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -539,13 +571,13 @@ export const VariantsDark: Story = {
margin: 10px 0;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard, FbRow, FbCol },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard, FbRow, FbCol },
+ template: `
@@ -609,14 +641,14 @@ export const VariantsDark: Story = {
`,
- }),
+ }),
};
export const VariantsParts: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -687,13 +719,13 @@ export const VariantsParts: Story = {
margin: 10px 0;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard, FbRow, FbCol },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard, FbRow, FbCol },
+ template: `
@@ -757,14 +789,14 @@ export const VariantsParts: Story = {
`,
- }),
+ }),
};
export const MoreContent: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -799,21 +831,21 @@ export const MoreContent: Story = {
flex: 1;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCard, FbButton, FbDivider },
- setup() {
- return {
- FasGear,
- FasEllipsis,
- FasPencil,
- imageFile,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCard, FbButton, FbDivider },
+ setup() {
+ return {
+ FasGear,
+ FasEllipsis,
+ FasPencil,
+ imageFile,
+ };
+ },
+ template: `
@@ -834,5 +866,5 @@ export const MoreContent: Story = {
`,
- }),
+ }),
};
diff --git a/docs/src/components/checkbox/fb-checkbox.mdx b/docs/src/components/checkbox/fb-checkbox.mdx
index a2294033..3911eea9 100644
--- a/docs/src/components/checkbox/fb-checkbox.mdx
+++ b/docs/src/components/checkbox/fb-checkbox.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as CheckboxStories from './fb-checkbox.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as CheckboxStories from "./fb-checkbox.stories";
= {
- component: FbCheckbox,
- title: 'Components/Form/Checkbox',
- excludeStories: /.*Data$/,
+ component: FbCheckbox,
+ title: "Components/Form/Checkbox",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -17,10 +17,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -52,34 +52,34 @@ const checked6 = ref(false);
const checked7 = ref(false);
const checked8 = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCheckbox },
- setup: () => {
- const checked1 = ref(true);
- const checked2 = ref(false);
- const checked3 = ref(false);
- const checked4 = ref(false);
- const checked5 = ref(false);
- const checked6 = ref(false);
- const checked7 = ref(false);
- const checked8 = ref(false);
-
- return {
- checked1,
- checked2,
- checked3,
- checked4,
- checked5,
- checked6,
- checked7,
- checked8,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCheckbox },
+ setup: () => {
+ const checked1 = ref(true);
+ const checked2 = ref(false);
+ const checked3 = ref(false);
+ const checked4 = ref(false);
+ const checked5 = ref(false);
+ const checked6 = ref(false);
+ const checked7 = ref(false);
+ const checked8 = ref(false);
+
+ return {
+ checked1,
+ checked2,
+ checked3,
+ checked4,
+ checked5,
+ checked6,
+ checked7,
+ checked8,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Disabled: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Disabled
Not disabled
@@ -117,34 +117,34 @@ import { ref } from 'vue';
const checked1 = ref(true);
const checked2 = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCheckbox },
- setup: () => {
- const checked1 = ref(true);
- const checked2 = ref(false);
-
- return {
- checked1,
- checked2,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCheckbox },
+ setup: () => {
+ const checked1 = ref(true);
+ const checked2 = ref(false);
+
+ return {
+ checked1,
+ checked2,
+ };
+ },
+ template: `
Disabled
Not disabled
`,
- }),
+ }),
};
export const CheckboxGroup: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- }),
+ }),
};
export const Indeterminate: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
};
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCheckbox, FbCheckboxGroup },
- setup: () => {
- const checkAll = ref(false);
- const isIndeterminate = ref(true);
- const checkedCities = ref(['New York', 'Washington']);
- const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
-
- const handleCheckAllChange = (val: boolean) => {
- checkedCities.value = val ? cities : [];
- isIndeterminate.value = false;
- };
-
- const handleCheckedCitiesChange = (value: string[]) => {
- const checkedCount = value.length;
- checkAll.value = checkedCount === cities.length;
- isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
- };
-
- return {
- checkAll,
- isIndeterminate,
- checkedCities,
- cities,
- handleCheckAllChange,
- handleCheckedCitiesChange,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCheckbox, FbCheckboxGroup },
+ setup: () => {
+ const checkAll = ref(false);
+ const isIndeterminate = ref(true);
+ const checkedCities = ref(["New York", "Washington"]);
+ const cities = ["New York", "Washington", "Los Angeles", "Chicago"];
+
+ const handleCheckAllChange = (val: boolean) => {
+ checkedCities.value = val ? cities : [];
+ isIndeterminate.value = false;
+ };
+
+ const handleCheckedCitiesChange = (value: string[]) => {
+ const checkedCount = value.length;
+ checkAll.value = checkedCount === cities.length;
+ isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length;
+ };
+
+ return {
+ checkAll,
+ isIndeterminate,
+ checkedCities,
+ cities,
+ handleCheckAllChange,
+ handleCheckedCitiesChange,
+ };
+ },
+ template: `
{
`,
- }),
+ }),
};
export const MinMax: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCheckbox, FbCheckboxGroup },
- setup: () => {
- const checkedCities = ref(['New York', 'Washington']);
- const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
-
- return {
- checkedCities,
- cities,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCheckbox, FbCheckboxGroup },
+ setup: () => {
+ const checkedCities = ref(["New York", "Washington"]);
+ const cities = ["New York", "Washington", "Los Angeles", "Chicago"];
+
+ return {
+ checkedCities,
+ cities,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Button: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -404,28 +404,28 @@ const checkboxGroup3 = ref(['Los Angeles']);
const checkboxGroup4 = ref(['Chicago']);
const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCheckbox, FbCheckboxGroup, FbCheckboxButton },
- setup: () => {
- const checkboxGroup1 = ref(['New York']);
- const checkboxGroup2 = ref(['Washington']);
- const checkboxGroup3 = ref(['Los Angeles']);
- const checkboxGroup4 = ref(['Chicago']);
- const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
-
- return {
- checkboxGroup1,
- checkboxGroup2,
- checkboxGroup3,
- checkboxGroup4,
- cities,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCheckbox, FbCheckboxGroup, FbCheckboxButton },
+ setup: () => {
+ const checkboxGroup1 = ref(["New York"]);
+ const checkboxGroup2 = ref(["Washington"]);
+ const checkboxGroup3 = ref(["Los Angeles"]);
+ const checkboxGroup4 = ref(["Chicago"]);
+ const cities = ["New York", "Washington", "Los Angeles", "Chicago"];
+
+ return {
+ checkboxGroup1,
+ checkboxGroup2,
+ checkboxGroup3,
+ checkboxGroup4,
+ cities,
+ };
+ },
+ template: `
@@ -461,14 +461,14 @@ const cities = ['New York', 'Washington', 'Los Angeles', 'Chicago'];
`,
- }),
+ }),
};
export const Bordered: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -501,28 +501,28 @@ const checked3 = ref(false);
const checked4 = ref(true);
const checkboxGroup1 = ref(['Value1']);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbCheckbox, FbCheckboxGroup },
- setup: () => {
- const checked1 = ref(true);
- const checked2 = ref(false);
- const checked3 = ref(false);
- const checked4 = ref(true);
- const checkboxGroup1 = ref(['Value1']);
-
- return {
- checked1,
- checked2,
- checked3,
- checked4,
- checkboxGroup1,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbCheckbox, FbCheckboxGroup },
+ setup: () => {
+ const checked1 = ref(true);
+ const checked2 = ref(false);
+ const checked3 = ref(false);
+ const checked4 = ref(true);
+ const checkboxGroup1 = ref(["Value1"]);
+
+ return {
+ checked1,
+ checked2,
+ checked3,
+ checked4,
+ checkboxGroup1,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts b/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts
index e1437452..cec9a603 100644
--- a/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts
+++ b/docs/src/components/component-loading-error/fb-component-loading-error.stories.ts
@@ -1,26 +1,26 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbComponentLoadingError } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbComponentLoadingError } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
const meta: Meta
= {
- component: FbComponentLoadingError,
- title: 'Components/Feedback/Component loading error',
- argTypes: {
- size: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
- description: 'loading result size',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: ComponentSizeTypes.DEFAULT },
- },
- },
- },
- args: {
- size: ComponentSizeTypes.DEFAULT,
- },
- excludeStories: /.*Data$/,
+ component: FbComponentLoadingError,
+ title: "Components/Feedback/Component loading error",
+ argTypes: {
+ size: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+ description: "loading result size",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+ },
+ },
+ },
+ args: {
+ size: ComponentSizeTypes.DEFAULT,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -30,22 +30,22 @@ type Story = StoryObj;
export const Component: Story = {};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbComponentLoadingError },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbComponentLoadingError },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/component-loading/fb-component-loading.stories.ts b/docs/src/components/component-loading/fb-component-loading.stories.ts
index a43ca9ac..ee029c27 100644
--- a/docs/src/components/component-loading/fb-component-loading.stories.ts
+++ b/docs/src/components/component-loading/fb-component-loading.stories.ts
@@ -1,26 +1,26 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { FbComponentLoading } from '@fastybird/web-ui-components';
-import { ComponentSizeTypes } from '@fastybird/web-ui-constants';
+import { Meta, StoryObj } from "@storybook/vue3";
+import { FbComponentLoading } from "@fastybird/web-ui-components";
+import { ComponentSizeTypes } from "@fastybird/web-ui-constants";
const meta: Meta = {
- component: FbComponentLoading,
- title: 'Components/Feedback/Component loading',
- argTypes: {
- size: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
- description: 'loading status size',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: ComponentSizeTypes.DEFAULT },
- },
- },
- },
- args: {
- size: ComponentSizeTypes.DEFAULT,
- },
- excludeStories: /.*Data$/,
+ component: FbComponentLoading,
+ title: "Components/Feedback/Component loading",
+ argTypes: {
+ size: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+ description: "loading status size",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+ },
+ },
+ },
+ args: {
+ size: ComponentSizeTypes.DEFAULT,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -30,22 +30,22 @@ type Story = StoryObj;
export const Component: Story = {};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbComponentLoading },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbComponentLoading },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/divider/fb-divider.mdx b/docs/src/components/divider/fb-divider.mdx
index 176e5a52..fbddddff 100644
--- a/docs/src/components/divider/fb-divider.mdx
+++ b/docs/src/components/divider/fb-divider.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as DividerStories from './fb-divider.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as DividerStories from "./fb-divider.stories";
= {
- component: FbDivider,
- title: 'Components/Layout/Divider',
- argTypes: {
- direction: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: dividerDirections,
- description: "set divider's direction",
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: DividerDirectionTypes.HORIZONTAL },
- },
- },
- borderStyle: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'set the style of divider',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'solid' },
- },
- },
- contentPosition: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: dividerContentPositions,
- description: 'the position of the customized content on the divider line',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: DividerContentPositionTypes.CENTER },
- },
- },
- gradient: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'determine whether show divider with gradient effect',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- },
- args: {
- direction: DividerDirectionTypes.HORIZONTAL,
- borderStyle: 'solid',
- contentPosition: DividerContentPositionTypes.CENTER,
- gradient: false,
- },
- excludeStories: /.*Data$/,
+ component: FbDivider,
+ title: "Components/Layout/Divider",
+ argTypes: {
+ direction: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: dividerDirections,
+ description: "set divider's direction",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: DividerDirectionTypes.HORIZONTAL },
+ },
+ },
+ borderStyle: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "set the style of divider",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "solid" },
+ },
+ },
+ contentPosition: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: dividerContentPositions,
+ description: "the position of the customized content on the divider line",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: DividerContentPositionTypes.CENTER },
+ },
+ },
+ gradient: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "determine whether show divider with gradient effect",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ },
+ args: {
+ direction: DividerDirectionTypes.HORIZONTAL,
+ borderStyle: "solid",
+ contentPosition: DividerContentPositionTypes.CENTER,
+ gradient: false,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -68,10 +68,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.
@@ -81,13 +81,13 @@ export const BasicUsage: Story = {
There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDivider },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDivider },
+ template: `
I sit at my window this morning where the world like a passer-by stops for a moment, nods to me and goes.
@@ -95,14 +95,14 @@ export const BasicUsage: Story = {
There little thoughts are the rustle of leaves; they have their whisper of joy in my mind.
`,
- }),
+ }),
};
export const CustomContent: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
What you are you do not see, what you see is your shadow.
Rabindranath Tagore
@@ -119,13 +119,13 @@ export const CustomContent: Story = {
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDivider, FbIcon, FasStar },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDivider, FbIcon, FasStar },
+ template: `
What you are you do not see, what you see is your shadow.
Rabindranath Tagore
@@ -136,14 +136,14 @@ import { FasStar } from '@fastybird/web-ui-icons';
I cannot choose the best. The best chooses me.
Rabindranath Tagore `,
- }),
+ }),
};
export const DashedLine: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
What language is thine, O sea?
@@ -155,13 +155,13 @@ export const DashedLine: Story = {
The language of eternal silence.
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDivider },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDivider },
+ template: `
What language is thine, O sea?
@@ -171,14 +171,14 @@ export const DashedLine: Story = {
What language is thy answer, O sky?
The language of eternal silence. `,
- }),
+ }),
};
export const VerticalDivider: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Rain
@@ -195,13 +195,13 @@ export const VerticalDivider: Story = {
flex-direction: row;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDivider },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDivider },
+ template: `
Rain
Grass
`,
- }),
+ }),
};
diff --git a/docs/src/components/drawer/fb-drawer.mdx b/docs/src/components/drawer/fb-drawer.mdx
index 916c9987..81e7458b 100644
--- a/docs/src/components/drawer/fb-drawer.mdx
+++ b/docs/src/components/drawer/fb-drawer.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as DrawerStories from './fb-drawer.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as DrawerStories from "./fb-drawer.stories";
diff --git a/docs/src/components/drawer/fb-drawer.stories.scss b/docs/src/components/drawer/fb-drawer.stories.scss
index 94c05952..14bad12e 100644
--- a/docs/src/components/drawer/fb-drawer.stories.scss
+++ b/docs/src/components/drawer/fb-drawer.stories.scss
@@ -1,21 +1,21 @@
.fb-drawer-story-block {
- .fb-drawer-story-block__item {
- margin-bottom: 20px;
- }
+ .fb-drawer-story-block__item {
+ margin-bottom: 20px;
+ }
- .fb-drawer-story-block__item:last-child {
- margin-bottom: 0;
- }
+ .fb-drawer-story-block__item:last-child {
+ margin-bottom: 0;
+ }
- .fb-drawer-story-block__basic-usage-button {
- margin-left: 16px;
- }
+ .fb-drawer-story-block__basic-usage-button {
+ margin-left: 16px;
+ }
- .fb-drawer-story-block__custom-drawer-header {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- gap: 16px;
- padding: 10px;
- }
+ .fb-drawer-story-block__custom-drawer-header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 16px;
+ padding: 10px;
+ }
}
diff --git a/docs/src/components/drawer/fb-drawer.stories.ts b/docs/src/components/drawer/fb-drawer.stories.ts
index 9993cbf4..4ad6290f 100644
--- a/docs/src/components/drawer/fb-drawer.stories.ts
+++ b/docs/src/components/drawer/fb-drawer.stories.ts
@@ -1,29 +1,29 @@
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta, StoryObj } from "@storybook/vue3";
import {
- FbDrawer,
- FbButton,
- FbRadio,
- FbRadioGroup,
- FbForm,
- FbFormItem,
- FbInput,
- FbSelect,
- FbOption,
- FbIcon,
- FbMessageBox,
- MessageBoxAction,
- MessageBoxActionTypes,
-} from '@fastybird/web-ui-components';
-import { VariantTypes } from '@fastybird/web-ui-constants';
-import { FasCircleXmark, FasImage, FasKeyboard } from '@fastybird/web-ui-icons';
-
-import './fb-drawer.stories.scss';
-import { reactive, ref } from 'vue';
+ FbDrawer,
+ FbButton,
+ FbRadio,
+ FbRadioGroup,
+ FbForm,
+ FbFormItem,
+ FbInput,
+ FbSelect,
+ FbOption,
+ FbIcon,
+ FbMessageBox,
+ MessageBoxAction,
+ MessageBoxActionTypes,
+} from "@fastybird/web-ui-components";
+import { VariantTypes } from "@fastybird/web-ui-constants";
+import { FasCircleXmark, FasImage, FasKeyboard } from "@fastybird/web-ui-icons";
+
+import "./fb-drawer.stories.scss";
+import { reactive, ref } from "vue";
const meta: Meta
= {
- component: FbDrawer,
- title: 'Components/Feedback/Drawer',
- excludeStories: /.*Data$/,
+ component: FbDrawer,
+ title: "Components/Feedback/Drawer",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -31,10 +31,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
left to right
@@ -114,49 +114,49 @@ const confirmClick = () => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDrawer, FbButton, FbRadio, FbRadioGroup },
- setup: () => {
- const drawer1 = ref(false);
- const drawer2 = ref(false);
- const direction = ref('rtl');
- const radio1 = ref('Option 1');
-
- const handleClose = (done: () => void) => {
- FbMessageBox.confirm('Are you sure you want to close this?', {
- onAction: () => {
- done();
- },
- });
- };
-
- const cancelClick = (): void => {
- drawer2.value = false;
- };
-
- const confirmClick = (): void => {
- FbMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`, {
- onAction: () => {
- drawer2.value = false;
- },
- });
- };
-
- return {
- drawer1,
- drawer2,
- direction,
- radio1,
- handleClose,
- cancelClick,
- confirmClick,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDrawer, FbButton, FbRadio, FbRadioGroup },
+ setup: () => {
+ const drawer1 = ref(false);
+ const drawer2 = ref(false);
+ const direction = ref("rtl");
+ const radio1 = ref("Option 1");
+
+ const handleClose = (done: () => void) => {
+ FbMessageBox.confirm("Are you sure you want to close this?", {
+ onAction: () => {
+ done();
+ },
+ });
+ };
+
+ const cancelClick = (): void => {
+ drawer2.value = false;
+ };
+
+ const confirmClick = (): void => {
+ FbMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`, {
+ onAction: () => {
+ drawer2.value = false;
+ },
+ });
+ };
+
+ return {
+ drawer1,
+ drawer2,
+ direction,
+ radio1,
+ handleClose,
+ cancelClick,
+ confirmClick,
+ };
+ },
+ template: `
@@ -208,14 +208,14 @@ const confirmClick = () => {
`,
- }),
+ }),
};
export const NoTitle: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open drawer without header
@@ -231,20 +231,20 @@ import { ref } from 'vue';
const drawer = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDrawer, FbButton },
- setup: () => {
- const drawer = ref(false);
-
- return {
- drawer,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDrawer, FbButton },
+ setup: () => {
+ const drawer = ref(false);
+
+ return {
+ drawer,
+ };
+ },
+ template: `
@@ -256,14 +256,14 @@ const drawer = ref(false);
`,
- }),
+ }),
};
export const CustomizedContent: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open drawer with form
@@ -366,80 +366,80 @@ const cancelForm = () => {
clearTimeout(timer);
};
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDrawer, FbButton, FbForm, FbFormItem, FbInput, FbSelect, FbOption, FasKeyboard },
- setup: () => {
- const formLabelWidth = '80px';
-
- let timer;
-
- const dialog = ref(false);
- const loading = ref(false);
-
- const form = reactive({
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: '',
- });
-
- const drawerRef = ref>();
-
- const onClick = () => {
- drawerRef.value!.handleClose();
- };
-
- const handleClose = (done) => {
- if (loading.value) {
- return;
- }
-
- FbMessageBox.confirm('Do you want to submit?', {
- onAction: (action: MessageBoxAction) => {
- if (action === MessageBoxActionTypes.CONFIRM) {
- loading.value = true;
-
- timer = setTimeout(() => {
- done();
- setTimeout(() => {
- loading.value = false;
- }, 400);
- }, 2000);
- } else {
- done();
- }
- },
- });
- };
-
- const cancelForm = () => {
- loading.value = false;
- dialog.value = false;
-
- clearTimeout(timer);
- };
-
- return {
- formLabelWidth,
- dialog,
- loading,
- form,
- drawerRef,
- onClick,
- handleClose,
- cancelForm,
- FasKeyboard,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDrawer, FbButton, FbForm, FbFormItem, FbInput, FbSelect, FbOption, FasKeyboard },
+ setup: () => {
+ const formLabelWidth = "80px";
+
+ let timer;
+
+ const dialog = ref(false);
+ const loading = ref(false);
+
+ const form = reactive({
+ name: "",
+ region: "",
+ date1: "",
+ date2: "",
+ delivery: false,
+ type: [],
+ resource: "",
+ desc: "",
+ });
+
+ const drawerRef = ref>();
+
+ const onClick = () => {
+ drawerRef.value!.handleClose();
+ };
+
+ const handleClose = (done) => {
+ if (loading.value) {
+ return;
+ }
+
+ FbMessageBox.confirm("Do you want to submit?", {
+ onAction: (action: MessageBoxAction) => {
+ if (action === MessageBoxActionTypes.CONFIRM) {
+ loading.value = true;
+
+ timer = setTimeout(() => {
+ done();
+ setTimeout(() => {
+ loading.value = false;
+ }, 400);
+ }, 2000);
+ } else {
+ done();
+ }
+ },
+ });
+ };
+
+ const cancelForm = () => {
+ loading.value = false;
+ dialog.value = false;
+
+ clearTimeout(timer);
+ };
+
+ return {
+ formLabelWidth,
+ dialog,
+ loading,
+ form,
+ drawerRef,
+ onClick,
+ handleClose,
+ cancelForm,
+ FasKeyboard,
+ };
+ },
+ template: `
@@ -484,14 +484,14 @@ const cancelForm = () => {
`,
- }),
+ }),
};
export const CustomizedHeader: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open drawer with customized header
@@ -527,21 +527,21 @@ const visible = ref(false);
padding: 10px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDrawer, FbButton, FbIcon, FasCircleXmark },
- setup: () => {
- const visible = ref(false);
-
- return {
- visible,
- FasCircleXmark,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDrawer, FbButton, FbIcon, FasCircleXmark },
+ setup: () => {
+ const visible = ref(false);
+
+ return {
+ visible,
+ FasCircleXmark,
+ };
+ },
+ template: `
@@ -563,14 +563,14 @@ const visible = ref(false);
`,
- }),
+ }),
};
export const NestedDrawer: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open nested drawers
@@ -607,31 +607,31 @@ const handleClose = (done: () => void) => {
});
};
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDrawer, FbButton },
- setup: () => {
- const drawer = ref(false);
- const innerDrawer = ref(false);
-
- const handleClose = (done: () => void) => {
- FbMessageBox.confirm('You still have unsaved data, proceed?', {
- onAction: () => {
- done();
- },
- });
- };
-
- return {
- drawer,
- innerDrawer,
- handleClose,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDrawer, FbButton },
+ setup: () => {
+ const drawer = ref(false);
+ const innerDrawer = ref(false);
+
+ const handleClose = (done: () => void) => {
+ FbMessageBox.confirm("You still have unsaved data, proceed?", {
+ onAction: () => {
+ done();
+ },
+ });
+ };
+
+ return {
+ drawer,
+ innerDrawer,
+ handleClose,
+ };
+ },
+ template: `
@@ -654,14 +654,14 @@ const handleClose = (done: () => void) => {
`,
- }),
+ }),
};
export const WithDescription: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open nested drawers
@@ -699,32 +699,32 @@ const handleClose = (done: () => void) => {
});
};
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbDrawer, FbButton, FasImage },
- setup: () => {
- const drawer = ref(false);
- const innerDrawer = ref(false);
-
- const handleClose = (done: () => void) => {
- FbMessageBox.confirm('You still have unsaved data, proceed?', {
- onAction: () => {
- done();
- },
- });
- };
-
- return {
- drawer,
- innerDrawer,
- handleClose,
- FasImage,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbDrawer, FbButton, FasImage },
+ setup: () => {
+ const drawer = ref(false);
+ const innerDrawer = ref(false);
+
+ const handleClose = (done: () => void) => {
+ FbMessageBox.confirm("You still have unsaved data, proceed?", {
+ onAction: () => {
+ done();
+ },
+ });
+ };
+
+ return {
+ drawer,
+ innerDrawer,
+ handleClose,
+ FasImage,
+ };
+ },
+ template: `
@@ -747,5 +747,5 @@ const handleClose = (done: () => void) => {
`,
- }),
+ }),
};
diff --git a/docs/src/components/icon-with-child/fb-icon-with-child.mdx b/docs/src/components/icon-with-child/fb-icon-with-child.mdx
index d6f93612..d17671a0 100644
--- a/docs/src/components/icon-with-child/fb-icon-with-child.mdx
+++ b/docs/src/components/icon-with-child/fb-icon-with-child.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as IconWithChildStories from './fb-icon-with-child.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as IconWithChildStories from "./fb-icon-with-child.stories";
= {
- component: FbIconWithChild,
- title: 'Components/Basic/Icon with child',
- argTypes: {
- variant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'child icon variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: VariantTypes.DEFAULT },
- },
- },
- size: {
- type: { name: 'number', required: false },
- control: { type: 'text' },
- description: 'main icon size',
- table: {
- type: { summary: 'number' },
- defaultValue: { summary: '-' },
- },
- },
- color: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'main icon color',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- },
- args: {
- variant: VariantTypes.DEFAULT,
- },
- excludeStories: /.*Data$/,
+ component: FbIconWithChild,
+ title: "Components/Basic/Icon with child",
+ argTypes: {
+ variant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+ description: "child icon variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: VariantTypes.DEFAULT },
+ },
+ },
+ size: {
+ type: { name: "number", required: false },
+ control: { type: "text" },
+ description: "main icon size",
+ table: {
+ type: { summary: "number" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ color: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "main icon color",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ },
+ args: {
+ variant: VariantTypes.DEFAULT,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -49,10 +49,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -130,14 +130,14 @@ export const BasicUsage: Story = {
`,
- }),
+ }),
};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -205,5 +205,5 @@ export const Sizes: Story = {
`,
- }),
+ }),
};
diff --git a/docs/src/components/input-number/fb-input-number.mdx b/docs/src/components/input-number/fb-input-number.mdx
index 680b6cca..f9709044 100644
--- a/docs/src/components/input-number/fb-input-number.mdx
+++ b/docs/src/components/input-number/fb-input-number.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as InputNumberStories from './fb-input-number.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as InputNumberStories from "./fb-input-number.stories";
= {
- component: FbInputNumber,
- title: 'Components/Form/Input number',
- excludeStories: /.*Data$/,
+ component: FbInputNumber,
+ title: "Components/Form/Input number",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -17,10 +17,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -34,33 +34,33 @@ const handleChange = (value: number) => {
console.log(value);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInputNumber },
- setup: () => {
- const num = ref(1);
-
- const handleChange = (value: number): void => {
- console.log(value);
- };
-
- return {
- num,
- handleChange,
- };
- },
- template: `
@@ -70,28 +70,28 @@ import { ref } from 'vue';
const num = ref(1);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInputNumber },
- setup: () => {
- const num = ref(1);
-
- return {
- num,
- };
- },
- template: `
@@ -101,28 +101,28 @@ import { ref } from 'vue';
const num = ref(5);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInputNumber },
- setup: () => {
- const num = ref(5);
-
- return {
- num,
- };
- },
- template: `
@@ -132,28 +132,28 @@ import { ref } from 'vue';
const num = ref(2);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInputNumber },
- setup: () => {
- const num = ref(2);
-
- return {
- num,
- };
- },
- template: `
@@ -163,28 +163,28 @@ import { ref } from 'vue';
const num = ref(1);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInputNumber },
- setup: () => {
- const num = ref(1);
-
- return {
- num,
- };
- },
- template: `
`,
- }),
+ }),
};
export const ControlsPosition: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
console.log(value);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInputNumber },
- setup: () => {
- const num = ref(1);
-
- const handleChange = (value: number) => {
- console.log(value);
- };
-
- return {
- num,
- handleChange,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInputNumber },
+ setup: () => {
+ const num = ref(1);
+
+ const handleChange = (value: number) => {
+ console.log(value);
+ };
+
+ return {
+ num,
+ handleChange,
+ };
+ },
+ template: `
{
@change="handleChange"
/>
`,
- }),
+ }),
};
diff --git a/docs/src/components/input/fb-input.mdx b/docs/src/components/input/fb-input.mdx
index 5605a3dd..2fcfcd2b 100644
--- a/docs/src/components/input/fb-input.mdx
+++ b/docs/src/components/input/fb-input.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as InputStories from './fb-input.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as InputStories from "./fb-input.stories";
= {
- component: FbInput,
- title: 'Components/Form/Input',
- excludeStories: /.*Data$/,
+ component: FbInput,
+ title: "Components/Form/Input",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -17,10 +17,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -30,31 +30,31 @@ import { ref } from 'vue';
const input = ref('');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const input = ref('');
-
- return {
- input,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const input = ref("");
+
+ return {
+ input,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Disabled: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -64,31 +64,31 @@ import { ref } from 'vue';
const input = ref('');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const input = ref('');
-
- return {
- input,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const input = ref("");
+
+ return {
+ input,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Clearable: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -98,31 +98,31 @@ import { ref } from 'vue';
const input = ref('');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const input = ref('');
-
- return {
- input,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const input = ref("");
+
+ return {
+ input,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Formatter: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const input = ref('');
-
- return {
- input,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const input = ref("");
+
+ return {
+ input,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Password: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -176,31 +176,31 @@ import { ref } from 'vue';
const input = ref('');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const input = ref('');
-
- return {
- input,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const input = ref("");
+
+ return {
+ input,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const WithIcon: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Using attributes
@@ -239,28 +239,28 @@ const input2 = ref('');
const input3 = ref('');
const input4 = ref('');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput, FbIcon, FasCalendar, FasMagnifyingGlass },
- setup: () => {
- const input1 = ref('');
- const input2 = ref('');
- const input3 = ref('');
- const input4 = ref('');
-
- return {
- input1,
- input2,
- input3,
- input4,
- FasCalendar,
- FasMagnifyingGlass,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput, FbIcon, FasCalendar, FasMagnifyingGlass },
+ setup: () => {
+ const input1 = ref("");
+ const input2 = ref("");
+ const input3 = ref("");
+ const input4 = ref("");
+
+ return {
+ input1,
+ input2,
+ input3,
+ input4,
+ FasCalendar,
+ FasMagnifyingGlass,
+ };
+ },
+ template: `
Using attributes
@@ -289,14 +289,14 @@ const input4 = ref('');
`,
- }),
+ }),
};
export const Textarea: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const textarea = ref('');
-
- return {
- textarea,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const textarea = ref("");
+
+ return {
+ textarea,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const AutosizeTextarea: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const textarea1 = ref('');
- const textarea2 = ref('');
-
- return {
- textarea1,
- textarea2,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const textarea1 = ref("");
+ const textarea2 = ref("");
+
+ return {
+ textarea1,
+ textarea2,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Mixed: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -454,27 +454,27 @@ const input2 = ref('');
const input3 = ref('');
const select = ref('');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput, FbSelect, FbOption, FbButton, FasMagnifyingGlass },
- setup: () => {
- const input1 = ref('');
- const input2 = ref('');
- const input3 = ref('');
- const select = ref('');
-
- return {
- input1,
- input2,
- input3,
- select,
- FasMagnifyingGlass,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput, FbSelect, FbOption, FbButton, FasMagnifyingGlass },
+ setup: () => {
+ const input1 = ref("");
+ const input2 = ref("");
+ const input3 = ref("");
+ const select = ref("");
+
+ return {
+ input1,
+ input2,
+ input3,
+ select,
+ FasMagnifyingGlass,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput, FasMagnifyingGlass },
- setup: () => {
- const input1 = ref('');
- const input2 = ref('');
- const input3 = ref('');
-
- return {
- input1,
- input2,
- input3,
- FasMagnifyingGlass,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput, FasMagnifyingGlass },
+ setup: () => {
+ const input1 = ref("");
+ const input2 = ref("");
+ const input3 = ref("");
+
+ return {
+ input1,
+ input2,
+ input3,
+ FasMagnifyingGlass,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const LimitLength: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbInput },
- setup: () => {
- const text = ref('');
- const textarea = ref('');
-
- return {
- text,
- textarea,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbInput },
+ setup: () => {
+ const text = ref("");
+ const textarea = ref("");
+
+ return {
+ text,
+ textarea,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/list/fb-list.mdx b/docs/src/components/list/fb-list.mdx
index da6b0734..d7f958d9 100644
--- a/docs/src/components/list/fb-list.mdx
+++ b/docs/src/components/list/fb-list.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as ListStories from './fb-list.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as ListStories from "./fb-list.stories";
= {
- component: FbList,
- subcomponents: { FbListItem },
- title: 'Components/Data/List',
- excludeStories: /.*Data$/,
+ component: FbList,
+ subcomponents: { FbListItem },
+ title: "Components/Data/List",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -20,10 +20,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
List of awesome items
@@ -76,24 +76,24 @@ const onClick = () => {
console.log('clicked')
};
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
- setup: () => {
- const switchState = ref(true);
- const onClick = action('button-clicked');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
+ setup: () => {
+ const switchState = ref(true);
+ const onClick = action("button-clicked");
- return {
- switchState,
- onClick,
- FasGear,
- FasPlug,
- };
- },
- template: `
+ return {
+ switchState,
+ onClick,
+ FasGear,
+ FasPlug,
+ };
+ },
+ template: `
List of awesome items
Subheading of awesome items
@@ -134,14 +134,14 @@ const onClick = () => {
`,
- }),
+ }),
};
export const ListStyle: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
List of awesome items
@@ -194,24 +194,24 @@ const onClick = () => {
console.log('clicked')
};
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
- setup: () => {
- const switchState = ref(true);
- const onClick = action('button-clicked');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbList, FbListItem, FbButton, FbSwitch, FbIcon, FasGear, FasPlug },
+ setup: () => {
+ const switchState = ref(true);
+ const onClick = action("button-clicked");
- return {
- switchState,
- onClick,
- FasGear,
- FasPlug,
- };
- },
- template: `
+ return {
+ switchState,
+ onClick,
+ FasGear,
+ FasPlug,
+ };
+ },
+ template: `
List of awesome items
Subheading of awesome items
@@ -252,5 +252,5 @@ const onClick = () => {
`,
- }),
+ }),
};
diff --git a/docs/src/components/loading-box/fb-loading-box.mdx b/docs/src/components/loading-box/fb-loading-box.mdx
index da9ebefb..d6e67515 100644
--- a/docs/src/components/loading-box/fb-loading-box.mdx
+++ b/docs/src/components/loading-box/fb-loading-box.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as LoadingBoxStories from './fb-loading-box.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as LoadingBoxStories from "./fb-loading-box.stories";
= {
- component: FbLoadingBox,
- title: 'Components/Feedback/Loading box',
- argTypes: {
- default: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- defaultValue: 'Loading & preparing content...',
- description: 'Loading box info text slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- icon: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- defaultValue: null,
- description: 'Optional loading box icon slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- size: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
- description: 'loading box size',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: ComponentSizeTypes.DEFAULT },
- },
- },
- variant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'loading box variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: VariantTypes.DEFAULT },
- },
- },
- show: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'determine whether loading box is shown',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- fullScreen: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'determine whether loading box is stretched to full screen',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- animation: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'determine whether loading box is shown with animation effect',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- spinner: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'customize loading box spinner component',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- },
- args: {
- default: 'Loading & preparing content...',
- size: ComponentSizeTypes.DEFAULT,
- variant: VariantTypes.PRIMARY,
- show: true,
- fullScreen: false,
- animation: false,
- },
- excludeStories: /.*Data$/,
+ component: FbLoadingBox,
+ title: "Components/Feedback/Loading box",
+ argTypes: {
+ default: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ defaultValue: "Loading & preparing content...",
+ description: "Loading box info text slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ icon: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ defaultValue: null,
+ description: "Optional loading box icon slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ size: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+ description: "loading box size",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+ },
+ },
+ variant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+ description: "loading box variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: VariantTypes.DEFAULT },
+ },
+ },
+ show: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "determine whether loading box is shown",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ fullScreen: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "determine whether loading box is stretched to full screen",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ animation: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "determine whether loading box is shown with animation effect",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ spinner: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "customize loading box spinner component",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ },
+ args: {
+ default: "Loading & preparing content...",
+ size: ComponentSizeTypes.DEFAULT,
+ variant: VariantTypes.PRIMARY,
+ show: true,
+ fullScreen: false,
+ animation: false,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -102,14 +102,14 @@ export default meta;
type Story = StoryObj;
export const Component: Story = {
- tags: ['hideInSidebar'],
+ tags: ["hideInSidebar"],
};
export const WithIcon: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Loading you user account
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbLoadingBox, FbIcon, FasUserSecret },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbLoadingBox, FbIcon, FasUserSecret },
+ template: `
Loading you user account
`,
- }),
+ }),
};
export const CustomLogo: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbLoadingBox },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbLoadingBox },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/media-item/fb-media-item.mdx b/docs/src/components/media-item/fb-media-item.mdx
index 2674ebad..c2d2254a 100644
--- a/docs/src/components/media-item/fb-media-item.mdx
+++ b/docs/src/components/media-item/fb-media-item.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as MediaItemStories from './fb-media-item.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as MediaItemStories from "./fb-media-item.stories";
= {
- component: FbMediaItem,
- title: 'Components/Data/Media item',
- argTypes: {
- left: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'Item left box content slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- right: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'Item right box content slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- heading: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'Item heading slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- description: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'Item description slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- action: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'Item action slot',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- },
- args: {},
- excludeStories: /.*Data$/,
+ component: FbMediaItem,
+ title: "Components/Data/Media item",
+ argTypes: {
+ left: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "Item left box content slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ right: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "Item right box content slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ heading: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "Item heading slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ description: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "Item description slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ action: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "Item action slot",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ },
+ args: {},
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -64,31 +64,31 @@ export default meta;
type Story = StoryObj;
export const Component: Story = {
- tags: ['hideInSidebar'],
- render: (args) => ({
- components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
- template: `
+ tags: ["hideInSidebar"],
+ render: (args) => ({
+ components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
+ template: `
- ${args.left !== null && typeof args.left !== 'undefined' ? `${args.left} ` : ''}
- ${args.right !== null && typeof args.right !== 'undefined' ? `${args.right} ` : ''}
- ${args.heading !== null && typeof args.heading !== 'undefined' ? `${args.heading} ` : ''}
- ${args.description !== null && typeof args.description !== 'undefined' ? `${args.description} ` : ''}
- ${args.action !== null && typeof args.action !== 'undefined' ? `${args.action} ` : ''}
+ ${args.left !== null && typeof args.left !== "undefined" ? `${args.left} ` : ""}
+ ${args.right !== null && typeof args.right !== "undefined" ? `${args.right} ` : ""}
+ ${args.heading !== null && typeof args.heading !== "undefined" ? `${args.heading} ` : ""}
+ ${args.description !== null && typeof args.description !== "undefined" ? `${args.description} ` : ""}
+ ${args.action !== null && typeof args.action !== "undefined" ? `${args.action} ` : ""}
`,
- }),
- args: {
- left: 'Reload ',
- },
+ }),
+ args: {
+ left: 'Reload ",
+ },
};
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -113,21 +113,21 @@ const handleClick = (): void => {
console.log('Button clicked');
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
- setup: () => {
- const onClick = action('button-clicked');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbMediaItem, FbButton, FbIcon, FasWandMagicSparkles },
+ setup: () => {
+ const onClick = action("button-clicked");
- return {
- onClick,
- FasWandMagicSparkles,
- };
- },
- template: `
+ return {
+ onClick,
+ FasWandMagicSparkles,
+ };
+ },
+ template: `
@@ -144,5 +144,5 @@ const handleClick = (): void => {
Reload
`,
- }),
+ }),
};
diff --git a/docs/src/components/menu/fb-menu.mdx b/docs/src/components/menu/fb-menu.mdx
index 9e20fe21..f70fab90 100644
--- a/docs/src/components/menu/fb-menu.mdx
+++ b/docs/src/components/menu/fb-menu.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as MenuStories from './fb-menu.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as MenuStories from "./fb-menu.stories";
= {
- component: FbMenu,
- title: 'Components/Navigation/Menu',
- excludeStories: /.*Data$/,
+ component: FbMenu,
+ title: "Components/Navigation/Menu",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -16,10 +16,10 @@ export default meta;
type Story = StoryObj;
export const TopBar: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
console.log(key, keyPath);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbMenu, FbSubMenu, FbMenuItem },
- setup: () => {
- const activeIndex1 = ref('1');
- const activeIndex2 = ref('1');
-
- const handleSelect = (key: string, keyPath: string[]): void => {
- console.log(key, keyPath);
- };
-
- return {
- activeIndex1,
- activeIndex2,
- handleSelect,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbMenu, FbSubMenu, FbMenuItem },
+ setup: () => {
+ const activeIndex1 = ref("1");
+ const activeIndex2 = ref("1");
+
+ const handleSelect = (key: string, keyPath: string[]): void => {
+ console.log(key, keyPath);
+ };
+
+ return {
+ activeIndex1,
+ activeIndex2,
+ handleSelect,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const LeftRight: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
flex-grow: 1;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbMenu, FbSubMenu, FbMenuItem },
- setup: () => {
- const activeIndex = ref('1');
-
- const handleSelect = (key: string, keyPath: string[]): void => {
- console.log(key, keyPath);
- };
-
- return {
- activeIndex,
- handleSelect,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbMenu, FbSubMenu, FbMenuItem },
+ setup: () => {
+ const activeIndex = ref("1");
+
+ const handleSelect = (key: string, keyPath: string[]): void => {
+ console.log(key, keyPath);
+ };
+
+ return {
+ activeIndex,
+ handleSelect,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const SideBar: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -389,27 +389,27 @@ const handleClose = (key: string, keyPath: string[]): void => {
console.log(key, keyPath);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbMenu, FbSubMenu, FbMenuItem, FbMenuItemGroup, FbRow, FbCol, FbIcon, FasLocationDot, FasBars, FarFileLines, FasGear },
- setup: () => {
- const handleOpen = (key: string, keyPath: string[]): void => {
- console.log(key, keyPath);
- };
-
- const handleClose = (key: string, keyPath: string[]): void => {
- console.log(key, keyPath);
- };
-
- return {
- handleOpen,
- handleClose,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbMenu, FbSubMenu, FbMenuItem, FbMenuItemGroup, FbRow, FbCol, FbIcon, FasLocationDot, FasBars, FarFileLines, FasGear },
+ setup: () => {
+ const handleOpen = (key: string, keyPath: string[]): void => {
+ console.log(key, keyPath);
+ };
+
+ const handleClose = (key: string, keyPath: string[]): void => {
+ console.log(key, keyPath);
+ };
+
+ return {
+ handleOpen,
+ handleClose,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Collapse: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
expand
@@ -573,42 +573,42 @@ const handleClose = (key: string, keyPath: string[]): void => {
min-height: 400px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: {
- FbMenu,
- FbSubMenu,
- FbMenuItem,
- FbMenuItemGroup,
- FbIcon,
- FbRadioGroup,
- FbRadioButton,
- FasLocationDot,
- FasBars,
- FarFileLines,
- FasGear,
- },
- setup: () => {
- const isCollapse = ref(true);
-
- const handleOpen = (key: string, keyPath: string[]): void => {
- console.log(key, keyPath);
- };
-
- const handleClose = (key: string, keyPath: string[]): void => {
- console.log(key, keyPath);
- };
-
- return {
- isCollapse,
- handleOpen,
- handleClose,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: {
+ FbMenu,
+ FbSubMenu,
+ FbMenuItem,
+ FbMenuItemGroup,
+ FbIcon,
+ FbRadioGroup,
+ FbRadioButton,
+ FasLocationDot,
+ FasBars,
+ FarFileLines,
+ FasGear,
+ },
+ setup: () => {
+ const isCollapse = ref(true);
+
+ const handleOpen = (key: string, keyPath: string[]): void => {
+ console.log(key, keyPath);
+ };
+
+ const handleClose = (key: string, keyPath: string[]): void => {
+ console.log(key, keyPath);
+ };
+
+ return {
+ isCollapse,
+ handleOpen,
+ handleClose,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const PopperOffset: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Orders
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbMenu, FbSubMenu, FbMenuItem },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbMenu, FbSubMenu, FbMenuItem },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/message-box/fb-message-box.mdx b/docs/src/components/message-box/fb-message-box.mdx
index 3896a609..71792c6e 100644
--- a/docs/src/components/message-box/fb-message-box.mdx
+++ b/docs/src/components/message-box/fb-message-box.mdx
@@ -1,24 +1,12 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as MessageBoxStories from './fb-message-box.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as MessageBoxStories from "./fb-message-box.stories";
= {
- title: 'Components/Feedback/Message box',
- excludeStories: /.*Data$/,
+ title: "Components/Feedback/Message box",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -18,10 +18,10 @@ export default meta;
type Story = StoryObj;
export const Alert: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the error Alert message
Click to open the info Alert message
@@ -57,50 +57,50 @@ const openInfo = () => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- openError: () => {
- FbMessageBox.alert('This is a alert message', 'With some title', {
- confirmButtonText: 'This is OK',
- type: VariantTypes.ERROR,
- onAction: (action: MessageBoxAction) => {
- FbMessage({
- type: VariantTypes.INFO,
- message: `You clicked: ${action}`,
- });
- },
- });
- },
- openInfo: () => {
- FbMessageBox.alert('This is a info message', 'With some title', {
- confirmButtonText: 'This is OK',
- type: VariantTypes.INFO,
- onAction: (action: MessageBoxAction) => {
- FbMessage({
- type: VariantTypes.INFO,
- message: `You clicked: ${action}`,
- });
- },
- });
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ openError: () => {
+ FbMessageBox.alert("This is a alert message", "With some title", {
+ confirmButtonText: "This is OK",
+ type: VariantTypes.ERROR,
+ onAction: (action: MessageBoxAction) => {
+ FbMessage({
+ type: VariantTypes.INFO,
+ message: `You clicked: ${action}`,
+ });
+ },
+ });
+ },
+ openInfo: () => {
+ FbMessageBox.alert("This is a info message", "With some title", {
+ confirmButtonText: "This is OK",
+ type: VariantTypes.INFO,
+ onAction: (action: MessageBoxAction) => {
+ FbMessage({
+ type: VariantTypes.INFO,
+ message: `You clicked: ${action}`,
+ });
+ },
+ });
+ },
+ },
+ template: `
Click to open the error Alert message
Click to open the info Alert message
`,
- }),
+ }),
};
export const Confirm: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Confirmation message
@@ -134,43 +134,43 @@ const open = () => {
);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open: () => {
- FbMessageBox.confirm('This action will permanently delete data. Continue?', 'Are you sure?', {
- confirmButtonText: 'OK',
- cancelButtonText: 'Cancel',
- type: VariantTypes.WARNING,
- onAction: (action: MessageBoxAction): void => {
- if (action === MessageBoxActionTypes.CONFIRM) {
- FbMessage({
- type: VariantTypes.SUCCESS,
- message: 'Delete completed',
- });
- } else {
- FbMessage({
- type: VariantTypes.INFO,
- message: 'Delete canceled',
- });
- }
- },
- });
- },
- },
- template: 'Click to open the Confirmation message ',
- }),
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open: () => {
+ FbMessageBox.confirm("This action will permanently delete data. Continue?", "Are you sure?", {
+ confirmButtonText: "OK",
+ cancelButtonText: "Cancel",
+ type: VariantTypes.WARNING,
+ onAction: (action: MessageBoxAction): void => {
+ if (action === MessageBoxActionTypes.CONFIRM) {
+ FbMessage({
+ type: VariantTypes.SUCCESS,
+ message: "Delete completed",
+ });
+ } else {
+ FbMessage({
+ type: VariantTypes.INFO,
+ message: "Delete canceled",
+ });
+ }
+ },
+ });
+ },
+ },
+ template: 'Click to open the Confirmation message ',
+ }),
};
export const Prompt: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Confirmation message
@@ -201,44 +201,44 @@ const open = () => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open: () => {
- FbMessageBox.prompt('Please input your e-mail', 'Tip', {
- confirmButtonText: 'OK',
- cancelButtonText: 'Cancel',
- inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
- inputErrorMessage: 'Invalid Email',
- onAction: (action: MessageBoxAction, _context, value: string): void => {
- if (action === MessageBoxActionTypes.CONFIRM) {
- FbMessage({
- type: VariantTypes.SUCCESS,
- message: `Your email is: ${value}`,
- });
- } else {
- FbMessage({
- type: VariantTypes.INFO,
- message: 'Input canceled',
- });
- }
- },
- });
- },
- },
- template: 'Click to open the Prompt message ',
- }),
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open: () => {
+ FbMessageBox.prompt("Please input your e-mail", "Tip", {
+ confirmButtonText: "OK",
+ cancelButtonText: "Cancel",
+ inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
+ inputErrorMessage: "Invalid Email",
+ onAction: (action: MessageBoxAction, _context, value: string): void => {
+ if (action === MessageBoxActionTypes.CONFIRM) {
+ FbMessage({
+ type: VariantTypes.SUCCESS,
+ message: `Your email is: ${value}`,
+ });
+ } else {
+ FbMessage({
+ type: VariantTypes.INFO,
+ message: "Input canceled",
+ });
+ }
+ },
+ });
+ },
+ },
+ template: 'Click to open the Prompt message ',
+ }),
};
export const Vnode: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Common VNode
Dynamic props
@@ -271,47 +271,47 @@ const openTwo = () => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton, FbSwitch },
- methods: {
- openOne: () => {
- FbMessageBox({
- title: 'Message',
- message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
- });
- },
- openTwo: () => {
- const checked = ref(false);
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton, FbSwitch },
+ methods: {
+ openOne: () => {
+ FbMessageBox({
+ title: "Message",
+ message: h("p", null, [h("span", null, "Message can be "), h("i", { style: "color: teal" }, "VNode")]),
+ });
+ },
+ openTwo: () => {
+ const checked = ref(false);
- FbMessageBox({
- title: 'Message',
- // Should pass a function if VNode contains dynamic props
- message: () =>
- h(FbSwitch, {
- modelValue: checked.value,
- 'onUpdate:modelValue': (val: boolean | string | number) => {
- checked.value = val;
- },
- }),
- });
- },
- },
- template: `
+ FbMessageBox({
+ title: "Message",
+ // Should pass a function if VNode contains dynamic props
+ message: () =>
+ h(FbSwitch, {
+ modelValue: checked.value,
+ "onUpdate:modelValue": (val: boolean | string | number) => {
+ checked.value = val;
+ },
+ }),
+ });
+ },
+ },
+ template: `
Common VNode
Dynamic props
`,
- }),
+ }),
};
export const Customization: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Confirmation message
@@ -344,51 +344,51 @@ const open = () => {
);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open: () => {
- FbMessageBox({
- title: 'Message',
- message: h('p', null, [h('span', null, 'Message can be '), h('i', { style: 'color: teal' }, 'VNode')]),
- showCancelButton: true,
- confirmButtonText: 'OK',
- cancelButtonText: 'Cancel',
- beforeClose: (action: MessageBoxAction, instance, done) => {
- if (action === MessageBoxActionTypes.CONFIRM) {
- instance.confirmButtonRef.value.loading = true;
- instance.confirmButtonRef.value.text = 'Loading...';
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open: () => {
+ FbMessageBox({
+ title: "Message",
+ message: h("p", null, [h("span", null, "Message can be "), h("i", { style: "color: teal" }, "VNode")]),
+ showCancelButton: true,
+ confirmButtonText: "OK",
+ cancelButtonText: "Cancel",
+ beforeClose: (action: MessageBoxAction, instance, done) => {
+ if (action === MessageBoxActionTypes.CONFIRM) {
+ instance.confirmButtonRef.value.loading = true;
+ instance.confirmButtonRef.value.text = "Loading...";
- setTimeout(() => {
- done();
- setTimeout(() => {
- instance.confirmButtonRef.value.loading = false;
- }, 300);
- }, 3000);
- } else {
- done();
- }
- },
- onAction: (action: MessageBoxAction): void => {
- if (action === MessageBoxActionTypes.CONFIRM) {
- FbMessage({
- type: VariantTypes.SUCCESS,
- message: 'Delete completed',
- });
- } else {
- FbMessage({
- type: VariantTypes.INFO,
- message: 'Delete canceled',
- });
- }
- },
- });
- },
- },
- template: 'Click to open the Customized message ',
- }),
+ setTimeout(() => {
+ done();
+ setTimeout(() => {
+ instance.confirmButtonRef.value.loading = false;
+ }, 300);
+ }, 3000);
+ } else {
+ done();
+ }
+ },
+ onAction: (action: MessageBoxAction): void => {
+ if (action === MessageBoxActionTypes.CONFIRM) {
+ FbMessage({
+ type: VariantTypes.SUCCESS,
+ message: "Delete completed",
+ });
+ } else {
+ FbMessage({
+ type: VariantTypes.INFO,
+ message: "Delete canceled",
+ });
+ }
+ },
+ });
+ },
+ },
+ template: 'Click to open the Customized message ',
+ }),
};
diff --git a/docs/src/components/message/fb-message.mdx b/docs/src/components/message/fb-message.mdx
index 82834487..49b4497e 100644
--- a/docs/src/components/message/fb-message.mdx
+++ b/docs/src/components/message/fb-message.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as MessageStories from './fb-message.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as MessageStories from "./fb-message.stories";
= {
- title: 'Components/Feedback/Message',
- excludeStories: /.*Data$/,
+ title: "Components/Feedback/Message",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -16,10 +16,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Show message
VNode
@@ -42,36 +42,36 @@ const openVn = () => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open: () => {
- FbMessage.success('This is a message.');
- },
- openVn: () => {
- FbMessage({
- message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
- h('span', null, 'Message can be '),
- h('i', { style: 'color: teal' }, 'VNode'),
- ]),
- });
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open: () => {
+ FbMessage.success("This is a message.");
+ },
+ openVn: () => {
+ FbMessage({
+ message: h("p", { style: "line-height: 1; font-size: 14px" }, [
+ h("span", null, "Message can be "),
+ h("i", { style: "color: teal" }, "VNode"),
+ ]),
+ });
+ },
+ },
+ template: `
Show message
VNode `,
- }),
+ }),
};
export const Types: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Success
Warning
@@ -104,45 +104,45 @@ const open4 = (): void => {
FbMessage.error('Oops, this is a error message.');
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open1: () => {
- FbMessage.success('This is a message.');
- },
- open2: () => {
- FbMessage({
- message: 'Congrats, this is a success message.',
- type: VariantTypes.SUCCESS,
- });
- },
- open3: () => {
- FbMessage({
- message: 'Warning, this is a warning message.',
- type: VariantTypes.WARNING,
- });
- },
- open4: () => {
- FbMessage.error('Oops, this is a error message.');
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open1: () => {
+ FbMessage.success("This is a message.");
+ },
+ open2: () => {
+ FbMessage({
+ message: "Congrats, this is a success message.",
+ type: VariantTypes.SUCCESS,
+ });
+ },
+ open3: () => {
+ FbMessage({
+ message: "Warning, this is a warning message.",
+ type: VariantTypes.WARNING,
+ });
+ },
+ open4: () => {
+ FbMessage.error("Oops, this is a error message.");
+ },
+ },
+ template: `
Success
Warning
Message
Error `,
- }),
+ }),
};
export const Closable: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Message
Success
@@ -184,54 +184,54 @@ const open4 = (): void => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open1: () => {
- FbMessage({
- showClose: true,
- message: 'This is a message.',
- });
- },
- open2: () => {
- FbMessage({
- showClose: true,
- message: 'Congrats, this is a success message.',
- type: VariantTypes.SUCCESS,
- });
- },
- open3: () => {
- FbMessage({
- showClose: true,
- message: 'Warning, this is a warning message.',
- type: VariantTypes.WARNING,
- });
- },
- open4: () => {
- FbMessage({
- showClose: true,
- message: 'Oops, this is a error message.',
- type: VariantTypes.ERROR,
- });
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open1: () => {
+ FbMessage({
+ showClose: true,
+ message: "This is a message.",
+ });
+ },
+ open2: () => {
+ FbMessage({
+ showClose: true,
+ message: "Congrats, this is a success message.",
+ type: VariantTypes.SUCCESS,
+ });
+ },
+ open3: () => {
+ FbMessage({
+ showClose: true,
+ message: "Warning, this is a warning message.",
+ type: VariantTypes.WARNING,
+ });
+ },
+ open4: () => {
+ FbMessage({
+ showClose: true,
+ message: "Oops, this is a error message.",
+ type: VariantTypes.ERROR,
+ });
+ },
+ },
+ template: `
Message
Success
Warning
Error `,
- }),
+ }),
};
export const CenteredText: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Centered text
@@ -247,31 +247,31 @@ const openCenter = (): void => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- openCenter: () => {
- FbMessage({
- showClose: true,
- message: 'Centered text',
- center: true,
- });
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ openCenter: () => {
+ FbMessage({
+ showClose: true,
+ message: "Centered text",
+ center: true,
+ });
+ },
+ },
+ template: `
Centered text `,
- }),
+ }),
};
export const HtmlContent: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Use HTML string
@@ -286,30 +286,30 @@ const openHTML = (): void => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- openHTML: () => {
- FbMessage({
- dangerouslyUseHTMLString: true,
- message: 'This is HTML string ',
- });
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ openHTML: () => {
+ FbMessage({
+ dangerouslyUseHTMLString: true,
+ message: "This is HTML string ",
+ });
+ },
+ },
+ template: `
Use HTML string `,
- }),
+ }),
};
export const Grouping: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Show message
@@ -325,22 +325,22 @@ const open = (): void => {
});
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbButton },
- methods: {
- open: () => {
- FbMessage({
- message: 'This is a message.',
- grouping: true,
- type: VariantTypes.SUCCESS,
- });
- },
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbButton },
+ methods: {
+ open: () => {
+ FbMessage({
+ message: "This is a message.",
+ grouping: true,
+ type: VariantTypes.SUCCESS,
+ });
+ },
+ },
+ template: `
Show message `,
- }),
+ }),
};
diff --git a/docs/src/components/modal/fb-modal.mdx b/docs/src/components/modal/fb-modal.mdx
index b6adcd8d..d0f2bd8d 100644
--- a/docs/src/components/modal/fb-modal.mdx
+++ b/docs/src/components/modal/fb-modal.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
-import * as ModalStories from './fb-modal.stories';
+import { Canvas, Controls, Meta } from "@storybook/blocks";
+import * as ModalStories from "./fb-modal.stories";
= {
- component: FbModal,
- title: 'Components/Feedback/Modal',
- argTypes: {
- content: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the modal footer for replacing whole modal content with custom one',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- header: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the modal header for replacing whole modal header content with custom one',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- footer: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of the modal footer for replacing whole modal footer content with custom one',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- title: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'title of the modal',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- subtitle: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'subtitle of the modal',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- icon: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'modal header icon',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- default: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content of modal',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- 'left-button': {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'slot for using custom left button used as `Close` action',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- 'right-button': {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'slot for using custom right button used as `Ok` action',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- variant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [VariantTypes.PRIMARY, VariantTypes.DEFAULT, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.ERROR],
- description: 'modal header and button variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: VariantTypes.PRIMARY },
- },
- },
- layout: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [LayoutTypes.DEFAULT, LayoutTypes.PHONE, LayoutTypes.TABLET],
- description: 'modal layout',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: LayoutTypes.DEFAULT },
- },
- },
- width: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'width of modal, default is 50%',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '50%' },
- },
- },
- fullscreen: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether the modal takes up full screen',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- top: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'value for `margin-top` of modal CSS, default is 15vh',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '15vh' },
- },
- },
- showHeader: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether a modal header is displayed',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- showFooter: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether a modal footer is displayed',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- backdrop: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether a mask is displayed',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- customClass: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'custom class names for backdrop',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- appendToBody: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether to append modal itself to body. A nested modal should have this attribute set to `true`',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- appendTo: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'which element the modal appends to. Will override `append-to-body`',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'body' },
- },
- },
- lockScroll: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether scroll of body is disabled while modal is displayed',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- openDelay: {
- type: { name: 'number', required: false },
- control: { type: 'text' },
- description: 'the time in milliseconds before open',
- table: {
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- closeDelay: {
- type: { name: 'number', required: false },
- control: { type: 'text' },
- description: 'the time in milliseconds before close',
- table: {
- type: { summary: 'number' },
- defaultValue: { summary: 0 },
- },
- },
- closeOnClickBackdrop: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether the modal can be closed by clicking the backdrop',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- closeOnPressEscape: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether the modal can be closed by pressing ESC',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- showClose: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether to show a close button',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- showLeftBtn: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether to show a left action button',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- leftBtnLabel: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'left action button label',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'Close' },
- },
- },
- showRightBtn: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether to show a right action button',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- rightBtnLabel: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'right action button label',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'Ok' },
- },
- },
- draggable: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'enable dragging feature for modal',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- overflow: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'draggable modal can overflow the viewport',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- center: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether to align the header and footer in center',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- alignCenter: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether to align the modal both horizontally and vertically',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- closable: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether enable or disable modal close action',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: true },
- },
- },
- destroyOnClose: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'destroy elements in modal when closed',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- },
- args: {
- variant: VariantTypes.PRIMARY,
- layout: LayoutTypes.DEFAULT,
- width: '50%',
- fullscreen: false,
- top: '15vh',
- showHeader: true,
- showFooter: true,
- backdrop: true,
- appendToBody: false,
- appendTo: 'body',
- lockScroll: false,
- openDelay: 0,
- closeDelay: 0,
- closeOnClickBackdrop: true,
- closeOnPressEscape: true,
- showClose: true,
- showLeftBtn: true,
- leftBtnLabel: 'Close',
- showRightBtn: true,
- rightBtnLabel: 'Ok',
- draggable: false,
- overflow: false,
- center: false,
- alignCenter: false,
- closable: true,
- destroyOnClose: false,
- },
- excludeStories: /.*Data$/,
+ component: FbModal,
+ title: "Components/Feedback/Modal",
+ argTypes: {
+ content: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the modal footer for replacing whole modal content with custom one",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ header: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the modal header for replacing whole modal header content with custom one",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ footer: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of the modal footer for replacing whole modal footer content with custom one",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ title: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "title of the modal",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ subtitle: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "subtitle of the modal",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ icon: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "modal header icon",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ default: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content of modal",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ "left-button": {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "slot for using custom left button used as `Close` action",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ "right-button": {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "slot for using custom right button used as `Ok` action",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ variant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [VariantTypes.PRIMARY, VariantTypes.DEFAULT, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.ERROR],
+ description: "modal header and button variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: VariantTypes.PRIMARY },
+ },
+ },
+ layout: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [LayoutTypes.DEFAULT, LayoutTypes.PHONE, LayoutTypes.TABLET],
+ description: "modal layout",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: LayoutTypes.DEFAULT },
+ },
+ },
+ width: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "width of modal, default is 50%",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "50%" },
+ },
+ },
+ fullscreen: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether the modal takes up full screen",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ top: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "value for `margin-top` of modal CSS, default is 15vh",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "15vh" },
+ },
+ },
+ showHeader: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether a modal header is displayed",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ showFooter: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether a modal footer is displayed",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ backdrop: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether a mask is displayed",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ customClass: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "custom class names for backdrop",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ appendToBody: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether to append modal itself to body. A nested modal should have this attribute set to `true`",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ appendTo: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "which element the modal appends to. Will override `append-to-body`",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "body" },
+ },
+ },
+ lockScroll: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether scroll of body is disabled while modal is displayed",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ openDelay: {
+ type: { name: "number", required: false },
+ control: { type: "text" },
+ description: "the time in milliseconds before open",
+ table: {
+ type: { summary: "number" },
+ defaultValue: { summary: 0 },
+ },
+ },
+ closeDelay: {
+ type: { name: "number", required: false },
+ control: { type: "text" },
+ description: "the time in milliseconds before close",
+ table: {
+ type: { summary: "number" },
+ defaultValue: { summary: 0 },
+ },
+ },
+ closeOnClickBackdrop: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether the modal can be closed by clicking the backdrop",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ closeOnPressEscape: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether the modal can be closed by pressing ESC",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ showClose: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether to show a close button",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ showLeftBtn: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether to show a left action button",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ leftBtnLabel: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "left action button label",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "Close" },
+ },
+ },
+ showRightBtn: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether to show a right action button",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ rightBtnLabel: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "right action button label",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "Ok" },
+ },
+ },
+ draggable: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "enable dragging feature for modal",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ overflow: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "draggable modal can overflow the viewport",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ center: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether to align the header and footer in center",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ alignCenter: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether to align the modal both horizontally and vertically",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ closable: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether enable or disable modal close action",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: true },
+ },
+ },
+ destroyOnClose: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "destroy elements in modal when closed",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ },
+ args: {
+ variant: VariantTypes.PRIMARY,
+ layout: LayoutTypes.DEFAULT,
+ width: "50%",
+ fullscreen: false,
+ top: "15vh",
+ showHeader: true,
+ showFooter: true,
+ backdrop: true,
+ appendToBody: false,
+ appendTo: "body",
+ lockScroll: false,
+ openDelay: 0,
+ closeDelay: 0,
+ closeOnClickBackdrop: true,
+ closeOnPressEscape: true,
+ showClose: true,
+ showLeftBtn: true,
+ leftBtnLabel: "Close",
+ showRightBtn: true,
+ rightBtnLabel: "Ok",
+ draggable: false,
+ overflow: false,
+ center: false,
+ alignCenter: false,
+ closable: true,
+ destroyOnClose: false,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -375,10 +375,10 @@ export default meta;
type Story = StoryObj;
export const Playground: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Modal
@@ -394,24 +394,24 @@ import { ref } from 'vue';
const modalVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: (args) => ({
- components: { FbModal, FbButton },
- setup() {
- const modalVisible = ref(false);
-
- return { args, modalVisible };
- },
- methods: {
- onClick: action('button-clicked'),
- onClose: action('modal-close-action-triggered'),
- onLeftClick: action('modal-left-button-clicked'),
- onRightClick: action('modal-right-button-clicked'),
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: (args) => ({
+ components: { FbModal, FbButton },
+ setup() {
+ const modalVisible = ref(false);
+
+ return { args, modalVisible };
+ },
+ methods: {
+ onClick: action("button-clicked"),
+ onClose: action("modal-close-action-triggered"),
+ onLeftClick: action("modal-left-button-clicked"),
+ onRightClick: action("modal-right-button-clicked"),
+ },
+ template: `
Open modal
${args.content}
${args.header}
${args.title}
${args.subtitle}
${args.icon}
${args.default}
${args.footer}
- ${args['left-button']}
+ ${args["left-button"]}
- ${args['right-button']}
+ ${args["right-button"]}
`,
- }),
- args: {
- title: 'Modal window header',
- default: `
+ }),
+ args: {
+ title: "Modal window header",
+ default: `
Phasellus sapien felis, vulputate a nibh eu, tempor dictum turpis. Pellentesque non ex condimentum, dictum mauris non, ullamcorper nisi. Nunc sodales vel libero ac gravida. Maecenas malesuada viverra odio at molestie.
Donec ultrices vel nibh a iaculis. Morbi dapibus sollicitudin libero facilisis dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Phasellus sapien felis, vulputate a nibh eu, tempor dictum turpis. Pellentesque non ex condimentum, dictum mauris non, ullamcorper nisi. Nunc sodales vel libero ac gravida. Maecenas malesuada viverra odio at molestie.
`,
- },
+ },
};
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Modal
@@ -522,18 +522,18 @@ import { ref } from 'vue';
const modalVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FasImage },
- setup() {
- const modalVisible = ref(false);
-
- return { FasImage, modalVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FasImage },
+ setup() {
+ const modalVisible = ref(false);
+
+ return { FasImage, modalVisible };
+ },
+ template: `
Click to open the Modal
@@ -549,14 +549,14 @@ const modalVisible = ref(false);
Phasellus sapien felis, vulputate a nibh eu, tempor dictum turpis. Pellentesque non ex condimentum, dictum mauris non, ullamcorper nisi.
Open a Table nested Modal
@@ -638,54 +638,54 @@ const gridData = [
},
];
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FbForm, FbFormItem, FbInput, FasKeyboard },
- setup() {
- const modalTableVisible = ref(false);
- const modalFormVisible = ref(false);
- const formLabelWidth = '140px';
-
- const form = reactive({
- name: '',
- region: '',
- date1: '',
- date2: '',
- delivery: false,
- type: [],
- resource: '',
- desc: '',
- });
-
- const gridData = [
- {
- date: '2016-05-02',
- name: 'John Smith',
- address: 'No.1518, Jinshajiang Road, Putuo District',
- },
- {
- date: '2016-05-04',
- name: 'John Smith',
- address: 'No.1518, Jinshajiang Road, Putuo District',
- },
- {
- date: '2016-05-01',
- name: 'John Smith',
- address: 'No.1518, Jinshajiang Road, Putuo District',
- },
- {
- date: '2016-05-03',
- name: 'John Smith',
- address: 'No.1518, Jinshajiang Road, Putuo District',
- },
- ];
-
- return { modalTableVisible, modalFormVisible, formLabelWidth, form, gridData, FasKeyboard };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FbForm, FbFormItem, FbInput, FasKeyboard },
+ setup() {
+ const modalTableVisible = ref(false);
+ const modalFormVisible = ref(false);
+ const formLabelWidth = "140px";
+
+ const form = reactive({
+ name: "",
+ region: "",
+ date1: "",
+ date2: "",
+ delivery: false,
+ type: [],
+ resource: "",
+ desc: "",
+ });
+
+ const gridData = [
+ {
+ date: "2016-05-02",
+ name: "John Smith",
+ address: "No.1518, Jinshajiang Road, Putuo District",
+ },
+ {
+ date: "2016-05-04",
+ name: "John Smith",
+ address: "No.1518, Jinshajiang Road, Putuo District",
+ },
+ {
+ date: "2016-05-01",
+ name: "John Smith",
+ address: "No.1518, Jinshajiang Road, Putuo District",
+ },
+ {
+ date: "2016-05-03",
+ name: "John Smith",
+ address: "No.1518, Jinshajiang Road, Putuo District",
+ },
+ ];
+
+ return { modalTableVisible, modalFormVisible, formLabelWidth, form, gridData, FasKeyboard };
+ },
+ template: `
Open a Table nested Modal
@@ -733,14 +733,14 @@ const gridData = [
`,
- }),
+ }),
};
export const CustomHeader: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open Modal with customized header
@@ -776,18 +776,18 @@ const modalVisible = ref(false);
gap: 16px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FbIcon, FasCircleXmark },
- setup() {
- const modalVisible = ref(false);
-
- return { FasCircleXmark, modalVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FbIcon, FasCircleXmark },
+ setup() {
+ const modalVisible = ref(false);
+
+ return { FasCircleXmark, modalVisible };
+ },
+ template: `
Open Modal with customized header
@@ -814,14 +814,14 @@ const modalVisible = ref(false);
This is modal content.
`,
- }),
+ }),
};
export const NestedModal: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open the outer Modal
@@ -854,19 +854,19 @@ import { ref } from 'vue';
const outerVisible = ref(false);
const innerVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton },
- setup() {
- const outerVisible = ref(false);
- const innerVisible = ref(false);
-
- return { outerVisible, innerVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton },
+ setup() {
+ const outerVisible = ref(false);
+ const innerVisible = ref(false);
+
+ return { outerVisible, innerVisible };
+ },
+ template: `
Open the outer Modal
@@ -894,14 +894,14 @@ const innerVisible = ref(false);
`,
- }),
+ }),
};
export const CentredContent: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Modal
@@ -923,18 +923,18 @@ import { ref } from 'vue';
const modalVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FasImage },
- setup() {
- const modalVisible = ref(false);
-
- return { FasImage, modalVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FasImage },
+ setup() {
+ const modalVisible = ref(false);
+
+ return { FasImage, modalVisible };
+ },
+ template: `
Click to open the Modal
@@ -950,14 +950,14 @@ const modalVisible = ref(false);
>
It should be noted that the content will not be aligned in center by default
`,
- }),
+ }),
};
export const AlignCentred: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Modal
@@ -979,18 +979,18 @@ import { ref } from 'vue';
const modalVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FasImage },
- setup() {
- const modalVisible = ref(false);
-
- return { FasImage, modalVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FasImage },
+ setup() {
+ const modalVisible = ref(false);
+
+ return { FasImage, modalVisible };
+ },
+ template: `
Click to open the Modal
@@ -1006,14 +1006,14 @@ const modalVisible = ref(false);
>
It should be noted that the content will not be aligned in center by default
`,
- }),
+ }),
};
export const Draggable: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Open a draggable Modal
@@ -1051,19 +1051,19 @@ import { ref } from 'vue';
const modalVisible = ref(false);
const modalVisiblemodalOverflowVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FasImage },
- setup() {
- const modalVisible = ref(false);
- const modalOverflowVisible = ref(false);
-
- return { FasImage, modalVisible, modalOverflowVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FasImage },
+ setup() {
+ const modalVisible = ref(false);
+ const modalOverflowVisible = ref(false);
+
+ return { FasImage, modalVisible, modalOverflowVisible };
+ },
+ template: `
Open a draggable Modal
@@ -1092,14 +1092,14 @@ const modalVisiblemodalOverflowVisible = ref(false);
>
It's a overflow draggable Dialog
`,
- }),
+ }),
};
export const WithDescription: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Click to open the Modal
@@ -1124,18 +1124,18 @@ import { ref } from 'vue';
const modalVisible = ref(false);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbModal, FbButton, FasImage },
- setup() {
- const modalVisible = ref(false);
-
- return { FasImage, modalVisible };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbModal, FbButton, FasImage },
+ setup() {
+ const modalVisible = ref(false);
+
+ return { FasImage, modalVisible };
+ },
+ template: `
Click to open the Modal
@@ -1154,5 +1154,5 @@ const modalVisible = ref(false);
= {
- component: FbRadio,
- title: 'Components/Form/Radio',
- excludeStories: /.*Data$/,
+ component: FbRadio,
+ title: "Components/Form/Radio",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -17,10 +17,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -55,24 +55,24 @@ const radio1 = ref('1');
const radio2 = ref('1');
const radio3 = ref('1');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbRadio, FbRadioGroup },
- setup: () => {
- const radio1 = ref('1');
- const radio2 = ref('1');
- const radio3 = ref('1');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbRadio, FbRadioGroup },
+ setup: () => {
+ const radio1 = ref("1");
+ const radio2 = ref("1");
+ const radio3 = ref("1");
- return {
- radio1,
- radio2,
- radio3,
- };
- },
- template: `
+ return {
+ radio1,
+ radio2,
+ radio3,
+ };
+ },
+ template: `
@@ -99,14 +99,14 @@ const radio3 = ref('1');
`,
- }),
+ }),
};
export const Disabled: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Option A
Option B
@@ -117,32 +117,32 @@ import { ref } from 'vue';
const radio = ref('selected and disabled');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbRadio },
- setup: () => {
- const radio = ref('selected and disabled');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbRadio },
+ setup: () => {
+ const radio = ref("selected and disabled");
- return {
- radio,
- };
- },
- template: `
+ return {
+ radio,
+ };
+ },
+ template: `
Option A
Option B
`,
- }),
+ }),
};
export const RadioGroup: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Option A
@@ -156,20 +156,20 @@ import { ref } from 'vue';
const radio = ref(3)
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbRadio, FbRadioGroup },
- setup: () => {
- const radio = ref(3);
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbRadio, FbRadioGroup },
+ setup: () => {
+ const radio = ref(3);
- return {
- radio,
- };
- },
- template: `
+ return {
+ radio,
+ };
+ },
+ template: `
Option A
@@ -177,14 +177,14 @@ const radio = ref(3)
Option C
`,
- }),
+ }),
};
export const Button: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -219,24 +219,24 @@ const radio1 = ref('New York');
const radio2 = ref('New York');
const radio3 = ref('New York');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbRadio, FbRadioGroup, FbRadioButton },
- setup: () => {
- const radio1 = ref('New York');
- const radio2 = ref('New York');
- const radio3 = ref('New York');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbRadio, FbRadioGroup, FbRadioButton },
+ setup: () => {
+ const radio1 = ref("New York");
+ const radio2 = ref("New York");
+ const radio3 = ref("New York");
- return {
- radio1,
- radio2,
- radio3,
- };
- },
- template: `
+ return {
+ radio1,
+ radio2,
+ radio3,
+ };
+ },
+ template: `
@@ -263,14 +263,14 @@ const radio3 = ref('New York');
`,
- }),
+ }),
};
export const Bordered: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -306,26 +306,26 @@ const radio2 = ref('1');
const radio3 = ref('1');
const radio4 = ref('1');
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbRadio, FbRadioGroup },
- setup: () => {
- const radio1 = ref('1');
- const radio2 = ref('1');
- const radio3 = ref('1');
- const radio4 = ref('1');
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbRadio, FbRadioGroup },
+ setup: () => {
+ const radio1 = ref("1");
+ const radio2 = ref("1");
+ const radio3 = ref("1");
+ const radio4 = ref("1");
- return {
- radio1,
- radio2,
- radio3,
- radio4,
- };
- },
- template: `
+ return {
+ radio1,
+ radio2,
+ radio3,
+ radio4,
+ };
+ },
+ template: `
@@ -352,5 +352,5 @@ const radio4 = ref('1');
`,
- }),
+ }),
};
diff --git a/docs/src/components/result/fb-result.mdx b/docs/src/components/result/fb-result.mdx
index 3c120238..3ac89da0 100644
--- a/docs/src/components/result/fb-result.mdx
+++ b/docs/src/components/result/fb-result.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as ResultStories from './fb-result.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as ResultStories from "./fb-result.stories";
= {
- component: FbResult,
- title: 'Components/Feedback/Result',
- argTypes: {
- title: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content as result title',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- subtitle: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'content as result subtitle',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- status: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: resultIcons,
- description: 'result status variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: ResultIconTypes.INFO },
- },
- },
- animation: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'animate status icon',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- },
- args: {
- title: 'Successfully Configured Device!',
- subtitle: 'Your device: Living room heater is being to be prepared, please wait.',
- status: ResultIconTypes.INFO,
- animation: false,
- },
- excludeStories: /.*Data$/,
+ component: FbResult,
+ title: "Components/Feedback/Result",
+ argTypes: {
+ title: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content as result title",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ subtitle: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "content as result subtitle",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ status: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: resultIcons,
+ description: "result status variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: ResultIconTypes.INFO },
+ },
+ },
+ animation: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "animate status icon",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ },
+ args: {
+ title: "Successfully Configured Device!",
+ subtitle: "Your device: Living room heater is being to be prepared, please wait.",
+ status: ResultIconTypes.INFO,
+ animation: false,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -60,14 +60,14 @@ export default meta;
type Story = StoryObj;
export const Component: Story = {
- tags: ['hideInSidebar'],
+ tags: ["hideInSidebar"],
};
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -116,13 +116,13 @@ export const BasicUsage: Story = {
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbResult, FbRow, FbCol, FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbResult, FbRow, FbCol, FbButton },
+ template: `
`,
- }),
+ }),
};
export const LoadingStatus403: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbResult, FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbResult, FbButton },
+ template: `
Back Home
`,
- }),
+ }),
};
export const LoadingStatus404: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbResult, FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbResult, FbButton },
+ template: `
Back Home
`,
- }),
+ }),
};
export const LoadingStatus500: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbResult, FbButton },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbResult, FbButton },
+ template: `
Back Home
`,
- }),
+ }),
};
export const CustomIcon: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbResult, FbButton, FbIcon, FarFaceSmile },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbResult, FbButton, FbIcon, FarFaceSmile },
+ template: `
@@ -315,5 +315,5 @@ export const CustomIcon: Story = {
Next
`,
- }),
+ }),
};
diff --git a/docs/src/components/scrollbar/fb-scrollbar.mdx b/docs/src/components/scrollbar/fb-scrollbar.mdx
index 629e25d3..443e1dc4 100644
--- a/docs/src/components/scrollbar/fb-scrollbar.mdx
+++ b/docs/src/components/scrollbar/fb-scrollbar.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as ScrollbarStories from './fb-scrollbar.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as ScrollbarStories from "./fb-scrollbar.stories";
= {
- component: FbScrollbar,
- title: 'Components/Basic/Scrollbar',
- excludeStories: /.*Data$/,
+ component: FbScrollbar,
+ title: "Components/Basic/Scrollbar",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -17,10 +17,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{{ item }}
@@ -40,13 +40,13 @@ export const BasicUsage: Story = {
color: var(--fb-color-primary);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbScrollbar },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbScrollbar },
+ template: `
@@ -54,14 +54,14 @@ export const BasicUsage: Story = {
`,
- }),
+ }),
};
export const WithShadow: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{{ item }}
@@ -81,13 +81,13 @@ export const WithShadow: Story = {
color: var(--fb-color-primary);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbScrollbar },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbScrollbar },
+ template: `
@@ -95,14 +95,14 @@ export const WithShadow: Story = {
`,
- }),
+ }),
};
export const Horizontal: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -132,13 +132,13 @@ export const Horizontal: Story = {
color: var(--fb-color-danger);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbScrollbar },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbScrollbar },
+ template: `
@@ -148,14 +148,14 @@ export const Horizontal: Story = {
`,
- }),
+ }),
};
export const MaxHeight: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
Add Item
Delete Item
@@ -195,32 +195,32 @@ const onDelete = () => {
color: var(--fb-color-primary);
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbScrollbar, FbButton },
- setup: () => {
- const count = ref(3);
-
- const add = () => {
- count.value++;
- };
-
- const onDelete = () => {
- if (count.value > 0) {
- count.value--;
- }
- };
-
- return {
- count,
- add,
- onDelete,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbScrollbar, FbButton },
+ setup: () => {
+ const count = ref(3);
+
+ const add = () => {
+ count.value++;
+ };
+
+ const onDelete = () => {
+ if (count.value > 0) {
+ count.value--;
+ }
+ };
+
+ return {
+ count,
+ add,
+ onDelete,
+ };
+ },
+ template: `
Add Item
@@ -232,14 +232,14 @@ const onDelete = () => {
`,
- }),
+ }),
};
export const Manual: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -300,43 +300,43 @@ const formatTooltip = (value: number): string => {
margin-top: 20px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbScrollbar, FbSlider },
- setup: () => {
- const max = ref
(0);
- const value = ref(0);
- const innerRef = ref();
- const scrollbarRef = ref>();
-
- onMounted((): void => {
- max.value = innerRef.value!.clientHeight - 380;
- });
-
- const inputSlider = (value: number): void => {
- scrollbarRef.value!.setScrollTop(value);
- };
- const scroll = ({ scrollTop }): void => {
- value.value = scrollTop;
- };
- const formatTooltip = (value: number): string => {
- return `${value} px`;
- };
-
- return {
- max,
- value,
- innerRef,
- scrollbarRef,
- inputSlider,
- scroll,
- formatTooltip,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbScrollbar, FbSlider },
+ setup: () => {
+ const max = ref(0);
+ const value = ref(0);
+ const innerRef = ref();
+ const scrollbarRef = ref>();
+
+ onMounted((): void => {
+ max.value = innerRef.value!.clientHeight - 380;
+ });
+
+ const inputSlider = (value: number): void => {
+ scrollbarRef.value!.setScrollTop(value);
+ };
+ const scroll = ({ scrollTop }): void => {
+ value.value = scrollTop;
+ };
+ const formatTooltip = (value: number): string => {
+ return `${value} px`;
+ };
+
+ return {
+ max,
+ value,
+ innerRef,
+ scrollbarRef,
+ inputSlider,
+ scroll,
+ formatTooltip,
+ };
+ },
+ template: `
@@ -353,5 +353,5 @@ const formatTooltip = (value: number): string => {
@input="inputSlider"
/>
`,
- }),
+ }),
};
diff --git a/docs/src/components/select/fb-select.mdx b/docs/src/components/select/fb-select.mdx
index d4ab3d60..aff6cb89 100644
--- a/docs/src/components/select/fb-select.mdx
+++ b/docs/src/components/select/fb-select.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SelectStories from './fb-select.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as SelectStories from "./fb-select.stories";
= {
- component: FbSelect,
- title: 'Components/Form/Select',
- excludeStories: /.*Data$/,
+ component: FbSelect,
+ title: "Components/Form/Select",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -29,10 +29,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref('');
-
- const options = [
- {
- value: 'Option1',
- label: 'Option1',
- },
- {
- value: 'Option2',
- label: 'Option2',
- },
- {
- value: 'Option3',
- label: 'Option3',
- },
- {
- value: 'Option4',
- label: 'Option4',
- },
- {
- value: 'Option5',
- label: 'Option5',
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const options = [
+ {
+ value: "Option1",
+ label: "Option1",
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ },
+ {
+ value: "Option3",
+ label: "Option3",
+ },
+ {
+ value: "Option4",
+ label: "Option4",
+ },
+ {
+ value: "Option5",
+ label: "Option5",
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const DisabledOption: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref('');
-
- const options = [
- {
- value: 'Option1',
- label: 'Option1',
- disabled: false,
- },
- {
- value: 'Option2',
- label: 'Option2',
- disabled: true,
- },
- {
- value: 'Option3',
- label: 'Option3',
- disabled: false,
- },
- {
- value: 'Option4',
- label: 'Option4',
- disabled: false,
- },
- {
- value: 'Option5',
- label: 'Option5',
- disabled: false,
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const options = [
+ {
+ value: "Option1",
+ label: "Option1",
+ disabled: false,
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ disabled: true,
+ },
+ {
+ value: "Option3",
+ label: "Option3",
+ disabled: false,
+ },
+ {
+ value: "Option4",
+ label: "Option4",
+ disabled: false,
+ },
+ {
+ value: "Option5",
+ label: "Option5",
+ disabled: false,
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const DisabledSelect: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref('');
-
- const options = [
- {
- value: 'Option1',
- label: 'Option1',
- },
- {
- value: 'Option2',
- label: 'Option2',
- },
- {
- value: 'Option3',
- label: 'Option3',
- },
- {
- value: 'Option4',
- label: 'Option4',
- },
- {
- value: 'Option5',
- label: 'Option5',
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const options = [
+ {
+ value: "Option1",
+ label: "Option1",
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ },
+ {
+ value: "Option3",
+ label: "Option3",
+ },
+ {
+ value: "Option4",
+ label: "Option4",
+ },
+ {
+ value: "Option5",
+ label: "Option5",
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Clearable: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref('');
-
- const options = [
- {
- value: 'Option1',
- label: 'Option1',
- },
- {
- value: 'Option2',
- label: 'Option2',
- },
- {
- value: 'Option3',
- label: 'Option3',
- },
- {
- value: 'Option4',
- label: 'Option4',
- },
- {
- value: 'Option5',
- label: 'Option5',
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const options = [
+ {
+ value: "Option1",
+ label: "Option1",
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ },
+ {
+ value: "Option3",
+ label: "Option3",
+ },
+ {
+ value: "Option4",
+ label: "Option4",
+ },
+ {
+ value: "Option5",
+ label: "Option5",
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const MultipleSelect: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -628,50 +628,50 @@ const options = [
},
];
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption, FbRow, FbCol },
- setup: () => {
- const value1 = ref([]);
- const value2 = ref([]);
- const value3 = ref([]);
- const value4 = ref([]);
-
- const options = [
- {
- value: 'Option1',
- label: 'Option1',
- },
- {
- value: 'Option2',
- label: 'Option2',
- },
- {
- value: 'Option3',
- label: 'Option3',
- },
- {
- value: 'Option4',
- label: 'Option4',
- },
- {
- value: 'Option5',
- label: 'Option5',
- },
- ];
-
- return {
- value1,
- value2,
- value3,
- value4,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption, FbRow, FbCol },
+ setup: () => {
+ const value1 = ref([]);
+ const value2 = ref([]);
+ const value3 = ref([]);
+ const value4 = ref([]);
+
+ const options = [
+ {
+ value: "Option1",
+ label: "Option1",
+ },
+ {
+ value: "Option2",
+ label: "Option2",
+ },
+ {
+ value: "Option3",
+ label: "Option3",
+ },
+ {
+ value: "Option4",
+ label: "Option4",
+ },
+ {
+ value: "Option5",
+ label: "Option5",
+ },
+ ];
+
+ return {
+ value1,
+ value2,
+ value3,
+ value4,
+ options,
+ };
+ },
+ template: `
@@ -762,14 +762,14 @@ const options = [
`,
- }),
+ }),
};
export const CustomTemplate: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref('');
-
- const cities = [
- {
- value: 'Vienna',
- label: 'Vienna',
- country: 'Austria',
- },
- {
- value: 'Sofia',
- label: 'Sofia',
- country: 'Bulgaria',
- },
- {
- value: 'Helsinki',
- label: 'Helsinki',
- country: 'Finland',
- },
- {
- value: 'Rome',
- label: 'Rome',
- country: 'Italy',
- },
- {
- value: 'Monaco',
- label: 'Monaco',
- country: 'Monaco',
- },
- {
- value: 'Lisbon',
- label: 'Lisbon',
- country: 'Portugal',
- },
- ];
-
- return {
- value,
- cities,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const cities = [
+ {
+ value: "Vienna",
+ label: "Vienna",
+ country: "Austria",
+ },
+ {
+ value: "Sofia",
+ label: "Sofia",
+ country: "Bulgaria",
+ },
+ {
+ value: "Helsinki",
+ label: "Helsinki",
+ country: "Finland",
+ },
+ {
+ value: "Rome",
+ label: "Rome",
+ country: "Italy",
+ },
+ {
+ value: "Monaco",
+ label: "Monaco",
+ country: "Monaco",
+ },
+ {
+ value: "Lisbon",
+ label: "Lisbon",
+ country: "Portugal",
+ },
+ ];
+
+ return {
+ value,
+ cities,
+ };
+ },
+ template: `
@@ -905,14 +905,14 @@ const cities = [
`,
- }),
+ }),
};
export const DropdownHeader: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
}
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption, FbCheckbox },
- setup: () => {
- const checkAll = ref(false);
- const indeterminate = ref(false);
- const value = ref([]);
-
- const cities = ref([
- {
- value: 'Vienna',
- label: 'Vienna',
- },
- {
- value: 'Sofia',
- label: 'Sofia',
- },
- {
- value: 'Helsinki',
- label: 'Helsinki',
- },
- {
- value: 'Rome',
- label: 'Rome',
- },
- {
- value: 'Monaco',
- label: 'Monaco',
- },
- {
- value: 'Lisbon',
- label: 'Lisbon',
- },
- ]);
-
- watch(value, (val) => {
- if (val.length === 0) {
- checkAll.value = false;
- indeterminate.value = false;
- } else if (val.length === cities.value.length) {
- checkAll.value = true;
- indeterminate.value = false;
- } else {
- indeterminate.value = true;
- }
- });
-
- const handleCheckAll = (val: CheckboxValueType) => {
- indeterminate.value = false;
- if (val) {
- value.value = cities.value.map((_) => _.value);
- } else {
- value.value = [];
- }
- };
-
- return {
- checkAll,
- indeterminate,
- value,
- cities,
- handleCheckAll,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption, FbCheckbox },
+ setup: () => {
+ const checkAll = ref(false);
+ const indeterminate = ref(false);
+ const value = ref([]);
+
+ const cities = ref([
+ {
+ value: "Vienna",
+ label: "Vienna",
+ },
+ {
+ value: "Sofia",
+ label: "Sofia",
+ },
+ {
+ value: "Helsinki",
+ label: "Helsinki",
+ },
+ {
+ value: "Rome",
+ label: "Rome",
+ },
+ {
+ value: "Monaco",
+ label: "Monaco",
+ },
+ {
+ value: "Lisbon",
+ label: "Lisbon",
+ },
+ ]);
+
+ watch(value, (val) => {
+ if (val.length === 0) {
+ checkAll.value = false;
+ indeterminate.value = false;
+ } else if (val.length === cities.value.length) {
+ checkAll.value = true;
+ indeterminate.value = false;
+ } else {
+ indeterminate.value = true;
+ }
+ });
+
+ const handleCheckAll = (val: CheckboxValueType) => {
+ indeterminate.value = false;
+ if (val) {
+ value.value = cities.value.map((_) => _.value);
+ } else {
+ value.value = [];
+ }
+ };
+
+ return {
+ checkAll,
+ indeterminate,
+ value,
+ cities,
+ handleCheckAll,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const DropdownFooter: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
margin-bottom: 8px;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption, FbButton, FbInput },
- setup: () => {
- const isAdding = ref(false);
- const value = ref([]);
- const optionName = ref('');
-
- const cities = ref([
- {
- value: 'Vienna',
- label: 'Vienna',
- },
- {
- value: 'Sofia',
- label: 'Sofia',
- },
- {
- value: 'Helsinki',
- label: 'Helsinki',
- },
- {
- value: 'Rome',
- label: 'Rome',
- },
- {
- value: 'Monaco',
- label: 'Monaco',
- },
- {
- value: 'Lisbon',
- label: 'Lisbon',
- },
- ]);
-
- const onAddOption = () => {
- isAdding.value = true;
- };
-
- const onConfirm = () => {
- if (optionName.value) {
- cities.value.push({
- label: optionName.value,
- value: optionName.value,
- });
- clear();
- }
- };
-
- const clear = () => {
- optionName.value = '';
- isAdding.value = false;
- };
-
- return {
- isAdding,
- value,
- optionName,
- cities,
- onAddOption,
- onConfirm,
- clear,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption, FbButton, FbInput },
+ setup: () => {
+ const isAdding = ref(false);
+ const value = ref([]);
+ const optionName = ref("");
+
+ const cities = ref([
+ {
+ value: "Vienna",
+ label: "Vienna",
+ },
+ {
+ value: "Sofia",
+ label: "Sofia",
+ },
+ {
+ value: "Helsinki",
+ label: "Helsinki",
+ },
+ {
+ value: "Rome",
+ label: "Rome",
+ },
+ {
+ value: "Monaco",
+ label: "Monaco",
+ },
+ {
+ value: "Lisbon",
+ label: "Lisbon",
+ },
+ ]);
+
+ const onAddOption = () => {
+ isAdding.value = true;
+ };
+
+ const onConfirm = () => {
+ if (optionName.value) {
+ cities.value.push({
+ label: optionName.value,
+ value: optionName.value,
+ });
+ clear();
+ }
+ };
+
+ const clear = () => {
+ optionName.value = "";
+ isAdding.value = false;
+ };
+
+ return {
+ isAdding,
+ value,
+ optionName,
+ cities,
+ onAddOption,
+ onConfirm,
+ clear,
+ };
+ },
+ template: `
@@ -1300,14 +1300,14 @@ const clear = () => {
`,
- }),
+ }),
};
export const Grouping: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOptionGroup, FbOption },
- setup: () => {
- const value = ref('');
-
- const options = [
- {
- label: 'Popular cities',
- options: [
- {
- value: 'Rome',
- label: 'Rome',
- },
- {
- value: 'Vienna',
- label: 'Vienna',
- },
- ],
- },
- {
- label: 'City name',
- options: [
- {
- value: 'Sofia',
- label: 'Sofia',
- },
- {
- value: 'Helsinki',
- label: 'Helsinki',
- },
- {
- value: 'Monaco',
- label: 'Monaco',
- },
- {
- value: 'Lisbon',
- label: 'Lisbon',
- },
- ],
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOptionGroup, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const options = [
+ {
+ label: "Popular cities",
+ options: [
+ {
+ value: "Rome",
+ label: "Rome",
+ },
+ {
+ value: "Vienna",
+ label: "Vienna",
+ },
+ ],
+ },
+ {
+ label: "City name",
+ options: [
+ {
+ value: "Sofia",
+ label: "Sofia",
+ },
+ {
+ value: "Helsinki",
+ label: "Helsinki",
+ },
+ {
+ value: "Monaco",
+ label: "Monaco",
+ },
+ {
+ value: "Lisbon",
+ label: "Lisbon",
+ },
+ ],
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
@@ -1437,14 +1437,14 @@ const options = [
`,
- }),
+ }),
};
export const OptionFilter: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref('');
-
- const options = [
- {
- value: 'Vienna',
- label: 'Vienna',
- },
- {
- value: 'Sofia',
- label: 'Sofia',
- },
- {
- value: 'Helsinki',
- label: 'Helsinki',
- },
- {
- value: 'Rome',
- label: 'Rome',
- },
- {
- value: 'Monaco',
- label: 'Monaco',
- },
- {
- value: 'Lisbon',
- label: 'Lisbon',
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref("");
+
+ const options = [
+ {
+ value: "Vienna",
+ label: "Vienna",
+ },
+ {
+ value: "Sofia",
+ label: "Sofia",
+ },
+ {
+ value: "Helsinki",
+ label: "Helsinki",
+ },
+ {
+ value: "Rome",
+ label: "Rome",
+ },
+ {
+ value: "Monaco",
+ label: "Monaco",
+ },
+ {
+ value: "Lisbon",
+ label: "Lisbon",
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const RemoteSearch: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -1700,106 +1700,106 @@ const states = [
'Wyoming',
];
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption, FbRow, FbCol },
- setup: () => {
- interface ListItem {
- value: string;
- label: string;
- }
-
- const list = ref([]);
- const options = ref([]);
- const value = ref([]);
- const loading = ref(false);
-
- onMounted(() => {
- list.value = states.map((item) => {
- return { value: `value:${item}`, label: item };
- });
- });
-
- const remoteMethod = (query: string) => {
- if (query) {
- loading.value = true;
- setTimeout(() => {
- loading.value = false;
- options.value = list.value.filter((item) => {
- return item.label.toLowerCase().includes(query.toLowerCase());
- });
- }, 200);
- } else {
- options.value = [];
- }
- };
-
- const states = [
- 'Alabama',
- 'Alaska',
- 'Arizona',
- 'Arkansas',
- 'California',
- 'Colorado',
- 'Connecticut',
- 'Delaware',
- 'Florida',
- 'Georgia',
- 'Hawaii',
- 'Idaho',
- 'Illinois',
- 'Indiana',
- 'Iowa',
- 'Kansas',
- 'Kentucky',
- 'Louisiana',
- 'Maine',
- 'Maryland',
- 'Massachusetts',
- 'Michigan',
- 'Minnesota',
- 'Mississippi',
- 'Missouri',
- 'Montana',
- 'Nebraska',
- 'Nevada',
- 'New Hampshire',
- 'New Jersey',
- 'New Mexico',
- 'New York',
- 'North Carolina',
- 'North Dakota',
- 'Ohio',
- 'Oklahoma',
- 'Oregon',
- 'Pennsylvania',
- 'Rhode Island',
- 'South Carolina',
- 'South Dakota',
- 'Tennessee',
- 'Texas',
- 'Utah',
- 'Vermont',
- 'Virginia',
- 'Washington',
- 'West Virginia',
- 'Wisconsin',
- 'Wyoming',
- ];
-
- return {
- list,
- options,
- value,
- loading,
- states,
- remoteMethod,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption, FbRow, FbCol },
+ setup: () => {
+ interface ListItem {
+ value: string;
+ label: string;
+ }
+
+ const list = ref([]);
+ const options = ref([]);
+ const value = ref([]);
+ const loading = ref(false);
+
+ onMounted(() => {
+ list.value = states.map((item) => {
+ return { value: `value:${item}`, label: item };
+ });
+ });
+
+ const remoteMethod = (query: string) => {
+ if (query) {
+ loading.value = true;
+ setTimeout(() => {
+ loading.value = false;
+ options.value = list.value.filter((item) => {
+ return item.label.toLowerCase().includes(query.toLowerCase());
+ });
+ }, 200);
+ } else {
+ options.value = [];
+ }
+ };
+
+ const states = [
+ "Alabama",
+ "Alaska",
+ "Arizona",
+ "Arkansas",
+ "California",
+ "Colorado",
+ "Connecticut",
+ "Delaware",
+ "Florida",
+ "Georgia",
+ "Hawaii",
+ "Idaho",
+ "Illinois",
+ "Indiana",
+ "Iowa",
+ "Kansas",
+ "Kentucky",
+ "Louisiana",
+ "Maine",
+ "Maryland",
+ "Massachusetts",
+ "Michigan",
+ "Minnesota",
+ "Mississippi",
+ "Missouri",
+ "Montana",
+ "Nebraska",
+ "Nevada",
+ "New Hampshire",
+ "New Jersey",
+ "New Mexico",
+ "New York",
+ "North Carolina",
+ "North Dakota",
+ "Ohio",
+ "Oklahoma",
+ "Oregon",
+ "Pennsylvania",
+ "Rhode Island",
+ "South Carolina",
+ "South Dakota",
+ "Tennessee",
+ "Texas",
+ "Utah",
+ "Vermont",
+ "Virginia",
+ "Washington",
+ "West Virginia",
+ "Wisconsin",
+ "Wyoming",
+ ];
+
+ return {
+ list,
+ options,
+ value,
+ loading,
+ states,
+ remoteMethod,
+ };
+ },
+ template: `
@@ -1854,14 +1854,14 @@ const states = [
`,
- }),
+ }),
};
export const CreateNewItems: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- const value = ref([]);
-
- const options = [
- {
- value: 'HTML',
- label: 'HTML',
- },
- {
- value: 'CSS',
- label: 'CSS',
- },
- {
- value: 'JavaScript',
- label: 'JavaScript',
- },
- ];
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ const value = ref([]);
+
+ const options = [
+ {
+ value: "HTML",
+ label: "HTML",
+ },
+ {
+ value: "CSS",
+ label: "CSS",
+ },
+ {
+ value: "JavaScript",
+ label: "JavaScript",
+ },
+ ];
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const ValueKeyAttribute: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption },
- setup: () => {
- type Option = {
- id: number;
- label: string;
- desc: string;
- };
-
- const value = ref();
-
- const options = ref([
- { id: 1, label: 'Option A', desc: 'Option A - 230506' },
- { id: 2, label: 'Option B', desc: 'Option B - 230506' },
- { id: 3, label: 'Option C', desc: 'Option C - 230506' },
- { id: 4, label: 'Option A', desc: 'Option A - 230507' },
- ]);
-
- return {
- value,
- options,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption },
+ setup: () => {
+ type Option = {
+ id: number;
+ label: string;
+ desc: string;
+ };
+
+ const value = ref ();
+
+ const options = ref([
+ { id: 1, label: "Option A", desc: "Option A - 230506" },
+ { id: 2, label: "Option B", desc: "Option B - 230506" },
+ { id: 3, label: "Option C", desc: "Option C - 230506" },
+ { id: 4, label: "Option A", desc: "Option A - 230507" },
+ ]);
+
+ return {
+ value,
+ options,
+ };
+ },
+ template: `
{{ value ? value.desc : 'nothing selected' }}
`,
- }),
+ }),
};
export const CustomTag: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
{
aspect-ratio: 1;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption, FbTag },
- setup: () => {
- const value = ref([]);
-
- const colors = [
- {
- value: '#E63415',
- label: 'red',
- },
- {
- value: '#FF6600',
- label: 'orange',
- },
- {
- value: '#FFDE0A',
- label: 'yellow',
- },
- {
- value: '#1EC79D',
- label: 'green',
- },
- {
- value: '#14CCCC',
- label: 'cyan',
- },
- {
- value: '#4167F0',
- label: 'blue',
- },
- {
- value: '#6222C9',
- label: 'purple',
- },
- ];
-
- colors.forEach((color) => {
- value.value.push(color.value);
- });
-
- return {
- value,
- colors,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption, FbTag },
+ setup: () => {
+ const value = ref([]);
+
+ const colors = [
+ {
+ value: "#E63415",
+ label: "red",
+ },
+ {
+ value: "#FF6600",
+ label: "orange",
+ },
+ {
+ value: "#FFDE0A",
+ label: "yellow",
+ },
+ {
+ value: "#1EC79D",
+ label: "green",
+ },
+ {
+ value: "#14CCCC",
+ label: "cyan",
+ },
+ {
+ value: "#4167F0",
+ label: "blue",
+ },
+ {
+ value: "#6222C9",
+ label: "purple",
+ },
+ ];
+
+ colors.forEach((color) => {
+ value.value.push(color.value);
+ });
+
+ return {
+ value,
+ colors,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const CustomLoading: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -2435,107 +2435,107 @@ const states = [
}
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSelect, FbOption, FbIcon, FbRow, FbCol },
- setup: () => {
- interface ListItem {
- value: string;
- label: string;
- }
-
- const list = ref([]);
- const options = ref([]);
- const value = ref([]);
- const loading = ref(false);
-
- onMounted(() => {
- list.value = states.map((item) => {
- return { value: `value:${item}`, label: item };
- });
- });
-
- const remoteMethod = (query: string): void => {
- if (query) {
- loading.value = true;
-
- setTimeout(() => {
- loading.value = false;
- options.value = list.value.filter((item) => {
- return item.label.toLowerCase().includes(query.toLowerCase());
- });
- }, 3000);
- } else {
- options.value = [];
- }
- };
-
- const states = [
- 'Alabama',
- 'Alaska',
- 'Arizona',
- 'Arkansas',
- 'California',
- 'Colorado',
- 'Connecticut',
- 'Delaware',
- 'Florida',
- 'Georgia',
- 'Hawaii',
- 'Idaho',
- 'Illinois',
- 'Indiana',
- 'Iowa',
- 'Kansas',
- 'Kentucky',
- 'Louisiana',
- 'Maine',
- 'Maryland',
- 'Massachusetts',
- 'Michigan',
- 'Minnesota',
- 'Mississippi',
- 'Missouri',
- 'Montana',
- 'Nebraska',
- 'Nevada',
- 'New Hampshire',
- 'New Jersey',
- 'New Mexico',
- 'New York',
- 'North Carolina',
- 'North Dakota',
- 'Ohio',
- 'Oklahoma',
- 'Oregon',
- 'Pennsylvania',
- 'Rhode Island',
- 'South Carolina',
- 'South Dakota',
- 'Tennessee',
- 'Texas',
- 'Utah',
- 'Vermont',
- 'Virginia',
- 'Washington',
- 'West Virginia',
- 'Wisconsin',
- 'Wyoming',
- ];
-
- return {
- list,
- options,
- value,
- loading,
- remoteMethod,
- states,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSelect, FbOption, FbIcon, FbRow, FbCol },
+ setup: () => {
+ interface ListItem {
+ value: string;
+ label: string;
+ }
+
+ const list = ref([]);
+ const options = ref([]);
+ const value = ref([]);
+ const loading = ref(false);
+
+ onMounted(() => {
+ list.value = states.map((item) => {
+ return { value: `value:${item}`, label: item };
+ });
+ });
+
+ const remoteMethod = (query: string): void => {
+ if (query) {
+ loading.value = true;
+
+ setTimeout(() => {
+ loading.value = false;
+ options.value = list.value.filter((item) => {
+ return item.label.toLowerCase().includes(query.toLowerCase());
+ });
+ }, 3000);
+ } else {
+ options.value = [];
+ }
+ };
+
+ const states = [
+ "Alabama",
+ "Alaska",
+ "Arizona",
+ "Arkansas",
+ "California",
+ "Colorado",
+ "Connecticut",
+ "Delaware",
+ "Florida",
+ "Georgia",
+ "Hawaii",
+ "Idaho",
+ "Illinois",
+ "Indiana",
+ "Iowa",
+ "Kansas",
+ "Kentucky",
+ "Louisiana",
+ "Maine",
+ "Maryland",
+ "Massachusetts",
+ "Michigan",
+ "Minnesota",
+ "Mississippi",
+ "Missouri",
+ "Montana",
+ "Nebraska",
+ "Nevada",
+ "New Hampshire",
+ "New Jersey",
+ "New Mexico",
+ "New York",
+ "North Carolina",
+ "North Dakota",
+ "Ohio",
+ "Oklahoma",
+ "Oregon",
+ "Pennsylvania",
+ "Rhode Island",
+ "South Carolina",
+ "South Dakota",
+ "Tennessee",
+ "Texas",
+ "Utah",
+ "Vermont",
+ "Virginia",
+ "Washington",
+ "West Virginia",
+ "Wisconsin",
+ "Wyoming",
+ ];
+
+ return {
+ list,
+ options,
+ value,
+ loading,
+ remoteMethod,
+ states,
+ };
+ },
+ template: `
@@ -2609,5 +2609,5 @@ const states = [
`,
- }),
+ }),
};
diff --git a/docs/src/components/slider/fb-slider.mdx b/docs/src/components/slider/fb-slider.mdx
index 3d87b5f4..4794ec5e 100644
--- a/docs/src/components/slider/fb-slider.mdx
+++ b/docs/src/components/slider/fb-slider.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SliderStories from './fb-slider.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as SliderStories from "./fb-slider.stories";
= {
- component: FbSlider,
- title: 'Components/Form/Slider',
- excludeStories: /.*Data$/,
+ component: FbSlider,
+ title: "Components/Form/Slider",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -19,10 +19,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -79,33 +79,33 @@ const formatTooltip = (val: number) => {
return val / 100;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider, FbRow, FbCol },
- setup: () => {
- const value1 = ref(0);
- const value2 = ref(0);
- const value3 = ref(0);
- const value4 = ref(0);
- const value5 = ref(0);
-
- const formatTooltip = (val: number) => {
- return val / 100;
- };
-
- return {
- value1,
- value2,
- value3,
- value4,
- value5,
- formatTooltip,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider, FbRow, FbCol },
+ setup: () => {
+ const value1 = ref(0);
+ const value2 = ref(0);
+ const value3 = ref(0);
+ const value4 = ref(0);
+ const value5 = ref(0);
+
+ const formatTooltip = (val: number) => {
+ return val / 100;
+ };
+
+ return {
+ value1,
+ value2,
+ value3,
+ value4,
+ value5,
+ formatTooltip,
+ };
+ },
+ template: `
@@ -148,14 +148,14 @@ const formatTooltip = (val: number) => {
`,
- }),
+ }),
};
export const Discrete: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -181,22 +181,22 @@ import { ref } from 'vue';
const value1 = ref(0);
const value2 = ref(0);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider, FbRow, FbCol },
- setup: () => {
- const value1 = ref(0);
- const value2 = ref(0);
-
- return {
- value1,
- value2,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider, FbRow, FbCol },
+ setup: () => {
+ const value1 = ref(0);
+ const value2 = ref(0);
+
+ return {
+ value1,
+ value2,
+ };
+ },
+ template: `
@@ -215,14 +215,14 @@ const value2 = ref(0);
`,
- }),
+ }),
};
export const WithInput: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -232,33 +232,33 @@ import { ref } from 'vue';
const value = ref(0);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider },
- setup: () => {
- const value = ref(0);
-
- return {
- value,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider },
+ setup: () => {
+ const value = ref(0);
+
+ return {
+ value,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- }),
+ }),
};
export const Variants: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -368,35 +368,35 @@ const formatTooltip = (val: number) => {
return val / 100;
}
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider, FbRow, FbCol },
- setup: () => {
- const value1 = ref(20);
- const value2 = ref(10);
- const value3 = ref(50);
- const value4 = ref(30);
- const value5 = ref(40);
- const value6 = ref(20);
-
- const formatTooltip = (val: number) => {
- return val / 100;
- };
-
- return {
- value1,
- value2,
- value3,
- value4,
- value5,
- value6,
- formatTooltip,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider, FbRow, FbCol },
+ setup: () => {
+ const value1 = ref(20);
+ const value2 = ref(10);
+ const value3 = ref(50);
+ const value4 = ref(30);
+ const value5 = ref(40);
+ const value6 = ref(20);
+
+ const formatTooltip = (val: number) => {
+ return val / 100;
+ };
+
+ return {
+ value1,
+ value2,
+ value3,
+ value4,
+ value5,
+ value6,
+ formatTooltip,
+ };
+ },
+ template: `
@@ -447,14 +447,14 @@ const formatTooltip = (val: number) => {
`,
- }),
+ }),
};
export const Placement: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- }),
+ }),
};
export const RangeSelection: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -521,33 +521,33 @@ import { ref } from 'vue';
const value = ref([4, 8]);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider },
- setup: () => {
- const value = ref([4, 8]);
-
- return {
- value,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider },
+ setup: () => {
+ const value = ref([4, 8]);
+
+ return {
+ value,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Vertical: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -557,33 +557,33 @@ import { ref } from 'vue';
const value = ref(0);
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider },
- setup: () => {
- const value = ref(0);
-
- return {
- value,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider },
+ setup: () => {
+ const value = ref(0);
+
+ return {
+ value,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
export const Marks: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
@@ -613,43 +613,43 @@ const marks = reactive({
},
});
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSlider },
- setup: () => {
- interface Mark {
- style: CSSProperties;
- label: string;
- }
-
- type Marks = Record;
-
- const value = ref([30, 60]);
- const marks = reactive({
- 0: '0°C',
- 8: '8°C',
- 37: '37°C',
- 50: {
- style: {
- color: '#1989FA',
- },
- label: '50%',
- },
- });
-
- return {
- value,
- marks,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSlider },
+ setup: () => {
+ interface Mark {
+ style: CSSProperties;
+ label: string;
+ }
+
+ type Marks = Record;
+
+ const value = ref([30, 60]);
+ const marks = reactive({
+ 0: "0°C",
+ 8: "8°C",
+ 37: "37°C",
+ 50: {
+ style: {
+ color: "#1989FA",
+ },
+ label: "50%",
+ },
+ });
+
+ return {
+ value,
+ marks,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/spinner/fb-spinner.mdx b/docs/src/components/spinner/fb-spinner.mdx
index 6fc7ac8a..00566e2c 100644
--- a/docs/src/components/spinner/fb-spinner.mdx
+++ b/docs/src/components/spinner/fb-spinner.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as SpinnerStories from './fb-spinner.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as SpinnerStories from "./fb-spinner.stories";
= {
- component: FbSpinner,
- title: 'Components/Feedback/Spinner',
- argTypes: {
- size: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
- description: 'spinner size',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: ComponentSizeTypes.DEFAULT },
- },
- },
- variant: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
- description: 'spinner variant',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: VariantTypes.DEFAULT },
- },
- },
- bg: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'determine whether the spinner background color is always on',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- },
- args: {
- size: ComponentSizeTypes.DEFAULT,
- variant: VariantTypes.DEFAULT,
- bg: true,
- },
- excludeStories: /.*Data$/,
+ component: FbSpinner,
+ title: "Components/Feedback/Spinner",
+ argTypes: {
+ size: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+ description: "spinner size",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+ },
+ },
+ variant: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [VariantTypes.DEFAULT, VariantTypes.PRIMARY, VariantTypes.INFO, VariantTypes.SUCCESS, VariantTypes.WARNING, VariantTypes.DANGER],
+ description: "spinner variant",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: VariantTypes.DEFAULT },
+ },
+ },
+ bg: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "determine whether the spinner background color is always on",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ },
+ args: {
+ size: ComponentSizeTypes.DEFAULT,
+ variant: VariantTypes.DEFAULT,
+ bg: true,
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -51,26 +51,26 @@ export default meta;
type Story = StoryObj;
export const Component: Story = {
- tags: ['hideInSidebar'],
+ tags: ["hideInSidebar"],
};
export const Sizes: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSpinner },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSpinner },
+ template: `
`,
- }),
+ }),
};
export const Variants: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSpinner },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSpinner },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/swipe/fb-swipe.mdx b/docs/src/components/swipe/fb-swipe.mdx
index 3de46a4c..05c9747b 100644
--- a/docs/src/components/swipe/fb-swipe.mdx
+++ b/docs/src/components/swipe/fb-swipe.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import * as SwipeStories from './fb-swipe.stories';
+import { Canvas, Meta } from "@storybook/blocks";
+import * as SwipeStories from "./fb-swipe.stories";
= {
- component: FbSwipe,
- title: 'Components/Data/Swipe actions',
- excludeStories: /.*Data$/,
+ component: FbSwipe,
+ title: "Components/Data/Swipe actions",
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -15,10 +15,10 @@ export default meta;
type Story = StoryObj;
export const BasicUsage: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `
`,
- },
- },
- },
- tags: ['hideInSidebar'],
- render: () => ({
- components: { FbSwipe, FbIcon, FasTrash, FasXmark, FasHeart, FasPenToSquare },
- setup: () => {
- const items = [
- {
- id: 'a',
- title: 'Some title',
- description: 'some description',
- disabled: false,
- },
- {
- id: 'b',
- title: 'Some title',
- description: 'some description',
- disabled: false,
- },
- {
- id: 'c',
- title: 'Some title',
- description: 'some description',
- disabled: false,
- },
- ];
-
- return {
- items,
- FasTrash,
- FasXmark,
- FasHeart,
- FasPenToSquare,
- };
- },
- template: `
+ },
+ },
+ },
+ tags: ["hideInSidebar"],
+ render: () => ({
+ components: { FbSwipe, FbIcon, FasTrash, FasXmark, FasHeart, FasPenToSquare },
+ setup: () => {
+ const items = [
+ {
+ id: "a",
+ title: "Some title",
+ description: "some description",
+ disabled: false,
+ },
+ {
+ id: "b",
+ title: "Some title",
+ description: "some description",
+ disabled: false,
+ },
+ {
+ id: "c",
+ title: "Some title",
+ description: "some description",
+ disabled: false,
+ },
+ ];
+
+ return {
+ items,
+ FasTrash,
+ FasXmark,
+ FasHeart,
+ FasPenToSquare,
+ };
+ },
+ template: `
`,
- }),
+ }),
};
diff --git a/docs/src/components/switch/fb-switch.mdx b/docs/src/components/switch/fb-switch.mdx
index 610105f4..ea43ea08 100644
--- a/docs/src/components/switch/fb-switch.mdx
+++ b/docs/src/components/switch/fb-switch.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as SwitchStories from './fb-switch.stories';
+import { Canvas, Meta, Controls } from "@storybook/blocks";
+import * as SwitchStories from "./fb-switch.stories";
= {
- component: FbSwitch,
- title: 'Components/Form/Switch',
- argTypes: {
- disabled: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether switch is disabled',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- loading: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether switch is in loading state',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- size: {
- type: { name: 'string', required: false },
- control: { type: 'select' },
- options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
- description: 'spinner size',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: ComponentSizeTypes.DEFAULT },
- },
- },
- width: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'width of switch',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- inlinePrompt: {
- type: { name: 'boolean', required: false },
- control: { type: 'boolean' },
- description: 'whether icon or text is displayed inside dot, only the first character will be rendered for text',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- },
- activeText: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'text displayed when in `on` state',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- inactiveText: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'text displayed when in `off` state',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- activeValue: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'switch value when in `on` state',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: true },
- },
- },
- inactiveValue: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'switch value when in `off` state',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: false },
- },
- },
- name: {
- type: { name: 'string', required: false },
- control: { type: 'text' },
- description: 'input name of switch',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: '-' },
- },
- },
- },
- args: {
- disabled: false,
- loading: false,
- size: ComponentSizeTypes.DEFAULT,
- inlinePrompt: false,
- activeValue: 'true',
- inactiveValue: 'false',
- },
- excludeStories: /.*Data$/,
+ component: FbSwitch,
+ title: "Components/Form/Switch",
+ argTypes: {
+ disabled: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether switch is disabled",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ loading: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether switch is in loading state",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ size: {
+ type: { name: "string", required: false },
+ control: { type: "select" },
+ options: [ComponentSizeTypes.LARGE, ComponentSizeTypes.DEFAULT, ComponentSizeTypes.SMALL],
+ description: "spinner size",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: ComponentSizeTypes.DEFAULT },
+ },
+ },
+ width: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "width of switch",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ inlinePrompt: {
+ type: { name: "boolean", required: false },
+ control: { type: "boolean" },
+ description: "whether icon or text is displayed inside dot, only the first character will be rendered for text",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: false },
+ },
+ },
+ activeText: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "text displayed when in `on` state",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ inactiveText: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "text displayed when in `off` state",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ activeValue: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "switch value when in `on` state",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: true },
+ },
+ },
+ inactiveValue: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "switch value when in `off` state",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: false },
+ },
+ },
+ name: {
+ type: { name: "string", required: false },
+ control: { type: "text" },
+ description: "input name of switch",
+ table: {
+ type: { summary: "string" },
+ defaultValue: { summary: "-" },
+ },
+ },
+ },
+ args: {
+ disabled: false,
+ loading: false,
+ size: ComponentSizeTypes.DEFAULT,
+ inlinePrompt: false,
+ activeValue: "true",
+ inactiveValue: "false",
+ },
+ excludeStories: /.*Data$/,
};
export default meta;
@@ -119,14 +119,14 @@ export default meta;
type Story = StoryObj;
export const Component: Story = {
- tags: ['hideInSidebar'],
+ tags: ["hideInSidebar"],
};
export const Basic: Story = {
- parameters: {
- docs: {
- source: {
- code: `
+ parameters: {
+ docs: {
+ source: {
+ code: `