-
{
- datepicker = flatpickr(`#${props.id}`, {
- locale: "en",
- dateFormat: date.format,
- defaultDate: +props.value,
- maxDate: +props.maxDate ? +props.maxDate : "",
- minDate: +props.minDate ? +props.minDate : "",
- enableTime: true,
- enableSeconds: true,
- time_24hr: true,
- minuteIncrement: 1,
- onChange(selectedDates, dateStr, instance) {
- if (!dateStr && props.required) return (date.isValid = false);
- //Check if date is in interval
- try {
- const currStamp = Date.parse(dateStr);
-
- date.currStamp = currStamp;
- // Run whatever, if invalid this will override
- date.isValid = true;
- } catch (err) {}
- },
- onOpen(selectedDates, dateStr, instance) {
- picker.isOpen = true;
- // Focus on current date and update tabindex
- try {
- setIndex(instance.calendarContainer, contentIndex);
- const baseFocus =
- instance.calendarContainer.querySelector(".flatpickr-day.today") ||
- instance.calendarContainer.querySelector(".flatpickr-day");
- baseFocus.setAttribute("data-tabindex-active", true);
- setTimeout(() => {
- baseFocus.focus();
- }, 50);
- } catch (err) {}
- },
- onClose(selectedDates, dateStr, instance) {
- picker.isOpen = false;
- setIndex(instance.calendarContainer, "-1");
- },
- });
- // Check if multiple or not
- let datepickerEl = null;
- if (Array.isArray(datepicker)) {
- datepickerEl = datepicker[datepicker.length - 1];
- } else {
- datepickerEl = datepicker;
- }
- // Set valid date state
- if (!datepickerEl.selectedDates[0] && props.required) date.isValid = false;
- if (!datepickerEl.selectedDates[0] && !props.required) date.isValid = true;
-
- const calendar = datepickerEl.calendarContainer;
- // Impossible to use default select month dropdown with keyboard
- // We need to create our own and link calendar to it
- setMonthSelect(calendar, props.id);
- // Override default behavior that go to input el instead of previous calendat element on tab + maj
- handleEvents(calendar, props.id, datepickerEl);
-
- setPickerAtt(calendar, props.id);
-});
function setMonthSelect(calendar, id) {
// Hide default select and optionss
@@ -287,10 +226,6 @@ function setMonthSelect(calendar, id) {
function setPickerAtt(calendarEl, id = false) {
// change error non-standard attributes
- if (id) {
- calendarEl.setAttribute("id", id);
- }
-
const inps = calendarEl.querySelectorAll(
'input.numInput[type="number"][maxlength]'
);
@@ -312,6 +247,10 @@ function setPickerAtt(calendarEl, id = false) {
calendarEl.querySelectorAll("svg").forEach((svg) => {
svg.classList.add("pointer-events-none");
});
+
+ if (id) {
+ calendarEl.setAttribute("id", `${id}-calendar`);
+ }
}
function handleEvents(calendarEl, id, datepicker) {
@@ -634,6 +573,73 @@ function setIndex(calendarEl, tabindex) {
second.setAttribute("tabindex", tabindex);
} catch (e) {}
}
+
+onMounted(() => {
+ date.id = useUUID(date.id);
+ datepicker = flatpickr(`#${date.id}`, {
+ locale: "en",
+ dateFormat: date.format,
+ defaultDate: +props.value,
+ maxDate: +props.maxDate ? +props.maxDate : "",
+ minDate: +props.minDate ? +props.minDate : "",
+ enableTime: true,
+ enableSeconds: true,
+ time_24hr: true,
+ minuteIncrement: 1,
+ onChange(selectedDates, dateStr, instance) {
+ if (!dateStr && props.required) return (date.isValid = false);
+ //Check if date is in interval
+ try {
+ const currStamp = Date.parse(dateStr);
+
+ date.currStamp = currStamp;
+ // Run whatever, if invalid this will override
+ date.isValid = true;
+ } catch (err) {}
+ },
+ onOpen(selectedDates, dateStr, instance) {
+ picker.isOpen = true;
+ // Focus on current date and update tabindex
+ try {
+ setIndex(instance.calendarContainer, contentIndex);
+ const baseFocus =
+ instance.calendarContainer.querySelector(".flatpickr-day.today") ||
+ instance.calendarContainer.querySelector(".flatpickr-day");
+ baseFocus.setAttribute("data-tabindex-active", true);
+ setTimeout(() => {
+ baseFocus.focus();
+ }, 50);
+ } catch (err) {}
+ },
+ onClose(selectedDates, dateStr, instance) {
+ picker.isOpen = false;
+ setIndex(instance.calendarContainer, "-1");
+ },
+ });
+ // Check if multiple or not
+ let datepickerEl = null;
+ if (Array.isArray(datepicker)) {
+ datepickerEl = datepicker[datepicker.length - 1];
+ } else {
+ datepickerEl = datepicker;
+ }
+ // Set valid date state
+ if (!datepickerEl.selectedDates[0] && props.required) date.isValid = false;
+ if (!datepickerEl.selectedDates[0] && !props.required) date.isValid = true;
+
+ const calendar = datepickerEl.calendarContainer;
+ // Impossible to use default select month dropdown with keyboard
+ // We need to create our own and link calendar to it
+ setMonthSelect(calendar, date.id);
+ // Override default behavior that go to input el instead of previous calendat element on tab + maj
+ handleEvents(calendar, date.id, datepickerEl);
+
+ setPickerAtt(calendar, date.id);
+});
+
+onUnmounted(() => {
+ datepicker.destroy();
+});
@@ -648,7 +654,7 @@ function setIndex(calendarEl, tabindex) {
:required="props.required"
:name="props.name"
:label="props.label"
- :id="props.id"
+ :id="date.id"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
/>
@@ -657,8 +663,7 @@ function setIndex(calendarEl, tabindex) {
{
@@ -154,7 +156,7 @@ let editorEl = null;
// Ace editor vanilla logic
class Editor {
constructor() {
- this.editor = ace.edit(props.id);
+ this.editor = ace.edit(editor.id);
this.darkMode = document.querySelector("[data-dark-toggle]");
this.initEditor();
this.listenDarkToggle();
@@ -269,8 +271,52 @@ class Editor {
}
}
+function removeErrCSS() {
+ setTimeout(() => {
+ try {
+ const editorArea = document.querySelector("textarea.ace_text-input");
+
+ const dictStyle = JSON.parse(
+ JSON.stringify(
+ document.querySelector('[style*="font-optical-sizing"]').style
+ )
+ );
+ // Loop and remove key if value is 'font-optical-sizing'
+ for (const [key, value] of Object.entries(dictStyle)) {
+ if (value === "font-optical-sizing") {
+ delete dictStyle[key];
+ }
+ }
+ document.querySelector('[style*="font-optical-sizing"]').style =
+ dictStyle;
+ } catch (e) {}
+ }, 100);
+}
+
+function setEditorAttrs() {
+ // Add tabindex to editor
+ try {
+ const editorArea = document.querySelector("textarea.ace_text-input");
+ // Set attributes
+ editorArea.removeAttribute("wrap");
+ editorArea.removeAttribute("autocorrect");
+
+ editorArea.tabIndex = contentIndex;
+ editorArea.setAttribute("id", `${editor.id}-editor`);
+ editorArea.setAttribute("name", props.name);
+ // Focus on editor
+ editorArea.addEventListener("focus", (e) => {
+ const editorRange = editorEl.editor.getSelectionRange();
+ editorEl.editor.gotoLine(editorRange.start.row, editorRange.start.column);
+ });
+ } catch (e) {
+ console.log(e);
+ }
+}
+
// Use ace editor
onMounted(() => {
+ editor.id = useUUID(editor.id);
// Default value
editorEl = new Editor();
editorEl.setValue(editor.value);
@@ -280,16 +326,9 @@ onMounted(() => {
// emit inp
emits("inp", editor.value);
});
- // Add tabindex to editor
- try {
- const editorArea = document.querySelector("textarea.ace_text-input");
- editorArea.tabIndex = contentIndex;
- editorArea.setAttribute("name", props.name);
- editorArea.addEventListener("focus", (e) => {
- const editorRange = editorEl.editor.getSelectionRange();
- editorEl.editor.gotoLine(editorRange.start.row, editorRange.start.column);
- });
- } catch (e) {}
+
+ setEditorAttrs();
+ removeErrCSS();
});
onUnmounted(() => {
@@ -301,7 +340,7 @@ onUnmounted(() => {
{
:required="props.required"
:name="props.name"
:label="props.label"
- :id="props.id"
+ :id="`${editor.id}-editor`"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
/>
@@ -331,7 +370,7 @@ onUnmounted(() => {
props.editorClass,
]"
:aria-description="$t('inp_editor_desc')"
- :id="props.id"
+ :id="editor.id"
>
{
+ inp.id = useUUID(inp.id);
inp.isValid = inputEl.value.checkValidity();
// Clipboard not allowed on http
@@ -177,7 +179,7 @@ onMounted(() => {
:required="props.required"
:name="props.name"
:label="props.label"
- :id="props.id"
+ :id="inp.id"
:hideLabel="props.hideLabel"
:headerClass="props.headerClass"
/>
@@ -193,7 +195,7 @@ onMounted(() => {
$emit('inp', inp.value);
}
"
- :id="props.id"
+ :id="inp.id"
:class="[
'input-regular',
inp.isValid ? 'valid' : 'invalid',
@@ -228,13 +230,13 @@ onMounted(() => {