@nextcloud/vue 9.0.0-rc.2 → 9.0.0-rc.4

package/dist/components/NcUserBubble/NcUserBubble.vue.d.ts

@@ -0,0 +1,90 @@
+import { RouteLocation } from 'vue-router';
+import { Slot } from 'vue';
+type __VLS_Props = {
+    /**
+     * Override generated avatar, can be an url or an icon class
+     */
+    avatarImage?: string;
+    /**
+     * Provide the user id if this is a user
+     */
+    user?: string;
+    /**
+     * Displayed label
+     */
+    displayName?: string;
+    /**
+     * Whether or not to display the user-status
+     */
+    showUserStatus?: boolean;
+    /**
+     * Define the whole bubble as a link
+     */
+    url?: string;
+    /**
+     * Use bubble as a router-link for in-app navigation
+     */
+    to?: RouteLocation;
+    /**
+     * Use the primary colour
+     */
+    primary?: boolean;
+    /**
+     * This is the height of the component
+     */
+    size?: number;
+    /**
+     * This is the margin of the avatar (size - margin = avatar size)
+     */
+    margin?: number;
+};
+type __VLS_PublicProps = {
+    'open'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * Main Popover content on userbubble hover/focus
+         */
+        default?: Slot;
+        /**
+         * Optional slot just after the name
+         */
+        name?: Slot;
+    }> & {
+        /**
+         * Main Popover content on userbubble hover/focus
+         */
+        default?: Slot;
+        /**
+         * Optional slot just after the name
+         */
+        name?: Slot;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: number;
+    displayName: string;
+    url: string;
+    to: RouteLocation;
+    user: string;
+    avatarImage: string;
+    margin: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NcUserBubble/NcUserBubbleDiv.vue.d.ts

@@ -1,2 +1,17 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/NcUserBubble/index.d.ts

@@ -1 +1,5 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
 export { default } from './NcUserBubble.vue';

package/dist/components/NcUserBubble/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcUserBubble-Csot0WLv.mjs";
+import { N } from "../../chunks/NcUserBubble-BW0qu6mW.mjs";
 export {
   N as default
 };

package/dist/components/NcUserStatusIcon/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcUserStatusIcon-CtOZd90o.mjs";
+import { N } from "../../chunks/NcUserStatusIcon-DqQYA-EE.mjs";
 export {
   N as default
 };

package/dist/components/index.d.ts

@@ -26,7 +26,7 @@ export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js';
 export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js';
 export { default as NcAppNavigationSearch } from './NcAppNavigationSearch/index.js';
 export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js';
-export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js';
+export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.ts';
 export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js';
 export { default as NcAppSettingsSection } from './NcAppSettingsSection/index.js';
 export { default as NcAppSidebar } from './NcAppSidebar/index.js';
@@ -40,31 +40,31 @@ export { default as NcButton } from './NcButton/index';
 export { default as NcCheckboxRadioSwitch } from './NcCheckboxRadioSwitch/index.js';
 export { default as NcChip } from './NcChip/index';
 export { default as NcCollectionList } from './NcCollectionList/index.js';
-export { default as NcColorPicker } from './NcColorPicker/index.js';
-export { default as NcContent } from './NcContent/index.js';
+export { default as NcColorPicker } from './NcColorPicker/index.ts';
+export { default as NcContent } from './NcContent/index.ts';
 export { default as NcCounterBubble } from './NcCounterBubble/index.ts';
 export { default as NcDashboardWidget } from './NcDashboardWidget/index.js';
 export { default as NcDashboardWidgetItem } from './NcDashboardWidgetItem/index.js';
 export { default as NcDateTime } from './NcDateTime/index.js';
 export { default as NcDateTimePicker } from './NcDateTimePicker/index.js';
-export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.js';
-export { default as NcDialog } from './NcDialog/index.js';
-export { default as NcDialogButton } from './NcDialogButton/index.js';
+export { default as NcDateTimePickerNative } from './NcDateTimePickerNative/index.ts';
+export { default as NcDialog } from './NcDialog/index.ts';
+export { default as NcDialogButton } from './NcDialogButton/index.ts';
 export { default as NcEllipsisedOption } from './NcEllipsisedOption/index.js';
 export { default as NcEmojiPicker } from './NcEmojiPicker/index.js';
 export { default as NcEmptyContent } from './NcEmptyContent/index.ts';
 export { default as NcGuestContent } from './NcGuestContent/index.ts';
 export { default as NcHeaderButton } from './NcHeaderButton/index.ts';
-export { default as NcHeaderMenu } from './NcHeaderMenu/index.js';
-export { default as NcHighlight } from './NcHighlight/index.js';
+export { default as NcHeaderMenu } from './NcHeaderMenu/index.ts';
+export { default as NcHighlight } from './NcHighlight/index.ts';
 export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.ts';
-export { default as NcInputField } from './NcInputField/index.js';
+export { default as NcInputField } from './NcInputField/index.ts';
 export { default as NcListItem } from './NcListItem/index.js';
 export { default as NcListItemIcon } from './NcListItemIcon/index.js';
-export { default as NcLoadingIcon } from './NcLoadingIcon/index.js';
+export { default as NcLoadingIcon } from './NcLoadingIcon/index.ts';
 export { default as NcModal } from './NcModal/index.js';
-export { default as NcNoteCard } from './NcNoteCard/index.js';
-export { default as NcPasswordField } from './NcPasswordField/index.js';
+export { default as NcNoteCard } from './NcNoteCard/index.ts';
+export { default as NcPasswordField } from './NcPasswordField/index.ts';
 export { default as NcPopover } from './NcPopover/index.js';
 export { default as NcProgressBar } from './NcProgressBar/index.js';
 export { default as NcRelatedResourcesPanel } from './NcRelatedResourcesPanel/index.js';
@@ -75,11 +75,12 @@ export { default as NcSelect } from './NcSelect/index.js';
 export { default as NcSelectTags } from './NcSelectTags/index.js';
 export { default as NcSelectUsers } from './NcSelectUsers/index.ts';
 export { default as NcSettingsInputText } from './NcSettingsInputText/index.js';
-export { default as NcSettingsSection } from './NcSettingsSection/index.js';
+export { default as NcSettingsSection } from './NcSettingsSection/index.ts';
 export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.js';
-export { default as NcTextArea } from './NcTextArea/index.js';
-export { default as NcTextField } from './NcTextField/index.js';
+export { default as NcTextArea } from './NcTextArea/index.ts';
+export { default as NcTextField } from './NcTextField/index.ts';
+export { default as NcThemeProvider } from './NcThemeProvider/index.ts';
 export { default as NcTimezonePicker } from './NcTimezonePicker/index.ts';
-export { default as NcUserBubble } from './NcUserBubble/index.js';
+export { default as NcUserBubble } from './NcUserBubble/index.ts';
 export { default as NcUserStatusIcon } from './NcUserStatusIcon/index.ts';
 export { default as NcVNodes } from './NcVNodes/index.ts';

package/dist/composables/index.d.ts

@@ -2,7 +2,7 @@
  * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-export * from './useFormatDateTime.ts';
+export { useFormatRelativeTime, useFormatTime, } from './useFormatDateTime/index.ts';
 export * from './useHotKey/index.ts';
 export * from './useIsDarkTheme/index.ts';
 export * from './useIsFullscreen/index.ts';

package/dist/composables/useFormatDateTime/index.d.ts

@@ -0,0 +1,40 @@
+import { FormatDateOptions } from '@nextcloud/l10n';
+import { MaybeRefOrGetter, Ref } from 'vue';
+interface FormatRelativeTimeOptions extends Partial<Omit<FormatDateOptions, 'ignoreSeconds'>> {
+    ignoreSeconds?: boolean;
+    /**
+     * If set to false the relative time will not be updated anymore.
+     * @default true - Meaning the relative time will be updated if needed
+     */
+    update?: boolean;
+}
+interface FormatTimeOptions {
+    /**
+     * Locale to use for formatting.
+     * @default current locale
+     */
+    locale?: string;
+    /**
+     * The format used for displaying.
+     *
+     * @default { timeStyle: 'medium', dateStyle: 'short' }
+     */
+    format?: Intl.DateTimeFormatOptions;
+}
+/**
+ * Format a timestamp or date object as relative time.
+ *
+ * This is a composable wrapper around `formatRelativeTime` from `@nextcloud/l10n`.
+ *
+ * @param timestamp - The timestamp to format
+ * @param opts - Formatting options
+ */
+export declare function useFormatRelativeTime(timestamp?: MaybeRefOrGetter<Date | number>, opts?: MaybeRefOrGetter<FormatRelativeTimeOptions>): Readonly<Ref<string>>;
+/**
+ * Format a given timestamp or date object as a human readable string.
+ *
+ * @param timestamp - Timestamp or date object to format
+ * @param opts - Formatting options
+ */
+export declare function useFormatTime(timestamp: MaybeRefOrGetter<number | Date>, opts: MaybeRefOrGetter<FormatTimeOptions>): Readonly<Ref<string>>;
+export {};

package/dist/composables/useFormatDateTime/index.mjs

@@ -0,0 +1,49 @@
+import { formatRelativeTime, getCanonicalLocale } from "@nextcloud/l10n";
+import { computed, toValue, ref, watchEffect, onUnmounted, readonly } from "vue";
+import { r as register, b as t2, a as t } from "../../chunks/_l10n-tXci8WM1.mjs";
+register(t2);
+const FEW_SECONDS_AGO = {
+  long: t("a few seconds ago"),
+  short: t("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: t("sec. ago")
+  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+};
+function useFormatRelativeTime(timestamp = Date.now(), opts = {}) {
+  let timeoutId;
+  const date = computed(() => new Date(toValue(timestamp)));
+  const options = computed(() => {
+    const { language, relativeTime: relativeTime2, ignoreSeconds } = toValue(opts);
+    return {
+      ...language && { language },
+      ...relativeTime2 && { relativeTime: relativeTime2 },
+      ignoreSeconds: ignoreSeconds ? FEW_SECONDS_AGO[relativeTime2 || "long"] : false
+    };
+  });
+  const relativeTime = ref("");
+  watchEffect(() => updateRelativeTime());
+  function updateRelativeTime() {
+    relativeTime.value = formatRelativeTime(date.value, options.value);
+    if (toValue(opts).update !== false) {
+      const diff = Math.abs(Date.now() - new Date(toValue(timestamp)).getTime());
+      const interval = diff > 12e4 || options.value.ignoreSeconds ? Math.min(diff / 60, 18e5) : 1e3;
+      timeoutId = window.setTimeout(updateRelativeTime, interval);
+    }
+  }
+  onUnmounted(() => timeoutId && window.clearTimeout(timeoutId));
+  return readonly(relativeTime);
+}
+function useFormatTime(timestamp, opts) {
+  const options = computed(() => ({
+    locale: getCanonicalLocale(),
+    format: { dateStyle: "short", timeStyle: "medium" },
+    ...toValue(opts)
+  }));
+  const formatter = computed(() => new Intl.DateTimeFormat(options.value.locale, options.value.format));
+  return computed(() => formatter.value.format(toValue(timestamp)));
+}
+export {
+  useFormatRelativeTime,
+  useFormatTime
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composables/useFormatDateTime/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/composables/useFormatDateTime/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { FormatDateOptions } from '@nextcloud/l10n'\nimport type { MaybeRefOrGetter, Ref } from 'vue'\n\nimport { formatRelativeTime, getCanonicalLocale } from '@nextcloud/l10n'\nimport { computed, onUnmounted, readonly, ref, toValue, watchEffect } from 'vue'\nimport { t } from '../../l10n.js'\n\ninterface FormatRelativeTimeOptions extends Partial<Omit<FormatDateOptions, 'ignoreSeconds'>> {\n\tignoreSeconds?: boolean\n\n\t/**\n\t * If set to false the relative time will not be updated anymore.\n\t * @default true - Meaning the relative time will be updated if needed\n\t */\n\tupdate?: boolean\n}\n\ninterface FormatTimeOptions {\n\t/**\n\t * Locale to use for formatting.\n\t * @default current locale\n\t */\n\tlocale?: string\n\n\t/**\n\t * The format used for displaying.\n\t *\n\t * @default { timeStyle: 'medium', dateStyle: 'short' }\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n}\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\n/**\n * Format a timestamp or date object as relative time.\n *\n * This is a composable wrapper around `formatRelativeTime` from `@nextcloud/l10n`.\n *\n * @param timestamp - The timestamp to format\n * @param opts - Formatting options\n */\nexport function useFormatRelativeTime(\n\ttimestamp: MaybeRefOrGetter<Date | number> = Date.now(),\n\topts: MaybeRefOrGetter<FormatRelativeTimeOptions> = {},\n): Readonly<Ref<string>> {\n\tlet timeoutId: number\n\n\t/**\n\t * ECMA Date object of the timestamp\n\t */\n\tconst date = computed(() => new Date(toValue(timestamp)))\n\n\t/**\n\t * Reactive options for `formatRelativeTime` method\n\t */\n\tconst options = computed<FormatDateOptions>(() => {\n\t\tconst { language, relativeTime, ignoreSeconds } = toValue(opts)\n\t\treturn {\n\t\t\t...language && { language },\n\t\t\t...relativeTime && { relativeTime },\n\t\t\tignoreSeconds: ignoreSeconds\n\t\t\t\t? FEW_SECONDS_AGO[relativeTime || 'long']\n\t\t\t\t: false,\n\t\t}\n\t})\n\n\t/**\n\t * The formatted relative time\n\t */\n\tconst relativeTime = ref('')\n\twatchEffect(() => updateRelativeTime())\n\n\t/**\n\t * Update the relative time string.\n\t * This is the callback for the interval.\n\t */\n\tfunction updateRelativeTime() {\n\t\trelativeTime.value = formatRelativeTime(date.value, options.value)\n\n\t\tif (toValue(opts).update !== false) {\n\t\t\tconst diff = Math.abs(Date.now() - new Date(toValue(timestamp)).getTime())\n\t\t\tconst interval = diff > 120000 || options.value.ignoreSeconds\n\t\t\t\t? Math.min(diff / 60, 1800000)\n\t\t\t\t: 1000\n\t\t\ttimeoutId = window.setTimeout(updateRelativeTime, interval)\n\t\t}\n\t}\n\n\t// when the component is unmounted we also clear the timeout\n\tonUnmounted(() => timeoutId && window.clearTimeout(timeoutId))\n\n\treturn readonly(relativeTime)\n}\n\n/**\n * Format a given timestamp or date object as a human readable string.\n *\n * @param timestamp - Timestamp or date object to format\n * @param opts - Formatting options\n */\nexport function useFormatTime(\n\ttimestamp: MaybeRefOrGetter<number | Date>,\n\topts: MaybeRefOrGetter<FormatTimeOptions>,\n): Readonly<Ref<string>> {\n\tconst options = computed<Required<FormatTimeOptions>>(() => ({\n\t\tlocale: getCanonicalLocale(),\n\t\tformat: { dateStyle: 'short', timeStyle: 'medium' },\n\t\t...toValue(opts),\n\t}))\n\n\tconst formatter = computed(() => new Intl.DateTimeFormat(options.value.locale, options.value.format))\n\n\treturn computed(() => formatter.value.format(toValue(timestamp)))\n}\n"],"names":["relativeTime"],"mappings":";;;;AAqCA,MAAM,kBAAkB;AAAA,EACvB,MAAM,EAAE,mBAAmB;AAAA,EAC3B,OAAO,EAAE,aAAa;AAAA;AAAA,EACtB,QAAQ,EAAE,UAAU;AAAA;AACrB;AAUO,SAAS,sBACf,YAA6C,KAAK,OAClD,OAAoD,CAAA,GAC5B;AACpB,MAAA;AAKE,QAAA,OAAO,SAAS,MAAM,IAAI,KAAK,QAAQ,SAAS,CAAC,CAAC;AAKlD,QAAA,UAAU,SAA4B,MAAM;AACjD,UAAM,EAAE,UAAU,cAAAA,eAAc,cAAc,IAAI,QAAQ,IAAI;AACvD,WAAA;AAAA,MACN,GAAG,YAAY,EAAE,SAAS;AAAA,MAC1B,GAAGA,iBAAgB,EAAE,cAAAA,cAAa;AAAA,MAClC,eAAe,gBACZ,gBAAgBA,iBAAgB,MAAM,IACtC;AAAA,IACJ;AAAA,EAAA,CACA;AAKK,QAAA,eAAe,IAAI,EAAE;AACf,cAAA,MAAM,oBAAoB;AAMtC,WAAS,qBAAqB;AAC7B,iBAAa,QAAQ,mBAAmB,KAAK,OAAO,QAAQ,KAAK;AAEjE,QAAI,QAAQ,IAAI,EAAE,WAAW,OAAO;AACnC,YAAM,OAAO,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,QAAQ,SAAS,CAAC,EAAE,SAAS;AACnE,YAAA,WAAW,OAAO,QAAU,QAAQ,MAAM,gBAC7C,KAAK,IAAI,OAAO,IAAI,IAAO,IAC3B;AACS,kBAAA,OAAO,WAAW,oBAAoB,QAAQ;AAAA,IAAA;AAAA,EAC3D;AAID,cAAY,MAAM,aAAa,OAAO,aAAa,SAAS,CAAC;AAE7D,SAAO,SAAS,YAAY;AAC7B;AAQgB,SAAA,cACf,WACA,MACwB;AAClB,QAAA,UAAU,SAAsC,OAAO;AAAA,IAC5D,QAAQ,mBAAmB;AAAA,IAC3B,QAAQ,EAAE,WAAW,SAAS,WAAW,SAAS;AAAA,IAClD,GAAG,QAAQ,IAAI;AAAA,EAAA,EACd;AAEF,QAAM,YAAY,SAAS,MAAM,IAAI,KAAK,eAAe,QAAQ,MAAM,QAAQ,QAAQ,MAAM,MAAM,CAAC;AAE7F,SAAA,SAAS,MAAM,UAAU,MAAM,OAAO,QAAQ,SAAS,CAAC,CAAC;AACjE;"}

package/dist/composables/useHotKey/index.mjs

@@ -1,6 +1,8 @@
 import { onKeyStroke } from "@vueuse/core";
 const disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.();
 const isMac = /mac|ipad|iphone|darwin/i.test(navigator.userAgent);
+const derivedKeysRegex = /^[a-zA-Z0-9]$/;
+const nonAsciiPrintableRegex = /^[^\x20-\x7F]$/;
 function shouldIgnoreEvent(event) {
   if (!(event.target instanceof HTMLElement) || event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement || event.target.isContentEditable) {
     return true;
@@ -35,8 +37,18 @@ function useHotKey(keysOrFilter, callback = () => {
     };
   }
   const validateKeyEvent = (event, key) => {
+    if (event.key === key) {
+      return true;
+    }
     if (options.caseSensitive) {
-      return event.key === key;
+      const isKeyInLowerCase = key === key.toLowerCase();
+      const isEventKeyInLowerCase = event.key === event.key.toLowerCase();
+      if (isKeyInLowerCase !== isEventKeyInLowerCase) {
+        return false;
+      }
+    }
+    if (derivedKeysRegex.test(key) && nonAsciiPrintableRegex.test(event.key)) {
+      return event.code.replace(/^(?:Key|Digit|Numpad)/, "") === key.toUpperCase();
     }
     return event.key.toLowerCase() === key.toLowerCase();
   };

package/dist/composables/useHotKey/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/composables/useHotKey/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { onKeyStroke } from '@vueuse/core'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\nconst isMac = /mac|ipad|iphone|darwin/i.test(navigator.userAgent)\n\nexport interface UseHotKeyOptions {\n\t/** Make key filter case sensitive */\n\tcaseSensitive?: boolean\n\n\t/** Prevent default behavior of key stroke */\n\tprevent?: boolean\n\n\t/** Stop the event bubbling */\n\tstop?: boolean\n\n\t/** Also listen for keyup event */\n\tpush?: boolean\n\n\t/**\n\t * If set then the callback is only called when the shift key is (not) pressed.\n\t * When left `undefined` a pressed shift key is ignored (callback is run with and without shift pressed).\n\t */\n\tshift?: boolean\n\n\t/**\n\t * Only run the callback if the control key is (not-)pressed.\n\t * Undefined will be handled the same as `false` and will only run the callback if the 'ctrl' key is NOT pressed.\n\t */\n\tctrl?: boolean\n\n\t/**\n\t * If set the callback is only executed if the alt key is (not-)pressed\n\t * Undefined will be handled the same as `false` and will only run the callback if the 'alt' key is NOT pressed.\n\t */\n\talt?: boolean\n}\n\n/**\n * Check if event target (active element) is editable (allows input from keyboard) or NcModal is open\n * If true, a hot key should not trigger the callback\n *\n * @todo Discuss if we should abort on another interactive elements (button, a, e.t.c)\n *\n * @param event keyboard event\n * @return Whether it should prevent callback\n */\nfunction shouldIgnoreEvent(event: KeyboardEvent): boolean {\n\tif (!(event.target instanceof HTMLElement)\n\t\t|| event.target instanceof HTMLInputElement\n\t\t|| event.target instanceof HTMLTextAreaElement\n\t\t|| event.target instanceof HTMLSelectElement\n\t\t|| event.target.isContentEditable) {\n\t\treturn true\n\t}\n\t/** Abort if any modal/dialog opened */\n\treturn document.getElementsByClassName('modal-mask').length !== 0\n}\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void\n\n/**\n * Implementation of the event handler.\n *\n * @param callback The callback to run\n * @param options hot key options\n */\nfunction eventHandler(callback: KeyboardEventHandler, options: UseHotKeyOptions): KeyboardEventHandler {\n\treturn (event: KeyboardEvent) => {\n\t\tconst ctrlKeyPressed = isMac ? event.metaKey : event.ctrlKey\n\t\tif (ctrlKeyPressed !== Boolean(options.ctrl)) {\n\t\t\t/**\n\t\t\t * Ctrl is required and not pressed, or the opposite\n\t\t\t * As on macOS 'cmd' key is used instead of 'ctrl' key for most key combinations,\n\t\t\t * 'event.metaKey' should be checked\n\t\t\t */\n\t\t\treturn\n\t\t} else if (event.altKey !== Boolean(options.alt)) {\n\t\t\t// Alt is required and not pressed, or the opposite\n\t\t\treturn\n\t\t} else if (options.shift !== undefined && event.shiftKey !== Boolean(options.shift)) {\n\t\t\t/**\n\t\t\t * Shift is required and not pressed, or the opposite\n\t\t\t * As shift key is used to type capital letters and alternate characters,\n\t\t\t * option should be explicitly defined\n\t\t\t */\n\t\t\treturn\n\t\t} else if (shouldIgnoreEvent(event)) {\n\t\t\t// Keyboard shortcuts are disabled, because active element assumes input\n\t\t\treturn\n\t\t}\n\n\t\tif (options.prevent) {\n\t\t\tevent.preventDefault()\n\t\t}\n\t\tif (options.stop) {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t\tcallback(event)\n\t}\n}\n\n/**\n * Composable to use keyboard shortcuts in the application.\n * It respects the users accessibility configuration (opt-out shortcuts).\n *\n * @param keysOrFilter - keyboard key(s) to listen to, or filter function or pass `true` for listening to all keys\n * @param callback - callback function\n * @param options - composable options\n * @see docs/composables/usekeystroke.md\n */\nexport function useHotKey(\n\tkeysOrFilter: true | string | string[] | ((e: KeyboardEvent) => boolean),\n\tcallback = () => {},\n\toptions: UseHotKeyOptions = {},\n) {\n\tif (disableKeyboardShortcuts) {\n\t\t// Keyboard shortcuts are disabled\n\t\treturn () => {}\n\t}\n\n\t/**\n\t * Validates event key to expected key\n\t * FIXME should support any languages / key codes\n\t *\n\t * @param event keyboard event\n\t * @param key expected key\n\t * @return whether it satisfies expected value or not\n\t */\n\tconst validateKeyEvent = (event: KeyboardEvent, key: string): boolean => {\n\t\tif (options.caseSensitive) {\n\t\t\treturn event.key === key\n\t\t}\n\t\treturn event.key.toLowerCase() === key.toLowerCase()\n\t}\n\n\t/**\n\t * Filter function for the listener\n\t * see https://github.com/vueuse/vueuse/blob/v11.3.0/packages/core/onKeyStroke/index.ts#L21-L32\n\t *\n\t * @param event keyboard event\n\t * @return Whether it satisfies expected value or not\n\t */\n\tconst keyFilter = (event: KeyboardEvent): boolean => {\n\t\tif (typeof keysOrFilter === 'function') {\n\t\t\treturn keysOrFilter(event)\n\t\t} else if (typeof keysOrFilter === 'string') {\n\t\t\treturn validateKeyEvent(event, keysOrFilter)\n\t\t} else if (Array.isArray(keysOrFilter)) {\n\t\t\treturn keysOrFilter.some(key => validateKeyEvent(event, key))\n\t\t} else {\n\t\t\treturn true\n\t\t}\n\t}\n\n\tconst stopKeyDown = onKeyStroke(keyFilter, eventHandler(callback, options), {\n\t\teventName: 'keydown',\n\t\tdedupe: true,\n\t\tpassive: !options.prevent,\n\t})\n\n\tconst stopKeyUp = options.push\n\t\t? onKeyStroke(keyFilter, eventHandler(callback, options), {\n\t\t\teventName: 'keyup',\n\t\t\tpassive: !options.prevent,\n\t\t})\n\t\t: () => {}\n\n\treturn () => {\n\t\tstopKeyDown()\n\t\tstopKeyUp()\n\t}\n}\n"],"names":[],"mappings":";AAMA,MAAM,2BAA2B,OAAO,KAAK,eAAe,2BAA2B;AACvF,MAAM,QAAQ,0BAA0B,KAAK,UAAU,SAAS;AA2ChE,SAAS,kBAAkB,OAA+B;AACzD,MAAI,EAAE,MAAM,kBAAkB,gBAC1B,MAAM,kBAAkB,oBACxB,MAAM,kBAAkB,uBACxB,MAAM,kBAAkB,qBACxB,MAAM,OAAO,mBAAmB;AAC5B,WAAA;AAAA,EAAA;AAGR,SAAO,SAAS,uBAAuB,YAAY,EAAE,WAAW;AACjE;AAUA,SAAS,aAAa,UAAgC,SAAiD;AACtG,SAAO,CAAC,UAAyB;AAChC,UAAM,iBAAiB,QAAQ,MAAM,UAAU,MAAM;AACrD,QAAI,mBAAmB,QAAQ,QAAQ,IAAI,GAAG;AAM7C;AAAA,IAAA,WACU,MAAM,WAAW,QAAQ,QAAQ,GAAG,GAAG;AAEjD;AAAA,IAAA,WACU,QAAQ,UAAU,UAAa,MAAM,aAAa,QAAQ,QAAQ,KAAK,GAAG;AAMpF;AAAA,IAAA,WACU,kBAAkB,KAAK,GAAG;AAEpC;AAAA,IAAA;AAGD,QAAI,QAAQ,SAAS;AACpB,YAAM,eAAe;AAAA,IAAA;AAEtB,QAAI,QAAQ,MAAM;AACjB,YAAM,gBAAgB;AAAA,IAAA;AAEvB,aAAS,KAAK;AAAA,EACf;AACD;AAWgB,SAAA,UACf,cACA,WAAW,MAAM;AAAC,GAClB,UAA4B,CAAA,GAC3B;AACD,MAAI,0BAA0B;AAE7B,WAAO,MAAM;AAAA,IAAC;AAAA,EAAA;AAWT,QAAA,mBAAmB,CAAC,OAAsB,QAAyB;AACxE,QAAI,QAAQ,eAAe;AAC1B,aAAO,MAAM,QAAQ;AAAA,IAAA;AAEtB,WAAO,MAAM,IAAI,YAAY,MAAM,IAAI,YAAY;AAAA,EACpD;AASM,QAAA,YAAY,CAAC,UAAkC;AAChD,QAAA,OAAO,iBAAiB,YAAY;AACvC,aAAO,aAAa,KAAK;AAAA,IAAA,WACf,OAAO,iBAAiB,UAAU;AACrC,aAAA,iBAAiB,OAAO,YAAY;AAAA,IACjC,WAAA,MAAM,QAAQ,YAAY,GAAG;AACvC,aAAO,aAAa,KAAK,CAAA,QAAO,iBAAiB,OAAO,GAAG,CAAC;AAAA,IAAA,OACtD;AACC,aAAA;AAAA,IAAA;AAAA,EAET;AAEA,QAAM,cAAc,YAAY,WAAW,aAAa,UAAU,OAAO,GAAG;AAAA,IAC3E,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS,CAAC,QAAQ;AAAA,EAAA,CAClB;AAEK,QAAA,YAAY,QAAQ,OACvB,YAAY,WAAW,aAAa,UAAU,OAAO,GAAG;AAAA,IACzD,WAAW;AAAA,IACX,SAAS,CAAC,QAAQ;AAAA,EAClB,CAAA,IACC,MAAM;AAAA,EAAC;AAEV,SAAO,MAAM;AACA,gBAAA;AACF,cAAA;AAAA,EACX;AACD;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/composables/useHotKey/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport { onKeyStroke } from '@vueuse/core'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\nconst isMac = /mac|ipad|iphone|darwin/i.test(navigator.userAgent)\nconst derivedKeysRegex = /^[a-zA-Z0-9]$/\nconst nonAsciiPrintableRegex = /^[^\\x20-\\x7F]$/\n\nexport interface UseHotKeyOptions {\n\t/** Make key filter case sensitive */\n\tcaseSensitive?: boolean\n\n\t/** Prevent default behavior of key stroke */\n\tprevent?: boolean\n\n\t/** Stop the event bubbling */\n\tstop?: boolean\n\n\t/** Also listen for keyup event */\n\tpush?: boolean\n\n\t/**\n\t * If set then the callback is only called when the shift key is (not) pressed.\n\t * When left `undefined` a pressed shift key is ignored (callback is run with and without shift pressed).\n\t */\n\tshift?: boolean\n\n\t/**\n\t * Only run the callback if the control key is (not-)pressed.\n\t * Undefined will be handled the same as `false` and will only run the callback if the 'ctrl' key is NOT pressed.\n\t */\n\tctrl?: boolean\n\n\t/**\n\t * If set the callback is only executed if the alt key is (not-)pressed\n\t * Undefined will be handled the same as `false` and will only run the callback if the 'alt' key is NOT pressed.\n\t */\n\talt?: boolean\n}\n\n/**\n * Check if event target (active element) is editable (allows input from keyboard) or NcModal is open\n * If true, a hot key should not trigger the callback\n *\n * @todo Discuss if we should abort on another interactive elements (button, a, e.t.c)\n *\n * @param event keyboard event\n * @return Whether it should prevent callback\n */\nfunction shouldIgnoreEvent(event: KeyboardEvent): boolean {\n\tif (!(event.target instanceof HTMLElement)\n\t\t|| event.target instanceof HTMLInputElement\n\t\t|| event.target instanceof HTMLTextAreaElement\n\t\t|| event.target instanceof HTMLSelectElement\n\t\t|| event.target.isContentEditable) {\n\t\treturn true\n\t}\n\t/** Abort if any modal/dialog opened */\n\treturn document.getElementsByClassName('modal-mask').length !== 0\n}\n\ntype KeyboardEventHandler = (event: KeyboardEvent) => void\n\n/**\n * Implementation of the event handler.\n *\n * @param callback The callback to run\n * @param options hot key options\n */\nfunction eventHandler(callback: KeyboardEventHandler, options: UseHotKeyOptions): KeyboardEventHandler {\n\treturn (event: KeyboardEvent) => {\n\t\tconst ctrlKeyPressed = isMac ? event.metaKey : event.ctrlKey\n\t\tif (ctrlKeyPressed !== Boolean(options.ctrl)) {\n\t\t\t/**\n\t\t\t * Ctrl is required and not pressed, or the opposite\n\t\t\t * As on macOS 'cmd' key is used instead of 'ctrl' key for most key combinations,\n\t\t\t * 'event.metaKey' should be checked\n\t\t\t */\n\t\t\treturn\n\t\t} else if (event.altKey !== Boolean(options.alt)) {\n\t\t\t// Alt is required and not pressed, or the opposite\n\t\t\treturn\n\t\t} else if (options.shift !== undefined && event.shiftKey !== Boolean(options.shift)) {\n\t\t\t/**\n\t\t\t * Shift is required and not pressed, or the opposite\n\t\t\t * As shift key is used to type capital letters and alternate characters,\n\t\t\t * option should be explicitly defined\n\t\t\t */\n\t\t\treturn\n\t\t} else if (shouldIgnoreEvent(event)) {\n\t\t\t// Keyboard shortcuts are disabled, because active element assumes input\n\t\t\treturn\n\t\t}\n\n\t\tif (options.prevent) {\n\t\t\tevent.preventDefault()\n\t\t}\n\t\tif (options.stop) {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t\tcallback(event)\n\t}\n}\n\n/**\n * Composable to use keyboard shortcuts in the application.\n * It respects the users accessibility configuration (opt-out shortcuts).\n *\n * @param keysOrFilter - keyboard key(s) to listen to, or filter function or pass `true` for listening to all keys\n * @param callback - callback function\n * @param options - composable options\n * @see docs/composables/usekeystroke.md\n */\nexport function useHotKey(\n\tkeysOrFilter: true | string | string[] | ((e: KeyboardEvent) => boolean),\n\tcallback = () => {},\n\toptions: UseHotKeyOptions = {},\n) {\n\tif (disableKeyboardShortcuts) {\n\t\t// Keyboard shortcuts are disabled\n\t\treturn () => {}\n\t}\n\n\t/**\n\t * Validates event key to expected key\n\t *\n\t * @param event keyboard event\n\t * @param key expected key\n\t * @return whether it satisfies expected value or not\n\t */\n\tconst validateKeyEvent = (event: KeyboardEvent, key: string): boolean => {\n\t\t// If key exactly matches event.key, valid with any caseSensitive option. Do not perform further checks\n\t\tif (event.key === key) {\n\t\t\treturn true\n\t\t}\n\n\t\t// If key and event.key are in different cases, invalid with caseSensitive = true. Do not perform further checks\n\t\tif (options.caseSensitive) {\n\t\t\tconst isKeyInLowerCase = key === key.toLowerCase()\n\t\t\tconst isEventKeyInLowerCase = event.key === event.key.toLowerCase()\n\t\t\tif (isKeyInLowerCase !== isEventKeyInLowerCase) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t}\n\n\t\t// If received event.key is not a printable ASCII character code (character code 32-127),\n\t\t// try to derive it from event.code and match with expected key\n\t\tif (derivedKeysRegex.test(key) && nonAsciiPrintableRegex.test(event.key)) {\n\t\t\treturn event.code.replace(/^(?:Key|Digit|Numpad)/, '') === key.toUpperCase()\n\t\t}\n\n\t\treturn event.key.toLowerCase() === key.toLowerCase()\n\t}\n\n\t/**\n\t * Filter function for the listener\n\t * see https://github.com/vueuse/vueuse/blob/v11.3.0/packages/core/onKeyStroke/index.ts#L21-L32\n\t *\n\t * @param event keyboard event\n\t * @return Whether it satisfies expected value or not\n\t */\n\tconst keyFilter = (event: KeyboardEvent): boolean => {\n\t\tif (typeof keysOrFilter === 'function') {\n\t\t\treturn keysOrFilter(event)\n\t\t} else if (typeof keysOrFilter === 'string') {\n\t\t\treturn validateKeyEvent(event, keysOrFilter)\n\t\t} else if (Array.isArray(keysOrFilter)) {\n\t\t\treturn keysOrFilter.some(key => validateKeyEvent(event, key))\n\t\t} else {\n\t\t\treturn true\n\t\t}\n\t}\n\n\tconst stopKeyDown = onKeyStroke(keyFilter, eventHandler(callback, options), {\n\t\teventName: 'keydown',\n\t\tdedupe: true,\n\t\tpassive: !options.prevent,\n\t})\n\n\tconst stopKeyUp = options.push\n\t\t? onKeyStroke(keyFilter, eventHandler(callback, options), {\n\t\t\teventName: 'keyup',\n\t\t\tpassive: !options.prevent,\n\t\t})\n\t\t: () => {}\n\n\treturn () => {\n\t\tstopKeyDown()\n\t\tstopKeyUp()\n\t}\n}\n"],"names":[],"mappings":";AAMA,MAAM,2BAA2B,OAAO,KAAK,eAAe,2BAA2B;AACvF,MAAM,QAAQ,0BAA0B,KAAK,UAAU,SAAS;AAChE,MAAM,mBAAmB;AACzB,MAAM,yBAAyB;AA2C/B,SAAS,kBAAkB,OAA+B;AACzD,MAAI,EAAE,MAAM,kBAAkB,gBAC1B,MAAM,kBAAkB,oBACxB,MAAM,kBAAkB,uBACxB,MAAM,kBAAkB,qBACxB,MAAM,OAAO,mBAAmB;AAC5B,WAAA;AAAA,EAAA;AAGR,SAAO,SAAS,uBAAuB,YAAY,EAAE,WAAW;AACjE;AAUA,SAAS,aAAa,UAAgC,SAAiD;AACtG,SAAO,CAAC,UAAyB;AAChC,UAAM,iBAAiB,QAAQ,MAAM,UAAU,MAAM;AACrD,QAAI,mBAAmB,QAAQ,QAAQ,IAAI,GAAG;AAM7C;AAAA,IAAA,WACU,MAAM,WAAW,QAAQ,QAAQ,GAAG,GAAG;AAEjD;AAAA,IAAA,WACU,QAAQ,UAAU,UAAa,MAAM,aAAa,QAAQ,QAAQ,KAAK,GAAG;AAMpF;AAAA,IAAA,WACU,kBAAkB,KAAK,GAAG;AAEpC;AAAA,IAAA;AAGD,QAAI,QAAQ,SAAS;AACpB,YAAM,eAAe;AAAA,IAAA;AAEtB,QAAI,QAAQ,MAAM;AACjB,YAAM,gBAAgB;AAAA,IAAA;AAEvB,aAAS,KAAK;AAAA,EACf;AACD;AAWgB,SAAA,UACf,cACA,WAAW,MAAM;AAAC,GAClB,UAA4B,CAAA,GAC3B;AACD,MAAI,0BAA0B;AAE7B,WAAO,MAAM;AAAA,IAAC;AAAA,EAAA;AAUT,QAAA,mBAAmB,CAAC,OAAsB,QAAyB;AAEpE,QAAA,MAAM,QAAQ,KAAK;AACf,aAAA;AAAA,IAAA;AAIR,QAAI,QAAQ,eAAe;AACpB,YAAA,mBAAmB,QAAQ,IAAI,YAAY;AACjD,YAAM,wBAAwB,MAAM,QAAQ,MAAM,IAAI,YAAY;AAClE,UAAI,qBAAqB,uBAAuB;AACxC,eAAA;AAAA,MAAA;AAAA,IACR;AAKG,QAAA,iBAAiB,KAAK,GAAG,KAAK,uBAAuB,KAAK,MAAM,GAAG,GAAG;AACzE,aAAO,MAAM,KAAK,QAAQ,yBAAyB,EAAE,MAAM,IAAI,YAAY;AAAA,IAAA;AAG5E,WAAO,MAAM,IAAI,YAAY,MAAM,IAAI,YAAY;AAAA,EACpD;AASM,QAAA,YAAY,CAAC,UAAkC;AAChD,QAAA,OAAO,iBAAiB,YAAY;AACvC,aAAO,aAAa,KAAK;AAAA,IAAA,WACf,OAAO,iBAAiB,UAAU;AACrC,aAAA,iBAAiB,OAAO,YAAY;AAAA,IACjC,WAAA,MAAM,QAAQ,YAAY,GAAG;AACvC,aAAO,aAAa,KAAK,CAAA,QAAO,iBAAiB,OAAO,GAAG,CAAC;AAAA,IAAA,OACtD;AACC,aAAA;AAAA,IAAA;AAAA,EAET;AAEA,QAAM,cAAc,YAAY,WAAW,aAAa,UAAU,OAAO,GAAG;AAAA,IAC3E,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS,CAAC,QAAQ;AAAA,EAAA,CAClB;AAEK,QAAA,YAAY,QAAQ,OACvB,YAAY,WAAW,aAAa,UAAU,OAAO,GAAG;AAAA,IACzD,WAAW;AAAA,IACX,SAAS,CAAC,QAAQ;AAAA,EAClB,CAAA,IACC,MAAM;AAAA,EAAC;AAEV,SAAO,MAAM;AACA,gBAAA;AACF,cAAA;AAAA,EACX;AACD;"}

package/dist/composables/useIsDarkTheme/constants.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef, InjectionKey } from 'vue';
+/**
+ * Enforced dark / light theme state
+ *
+ * @private
+ */
+export declare const INJECTION_KEY_THEME: InjectionKey<ComputedRef<'light' | 'dark' | ''>>;

package/dist/composables/useIsDarkTheme/index.d.ts

@@ -1,4 +1,4 @@
-import { DeepReadonly, Ref } from 'vue';
+import { DeepReadonly, MaybeRefOrGetter, Ref } from 'vue';
 /**
  * Check whether the dark theme is enabled on a specific element.
  * If you need to check an entire page, use `useIsDarkTheme` instead for better performance.
@@ -6,10 +6,13 @@ import { DeepReadonly, Ref } from 'vue';
  * @param el - The element to check for the dark theme enabled on (default is `document.body`)
  * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
  */
-export declare function useIsDarkThemeElement(el?: HTMLElement): DeepReadonly<Ref<boolean>>;
+export declare function useIsDarkThemeElement(el?: MaybeRefOrGetter<HTMLElement>): DeepReadonly<Ref<boolean>>;
 /**
  * Shared composable to check whether the dark theme is enabled on the page.
+ *
  * Reacts on body data-theme-* attributes change and system theme change.
- * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled
+ * As well as any enforced theme by the `NcThemeProvider`.
+ *
+ * @return Computed boolean whether the dark theme is enabled
  */
-export declare const useIsDarkTheme: () => Readonly<Ref<boolean, boolean>>;
+export declare function useIsDarkTheme(): DeepReadonly<Ref<boolean>>;

package/dist/composables/useIsDarkTheme/index.mjs

@@ -1,17 +1,34 @@
-import { ref, watch, readonly } from "vue";
 import { createSharedComposable, usePreferredDark, useMutationObserver } from "@vueuse/core";
+import { computed, toValue, ref, watch, readonly, inject } from "vue";
 import { checkIfDarkTheme } from "../../functions/isDarkTheme/index.mjs";
-function useIsDarkThemeElement(el = document.body) {
-  const isDarkTheme = ref(checkIfDarkTheme(el));
+import { I as INJECTION_KEY_THEME } from "../../chunks/constants-Bls5liKo.mjs";
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+function useIsDarkThemeElement(el) {
+  const element = computed(() => toValue(el) ?? document.body);
+  const isDarkTheme = ref(checkIfDarkTheme(element.value));
   const isDarkSystemTheme = usePreferredDark();
   function updateIsDarkTheme() {
-    isDarkTheme.value = checkIfDarkTheme(el);
+    isDarkTheme.value = checkIfDarkTheme(element.value);
   }
-  useMutationObserver(el, updateIsDarkTheme, { attributes: true });
+  useMutationObserver(element, updateIsDarkTheme, { attributes: true });
+  watch(element, updateIsDarkTheme);
   watch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true });
   return readonly(isDarkTheme);
 }
-const useIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement());
+const useInternalIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement());
+function useIsDarkTheme() {
+  const isDarkTheme = useInternalIsDarkTheme();
+  const enforcedTheme = inject(INJECTION_KEY_THEME);
+  return computed(() => {
+    if (enforcedTheme?.value) {
+      return enforcedTheme.value === "dark";
+    }
+    return isDarkTheme.value;
+  });
+}
 export {
   useIsDarkTheme,
   useIsDarkThemeElement

package/dist/composables/useIsDarkTheme/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/composables/useIsDarkTheme/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { DeepReadonly, Ref } from 'vue'\nimport { ref, readonly, watch } from 'vue'\nimport { createSharedComposable, usePreferredDark, useMutationObserver } from '@vueuse/core'\nimport { checkIfDarkTheme } from '../../functions/isDarkTheme/index.ts'\n\n/**\n * Check whether the dark theme is enabled on a specific element.\n * If you need to check an entire page, use `useIsDarkTheme` instead for better performance.\n * Reacts on element attributes change and system theme change.\n * @param el - The element to check for the dark theme enabled on (default is `document.body`)\n * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled\n */\nexport function useIsDarkThemeElement(el: HTMLElement = document.body): DeepReadonly<Ref<boolean>> {\n\tconst isDarkTheme = ref(checkIfDarkTheme(el))\n\tconst isDarkSystemTheme = usePreferredDark()\n\n\t/** Update the isDarkTheme */\n\tfunction updateIsDarkTheme() {\n\t\tisDarkTheme.value = checkIfDarkTheme(el)\n\t}\n\n\t// Watch for element change to handle data-theme* attributes change\n\tuseMutationObserver(el, updateIsDarkTheme, { attributes: true })\n\t// Watch for system theme change for the default theme\n\twatch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true })\n\n\treturn readonly(isDarkTheme)\n}\n\n/**\n * Shared composable to check whether the dark theme is enabled on the page.\n * Reacts on body data-theme-* attributes change and system theme change.\n * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled\n */\nexport const useIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement())\n"],"names":[],"mappings":";;;AAiBgB,SAAA,sBAAsB,KAAkB,SAAS,MAAkC;AAClG,QAAM,cAAc,IAAI,iBAAiB,EAAE,CAAC;AAC5C,QAAM,oBAAoB,iBAAiB;AAG3C,WAAS,oBAAoB;AAChB,gBAAA,QAAQ,iBAAiB,EAAE;AAAA,EAAA;AAIxC,sBAAoB,IAAI,mBAAmB,EAAE,YAAY,MAAM;AAE/D,QAAM,mBAAmB,mBAAmB,EAAE,WAAW,MAAM;AAE/D,SAAO,SAAS,WAAW;AAC5B;AAOO,MAAM,iBAAiB,uBAAuB,MAAM,sBAAuB,CAAA;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/composables/useIsDarkTheme/index.ts"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { DeepReadonly, MaybeRefOrGetter, Ref } from 'vue'\n\nimport { createSharedComposable, usePreferredDark, useMutationObserver } from '@vueuse/core'\nimport { computed, inject, ref, readonly, toValue, watch } from 'vue'\nimport { checkIfDarkTheme } from '../../functions/isDarkTheme/index.ts'\nimport { INJECTION_KEY_THEME } from './constants.ts'\n\n/**\n * Check whether the dark theme is enabled on a specific element.\n * If you need to check an entire page, use `useIsDarkTheme` instead for better performance.\n * Reacts on element attributes change and system theme change.\n * @param el - The element to check for the dark theme enabled on (default is `document.body`)\n * @return {DeepReadonly<Ref<boolean>>} - computed boolean whether the dark theme is enabled\n */\nexport function useIsDarkThemeElement(el?: MaybeRefOrGetter<HTMLElement>): DeepReadonly<Ref<boolean>> {\n\tconst element = computed(() => toValue(el) ?? document.body)\n\n\tconst isDarkTheme = ref(checkIfDarkTheme(element.value))\n\tconst isDarkSystemTheme = usePreferredDark()\n\n\t/** Update the isDarkTheme */\n\tfunction updateIsDarkTheme() {\n\t\tisDarkTheme.value = checkIfDarkTheme(element.value)\n\t}\n\n\t// Watch for element change to handle data-theme* attributes change\n\tuseMutationObserver(element, updateIsDarkTheme, { attributes: true })\n\t// Watch for ref changes\n\twatch(element, updateIsDarkTheme)\n\t// Watch for system theme change for the default theme\n\twatch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true })\n\n\treturn readonly(isDarkTheme)\n}\n\n/**\n * The real shared composable of the dark theme state.\n * We need to wrap this to allow to react to injected theme changes.\n */\nconst useInternalIsDarkTheme = createSharedComposable(() => useIsDarkThemeElement())\n\n/**\n * Shared composable to check whether the dark theme is enabled on the page.\n *\n * Reacts on body data-theme-* attributes change and system theme change.\n * As well as any enforced theme by the `NcThemeProvider`.\n *\n * @return Computed boolean whether the dark theme is enabled\n */\nexport function useIsDarkTheme(): DeepReadonly<Ref<boolean>> {\n\tconst isDarkTheme = useInternalIsDarkTheme()\n\tconst enforcedTheme = inject(INJECTION_KEY_THEME)\n\n\treturn computed(() => {\n\t\tif (enforcedTheme?.value) {\n\t\t\treturn enforcedTheme.value === 'dark'\n\t\t}\n\t\treturn isDarkTheme.value\n\t})\n}\n"],"names":[],"mappings":";;;;AAAA;AAAA;AAAA;AAAA;AAmBO,SAAS,sBAAsB,IAAgE;AACrG,QAAM,UAAU,SAAS,MAAM,QAAQ,EAAE,KAAK,SAAS,IAAI;AAE3D,QAAM,cAAc,IAAI,iBAAiB,QAAQ,KAAK,CAAC;AACvD,QAAM,oBAAoB,iBAAiB;AAG3C,WAAS,oBAAoB;AAChB,gBAAA,QAAQ,iBAAiB,QAAQ,KAAK;AAAA,EAAA;AAInD,sBAAoB,SAAS,mBAAmB,EAAE,YAAY,MAAM;AAEpE,QAAM,SAAS,iBAAiB;AAEhC,QAAM,mBAAmB,mBAAmB,EAAE,WAAW,MAAM;AAE/D,SAAO,SAAS,WAAW;AAC5B;AAMA,MAAM,yBAAyB,uBAAuB,MAAM,uBAAuB;AAU5E,SAAS,iBAA6C;AAC5D,QAAM,cAAc,uBAAuB;AACrC,QAAA,gBAAgB,OAAO,mBAAmB;AAEhD,SAAO,SAAS,MAAM;AACrB,QAAI,eAAe,OAAO;AACzB,aAAO,cAAc,UAAU;AAAA,IAAA;AAEhC,WAAO,YAAY;AAAA,EAAA,CACnB;AACF;"}

package/dist/functions/reference/customPickerElements.d.ts

@@ -1,21 +1,56 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
 /**
  * Representation of the render callback result
  * It contains a dom element and an object (Vue instance or other fancy things)
  */
-export class NcCustomPickerRenderResult {
+export declare class NcCustomPickerRenderResult {
+    element: HTMLElement;
+    object: object;
     /**
-     * @param {HTMLElement} element The HTML element
-     * @param {object} object The object
+     * @param element - The HTML element
+     * @param object - The object
      */
     constructor(element: HTMLElement, object: object);
-    element: HTMLElement;
-    object: any;
 }
-export function registerCustomPickerElement(id: any, callback: any, onDestroy?: (el: any) => void, size?: string): void;
-export function renderCustomPickerElement(el: any, { providerId, accessible }: {
-    providerId: any;
-    accessible: any;
-}): any;
-export function destroyCustomPickerElement(providerId: any, el: any, renderResult: any): void;
-export function isCustomPickerElementRegistered(id: any): boolean;
-export function getCustomPickerElementSize(id: any): any;
+interface CustomPickerElementProps {
+    providerId: number;
+    accessible: boolean;
+}
+type CustomPickerElementRegistrationCallback = (el: HTMLElement, options: CustomPickerElementProps) => void;
+type CustomPickerElementDestroyCallback = (el: HTMLElement, result: NcCustomPickerRenderResult) => void;
+export interface CustomPickerElement {
+    id: string;
+    size: 'small' | 'normal' | 'large' | 'full';
+    callback: CustomPickerElementRegistrationCallback;
+    onDestroy: CustomPickerElementDestroyCallback;
+}
+/**
+ * @param id - Id of the element to check
+ */
+export declare function isCustomPickerElementRegistered(id: string): boolean;
+/**
+ * @param id - Id of the element to get
+ */
+export declare function getCustomPickerElementSize(id: string): 'small' | 'normal' | 'large' | 'full' | null;
+/**
+ * @param id - Id of element to register
+ * @param callback - Render callback
+ * @param onDestroy - Cleanup callback
+ * @param size - Size of the element
+ */
+export declare function registerCustomPickerElement(id: string, callback: CustomPickerElementRegistrationCallback, onDestroy?: CustomPickerElementDestroyCallback, size?: CustomPickerElement['size']): void;
+/**
+ * @param el - element to render to
+ * @param options - Element options
+ */
+export declare function renderCustomPickerElement(el: HTMLElement, options: CustomPickerElementProps): void;
+/**
+ * @param providerId - Provider id of element to destroy
+ * @param el - The element to destroy element from
+ * @param renderResult - The render result
+ */
+export declare function destroyCustomPickerElement(providerId: string, el: HTMLElement, renderResult: NcCustomPickerRenderResult): void;
+export {};

package/dist/functions/reference/index.d.ts

@@ -1,5 +1,8 @@
-import { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView } from './widgets.ts';
-import { NcCustomPickerRenderResult, registerCustomPickerElement, renderCustomPickerElement, isCustomPickerElementRegistered } from './customPickerElements.js';
-import { getLinkWithPicker } from './referencePickerModal.js';
-import { anyLinkProviderId, getProvider, getProviders, sortProviders, searchProvider } from './providerHelper.js';
-export { registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView, NcCustomPickerRenderResult, registerCustomPickerElement, renderCustomPickerElement, isCustomPickerElementRegistered, getLinkWithPicker, anyLinkProviderId, getProvider, getProviders, sortProviders, searchProvider };
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export { type ReferenceWidgetProps, type ReferenceWidgetRenderProperties, registerWidget, renderWidget, isWidgetRegistered, hasInteractiveView, } from './widgets.ts';
+export { getLinkWithPicker } from './referencePickerModal.ts';
+export { type ReferenceProvider, getProvider, getProviders, sortProviders, searchProvider, anyLinkProviderId, } from './providerHelper.ts';
+export { type CustomPickerElement, registerCustomPickerElement, renderCustomPickerElement, isCustomPickerElementRegistered, NcCustomPickerRenderResult, } from './customPickerElements.ts';

package/dist/functions/reference/index.mjs

@@ -1,19 +1,19 @@
-import { N, h, d, i, b, r, c, a } from "../../chunks/index-BF8joS9W.mjs";
-import { a as a2, g, b as b2, c as c2, d as d2, s } from "../../chunks/referencePickerModal-Dw1szWUR.mjs";
+import { N, h, f, i, b, r, c, a } from "../../chunks/customPickerElements-CH9vlHLd.mjs";
+import { d, g, a as a2, b as b2, c as c2, s } from "../../chunks/referencePickerModal-DREcDQKg.mjs";
 export {
   N as NcCustomPickerRenderResult,
-  a2 as anyLinkProviderId,
+  d as anyLinkProviderId,
   g as getLinkWithPicker,
-  b2 as getProvider,
-  c2 as getProviders,
+  a2 as getProvider,
+  b2 as getProviders,
   h as hasInteractiveView,
-  d as isCustomPickerElementRegistered,
+  f as isCustomPickerElementRegistered,
   i as isWidgetRegistered,
   b as registerCustomPickerElement,
   r as registerWidget,
   c as renderCustomPickerElement,
   a as renderWidget,
-  d2 as searchProvider,
+  c2 as searchProvider,
   s as sortProviders
 };
 //# sourceMappingURL=index.mjs.map