@nextcloud/vue 8.27.0 → 8.29.0

package/dist/Composables/useFormatDateTime.cjs

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const l10n = require("@nextcloud/l10n");
+const core = require("@vueuse/core");
+const Vue = require("vue");
+const _l10n = require("../chunks/_l10n-DpwcsAC3.cjs");
+_l10n.register(_l10n.t2);
+const FEW_SECONDS_AGO = {
+  long: _l10n.t("a few seconds ago"),
+  short: _l10n.t("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: _l10n.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 = Vue.computed(() => new Date(core.toValue(timestamp)));
+  const options = Vue.computed(() => {
+    const { language, relativeTime: relativeTime2, ignoreSeconds } = core.toValue(opts);
+    return {
+      ...language && { language },
+      ...relativeTime2 && { relativeTime: relativeTime2 },
+      ignoreSeconds: ignoreSeconds ? FEW_SECONDS_AGO[relativeTime2 || "long"] : false
+    };
+  });
+  const relativeTime = Vue.ref("");
+  Vue.watchEffect(() => updateRelativeTime());
+  function updateRelativeTime() {
+    relativeTime.value = l10n.formatRelativeTime(date.value, options.value);
+    if (core.toValue(opts).update !== false) {
+      const diff = Math.abs(Date.now() - new Date(core.toValue(timestamp)).getTime());
+      const interval = diff > 12e4 || options.value.ignoreSeconds ? Math.min(diff / 60, 18e5) : 1e3;
+      timeoutId = window.setTimeout(updateRelativeTime, interval);
+    }
+  }
+  Vue.onUnmounted(() => timeoutId && window.clearTimeout(timeoutId));
+  return Vue.readonly(relativeTime);
+}
+function useFormatTime(timestamp, opts) {
+  const options = Vue.computed(() => ({
+    locale: l10n.getCanonicalLocale(),
+    format: { dateStyle: "short", timeStyle: "medium" },
+    ...core.toValue(opts)
+  }));
+  const formatter = Vue.computed(() => new Intl.DateTimeFormat(options.value.locale, options.value.format));
+  return Vue.computed(() => formatter.value.format(core.toValue(timestamp)));
+}
+function useFormatDateTime(timestamp = Date.now(), opts = {}) {
+  const formattedFullTime = useFormatTime(timestamp, opts);
+  const relativeTime = useFormatRelativeTime(timestamp, Vue.computed(() => {
+    const options = core.toValue(opts);
+    return {
+      ...options,
+      relativeTime: typeof options.relativeTime === "string" ? options.relativeTime : "long"
+    };
+  }));
+  const formattedTime = Vue.computed(
+    () => core.toValue(opts).relativeTime !== false ? relativeTime.value : formattedFullTime.value
+  );
+  return {
+    formattedTime,
+    formattedFullTime
+  };
+}
+exports.useFormatDateTime = useFormatDateTime;
+exports.useFormatRelativeTime = useFormatRelativeTime;
+exports.useFormatTime = useFormatTime;
+//# sourceMappingURL=useFormatDateTime.cjs.map

package/dist/Composables/useFormatDateTime.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormatDateTime.cjs","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 } from '@vueuse/core'\nimport type { Ref } from 'vue'\n\nimport { formatRelativeTime, getCanonicalLocale } from '@nextcloud/l10n'\nimport { toValue } from '@vueuse/core'\nimport { computed, onUnmounted, readonly, ref, 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\n/**\n * @deprecated\n */\ninterface LegacyFormatDateTimeOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\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\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {import('vue').MaybeRefOrGetter<Date | number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n *\n * @deprecated use `useFormatRelativeTime` or `useFormatTime` instead.\n */\nexport function useFormatDateTime(\n\ttimestamp: MaybeRefOrGetter<Date|number> = Date.now(),\n\topts: MaybeRefOrGetter<LegacyFormatDateTimeOptions> = {},\n) {\n\tconst formattedFullTime = useFormatTime(timestamp, opts)\n\tconst relativeTime = useFormatRelativeTime(timestamp, computed(() => {\n\t\tconst options = toValue(opts)\n\t\treturn {\n\t\t\t...options,\n\t\t\trelativeTime: typeof options.relativeTime === 'string'\n\t\t\t\t? options.relativeTime\n\t\t\t\t: 'long',\n\t\t}\n\t}))\n\n\tconst formattedTime = computed(() => toValue(opts).relativeTime !== false\n\t\t? relativeTime.value\n\t\t: formattedFullTime.value,\n\t)\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t}\n}\n"],"names":["t","computed","toValue","relativeTime","ref","watchEffect","formatRelativeTime","onUnmounted","readonly","getCanonicalLocale"],"mappings":";;;;;;;AAyDA,MAAM,kBAAkB;AAAA,EACvB,MAAMA,QAAE,mBAAmB;AAAA,EAC3B,OAAOA,QAAE,aAAa;AAAA;AAAA,EACtB,QAAQA,QAAE,UAAU;AAAA;AACrB;AAUO,SAAS,sBACf,YAA6C,KAAK,OAClD,OAAoD,CAAA,GAC5B;AACpB,MAAA;AAKE,QAAA,OAAOC,IAAAA,SAAS,MAAM,IAAI,KAAKC,KAAQ,QAAA,SAAS,CAAC,CAAC;AAKlD,QAAA,UAAUD,IAAAA,SAA4B,MAAM;AACjD,UAAM,EAAE,UAAU,cAAAE,eAAc,cAAc,IAAID,aAAQ,IAAI;AACvD,WAAA;AAAA,MACN,GAAG,YAAY,EAAE,SAAS;AAAA,MAC1B,GAAGC,iBAAgB,EAAE,cAAAA,cAAa;AAAA,MAClC,eAAe,gBACZ,gBAAgBA,iBAAgB,MAAM,IACtC;AAAA,IACJ;AAAA,EAAA,CACA;AAKK,QAAA,eAAeC,QAAI,EAAE;AACfC,MAAA,YAAA,MAAM,oBAAoB;AAMtC,WAAS,qBAAqB;AAC7B,iBAAa,QAAQC,KAAA,mBAAmB,KAAK,OAAO,QAAQ,KAAK;AAEjE,QAAIJ,aAAQ,IAAI,EAAE,WAAW,OAAO;AACnC,YAAM,OAAO,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI,KAAKA,KAAAA,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;AAIDK,MAAAA,YAAY,MAAM,aAAa,OAAO,aAAa,SAAS,CAAC;AAE7D,SAAOC,IAAAA,SAAS,YAAY;AAC7B;AAQgB,SAAA,cACf,WACA,MACwB;AAClB,QAAA,UAAUP,IAAAA,SAAsC,OAAO;AAAA,IAC5D,QAAQQ,KAAAA,mBAAmB;AAAA,IAC3B,QAAQ,EAAE,WAAW,SAAS,WAAW,SAAS;AAAA,IAClD,GAAGP,aAAQ,IAAI;AAAA,EAAA,EACd;AAEF,QAAM,YAAYD,IAAAA,SAAS,MAAM,IAAI,KAAK,eAAe,QAAQ,MAAM,QAAQ,QAAQ,MAAM,MAAM,CAAC;AAE7F,SAAAA,IAAAA,SAAS,MAAM,UAAU,MAAM,OAAOC,KAAQ,QAAA,SAAS,CAAC,CAAC;AACjE;AAaO,SAAS,kBACf,YAA2C,KAAK,OAChD,OAAsD,CAAA,GACrD;AACK,QAAA,oBAAoB,cAAc,WAAW,IAAI;AACvD,QAAM,eAAe,sBAAsB,WAAWD,IAAA,SAAS,MAAM;AAC9D,UAAA,UAAUC,aAAQ,IAAI;AACrB,WAAA;AAAA,MACN,GAAG;AAAA,MACH,cAAc,OAAO,QAAQ,iBAAiB,WAC3C,QAAQ,eACR;AAAA,IACJ;AAAA,EAAA,CACA,CAAC;AAEF,QAAM,gBAAgBD,IAAA;AAAA,IAAS,MAAMC,KAAAA,QAAQ,IAAI,EAAE,iBAAiB,QACjE,aAAa,QACb,kBAAkB;AAAA,EACrB;AAEO,SAAA;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;;;;"}

package/dist/Composables/useFormatDateTime.mjs

@@ -0,0 +1,68 @@
+import { formatRelativeTime, getCanonicalLocale } from "@nextcloud/l10n";
+import { toValue } from "@vueuse/core";
+import { computed, ref, watchEffect, onUnmounted, readonly } from "vue";
+import { r as register, e as t2, a as t } from "../chunks/_l10n-BU8-kQzN.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)));
+}
+function useFormatDateTime(timestamp = Date.now(), opts = {}) {
+  const formattedFullTime = useFormatTime(timestamp, opts);
+  const relativeTime = useFormatRelativeTime(timestamp, computed(() => {
+    const options = toValue(opts);
+    return {
+      ...options,
+      relativeTime: typeof options.relativeTime === "string" ? options.relativeTime : "long"
+    };
+  }));
+  const formattedTime = computed(
+    () => toValue(opts).relativeTime !== false ? relativeTime.value : formattedFullTime.value
+  );
+  return {
+    formattedTime,
+    formattedFullTime
+  };
+}
+export {
+  useFormatDateTime,
+  useFormatRelativeTime,
+  useFormatTime
+};
+//# sourceMappingURL=useFormatDateTime.mjs.map

package/dist/Composables/useFormatDateTime.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormatDateTime.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 } from '@vueuse/core'\nimport type { Ref } from 'vue'\n\nimport { formatRelativeTime, getCanonicalLocale } from '@nextcloud/l10n'\nimport { toValue } from '@vueuse/core'\nimport { computed, onUnmounted, readonly, ref, 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\n/**\n * @deprecated\n */\ninterface LegacyFormatDateTimeOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\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\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {import('vue').MaybeRefOrGetter<Date | number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n *\n * @deprecated use `useFormatRelativeTime` or `useFormatTime` instead.\n */\nexport function useFormatDateTime(\n\ttimestamp: MaybeRefOrGetter<Date|number> = Date.now(),\n\topts: MaybeRefOrGetter<LegacyFormatDateTimeOptions> = {},\n) {\n\tconst formattedFullTime = useFormatTime(timestamp, opts)\n\tconst relativeTime = useFormatRelativeTime(timestamp, computed(() => {\n\t\tconst options = toValue(opts)\n\t\treturn {\n\t\t\t...options,\n\t\t\trelativeTime: typeof options.relativeTime === 'string'\n\t\t\t\t? options.relativeTime\n\t\t\t\t: 'long',\n\t\t}\n\t}))\n\n\tconst formattedTime = computed(() => toValue(opts).relativeTime !== false\n\t\t? relativeTime.value\n\t\t: formattedFullTime.value,\n\t)\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t}\n}\n"],"names":["relativeTime"],"mappings":";;;;;AAyDA,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;AAaO,SAAS,kBACf,YAA2C,KAAK,OAChD,OAAsD,CAAA,GACrD;AACK,QAAA,oBAAoB,cAAc,WAAW,IAAI;AACvD,QAAM,eAAe,sBAAsB,WAAW,SAAS,MAAM;AAC9D,UAAA,UAAU,QAAQ,IAAI;AACrB,WAAA;AAAA,MACN,GAAG;AAAA,MACH,cAAc,OAAO,QAAQ,iBAAiB,WAC3C,QAAQ,eACR;AAAA,IACJ;AAAA,EAAA,CACA,CAAC;AAEF,QAAM,gBAAgB;AAAA,IAAS,MAAM,QAAQ,IAAI,EAAE,iBAAiB,QACjE,aAAa,QACb,kBAAkB;AAAA,EACrB;AAEO,SAAA;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;"}

package/dist/Composables/useHotKey.cjs

@@ -3,6 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const core = require("@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;
@@ -37,8 +39,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.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotKey.cjs","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":["onKeyStroke"],"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,cAAcA,KAAAA,YAAY,WAAW,aAAa,UAAU,OAAO,GAAG;AAAA,IAC3E,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS,CAAC,QAAQ;AAAA,EAAA,CAClB;AAEK,QAAA,YAAY,QAAQ,OACvBA,KAAAA,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":"useHotKey.cjs","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":["onKeyStroke"],"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,cAAcA,KAAAA,YAAY,WAAW,aAAa,UAAU,OAAO,GAAG;AAAA,IAC3E,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS,CAAC,QAAQ;AAAA,EAAA,CAClB;AAEK,QAAA,YAAY,QAAQ,OACvBA,KAAAA,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/useHotKey.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.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHotKey.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":"useHotKey.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.cjs

@@ -1,19 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Vue = require("vue");
 const core = require("@vueuse/core");
+const Vue = require("vue");
 const Functions_isDarkTheme = require("../Functions/isDarkTheme.cjs");
-function useIsDarkThemeElement(el = document.body) {
-  const isDarkTheme = Vue.ref(Functions_isDarkTheme.checkIfDarkTheme(el));
+const constants = require("../chunks/constants-C_lA-vcp.cjs");
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+function useIsDarkThemeElement(el) {
+  const element = Vue.computed(() => core.toValue(el) ?? document.body);
+  const isDarkTheme = Vue.ref(Functions_isDarkTheme.checkIfDarkTheme(element.value));
   const isDarkSystemTheme = core.usePreferredDark();
   function updateIsDarkTheme() {
-    isDarkTheme.value = Functions_isDarkTheme.checkIfDarkTheme(el);
+    isDarkTheme.value = Functions_isDarkTheme.checkIfDarkTheme(element.value);
   }
-  core.useMutationObserver(el, updateIsDarkTheme, { attributes: true });
+  core.useMutationObserver(element, updateIsDarkTheme, { attributes: true });
+  Vue.watch(element, updateIsDarkTheme);
   Vue.watch(isDarkSystemTheme, updateIsDarkTheme, { immediate: true });
   return Vue.readonly(isDarkTheme);
 }
-const useIsDarkTheme = core.createSharedComposable(() => useIsDarkThemeElement());
+const useInternalIsDarkTheme = core.createSharedComposable(() => useIsDarkThemeElement());
+function useIsDarkTheme() {
+  const isDarkTheme = useInternalIsDarkTheme();
+  const enforcedTheme = Vue.inject(constants.INJECTION_KEY_THEME, void 0);
+  return Vue.computed(() => {
+    if (enforcedTheme?.value) {
+      return enforcedTheme.value === "dark";
+    }
+    return isDarkTheme.value;
+  });
+}
 exports.useIsDarkTheme = useIsDarkTheme;
 exports.useIsDarkThemeElement = useIsDarkThemeElement;
 //# sourceMappingURL=useIsDarkTheme.cjs.map

package/dist/Composables/useIsDarkTheme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsDarkTheme.cjs","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":["ref","checkIfDarkTheme","usePreferredDark","useMutationObserver","watch","readonly","createSharedComposable"],"mappings":";;;;;AAiBgB,SAAA,sBAAsB,KAAkB,SAAS,MAAkC;AAClG,QAAM,cAAcA,IAAAA,IAAIC,sBAAiB,iBAAA,EAAE,CAAC;AAC5C,QAAM,oBAAoBC,KAAAA,iBAAiB;AAG3C,WAAS,oBAAoB;AAChB,gBAAA,QAAQD,uCAAiB,EAAE;AAAA,EAAA;AAIxCE,OAAAA,oBAAoB,IAAI,mBAAmB,EAAE,YAAY,MAAM;AAE/DC,MAAAA,MAAM,mBAAmB,mBAAmB,EAAE,WAAW,MAAM;AAE/D,SAAOC,IAAAA,SAAS,WAAW;AAC5B;AAOO,MAAM,iBAAiBC,KAAAA,uBAAuB,MAAM,sBAAuB,CAAA;;;"}
+{"version":3,"file":"useIsDarkTheme.cjs","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 { MaybeRefOrGetter } from '@vueuse/core'\nimport type { DeepReadonly, Ref } from 'vue'\n\nimport { createSharedComposable, toValue, usePreferredDark, useMutationObserver } from '@vueuse/core'\nimport { computed, inject, ref, readonly, 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, undefined)\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":["computed","toValue","ref","checkIfDarkTheme","usePreferredDark","useMutationObserver","watch","readonly","createSharedComposable","inject","INJECTION_KEY_THEME"],"mappings":";;;;;;AAAA;AAAA;AAAA;AAAA;AAoBO,SAAS,sBAAsB,IAAgE;AACrG,QAAM,UAAUA,IAAAA,SAAS,MAAMC,KAAAA,QAAQ,EAAE,KAAK,SAAS,IAAI;AAE3D,QAAM,cAAcC,IAAA,IAAIC,sBAAiB,iBAAA,QAAQ,KAAK,CAAC;AACvD,QAAM,oBAAoBC,KAAAA,iBAAiB;AAG3C,WAAS,oBAAoB;AAChB,gBAAA,QAAQD,uCAAiB,QAAQ,KAAK;AAAA,EAAA;AAInDE,OAAAA,oBAAoB,SAAS,mBAAmB,EAAE,YAAY,MAAM;AAEpEC,MAAA,MAAM,SAAS,iBAAiB;AAEhCA,MAAAA,MAAM,mBAAmB,mBAAmB,EAAE,WAAW,MAAM;AAE/D,SAAOC,IAAAA,SAAS,WAAW;AAC5B;AAMA,MAAM,yBAAyBC,KAAAA,uBAAuB,MAAM,uBAAuB;AAU5E,SAAS,iBAA6C;AAC5D,QAAM,cAAc,uBAAuB;AACrC,QAAA,gBAAgBC,IAAAA,OAAOC,UAAA,qBAAqB,MAAS;AAE3D,SAAOV,aAAS,MAAM;AACrB,QAAI,eAAe,OAAO;AACzB,aAAO,cAAc,UAAU;AAAA,IAAA;AAEhC,WAAO,YAAY;AAAA,EAAA,CACnB;AACF;;;"}

package/dist/Composables/useIsDarkTheme.mjs

@@ -1,17 +1,34 @@
-import { ref, watch, readonly } from "vue";
-import { createSharedComposable, usePreferredDark, useMutationObserver } from "@vueuse/core";
+import { createSharedComposable, toValue, usePreferredDark, useMutationObserver } from "@vueuse/core";
+import { computed, ref, watch, readonly, inject } from "vue";
 import { checkIfDarkTheme } from "../Functions/isDarkTheme.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, void 0);
+  return computed(() => {
+    if (enforcedTheme?.value) {
+      return enforcedTheme.value === "dark";
+    }
+    return isDarkTheme.value;
+  });
+}
 export {
   useIsDarkTheme,
   useIsDarkThemeElement

package/dist/Composables/useIsDarkTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsDarkTheme.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":"useIsDarkTheme.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 { MaybeRefOrGetter } from '@vueuse/core'\nimport type { DeepReadonly, Ref } from 'vue'\n\nimport { createSharedComposable, toValue, usePreferredDark, useMutationObserver } from '@vueuse/core'\nimport { computed, inject, ref, readonly, 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, undefined)\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;AAoBO,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,qBAAqB,MAAS;AAE3D,SAAO,SAAS,MAAM;AACrB,QAAI,eAAe,OAAO;AACzB,aAAO,cAAc,UAAU;AAAA,IAAA;AAEhC,WAAO,YAAY;AAAA,EAAA,CACnB;AACF;"}

package/dist/Functions/dialog.cjs

@@ -3,21 +3,33 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Vue = require("vue");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
-function spawnDialog(dialog, props, onClose = () => {
+function spawnDialog(dialog, props = {}, optionsOrOnClose = {}, onClose = () => {
 }) {
-  const el = document.createElement("div");
-  const container = typeof props?.container === "string" ? document.querySelector(props.container) || document.body : document.body;
-  container.appendChild(el);
+  if (typeof optionsOrOnClose === "function") {
+    onClose = optionsOrOnClose;
+    optionsOrOnClose = {};
+  }
+  let { container } = optionsOrOnClose;
+  if ("container" in props && typeof props.container === "string") {
+    container ??= props.container;
+  }
+  const resolvedContainer = typeof container === "string" && document.querySelector(container) || document.body;
+  const element = resolvedContainer.appendChild(document.createElement("div"));
   const vm = new Vue__default.default({
-    el,
+    el: element,
     name: "VueDialogHelper",
     render: (h) => h(dialog, {
-      props,
+      props: {
+        // If dialog has no `container` prop passing a falsy value does nothing
+        // Otherwise it is expected that `null` disables teleport and mounts dialog in place like NcDialog/NcModal
+        container: null,
+        ...props
+      },
       on: {
         close: (...rest) => {
           onClose(...rest.map((v) => Vue.toRaw(v)));
           vm.$destroy();
-          el.remove();
+          element.remove();
         }
       }
     })

package/dist/Functions/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.cjs","sources":["../../src/functions/dialog/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport type { AsyncComponent, Component } from 'vue'\n\nimport Vue, { toRaw } from 'vue'\n\ninterface DialogProps {\n\t[index: string]: unknown\n\tcontainer?: string\n}\n\n/**\n * Helper to spawn a Vue dialog without having to mount it from a component\n *\n * @param dialog The dialog component to spawn\n * @param props Properties to pass to the dialog\n * @param props.container Optionally pass a query selector for the dialog container element\n * @param onClose Callback when the dialog is closed\n */\nexport function spawnDialog(\n\tdialog: Component | AsyncComponent,\n\tprops?: DialogProps,\n\tonClose: (...rest: unknown[]) => void = () => {},\n): Vue {\n\tconst el = document.createElement('div')\n\n\tconst container: HTMLElement = typeof props?.container === 'string'\n\t\t? (document.querySelector(props.container) || document.body)\n\t\t: document.body\n\tcontainer.appendChild(el)\n\n\tconst vm = new Vue({\n\t\tel,\n\t\tname: 'VueDialogHelper',\n\t\trender: (h) =>\n\t\t\th(dialog, {\n\t\t\t\tprops,\n\t\t\t\ton: {\n\t\t\t\t\tclose: (...rest: unknown[]) => {\n\t\t\t\t\t\tonClose(...rest.map(v => toRaw(v)))\n\t\t\t\t\t\tvm.$destroy()\n\t\t\t\t\t\tel.remove()\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t})\n\treturn vm\n}\n"],"names":["Vue","toRaw"],"mappings":";;;;;AAqBO,SAAS,YACf,QACA,OACA,UAAwC,MAAM;AAAC,GACzC;AACA,QAAA,KAAK,SAAS,cAAc,KAAK;AAEvC,QAAM,YAAyB,OAAO,OAAO,cAAc,WACvD,SAAS,cAAc,MAAM,SAAS,KAAK,SAAS,OACrD,SAAS;AACZ,YAAU,YAAY,EAAE;AAElB,QAAA,KAAK,IAAIA,qBAAI;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,CAAC,MACR,EAAE,QAAQ;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACH,OAAO,IAAI,SAAoB;AAC9B,kBAAQ,GAAG,KAAK,IAAI,OAAKC,IAAM,MAAA,CAAC,CAAC,CAAC;AAClC,aAAG,SAAS;AACZ,aAAG,OAAO;AAAA,QAAA;AAAA,MACX;AAAA,IAED,CAAA;AAAA,EAAA,CACF;AACM,SAAA;AACR;;"}
+{"version":3,"file":"dialog.cjs","sources":["../../src/functions/dialog/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport type { AsyncComponent, Component } from 'vue'\n\nimport Vue, { toRaw } from 'vue'\n\ntype SpawnDialogOptions = {\n\t/**\n\t * Container to mount the dialog to\n\t * @default document.body\n\t */\n\tcontainer?: Element | string\n}\n\nexport function spawnDialog(\n\tdialog: Component,\n\tprops?: object,\n\tonClose?: (...rest: unknown[]) => void,\n): void\n\nexport function spawnDialog(\n\tdialog: Component,\n\tprops?: object,\n\toptions?: SpawnDialogOptions,\n\tonClose?: (...rest: unknown[]) => void,\n): void\n\n/**\n * Spawn a single-use Vue dialog instance to get the result when it is closed\n *\n * @param dialog - Dialog component to spawn\n * @param props - Props to pass to the dialog instance\n * @param optionsOrOnClose - Spawning options or a callback when the dialog is closed\n * @param onClose - Callback when the dialog is closed\n */\nexport function spawnDialog(\n\tdialog: Component,\n\tprops: object = {},\n\toptionsOrOnClose: SpawnDialogOptions | ((...rest: unknown[]) => void) = {},\n\tonClose: (...rest: unknown[]) => void = () => {},\n): Vue {\n\tif (typeof optionsOrOnClose === 'function') {\n\t\tonClose = optionsOrOnClose\n\t\toptionsOrOnClose = {}\n\t}\n\n\tlet { container } = optionsOrOnClose\n\n\t// For backwards compatibility try to use container from props\n\tif ('container' in props && typeof props.container === 'string') {\n\t\tcontainer ??= props.container\n\t}\n\n\t// Resolve container to an Element or fallback to document.body\n\tconst resolvedContainer = (typeof container === 'string' && document.querySelector(container)) || document.body\n\n\t// Create root container element for the dialog\n\tconst element = resolvedContainer.appendChild(document.createElement('div'))\n\n\tconst vm = new Vue({\n\t\tel: element,\n\t\tname: 'VueDialogHelper',\n\t\trender: (h) =>\n\t\t\th(dialog, {\n\t\t\t\tprops: {\n\t\t\t\t\t// If dialog has no `container` prop passing a falsy value does nothing\n\t\t\t\t\t// Otherwise it is expected that `null` disables teleport and mounts dialog in place like NcDialog/NcModal\n\t\t\t\t\tcontainer: null,\n\t\t\t\t\t...props,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\tclose: (...rest: unknown[]) => {\n\t\t\t\t\t\tonClose(...rest.map(v => toRaw(v)))\n\t\t\t\t\t\tvm.$destroy()\n\t\t\t\t\t\telement.remove()\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t})\n\treturn vm\n}\n"],"names":["Vue","toRaw"],"mappings":";;;;;AAqCgB,SAAA,YACf,QACA,QAAgB,CAAA,GAChB,mBAAwE,CAAA,GACxE,UAAwC,MAAM;AAAC,GACzC;AACF,MAAA,OAAO,qBAAqB,YAAY;AACjC,cAAA;AACV,uBAAmB,CAAC;AAAA,EAAA;AAGjB,MAAA,EAAE,cAAc;AAGpB,MAAI,eAAe,SAAS,OAAO,MAAM,cAAc,UAAU;AAChE,kBAAc,MAAM;AAAA,EAAA;AAIf,QAAA,oBAAqB,OAAO,cAAc,YAAY,SAAS,cAAc,SAAS,KAAM,SAAS;AAG3G,QAAM,UAAU,kBAAkB,YAAY,SAAS,cAAc,KAAK,CAAC;AAErE,QAAA,KAAK,IAAIA,qBAAI;AAAA,IAClB,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,MACR,EAAE,QAAQ;AAAA,MACT,OAAO;AAAA;AAAA;AAAA,QAGN,WAAW;AAAA,QACX,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,QACH,OAAO,IAAI,SAAoB;AAC9B,kBAAQ,GAAG,KAAK,IAAI,OAAKC,IAAM,MAAA,CAAC,CAAC,CAAC;AAClC,aAAG,SAAS;AACZ,kBAAQ,OAAO;AAAA,QAAA;AAAA,MAChB;AAAA,IAED,CAAA;AAAA,EAAA,CACF;AACM,SAAA;AACR;;"}

package/dist/Functions/dialog.mjs

@@ -1,19 +1,31 @@
 import Vue, { toRaw } from "vue";
-function spawnDialog(dialog, props, onClose = () => {
+function spawnDialog(dialog, props = {}, optionsOrOnClose = {}, onClose = () => {
 }) {
-  const el = document.createElement("div");
-  const container = typeof props?.container === "string" ? document.querySelector(props.container) || document.body : document.body;
-  container.appendChild(el);
+  if (typeof optionsOrOnClose === "function") {
+    onClose = optionsOrOnClose;
+    optionsOrOnClose = {};
+  }
+  let { container } = optionsOrOnClose;
+  if ("container" in props && typeof props.container === "string") {
+    container ??= props.container;
+  }
+  const resolvedContainer = typeof container === "string" && document.querySelector(container) || document.body;
+  const element = resolvedContainer.appendChild(document.createElement("div"));
   const vm = new Vue({
-    el,
+    el: element,
     name: "VueDialogHelper",
     render: (h) => h(dialog, {
-      props,
+      props: {
+        // If dialog has no `container` prop passing a falsy value does nothing
+        // Otherwise it is expected that `null` disables teleport and mounts dialog in place like NcDialog/NcModal
+        container: null,
+        ...props
+      },
       on: {
         close: (...rest) => {
           onClose(...rest.map((v) => toRaw(v)));
           vm.$destroy();
-          el.remove();
+          element.remove();
         }
       }
     })

package/dist/Functions/dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.mjs","sources":["../../src/functions/dialog/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport type { AsyncComponent, Component } from 'vue'\n\nimport Vue, { toRaw } from 'vue'\n\ninterface DialogProps {\n\t[index: string]: unknown\n\tcontainer?: string\n}\n\n/**\n * Helper to spawn a Vue dialog without having to mount it from a component\n *\n * @param dialog The dialog component to spawn\n * @param props Properties to pass to the dialog\n * @param props.container Optionally pass a query selector for the dialog container element\n * @param onClose Callback when the dialog is closed\n */\nexport function spawnDialog(\n\tdialog: Component | AsyncComponent,\n\tprops?: DialogProps,\n\tonClose: (...rest: unknown[]) => void = () => {},\n): Vue {\n\tconst el = document.createElement('div')\n\n\tconst container: HTMLElement = typeof props?.container === 'string'\n\t\t? (document.querySelector(props.container) || document.body)\n\t\t: document.body\n\tcontainer.appendChild(el)\n\n\tconst vm = new Vue({\n\t\tel,\n\t\tname: 'VueDialogHelper',\n\t\trender: (h) =>\n\t\t\th(dialog, {\n\t\t\t\tprops,\n\t\t\t\ton: {\n\t\t\t\t\tclose: (...rest: unknown[]) => {\n\t\t\t\t\t\tonClose(...rest.map(v => toRaw(v)))\n\t\t\t\t\t\tvm.$destroy()\n\t\t\t\t\t\tel.remove()\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t})\n\treturn vm\n}\n"],"names":[],"mappings":";AAqBO,SAAS,YACf,QACA,OACA,UAAwC,MAAM;AAAC,GACzC;AACA,QAAA,KAAK,SAAS,cAAc,KAAK;AAEvC,QAAM,YAAyB,OAAO,OAAO,cAAc,WACvD,SAAS,cAAc,MAAM,SAAS,KAAK,SAAS,OACrD,SAAS;AACZ,YAAU,YAAY,EAAE;AAElB,QAAA,KAAK,IAAI,IAAI;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,CAAC,MACR,EAAE,QAAQ;AAAA,MACT;AAAA,MACA,IAAI;AAAA,QACH,OAAO,IAAI,SAAoB;AAC9B,kBAAQ,GAAG,KAAK,IAAI,OAAK,MAAM,CAAC,CAAC,CAAC;AAClC,aAAG,SAAS;AACZ,aAAG,OAAO;AAAA,QAAA;AAAA,MACX;AAAA,IAED,CAAA;AAAA,EAAA,CACF;AACM,SAAA;AACR;"}
+{"version":3,"file":"dialog.mjs","sources":["../../src/functions/dialog/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nimport type { AsyncComponent, Component } from 'vue'\n\nimport Vue, { toRaw } from 'vue'\n\ntype SpawnDialogOptions = {\n\t/**\n\t * Container to mount the dialog to\n\t * @default document.body\n\t */\n\tcontainer?: Element | string\n}\n\nexport function spawnDialog(\n\tdialog: Component,\n\tprops?: object,\n\tonClose?: (...rest: unknown[]) => void,\n): void\n\nexport function spawnDialog(\n\tdialog: Component,\n\tprops?: object,\n\toptions?: SpawnDialogOptions,\n\tonClose?: (...rest: unknown[]) => void,\n): void\n\n/**\n * Spawn a single-use Vue dialog instance to get the result when it is closed\n *\n * @param dialog - Dialog component to spawn\n * @param props - Props to pass to the dialog instance\n * @param optionsOrOnClose - Spawning options or a callback when the dialog is closed\n * @param onClose - Callback when the dialog is closed\n */\nexport function spawnDialog(\n\tdialog: Component,\n\tprops: object = {},\n\toptionsOrOnClose: SpawnDialogOptions | ((...rest: unknown[]) => void) = {},\n\tonClose: (...rest: unknown[]) => void = () => {},\n): Vue {\n\tif (typeof optionsOrOnClose === 'function') {\n\t\tonClose = optionsOrOnClose\n\t\toptionsOrOnClose = {}\n\t}\n\n\tlet { container } = optionsOrOnClose\n\n\t// For backwards compatibility try to use container from props\n\tif ('container' in props && typeof props.container === 'string') {\n\t\tcontainer ??= props.container\n\t}\n\n\t// Resolve container to an Element or fallback to document.body\n\tconst resolvedContainer = (typeof container === 'string' && document.querySelector(container)) || document.body\n\n\t// Create root container element for the dialog\n\tconst element = resolvedContainer.appendChild(document.createElement('div'))\n\n\tconst vm = new Vue({\n\t\tel: element,\n\t\tname: 'VueDialogHelper',\n\t\trender: (h) =>\n\t\t\th(dialog, {\n\t\t\t\tprops: {\n\t\t\t\t\t// If dialog has no `container` prop passing a falsy value does nothing\n\t\t\t\t\t// Otherwise it is expected that `null` disables teleport and mounts dialog in place like NcDialog/NcModal\n\t\t\t\t\tcontainer: null,\n\t\t\t\t\t...props,\n\t\t\t\t},\n\t\t\t\ton: {\n\t\t\t\t\tclose: (...rest: unknown[]) => {\n\t\t\t\t\t\tonClose(...rest.map(v => toRaw(v)))\n\t\t\t\t\t\tvm.$destroy()\n\t\t\t\t\t\telement.remove()\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t})\n\treturn vm\n}\n"],"names":[],"mappings":";AAqCgB,SAAA,YACf,QACA,QAAgB,CAAA,GAChB,mBAAwE,CAAA,GACxE,UAAwC,MAAM;AAAC,GACzC;AACF,MAAA,OAAO,qBAAqB,YAAY;AACjC,cAAA;AACV,uBAAmB,CAAC;AAAA,EAAA;AAGjB,MAAA,EAAE,cAAc;AAGpB,MAAI,eAAe,SAAS,OAAO,MAAM,cAAc,UAAU;AAChE,kBAAc,MAAM;AAAA,EAAA;AAIf,QAAA,oBAAqB,OAAO,cAAc,YAAY,SAAS,cAAc,SAAS,KAAM,SAAS;AAG3G,QAAM,UAAU,kBAAkB,YAAY,SAAS,cAAc,KAAK,CAAC;AAErE,QAAA,KAAK,IAAI,IAAI;AAAA,IAClB,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,MACR,EAAE,QAAQ;AAAA,MACT,OAAO;AAAA;AAAA;AAAA,QAGN,WAAW;AAAA,QACX,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,QACH,OAAO,IAAI,SAAoB;AAC9B,kBAAQ,GAAG,KAAK,IAAI,OAAK,MAAM,CAAC,CAAC,CAAC;AAClC,aAAG,SAAS;AACZ,kBAAQ,OAAO;AAAA,QAAA;AAAA,MAChB;AAAA,IAED,CAAA;AAAA,EAAA,CACF;AACM,SAAA;AACR;"}

package/dist/Functions/reference.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Functions_registerReference = require("../chunks/index-BV85rPB7.cjs");
-const referencePickerModal = require("../chunks/referencePickerModal-D4q4tELn.cjs");
+const referencePickerModal = require("../chunks/referencePickerModal-Yw2bZ96U.cjs");
 exports.NcCustomPickerRenderResult = Functions_registerReference.NcCustomPickerRenderResult;
 exports.hasInteractiveView = Functions_registerReference.hasInteractiveView;
 exports.isCustomPickerElementRegistered = Functions_registerReference.isCustomPickerElementRegistered;

package/dist/Functions/reference.mjs

@@ -1,5 +1,5 @@
 import { N, h, d, i, b, r, c, a } from "../chunks/index-56SXuvlv.mjs";
-import { a as a2, g, b as b2, c as c2, d as d2, s } from "../chunks/referencePickerModal-4kExxHbR.mjs";
+import { a as a2, g, b as b2, c as c2, d as d2, s } from "../chunks/referencePickerModal-C9Ot-OgO.mjs";
 export {
   N as NcCustomPickerRenderResult,
   a2 as anyLinkProviderId,

package/dist/Functions/usernameToColor.cjs

@@ -1,4 +1,30 @@
 "use strict";
-const usernameToColor = require("../chunks/usernameToColor-mqInDrGv.cjs");
-module.exports = usernameToColor.usernameToColor;
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const GenColors = require("../chunks/GenColors-BnYS3bvv.cjs");
+const md5 = require("md5");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const md5__default = /* @__PURE__ */ _interopDefault(md5);
+function usernameToColor(username) {
+  let hash = username.toLowerCase();
+  if (hash.match(/^([0-9a-f]{4}-?){8}$/) === null) {
+    hash = md5__default.default(hash);
+  }
+  hash = hash.replace(/[^0-9a-f]/g, "");
+  const steps = 6;
+  const finalPalette = GenColors.GenColors(steps);
+  function hashToInt(hash2, maximum) {
+    let finalInt = 0;
+    const result = [];
+    for (let i = 0; i < hash2.length; i++) {
+      result.push(parseInt(hash2.charAt(i), 16) % 16);
+    }
+    for (const j in result) {
+      finalInt += result[j];
+    }
+    return parseInt(parseInt(finalInt, 10) % maximum, 10);
+  }
+  return finalPalette[hashToInt(hash, steps * 3)];
+}
+exports.default = usernameToColor;
+exports.usernameToColor = usernameToColor;
 //# sourceMappingURL=usernameToColor.cjs.map