@pequity/squirrel 1.2.3 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/chunks/p-select-btn.js +29 -25
  2. package/dist/cjs/index.js +87 -80
  3. package/dist/es/chunks/p-select-btn.js +30 -26
  4. package/dist/es/index.js +88 -81
  5. package/dist/squirrel/components/p-action-bar/p-action-bar.types.d.ts +12 -5
  6. package/dist/squirrel/components/p-action-bar/p-action-bar.vue.d.ts +2 -2
  7. package/dist/style.css +6 -6
  8. package/package.json +22 -22
  9. package/squirrel/components/p-action-bar/p-action-bar.spec.js +37 -25
  10. package/squirrel/components/p-action-bar/p-action-bar.types.ts +13 -5
  11. package/squirrel/components/p-action-bar/p-action-bar.vue +52 -45
  12. package/squirrel/components/p-select-btn/p-select-btn.spec.js +17 -6
  13. package/squirrel/components/p-select-btn/p-select-btn.stories.js +1 -1
  14. package/squirrel/components/p-select-btn/p-select-btn.vue +20 -16
  15. package/squirrel/components/p-table/p-table.vue +1 -1
package/dist/cjs/chunks/p-select-btn.js CHANGED
@@ -59,34 +59,38 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
59
59
  return (_ctx, _cache) => {
60
60
  const _directive_tooltip = vue.resolveDirective("tooltip");
61
61
  return vue.openBlock(), vue.createElementBlock("div", {
62
- class: vue.normalizeClass({ flex: _ctx.grow, "*:px-0 *:py-0": _ctx.noPadding })
62
+ class: vue.normalizeClass({ flex: _ctx.grow })
63
63
  }, [
64
64
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
65
- return vue.withDirectives((vue.openBlock(), vue.createBlock(pBtn, {
65
+ return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
66
66
  key: item[_ctx.itemValue],
67
- size: _ctx.size,
68
- type: "secondary-outline-blue",
69
- disabled: item.disabled,
70
- class: vue.normalizeClass({
71
- "rounded-none": index !== 0 && index !== _ctx.items.length - 1,
72
- "rounded-br-none rounded-tr-none": index === 0,
73
- "rounded-bl-none rounded-tl-none": index === _ctx.items.length - 1,
74
- "-mr-0.5": index !== _ctx.items.length - 1,
75
- "flex-1": _ctx.grow
76
- }),
77
- selected: isSelected(item) && _ctx.highlightSelected,
78
- onClick: ($event) => select(item)
79
- }, {
80
- default: vue.withCtx(() => [
81
- vue.renderSlot(_ctx.$slots, `btn-${index}`, {
82
- item,
83
- isSelected: isSelected(item)
84
- }, () => [
85
- vue.createTextVNode(vue.toDisplayString(item[_ctx.itemText]), 1)
86
- ])
87
- ]),
88
- _: 2
89
- }, 1032, ["size", "disabled", "class", "selected", "onClick"])), [
67
+ class: vue.normalizeClass(["inline-flex", { "*:px-0 *:py-0": _ctx.noPadding, grow: _ctx.grow }])
68
+ }, [
69
+ vue.createVNode(pBtn, {
70
+ size: _ctx.size,
71
+ type: "secondary-outline-blue",
72
+ disabled: item.disabled,
73
+ class: vue.normalizeClass({
74
+ "rounded-none": index !== 0 && index !== _ctx.items.length - 1,
75
+ "rounded-br-none rounded-tr-none": index === 0,
76
+ "rounded-bl-none rounded-tl-none": index === _ctx.items.length - 1,
77
+ "-mr-0.5": index !== _ctx.items.length - 1,
78
+ "flex-1": _ctx.grow
79
+ }),
80
+ selected: isSelected(item) && _ctx.highlightSelected,
81
+ onClick: ($event) => select(item)
82
+ }, {
83
+ default: vue.withCtx(() => [
84
+ vue.renderSlot(_ctx.$slots, `btn-${index}`, {
85
+ item,
86
+ isSelected: isSelected(item)
87
+ }, () => [
88
+ vue.createTextVNode(vue.toDisplayString(item[_ctx.itemText]), 1)
89
+ ])
90
+ ]),
91
+ _: 2
92
+ }, 1032, ["size", "disabled", "class", "selected", "onClick"])
93
+ ], 2)), [
90
94
  [_directive_tooltip, { content: tooltipText(item) }]
91
95
  ]);
92
96
  }), 128))
package/dist/cjs/index.js CHANGED
@@ -60,18 +60,18 @@ const dom = require("./dom.js");
60
60
  const object = require("./object.js");
61
61
  const listKeyboardNavigation = require("./listKeyboardNavigation.js");
62
62
  const number = require("./number.js");
63
- const _hoisted_1$4 = {
64
- class: "fixed bottom-6 left-1/2 flex h-12 -translate-x-1/2 select-none flex-row items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white",
65
- role: "alertdialog"
66
- };
67
- const _hoisted_2$4 = { class: "px-3" };
68
- const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mx-4 h-9 w-0.5 rounded bg-p-purple-50" }, null, -1);
69
- const _hoisted_4$4 = { class: "flex" };
63
+ const _hoisted_1$4 = { class: "flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
64
+ const _hoisted_2$4 = { class: "whitespace-nowrap px-3" };
65
+ const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
66
+ const _hoisted_4$4 = { class: "flex min-w-fit" };
70
67
  const _hoisted_5$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
71
68
  const _hoisted_6$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
72
69
  const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
73
70
  const _hoisted_8$1 = { class: "flex items-center gap-2 px-1 py-0.5" };
74
71
  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
72
+ ...{
73
+ inheritAttrs: false
74
+ },
75
75
  __name: "p-action-bar",
76
76
  props: {
77
77
  label: {},
@@ -80,73 +80,31 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
80
80
  emits: ["click:dismiss", "click:action"],
81
81
  setup(__props) {
82
82
  return (_ctx, _cache) => {
83
- return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
84
- vue.createVNode(pCloseBtn, {
85
- variant: "dark",
86
- onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
87
- }),
88
- vue.createElementVNode("p", _hoisted_2$4, vue.toDisplayString(_ctx.label), 1),
89
- _hoisted_3$4,
90
- vue.createElementVNode("div", _hoisted_4$4, [
91
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (actionOrMenu) => {
92
- return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
93
- key: `action-${actionOrMenu.label}`
94
- }, [
95
- !actionOrMenu.subActions ? (vue.openBlock(), vue.createBlock(pBtn, {
96
- key: 0,
97
- size: "sm",
98
- type: "secondary-ghost-dark",
99
- onClick: ($event) => _ctx.$emit("click:action", actionOrMenu.name)
100
- }, {
101
- default: vue.withCtx(() => [
102
- vue.createElementVNode("div", _hoisted_5$4, [
103
- actionOrMenu.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(actionOrMenu.icon), {
104
- key: 0,
105
- class: "h-4 w-4"
106
- })) : vue.createCommentVNode("", true),
107
- vue.createElementVNode("div", null, vue.toDisplayString(actionOrMenu.label), 1)
108
- ])
109
- ]),
110
- _: 2
111
- }, 1032, ["onClick"])) : (vue.openBlock(), vue.createBlock(pDropdown, {
112
- key: 1,
113
- placement: "top",
114
- strategy: "fixed"
115
- }, {
116
- popper: vue.withCtx(() => [
117
- vue.createElementVNode("div", _hoisted_7$3, [
118
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(actionOrMenu.subActions, (subaction) => {
119
- return vue.openBlock(), vue.createElementBlock("div", {
120
- key: `subaction-${subaction.name}`
121
- }, [
122
- vue.createVNode(pBtn, {
123
- size: "sm",
124
- class: "w-full",
125
- type: "secondary-ghost-dark",
126
- onClick: ($event) => _ctx.$emit("click:action", subaction.name)
127
- }, {
128
- default: vue.withCtx(() => [
129
- vue.createElementVNode("div", _hoisted_8$1, [
130
- subaction.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(subaction.icon), {
131
- key: 0,
132
- class: "h-4 w-4"
133
- })) : vue.createCommentVNode("", true),
134
- vue.createElementVNode("div", null, vue.toDisplayString(subaction.label), 1)
135
- ])
136
- ]),
137
- _: 2
138
- }, 1032, ["onClick"])
139
- ]);
140
- }), 128))
141
- ])
142
- ]),
143
- default: vue.withCtx(() => [
144
- vue.createVNode(pBtn, {
83
+ return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
84
+ vue.createElementVNode("div", vue.mergeProps({
85
+ class: "fixed bottom-6 z-[100] flex w-full justify-center",
86
+ role: "alertdialog"
87
+ }, _ctx.$attrs), [
88
+ vue.createElementVNode("div", _hoisted_1$4, [
89
+ vue.createVNode(pCloseBtn, {
90
+ variant: "dark",
91
+ onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
92
+ }),
93
+ vue.createElementVNode("p", _hoisted_2$4, vue.toDisplayString(_ctx.label), 1),
94
+ _hoisted_3$4,
95
+ vue.createElementVNode("div", _hoisted_4$4, [
96
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.actions, (actionOrMenu) => {
97
+ return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
98
+ key: `action-${actionOrMenu.label}`
99
+ }, [
100
+ !actionOrMenu.subActions ? (vue.openBlock(), vue.createBlock(pBtn, {
101
+ key: 0,
145
102
  size: "sm",
146
- type: "secondary-ghost-dark"
103
+ type: "secondary-ghost-dark",
104
+ onClick: ($event) => _ctx.$emit("click:action", actionOrMenu.name)
147
105
  }, {
148
106
  default: vue.withCtx(() => [
149
- vue.createElementVNode("div", _hoisted_6$4, [
107
+ vue.createElementVNode("div", _hoisted_5$4, [
150
108
  actionOrMenu.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(actionOrMenu.icon), {
151
109
  key: 0,
152
110
  class: "h-4 w-4"
@@ -155,13 +113,62 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
155
113
  ])
156
114
  ]),
157
115
  _: 2
158
- }, 1024)
159
- ]),
160
- _: 2
161
- }, 1024))
162
- ], 64);
163
- }), 128))
164
- ])
116
+ }, 1032, ["onClick"])) : (vue.openBlock(), vue.createBlock(pDropdown, {
117
+ key: 1,
118
+ placement: "top",
119
+ strategy: "fixed"
120
+ }, {
121
+ popper: vue.withCtx(() => [
122
+ vue.createElementVNode("div", _hoisted_7$3, [
123
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(actionOrMenu.subActions, (subaction) => {
124
+ return vue.openBlock(), vue.createElementBlock("div", {
125
+ key: `subaction-${subaction.name}`
126
+ }, [
127
+ vue.createVNode(pBtn, {
128
+ size: "sm",
129
+ class: "w-full",
130
+ type: "secondary-ghost-dark",
131
+ onClick: ($event) => _ctx.$emit("click:action", subaction.name)
132
+ }, {
133
+ default: vue.withCtx(() => [
134
+ vue.createElementVNode("div", _hoisted_8$1, [
135
+ subaction.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(subaction.icon), {
136
+ key: 0,
137
+ class: "h-4 w-4"
138
+ })) : vue.createCommentVNode("", true),
139
+ vue.createElementVNode("div", null, vue.toDisplayString(subaction.label), 1)
140
+ ])
141
+ ]),
142
+ _: 2
143
+ }, 1032, ["onClick"])
144
+ ]);
145
+ }), 128))
146
+ ])
147
+ ]),
148
+ default: vue.withCtx(() => [
149
+ vue.createVNode(pBtn, {
150
+ size: "sm",
151
+ type: "secondary-ghost-dark"
152
+ }, {
153
+ default: vue.withCtx(() => [
154
+ vue.createElementVNode("div", _hoisted_6$4, [
155
+ actionOrMenu.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(actionOrMenu.icon), {
156
+ key: 0,
157
+ class: "h-4 w-4"
158
+ })) : vue.createCommentVNode("", true),
159
+ vue.createElementVNode("div", null, vue.toDisplayString(actionOrMenu.label), 1)
160
+ ])
161
+ ]),
162
+ _: 2
163
+ }, 1024)
164
+ ]),
165
+ _: 2
166
+ }, 1024))
167
+ ], 64);
168
+ }), 128))
169
+ ])
170
+ ])
171
+ ], 16)
165
172
  ]);
166
173
  };
167
174
  }
@@ -915,7 +922,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
915
922
  ]),
916
923
  _ctx.colsResizable && i !== 0 && !(i === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (vue.openBlock(), vue.createElementBlock("div", {
917
924
  key: 0,
918
- 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"]),
925
+ 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"]),
919
926
  "data-resize-handle": "",
920
927
  onMousedown: ($event) => vue.unref(colResizeStart)($event, i),
921
928
  onDblclick: ($event) => vue.unref(colResizeFitToData)(i)
@@ -950,7 +957,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
950
957
  };
951
958
  }
952
959
  });
953
- const pTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["__scopeId", "data-v-6b61498d"]]);
960
+ const pTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["__scopeId", "data-v-8582afb1"]]);
954
961
  const _sfc_main = vue.defineComponent({
955
962
  name: "PTableSort",
956
963
  props: {
package/dist/es/chunks/p-select-btn.js CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, withDirectives, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
1
+ import { defineComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, Fragment, renderList, withDirectives, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
2
2
  import PBtn from "../p-btn.js";
3
3
  const _sfc_main = /* @__PURE__ */ defineComponent({
4
4
  ...{
@@ -58,34 +58,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
58
58
  return (_ctx, _cache) => {
59
59
  const _directive_tooltip = resolveDirective("tooltip");
60
60
  return openBlock(), createElementBlock("div", {
61
- class: normalizeClass({ flex: _ctx.grow, "*:px-0 *:py-0": _ctx.noPadding })
61
+ class: normalizeClass({ flex: _ctx.grow })
62
62
  }, [
63
63
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
64
- return withDirectives((openBlock(), createBlock(PBtn, {
64
+ return withDirectives((openBlock(), createElementBlock("div", {
65
65
  key: item[_ctx.itemValue],
66
- size: _ctx.size,
67
- type: "secondary-outline-blue",
68
- disabled: item.disabled,
69
- class: normalizeClass({
70
- "rounded-none": index !== 0 && index !== _ctx.items.length - 1,
71
- "rounded-br-none rounded-tr-none": index === 0,
72
- "rounded-bl-none rounded-tl-none": index === _ctx.items.length - 1,
73
- "-mr-0.5": index !== _ctx.items.length - 1,
74
- "flex-1": _ctx.grow
75
- }),
76
- selected: isSelected(item) && _ctx.highlightSelected,
77
- onClick: ($event) => select(item)
78
- }, {
79
- default: withCtx(() => [
80
- renderSlot(_ctx.$slots, `btn-${index}`, {
81
- item,
82
- isSelected: isSelected(item)
83
- }, () => [
84
- createTextVNode(toDisplayString(item[_ctx.itemText]), 1)
85
- ])
86
- ]),
87
- _: 2
88
- }, 1032, ["size", "disabled", "class", "selected", "onClick"])), [
66
+ class: normalizeClass(["inline-flex", { "*:px-0 *:py-0": _ctx.noPadding, grow: _ctx.grow }])
67
+ }, [
68
+ createVNode(PBtn, {
69
+ size: _ctx.size,
70
+ type: "secondary-outline-blue",
71
+ disabled: item.disabled,
72
+ class: normalizeClass({
73
+ "rounded-none": index !== 0 && index !== _ctx.items.length - 1,
74
+ "rounded-br-none rounded-tr-none": index === 0,
75
+ "rounded-bl-none rounded-tl-none": index === _ctx.items.length - 1,
76
+ "-mr-0.5": index !== _ctx.items.length - 1,
77
+ "flex-1": _ctx.grow
78
+ }),
79
+ selected: isSelected(item) && _ctx.highlightSelected,
80
+ onClick: ($event) => select(item)
81
+ }, {
82
+ default: withCtx(() => [
83
+ renderSlot(_ctx.$slots, `btn-${index}`, {
84
+ item,
85
+ isSelected: isSelected(item)
86
+ }, () => [
87
+ createTextVNode(toDisplayString(item[_ctx.itemText]), 1)
88
+ ])
89
+ ]),
90
+ _: 2
91
+ }, 1032, ["size", "disabled", "class", "selected", "onClick"])
92
+ ], 2)), [
89
93
  [_directive_tooltip, { content: tooltipText(item) }]
90
94
  ]);
91
95
  }), 128))
package/dist/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { config } from "./config.js";
2
- import { defineComponent, openBlock, createElementBlock, createVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, resolveDynamicComponent, createCommentVNode, shallowRef, ref, computed, onMounted, normalizeClass, unref, withModifiers, createTextVNode, withDirectives, vShow, pushScopeId, popScopeId, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, mergeProps, toHandlers } from "vue";
2
+ import { defineComponent, openBlock, createBlock, Teleport, createElementVNode, mergeProps, createVNode, toDisplayString, createElementBlock, Fragment, renderList, withCtx, resolveDynamicComponent, createCommentVNode, shallowRef, ref, computed, onMounted, normalizeClass, unref, withModifiers, createTextVNode, withDirectives, vShow, pushScopeId, popScopeId, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, toHandlers } from "vue";
3
3
  import PBtn from "./p-btn.js";
4
4
  import PCloseBtn from "./p-close-btn.js";
5
5
  import PDropdown from "./p-dropdown.js";
@@ -60,18 +60,18 @@ import { getNextActiveElement, isElement, isVisible } from "./dom.js";
60
60
  import { isObject } from "./object.js";
61
61
  import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
62
62
  import { toNumberOrNull } from "./number.js";
63
- const _hoisted_1$4 = {
64
- class: "fixed bottom-6 left-1/2 flex h-12 -translate-x-1/2 select-none flex-row items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white",
65
- role: "alertdialog"
66
- };
67
- const _hoisted_2$4 = { class: "px-3" };
68
- const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "mx-4 h-9 w-0.5 rounded bg-p-purple-50" }, null, -1);
69
- const _hoisted_4$4 = { class: "flex" };
63
+ const _hoisted_1$4 = { class: "flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
64
+ const _hoisted_2$4 = { class: "whitespace-nowrap px-3" };
65
+ const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("div", { class: "mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50" }, null, -1);
66
+ const _hoisted_4$4 = { class: "flex min-w-fit" };
70
67
  const _hoisted_5$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
71
68
  const _hoisted_6$4 = { class: "flex items-center gap-2 px-1 py-0.5" };
72
69
  const _hoisted_7$3 = { class: "flex flex-col bg-p-purple-60" };
73
70
  const _hoisted_8$1 = { class: "flex items-center gap-2 px-1 py-0.5" };
74
71
  const _sfc_main$4 = /* @__PURE__ */ defineComponent({
72
+ ...{
73
+ inheritAttrs: false
74
+ },
75
75
  __name: "p-action-bar",
76
76
  props: {
77
77
  label: {},
@@ -80,73 +80,31 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
80
80
  emits: ["click:dismiss", "click:action"],
81
81
  setup(__props) {
82
82
  return (_ctx, _cache) => {
83
- return openBlock(), createElementBlock("div", _hoisted_1$4, [
84
- createVNode(PCloseBtn, {
85
- variant: "dark",
86
- onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
87
- }),
88
- createElementVNode("p", _hoisted_2$4, toDisplayString(_ctx.label), 1),
89
- _hoisted_3$4,
90
- createElementVNode("div", _hoisted_4$4, [
91
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (actionOrMenu) => {
92
- return openBlock(), createElementBlock(Fragment, {
93
- key: `action-${actionOrMenu.label}`
94
- }, [
95
- !actionOrMenu.subActions ? (openBlock(), createBlock(PBtn, {
96
- key: 0,
97
- size: "sm",
98
- type: "secondary-ghost-dark",
99
- onClick: ($event) => _ctx.$emit("click:action", actionOrMenu.name)
100
- }, {
101
- default: withCtx(() => [
102
- createElementVNode("div", _hoisted_5$4, [
103
- actionOrMenu.icon ? (openBlock(), createBlock(resolveDynamicComponent(actionOrMenu.icon), {
104
- key: 0,
105
- class: "h-4 w-4"
106
- })) : createCommentVNode("", true),
107
- createElementVNode("div", null, toDisplayString(actionOrMenu.label), 1)
108
- ])
109
- ]),
110
- _: 2
111
- }, 1032, ["onClick"])) : (openBlock(), createBlock(PDropdown, {
112
- key: 1,
113
- placement: "top",
114
- strategy: "fixed"
115
- }, {
116
- popper: withCtx(() => [
117
- createElementVNode("div", _hoisted_7$3, [
118
- (openBlock(true), createElementBlock(Fragment, null, renderList(actionOrMenu.subActions, (subaction) => {
119
- return openBlock(), createElementBlock("div", {
120
- key: `subaction-${subaction.name}`
121
- }, [
122
- createVNode(PBtn, {
123
- size: "sm",
124
- class: "w-full",
125
- type: "secondary-ghost-dark",
126
- onClick: ($event) => _ctx.$emit("click:action", subaction.name)
127
- }, {
128
- default: withCtx(() => [
129
- createElementVNode("div", _hoisted_8$1, [
130
- subaction.icon ? (openBlock(), createBlock(resolveDynamicComponent(subaction.icon), {
131
- key: 0,
132
- class: "h-4 w-4"
133
- })) : createCommentVNode("", true),
134
- createElementVNode("div", null, toDisplayString(subaction.label), 1)
135
- ])
136
- ]),
137
- _: 2
138
- }, 1032, ["onClick"])
139
- ]);
140
- }), 128))
141
- ])
142
- ]),
143
- default: withCtx(() => [
144
- createVNode(PBtn, {
83
+ return openBlock(), createBlock(Teleport, { to: "body" }, [
84
+ createElementVNode("div", mergeProps({
85
+ class: "fixed bottom-6 z-[100] flex w-full justify-center",
86
+ role: "alertdialog"
87
+ }, _ctx.$attrs), [
88
+ createElementVNode("div", _hoisted_1$4, [
89
+ createVNode(PCloseBtn, {
90
+ variant: "dark",
91
+ onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click:dismiss"))
92
+ }),
93
+ createElementVNode("p", _hoisted_2$4, toDisplayString(_ctx.label), 1),
94
+ _hoisted_3$4,
95
+ createElementVNode("div", _hoisted_4$4, [
96
+ (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (actionOrMenu) => {
97
+ return openBlock(), createElementBlock(Fragment, {
98
+ key: `action-${actionOrMenu.label}`
99
+ }, [
100
+ !actionOrMenu.subActions ? (openBlock(), createBlock(PBtn, {
101
+ key: 0,
145
102
  size: "sm",
146
- type: "secondary-ghost-dark"
103
+ type: "secondary-ghost-dark",
104
+ onClick: ($event) => _ctx.$emit("click:action", actionOrMenu.name)
147
105
  }, {
148
106
  default: withCtx(() => [
149
- createElementVNode("div", _hoisted_6$4, [
107
+ createElementVNode("div", _hoisted_5$4, [
150
108
  actionOrMenu.icon ? (openBlock(), createBlock(resolveDynamicComponent(actionOrMenu.icon), {
151
109
  key: 0,
152
110
  class: "h-4 w-4"
@@ -155,13 +113,62 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
155
113
  ])
156
114
  ]),
157
115
  _: 2
158
- }, 1024)
159
- ]),
160
- _: 2
161
- }, 1024))
162
- ], 64);
163
- }), 128))
164
- ])
116
+ }, 1032, ["onClick"])) : (openBlock(), createBlock(PDropdown, {
117
+ key: 1,
118
+ placement: "top",
119
+ strategy: "fixed"
120
+ }, {
121
+ popper: withCtx(() => [
122
+ createElementVNode("div", _hoisted_7$3, [
123
+ (openBlock(true), createElementBlock(Fragment, null, renderList(actionOrMenu.subActions, (subaction) => {
124
+ return openBlock(), createElementBlock("div", {
125
+ key: `subaction-${subaction.name}`
126
+ }, [
127
+ createVNode(PBtn, {
128
+ size: "sm",
129
+ class: "w-full",
130
+ type: "secondary-ghost-dark",
131
+ onClick: ($event) => _ctx.$emit("click:action", subaction.name)
132
+ }, {
133
+ default: withCtx(() => [
134
+ createElementVNode("div", _hoisted_8$1, [
135
+ subaction.icon ? (openBlock(), createBlock(resolveDynamicComponent(subaction.icon), {
136
+ key: 0,
137
+ class: "h-4 w-4"
138
+ })) : createCommentVNode("", true),
139
+ createElementVNode("div", null, toDisplayString(subaction.label), 1)
140
+ ])
141
+ ]),
142
+ _: 2
143
+ }, 1032, ["onClick"])
144
+ ]);
145
+ }), 128))
146
+ ])
147
+ ]),
148
+ default: withCtx(() => [
149
+ createVNode(PBtn, {
150
+ size: "sm",
151
+ type: "secondary-ghost-dark"
152
+ }, {
153
+ default: withCtx(() => [
154
+ createElementVNode("div", _hoisted_6$4, [
155
+ actionOrMenu.icon ? (openBlock(), createBlock(resolveDynamicComponent(actionOrMenu.icon), {
156
+ key: 0,
157
+ class: "h-4 w-4"
158
+ })) : createCommentVNode("", true),
159
+ createElementVNode("div", null, toDisplayString(actionOrMenu.label), 1)
160
+ ])
161
+ ]),
162
+ _: 2
163
+ }, 1024)
164
+ ]),
165
+ _: 2
166
+ }, 1024))
167
+ ], 64);
168
+ }), 128))
169
+ ])
170
+ ])
171
+ ], 16)
165
172
  ]);
166
173
  };
167
174
  }
@@ -915,7 +922,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
915
922
  ]),
916
923
  _ctx.colsResizable && i !== 0 && !(i === _ctx.cols.length - 1 && _ctx.isLastColFixed) ? (openBlock(), createElementBlock("div", {
917
924
  key: 0,
918
- 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"]),
925
+ 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"]),
919
926
  "data-resize-handle": "",
920
927
  onMousedown: ($event) => unref(colResizeStart)($event, i),
921
928
  onDblclick: ($event) => unref(colResizeFitToData)(i)
@@ -950,7 +957,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
950
957
  };
951
958
  }
952
959
  });
953
- const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6b61498d"]]);
960
+ const pTable = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8582afb1"]]);
954
961
  const _sfc_main = defineComponent({
955
962
  name: "PTableSort",
956
963
  props: {
package/dist/squirrel/components/p-action-bar/p-action-bar.types.d.ts CHANGED
@@ -1,10 +1,17 @@
1
- export type PActionBarAction = {
2
- name?: string;
3
- label: string;
4
- icon?: string;
5
- subActions?: {
1
+ type WithSubActions = {
2
+ name: never;
3
+ subActions: {
6
4
  name: string;
7
5
  label: string;
8
6
  icon?: string;
9
7
  }[];
10
8
  };
9
+ type WithoutSubActions = {
10
+ name: string;
11
+ subActions: never;
12
+ };
13
+ export type PActionBarAction = {
14
+ label: string;
15
+ icon?: string;
16
+ } & (WithSubActions | WithoutSubActions);
17
+ export {};
package/dist/squirrel/components/p-action-bar/p-action-bar.vue.d.ts CHANGED
@@ -5,10 +5,10 @@ type Props = {
5
5
  };
6
6
  declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
7
7
  "click:dismiss": () => void;
8
- "click:action": (value: string | undefined) => void;
8
+ "click:action": (value: string) => void;
9
9
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
10
10
  "onClick:dismiss"?: (() => any) | undefined;
11
- "onClick:action"?: ((value: string | undefined) => any) | undefined;
11
+ "onClick:action"?: ((value: string) => any) | undefined;
12
12
  }, {}, {}>;
13
13
  export default _default;
14
14
 
package/dist/style.css CHANGED
@@ -2094,29 +2094,29 @@ to {
2094
2094
  .bg-file-upload-x-icon[data-v-d07a8f64]:hover {
2095
2095
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0%208C0%209.58225%200.469192%2011.129%201.34824%2012.4446C2.22729%2013.7602%203.47672%2014.7855%204.93853%2015.391C6.40034%2015.9965%208.00887%2016.155%209.56072%2015.8463C11.1126%2015.5376%2012.538%2014.7757%2013.6569%2013.6569C14.7757%2012.538%2015.5376%2011.1126%2015.8463%209.56072C16.155%208.00887%2015.9965%206.40034%2015.391%204.93853C14.7855%203.47672%2013.7602%202.22729%2012.4446%201.34824C11.129%200.469192%209.58225%200%208%200C5.87827%200%203.84344%200.842855%202.34315%202.34315C0.842855%203.84344%200%205.87827%200%208ZM14.3333%208C14.3333%209.25262%2013.9619%2010.4771%2013.266%2011.5186C12.5701%2012.5601%2011.5809%2013.3719%2010.4237%2013.8512C9.2664%2014.3306%207.99298%2014.456%206.76443%2014.2116C5.53588%2013.9673%204.40739%2013.3641%203.52166%2012.4783C2.63592%2011.5926%202.03273%2010.4641%201.78836%209.23557C1.54399%208.00703%201.66941%206.7336%202.14876%205.57634C2.62812%204.41907%203.43988%203.42994%204.48139%202.73403C5.5229%202.03811%206.74739%201.66667%208%201.66667C9.67916%201.66843%2011.289%202.33626%2012.4764%203.52361C13.6637%204.71096%2014.3316%206.32084%2014.3333%208Z'%20fill='%23BB1410'%20/%3e%3cpath%20d='M5.88634%204.71322C5.73075%204.55763%205.51972%204.47021%205.29967%204.47021C5.07963%204.47021%204.8686%204.55763%204.71301%204.71322C4.55741%204.86881%204.47%205.07984%204.47%205.29989C4.47%205.51993%204.55741%205.73096%204.71301%205.88655L6.71301%207.88655C6.72914%207.9021%206.74197%207.92074%206.75073%207.94136C6.7595%207.96198%206.76401%207.98415%206.76401%208.00655C6.76401%208.02896%206.7595%208.05113%206.75073%208.07175C6.74197%208.09237%206.72914%208.11101%206.71301%208.12655L4.71301%2010.1266C4.63561%2010.2034%204.57417%2010.2948%204.53225%2010.3955C4.49033%2010.4962%204.46875%2010.6042%204.46875%2010.7132C4.46875%2010.8223%204.49033%2010.9303%204.53225%2011.031C4.57417%2011.1317%204.63561%2011.223%204.71301%2011.2999C4.78939%2011.3781%204.88063%2011.4403%204.98138%2011.4827C5.08213%2011.5251%205.19035%2011.547%205.29967%2011.547C5.409%2011.547%205.51721%2011.5251%205.61796%2011.4827C5.71871%2011.4403%205.80996%2011.3781%205.88634%2011.2999L7.88634%209.29989C7.91934%209.27037%207.96207%209.25405%208.00634%209.25405C8.05062%209.25405%208.09334%209.27037%208.12634%209.29989L10.1263%2011.2999C10.2027%2011.3781%2010.294%2011.4403%2010.3947%2011.4827C10.4955%2011.5251%2010.6037%2011.547%2010.713%2011.547C10.8223%2011.547%2010.9305%2011.5251%2011.0313%2011.4827C11.132%2011.4403%2011.2233%2011.3781%2011.2997%2011.2999C11.3771%2011.223%2011.4385%2011.1317%2011.4804%2011.031C11.5224%2010.9303%2011.5439%2010.8223%2011.5439%2010.7132C11.5439%2010.6042%2011.5224%2010.4962%2011.4804%2010.3955C11.4385%2010.2948%2011.3771%2010.2034%2011.2997%2010.1266L9.29967%208.12655C9.27016%208.09355%209.25384%208.05083%209.25384%208.00655C9.25384%207.96228%209.27016%207.91955%209.29967%207.88655L11.2997%205.88655C11.4553%205.73096%2011.5427%205.51993%2011.5427%205.29989C11.5427%205.07984%2011.4553%204.86881%2011.2997%204.71322C11.1441%204.55763%2010.9331%204.47021%2010.713%204.47021C10.493%204.47021%2010.2819%204.55763%2010.1263%204.71322L8.12634%206.71322C8.09334%206.74274%208.05062%206.75906%208.00634%206.75906C7.96207%206.75906%207.91934%206.74274%207.88634%206.71322L5.88634%204.71322Z'%20fill='%23BB1410'%20/%3e%3c/svg%3e");
2096
2096
  }
2097
- .p-table[data-v-6b61498d] {
2097
+ .p-table[data-v-8582afb1] {
2098
2098
  color: var(--color-night);
2099
2099
  height: 1px;
2100
2100
  }
2101
- .p-table th[data-v-6b61498d] {
2101
+ .p-table th[data-v-8582afb1] {
2102
2102
  position: sticky;
2103
2103
  top: 0px;
2104
2104
  z-index: 20;
2105
2105
  padding: 0px;
2106
2106
  }
2107
- .p-table.first-col-fixed th[data-v-6b61498d]:first-child {
2107
+ .p-table.first-col-fixed th[data-v-8582afb1]:first-child {
2108
2108
  left: 0px;
2109
2109
  z-index: 30;
2110
2110
  }
2111
- .p-table.first-col-fixed th:first-child .th-shadow[data-v-6b61498d] {
2111
+ .p-table.first-col-fixed th:first-child .th-shadow[data-v-8582afb1] {
2112
2112
  box-shadow: -1px 1px 5px 4px rgba(0, 0, 0, 0.15);
2113
2113
  clip-path: inset(0px -12px 0px 0px);
2114
2114
  }
2115
- .p-table.last-col-fixed th[data-v-6b61498d]:last-child {
2115
+ .p-table.last-col-fixed th[data-v-8582afb1]:last-child {
2116
2116
  right: 0px;
2117
2117
  z-index: 30;
2118
2118
  }
2119
- .p-table.last-col-fixed th:last-child .th-shadow[data-v-6b61498d] {
2119
+ .p-table.last-col-fixed th:last-child .th-shadow[data-v-8582afb1] {
2120
2120
  box-shadow: -2px 1px 8px rgba(0, 0, 0, 0.15);
2121
2121
  clip-path: inset(0px 0px 0px -12px);
2122
2122
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pequity/squirrel",
3
3
  "description": "Squirrel component library",
4
- "version": "1.2.3",
4
+ "version": "1.2.5",
5
5
  "packageManager": "pnpm@8.9.2",
6
6
  "type": "module",
7
7
  "scripts": {
@@ -50,33 +50,33 @@
50
50
  "vue-toastification": "^2.0.0-rc.5"
51
51
  },
52
52
  "devDependencies": {
53
- "@babel/core": "^7.24.6",
54
- "@babel/preset-env": "^7.24.6",
53
+ "@babel/core": "^7.24.7",
54
+ "@babel/preset-env": "^7.24.7",
55
55
  "@commitlint/cli": "^19.3.0",
56
56
  "@commitlint/config-conventional": "^19.2.2",
57
57
  "@pequity/eslint-config": "^0.0.13",
58
58
  "@popperjs/core": "2.11.8",
59
59
  "@semantic-release/changelog": "^6.0.3",
60
60
  "@semantic-release/git": "^10.0.1",
61
- "@storybook/addon-a11y": "^8.1.4",
62
- "@storybook/addon-actions": "^8.1.4",
63
- "@storybook/addon-essentials": "^8.1.4",
64
- "@storybook/addon-interactions": "^8.1.4",
65
- "@storybook/addon-links": "^8.1.4",
66
- "@storybook/blocks": "^8.1.4",
61
+ "@storybook/addon-a11y": "^8.1.5",
62
+ "@storybook/addon-actions": "^8.1.5",
63
+ "@storybook/addon-essentials": "^8.1.5",
64
+ "@storybook/addon-interactions": "^8.1.5",
65
+ "@storybook/addon-links": "^8.1.5",
66
+ "@storybook/blocks": "^8.1.5",
67
67
  "@storybook/jest": "^0.2.3",
68
- "@storybook/manager-api": "^8.1.4",
69
- "@storybook/test-runner": "^0.18.1",
68
+ "@storybook/manager-api": "^8.1.5",
69
+ "@storybook/test-runner": "^0.18.2",
70
70
  "@storybook/testing-library": "^0.2.2",
71
- "@storybook/theming": "^8.1.4",
72
- "@storybook/vue3": "^8.1.4",
73
- "@storybook/vue3-vite": "^8.1.4",
71
+ "@storybook/theming": "^8.1.5",
72
+ "@storybook/vue3": "^8.1.5",
73
+ "@storybook/vue3-vite": "^8.1.5",
74
74
  "@tanstack/vue-virtual": "3.5.0",
75
75
  "@types/jest": "^29.5.12",
76
- "@types/jsdom": "^21.1.6",
76
+ "@types/jsdom": "^21.1.7",
77
77
  "@types/lodash-es": "^4.17.12",
78
- "@types/node": "^20.12.12",
79
- "@vitejs/plugin-vue": "^5.0.4",
78
+ "@types/node": "^20.14.2",
79
+ "@vitejs/plugin-vue": "^5.0.5",
80
80
  "@vue/compiler-sfc": "3.4.27",
81
81
  "@vue/test-utils": "^2.4.6",
82
82
  "@vue/vue3-jest": "^29.2.6",
@@ -94,13 +94,13 @@
94
94
  "lodash-es": "4.17.21",
95
95
  "make-coverage-badge": "^1.2.0",
96
96
  "postcss": "^8.4.38",
97
- "prettier": "^3.2.5",
98
- "prettier-plugin-tailwindcss": "^0.5.14",
97
+ "prettier": "^3.3.1",
98
+ "prettier-plugin-tailwindcss": "^0.6.1",
99
99
  "resolve-tspaths": "^0.8.19",
100
100
  "rimraf": "^5.0.7",
101
- "sass": "^1.77.2",
102
- "semantic-release": "^23.1.1",
103
- "storybook": "^8.1.4",
101
+ "sass": "^1.77.4",
102
+ "semantic-release": "^24.0.0",
103
+ "storybook": "^8.1.5",
104
104
  "svgo": "^3.3.2",
105
105
  "tailwindcss": "^3.4.3",
106
106
  "ts-jest": "^29.1.4",
package/squirrel/components/p-action-bar/p-action-bar.spec.js CHANGED
@@ -34,9 +34,22 @@ const createPDropdownStub = () => {
34
34
  };
35
35
  };
36
36
 
37
+ const createComponentWrapper = (args = {}) =>
38
+ createWrapperFor(PActionBar, {
39
+ global: {
40
+ stubs: {
41
+ Teleport: {
42
+ template: '<div class="teleport-stub"><slot></slot></div>',
43
+ },
44
+ PDropdown: createPDropdownStub(),
45
+ },
46
+ },
47
+ ...args,
48
+ });
49
+
37
50
  describe('PActionBar.vue', () => {
38
51
  it('renders correctly', async () => {
39
- const wrapper = createWrapperFor(PActionBar, {
52
+ const wrapper = createComponentWrapper({
40
53
  props: {
41
54
  label: 'Hello World',
42
55
  actions: [
@@ -46,17 +59,17 @@ describe('PActionBar.vue', () => {
46
59
  },
47
60
  });
48
61
 
49
- const mainDiv = await wrapper.find('div.fixed');
62
+ const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
50
63
  expect(mainDiv.exists()).toBe(true);
51
- [
52
- 'fixed',
53
- 'bottom-6',
54
- 'left-1/2',
64
+
65
+ expect(mainDiv.classes()).toEqual(['fixed', 'bottom-6', 'z-[100]', 'flex', 'w-full', 'justify-center']);
66
+ const actionBarDiv = mainDiv.find('.bg-p-purple-60');
67
+ expect(actionBarDiv.exists()).toBe(true);
68
+ expect(actionBarDiv.classes()).toEqual([
55
69
  'flex',
56
70
  'h-12',
57
- '-translate-x-1/2',
71
+ 'min-w-fit',
58
72
  'select-none',
59
- 'flex-row',
60
73
  'items-center',
61
74
  'rounded-lg',
62
75
  'bg-p-purple-60',
@@ -64,7 +77,7 @@ describe('PActionBar.vue', () => {
64
77
  'text-sm',
65
78
  'font-medium',
66
79
  'text-white',
67
- ].forEach((c) => expect(mainDiv.classes()).toContain(c));
80
+ ]);
68
81
 
69
82
  const paragraph = await wrapper.find('p');
70
83
  expect(paragraph.text()).toContain('Hello World');
@@ -78,16 +91,20 @@ describe('PActionBar.vue', () => {
78
91
  });
79
92
 
80
93
  it('attrs fall through ', async () => {
81
- const ParentComponent = {
82
- template: `
83
- <PActionBar label="Test action bar" :actions="[{ label: 'Say Hi', name: 'greet' }]" data-testid="TestId" custom-attr="Test custom attr" class="test-class" />
84
- `,
85
- components: { PActionBar },
86
- };
87
-
88
- const wrapper = createWrapperFor(ParentComponent);
94
+ const wrapper = createComponentWrapper({
95
+ props: {
96
+ label: 'Hello World',
97
+ actions: [
98
+ { label: 'Say Hi', name: 'greet' },
99
+ { label: 'Action menu', subActions: [{ label: 'Say Bye', name: 'bye' }] },
100
+ ],
101
+ 'data-testid': 'TestId',
102
+ 'custom-attr': 'Test custom attr',
103
+ class: 'test-class',
104
+ },
105
+ });
89
106
 
90
- const actionBar = await wrapper.find('div');
107
+ const actionBar = await wrapper.find('.teleport-stub > div');
91
108
 
92
109
  expect(actionBar.attributes('role')).toBe('alertdialog');
93
110
  expect(actionBar.attributes('data-testid')).toBe('TestId');
@@ -96,7 +113,7 @@ describe('PActionBar.vue', () => {
96
113
  });
97
114
 
98
115
  it('emits a click:dismiss event', async () => {
99
- const wrapper = createWrapperFor(PActionBar, {
116
+ const wrapper = createComponentWrapper({
100
117
  props: { label: 'Hello World', actions: [{ label: 'Say Hi', name: 'greet' }] },
101
118
  });
102
119
 
@@ -108,7 +125,7 @@ describe('PActionBar.vue', () => {
108
125
  });
109
126
 
110
127
  it('emits a click:action event with the correct name', async () => {
111
- const wrapper = createWrapperFor(PActionBar, {
128
+ const wrapper = createComponentWrapper({
112
129
  props: {
113
130
  label: 'Hello World',
114
131
  actions: [
@@ -116,11 +133,6 @@ describe('PActionBar.vue', () => {
116
133
  { label: 'Action menu', subActions: [{ label: 'Say Bye', name: 'bye' }] },
117
134
  ],
118
135
  },
119
- global: {
120
- stubs: {
121
- PDropdown: createPDropdownStub(),
122
- },
123
- },
124
136
  });
125
137
 
126
138
  const button = await wrapper.findByText('Say Hi', 'button');
package/squirrel/components/p-action-bar/p-action-bar.types.ts CHANGED
@@ -1,10 +1,18 @@
1
- export type PActionBarAction = {
2
- name?: string;
3
- label: string;
4
- icon?: string;
5
- subActions?: {
1
+ type WithSubActions = {
2
+ name: never;
3
+ subActions: {
6
4
  name: string;
7
5
  label: string;
8
6
  icon?: string;
9
7
  }[];
10
8
  };
9
+
10
+ type WithoutSubActions = {
11
+ name: string;
12
+ subActions: never;
13
+ };
14
+
15
+ export type PActionBarAction = {
16
+ label: string;
17
+ icon?: string;
18
+ } & (WithSubActions | WithoutSubActions);
package/squirrel/components/p-action-bar/p-action-bar.vue CHANGED
@@ -1,52 +1,55 @@
1
1
  <template>
2
- <div
3
- class="fixed bottom-6 left-1/2 flex h-12 -translate-x-1/2 select-none flex-row items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
4
- role="alertdialog"
5
- >
6
- <PCloseBtn variant="dark" @click="$emit('click:dismiss')"></PCloseBtn>
7
- <p class="px-3">{{ label }}</p>
8
- <div class="mx-4 h-9 w-0.5 rounded bg-p-purple-50"></div>
9
- <div class="flex">
10
- <template v-for="actionOrMenu in actions" :key="`action-${actionOrMenu.label}`">
11
- <PBtn
12
- v-if="!actionOrMenu.subActions"
13
- size="sm"
14
- type="secondary-ghost-dark"
15
- @click="$emit('click:action', actionOrMenu.name)"
16
- >
17
- <div class="flex items-center gap-2 px-1 py-0.5">
18
- <Component :is="actionOrMenu.icon" v-if="actionOrMenu.icon" class="h-4 w-4" />
19
- <div>{{ actionOrMenu.label }}</div>
20
- </div>
21
- </PBtn>
22
- <PDropdown v-else placement="top" strategy="fixed">
23
- <PBtn size="sm" type="secondary-ghost-dark">
24
- <div class="flex items-center gap-2 px-1 py-0.5">
25
- <Component :is="actionOrMenu.icon" v-if="actionOrMenu.icon" class="h-4 w-4" />
26
- <div>{{ actionOrMenu.label }}</div>
27
- </div>
28
- </PBtn>
29
- <template #popper>
30
- <div class="flex flex-col bg-p-purple-60">
31
- <div v-for="subaction in actionOrMenu.subActions" :key="`subaction-${subaction.name}`">
32
- <PBtn
33
- size="sm"
34
- class="w-full"
35
- type="secondary-ghost-dark"
36
- @click="$emit('click:action', subaction.name)"
37
- >
38
- <div class="flex items-center gap-2 px-1 py-0.5">
39
- <Component :is="subaction.icon" v-if="subaction.icon" class="h-4 w-4" />
40
- <div>{{ subaction.label }}</div>
41
- </div>
42
- </PBtn>
2
+ <Teleport to="body">
3
+ <div class="fixed bottom-6 z-[100] flex w-full justify-center" role="alertdialog" v-bind="$attrs">
4
+ <div
5
+ class="flex h-12 min-w-fit select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white"
6
+ >
7
+ <PCloseBtn variant="dark" @click="$emit('click:dismiss')"></PCloseBtn>
8
+ <p class="whitespace-nowrap px-3">{{ label }}</p>
9
+ <div class="mx-4 h-9 w-0.5 shrink-0 rounded bg-p-purple-50"></div>
10
+ <div class="flex min-w-fit">
11
+ <template v-for="actionOrMenu in actions" :key="`action-${actionOrMenu.label}`">
12
+ <PBtn
13
+ v-if="!actionOrMenu.subActions"
14
+ size="sm"
15
+ type="secondary-ghost-dark"
16
+ @click="$emit('click:action', actionOrMenu.name)"
17
+ >
18
+ <div class="flex items-center gap-2 px-1 py-0.5">
19
+ <Component :is="actionOrMenu.icon" v-if="actionOrMenu.icon" class="h-4 w-4" />
20
+ <div>{{ actionOrMenu.label }}</div>
43
21
  </div>
44
- </div>
22
+ </PBtn>
23
+ <PDropdown v-else placement="top" strategy="fixed">
24
+ <PBtn size="sm" type="secondary-ghost-dark">
25
+ <div class="flex items-center gap-2 px-1 py-0.5">
26
+ <Component :is="actionOrMenu.icon" v-if="actionOrMenu.icon" class="h-4 w-4" />
27
+ <div>{{ actionOrMenu.label }}</div>
28
+ </div>
29
+ </PBtn>
30
+ <template #popper>
31
+ <div class="flex flex-col bg-p-purple-60">
32
+ <div v-for="subaction in actionOrMenu.subActions" :key="`subaction-${subaction.name}`">
33
+ <PBtn
34
+ size="sm"
35
+ class="w-full"
36
+ type="secondary-ghost-dark"
37
+ @click="$emit('click:action', subaction.name)"
38
+ >
39
+ <div class="flex items-center gap-2 px-1 py-0.5">
40
+ <Component :is="subaction.icon" v-if="subaction.icon" class="h-4 w-4" />
41
+ <div>{{ subaction.label }}</div>
42
+ </div>
43
+ </PBtn>
44
+ </div>
45
+ </div>
46
+ </template>
47
+ </PDropdown>
45
48
  </template>
46
- </PDropdown>
47
- </template>
49
+ </div>
50
+ </div>
48
51
  </div>
49
- </div>
52
+ </Teleport>
50
53
  </template>
51
54
 
52
55
  <script setup lang="ts">
@@ -55,6 +58,10 @@ import PCloseBtn from '@squirrel/components/p-close-btn/p-close-btn.vue';
55
58
  import PDropdown from '@squirrel/components/p-dropdown/p-dropdown.vue';
56
59
  import { type PActionBarAction } from '@squirrel/components/p-action-bar/p-action-bar.types';
57
60
 
61
+ defineOptions({
62
+ inheritAttrs: false,
63
+ });
64
+
58
65
  type Props = {
59
66
  label: string;
60
67
  actions: PActionBarAction[];
package/squirrel/components/p-select-btn/p-select-btn.spec.js CHANGED
@@ -40,7 +40,7 @@ describe('PSelectBtn.vue', () => {
40
40
  },
41
41
  });
42
42
 
43
- await wrapper.findByText('Option 1').trigger('click');
43
+ await wrapper.findByText('Option 1', 'button').trigger('click');
44
44
  const selectedButton = await wrapper.find('button[aria-selected="true"]');
45
45
 
46
46
  expect(wrapper.props('modelValue')).toBe(1);
@@ -125,12 +125,19 @@ describe('PSelectBtn.vue', () => {
125
125
  modelValue: 2,
126
126
  showTooltip: true,
127
127
  },
128
+ directives: {
129
+ tooltip: {
130
+ mounted(el, binding) {
131
+ el.setAttribute('data-tooltip', binding.value.content || '');
132
+ },
133
+ },
134
+ },
128
135
  });
129
136
 
130
- const buttons = await wrapper.findAll('button');
137
+ const buttonDivs = await wrapper.findAll('div.inline-flex');
131
138
 
132
- buttons.forEach((button) => {
133
- expect(button.classes()).toContain('v-popper--has-tooltip');
139
+ buttonDivs.forEach((buttonDiv, i) => {
140
+ expect(buttonDiv.attributes()['data-tooltip']).toBe(items[i].textCustom);
134
141
  });
135
142
  });
136
143
 
@@ -199,8 +206,12 @@ describe('PSelectBtn.vue', () => {
199
206
  },
200
207
  });
201
208
 
202
- expect(wrapper.classes()).toContain('*:px-0');
203
- expect(wrapper.classes()).toContain('*:py-0');
209
+ const buttonContainers = wrapper.findAll('div.inline-flex');
210
+
211
+ buttonContainers.forEach((buttonContainer) => {
212
+ expect(buttonContainer.classes()).toContain('*:px-0');
213
+ expect(buttonContainer.classes()).toContain('*:py-0');
214
+ });
204
215
  });
205
216
 
206
217
  it('passes the isSelected data via scoped slots', async () => {
package/squirrel/components/p-select-btn/p-select-btn.stories.js CHANGED
@@ -164,7 +164,7 @@ export const WithTooltip = {
164
164
  },
165
165
  },
166
166
  args: {
167
- items: selectItems,
167
+ items: selectItems.map((item, i) => ({ ...item, disabled: i === 1 })),
168
168
  itemTooltipText: 'tooltip',
169
169
  showTooltip: true,
170
170
  },
package/squirrel/components/p-select-btn/p-select-btn.vue CHANGED
@@ -1,24 +1,28 @@
1
1
  <template>
2
- <div :class="{ flex: grow, '*:px-0 *:py-0': noPadding }">
3
- <PBtn
2
+ <div :class="{ flex: grow }">
3
+ <div
4
4
  v-for="(item, index) in items"
5
5
  :key="item[itemValue] as Key"
6
6
  v-tooltip="{ content: tooltipText(item) }"
7
- :size="size"
8
- type="secondary-outline-blue"
9
- :disabled="item.disabled"
10
- :class="{
11
- 'rounded-none': index !== 0 && index !== items.length - 1,
12
- 'rounded-br-none rounded-tr-none': index === 0,
13
- 'rounded-bl-none rounded-tl-none': index === items.length - 1,
14
- '-mr-0.5': index !== items.length - 1,
15
- 'flex-1': grow,
16
- }"
17
- :selected="isSelected(item) && highlightSelected"
18
- @click="select(item)"
7
+ :class="['inline-flex', { '*:px-0 *:py-0': noPadding, grow }]"
19
8
  >
20
- <slot :name="`btn-${index}`" :item="item" :is-selected="isSelected(item)">{{ item[itemText] }}</slot>
21
- </PBtn>
9
+ <PBtn
10
+ :size="size"
11
+ type="secondary-outline-blue"
12
+ :disabled="item.disabled"
13
+ :class="{
14
+ 'rounded-none': index !== 0 && index !== items.length - 1,
15
+ 'rounded-br-none rounded-tr-none': index === 0,
16
+ 'rounded-bl-none rounded-tl-none': index === items.length - 1,
17
+ '-mr-0.5': index !== items.length - 1,
18
+ 'flex-1': grow,
19
+ }"
20
+ :selected="isSelected(item) && highlightSelected"
21
+ @click="select(item)"
22
+ >
23
+ <slot :name="`btn-${index}`" :item="item" :is-selected="isSelected(item)">{{ item[itemText] }}</slot>
24
+ </PBtn>
25
+ </div>
22
26
  </div>
23
27
  </template>
24
28
 
package/squirrel/components/p-table/p-table.vue CHANGED
@@ -49,7 +49,7 @@
49
49
  <div
50
50
  v-if="colsResizable && i !== 0 && !(i === cols.length - 1 && isLastColFixed)"
51
51
  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"
52
- :class="i === cols.length - 1 ? ' after:right-0.5' : ' after:right-0'"
52
+ :class="i === cols.length - 1 ? 'after:right-0.5' : 'after:right-0'"
53
53
  data-resize-handle
54
54
  @mousedown="colResizeStart($event, i)"
55
55
  @dblclick="colResizeFitToData(i)"