mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
update a11n
This commit is contained in:
Jordan Blasenhauer
parent
66c71d384d
commit
94fee6e361
22 changed files with 143 additions and 102 deletions
|
|
@ -282,7 +282,7 @@ body {
|
|||
}
|
||||
|
||||
.close.select-dropdown-container {
|
||||
@apply -z-10 fixed opacity-0 pointer-events-none;
|
||||
@apply -z-10 hidden;
|
||||
}
|
||||
|
||||
.select-dropdown-btn {
|
||||
|
|
@ -595,7 +595,7 @@ body {
|
|||
}
|
||||
|
||||
.menu-account-title {
|
||||
@apply mb-0.5 tracking-normal text-primary text-center text-lg break-words whitespace-normal dark:text-gray-300;
|
||||
@apply font-bold mb-0.5 tracking-normal text-primary text-center text-lg break-words whitespace-normal dark:text-gray-300;
|
||||
}
|
||||
|
||||
.menu-account-link {
|
||||
|
|
@ -950,6 +950,10 @@ body {
|
|||
@apply max-h-[300px] overflow-auto;
|
||||
}
|
||||
|
||||
.lang-switch-item {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
/* STATUS COMPONENT */
|
||||
|
||||
.status-svg-container {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -54,7 +54,7 @@ onBeforeMount(() => {
|
|||
>
|
||||
<button
|
||||
:tabindex="feedbackIndex"
|
||||
aria-controls="feedback-sidebar group group-hover"
|
||||
aria-controls="feedback-sidebar"
|
||||
:aria-expanded="dropdown.isOpen ? 'true' : 'false'"
|
||||
@click="dropdown.isOpen = dropdown.isOpen ? false : true"
|
||||
class="feedback-float-btn"
|
||||
|
|
@ -81,7 +81,7 @@ onBeforeMount(() => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end float button-->
|
||||
<!-- end float button -->
|
||||
|
||||
<!-- right sidebar -->
|
||||
<aside
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const { t } = useI18n();
|
|||
You have all the links to the main website, the documentation, the privacy policy, the blog, the license and the sitemap.
|
||||
*/
|
||||
|
||||
|
||||
const items = [
|
||||
{
|
||||
href: "https://www.bunkerweb.io?utm_campaign=self&utm_source=ui",
|
||||
|
|
@ -48,7 +47,7 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<footer role="contentinfo" class="footer-container">
|
||||
<footer class="footer-container">
|
||||
<div class="footer-wrap">
|
||||
<div class="footer-items-container">
|
||||
<div class="footer-item-right-container">
|
||||
|
|
|
|||
|
|
@ -27,19 +27,16 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="lang-switch-container">
|
||||
<ul
|
||||
id="switch-lang"
|
||||
<div
|
||||
role="radiogroup"
|
||||
id="switch-lang"
|
||||
v-show="lang.isOpen"
|
||||
class="lang-switch-list"
|
||||
>
|
||||
<li
|
||||
v-for="(locale, id) in $i18n.availableLocales"
|
||||
role="radio"
|
||||
:key="`locale-${locale}`"
|
||||
:aria-checked="$i18n.locale === locale ? 'true' : 'false'"
|
||||
>
|
||||
<template v-for="(locale, id) in $i18n.availableLocales" :key="locale">
|
||||
<button
|
||||
:class="['lang-switch-item']"
|
||||
role="radio"
|
||||
type="button"
|
||||
:tabindex="lang.isOpen ? langIndex : '-1'"
|
||||
:aria-labelledby="`${locale}-${id}`"
|
||||
|
|
@ -50,16 +47,16 @@ onMounted(() => {
|
|||
}
|
||||
"
|
||||
aria-controls="switch-lang-text"
|
||||
:aria-selected="$i18n.locale === locale ? 'true' : 'false'"
|
||||
:aria-checked="$i18n.locale === locale ? 'true' : 'false'"
|
||||
>
|
||||
<span :id="`${locale}-${id}`" class="sr-only">{{ locale }}</span>
|
||||
<span
|
||||
:aria-labelledby="`${locale}-${id}`"
|
||||
:class="[`fi fi-${locale}`]"
|
||||
></span>
|
||||
<span :id="`${locale}-${id}`" class="sr-only">{{ locale }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</div>
|
||||
<!-- current -->
|
||||
<button
|
||||
:tabindex="langIndex"
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ import { onMounted } from "vue";
|
|||
<News />
|
||||
<Header />
|
||||
<!-- info -->
|
||||
<main role="main" class="content-container">
|
||||
<main class="content-container">
|
||||
<div class="content-wrap">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -275,9 +275,9 @@ onBeforeMount(() => {
|
|||
</a>
|
||||
</div>
|
||||
<div class="menu-account-title-container">
|
||||
<h1 class="menu-account-title">
|
||||
{{ menu.username }}
|
||||
</h1>
|
||||
<p class="menu-account-title">
|
||||
{{ menu.username.substring(0, 16) }}
|
||||
</p>
|
||||
<a
|
||||
:tabindex="
|
||||
menu.isDesktop ? menuIndex : menu.isActive ? menuIndex : '-1'
|
||||
|
|
@ -387,17 +387,17 @@ onBeforeMount(() => {
|
|||
<!-- social-->
|
||||
<ul class="menu-social-list">
|
||||
<li v-for="(item, id) in socialList" class="menu-social-list-item">
|
||||
<span :id="`menu-social-item-${id}`" class="sr-only">
|
||||
{{ $t(`dashboard_menu_${item.tag}_label`) }}
|
||||
</span>
|
||||
<a
|
||||
:tabindex="
|
||||
menu.isDesktop ? menuIndex : menu.isActive ? menuIndex : '-1'
|
||||
"
|
||||
:href="item.href"
|
||||
target="_blank"
|
||||
:aria-labelledby="`${item}-id`"
|
||||
:aria-labelledby="`menu-social-item-${id}`"
|
||||
>
|
||||
<span :id="`${item}-id`" class="sr-only">
|
||||
{{ $t(`dashboard_menu_${item.tag}_label`) }}
|
||||
</span>
|
||||
<Icons
|
||||
:iconName="item.svg"
|
||||
:iconClass="'social-svg'"
|
||||
|
|
|
|||
|
|
@ -135,14 +135,16 @@ onMounted(() => {
|
|||
<p v-if="news.posts.length === 0" class="news-sidebar-no-posts-content">
|
||||
{{ $t("dashboard_news_fetch_error") }}
|
||||
</p>
|
||||
<a
|
||||
<div
|
||||
:tabindex="news.isActive ? newsIndex : '-1'"
|
||||
:href="`https://www.bunkerweb.io/blog/post/bunkerweb/${post.slug}?utm_campaign=self&utm_source=ui`"
|
||||
class="news-sidebar-post"
|
||||
v-for="(post, index) in news.posts"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
:href="`https://www.bunkerweb.io/blog/post/bunkerweb/${post.slug}?utm_campaign=self&utm_source=ui`"
|
||||
>
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="news-sidebar-post-img"
|
||||
|
|
@ -150,14 +152,19 @@ onMounted(() => {
|
|||
alt="image"
|
||||
/>
|
||||
<span class="news-sidebar-post-title">{{ post.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<div class="h-full">
|
||||
<div class="news-sidebar-post-excerpt">
|
||||
<a
|
||||
target="_blank"
|
||||
:href="`https://www.bunkerweb.io/blog/post/bunkerweb/${post.slug}?utm_campaign=self&utm_source=ui`"
|
||||
class="news-sidebar-post-excerpt"
|
||||
>
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
</a>
|
||||
<div class="news-sidebar-post-tags-container">
|
||||
<a
|
||||
v-for="tag in post.tags"
|
||||
target="_blank"
|
||||
:href="`https://www.bunkerweb.io/blog/tag/${tag.slug}?utm_campaign=self&utm_source=ui`"
|
||||
class="news-sidebar-post-tag"
|
||||
>
|
||||
|
|
@ -171,7 +178,7 @@ onMounted(() => {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end news-->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
import { defineProps, onMounted, ref } from "vue";
|
||||
import PopoverGroup from "@components/Widget/PopoverGroup.vue";
|
||||
|
||||
/**
|
||||
|
|
@ -56,6 +56,13 @@ const props = defineProps({
|
|||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const labelEl = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
// Check if label is child of a form
|
||||
if (!labelEl.value.closest("form")) labelEl.value.removeAttribute("for");
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -70,6 +77,7 @@ const props = defineProps({
|
|||
>
|
||||
<div>
|
||||
<label
|
||||
ref="labelEl"
|
||||
:class="[props.label ? '' : 'sr-only']"
|
||||
:for="props.name"
|
||||
class="input-header-label"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Check.vue
|
||||
@description This component is a svg icon representing a check mark.
|
||||
|
|
@ -24,19 +25,21 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_check_desc") }}</span>
|
||||
<svg
|
||||
data-svg="check"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_check_desc") }}</span>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Core.vue
|
||||
@description This component is a svg icon representing core plugin.
|
||||
|
|
@ -25,18 +25,20 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_core_desc") }}</span>
|
||||
<svg
|
||||
data-svg="core"
|
||||
role="img"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_core_desc") }}</span>
|
||||
<path
|
||||
d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zm384 64H256V0L384 128z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Cross.vue
|
||||
@description This component is a svg icon representing a cross mark.
|
||||
|
|
@ -24,19 +25,21 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_cross_desc") }}</span>
|
||||
<svg
|
||||
data-svg="cross"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_cross_desc") }}</span>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
|
||||
/**
|
||||
@name Icons/Crown.vue
|
||||
@description This component is a svg icon representing crown.
|
||||
|
|
@ -24,19 +26,21 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_crown_desc") }}</span>
|
||||
<svg
|
||||
data-svg="crown"
|
||||
role="img"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
viewBox="0 0 48 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_crown_desc") }}</span>
|
||||
<path
|
||||
d="M43.218 28.2327L43.6765 23.971C43.921 21.6973 44.0825 20.1957 43.9557 19.2497L44 19.25C46.071 19.25 47.75 17.5711 47.75 15.5C47.75 13.4289 46.071 11.75 44 11.75C41.929 11.75 40.25 13.4289 40.25 15.5C40.25 16.4366 40.5935 17.2931 41.1613 17.9503C40.346 18.4535 39.2805 19.515 37.6763 21.1128C36.4405 22.3438 35.8225 22.9593 35.1333 23.0548C34.7513 23.1075 34.3622 23.0532 34.0095 22.898C33.373 22.6175 32.9485 21.8567 32.0997 20.335L27.6262 12.3135C27.1025 11.3747 26.6642 10.5889 26.2692 9.95662C27.89 9.12967 29 7.44445 29 5.5C29 2.73857 26.7615 0.5 24 0.5C21.2385 0.5 19 2.73857 19 5.5C19 7.44445 20.11 9.12967 21.7308 9.95662C21.3358 10.589 20.8975 11.3746 20.3738 12.3135L15.9002 20.335C15.0514 21.8567 14.627 22.6175 13.9905 22.898C13.6379 23.0532 13.2487 23.1075 12.8668 23.0548C12.1774 22.9593 11.5595 22.3438 10.3238 21.1128C8.71968 19.515 7.6539 18.4535 6.83882 17.9503C7.4066 17.2931 7.75 16.4366 7.75 15.5C7.75 13.4289 6.07107 11.75 4 11.75C1.92893 11.75 0.25 13.4289 0.25 15.5C0.25 17.5711 1.92893 19.25 4 19.25L4.04428 19.2497C3.91755 20.1957 4.07905 21.6973 4.32362 23.971L4.782 28.2327C5.03645 30.5982 5.24802 32.849 5.50717 34.875H42.4928C42.752 32.849 42.9635 30.5982 43.218 28.2327Z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Discord.vue
|
||||
@description This component is a svg icon representing Discord.
|
||||
|
|
@ -24,19 +25,21 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_discord_desc") }}</span>
|
||||
<svg
|
||||
data-svg="discord"
|
||||
role="img"
|
||||
fill="none"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_discord_desc") }}</span>
|
||||
<path
|
||||
d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Github.vue
|
||||
@description This component is a svg icon representing Github.
|
||||
|
|
@ -24,19 +25,21 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_github_desc") }}</span>
|
||||
<svg
|
||||
data-svg="github"
|
||||
role="img"
|
||||
fill="none"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_github_desc") }}</span>
|
||||
<path
|
||||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Linkedin.vue
|
||||
@description This component is a svg icon representing Linkedin.
|
||||
|
|
@ -24,9 +25,12 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_linkedin_desc") }}</span>
|
||||
<svg
|
||||
data-svg="key"
|
||||
role="img"
|
||||
|
|
@ -35,9 +39,8 @@ const id = uuidv4();
|
|||
class="hover:opacity-80 dark:brightness-110"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_linkedin_desc") }}</span>
|
||||
<path
|
||||
d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Plus.vue
|
||||
@description This component is a svg icon representing addition (+).
|
||||
|
|
@ -24,20 +25,22 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_plus_desc") }}</span>
|
||||
<svg
|
||||
data-svg="plus"
|
||||
role="img"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_plus_desc") }}</span>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
|
||||
|
|
|
|||
|
|
@ -24,20 +24,22 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_trespass_desc") }}</span>
|
||||
<svg
|
||||
data-svg="trespass"
|
||||
role="img"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_trespass_desc") }}</span>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
/**
|
||||
import { defineProps, reactive } from "vue";
|
||||
/**
|
||||
@name Icons/Twiiter.vue
|
||||
@description This component is a svg icon representing Twiiter.
|
||||
@example
|
||||
|
|
@ -24,19 +25,21 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const id = uuidv4();
|
||||
const icon = reactive({
|
||||
id: uuidv4(),
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<span :id="icon.id" class="sr-only">{{ $t("icons_twitter_desc") }}</span>
|
||||
<svg
|
||||
data-svg="twitter"
|
||||
role="img"
|
||||
:aria-labelledby="id"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<span :id="id" class="sr-only">{{ $t("icons_twitter_desc") }}</span>
|
||||
<path
|
||||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<script setup>
|
||||
import { reactive, ref, watch, defineProps } from "vue";
|
||||
import { reactive, ref, watch, defineProps, onMounted } from "vue";
|
||||
import { contentIndex } from "@utils/tabindex.js";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import Icons from "@components/Widget/Icons.vue";
|
||||
import { set } from "@vueuse/core";
|
||||
|
||||
/**
|
||||
@name Widget/Popover.vue
|
||||
|
|
@ -13,7 +14,6 @@ import Icons from "@components/Widget/Icons.vue";
|
|||
iconName: "info",
|
||||
iconColor: "info",
|
||||
}
|
||||
@param {string} [id=uuidv4()] - Unique id of the button
|
||||
@param {string} text - Content of the button. Can be a translation key or by default raw text.
|
||||
@param {string} iconName - Name in lowercase of icons store on /Icons. If falsy value, no icon displayed.
|
||||
@param {string} iconColor - Color of the icon between tailwind colors
|
||||
|
|
@ -23,11 +23,6 @@ import Icons from "@components/Widget/Icons.vue";
|
|||
*/
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: uuidv4(),
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
required: false,
|
||||
|
|
@ -44,7 +39,7 @@ const props = defineProps({
|
|||
tag: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "button",
|
||||
default: "div",
|
||||
},
|
||||
popoverClass: {
|
||||
type: String,
|
||||
|
|
@ -62,6 +57,7 @@ const props = defineProps({
|
|||
const popover = reactive({
|
||||
isOpen: false,
|
||||
isHover: false,
|
||||
id: uuidv4(),
|
||||
});
|
||||
|
||||
const popoverContainer = ref();
|
||||
|
|
@ -130,15 +126,36 @@ watch(popover, () => {
|
|||
window.removeEventListener("scroll", hidePopover, true);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// Close select dropdown when clicked outside element
|
||||
window.addEventListener("click", (e) => {
|
||||
if (
|
||||
popover.isOpen &&
|
||||
!popoverContainer.value.contains(e.target) &&
|
||||
!popoverBtn.value.contains(e.target)
|
||||
) {
|
||||
hidePopover();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// random num between 0 and 100 with floats
|
||||
const randomNum = Math.random() * 10;
|
||||
setTimeout(() => {
|
||||
popover.id = uuidv4();
|
||||
}, randomNum);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component
|
||||
ref="popoverBtn"
|
||||
:tabindex="props.tabId"
|
||||
:aria-controls="`${props.id}-popover-text`"
|
||||
:aria-controls="`${popover.id}-popover-text`"
|
||||
:aria-expanded="popover.isOpen ? 'true' : 'false'"
|
||||
:aria-labelledby="`${props.id}-popover-text`"
|
||||
:aria-labelledby="`${popover.id}-popover-text`"
|
||||
:is="props.tag"
|
||||
role="button"
|
||||
@click.prevent
|
||||
|
|
@ -156,7 +173,7 @@ watch(popover, () => {
|
|||
</component>
|
||||
<div
|
||||
ref="popoverContainer"
|
||||
:id="`${props.id}-popover-container`"
|
||||
:id="`${popover.id}-popover-container`"
|
||||
role="status"
|
||||
:aria-hidden="popover.isOpen ? 'false' : 'true'"
|
||||
:class="[
|
||||
|
|
@ -166,7 +183,7 @@ watch(popover, () => {
|
|||
]"
|
||||
:aria-description="$t('dashboard_popover_detail_desc')"
|
||||
>
|
||||
<p :id="`${props.id}-popover-text`" class="popover-text">
|
||||
<p :id="`${popover.id}-popover-text`" class="popover-text">
|
||||
{{ $t(props.text, props.text) }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,17 +25,11 @@ import { v4 as uuidv4 } from "uuid";
|
|||
},
|
||||
],
|
||||
}
|
||||
@param {string} [id=uuidv4()] - Unique id of the popover group
|
||||
@param {string} [flexClass="justify-center align-center"] - Additional class for the flex container
|
||||
@param {array} popovers - List of popovers to display. Popover component is used.
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: uuidv4(),
|
||||
},
|
||||
popovers: {
|
||||
type: Array,
|
||||
required: true,
|
||||
|
|
|
|||
|
|
@ -176,41 +176,29 @@ onMounted(() => {
|
|||
<Container
|
||||
:containerClass="`${props.containerWrapClass} table-container-wrap`"
|
||||
>
|
||||
<span :id="`${table.id}-title`" class="sr-only"></span>
|
||||
<table
|
||||
:aria-colcount="table.length"
|
||||
:aria-rowcount="table.rowLength"
|
||||
:class="['table', props.minWidth, props.tableClass]"
|
||||
:aria-labelledby="`${table.id}-title`"
|
||||
>
|
||||
<span :id="`${table.id}-title`" class="sr-only"></span>
|
||||
<thead
|
||||
role="rowgroup"
|
||||
ref="tableHeader"
|
||||
class="table-header"
|
||||
:style="{ paddingRight: table.overflow }"
|
||||
:aria-rowindex="1"
|
||||
>
|
||||
<tr
|
||||
v-for="(head, id) in props.header"
|
||||
:aria-colindex="id + 1"
|
||||
:class="['table-header-item', `col-span-${props.positions[id]}`]"
|
||||
>
|
||||
<th role="columnheader">
|
||||
<th>
|
||||
{{ $t(head, head) }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
data-table-body
|
||||
role="rowgroup"
|
||||
ref="tableBody"
|
||||
class="table-content"
|
||||
>
|
||||
<tbody data-table-body ref="tableBody" class="table-content">
|
||||
<tr
|
||||
v-for="rowId in table.rowLength"
|
||||
:key="rowId - 1"
|
||||
role="row"
|
||||
:aria-rowindex="rowId"
|
||||
class="table-content-item"
|
||||
>
|
||||
<template
|
||||
|
|
@ -218,8 +206,6 @@ onMounted(() => {
|
|||
:key="col"
|
||||
>
|
||||
<td
|
||||
:aria-colindex="id + 1"
|
||||
role="cell"
|
||||
:class="[
|
||||
'table-content-item-wrap',
|
||||
`col-span-${props.positions[id]}`,
|
||||
|
|
|
|||
Loading…
Reference in a new issue