sprintify-ui 0.0.62 → 0.0.64

package/dist/sprintify-ui.es.js

@@ -2615,7 +2615,7 @@ const us = { class: "relative" }, cs = { class: "relative" }, ds = ["value", "pl
     });
     return (a, s) => (b(), ee(Nt(e.to ? "RouterLink" : "div"), {
       to: e.to,
-      class: "flex items-center"
+      class: "flex shrink-0 items-center"
     }, {
       default: H(() => [
         v("img", {
@@ -2677,6 +2677,7 @@ const us = { class: "relative" }, cs = { class: "relative" }, ds = ["value", "pl
       (b(!0), T(fe, null, ve(e.users, (a, s) => (b(), T("div", {
         key: a.email + "-" + s,
         role: "tooltip",
+        class: "shrink-0",
         "aria-label": a.full_name + `
 ` + a.email,
         style: je({
@@ -6233,7 +6234,7 @@ const Wu = {
 function Ju(e, n, r, l, o, a) {
   return b(), T("svg", Wu, Yu);
 }
-const Qo = /* @__PURE__ */ Ne(Gu, [["render", Ju], ["__scopeId", "data-v-945515f9"]]), Zu = (e) => (Il("data-v-756da018"), e = e(), El(), e), Xu = { class: "relative w-full overflow-hidden" }, ec = { class: "flex flex-col" }, tc = { class: "inline-block min-w-full align-middle" }, nc = { class: "relative min-h-[300px]" }, rc = { class: "min-w-full border-separate border-spacing-0" }, oc = {
+const Qo = /* @__PURE__ */ Ne(Gu, [["render", Ju], ["__scopeId", "data-v-945515f9"]]), Zu = (e) => (Il("data-v-225c4996"), e = e(), El(), e), Xu = { class: "relative w-full overflow-hidden" }, ec = { class: "flex flex-col" }, tc = { class: "inline-block min-w-full align-middle" }, nc = { class: "relative min-h-[300px]" }, rc = { class: "min-w-full border-separate border-spacing-0" }, oc = {
   key: 0,
   class: "th"
 }, lc = {
@@ -6335,7 +6336,7 @@ const Qo = /* @__PURE__ */ Ne(Gu, [["render", Ju], ["__scopeId", "data-v-945515f
     function y() {
       L.value && (S.value = L.value.clientHeight);
     }
-    const A = E(() => w.value), t = E(() => A.value ? A.value.filter((N) => N.visible === !1 ? !1 : !!(!Xe(l.visibleColumns) || l.visibleColumns.includes(N.newKey))) : A.value), O = E(() => {
+    const A = E(() => w.value), t = E(() => A.value ? A.value.filter((N) => N.toggle === !1 ? !!N.visible : !!(!Xe(l.visibleColumns) || l.visibleColumns.includes(N.newKey))) : A.value), O = E(() => {
       let N = t.value.length;
       return N += l.checkable ? 1 : 0, N += l.detailed ? 1 : 0, N;
     }), D = E(() => l.detailed);
@@ -6710,7 +6711,7 @@ const Qo = /* @__PURE__ */ Ne(Gu, [["render", Ju], ["__scopeId", "data-v-945515f
     };
   }
 });
-const Yo = /* @__PURE__ */ Ne(Ic, [["__scopeId", "data-v-756da018"]]), Jo = K({
+const Yo = /* @__PURE__ */ Ne(Ic, [["__scopeId", "data-v-225c4996"]]), Jo = K({
   name: "BaseTableColumn",
   props: {
     label: {
@@ -6750,8 +6751,8 @@ const Yo = /* @__PURE__ */ Ne(Ic, [["__scopeId", "data-v-756da018"]]), Jo = K({
       type: Boolean
     },
     visible: {
-      type: Boolean,
-      default: !0
+      default: !0,
+      type: Boolean
     },
     toggle: {
       type: Boolean,
@@ -6799,7 +6800,7 @@ const Yo = /* @__PURE__ */ Ne(Ic, [["__scopeId", "data-v-756da018"]]), Jo = K({
     }
   },
   created() {
-    this.newKey = this.nextSequence(), this.addColumn(this);
+    this.customKey ? this.newKey = this.customKey + "" : this.newKey = this.nextSequence(), this.addColumn(this);
   },
   beforeUnmount() {
     this.removeColumn(this);
@@ -7061,7 +7062,8 @@ const Dc = /* @__PURE__ */ Ne(Lc, [["render", Fc]]), Pc = { class: "flex justify
                   Y(u.$slots, "default"),
                   z(Jo, {
                     visible: e.editButton || e.deleteButton || u.$slots.rowActions != null,
-                    toggle: !1
+                    toggle: !1,
+                    "custom-key": "actions"
                   }, {
                     default: H(({ row: se }) => [
                       v("div", Pc, [

package/dist/style.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";.spinner[data-v-945515f9]{animation:rotate-945515f9 1s linear infinite;-webkit-animation:rotate-945515f9 1s linear infinite;-moz-animation:rotate-945515f9 1s linear infinite}@keyframes rotate-945515f9{to{transform:rotate(360deg)}}.path[data-v-945515f9]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-756da018]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:1;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}circle[data-v-e5ae83e3]{transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}/*!
+@charset "UTF-8";.spinner[data-v-945515f9]{animation:rotate-945515f9 1s linear infinite;-webkit-animation:rotate-945515f9 1s linear infinite;-moz-animation:rotate-945515f9 1s linear infinite}@keyframes rotate-945515f9{to{transform:rotate(360deg)}}.path[data-v-945515f9]{stroke-dasharray:170;stroke-dashoffset:20}.th[data-v-225c4996]{background-color:rgb(248 250 252 / var(--tw-bg-opacity));position:sticky;top:0px;z-index:1;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));--tw-bg-opacity: .75;--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}circle[data-v-e5ae83e3]{transition:stroke-dashoffset .35s;transform:rotate(-90deg);transform-origin:50% 50%}/*!
  * Pikaday
  * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/
  */.pika-single{z-index:9999;display:block;position:relative;color:#333;background:#fff;border:1px solid #ccc;border-bottom-color:#bbb;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.pika-single:before,.pika-single:after{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{position:absolute;box-shadow:0 5px 15px -5px #00000080}.pika-lendar{float:left;width:240px;margin:8px}.pika-title{position:relative;text-align:center}.pika-label{display:inline-block;position:relative;z-index:9999;overflow:hidden;margin:0;padding:5px 3px;font-size:14px;line-height:20px;font-weight:700;background-color:#fff}.pika-title select{cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:5px;opacity:0}.pika-prev,.pika-next{display:block;cursor:pointer;position:relative;outline:none;border:0;padding:0;width:20px;height:30px;text-indent:20px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;background-size:75% 75%;opacity:.5}.pika-prev:hover,.pika-next:hover{opacity:1}.pika-prev,.is-rtl .pika-next{float:left;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==)}.pika-next,.is-rtl .pika-prev{float:right;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=)}.pika-select{display:inline-block}.pika-table{width:100%;border-collapse:collapse;border-spacing:0;border:0}.pika-table th,.pika-table td{width:14.285714285714286%;padding:0}.pika-table th{color:#999;font-size:12px;line-height:25px;font-weight:700;text-align:center}.pika-button{cursor:pointer;display:block;box-sizing:border-box;-moz-box-sizing:border-box;outline:none;border:0;margin:0;width:100%;padding:5px;color:#666;font-size:12px;line-height:15px;text-align:right;background:#f5f5f5;height:initial}.pika-week{font-size:11px;color:#999}.is-today .pika-button{color:#3af;font-weight:700}.is-selected .pika-button,.has-event .pika-button{color:#fff;font-weight:700;background:#33aaff;box-shadow:inset 0 1px 3px #178fe5;border-radius:3px}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#D5E9F7}.is-startrange .pika-button{color:#fff;background:#6CB31D;box-shadow:none;border-radius:3px}.is-endrange .pika-button{color:#fff;background:#33aaff;box-shadow:none;border-radius:3px}.is-disabled .pika-button{pointer-events:none;cursor:default;color:#999;opacity:.3}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{pointer-events:none;cursor:default}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{color:#fff;background:#ff8000;box-shadow:none;border-radius:3px}.pika-table abbr{border-bottom:none;cursor:help}.pikaday-white{--backgroundColor: #ffffff;--textColor: #718096;--currentDateTextColor: #3182ce;--selectedDateBackgroundColor: #3182ce;--selectedDateTextColor: #ffffff;--labelTextColor: #4a5568;--weekDaysTextColor: #a0aec0;font-family:inherit;background-color:var(--backgroundColor);padding:.5rem;z-index:2000;margin:6px 0 0;--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:.5rem}.pikaday-white .pika-title{width:100%;text-align:center;display:flex;justify-content:flex-start;margin-bottom:5px}.pikaday-white .pika-prev,.pikaday-white .pika-next{position:absolute;outline:none;padding:0;width:26px;height:26px;top:-1px;display:inline-block;margin-top:0;cursor:pointer;text-indent:-9999px;white-space:nowrap;overflow:hidden;background-color:transparent;background-position:center center;background-repeat:no-repeat;opacity:.7}.pikaday-white .pika-prev:hover,.pikaday-white .pika-next:hover{opacity:1}.pikaday-white .pika-prev{right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E")}.pikaday-white .pika-next{right:2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E")}.pika-prev.is-disabled,.pika-next.is-disabled{cursor:default;opacity:.2}.pikaday-white .pika-label{margin-right:.375rem;border-radius:.25rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity));padding:.25rem .5rem;font-size:14px;font-weight:500;line-height:1}.pikaday-white .pika-label{position:relative}.pikaday-white .pika-select-month,.pikaday-white .pika-select-year{width:100%;cursor:pointer;position:absolute;z-index:9998;margin:0;left:0;top:0;opacity:0;padding:0}.pikaday-white table{width:100%;border-collapse:collapse}.pikaday-white table th{width:2em;height:2em;font-weight:400;color:var(--weekDaysTextColor);text-align:center}.pikaday-white table th abbr{text-decoration:none}.pikaday-white table td{padding:1px}.pikaday-white table td button{width:2em;height:2em;text-align:center;border-radius:9999px;background-color:var(--backgroundColor)}.pikaday-white table td button:hover{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.pikaday-white table td.is-today button{color:var(--currentDateTextColor)}.pikaday-white table td.is-selected button{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity));font-weight:400}.pikaday-white table td button{color:var(--textColor)}[aria-label][role~=tooltip]{position:relative}[aria-label][role~=tooltip]:before,[aria-label][role~=tooltip]:after{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}[aria-label][role~=tooltip]:before{background-size:100% auto!important;content:""}[aria-label][role~=tooltip]:after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(aria-label);font-size:var(--microtip-font-size, 13px);font-weight:var(--microtip-font-weight, normal);text-transform:var(--microtip-text-transform, none);padding:.5em 1em;white-space:nowrap;box-sizing:content-box}[aria-label][role~=tooltip]:hover:before,[aria-label][role~=tooltip]:hover:after,[aria-label][role~=tooltip]:focus:before,[aria-label][role~=tooltip]:focus:after{opacity:1;pointer-events:auto}[role~=tooltip][data-microtip-position|=top]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-bottom:5px}[role~=tooltip][data-microtip-position|=top]:after{margin-bottom:11px}[role~=tooltip][data-microtip-position|=top]:before{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role~=tooltip][data-microtip-position|=top]:hover:before{transform:translate3d(-50%,-5px,0)}[role~=tooltip][data-microtip-position|=top]:after{transform:translate3d(-50%,0,0);bottom:100%;left:50%}[role~=tooltip][data-microtip-position=top]:hover:after{transform:translate3d(-50%,-5px,0)}[role~=tooltip][data-microtip-position=top-left]:after{transform:translate3d(calc(-100% + 16px),0,0);bottom:100%}[role~=tooltip][data-microtip-position=top-left]:hover:after{transform:translate3d(calc(-100% + 16px),-5px,0)}[role~=tooltip][data-microtip-position=top-right]:after{transform:translate3d(calc(0% - 16px),0,0);bottom:100%}[role~=tooltip][data-microtip-position=top-right]:hover:after{transform:translate3d(calc(0% - 16px),-5px,0)}[role~=tooltip][data-microtip-position|=bottom]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:6px;width:18px;margin-top:5px;margin-bottom:0}[role~=tooltip][data-microtip-position|=bottom]:after{margin-top:11px}[role~=tooltip][data-microtip-position|=bottom]:before{transform:translate3d(-50%,-10px,0);bottom:auto;left:50%;top:100%}[role~=tooltip][data-microtip-position|=bottom]:hover:before{transform:translate3d(-50%,0,0)}[role~=tooltip][data-microtip-position|=bottom]:after{transform:translate3d(-50%,-10px,0);top:100%;left:50%}[role~=tooltip][data-microtip-position=bottom]:hover:after{transform:translate3d(-50%,0,0)}[role~=tooltip][data-microtip-position=bottom-left]:after{transform:translate3d(calc(-100% + 16px),-10px,0);top:100%}[role~=tooltip][data-microtip-position=bottom-left]:hover:after{transform:translate3d(calc(-100% + 16px),0,0)}[role~=tooltip][data-microtip-position=bottom-right]:after{transform:translate3d(calc(0% - 16px),-10px,0);top:100%}[role~=tooltip][data-microtip-position=bottom-right]:hover:after{transform:translate3d(calc(0% - 16px),0,0)}[role~=tooltip][data-microtip-position=left]:before,[role~=tooltip][data-microtip-position=left]:after{bottom:auto;left:auto;right:100%;top:50%;transform:translate3d(10px,-50%,0)}[role~=tooltip][data-microtip-position=left]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-right:5px;margin-bottom:0}[role~=tooltip][data-microtip-position=left]:after{margin-right:11px}[role~=tooltip][data-microtip-position=left]:hover:before,[role~=tooltip][data-microtip-position=left]:hover:after{transform:translate3d(0,-50%,0)}[role~=tooltip][data-microtip-position=right]:before,[role~=tooltip][data-microtip-position=right]:after{bottom:auto;left:100%;top:50%;transform:translate3d(-10px,-50%,0)}[role~=tooltip][data-microtip-position=right]:before{background:url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E) no-repeat;height:18px;width:6px;margin-bottom:0;margin-left:5px}[role~=tooltip][data-microtip-position=right]:after{margin-left:11px}[role~=tooltip][data-microtip-position=right]:hover:before,[role~=tooltip][data-microtip-position=right]:hover:after{transform:translate3d(0,-50%,0)}[role~=tooltip][data-microtip-size=small]:after{white-space:initial;width:80px}[role~=tooltip][data-microtip-size=medium]:after{white-space:initial;width:150px}[role~=tooltip][data-microtip-size=large]:after{white-space:initial;width:260px}input::-moz-placeholder,textarea::-moz-placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}input::placeholder,textarea::placeholder{--tw-placeholder-opacity: 1;color:rgb(148 163 184 / var(--tw-placeholder-opacity))}[aria-label][role~=tooltip]:after{white-space:pre-line}

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -37,8 +37,8 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     visible: {
-        type: BooleanConstructor;
         default: boolean;
+        type: BooleanConstructor;
     };
     toggle: {
         type: BooleanConstructor;
@@ -71,7 +71,7 @@ declare const _default: import("vue").DefineComponent<{
     addColumn: any;
     removeColumn: any;
 }, {
-    newKey: undefined;
+    newKey: string | undefined;
 }, {
     style(): {
         width: string | undefined;
@@ -114,8 +114,8 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
     visible: {
-        type: BooleanConstructor;
         default: boolean;
+        type: BooleanConstructor;
     };
     toggle: {
         type: BooleanConstructor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAvatar.vue

@@ -1,5 +1,9 @@
 <template>
-  <component :is="to ? 'RouterLink' : 'div'" :to="to" class="flex items-center">
+  <component
+    :is="to ? 'RouterLink' : 'div'"
+    :to="to"
+    class="flex shrink-0 items-center"
+  >
     <img
       :src="user.avatar_url"
       :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"

package/src/components/BaseAvatarGroup.stories.js

@@ -10,25 +10,30 @@ export default {
     },
   },
 };
+
+const user = {
+  email: 'jane@witify.io',
+  full_name: 'Jane Doe',
+  avatar_url:
+    'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+};
+
 const users = [
-  {
-    email: 'jane@witify.io',
-    full_name: 'Jane Doe',
-    avatar_url:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
-  },
-  {
-    email: 'jane@witify.io',
-    full_name: 'Jane Doe',
-    avatar_url:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
-  },
-  {
-    email: 'jane@witify.io',
-    full_name: 'Jane Doe',
-    avatar_url:
-      'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
-  },
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
+  user,
 ];
 
 const Template = (args) => ({
@@ -37,7 +42,11 @@ const Template = (args) => ({
     return { args };
   },
   template: `
+    <p class="text-sm mt-2">Demo</p>
     <BaseAvatarGroup v-bind="args"></BaseAvatarGroup>
+
+    <p class="text-sm mt-2">With small container</p>
+    <div style="max-width: 200px; overflow: hidden;"><BaseAvatarGroup v-bind="args"></BaseAvatarGroup></div>
   `,
 });
 

package/src/components/BaseAvatarGroup.vue

@@ -4,6 +4,7 @@
       v-for="(user, index) in users"
       :key="user.email + '-' + index"
       role="tooltip"
+      class="shrink-0"
       :aria-label="user.full_name + '\n' + user.email"
       :style="{
         marginLeft: index === 0 ? '0' : '-' + spacing,

package/src/components/BaseDataTable.vue

@@ -48,6 +48,7 @@
               v-slot="{ row }"
               :visible="editButton || deleteButton || $slots.rowActions != null"
               :toggle="false"
+              custom-key="actions"
             >
               <div class="flex justify-end text-right">
                 <slot name="rowActions" :row="row" />

package/src/components/BaseTable.vue

@@ -419,8 +419,8 @@ const visibleColumns = computed(() => {
   }
 
   return newColumns.value.filter((column: BaseTableColumn) => {
-    if (column.visible === false) {
-      return false;
+    if (column.toggle === false) {
+      return !!column.visible;
     }
 
     if (!isArray(props.visibleColumns)) {

package/src/components/BaseTableColumn.vue

@@ -41,8 +41,8 @@ export default defineComponent({
       type: Boolean,
     },
     visible: {
-      type: Boolean,
       default: true,
+      type: Boolean,
     },
     toggle: {
       type: Boolean,
@@ -84,7 +84,7 @@ export default defineComponent({
   },
   data() {
     return {
-      newKey: undefined,
+      newKey: undefined as string | undefined,
     };
   },
   computed: {
@@ -95,7 +95,11 @@ export default defineComponent({
     },
   },
   created() {
-    this.newKey = this.nextSequence();
+    if (this.customKey) {
+      this.newKey = this.customKey + '';
+    } else {
+      this.newKey = this.nextSequence();
+    }
     this.addColumn(this);
   },
   beforeUnmount() {