elementPlus - issues

Hi,

Metronic Demo5 Vue, fresh installation
code from element-plus docs

<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
:size="size"
/>

I used this code e.g on CustomersListing.vue
this causes

Uncaught RangeError: Maximum call stack size exceeded.

and simply I can`t pick a date. ( calendar is opening ) ... pick .. error in console date is not picked.

p.s.
Additional, it could be fine when theme dark element-plus also dark

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

Hello again,
I don`t want to add new post ... I`ve managed to work with datePicker - i simply copy the NewEventModal.vue

But I`ve got small annoying problem.
I've added an element plus select option to NewEventModal.vue ( oryginal file )
the issue is when I choose date select option is opening and closing. Maybe someone had this issue before?
Something is going wrong between Metronic and ElementPlus
below pasted code ( oryginal NewEventModal with el-option added )

<template>
<div
class="modal fade show"

aria-modal="true"
role="dialog"
ref="newTargetModalRef"
>
<div class="modal-dialog modal-dialog-centered mw-650px">
<div class="modal-content">
<el-form
class="form fv-plugins-bootstrap5 fv-plugins-framework"

@submit.prevent="submit()"
:model="targetData"
:rules="rules"
ref="formRef"
>
<div class="modal-header">
<h2 class="fw-bold">Add a New Event</h2>
<div
class="btn btn-icon btn-sm btn-active-icon-primary"

data-bs-dismiss="modal"
>
<span class="svg-icon svg-icon-1">
<inline-svg src="media/icons/duotune/arrows/arr061.svg" />
</span>
</div>
</div>
<!--end::Modal header-->
<!--begin::Modal body-->
<div class="modal-body py-10 px-lg-17">
<!--begin::Input group-->
<div class="fv-row mb-9 fv-plugins-icon-container">
<!--begin::Label-->
<label class="required fs-6 fw-semobold mb-2"
>Select field Elem-Plus</label
>
<el-form-item prop="salesRepresentative">
<el-select
v-model="targetData.salesRepresentative"
filterable
placeholder="Select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9 fv-plugins-icon-container">
<!--begin::Label-->
<label class="fs-6 fw-semobold required mb-2">Event Name</label>
<!--end::Label-->
<!--begin::Input-->
<el-form-item prop="eventName">
<el-input
v-model="targetData.eventName"
type="text"
name="eventName"
/>
</el-form-item>
<!--end::Input-->
<div class="fv-plugins-message-container invalid-feedback"></div>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9">
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2">Event Description</label>
<!--end::Label-->
<!--begin::Input-->
<el-input
v-model="targetData.eventDescription"
type="text"
placeholder=""
name="eventDescription"
/>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9">
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2">Event Location</label>
<!--end::Label-->
<!--begin::Input-->
<el-input
v-model="targetData.eventLocation"
type="text"
placeholder=""
name="eventLocation"
/>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-9">
<!--begin::Checkbox-->
<label class="form-check form-check-custom form-check-solid">
<el-checkbox v-model="targetData.allDay" type="checkbox" />
<span class="form-check-label fw-semobold">All Day</span>
</label>
<!--end::Checkbox-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row row-cols-lg-2 g-10">
<div class="col">
<div
class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid"
>
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2 required"
>Event Start Date</label
>
<!--end::Label-->
<!--begin::Input-->
<el-date-picker
v-model="targetData.eventStartDate"
type="text"
name="eventStartDate"
/>
<!--end::Input-->
<div
class="fv-plugins-message-container invalid-feedback"
></div>
</div>
</div>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row row-cols-lg-2 g-10">
<div class="col">
<div
class="fv-row mb-9 fv-plugins-icon-container fv-plugins-bootstrap5-row-valid"
>
<!--begin::Label-->
<label class="fs-6 fw-semobold mb-2 required"
>Event End Date</label
>
<!--end::Label-->
<!--begin::Input-->
<el-date-picker
v-model="targetData.eventEndDate"
type="text"
name="eventName"
/>
<!--end::Input-->
<div
class="fv-plugins-message-container invalid-feedback"
></div>
</div>
</div>
</div>
<!--end::Input group-->
</div>
<!--end::Modal body-->
<!--begin::Modal footer-->
<div class="modal-footer flex-center">
<!--begin::Button-->
<button
data-bs-dismiss="modal"
type="reset"

class="btn btn-light me-3"
>
Cancel
</button>
<!--end::Button-->
<!--begin::Button-->
<button
:data-kt-indicator="loading ? 'on' : null"
class="btn btn-lg btn-primary"
type="submit"
>
<span v-if="!loading" class="indicator-label">
Submit
<span class="svg-icon svg-icon-3 ms-2 me-0">
<inline-svg src="media/icons/duotune/arrows/arr064.svg" />
</span>
</span>
<span v-if="loading" class="indicator-progress">
Please wait...
<span
class="spinner-border spinner-border-sm align-middle ms-2"
></span>
</span>
</button>
<!--end::Button-->
</div>
<!--end::Modal footer-->
<div></div>
</el-form>
<!--end::Form-->
</div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import Swal from "sweetalert2/dist/sweetalert2.js";

interface NewAddressData {
eventName: string;
eventDescription: string;
eventLocation: string;
allDay: boolean;
eventStartDate: string;
eventEndDate: string;
}

export default defineComponent({
name: "new-event-modal",
components: {},
setup() {
const formRef = ref<null | HTMLFormElement>(null);
const newTargetModalRef = ref<null | HTMLElement>(null);
const loading = ref<boolean>(false);

const options = [
{
value: "Option1",
label: "Option1",
},
{
value: "Option2",
label: "Option2",
},
{
value: "Option3",
label: "Option3",
},
{
value: "Option4",
label: "Option4",
},
{
value: "Option5",
label: "Option5",
},
];

const targetData = ref<NewAddressData>({
eventName: "",
eventDescription: "",
eventLocation: "",
allDay: true,
eventStartDate: "",
eventEndDate: "",
});

const rules = ref({
eventName: [
{
required: true,
message: "Please input event name",
trigger: "blur",
},
],
});

const submit = () => {
if (!formRef.value) {
return;
}

formRef.value.validate((valid) => {
if (valid) {
loading.value = true;

setTimeout(() => {
loading.value = false;

Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
},
}).then(() => {
hideModal(newTargetModalRef.value);
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
},
});
return false;
}
});
};

return {
formRef,
newTargetModalRef,
loading,
targetData,
rules,
submit,
options,
};
},
});
</script>

<style lang="scss">
.el-select {
width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
width: 100%;
}
</style>

Hi,

Do you have this issue on our preview page?
https://preview.keenthemes.com/metronic8/vue/demo1/#/crafted/modals/forms/new-target

Also please specify which Metronic version are you using?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi,

this is demo 5 vue version, Metronic 8.1.1
First of all a had problems with date picker.
Then I found NewEventModal.vue (modal to add an event ) that has date picker working. I added a element plus select option … and the rest is in my previous post.
It seems that I have to wait for next update. Need to have this working and ktdatatable bugs also to move on…

Hi,

It seems that the datepicker in demo5 is working fine as well.
https://preview.keenthemes.com/metronic8/vue/demo5/#/crafted/modals/forms/new-target

Are there any steps to reproduce this issue?

the you provided is working indeed, thanks very important and useful Lauris
To reproduce issue please go to
https://preview.keenthemes.com/metronic8/vue/demo5/?_ga=2.208797522.1913056374.1650360416-103528003.1650360416#/apps/calendar

simply using provided Add Event modal generates warnings in console - warning but maybe this have affect?
simply adding this and proper options in tscript section couses my issue.

<!--begin::Input group-->
<div class="fv-row mb-9 fv-plugins-icon-container">
<!--begin::Label-->
<label class="required fs-6 fw-semobold mb-2"
>Select field Elem-Plus</label
>
<el-form-item prop="salesRepresentative">
<el-select
v-model="targetData.salesRepresentative"
filterable
placeholder="Select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<!--end::Input-->
</div>
<!--end::Input group-->

Thank you for your feedback.

Yes, I see now this error, we will check this issue and fix it in the upcoming release.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(