@cypress-design/vue-checkbox 0.4.3 → 0.4.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cypress-design/vue-checkbox
 
+## 0.4.5
+
+### Patch Changes
+
+- [#105](https://github.com/cypress-io/cypress-design/pull/105) [`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30) Thanks [@elevatebart](https://github.com/elevatebart)! - checkbox should not contain a div to be added inside an inline only tag (<p>)
+
+- Updated dependencies [[`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30), [`e82d8cb`](https://github.com/cypress-io/cypress-design/commit/e82d8cb60882a379d89f86d1ff7b8f1d5b56ce66)]:
+  - @cypress-design/vue-icon@0.12.0
+
+## 0.4.4
+
+### Patch Changes
+
+- [#101](https://github.com/cypress-io/cypress-design/pull/101) [`1630e4c`](https://github.com/cypress-io/cypress-design/commit/1630e4c4200944cf6414cee9e92dcce6b4d8a576) Thanks [@mapsandapps](https://github.com/mapsandapps)! - Fix styles for Checkbox
+
 ## 0.4.3
 
 ### Patch Changes

package/Checkbox.vue

@@ -60,7 +60,7 @@ function updated() {
 }
 
 const checkboxClasses = computed(() => [
-  'block border-1 rounded h-16px w-16px',
+  'block border-1 border-solid rounded h-16px w-16px',
   props.disabled
     ? 'border-gray-200 bg-gray-100'
     : localChecked.value
@@ -74,7 +74,7 @@ const checkboxClasses = computed(() => [
 </script>
 
 <template>
-  <div class="relative flex items-center">
+  <span class="block relative flex items-center">
     <input
       :id="id"
       class="absolute inset-0 w-0 h-0 opacity-0"
@@ -103,5 +103,5 @@ const checkboxClasses = computed(() => [
         </span>
       </slot>
     </label>
-  </div>
+  </span>
 </template>

package/dist/index.es.mjs

@@ -1,4 +1,4 @@
-import { h as k, defineComponent as p, ref as f, computed as y, openBlock as s, createElementBlock as m, createElementVNode as d, createBlock as C, unref as b, createCommentVNode as h, normalizeClass as g, renderSlot as v, toDisplayString as x } from "vue";
+import { h as k, defineComponent as p, ref as f, computed as y, openBlock as d, createElementBlock as b, createElementVNode as i, createBlock as C, unref as m, createCommentVNode as h, normalizeClass as g, renderSlot as v, toDisplayString as x } from "vue";
 import * as w from "@cypress-design/icon-registry";
 import { ICON_COLOR_PROP_NAMES as S } from "@cypress-design/icon-registry";
 const j = ({
@@ -9,7 +9,7 @@ const j = ({
   interactiveColorsOnGroup: c,
   ...a
 }) => {
-  const n = Object.keys(a).reduce((u, i) => (S.includes(i) || (u[i] = a[i]), u), {}), r = {
+  const n = Object.keys(a).reduce((u, s) => (S.includes(s) || (u[s] = a[s]), u), {}), r = {
     width: o,
     height: o,
     fill: "none",
@@ -29,7 +29,7 @@ const j = ({
     body: l,
     compiledClasses: o
   }));
-}, B = { class: "relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
+}, B = { class: "block relative flex items-center" }, O = ["id", "name", "disabled", "checked"], V = ["for"];
 function N() {
   return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
 }
@@ -51,15 +51,15 @@ const D = /* @__PURE__ */ p({
       l.value = !l.value, t("update:modelValue", l.value);
     }
     const a = y(() => [
-      "block border-1 rounded h-16px w-16px",
+      "block border-1 border-solid rounded h-16px w-16px",
       o.disabled ? "border-gray-200 bg-gray-100" : l.value ? {
         "border-indigo-500 bg-indigo-400": o.color === "indigo",
         "border-jade-500 bg-jade-400": o.color === "jade",
         "border-red-500 bg-red-400": o.color === "red"
       } : "border-gray-200 bg-white"
     ]);
-    return (n, r) => (s(), m("div", B, [
-      d("input", {
+    return (n, r) => (d(), b("span", B, [
+      i("input", {
         id: e.id,
         class: "absolute inset-0 w-0 h-0 opacity-0",
         name: e.name || e.id,
@@ -68,20 +68,20 @@ const D = /* @__PURE__ */ p({
         disabled: o.disabled,
         checked: l.value
       }, null, 40, O),
-      d("label", {
+      i("label", {
         className: "flex items-center",
         for: e.id
       }, [
-        l.value ? (s(), C(b(z), {
+        l.value ? (d(), C(m(z), {
           key: 0,
           strokeColor: "white",
           class: "absolute"
         })) : h("", !0),
-        d("span", {
-          class: g(b(a))
+        i("span", {
+          class: g(m(a))
         }, null, 2),
         v(n.$slots, "label", {}, () => [
-          e.label ? (s(), m("span", {
+          e.label ? (d(), b("span", {
             key: 0,
             class: g([
               "ml-2 text-16px leading-normal font-light select-none",
@@ -97,5 +97,5 @@ export {
   D as default
 };
 
-/* <windicss-keep class="block border-1 rounded h-16px w-16px border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white relative flex items-center absolute inset-0 w-0 h-0 opacity-0 ml-2 text-16px leading-normal font-light select-none text-gray-500 text-gray-800 icon-dark-white"> */
+/* <windicss-keep class="block border-1 border-solid rounded h-16px w-16px border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white relative flex items-center absolute inset-0 w-0 h-0 opacity-0 ml-2 text-16px leading-normal font-light select-none text-gray-500 text-gray-800 icon-dark-white"> */
 //# sourceMappingURL=index.es.mjs.map