@phila/phila-ui-checkbox 0.1.1-beta.1 → 0.1.1-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.
Files changed (8) hide show
  1. package/dist/Checkbox.vue.d.ts +3 -1
  2. package/dist/Checkbox.vue.d.ts.map +1 -1
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/index.mjs +73 -65
  8. package/package.json +1 -1
package/dist/Checkbox.vue.d.ts CHANGED
@@ -9,6 +9,8 @@ declare const _default: import('vue').DefineComponent<CheckboxProps, {}, {}, {},
9
9
  onChange?: ((event: Event) => any) | undefined;
10
10
  onFocus?: ((event: FocusEvent) => any) | undefined;
11
11
  onBlur?: ((event: FocusEvent) => any) | undefined;
12
- }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
12
+ }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
13
+ inputRef: HTMLInputElement;
14
+ }, HTMLLabelElement>;
13
15
  export default _default;
14
16
  //# sourceMappingURL=Checkbox.vue.d.ts.map
package/dist/Checkbox.vue.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AAiKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;AAsJ7C,wBAUG"}
package/dist/index.css CHANGED
@@ -1 +1 @@
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}
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-354b2e5e]{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.philaCheckbox__visual[data-v-354b2e5e]{display:flex;align-items:center;gap:var(--spacing-s, .75rem)}.philaCheckbox--icon-only .philaCheckbox__visual[data-v-354b2e5e]{gap:0}.philaCheckbox input[data-v-354b2e5e]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}[data-v-354b2e5e] .checkbox-svg{flex-shrink:0;overflow:visible}.philaCheckbox[data-v-354b2e5e]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-enabled[data-v-354b2e5e]:hover .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-error[data-v-354b2e5e] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-disabled[data-v-354b2e5e]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled[data-v-354b2e5e] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled[data-v-354b2e5e] .checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled[data-v-354b2e5e] .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
@@ -6,9 +6,10 @@ export interface CheckboxProps extends BaseProps {
6
6
  name?: string;
7
7
  value?: string | number | boolean;
8
8
  modelValue?: boolean | Array<string | number | boolean>;
9
- text: string;
9
+ text?: string;
10
10
  disabled?: boolean;
11
11
  error?: boolean;
12
+ indeterminate?: boolean;
12
13
  }
13
14
  export interface CheckboxGroupProps extends BaseProps {
14
15
  groupLabel: string;
package/dist/index.d.ts.map CHANGED
@@ -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;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"}
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,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;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"),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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),s=require("@phila/phila-ui-core"),h=e.defineComponent({__name:"CheckboxIcon",props:{checked:{type:Boolean}},setup(a){return(c,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={class:"philaCheckbox__visual"},v={key:0},g=["name","value","checked","disabled"],C=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},disabled:{type:Boolean},error:{type:Boolean},indeterminate:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(a,{emit:c}){const o=a,n=c,l=e.ref(null);e.watchEffect(()=>{l.value&&(l.value.indeterminate=o.indeterminate??!1)});const d=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,i=t.indexOf(r);i===-1?t.push(r):t.splice(i,1),n("update:modelValue",t)}else n("update:modelValue",!o.modelValue);n("change",u)}const p=e.computed(()=>s.cn("philaCheckbox","has-text-body-default",o.className,!o.disabled&&"philaCheckbox-enabled",o.disabled&&"philaCheckbox-disabled",o.error&&"philaCheckbox-error",!o.text&&"philaCheckbox--icon-only"));return(u,t)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(p.value)},[e.createElementVNode("span",f,[e.createVNode(h,{checked:d.value},null,8,["checked"]),o.text?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0)]),e.createElementVNode("input",{ref_key:"inputRef",ref:l,type:"checkbox",name:o.name,value:o.value,checked:d.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)],2))}}),k=(a,c)=>{const o=a.__vccOpts||a;for(const[n,l]of c)o[n]=l;return o},b=k(C,[["__scopeId","data-v-354b2e5e"]]);var y={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 _={class:"labels-container"},V={class:"has-text-body-default"},B={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:c}){const o=a,n=c,l=s.generateRandomId(),d=e.computed(()=>s.cn("group-container",o.className)),m=e.computed(()=>s.cn("checkbox-container",o.error&&"checkbox-container-error has-background-error")),p=e.computed(()=>s.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(d.value)},[e.createElementVNode("div",_,[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,(i,x)=>(e.openBlock(),e.createBlock(b,{key:e.unref(l)+x,name:e.unref(l),value:i.value,text:i.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",B,[e.createVNode(e.unref(s.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true","icon-definition":e.unref(y)},null,8,["icon-definition"]),e.createTextVNode(" "+e.toDisplayString(a.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),E=k(N,[["__scopeId","data-v-1408bdad"]]);exports.Checkbox=b;exports.CheckboxGroup=E;exports.CheckboxIcon=h;
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
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({
1
+ import { defineComponent as _, createElementBlock as i, openBlock as c, normalizeClass as u, createElementVNode as l, ref as B, watchEffect as N, computed as h, createVNode as g, createCommentVNode as y, toDisplayString as b, Fragment as w, renderList as I, createBlock as z, unref as x, createTextVNode as A } from "vue";
2
+ import { cn as k, generateRandomId as L, Icon as $ } from "@phila/phila-ui-core";
3
+ import './index.css';const E = /* @__PURE__ */ _({
4
4
  __name: "CheckboxIcon",
5
5
  props: {
6
6
  checked: { type: Boolean }
7
7
  },
8
- setup(o) {
9
- return (c, e) => (s(), u("svg", {
10
- class: m(["checkbox-svg", { "checkbox-svg--checked": o.checked }]),
8
+ setup(t) {
9
+ return (s, e) => (c(), i("svg", {
10
+ class: u(["checkbox-svg", { "checkbox-svg--checked": t.checked }]),
11
11
  width: "20",
12
12
  height: "20",
13
13
  viewBox: "0 0 20 20",
@@ -15,7 +15,7 @@ import './index.css';const L = /* @__PURE__ */ g({
15
15
  xmlns: "http://www.w3.org/2000/svg",
16
16
  "aria-hidden": "true"
17
17
  }, [...e[0] || (e[0] = [
18
- n("rect", {
18
+ l("rect", {
19
19
  class: "checkbox-bg",
20
20
  x: "1",
21
21
  y: "1",
@@ -24,7 +24,7 @@ import './index.css';const L = /* @__PURE__ */ g({
24
24
  rx: "3",
25
25
  ry: "3"
26
26
  }, null, -1),
27
- n("path", {
27
+ l("path", {
28
28
  class: "checkbox-check",
29
29
  d: "M 4.5 10 L 8.5 14 L 15.5 6",
30
30
  "stroke-linecap": "round",
@@ -32,7 +32,7 @@ import './index.css';const L = /* @__PURE__ */ g({
32
32
  }, null, -1)
33
33
  ])], 2));
34
34
  }
35
- }), M = ["for"], $ = ["id", "name", "value", "checked", "disabled"], E = /* @__PURE__ */ g({
35
+ }), M = { class: "philaCheckbox__visual" }, R = { key: 0 }, F = ["name", "value", "checked", "disabled"], G = /* @__PURE__ */ _({
36
36
  __name: "Checkbox",
37
37
  props: {
38
38
  name: {},
@@ -41,18 +41,23 @@ import './index.css';const L = /* @__PURE__ */ g({
41
41
  text: {},
42
42
  disabled: { type: Boolean },
43
43
  error: { type: Boolean },
44
+ indeterminate: { type: Boolean },
44
45
  className: {}
45
46
  },
46
47
  emits: ["update:modelValue", "change", "focus", "blur"],
47
- setup(o, { emit: c }) {
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) {
48
+ setup(t, { emit: s }) {
49
+ const e = t, o = s, n = B(null);
50
+ N(() => {
51
+ n.value && (n.value.indeterminate = e.indeterminate ?? !1);
52
+ });
53
+ const m = h(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
54
+ function f(p) {
50
55
  if (Array.isArray(e.modelValue)) {
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);
56
+ const a = [...e.modelValue], r = e.value, d = a.indexOf(r);
57
+ d === -1 ? a.push(r) : a.splice(d, 1), o("update:modelValue", a);
53
58
  } else
54
- t("update:modelValue", !e.modelValue);
55
- t("change", b);
59
+ o("update:modelValue", !e.modelValue);
60
+ o("change", p);
56
61
  }
57
62
  const v = h(() => k(
58
63
  "philaCheckbox",
@@ -60,42 +65,45 @@ import './index.css';const L = /* @__PURE__ */ g({
60
65
  e.className,
61
66
  !e.disabled && "philaCheckbox-enabled",
62
67
  e.disabled && "philaCheckbox-disabled",
63
- e.error && "philaCheckbox-error"
68
+ e.error && "philaCheckbox-error",
69
+ !e.text && "philaCheckbox--icon-only"
64
70
  ));
65
- return (b, a) => (s(), u("label", {
66
- class: m(v.value),
67
- for: d(r)
71
+ return (p, a) => (c(), i("label", {
72
+ class: u(v.value)
68
73
  }, [
69
- _(L, { checked: p.value }, null, 8, ["checked"]),
70
- y(" " + x(e.text) + " ", 1),
71
- n("input", {
72
- id: d(r),
74
+ l("span", M, [
75
+ g(E, { checked: m.value }, null, 8, ["checked"]),
76
+ e.text ? (c(), i("span", R, b(e.text), 1)) : y("", !0)
77
+ ]),
78
+ l("input", {
79
+ ref_key: "inputRef",
80
+ ref: n,
73
81
  type: "checkbox",
74
82
  name: e.name,
75
83
  value: e.value,
76
- checked: p.value,
84
+ checked: m.value,
77
85
  disabled: e.disabled,
78
86
  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));
87
+ onFocus: a[0] || (a[0] = (r) => o("focus", r)),
88
+ onBlur: a[1] || (a[1] = (r) => o("blur", r))
89
+ }, null, 40, F)
90
+ ], 2));
83
91
  }
84
- }), V = (o, c) => {
85
- const e = o.__vccOpts || o;
86
- for (const [t, r] of c)
87
- e[t] = r;
92
+ }), C = (t, s) => {
93
+ const e = t.__vccOpts || t;
94
+ for (const [o, n] of s)
95
+ e[o] = n;
88
96
  return e;
89
- }, F = /* @__PURE__ */ V(E, [["__scopeId", "data-v-bce9df97"]]);
90
- var G = {
97
+ }, O = /* @__PURE__ */ C(G, [["__scopeId", "data-v-354b2e5e"]]);
98
+ var S = {
91
99
  prefix: "fas",
92
100
  iconName: "circle-exclamation",
93
101
  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"]
94
102
  };
95
- const O = { class: "labels-container" }, S = { class: "has-text-body-default" }, U = {
103
+ const U = { class: "labels-container" }, j = { class: "has-text-body-default" }, D = {
96
104
  key: 0,
97
105
  class: "error-message has-text-error content"
98
- }, j = /* @__PURE__ */ g({
106
+ }, T = /* @__PURE__ */ _({
99
107
  __name: "CheckboxGroup",
100
108
  props: {
101
109
  groupLabel: {},
@@ -108,49 +116,49 @@ const O = { class: "labels-container" }, S = { class: "has-text-body-default" },
108
116
  className: {}
109
117
  },
110
118
  emits: ["update:modelValue"],
111
- setup(o, { emit: c }) {
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) {
114
- t("update:modelValue", a);
119
+ setup(t, { emit: s }) {
120
+ const e = t, o = s, n = L(), m = 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"));
121
+ function p(a) {
122
+ o("update:modelValue", a);
115
123
  }
116
- return (a, l) => (s(), u("div", {
117
- class: m(p.value)
124
+ return (a, r) => (c(), i("div", {
125
+ class: u(m.value)
118
126
  }, [
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)
127
+ l("div", U, [
128
+ l("span", {
129
+ class: u(v.value)
130
+ }, b(t.groupLabel), 3),
131
+ l("span", j, b(t.description), 1)
124
132
  ]),
125
- n("div", {
126
- class: m(f.value)
133
+ l("div", {
134
+ class: u(f.value)
127
135
  }, [
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,
136
+ (c(!0), i(w, null, I(e.choices, (d, V) => (c(), z(O, {
137
+ key: x(n) + V,
138
+ name: x(n),
139
+ value: d.value,
140
+ text: d.text,
133
141
  "model-value": e.modelValue,
134
142
  disabled: e.disabled,
135
143
  error: e.error,
136
- "onUpdate:modelValue": b
144
+ "onUpdate:modelValue": p
137
145
  }, null, 8, ["name", "value", "text", "model-value", "disabled", "error"]))), 128)),
138
- e.error ? (s(), u("div", U, [
139
- _(d(A), {
146
+ e.error ? (c(), i("div", D, [
147
+ g(x($), {
140
148
  style: { height: "fit-content", width: "fit-content", padding: "0" },
141
149
  size: "large",
142
150
  inline: "",
143
151
  "aria-hidden": "true",
144
- "icon-definition": d(G)
152
+ "icon-definition": x(S)
145
153
  }, null, 8, ["icon-definition"]),
146
- y(" " + x(o.errorMessage), 1)
147
- ])) : N("", !0)
154
+ A(" " + b(t.errorMessage), 1)
155
+ ])) : y("", !0)
148
156
  ], 2)
149
157
  ], 2));
150
158
  }
151
- }), T = /* @__PURE__ */ V(j, [["__scopeId", "data-v-1408bdad"]]);
159
+ }), J = /* @__PURE__ */ C(T, [["__scopeId", "data-v-1408bdad"]]);
152
160
  export {
153
- F as Checkbox,
154
- T as CheckboxGroup,
155
- L as CheckboxIcon
161
+ O as Checkbox,
162
+ J as CheckboxGroup,
163
+ E as CheckboxIcon
156
164
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phila/phila-ui-checkbox",
3
- "version": "0.1.1-beta.1",
3
+ "version": "0.1.1-beta.2",
4
4
  "type": "module",
5
5
  "description": "A checkbox input.",
6
6
  "main": "./dist/index.js",