@pequity/squirrel 1.0.21 → 1.0.23

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

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="scrollWrapper"
-    :class="['block border border-p-gray-30', lockScroll ? 'overflow-hidden' : 'overflow-x-auto']"
+    :class="['block rounded-xl border border-p-gray-30', lockScroll ? 'overflow-hidden' : 'overflow-x-auto']"
   >
     <div
       v-if="isColResizing"
@@ -32,7 +32,7 @@
             :style="col.style"
             class="bg-surface"
           >
-            <div :class="thDivClasses(i, col)">
+            <div :class="thDivClasses(i)" :style="bgColorStyle(col)">
               <div class="flex">
                 <slot :name="`prepend-header-cell-${kebabCase(col.name)}`" :col="col" />
                 <PTableHeaderCell
@@ -41,22 +41,22 @@
                   :show-filter-icon="col.filterable || col.sortable"
                   :tooltip-text="col.tooltip"
                   :class="[{ 'pl-2': i === 1 && isFirstColFixed, 'pr-2': i === cols.length && isLastColFixed }, 'grow']"
+                  :text-color="headerCellTextColor(col)"
                   v-bind="col.headerCellAttrs"
                   @click-filter-icon="$emit('click-filter-icon', $event, col)"
                 />
               </div>
               <div
                 v-if="colsResizable && i !== 0 && !(i === cols.length - 1 && isLastColFixed)"
-                class="absolute bottom-0 right-0 h-full w-2 cursor-col-resize after:absolute after:bottom-2 after:z-20 after:block after:h-5 after:w-px after:cursor-col-resize after:bg-p-gray-30"
-                :class="i === cols.length - 1 ? ' after:right-0' : ' after:right-1'"
+                class="absolute bottom-2 right-0 z-110 h-5 w-2 cursor-col-resize after:absolute after:bottom-0 after:z-110 after:block after:h-full after:w-2 after:cursor-col-resize after:border-r-2 after:border-dashed after:border-p-gray-30"
+                :class="i === cols.length - 1 ? ' after:right-0.5' : ' after:right-0'"
                 data-resize-handle
                 @mousedown="colResizeStart($event, i)"
                 @dblclick="colResizeFitToData(i)"
               ></div>
-              <div
-                :class="['absolute bottom-0 h-1 w-full', colsResizable ? '-left-1' : 'left-0']"
-                :style="{ background: col.borderColor }"
-              ></div>
+            </div>
+            <div v-if="subheader" :class="thSubheaderClasses(i)">
+              <slot :name="`subheader-cell-${kebabCase(col.name)}`"></slot>
             </div>
           </th>
           <th
@@ -97,6 +97,7 @@ type Props = {
   isFirstColFixed?: boolean;
   isLastColFixed?: boolean;
   lockScroll?: boolean;
+  subheader?: boolean;
   virtualizer?: {
     paddingTop: number;
     paddingBottom: number;
@@ -118,6 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
   isFirstColFixed: false,
   isLastColFixed: false,
   lockScroll: false,
+  subheader: false,
   virtualizer: () => ({
     paddingTop: 0,
     paddingBottom: 0,
@@ -169,12 +171,10 @@ const emitScroll = (e: Event) => {
   emit('scroll', e);
 };
 
-const thDivClasses = (i: number, col: TableCol) => {
+const thDivClasses = (i: number) => {
   const res = ['relative', 'py-2'];
 
-  if (!col.borderColor) {
-    res.push('border-b border-p-gray-30');
-  }
+  res.push('border-b border-p-gray-30');
 
   if ((i === 0 && props.isFirstColFixed) || (i === props.cols.length - 1 && props.isLastColFixed)) {
     res.push('th-shadow px-4');
@@ -185,6 +185,41 @@ const thDivClasses = (i: number, col: TableCol) => {
   return res;
 };
 
+const thSubheaderClasses = (i: number) => {
+  const res = [
+    'flex',
+    'h-6',
+    'items-center',
+    'border-b',
+    'border-b-p-gray-20',
+    'bg-p-gray-10',
+    'px-2',
+    'text-xs',
+    'font-medium',
+    'text-p-gray-40',
+  ];
+
+  if ((i === 0 && props.isFirstColFixed) || (i === props.cols.length - 1 && props.isLastColFixed)) {
+    res.push('th-shadow');
+  }
+  return res;
+};
+
+const bgColorStyle = (col: TableCol) => {
+  if (col.borderColor) {
+    // append 33 to the color to make it 20% opacity
+    return { backgroundColor: col.borderColor + '33' };
+  }
+  return {};
+};
+
+const headerCellTextColor = (col: TableCol) => {
+  if (col.borderColor) {
+    return `color-mix(in srgb, ${col.borderColor} 100%, #000000 20%)`;
+  }
+  return '';
+};
+
 // Lifecycle hooks
 onMounted(() => {
   scrollWrapper.value?.addEventListener('scroll', emitScroll, true);
@@ -214,7 +249,7 @@ watch(isColResizing, (nV) => {
   @apply left-0 z-30;
 }
 .p-table.first-col-fixed th:first-child .th-shadow {
-  box-shadow: 2px 1px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: -1px 1px 5px 4px rgba(0, 0, 0, 0.15);
   clip-path: inset(0px -12px 0px 0px);
 }
 .p-table.last-col-fixed th:last-child {

package/squirrel/components/p-table-header-cell/p-table-header-cell.spec.js

@@ -23,12 +23,11 @@ describe('PTableHeaderCell.vue', () => {
     expect(div.classes()).toEqual([
       'text-xs',
       'leading-5',
-      'font-bold',
-      'uppercase',
+      'font-semibold',
       'truncate',
       'shrink',
       'test-class',
-      'text-p-purple-60',
+      'text-p-gray-60',
       'mr-auto',
     ]);
     expect(tooltipIcon.exists()).toBe(false);

package/squirrel/components/p-table-header-cell/p-table-header-cell.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="flex items-center overflow-hidden">
     <div
-      :class="[
-        DEFAULT_CLASSES,
-        textClass,
-        filterActive ? 'text-active-blue' : 'text-p-purple-60',
-        { 'mr-auto': !tooltipText },
-      ]"
+      :class="[DEFAULT_CLASSES, textClass, textColorClass, { 'mr-auto': !tooltipText }]"
+      :style="style"
       :title="text"
     >
       {{ text }}
@@ -27,7 +23,7 @@ import PInfoIcon from '@squirrel/components/p-info-icon/p-info-icon.vue';
 import PTableFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
 import { defineComponent } from 'vue';
 
-const DEFAULT_CLASSES = `text-xs leading-5 font-bold uppercase truncate shrink`;
+const DEFAULT_CLASSES = `text-xs leading-5 font-semibold truncate shrink`;
 
 export default defineComponent({
   name: 'PTableHeaderCell',
@@ -56,6 +52,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    textColor: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['click-filter-icon'],
   data() {
@@ -63,5 +63,18 @@ export default defineComponent({
       DEFAULT_CLASSES,
     };
   },
+  computed: {
+    textColorClass() {
+      return this.filterActive ? 'text-active-blue' : this.textColor ? '' : 'text-p-gray-60';
+    },
+    style() {
+      if (this.filterActive) {
+        return {};
+      }
+      return {
+        color: this.textColor,
+      };
+    },
+  },
 });
 </script>

package/squirrel/components/p-table-loader/p-table-loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="block overflow-hidden border border-p-gray-30">
+  <div class="block overflow-hidden border border-p-gray-30 bg-surface">
     <table class="mb-0 w-full bg-surface">
       <thead>
         <tr>
@@ -7,6 +7,7 @@
             <div class="relative border-b border-p-gray-30 px-4 py-2">
               <PSkeletonLoader class="h-5" />
             </div>
+            <div v-if="withSubheader" class="h-4 w-full border-b border-b-p-gray-20 bg-p-gray-10"></div>
           </th>
         </tr>
       </thead>
@@ -45,5 +46,9 @@ defineProps({
     type: String,
     default: 'h-5',
   },
+  withSubheader: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>

package/squirrel/components/p-table-td/p-table-td.spec.js

@@ -10,14 +10,18 @@ import { ref } from 'vue';
 const DEFAULT_TD_CLASSES = [
   'p-0',
   'h-full',
+  'font-normal',
+  'text-p-gray-60',
   'text-sm',
   'border-b',
   'border-p-gray-30',
+  'border-r',
+  'border-r-p-blue-10',
   'bg-white',
-  'group-hover/row:bg-p-blue-10',
+  'group-hover/row:bg-p-gray-10',
 ];
 
-const DEFAULT_INNER_DIV_CLASSES = ['py-2', 'w-max', 'px-2'];
+const DEFAULT_INNER_DIV_CLASSES = ['w-max', 'px-2'];
 
 describe('PTableTd.vue', () => {
   it('renders a td', async () => {
@@ -28,7 +32,7 @@ describe('PTableTd.vue', () => {
     });
 
     const td = wrapper.find('td');
-    const innerDiv = wrapper.find('div.py-2');
+    const innerDiv = wrapper.find('div:nth-child(2)');
 
     expect(td.text()).toContain(`Cell content`);
     expect(td.classes()).toEqual(DEFAULT_TD_CLASSES);
@@ -73,7 +77,7 @@ describe('PTableTd.vue', () => {
     });
 
     const td = wrapper.find('td');
-    const innerDiv = wrapper.find('div.py-2');
+    const innerDiv = wrapper.find('div:nth-child(2)');
 
     ['td-col-fixed-border-b', 'first:sticky', 'first:left-0', 'first:z-10'].forEach((c) => {
       expect(td.classes()).toContain(c);
@@ -97,7 +101,7 @@ describe('PTableTd.vue', () => {
     });
 
     const td = wrapper.find('td');
-    const innerDiv = wrapper.find('div.py-2');
+    const innerDiv = wrapper.find('div:nth-child(2)');
 
     ['td-col-fixed-border-b', 'last:sticky', 'last:right-0', 'last:z-10'].forEach((c) => {
       expect(td.classes()).toContain(c);
@@ -120,11 +124,9 @@ describe('PTableTd.vue', () => {
       },
     });
 
-    const innerDiv = wrapper.find('div.py-2');
+    const innerDiv = wrapper.find('div:nth-child(2)');
 
-    ['py-2', 'w-max', 'pl-4', 'pr-2'].forEach((c) => {
-      expect(innerDiv.classes()).toContain(c);
-    });
+    expect([...innerDiv.classes()].sort()).toEqual(['w-max', 'pl-4', 'pr-2'].sort());
   });
 
   it('it applies spacing on the last non-sticky column', async () => {
@@ -139,10 +141,8 @@ describe('PTableTd.vue', () => {
       },
     });
 
-    const innerDiv = wrapper.find('div.py-2');
+    const innerDiv = wrapper.find('div:nth-child(2)');
 
-    ['py-2', 'w-max', 'pl-2', 'pr-4'].forEach((c) => {
-      expect(innerDiv.classes()).toContain(c);
-    });
+    expect([...innerDiv.classes()].sort()).toEqual(['w-max', 'pl-2', 'pr-4'].sort());
   });
 });

package/squirrel/components/p-table-td/p-table-td.vue

@@ -50,7 +50,7 @@ const isLastCol = computed(() => props.colIndex === cols.value.length - 1);
 const tdClass = computed(() => {
   const res = [
     // Common classes for all cells
-    'p-0 h-full text-sm',
+    'p-0 h-full font-normal text-p-gray-60 text-sm ',
   ];
 
   if (props.isEditable) {
@@ -64,19 +64,19 @@ const tdClass = computed(() => {
     // Stick the last column's cells to the right
     res.push('td-col-fixed-border-b', 'last:sticky last:right-0 last:z-10');
   } else {
-    res.push('border-b border-p-gray-30');
+    res.push('border-b border-p-gray-30 border-r border-r-p-blue-10');
   }
   if (props.isSelected) {
     res.push('bg-p-blue-15 group-hover/row:bg-p-blue-15');
   } else {
-    res.push('bg-white group-hover/row:bg-p-blue-10');
+    res.push('bg-white group-hover/row:bg-p-gray-10');
   }
 
   return res;
 });
 
 const innerDivClass = computed(() => {
-  const res = ['py-2'];
+  const res = [];
 
   const currentColIsFirstColFixed = isFirstColFixed.value && isFirstCol.value;
   const currentColIsLastColFixed = isLastColFixed.value && isLastCol.value;

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

@@ -29,7 +29,7 @@ import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
 import { type StyleValue, defineComponent } from 'vue';
 
 const TOGGLE_SIZES = {
-  sm: `w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4`,
+  sm: `w-7 h-4 after:top-[2px] after:left-[2px] after:h-3 after:w-3`,
   md: `w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5`,
   lg: `w-[52px] h-7 after:top-0.5 after:left-[2px] after:h-6 after:w-6`,
 };

package/squirrel/composables/useInputClasses.ts

@@ -25,6 +25,7 @@ const defaults = {
   required: ref(false),
   prefix: ref(false),
   suffix: ref(false),
+  rounded: ref(false),
 };
 
 type Props = {
@@ -33,19 +34,20 @@ type Props = {
   required: boolean;
   prefix: boolean;
   suffix: boolean;
+  rounded: boolean;
 };
 
 type Defaults = typeof defaults;
 
 export function useInputClasses(props: Partial<Props>) {
   const opts = { ...defaults, ...toRefs(props) } as Defaults;
-  const { size, errorMsg, required, prefix, suffix } = opts;
+  const { size, errorMsg, required, rounded, prefix, suffix } = opts;
 
   const inputClasses = computed(() => {
     const base = `${INPUT_BASE} ${INPUT_SIZES[size.value]}`;
     const spacingLeft = prefix.value ? SPACING_PREFIX[size.value] : SPACING_LEFT[size.value];
     const spacingRight = suffix.value ? SPACING_SUFFIX[size.value] : SPACING_RIGHT[size.value];
-    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? INPUT_ERROR : INPUT_NORMAL}`;
+    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? INPUT_ERROR : INPUT_NORMAL}${rounded.value ? ' rounded-full' : ''}`;
 
     return res;
   });

package/squirrel/utils/inputClassesMixin.ts

@@ -36,6 +36,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -47,7 +51,7 @@ export default defineComponent({
       const base = `${INPUT_BASE} ${INPUT_SIZES[this.size]}`;
       const spacingLeft = this.$slots.prefix ? SPACING_PREFIX[this.size] : SPACING_LEFT[this.size];
       const spacingRight = this.$slots.suffix ? SPACING_SUFFIX[this.size] : SPACING_RIGHT[this.size];
-      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? INPUT_ERROR : INPUT_NORMAL}`;
+      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? INPUT_ERROR : INPUT_NORMAL}${this.rounded ? ' rounded-full' : ''}`;
 
       return res;
     },