@leaflink/stash 43.0.1 → 43.2.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/DataViewFilters.js +67 -66
- package/dist/DataViewFilters.js.map +1 -1
- package/dist/DataViewFilters.vue.d.ts +8 -0
- package/dist/FilterDrawerItem.js +55 -39
- package/dist/FilterDrawerItem.js.map +1 -1
- package/dist/FilterDrawerItem.vue.d.ts +12 -2
- package/dist/PageNavigation.js +84 -341
- package/dist/PageNavigation.js.map +1 -1
- package/dist/PageNavigation.vue.d.ts +76 -163
- package/dist/Step.vue.d.ts +1 -1
- package/dist/Tab.js +5 -87
- package/dist/Tab.js.map +1 -1
- package/dist/Tab.vue_vue_type_script_setup_true_lang-b810bee8.js +90 -0
- package/dist/Tab.vue_vue_type_script_setup_true_lang-b810bee8.js.map +1 -0
- package/dist/Tabs.js +9 -6
- package/dist/Tabs.js.map +1 -1
- package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js +156 -0
- package/dist/Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js.map +1 -0
- package/dist/components.css +1 -1
- package/dist/locale.js +8 -7
- package/dist/locale.js.map +1 -1
- package/package.json +1 -1
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js +0 -154
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-56e85faa.js.map +0 -1
|
@@ -3,198 +3,111 @@ import { ComponentCustomProps } from 'vue';
|
|
|
3
3
|
import { ComponentOptionsMixin } from 'vue';
|
|
4
4
|
import { DefineComponent } from 'vue';
|
|
5
5
|
import { ExtractPropTypes } from 'vue';
|
|
6
|
+
import { PropType } from 'vue';
|
|
7
|
+
import { RouteLocationRaw } from 'vue-router';
|
|
8
|
+
import { RouterLinkProps } from 'vue-router';
|
|
6
9
|
import { VNodeProps } from 'vue';
|
|
7
10
|
|
|
8
|
-
declare
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
type: ArrayConstructor;
|
|
21
|
-
default: () => never[];
|
|
22
|
-
};
|
|
23
|
-
}, any, {
|
|
24
|
-
hasIntersectionObserver: boolean;
|
|
25
|
-
observer: undefined;
|
|
26
|
-
overflowIds: never[];
|
|
27
|
-
toggleWidth: number;
|
|
28
|
-
moreText: any;
|
|
29
|
-
}, {}, {
|
|
30
|
-
/**
|
|
31
|
-
* Event emitted when a tab is clicked, with the target tab index.
|
|
32
|
-
*/
|
|
33
|
-
observe(): void;
|
|
34
|
-
destroyObserver(): void;
|
|
35
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
36
|
-
/**
|
|
37
|
-
* Index of active tab (zero-based)
|
|
38
|
-
*/
|
|
39
|
-
activeIndex: {
|
|
40
|
-
type: NumberConstructor;
|
|
41
|
-
default: number;
|
|
42
|
-
};
|
|
43
|
-
/**
|
|
44
|
-
* Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`
|
|
45
|
-
*/
|
|
46
|
-
items: {
|
|
47
|
-
type: ArrayConstructor;
|
|
48
|
-
default: () => never[];
|
|
11
|
+
declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
12
|
+
|
|
13
|
+
declare type __VLS_Prettify<T> = {
|
|
14
|
+
[K in keyof T]: T[K];
|
|
15
|
+
} & {};
|
|
16
|
+
|
|
17
|
+
declare type __VLS_TypePropsToRuntimeProps<T> = {
|
|
18
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
19
|
+
type: PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
20
|
+
} : {
|
|
21
|
+
type: PropType<T[K]>;
|
|
22
|
+
required: true;
|
|
49
23
|
};
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
declare type __VLS_WithDefaults<P, D> = {
|
|
27
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
28
|
+
default: D[K];
|
|
29
|
+
}> : P[K];
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Allowed attributes for the `<a>` element when the `href` prop is used.
|
|
34
|
+
*/
|
|
35
|
+
declare type AnchorAttrs = HTMLAnchorElement['download'] | HTMLAnchorElement['hreflang'] | HTMLAnchorElement['ping'] | HTMLAnchorElement['referrerPolicy'] | HTMLAnchorElement['rel'] | HTMLAnchorElement['target'] | HTMLAnchorElement['type'];
|
|
36
|
+
|
|
37
|
+
declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageNavigationProps>, {
|
|
38
|
+
activeIndex: undefined;
|
|
39
|
+
modelValue: string;
|
|
40
|
+
}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
41
|
+
"update:modelValue": (activeTab: string) => void;
|
|
42
|
+
change: (activeNavIndex: number) => void;
|
|
43
|
+
}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PageNavigationProps>, {
|
|
44
|
+
activeIndex: undefined;
|
|
45
|
+
modelValue: string;
|
|
46
|
+
}>>> & {
|
|
47
|
+
onChange?: ((activeNavIndex: number) => any) | undefined;
|
|
48
|
+
"onUpdate:modelValue"?: ((activeTab: string) => any) | undefined;
|
|
49
|
+
}, {
|
|
50
|
+
modelValue: string;
|
|
51
|
+
activeIndex: string | number;
|
|
53
52
|
}, {}>;
|
|
54
53
|
export default _default;
|
|
55
54
|
|
|
56
|
-
export declare
|
|
57
|
-
/**
|
|
58
|
-
* Used to display the bubble count, i.e. orders, messages
|
|
59
|
-
*/
|
|
60
|
-
badge: {
|
|
61
|
-
type: (NumberConstructor | StringConstructor)[];
|
|
62
|
-
default: number;
|
|
63
|
-
};
|
|
64
|
-
/**
|
|
65
|
-
* The background color of the badge.
|
|
66
|
-
* Currently limited to a subset of brand colors.
|
|
67
|
-
*/
|
|
68
|
-
badgeColor: {
|
|
69
|
-
type: StringConstructor;
|
|
70
|
-
default: string;
|
|
71
|
-
validator: (value: unknown) => boolean;
|
|
72
|
-
};
|
|
55
|
+
export declare interface NavItem extends Omit<TabProps, 'value'> {
|
|
73
56
|
/**
|
|
74
|
-
*
|
|
57
|
+
* The tab's label
|
|
75
58
|
*/
|
|
76
|
-
|
|
77
|
-
type: NumberConstructor;
|
|
78
|
-
required: true;
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* Private/inherited - Whether the current tab `index` matches `activeIndex`
|
|
82
|
-
*/
|
|
83
|
-
isActive: BooleanConstructor;
|
|
84
|
-
/**
|
|
85
|
-
* Private/inherited - Whether the item is inside the dropdown
|
|
86
|
-
*/
|
|
87
|
-
isDropdown: BooleanConstructor;
|
|
88
|
-
/**
|
|
89
|
-
* Used to render an `<a>` tag. Denotes the target href of the link.
|
|
90
|
-
*/
|
|
91
|
-
href: {
|
|
92
|
-
default: string;
|
|
93
|
-
type: StringConstructor;
|
|
94
|
-
};
|
|
95
|
-
/**
|
|
96
|
-
* The nav item label
|
|
97
|
-
*/
|
|
98
|
-
label: {
|
|
99
|
-
default: string;
|
|
100
|
-
type: StringConstructor;
|
|
101
|
-
};
|
|
102
|
-
/**
|
|
103
|
-
* Used to render a `<router-link>`. Denotes the target route of the link.
|
|
104
|
-
* See: https://router.vuejs.org/api/#router-link
|
|
105
|
-
*/
|
|
106
|
-
to: {
|
|
107
|
-
default: string;
|
|
108
|
-
type: (ObjectConstructor | StringConstructor)[];
|
|
109
|
-
};
|
|
59
|
+
label: string;
|
|
110
60
|
/**
|
|
111
|
-
*
|
|
112
|
-
* Accepts a function to ensure the value is up-to-date, such as when it comes from vuex
|
|
61
|
+
* The tab's label
|
|
113
62
|
*/
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}, any, any, {
|
|
119
|
-
isDisabled(): any;
|
|
120
|
-
}, {
|
|
63
|
+
value?: string;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export declare interface PageNavigationProps {
|
|
121
67
|
/**
|
|
122
|
-
*
|
|
123
|
-
*
|
|
124
|
-
* This attempts to match the URL ignoring the path params.
|
|
68
|
+
* Index of active tab (zero-based)
|
|
69
|
+
* @deprecated Use v-model instead.
|
|
125
70
|
*/
|
|
126
|
-
|
|
127
|
-
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
|
|
71
|
+
activeIndex?: number | string;
|
|
128
72
|
/**
|
|
129
|
-
*
|
|
73
|
+
* The currently active tab value
|
|
130
74
|
*/
|
|
131
|
-
|
|
132
|
-
type: (NumberConstructor | StringConstructor)[];
|
|
133
|
-
default: number;
|
|
134
|
-
};
|
|
75
|
+
modelValue?: string;
|
|
135
76
|
/**
|
|
136
|
-
*
|
|
137
|
-
* Currently limited to a subset of brand colors.
|
|
77
|
+
* Array of tabs. A `tab` is an object containing a `label` and either an `href` | `to`
|
|
138
78
|
*/
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
};
|
|
79
|
+
items: NavItem[];
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
declare interface TabProps {
|
|
144
83
|
/**
|
|
145
|
-
*
|
|
84
|
+
* The tab identifier
|
|
146
85
|
*/
|
|
147
|
-
|
|
148
|
-
type: NumberConstructor;
|
|
149
|
-
required: true;
|
|
150
|
-
};
|
|
86
|
+
value: string;
|
|
151
87
|
/**
|
|
152
|
-
*
|
|
88
|
+
* Router link `to` prop
|
|
153
89
|
*/
|
|
154
|
-
|
|
90
|
+
to?: RouteLocationRaw;
|
|
155
91
|
/**
|
|
156
|
-
*
|
|
92
|
+
* Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.
|
|
157
93
|
*/
|
|
158
|
-
|
|
94
|
+
href?: string;
|
|
159
95
|
/**
|
|
160
|
-
*
|
|
96
|
+
* The badge's content
|
|
161
97
|
*/
|
|
162
|
-
|
|
163
|
-
default: string;
|
|
164
|
-
type: StringConstructor;
|
|
165
|
-
};
|
|
98
|
+
badge?: string | number;
|
|
166
99
|
/**
|
|
167
|
-
*
|
|
100
|
+
* Will render a plain text item if true.
|
|
168
101
|
*/
|
|
169
|
-
|
|
170
|
-
default: string;
|
|
171
|
-
type: StringConstructor;
|
|
172
|
-
};
|
|
102
|
+
disabled?: boolean;
|
|
173
103
|
/**
|
|
174
|
-
*
|
|
175
|
-
* See: https://router.vuejs.org/api/#router-link
|
|
104
|
+
* Props for the `<a>` element when the `href` prop is used
|
|
176
105
|
*/
|
|
177
|
-
|
|
178
|
-
default: string;
|
|
179
|
-
type: (ObjectConstructor | StringConstructor)[];
|
|
180
|
-
};
|
|
106
|
+
anchorProps?: Record<AnchorAttrs, string>;
|
|
181
107
|
/**
|
|
182
|
-
*
|
|
183
|
-
* Accepts a function to ensure the value is up-to-date, such as when it comes from vuex
|
|
108
|
+
* Props for the `<RouterLink>` element when the `to` prop is used
|
|
184
109
|
*/
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
type: (BooleanConstructor | FunctionConstructor)[];
|
|
188
|
-
};
|
|
189
|
-
}>>, {
|
|
190
|
-
href: string;
|
|
191
|
-
label: string;
|
|
192
|
-
isActive: boolean;
|
|
193
|
-
disabled: boolean | Function;
|
|
194
|
-
to: string | Record<string, any>;
|
|
195
|
-
badge: string | number;
|
|
196
|
-
badgeColor: string;
|
|
197
|
-
isDropdown: boolean;
|
|
198
|
-
}, {}>;
|
|
110
|
+
routerLinkProps?: Omit<RouterLinkProps, 'to'>;
|
|
111
|
+
}
|
|
199
112
|
|
|
200
113
|
export { }
|
package/dist/Step.vue.d.ts
CHANGED
package/dist/Tab.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { _ as o } from "./Tab.vue_vue_type_script_setup_true_lang-b810bee8.js";
|
|
2
|
+
import "vue";
|
|
3
|
+
import "./Badge.js";
|
|
4
4
|
import "./_plugin-vue_export-helper-dad06003.js";
|
|
5
|
+
import "./Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js";
|
|
5
6
|
import "lodash-es/debounce";
|
|
6
7
|
import "lodash-es/uniqueId";
|
|
7
8
|
import "./constants.js";
|
|
@@ -17,90 +18,7 @@ import "lodash-es/isPlainObject";
|
|
|
17
18
|
import "./Icon.js";
|
|
18
19
|
import "./index-79ce320f.js";
|
|
19
20
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
20
|
-
const D = ["id", "aria-selected", "aria-controls", "aria-disabled"], L = { class: "tw-mt-0.5" }, te = /* @__PURE__ */ x({
|
|
21
|
-
__name: "Tab",
|
|
22
|
-
props: {
|
|
23
|
-
value: {},
|
|
24
|
-
to: {},
|
|
25
|
-
href: {},
|
|
26
|
-
badge: {},
|
|
27
|
-
disabled: { type: Boolean },
|
|
28
|
-
anchorProps: {},
|
|
29
|
-
routerLinkProps: {}
|
|
30
|
-
},
|
|
31
|
-
setup(b) {
|
|
32
|
-
const e = b, l = T(j.key);
|
|
33
|
-
if (!l)
|
|
34
|
-
throw Error("The Tab component must be a child of the Tabs component.");
|
|
35
|
-
const { setActiveTab: m, activeTab: v, variant: o } = l, t = n(() => e.value === v.value), w = n(() => e.to ? "router-link" : e.href ? "a" : "button");
|
|
36
|
-
function d(s) {
|
|
37
|
-
e.disabled || m(s);
|
|
38
|
-
}
|
|
39
|
-
const i = n(() => `tabpanel-${e.value}`);
|
|
40
|
-
k(async () => {
|
|
41
|
-
await y(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(i.value) && console.warn(`The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${i.value}" and a "role" attribute with value "tabpanel".`);
|
|
42
|
-
});
|
|
43
|
-
const f = n(() => e.to && e.routerLinkProps ? u(e.routerLinkProps) : e.href && e.anchorProps ? u(e.anchorProps) : {});
|
|
44
|
-
return (s, r) => (c(), _("li", {
|
|
45
|
-
id: `tab-${e.value}`,
|
|
46
|
-
role: "tab",
|
|
47
|
-
"aria-selected": t.value,
|
|
48
|
-
"aria-controls": i.value,
|
|
49
|
-
"aria-disabled": e.disabled,
|
|
50
|
-
class: g(["stash-tab", [
|
|
51
|
-
{
|
|
52
|
-
"stash-tab--active is-active": t.value,
|
|
53
|
-
"stash-tab--disabled": e.disabled,
|
|
54
|
-
"stash-tab--variant-line": a(o) === "line",
|
|
55
|
-
"stash-tab--variant-enclosed": a(o) === "enclosed"
|
|
56
|
-
}
|
|
57
|
-
]]),
|
|
58
|
-
onClick: r[0] || (r[0] = (h) => d(e.value)),
|
|
59
|
-
onKeypress: r[1] || (r[1] = C((h) => d(e.value), ["enter"]))
|
|
60
|
-
}, [
|
|
61
|
-
(c(), P(B(w.value), E(f.value, {
|
|
62
|
-
to: e.to,
|
|
63
|
-
href: e.href,
|
|
64
|
-
class: ["tw-font-medium tw-text-sm tw-border-solid tw-py-1.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer hover:tw-no-underline tw-whitespace-nowrap", [
|
|
65
|
-
{
|
|
66
|
-
"tw-border-b-2": a(o) === "line",
|
|
67
|
-
"tw-px-6 tw-border-t-4": a(o) === "enclosed",
|
|
68
|
-
"tw-rounded-t tw-bg-white": t.value && a(o) === "enclosed",
|
|
69
|
-
"focus:tw-no-underline": e.href,
|
|
70
|
-
"tw-pointer-events-none tw-text-ice-500": e.disabled,
|
|
71
|
-
"tw-text-ice-700": !e.disabled && !t.value
|
|
72
|
-
},
|
|
73
|
-
[
|
|
74
|
-
t.value ? "tw-border-blue-500 tw-text-blue-500" : "tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500"
|
|
75
|
-
]
|
|
76
|
-
]],
|
|
77
|
-
tabindex: e.disabled ? -1 : 0
|
|
78
|
-
}), {
|
|
79
|
-
default: p(() => [
|
|
80
|
-
$("div", L, [
|
|
81
|
-
N(I, {
|
|
82
|
-
content: e.badge,
|
|
83
|
-
position: "inline",
|
|
84
|
-
color: "red",
|
|
85
|
-
"is-disabled": e.disabled
|
|
86
|
-
}, {
|
|
87
|
-
default: p(() => [
|
|
88
|
-
A(s.$slots, "default", {
|
|
89
|
-
isActive: t.value,
|
|
90
|
-
isDisabled: e.disabled,
|
|
91
|
-
variant: a(o)
|
|
92
|
-
})
|
|
93
|
-
]),
|
|
94
|
-
_: 3
|
|
95
|
-
}, 8, ["content", "is-disabled"])
|
|
96
|
-
])
|
|
97
|
-
]),
|
|
98
|
-
_: 3
|
|
99
|
-
}, 16, ["to", "href", "class", "tabindex"]))
|
|
100
|
-
], 42, D));
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
21
|
export {
|
|
104
|
-
|
|
22
|
+
o as default
|
|
105
23
|
};
|
|
106
24
|
//# sourceMappingURL=Tab.js.map
|
package/dist/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":[
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { defineComponent as x, inject as T, computed as r, onMounted as k, nextTick as y, toRefs as u, openBlock as c, createElementBlock as _, normalizeClass as g, unref as n, withKeys as C, createBlock as P, resolveDynamicComponent as B, mergeProps as E, withCtx as b, createElementVNode as $, createVNode as N, renderSlot as A } from "vue";
|
|
2
|
+
import I from "./Badge.js";
|
|
3
|
+
import { T as j } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js";
|
|
4
|
+
const D = ["id", "aria-selected", "aria-controls", "aria-disabled"], L = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
|
|
5
|
+
__name: "Tab",
|
|
6
|
+
props: {
|
|
7
|
+
value: {},
|
|
8
|
+
to: {},
|
|
9
|
+
href: {},
|
|
10
|
+
badge: {},
|
|
11
|
+
disabled: { type: Boolean },
|
|
12
|
+
anchorProps: {},
|
|
13
|
+
routerLinkProps: {}
|
|
14
|
+
},
|
|
15
|
+
setup(v) {
|
|
16
|
+
const e = v, l = T(j.key);
|
|
17
|
+
if (!l)
|
|
18
|
+
throw Error("The Tab component must be a child of the Tabs component.");
|
|
19
|
+
const { setActiveTab: p, activeTab: w, variant: a } = l, t = r(() => e.value === w.value), f = r(() => e.to ? "router-link" : e.href ? "a" : "button");
|
|
20
|
+
function d(i) {
|
|
21
|
+
e.disabled || p(i);
|
|
22
|
+
}
|
|
23
|
+
const s = r(() => `tabpanel-${e.value}`);
|
|
24
|
+
k(async () => {
|
|
25
|
+
await y(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(s.value) && console.warn(`The <Tab> with value "${e.value}" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an "id" attribute with value "${s.value}" and a "role" attribute with value "tabpanel".`);
|
|
26
|
+
});
|
|
27
|
+
const h = r(() => e.to && e.routerLinkProps ? u(e.routerLinkProps) : e.href && e.anchorProps ? u(e.anchorProps) : {});
|
|
28
|
+
return (i, o) => (c(), _("li", {
|
|
29
|
+
id: `tab-${e.value}`,
|
|
30
|
+
role: "tab",
|
|
31
|
+
"aria-selected": t.value,
|
|
32
|
+
"aria-controls": s.value,
|
|
33
|
+
"aria-disabled": e.disabled,
|
|
34
|
+
class: g(["stash-tab", [
|
|
35
|
+
{
|
|
36
|
+
"stash-tab--active is-active": t.value,
|
|
37
|
+
"stash-tab--disabled": e.disabled,
|
|
38
|
+
"stash-tab--variant-line": n(a) === "line",
|
|
39
|
+
"stash-tab--variant-enclosed": n(a) === "enclosed"
|
|
40
|
+
}
|
|
41
|
+
]]),
|
|
42
|
+
onClick: o[0] || (o[0] = (m) => d(e.value)),
|
|
43
|
+
onKeypress: o[1] || (o[1] = C((m) => d(e.value), ["enter"]))
|
|
44
|
+
}, [
|
|
45
|
+
(c(), P(B(f.value), E(h.value, {
|
|
46
|
+
to: e.to,
|
|
47
|
+
href: e.href,
|
|
48
|
+
class: ["tw-font-medium tw-text-sm tw-border-solid tw-py-1.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer hover:tw-no-underline tw-whitespace-nowrap", [
|
|
49
|
+
{
|
|
50
|
+
"tw-border-b-2": n(a) === "line",
|
|
51
|
+
"tw-px-6 tw-border-t-4": n(a) === "enclosed",
|
|
52
|
+
"tw-rounded-t tw-bg-white": t.value && n(a) === "enclosed",
|
|
53
|
+
"focus:tw-no-underline": e.href,
|
|
54
|
+
"tw-pointer-events-none tw-text-ice-500": e.disabled,
|
|
55
|
+
"tw-text-ice-700": !e.disabled && !t.value
|
|
56
|
+
},
|
|
57
|
+
[
|
|
58
|
+
t.value ? "tw-border-blue-500 tw-text-blue-500" : "tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500"
|
|
59
|
+
]
|
|
60
|
+
]],
|
|
61
|
+
tabindex: e.disabled ? -1 : 0
|
|
62
|
+
}), {
|
|
63
|
+
default: b(() => [
|
|
64
|
+
$("div", L, [
|
|
65
|
+
N(I, {
|
|
66
|
+
content: e.badge,
|
|
67
|
+
position: "inline",
|
|
68
|
+
color: "red",
|
|
69
|
+
"is-disabled": e.disabled
|
|
70
|
+
}, {
|
|
71
|
+
default: b(() => [
|
|
72
|
+
A(i.$slots, "default", {
|
|
73
|
+
isActive: t.value,
|
|
74
|
+
isDisabled: e.disabled,
|
|
75
|
+
variant: n(a)
|
|
76
|
+
})
|
|
77
|
+
]),
|
|
78
|
+
_: 3
|
|
79
|
+
}, 8, ["content", "is-disabled"])
|
|
80
|
+
])
|
|
81
|
+
]),
|
|
82
|
+
_: 3
|
|
83
|
+
}, 16, ["to", "href", "class", "tabindex"]))
|
|
84
|
+
], 42, D));
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
export {
|
|
88
|
+
S as _
|
|
89
|
+
};
|
|
90
|
+
//# sourceMappingURL=Tab.vue_vue_type_script_setup_true_lang-b810bee8.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tab.vue_vue_type_script_setup_true_lang-b810bee8.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import { computed, inject, nextTick, onMounted, toRefs } from 'vue';\n import { type RouteLocationRaw, type RouterLinkProps } from 'vue-router';\n\n import Badge from '../Badge/Badge.vue';\n import { TABS_INJECTION } from '../Tabs/Tabs.vue';\n\n /**\n * Allowed attributes for the `<a>` element when the `href` prop is used.\n */\n type AnchorAttrs = HTMLAnchorElement['download'] | HTMLAnchorElement['hreflang'] | HTMLAnchorElement['ping'] | HTMLAnchorElement['referrerPolicy'] | HTMLAnchorElement['rel'] | HTMLAnchorElement['target'] | HTMLAnchorElement['type'];\n\n export interface TabProps {\n /**\n * The tab identifier\n */\n value: string;\n\n /**\n * Router link `to` prop\n */\n to?: RouteLocationRaw;\n\n /**\n * Anchor tag href. Used for navigating to non-vue pages, such as Django pages in marketplace.\n */\n href?: string;\n\n /**\n * The badge's content\n */\n badge?: string | number;\n\n /**\n * Will render a plain text item if true.\n */\n disabled?: boolean\n\n /**\n * Props for the `<a>` element when the `href` prop is used\n */\n anchorProps?: Record<AnchorAttrs, string>;\n\n /**\n * Props for the `<RouterLink>` element when the `to` prop is used\n */\n routerLinkProps?: Omit<RouterLinkProps, 'to'>;\n }\n\n const props = defineProps<TabProps>();\n\n const tabsInjection = inject(TABS_INJECTION.key);\n\n if (!tabsInjection) {\n throw Error('The Tab component must be a child of the Tabs component.');\n }\n\n const { setActiveTab, activeTab, variant } = tabsInjection;\n\n const isTabActive = computed(() => {\n return props.value === activeTab.value;\n });\n\n const is = computed(() => {\n if (props.to) {\n return 'router-link';\n }\n\n if (props.href) {\n return 'a';\n }\n\n return 'button';\n });\n\n /**\n * Note: this click handler gets ignored when the `href` prop is used; `preventDefault()` is intentionally omitted in order to enable the `href` prop to work correctly. The `href` prop is used for navigation to non-vue pages, such as Django pages in marketplace.\n */\n function onClick(tabValue: string) {\n if (props.disabled) {\n return;\n }\n\n setActiveTab(tabValue);\n }\n\n const panelId = computed(() => `tabpanel-${props.value}`);\n\n onMounted(async () => {\n await nextTick();\n\n if (process.env.NODE_ENV !== 'test' && isTabActive.value && !document.getElementById(panelId.value)) {\n // The following warning ensures optimal accessibility is maintained when using the Tabs component. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role#example\n console.warn(`The <Tab> with value \"${props.value}\" is active, but its corresponding tab panel cannot be found. Please ensure that the corresponding tab panel has an \"id\" attribute with value \"${panelId.value}\" and a \"role\" attribute with value \"tabpanel\".`);\n }\n });\n\n const dynamicComponentAttrs = computed(() => {\n if (props.to && props.routerLinkProps) {\n return toRefs(props.routerLinkProps);\n }\n\n if (props.href && props.anchorProps) {\n return toRefs(props.anchorProps);\n }\n\n return {};\n });\n</script>\n\n<template>\n <li\n :id=\"`tab-${props.value}`\"\n role=\"tab\"\n :aria-selected=\"isTabActive\"\n :aria-controls=\"panelId\"\n :aria-disabled=\"props.disabled\"\n class=\"stash-tab\"\n :class=\"[\n {\n 'stash-tab--active is-active': isTabActive,\n 'stash-tab--disabled': props.disabled,\n 'stash-tab--variant-line': variant === 'line',\n 'stash-tab--variant-enclosed': variant === 'enclosed',\n },\n ]\"\n @click=\"onClick(props.value)\"\n @keypress.enter=\"onClick(props.value)\"\n >\n <component\n v-bind=\"dynamicComponentAttrs\"\n :is=\"is\"\n :to=\"props.to\"\n :href=\"props.href\"\n class=\"\n tw-font-medium tw-text-sm tw-border-solid tw-py-1.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer\n hover:tw-no-underline\n tw-whitespace-nowrap\n \"\n :class=\"[\n {\n 'tw-border-b-2': variant === 'line',\n 'tw-px-6 tw-border-t-4': variant === 'enclosed',\n 'tw-rounded-t tw-bg-white': isTabActive && variant === 'enclosed',\n 'focus:tw-no-underline': props.href,\n 'tw-pointer-events-none tw-text-ice-500': props.disabled,\n 'tw-text-ice-700': !props.disabled && !isTabActive,\n },\n [\n isTabActive\n ? 'tw-border-blue-500 tw-text-blue-500'\n : 'tw-border-transparent hover:tw-text-blue-500 focus:tw-text-blue-500',\n ],\n ]\"\n :tabindex=\"props.disabled ? -1 : 0\"\n >\n <!-- The margin-top on the <div> below is necessary to fix the vertical alignment of text in the default slot since our Sofia font has extra space under the baseline -->\n <div class=\"tw-mt-0.5\">\n <Badge :content=\"props.badge\" position=\"inline\" color=\"red\" :is-disabled=\"props.disabled\">\n <slot :is-active=\"isTabActive\" :is-disabled=\"props.disabled\" :variant=\"variant\"></slot>\n </Badge>\n </div>\n </component>\n </li>\n</template>\n"],"names":["tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","props","is","onClick","tabValue","panelId","onMounted","nextTick","dynamicComponentAttrs","toRefs"],"mappings":";;;;;;;;;;;;;;;iBAmDQA,IAAgBC,EAAOC,EAAe,GAAG;AAE/C,QAAI,CAACF;AACH,YAAM,MAAM,0DAA0D;AAGxE,UAAM,EAAE,cAAAG,GAAc,WAAAC,GAAW,SAAAC,EAAA,IAAYL,GAEvCM,IAAcC,EAAS,MACpBC,EAAM,UAAUJ,EAAU,KAClC,GAEKK,IAAKF,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASE,EAAQC,GAAkB;AACjC,MAAIH,EAAM,YAIVL,EAAaQ,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUL,EAAS,MAAM,YAAYC,EAAM,KAAK,EAAE;AAExD,IAAAK,EAAU,YAAY;AACpB,YAAMC,EAAS,GAEX,QAAQ,IAAI,aAAa,UAAUR,EAAY,SAAS,CAAC,SAAS,eAAeM,EAAQ,KAAK,KAEhG,QAAQ,KAAK,yBAAyBJ,EAAM,KAAK,kJAAkJI,EAAQ,KAAK,iDAAiD;AAAA,IACnQ,CACD;AAEK,UAAAG,IAAwBR,EAAS,MACjCC,EAAM,MAAMA,EAAM,kBACbQ,EAAOR,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfQ,EAAOR,EAAM,WAAW,IAG1B,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/Tabs.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { _ as o } from "./Tabs.
|
|
2
|
-
import { T as
|
|
1
|
+
import { _ as o, s as t } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js";
|
|
2
|
+
import { T as C, a as E } from "./Tabs.vue_used_vue_type_style_index_0_lang.module-4f247ed7.js";
|
|
3
|
+
import { _ as r } from "./_plugin-vue_export-helper-dad06003.js";
|
|
3
4
|
import "vue";
|
|
4
5
|
import "lodash-es/debounce";
|
|
5
6
|
import "lodash-es/uniqueId";
|
|
@@ -16,10 +17,12 @@ import "lodash-es/isPlainObject";
|
|
|
16
17
|
import "./Icon.js";
|
|
17
18
|
import "./index-79ce320f.js";
|
|
18
19
|
import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
|
|
19
|
-
|
|
20
|
+
const m = {
|
|
21
|
+
$style: t
|
|
22
|
+
}, N = /* @__PURE__ */ r(o, [["__cssModules", m]]);
|
|
20
23
|
export {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
C as TABS_INJECTION,
|
|
25
|
+
E as TabVariant,
|
|
26
|
+
N as default
|
|
24
27
|
};
|
|
25
28
|
//# sourceMappingURL=Tabs.js.map
|
package/dist/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|