@leaflink/stash 51.10.0 → 51.11.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/DataViewToolbar.js +148 -81
- package/dist/DataViewToolbar.js.map +1 -1
- package/dist/DataViewToolbar.vue.d.ts +102 -1
- package/dist/MoreActions.js +489 -0
- package/dist/MoreActions.js.map +1 -0
- package/dist/MoreActions.vue.d.ts +203 -0
- package/dist/Tab.js +9 -9
- package/dist/Tab.js.map +1 -1
- package/dist/Tabs.js +2 -2
- package/dist/Tabs.vue.d.ts +1 -119
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js +78 -0
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js.map +1 -0
- package/dist/Tooltip.js +1 -1
- package/dist/components.css +1 -1
- package/dist/index-XZqpB2_R.js +294 -0
- package/dist/{index-GUu9zvbg.js.map → index-XZqpB2_R.js.map} +1 -1
- package/dist/tailwind-base.d.ts +18 -0
- package/dist/tailwind-base.js +18 -8
- package/dist/tailwind-base.js.map +1 -1
- package/dist/useSortable.js +1 -1
- package/package.json +1 -1
- package/tailwind-base.ts +11 -0
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-Dprx064Y.js +0 -156
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-Dprx064Y.js.map +0 -1
- package/dist/index-GUu9zvbg.js +0 -128
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { AllowedComponentProps } from 'vue';
|
|
2
|
+
import { ComponentCustomProperties } from 'vue';
|
|
3
|
+
import { ComponentCustomProps } from 'vue';
|
|
4
|
+
import { ComponentInternalInstance } from 'vue';
|
|
5
|
+
import { ComponentOptionsBase } from 'vue';
|
|
6
|
+
import { ComponentOptionsMixin } from 'vue';
|
|
7
|
+
import { ComponentProvideOptions } from 'vue';
|
|
8
|
+
import { ComponentPublicInstance } from 'vue';
|
|
9
|
+
import { ComputedRef } from 'vue';
|
|
10
|
+
import { DebuggerEvent } from 'vue';
|
|
11
|
+
import { DefineComponent } from 'vue';
|
|
12
|
+
import { DropdownOffset } from '../Dropdown/Dropdown.vue';
|
|
13
|
+
import { DropdownProps } from '../Dropdown/Dropdown.vue';
|
|
14
|
+
import { GlobalComponents } from 'vue';
|
|
15
|
+
import { GlobalDirectives } from 'vue';
|
|
16
|
+
import { nextTick } from 'vue';
|
|
17
|
+
import { OnCleanup } from '@vue/reactivity';
|
|
18
|
+
import { PublicProps } from 'vue';
|
|
19
|
+
import { ShallowUnwrapRef } from 'vue';
|
|
20
|
+
import { Slot } from 'vue';
|
|
21
|
+
import { VNodeProps } from 'vue';
|
|
22
|
+
import { WatchOptions } from 'vue';
|
|
23
|
+
import { WatchStopHandle } from 'vue';
|
|
24
|
+
|
|
25
|
+
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
26
|
+
new (): {
|
|
27
|
+
$slots: S;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
declare const _default: __VLS_WithTemplateSlots<DefineComponent<MoreActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<MoreActionsProps> & Readonly<{}>, {
|
|
32
|
+
width: string | number;
|
|
33
|
+
itemInDropdownClass: string | Record<string, boolean>;
|
|
34
|
+
activeItemId: string;
|
|
35
|
+
moreButtonAlign: "separate" | "together";
|
|
36
|
+
dropdownContentClass: string;
|
|
37
|
+
actionsContainerClass: string | Record<string, boolean>;
|
|
38
|
+
moreButtonText: string;
|
|
39
|
+
dropdownMode: "default" | "custom";
|
|
40
|
+
disableAutoDetectActions: boolean;
|
|
41
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
42
|
+
actionsContainerRef: HTMLDivElement;
|
|
43
|
+
trackerElementRef: HTMLDivElement;
|
|
44
|
+
moreDropdownRef: ({
|
|
45
|
+
$: ComponentInternalInstance;
|
|
46
|
+
$data: {};
|
|
47
|
+
$props: {
|
|
48
|
+
readonly align?: "right" | "left" | undefined;
|
|
49
|
+
readonly label?: string | undefined;
|
|
50
|
+
readonly closeManually?: boolean | undefined;
|
|
51
|
+
readonly offset?: DropdownOffset | undefined;
|
|
52
|
+
readonly reattach?: boolean | undefined;
|
|
53
|
+
readonly contentClass?: string | string[] | undefined;
|
|
54
|
+
readonly fluidContent?: boolean | undefined;
|
|
55
|
+
readonly onToggle?: ((isActive: boolean) => any) | undefined;
|
|
56
|
+
readonly onDismiss?: (() => any) | undefined;
|
|
57
|
+
} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
|
|
58
|
+
$attrs: {
|
|
59
|
+
[x: string]: unknown;
|
|
60
|
+
};
|
|
61
|
+
$refs: {
|
|
62
|
+
[x: string]: unknown;
|
|
63
|
+
} & {
|
|
64
|
+
dropdownRef: HTMLDivElement;
|
|
65
|
+
contentRef: HTMLDivElement;
|
|
66
|
+
};
|
|
67
|
+
$slots: Readonly<{
|
|
68
|
+
[name: string]: Slot<any> | undefined;
|
|
69
|
+
}>;
|
|
70
|
+
$root: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
|
|
71
|
+
$parent: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
|
|
72
|
+
$host: Element | null;
|
|
73
|
+
$emit: ((event: "toggle", isActive: boolean) => void) & ((event: "dismiss") => void);
|
|
74
|
+
$el: HTMLDivElement;
|
|
75
|
+
$options: ComponentOptionsBase<Readonly<DropdownProps> & Readonly<{
|
|
76
|
+
onToggle?: ((isActive: boolean) => any) | undefined;
|
|
77
|
+
onDismiss?: (() => any) | undefined;
|
|
78
|
+
}>, {
|
|
79
|
+
isActive: ComputedRef<boolean>;
|
|
80
|
+
toggle: () => Promise<void>;
|
|
81
|
+
dismiss: (event?: Event | undefined) => void;
|
|
82
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
83
|
+
toggle: (isActive: boolean) => any;
|
|
84
|
+
dismiss: () => any;
|
|
85
|
+
}, string, {
|
|
86
|
+
label: string;
|
|
87
|
+
align: "right" | "left";
|
|
88
|
+
offset: DropdownOffset;
|
|
89
|
+
closeManually: boolean;
|
|
90
|
+
reattach: boolean;
|
|
91
|
+
contentClass: string | string[];
|
|
92
|
+
fluidContent: boolean;
|
|
93
|
+
}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
|
|
94
|
+
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
95
|
+
created?: ((() => void) | (() => void)[]) | undefined;
|
|
96
|
+
beforeMount?: ((() => void) | (() => void)[]) | undefined;
|
|
97
|
+
mounted?: ((() => void) | (() => void)[]) | undefined;
|
|
98
|
+
beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
|
|
99
|
+
updated?: ((() => void) | (() => void)[]) | undefined;
|
|
100
|
+
activated?: ((() => void) | (() => void)[]) | undefined;
|
|
101
|
+
deactivated?: ((() => void) | (() => void)[]) | undefined;
|
|
102
|
+
beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
|
|
103
|
+
beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
|
|
104
|
+
destroyed?: ((() => void) | (() => void)[]) | undefined;
|
|
105
|
+
unmounted?: ((() => void) | (() => void)[]) | undefined;
|
|
106
|
+
renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
|
|
107
|
+
renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
|
|
108
|
+
errorCaptured?: (((err: unknown, instance: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
|
|
109
|
+
};
|
|
110
|
+
$forceUpdate: () => void;
|
|
111
|
+
$nextTick: typeof nextTick;
|
|
112
|
+
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
|
|
113
|
+
} & Readonly<{
|
|
114
|
+
label: string;
|
|
115
|
+
align: "right" | "left";
|
|
116
|
+
offset: DropdownOffset;
|
|
117
|
+
closeManually: boolean;
|
|
118
|
+
reattach: boolean;
|
|
119
|
+
contentClass: string | string[];
|
|
120
|
+
fluidContent: boolean;
|
|
121
|
+
}> & Omit<Readonly<DropdownProps> & Readonly<{
|
|
122
|
+
onToggle?: ((isActive: boolean) => any) | undefined;
|
|
123
|
+
onDismiss?: (() => any) | undefined;
|
|
124
|
+
}>, "toggle" | "dismiss" | "isActive" | ("label" | "align" | "offset" | "closeManually" | "reattach" | "contentClass" | "fluidContent")> & ShallowUnwrapRef< {
|
|
125
|
+
isActive: ComputedRef<boolean>;
|
|
126
|
+
toggle: () => Promise<void>;
|
|
127
|
+
dismiss: (event?: Event | undefined) => void;
|
|
128
|
+
}> & {} & ComponentCustomProperties & {} & {
|
|
129
|
+
$slots: {
|
|
130
|
+
toggle?(_: {
|
|
131
|
+
isActive: boolean;
|
|
132
|
+
toggle: () => Promise<void>;
|
|
133
|
+
}): any;
|
|
134
|
+
default?(_: {
|
|
135
|
+
dismiss: (event?: Event | undefined) => void;
|
|
136
|
+
isActive: boolean;
|
|
137
|
+
}): any;
|
|
138
|
+
};
|
|
139
|
+
}) | null;
|
|
140
|
+
moreDropdownMenuRef: HTMLDivElement;
|
|
141
|
+
}, HTMLDivElement>, {
|
|
142
|
+
actions?(_: {}): any;
|
|
143
|
+
actions?(_: {}): any;
|
|
144
|
+
toggle?(_: {
|
|
145
|
+
toggle: () => Promise<void>;
|
|
146
|
+
isOpen: boolean;
|
|
147
|
+
}): any;
|
|
148
|
+
}>;
|
|
149
|
+
export default _default;
|
|
150
|
+
|
|
151
|
+
declare interface MoreActionsProps {
|
|
152
|
+
/**
|
|
153
|
+
* CSS class or classes to be applied to the dropdown content
|
|
154
|
+
*/
|
|
155
|
+
dropdownContentClass?: string;
|
|
156
|
+
/**
|
|
157
|
+
* CSS class or classes to be applied to the actions container
|
|
158
|
+
*/
|
|
159
|
+
actionsContainerClass?: string | Record<string, boolean> | undefined;
|
|
160
|
+
/**
|
|
161
|
+
* Text to display on the more actions button
|
|
162
|
+
*/
|
|
163
|
+
moreButtonText?: string;
|
|
164
|
+
/**
|
|
165
|
+
* Optional width for the more-actions container
|
|
166
|
+
* Applies style="width: {width}" to the stash-more-actions element
|
|
167
|
+
*/
|
|
168
|
+
width?: string | number;
|
|
169
|
+
/**
|
|
170
|
+
* Rendering mode for dropdown items
|
|
171
|
+
* - 'default': Button-style rendering (current behavior)
|
|
172
|
+
* - 'custom': Custom rendering through slots
|
|
173
|
+
*/
|
|
174
|
+
dropdownMode?: 'default' | 'custom';
|
|
175
|
+
/**
|
|
176
|
+
* Whether to disable automatic detection of actions from first-level children in the actions slot
|
|
177
|
+
* When false (default), all direct children in the actions slot will be treated as actions
|
|
178
|
+
* without needing to manually add data-action-id attributes
|
|
179
|
+
*/
|
|
180
|
+
disableAutoDetectActions?: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Whether to apply dropdown item styling automatically
|
|
183
|
+
* When enabled, applies flex layout, padding, hover effects, and other styling to dropdown items
|
|
184
|
+
*/
|
|
185
|
+
autoStyleDropdownItems?: boolean;
|
|
186
|
+
/**
|
|
187
|
+
* Active item ID for highlighting in dropdown
|
|
188
|
+
* Used when autoStyleDropdownItems is enabled to show which item is currently selected
|
|
189
|
+
*/
|
|
190
|
+
activeItemId?: string;
|
|
191
|
+
/**
|
|
192
|
+
* Alignment of the More button
|
|
193
|
+
* - 'separate': Button is aligned to the right edge of the actions container (default)
|
|
194
|
+
* - 'together': Button is aligned immediately after the last visible action
|
|
195
|
+
*/
|
|
196
|
+
moreButtonAlign?: 'separate' | 'together';
|
|
197
|
+
/**
|
|
198
|
+
* CSS class or classes to be applied to items inside the dropdown
|
|
199
|
+
*/
|
|
200
|
+
itemInDropdownClass?: string | Record<string, boolean> | undefined;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export { }
|
package/dist/Tab.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as x, useCssModule as T, inject as y, computed as
|
|
1
|
+
import { defineComponent as x, useCssModule as T, inject as y, computed as n, onMounted as k, nextTick as g, toRefs as c, createElementBlock as C, openBlock as u, withKeys as P, normalizeClass as $, unref as a, createBlock as B, resolveDynamicComponent as E, mergeProps as N, withCtx as b, createElementVNode as A, createVNode as I, renderSlot as M } from "vue";
|
|
2
2
|
import j from "@leaflink/snitch";
|
|
3
3
|
import D from "./Badge.js";
|
|
4
|
-
import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-
|
|
4
|
+
import { T as L } from "./Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js";
|
|
5
5
|
import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
6
6
|
const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class: "tw-mt-0.5" }, S = /* @__PURE__ */ x({
|
|
7
7
|
__name: "Tab",
|
|
@@ -18,24 +18,24 @@ const K = ["id", "aria-selected", "aria-controls", "aria-disabled"], O = { class
|
|
|
18
18
|
const e = p, v = T(), l = y(L.key);
|
|
19
19
|
if (!l)
|
|
20
20
|
throw Error("The Tab component must be a child of the Tabs component.");
|
|
21
|
-
const { setActiveTab: w, activeTab: f, variant: o } = l, t =
|
|
21
|
+
const { setActiveTab: w, activeTab: f, variant: o } = l, t = n(() => e.value === f.value), m = n(() => e.to ? "router-link" : e.href ? "a" : "button");
|
|
22
22
|
function d(i) {
|
|
23
23
|
e.disabled || w(i);
|
|
24
24
|
}
|
|
25
|
-
const
|
|
25
|
+
const r = n(() => `tabpanel-${e.value}`);
|
|
26
26
|
k(async () => {
|
|
27
|
-
await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(
|
|
28
|
-
`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 "${
|
|
27
|
+
await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(r.value) && j.warn(
|
|
28
|
+
`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 "${r.value}" and a "role" attribute with value "tabpanel".`
|
|
29
29
|
);
|
|
30
30
|
});
|
|
31
|
-
const h =
|
|
31
|
+
const h = n(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
|
|
32
32
|
return (i, s) => (u(), C("li", {
|
|
33
33
|
id: `tab-${e.value}`,
|
|
34
34
|
role: "tab",
|
|
35
35
|
"aria-selected": t.value,
|
|
36
|
-
"aria-controls":
|
|
36
|
+
"aria-controls": r.value,
|
|
37
37
|
"aria-disabled": e.disabled,
|
|
38
|
-
class: $(["stash-tab", [
|
|
38
|
+
class: $(["stash-tab tw-list-none", [
|
|
39
39
|
{
|
|
40
40
|
"stash-tab--active is-active": t.value,
|
|
41
41
|
"stash-tab--disabled": e.disabled,
|
package/dist/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import logger from '@leaflink/snitch';\n import { computed, inject, nextTick, onMounted, toRefs, useCssModule } 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 =\n | HTMLAnchorElement['download']\n | HTMLAnchorElement['hreflang']\n | HTMLAnchorElement['ping']\n | HTMLAnchorElement['referrerPolicy']\n | HTMLAnchorElement['rel']\n | HTMLAnchorElement['target']\n | 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 classes = useCssModule();\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 logger.warn(\n `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\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=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n :class=\"[\n {\n 'tw-border-b-2': variant === 'line',\n 'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n 'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n [classes['custom-shadow']]: 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\n<style module>\n /* this removes the bottom shadow from the active tab */\n .custom-shadow {\n box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs","_createElementBlock","_unref","_cache","$event","_withKeys","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_2","_createVNode","Badge","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAA,GAEVC,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,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAA,GAEF,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEhGG,EAAO;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAGzM,CAAC;AAED,UAAMI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAA,CACR;2BAIDqB,EAiDK,MAAA;AAAA,MAhDF,IAAE,OAASrB,EAAM,KAAK;AAAA,MACvB,MAAK;AAAA,MACJ,iBAAeU,EAAA;AAAA,MACf,iBAAeK,EAAA;AAAA,MACf,iBAAef,EAAM;AAAA,MACtB,UAAM,
|
|
1
|
+
{"version":3,"file":"Tab.js","sources":["../src/components/Tab/Tab.vue"],"sourcesContent":["<script setup lang=\"ts\">\n import logger from '@leaflink/snitch';\n import { computed, inject, nextTick, onMounted, toRefs, useCssModule } 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 =\n | HTMLAnchorElement['download']\n | HTMLAnchorElement['hreflang']\n | HTMLAnchorElement['ping']\n | HTMLAnchorElement['referrerPolicy']\n | HTMLAnchorElement['rel']\n | HTMLAnchorElement['target']\n | 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 classes = useCssModule();\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 logger.warn(\n `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\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 tw-list-none\"\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=\"tw-relative tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-whitespace-nowrap tw-border-solid tw-py-1.5 tw-text-sm tw-font-medium hover:tw-no-underline\"\n :class=\"[\n {\n 'tw-border-b-2': variant === 'line',\n 'tw-border-b tw-border-t-4 tw-px-6': variant === 'enclosed',\n 'tw-rounded-t tw-border-b-ice-200 tw-bg-white': isTabActive && variant === 'enclosed',\n [classes['custom-shadow']]: 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\n<style module>\n /* this removes the bottom shadow from the active tab */\n .custom-shadow {\n box-shadow: 0 -4px 4px rgb(0 0 0 / 10%);\n }\n</style>\n"],"names":["props","__props","classes","useCssModule","tabsInjection","inject","TABS_INJECTION","setActiveTab","activeTab","variant","isTabActive","computed","is","onClick","tabValue","panelId","onMounted","nextTick","logger","dynamicComponentAttrs","toRefs","_createElementBlock","_unref","_cache","$event","_withKeys","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_2","_createVNode","Badge","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;AAyDE,UAAMA,IAAQC,GAERC,IAAUC,EAAA,GAEVC,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,MACpBX,EAAM,UAAUQ,EAAU,KAClC,GAEKI,IAAKD,EAAS,MACdX,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR;AAKD,aAASa,EAAQC,GAAkB;AACjC,MAAId,EAAM,YAIVO,EAAaO,CAAQ;AAAA,IACvB;AAEA,UAAMC,IAAUJ,EAAS,MAAM,YAAYX,EAAM,KAAK,EAAE;AAExD,IAAAgB,EAAU,YAAY;AACpB,YAAMC,EAAA,GAEF,QAAQ,IAAI,aAAa,UAAUP,EAAY,SAAS,CAAC,SAAS,eAAeK,EAAQ,KAAK,KAEhGG,EAAO;AAAA,QACL,yBAAyBlB,EAAM,KAAK,kJAAkJe,EAAQ,KAAK;AAAA,MAAA;AAAA,IAGzM,CAAC;AAED,UAAMI,IAAwBR,EAAS,MACjCX,EAAM,MAAMA,EAAM,kBACboB,EAAOpB,EAAM,eAAe,IAGjCA,EAAM,QAAQA,EAAM,cACfoB,EAAOpB,EAAM,WAAW,IAG1B,CAAA,CACR;2BAIDqB,EAiDK,MAAA;AAAA,MAhDF,IAAE,OAASrB,EAAM,KAAK;AAAA,MACvB,MAAK;AAAA,MACJ,iBAAeU,EAAA;AAAA,MACf,iBAAeK,EAAA;AAAA,MACf,iBAAef,EAAM;AAAA,MACtB,UAAM,0BAAwB;AAAA;yCAC2BU,EAAA;AAAA,UAA4C,uBAAAV,EAAM;AAAA,qCAA6CsB,EAAAb,CAAA,MAAO;AAAA,yCAAoDa,EAAAb,CAAA,MAAO;AAAA,QAAA;AAAA;MAQzN,SAAKc,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEX,EAAQb,EAAM,KAAK;AAAA,MAC1B,YAAQuB,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAE,EAAA,CAAAD,MAAQX,EAAQb,EAAM,KAAK,GAAA,CAAA,OAAA,CAAA;AAAA,IAAA;OAEpC0B,EAAA,GAAAC,EA8BYC,EA5BLhB,EAAA,KAAE,GAFTiB,EACUV,EA6BE,OA7BmB;AAAA,QAE5B,IAAInB,EAAM;AAAA,QACV,MAAMA,EAAM;AAAA,QACb,QAAM,0KAAwK;AAAA;6BAC/HsB,EAAAb,CAAA,MAAO;AAAA,iDAA4Da,EAAAb,CAAA,MAAO;AAAA,YAA2E,gDAAAC,EAAA,SAAeY,EAAAb,CAAA,MAAO;AAAA,aAA4Ba,EAAApB,CAAA,EAAO,eAAA,CAAA,GAAoBQ,EAAA,SAAeY,EAAAb,CAAA,MAAO;AAAA,YAAoD,yBAAAT,EAAM;AAAA,YAA0D,0CAAAA,EAAM;AAAA,gCAAwCA,EAAM,YAAQ,CAAKU,EAAA;AAAA,UAAA;AAAA;YAA4CA,EAAA;;;QAgBvgB,UAAUV,EAAM,WAAQ,KAAA;AAAA,MAAA;mBAGzB,MAIM;AAAA,UAJN8B,EAIM,OAJNC,GAIM;AAAA,YAHJC,EAEQC,GAAA;AAAA,cAFA,SAASjC,EAAM;AAAA,cAAO,UAAS;AAAA,cAAS,OAAM;AAAA,cAAO,eAAaA,EAAM;AAAA,YAAA;yBAC9E,MAAuF;AAAA,gBAAvFkC,EAAuFC,EAAA,QAAA,WAAA;AAAA,kBAAhF,UAAWzB,EAAA;AAAA,kBAAc,YAAaV,EAAM;AAAA,kBAAW,SAASsB,EAAAb,CAAA;AAAA,gBAAA;;;;;;;;;;;;;;;"}
|
package/dist/Tabs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as s } from "./Tabs.vue_vue_type_script_setup_true_lang-
|
|
2
|
-
import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-
|
|
1
|
+
import { _ as s } from "./Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js";
|
|
2
|
+
import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js";
|
|
3
3
|
import { _ as a } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
4
4
|
const t = {
|
|
5
5
|
"menu-tab": "_menu-tab_frbn6_2"
|
package/dist/Tabs.vue.d.ts
CHANGED
|
@@ -1,27 +1,9 @@
|
|
|
1
|
-
import { AllowedComponentProps } from 'vue';
|
|
2
|
-
import { ComponentCustomProperties } from 'vue';
|
|
3
|
-
import { ComponentCustomProps } from 'vue';
|
|
4
|
-
import { ComponentInternalInstance } from 'vue';
|
|
5
|
-
import { ComponentOptionsBase } from 'vue';
|
|
6
1
|
import { ComponentOptionsMixin } from 'vue';
|
|
7
2
|
import { ComponentProvideOptions } from 'vue';
|
|
8
|
-
import { ComponentPublicInstance } from 'vue';
|
|
9
3
|
import { ComputedRef } from 'vue';
|
|
10
|
-
import { DebuggerEvent } from 'vue';
|
|
11
4
|
import { DefineComponent } from 'vue';
|
|
12
|
-
import { DropdownOffset } from '../Dropdown/Dropdown.vue';
|
|
13
|
-
import { DropdownProps } from '../Dropdown/Dropdown.vue';
|
|
14
|
-
import { GlobalComponents } from 'vue';
|
|
15
|
-
import { GlobalDirectives } from 'vue';
|
|
16
5
|
import { InjectionKey } from 'vue';
|
|
17
|
-
import { nextTick } from 'vue';
|
|
18
|
-
import { OnCleanup } from '@vue/reactivity';
|
|
19
6
|
import { PublicProps } from 'vue';
|
|
20
|
-
import { ShallowUnwrapRef } from 'vue';
|
|
21
|
-
import { Slot } from 'vue';
|
|
22
|
-
import { VNodeProps } from 'vue';
|
|
23
|
-
import { WatchOptions } from 'vue';
|
|
24
|
-
import { WatchStopHandle } from 'vue';
|
|
25
7
|
|
|
26
8
|
declare type __VLS_WithTemplateSlots<T, S> = T & {
|
|
27
9
|
new (): {
|
|
@@ -35,107 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<TabsProps, {}, {
|
|
|
35
17
|
"onUpdate:activeTab"?: ((newTabValue: string) => any) | undefined;
|
|
36
18
|
}>, {
|
|
37
19
|
variant: "line" | "enclosed";
|
|
38
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {
|
|
39
|
-
tabListEl: HTMLUListElement;
|
|
40
|
-
moreDropdownEl: ({
|
|
41
|
-
$: ComponentInternalInstance;
|
|
42
|
-
$data: {};
|
|
43
|
-
$props: {
|
|
44
|
-
readonly align?: "right" | "left" | undefined;
|
|
45
|
-
readonly label?: string | undefined;
|
|
46
|
-
readonly closeManually?: boolean | undefined;
|
|
47
|
-
readonly offset?: DropdownOffset | undefined;
|
|
48
|
-
readonly reattach?: boolean | undefined;
|
|
49
|
-
readonly contentClass?: string | string[] | undefined;
|
|
50
|
-
readonly fluidContent?: boolean | undefined;
|
|
51
|
-
readonly onToggle?: ((isActive: boolean) => any) | undefined;
|
|
52
|
-
readonly onDismiss?: (() => any) | undefined;
|
|
53
|
-
} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
|
|
54
|
-
$attrs: {
|
|
55
|
-
[x: string]: unknown;
|
|
56
|
-
};
|
|
57
|
-
$refs: {
|
|
58
|
-
[x: string]: unknown;
|
|
59
|
-
} & {
|
|
60
|
-
dropdownRef: HTMLDivElement;
|
|
61
|
-
contentRef: HTMLDivElement;
|
|
62
|
-
};
|
|
63
|
-
$slots: Readonly<{
|
|
64
|
-
[name: string]: Slot<any> | undefined;
|
|
65
|
-
}>;
|
|
66
|
-
$root: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
|
|
67
|
-
$parent: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
|
|
68
|
-
$host: Element | null;
|
|
69
|
-
$emit: ((event: "toggle", isActive: boolean) => void) & ((event: "dismiss") => void);
|
|
70
|
-
$el: HTMLDivElement;
|
|
71
|
-
$options: ComponentOptionsBase<Readonly<DropdownProps> & Readonly<{
|
|
72
|
-
onToggle?: ((isActive: boolean) => any) | undefined;
|
|
73
|
-
onDismiss?: (() => any) | undefined;
|
|
74
|
-
}>, {
|
|
75
|
-
isActive: ComputedRef<boolean>;
|
|
76
|
-
toggle: () => Promise<void>;
|
|
77
|
-
dismiss: (event?: Event | undefined) => void;
|
|
78
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
79
|
-
toggle: (isActive: boolean) => any;
|
|
80
|
-
dismiss: () => any;
|
|
81
|
-
}, string, {
|
|
82
|
-
label: string;
|
|
83
|
-
align: "right" | "left";
|
|
84
|
-
offset: DropdownOffset;
|
|
85
|
-
closeManually: boolean;
|
|
86
|
-
reattach: boolean;
|
|
87
|
-
contentClass: string | string[];
|
|
88
|
-
fluidContent: boolean;
|
|
89
|
-
}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
|
|
90
|
-
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
91
|
-
created?: ((() => void) | (() => void)[]) | undefined;
|
|
92
|
-
beforeMount?: ((() => void) | (() => void)[]) | undefined;
|
|
93
|
-
mounted?: ((() => void) | (() => void)[]) | undefined;
|
|
94
|
-
beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
|
|
95
|
-
updated?: ((() => void) | (() => void)[]) | undefined;
|
|
96
|
-
activated?: ((() => void) | (() => void)[]) | undefined;
|
|
97
|
-
deactivated?: ((() => void) | (() => void)[]) | undefined;
|
|
98
|
-
beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
|
|
99
|
-
beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
|
|
100
|
-
destroyed?: ((() => void) | (() => void)[]) | undefined;
|
|
101
|
-
unmounted?: ((() => void) | (() => void)[]) | undefined;
|
|
102
|
-
renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
|
|
103
|
-
renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
|
|
104
|
-
errorCaptured?: (((err: unknown, instance: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance< {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
|
|
105
|
-
};
|
|
106
|
-
$forceUpdate: () => void;
|
|
107
|
-
$nextTick: nextTick;
|
|
108
|
-
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
|
|
109
|
-
} & Readonly<{
|
|
110
|
-
label: string;
|
|
111
|
-
align: "right" | "left";
|
|
112
|
-
offset: DropdownOffset;
|
|
113
|
-
closeManually: boolean;
|
|
114
|
-
reattach: boolean;
|
|
115
|
-
contentClass: string | string[];
|
|
116
|
-
fluidContent: boolean;
|
|
117
|
-
}> & Omit<Readonly<DropdownProps> & Readonly<{
|
|
118
|
-
onToggle?: ((isActive: boolean) => any) | undefined;
|
|
119
|
-
onDismiss?: (() => any) | undefined;
|
|
120
|
-
}>, "toggle" | "dismiss" | "isActive" | ("label" | "align" | "offset" | "closeManually" | "reattach" | "contentClass" | "fluidContent")> & ShallowUnwrapRef< {
|
|
121
|
-
isActive: ComputedRef<boolean>;
|
|
122
|
-
toggle: () => Promise<void>;
|
|
123
|
-
dismiss: (event?: Event | undefined) => void;
|
|
124
|
-
}> & {} & ComponentCustomProperties & {} & {
|
|
125
|
-
$slots: {
|
|
126
|
-
toggle?(_: {
|
|
127
|
-
isActive: boolean;
|
|
128
|
-
toggle: () => Promise<void>;
|
|
129
|
-
}): any;
|
|
130
|
-
default?(_: {
|
|
131
|
-
dismiss: (event?: Event | undefined) => void;
|
|
132
|
-
isActive: boolean;
|
|
133
|
-
}): any;
|
|
134
|
-
};
|
|
135
|
-
}) | null;
|
|
136
|
-
moreDropdownMenuEl: HTMLUListElement;
|
|
137
|
-
}, HTMLDivElement>, {
|
|
138
|
-
default?(_: {}): any;
|
|
20
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
|
|
139
21
|
default?(_: {}): any;
|
|
140
22
|
}>;
|
|
141
23
|
export default _default;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { defineComponent as f, computed as a, provide as T, createElementBlock as h, openBlock as _, createVNode as n, unref as i, normalizeClass as r, withCtx as c, createElementVNode as x, createTextVNode as y, toDisplayString as g, renderSlot as C } from "vue";
|
|
2
|
+
import { t as l } from "./locale.js";
|
|
3
|
+
import I from "./Icon.js";
|
|
4
|
+
import N from "./MoreActions.js";
|
|
5
|
+
const k = Object.freeze({
|
|
6
|
+
key: Symbol("TABS_INJECTION_KEY")
|
|
7
|
+
});
|
|
8
|
+
var d = /* @__PURE__ */ ((e) => (e.Line = "line", e.Enclosed = "enclosed", e))(d || {});
|
|
9
|
+
const E = {
|
|
10
|
+
class: "stash-tabs tw-relative",
|
|
11
|
+
role: "tabList",
|
|
12
|
+
"data-test": "stash-tabs"
|
|
13
|
+
}, A = ["aria-expanded", "onClick"], z = /* @__PURE__ */ f({
|
|
14
|
+
__name: "Tabs",
|
|
15
|
+
props: {
|
|
16
|
+
activeTab: {},
|
|
17
|
+
variant: { default: d.Line }
|
|
18
|
+
},
|
|
19
|
+
emits: ["update:activeTab"],
|
|
20
|
+
setup(e, { emit: m }) {
|
|
21
|
+
const p = m, o = e, s = a({
|
|
22
|
+
get() {
|
|
23
|
+
return o.activeTab;
|
|
24
|
+
},
|
|
25
|
+
set(t) {
|
|
26
|
+
p("update:activeTab", t);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
function u(t) {
|
|
30
|
+
s.value = t;
|
|
31
|
+
}
|
|
32
|
+
const v = a(() => `tab-${s.value}`);
|
|
33
|
+
return T(k.key, {
|
|
34
|
+
activeTab: a(() => s.value),
|
|
35
|
+
variant: a(() => o.variant),
|
|
36
|
+
setActiveTab: u
|
|
37
|
+
}), (t, S) => (_(), h("div", E, [
|
|
38
|
+
n(N, {
|
|
39
|
+
class: r(["stash-tabs-list tw-flex tw-items-end", {
|
|
40
|
+
"stash-tabs-list--line": t.variant === "line",
|
|
41
|
+
"stash-tabs-list--enclosed": t.variant === "enclosed",
|
|
42
|
+
"tw-gap-6": t.variant === "line"
|
|
43
|
+
}]),
|
|
44
|
+
"more-button-text": i(l)("ll.more"),
|
|
45
|
+
"dropdown-mode": "custom",
|
|
46
|
+
"auto-style-dropdown-items": "",
|
|
47
|
+
"active-item-id": v.value,
|
|
48
|
+
"actions-container-class": {
|
|
49
|
+
"tw-gap-0": t.variant === "enclosed",
|
|
50
|
+
"tw-gap-6": t.variant === "line"
|
|
51
|
+
}
|
|
52
|
+
}, {
|
|
53
|
+
actions: c(() => [
|
|
54
|
+
C(t.$slots, "default")
|
|
55
|
+
]),
|
|
56
|
+
toggle: c(({ toggle: b, isOpen: w }) => [
|
|
57
|
+
x("button", {
|
|
58
|
+
"aria-haspopup": "menu",
|
|
59
|
+
"aria-expanded": w,
|
|
60
|
+
class: r(["tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700", { "tw-border-t-4 tw-border-transparent": o.variant === "enclosed" }]),
|
|
61
|
+
type: "button",
|
|
62
|
+
onClick: b
|
|
63
|
+
}, [
|
|
64
|
+
y(g(i(l)("ll.more")) + " ", 1),
|
|
65
|
+
n(I, { name: "caret-down" })
|
|
66
|
+
], 10, A)
|
|
67
|
+
]),
|
|
68
|
+
_: 3
|
|
69
|
+
}, 8, ["class", "more-button-text", "active-item-id", "actions-container-class"])
|
|
70
|
+
]));
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
export {
|
|
74
|
+
k as T,
|
|
75
|
+
z as _,
|
|
76
|
+
d as a
|
|
77
|
+
};
|
|
78
|
+
//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-BlJVDr7o.js","sources":["../src/components/Tabs/keys.ts","../src/components/Tabs/models.ts","../src/components/Tabs/Tabs.vue"],"sourcesContent":["import { Injection } from '../../../types/utils';\nimport { TabsInjection } from './models';\n\nexport const TABS_INJECTION: Injection<TabsInjection> = Object.freeze({\n key: Symbol('TABS_INJECTION_KEY'),\n});\n","import { ComputedRef } from 'vue';\n\nexport enum TabVariant {\n Line = 'line',\n Enclosed = 'enclosed',\n}\n\nexport type TabVariants = `${TabVariant}`;\n\nexport interface TabsInjection {\n activeTab: ComputedRef<string>;\n variant: ComputedRef<TabVariants>;\n setActiveTab: (newTabValue: string) => void;\n}\n","<script lang=\"ts\">\n import { TabVariant, TabVariants } from './models';\n\n export * from './keys';\n export * from './models';\n\n export interface TabsProps {\n /**\n * The currently active tab value\n */\n activeTab: string;\n\n /**\n * Tabs variant\n */\n variant?: TabVariants;\n }\n</script>\n\n<script setup lang=\"ts\">\n import { computed, provide } from 'vue';\n\n import { t } from '../../locale';\n import Icon from '../Icon/Icon.vue';\n import MoreActions from '../MoreActions/MoreActions.vue';\n import { TABS_INJECTION } from './keys';\n\n const emit = defineEmits<{\n (e: 'update:activeTab', newTabValue: TabsProps['activeTab']): void;\n }>();\n\n const props = withDefaults(defineProps<TabsProps>(), {\n variant: TabVariant.Line,\n });\n\n const currentActiveTab = computed({\n get() {\n return props.activeTab;\n },\n set(nv: TabsProps['activeTab']) {\n emit('update:activeTab', nv);\n },\n });\n\n function setActiveTab(newTabValue) {\n currentActiveTab.value = newTabValue;\n }\n\n const activeItemId = computed(() => `tab-${currentActiveTab.value}`);\n\n provide(TABS_INJECTION.key, {\n activeTab: computed(() => currentActiveTab.value),\n variant: computed(() => props.variant),\n setActiveTab,\n });\n</script>\n\n<template>\n <div class=\"stash-tabs tw-relative\" role=\"tabList\" data-test=\"stash-tabs\">\n <MoreActions\n class=\"stash-tabs-list tw-flex tw-items-end\"\n :class=\"{\n 'stash-tabs-list--line': variant === 'line',\n 'stash-tabs-list--enclosed': variant === 'enclosed',\n 'tw-gap-6': variant === 'line',\n }\"\n :more-button-text=\"t('ll.more')\"\n dropdown-mode=\"custom\"\n auto-style-dropdown-items\n :active-item-id=\"activeItemId\"\n :actions-container-class=\"{\n 'tw-gap-0': variant === 'enclosed',\n 'tw-gap-6': variant === 'line',\n }\"\n >\n <template #actions>\n <slot></slot>\n </template>\n <template #toggle=\"{ toggle, isOpen }\">\n <button\n aria-haspopup=\"menu\"\n :aria-expanded=\"isOpen\"\n class=\"tw-flex tw-cursor-pointer tw-items-center tw-justify-center tw-border-solid tw-px-6 tw-py-1.5 tw-text-sm tw-font-medium tw-text-blue-500 hover:tw-text-blue-700\"\n :class=\"{ 'tw-border-t-4 tw-border-transparent': props.variant === 'enclosed' }\"\n type=\"button\"\n @click=\"toggle\"\n >\n {{ t('ll.more') }}\n <Icon name=\"caret-down\" />\n </button>\n </template>\n </MoreActions>\n </div>\n</template>\n\n<style module>\n .menu-tab > a {\n /* prevents the global link styles to overwrite the overflowed tab styles */\n &,\n &:hover,\n &:focus {\n color: inherit;\n }\n }\n</style>\n"],"names":["TABS_INJECTION","TabVariant","emit","__emit","props","__props","currentActiveTab","computed","nv","setActiveTab","newTabValue","activeItemId","provide","_openBlock","_createElementBlock","_hoisted_1","_createVNode","MoreActions","variant","_unref","t","_renderSlot","_ctx","_withCtx","toggle","isOpen","_createElementVNode","_normalizeClass","_createTextVNode","_toDisplayString","Icon"],"mappings":";;;;AAGO,MAAMA,IAA2C,OAAO,OAAO;AAAA,EACpE,KAAK,OAAO,oBAAoB;AAClC,CAAC;ACHM,IAAKC,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YAFDA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;ACyBV,UAAMC,IAAOC,GAIPC,IAAQC,GAIRC,IAAmBC,EAAS;AAAA,MAChC,MAAM;AACJ,eAAOH,EAAM;AAAA,MACf;AAAA,MACA,IAAII,GAA4B;AAC9B,QAAAN,EAAK,oBAAoBM,CAAE;AAAA,MAC7B;AAAA,IAAA,CACD;AAED,aAASC,EAAaC,GAAa;AACjC,MAAAJ,EAAiB,QAAQI;AAAA,IAC3B;AAEA,UAAMC,IAAeJ,EAAS,MAAM,OAAOD,EAAiB,KAAK,EAAE;AAEnE,WAAAM,EAAQZ,EAAe,KAAK;AAAA,MAC1B,WAAWO,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMH,EAAM,OAAO;AAAA,MACrC,cAAAK;AAAA,IAAA,CACD,cAIDI,EAAA,GAAAC,EAkCM,OAlCNC,GAkCM;AAAA,MAjCJC,EAgCcC,GAAA;AAAA,QA/BZ,UAAM,wCAAsC;AAAA,mCACDC,EAAAA,YAAO;AAAA,uCAAkDA,EAAAA,YAAO;AAAA,sBAAqCA,EAAAA,YAAO;AAAA,QAAA;QAKtJ,oBAAkBC,EAAAC,CAAA,EAAC,SAAA;AAAA,QACpB,iBAAc;AAAA,QACd,6BAAA;AAAA,QACC,kBAAgBT,EAAA;AAAA,QAChB,2BAAuB;AAAA,sBAAwBO,EAAAA,YAAO;AAAA,sBAAqCA,EAAAA,YAAO;AAAA,QAAA;AAAA;QAKxF,WACT,MAAa;AAAA,UAAbG,EAAaC,EAAA,QAAA,SAAA;AAAA,QAAA;QAEJ,QAAMC,EACf,CAUS,EAXU,QAAAC,GAAQ,QAAAC,QAAM;AAAA,UACjCC,EAUS,UAAA;AAAA,YATP,iBAAc;AAAA,YACb,iBAAeD;AAAA,YAChB,OAAKE,EAAA,CAAC,mKAAiK,EAAA,uCACtHvB,EAAM,YAAO,WAAA,CAAA,CAAA;AAAA,YAC9D,MAAK;AAAA,YACJ,SAAOoB;AAAA,UAAA;YAELI,EAAAC,EAAAV,EAAAC,CAAA,gBAAe,KAClB,CAAA;AAAA,YAAAJ,EAA0Bc,GAAA,EAApB,MAAK,cAAY;AAAA,UAAA;;;;;;;"}
|
package/dist/Tooltip.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as b, ref as s, computed as n, createElementBlock as v, openBlock as c, createElementVNode as r, createBlock as g, renderSlot as l, Teleport as S, normalizeStyle as w, unref as T, createTextVNode as E, toDisplayString as $ } from "vue";
|
|
2
2
|
import { u as k, a as B, f as D, o as O, b as z } from "./floating-ui.vue-CL01Y9ER.js";
|
|
3
|
-
import { a as A } from "./index-
|
|
3
|
+
import { a as A } from "./index-XZqpB2_R.js";
|
|
4
4
|
const F = {
|
|
5
5
|
ref: "wrapper",
|
|
6
6
|
class: "stash-tooltip__wrapper tw-relative tw-inline-flex tw-size-fit"
|