@phila/phila-ui-checkbox 0.0.1
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 +16 -0
- package/dist/Checkbox.vue.d.ts +77 -0
- package/dist/checkbox.js +103 -0
- package/dist/checkbox.umd.cjs +1 -0
- package/dist/types.d.ts +17 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { InputProps } from "@phila/phila-ui-core";
|
|
2
|
+
import { CheckboxProps } from "./types";
|
|
3
|
+
import PhilaUICore from "@phila/phila-ui-core";
|
|
4
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & CheckboxProps>, {
|
|
5
|
+
id: any;
|
|
6
|
+
errors(): never[];
|
|
7
|
+
label: string;
|
|
8
|
+
desc: string;
|
|
9
|
+
modelValue: () => never[];
|
|
10
|
+
valueKey: string;
|
|
11
|
+
textKey: string;
|
|
12
|
+
numOfColumns: number;
|
|
13
|
+
small: boolean;
|
|
14
|
+
options: () => {
|
|
15
|
+
"option-1": string;
|
|
16
|
+
"option-2": string;
|
|
17
|
+
"option-3": string;
|
|
18
|
+
};
|
|
19
|
+
}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
"update:modelValue": (...args: any[]) => void;
|
|
21
|
+
change: (...args: any[]) => void;
|
|
22
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<InputProps & CheckboxProps>, {
|
|
23
|
+
id: any;
|
|
24
|
+
errors(): never[];
|
|
25
|
+
label: string;
|
|
26
|
+
desc: string;
|
|
27
|
+
modelValue: () => never[];
|
|
28
|
+
valueKey: string;
|
|
29
|
+
textKey: string;
|
|
30
|
+
numOfColumns: number;
|
|
31
|
+
small: boolean;
|
|
32
|
+
options: () => {
|
|
33
|
+
"option-1": string;
|
|
34
|
+
"option-2": string;
|
|
35
|
+
"option-3": string;
|
|
36
|
+
};
|
|
37
|
+
}>>> & {
|
|
38
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
39
|
+
onChange?: ((...args: any[]) => any) | undefined;
|
|
40
|
+
}, {
|
|
41
|
+
id: string;
|
|
42
|
+
errors: PhilaUICore.InputErrors;
|
|
43
|
+
options: (PhilaUICore.HTMLInputValue[] | PhilaUICore.InputOptions | PhilaUICore.InputOptions[] | PhilaUICore.InputOptionsGroup | undefined) & (PhilaUICore.InputOptions | PhilaUICore.InputOptions[]);
|
|
44
|
+
textKey: string;
|
|
45
|
+
valueKey: string;
|
|
46
|
+
label: string;
|
|
47
|
+
desc: string;
|
|
48
|
+
modelValue: unknown[];
|
|
49
|
+
numOfColumns: string | number;
|
|
50
|
+
small: boolean;
|
|
51
|
+
}, {}>, {
|
|
52
|
+
label?(_: {}): any;
|
|
53
|
+
desc?(_: {}): any;
|
|
54
|
+
}>;
|
|
55
|
+
export default _default;
|
|
56
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
57
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
58
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
59
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
60
|
+
} : {
|
|
61
|
+
type: import('vue').PropType<T[K]>;
|
|
62
|
+
required: true;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
type __VLS_WithDefaults<P, D> = {
|
|
66
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
67
|
+
default: D[K];
|
|
68
|
+
}> : P[K];
|
|
69
|
+
};
|
|
70
|
+
type __VLS_Prettify<T> = {
|
|
71
|
+
[K in keyof T]: T[K];
|
|
72
|
+
} & {};
|
|
73
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
74
|
+
new (): {
|
|
75
|
+
$slots: S;
|
|
76
|
+
};
|
|
77
|
+
};
|
package/dist/checkbox.js
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
import { defineComponent as O, getCurrentInstance as B, ref as w, watch as D, computed as N, openBlock as o, createElementBlock as l, normalizeClass as P, createElementVNode as s, Fragment as u, createTextVNode as S, toDisplayString as r, renderSlot as k, unref as a, createCommentVNode as v, normalizeStyle as z, renderList as E, withDirectives as K, mergeProps as T, vModelCheckbox as U } from "vue";
|
|
2
|
+
import A from "@phila/phila-ui-core";
|
|
3
|
+
const F = {
|
|
4
|
+
key: 0,
|
|
5
|
+
class: "input-error-msg"
|
|
6
|
+
}, H = /* @__PURE__ */ s("span", { class: "icon" }, [
|
|
7
|
+
/* @__PURE__ */ s("i", { class: "fas fa-exclamation-circle" })
|
|
8
|
+
], -1), L = {
|
|
9
|
+
key: 1,
|
|
10
|
+
class: "is-field-info"
|
|
11
|
+
}, M = {
|
|
12
|
+
key: 0,
|
|
13
|
+
class: "is-field-info"
|
|
14
|
+
}, R = ["id"], j = ["id", "name", "aria-checked", "value"], q = ["for"], { formHelpers: b } = A, { randomID: G } = b, J = {
|
|
15
|
+
inheritAttrs: !1
|
|
16
|
+
}, X = /* @__PURE__ */ O({
|
|
17
|
+
...J,
|
|
18
|
+
__name: "Checkbox",
|
|
19
|
+
props: {
|
|
20
|
+
id: { default: G() },
|
|
21
|
+
errors: { default() {
|
|
22
|
+
return [];
|
|
23
|
+
} },
|
|
24
|
+
optgroup: { type: Boolean },
|
|
25
|
+
options: { default: () => ({
|
|
26
|
+
"option-1": "Option 1",
|
|
27
|
+
"option-2": "Option 2",
|
|
28
|
+
"option-3": "Option 3"
|
|
29
|
+
}) },
|
|
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($, { emit: C }) {
|
|
41
|
+
const n = $, c = C, V = B(), { error: m, classes: p, optionText: g, optionValue: f } = b.useInput.useInputComposable(V, n), i = w(n.modelValue);
|
|
42
|
+
D(
|
|
43
|
+
() => n.modelValue,
|
|
44
|
+
(e) => {
|
|
45
|
+
i.value = e;
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
const y = (e) => {
|
|
49
|
+
c("change", e), c("update:modelValue", i.value);
|
|
50
|
+
}, _ = N(() => n.small ? `${p} small-checkradio` : p);
|
|
51
|
+
return (e, h) => (o(), l("div", {
|
|
52
|
+
class: P(["input-wrap input-checkbox", _.value])
|
|
53
|
+
}, [
|
|
54
|
+
s("fieldset", null, [
|
|
55
|
+
s("legend", null, [
|
|
56
|
+
e.label ? (o(), l(u, { key: 0 }, [
|
|
57
|
+
S(r(e.label), 1)
|
|
58
|
+
], 64)) : k(e.$slots, "label", { key: 1 })
|
|
59
|
+
]),
|
|
60
|
+
a(m) ? (o(), l("div", F, [
|
|
61
|
+
H,
|
|
62
|
+
s("span", null, r(a(m)), 1)
|
|
63
|
+
])) : v("", !0),
|
|
64
|
+
e.desc ? (o(), l("div", L, r(e.desc), 1)) : (o(), l(u, { key: 2 }, [
|
|
65
|
+
e.$slots.desc ? (o(), l("div", M, [
|
|
66
|
+
k(e.$slots, "desc")
|
|
67
|
+
])) : v("", !0)
|
|
68
|
+
], 64)),
|
|
69
|
+
s("div", {
|
|
70
|
+
id: `cb-group-${e.id}`,
|
|
71
|
+
style: z(`columns: ${e.numOfColumns} auto`)
|
|
72
|
+
}, [
|
|
73
|
+
(o(!0), l(u, null, E(e.options, (d, t) => (o(), l("div", {
|
|
74
|
+
key: `k-${t}`,
|
|
75
|
+
class: "control"
|
|
76
|
+
}, [
|
|
77
|
+
K(s("input", T({
|
|
78
|
+
id: `cb-${t}-${e.id}`,
|
|
79
|
+
"onUpdate:modelValue": h[0] || (h[0] = (I) => i.value = I),
|
|
80
|
+
name: `cb-${t}-${e.id}`,
|
|
81
|
+
type: "checkbox",
|
|
82
|
+
"aria-checked": e.modelValue.includes(a(f)(d, t)),
|
|
83
|
+
class: "is-checkradio",
|
|
84
|
+
role: "checkbox",
|
|
85
|
+
ref_for: !0
|
|
86
|
+
}, e.$attrs, {
|
|
87
|
+
value: a(f)(d, t),
|
|
88
|
+
onChange: y
|
|
89
|
+
}), null, 16, j), [
|
|
90
|
+
[U, i.value]
|
|
91
|
+
]),
|
|
92
|
+
s("label", {
|
|
93
|
+
for: `cb-${t}-${e.id}`
|
|
94
|
+
}, r(a(g)(d)), 9, q)
|
|
95
|
+
]))), 128))
|
|
96
|
+
], 12, R)
|
|
97
|
+
])
|
|
98
|
+
], 2));
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
export {
|
|
102
|
+
X as default
|
|
103
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
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 f={key:0,class:"input-error-msg"},u=e.createElementVNode("span",{class:"icon"},[e.createElementVNode("i",{class:"fas fa-exclamation-circle"})],-1),h={key:1,class:"is-field-info"},k={key:0,class:"is-field-info"},V=["id"],B=["id","name","aria-checked","value"],E=["for"],{formHelpers:r}=l,{randomID:b}=r,y={inheritAttrs:!1};return e.defineComponent({...y,__name:"Checkbox",props:{id:{default:b()},errors:{default(){return[]}},optgroup:{type:Boolean},options:{default:()=>({"option-1":"Option 1","option-2":"Option 2","option-3":"Option 3"})},textKey:{default:""},valueKey:{default:""},imaskProps:{},label:{default:""},desc:{default:""},modelValue:{default:()=>[]},numOfColumns:{default:1},small:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(g,{emit:C}){const n=g,i=C,$=e.getCurrentInstance(),{error:c,classes:d,optionText:N,optionValue:m}=r.useInput.useInputComposable($,n),a=e.ref(n.modelValue);e.watch(()=>n.modelValue,o=>{a.value=o});const _=o=>{i("change",o),i("update:modelValue",a.value)},S=e.computed(()=>n.small?`${d} small-checkradio`:d);return(o,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap input-checkbox",S.value])},[e.createElementVNode("fieldset",null,[e.createElementVNode("legend",null,[o.label?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(o.label),1)],64)):e.renderSlot(o.$slots,"label",{key:1})]),e.unref(c)?(e.openBlock(),e.createElementBlock("div",f,[u,e.createElementVNode("span",null,e.toDisplayString(e.unref(c)),1)])):e.createCommentVNode("",!0),o.desc?(e.openBlock(),e.createElementBlock("div",h,e.toDisplayString(o.desc),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[o.$slots.desc?(e.openBlock(),e.createElementBlock("div",k,[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,(s,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":p[0]||(p[0]=D=>a.value=D),name:`cb-${t}-${o.id}`,type:"checkbox","aria-checked":o.modelValue.includes(e.unref(m)(s,t)),class:"is-checkradio",role:"checkbox",ref_for:!0},o.$attrs,{value:e.unref(m)(s,t),onChange:_}),null,16,B),[[e.vModelCheckbox,a.value]]),e.createElementVNode("label",{for:`cb-${t}-${o.id}`},e.toDisplayString(e.unref(N)(s)),9,E)]))),128))],12,V)])],2))}})});
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import Checkbox from "Checkbox.vue";
|
|
2
|
+
import { InputOptions } from "@phila/phila-ui-core";
|
|
3
|
+
declare module "@vue/runtime-core" {
|
|
4
|
+
interface GlobalComponents {
|
|
5
|
+
Checkbox: typeof Checkbox;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export interface CheckboxProps {
|
|
9
|
+
label: string;
|
|
10
|
+
desc: string;
|
|
11
|
+
modelValue: Array<unknown>;
|
|
12
|
+
valueKey: string;
|
|
13
|
+
textKey: string;
|
|
14
|
+
numOfColumns: string | number;
|
|
15
|
+
small: boolean;
|
|
16
|
+
options: InputOptions | InputOptions[];
|
|
17
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@phila/phila-ui-checkbox",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "0.0.1",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"main": "./dist/checkbox.umd.cjs",
|
|
10
|
+
"module": "./dist/checkbox.js",
|
|
11
|
+
"types": "./dist/types.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": {
|
|
15
|
+
"types": "./dist/types.d.ts",
|
|
16
|
+
"default": "./dist/checkbox.js"
|
|
17
|
+
},
|
|
18
|
+
"require": "./dist/checkbox.umd.cjs"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"dev": "vite",
|
|
23
|
+
"prepublish": "npm i && npm run build",
|
|
24
|
+
"build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
|
|
25
|
+
"preview": "vite preview"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@phila/phila-ui-core": "1.0.12",
|
|
29
|
+
"bulma": "^0.9.4",
|
|
30
|
+
"vue": "^3.3.8"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@types/node": "^20.10.3",
|
|
34
|
+
"@vitejs/plugin-vue": "^4.5.0",
|
|
35
|
+
"sass": "^1.69.5",
|
|
36
|
+
"typescript": "^5.2.2",
|
|
37
|
+
"vite": "^5.0.0",
|
|
38
|
+
"vite-plugin-dts": "^3.6.4",
|
|
39
|
+
"vite-plugin-lib-inject-css": "^1.3.0",
|
|
40
|
+
"vue-tsc": "^1.8.22"
|
|
41
|
+
},
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"registry": "https://registry.npmjs.com/",
|
|
44
|
+
"access": "public"
|
|
45
|
+
},
|
|
46
|
+
"gitHead": "24a55656d994e2c54c353513e478fc74091bafc8"
|
|
47
|
+
}
|