@pequity/squirrel 1.0.21 → 1.0.23

package/dist/cjs/chunks/p-table-loader.js

@@ -1,10 +1,14 @@
 "use strict";
 const vue = require("vue");
 const pSkeletonLoader = require("../p-skeleton-loader.js");
-const _hoisted_1 = { class: "block overflow-hidden border border-p-gray-30" };
+const _hoisted_1 = { class: "block overflow-hidden border border-p-gray-30 bg-surface" };
 const _hoisted_2 = { class: "mb-0 w-full bg-surface" };
 const _hoisted_3 = { class: "relative border-b border-p-gray-30 px-4 py-2" };
-const _hoisted_4 = { class: "skeleton-fade" };
+const _hoisted_4 = {
+  key: 0,
+  class: "h-4 w-full border-b border-b-p-gray-20 bg-p-gray-10"
+};
+const _hoisted_5 = { class: "skeleton-fade" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "PTableLoader"
@@ -26,6 +30,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     tdSkeletonClasses: {
       type: String,
       default: "h-5"
+    },
+    withSubheader: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
@@ -41,12 +49,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, [
                   vue.createElementVNode("div", _hoisted_3, [
                     vue.createVNode(pSkeletonLoader, { class: "h-5" })
-                  ])
+                  ]),
+                  __props.withSubheader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("", true)
                 ]);
               }), 128))
             ])
           ]),
-          vue.createElementVNode("tbody", _hoisted_4, [
+          vue.createElementVNode("tbody", _hoisted_5, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Number(__props.rows), (i) => {
               return vue.openBlock(), vue.createElementBlock("tr", { key: i }, [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Number(__props.columns), (col) => {

package/dist/cjs/index.js

@@ -653,6 +653,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     isFirstColFixed: { type: Boolean, default: false },
     isLastColFixed: { type: Boolean, default: false },
     lockScroll: { type: Boolean, default: false },
+    subheader: { type: Boolean, default: false },
     virtualizer: { default: () => ({
       paddingTop: 0,
       paddingBottom: 0
@@ -700,11 +701,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const emitScroll = (e) => {
       emit("scroll", e);
     };
-    const thDivClasses = (i, col) => {
+    const thDivClasses = (i) => {
       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");
       } else {
@@ -712,6 +711,36 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       }
       return res;
     };
+    const thSubheaderClasses = (i) => {
+      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) => {
+      if (col.borderColor) {
+        return { backgroundColor: col.borderColor + "33" };
+      }
+      return {};
+    };
+    const headerCellTextColor = (col) => {
+      if (col.borderColor) {
+        return `color-mix(in srgb, ${col.borderColor} 100%, #000000 20%)`;
+      }
+      return "";
+    };
     vue.onMounted(() => {
       var _a;
       (_a = scrollWrapper.value) == null ? void 0 : _a.addEventListener("scroll", emitScroll, true);
@@ -730,7 +759,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "scrollWrapper",
         ref: scrollWrapper,
-        class: vue.normalizeClass(["block border border-p-gray-30", _ctx.lockScroll ? "overflow-hidden" : "overflow-x-auto"])
+        class: vue.normalizeClass(["block rounded-xl border border-p-gray-30", _ctx.lockScroll ? "overflow-hidden" : "overflow-x-auto"])
       }, [
         vue.unref(isColResizing) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
@@ -762,7 +791,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                   class: "bg-surface"
                 }), [
                   vue.createElementVNode("div", {
-                    class: vue.normalizeClass(thDivClasses(i, col))
+                    class: vue.normalizeClass(thDivClasses(i)),
+                    style: vue.normalizeStyle(bgColorStyle(col))
                   }, [
                     vue.createElementVNode("div", _hoisted_2$1, [
                       vue.renderSlot(_ctx.$slots, `prepend-header-cell-${vue.unref(lodashEs.kebabCase)(col.name)}`, { col }, void 0, true),
@@ -771,23 +801,26 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         "filter-active": col.filterActive,
                         "show-filter-icon": col.filterable || col.sortable,
                         "tooltip-text": col.tooltip,
-                        class: [{ "pl-2": i === 1 && _ctx.isFirstColFixed, "pr-2": i === _ctx.cols.length && _ctx.isLastColFixed }, "grow"]
+                        class: [{ "pl-2": i === 1 && _ctx.isFirstColFixed, "pr-2": i === _ctx.cols.length && _ctx.isLastColFixed }, "grow"],
+                        "text-color": headerCellTextColor(col)
                       }, col.headerCellAttrs, {
                         onClickFilterIcon: ($event) => _ctx.$emit("click-filter-icon", $event, col)
-                      }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "onClickFilterIcon"])
+                      }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
                     ]),
                     _ctx.colsResizable && i !== 0 && !(i === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (vue.openBlock(), vue.createElementBlock("div", {
                       key: 0,
-                      class: vue.normalizeClass(["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", i === _ctx.cols.length - 1 ? " after:right-0" : " after:right-1"]),
+                      class: vue.normalizeClass(["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", i === _ctx.cols.length - 1 ? " after:right-0.5" : " after:right-0"]),
                       "data-resize-handle": "",
                       onMousedown: ($event) => vue.unref(colResizeStart)($event, i),
                       onDblclick: ($event) => vue.unref(colResizeFitToData)(i)
-                    }, null, 42, _hoisted_3$1)) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("div", {
-                      class: vue.normalizeClass(["absolute bottom-0 h-1 w-full", _ctx.colsResizable ? "-left-1" : "left-0"]),
-                      style: vue.normalizeStyle({ background: col.borderColor })
-                    }, null, 6)
-                  ], 2)
+                    }, null, 42, _hoisted_3$1)) : vue.createCommentVNode("", true)
+                  ], 6),
+                  _ctx.subheader ? (vue.openBlock(), vue.createElementBlock("div", {
+                    key: 0,
+                    class: vue.normalizeClass(thSubheaderClasses(i))
+                  }, [
+                    vue.renderSlot(_ctx.$slots, `subheader-cell-${vue.unref(lodashEs.kebabCase)(col.name)}`, {}, void 0, true)
+                  ], 2)) : vue.createCommentVNode("", true)
                 ], 16, _hoisted_1$1);
               }), 128)),
               _ctx.colsResizable && !_ctx.isLastColFixed ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_4$1)) : vue.createCommentVNode("", true)
@@ -811,7 +844,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["__scopeId", "data-v-170d774b"]]);
+const pTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["__scopeId", "data-v-6b61498d"]]);
 const _sfc_main = vue.defineComponent({
   name: "PTableSort",
   props: {

package/dist/cjs/inputClassesMixin.js

@@ -17,6 +17,10 @@ const inputClassesMixin = vue.defineComponent({
     required: {
       type: Boolean,
       default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -29,7 +33,7 @@ const inputClassesMixin = vue.defineComponent({
       const base = `${inputClassesShared.INPUT_BASE} ${inputClassesShared.INPUT_SIZES[this.size]}`;
       const spacingLeft = this.$slots.prefix ? inputClassesShared.SPACING_PREFIX[this.size] : inputClassesShared.SPACING_LEFT[this.size];
       const spacingRight = this.$slots.suffix ? inputClassesShared.SPACING_SUFFIX[this.size] : inputClassesShared.SPACING_RIGHT[this.size];
-      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}`;
+      const res = `${base} ${spacingLeft} ${spacingRight} ${this.errorMsg ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}${this.rounded ? " rounded-full" : ""}`;
       return res;
     },
     labelClasses() {

package/dist/cjs/p-chips.js

@@ -64,7 +64,7 @@ const _sfc_main = vue.defineComponent({
     }
   }
 });
-const _withScopeId = (n) => (vue.pushScopeId("data-v-40bc335f"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-cb511035"), n = n(), vue.popScopeId(), n);
 const _hoisted_1 = {
   ref: "filterChipsRow",
   class: "flex w-full items-center"
@@ -72,7 +72,7 @@ const _hoisted_1 = {
 const _hoisted_2 = { ref: "beforeSlotContainer" };
 const _hoisted_3 = {
   ref: "filterChipsRowInner",
-  class: "flex divide-x divide-p-blue-30 overflow-hidden rounded-md border border-p-blue-30 text-xs font-medium text-p-purple-60"
+  class: "flex divide-x divide-p-blue-30 overflow-hidden rounded-md border border-p-blue-30 bg-transparent text-xs font-medium leading-4 text-p-purple-60"
 };
 const _hoisted_4 = ["onClick"];
 const _hoisted_5 = { class: "inline-block truncate" };
@@ -106,5 +106,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 512)
   ], 512);
 }
-const pChips = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-40bc335f"]]);
+const pChips = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cb511035"]]);
 module.exports = pChips;

package/dist/cjs/p-drawer.js

@@ -3,7 +3,7 @@ const pAlert = require("./p-alert.js");
 const pCloseBtn = require("./p-close-btn.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _sfc_main = vue.defineComponent({
+const __default__ = vue.defineComponent({
   name: "PDrawer",
   components: {
     PAlert: pAlert,
@@ -69,6 +69,13 @@ const _sfc_main = vue.defineComponent({
     enableClose: {
       type: Boolean,
       default: true
+    },
+    width: {
+      type: String,
+      default: "460px",
+      validator: (value) => {
+        return !!value.match(/^[0-9]+px$/);
+      }
     }
   },
   emits: ["update:modelValue", "before-open", "opening", "opened", "before-close", "closing", "closed"],
@@ -85,6 +92,9 @@ const _sfc_main = vue.defineComponent({
     },
     transitionOutClass() {
       return this.outClass || this.position === "right" ? "slideOutRight" : "slideOutLeft";
+    },
+    animationDuration() {
+      return (parseInt(this.width, 10) / 1200).toFixed(2) + "s";
     }
   },
   created() {
@@ -140,6 +150,17 @@ const _sfc_main = vue.defineComponent({
     }
   }
 });
+const __injectCSSVars__ = () => {
+  vue.useCssVars((_ctx) => ({
+    "4c0aead4": _ctx.width,
+    "59cfae08": _ctx.animationDuration
+  }));
+};
+const __setup__ = __default__.setup;
+__default__.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
 const _hoisted_1 = ["data-drawer-id", "aria-label", "aria-describedby", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = {
@@ -213,7 +234,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _ctx.title ? (vue.openBlock(), vue.createElementBlock("h3", {
                   key: 0,
                   id: `${_ctx.id}-title`,
-                  class: vue.normalizeClass(["flex-1 text-xl font-medium", { "text-right": _ctx.position === "left" }])
+                  class: vue.normalizeClass(["flex-1 text-xl font-medium leading-8", { "text-right": _ctx.position === "left" }])
                 }, vue.toDisplayString(_ctx.title), 11, _hoisted_2)) : vue.createCommentVNode("", true)
               ], true)
             ], 2)
@@ -249,5 +270,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["enter-active-class", "leave-active-class", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
   ], 8, ["to"])) : vue.createCommentVNode("", true);
 }
-const pDrawer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a0b8be1e"]]);
+const pDrawer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(__default__, [["render", _sfc_render], ["__scopeId", "data-v-f474eec2"]]);
 module.exports = pDrawer;

package/dist/cjs/p-input-search.js

@@ -74,6 +74,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     size: _ctx.size
   }, _ctx.$attrs, {
     role: "searchbox",
+    rounded: "",
     onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.showEnterIconOnFocus = true),
     onFocusout: _cache[3] || (_cache[3] = ($event) => _ctx.showEnterIconOnFocus = false),
     onKeydown: vue.withKeys(_ctx.keydownEnter, ["enter"])
@@ -106,5 +107,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["modelValue", "size", "onKeydown"]);
 }
-const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3de99c69"]]);
+const PInputSearch = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7a1e1e82"]]);
 module.exports = PInputSearch;

package/dist/cjs/p-input.js

@@ -30,6 +30,10 @@ const _sfc_main = vue.defineComponent({
     required: {
       type: Boolean,
       default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["update:modelValue"],

package/dist/cjs/p-table-header-cell.js

@@ -3,7 +3,7 @@ const pInfoIcon = require("./p-info-icon.js");
 const pTableFilterIcon = require("./p-table-filter-icon.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const DEFAULT_CLASSES = `text-xs leading-5 font-bold uppercase truncate shrink`;
+const DEFAULT_CLASSES = `text-xs leading-5 font-semibold truncate shrink`;
 const _sfc_main = vue.defineComponent({
   name: "PTableHeaderCell",
   components: {
@@ -30,6 +30,10 @@ const _sfc_main = vue.defineComponent({
     tooltipText: {
       type: String,
       default: ""
+    },
+    textColor: {
+      type: String,
+      default: ""
     }
   },
   emits: ["click-filter-icon"],
@@ -37,6 +41,19 @@ const _sfc_main = vue.defineComponent({
     return {
       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
+      };
+    }
   }
 });
 const _hoisted_1 = { class: "flex items-center overflow-hidden" };
@@ -50,14 +67,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PTableFilterIcon = vue.resolveComponent("PTableFilterIcon");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     vue.createElementVNode("div", {
-      class: vue.normalizeClass([
-        _ctx.DEFAULT_CLASSES,
-        _ctx.textClass,
-        _ctx.filterActive ? "text-active-blue" : "text-p-purple-60",
-        { "mr-auto": !_ctx.tooltipText }
-      ]),
+      class: vue.normalizeClass([_ctx.DEFAULT_CLASSES, _ctx.textClass, _ctx.textColorClass, { "mr-auto": !_ctx.tooltipText }]),
+      style: vue.normalizeStyle(_ctx.style),
       title: _ctx.text
-    }, vue.toDisplayString(_ctx.text), 11, _hoisted_2),
+    }, vue.toDisplayString(_ctx.text), 15, _hoisted_2),
     _ctx.tooltipText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
       _ctx.tooltipText ? (vue.openBlock(), vue.createBlock(_component_PInfoIcon, {
         key: 0,

package/dist/cjs/p-table-td.js

@@ -2,7 +2,7 @@
 const vue = require("vue");
 const pTable = require("./p-table.js");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
-const _withScopeId = (n) => (vue.pushScopeId("data-v-50608a90"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-09e6d191"), n = n(), vue.popScopeId(), n);
 const _hoisted_1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("div", { class: "dropdown-anchor" }, null, -1));
 const _hoisted_2 = {
   key: 0,
@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const tdClass = vue.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) {
         res.push("cursor-pointer");
@@ -40,17 +40,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       } else if (isLastColFixed.value && isLastCol.value) {
         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 = vue.computed(() => {
-      const res = ["py-2"];
+      const res = [];
       const currentColIsFirstColFixed = isFirstColFixed.value && isFirstCol.value;
       const currentColIsLastColFixed = isLastColFixed.value && isLastCol.value;
       if (!currentColIsFirstColFixed && !currentColIsLastColFixed) {
@@ -84,5 +84,5 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const pTableTd = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-50608a90"]]);
+const pTableTd = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-09e6d191"]]);
 module.exports = pTableTd;

package/dist/cjs/p-toggle.js

@@ -3,7 +3,7 @@ const inputClassesMixin = require("./inputClassesMixin.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
 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`
 };
@@ -110,5 +110,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 14, _hoisted_1);
 }
-const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e222188e"]]);
+const pToggle = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3a6de4eb"]]);
 module.exports = pToggle;

package/dist/cjs/useInputClasses.js

@@ -7,16 +7,17 @@ const defaults = {
   errorMsg: vue.ref(""),
   required: vue.ref(false),
   prefix: vue.ref(false),
-  suffix: vue.ref(false)
+  suffix: vue.ref(false),
+  rounded: vue.ref(false)
 };
 function useInputClasses(props) {
   const opts = { ...defaults, ...vue.toRefs(props) };
-  const { size, errorMsg, required, prefix, suffix } = opts;
+  const { size, errorMsg, required, rounded, prefix, suffix } = opts;
   const inputClasses = vue.computed(() => {
     const base = `${inputClassesShared.INPUT_BASE} ${inputClassesShared.INPUT_SIZES[size.value]}`;
     const spacingLeft = prefix.value ? inputClassesShared.SPACING_PREFIX[size.value] : inputClassesShared.SPACING_LEFT[size.value];
     const spacingRight = suffix.value ? inputClassesShared.SPACING_SUFFIX[size.value] : inputClassesShared.SPACING_RIGHT[size.value];
-    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}`;
+    const res = `${base} ${spacingLeft} ${spacingRight} ${errorMsg.value ? inputClassesShared.INPUT_ERROR : inputClassesShared.INPUT_NORMAL}${rounded.value ? " rounded-full" : ""}`;
     return res;
   });
   const labelClasses = vue.computed(() => {

package/dist/es/chunks/p-table-loader.js

@@ -1,9 +1,13 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createVNode, normalizeClass } from "vue";
+import { defineComponent, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createVNode, createCommentVNode, normalizeClass } from "vue";
 import PSkeletonLoader from "../p-skeleton-loader.js";
-const _hoisted_1 = { class: "block overflow-hidden border border-p-gray-30" };
+const _hoisted_1 = { class: "block overflow-hidden border border-p-gray-30 bg-surface" };
 const _hoisted_2 = { class: "mb-0 w-full bg-surface" };
 const _hoisted_3 = { class: "relative border-b border-p-gray-30 px-4 py-2" };
-const _hoisted_4 = { class: "skeleton-fade" };
+const _hoisted_4 = {
+  key: 0,
+  class: "h-4 w-full border-b border-b-p-gray-20 bg-p-gray-10"
+};
+const _hoisted_5 = { class: "skeleton-fade" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "PTableLoader"
@@ -25,6 +29,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     tdSkeletonClasses: {
       type: String,
       default: "h-5"
+    },
+    withSubheader: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props) {
@@ -40,12 +48,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, [
                   createElementVNode("div", _hoisted_3, [
                     createVNode(PSkeletonLoader, { class: "h-5" })
-                  ])
+                  ]),
+                  __props.withSubheader ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("", true)
                 ]);
               }), 128))
             ])
           ]),
-          createElementVNode("tbody", _hoisted_4, [
+          createElementVNode("tbody", _hoisted_5, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(Number(__props.rows), (i) => {
               return openBlock(), createElementBlock("tr", { key: i }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(Number(__props.columns), (col) => {

package/dist/es/index.js

@@ -653,6 +653,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     isFirstColFixed: { type: Boolean, default: false },
     isLastColFixed: { type: Boolean, default: false },
     lockScroll: { type: Boolean, default: false },
+    subheader: { type: Boolean, default: false },
     virtualizer: { default: () => ({
       paddingTop: 0,
       paddingBottom: 0
@@ -700,11 +701,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const emitScroll = (e) => {
       emit("scroll", e);
     };
-    const thDivClasses = (i, col) => {
+    const thDivClasses = (i) => {
       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");
       } else {
@@ -712,6 +711,36 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return res;
     };
+    const thSubheaderClasses = (i) => {
+      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) => {
+      if (col.borderColor) {
+        return { backgroundColor: col.borderColor + "33" };
+      }
+      return {};
+    };
+    const headerCellTextColor = (col) => {
+      if (col.borderColor) {
+        return `color-mix(in srgb, ${col.borderColor} 100%, #000000 20%)`;
+      }
+      return "";
+    };
     onMounted(() => {
       var _a;
       (_a = scrollWrapper.value) == null ? void 0 : _a.addEventListener("scroll", emitScroll, true);
@@ -730,7 +759,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "scrollWrapper",
         ref: scrollWrapper,
-        class: normalizeClass(["block border border-p-gray-30", _ctx.lockScroll ? "overflow-hidden" : "overflow-x-auto"])
+        class: normalizeClass(["block rounded-xl border border-p-gray-30", _ctx.lockScroll ? "overflow-hidden" : "overflow-x-auto"])
       }, [
         unref(isColResizing) ? (openBlock(), createElementBlock("div", {
           key: 0,
@@ -762,7 +791,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   class: "bg-surface"
                 }), [
                   createElementVNode("div", {
-                    class: normalizeClass(thDivClasses(i, col))
+                    class: normalizeClass(thDivClasses(i)),
+                    style: normalizeStyle(bgColorStyle(col))
                   }, [
                     createElementVNode("div", _hoisted_2$1, [
                       renderSlot(_ctx.$slots, `prepend-header-cell-${unref(kebabCase)(col.name)}`, { col }, void 0, true),
@@ -771,23 +801,26 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         "filter-active": col.filterActive,
                         "show-filter-icon": col.filterable || col.sortable,
                         "tooltip-text": col.tooltip,
-                        class: [{ "pl-2": i === 1 && _ctx.isFirstColFixed, "pr-2": i === _ctx.cols.length && _ctx.isLastColFixed }, "grow"]
+                        class: [{ "pl-2": i === 1 && _ctx.isFirstColFixed, "pr-2": i === _ctx.cols.length && _ctx.isLastColFixed }, "grow"],
+                        "text-color": headerCellTextColor(col)
                       }, col.headerCellAttrs, {
                         onClickFilterIcon: ($event) => _ctx.$emit("click-filter-icon", $event, col)
-                      }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "onClickFilterIcon"])
+                      }), null, 16, ["text", "filter-active", "show-filter-icon", "tooltip-text", "class", "text-color", "onClickFilterIcon"])
                     ]),
                     _ctx.colsResizable && i !== 0 && !(i === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (openBlock(), createElementBlock("div", {
                       key: 0,
-                      class: normalizeClass(["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", i === _ctx.cols.length - 1 ? " after:right-0" : " after:right-1"]),
+                      class: normalizeClass(["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", i === _ctx.cols.length - 1 ? " after:right-0.5" : " after:right-0"]),
                       "data-resize-handle": "",
                       onMousedown: ($event) => unref(colResizeStart)($event, i),
                       onDblclick: ($event) => unref(colResizeFitToData)(i)
-                    }, null, 42, _hoisted_3$1)) : createCommentVNode("", true),
-                    createElementVNode("div", {
-                      class: normalizeClass(["absolute bottom-0 h-1 w-full", _ctx.colsResizable ? "-left-1" : "left-0"]),
-                      style: normalizeStyle({ background: col.borderColor })
-                    }, null, 6)
-                  ], 2)
+                    }, null, 42, _hoisted_3$1)) : createCommentVNode("", true)
+                  ], 6),
+                  _ctx.subheader ? (openBlock(), createElementBlock("div", {
+                    key: 0,
+                    class: normalizeClass(thSubheaderClasses(i))
+                  }, [
+                    renderSlot(_ctx.$slots, `subheader-cell-${unref(kebabCase)(col.name)}`, {}, void 0, true)
+                  ], 2)) : createCommentVNode("", true)
                 ], 16, _hoisted_1$1);
               }), 128)),
               _ctx.colsResizable && !_ctx.isLastColFixed ? (openBlock(), createElementBlock("th", _hoisted_4$1)) : createCommentVNode("", true)
@@ -811,7 +844,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-170d774b"]]);
+const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6b61498d"]]);
 const _sfc_main = defineComponent({
   name: "PTableSort",
   props: {

package/dist/es/inputClassesMixin.js

@@ -16,6 +16,10 @@ const inputClassesMixin = defineComponent({
     required: {
       type: Boolean,
       default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -28,7 +32,7 @@ const inputClassesMixin = 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;
     },
     labelClasses() {