@phila/phila-ui-checkbox 0.1.0-beta.0 → 0.1.0-beta.2

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AA+KA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;AAkJ7C,wBASG"}
1
+ {"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AA+IA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;AAoI7C,wBASG"}
@@ -0,0 +1,6 @@
1
+ type __VLS_Props = {
2
+ checked?: boolean;
3
+ };
4
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
5
+ export default _default;
6
+ //# sourceMappingURL=CheckboxIcon.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CheckboxIcon.vue.d.ts","sourceRoot":"","sources":["../src/CheckboxIcon.vue"],"names":[],"mappings":"AA4CA,KAAK,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;;AAgEzC,wBAOG"}
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- .philaCheckbox[data-v-c9b06121]{display:flex;width:fit-content;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;gap:var(--spacing-s, .75rem)}.philaCheckbox input[data-v-c9b06121]{opacity:0;cursor:pointer;height:0;width:0}.checkbox-svg[data-v-c9b06121]{flex-shrink:0;overflow:visible}.checkbox-bg[data-v-c9b06121]{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.checkbox-check[data-v-c9b06121]{stroke:none;fill:none}.philaCheckbox:has(input:checked) .checkbox-svg .checkbox-bg[data-v-c9b06121]{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.philaCheckbox:has(input:checked) .checkbox-svg .checkbox-check[data-v-c9b06121]{stroke:var(--Schemes-On-Primary, #ffffff);stroke-width:2}.philaCheckbox[data-v-c9b06121]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-error .checkbox-svg .checkbox-bg[data-v-c9b06121]{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-enabled:hover .checkbox-svg .checkbox-bg[data-v-c9b06121]{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-disabled[data-v-c9b06121]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled .checkbox-svg .checkbox-bg[data-v-c9b06121]{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled:has(input:checked) .checkbox-svg .checkbox-bg[data-v-c9b06121]{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled:has(input:checked) .checkbox-svg .checkbox-check[data-v-c9b06121]{stroke:var(--Schemes-Surface-Bright, #fafafa);stroke-width:2}.group-container[data-v-1408bdad]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-1408bdad]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-1408bdad]{display:block}.checkbox-container[data-v-1408bdad]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--Radio-margin-bottom, 1rem);align-self:stretch}.checkbox-container-error[data-v-1408bdad]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-1408bdad]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}
1
+ .checkbox-svg .checkbox-bg{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.checkbox-svg .checkbox-check{stroke:none;fill:none}.checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-On-Primary, #ffffff);stroke-width:2}.philaCheckbox[data-v-bce9df97]{display:flex;width:fit-content;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;gap:var(--spacing-s, .75rem)}.philaCheckbox input[data-v-bce9df97]{opacity:0;cursor:pointer;height:0;width:0}[data-v-bce9df97] .checkbox-svg{flex-shrink:0;overflow:visible}.philaCheckbox[data-v-bce9df97]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-enabled[data-v-bce9df97]:hover .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-error[data-v-bce9df97] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-disabled[data-v-bce9df97]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled[data-v-bce9df97] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled[data-v-bce9df97] .checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled[data-v-bce9df97] .checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-Surface-Bright, #fafafa);stroke-width:2}.group-container[data-v-1408bdad]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-1408bdad]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-1408bdad]{display:block}.checkbox-container[data-v-1408bdad]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--Radio-margin-bottom, 1rem);align-self:stretch}.checkbox-container-error[data-v-1408bdad]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-1408bdad]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { BaseProps } from '@phila/phila-ui-core';
2
2
  export { default as Checkbox } from './Checkbox.vue';
3
3
  export { default as CheckboxGroup } from './CheckboxGroup.vue';
4
+ export { default as CheckboxIcon } from './CheckboxIcon.vue';
4
5
  export interface CheckboxProps extends BaseProps {
5
6
  name?: string;
6
7
  value?: string | number | boolean;
@@ -1 +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;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC"}
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;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACxD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC"}
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),c=require("@phila/phila-ui-core"),k=["for"],f=["id","name","value","checked","disabled"],g=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},disabled:{type:Boolean},error:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(a,{emit:s}){const o=a,r=s,n=c.generateRandomId(),u=e.computed(()=>Array.isArray(o.modelValue)?o.modelValue.includes(o.value):!!o.modelValue);function m(i){if(Array.isArray(o.modelValue)){const t=[...o.modelValue],l=o.value,d=t.indexOf(l);d===-1?t.push(l):t.splice(d,1),r("update:modelValue",t)}else r("update:modelValue",!o.modelValue);r("change",i)}const p=e.computed(()=>c.cn("philaCheckbox","has-text-body-default",o.className,!o.disabled&&"philaCheckbox-enabled",o.disabled&&"philaCheckbox-disabled",o.error&&"philaCheckbox-error"));return(i,t)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(p.value),for:e.unref(n)},[t[2]||(t[2]=e.createElementVNode("svg",{class:"checkbox-svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[e.createElementVNode("rect",{class:"checkbox-bg",x:"1",y:"1",width:"18",height:"18",rx:"3",ry:"3"}),e.createElementVNode("path",{class:"checkbox-check",d:"M 4.5 10 L 8.5 14 L 15.5 6","stroke-linecap":"round","stroke-linejoin":"round"})],-1)),e.createTextVNode(" "+e.toDisplayString(o.text)+" ",1),e.createElementVNode("input",{id:e.unref(n),type:"checkbox",name:o.name,value:o.value,checked:u.value,disabled:o.disabled,onChange:m,onFocus:t[0]||(t[0]=l=>r("focus",l)),onBlur:t[1]||(t[1]=l=>r("blur",l))},null,40,f)],10,k))}}),h=(a,s)=>{const o=a.__vccOpts||a;for(const[r,n]of s)o[r]=n;return o},b=h(g,[["__scopeId","data-v-c9b06121"]]);var v={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]};const V={class:"labels-container"},y={class:"has-text-body-default"},C={key:0,class:"error-message has-text-error content"},N=e.defineComponent({__name:"CheckboxGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(a,{emit:s}){const o=a,r=s,n=c.generateRandomId(),u=e.computed(()=>c.cn("group-container",o.className)),m=e.computed(()=>c.cn("checkbox-container",o.error&&"checkbox-container-error has-background-error")),p=e.computed(()=>c.cn("has-text-label-default",o.error&&"has-text-error"));function i(t){r("update:modelValue",t)}return(t,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(u.value)},[e.createElementVNode("div",V,[e.createElementVNode("span",{class:e.normalizeClass(p.value)},e.toDisplayString(a.groupLabel),3),e.createElementVNode("span",y,e.toDisplayString(a.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(m.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.choices,(d,x)=>(e.openBlock(),e.createBlock(b,{key:e.unref(n)+x,name:e.unref(n),value:d.value,text:d.text,"model-value":o.modelValue,disabled:o.disabled,error:o.error,"onUpdate:modelValue":i},null,8,["name","value","text","model-value","disabled","error"]))),128)),o.error?(e.openBlock(),e.createElementBlock("div",C,[e.createVNode(e.unref(c.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true","icon-definition":e.unref(v)},null,8,["icon-definition"]),e.createTextVNode(" "+e.toDisplayString(a.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),B=h(N,[["__scopeId","data-v-1408bdad"]]);exports.Checkbox=b;exports.CheckboxGroup=B;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),c=require("@phila/phila-ui-core"),h=e.defineComponent({__name:"CheckboxIcon",props:{checked:{type:Boolean}},setup(a){return(s,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["checkbox-svg",{"checkbox-svg--checked":a.checked}]),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...o[0]||(o[0]=[e.createElementVNode("rect",{class:"checkbox-bg",x:"1",y:"1",width:"18",height:"18",rx:"3",ry:"3"},null,-1),e.createElementVNode("path",{class:"checkbox-check",d:"M 4.5 10 L 8.5 14 L 15.5 6","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))}}),f=["for"],g=["id","name","value","checked","disabled"],v=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},disabled:{type:Boolean},error:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(a,{emit:s}){const o=a,n=s,l=c.generateRandomId(),i=e.computed(()=>Array.isArray(o.modelValue)?o.modelValue.includes(o.value):!!o.modelValue);function m(u){if(Array.isArray(o.modelValue)){const t=[...o.modelValue],r=o.value,d=t.indexOf(r);d===-1?t.push(r):t.splice(d,1),n("update:modelValue",t)}else n("update:modelValue",!o.modelValue);n("change",u)}const p=e.computed(()=>c.cn("philaCheckbox","has-text-body-default",o.className,!o.disabled&&"philaCheckbox-enabled",o.disabled&&"philaCheckbox-disabled",o.error&&"philaCheckbox-error"));return(u,t)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(p.value),for:e.unref(l)},[e.createVNode(h,{checked:i.value},null,8,["checked"]),e.createTextVNode(" "+e.toDisplayString(o.text)+" ",1),e.createElementVNode("input",{id:e.unref(l),type:"checkbox",name:o.name,value:o.value,checked:i.value,disabled:o.disabled,onChange:m,onFocus:t[0]||(t[0]=r=>n("focus",r)),onBlur:t[1]||(t[1]=r=>n("blur",r))},null,40,g)],10,f))}}),b=(a,s)=>{const o=a.__vccOpts||a;for(const[n,l]of s)o[n]=l;return o},k=b(v,[["__scopeId","data-v-bce9df97"]]);var C={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]};const y={class:"labels-container"},V={class:"has-text-body-default"},_={key:0,class:"error-message has-text-error content"},B=e.defineComponent({__name:"CheckboxGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(a,{emit:s}){const o=a,n=s,l=c.generateRandomId(),i=e.computed(()=>c.cn("group-container",o.className)),m=e.computed(()=>c.cn("checkbox-container",o.error&&"checkbox-container-error has-background-error")),p=e.computed(()=>c.cn("has-text-label-default",o.error&&"has-text-error"));function u(t){n("update:modelValue",t)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(i.value)},[e.createElementVNode("div",y,[e.createElementVNode("span",{class:e.normalizeClass(p.value)},e.toDisplayString(a.groupLabel),3),e.createElementVNode("span",V,e.toDisplayString(a.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(m.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.choices,(d,x)=>(e.openBlock(),e.createBlock(k,{key:e.unref(l)+x,name:e.unref(l),value:d.value,text:d.text,"model-value":o.modelValue,disabled:o.disabled,error:o.error,"onUpdate:modelValue":u},null,8,["name","value","text","model-value","disabled","error"]))),128)),o.error?(e.openBlock(),e.createElementBlock("div",_,[e.createVNode(e.unref(c.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true","icon-definition":e.unref(C)},null,8,["icon-definition"]),e.createTextVNode(" "+e.toDisplayString(a.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),N=b(B,[["__scopeId","data-v-1408bdad"]]);exports.Checkbox=k;exports.CheckboxGroup=N;exports.CheckboxIcon=h;
package/dist/index.mjs CHANGED
@@ -1,6 +1,38 @@
1
- import { defineComponent as k, computed as u, createElementBlock as h, openBlock as i, unref as s, normalizeClass as p, createElementVNode as r, createTextVNode as y, toDisplayString as b, createCommentVNode as B, Fragment as N, renderList as w, createBlock as z, createVNode as A } from "vue";
2
- import { generateRandomId as V, cn as x, Icon as I } from "@phila/phila-ui-core";
3
- import './index.css';const L = ["for"], M = ["id", "name", "value", "checked", "disabled"], E = /* @__PURE__ */ k({
1
+ import { defineComponent as g, createElementBlock as u, openBlock as s, normalizeClass as m, createElementVNode as n, computed as h, unref as d, createVNode as _, createTextVNode as y, toDisplayString as x, createCommentVNode as N, Fragment as w, renderList as I, createBlock as z } from "vue";
2
+ import { generateRandomId as C, cn as k, Icon as A } from "@phila/phila-ui-core";
3
+ import './index.css';const L = /* @__PURE__ */ g({
4
+ __name: "CheckboxIcon",
5
+ props: {
6
+ checked: { type: Boolean }
7
+ },
8
+ setup(o) {
9
+ return (c, e) => (s(), u("svg", {
10
+ class: m(["checkbox-svg", { "checkbox-svg--checked": o.checked }]),
11
+ width: "20",
12
+ height: "20",
13
+ viewBox: "0 0 20 20",
14
+ fill: "none",
15
+ xmlns: "http://www.w3.org/2000/svg",
16
+ "aria-hidden": "true"
17
+ }, [...e[0] || (e[0] = [
18
+ n("rect", {
19
+ class: "checkbox-bg",
20
+ x: "1",
21
+ y: "1",
22
+ width: "18",
23
+ height: "18",
24
+ rx: "3",
25
+ ry: "3"
26
+ }, null, -1),
27
+ n("path", {
28
+ class: "checkbox-check",
29
+ d: "M 4.5 10 L 8.5 14 L 15.5 6",
30
+ "stroke-linecap": "round",
31
+ "stroke-linejoin": "round"
32
+ }, null, -1)
33
+ ])], 2));
34
+ }
35
+ }), M = ["for"], $ = ["id", "name", "value", "checked", "disabled"], E = /* @__PURE__ */ g({
4
36
  __name: "Checkbox",
5
37
  props: {
6
38
  name: {},
@@ -13,16 +45,16 @@ import './index.css';const L = ["for"], M = ["id", "name", "value", "checked", "
13
45
  },
14
46
  emits: ["update:modelValue", "change", "focus", "blur"],
15
47
  setup(o, { emit: c }) {
16
- const e = o, t = c, l = V(), f = u(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
17
- function v(m) {
48
+ const e = o, t = c, r = C(), p = h(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
49
+ function f(b) {
18
50
  if (Array.isArray(e.modelValue)) {
19
- const a = [...e.modelValue], n = e.value, d = a.indexOf(n);
20
- d === -1 ? a.push(n) : a.splice(d, 1), t("update:modelValue", a);
51
+ const a = [...e.modelValue], l = e.value, i = a.indexOf(l);
52
+ i === -1 ? a.push(l) : a.splice(i, 1), t("update:modelValue", a);
21
53
  } else
22
54
  t("update:modelValue", !e.modelValue);
23
- t("change", m);
55
+ t("change", b);
24
56
  }
25
- const g = u(() => x(
57
+ const v = h(() => k(
26
58
  "philaCheckbox",
27
59
  "has-text-body-default",
28
60
  e.className,
@@ -30,64 +62,40 @@ import './index.css';const L = ["for"], M = ["id", "name", "value", "checked", "
30
62
  e.disabled && "philaCheckbox-disabled",
31
63
  e.error && "philaCheckbox-error"
32
64
  ));
33
- return (m, a) => (i(), h("label", {
34
- class: p(g.value),
35
- for: s(l)
65
+ return (b, a) => (s(), u("label", {
66
+ class: m(v.value),
67
+ for: d(r)
36
68
  }, [
37
- a[2] || (a[2] = r("svg", {
38
- class: "checkbox-svg",
39
- width: "20",
40
- height: "20",
41
- viewBox: "0 0 20 20",
42
- fill: "none",
43
- xmlns: "http://www.w3.org/2000/svg",
44
- "aria-hidden": "true"
45
- }, [
46
- r("rect", {
47
- class: "checkbox-bg",
48
- x: "1",
49
- y: "1",
50
- width: "18",
51
- height: "18",
52
- rx: "3",
53
- ry: "3"
54
- }),
55
- r("path", {
56
- class: "checkbox-check",
57
- d: "M 4.5 10 L 8.5 14 L 15.5 6",
58
- "stroke-linecap": "round",
59
- "stroke-linejoin": "round"
60
- })
61
- ], -1)),
62
- y(" " + b(e.text) + " ", 1),
63
- r("input", {
64
- id: s(l),
69
+ _(L, { checked: p.value }, null, 8, ["checked"]),
70
+ y(" " + x(e.text) + " ", 1),
71
+ n("input", {
72
+ id: d(r),
65
73
  type: "checkbox",
66
74
  name: e.name,
67
75
  value: e.value,
68
- checked: f.value,
76
+ checked: p.value,
69
77
  disabled: e.disabled,
70
- onChange: v,
71
- onFocus: a[0] || (a[0] = (n) => t("focus", n)),
72
- onBlur: a[1] || (a[1] = (n) => t("blur", n))
73
- }, null, 40, M)
74
- ], 10, L));
78
+ onChange: f,
79
+ onFocus: a[0] || (a[0] = (l) => t("focus", l)),
80
+ onBlur: a[1] || (a[1] = (l) => t("blur", l))
81
+ }, null, 40, $)
82
+ ], 10, M));
75
83
  }
76
- }), C = (o, c) => {
84
+ }), V = (o, c) => {
77
85
  const e = o.__vccOpts || o;
78
- for (const [t, l] of c)
79
- e[t] = l;
86
+ for (const [t, r] of c)
87
+ e[t] = r;
80
88
  return e;
81
- }, $ = /* @__PURE__ */ C(E, [["__scopeId", "data-v-c9b06121"]]);
82
- var F = {
89
+ }, F = /* @__PURE__ */ V(E, [["__scopeId", "data-v-bce9df97"]]);
90
+ var G = {
83
91
  prefix: "fas",
84
92
  iconName: "circle-exclamation",
85
93
  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
86
94
  };
87
- const G = { class: "labels-container" }, O = { class: "has-text-body-default" }, S = {
95
+ const O = { class: "labels-container" }, S = { class: "has-text-body-default" }, U = {
88
96
  key: 0,
89
97
  class: "error-message has-text-error content"
90
- }, U = /* @__PURE__ */ k({
98
+ }, j = /* @__PURE__ */ g({
91
99
  __name: "CheckboxGroup",
92
100
  props: {
93
101
  groupLabel: {},
@@ -101,47 +109,48 @@ const G = { class: "labels-container" }, O = { class: "has-text-body-default" },
101
109
  },
102
110
  emits: ["update:modelValue"],
103
111
  setup(o, { emit: c }) {
104
- const e = o, t = c, l = V(), f = u(() => x("group-container", e.className)), v = u(() => x("checkbox-container", e.error && "checkbox-container-error has-background-error")), g = u(() => x("has-text-label-default", e.error && "has-text-error"));
105
- function m(a) {
112
+ const e = o, t = c, r = C(), p = h(() => k("group-container", e.className)), f = h(() => k("checkbox-container", e.error && "checkbox-container-error has-background-error")), v = h(() => k("has-text-label-default", e.error && "has-text-error"));
113
+ function b(a) {
106
114
  t("update:modelValue", a);
107
115
  }
108
- return (a, n) => (i(), h("div", {
109
- class: p(f.value)
116
+ return (a, l) => (s(), u("div", {
117
+ class: m(p.value)
110
118
  }, [
111
- r("div", G, [
112
- r("span", {
113
- class: p(g.value)
114
- }, b(o.groupLabel), 3),
115
- r("span", O, b(o.description), 1)
119
+ n("div", O, [
120
+ n("span", {
121
+ class: m(v.value)
122
+ }, x(o.groupLabel), 3),
123
+ n("span", S, x(o.description), 1)
116
124
  ]),
117
- r("div", {
118
- class: p(v.value)
125
+ n("div", {
126
+ class: m(f.value)
119
127
  }, [
120
- (i(!0), h(N, null, w(e.choices, (d, _) => (i(), z($, {
121
- key: s(l) + _,
122
- name: s(l),
123
- value: d.value,
124
- text: d.text,
128
+ (s(!0), u(w, null, I(e.choices, (i, B) => (s(), z(F, {
129
+ key: d(r) + B,
130
+ name: d(r),
131
+ value: i.value,
132
+ text: i.text,
125
133
  "model-value": e.modelValue,
126
134
  disabled: e.disabled,
127
135
  error: e.error,
128
- "onUpdate:modelValue": m
136
+ "onUpdate:modelValue": b
129
137
  }, null, 8, ["name", "value", "text", "model-value", "disabled", "error"]))), 128)),
130
- e.error ? (i(), h("div", S, [
131
- A(s(I), {
138
+ e.error ? (s(), u("div", U, [
139
+ _(d(A), {
132
140
  style: { height: "fit-content", width: "fit-content", padding: "0" },
133
141
  size: "large",
134
142
  inline: "",
135
143
  "aria-hidden": "true",
136
- "icon-definition": s(F)
144
+ "icon-definition": d(G)
137
145
  }, null, 8, ["icon-definition"]),
138
- y(" " + b(o.errorMessage), 1)
139
- ])) : B("", !0)
146
+ y(" " + x(o.errorMessage), 1)
147
+ ])) : N("", !0)
140
148
  ], 2)
141
149
  ], 2));
142
150
  }
143
- }), R = /* @__PURE__ */ C(U, [["__scopeId", "data-v-1408bdad"]]);
151
+ }), T = /* @__PURE__ */ V(j, [["__scopeId", "data-v-1408bdad"]]);
144
152
  export {
145
- $ as Checkbox,
146
- R as CheckboxGroup
153
+ F as Checkbox,
154
+ T as CheckboxGroup,
155
+ L as CheckboxIcon
147
156
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-checkbox",
3
- "version": "0.1.0-beta.0",
3
+ "version": "0.1.0-beta.2",
4
4
  "type": "module",
5
5
  "description": "A checkbox input.",
6
6
  "main": "./dist/index.js",
@@ -28,7 +28,7 @@
28
28
  "vue": "^3.0.0"
29
29
  },
30
30
  "dependencies": {
31
- "@phila/phila-ui-core": "2.3.1"
31
+ "@phila/phila-ui-core": "2.3.2-beta.0"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@types/node": "^24.0.0",