@pequity/squirrel 6.0.14 → 6.1.1

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

@@ -21,25 +21,36 @@
     :disabled="!!$attrs.disabled || loading ? true : null"
     :aria-disabled="$attrs.disabled"
   >
-    <div :class="{ invisible: loading }"><slot></slot></div>
+    <div :class="[{ invisible: loading }, classes.content]">
+      <PIcon v-if="icon" :icon="icon" :class="classes.icon" />
+      <span class="slot-wrapper empty:hidden">
+        <slot></slot>
+      </span>
+      <PIcon v-if="iconRight" :icon="iconRight" :class="classes.icon" />
+    </div>
     <PRingLoader v-if="loading" :size="loaderSize" :class="classes.loader" />
   </Component>
 </template>
 
 <script lang="ts">
 import { type Size, SIZES } from '@squirrel/components/p-btn/p-btn.types';
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
 import PRingLoader from '@squirrel/components/p-ring-loader/p-ring-loader.vue';
 import { isExternalLink } from '@squirrel/utils/link';
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 import { tv, type VariantProps } from 'tailwind-variants';
-import { defineComponent, type PropType } from 'vue';
-import { type RouteLocationRaw, RouterLink } from 'vue-router';
+import { computed, type PropType } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+
+type Icon = InstanceType<typeof PIcon>['$props']['icon'];
 
 const btnClasses = {
   slots: {
     button:
       'relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50',
+    content: 'flex items-center justify-center has-[.slot-wrapper:empty]:gap-0',
     loader: 'absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium',
+    icon: 'shrink-0',
   },
   variants: {
     type: {
@@ -72,9 +83,21 @@ const btnClasses = {
       'secondary-ghost-dark': { button: 'text-white hover:bg-p-purple-50', loader: 'text-p-blue-15' },
     },
     size: {
-      sm: { button: 'px-2 py-1 text-sm' },
-      md: { button: 'px-6 py-2 text-base' },
-      lg: { button: 'px-6 py-2.5 text-lg' },
+      sm: {
+        button: 'px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5',
+        content: 'gap-1',
+        icon: 'text-[20px]',
+      },
+      md: {
+        button: 'px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base',
+        content: 'gap-2',
+        icon: 'text-xl',
+      },
+      lg: {
+        button: 'px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7',
+        content: 'gap-2.5',
+        icon: 'text-2xl',
+      },
     },
   },
   defaultVariants: {
@@ -84,87 +107,97 @@ const btnClasses = {
 } as const;
 
 const btn = tv(btnClasses);
+
 const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
 const BUTTON_NATIVE_TYPES = ['button', 'submit', 'reset'] as const;
 const LOADER_SIZES = { sm: 24, md: 30, lg: 40 } as const satisfies { [key in Size]: number };
 
 type ButtonNativeType = (typeof BUTTON_NATIVE_TYPES)[number];
 type ButtonType = NonNullable<VariantProps<typeof btn>['type']>;
+</script>
 
-export default defineComponent({
+<script setup lang="ts">
+defineOptions({
   name: 'PBtn',
-  components: {
-    PRingLoader,
-    RouterLink,
-  },
   inheritAttrs: false,
-  props: {
-    /**
-     * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
-     */
-    type: {
-      type: String as PropType<ButtonType>,
-      default: 'primary',
-      validator(value: ButtonType) {
-        return BUTTON_TYPES.includes(value);
-      },
-    },
-    /**
-     * The button native type e.g button, submit, reset
-     */
-    nativeType: {
-      type: String as PropType<ButtonNativeType>,
-      default: 'button',
-      validator(value: ButtonNativeType) {
-        return BUTTON_NATIVE_TYPES.includes(value);
-      },
-    },
-    /**
-     * The button size e.g sm, md, lg
-     */
-    size: {
-      type: String as PropType<Size>,
-      default: 'md',
-      validator(value: Size) {
-        return SIZES.includes(value);
-      },
-    },
-    /**
-     * Whether the button is loading
-     */
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Whether the button is selected (sets aria-selected attribute)
-     */
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
-     * See https://router.vuejs.org/api/#RouteLocationRaw
-     */
-    to: {
-      type: [Object, String] as PropType<RouteLocationRaw>,
-      default: '',
+});
+
+const props = defineProps({
+  /**
+   * The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
+   */
+  type: {
+    type: String as PropType<ButtonType>,
+    default: 'primary',
+    validator(value: ButtonType) {
+      return BUTTON_TYPES.includes(value);
     },
   },
-  computed: {
-    classes() {
-      const { button, loader } = btn({ type: this.type, size: this.size });
-
-      return { button: button(), loader: loader() };
+  /**
+   * The button native type e.g button, submit, reset
+   */
+  nativeType: {
+    type: String as PropType<ButtonNativeType>,
+    default: 'button',
+    validator(value: ButtonNativeType) {
+      return BUTTON_NATIVE_TYPES.includes(value);
     },
-    loaderSize() {
-      return Number(`${LOADER_SIZES[this.size]}`);
+  },
+  /**
+   * The button size e.g sm, md, lg
+   */
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator(value: Size) {
+      return SIZES.includes(value);
     },
   },
-  methods: {
-    isExternalLink,
-    sanitizeUrl,
+  /**
+   * Whether the button is loading
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Whether the button is selected (sets aria-selected attribute)
+   */
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
+   * See https://router.vuejs.org/api/#RouteLocationRaw
+   */
+  to: {
+    type: [Object, String] as PropType<RouteLocationRaw>,
+    default: '',
   },
+  /**
+   * The icon to display on the button
+   */
+  icon: {
+    type: String as PropType<Icon>,
+    default: '',
+  },
+  iconRight: {
+    type: String as PropType<Icon>,
+    default: '',
+  },
+});
+
+const classes = computed(() => {
+  const { button, content, loader, icon } = btn({
+    type: props.type,
+    size: props.size,
+  });
+
+  return { button: button(), content: content(), loader: loader(), icon: icon() };
+});
+
+const loaderSize = computed(() => {
+  return Number(`${LOADER_SIZES[props.size]}`);
 });
 </script>

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

@@ -1,6 +1,5 @@
 <template>
   <VDropdown ref="vPopper" v-bind="{ ...defaultAttrs, ...$attrs }" @show="onShow" @hide="destroy">
-    <!-- @vue-expect-error -->
     <template v-for="(_, slot) in $slots" #[slot]="scope">
       <slot :name="slot" v-bind="scope || {}" />
     </template>

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

@@ -45,7 +45,7 @@ const attrs = useAttrs();
 const { labelClasses, errorMsgClasses } = useInputClasses(props);
 
 // Computed
-const datePickerProps = computed(() => {
+const datePickerProps = computed<VueDatePickerProps>(() => {
   const { modelValue: _, ...propsWithoutModelValue } = props;
   const { class: classes, style, ...attrsWithoutClassAndStyle } = attrs;
 

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

@@ -134,7 +134,7 @@ describe('PSelectBtn.vue', () => {
       },
     });
 
-    const buttonDivs = await wrapper.findAll('div.inline-flex');
+    const buttonDivs = wrapper.findAll('div.inline-flex');
 
     buttonDivs.forEach((buttonDiv, i) => {
       expect(buttonDiv.attributes()['data-tooltip']).toBe(items[i].textCustom);
@@ -213,6 +213,25 @@ describe('PSelectBtn.vue', () => {
     });
   });
 
+  it('renders auto-width buttons', async () => {
+    const wrapper = createWrapperFor(PSelectBtn, {
+      props: {
+        items,
+        itemValue: 'valueCustom',
+        itemText: 'textCustom',
+        modelValue: 2,
+        grow: false,
+      },
+    });
+
+    const buttons = await wrapper.findAll('button');
+
+    expect(wrapper.classes()).toContain('flex');
+    buttons.forEach((button) => {
+      expect(button.classes()).not.toContain('flex-1');
+    });
+  });
+
   it('removes padding from buttons', async () => {
     const wrapper = createWrapperFor(PSelectBtn, {
       props: {
@@ -224,11 +243,11 @@ describe('PSelectBtn.vue', () => {
       },
     });
 
-    const buttonContainers = wrapper.findAll('div.inline-flex');
+    const buttonDivs = wrapper.findAll('div.inline-flex');
 
-    buttonContainers.forEach((buttonContainer) => {
-      expect(buttonContainer.classes()).toContain('*:px-0');
-      expect(buttonContainer.classes()).toContain('*:py-0');
+    buttonDivs.forEach((buttonDiv) => {
+      expect(buttonDiv.classes()).toContain('*:px-0');
+      expect(buttonDiv.classes()).toContain('*:py-0');
     });
   });
 

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

@@ -52,9 +52,11 @@ export const Default = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    await userEvent.click(canvas.getByText(/Meris/i));
+    const btn = canvas.getByRole('button', { name: /Aleksandr Chappel/i });
 
-    await expect(canvas.getByText(/Meris/i).parentNode.getAttribute('aria-selected')).toBe('true');
+    await userEvent.click(btn);
+
+    await expect(btn.getAttribute('aria-selected')).toBe('true');
   },
 };
 
@@ -72,9 +74,9 @@ export const DisabledOption = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const disabledEl = canvas.getByText(/Van/i);
+    const disabledBtn = canvas.getByRole('button', { name: /Van Deyes/i });
 
-    await expect(disabledEl.parentNode.hasAttribute('disabled')).toBe(true);
+    await expect(disabledBtn.hasAttribute('disabled')).toBe(true);
     await expect(canvas.getByText(/Meris/i).parentNode.hasAttribute('disabled')).toBe(false);
     await expect(canvas.getByText(/Chick/i).parentNode.hasAttribute('disabled')).toBe(false);
   },
@@ -245,3 +247,42 @@ export const MultipleSelected = {
     },
   },
 };
+
+export const WithIcons = {
+  args: {
+    items: [
+      { value: 1, text: 'Aleksandr Chappel', icon: 'archive' },
+      { value: 2, text: 'Van Deyes', icon: 'edit' },
+      { value: 3, text: 'Meris Hardman', icon: 'delete' },
+      { value: 4, text: 'Chick Catto', icon: 'send' },
+      { value: 5, text: "Alys O'Flynn", icon: 'settings' },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'We can pass an `icon` attribute to the list of options to add an icon to an option.',
+      },
+    },
+  },
+};
+
+export const WithIconsOnly = {
+  args: {
+    items: [
+      { value: 1, icon: 'archive' },
+      { value: 2, icon: 'edit' },
+      { value: 3, icon: 'delete' },
+      { value: 4, icon: 'send' },
+      { value: 5, icon: 'settings' },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'We can pass an `icon` attribute without a `text` attribute to the list of options to only display an icon.',
+      },
+    },
+  },
+};

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

@@ -1,8 +1,8 @@
 <template>
-  <div :class="{ flex: grow }">
+  <div class="flex">
     <div
       v-for="(item, index) in items"
-      :key="item[itemValue] as Key"
+      :key="String(item[itemValue])"
       v-tooltip="{ content: tooltipText(item) }"
       :class="['inline-flex', { '*:px-0 *:py-0': noPadding, grow }]"
     >
@@ -10,6 +10,7 @@
         :size="size"
         type="secondary-outline-blue"
         :disabled="item.disabled"
+        :icon="String(item.icon)"
         :class="{
           'rounded-none': index !== 0 && index !== items.length - 1 && items.length > 1,
           'rounded-br-none rounded-tr-none': index === 0 && items.length > 1,
@@ -31,7 +32,6 @@ import { type Size } from '@squirrel/components/p-btn/p-btn.types';
 import PBtn from '@squirrel/components/p-btn/p-btn.vue';
 
 type BtnGroupItem = Record<string, string | number | boolean>;
-type Key = string | number;
 
 type Props = {
   modelValue?: string | number | null | BtnGroupItem[];