Hi,

I see a deleted reply to this case. Do you need our further reply to the highlighted questions? The new API methods getNextStepIndex and getPreviousStepIndex are all listed in latest docs.

Regards.

Hello there,

no need for support.
As we are trying (again!) to update our project from keen v2 to v3, question was about missing methods in Steppers while updating from wizard (keen v2) .
In particular, getNewStep() which was used in detecting user navigation inside a wizard (going to prev or next page).

I have noticed that code can be adapted using Steppers' events (kt.stepper.next/prev) but there is no explanation (nor reason unless keen dev dare to explain) on why drop methods like getNewStep(). It seems as if keen devs pretend their customers have time to continuously change their code (and check steppers works as before, with huge waste of time!)
Definitely not a good dev experience!

Also, are there updates on your 7 months old reply "Also, we will add more info for the migration as per your suggestion." ?
For example, since you do not include "bootstrap-selectpicker" in keen v3, why you wait for us to discover selecptickers do not work anymore ?
it is just a google search away to find out that there is an updated version compatible for bt5.
Take as example what bootstrap did:
https://getbootstrap.com/docs/5.0/migration/
This is what makes your customer happy!

Also, keen v2 left sidebar menu seems much better organized than the one in v3. Consider make some improvements (List is too long and less categorized)

Best regards

Hi Sean,

I just found out another thing.
What is the purpose of having a "data-kt-stepper-action="submit" " if an event like "kt.stepper.submit" doesn't exist ? (event name is invented, looking at how other events have been named)

https://preview.keenthemes.com/html/keen/docs/general/stepper#events

Hi,

This data-kt-stepper-action="submit" is a selector for the submit button element.

I would suggest you copy and paste the html/js code from Keen v3.x docs and give it a try. But please do not mix the stepper main HTML code with the v2.x one. Instead, use the v3.0 from scratch and put your form for each step. if you need any further help please let me know.

Regards.

hi Sean,

thanks for the reply.
Of course i am not mixing v2 with v3. Instead i have updated all the wizards according to v3 docs .

The point of the question was: why have dedicated events for all the actions of a stepper (change, changed, ecc..) and for its buttons (previous, next) except for the submit? (which I would say is the main action of a stepper)

Why should I have code like this:
- stepper.on
for everything except for submit , which is more like
- document.querySelector(....).addEventListener('...')
making the code less readable and maintainable?

Please, add this event!
P.S. : I have noticed that duotone is deprecated . You should remove ki-duotone icons from your docs example then !

Regards

Hi,

You can handle the submit event by yourself since each user has different requirements for submit. Some prefer the Ajax way whilst some standard forms submit.

ki-duotone is in use as it's a duotone version of our new iconset KeenIcons.

Regards.

Hi Sean,

I understand your point, but I don't see how an event limits the way someone handles the submit (ajax reqs/form submit can be handled inside events too).
Instead, providing both cases (event and selectors) gives even more options for those who choose different ways to handle it
If problem is limiting a dev choice, you should definitely restore those methods from wizard v2 , since I handle navigation in ways that are not possible with steppers and their apis.

So, will you please add the "kt.stepper.submit" event in a future release?

About Icons : you are right, I meant the "Duotone" section tha is marked as deprecated. Anyway, while updating my Accordions, I noticed that Accordions' icons don't show properly (I copied the example "Basic Accordion"). After further tests, any KeenIcons is showed incorrectly (just a box as if the icon is not in the theme). Can you check?

Best regards
DR

Hi,

Noted on the kt.stepper.submit suggestion. We will consider it in the next update.

Regarding the KeenIcons. It seems the icon's CSS and font files is not bundled in your build. Can you double check if KeenIcons source exists in your project src/plugins/keenicons and its being compiled and included in the plugins.bundle.css.

If you need any further help can you please provide a test link to your so I can check it online and debug your page and assets. Are you using gulp or webpack build ? Please also make sure your gulp or webpack config has KeenIcons include code. If you referred to the latest Keen v3.0 fully all should work as expected.

Regards.

Hi Sean,

Thanks for the event suggestion.

About icons: I have checked it out , I am using Gulp and haven't modified the gulp config. Icons are being added to the plugin.bundle.css and only ki-duotone is not showing correctly ( ki-solid and ki-outline icons are ok). But I wouldn't investigate any further since i have chosen to stick to LineAwesome.

Sorry for one last thing : I have noticed that there are no more outlined checkboxes. I used them a lot since they were much better looking than normal checkboxes, and the ones in bt5 are really ugly. Do you estimate to bring them back?

Regards

Hi,

The duotone type of KeenIcons requires inner icon paths so you will need to copy and paste the complete icon code from the KeenIcons Docs:

<i class="ki-duotone ki-triangle">
 <i class="path1"></i>
 <i class="path2"></i>
 <i class="path3"></i>
</i>

Hi Sean,

I have found out where the error was.
In my css I overwrite the font theme, as we don't like the original font (we prefer keen v2 font) .
In case ki icons, when there is a ki-duotone class , font is correctly overwritten by keen's css on that element, but not on its inner elements. Why this creates an empty box only with ki-duotone (and not ki-solid or ki-outline) i don't know.
But, as said, I think we won't use these icons.

Let me know for outlined checkboxes.

best regards

Hi,

Keen v3 has the outlined checkbox option as you can check here. However, the checked state of the outlined checkbox will be with a solid background according to our UI/UX guidelines in Keen v3 design.

If you like to use the outline checkbox/radio you can customize checkbox and radio checked state bg color and icon colors in the src/sass/components/_variables.scss as shown below:

$form-check-input-checked-color: $primary !default;
$form-check-input-checked-bg-color: transprent !default;

Hi Sean,

sorry to bother you , but I don't see any "outline" option in the docs.
Which examples are you referring to?

Hi,

The default style is solid bg for checked radio and checkbox as shown here.
If you make the above changes in SASS and recompile the assets you will globally change the radio and checkbox style to outline style.

Regards.