@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.
Files changed (45) hide show
  1. package/dist/cjs/chunks/p-action-bar.js +4 -4
  2. package/dist/cjs/chunks/p-btn.js +204 -0
  3. package/dist/cjs/chunks/p-select-btn.js +5 -4
  4. package/dist/cjs/index.js +2 -2
  5. package/dist/cjs/p-btn.js +2 -169
  6. package/dist/es/chunks/p-action-bar.js +8 -8
  7. package/dist/es/chunks/p-btn.js +205 -0
  8. package/dist/es/chunks/p-select-btn.js +5 -4
  9. package/dist/es/index.js +62 -62
  10. package/dist/es/p-btn.js +2 -169
  11. package/dist/squirrel/components/p-btn/p-btn.vue.d.ts +106 -46
  12. package/dist/squirrel/components/p-card/p-card.vue.d.ts +27 -14
  13. package/dist/squirrel/components/p-checkbox/p-checkbox.vue.d.ts +43 -12
  14. package/dist/squirrel/components/p-close-btn/p-close-btn.vue.d.ts +1 -1
  15. package/dist/squirrel/components/p-drawer/p-drawer.vue.d.ts +1 -1
  16. package/dist/squirrel/components/p-dropdown-select/p-dropdown-select.vue.d.ts +15 -422
  17. package/dist/squirrel/components/p-file-upload/p-file-upload.vue.d.ts +1 -3
  18. package/dist/squirrel/components/p-info-icon/p-info-icon.vue.d.ts +13 -11
  19. package/dist/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue.d.ts +39 -14
  20. package/dist/squirrel/components/p-input/p-input.vue.d.ts +2 -2
  21. package/dist/squirrel/components/p-input-number/p-input-number.vue.d.ts +2 -2
  22. package/dist/squirrel/components/p-input-search/p-input-search.vue.d.ts +2 -2
  23. package/dist/squirrel/components/p-link/p-link.vue.d.ts +17 -13
  24. package/dist/squirrel/components/p-loading/p-loading.vue.d.ts +1 -3
  25. package/dist/squirrel/components/p-modal/p-modal.vue.d.ts +240 -22
  26. package/dist/squirrel/components/p-pagination-info/p-pagination-info.vue.d.ts +77 -10
  27. package/dist/squirrel/components/p-select/p-select.vue.d.ts +116 -14
  28. package/dist/squirrel/components/p-select-btn/p-select-btn.vue.d.ts +37 -13
  29. package/dist/squirrel/components/p-select-list/p-select-list.vue.d.ts +14 -418
  30. package/dist/squirrel/components/p-table/p-table.vue.d.ts +61 -19
  31. package/dist/squirrel/components/p-table-header-cell/p-table-header-cell.vue.d.ts +2 -2
  32. package/dist/squirrel/components/p-table-loader/p-table-loader.vue.d.ts +1 -1
  33. package/dist/squirrel/components/p-table-td/p-table-td.vue.d.ts +23 -11
  34. package/dist/squirrel/components/p-tabs/p-tabs.vue.d.ts +1 -1
  35. package/dist/squirrel/components/p-textarea/p-textarea.vue.d.ts +1 -1
  36. package/dist/squirrel/components/p-toggle/p-toggle.vue.d.ts +1 -1
  37. package/dist/squirrel/utils/inputClassesMixin.d.ts +1 -1
  38. package/package.json +25 -24
  39. package/squirrel/components/p-btn/p-btn.spec.js +227 -161
  40. package/squirrel/components/p-btn/p-btn.stories.js +32 -8
  41. package/squirrel/components/p-btn/p-btn.vue +106 -73
  42. package/squirrel/components/p-dropdown/p-dropdown.vue +0 -1
  43. package/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue +1 -1
  44. package/squirrel/components/p-select-btn/p-select-btn.stories.js +45 -4
  45. 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 PBtn from "../p-btn.js";
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(PBtn, {
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 { default as default4 } from "./p-btn.js";
5
- import { _ as _2 } from "./chunks/p-card.js";
6
- import { default as default5 } from "./p-checkbox.js";
7
- import { default as default6 } from "./p-chips.js";
8
- import { default as default7 } from "./p-close-btn.js";
9
- import { _ as _3 } from "./chunks/p-date-picker.js";
10
- import { default as default8 } from "./p-drawer.js";
11
- import { default as default9 } from "./p-dropdown.js";
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 _4 } from "./chunks/p-info-icon.js";
22
- import { _ as _5 } from "./chunks/p-inline-date-picker.js";
23
- import { default as default10 } from "./p-input.js";
24
- import { default as default11 } from "./p-input-number.js";
25
- import { _ as _6 } from "./chunks/p-input-percent.js";
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 _7 } from "./chunks/p-link.js";
28
- import { default as default12 } from "./p-loading.js";
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 default13 } from "./p-modal.js";
30
+ import { default as default12 } from "./p-modal.js";
31
31
  import { usePModal } from "./usePModal.js";
32
- import { _ as _8 } from "./chunks/p-pagination.js";
33
- import { _ as _9 } from "./chunks/p-pagination-info.js";
34
- import { default as default14 } from "./p-progress-bar.js";
35
- import { _ as _10 } from "./chunks/p-ring-loader.js";
36
- import { _ as _11 } from "./chunks/p-select.js";
37
- import { _ as _12 } from "./chunks/p-select-btn.js";
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 default15 } from "./p-select-pill.js";
43
- import { default as default16 } from "./p-skeleton-loader.js";
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 default17 } from "./p-table-filter-icon.js";
51
- import { _ as _13 } from "./chunks/p-table-loader.js";
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 default18 } from "./p-table-td.js";
54
- import { _ as _14 } from "./chunks/p-tabs.js";
55
- import { default as default19 } from "./p-textarea.js";
56
- import { default as default20 } from "./p-toggle.js";
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 default21 } from "./inputClassesMixin.js";
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
- default4 as PBtn,
969
- _2 as PCard,
970
- default5 as PCheckbox,
971
- default6 as PChips,
972
- default7 as PCloseBtn,
973
- _3 as PDatePicker,
974
- default8 as PDrawer,
975
- default9 as PDropdown,
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
- default17 as PFilterIcon,
978
+ default16 as PFilterIcon,
979
979
  _sfc_main$4 as PIcon,
980
- _4 as PInfoIcon,
981
- _5 as PInlineDatePicker,
982
- default10 as PInput,
983
- default11 as PInputNumber,
984
- _6 as PInputPercent,
980
+ _5 as PInfoIcon,
981
+ _6 as PInlineDatePicker,
982
+ default9 as PInput,
983
+ default10 as PInputNumber,
984
+ _7 as PInputPercent,
985
985
  PInputSearch,
986
- _7 as PLink,
987
- default12 as PLoading,
988
- default13 as PModal,
989
- _8 as PPagination,
990
- _9 as PPaginationInfo,
991
- default14 as PProgressBar,
992
- _10 as PRingLoader,
993
- _11 as PSelect,
994
- _12 as PSelectBtn,
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
- default15 as PSelectPill,
997
- default16 as PSkeletonLoader,
996
+ default14 as PSelectPill,
997
+ default15 as PSkeletonLoader,
998
998
  pTable as PTable,
999
999
  PTableHeaderCell,
1000
- _13 as PTableLoader,
1000
+ _14 as PTableLoader,
1001
1001
  pTableSort as PTableSort,
1002
- default18 as PTableTd,
1003
- _14 as PTabs,
1004
- default19 as PTextarea,
1005
- default20 as PToggle,
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
- default21 as inputClassesMixin,
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 { S as SIZES } from "./chunks/p-btn.types.js";
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
- PBtn as default
3
+ _sfc_main as default
171
4
  };