@phila/phila-ui-checkbox 0.0.9 → 0.0.10
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 +63 -18
- package/dist/Checkbox.vue.d.ts +3 -28
- package/dist/Checkbox.vue.d.ts.map +1 -0
- package/dist/index.css +0 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1 -0
- package/dist/index.mjs +22 -0
- package/package.json +40 -35
- package/dist/checkbox.js +0 -105
- package/dist/checkbox.umd.cjs +0 -1
- package/dist/types.d.ts +0 -35
package/README.md
CHANGED
|
@@ -1,30 +1,75 @@
|
|
|
1
|
+
# Checkbox Component
|
|
2
|
+
|
|
3
|
+
A simple, customizable Vue 3. Checkbox component built with TypeScript and Vite.
|
|
4
|
+
A checkbox input.
|
|
5
|
+
|
|
6
|
+
## Features
|
|
7
|
+
|
|
8
|
+
- 🎯 TypeScript support with full type definitions
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @phila/phila-ui-checkbox
|
|
14
|
+
# or
|
|
15
|
+
yarn add @phila/phila-ui-checkbox
|
|
16
|
+
# or
|
|
17
|
+
pnpm add @phila/phila-ui-checkbox
|
|
18
|
+
```
|
|
19
|
+
|
|
1
20
|
## Usage
|
|
2
21
|
|
|
3
|
-
|
|
22
|
+
```vue
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { Checkbox } from "@phila/phila-ui-checkbox";
|
|
25
|
+
</script>
|
|
26
|
+
<template>...Add basic component template here...</template>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Props
|
|
30
|
+
|
|
31
|
+
| Prop | Type | Default | Description |
|
|
32
|
+
| ---- | ---- | ------- | ----------- |
|
|
33
|
+
|
|
34
|
+
| ...Add props here...
|
|
4
35
|
|
|
5
|
-
|
|
6
|
-
import { Checkbox } from '@phila/phila-ui';
|
|
36
|
+
## Events
|
|
7
37
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
Checkbox,
|
|
11
|
-
}
|
|
38
|
+
| Event | Payload | Description |
|
|
39
|
+
| ----- | ------- | ----------- |
|
|
12
40
|
|
|
13
|
-
|
|
14
|
-
|
|
41
|
+
| ...Add events here...
|
|
42
|
+
|
|
43
|
+
## Examples
|
|
44
|
+
|
|
45
|
+
...Add examples here...
|
|
46
|
+
|
|
47
|
+
## Development
|
|
48
|
+
|
|
49
|
+
### Install Dependencies
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
pnpm install
|
|
15
53
|
```
|
|
16
54
|
|
|
17
|
-
|
|
55
|
+
### Run Demo
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
pnpm dev
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Build Library
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
pnpm build
|
|
65
|
+
```
|
|
18
66
|
|
|
19
|
-
|
|
20
|
-
import * as PhilaUI from "@phila/phila-ui";
|
|
67
|
+
### Type Check
|
|
21
68
|
|
|
22
|
-
|
|
23
|
-
|
|
69
|
+
```bash
|
|
70
|
+
pnpm type-check
|
|
24
71
|
```
|
|
25
72
|
|
|
26
|
-
|
|
73
|
+
## License
|
|
27
74
|
|
|
28
|
-
|
|
29
|
-
<checkbox></checkbox>
|
|
30
|
-
```
|
|
75
|
+
MIT
|
package/dist/Checkbox.vue.d.ts
CHANGED
|
@@ -1,29 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { CheckboxProps }
|
|
3
|
-
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputProps & CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
4
|
-
"update:modelValue": (...args: any[]) => void;
|
|
5
|
-
change: (...args: any[]) => void;
|
|
6
|
-
}, string, import("vue").PublicProps, Readonly<InputProps & CheckboxProps> & Readonly<{
|
|
7
|
-
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
8
|
-
onChange?: ((...args: any[]) => any) | undefined;
|
|
9
|
-
}>, {
|
|
10
|
-
id: string;
|
|
11
|
-
errors: import("@phila/phila-ui-core").InputErrors;
|
|
12
|
-
options: (import("@phila/phila-ui-core").HTMLInputValue[] | import("@phila/phila-ui-core").InputOptions | import("@phila/phila-ui-core").InputOptions[] | import("@phila/phila-ui-core").InputOptionsGroup | import("@phila/phila-ui-core").InputOptionObject[] | undefined) & (import("@phila/phila-ui-core").InputOptions | import("@phila/phila-ui-core").InputOptions[]);
|
|
13
|
-
textKey: string;
|
|
14
|
-
valueKey: string;
|
|
15
|
-
label: string;
|
|
16
|
-
desc: string;
|
|
17
|
-
modelValue: Array<string | number | boolean>;
|
|
18
|
-
numOfColumns: string | number;
|
|
19
|
-
small: boolean;
|
|
20
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
21
|
-
label?: ((props: {}) => any) | undefined;
|
|
22
|
-
desc?: ((props: {}) => any) | undefined;
|
|
23
|
-
}>;
|
|
1
|
+
import { CheckboxProps } from './index';
|
|
2
|
+
declare const _default: import('vue').DefineComponent<CheckboxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CheckboxProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
|
|
24
3
|
export default _default;
|
|
25
|
-
|
|
26
|
-
new (): {
|
|
27
|
-
$slots: S;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
4
|
+
//# sourceMappingURL=Checkbox.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AAGA;AAgCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;AA+D7C,wBASG"}
|
package/dist/index.css
ADDED
|
File without changes
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAIrD,MAAM,WAAW,aAAc,SAAQ,SAAS;CAE/C"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),r=require("@phila/phila-ui-core"),a=e.defineComponent({__name:"Checkbox",props:{className:{}},setup(c,{emit:s}){const o=c,t=e.computed(()=>r.cn("default-class",o.className));return(n,u)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(t.value)}," Hello world! I am Checkbox ",2))}}),l=(c,s)=>{const o=c.__vccOpts||c;for(const[t,n]of s)o[t]=n;return o},p=l(a,[["__scopeId","data-v-cb719132"]]);exports.Checkbox=p;
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { defineComponent as a, computed as n, createElementBlock as r, openBlock as l, normalizeClass as m } from "vue";
|
|
2
|
+
import { cn as p } from "@phila/phila-ui-core";
|
|
3
|
+
import './index.css';const _ = /* @__PURE__ */ a({
|
|
4
|
+
__name: "Checkbox",
|
|
5
|
+
props: {
|
|
6
|
+
className: {}
|
|
7
|
+
},
|
|
8
|
+
setup(e, { emit: t }) {
|
|
9
|
+
const o = e, c = n(() => p("default-class", o.className));
|
|
10
|
+
return (s, f) => (l(), r("span", {
|
|
11
|
+
class: m(c.value)
|
|
12
|
+
}, " Hello world! I am Checkbox ", 2));
|
|
13
|
+
}
|
|
14
|
+
}), u = (e, t) => {
|
|
15
|
+
const o = e.__vccOpts || e;
|
|
16
|
+
for (const [c, s] of t)
|
|
17
|
+
o[c] = s;
|
|
18
|
+
return o;
|
|
19
|
+
}, k = /* @__PURE__ */ u(_, [["__scopeId", "data-v-cb719132"]]);
|
|
20
|
+
export {
|
|
21
|
+
k as Checkbox
|
|
22
|
+
};
|
package/package.json
CHANGED
|
@@ -1,47 +1,52 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-checkbox",
|
|
3
|
-
"
|
|
4
|
-
"version": "0.0.9",
|
|
3
|
+
"version": "0.0.10",
|
|
5
4
|
"type": "module",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
"
|
|
10
|
-
"module": "./dist/checkbox.js",
|
|
11
|
-
"types": "./dist/types.d.ts",
|
|
5
|
+
"description": "A checkbox input.",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
12
9
|
"exports": {
|
|
13
10
|
".": {
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
"require": "./dist/checkbox.umd.cjs"
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.mjs",
|
|
13
|
+
"require": "./dist/index.js"
|
|
19
14
|
}
|
|
20
15
|
},
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
"
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"keywords": [
|
|
20
|
+
"ui",
|
|
21
|
+
"checkbox",
|
|
22
|
+
"vue",
|
|
23
|
+
"component"
|
|
24
|
+
],
|
|
25
|
+
"author": "",
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"vue": "^3.0.0"
|
|
26
29
|
},
|
|
27
30
|
"dependencies": {
|
|
28
|
-
"@phila/phila-ui-core": "
|
|
29
|
-
"bulma": "^0.9.4",
|
|
30
|
-
"vue": "^3.3.8"
|
|
31
|
+
"@phila/phila-ui-core": "2.1.0"
|
|
31
32
|
},
|
|
32
33
|
"devDependencies": {
|
|
33
|
-
"@types/node": "^
|
|
34
|
-
"@vitejs/plugin-vue": "^
|
|
35
|
-
"
|
|
36
|
-
"typescript": "^5.8.
|
|
37
|
-
"vite": "^
|
|
38
|
-
"vite-plugin-dts": "^
|
|
39
|
-
"vite-plugin-lib-inject-css": "^
|
|
40
|
-
"vue-tsc": "^2.2.8"
|
|
34
|
+
"@types/node": "^24.0.0",
|
|
35
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
36
|
+
"eslint": "^9.0.0",
|
|
37
|
+
"typescript": "^5.8.3",
|
|
38
|
+
"vite": "^7.0.6",
|
|
39
|
+
"vite-plugin-dts": "^4.5.4",
|
|
40
|
+
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
41
41
|
},
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
"scripts": {
|
|
43
|
+
"build": "vite build",
|
|
44
|
+
"dev": "vite build --watch",
|
|
45
|
+
"lint": "eslint src --ext .ts,.tsx,.vue",
|
|
46
|
+
"lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
|
|
47
|
+
"type-check": "tsc --noEmit",
|
|
48
|
+
"clean": "rm -rf dist",
|
|
49
|
+
"format": "prettier --write .",
|
|
50
|
+
"format:check": "prettier --check ."
|
|
51
|
+
}
|
|
52
|
+
}
|
package/dist/checkbox.js
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import { defineComponent as B, getCurrentInstance as I, ref as w, watch as D, createElementBlock as o, openBlock as l, normalizeClass as N, unref as a, createElementVNode as s, createCommentVNode as h, renderSlot as b, Fragment as c, createTextVNode as P, toDisplayString as n, normalizeStyle as S, renderList as _, withDirectives as z, mergeProps as E, vModelCheckbox as K } from "vue";
|
|
2
|
-
import T from "@phila/phila-ui-core";
|
|
3
|
-
const U = {
|
|
4
|
-
key: 0,
|
|
5
|
-
class: "input-error-msg"
|
|
6
|
-
}, q = {
|
|
7
|
-
key: 1,
|
|
8
|
-
class: "is-field-info"
|
|
9
|
-
}, A = {
|
|
10
|
-
key: 0,
|
|
11
|
-
class: "is-field-info"
|
|
12
|
-
}, F = ["id"], H = ["id", "name", "aria-checked", "value"], L = ["for"], { formHelpers: v } = T, { randomID: M } = v, j = {
|
|
13
|
-
inheritAttrs: !1
|
|
14
|
-
}, Q = /* @__PURE__ */ B({
|
|
15
|
-
...j,
|
|
16
|
-
__name: "Checkbox",
|
|
17
|
-
props: {
|
|
18
|
-
id: { default: M() },
|
|
19
|
-
errors: { default() {
|
|
20
|
-
return [];
|
|
21
|
-
} },
|
|
22
|
-
optgroup: { type: Boolean },
|
|
23
|
-
disableableOptions: { type: Boolean },
|
|
24
|
-
options: { default: () => ({
|
|
25
|
-
"option-1": "Option 1",
|
|
26
|
-
"option-2": "Option 2",
|
|
27
|
-
"option-3": "Option 3"
|
|
28
|
-
}) },
|
|
29
|
-
name: {},
|
|
30
|
-
textKey: { default: "" },
|
|
31
|
-
valueKey: { default: "" },
|
|
32
|
-
imaskProps: {},
|
|
33
|
-
label: { default: "" },
|
|
34
|
-
desc: { default: "" },
|
|
35
|
-
modelValue: { default: () => [] },
|
|
36
|
-
numOfColumns: { default: 1 },
|
|
37
|
-
small: { type: Boolean, default: !1 }
|
|
38
|
-
},
|
|
39
|
-
emits: ["update:modelValue", "change"],
|
|
40
|
-
setup(k, { emit: $ }) {
|
|
41
|
-
const i = k, p = $, V = I(), { error: m, classes: g, optionText: y, optionValue: f } = v.useInput.useInputComposable(V, i), r = w(i.modelValue);
|
|
42
|
-
D(
|
|
43
|
-
() => i.modelValue,
|
|
44
|
-
(e) => {
|
|
45
|
-
r.value = e;
|
|
46
|
-
}
|
|
47
|
-
);
|
|
48
|
-
const C = (e) => {
|
|
49
|
-
p("change", e), p("update:modelValue", r.value);
|
|
50
|
-
};
|
|
51
|
-
return (e, d) => (l(), o("div", {
|
|
52
|
-
class: N(["input-wrap input-checkbox", [a(g), i.small && "small-checkradio"]])
|
|
53
|
-
}, [
|
|
54
|
-
s("fieldset", null, [
|
|
55
|
-
s("legend", null, [
|
|
56
|
-
e.label ? (l(), o(c, { key: 0 }, [
|
|
57
|
-
P(n(e.label) + " " + n(e.$attrs.required !== void 0 ? "*" : ""), 1)
|
|
58
|
-
], 64)) : b(e.$slots, "label", { key: 1 })
|
|
59
|
-
]),
|
|
60
|
-
a(m) ? (l(), o("div", U, [
|
|
61
|
-
d[1] || (d[1] = s("span", { class: "icon" }, [
|
|
62
|
-
s("i", { class: "fas fa-exclamation-circle" })
|
|
63
|
-
], -1)),
|
|
64
|
-
s("span", null, n(a(m)), 1)
|
|
65
|
-
])) : h("", !0),
|
|
66
|
-
e.desc ? (l(), o("div", q, n(e.desc), 1)) : (l(), o(c, { key: 2 }, [
|
|
67
|
-
e.$slots.desc ? (l(), o("div", A, [
|
|
68
|
-
b(e.$slots, "desc")
|
|
69
|
-
])) : h("", !0)
|
|
70
|
-
], 64)),
|
|
71
|
-
s("div", {
|
|
72
|
-
id: `cb-group-${e.id}`,
|
|
73
|
-
style: S(`columns: ${e.numOfColumns} auto`)
|
|
74
|
-
}, [
|
|
75
|
-
(l(!0), o(c, null, _(e.options, (u, t) => (l(), o("div", {
|
|
76
|
-
key: `k-${t}`,
|
|
77
|
-
class: "control"
|
|
78
|
-
}, [
|
|
79
|
-
z(s("input", E({
|
|
80
|
-
id: `cb-${t}-${e.id}`,
|
|
81
|
-
"onUpdate:modelValue": d[0] || (d[0] = (O) => r.value = O),
|
|
82
|
-
name: `cb-${t}-${e.id}`,
|
|
83
|
-
type: "checkbox",
|
|
84
|
-
"aria-checked": e.modelValue.includes(a(f)(u, t)),
|
|
85
|
-
class: "is-checkradio",
|
|
86
|
-
role: "checkbox",
|
|
87
|
-
ref_for: !0
|
|
88
|
-
}, e.$attrs, {
|
|
89
|
-
value: a(f)(u, t),
|
|
90
|
-
onChange: C
|
|
91
|
-
}), null, 16, H), [
|
|
92
|
-
[K, r.value]
|
|
93
|
-
]),
|
|
94
|
-
s("label", {
|
|
95
|
-
for: `cb-${t}-${e.id}`
|
|
96
|
-
}, n(a(y)(u)), 9, L)
|
|
97
|
-
]))), 128))
|
|
98
|
-
], 12, F)
|
|
99
|
-
])
|
|
100
|
-
], 2));
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
export {
|
|
104
|
-
Q as default
|
|
105
|
-
};
|
package/dist/checkbox.umd.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(e,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue"),require("@phila/phila-ui-core")):typeof define=="function"&&define.amd?define(["vue","@phila/phila-ui-core"],l):(e=typeof globalThis<"u"?globalThis:e||self,e.Checkbox=l(e.Vue,e.PhilaUICore))})(this,function(e,l){"use strict";const m={key:0,class:"input-error-msg"},f={key:1,class:"is-field-info"},u={key:0,class:"is-field-info"},k=["id"],h=["id","name","aria-checked","value"],V=["for"],{formHelpers:i}=l,{randomID:B}=i,b={inheritAttrs:!1};return e.defineComponent({...b,__name:"Checkbox",props:{id:{default:B()},errors:{default(){return[]}},optgroup:{type:Boolean},disableableOptions:{type:Boolean},options:{default:()=>({"option-1":"Option 1","option-2":"Option 2","option-3":"Option 3"})},name:{},textKey:{default:""},valueKey:{default:""},imaskProps:{},label:{default:""},desc:{default:""},modelValue:{default:()=>[]},numOfColumns:{default:1},small:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(y,{emit:E}){const n=y,c=E,g=e.getCurrentInstance(),{error:d,classes:$,optionText:C,optionValue:p}=i.useInput.useInputComposable(g,n),a=e.ref(n.modelValue);e.watch(()=>n.modelValue,o=>{a.value=o});const N=o=>{c("change",o),c("update:modelValue",a.value)};return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap input-checkbox",[e.unref($),n.small&&"small-checkradio"]])},[e.createElementVNode("fieldset",null,[e.createElementVNode("legend",null,[o.label?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(o.label)+" "+e.toDisplayString(o.$attrs.required!==void 0?"*":""),1)],64)):e.renderSlot(o.$slots,"label",{key:1})]),e.unref(d)?(e.openBlock(),e.createElementBlock("div",m,[s[1]||(s[1]=e.createElementVNode("span",{class:"icon"},[e.createElementVNode("i",{class:"fas fa-exclamation-circle"})],-1)),e.createElementVNode("span",null,e.toDisplayString(e.unref(d)),1)])):e.createCommentVNode("",!0),o.desc?(e.openBlock(),e.createElementBlock("div",f,e.toDisplayString(o.desc),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[o.$slots.desc?(e.openBlock(),e.createElementBlock("div",u,[e.renderSlot(o.$slots,"desc")])):e.createCommentVNode("",!0)],64)),e.createElementVNode("div",{id:`cb-group-${o.id}`,style:e.normalizeStyle(`columns: ${o.numOfColumns} auto`)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.options,(r,t)=>(e.openBlock(),e.createElementBlock("div",{key:`k-${t}`,class:"control"},[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:`cb-${t}-${o.id}`,"onUpdate:modelValue":s[0]||(s[0]=S=>a.value=S),name:`cb-${t}-${o.id}`,type:"checkbox","aria-checked":o.modelValue.includes(e.unref(p)(r,t)),class:"is-checkradio",role:"checkbox",ref_for:!0},o.$attrs,{value:e.unref(p)(r,t),onChange:N}),null,16,h),[[e.vModelCheckbox,a.value]]),e.createElementVNode("label",{for:`cb-${t}-${o.id}`},e.toDisplayString(e.unref(C)(r)),9,V)]))),128))],12,k)])],2))}})});
|
package/dist/types.d.ts
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import Checkbox from "./Checkbox.vue";
|
|
2
|
-
import { InputOptions } from "@phila/phila-ui-core";
|
|
3
|
-
declare module "vue" {
|
|
4
|
-
interface GlobalComponents {
|
|
5
|
-
/**
|
|
6
|
-
* PhilaUI Checkbox is a Vue3 component that renders a checkbox input.
|
|
7
|
-
* @example
|
|
8
|
-
* <checkbox
|
|
9
|
-
* v-model="modelValue"
|
|
10
|
-
* label="Label"
|
|
11
|
-
* desc="Description"
|
|
12
|
-
* textKey="text"
|
|
13
|
-
* valueKey="value"
|
|
14
|
-
* :options="[
|
|
15
|
-
* {
|
|
16
|
-
* value: '1',
|
|
17
|
-
* text: 'Option 1',
|
|
18
|
-
* },
|
|
19
|
-
* ]"
|
|
20
|
-
* />
|
|
21
|
-
* */
|
|
22
|
-
Checkbox: typeof Checkbox;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
export interface CheckboxProps {
|
|
26
|
-
label?: string;
|
|
27
|
-
desc?: string;
|
|
28
|
-
modelValue: Array<string | number | boolean>;
|
|
29
|
-
valueKey?: string;
|
|
30
|
-
textKey?: string;
|
|
31
|
-
numOfColumns?: string | number;
|
|
32
|
-
small?: boolean;
|
|
33
|
-
options: InputOptions | InputOptions[];
|
|
34
|
-
}
|
|
35
|
-
export default Checkbox;
|