@leaflink/stash 53.4.6 → 53.4.7
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/AppSidebar.js +43 -41
- package/dist/AppSidebar.js.map +1 -1
- package/dist/AppTopbar.js +1 -1
- package/dist/Copy.js +1 -1
- package/dist/DataViewFilters.js +1 -1
- package/dist/DataViewFilters.js.map +1 -1
- package/dist/DataViewToolbar.js +139 -125
- package/dist/DataViewToolbar.js.map +1 -1
- package/dist/DatePicker.js +1114 -1113
- package/dist/DatePicker.js.map +1 -1
- package/dist/Modal.js +104 -90
- package/dist/Modal.js.map +1 -1
- package/dist/MoreActions.js +294 -288
- package/dist/MoreActions.js.map +1 -1
- package/dist/PageNavigation.js +1 -1
- package/dist/RadioGroup.js +69 -62
- package/dist/RadioGroup.js.map +1 -1
- package/dist/Select.js +90 -90
- package/dist/Select.js.map +1 -1
- package/dist/Stepper.js +1 -1
- package/dist/Tab.js +1 -1
- package/dist/Table.js +1 -1
- package/dist/Tabs.js +2 -2
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js +131 -0
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-DEopbeSY.js.map +1 -0
- package/dist/Thumbnail.js +42 -42
- package/dist/Thumbnail.js.map +1 -1
- package/dist/Toast.vue.d.ts +1 -1
- package/dist/Tooltip.js +1 -1
- package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js → Tooltip.vue_vue_type_script_setup_true_lang-UUjw5O1x.js} +2 -2
- package/dist/{Tooltip.vue_vue_type_script_setup_true_lang-CFpM7Ldj.js.map → Tooltip.vue_vue_type_script_setup_true_lang-UUjw5O1x.js.map} +1 -1
- package/dist/components.css +1 -1
- package/dist/getContrastingTextColor.d.ts +8 -0
- package/dist/index-t9tXBnql.js +469 -0
- package/dist/{index-DA70nQCT.js.map → index-t9tXBnql.js.map} +1 -1
- package/dist/templateRefNarrowing-CeANDylX.js +22 -0
- package/dist/templateRefNarrowing-CeANDylX.js.map +1 -0
- package/dist/useMediaQuery.d.ts +12 -10
- package/dist/useMediaQuery.js +7 -29
- package/dist/useMediaQuery.js.map +1 -1
- package/dist/useSortable.js +1 -1
- package/dist/utils/getContrastingTextColor.js +36 -24
- package/dist/utils/getContrastingTextColor.js.map +1 -1
- package/package.json +1 -1
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.js +0 -130
- package/dist/Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.js.map +0 -1
- package/dist/index-DA70nQCT.js +0 -424
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const o = typeof HTMLElement < "u";
|
|
2
|
+
function l(n) {
|
|
3
|
+
return o && n instanceof HTMLElement ? n : null;
|
|
4
|
+
}
|
|
5
|
+
function c(n) {
|
|
6
|
+
return !o || !n || typeof n != "object" || !("$el" in n) ? !1 : n.$el instanceof HTMLElement;
|
|
7
|
+
}
|
|
8
|
+
function r(n) {
|
|
9
|
+
return c(n) ? n.$el : null;
|
|
10
|
+
}
|
|
11
|
+
function i(n) {
|
|
12
|
+
if (!n || typeof n != "object" || !("calendarRef" in n)) return null;
|
|
13
|
+
const t = n.calendarRef, e = t == null ? void 0 : t.focusDate;
|
|
14
|
+
return typeof e != "function" ? null : (f) => e.call(t, f);
|
|
15
|
+
}
|
|
16
|
+
export {
|
|
17
|
+
r as a,
|
|
18
|
+
i as g,
|
|
19
|
+
c as i,
|
|
20
|
+
l as t
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=templateRefNarrowing-CeANDylX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"templateRefNarrowing-CeANDylX.js","sources":["../src/utils/templateRefNarrowing.ts"],"sourcesContent":["/**\n * Type-narrowing helpers for untyped template refs (useTemplateRef() without a type argument).\n * Use these instead of type assertions so types stay accurate and the code follows\n * \"prefer type narrowing over assertions\" (code-patterns.mdc).\n *\n * All helpers are SSR-safe: they return null / false when HTMLElement is not defined (e.g. Node during VitePress SSR).\n */\n\nconst hasHTMLElement = typeof HTMLElement !== 'undefined';\n\n/**\n * Returns the value as an HTMLElement if it is one, otherwise null.\n * Use when a template ref is bound to an HTML element.\n */\nexport function toElement(value: unknown): HTMLElement | null {\n return hasHTMLElement && value instanceof HTMLElement ? value : null;\n}\n\n/**\n * Type guard: true when value is an object with an $el property that is an HTMLElement.\n * Use for template refs bound to Vue component instances (Field, Dropdown, etc.).\n */\nexport function isComponentWithEl(value: unknown): value is { $el: HTMLElement } {\n if (!hasHTMLElement || !value || typeof value !== 'object' || !('$el' in value)) return false;\n\n // Intentional cast: we've confirmed '$el' in value; TypeScript needs this to narrow to { $el: HTMLElement }.\n const el = (value as { $el: unknown }).$el;\n\n return el instanceof HTMLElement;\n}\n\n/**\n * Returns the component's $el if value is a component-with-$el, otherwise null.\n */\nexport function toComponentEl(value: unknown): HTMLElement | null {\n return isComponentWithEl(value) ? value.$el : null;\n}\n\n/**\n * Returns a focusDate-like function if value has calendarRef.focusDate, otherwise null.\n * Use for v-calendar DatePicker refs when calling focusDate. The returned function\n * invokes focusDate with the correct `this` (the calendar ref object) so component\n * methods work when called.\n */\nexport function getCalendarFocusDate(value: unknown): ((date: Date) => void) | null {\n if (!value || typeof value !== 'object' || !('calendarRef' in value)) return null;\n\n const calendar = (value as { calendarRef?: { focusDate?: (d: Date) => void } }).calendarRef;\n const focusDate = calendar?.focusDate;\n\n if (typeof focusDate !== 'function') return null;\n\n return (date: Date) => focusDate.call(calendar, date);\n}\n"],"names":["hasHTMLElement","toElement","value","isComponentWithEl","toComponentEl","getCalendarFocusDate","calendar","focusDate","date"],"mappings":"AAQA,MAAMA,IAAiB,OAAO,cAAgB;AAMvC,SAASC,EAAUC,GAAoC;AAC5D,SAAOF,KAAkBE,aAAiB,cAAcA,IAAQ;AAClE;AAMO,SAASC,EAAkBD,GAA+C;AAC/E,SAAI,CAACF,KAAkB,CAACE,KAAS,OAAOA,KAAU,YAAY,EAAE,SAASA,KAAe,KAG5EA,EAA2B,eAElB;AACvB;AAKO,SAASE,EAAcF,GAAoC;AAChE,SAAOC,EAAkBD,CAAK,IAAIA,EAAM,MAAM;AAChD;AAQO,SAASG,EAAqBH,GAA+C;AAClF,MAAI,CAACA,KAAS,OAAOA,KAAU,YAAY,EAAE,iBAAiBA,GAAQ,QAAO;AAE7E,QAAMI,IAAYJ,EAA8D,aAC1EK,IAAYD,KAAA,gBAAAA,EAAU;AAE5B,SAAI,OAAOC,KAAc,aAAmB,OAErC,CAACC,MAAeD,EAAU,KAAKD,GAAUE,CAAI;AACtD;"}
|
package/dist/useMediaQuery.d.ts
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
export declare interface QueryCacheItem {
|
|
6
|
-
hasMatches: Ref<boolean>;
|
|
7
|
-
mediaQueryList: MediaQueryList;
|
|
8
|
-
}
|
|
1
|
+
import { provideSSRWidth } from '@vueuse/core';
|
|
2
|
+
import { useMediaQuery } from '@vueuse/core';
|
|
3
|
+
import { useSSRWidth } from '@vueuse/core';
|
|
9
4
|
|
|
10
5
|
/**
|
|
11
|
-
*
|
|
6
|
+
* No-op for backwards compatibility with test setup. VueUse's useMediaQuery does not
|
|
7
|
+
* use a shared cache, so there is nothing to clear.
|
|
12
8
|
*/
|
|
13
|
-
declare function
|
|
9
|
+
export declare function clearQueryCache(): void;
|
|
10
|
+
|
|
11
|
+
export { provideSSRWidth }
|
|
12
|
+
|
|
14
13
|
export default useMediaQuery;
|
|
14
|
+
export { useMediaQuery }
|
|
15
|
+
|
|
16
|
+
export { useSSRWidth }
|
|
15
17
|
|
|
16
18
|
export { }
|
package/dist/useMediaQuery.js
CHANGED
|
@@ -1,33 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
function f(e) {
|
|
4
|
-
s.has(t(e)) || s.set(t(e), {
|
|
5
|
-
hasMatches: h(!1),
|
|
6
|
-
mediaQueryList: window.matchMedia(t(e))
|
|
7
|
-
});
|
|
8
|
-
const a = s.get(t(e));
|
|
9
|
-
function n(i) {
|
|
10
|
-
a.hasMatches.value = i.matches;
|
|
11
|
-
}
|
|
12
|
-
function c() {
|
|
13
|
-
var i;
|
|
14
|
-
typeof ((i = a.mediaQueryList) == null ? void 0 : i.removeEventListener) == "function" && a.mediaQueryList.removeEventListener("change", n);
|
|
15
|
-
}
|
|
16
|
-
const o = d(
|
|
17
|
-
() => t(e),
|
|
18
|
-
() => {
|
|
19
|
-
c(), a.mediaQueryList = window.matchMedia(t(e)), a.mediaQueryList.addEventListener("change", n), a.hasMatches.value = a.mediaQueryList.matches;
|
|
20
|
-
},
|
|
21
|
-
{ immediate: !0 }
|
|
22
|
-
);
|
|
23
|
-
return m(() => {
|
|
24
|
-
o(), c(), s.delete(t(e));
|
|
25
|
-
}), u(() => {
|
|
26
|
-
var i;
|
|
27
|
-
return !!((i = s.get(t(e))) != null && i.hasMatches.value);
|
|
28
|
-
});
|
|
1
|
+
import { a as s, p as t, a as u, b as d } from "./index-t9tXBnql.js";
|
|
2
|
+
function e() {
|
|
29
3
|
}
|
|
30
4
|
export {
|
|
31
|
-
|
|
5
|
+
e as clearQueryCache,
|
|
6
|
+
s as default,
|
|
7
|
+
t as provideSSRWidth,
|
|
8
|
+
u as useMediaQuery,
|
|
9
|
+
d as useSSRWidth
|
|
32
10
|
};
|
|
33
11
|
//# sourceMappingURL=useMediaQuery.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMediaQuery.js","sources":["../src/composables/useMediaQuery/useMediaQuery.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"useMediaQuery.js","sources":["../src/composables/useMediaQuery/useMediaQuery.ts"],"sourcesContent":["/**\n * Re-export useMediaQuery and SSR helpers from VueUse so we get maintained behavior\n * (SSR, ssrWidth, pxValue for units) without duplicating logic.\n * See https://vueuse.org/core/useMediaQuery/\n */\nexport { useMediaQuery as default, provideSSRWidth, useMediaQuery, useSSRWidth } from '@vueuse/core';\n\n/**\n * No-op for backwards compatibility with test setup. VueUse's useMediaQuery does not\n * use a shared cache, so there is nothing to clear.\n */\nexport function clearQueryCache(): void {}\n"],"names":["clearQueryCache"],"mappings":";AAWO,SAASA,IAAwB;AAAC;"}
|
package/dist/useSortable.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import v from "@leaflink/snitch";
|
|
2
|
-
import {
|
|
2
|
+
import { c as I } from "./index-t9tXBnql.js";
|
|
3
3
|
import { isRef as w, toValue as D, nextTick as A, computed as i, ref as y, watch as S, onMounted as $, onBeforeUnmount as G } from "vue";
|
|
4
4
|
function O({ list: n, from: s, to: e }) {
|
|
5
5
|
if (s === e) return;
|
|
@@ -1,40 +1,52 @@
|
|
|
1
1
|
import { S as g } from "../colors-DDDVvqfQ.js";
|
|
2
|
+
function l(t) {
|
|
3
|
+
const n = parseInt(t, 16);
|
|
4
|
+
return Number.isNaN(n) ? 0 : n;
|
|
5
|
+
}
|
|
2
6
|
function a(t) {
|
|
3
|
-
|
|
7
|
+
const n = l(t) / 255;
|
|
8
|
+
return n <= 0.03928 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
|
|
4
9
|
}
|
|
5
10
|
function o(t) {
|
|
6
|
-
return
|
|
11
|
+
return 0.2126 * a(t.slice(1, 3)) + 0.7152 * a(t.slice(3, 5)) + 0.0722 * a(t.slice(-2));
|
|
7
12
|
}
|
|
8
|
-
function u(t) {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
function i(t, e) {
|
|
12
|
-
const n = u(t), r = u(e);
|
|
13
|
-
return (Math.max(n, r) + 0.05) / (Math.min(n, r) + 0.05);
|
|
13
|
+
function u(t, n) {
|
|
14
|
+
const e = o(t), r = o(n);
|
|
15
|
+
return (Math.max(e, r) + 0.05) / (Math.min(e, r) + 0.05);
|
|
14
16
|
}
|
|
15
17
|
function c(t) {
|
|
16
|
-
return getComputedStyle(document.documentElement).getPropertyValue(`--color-${t}`);
|
|
17
|
-
}
|
|
18
|
-
function l(t) {
|
|
19
|
-
const e = Object.values(g);
|
|
20
|
-
return e.includes(t) ? c(t) : e.find((s) => s.split("-")[0] === t) ? c(`${t}-500`) : "";
|
|
18
|
+
return getComputedStyle(document.documentElement).getPropertyValue(`--color-${t}`).trim();
|
|
21
19
|
}
|
|
22
|
-
function
|
|
23
|
-
|
|
20
|
+
function d(t) {
|
|
21
|
+
const n = Object.values(g);
|
|
22
|
+
return n.includes(t) ? c(t) : n.find((s) => s.split("-")[0] === t) ? c(`${t}-500`) : "";
|
|
24
23
|
}
|
|
25
24
|
function f(t) {
|
|
26
|
-
|
|
27
|
-
return r > s ? n : e;
|
|
25
|
+
return t.startsWith("#") ? t : `#${t}`;
|
|
28
26
|
}
|
|
29
|
-
function
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
function m(t) {
|
|
28
|
+
const n = "#27282A", e = "#FFFFFF", r = u(t, e), s = u(t, n);
|
|
29
|
+
return r > s ? e : n;
|
|
30
|
+
}
|
|
31
|
+
const i = "#27282A";
|
|
32
|
+
function p(t) {
|
|
33
|
+
if (!(t != null && t.trim()))
|
|
34
|
+
return i;
|
|
35
|
+
const n = new RegExp("^#?(([A-Fa-f0-9]{3})|([A-Fa-f0-9]{6}))$");
|
|
36
|
+
if (n.test(t)) {
|
|
37
|
+
const r = f(t);
|
|
38
|
+
return m(r);
|
|
39
|
+
}
|
|
40
|
+
if (typeof document > "u")
|
|
41
|
+
return i;
|
|
42
|
+
const e = d(t);
|
|
43
|
+
if (e && n.test(e.trim())) {
|
|
44
|
+
const r = f(e.trim());
|
|
45
|
+
return m(r);
|
|
33
46
|
}
|
|
34
|
-
|
|
35
|
-
return n ? f(n) : (console.warn(`getContrastingTextColor received an invalid color value: ${t}`), "#27282A");
|
|
47
|
+
return process.env.NODE_ENV !== "production" && console.warn(`getContrastingTextColor received an invalid color value: ${t}`), i;
|
|
36
48
|
}
|
|
37
49
|
export {
|
|
38
|
-
|
|
50
|
+
p as default
|
|
39
51
|
};
|
|
40
52
|
//# sourceMappingURL=getContrastingTextColor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getContrastingTextColor.js","sources":["../../src/utils/getContrastingTextColor.ts"],"sourcesContent":["import { StashColors } from '../../types/colors';\n\n/**\n * @see: https://wunnle.com/dynamic-text-color-based-on-background\n */\n\nfunction getRGB(c) {\n
|
|
1
|
+
{"version":3,"file":"getContrastingTextColor.js","sources":["../../src/utils/getContrastingTextColor.ts"],"sourcesContent":["import { StashColors } from '../../types/colors';\n\n/**\n * @see: https://wunnle.com/dynamic-text-color-based-on-background\n */\n\nfunction getRGB(c: string): number {\n const parsed = parseInt(c, 16);\n\n return Number.isNaN(parsed) ? 0 : parsed;\n}\n\nfunction getsRGB(c: string): number {\n const r = getRGB(c) / 255;\n\n return r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);\n}\n\nfunction getLuminance(hexColor: string): number {\n return (\n 0.2126 * getsRGB(hexColor.slice(1, 3)) +\n 0.7152 * getsRGB(hexColor.slice(3, 5)) +\n 0.0722 * getsRGB(hexColor.slice(-2))\n );\n}\n\nfunction getContrast(foreground: string, background: string): number {\n const L1 = getLuminance(foreground);\n const L2 = getLuminance(background);\n\n return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);\n}\n\nfunction getStashColorValueFromCssVar(color: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(`--color-${color}`).trim();\n}\n\nfunction getStashColor(color: string) {\n // String enum values at runtime; widen to string[] so .includes(color) is type-safe (code-patterns: avoid assertions where possible).\n const stashColors: string[] = Object.values(StashColors);\n const exactMatch = stashColors.includes(color);\n\n if (exactMatch) {\n return getStashColorValueFromCssVar(color);\n }\n\n // check if a primary color group is provided, eg. 'blue' in 'blue-100'\n const partialMatch = stashColors.find((stashColor) => {\n return stashColor.split('-')[0] === color;\n });\n\n if (partialMatch) {\n return getStashColorValueFromCssVar(`${color}-500`);\n }\n\n return '';\n}\n\nfunction normalizeHexValue(hexValue: string) {\n if (hexValue.startsWith('#')) {\n return hexValue;\n }\n\n return `#${hexValue}`;\n}\n\nfunction getContrastingHexValue(colorHexValue: string) {\n const darkTextColor = '#27282A'; // ice-900\n const lightTextColor = '#FFFFFF'; // white\n const lightTextContrast = getContrast(colorHexValue, lightTextColor);\n const darkTextContrast = getContrast(colorHexValue, darkTextColor);\n\n return lightTextContrast > darkTextContrast ? lightTextColor : darkTextColor;\n}\n\nconst DEFAULT_CONTRAST_COLOR = '#27282A';\n\n/**\n * Returns a contrasting text color (light or dark) for a given background color.\n * Accepts hex values or Stash color names (resolved via CSS variables in the browser).\n * In SSR or when the color is invalid, returns the default contrast color (ice-900).\n *\n * @param color - Hex string (e.g. #fff or abc123) or Stash color name (e.g. blue-500)\n * @returns Hex string for the contrasting text color\n */\nexport default function getContrastingTextColor(color: string) {\n if (!color?.trim()) {\n return DEFAULT_CONTRAST_COLOR;\n }\n\n const hexRegex = new RegExp('^#?(([A-Fa-f0-9]{3})|([A-Fa-f0-9]{6}))$');\n\n if (hexRegex.test(color)) {\n const normalizedHexValue = normalizeHexValue(color);\n return getContrastingHexValue(normalizedHexValue);\n }\n\n // Stash color names require getComputedStyle(document.documentElement), which is unavailable in SSR (Node).\n if (typeof document === 'undefined') {\n return DEFAULT_CONTRAST_COLOR;\n }\n\n const stashColor = getStashColor(color);\n\n if (stashColor && hexRegex.test(stashColor.trim())) {\n const normalized = normalizeHexValue(stashColor.trim());\n return getContrastingHexValue(normalized);\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn(`getContrastingTextColor received an invalid color value: ${color}`);\n }\n\n return DEFAULT_CONTRAST_COLOR;\n}\n"],"names":["getRGB","c","parsed","getsRGB","r","getLuminance","hexColor","getContrast","foreground","background","L1","L2","getStashColorValueFromCssVar","color","getStashColor","stashColors","StashColors","stashColor","normalizeHexValue","hexValue","getContrastingHexValue","colorHexValue","darkTextColor","lightTextColor","lightTextContrast","darkTextContrast","DEFAULT_CONTRAST_COLOR","getContrastingTextColor","hexRegex","normalizedHexValue","normalized"],"mappings":";AAMA,SAASA,EAAOC,GAAmB;AACjC,QAAMC,IAAS,SAASD,GAAG,EAAE;AAE7B,SAAO,OAAO,MAAMC,CAAM,IAAI,IAAIA;AACpC;AAEA,SAASC,EAAQF,GAAmB;AAClC,QAAMG,IAAIJ,EAAOC,CAAC,IAAI;AAEtB,SAAOG,KAAK,UAAUA,IAAI,QAAQ,KAAK,KAAKA,IAAI,SAAS,OAAO,GAAG;AACrE;AAEA,SAASC,EAAaC,GAA0B;AAC9C,SACE,SAASH,EAAQG,EAAS,MAAM,GAAG,CAAC,CAAC,IACrC,SAASH,EAAQG,EAAS,MAAM,GAAG,CAAC,CAAC,IACrC,SAASH,EAAQG,EAAS,MAAM,EAAE,CAAC;AAEvC;AAEA,SAASC,EAAYC,GAAoBC,GAA4B;AACnE,QAAMC,IAAKL,EAAaG,CAAU,GAC5BG,IAAKN,EAAaI,CAAU;AAElC,UAAQ,KAAK,IAAIC,GAAIC,CAAE,IAAI,SAAS,KAAK,IAAID,GAAIC,CAAE,IAAI;AACzD;AAEA,SAASC,EAA6BC,GAAe;AACnD,SAAO,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,WAAWA,CAAK,EAAE,EAAE,KAAA;AACzF;AAEA,SAASC,EAAcD,GAAe;AAEpC,QAAME,IAAwB,OAAO,OAAOC,CAAW;AAGvD,SAFmBD,EAAY,SAASF,CAAK,IAGpCD,EAA6BC,CAAK,IAItBE,EAAY,KAAK,CAACE,MAC9BA,EAAW,MAAM,GAAG,EAAE,CAAC,MAAMJ,CACrC,IAGQD,EAA6B,GAAGC,CAAK,MAAM,IAG7C;AACT;AAEA,SAASK,EAAkBC,GAAkB;AAC3C,SAAIA,EAAS,WAAW,GAAG,IAClBA,IAGF,IAAIA,CAAQ;AACrB;AAEA,SAASC,EAAuBC,GAAuB;AACrD,QAAMC,IAAgB,WAChBC,IAAiB,WACjBC,IAAoBjB,EAAYc,GAAeE,CAAc,GAC7DE,IAAmBlB,EAAYc,GAAeC,CAAa;AAEjE,SAAOE,IAAoBC,IAAmBF,IAAiBD;AACjE;AAEA,MAAMI,IAAyB;AAU/B,SAAwBC,EAAwBd,GAAe;AAC7D,MAAI,EAACA,KAAA,QAAAA,EAAO;AACV,WAAOa;AAGT,QAAME,IAAW,IAAI,OAAO,yCAAyC;AAErE,MAAIA,EAAS,KAAKf,CAAK,GAAG;AACxB,UAAMgB,IAAqBX,EAAkBL,CAAK;AAClD,WAAOO,EAAuBS,CAAkB;AAAA,EAClD;AAGA,MAAI,OAAO,WAAa;AACtB,WAAOH;AAGT,QAAMT,IAAaH,EAAcD,CAAK;AAEtC,MAAII,KAAcW,EAAS,KAAKX,EAAW,KAAA,CAAM,GAAG;AAClD,UAAMa,IAAaZ,EAAkBD,EAAW,KAAA,CAAM;AACtD,WAAOG,EAAuBU,CAAU;AAAA,EAC1C;AAEA,SAAI,QAAQ,IAAI,aAAa,gBAE3B,QAAQ,KAAK,4DAA4DjB,CAAK,EAAE,GAG3Ea;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import { defineComponent as L, computed as f, provide as N, useTemplateRef as x, onMounted as R, onUpdated as S, watch as B, onBeforeUnmount as $, createElementBlock as y, openBlock as v, createBlock as D, unref as C, normalizeClass as b, withCtx as p, renderSlot as h, createElementVNode as A, createTextVNode as H, createVNode as O, toDisplayString as j } from "vue";
|
|
2
|
-
import { t as E } from "./locale.js";
|
|
3
|
-
import q from "./Icon.js";
|
|
4
|
-
import z from "./MoreActions.js";
|
|
5
|
-
const J = Object.freeze({
|
|
6
|
-
key: Symbol("TABS_INJECTION_KEY")
|
|
7
|
-
});
|
|
8
|
-
var g = /* @__PURE__ */ ((e) => (e.Line = "line", e.Enclosed = "enclosed", e))(g || {});
|
|
9
|
-
const U = ["aria-expanded", "onClick"], G = /* @__PURE__ */ L({
|
|
10
|
-
__name: "Tabs",
|
|
11
|
-
props: {
|
|
12
|
-
activeTab: {},
|
|
13
|
-
variant: { default: g.Line }
|
|
14
|
-
},
|
|
15
|
-
emits: ["update:activeTab"],
|
|
16
|
-
setup(e, { emit: w }) {
|
|
17
|
-
const M = w, o = e, s = f({
|
|
18
|
-
get() {
|
|
19
|
-
return o.activeTab;
|
|
20
|
-
},
|
|
21
|
-
set(t) {
|
|
22
|
-
M("update:activeTab", t);
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
function I(t) {
|
|
26
|
-
s.value = t;
|
|
27
|
-
}
|
|
28
|
-
N(J.key, {
|
|
29
|
-
activeTab: f(() => s.value),
|
|
30
|
-
variant: f(() => o.variant),
|
|
31
|
-
setActiveTab: I
|
|
32
|
-
});
|
|
33
|
-
const r = x("moreDropdownMenuRef"), i = x("tabsContainerRef"), c = /* @__PURE__ */ new Map();
|
|
34
|
-
function k() {
|
|
35
|
-
c.forEach((t, a) => {
|
|
36
|
-
a.removeEventListener("click", t);
|
|
37
|
-
}), c.clear();
|
|
38
|
-
}
|
|
39
|
-
function l() {
|
|
40
|
-
if (!r.value) return;
|
|
41
|
-
k(), r.value.querySelectorAll("[data-action-id]").forEach((a) => {
|
|
42
|
-
const n = a.getAttribute("data-action-id");
|
|
43
|
-
if (!n) return;
|
|
44
|
-
const d = s.value === n;
|
|
45
|
-
a.setAttribute("aria-selected", d ? "true" : "false");
|
|
46
|
-
const T = () => {
|
|
47
|
-
if (i.value) {
|
|
48
|
-
const u = i.value.querySelector(
|
|
49
|
-
`[role="tab"][data-action-id="${n}"]`
|
|
50
|
-
), m = u == null ? void 0 : u.firstChild;
|
|
51
|
-
m && m instanceof HTMLElement && m.click();
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
a.addEventListener("click", T), c.set(a, T);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
return R(() => {
|
|
58
|
-
l();
|
|
59
|
-
}), S(() => {
|
|
60
|
-
l();
|
|
61
|
-
}), B(s, () => {
|
|
62
|
-
l();
|
|
63
|
-
}), $(() => {
|
|
64
|
-
k();
|
|
65
|
-
}), (t, a) => (v(), y("div", {
|
|
66
|
-
ref_key: "tabsContainerRef",
|
|
67
|
-
ref: i,
|
|
68
|
-
class: "stash-tabs relative",
|
|
69
|
-
role: "tabList",
|
|
70
|
-
"data-test": "stash-tabs"
|
|
71
|
-
}, [
|
|
72
|
-
t.$slots["more-actions"] ? (v(), D(z, {
|
|
73
|
-
key: 0,
|
|
74
|
-
class: b(["stash-tabs-list flex items-end", {
|
|
75
|
-
"stash-tabs-list--line": e.variant === "line",
|
|
76
|
-
"stash-tabs-list--enclosed": e.variant === "enclosed",
|
|
77
|
-
"gap-6": e.variant === "line"
|
|
78
|
-
}]),
|
|
79
|
-
"more-button-text": C(E)("ll.more"),
|
|
80
|
-
"dropdown-mode": "custom",
|
|
81
|
-
"actions-container-class": {
|
|
82
|
-
"gap-0": e.variant === "enclosed",
|
|
83
|
-
"gap-6": e.variant === "line"
|
|
84
|
-
},
|
|
85
|
-
"actions-container-tag": "ul"
|
|
86
|
-
}, {
|
|
87
|
-
"more-actions": p(() => [
|
|
88
|
-
A("div", {
|
|
89
|
-
ref_key: "moreDropdownMenuRef",
|
|
90
|
-
ref: r
|
|
91
|
-
}, [
|
|
92
|
-
h(t.$slots, "more-actions")
|
|
93
|
-
], 512)
|
|
94
|
-
]),
|
|
95
|
-
toggle: p(({ toggle: n, isOpen: d }) => [
|
|
96
|
-
A("button", {
|
|
97
|
-
"aria-haspopup": "menu",
|
|
98
|
-
"aria-expanded": d,
|
|
99
|
-
class: b(["flex cursor-pointer items-center justify-center border-solid px-6 pt-1.5 pb-1 text-sm font-medium text-blue-500 hover:text-blue-700", { "border-t-4 border-transparent": o.variant === "enclosed" }]),
|
|
100
|
-
type: "button",
|
|
101
|
-
onClick: n
|
|
102
|
-
}, [
|
|
103
|
-
H(j(C(E)("ll.more")) + " ", 1),
|
|
104
|
-
O(q, { name: "caret-down" })
|
|
105
|
-
], 10, U)
|
|
106
|
-
]),
|
|
107
|
-
default: p(() => [
|
|
108
|
-
h(t.$slots, "default")
|
|
109
|
-
]),
|
|
110
|
-
_: 3
|
|
111
|
-
}, 8, ["class", "more-button-text", "actions-container-class"])) : (v(), y("ul", {
|
|
112
|
-
key: 1,
|
|
113
|
-
class: b(["stash-tabs-list flex items-end overflow-x-scroll", {
|
|
114
|
-
"stash-tabs-list--line": e.variant === "line",
|
|
115
|
-
"stash-tabs-list--enclosed": e.variant === "enclosed",
|
|
116
|
-
"gap-0": e.variant === "enclosed",
|
|
117
|
-
"gap-6": e.variant === "line"
|
|
118
|
-
}])
|
|
119
|
-
}, [
|
|
120
|
-
h(t.$slots, "default")
|
|
121
|
-
], 2))
|
|
122
|
-
], 512));
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
export {
|
|
126
|
-
J as T,
|
|
127
|
-
G as _,
|
|
128
|
-
g as a
|
|
129
|
-
};
|
|
130
|
-
//# sourceMappingURL=Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.vue_vue_type_script_setup_true_lang-B3FBaVP5.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, onBeforeUnmount, onMounted, onUpdated, provide, useTemplateRef, watch } 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: TabsProps['activeTab']) {\n currentActiveTab.value = newTabValue;\n }\n\n provide(TABS_INJECTION.key, {\n activeTab: computed(() => currentActiveTab.value),\n variant: computed(() => props.variant),\n setActiveTab,\n });\n\n const moreDropdownMenuRef = useTemplateRef<HTMLElement>('moreDropdownMenuRef');\n const tabsContainerRef = useTemplateRef<HTMLElement>('tabsContainerRef');\n\n // Store event listeners to allow proper cleanup\n const eventListeners = new Map<Element, EventListener>();\n\n function cleanupMoreActionsHandlers() {\n eventListeners.forEach((listener, element) => {\n element.removeEventListener('click', listener);\n });\n eventListeners.clear();\n }\n\n // Setup automatic handlers for MenuItem elements in more-actions dropdown\n function setupMoreActionsHandlers() {\n if (!moreDropdownMenuRef.value) return;\n\n // Remove existing listeners first to prevent duplication\n cleanupMoreActionsHandlers();\n\n const menuItems = moreDropdownMenuRef.value.querySelectorAll('[data-action-id]');\n\n menuItems.forEach((item) => {\n const actionId = item.getAttribute('data-action-id');\n if (!actionId) return;\n\n // Update aria-selected based on active tab\n const isActive = currentActiveTab.value === actionId;\n item.setAttribute('aria-selected', isActive ? 'true' : 'false');\n\n // Create and store the listener\n const listener = () => {\n // Find and click the original tab in the actions container\n if (tabsContainerRef.value) {\n const originalTab = tabsContainerRef.value.querySelector<HTMLElement>(\n `[role=\"tab\"][data-action-id=\"${actionId}\"]`,\n );\n const firstChild = originalTab?.firstChild;\n if (firstChild && firstChild instanceof HTMLElement) {\n firstChild.click();\n }\n }\n };\n\n item.addEventListener('click', listener);\n eventListeners.set(item, listener);\n });\n }\n\n onMounted(() => {\n setupMoreActionsHandlers();\n });\n\n onUpdated(() => {\n setupMoreActionsHandlers();\n });\n\n watch(currentActiveTab, () => {\n setupMoreActionsHandlers();\n });\n\n onBeforeUnmount(() => {\n cleanupMoreActionsHandlers();\n });\n</script>\n\n<template>\n <div ref=\"tabsContainerRef\" class=\"stash-tabs relative\" role=\"tabList\" data-test=\"stash-tabs\">\n <template v-if=\"$slots['more-actions']\">\n <MoreActions\n class=\"stash-tabs-list flex items-end\"\n :class=\"{\n 'stash-tabs-list--line': variant === 'line',\n 'stash-tabs-list--enclosed': variant === 'enclosed',\n 'gap-6': variant === 'line',\n }\"\n :more-button-text=\"t('ll.more')\"\n dropdown-mode=\"custom\"\n :actions-container-class=\"{\n 'gap-0': variant === 'enclosed',\n 'gap-6': variant === 'line',\n }\"\n actions-container-tag=\"ul\"\n >\n <slot></slot>\n\n <template #more-actions>\n <div ref=\"moreDropdownMenuRef\">\n <slot name=\"more-actions\"></slot>\n </div>\n </template>\n\n <template #toggle=\"{ toggle, isOpen }\">\n <button\n aria-haspopup=\"menu\"\n :aria-expanded=\"isOpen\"\n class=\"flex cursor-pointer items-center justify-center border-solid px-6 pt-1.5 pb-1 text-sm font-medium text-blue-500 hover:text-blue-700\"\n :class=\"{ 'border-t-4 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 </template>\n\n <template v-else>\n <ul\n class=\"stash-tabs-list flex items-end overflow-x-scroll\"\n :class=\"{\n 'stash-tabs-list--line': variant === 'line',\n 'stash-tabs-list--enclosed': variant === 'enclosed',\n 'gap-0': variant === 'enclosed',\n 'gap-6': variant === 'line',\n }\"\n >\n <slot></slot>\n </ul>\n </template>\n </div>\n</template>\n"],"names":["TABS_INJECTION","TabVariant","emit","__emit","props","__props","currentActiveTab","computed","nv","setActiveTab","newTabValue","provide","moreDropdownMenuRef","useTemplateRef","tabsContainerRef","eventListeners","cleanupMoreActionsHandlers","listener","element","setupMoreActionsHandlers","item","actionId","isActive","originalTab","firstChild","onMounted","onUpdated","watch","onBeforeUnmount","_createElementBlock","$slots","_createBlock","MoreActions","_unref","t","_createElementVNode","_renderSlot","_ctx","_withCtx","toggle","isOpen","_normalizeClass","_createTextVNode","_toDisplayString","_createVNode","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,GAAqC;AACzD,MAAAJ,EAAiB,QAAQI;AAAA,IAC3B;AAEA,IAAAC,EAAQX,EAAe,KAAK;AAAA,MAC1B,WAAWO,EAAS,MAAMD,EAAiB,KAAK;AAAA,MAChD,SAASC,EAAS,MAAMH,EAAM,OAAO;AAAA,MACrC,cAAAK;AAAA,IAAA,CACD;AAED,UAAMG,IAAsBC,EAA4B,qBAAqB,GACvEC,IAAmBD,EAA4B,kBAAkB,GAGjEE,wBAAqB,IAAA;AAE3B,aAASC,IAA6B;AACpC,MAAAD,EAAe,QAAQ,CAACE,GAAUC,MAAY;AAC5C,QAAAA,EAAQ,oBAAoB,SAASD,CAAQ;AAAA,MAC/C,CAAC,GACDF,EAAe,MAAA;AAAA,IACjB;AAGA,aAASI,IAA2B;AAClC,UAAI,CAACP,EAAoB,MAAO;AAGhC,MAAAI,EAAA,GAEkBJ,EAAoB,MAAM,iBAAiB,kBAAkB,EAErE,QAAQ,CAACQ,MAAS;AAC1B,cAAMC,IAAWD,EAAK,aAAa,gBAAgB;AACnD,YAAI,CAACC,EAAU;AAGf,cAAMC,IAAWhB,EAAiB,UAAUe;AAC5C,QAAAD,EAAK,aAAa,iBAAiBE,IAAW,SAAS,OAAO;AAG9D,cAAML,IAAW,MAAM;AAErB,cAAIH,EAAiB,OAAO;AAC1B,kBAAMS,IAAcT,EAAiB,MAAM;AAAA,cACzC,gCAAgCO,CAAQ;AAAA,YAAA,GAEpCG,IAAaD,KAAA,gBAAAA,EAAa;AAChC,YAAIC,KAAcA,aAAsB,eACtCA,EAAW,MAAA;AAAA,UAEf;AAAA,QACF;AAEA,QAAAJ,EAAK,iBAAiB,SAASH,CAAQ,GACvCF,EAAe,IAAIK,GAAMH,CAAQ;AAAA,MACnC,CAAC;AAAA,IACH;AAEA,WAAAQ,EAAU,MAAM;AACd,MAAAN,EAAA;AAAA,IACF,CAAC,GAEDO,EAAU,MAAM;AACd,MAAAP,EAAA;AAAA,IACF,CAAC,GAEDQ,EAAMrB,GAAkB,MAAM;AAC5B,MAAAa,EAAA;AAAA,IACF,CAAC,GAEDS,EAAgB,MAAM;AACpB,MAAAZ,EAAA;AAAA,IACF,CAAC,mBAIDa,EAsDM,OAAA;AAAA,eAtDG;AAAA,MAAJ,KAAIf;AAAA,MAAmB,OAAM;AAAA,MAAsB,MAAK;AAAA,MAAU,aAAU;AAAA,IAAA;MAC/DgB,EAAAA,OAAM,cAAA,UACpBC,EAoCcC,GAAA;AAAA;QAnCZ,UAAM,kCAAgC;AAAA,mCACO3B,EAAA,YAAO;AAAA,uCAAoDA,EAAA,YAAO;AAAA,mBAAoCA,EAAA,YAAO;AAAA,QAAA;QAKzJ,oBAAkB4B,EAAAC,CAAA,EAAC,SAAA;AAAA,QACpB,iBAAc;AAAA,QACb,2BAAuB;AAAA,mBAAuB7B,EAAA,YAAO;AAAA,mBAAoCA,EAAA,YAAO;AAAA,QAAA;AAAA,QAIjG,yBAAsB;AAAA,MAAA;QAIX,kBACT,MAEM;AAAA,UAFN8B,EAEM,OAAA;AAAA,qBAFG;AAAA,YAAJ,KAAIvB;AAAA,UAAA;YACPwB,EAAiCC,EAAA,QAAA,cAAA;AAAA,UAAA;;QAI1B,QAAMC,EACf,CAUS,EAXU,QAAAC,GAAQ,QAAAC,QAAM;AAAA,UACjCL,EAUS,UAAA;AAAA,YATP,iBAAc;AAAA,YACb,iBAAeK;AAAA,YAChB,OAAKC,EAAA,CAAC,uIAAqI,EAAA,iCAChGrC,EAAM,YAAO,WAAA,CAAA,CAAA;AAAA,YACxD,MAAK;AAAA,YACJ,SAAOmC;AAAA,UAAA;YAELG,EAAAC,EAAAV,EAAAC,CAAA,gBAAe,KAClB,CAAA;AAAA,YAAAU,EAA0BC,GAAA,EAApB,MAAK,cAAY;AAAA,UAAA;;mBAlB3B,MAAa;AAAA,UAAbT,EAAaC,EAAA,QAAA,SAAA;AAAA,QAAA;;+EAyBfR,EAUK,MAAA;AAAA;QATH,UAAM,oDAAkD;AAAA,mCACXxB,EAAA,YAAO;AAAA,uCAAoDA,EAAA,YAAO;AAAA,mBAAoCA,EAAA,YAAO;AAAA,mBAAoCA,EAAA,YAAO;AAAA,QAAA;;QAOrM+B,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}
|