@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.
@@ -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 r, 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";
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-Dprx064Y.js";
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 = r(() => e.value === f.value), m = r(() => e.to ? "router-link" : e.href ? "a" : "button");
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 n = r(() => `tabpanel-${e.value}`);
25
+ const r = n(() => `tabpanel-${e.value}`);
26
26
  k(async () => {
27
- await g(), process.env.NODE_ENV !== "test" && t.value && !document.getElementById(n.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 "${n.value}" and a "role" attribute with value "tabpanel".`
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 = r(() => e.to && e.routerLinkProps ? c(e.routerLinkProps) : e.href && e.anchorProps ? c(e.anchorProps) : {});
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": n.value,
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,aAAW;AAAA;yCACwCU,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;;;;;;;;;;;;;;;"}
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-Dprx064Y.js";
2
- import { T as c, a as f } from "./Tabs.vue_vue_type_script_setup_true_lang-Dprx064Y.js";
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"
@@ -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-GUu9zvbg.js";
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"