@pequity/squirrel 6.0.14 → 6.1.0
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 +5 -4
- 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 +5 -4
- 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 +227 -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.stories.js +45 -4
- package/squirrel/components/p-select-btn/p-select-btn.vue +2 -2
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
import { defineComponent, computed, createElementBlock, createBlock, unref, openBlock, mergeProps, renderSlot, resolveDynamicComponent, withCtx, createElementVNode, createCommentVNode, normalizeClass } from "vue";
|
|
2
|
+
import { S as SIZES } from "./p-btn.types.js";
|
|
3
|
+
import { _ as _sfc_main$1 } from "./p-icon.js";
|
|
4
|
+
import { _ as _sfc_main$2 } from "./p-ring-loader.js";
|
|
5
|
+
import { isExternalLink } from "../link.js";
|
|
6
|
+
import { sanitizeUrl } from "../sanitization.js";
|
|
7
|
+
import { c as ce } from "./index.js";
|
|
8
|
+
const _hoisted_1 = ["href", "disabled", "aria-disabled"];
|
|
9
|
+
const _hoisted_2 = { class: "slot-wrapper empty:hidden" };
|
|
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
|
+
content: "flex items-center justify-center has-[.slot-wrapper:empty]:gap-0",
|
|
14
|
+
loader: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium",
|
|
15
|
+
icon: "shrink-0"
|
|
16
|
+
},
|
|
17
|
+
variants: {
|
|
18
|
+
type: {
|
|
19
|
+
primary: {
|
|
20
|
+
button: "bg-primary text-surface hover:bg-accent active:bg-p-blue-80",
|
|
21
|
+
loader: "text-surface"
|
|
22
|
+
},
|
|
23
|
+
secondary: {
|
|
24
|
+
button: "bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40",
|
|
25
|
+
loader: "text-p-purple-60"
|
|
26
|
+
},
|
|
27
|
+
"primary-outline": {
|
|
28
|
+
button: "bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20",
|
|
29
|
+
loader: "text-p-purple-60"
|
|
30
|
+
},
|
|
31
|
+
"secondary-outline": {
|
|
32
|
+
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",
|
|
33
|
+
loader: "text-p-purple-60"
|
|
34
|
+
},
|
|
35
|
+
"secondary-outline-blue": {
|
|
36
|
+
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",
|
|
37
|
+
loader: "text-p-purple-60"
|
|
38
|
+
},
|
|
39
|
+
error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
|
|
40
|
+
success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
|
|
41
|
+
"primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
|
|
42
|
+
"secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },
|
|
43
|
+
"secondary-ghost-dark": { button: "text-white hover:bg-p-purple-50", loader: "text-p-blue-15" }
|
|
44
|
+
},
|
|
45
|
+
size: {
|
|
46
|
+
sm: {
|
|
47
|
+
button: "px-2 has-[.slot-wrapper:empty]:px-1 py-1 text-sm",
|
|
48
|
+
content: "gap-1",
|
|
49
|
+
icon: "text-lg"
|
|
50
|
+
},
|
|
51
|
+
md: {
|
|
52
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-2 py-2 text-base",
|
|
53
|
+
content: "gap-2",
|
|
54
|
+
icon: "text-xl"
|
|
55
|
+
},
|
|
56
|
+
lg: {
|
|
57
|
+
button: "px-6 has-[.slot-wrapper:empty]:px-2.5 py-2.5 text-lg",
|
|
58
|
+
content: "gap-2.5",
|
|
59
|
+
icon: "text-2xl"
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
defaultVariants: {
|
|
64
|
+
type: "primary",
|
|
65
|
+
size: "md"
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
const btn = ce(btnClasses);
|
|
69
|
+
const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
|
|
70
|
+
const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
|
|
71
|
+
const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
|
|
72
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
73
|
+
...{
|
|
74
|
+
name: "PBtn",
|
|
75
|
+
inheritAttrs: false
|
|
76
|
+
},
|
|
77
|
+
__name: "p-btn",
|
|
78
|
+
props: {
|
|
79
|
+
/**
|
|
80
|
+
* The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
|
|
81
|
+
*/
|
|
82
|
+
type: {
|
|
83
|
+
type: String,
|
|
84
|
+
default: "primary",
|
|
85
|
+
validator(value) {
|
|
86
|
+
return BUTTON_TYPES.includes(value);
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
/**
|
|
90
|
+
* The button native type e.g button, submit, reset
|
|
91
|
+
*/
|
|
92
|
+
nativeType: {
|
|
93
|
+
type: String,
|
|
94
|
+
default: "button",
|
|
95
|
+
validator(value) {
|
|
96
|
+
return BUTTON_NATIVE_TYPES.includes(value);
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
/**
|
|
100
|
+
* The button size e.g sm, md, lg
|
|
101
|
+
*/
|
|
102
|
+
size: {
|
|
103
|
+
type: String,
|
|
104
|
+
default: "md",
|
|
105
|
+
validator(value) {
|
|
106
|
+
return SIZES.includes(value);
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
/**
|
|
110
|
+
* Whether the button is loading
|
|
111
|
+
*/
|
|
112
|
+
loading: {
|
|
113
|
+
type: Boolean,
|
|
114
|
+
default: false
|
|
115
|
+
},
|
|
116
|
+
/**
|
|
117
|
+
* Whether the button is selected (sets aria-selected attribute)
|
|
118
|
+
*/
|
|
119
|
+
selected: {
|
|
120
|
+
type: Boolean,
|
|
121
|
+
default: false
|
|
122
|
+
},
|
|
123
|
+
/**
|
|
124
|
+
* Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
|
|
125
|
+
* See https://router.vuejs.org/api/#RouteLocationRaw
|
|
126
|
+
*/
|
|
127
|
+
to: {
|
|
128
|
+
type: [Object, String],
|
|
129
|
+
default: ""
|
|
130
|
+
},
|
|
131
|
+
/**
|
|
132
|
+
* The icon to display on the button
|
|
133
|
+
*/
|
|
134
|
+
icon: {
|
|
135
|
+
type: String,
|
|
136
|
+
default: ""
|
|
137
|
+
},
|
|
138
|
+
iconRight: {
|
|
139
|
+
type: String,
|
|
140
|
+
default: ""
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
setup(__props) {
|
|
144
|
+
const props = __props;
|
|
145
|
+
const classes = computed(() => {
|
|
146
|
+
const { button, content, loader, icon } = btn({
|
|
147
|
+
type: props.type,
|
|
148
|
+
size: props.size
|
|
149
|
+
});
|
|
150
|
+
return { button: button(), content: content(), loader: loader(), icon: icon() };
|
|
151
|
+
});
|
|
152
|
+
const loaderSize = computed(() => {
|
|
153
|
+
return Number(`${LOADER_SIZES[props.size]}`);
|
|
154
|
+
});
|
|
155
|
+
return (_ctx, _cache) => {
|
|
156
|
+
return typeof __props.to === "string" && unref(isExternalLink)(__props.to) ? (openBlock(), createElementBlock("a", mergeProps({ key: 0 }, _ctx.$attrs, {
|
|
157
|
+
href: unref(sanitizeUrl)(__props.to),
|
|
158
|
+
target: "_blank",
|
|
159
|
+
class: classes.value.button,
|
|
160
|
+
disabled: !!_ctx.$attrs.disabled ? true : null,
|
|
161
|
+
"aria-disabled": !!_ctx.$attrs.disabled
|
|
162
|
+
}), [
|
|
163
|
+
renderSlot(_ctx.$slots, "default")
|
|
164
|
+
], 16, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent(__props.to ? "RouterLink" : "button"), mergeProps({
|
|
165
|
+
key: 1,
|
|
166
|
+
type: __props.to ? null : __props.nativeType,
|
|
167
|
+
to: __props.to ? __props.to : null,
|
|
168
|
+
"aria-selected": __props.selected,
|
|
169
|
+
class: classes.value.button
|
|
170
|
+
}, _ctx.$attrs, {
|
|
171
|
+
disabled: !!_ctx.$attrs.disabled || __props.loading ? true : null,
|
|
172
|
+
"aria-disabled": _ctx.$attrs.disabled
|
|
173
|
+
}), {
|
|
174
|
+
default: withCtx(() => [
|
|
175
|
+
createElementVNode("div", {
|
|
176
|
+
class: normalizeClass([{ invisible: __props.loading }, classes.value.content])
|
|
177
|
+
}, [
|
|
178
|
+
__props.icon ? (openBlock(), createBlock(_sfc_main$1, {
|
|
179
|
+
key: 0,
|
|
180
|
+
icon: __props.icon,
|
|
181
|
+
class: normalizeClass(classes.value.icon)
|
|
182
|
+
}, null, 8, ["icon", "class"])) : createCommentVNode("", true),
|
|
183
|
+
createElementVNode("span", _hoisted_2, [
|
|
184
|
+
renderSlot(_ctx.$slots, "default")
|
|
185
|
+
]),
|
|
186
|
+
__props.iconRight ? (openBlock(), createBlock(_sfc_main$1, {
|
|
187
|
+
key: 1,
|
|
188
|
+
icon: __props.iconRight,
|
|
189
|
+
class: normalizeClass(classes.value.icon)
|
|
190
|
+
}, null, 8, ["icon", "class"])) : createCommentVNode("", true)
|
|
191
|
+
], 2),
|
|
192
|
+
__props.loading ? (openBlock(), createBlock(_sfc_main$2, {
|
|
193
|
+
key: 0,
|
|
194
|
+
size: loaderSize.value,
|
|
195
|
+
class: normalizeClass(classes.value.loader)
|
|
196
|
+
}, null, 8, ["size", "class"])) : createCommentVNode("", true)
|
|
197
|
+
]),
|
|
198
|
+
_: 3
|
|
199
|
+
}, 16, ["type", "to", "aria-selected", "class", "disabled", "aria-disabled"]));
|
|
200
|
+
};
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
export {
|
|
204
|
+
_sfc_main as _
|
|
205
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent, resolveDirective, createElementBlock, openBlock, normalizeClass, Fragment, renderList, withDirectives, createVNode, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
|
|
2
|
-
import
|
|
2
|
+
import { _ as _sfc_main$1 } from "./p-btn.js";
|
|
3
3
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
4
4
|
...{
|
|
5
5
|
name: "PSelectBtn"
|
|
@@ -62,13 +62,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
62
62
|
}, [
|
|
63
63
|
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
|
|
64
64
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
65
|
-
key: item[_ctx.itemValue],
|
|
65
|
+
key: String(item[_ctx.itemValue]),
|
|
66
66
|
class: normalizeClass(["inline-flex", { "*:px-0 *:py-0": _ctx.noPadding, grow: _ctx.grow }])
|
|
67
67
|
}, [
|
|
68
|
-
createVNode(
|
|
68
|
+
createVNode(_sfc_main$1, {
|
|
69
69
|
size: _ctx.size,
|
|
70
70
|
type: "secondary-outline-blue",
|
|
71
71
|
disabled: item.disabled,
|
|
72
|
+
icon: String(item.icon),
|
|
72
73
|
class: normalizeClass({
|
|
73
74
|
"rounded-none": index !== 0 && index !== _ctx.items.length - 1 && _ctx.items.length > 1,
|
|
74
75
|
"rounded-br-none rounded-tr-none": index === 0 && _ctx.items.length > 1,
|
|
@@ -88,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
88
89
|
])
|
|
89
90
|
]),
|
|
90
91
|
_: 2
|
|
91
|
-
}, 1032, ["size", "disabled", "class", "selected", "onClick"])
|
|
92
|
+
}, 1032, ["size", "disabled", "icon", "class", "selected", "onClick"])
|
|
92
93
|
], 2)), [
|
|
93
94
|
[_directive_tooltip, { content: tooltipText(item) }]
|
|
94
95
|
]);
|
package/dist/es/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { _ } from "./chunks/p-action-bar.js";
|
|
2
2
|
import { default as default2 } from "./p-alert.js";
|
|
3
3
|
import { default as default3 } from "./p-avatar.js";
|
|
4
|
-
import {
|
|
5
|
-
import { _ as
|
|
6
|
-
import { default as
|
|
7
|
-
import { default as
|
|
8
|
-
import { default as
|
|
9
|
-
import { _ as
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
4
|
+
import { _ as _2 } from "./chunks/p-btn.js";
|
|
5
|
+
import { _ as _3 } from "./chunks/p-card.js";
|
|
6
|
+
import { default as default4 } from "./p-checkbox.js";
|
|
7
|
+
import { default as default5 } from "./p-chips.js";
|
|
8
|
+
import { default as default6 } from "./p-close-btn.js";
|
|
9
|
+
import { _ as _4 } from "./chunks/p-date-picker.js";
|
|
10
|
+
import { default as default7 } from "./p-drawer.js";
|
|
11
|
+
import { default as default8 } from "./p-dropdown.js";
|
|
12
12
|
import { _ as _imports_0$1 } from "./chunks/p-dropdown-select.js";
|
|
13
13
|
import { a } from "./chunks/p-dropdown-select.js";
|
|
14
14
|
import { defineComponent, shallowRef, ref, computed, onMounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, withDirectives, unref, toDisplayString, withModifiers, createVNode, createTextVNode, Fragment, renderList, vShow, useAttrs, resolveDirective, normalizeStyle, isRef, renderSlot, provide, onBeforeUnmount, watch, mergeProps, toHandlers } from "vue";
|
|
@@ -18,47 +18,47 @@ import { useInputClasses } from "./useInputClasses.js";
|
|
|
18
18
|
import { uniq, kebabCase } from "lodash-es";
|
|
19
19
|
import { useToast } from "vue-toastification";
|
|
20
20
|
import { P_ICON_ALIASES } from "./p-icon.js";
|
|
21
|
-
import { _ as
|
|
22
|
-
import { _ as
|
|
23
|
-
import { default as
|
|
24
|
-
import { default as
|
|
25
|
-
import { _ as
|
|
21
|
+
import { _ as _5 } from "./chunks/p-info-icon.js";
|
|
22
|
+
import { _ as _6 } from "./chunks/p-inline-date-picker.js";
|
|
23
|
+
import { default as default9 } from "./p-input.js";
|
|
24
|
+
import { default as default10 } from "./p-input-number.js";
|
|
25
|
+
import { _ as _7 } from "./chunks/p-input-percent.js";
|
|
26
26
|
import PInputSearch from "./p-input-search.js";
|
|
27
|
-
import { _ as
|
|
28
|
-
import { default as
|
|
27
|
+
import { _ as _8 } from "./chunks/p-link.js";
|
|
28
|
+
import { default as default11 } from "./p-loading.js";
|
|
29
29
|
import { usePLoading } from "./usePLoading.js";
|
|
30
|
-
import { default as
|
|
30
|
+
import { default as default12 } from "./p-modal.js";
|
|
31
31
|
import { usePModal } from "./usePModal.js";
|
|
32
|
-
import { _ as
|
|
33
|
-
import { _ as
|
|
34
|
-
import { default as
|
|
35
|
-
import { _ as
|
|
36
|
-
import { _ as
|
|
37
|
-
import { _ as
|
|
32
|
+
import { _ as _9 } from "./chunks/p-pagination.js";
|
|
33
|
+
import { _ as _10 } from "./chunks/p-pagination-info.js";
|
|
34
|
+
import { default as default13 } from "./p-progress-bar.js";
|
|
35
|
+
import { _ as _11 } from "./chunks/p-ring-loader.js";
|
|
36
|
+
import { _ as _12 } from "./chunks/p-select.js";
|
|
37
|
+
import { _ as _13 } from "./chunks/p-select-btn.js";
|
|
38
38
|
import { SIZES } from "./p-select-list.js";
|
|
39
39
|
import { useSelectList } from "./useSelectList.js";
|
|
40
40
|
import { toString } from "./string.js";
|
|
41
41
|
import { splitStringForHighlight } from "./text.js";
|
|
42
|
-
import { default as
|
|
43
|
-
import { default as
|
|
42
|
+
import { default as default14 } from "./p-select-pill.js";
|
|
43
|
+
import { default as default15 } from "./p-skeleton-loader.js";
|
|
44
44
|
import { colsInjectionKey, isFirstColFixedInjectionKey, isLastColFixedInjectionKey, isColsResizableInjectionKey } from "./p-table.js";
|
|
45
45
|
import { MIN_WIDTH_COL_RESIZE } from "./p-table.js";
|
|
46
46
|
import { usePTableColResize } from "./usePTableColResize.js";
|
|
47
47
|
import PTableHeaderCell from "./p-table-header-cell.js";
|
|
48
48
|
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
49
49
|
import { usePTableRowVirtualizer } from "./usePTableRowVirtualizer.js";
|
|
50
|
-
import { default as
|
|
51
|
-
import { _ as
|
|
50
|
+
import { default as default16 } from "./p-table-filter-icon.js";
|
|
51
|
+
import { _ as _14 } from "./chunks/p-table-loader.js";
|
|
52
52
|
import { SORTING_TYPES } from "./p-table-sort.js";
|
|
53
|
-
import { default as
|
|
54
|
-
import { _ as
|
|
55
|
-
import { default as
|
|
56
|
-
import { default as
|
|
53
|
+
import { default as default17 } from "./p-table-td.js";
|
|
54
|
+
import { _ as _15 } from "./chunks/p-tabs.js";
|
|
55
|
+
import { default as default18 } from "./p-textarea.js";
|
|
56
|
+
import { default as default19 } from "./p-toggle.js";
|
|
57
57
|
import { squirrelTailwindConfig } from "./config.js";
|
|
58
58
|
import { S } from "./chunks/p-btn.types.js";
|
|
59
59
|
import { CURRENCY_INPUT_DEFAULTS } from "./currency.js";
|
|
60
60
|
import { getNextActiveElement, isElement, isVisible } from "./dom.js";
|
|
61
|
-
import { default as
|
|
61
|
+
import { default as default20 } from "./inputClassesMixin.js";
|
|
62
62
|
import { setupListKeyboardNavigation } from "./listKeyboardNavigation.js";
|
|
63
63
|
import { toNumberOrNull } from "./number.js";
|
|
64
64
|
import { isObject } from "./object.js";
|
|
@@ -965,44 +965,44 @@ export {
|
|
|
965
965
|
_ as PActionBar,
|
|
966
966
|
default2 as PAlert,
|
|
967
967
|
default3 as PAvatar,
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
968
|
+
_2 as PBtn,
|
|
969
|
+
_3 as PCard,
|
|
970
|
+
default4 as PCheckbox,
|
|
971
|
+
default5 as PChips,
|
|
972
|
+
default6 as PCloseBtn,
|
|
973
|
+
_4 as PDatePicker,
|
|
974
|
+
default7 as PDrawer,
|
|
975
|
+
default8 as PDropdown,
|
|
976
976
|
a as PDropdownSelect,
|
|
977
977
|
_sfc_main$3 as PFileUpload,
|
|
978
|
-
|
|
978
|
+
default16 as PFilterIcon,
|
|
979
979
|
_sfc_main$4 as PIcon,
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
980
|
+
_5 as PInfoIcon,
|
|
981
|
+
_6 as PInlineDatePicker,
|
|
982
|
+
default9 as PInput,
|
|
983
|
+
default10 as PInputNumber,
|
|
984
|
+
_7 as PInputPercent,
|
|
985
985
|
PInputSearch,
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
986
|
+
_8 as PLink,
|
|
987
|
+
default11 as PLoading,
|
|
988
|
+
default12 as PModal,
|
|
989
|
+
_9 as PPagination,
|
|
990
|
+
_10 as PPaginationInfo,
|
|
991
|
+
default13 as PProgressBar,
|
|
992
|
+
_11 as PRingLoader,
|
|
993
|
+
_12 as PSelect,
|
|
994
|
+
_13 as PSelectBtn,
|
|
995
995
|
_sfc_main$2 as PSelectList,
|
|
996
|
-
|
|
997
|
-
|
|
996
|
+
default14 as PSelectPill,
|
|
997
|
+
default15 as PSkeletonLoader,
|
|
998
998
|
pTable as PTable,
|
|
999
999
|
PTableHeaderCell,
|
|
1000
|
-
|
|
1000
|
+
_14 as PTableLoader,
|
|
1001
1001
|
pTableSort as PTableSort,
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1002
|
+
default17 as PTableTd,
|
|
1003
|
+
_15 as PTabs,
|
|
1004
|
+
default18 as PTextarea,
|
|
1005
|
+
default19 as PToggle,
|
|
1006
1006
|
P_ICON_ALIASES,
|
|
1007
1007
|
S as SIZES,
|
|
1008
1008
|
SORTING_TYPES,
|
|
@@ -1016,7 +1016,7 @@ export {
|
|
|
1016
1016
|
getColorDeep,
|
|
1017
1017
|
getNextActiveElement,
|
|
1018
1018
|
getScreen,
|
|
1019
|
-
|
|
1019
|
+
default20 as inputClassesMixin,
|
|
1020
1020
|
isColsResizableInjectionKey,
|
|
1021
1021
|
isElement,
|
|
1022
1022
|
isFirstColFixedInjectionKey,
|
package/dist/es/p-btn.js
CHANGED
|
@@ -1,171 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { _ as _sfc_main$1 } from "./chunks/p-ring-loader.js";
|
|
3
|
-
import { isExternalLink } from "./link.js";
|
|
4
|
-
import { sanitizeUrl } from "./sanitization.js";
|
|
5
|
-
import { c as ce } from "./chunks/index.js";
|
|
6
|
-
import { defineComponent, resolveComponent, createElementBlock, createBlock, openBlock, mergeProps, renderSlot, resolveDynamicComponent, withCtx, createElementVNode, createCommentVNode, normalizeClass } from "vue";
|
|
7
|
-
import { RouterLink } from "vue-router";
|
|
8
|
-
import { _ as _export_sfc } from "./chunks/_plugin-vue_export-helper.js";
|
|
9
|
-
const btnClasses = {
|
|
10
|
-
slots: {
|
|
11
|
-
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",
|
|
12
|
-
loader: "absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center font-medium"
|
|
13
|
-
},
|
|
14
|
-
variants: {
|
|
15
|
-
type: {
|
|
16
|
-
primary: {
|
|
17
|
-
button: "bg-primary text-surface hover:bg-accent active:bg-p-blue-80",
|
|
18
|
-
loader: "text-surface"
|
|
19
|
-
},
|
|
20
|
-
secondary: {
|
|
21
|
-
button: "bg-p-gray-20 hover:bg-p-gray-30 active:bg-p-gray-40",
|
|
22
|
-
loader: "text-p-purple-60"
|
|
23
|
-
},
|
|
24
|
-
"primary-outline": {
|
|
25
|
-
button: "bg-p-blue-10 text-p-purple-60 ring-1 ring-inset ring-p-purple-60 hover:bg-p-gray-20",
|
|
26
|
-
loader: "text-p-purple-60"
|
|
27
|
-
},
|
|
28
|
-
"secondary-outline": {
|
|
29
|
-
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",
|
|
30
|
-
loader: "text-p-purple-60"
|
|
31
|
-
},
|
|
32
|
-
"secondary-outline-blue": {
|
|
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-15 aria-selected:text-p-blue-60",
|
|
34
|
-
loader: "text-p-purple-60"
|
|
35
|
-
},
|
|
36
|
-
error: { button: "bg-p-red-40 text-white hover:bg-p-red-50", loader: "text-white" },
|
|
37
|
-
success: { button: "bg-p-green-40 text-white hover:bg-p-green-50", loader: "text-white" },
|
|
38
|
-
"primary-link": { button: "bg-transparent text-primary underline hover:text-accent", loader: "text-p-blue-60" },
|
|
39
|
-
"secondary-ghost": { button: "text-on-surface hover:bg-p-gray-20", loader: "text-p-purple-60" },
|
|
40
|
-
"secondary-ghost-dark": { button: "text-white hover:bg-p-purple-50", loader: "text-p-blue-15" }
|
|
41
|
-
},
|
|
42
|
-
size: {
|
|
43
|
-
sm: { button: "px-2 py-1 text-sm" },
|
|
44
|
-
md: { button: "px-6 py-2 text-base" },
|
|
45
|
-
lg: { button: "px-6 py-2.5 text-lg" }
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
defaultVariants: {
|
|
49
|
-
type: "primary",
|
|
50
|
-
size: "md"
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
const btn = ce(btnClasses);
|
|
54
|
-
const BUTTON_TYPES = Object.keys(btnClasses.variants.type);
|
|
55
|
-
const BUTTON_NATIVE_TYPES = ["button", "submit", "reset"];
|
|
56
|
-
const LOADER_SIZES = { sm: 24, md: 30, lg: 40 };
|
|
57
|
-
const _sfc_main = defineComponent({
|
|
58
|
-
name: "PBtn",
|
|
59
|
-
components: {
|
|
60
|
-
PRingLoader: _sfc_main$1,
|
|
61
|
-
RouterLink
|
|
62
|
-
},
|
|
63
|
-
inheritAttrs: false,
|
|
64
|
-
props: {
|
|
65
|
-
/**
|
|
66
|
-
* The button style e.g primary, secondary, primary-outline, secondary-outline, error, success, primary-link
|
|
67
|
-
*/
|
|
68
|
-
type: {
|
|
69
|
-
type: String,
|
|
70
|
-
default: "primary",
|
|
71
|
-
validator(value) {
|
|
72
|
-
return BUTTON_TYPES.includes(value);
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
/**
|
|
76
|
-
* The button native type e.g button, submit, reset
|
|
77
|
-
*/
|
|
78
|
-
nativeType: {
|
|
79
|
-
type: String,
|
|
80
|
-
default: "button",
|
|
81
|
-
validator(value) {
|
|
82
|
-
return BUTTON_NATIVE_TYPES.includes(value);
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
/**
|
|
86
|
-
* The button size e.g sm, md, lg
|
|
87
|
-
*/
|
|
88
|
-
size: {
|
|
89
|
-
type: String,
|
|
90
|
-
default: "md",
|
|
91
|
-
validator(value) {
|
|
92
|
-
return SIZES.includes(value);
|
|
93
|
-
}
|
|
94
|
-
},
|
|
95
|
-
/**
|
|
96
|
-
* Whether the button is loading
|
|
97
|
-
*/
|
|
98
|
-
loading: {
|
|
99
|
-
type: Boolean,
|
|
100
|
-
default: false
|
|
101
|
-
},
|
|
102
|
-
/**
|
|
103
|
-
* Whether the button is selected (sets aria-selected attribute)
|
|
104
|
-
*/
|
|
105
|
-
selected: {
|
|
106
|
-
type: Boolean,
|
|
107
|
-
default: false
|
|
108
|
-
},
|
|
109
|
-
/**
|
|
110
|
-
* Exactly as the `to` prop in `RouterLink`, when used, it renders a link that triggers a navigation on click.
|
|
111
|
-
* See https://router.vuejs.org/api/#RouteLocationRaw
|
|
112
|
-
*/
|
|
113
|
-
to: {
|
|
114
|
-
type: [Object, String],
|
|
115
|
-
default: ""
|
|
116
|
-
}
|
|
117
|
-
},
|
|
118
|
-
computed: {
|
|
119
|
-
classes() {
|
|
120
|
-
const { button, loader } = btn({ type: this.type, size: this.size });
|
|
121
|
-
return { button: button(), loader: loader() };
|
|
122
|
-
},
|
|
123
|
-
loaderSize() {
|
|
124
|
-
return Number(`${LOADER_SIZES[this.size]}`);
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
methods: {
|
|
128
|
-
isExternalLink,
|
|
129
|
-
sanitizeUrl
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
const _hoisted_1 = ["href", "disabled", "aria-disabled"];
|
|
133
|
-
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
134
|
-
const _component_PRingLoader = resolveComponent("PRingLoader");
|
|
135
|
-
return typeof _ctx.to === "string" && _ctx.isExternalLink(_ctx.to) ? (openBlock(), createElementBlock("a", mergeProps({ key: 0 }, _ctx.$attrs, {
|
|
136
|
-
href: _ctx.sanitizeUrl(_ctx.to),
|
|
137
|
-
target: "_blank",
|
|
138
|
-
class: _ctx.classes.button,
|
|
139
|
-
disabled: !!_ctx.$attrs.disabled ? true : null,
|
|
140
|
-
"aria-disabled": !!_ctx.$attrs.disabled
|
|
141
|
-
}), [
|
|
142
|
-
renderSlot(_ctx.$slots, "default")
|
|
143
|
-
], 16, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.to ? "RouterLink" : "button"), mergeProps({
|
|
144
|
-
key: 1,
|
|
145
|
-
type: _ctx.to ? null : _ctx.nativeType,
|
|
146
|
-
to: _ctx.to ? _ctx.to : null,
|
|
147
|
-
"aria-selected": _ctx.selected,
|
|
148
|
-
class: _ctx.classes.button
|
|
149
|
-
}, _ctx.$attrs, {
|
|
150
|
-
disabled: !!_ctx.$attrs.disabled || _ctx.loading ? true : null,
|
|
151
|
-
"aria-disabled": _ctx.$attrs.disabled
|
|
152
|
-
}), {
|
|
153
|
-
default: withCtx(() => [
|
|
154
|
-
createElementVNode("div", {
|
|
155
|
-
class: normalizeClass({ invisible: _ctx.loading })
|
|
156
|
-
}, [
|
|
157
|
-
renderSlot(_ctx.$slots, "default")
|
|
158
|
-
], 2),
|
|
159
|
-
_ctx.loading ? (openBlock(), createBlock(_component_PRingLoader, {
|
|
160
|
-
key: 0,
|
|
161
|
-
size: _ctx.loaderSize,
|
|
162
|
-
class: normalizeClass(_ctx.classes.loader)
|
|
163
|
-
}, null, 8, ["size", "class"])) : createCommentVNode("", true)
|
|
164
|
-
]),
|
|
165
|
-
_: 3
|
|
166
|
-
}, 16, ["type", "to", "aria-selected", "class", "disabled", "aria-disabled"]));
|
|
167
|
-
}
|
|
168
|
-
const PBtn = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
1
|
+
import { _ as _sfc_main } from "./chunks/p-btn.js";
|
|
169
2
|
export {
|
|
170
|
-
|
|
3
|
+
_sfc_main as default
|
|
171
4
|
};
|