@gospore/checkbox 1.0.42 → 1.0.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +71 -1
- package/dist/Checkbox.vue.d.ts +21 -0
- package/dist/index.d.ts +1 -0
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1 +1,71 @@
|
|
|
1
|
-
# gospore
|
|
1
|
+
# @gospore/checkbox
|
|
2
|
+
|
|
3
|
+
The Checkbox component wraps a native `<input type="checkbox">` inside a styled
|
|
4
|
+
label. It supports controlled boolean state as well as checkbox groups driven by
|
|
5
|
+
an array value.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
yarn add @gospore/checkbox
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Include the global theme styles from `@gospore/theme` so the CSS variables that
|
|
14
|
+
drive the states (hover, active, disabled, dark mode) are available.
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```vue
|
|
19
|
+
<script setup>
|
|
20
|
+
import { Theme } from "@gospore/theme";
|
|
21
|
+
import { ref } from "vue";
|
|
22
|
+
import { Checkbox } from "@gospore/checkbox";
|
|
23
|
+
|
|
24
|
+
const newsletter = ref(false);
|
|
25
|
+
const topics = ref(["design"]);
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<Theme>
|
|
29
|
+
<Checkbox v-model:checked="newsletter" label="Newsletter abonnieren" />
|
|
30
|
+
|
|
31
|
+
<fieldset role="group">
|
|
32
|
+
<legend>Interessensgebiete</legend>
|
|
33
|
+
<Checkbox
|
|
34
|
+
v-for="topic in ['design', 'engineering', 'marketing']"
|
|
35
|
+
:key="topic"
|
|
36
|
+
v-model:checked="topics"
|
|
37
|
+
:value="topic"
|
|
38
|
+
>
|
|
39
|
+
{{ topic }}
|
|
40
|
+
</Checkbox>
|
|
41
|
+
</fieldset>
|
|
42
|
+
</Theme>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Props
|
|
46
|
+
|
|
47
|
+
| Prop | Type | Default | Description |
|
|
48
|
+
| --- | --- | --- | --- |
|
|
49
|
+
| `checked` | `Boolean \| Array` | `false` | Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the component will push/pop `value`). Supports `v-model:checked`. |
|
|
50
|
+
| `value` | `String \| Object` | `""` | The value inserted or removed from the bound array when used in group mode. Ignored for boolean usage. |
|
|
51
|
+
| `label` | `String` | `""` | Fallback label text when no default slot is provided. |
|
|
52
|
+
| `disabled` | `Boolean` | `false` | Greys out the checkbox and prevents user interaction. |
|
|
53
|
+
|
|
54
|
+
Any additional attributes (e.g., `name`, `aria-describedby`, `required`) are
|
|
55
|
+
forwarded to the hidden input element.
|
|
56
|
+
|
|
57
|
+
## Slots & events
|
|
58
|
+
|
|
59
|
+
- Default slot: overrides the rendered label area (useful for inline links).
|
|
60
|
+
- Events: The component emits `update:checked` for `v-model`. Native `click` and
|
|
61
|
+
`keyup` events are forwarded so forms can listen for key interactions. Pressing
|
|
62
|
+
`Enter` while the checkbox is focused toggles it automatically.
|
|
63
|
+
|
|
64
|
+
## Accessibility
|
|
65
|
+
|
|
66
|
+
- The `<label>` wraps the input, so clicking text or pressing `Space/Enter`
|
|
67
|
+
toggles the checkbox just like a native control.
|
|
68
|
+
- Focus styles use the shared token `--color-border-focused-*` to maintain WCAG
|
|
69
|
+
contrast in light and dark mode.
|
|
70
|
+
- The checkmark icon is marked `aria-hidden="true"`; screen readers rely on the
|
|
71
|
+
native input state and label text, keeping announcements accurate.
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
|
2
|
+
export default _default;
|
|
3
|
+
type __VLS_WithSlots<T, S> = T & (new () => {
|
|
4
|
+
$slots: S;
|
|
5
|
+
});
|
|
6
|
+
declare const __VLS_component: import("vue").DefineComponent<{}, {
|
|
7
|
+
$emit: (event: "update:checked", ...args: any[]) => void;
|
|
8
|
+
value: string | Record<string, any>;
|
|
9
|
+
label: string;
|
|
10
|
+
disabled: boolean;
|
|
11
|
+
checked: boolean | unknown[];
|
|
12
|
+
$props: {
|
|
13
|
+
readonly value?: string | Record<string, any>;
|
|
14
|
+
readonly label?: string;
|
|
15
|
+
readonly disabled?: boolean;
|
|
16
|
+
readonly checked?: boolean | unknown[];
|
|
17
|
+
};
|
|
18
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
19
|
+
type __VLS_Slots = {
|
|
20
|
+
default?: (props: {}) => any;
|
|
21
|
+
};
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Checkbox } from "./Checkbox.vue";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/checkbox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.44",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Gospore",
|
|
6
6
|
"type": "module",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
14
|
"import": "./dist/checkbox.es.js",
|
|
15
|
-
"require": "./dist/checkbox.cjs.js"
|
|
15
|
+
"require": "./dist/checkbox.cjs.js",
|
|
16
|
+
"types": "./dist/index.d.ts"
|
|
16
17
|
},
|
|
17
18
|
"./umd": {
|
|
18
19
|
"import": "./dist/checkbox.umd.js",
|
|
@@ -36,5 +37,6 @@
|
|
|
36
37
|
"unplugin-vue-macros": "^2.14.5",
|
|
37
38
|
"vite": "^7.1.12"
|
|
38
39
|
},
|
|
39
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "f61d801f78eb9326157eb26817d0c7d36ab721cb",
|
|
41
|
+
"types": "./dist/index.d.ts"
|
|
40
42
|
}
|