@pequity/squirrel 8.3.4 → 8.3.5

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 (6) hide show
  1. package/dist/cjs/p-checkbox.js +10 -3
  2. package/dist/es/p-checkbox.js +10 -3
  3. package/dist/squirrel.css +1 -1
  4. package/package.json +1 -1
  5. package/squirrel/components/p-checkbox/p-checkbox.spec.js +16 -1
  6. package/squirrel/components/p-checkbox/p-checkbox.vue +14 -2
package/dist/cjs/p-checkbox.js CHANGED
@@ -32,15 +32,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
32
32
  const style = vue.computed(() => {
33
33
  return allAttrs.style;
34
34
  });
35
+ const isDisabled = vue.computed(() => {
36
+ return "disabled" in allAttrs && allAttrs.disabled !== false;
37
+ });
35
38
  return (_ctx, _cache) => {
36
39
  return vue.openBlock(), vue.createElementBlock("label", {
37
- class: vue.normalizeClass(["inline-flex items-center", [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]]),
40
+ class: vue.normalizeClass(["inline-flex items-center", [
41
+ { hidden: _ctx.$attrs.hidden },
42
+ _ctx.$attrs.class,
43
+ { "cursor-not-allowed opacity-50": isDisabled.value, "cursor-pointer": !isDisabled.value }
44
+ ]]),
38
45
  style: vue.normalizeStyle(style.value)
39
46
  }, [
40
47
  vue.renderSlot(_ctx.$slots, "label-before", {}, void 0, true),
41
48
  vue.createElementVNode("input", vue.mergeProps({
42
49
  type: "checkbox",
43
- class: "h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50"
50
+ class: "h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary"
44
51
  }, attrs.value, {
45
52
  checked: __props.modelValue,
46
53
  onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
@@ -52,5 +59,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
52
59
  };
53
60
  }
54
61
  });
55
- const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-81cd6154"]]);
62
+ const pCheckbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-b394a2f0"]]);
56
63
  module.exports = pCheckbox;
package/dist/es/p-checkbox.js CHANGED
@@ -31,15 +31,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
31
31
  const style = computed(() => {
32
32
  return allAttrs.style;
33
33
  });
34
+ const isDisabled = computed(() => {
35
+ return "disabled" in allAttrs && allAttrs.disabled !== false;
36
+ });
34
37
  return (_ctx, _cache) => {
35
38
  return openBlock(), createElementBlock("label", {
36
- class: normalizeClass(["inline-flex items-center", [{ hidden: _ctx.$attrs.hidden }, _ctx.$attrs.class]]),
39
+ class: normalizeClass(["inline-flex items-center", [
40
+ { hidden: _ctx.$attrs.hidden },
41
+ _ctx.$attrs.class,
42
+ { "cursor-not-allowed opacity-50": isDisabled.value, "cursor-pointer": !isDisabled.value }
43
+ ]]),
37
44
  style: normalizeStyle(style.value)
38
45
  }, [
39
46
  renderSlot(_ctx.$slots, "label-before", {}, void 0, true),
40
47
  createElementVNode("input", mergeProps({
41
48
  type: "checkbox",
42
- class: "h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50"
49
+ class: "h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary"
43
50
  }, attrs.value, {
44
51
  checked: __props.modelValue,
45
52
  onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event.target.checked))
@@ -51,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
51
58
  };
52
59
  }
53
60
  });
54
- const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-81cd6154"]]);
61
+ const pCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b394a2f0"]]);
55
62
  export {
56
63
  pCheckbox as default
57
64
  };
package/dist/squirrel.css CHANGED
@@ -191,7 +191,7 @@ div[id^=popper_].dropdown .v-popper__inner .dropdown-menu .dropdown-divider {
191
191
  --tw-content: "";
192
192
  content: var(--tw-content);
193
193
  }
194
- input[type='checkbox'][data-v-81cd6154]:checked {
194
+ input[type='checkbox'][data-v-b394a2f0]:checked {
195
195
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
196
196
  }
197
197
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pequity/squirrel",
3
3
  "description": "Squirrel component library",
4
- "version": "8.3.4",
4
+ "version": "8.3.5",
5
5
  "packageManager": "pnpm@10.6.4",
6
6
  "type": "module",
7
7
  "scripts": {
package/squirrel/components/p-checkbox/p-checkbox.spec.js CHANGED
@@ -14,7 +14,6 @@ const checkboxClasses = [
14
14
  'ease-in-out',
15
15
  'checked:border-none',
16
16
  'checked:bg-primary',
17
- 'disabled:opacity-50',
18
17
  ];
19
18
 
20
19
  describe('PCheckbox.vue', () => {
@@ -39,4 +38,20 @@ describe('PCheckbox.vue', () => {
39
38
  expect(input.classes()).toEqual(checkboxClasses);
40
39
  expect(input.attributes().disabled).toBeDefined();
41
40
  });
41
+
42
+ it('applies correct styling to label based on disabled state', async () => {
43
+ const enabledWrapper = createWrapperFor(PCheckbox, { props: { checked: true } });
44
+ const disabledWrapper = createWrapperFor(PCheckbox, { props: { checked: true, disabled: true } });
45
+
46
+ const enabledLabel = await enabledWrapper.find('label');
47
+ const disabledLabel = await disabledWrapper.find('label');
48
+
49
+ expect(enabledLabel.classes()).toContain('cursor-pointer');
50
+ expect(enabledLabel.classes()).not.toContain('cursor-not-allowed');
51
+ expect(enabledLabel.classes()).not.toContain('opacity-50');
52
+
53
+ expect(disabledLabel.classes()).toContain('cursor-not-allowed');
54
+ expect(disabledLabel.classes()).toContain('opacity-50');
55
+ expect(disabledLabel.classes()).not.toContain('cursor-pointer');
56
+ });
42
57
  });
package/squirrel/components/p-checkbox/p-checkbox.vue CHANGED
@@ -1,9 +1,17 @@
1
1
  <template>
2
- <label class="inline-flex items-center" :class="[{ hidden: $attrs.hidden }, $attrs.class]" :style="style">
2
+ <label
3
+ class="inline-flex items-center"
4
+ :class="[
5
+ { hidden: $attrs.hidden },
6
+ $attrs.class,
7
+ { 'cursor-not-allowed opacity-50': isDisabled, 'cursor-pointer': !isDisabled },
8
+ ]"
9
+ :style="style"
10
+ >
3
11
  <slot name="label-before"></slot>
4
12
  <input
5
13
  type="checkbox"
6
- class="h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary disabled:opacity-50"
14
+ class="h-4 w-4 shrink-0 appearance-none rounded border border-p-gray-30 bg-surface duration-100 ease-in-out checked:border-none checked:bg-primary"
7
15
  v-bind="attrs"
8
16
  :checked="modelValue"
9
17
  @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
@@ -48,6 +56,10 @@ const attrs = computed(() => {
48
56
  const style = computed(() => {
49
57
  return allAttrs.style as StyleValue;
50
58
  });
59
+
60
+ const isDisabled = computed(() => {
61
+ return 'disabled' in allAttrs && allAttrs.disabled !== false;
62
+ });
51
63
  </script>
52
64
 
53
65
  <style lang="css" scoped>