Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update component comments to JSDoc format

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-05-17 18:32:08 +02:00
parent 837468a357
commit a579d73d1b
17 changed files with 409 additions and 356 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

181
jsdoc/Select.js Normal file
View file

@ -0,0 +1,181 @@
import { ref, reactive, watch, onMounted, defineEmits, defineProps } from "vue";
import { contentIndex } from "@utils/tabindex.js";
import Container from "@components/Widget/Container.vue";
import Header from "@components/Forms/Header/Field.vue";
import ErrorField from "@components/Forms/Error/Field.vue";
/**
@name Select.vue
@description This component is used to create a complete select field input with error handling and label.
We can be more precise by adding values that need to be selected to be valid.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-input',
value: 'yes',
values : ['yes', 'no'],
name: 'test-input',
disabled: false,
required: true,
requiredValues : ['no'], // need required to be checked
label: 'Test select',
}
@param {string} id
@param {string} text - content of the button
@param {string} [type="button"] - button || submit
@param {boolean} [disabled=false]
@param {boolean} [hideText=false] - hide text to only display icon
@param {string} [color="primary"]
@param {string} [size="normal"] - sm || normal || lg || xl
@param {string} [iconName=""] - store on components/Icons/Button
@param {string} [iconColor=""]
@param {object} [eventAttr={}] - {"store" : <store_name>, "default" : <default_value>, "value" : <value_stored_on_click>, "target"<optional> : <target_id_element>, "valueExpanded" : "expanded_value"}
@param {string|number} [tabId=""]
*/
const props = defineProps({
// id && value && method
id: {
type: String,
required: true,
},
columns: {
type: [Object, Boolean],
required: false,
default: false
},
value: {
type: String,
required: true,
},
values: {
type: Array,
required: true,
},
disabled: {
type: Boolean,
required: false,
},
required: {
type: Boolean,
required: false,
},
requiredValues : {
type: Array,
required: false,
default : []
},
label: {
type: String,
required: true,
},
name: {
type: String,
required: true,
},
version: {
type: String,
required: false,
default : ""
},
hideLabel: {
type: Boolean,
required: false,
},
containerClass : {
type: String,
required: false,
default : ""
},
headerClass: {
type: String,
required: false,
default : ""
},
inpClass: {
type: String,
required: false,
default : ""
},
tabId: {
type: [String, Number],
required: false,
default: ""
},
});
// When mounted or when props changed, we want select to display new props values
// When component value change itself, we want to switch to select.value
// To avoid component to send and stick to props values (bad behavior)
// Trick is to use select.value || props.value on template
watch(props, (newProp, oldProp) => {
if (newProp.value !== select.value) {
select.value = "";
}
});
const select = reactive({
isOpen: false,
// On mounted value is null to display props value
// Then on new select we will switch to select.value
// If we use select.value : props.value
// Component will not re-render after props.value change
value: "",
isValid: !props.required ? true : props.requiredValues.length <= 0 ? true : props.requiredValues.includes(props.value) ? true : false,
});
const selectBtn = ref();
const selectWidth = ref("");
// EVENTS
function toggleSelect() {
select.isOpen = select.isOpen ? false : true;
}
function closeSelect() {
select.isOpen = false;
}
function changeValue(newValue) {
// Allow on template to switch from prop value to component own value
// Then send the new value to parent
select.value = newValue;
// Check if value is required and if it is in requiredValues
select.isValid = !props.required ? true : props.requiredValues.length <= 0 ? true : props.requiredValues.includes(newValue) ? true : false;
closeSelect();
return newValue;
}
// Close select dropdown when clicked outside element
watch(select, () => {
if (select.isOpen) {
document.querySelector("body").addEventListener("click", closeOutside);
} else {
document.querySelector("body").removeEventListener("click", closeOutside);
}
});
// Close select when clicked outside logic
function closeOutside(e) {
try {
if (e.target !== selectBtn.value) {
select.isOpen = false;
}
} catch (err) {
select.isOpen = false;
}
}
onMounted(() => {
selectWidth.value = `${selectBtn.value.clientWidth}px`;
window.addEventListener("resize", () => {
try {
selectWidth.value = `${selectBtn.value.clientWidth}px`;
} catch (err) {}
});
});
const emits = defineEmits(["inp"]);

BIN
jsdoc/Select.md Normal file
View file

Binary file not shown.

36
vuejs/client/src/components/Builder.vue
View file

@ -3,28 +3,19 @@ import { reactive, onBeforeMount } from "vue";
import Checkbox from "@components/Forms/Field/Checkbox.vue";
import Select from "@components/Forms/Field/Select.vue";
import Input from "@components/Forms/Field/Input.vue";
import Datepicker from "@components/Forms/Field/Datepicker.vue";
import Button from "@components/Widget/Button.vue";
import GridLayout from "@components/Widget/GridLayout.vue";
import Grid from "@components/Widget/Grid.vue";
/*
COMPONENT DESCRIPTION
*
*
This Builder component is used to create complete pages content with multiple components.
This is an abstract component that will be used to create any kind of page content.
You need to determine each container and each widget inside it.
*
*
PROPS ARGUMENTS
*
*
builder : array,
*
*
PROPS EXAMPLE
*
*
[{
/**
@name Builder.vue
@description This component is a wrapper to create a complete page using containers and widgets.
We have to define each container and each widget inside it.
This is an abstract component that will be used to create any kind of page content (base dashboard elements like menu and news excluded)
@example
[
{
"type": "card", // this can be a "card", "modal", "table"... etc
"containerClass": "", // tailwind css grid class (items-start, ...)
"containerColumns" : {"pc": 12, "tablet": 12, "mobile": 12},
@ -40,10 +31,9 @@ import Grid from "@components/Widget/Grid.vue";
data : {containerClass : "", columns : {"pc": 6, "tablet": 12, "mobile": 12}, id: 'test-select', value: 'yes', values: ['yes', 'no'], name: 'test-select', disabled: false, required: true, label: 'Test select', tabId: '1',}
}
]
},
}
]
*
*
@param {array} builder - Array of containers and widgets
*/
const props = defineProps({
@ -69,6 +59,8 @@ const props = defineProps({
<Checkbox v-if="widget.type === 'Checkbox'" v-bind="widget.data"></Checkbox>
<Select v-if="widget.type === 'Select'" v-bind="widget.data"></Select>
<Input v-if="widget.type === 'Input'" v-bind="widget.data"></Input>
<Datepicker v-if="widget.type === 'Datepicker'" v-bind="widget.data"></Datepicker>
<Button v-if="widget.type === 'Button'" v-bind="widget.data"></Button>
</template>
</Grid>
</GridLayout>

32
vuejs/client/src/components/Forms/Error/Field.vue
View file

@ -1,26 +1,16 @@
<script setup>
/*
COMPONENT DESCRIPTION
*
*
This error field component is used to show a feedback message to the user when the field is invalid.
*
*
PROPS ARGUMENTS
*
*
isValid: boolean,
isValue: boolean,
*
*
PROPS EXAMPLE
*
*
isValid: false,
isValue: false,
*
*
/**
@name Forms/Error/Field.vue
@description This component is used to display a feedback message to user when a field is invalid.
It is used with /Forms/Field components.
@example
{
isValid: false,
isValue: false,
}
@param {boolean} [isValid=false] - Check if the field is valid
@param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
*/
const props = defineProps({

53
vuejs/client/src/components/Forms/Field/Checkbox.vue
View file

@ -5,50 +5,35 @@ import Container from "@components/Widget/Container.vue";
import Header from "@components/Forms/Header/Field.vue";
import ErrorField from "@components/Forms/Error/Field.vue";
/*
COMPONENT DESCRIPTION
*
*
This checkbox component is used to create a complete checkbox (label, validator message).
It is mainly use for checkbox setting form.
*
*
PROPS ARGUMENTS
*
*
id: string,
columns: object,
value: string,
disabled: boolean,
required: boolean,
label: string,
name: string,
version: string,
hideLabel: boolean,
required: boolean,
containerClass: string,
headerClass: string,
inpClass: string,
tabId: string || number,
*
*
PROPS EXAMPLE
*
*
/**
@name Forms/Field/Checkbox.vue
@description This component is used to create a complete checkbox field input with error handling and label.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
containerClass : "",
columns : {"pc": 6, "tablet": 12, "mobile": 12},
id:"test-check",
value: "yes",
label: "Checkbox",
name: "checkbox",
required: true,
version: "v1.0.0",
hideLabel: false,
headerClass: "text-red-500"
}
*
*
@param {string} id
@param {string} name
@param {string} label
@param {string} value
@param {boolean} [disabled=false]
@param {boolean} [required=false]
@param {object} [columns={"pc": "12", "tab": "12", "mob": "12}]
@param {boolean} [hideLabel=false]
@param {string} [containerClass=""]
@param {string} [headerClass=""]
@param {string} [inpClass=""]
@param {string|number} [tabId=""]
*/
const props = defineProps({

52
vuejs/client/src/components/Forms/Field/Datepicker.vue
View file

@ -11,39 +11,15 @@ import "@assets/css/datepicker-foundation.css";
import "@assets/css/flatpickr.css";
import "@assets/css/flatpickr.dark.css";
/*
COMPONENT DESCRIPTION
*
*
This datepicker component is used to create a complete datepicker (label, validator message).
/**
@name Forms/Field/Datepicker.vue
@description This component is used to create a complete datepicker field input with error handling and label.
You can define a default date, a min and max date, and a format.
*
*
PROPS ARGUMENTS
*
*
id: string,
name: string,
label: string,
hideLabel: boolean,
headerClass: string,
containerClass: string,
columns: object || boolean,
disabled: boolean,
required: boolean,
defaultDate: string || number || date,
noPickBeforeStamp: string || number,
noPickAfterStamp: string || number,
inpClass: string,
tabId: string || number,
*
*
PROPS EXAMPLE
*
*
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-date',
containerClass : "",
columns : {"pc": 6, "tablet": 12, "mobile": 12},
disabled: false,
required: true,
@ -51,10 +27,20 @@ import "@assets/css/flatpickr.dark.css";
noPickBeforeStamp: 1735682600000,
noPickAfterStamp: 1735689600000,
inpClass: "text-center",
tabId: "1",
}
*
*
@param {string} id
@param {string} name
@param {string} label
@param {string|number|date} [defaultDate=null] - Default date when instanciate
@param {string|number} [noPickBeforeStamp=""] - Impossible to pick a date before this date
@param {string|number} [noPickAfterStamp=""] - Impossible to pick a date after this date
@param {boolean} [hideLabel=false]
@param {object|boolean} [columns={"pc": "12", "tab": "12", "mob": "12}]
@param {boolean} [disabled=false]
@param {boolean} [required=false]
@param {string} [headerClass=""]
@param {string} [containerClass=""]
@param {string|number} [tabId=""]
*/
const props = defineProps({

64
vuejs/client/src/components/Forms/Field/Input.vue
View file

@ -5,42 +5,14 @@ import Container from "@components/Widget/Container.vue";
import Header from "@components/Forms/Header/Field.vue";
import ErrorField from "@components/Forms/Error/Field.vue";
/*
COMPONENT DESCRIPTION
*
*
This input component is used to create a complete input (label, validator message).
It is mainly use for input setting form.
*
*
PROPS ARGUMENTS
*
*
id: string,
columns : <object|boolean>,
name: string,
type: string<"text"|"email"|"password"|"number"|"tel"|"url">,
disabled: boolean,
value: string,
placeholder: string,
pattern: string,
clipboard: boolean,
readonly: boolean,
label: string,
name: string,
version: string,
hideLabel: boolean,
required: boolean,
containerClass: string,
headerClass: string,
inpClass: string,
tabId: string || number,
*
*
PROPS EXAMPLE
*
*
/**
@name Forms/Field/Input.vue
@description This component is used to create a complete input field input with error handling and label.
We can add a clipboard button to copy the input value.
We can also add a password button to show the password.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-input',
value: 'yes',
@ -50,11 +22,25 @@ import ErrorField from "@components/Forms/Error/Field.vue";
required: true,
label: 'Test input',
pattern : "(test)",
tabId: '1',
}
*
*
@param {string} id
@param {string} name
@param {string} type - text, email, password, number, tel, url
@param {string} value
@param {string} label
@param {boolean} [disabled=false]
@param {boolean} [required=false]
@param {string} [placeholder=""]
@param {string} [pattern="(?.*)"]
@param {boolean} [clipboard=false] - allow to copy the input value
@param {boolean} [readonly=false] - allow to read only the input value
@param {boolean} [hideLabel=false]
@param {string} [containerClass=""]
@param {string} [inpClass=""]
@param {string} [headerClass=""]
@param {string|number} [tabId=""]
*/
const props = defineProps({
// id && value && method
id: {

55
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -6,37 +6,13 @@ import Header from "@components/Forms/Header/Field.vue";
import ErrorField from "@components/Forms/Error/Field.vue";
/*
COMPONENT DESCRIPTION
*
*
This select component is used to create a complete select (label, validator message).
It is mainly use for select setting form.
*
*
PROPS ARGUMENTS
*
*
id: string,
columns : <object|boolean>,
value: string,
values: array,
disabled: boolean,
required: boolean,
requiredValues : array,
label: string,
name: string,
version: string,
hideLabel: boolean,
containerClass: string,
inpClass: string,
headerClass: string,
tabId: string || number,
*
*
PROPS EXAMPLE
*
*
/**
@name Forms/Field/Select.vue
@description This component is used to create a complete select field input with error handling and label.
We can be more precise by adding values that need to be selected to be valid.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-input',
value: 'yes',
@ -47,8 +23,20 @@ import ErrorField from "@components/Forms/Error/Field.vue";
requiredValues : ['no'], // need required to be checked
label: 'Test select',
}
*
*
@param {string} id
@param {string} name
@param {string} value
@param {string} label
@param {array} values
@param {boolean} [disabled=false]
@param {boolean} [required=false]
@param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
@param {object|boolean} [columns={"pc": "12", "tab": "12", "mob": "12}]
@param {boolean} [hideLabel=false]
@param {string} [containerClass=""]
@param {string} [inpClass=""]
@param {string} [headerClass=""]
@param {string|number} [tabId=""]
*/
@ -161,7 +149,6 @@ function changeValue(newValue) {
// Then send the new value to parent
select.value = newValue;
// Check if value is required and if it is in requiredValues
console.log(newValue, props.requiredValues, props.requiredValues.includes(newValue) ? true : false);
select.isValid = !props.required ? true : props.requiredValues.length <= 0 ? true : props.requiredValues.includes(newValue) ? true : false;
closeSelect();
return newValue;

37
vuejs/client/src/components/Forms/Header/Field.vue
View file

@ -1,38 +1,23 @@
<script setup>
import { defineProps } from "vue";
/*
COMPONENT DESCRIPTION
*
*
This header component is used with field in order to link a label to field type.
We can show additionnal data, like validaiton pattern with invalid message,
Or add some popovers elements.
*
*
PROPS ARGUMENTS
*
*
label: string,
name: string,
required: boolean,
version: string,
hideLabel: boolean,
required: boolean,
headerClass: string,
*
*
PROPS EXAMPLE
*
*
/**
@name Forms/Header/Field.vue
@description This component is used with field in order to link a label to field type.
We can add popover to display more information.
Always use with field component.
@example
{
label: 'Test',
version : "0.1.0",
name: 'test-input',
required: true,
}
*
*
@param {string} label
@param {string} name
@param {boolean} [required=false]
@param {boolean} [hideLabel=false]
@param {string} [headerClass=""]
*/
const props = defineProps({

29
vuejs/client/src/components/Icons/Button/Add.vue
View file

@ -1,26 +1,15 @@
<script setup>
import { computed } from 'vue';
/*
COMPONENT DESCRIPTION
*
*
This svg component is used to create a complete svg icon for a button.
*
*
PROPS ARGUMENTS
*
*
iconColor: string,
*
*
PROPS EXAMPLE
*
*
iconColor: 'white',
*
*
/**
@name Icons/Button/Add.vue
@description This component is used to create a complete svg icon for a button.
This svg is related to a add action button.
@example
{
iconColor: 'white',
}
@param {string} [iconColor="white"]
*/
const props = defineProps({

31
vuejs/client/src/components/Widget/Button.vue
View file

@ -5,6 +5,37 @@ import { useEventStore } from "@store/event.js";
import Container from "@components/Widget/Container.vue";
import IconAdd from "@components/Icons/Button/Add.vue";
/**
@name Widget/Button.vue
@description This component is a standard button.
You can link this button to the event store on click with eventAttr.
This will allow you to share a value with other components, for example switching form on a click.
The eventAttr object must contain the store name and the value to send on click at least.
It can also contain the target id element and the expanded value, this will add additionnal accessibility attributs to the button.
@example
{
id: "open-modal-btn",
text: "Open modal",
disabled: false,
hideText: true,
color: "green",
size: "normal",
iconName: "modal",
iconColor: "white",
eventAttr: {"store" : "modal", "value" : "open", "target" : "modal_id", "valueExpanded" : "open"},7
}
@param {string} id
@param {string} text - Content of the button
@param {string} [type="button"] - Can be of type button || submit
@param {boolean} [disabled=false]
@param {boolean} [hideText=false] - Hide text to only display icon
@param {string} [color="primary"]
@param {string} [size="normal"] - Can be of size sm || normal || lg || xl
@param {string} [iconName=""] - Name in lowercase of icons store on /Icons/Button
@param {string} [iconColor=""]
@param {object} [eventAttr={}] - Store event on click {"store" : <store_name>, "default" : <default_value>, "value" : <value_stored_on_click>, "target"<optional> : <target_id_element>, "valueExpanded" : "expanded_value"}
@param {string|number} [tabId=""]
*/
/*
COMPONENT DESCRIPTION

32
vuejs/client/src/components/Widget/Container.vue
View file

@ -1,31 +1,19 @@
<script setup>
import { computed } from 'vue';
/*
COMPONENT DESCRIPTION
*
*
This container component is mainly use as widget container.
Each widget can define the base class for the container.
In case we columns, this will use it too for positioning.
*
*
PROPS ARGUMENTS
*
*
class: string,
columns: object,
*
*
PROPS EXAMPLE
*
*
/**
@name Widget/Container.vue
@description This component is a basic container that can be used to wrap other components.
In case we are working with grid system, we can add columns to position the container.
We can define additional class too.
This component is mainly use as widget container.
@example
{
class: "w-full h-full bg-white rounded shadow-md",
containerClass: "w-full h-full bg-white rounded shadow-md",
columns: { pc: 12, tablet: 12, mobile: 12}
}
*
*
@param {string} [containerClass=""] - Additional class
@param {object|boolean} [columns=false] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
*/
const props = defineProps({

28
vuejs/client/src/components/Widget/Flex.vue
View file

@ -1,25 +1,17 @@
<script setup>
import { computed } from 'vue';
/*
COMPONENT DESCRIPTION
*
*
This container component is used to align groups of components horizontally using flex.
*
*
PROPS ARGUMENTS
*
*
flexClass: string,
*
*
PROPS EXAMPLE
*
*
/**
@name Widget/Flex.vue
@description This component is a basic container that can be used to wrap other components.
Per default, it aligns the components horizontally using flex.
We can define additional class too.
This component is mainly use as widget container or for groups of widget.
@example
{
flexClass: "flex-start"
*
*
}
@param {string} [flexClass="flex-start"] - Additional class
*/
const props = defineProps({

53
vuejs/client/src/components/Widget/Grid.vue
View file

@ -1,46 +1,33 @@
<script setup>
import { computed } from 'vue';
/*
COMPONENT DESCRIPTION
*
*
This Grid component is a container with a grid system.
In case we are adding columns, this will be added, so it can be used with parent grid.
*
*
PROPS ARGUMENTS
*
*
type : <"card"|"table"|...> (will determine component style)
title: string,
columns : { pc: int, tablet: int, mobile: int},
class : <"items-start"|"items-center"|"items-end">
*
*
PROPS EXAMPLE
*
*
columns: { pc: 12, tablet: 12, mobile: 12},
gridClass: "items-start"
*
*
/**
@name Widget/Grid.vue
@description This component is a basic container that can be used to wrap other components.
This container is based on a grid system and will return a grid container with 12 columns.
In case we are working with grid system, we can add columns to position the container.
We can define additional class too.
This component is mainly use as widget container or as a child of a GridLayout.
@example
{
columns: { pc: 12, tablet: 12, mobile: 12},
gridClass: "items-start"
}
@param {string} [gridClass="items-start"] - Additional class
@param {object|boolean} [columns=false] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
*/
const props = defineProps({
columns : {
type: [Object, Boolean],
required: false,
default : {
pc: 12,
tablet: 12,
mobile: 12}
},
gridClass : {
type: String,
required: false,
default: "items-start"
default : false,
},
gridClass : {
type: String,
required: false,
default: "items-start"
},
})

45
vuejs/client/src/components/Widget/GridLayout.vue
View file

@ -1,41 +1,30 @@
<script setup>
import { computed } from 'vue';
/*
COMPONENT DESCRIPTION
*
*
This GridLayout component is used at the top level of a page layout.
This component will determine the position of layout components based on the grid columns.
/**
@name Widget/GridLayout.vue
@description This component is used for top level page layout.
This will determine the position of layout components based on the grid system.
We can create card, modal, table and others top level layout using this component.
The content of this component is grid based.
*
*
PROPS ARGUMENTS
*
*
type : <"card"|"table"|...> (will determine component style)
title: string,
columns : { pc: int, tablet: int, mobile: int},
gridLayoutClass : <"items-start"|"items-center"|"items-end">
*
*
PROPS EXAMPLE
*
*
type: "card",
title: "Test",
columns: { pc: 12, tablet: 12, mobile: 12},
gridLayoutClass: "items-start"
*
*
This component is mainly use as Grid parent component.
@example
{
type: "card",
title: "Test",
columns: { pc: 12, tablet: 12, mobile: 12},
gridLayoutClass: "items-start"
}
@param {string} [type="card"] - Type of layout component, we can have : card, table, modal and others
@param {string} [title=""] - Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title.
@param {object} [columns={"pc": 12, "tablet": 12, "mobile": 12}] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
@param {string} [gridLayoutClass="items-start"] - Additional class
*/
const props = defineProps({
type : {
type: String,
required: false,
default : "grid"
default : "card"
},
title : {
type: String,

33
vuejs/client/src/components/Widget/Popover.vue
View file

@ -3,6 +3,10 @@ import { reactive, onMounted, defineProps } from "vue";
import { contentIndex } from "@utils/tabindex.js";
const props = defineProps({
id: {
type: String,
required: true,
},
content: {
type: String,
required: false,
@ -11,7 +15,7 @@ const props = defineProps({
type: String,
required: false,
},
iconClass: {
iconColor: {
type: String,
required: false,
},
@ -29,22 +33,6 @@ const popover = reactive({
isHover: false,
});
// Different style for desktop and mobile
const tab = reactive({
isMobile: false,
// format label to fit id
id: props.content.trim().toLowerCase().replaceAll(" ", "-").substring(0, 15) + "popover",
});
onMounted(() => {
// When component is created but before is insert on DOM
// Check window width to determine we need to display mobile or desktop tab design
tab.isMobile = window.innerWidth >= 768 ? false : true;
window.addEventListener("resize", () => {
tab.isMobile = window.innerWidth >= 768 ? false : true;
});
});
function showPopover() {
popover.isHover = true;
setTimeout(() => {
@ -61,9 +49,9 @@ function hidePopover() {
<template>
<component
:tabindex="contentIndex"
:aria-controls="`${tab.id}`"
:aria-controls="`${props.id}-popover-text`"
:aria-expanded="popover.isOpen ? 'true' : 'false'"
:aria-describedby="`${tab.id}-text`"
:aria-describedby="`${props.id}-popover-text`"
:is="props.tag"
role="button"
@focusin="showPopover()"
@ -72,9 +60,6 @@ function hidePopover() {
@pointerleave="hidePopover()"
class="cursor-pointer flex justify-start w-full"
>
<span :id="`${tab.id}-text`" class="sr-only">
{{ $t("dashboard_popover_button_desc") }}
</span>
<svg
role="img"
aria-hidden="true"
@ -88,13 +73,13 @@ function hidePopover() {
</svg>
</component>
<div
:id="`${tab.label}-popover-${tab.id}`"
:id="`${props.id}-popover-container`"
role="status"
:aria-hidden="popover.isOpen ? 'false' : 'true'"
v-show="popover.isOpen"
:class="['popover-settings-container']"
:aria-description="$t('dashboard_popover_detail_desc')"
>
<p :id="${tab.id}-text" class="popover-settings-text"><slot></slot></p>
<p :id="`${props.id}-popover-text`" class="popover-settings-text"><slot></slot></p>
</div>
</template>

4
vuejs/client/src/pages/test/Test.vue
View file

@ -24,8 +24,8 @@ const selectData = {
values: ['yes', 'no'],
name: 'test-select',
disabled: false,
required: true,
requiredValues : ['no'],
required: false,
requiredValues : ["no"],
label: 'Test select',
tabId: '1',
}