@nextcloud/vue
Version:
Nextcloud vue components
138 lines (137 loc) • 5.22 kB
JavaScript
require('../assets/NcUserStatusIcon-DAVSJFhS.css');
;
const axios = require("@nextcloud/axios");
const router = require("@nextcloud/router");
const capabilities = require("@nextcloud/capabilities");
const _l10n = require("./_l10n-CjO_W5Dt.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const axios__default = /* @__PURE__ */ _interopDefault(axios);
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';
_l10n.register(_l10n.t10);
const getUserStatusText = (status) => {
switch (status) {
case "away":
return _l10n.t("away");
case "busy":
return _l10n.t("busy");
case "dnd":
return _l10n.t("do not disturb");
case "online":
return _l10n.t("online");
case "invisible":
return _l10n.t("invisible");
case "offline":
return _l10n.t("offline");
default:
return status;
}
};
_l10n.register(_l10n.t48);
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 _l10n.t("User status: {status}", { status: getUserStatusText(this.activeStatus) });
}
},
watch: {
user: {
immediate: true,
async handler(user, _oldUser) {
if (!user || !capabilities.getCapabilities()?.user_status?.enabled) {
this.fetchedUserStatus = null;
return;
}
try {
const { data } = await axios__default.default.get(router.generateOcsUrl("/apps/user_status/api/v1/statuses/{user}", { user }));
this.fetchedUserStatus = data.ocs?.data?.status;
} catch (error) {
this.fetchedUserStatus = null;
}
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _vm.activeStatus ? _c("span", { staticClass: "user-status-icon", class: {
"user-status-icon--invisible": ["invisible", "offline"].includes(_vm.status)
}, attrs: { "role": "img", "aria-hidden": _vm.ariaHidden, "aria-label": _vm.ariaLabel }, domProps: { "innerHTML": _vm._s(_vm.activeSvg) } }) : _vm._e();
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"0555d8d0"
);
const NcUserStatusIcon = __component__.exports;
exports.NcUserStatusIcon = NcUserStatusIcon;
exports.getUserStatusText = getUserStatusText;