@pequity/squirrel 1.2.3 → 1.2.4
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.
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
|
-
|
|
65
|
-
|
|
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.
|
|
84
|
-
vue.
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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",
|
|
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
|
-
},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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
|
}
|
package/dist/es/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { config } from "./config.js";
|
|
2
|
-
import { defineComponent, openBlock,
|
|
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
|
-
|
|
65
|
-
|
|
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(),
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
}),
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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",
|
|
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
|
-
},
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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
|
}
|
package/package.json
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 =
|
|
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('
|
|
62
|
+
const mainDiv = await wrapper.find('.teleport-stub > .fixed.bottom-6');
|
|
50
63
|
expect(mainDiv.exists()).toBe(true);
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
'-
|
|
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
|
-
]
|
|
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
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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 =
|
|
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 =
|
|
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');
|
|
@@ -1,52 +1,55 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
class="fixed bottom-6
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
</
|
|
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
|
-
</
|
|
47
|
-
</
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
48
51
|
</div>
|
|
49
|
-
</
|
|
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[];
|