diff --git a/src/primevue/checkbox/checkbox.stories.ts b/src/primevue/checkbox/checkbox.stories.ts new file mode 100644 index 0000000..f5cb723 --- /dev/null +++ b/src/primevue/checkbox/checkbox.stories.ts @@ -0,0 +1,77 @@ +import { html } from "@/lib/tags.ts"; +import { Meta, StoryObj } from "@storybook/vue3"; +import Checkbox from "primevue/checkbox"; +import { ref } from "vue"; + +const meta: Meta = { + component: Checkbox, + + tags: ["autodocs"], + + args: { + disabled: false, + invalid: false, + indeterminate: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + components: { Checkbox }, + setup() { + const checked = ref(true); + return { args, checked }; + }, + template: html``, + }), +}; + +export const WithLabel: Story = { + render: (args) => ({ + components: { Checkbox }, + setup() { + const checked = ref(true); + return { args, checked }; + }, + template: html` +
+ + +
+ `, + }), +}; + +export const WithErrorMessage: Story = { + args: { + invalid: true, + }, + + render: (args) => ({ + components: { Checkbox }, + setup() { + const checked = ref(false); + return { args, checked }; + }, + template: html` +
+ + +
+ Error description + `, + }), +}; diff --git a/src/primevue/checkbox/checkbox.ts b/src/primevue/checkbox/checkbox.ts new file mode 100644 index 0000000..a473777 --- /dev/null +++ b/src/primevue/checkbox/checkbox.ts @@ -0,0 +1,18 @@ +import { tw } from "@/lib/tags"; +import { CheckboxPassThroughOptions } from "primevue/checkbox"; + +const checkbox: CheckboxPassThroughOptions = { + root: { + class: tw`relative inline-block h-24 w-24 [&+label]:ris-label2-regular [&+label]:ml-8`, + }, + + input: { + class: tw`peer h-full w-full cursor-pointer appearance-none border-2 border-blue-800 bg-white outline-4 -outline-offset-4 outline-blue-800 hover:outline focus:outline active:outline-none disabled:cursor-not-allowed disabled:border-gray-600 disabled:outline-none aria-[invalid]:border-red-800 aria-[invalid]:outline-red-800 aria-[invalid]:active:outline-none aria-[invalid]:disabled:outline-none`, + }, + + box: { + class: tw`pointer-events-none absolute inset-0 flex items-center justify-center text-blue-800 peer-disabled:text-gray-600 peer-aria-[invalid]:text-red-800`, + }, +}; + +export default checkbox; diff --git a/src/primevue/index.ts b/src/primevue/index.ts index 5aad540..8da419e 100644 --- a/src/primevue/index.ts +++ b/src/primevue/index.ts @@ -1,6 +1,7 @@ import "./global.css"; import button from "./button/button"; +import checkbox from "./checkbox/checkbox"; import inputGroup from "./inputGroup/inputGroup"; import inputGroupAddon from "./inputGroup/inputGroupAddon"; import inputText from "./inputText/inputText"; @@ -8,6 +9,7 @@ import password from "./password/password"; export const RisUiTheme = { button, + checkbox, inputText, inputGroup, inputGroupAddon,