Sorry. I found this answer myself, which led to another problem I’ll post separately. Thanks

No problem, glad you were able to find the answer you were looking for! Let us know if you have any other questions or issues.

Hello hdlp09,

Thank you for reaching out to us regarding the issue you’re facing with the dom.js file. We understand the concern about duplicated events when using importmaps with Ruby on Rails and Hotwire.

The “dom.js is a built-in mini library created to manipulate the dom element inspired by jQuery. We wrote this library to keep the final code size small by removing unnecessary functions in jQuery. You can access the code of dom.js at the following path /node_modules/@left4code/tw-starter/dist/js/dom.js. To remove events attached with this library, you can use the following code example:

$("#selector").replaceWith($('#selector').clone());

https://stackoverflow.com/questions/9251837/how-to-remove-all-listeners-in-an-element#answer-28375061

We hope this solution will be helpful in resolving your issue. If you need further assistance, please don’t hesitate to reach out to us again.

Best regards, Left4code Team

It worked. I think you should include this in another release, and maybe add something closer to jQuery off method to avoid this type of issues. Because now for every event a need to remove and clone all elements, not a very clean solution.

Hi there,

Thank you for the feedback! I’m glad to hear that the solution worked for you. We strive to continuously improve our package, so we appreciate any suggestions from our users.

Actually, I have some good news for you! We have just released an update for the `.off()` method that includes a cleaner solution to avoid these types of issues. To update the package, please run `yarn add @left4code/tw-starter`.

Thank you for using our package and for your valuable feedback. If you have any other suggestions or issues, please don’t hesitate to reach out to us.

Best regards.

Hello uwsolu,

Thanks for reaching out to us again. In order to better assist you with your issue, could you please provide us with your email address and the version of the Midone theme you are using? This will help us to send you an example project without the side-nav animation.

Regarding the mix command, you can change the dist/css/_app.css to dist/css/app.css in the webpack.mix.js file if that’s what you would like.

We are looking forward to hearing back from you soon.

Best regards, Left4code Team

Hello. Thank you Left4code. The version will be Enigma v1.0.5. I asked this question because it would be more convenient for content that frequently goes back and forth between menus without fading. Can I write my email address here?

Of course! You can feel free to email us at leftforcode@gmail.com with your email address. We would be more than happy to send you the example project without the side-nav animation. Thank you for choosing Enigma v1.0.5 and we hope you find it to be a convenient solution for your content.

Dear adminh1,

Thank you for reaching out to us regarding the challenges you are facing with your implementation of data tables, date pickers, modal dialogs, and tab controls. I understand that you are encountering difficulties in binding data to tables, referencing the standard jQuery library in your script tags, and ensuring that sub-menu items remain highlighted and open when selected.

1. To customize the data in Tabulator, you need to update the code in the following file /src/js/tabulator.js. In this file, you can change the columns and other properties from the Tabulator configuration. Then, you need to compile the JS assets using the command yarn run watch.

2. Currently, we are not using jQuery. We have written a built-in mini library called ‘dom.js’ which is used to manipulate the DOM elements and is inspired by jQuery. We wrote this library to keep the final code size small by removing unnecessary functions in jQuery. You can access the code of dom.js at the following path: /node_modules/@left4code/tw-starter/dist/js/dom.js.

However, we can replace this plugin with jQuery if you require the full functionality of jQuery. First, we need to install jQuery using the command ‘yarn add jquery’. Then, access the file at /src/js/bootstrap.js and replace the following line.”

// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";

// Replace this line
// import dom from "@left4code/tw-starter/dist/js/dom";

// To this
import jquery from "jquery";

// Set plugins globally
window.helper = helper;
window.Popper = Popper;

// Replace this line
// window.$ = dom;

// To this
window.$ = jquery;

After that, you can use the functions in jQuery as usual.

3. To activate the active side menu, you need to manually add the class “side-side-menu—active” to the active menu and “side-menu__sub-open” to the active submenu dropdown. You can do this on the backend side. For more details, you can check out the following element structure.

https://i.imgur.com/3dWuLZj.png

Please use incognito if you are using chrome or use another browser if you can’t open the above link.

We hope this solution will be helpful in resolving your issue. If you need further assistance, please don’t hesitate to reach out to us again.

Best regards, Left4code Team

Hello!

Thanks for reaching out. To change the format of your date picker, you can follow these steps:

1. Open the file “src/js/datepicker.js”.
2. On line 15, you can change the format to one of the following options: “DD-MM-YYYY”, “MM-YYYY”, “YYYY”, or “DD”.
3. The format option should be set to the desired format you would like to use.

Let me know if you have any other questions or if there’s anything else I can assist with.

Hi there,

Thank you for reaching out to us,

The latest updates of the package @left4code/tw-starter v3+ were released for Tailwind 3+, in the latest version, the Midone package doesn’t use SASS anymore and only uses regular CSS because of a compatibility issue with Tailwind.

You can see the code in ”/node_modules/@left4code/tw-starter/dist/*” for more details.

Hi,

Thank you for reaching out to us,

The short answer is, yes, it’s possible. We only need to add the dark mode class to the root HTML element.

Is it possible to add this item in future updates?

Hi there,

Sorry for the late response,

Unfortunately, at this time our team doesn’t have any integration experience with sveltekit or the boilerplate that works with svelte.

Please don’t hesitate to contact us if you have any other questions.

Note : For each Api call using the middleware auth:sanctum, we are redirected to the home page

Hi there,

Sorry for the late reply,

Actually, we have never used `Datatable`, and this is not included in the Item Support because the use of plugins other than what we provide is the responsibility of each buyer.

But maybe you can try the following steps.

To use `Datatables` you need to install the package first.

yarn add jquery
yarn add datatables.net
yarn add datatables.net-dt

Create new file ”/src/js/datatable.js”.

var jquery       = require( 'jquery' );
var dt      = require( 'datatables.net' )( window, jquery);

let table = new DataTable('#example', {
    // options
});

Last step, import the last created file into app.js.

/*
 |--------------------------------------------------------------------------
 | Custom Components
 |--------------------------------------------------------------------------
 |
 | Import JS custom components.
 |
 */
import "./maps";
import "./chat";
import "./show-modal";
import "./show-slide-over";
import "./show-dropdown";
import "./search";
import "./copy-code";
import "./show-code";
import "./side-menu";
import "./mobile-menu";
import "./side-menu-tooltip";
import "./dark-mode-switcher";

// Import last created datatable file
import "./datatable";

Run `yarn run watch` to recompile the assets.

Hope this helps.

Hi,

Thank you for reaching out to us,

The XD design file is currently only available for Rubick version, the first version of Midone. You can check it inside the Rubick version directory.

Hi,

Thank you for reaching out to us,

Unfortunately, We currently do not provide customization service.

Hi,

Thank you for reaching out to us,

Unfortunately, we don’t use bootstrap, it’s a Tailwind template.

Hi,

Sorry for the late reply,

Just had time to make a sample project. We have sent the file, please check your email.

Hi there,

Thank you for reaching out to us,

The XD design files are currently only available for the Rubick version.
https://prnt.sc/17tcd3a
Best regards, Left4code Team