@pequity/squirrel 5.4.10 → 5.5.0

package/dist/cjs/chunks/p-date-picker.js

@@ -132,6 +132,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       res.required = props.required;
       res.disabled = props.disabled;
       res.placeholder = props.placeholder ? props.placeholder : props.format;
+      res.name = props.name;
+      res.readonly = props.readonly;
       return res;
     });
     const handleInput = (e, onInputFn, onClearFn) => {

package/dist/cjs/p-modal.js

@@ -15,7 +15,10 @@ const _hoisted_7 = {
   class: "mb-4 px-8"
 };
 const _hoisted_8 = ["id"];
-const _hoisted_9 = { class: "mt-6 px-8 pt-6" };
+const _hoisted_9 = {
+  key: 0,
+  class: "px-8 pt-6"
+};
 const FOCUSABLE_ELEMENTS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -111,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "8621f24e": __props.maxWidth
+      "4895a587": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -352,11 +355,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
                   ], 10, _hoisted_8)
                 ], true),
-                _ctx.$slots["footer"] ? vue.renderSlot(_ctx.$slots, "footer-wrapper", { key: 1 }, () => [
-                  vue.createElementVNode("div", _hoisted_9, [
+                vue.renderSlot(_ctx.$slots, "footer-wrapper", {}, () => [
+                  _ctx.$slots["footer"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
                     vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                  ])
-                ], true) : vue.createCommentVNode("", true)
+                  ])) : vue.createCommentVNode("", true)
+                ], true)
               ], 14, _hoisted_3)
             ], 46, _hoisted_2), [
               [vue.vShow, show.value]
@@ -368,5 +371,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-7a8f90b4"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-5fd440a3"]]);
 module.exports = pModal;

package/dist/cjs/p-select-pill.js

@@ -91,7 +91,7 @@ const _hoisted_2 = {
   ref: "pill",
   class: "absolute left-0 top-0 inline-block h-full rounded-full bg-surface duration-200 ease-in-out"
 };
-const _hoisted_3 = ["disabled", "onClick"];
+const _hoisted_3 = ["disabled", "data-selected", "onClick"];
 const _hoisted_4 = { class: "flex" };
 const _hoisted_5 = {
   key: 0,
@@ -109,6 +109,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.modelValue === o[_ctx.itemValue] ? `${_ctx.ACTIVE_CLASS} hover:text-p-purple-70` : "hover:text-p-gray-60",
           { "opacity-25": o.disabled }
         ]]),
+        "data-selected": _ctx.modelValue === o[_ctx.itemValue],
         onClick: ($event) => _ctx.click($event, o)
       }, [
         vue.createElementVNode("div", _hoisted_4, [

package/dist/es/chunks/p-date-picker.js

@@ -131,6 +131,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       res.required = props.required;
       res.disabled = props.disabled;
       res.placeholder = props.placeholder ? props.placeholder : props.format;
+      res.name = props.name;
+      res.readonly = props.readonly;
       return res;
     });
     const handleInput = (e, onInputFn, onClearFn) => {

package/dist/es/p-modal.js

@@ -14,7 +14,10 @@ const _hoisted_7 = {
   class: "mb-4 px-8"
 };
 const _hoisted_8 = ["id"];
-const _hoisted_9 = { class: "mt-6 px-8 pt-6" };
+const _hoisted_9 = {
+  key: 0,
+  class: "px-8 pt-6"
+};
 const FOCUSABLE_ELEMENTS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -110,7 +113,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "8621f24e": __props.maxWidth
+      "4895a587": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -351,11 +354,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "default", {}, void 0, true)
                   ], 10, _hoisted_8)
                 ], true),
-                _ctx.$slots["footer"] ? renderSlot(_ctx.$slots, "footer-wrapper", { key: 1 }, () => [
-                  createElementVNode("div", _hoisted_9, [
+                renderSlot(_ctx.$slots, "footer-wrapper", {}, () => [
+                  _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_9, [
                     renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-                  ])
-                ], true) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true)
+                ], true)
               ], 14, _hoisted_3)
             ], 46, _hoisted_2), [
               [vShow, show.value]
@@ -367,7 +370,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7a8f90b4"]]);
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5fd440a3"]]);
 export {
   pModal as default
 };

package/dist/es/p-select-pill.js

@@ -90,7 +90,7 @@ const _hoisted_2 = {
   ref: "pill",
   class: "absolute left-0 top-0 inline-block h-full rounded-full bg-surface duration-200 ease-in-out"
 };
-const _hoisted_3 = ["disabled", "onClick"];
+const _hoisted_3 = ["disabled", "data-selected", "onClick"];
 const _hoisted_4 = { class: "flex" };
 const _hoisted_5 = {
   key: 0,
@@ -108,6 +108,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.modelValue === o[_ctx.itemValue] ? `${_ctx.ACTIVE_CLASS} hover:text-p-purple-70` : "hover:text-p-gray-60",
           { "opacity-25": o.disabled }
         ]]),
+        "data-selected": _ctx.modelValue === o[_ctx.itemValue],
         onClick: ($event) => _ctx.click($event, o)
       }, [
         createElementVNode("div", _hoisted_4, [

package/dist/style.css

@@ -367,33 +367,33 @@ to {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
 }
-}.pm[data-v-7a8f90b4] {
+}.pm[data-v-5fd440a3] {
   width: calc(100% - 32px);
   min-width: 110px;
-  max-width: var(--8621f24e);
+  max-width: var(--4895a587);
   max-height: calc(100vh - 32px);
 }
-.fadeIn[data-v-7a8f90b4] {
+.fadeIn[data-v-5fd440a3] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-7a8f90b4;
+  animation-name: fadeInFrames-5fd440a3;
   animation-fill-mode: both;
 }
-.fadeOut[data-v-7a8f90b4] {
+.fadeOut[data-v-5fd440a3] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-7a8f90b4;
+  animation-name: fadeOutFrames-5fd440a3;
   animation-fill-mode: both;
 }
-.slideInTop[data-v-7a8f90b4] {
+.slideInTop[data-v-5fd440a3] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-7a8f90b4,slideInTopFrames-7a8f90b4;
+  animation-name: fadeInFrames-5fd440a3,slideInTopFrames-5fd440a3;
   animation-fill-mode: both;
 }
-.slideOutTop[data-v-7a8f90b4] {
+.slideOutTop[data-v-5fd440a3] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-7a8f90b4,slideOutTopFrames-7a8f90b4;
+  animation-name: fadeOutFrames-5fd440a3,slideOutTopFrames-5fd440a3;
   animation-fill-mode: both;
 }
-@keyframes slideInTopFrames-7a8f90b4 {
+@keyframes slideInTopFrames-5fd440a3 {
 from {
     transform: translate(0, -12px);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
@@ -402,7 +402,7 @@ to {
     transform: translate(0, 0);
 }
 }
-@keyframes slideOutTopFrames-7a8f90b4 {
+@keyframes slideOutTopFrames-5fd440a3 {
 from {
     transform: translate(0, 0);
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -411,7 +411,7 @@ to {
     transform: translate(0, -12px);
 }
 }
-@keyframes fadeInFrames-7a8f90b4 {
+@keyframes fadeInFrames-5fd440a3 {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -420,7 +420,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-7a8f90b4 {
+@keyframes fadeOutFrames-5fd440a3 {
 from {
     opacity: 1;
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pequity/squirrel",
   "description": "Squirrel component library",
-  "version": "5.4.10",
+  "version": "5.5.0",
   "packageManager": "pnpm@9.12.3",
   "type": "module",
   "scripts": {

package/squirrel/components/p-date-picker/p-date-picker.vue

@@ -64,6 +64,8 @@ const inputPropsAndAttrs = computed(() => {
   res.required = props.required;
   res.disabled = props.disabled;
   res.placeholder = props.placeholder ? props.placeholder : props.format;
+  res.name = props.name;
+  res.readonly = props.readonly;
 
   return res;
 });

package/squirrel/components/p-modal/p-modal.vue

@@ -59,8 +59,8 @@
               <slot></slot>
             </div>
           </slot>
-          <slot v-if="$slots['footer']" name="footer-wrapper">
-            <div class="mt-6 px-8 pt-6">
+          <slot name="footer-wrapper">
+            <div v-if="$slots['footer']" class="px-8 pt-6">
               <slot name="footer"></slot>
             </div>
           </slot>

package/squirrel/components/p-select-pill/p-select-pill.spec.js

@@ -45,6 +45,7 @@ describe('PSelectPill.vue', () => {
     const selected = wrapper.findAll('button')[3];
 
     expect(selected.classes()).toContain(ACTIVE_CLASS);
+    expect(selected.attributes('data-selected')).toBe('true');
   });
 
   it(`updates the value bound with v-model when an option is clicked`, async () => {
@@ -64,6 +65,7 @@ describe('PSelectPill.vue', () => {
     const selected = wrapper.findAll('button')[3];
 
     expect(selected.classes()).toContain(ACTIVE_CLASS);
+    expect(selected.attributes('data-selected')).toBe('true');
   });
 
   it('works with custom itemValue and itemText', async () => {

package/squirrel/components/p-select-pill/p-select-pill.vue

@@ -16,6 +16,7 @@
         modelValue === o[itemValue] ? `${ACTIVE_CLASS} hover:text-p-purple-70` : 'hover:text-p-gray-60',
         { 'opacity-25': o.disabled },
       ]"
+      :data-selected="modelValue === o[itemValue]"
       @click="click($event, o)"
     >
       <div class="flex">