@nextcloud/vue 9.0.0-rc.1 → 9.0.0-rc.3

package/dist/chunks/{NcUserStatusIcon-M_93a-z6.mjs → NcUserStatusIcon-BX9ILG2r.mjs}

@@ -1,14 +1,11 @@
-import '../assets/NcUserStatusIcon-Du-BEPk_.css';
+import '../assets/NcUserStatusIcon-CtJLt6AU.css';
+import { defineComponent, mergeModels, useModel, computed, watch, createElementBlock, createCommentVNode, openBlock, normalizeClass } from "vue";
 import axios from "@nextcloud/axios";
 import { generateOcsUrl } from "@nextcloud/router";
 import { getCapabilities } from "@nextcloud/capabilities";
-import { r as register, H as t10, a as t, I as t47 } from "./_l10n-dinIMiE_.mjs";
-import { createElementBlock, createCommentVNode, openBlock, normalizeClass } from "vue";
+import { r as register, B as t10, a as t } from "./_l10n-B4AgnzNC.mjs";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-const onlineSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="var(--color-success)" d="M4.8 11.2h6.4V4.8H4.8v6.4zM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n</svg>\n';
-const awaySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4z" />\n	<path fill="var(--color-warning)" d="M6.9.1C3 .6-.1 4-.1 8c0 4.4 3.6 8 8 8 4 0 7.4-3 8-6.9-1.2 1.3-2.9 2.1-4.7 2.1-3.5 0-6.4-2.9-6.4-6.4 0-1.9.8-3.6 2.1-4.7z" />\n</svg>\n';
-const dndSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path fill="var(--color-error)" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n	<path fill="#fdffff" d="M5 6.5h6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5S4.2 6.5 5 6.5z" />\n</svg>\n';
-const invisibleSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3.2c2.7 0 4.8 2.1 4.8 4.8s-2.1 4.8-4.8 4.8S3.2 10.7 3.2 8 5.3 3.2 8 3.2z" />\n</svg>\n';
 register(t10);
 const getUserStatusText = (status) => {
   switch (status) {
@@ -29,109 +26,63 @@ const getUserStatusText = (status) => {
       return status;
   }
 };
-register(t47);
-const _sfc_main = {
-  name: "NcUserStatusIcon",
-  props: {
-    /**
-     * Set the user id to fetch the status
-     */
-    user: {
-      type: String,
-      default: null
-    },
-    /**
-     * Set the status
-     *
-     * @type {'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'}
-     */
-    status: {
-      type: String,
-      default: null,
-      validator: (value) => [
-        "online",
-        "away",
-        "busy",
-        "dnd",
-        "invisible",
-        "offline"
-      ].includes(value)
-    },
-    /**
-     * Set the `aria-hidden` attribute
-     *
-     * @type {'true' | 'false'}
-     */
-    ariaHidden: {
-      type: String,
-      default: null,
-      validator: (value) => [
-        "true",
-        "false"
-      ].includes(value)
-    }
-  },
-  data() {
-    return {
-      fetchedUserStatus: null
-    };
-  },
-  computed: {
-    activeStatus() {
-      return this.status ?? this.fetchedUserStatus;
-    },
-    activeSvg() {
-      const matchSvg = {
-        online: onlineSvg,
-        away: awaySvg,
-        busy: awaySvg,
-        dnd: dndSvg,
-        invisible: invisibleSvg,
-        offline: invisibleSvg
-      };
-      return matchSvg[this.activeStatus] ?? null;
-    },
-    ariaLabel() {
-      if (this.ariaHidden === "true") {
-        return null;
-      }
-      return t("User status: {status}", { status: getUserStatusText(this.activeStatus) });
-    }
-  },
-  watch: {
-    user: {
-      immediate: true,
-      async handler(user) {
-        if (!user || !getCapabilities()?.user_status?.enabled) {
-          this.fetchedUserStatus = null;
-          return;
-        }
+register();
+const onlineSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="var(--color-success)" d="M4.8 11.2h6.4V4.8H4.8v6.4zM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n</svg>\n';
+const awaySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4z" />\n	<path fill="var(--color-warning)" d="M6.9.1C3 .6-.1 4-.1 8c0 4.4 3.6 8 8 8 4 0 7.4-3 8-6.9-1.2 1.3-2.9 2.1-4.7 2.1-3.5 0-6.4-2.9-6.4-6.4 0-1.9.8-3.6 2.1-4.7z" />\n</svg>\n';
+const dndSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path fill="var(--color-error)" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z" />\n	<path fill="#fdffff" d="M5 6.5h6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5S4.2 6.5 5 6.5z" />\n</svg>\n';
+const invisibleSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">\n	<path fill="none" d="M-4-4h24v24H-4V-4z" />\n	<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3.2c2.7 0 4.8 2.1 4.8 4.8s-2.1 4.8-4.8 4.8S3.2 10.7 3.2 8 5.3 3.2 8 3.2z" />\n</svg>\n';
+const _hoisted_1 = ["aria-hidden", "aria-label", "innerHTML"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcUserStatusIcon",
+  props: /* @__PURE__ */ mergeModels({
+    user: { default: void 0 },
+    ariaHidden: { type: [Boolean, String], default: false }
+  }, {
+    "status": {},
+    "statusModifiers": {}
+  }),
+  emits: ["update:status"],
+  setup(__props) {
+    const props = __props;
+    const status = useModel(__props, "status");
+    const isInvisible = computed(() => status.value && ["invisible", "offline"].includes(status.value));
+    const ariaLabel = computed(() => status.value && (!props.ariaHidden || props.ariaHidden === "false") ? t("User status: {status}", { status: getUserStatusText(status.value) }) : void 0);
+    watch(() => props.user, async (user) => {
+      if (!status.value && user && getCapabilities()?.user_status?.enabled) {
         try {
           const { data } = await axios.get(generateOcsUrl("/apps/user_status/api/v1/statuses/{user}", { user }));
-          this.fetchedUserStatus = data.ocs?.data?.status;
+          status.value = data.ocs?.data?.status;
         } catch (error) {
-          this.fetchedUserStatus = null;
+          logger.debug("Error while fetching user status", { error });
         }
       }
-    }
+    }, { immediate: true });
+    const matchSvg = {
+      online: onlineSvg,
+      away: awaySvg,
+      busy: awaySvg,
+      dnd: dndSvg,
+      invisible: invisibleSvg,
+      offline: invisibleSvg
+    };
+    const activeSvg = computed(() => status.value && matchSvg[status.value]);
+    return (_ctx, _cache) => {
+      return status.value ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(["user-status-icon", {
+          "user-status-icon--invisible": isInvisible.value
+        }]),
+        "aria-hidden": !ariaLabel.value || void 0,
+        "aria-label": ariaLabel.value,
+        role: "img",
+        innerHTML: activeSvg.value
+      }, null, 10, _hoisted_1)) : createCommentVNode("", true);
+    };
   }
-};
-const _hoisted_1 = ["aria-hidden", "aria-label", "innerHTML"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return $options.activeStatus ? (openBlock(), createElementBlock("span", {
-    key: 0,
-    class: normalizeClass(["user-status-icon", {
-      "user-status-icon--invisible": ["invisible", "offline"].includes($props.status)
-    }]),
-    role: "img",
-    "aria-hidden": $props.ariaHidden,
-    "aria-label": $options.ariaLabel,
-    innerHTML: $options.activeSvg
-  }, null, 10, _hoisted_1)) : createCommentVNode("", true);
-}
-const NcUserStatusIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c4f818e0"]]);
+});
+const NcUserStatusIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-350f3d1c"]]);
 export {
   NcUserStatusIcon as N,
   getUserStatusText as g
 };
-//# sourceMappingURL=NcUserStatusIcon-M_93a-z6.mjs.map
+//# sourceMappingURL=NcUserStatusIcon-BX9ILG2r.mjs.map

package/dist/chunks/NcUserStatusIcon-BX9ILG2r.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcUserStatusIcon-BX9ILG2r.mjs","sources":["../../src/utils/UserStatus.ts","../../src/assets/status-icons/user-status-online.svg?raw","../../src/assets/status-icons/user-status-away.svg?raw","../../src/assets/status-icons/user-status-dnd.svg?raw","../../src/assets/status-icons/user-status-invisible.svg?raw","../../src/components/NcUserStatusIcon/NcUserStatusIcon.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { t } from '../l10n.js'\n\ntype Status = 'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'\n\nexport const getUserStatusText = (status: Status): string => {\n\tswitch (status) {\n\tcase 'away': return t('away') // TRANSLATORS: User status if the user is currently away from keyboard\n\tcase 'busy': return t('busy')\n\tcase 'dnd': return t('do not disturb')\n\tcase 'online': return t('online')\n\tcase 'invisible': return t('invisible')\n\tcase 'offline': return t('offline')\n\tdefault: return status\n\t}\n}\n","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"var(--color-success)\\\" d=\\\"M4.8 11.2h6.4V4.8H4.8v6.4zM8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z\\\" />\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"none\\\" d=\\\"M-4-4h24v24H-4z\\\" />\\n\\t<path fill=\\\"var(--color-warning)\\\" d=\\\"M6.9.1C3 .6-.1 4-.1 8c0 4.4 3.6 8 8 8 4 0 7.4-3 8-6.9-1.2 1.3-2.9 2.1-4.7 2.1-3.5 0-6.4-2.9-6.4-6.4 0-1.9.8-3.6 2.1-4.7z\\\" />\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"none\\\" d=\\\"M-4-4h24v24H-4V-4z\\\" />\\n\\t<path fill=\\\"var(--color-error)\\\" d=\\\"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8z\\\" />\\n\\t<path fill=\\\"#fdffff\\\" d=\\\"M5 6.5h6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H5c-.8 0-1.5-.7-1.5-1.5S4.2 6.5 5 6.5z\\\" />\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 0 16 16\\\" width=\\\"16\\\" height=\\\"16\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path fill=\\\"none\\\" d=\\\"M-4-4h24v24H-4V-4z\\\" />\\n\\t<path d=\\\"M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 3.2c2.7 0 4.8 2.1 4.8 4.8s-2.1 4.8-4.8 4.8S3.2 10.7 3.2 8 5.3 3.2 8 3.2z\\\" />\\n</svg>\\n\"","<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component displays a user status icon.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"row\">\n\t\t<NcUserStatusIcon status=\"online\" />\n\t\t<NcUserStatusIcon status=\"away\" />\n\t\t<NcUserStatusIcon status=\"dnd\" />\n\t\t<NcUserStatusIcon status=\"invisible\" />\n\t</div>\n</template>\n\n<style>\n.row {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { computed, watch } from 'vue'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\nimport { t } from '../../l10n.js'\n\nimport onlineSvg from '../../assets/status-icons/user-status-online.svg?raw'\nimport awaySvg from '../../assets/status-icons/user-status-away.svg?raw'\nimport dndSvg from '../../assets/status-icons/user-status-dnd.svg?raw'\nimport invisibleSvg from '../../assets/status-icons/user-status-invisible.svg?raw'\nimport logger from '../../utils/logger.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set the user id to fetch the status\n\t */\n\tuser?: string\n\n\t/**\n\t * Set the `aria-hidden` attribute\n\t */\n\tariaHidden?: boolean | 'true' | 'false'\n}>(), {\n\tuser: undefined,\n\tariaHidden: false,\n})\n\n/**\n * The user preloaded user status.\n */\nconst status = defineModel<'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'>('status')\nconst isInvisible = computed(() => status.value && ['invisible', 'offline'].includes(status.value))\n\n/**\n * Aria label to set on the element (will be set when ariaHidden is not set)\n */\nconst ariaLabel = computed(() => (\n\tstatus.value && (!props.ariaHidden || props.ariaHidden === 'false')\n\t\t? t('User status: {status}', { status: getUserStatusText(status.value) })\n\t\t: undefined\n))\n\nwatch(() => props.user, async (user) => {\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tif (!status.value && user && (getCapabilities() as any)?.user_status?.enabled) {\n\t\ttry {\n\t\t\tconst { data } = await axios.get(generateOcsUrl('/apps/user_status/api/v1/statuses/{user}', { user }))\n\t\t\tstatus.value = data.ocs?.data?.status\n\t\t} catch (error) {\n\t\t\tlogger.debug('Error while fetching user status', { error })\n\t\t}\n\t}\n}, { immediate: true })\n\nconst matchSvg = {\n\tonline: onlineSvg,\n\taway: awaySvg,\n\tbusy: awaySvg,\n\tdnd: dndSvg,\n\tinvisible: invisibleSvg,\n\toffline: invisibleSvg,\n}\nconst activeSvg = computed(() => status.value && matchSvg[status.value])\n</script>\n\n<template>\n\t<span v-if=\"status\"\n\t\tclass=\"user-status-icon\"\n\t\t:class=\"{\n\t\t\t'user-status-icon--invisible': isInvisible,\n\t\t}\"\n\t\t:aria-hidden=\"!ariaLabel || undefined\"\n\t\t:aria-label\n\t\trole=\"img\"\n\t\tv-html=\"activeSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<style lang=\"scss\" scoped>\n.user-status-icon {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 16px;\n\tmin-height: 16px;\n\tmax-width: 20px;\n\tmax-height: 20px;\n\n\t&--invisible {\n\t\tfilter: var(--background-invert-if-dark);\n\t}\n}\n</style>\n"],"names":["_useModel"],"mappings":";;;;;;;;AASa,MAAA,oBAAoB,CAAC,WAA2B;AAC5D,UAAQ,QAAQ;AAAA,IAChB,KAAK;AAAQ,aAAO,EAAE,MAAM;AAAA;AAAA,IAC5B,KAAK;AAAQ,aAAO,EAAE,MAAM;AAAA,IAC5B,KAAK;AAAO,aAAO,EAAE,gBAAgB;AAAA,IACrC,KAAK;AAAU,aAAO,EAAE,QAAQ;AAAA,IAChC,KAAK;AAAa,aAAO,EAAE,WAAW;AAAA,IACtC,KAAK;AAAW,aAAO,EAAE,SAAS;AAAA,IAClC;AAAgB,aAAA;AAAA,EAAA;AAEjB;;ACnBA,MAAe,YAAA;ACAf,MAAe,UAAA;ACAf,MAAe,SAAA;ACAf,MAAe,eAAA;;;;;;;;;;;;;AC6Cf,UAAM,QAAQ;AAkBR,UAAA,SAASA,SAAyE,SAAC,QAAQ;AACjG,UAAM,cAAc,SAAS,MAAM,OAAO,SAAS,CAAC,aAAa,SAAS,EAAE,SAAS,OAAO,KAAK,CAAC;AAK5F,UAAA,YAAY,SAAS,MAC1B,OAAO,UAAU,CAAC,MAAM,cAAc,MAAM,eAAe,WACxD,EAAE,yBAAyB,EAAE,QAAQ,kBAAkB,OAAO,KAAK,GAAG,IACtE,MACH;AAED,UAAM,MAAM,MAAM,MAAM,OAAO,SAAS;AAEvC,UAAI,CAAC,OAAO,SAAS,QAAS,gBAAgB,GAAW,aAAa,SAAS;AAC1E,YAAA;AACG,gBAAA,EAAE,SAAS,MAAM,MAAM,IAAI,eAAe,4CAA4C,EAAE,KAAK,CAAC,CAAC;AAC9F,iBAAA,QAAQ,KAAK,KAAK,MAAM;AAAA,iBACvB,OAAO;AACf,iBAAO,MAAM,oCAAoC,EAAE,MAAA,CAAO;AAAA,QAAA;AAAA,MAC3D;AAAA,IACD,GACE,EAAE,WAAW,MAAM;AAEtB,UAAM,WAAW;AAAA,MAChB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,IACV;AACM,UAAA,YAAY,SAAS,MAAM,OAAO,SAAS,SAAS,OAAO,KAAK,CAAC;;;;;;;;;;;;;;;;"}