@pequity/squirrel 6.0.14 → 6.1.1
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/chunks/p-action-bar.js +4 -4
- package/dist/cjs/chunks/p-btn.js +204 -0
- package/dist/cjs/chunks/p-select-btn.js +8 -8
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/p-btn.js +2 -169
- package/dist/es/chunks/p-action-bar.js +8 -8
- package/dist/es/chunks/p-btn.js +205 -0
- package/dist/es/chunks/p-select-btn.js +9 -9
- package/dist/es/index.js +62 -62
- package/dist/es/p-btn.js +2 -169
- package/dist/squirrel/components/p-btn/p-btn.vue.d.ts +106 -46
- package/dist/squirrel/components/p-card/p-card.vue.d.ts +27 -14
- package/dist/squirrel/components/p-checkbox/p-checkbox.vue.d.ts +43 -12
- package/dist/squirrel/components/p-close-btn/p-close-btn.vue.d.ts +1 -1
- package/dist/squirrel/components/p-drawer/p-drawer.vue.d.ts +1 -1
- package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts +15 -422
- package/dist/squirrel/components/p-file-upload/p-file-upload.vue.d.ts +1 -3
- package/dist/squirrel/components/p-info-icon/p-info-icon.vue.d.ts +13 -11
- package/dist/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue.d.ts +39 -14
- package/dist/squirrel/components/p-input/p-input.vue.d.ts +2 -2
- package/dist/squirrel/components/p-input-number/p-input-number.vue.d.ts +2 -2
- package/dist/squirrel/components/p-input-search/p-input-search.vue.d.ts +2 -2
- package/dist/squirrel/components/p-link/p-link.vue.d.ts +17 -13
- package/dist/squirrel/components/p-loading/p-loading.vue.d.ts +1 -3
- package/dist/squirrel/components/p-modal/p-modal.vue.d.ts +240 -22
- package/dist/squirrel/components/p-pagination-info/p-pagination-info.vue.d.ts +77 -10
- package/dist/squirrel/components/p-select/p-select.vue.d.ts +116 -14
- package/dist/squirrel/components/p-select-btn/p-select-btn.vue.d.ts +37 -13
- package/dist/squirrel/components/p-select-list/p-select-list.vue.d.ts +14 -418
- package/dist/squirrel/components/p-table/p-table.vue.d.ts +61 -19
- package/dist/squirrel/components/p-table-header-cell/p-table-header-cell.vue.d.ts +2 -2
- package/dist/squirrel/components/p-table-loader/p-table-loader.vue.d.ts +1 -1
- package/dist/squirrel/components/p-table-td/p-table-td.vue.d.ts +23 -11
- package/dist/squirrel/components/p-tabs/p-tabs.vue.d.ts +1 -1
- package/dist/squirrel/components/p-textarea/p-textarea.vue.d.ts +1 -1
- package/dist/squirrel/components/p-toggle/p-toggle.vue.d.ts +1 -1
- package/dist/squirrel/utils/inputClassesMixin.d.ts +1 -1
- package/package.json +25 -24
- package/squirrel/components/p-btn/p-btn.spec.js +229 -161
- package/squirrel/components/p-btn/p-btn.stories.js +32 -8
- package/squirrel/components/p-btn/p-btn.vue +106 -73
- package/squirrel/components/p-dropdown/p-dropdown.vue +0 -1
- package/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue +1 -1
- package/squirrel/components/p-select-btn/p-select-btn.spec.js +24 -5
- package/squirrel/components/p-select-btn/p-select-btn.stories.js +45 -4
- package/squirrel/components/p-select-btn/p-select-btn.vue +3 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const vue = require("vue");
|
|
3
|
-
const
|
|
3
|
+
const pBtn_vue_vue_type_script_setup_true_lang = require("./p-btn.js");
|
|
4
4
|
const pCloseBtn = require("../p-close-btn.js");
|
|
5
5
|
const pDropdown = require("../p-dropdown.js");
|
|
6
6
|
const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
|
|
@@ -45,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
45
45
|
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
|
|
46
46
|
key: `action-${actionOrMenu.label}`
|
|
47
47
|
}, [
|
|
48
|
-
!actionOrMenu.subActions ? (vue.openBlock(), vue.createBlock(
|
|
48
|
+
!actionOrMenu.subActions ? (vue.openBlock(), vue.createBlock(pBtn_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
49
49
|
key: 0,
|
|
50
50
|
size: "sm",
|
|
51
51
|
type: "secondary-ghost-dark",
|
|
@@ -78,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
78
78
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
79
79
|
key: `subaction-${subaction.name}`
|
|
80
80
|
}, [
|
|
81
|
-
vue.createVNode(
|
|
81
|
+
vue.createVNode(pBtn_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
82
82
|
size: "sm",
|
|
83
83
|
class: "w-full",
|
|
84
84
|
type: "secondary-ghost-dark",
|
|
@@ -106,7 +106,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
106
106
|
])
|
|
107
107
|
]),
|
|
108
108
|
default: vue.withCtx(() => [
|
|
109
|
-
vue.createVNode(
|
|
109
|
+
vue.createVNode(pBtn_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
110
110
|
size: "sm",
|
|
111
111
|
type: "secondary-ghost-dark"
|
|
112
112
|
}, {
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const vue = require("vue");
|
|
3
|
+
const pBtn_types = require("./p-btn.types.js");
|
|
4
|
+
const pIcon_vue_vue_type_script_setup_true_lang = require("./p-icon.js");
|
|
5
|
+
const pRingLoader_vue_vue_type_script_setup_true_lang = require("./p-ring-loader.js");
|
|
6
|
+
const link = require("../link.js");
|
|
7
|
+
const sanitization = require("../sanitization.js");
|
|
8
|
+
const index = require("./index.js");
|
|
9
|
+
const _hoisted_1 = ["href", "disabled", "aria-disabled"];
|
|
10
|
+
const _hoisted_2 = { class: "slot-wrapper empty:hidden" };
|
|
11
|
+
const btnClasses = {
|
|
12
|
+
slots: {
|
|
13
|
+
button: "relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50",
|
|
14
|
+
content: "flex items-center justify-center has-[.slot-wrapper:empty]:gap-0",
|
|
15
|
+
loader: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium",
|
|
16
|
+
icon: "shrink-0"
|
|
17
|
+
},
|
|
18
|
+
variants: {
|
|
19
|
+
type: {
|
|
20
|
+
primary: {
|
|
21
|
+
button: "bg-primary text-surface hover:bg-accent active:bg-p-blue-80",
|
|
22
|
+
loader: "text-surface"
|
|
23
|
+
},
|
|
24
|
+
secondary: {
|
|
25
|
+
button: "bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40",
|
|
26
|
+
loader: "text-p-purple-60"
|
|
27
|
+
},
|
|
28
|
+
"primary-outline": {
|
|
29
|
+
button: "bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20",
|
|
30
|
+
loader: "text-p-purple-60"
|
|
31
|
+
},
|
|
32
|
+
"secondary-outline": {
|
|
33
|
+
button: "bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10",
|
|
34
|
+
loader: "text-p-purple-60"
|
|
35
|
+
},
|
|
36
|
+
"secondary-outline-blue": {
|
|
37
|
+
button: "bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60",
|
|
38
|
+
loader: "text-p-purple-60"
|
|
39
|
+
},
|
|
40
|
+
error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
|
|
41
|
+
success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
|
|
42
|
+
"primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
|
|
43
|
+
"secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },
|
|
44
|
+
"secondary-ghost-dark": { button: "text-white hover:bg-p-purple-50", loader: "text-p-blue-15" }
|
|
45
|
+
},
|
|
46
|
+
size: {
|
|
47
|
+
sm: {
|
|
48
|
+
button: "px-3 has-[.slot-wrapper:empty]:px-1.5 py-1.5 text-sm leading-5",
|
|
49
|
+
content: "gap-1",
|
|
50
|
+
icon: "text-[20px]"
|
|
51
|
+
},
|
|
52
|
+
md: {
|
|
53
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-2.5 has-[.slot-wrapper:empty]:py-2.5 py-2 text-base",
|
|
54
|
+
content: "gap-2",
|
|
55
|
+
icon: "text-xl"
|
|
56
|
+
},
|
|
57
|
+
lg: {
|
|
58
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-3 py-3 text-lg leading-7",
|
|
59
|
+
content: "gap-2.5",
|
|
60
|
+
icon: "text-2xl"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
defaultVariants: {
|
|
65
|
+
type: "primary",
|
|
66
|
+
size: "md"
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
const btn = index.ce(btnClasses);
|
|
70
|
+
const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
|
|
71
|
+
const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
|
|
72
|
+
const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
|
|
73
|
+
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
74
|
+
...{
|
|
75
|
+
name: "PBtn",
|
|
76
|
+
inheritAttrs: false
|
|
77
|
+
},
|
|
78
|
+
__name: "p-btn",
|
|
79
|
+
props: {
|
|
80
|
+
/**
|
|
81
|
+
* The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
|
|
82
|
+
*/
|
|
83
|
+
type: {
|
|
84
|
+
type: String,
|
|
85
|
+
default: "primary",
|
|
86
|
+
validator(value) {
|
|
87
|
+
return BUTTON_TYPES.includes(value);
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
/**
|
|
91
|
+
* The button native type e.g button, submit, reset
|
|
92
|
+
*/
|
|
93
|
+
nativeType: {
|
|
94
|
+
type: String,
|
|
95
|
+
default: "button",
|
|
96
|
+
validator(value) {
|
|
97
|
+
return BUTTON_NATIVE_TYPES.includes(value);
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
/**
|
|
101
|
+
* The button size e.g sm, md, lg
|
|
102
|
+
*/
|
|
103
|
+
size: {
|
|
104
|
+
type: String,
|
|
105
|
+
default: "md",
|
|
106
|
+
validator(value) {
|
|
107
|
+
return pBtn_types.SIZES.includes(value);
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
/**
|
|
111
|
+
* Whether the button is loading
|
|
112
|
+
*/
|
|
113
|
+
loading: {
|
|
114
|
+
type: Boolean,
|
|
115
|
+
default: false
|
|
116
|
+
},
|
|
117
|
+
/**
|
|
118
|
+
* Whether the button is selected (sets aria-selected attribute)
|
|
119
|
+
*/
|
|
120
|
+
selected: {
|
|
121
|
+
type: Boolean,
|
|
122
|
+
default: false
|
|
123
|
+
},
|
|
124
|
+
/**
|
|
125
|
+
* Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
|
|
126
|
+
* See https://router.vuejs.org/api/#RouteLocationRaw
|
|
127
|
+
*/
|
|
128
|
+
to: {
|
|
129
|
+
type: [Object, String],
|
|
130
|
+
default: ""
|
|
131
|
+
},
|
|
132
|
+
/**
|
|
133
|
+
* The icon to display on the button
|
|
134
|
+
*/
|
|
135
|
+
icon: {
|
|
136
|
+
type: String,
|
|
137
|
+
default: ""
|
|
138
|
+
},
|
|
139
|
+
iconRight: {
|
|
140
|
+
type: String,
|
|
141
|
+
default: ""
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
setup(__props) {
|
|
145
|
+
const props = __props;
|
|
146
|
+
const classes = vue.computed(() => {
|
|
147
|
+
const { button, content, loader, icon } = btn({
|
|
148
|
+
type: props.type,
|
|
149
|
+
size: props.size
|
|
150
|
+
});
|
|
151
|
+
return { button: button(), content: content(), loader: loader(), icon: icon() };
|
|
152
|
+
});
|
|
153
|
+
const loaderSize = vue.computed(() => {
|
|
154
|
+
return Number(`${LOADER_SIZES[props.size]}`);
|
|
155
|
+
});
|
|
156
|
+
return (_ctx, _cache) => {
|
|
157
|
+
return typeof __props.to === "string" && vue.unref(link.isExternalLink)(__props.to) ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
|
|
158
|
+
href: vue.unref(sanitization.sanitizeUrl)(__props.to),
|
|
159
|
+
target: "_blank",
|
|
160
|
+
class: classes.value.button,
|
|
161
|
+
disabled: !!_ctx.$attrs.disabled ? true : null,
|
|
162
|
+
"aria-disabled": !!_ctx.$attrs.disabled
|
|
163
|
+
}), [
|
|
164
|
+
vue.renderSlot(_ctx.$slots, "default")
|
|
165
|
+
], 16, _hoisted_1)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.to ? "RouterLink" : "button"), vue.mergeProps({
|
|
166
|
+
key: 1,
|
|
167
|
+
type: __props.to ? null : __props.nativeType,
|
|
168
|
+
to: __props.to ? __props.to : null,
|
|
169
|
+
"aria-selected": __props.selected,
|
|
170
|
+
class: classes.value.button
|
|
171
|
+
}, _ctx.$attrs, {
|
|
172
|
+
disabled: !!_ctx.$attrs.disabled || __props.loading ? true : null,
|
|
173
|
+
"aria-disabled": _ctx.$attrs.disabled
|
|
174
|
+
}), {
|
|
175
|
+
default: vue.withCtx(() => [
|
|
176
|
+
vue.createElementVNode("div", {
|
|
177
|
+
class: vue.normalizeClass([{ invisible: __props.loading }, classes.value.content])
|
|
178
|
+
}, [
|
|
179
|
+
__props.icon ? (vue.openBlock(), vue.createBlock(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
180
|
+
key: 0,
|
|
181
|
+
icon: __props.icon,
|
|
182
|
+
class: vue.normalizeClass(classes.value.icon)
|
|
183
|
+
}, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true),
|
|
184
|
+
vue.createElementVNode("span", _hoisted_2, [
|
|
185
|
+
vue.renderSlot(_ctx.$slots, "default")
|
|
186
|
+
]),
|
|
187
|
+
__props.iconRight ? (vue.openBlock(), vue.createBlock(pIcon_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
188
|
+
key: 1,
|
|
189
|
+
icon: __props.iconRight,
|
|
190
|
+
class: vue.normalizeClass(classes.value.icon)
|
|
191
|
+
}, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
|
|
192
|
+
], 2),
|
|
193
|
+
__props.loading ? (vue.openBlock(), vue.createBlock(pRingLoader_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
194
|
+
key: 0,
|
|
195
|
+
size: loaderSize.value,
|
|
196
|
+
class: vue.normalizeClass(classes.value.loader)
|
|
197
|
+
}, null, 8, ["size", "class"])) : vue.createCommentVNode("", true)
|
|
198
|
+
]),
|
|
199
|
+
_: 3
|
|
200
|
+
}, 16, ["type", "to", "aria-selected", "class", "disabled", "aria-disabled"]));
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
exports._sfc_main = _sfc_main;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const vue = require("vue");
|
|
3
|
-
const
|
|
3
|
+
const pBtn_vue_vue_type_script_setup_true_lang = require("./p-btn.js");
|
|
4
|
+
const _hoisted_1 = { class: "flex" };
|
|
4
5
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
5
6
|
...{
|
|
6
7
|
name: "PSelectBtn"
|
|
@@ -58,18 +59,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
58
59
|
};
|
|
59
60
|
return (_ctx, _cache) => {
|
|
60
61
|
const _directive_tooltip = vue.resolveDirective("tooltip");
|
|
61
|
-
return vue.openBlock(), vue.createElementBlock("div",
|
|
62
|
-
class: vue.normalizeClass({ flex: _ctx.grow })
|
|
63
|
-
}, [
|
|
62
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
64
63
|
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index) => {
|
|
65
64
|
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
|
|
66
|
-
key: item[_ctx.itemValue],
|
|
65
|
+
key: String(item[_ctx.itemValue]),
|
|
67
66
|
class: vue.normalizeClass(["inline-flex", { "*:px-0 *:py-0": _ctx.noPadding, grow: _ctx.grow }])
|
|
68
67
|
}, [
|
|
69
|
-
vue.createVNode(
|
|
68
|
+
vue.createVNode(pBtn_vue_vue_type_script_setup_true_lang._sfc_main, {
|
|
70
69
|
size: _ctx.size,
|
|
71
70
|
type: "secondary-outline-blue",
|
|
72
71
|
disabled: item.disabled,
|
|
72
|
+
icon: String(item.icon),
|
|
73
73
|
class: vue.normalizeClass({
|
|
74
74
|
"rounded-none": index !== 0 && index !== _ctx.items.length - 1 && _ctx.items.length > 1,
|
|
75
75
|
"rounded-br-none rounded-tr-none": index === 0 && _ctx.items.length > 1,
|
|
@@ -89,12 +89,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
89
89
|
])
|
|
90
90
|
]),
|
|
91
91
|
_: 2
|
|
92
|
-
}, 1032, ["size", "disabled", "class", "selected", "onClick"])
|
|
92
|
+
}, 1032, ["size", "disabled", "icon", "class", "selected", "onClick"])
|
|
93
93
|
], 2)), [
|
|
94
94
|
[_directive_tooltip, { content: tooltipText(item) }]
|
|
95
95
|
]);
|
|
96
96
|
}), 128))
|
|
97
|
-
]
|
|
97
|
+
]);
|
|
98
98
|
};
|
|
99
99
|
}
|
|
100
100
|
});
|
package/dist/cjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const pActionBar_vue_vue_type_script_setup_true_lang = require("./chunks/p-action-bar.js");
|
|
4
4
|
const pAlert = require("./p-alert.js");
|
|
5
5
|
const pAvatar = require("./p-avatar.js");
|
|
6
|
-
const
|
|
6
|
+
const pBtn_vue_vue_type_script_setup_true_lang = require("./chunks/p-btn.js");
|
|
7
7
|
const pCard_vue_vue_type_script_setup_true_lang = require("./chunks/p-card.js");
|
|
8
8
|
const pCheckbox = require("./p-checkbox.js");
|
|
9
9
|
const pChips = require("./p-chips.js");
|
|
@@ -962,7 +962,7 @@ const pTableSort = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main
|
|
|
962
962
|
exports.PActionBar = pActionBar_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
963
963
|
exports.PAlert = pAlert;
|
|
964
964
|
exports.PAvatar = pAvatar;
|
|
965
|
-
exports.PBtn =
|
|
965
|
+
exports.PBtn = pBtn_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
966
966
|
exports.PCard = pCard_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
967
967
|
exports.PCheckbox = pCheckbox;
|
|
968
968
|
exports.PChips = pChips;
|
package/dist/cjs/p-btn.js
CHANGED
|
@@ -1,170 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const link = require("./link.js");
|
|
5
|
-
const sanitization = require("./sanitization.js");
|
|
6
|
-
const index = require("./chunks/index.js");
|
|
7
|
-
const vue = require("vue");
|
|
8
|
-
const vueRouter = require("vue-router");
|
|
9
|
-
const _pluginVue_exportHelper = require("./chunks/_plugin-vue_export-helper.js");
|
|
10
|
-
const btnClasses = {
|
|
11
|
-
slots: {
|
|
12
|
-
button: "relative inline-block rounded font-medium outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:cursor-default aria-disabled:opacity-50",
|
|
13
|
-
loader: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium"
|
|
14
|
-
},
|
|
15
|
-
variants: {
|
|
16
|
-
type: {
|
|
17
|
-
primary: {
|
|
18
|
-
button: "bg-primary text-surface hover:bg-accent active:bg-p-blue-80",
|
|
19
|
-
loader: "text-surface"
|
|
20
|
-
},
|
|
21
|
-
secondary: {
|
|
22
|
-
button: "bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40",
|
|
23
|
-
loader: "text-p-purple-60"
|
|
24
|
-
},
|
|
25
|
-
"primary-outline": {
|
|
26
|
-
button: "bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20",
|
|
27
|
-
loader: "text-p-purple-60"
|
|
28
|
-
},
|
|
29
|
-
"secondary-outline": {
|
|
30
|
-
button: "bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-10",
|
|
31
|
-
loader: "text-p-purple-60"
|
|
32
|
-
},
|
|
33
|
-
"secondary-outline-blue": {
|
|
34
|
-
button: "bg-surface text-p-purple-60 ring-1 ring-inset ring-p-gray-30 hover:bg-p-blue-10 aria-selected:bg-p-blue-15 aria-selected:text-p-blue-60",
|
|
35
|
-
loader: "text-p-purple-60"
|
|
36
|
-
},
|
|
37
|
-
error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
|
|
38
|
-
success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
|
|
39
|
-
"primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
|
|
40
|
-
"secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },
|
|
41
|
-
"secondary-ghost-dark": { button: "text-white hover:bg-p-purple-50", loader: "text-p-blue-15" }
|
|
42
|
-
},
|
|
43
|
-
size: {
|
|
44
|
-
sm: { button: "px-2 py-1 text-sm" },
|
|
45
|
-
md: { button: "px-6 py-2 text-base" },
|
|
46
|
-
lg: { button: "px-6 py-2.5 text-lg" }
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
defaultVariants: {
|
|
50
|
-
type: "primary",
|
|
51
|
-
size: "md"
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const btn = index.ce(btnClasses);
|
|
55
|
-
const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
|
|
56
|
-
const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
|
|
57
|
-
const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
|
|
58
|
-
const _sfc_main = vue.defineComponent({
|
|
59
|
-
name: "PBtn",
|
|
60
|
-
components: {
|
|
61
|
-
PRingLoader: pRingLoader_vue_vue_type_script_setup_true_lang._sfc_main,
|
|
62
|
-
RouterLink: vueRouter.RouterLink
|
|
63
|
-
},
|
|
64
|
-
inheritAttrs: false,
|
|
65
|
-
props: {
|
|
66
|
-
/**
|
|
67
|
-
* The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
|
|
68
|
-
*/
|
|
69
|
-
type: {
|
|
70
|
-
type: String,
|
|
71
|
-
default: "primary",
|
|
72
|
-
validator(value) {
|
|
73
|
-
return BUTTON_TYPES.includes(value);
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
/**
|
|
77
|
-
* The button native type e.g button, submit, reset
|
|
78
|
-
*/
|
|
79
|
-
nativeType: {
|
|
80
|
-
type: String,
|
|
81
|
-
default: "button",
|
|
82
|
-
validator(value) {
|
|
83
|
-
return BUTTON_NATIVE_TYPES.includes(value);
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
/**
|
|
87
|
-
* The button size e.g sm, md, lg
|
|
88
|
-
*/
|
|
89
|
-
size: {
|
|
90
|
-
type: String,
|
|
91
|
-
default: "md",
|
|
92
|
-
validator(value) {
|
|
93
|
-
return pBtn_types.SIZES.includes(value);
|
|
94
|
-
}
|
|
95
|
-
},
|
|
96
|
-
/**
|
|
97
|
-
* Whether the button is loading
|
|
98
|
-
*/
|
|
99
|
-
loading: {
|
|
100
|
-
type: Boolean,
|
|
101
|
-
default: false
|
|
102
|
-
},
|
|
103
|
-
/**
|
|
104
|
-
* Whether the button is selected (sets aria-selected attribute)
|
|
105
|
-
*/
|
|
106
|
-
selected: {
|
|
107
|
-
type: Boolean,
|
|
108
|
-
default: false
|
|
109
|
-
},
|
|
110
|
-
/**
|
|
111
|
-
* Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
|
|
112
|
-
* See https://router.vuejs.org/api/#RouteLocationRaw
|
|
113
|
-
*/
|
|
114
|
-
to: {
|
|
115
|
-
type: [Object, String],
|
|
116
|
-
default: ""
|
|
117
|
-
}
|
|
118
|
-
},
|
|
119
|
-
computed: {
|
|
120
|
-
classes() {
|
|
121
|
-
const { button, loader } = btn({ type: this.type, size: this.size });
|
|
122
|
-
return { button: button(), loader: loader() };
|
|
123
|
-
},
|
|
124
|
-
loaderSize() {
|
|
125
|
-
return Number(`${LOADER_SIZES[this.size]}`);
|
|
126
|
-
}
|
|
127
|
-
},
|
|
128
|
-
methods: {
|
|
129
|
-
isExternalLink: link.isExternalLink,
|
|
130
|
-
sanitizeUrl: sanitization.sanitizeUrl
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
const _hoisted_1 = ["href", "disabled", "aria-disabled"];
|
|
134
|
-
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
135
|
-
const _component_PRingLoader = vue.resolveComponent("PRingLoader");
|
|
136
|
-
return typeof _ctx.to === "string" && _ctx.isExternalLink(_ctx.to) ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
|
|
137
|
-
href: _ctx.sanitizeUrl(_ctx.to),
|
|
138
|
-
target: "_blank",
|
|
139
|
-
class: _ctx.classes.button,
|
|
140
|
-
disabled: !!_ctx.$attrs.disabled ? true : null,
|
|
141
|
-
"aria-disabled": !!_ctx.$attrs.disabled
|
|
142
|
-
}), [
|
|
143
|
-
vue.renderSlot(_ctx.$slots, "default")
|
|
144
|
-
], 16, _hoisted_1)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.to ? "RouterLink" : "button"), vue.mergeProps({
|
|
145
|
-
key: 1,
|
|
146
|
-
type: _ctx.to ? null : _ctx.nativeType,
|
|
147
|
-
to: _ctx.to ? _ctx.to : null,
|
|
148
|
-
"aria-selected": _ctx.selected,
|
|
149
|
-
class: _ctx.classes.button
|
|
150
|
-
}, _ctx.$attrs, {
|
|
151
|
-
disabled: !!_ctx.$attrs.disabled || _ctx.loading ? true : null,
|
|
152
|
-
"aria-disabled": _ctx.$attrs.disabled
|
|
153
|
-
}), {
|
|
154
|
-
default: vue.withCtx(() => [
|
|
155
|
-
vue.createElementVNode("div", {
|
|
156
|
-
class: vue.normalizeClass({ invisible: _ctx.loading })
|
|
157
|
-
}, [
|
|
158
|
-
vue.renderSlot(_ctx.$slots, "default")
|
|
159
|
-
], 2),
|
|
160
|
-
_ctx.loading ? (vue.openBlock(), vue.createBlock(_component_PRingLoader, {
|
|
161
|
-
key: 0,
|
|
162
|
-
size: _ctx.loaderSize,
|
|
163
|
-
class: vue.normalizeClass(_ctx.classes.loader)
|
|
164
|
-
}, null, 8, ["size", "class"])) : vue.createCommentVNode("", true)
|
|
165
|
-
]),
|
|
166
|
-
_: 3
|
|
167
|
-
}, 16, ["type", "to", "aria-selected", "class", "disabled", "aria-disabled"]));
|
|
168
|
-
}
|
|
169
|
-
const PBtn = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
170
|
-
module.exports = PBtn;
|
|
2
|
+
const pBtn_vue_vue_type_script_setup_true_lang = require("./chunks/p-btn.js");
|
|
3
|
+
module.exports = pBtn_vue_vue_type_script_setup_true_lang._sfc_main;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent, createBlock, openBlock, Teleport, createElementBlock, createCommentVNode, mergeProps, createElementVNode, createVNode, toDisplayString, Fragment, renderList, withCtx, unref, resolveDynamicComponent } from "vue";
|
|
2
|
-
import
|
|
2
|
+
import { _ as _sfc_main$1 } from "./p-btn.js";
|
|
3
3
|
import PCloseBtn from "../p-close-btn.js";
|
|
4
4
|
import PDropdown from "../p-dropdown.js";
|
|
5
|
-
import { _ as _sfc_main$
|
|
5
|
+
import { _ as _sfc_main$2 } from "./p-icon.js";
|
|
6
6
|
import { isComponent } from "../component.js";
|
|
7
7
|
import { isString } from "../string.js";
|
|
8
8
|
const _hoisted_1 = { class: "flex h-12 w-max select-none items-center rounded-lg bg-p-purple-60 px-2 text-sm font-medium text-white" };
|
|
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
44
44
|
return openBlock(), createElementBlock(Fragment, {
|
|
45
45
|
key: `action-${actionOrMenu.label}`
|
|
46
46
|
}, [
|
|
47
|
-
!actionOrMenu.subActions ? (openBlock(), createBlock(
|
|
47
|
+
!actionOrMenu.subActions ? (openBlock(), createBlock(_sfc_main$1, {
|
|
48
48
|
key: 0,
|
|
49
49
|
size: "sm",
|
|
50
50
|
type: "secondary-ghost-dark",
|
|
@@ -56,7 +56,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
56
56
|
key: 0,
|
|
57
57
|
class: "h-4 w-4"
|
|
58
58
|
})) : createCommentVNode("", true),
|
|
59
|
-
unref(isString)(actionOrMenu.icon) ? (openBlock(), createBlock(_sfc_main$
|
|
59
|
+
unref(isString)(actionOrMenu.icon) ? (openBlock(), createBlock(_sfc_main$2, {
|
|
60
60
|
key: 1,
|
|
61
61
|
icon: actionOrMenu.icon,
|
|
62
62
|
width: "16px",
|
|
@@ -77,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
77
77
|
return openBlock(), createElementBlock("div", {
|
|
78
78
|
key: `subaction-${subaction.name}`
|
|
79
79
|
}, [
|
|
80
|
-
createVNode(
|
|
80
|
+
createVNode(_sfc_main$1, {
|
|
81
81
|
size: "sm",
|
|
82
82
|
class: "w-full",
|
|
83
83
|
type: "secondary-ghost-dark",
|
|
@@ -89,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
89
89
|
key: 0,
|
|
90
90
|
class: "h-4 w-4"
|
|
91
91
|
})) : createCommentVNode("", true),
|
|
92
|
-
unref(isString)(subaction.icon) ? (openBlock(), createBlock(_sfc_main$
|
|
92
|
+
unref(isString)(subaction.icon) ? (openBlock(), createBlock(_sfc_main$2, {
|
|
93
93
|
key: 1,
|
|
94
94
|
icon: subaction.icon,
|
|
95
95
|
width: "16px",
|
|
@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
105
105
|
])
|
|
106
106
|
]),
|
|
107
107
|
default: withCtx(() => [
|
|
108
|
-
createVNode(
|
|
108
|
+
createVNode(_sfc_main$1, {
|
|
109
109
|
size: "sm",
|
|
110
110
|
type: "secondary-ghost-dark"
|
|
111
111
|
}, {
|
|
@@ -115,7 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
115
115
|
key: 0,
|
|
116
116
|
class: "h-4 w-4"
|
|
117
117
|
})) : createCommentVNode("", true),
|
|
118
|
-
unref(isString)(actionOrMenu.icon) ? (openBlock(), createBlock(_sfc_main$
|
|
118
|
+
unref(isString)(actionOrMenu.icon) ? (openBlock(), createBlock(_sfc_main$2, {
|
|
119
119
|
key: 1,
|
|
120
120
|
icon: actionOrMenu.icon,
|
|
121
121
|
width: "16px",
|