@pequity/squirrel 8.3.0 → 8.3.1

package/dist/cjs/p-modal.js

@@ -46,10 +46,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       type: [String, Object, Array],
       default: "fixed bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center overflow-y-auto overflow-x-hidden outline-none"
     },
-    modalClass: {
+    modalBaseClass: {
       type: [String, Object, Array],
       default: "pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl"
     },
+    modalClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
     modalStyle: {
       type: [String, Object, Array],
       default: ""
@@ -106,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   emits: ["before-open", "opening", "opened", "before-close", "closing", "closed", "update:modelValue", "click:overlay"],
   setup(__props, { emit: __emit }) {
     vue.useCssVars((_ctx) => ({
-      "56e8ccbe": __props.maxWidth
+      "29225c6f": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -155,8 +159,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const overlayClick = (e) => {
-      emit("click:overlay", e);
       if (e.target === pmWrapper.value) {
+        emit("click:overlay", e);
         close();
       }
     };
@@ -309,7 +313,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", {
                 ref: "pm",
                 "data-pm-id": id.value,
-                class: vue.normalizeClass(__props.modalClass),
+                class: vue.normalizeClass([__props.modalBaseClass, __props.modalClass]),
                 style: vue.normalizeStyle(__props.modalStyle)
               }, [
                 vue.renderSlot(_ctx.$slots, "title-wrapper", {}, () => [
@@ -364,5 +368,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-18201676"]]);
+const pModal = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a511ac01"]]);
 module.exports = pModal;

package/dist/es/p-modal.js

@@ -45,10 +45,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       type: [String, Object, Array],
       default: "fixed bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center overflow-y-auto overflow-x-hidden outline-none"
     },
-    modalClass: {
+    modalBaseClass: {
       type: [String, Object, Array],
       default: "pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl"
     },
+    modalClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
     modalStyle: {
       type: [String, Object, Array],
       default: ""
@@ -105,7 +109,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["before-open", "opening", "opened", "before-close", "closing", "closed", "update:modelValue", "click:overlay"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "56e8ccbe": __props.maxWidth
+      "29225c6f": __props.maxWidth
     }));
     let animatingZIndex = 0;
     const emit = __emit;
@@ -154,8 +158,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const overlayClick = (e) => {
-      emit("click:overlay", e);
       if (e.target === pmWrapper.value) {
+        emit("click:overlay", e);
         close();
       }
     };
@@ -308,7 +312,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createElementVNode("div", {
                 ref: "pm",
                 "data-pm-id": id.value,
-                class: normalizeClass(__props.modalClass),
+                class: normalizeClass([__props.modalBaseClass, __props.modalClass]),
                 style: normalizeStyle(__props.modalStyle)
               }, [
                 renderSlot(_ctx.$slots, "title-wrapper", {}, () => [
@@ -363,7 +367,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18201676"]]);
+const pModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a511ac01"]]);
 export {
   pModal as default
 };

package/dist/squirrel/components/p-modal/p-modal.vue.d.ts

@@ -32,6 +32,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<StyleValue>;
         default: string;
     };
+    modalBaseClass: {
+        type: PropType<StyleValue>;
+        default: string;
+    };
     modalClass: {
         type: PropType<StyleValue>;
         default: string;
@@ -118,6 +122,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         type: PropType<StyleValue>;
         default: string;
     };
+    modalBaseClass: {
+        type: PropType<StyleValue>;
+        default: string;
+    };
     modalClass: {
         type: PropType<StyleValue>;
         default: string;
@@ -198,6 +206,7 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     baseZindex: number;
     bgClass: StyleValue;
     wrapperClass: StyleValue;
+    modalBaseClass: StyleValue;
     modalClass: StyleValue;
     modalStyle: StyleValue;
     bgInClass: string;

package/dist/squirrel.css

@@ -295,33 +295,33 @@ to {
     opacity: 0;
     transform: translate3d(0, -100%, 0);
 }
-}.pm[data-v-18201676] {
+}.pm[data-v-a511ac01] {
   width: calc(100% - 32px);
   min-width: 110px;
-  max-width: var(--56e8ccbe);
+  max-width: var(--29225c6f);
   max-height: calc(100vh - 32px);
 }
-.fadeIn[data-v-18201676] {
+.fadeIn[data-v-a511ac01] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-18201676;
+  animation-name: fadeInFrames-a511ac01;
   animation-fill-mode: both;
 }
-.fadeOut[data-v-18201676] {
+.fadeOut[data-v-a511ac01] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-18201676;
+  animation-name: fadeOutFrames-a511ac01;
   animation-fill-mode: both;
 }
-.slideInTop[data-v-18201676] {
+.slideInTop[data-v-a511ac01] {
   animation-duration: 0.4s;
-  animation-name: fadeInFrames-18201676,slideInTopFrames-18201676;
+  animation-name: fadeInFrames-a511ac01,slideInTopFrames-a511ac01;
   animation-fill-mode: both;
 }
-.slideOutTop[data-v-18201676] {
+.slideOutTop[data-v-a511ac01] {
   animation-duration: 0.2s;
-  animation-name: fadeOutFrames-18201676,slideOutTopFrames-18201676;
+  animation-name: fadeOutFrames-a511ac01,slideOutTopFrames-a511ac01;
   animation-fill-mode: both;
 }
-@keyframes slideInTopFrames-18201676 {
+@keyframes slideInTopFrames-a511ac01 {
 from {
     transform: translate(0, -12px);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
@@ -330,7 +330,7 @@ to {
     transform: translate(0, 0);
 }
 }
-@keyframes slideOutTopFrames-18201676 {
+@keyframes slideOutTopFrames-a511ac01 {
 from {
     transform: translate(0, 0);
     animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
@@ -339,7 +339,7 @@ to {
     transform: translate(0, -12px);
 }
 }
-@keyframes fadeInFrames-18201676 {
+@keyframes fadeInFrames-a511ac01 {
 from {
     opacity: 0;
     animation-timing-function: cubic-bezier(0, 0, 1, 1);
@@ -348,7 +348,7 @@ to {
     opacity: 1;
 }
 }
-@keyframes fadeOutFrames-18201676 {
+@keyframes fadeOutFrames-a511ac01 {
 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": "8.3.0",
+  "version": "8.3.1",
   "packageManager": "pnpm@10.6.4",
   "type": "module",
   "scripts": {

package/squirrel/components/p-drawer/p-drawer.stories.js

@@ -1,4 +1,5 @@
 import PDrawer from '@squirrel/components/p-drawer/p-drawer.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PDrawer',
@@ -27,7 +28,9 @@ export const Default = {
     return {
       components: { PDrawer },
       setup() {
-        return { argsWithoutSlots };
+        const show = ref(false);
+
+        return { argsWithoutSlots, show };
       },
       template: `
         <div>
@@ -39,11 +42,6 @@ export const Default = {
             </template>
           </PDrawer>
         </div>`,
-      data() {
-        return {
-          show: false,
-        };
-      },
     };
   },
   args: {

package/squirrel/components/p-dropdown/p-dropdown.stories.js

@@ -1,4 +1,5 @@
 import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PDropdown',
@@ -66,7 +67,10 @@ export const DynamicReference = {
   render: (args) => ({
     components: { PDropdown },
     setup() {
-      return { args };
+      const show1 = ref(false);
+      const show1Reference = ref(null);
+
+      return { args, show1, show1Reference };
     },
     template: `
     <div>
@@ -85,12 +89,6 @@ export const DynamicReference = {
         </template>
       </PDropdown>
     </div>`,
-    data() {
-      return {
-        show1: false,
-        show1Reference: null,
-      };
-    },
     methods: {
       showDyn(e) {
         this.show1Reference = e.target;

package/squirrel/components/p-dropdown-select/p-dropdown-select.stories.js

@@ -134,7 +134,9 @@ export const WithSlots = {
   render: (args) => ({
     components: { PDropdownSelect },
     setup() {
-      return { args };
+      const selected = ref(null);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -160,11 +162,6 @@ export const WithSlots = {
         </div>
       </div>
       `,
-    data() {
-      return {
-        selected: null,
-      };
-    },
   }),
   argTypes: {
     ...fieldArgTypes,
@@ -188,7 +185,11 @@ export const Sizes = {
   render: (args) => ({
     components: { PDropdownSelect },
     setup() {
-      return { args };
+      const selectedSm = ref(null);
+      const selectedMd = ref(null);
+      const selectedLg = ref(null);
+
+      return { args, selectedSm, selectedMd, selectedLg };
     },
     template: `
       <div>
@@ -214,13 +215,6 @@ export const Sizes = {
         />                    
       </div>
     `,
-    data() {
-      return {
-        selectedSm: null,
-        selectedMd: null,
-        selectedLg: null,
-      };
-    },
   }),
   argTypes: {
     ...fieldArgTypes,

package/squirrel/components/p-input-percent/p-input-percent.stories.js

@@ -1,5 +1,6 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PInputPercent from '@squirrel/components/p-input-percent/p-input-percent.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PInputPercent',
@@ -26,7 +27,9 @@ export const Default = {
   render: (args) => ({
     components: { PInputPercent },
     setup() {
-      return { args };
+      const value = ref(0.12);
+
+      return { args, value };
     },
     template: `
       <div>
@@ -34,11 +37,6 @@ export const Default = {
         Model value: {{ value }}
       </div>
     `,
-    data() {
-      return {
-        value: 0.12,
-      };
-    },
   }),
   args: {
     size: 'md',
@@ -50,7 +48,9 @@ export const Sizes = {
   render: (args) => ({
     components: { PInputPercent },
     setup() {
-      return { args };
+      const value = ref(0.23);
+
+      return { args, value };
     },
     template: `
       <div>
@@ -60,11 +60,6 @@ export const Sizes = {
         <div class="mt-6">{{ value }}</div>
       </div>
     `,
-    data() {
-      return {
-        value: 0.23,
-      };
-    },
   }),
   argTypes: {
     ...fieldArgTypes,

package/squirrel/components/p-modal/p-modal-basic.spec.js

@@ -78,4 +78,36 @@ describe('Modal basic functionality', () => {
 
     wrapper.unmount();
   });
+
+  it('sets the correct base modal class', async () => {
+    const wrapper = createWrapperContainer();
+
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.find('[data-pm-id]').classes()).toEqual(
+      'pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl'.split(' ')
+    );
+
+    wrapper.unmount();
+  });
+
+  it('passes the modalBaseClass prop to the modal', async () => {
+    const wrapper = createWrapperContainer({ modalBaseClass: 'custom-class' });
+
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.find('[data-pm-id]').classes()).toEqual(['custom-class']);
+
+    wrapper.unmount();
+  });
+
+  it('passes the modalClass prop to the modal', async () => {
+    const wrapper = createWrapperContainer({ modalClass: 'h-full' });
+
+    await wrapper.setData({ showModal: true });
+
+    expect(wrapper.find('[data-pm-id]').classes()).toContain('h-full');
+
+    wrapper.unmount();
+  });
 });

package/squirrel/components/p-modal/p-modal.stories.js

@@ -65,3 +65,25 @@ export const Default = {
     `,
   },
 };
+
+export const FullHeight = {
+  render: (args) => ({
+    components: { PModal, PBtn },
+    setup() {
+      const modal = usePModal();
+
+      return { args, modal };
+    },
+    template: `
+      <div>
+        <PBtn @click="modal.show('full-height-modal')">Open full height modal</PBtn>
+        <PModal v-bind="args">${args.default}</PModal>
+      </div>`,
+  }),
+  args: {
+    name: 'full-height-modal',
+    title: 'Full height modal',
+    modalClass: 'h-full',
+    default: Default.args.default,
+  },
+};

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

@@ -29,7 +29,7 @@
         @click="overlayClick($event)"
         @keydown="keydown($event)"
       >
-        <div ref="pm" :data-pm-id="id" :class="modalClass" :style="modalStyle">
+        <div ref="pm" :data-pm-id="id" :class="[modalBaseClass, modalClass]" :style="modalStyle">
           <slot name="title-wrapper">
             <div class="flex pb-4 pl-8 pr-4 pt-4">
               <h3 v-if="title" :id="`${id}-title`" class="mr-auto pt-4 text-xl font-semibold">
@@ -127,10 +127,14 @@ const props = defineProps({
     default:
       'fixed bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center overflow-y-auto overflow-x-hidden outline-none',
   },
-  modalClass: {
+  modalBaseClass: {
     type: [String, Object, Array] as PropType<StyleValue>,
     default: 'pm relative flex flex-col rounded-2xl pb-6 cursor-default bg-surface shadow-xl',
   },
+  modalClass: {
+    type: [String, Object, Array] as PropType<StyleValue>,
+    default: '',
+  },
   modalStyle: {
     type: [String, Object, Array] as PropType<StyleValue>,
     default: '',
@@ -236,9 +240,8 @@ const close = () => {
 };
 
 const overlayClick = (e: MouseEvent) => {
-  emit('click:overlay', e);
-
   if (e.target === pmWrapper.value) {
+    emit('click:overlay', e);
     close();
   }
 };

package/squirrel/components/p-pagination/p-pagination.stories.js

@@ -1,4 +1,5 @@
 import PPagination from '@squirrel/components/p-pagination/p-pagination.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PPagination',
@@ -7,7 +8,9 @@ export default {
   render: (args) => ({
     components: { PPagination },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -17,11 +20,6 @@ export default {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   parameters: {
     docs: {

package/squirrel/components/p-select/p-select.stories.js

@@ -1,13 +1,13 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PSelect from '@squirrel/components/p-select/p-select.vue';
 
-const selectItems = Object.freeze([
+const selectItems = [
   { value: 1, text: 'Aleksandr Chappel' },
   { value: 2, text: 'Van Deyes' },
   { value: 3, text: 'Meris Hardman and a very long text here' },
   { value: 4, text: 'Chick Catto' },
   { value: 5, text: "Alys O'Flynn" },
-]);
+];
 
 export default {
   title: 'Components/PSelect',

package/squirrel/components/p-select-btn/p-select-btn.stories.js

@@ -1,14 +1,15 @@
 import { fieldArgTypes } from '@root/stories/common/field';
 import PSelectBtn from '@squirrel/components/p-select-btn/p-select-btn.vue';
 import { expect, userEvent, within } from '@storybook/test';
+import { ref } from 'vue';
 
-const selectItems = Object.freeze([
+const selectItems = [
   { value: 1, text: 'Aleksandr Chappel', tooltip: 'lorem ipsum text 1' },
   { value: 2, text: 'Van Deyes', tooltip: 'lorem ipsum text 2' },
   { value: 3, text: 'Meris Hardman', tooltip: 'lorem ipsum text 3' },
   { value: 4, text: 'Chick Catto', tooltip: 'lorem ipsum text 4' },
   { value: 5, text: "Alys O'Flynn", tooltip: 'lorem ipsum text 5' },
-]);
+];
 
 export default {
   title: 'Components/PSelectBtn',
@@ -17,7 +18,9 @@ export default {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -27,11 +30,6 @@ export default {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     size: fieldArgTypes.size,
@@ -86,7 +84,9 @@ export const Sizes = {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -101,11 +101,6 @@ export const Sizes = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {
@@ -135,7 +130,9 @@ export const WithTooltip = {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -144,11 +141,6 @@ export const WithTooltip = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {
@@ -218,7 +210,9 @@ export const MultipleSelected = {
   render: (args) => ({
     components: { PSelectBtn },
     setup() {
-      return { args };
+      const selected = ref([{ value: 2, text: 'Van Deyes', tooltip: 'lorem ipsum text 2' }]);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -228,11 +222,6 @@ export const MultipleSelected = {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: [{ value: 2, text: 'Van Deyes', tooltip: 'lorem ipsum text 2' }],
-      };
-    },
   }),
   args: {
     items: selectItems,

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

@@ -2,16 +2,17 @@ import { fieldArgTypes } from '@root/stories/common/field';
 import { getCSSTransitionDuration, sleep } from '@root/stories/common/helpers';
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
 import { expect, userEvent, within } from '@storybook/test';
+import { ref } from 'vue';
 
 const ACTIVE_CLASS = 'text-p-purple-60';
 
-const selectItems = Object.freeze([
+const selectItems = [
   { value: 1, text: 'Aleksandr Chappel' },
   { value: 2, text: 'Van Deyes' },
   { value: 3, text: 'Meris Hardman' },
   { value: 4, text: 'Chick Catto' },
   { value: 5, text: "Alys O'Flynn" },
-]);
+];
 
 const selectItemsSubtext = selectItems.map((item, i) => ({ ...item, subtext: `text${i + 1}` }));
 
@@ -22,7 +23,9 @@ export default {
   render: (args) => ({
     components: { PSelectPill },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -32,11 +35,6 @@ export default {
         Selected: {{ selected }}
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     size: fieldArgTypes.size,
@@ -98,7 +96,9 @@ export const Sizes = {
   render: (args) => ({
     components: { PSelectPill },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -113,11 +113,6 @@ export const Sizes = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {
@@ -147,7 +142,9 @@ export const Subtext = {
   render: (args) => ({
     components: { PSelectPill },
     setup() {
-      return { args };
+      const selected = ref(1);
+
+      return { args, selected };
     },
     template: `
       <div>
@@ -156,11 +153,6 @@ export const Subtext = {
         </div>
       </div>
     `,
-    data() {
-      return {
-        selected: 1,
-      };
-    },
   }),
   argTypes: {
     modelValue: {

package/squirrel/components/p-table-sort/p-table-sort.stories.js

@@ -1,5 +1,6 @@
 import { SORTING_TYPES } from '@squirrel/components/p-table-sort/p-table-sort.config';
 import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Components/PTableSort',
@@ -37,17 +38,14 @@ export const WithVModel = {
   render: (args) => ({
     components: { PTableSort },
     setup() {
-      return { args };
+      const selected = ref(SORTING_TYPES.NO_SORTING);
+
+      return { args, selected };
     },
     template: `
       <div>
         <PTableSort v-model="selected" v-bind="args" />
         <div class="mt-2">Selected: {{ selected }}</div>
       </div>`,
-    data() {
-      return {
-        selected: SORTING_TYPES.NO_SORTING,
-      };
-    },
   }),
 };