@phila/phila-ui-checkbox 1.0.0-beta.12 → 1.0.1-beta.0

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.
Files changed (2) hide show
  1. package/README.md +80 -26
  2. package/package.json +8 -6
package/README.md CHANGED
@@ -16,23 +16,34 @@ Multi-select checkbox components for Phila UI. Use `Checkbox` for a standalone c
16
16
  ## Installation
17
17
 
18
18
  ```bash
19
- pnpm add @phila/phila-ui-checkbox
19
+ pnpm add @phila/phila-ui-checkbox @phila/phila-ui-core
20
+ # or
21
+ npm install @phila/phila-ui-checkbox @phila/phila-ui-core
22
+ ```
23
+
24
+ Import core styles in your main entry file (e.g., `main.js|ts`):
25
+
26
+ ```typescript
27
+ import "@phila/phila-ui-core/styles/template-light.css";
20
28
  ```
21
29
 
22
30
  ## Usage
23
31
 
24
32
  ### CheckboxGroup (recommended)
25
33
 
34
+ `CheckboxGroup`'s `modelValue` is a map of choice value → checked, not an array — every choice
35
+ gets a key, so the shape is stable regardless of which options have been touched:
36
+
26
37
  ```vue
27
38
  <script setup lang="ts">
28
39
  import { CheckboxGroup } from "@phila/phila-ui-checkbox";
29
40
  import { ref } from "vue";
30
41
 
31
- const selected = ref<string[]>([]);
42
+ const modelValue = ref<Record<string, boolean>>({});
32
43
  const choices = [
33
44
  { text: "Option A", value: "a" },
34
45
  { text: "Option B", value: "b" },
35
- { text: "Option C", value: "c" },
46
+ { text: "Option C", value: "c", tooltip: "Extra context about Option C shown on hover." },
36
47
  ];
37
48
  </script>
38
49
 
@@ -41,7 +52,7 @@ const choices = [
41
52
  groupLabel="Choose all that apply"
42
53
  description="Select one or more options."
43
54
  :choices="choices"
44
- v-model="selected"
55
+ v-model="modelValue"
45
56
  />
46
57
  </template>
47
58
  ```
@@ -79,30 +90,39 @@ const selected = ref<string[]>([]);
79
90
  </template>
80
91
  ```
81
92
 
93
+ ### Indeterminate and tooltip
94
+
95
+ ```vue
96
+ <Checkbox text="Select all" :indeterminate="true" v-model="someSelected" />
97
+ <Checkbox text="Option with help" tooltip="Extra context shown on hover." v-model="agreed" />
98
+ ```
99
+
82
100
  ## Checkbox Props
83
101
 
84
- | Prop | Type | Default | Description |
85
- | ------------ | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
86
- | `text` | `string` | — | Label text displayed next to the checkbox |
87
- | `modelValue` | `boolean \| Array<string \| number \| boolean>` | — | Bound value. Pass a boolean for a single checkbox; pass an array when multiple checkboxes share state |
88
- | `value` | `string \| number \| boolean` | — | The value added to / removed from the array when using array mode |
89
- | `name` | `string` | — | HTML name attribute |
90
- | `disabled` | `boolean` | `false` | Disables the checkbox |
91
- | `error` | `boolean` | `false` | Applies error styling |
92
- | `className` | `string` | — | Additional CSS classes |
102
+ | Prop | Type | Default | Description |
103
+ | --------------- | ----------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
104
+ | `text` | `string` | — | Label text displayed next to the checkbox |
105
+ | `modelValue` | `boolean \| Array<string \| number \| boolean>` | — | Bound value. Pass a boolean for a single checkbox; pass an array when multiple checkboxes share state |
106
+ | `value` | `string \| number \| boolean` | — | The value added to / removed from the array when using array mode |
107
+ | `name` | `string` | — | HTML name attribute |
108
+ | `disabled` | `boolean` | `false` | Disables the checkbox |
109
+ | `error` | `boolean` | `false` | Applies error styling |
110
+ | `indeterminate` | `boolean` | `false` | Renders the native indeterminate visual state (e.g. a "select all" checkbox with a partial selection) |
111
+ | `tooltip` | `string` | — | Shows an info icon next to the label that reveals this text on hover |
112
+ | `className` | `string` | — | Additional CSS classes |
93
113
 
94
114
  ## CheckboxGroup Props
95
115
 
96
- | Prop | Type | Default | Description |
97
- | -------------- | -------------------------------------------------------- | ------- | ---------------------------------------------------------- |
98
- | `groupLabel` | `string` | — | Label displayed above the group |
99
- | `description` | `string` | — | Optional helper text below the label |
100
- | `choices` | `{ text: string, value: string \| number \| boolean }[]` | — | Array of options to render |
101
- | `modelValue` | `Array<string \| number \| boolean>` | `[]` | Currently selected values (use with `v-model`) |
102
- | `error` | `boolean` | `false` | Applies error styling to the group |
103
- | `errorMessage` | `string` | — | Error message shown below the options when `error` is true |
104
- | `disabled` | `boolean` | `false` | Disables all checkboxes in the group |
105
- | `className` | `string` | — | Additional CSS classes |
116
+ | Prop | Type | Default | Description |
117
+ | -------------- | -------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------- |
118
+ | `groupLabel` | `string` | — | Label displayed above the group |
119
+ | `description` | `string` | — | Optional helper text below the label |
120
+ | `choices` | `{ text: string, value: string \| number \| boolean, tooltip?: string }[]` | — | Array of options to render |
121
+ | `modelValue` | `Record<string, boolean>` | — | Map of choice value (stringified) → checked (use with `v-model`) |
122
+ | `error` | `boolean` | `false` | Applies error styling to the group |
123
+ | `errorMessage` | `string` | — | Error message shown below the options when `error` is true |
124
+ | `disabled` | `boolean` | `false` | Disables all checkboxes in the group |
125
+ | `className` | `string` | — | Additional CSS classes |
106
126
 
107
127
  ## Events
108
128
 
@@ -117,9 +137,9 @@ const selected = ref<string[]>([]);
117
137
 
118
138
  ### CheckboxGroup
119
139
 
120
- | Event | Payload | Description |
121
- | ------------------- | ------------------------------------ | --------------------------------------- |
122
- | `update:modelValue` | `Array<string \| number \| boolean>` | Emitted when the selected values change |
140
+ | Event | Payload | Description |
141
+ | ------------------- | ------------------------- | ---------------------------------------------------------------- |
142
+ | `update:modelValue` | `Record<string, boolean>` | Emitted with the full updated map whenever any choice is toggled |
123
143
 
124
144
  ## Visual States
125
145
 
@@ -132,3 +152,37 @@ const selected = ref<string[]>([]);
132
152
  | Error | Error-colored border (2px) |
133
153
  | Disabled | Muted border and text, not interactive |
134
154
  | Disabled + Checked | Muted fill with white checkmark |
155
+
156
+ ## Development
157
+
158
+ ### Install Dependencies
159
+
160
+ ```bash
161
+ pnpm install
162
+ ```
163
+
164
+ ### Run Demo
165
+
166
+ ```bash
167
+ pnpm dev
168
+ ```
169
+
170
+ ### Run lint
171
+
172
+ ```bash
173
+ pnpm lint
174
+ ```
175
+
176
+ ### Create Production Build
177
+
178
+ ```bash
179
+ pnpm build
180
+ ```
181
+
182
+ ## Publishing to NPM
183
+
184
+ Follow the [release instructions](../../RELEASE.md) using changesets.
185
+
186
+ ## License
187
+
188
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-checkbox",
3
- "version": "1.0.0-beta.12",
3
+ "version": "1.0.1-beta.0",
4
4
  "type": "module",
5
5
  "description": "A checkbox input.",
6
6
  "main": "./dist/index.js",
@@ -28,8 +28,8 @@
28
28
  "vue": "^3.0.0"
29
29
  },
30
30
  "dependencies": {
31
- "@phila/phila-ui-core": "3.0.0-beta.9",
32
- "@phila/phila-ui-tooltip": "0.1.0-beta.12"
31
+ "@phila/phila-ui-core": "3.0.1-beta.0",
32
+ "@phila/phila-ui-tooltip": "0.1.1-beta.0"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@types/node": "^24.0.0",
@@ -38,16 +38,18 @@
38
38
  "typescript": "^5.8.3",
39
39
  "vite": "^7.0.6",
40
40
  "vite-plugin-dts": "^4.5.4",
41
- "vite-plugin-lib-inject-css": "^2.2.2"
41
+ "vite-plugin-lib-inject-css": "^2.2.2",
42
+ "@repo/eslint-config": "0.0.0",
43
+ "@repo/prettier-config": "0.0.0",
44
+ "@repo/typescript-config": "0.0.0"
42
45
  },
43
46
  "scripts": {
44
47
  "build": "vite build",
45
- "build-win": "vite build",
46
48
  "dev": "vite build --watch",
47
49
  "lint": "eslint src --ext .ts,.tsx,.vue",
48
50
  "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
49
51
  "type-check": "tsc --noEmit",
50
- "clean": "rm -rf dist",
52
+ "clean": "node ../../scripts/clean.js dist",
51
53
  "format": "prettier --write .",
52
54
  "format:check": "prettier --check ."
53
55
  }