Hello achmadarka,

I’m really sorry for the delay in getting back to you. We have responded to your message in the previous thread. Please check it for further information. If you have any additional questions or need further assistance, please let us know. We’re here to help!

Hello achmadarka,

I’m really sorry for the delay in getting back to you. I understand how frustrating it can be to have to wait for a response. Thank you so much for your understanding and patience.

It looks like there might be a small issue with the ‘z-index’ property. Don’t worry, I’ll guide you through the steps to fix it. Please open the file ’/src/assets/css/components/_tom-select.css’ and locate the selector ’.ts-dropdown’. Once you find it, you can simply adjust the ‘z-index’ value to make sure it’s higher than the canvas of Chart.js.

If you need any further assistance, feel free to ask!

Hello matias119,

I’m really sorry for the delay in getting back to you. I understand how frustrating it can be to have to wait for a response. Thank you so much for your understanding and patience.

Could you please provide more detailed information about the error? Perhaps a screenshot would be helpful as well.

Hi!

Please try to run: npm run dev and npm run build with this package.json file:

this package only updates currents versions

{ “name”: “enigma-vue”, “private”: true, “version”: “0.0.0”, “scripts”: { “dev”: “vite”, “build”: “vue-tsc && vite build”, “preview”: “vite preview” }, “dependencies”: { ”@ckeditor/ckeditor5-build-balloon”: “^{38.0.1”, ”@ckeditor/ckeditor5-build-balloon-block”: “}38.0.1”, ”@ckeditor/ckeditor5-build-classic”: “^{38.0.1”, ”@ckeditor/ckeditor5-build-decoupled-document”: “}38.0.1”, ”@ckeditor/ckeditor5-build-inline”: “^{38.0.1”, ”@fullcalendar/daygrid”: “}6.1.8”, ”@fullcalendar/interaction”: “^{6.1.8”, ”@fullcalendar/list”: “}6.1.8”, ”@fullcalendar/timegrid”: “^{6.1.8”, ”@fullcalendar/vue3”: “}6.1.8”, ”@googlemaps/js-api-loader”: “^{1.16.1”, ”@googlemaps/markerclusterer”: “}2.2.2”, ”@headlessui/vue”: “^{1.7.14”, ”@vuelidate/core”: “}2.0.2”, ”@vuelidate/validators”: “^{2.0.2”, “chart.js”: “}4.3.0”, “dayjs”: “^{1.11.8”, “dropzone”: “}6.0.0-beta.2”, “flat”: “^{5.0.2”, “highlight.js”: “}11.8.0”, “js-beautify”: “^{1.14.8”, “leaflet”: “}1.9.4”, “leaflet.markercluster”: “^{1.5.3”, “litepicker”: “}2.0.12”, “lucide”: “^{0.240.0”, “lucide-vue-next”: “}0.240.0”, “pinia”: “^{2.1.3”, “simplebar”: “}6.2.5”, “tabulator-tables”: “^{5.5.0”, “tiny-slider”: “}2.9.4”, “tippy.js”: “^{6.3.7”, “toastify-js”: “}1.12.0”, “tom-select”: “^{2.2.2”, “vue”: “}3.3.4”, “vue-router”: “^{4.2.2”, “xlsx”: “}0.18.5”, “zoom-vanilla.js”: “^{2.0.6” }, “devDependencies”: { ”@tailwindcss/forms”: “}0.5.3”, ”@types/dropzone”: “^{5.7.4”, ”@types/flat”: “}5.0.2”, ”@types/google.maps”: “^{3.53.2”, ”@types/js-beautify”: “}1.13.3”, ”@types/leaflet”: “^{1.9.3”, ”@types/leaflet.markercluster”: “}1.5.1”, ”@types/lodash”: “^{4.14.195”, ”@types/tabulator-tables”: “}5.32.1”, ”@types/toastify-js”: “^{1.11.1”, ”@vitejs/plugin-vue”: “}4.2.3”, “autoprefixer”: “^{10.4.14”, “lodash”: “}4.17.21”, “postcss”: “^{8.4.24”, “postcss-advanced-variables”: “}3.0.1”, “postcss-import”: “^{15.1.0”, “postcss-nesting”: “}11.2.2”, “tailwind-merge”: “^{1.13.0”, “tailwindcss”: “3.3.2”, “typescript”: “}5.1.3”, “vite”: “^{4.3.9”, “vue-tsc”: “}1.6.5” } }

Hi there,

Thank you for reaching out to us. We’re sorry to hear that you’re facing issues while running `npm run dev` and `npm run build` with the provided package.json file.

It seems that there might be some differences in the versions of dependencies you’re using compared to the ones specified in the Midone template. We want to assure you that we’re here to help, but managing dependencies is a responsibility that lies with each buyer. Different versions of packages can sometimes cause variations in typings and support.

To address the specific issue you mentioned with `vue-sfc`, we suggest trying to update it by running the command `yarn add vue`. This could potentially resolve the problem you’re facing.

If you have any further questions or need additional assistance, please don’t hesitate to ask. We’re dedicated to providing you with the support you need.

Thank you for your understanding and patience.

Warm regards, Left4code Team

Hello michaelmocan,

I’m really sorry for the delay in getting back to you. I understand how frustrating it can be to have to wait for a response. Thank you so much for your understanding and patience.

Unfortunately, the Midone theme doesn’t have a built-in option to directly route to a specific child page when clicking on the parent menu. However, don’t worry! I’m here to help you with a workaround.

To achieve the desired functionality, we’ll need to make a few adjustments to the code. Don’t worry—I’ll guide you through each step!

First, let’s open the file located at ”/src/stores/side-menu.ts”. Inside that file, add the following line of code:

Next, we’ll navigate to the file at ”/src/layouts/SideMenu/side-menu.ts”. Inside that file, add the following line of code:

Once you’ve made these changes, you can use the “forceRedirect” property to accomplish the routing behavior you’re looking for.

I hope this explanation makes it clearer for you. If you have any further questions or need additional assistance, please feel free to ask.

Amazing, that worked great. No problem about the delay. Thanks very much

You’re welcome! If you have any more questions, feel free to ask. I’m here to help!

Hello,

Thank you for your kind words and apologies for the delay in our response. We appreciate your patience.

To set a minimum date for the endDate after selecting the startDate, you can use `minDays` property, please refer to this link.

Please check the following code for the clear input example:

<template>
  <div class="relative">
    <input
      v-model="inputValue" 
      class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring focus:border-blue-500" 
      placeholder="Enter value" 
    />
    <button
      v-show="inputValue !== ''" 
      @click="clearInput" 
      class="absolute right-0 top-0 h-full flex items-center pr-2" 
    >
      <svg
        xmlns="http://www.w3.org/2000/svg" 
        class="h-5 w-5 text-gray-400 cursor-pointer hover:text-gray-600" 
        viewBox="0 0 20 20" 
        fill="currentColor" 
      >
        <path
          fill-rule="evenodd" 
          d="M10 0C4.475 0 0 4.475 0 10s4.475 10 10 10 10-4.475 10-10S15.525 0 10 0zm5 10a.999.999 0 01-.293.707l-4 4a.999.999 0 01-1.414 0l-4-4A.999.999 0 015 10a.999.999 0 111.414-1.414L10 8.586l3.293-3.293A.999.999 0 1115 7z" 
          clip-rule="evenodd" 
        />
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    clearInput() {
      this.inputValue = '';
    },
  },
};
</script>

<style>
/* Add any additional custom styling here */
</style>

How can i get event after select date? This theme version before change to Typescript can set minDate for endDate after choose startDate for Litepicker.

endDateRef.Litepicker.setOptions({
       minDate: '2023-06-30'
 })

And button clear FormInput I can set in ”/src/base-components/Form”?

Please help. Thank you.

Hi,

I sincerely apologize for the delayed response, and I appreciate your understanding.

Certainly! You can access the Litepicker instance as follows:

import Litepicker, { LitepickerElement } from "../base-components/Litepicker/Litepicker.vue";
import { ref, provide } from "vue";

const litepickerRef = ref<LitepickerElement>();
provide("bind[litepickerRef]", (el: LitepickerElement) => {
  litepickerRef.value = el;

  // Get instance here
  console.log(litepickerRef.value.litePickerInstance)
});

<Litepicker
              refKey="litepickerRef" 
              v-model="date" 
              :options="{
                autoApply: false,
                showWeekNumbers: true,
                dropdowns: {
                  minYear: 1990,
                  maxYear: null,
                  months: true,
                  years: true,
                },
              }" 
              class="block w-56 mx-auto" 
            />

Feel free to reach out if you have any more questions or need further assistance.

Thank you for your patience.

Best regards

Hello,

Thank you for reporting this issue. It appears to be related to the latest update of the ‘vue-sfc-compiler’ that was released a few days ago.

https://github.com/vuejs/core/issues/8286

We have just released an update to address this issue. Please download the project again and replace the following files:

- /src/base-components
- /src/components/mobile-menu
- /src/layouts


By replacing these files with the updated versions, the issue should be resolved.

If you have any further questions or need assistance, please feel free to ask.

Hello,

Thank you for reporting this issue. It appears to be related to the latest update of the ‘vue-sfc-compiler’ that was released a few days ago.

https://github.com/vuejs/core/issues/8286

We have just released an update to address this issue. Please download the project again and replace the following files:

- /src/base-components
- /src/components/mobile-menu
- /src/layouts


By replacing these files with the updated versions, the issue should be resolved.

If you have any further questions or need assistance, please feel free to ask.

thank you! This fixed it!!!

You’re welcome! I’m glad to hear that the solution worked for you.

Hello,

Thank you so much for your help. But unfortunately, I’m still having the same issue.

It works perfectly when I run “yarn run dev” and i’m able to test it on localhost:5173

I have followed your suggestion without success.

I have also tried it on a newly created VM without success, so I’m not sure if it is my environment that is the problem.

Maybe I’m following the wrong steps.

I’m running windows 11 and I have installed Node.js 18.16.0. I’ve installed yarn using the steps on this page: https://yarnpkg.com/getting-started/install

I then ran “yarn install” successfully. But when i run “yarn build” i get the following error.

Hi Left4Code,

I managed to reslove the issue by adding ”.yarn/**” to the build.commonjsOptions.includes array in the vite.config.js file.

my vite.config.js file looks like this now and the project can build ! yaaay !

Hello,

That’s great to hear that you were able to resolve the issue by modifying the vite.config.js file. We’re glad that the project can now build successfully! If you have any further questions or need any more assistance, please don’t hesitate to reach out.

Best regards, Left4Code Team

Nevermind I just forgot the import…

Hi there!

I’m so happy to hear that you were able to resolve the issue. If you need any further assistance or have any questions, please don’t hesitate to ask. We’re always here to help. Have a wonderful day!

Hi,

Thank you for reaching out. We’re glad to hear that you received an update notification for your project. To apply the update, you’ll need to update the specific file or directory below.

- “package.json” - ”/src/layouts/SideMenu/SideMenu.vue” - ”/src/layouts/SideMenu/side-menu.ts” - ”/src/layouts/SimpleMenu/SimpleMenu.vue” - ”/src/layouts/SimpleMenu/simple-menu.ts” - ”/src/layouts/TopMenu/TopMenu.vue” - ”/src/layouts/SimpleMenu/top-menu.ts” - ”/src/base-components/LeafletMapLoader” - ”/src/base-components/Headless”

In this update, we focused on enhancing the typing for the latest version of HeadlessUI. We have also added a new component for Leaflet maps in this update. This new component will provide enhanced functionality and options for integrating maps into your projects.

As for the changelog or release notes, you can find them at the end of the item page description. If you have any further questions or need additional assistance, please feel free to ask. We’re here to help!

Best regards, Left4code Team

Hi,

Thank you for reaching out. We’re glad to hear that you received an update notification for your project. To apply the update, you’ll need to update the specific file or directory below.

- “package.json” - ”/src/layouts/SideMenu/SideMenu.vue” - ”/src/layouts/SideMenu/side-menu.ts” - ”/src/layouts/SimpleMenu/SimpleMenu.vue” - ”/src/layouts/SimpleMenu/simple-menu.ts” - ”/src/layouts/TopMenu/TopMenu.vue” - ”/src/layouts/SimpleMenu/top-menu.ts” - ”/src/base-components/LeafletMapLoader” - ”/src/base-components/Headless”

In this update, we focused on enhancing the typing for the latest version of HeadlessUI. We have also added a new component for Leaflet maps in this update. This new component will provide enhanced functionality and options for integrating maps into your projects.

As for the changelog or release notes, you can find them at the end of the item page description. If you have any further questions or need additional assistance, please feel free to ask. We’re here to help!

Best regards, Left4code Team

Thank you for contacting us! We really appreciate your support and we are so grateful for your recent purchase of two licenses. We hope that you find our product valuable and that it meets all your expectations.

We have released an update for the Typescript version. Please update the following file in your theme directory ’/src/layouts’ accordingly. After that, you can use the following code to enable a specific menu on each page.

Please don’t hesitate to reach out if you have any further questions or concerns.

Very nice work, thanks for help.

It was a pleasure assisting you. If you have any further questions or concerns, please don’t hesitate to reach out to me again. Have a great day!

Hello there,

Thank you for reaching out to us.

Based on the error message you provided it looks like the error message you’re receiving is related to the `Litepicker` interface. We have released an update for this in a previous update. Please re-download the latest version and replace this component `/src/base-components/Litepicker`. Please let us know if you have any further questions or concerns.

Best regards,

Hi dianemambe10,

We apologize for the late reply, and we appreciate your patience.

Regarding your question, assuming you have an array of user roles and you want to filter the menu items based on those roles, you could use the following code:

import { computed } from "vue";
import { useSideMenuStore, Menu } from "./useSideMenuStore";

export const useFilteredMenu = (userRoles: string[]) => {
  const sideMenuStore = useSideMenuStore();

  const filteredMenu = computed(() =>
    sideMenuStore.menu.filter((menuItem) => {
      // Check if the menu item has the "ignore" property set to true
      if (menuItem.ignore) {
        return false;
      }

      // If the menu item has a sub-menu, filter the sub-menu recursively
      if (menuItem.subMenu) {
        const filteredSubMenu = menuItem.subMenu.filter((subMenuItem) =>
          hasAccess(subMenuItem, userRoles)
        );
        return filteredSubMenu.length > 0;
      }

      // If the menu item doesn't have a sub-menu, check if the user has access to it
      return hasAccess(menuItem, userRoles);
    })
  );

  const hasAccess = (menuItem: Menu, userRoles: string[]) => {
    // Check if the menu item has a "roles" property and if the user has one of those roles
    if (menuItem.roles && menuItem.roles.some((role) => userRoles.includes(role))) {
      return true;
    }

    // If the menu item doesn't have a "roles" property, the user has access to it
    if (!menuItem.roles) {
      return true;
    }

    // If the menu item has a "roles" property and the user doesn't have one of those roles, they don't have access
    return false;
  };

  return {
    filteredMenu,
  };
};

This code defines a useFilteredMenu function that takes an array of user roles as a parameter and returns a computed property filteredMenu, which contains only the menu items that the user has access to based on their roles.

The function iterates through the menu items recursively and filters out the items that have the “ignore” property set to true. For the items that don’t have the “ignore” property, it checks if the user has access to them based on their roles. If the item has a sub-menu, it filters the sub-menu recursively. Finally, it returns an array containing only the items that the user has access to.

To use this code, you would import the useFilteredMenu function and pass in the user roles as a parameter, like this:

import { useFilteredMenu } from "./useFilteredMenu";

const userRoles = ["admin", "editor"];
const { filteredMenu } = useFilteredMenu(userRoles);

console.log(filteredMenu.value); // This will output the filtered menu items

I hope this helps! Let me know if you have any further questions or concerns.

Hello,

We want to extend our sincerest apologies for the delay in getting back to you. We understand how frustrating it can be to wait, and we appreciate your patience. In regards to your query, could you please provide us with more detailed step-by-step information on reproducing the issue? The code you provided is a bit difficult to read, so it would be helpful if you could provide us with a screenshot for more clarity. This will allow us to assist you more effectively.

Thank you for your understanding and cooperation. We’re here to help!

Hi Team,

Please see the image by link: https://imgur.com/a/99kx18p

Thank you.

Hello,

Thank you for your reply. It seems that there is nothing wrong with the code you provided.

If you are facing any issues or need assistance with something specific, please provide more details about the problem or error message you are encountering. Additionally, if there are any relevant code snippets or steps to reproduce the issue, please include them in your response.

We’re here to help, so please let us know how we can assist you further.

Thank you, Left4code Team

lots of typo of “devider” in css. Not healthy for OCD user

Hi,

Thank you for bringing this to our attention. We apologize for any inconvenience caused by the typos.

We want to let you know that we have released an update to fix this issue in our latest update. We appreciate your feedback and support in making our product better.

also if possible to share your eslint or prettier format also, so easier to develop using the template with the same format

Dear silinapas,

Thank you so much for your email and for choosing our template! We truly appreciate your business and your kind words about our product. I am so sorry for the delay in my response, but please know that we value you as a customer and I will do my best to assist you with your question as promptly as possible.

Regarding your question about the breadcrumb functionality, unfortunately, this is not available by default in our template. However, we have a code example that you may find helpful. Please see the code below:

/src/components/TopBar/TopBar.vue

import { useRoute, RouteRecordName } from "vue-router";
import { useSideMenuStore, Menu as MenuState } from "../../stores/side-menu";

// Get list of side menu items
const sideMenuStore = useSideMenuStore();

// We can call vue-router built in function to get current route name
const route = useRoute();

// Recursively find related menu item base on page name
function findMenu(
  menu: Array<MenuState | "divider">,
  pageName: RouteRecordName | null | undefined
): MenuState[] {
  let result: MenuState[] = [];
  for (let item of menu) {
    if (typeof item !== "string" && item.pageName === pageName) {
      result.push(item);
      return result;
    } else if (typeof item !== "string" && item.subMenu) {
      const found = findMenu(item.subMenu, pageName);
      if (found.length > 0) {
        result = [item, ...found];
        return result;
      }
    }
  }
  return result;
}

// Store the final result for breadcrumbs
const breadcrumbs = ref<Array<MenuState>>(
  findMenu(sideMenuStore.menu, route.name)
);

// Watch every route change to restore the breadcrumb links
watch(route, () => {
  breadcrumbs.value = findMenu(sideMenuStore.menu, route.name);
});

/src/components/TopBar/TopBar.vue

<!-- Example Usage -->
<Breadcrumb class="hidden mr-auto -intro-x sm:flex">
      <Breadcrumb.Link
        v-for="(menu, key) in breadcrumbs" 
        :to="menu.pageName" 
        :index="key" 
        :active="menu.pageName === route.name" 
        >{{ menu.title }}</Breadcrumb.Link
      >
    </Breadcrumb>

I hope this information is helpful. If you have any further questions or concerns, please do not hesitate to reach out to us. Thank you for your patience and understanding.

Best regards, Left4code Team

Dear vivano76,

Thank you for reaching out and I apologize for the delayed response. I’m sorry to hear that you are encountering an error with the source code of the VueJS template you recently purchased.

It seems that there may be an issue with the latest version of Tailwind, which is causing the error you mentioned. As a temporary solution, could you please try using the previous version of Tailwind (version 3.2.7) until we find a permanent solution for this issue?

Please run the following command:

yarn add tailwindcss@3.2.7

If you continue to experience any issues, please don’t hesitate to reach out.

Best regards, Left4code Team

Hello!

We are happy to inform you that the issue has been resolved in the latest version of Tailwind (3.3.1) and you can check the changelog at the following link.
https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.1
We recommend that you update your Tailwind version to the latest release. To do this, please run the following command:

yarn add tailwindcss

Please let us know if you have any other questions or concerns, we are always here to help.

Best regards, Left4code Team

Dear vivano76,

Thank you for reaching out and I apologize for the delayed response. I’m sorry to hear that you are encountering an error with the source code of the VueJS template you recently purchased.

It seems that there may be an issue with the latest version of Tailwind, which is causing the error you mentioned. As a temporary solution, could you please try using the previous version of Tailwind (version 3.2.7) until we find a permanent solution for this issue?

Please run the following command:

yarn add tailwindcss@3.2.7

If you continue to experience any issues, please don’t hesitate to reach out.

Best regards, Left4code Team

Hello!

We are happy to inform you that the issue has been resolved in the latest version of Tailwind (3.3.1) and you can check the changelog at the following link.
https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.1
We recommend that you update your Tailwind version to the latest release. To do this, please run the following command:

yarn add tailwindcss

Please let us know if you have any other questions or concerns, we are always here to help.

Best regards, Left4code Team

Hi there,

Thank you for reaching out to us. Regarding your first question on setting the active menu in child paths, we recommend using inject(“forceActiveMenu”)(“page-name”) to force the active menu. You can refer to the screenshot we provided for a visual representation of how to use this feature.

Regarding your second question on using the “Menu Dropdown” component in the Tabulator formatter cell, unfortunately, this is not currently possible as we have migrated to HeadlessUI for our dropdown components.

Please let us know if you have any further questions or if there’s anything else we can help you with.

Best regards, Left4code Team

Hi Team,

Although I tried to using inject(“forceActiveMenu”)(“page-name”), it did not work in TypeScript.

Thank you.