bug: JS plugin is not working #2

chintanbanugaria · 2024-10-03T02:14:52Z

What version of FlyonUI are you using?

1.0.2

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

http://localhost (I dont have actual url)

Describe your issue

I tried to install UI kit in a blank laravel project (No other UI Kits Install). I followed all the steps as described in documentation but somehow the JS functionalities are not working. Here is my files:

app.js

import './bootstrap';
import "flyonui";
import { IStaticMethods}  from "flyonui/flyonui.js";
import "flyonui/plugin";


document.addEventListener('DOMContentLoaded', () => {
    const flyonui = new IStaticMethods();
    flyonui.autoInit();
});

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
        "./node_modules/flyonui/dist/js/*.js"
    ],
  theme: {
    extend: {},
  },
  plugins: [
      require("flyonui"),
      require("flyonui/plugin")
  ],
    flyonui: {
        themes: ['dark','corporate'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark",
        // "soft"]
        darkTheme: "dark", // name of one of the included themes for dark mode
        base: true, // applies background color and foreground color for root element by default
        styled: true, // include FlyonUI colors and design decisions for all components
        utils: true, // adds responsive and modifier utility classes
        vendors: false, // default is false when true add customize css for apexChart, editor.js, flatpickr, fullcalendar, notyf, raty-js
        logs: true, // Shows info about FlyonUI version and used config in the console when building your CSS
        themeRoot: ":root" // The element that receives theme color CSS variables
    }
}

application.blade.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite(['resources/css/app.css'])
</head>
<body>
    <div id="app">
        <div class="accordion accordion-shadow max-w-lg">
            <div class="accordion-item active" id="payment-shadow">
                <button class="accordion-toggle inline-flex items-center gap-x-4 px-5 py-4 text-start" aria-controls="payment-shadow-collapse" aria-expanded="true">
                    <span class="icon-[tabler--plus] accordion-item-active:hidden text-base-content size-4.5 block shrink-0"></span>
                    <span class="icon-[tabler--minus] accordion-item-active:block text-base-content size-4.5 hidden shrink-0"></span>
                    When is payment taken for my order?
                </button>
                <div id="payment-shadow-collapse" class="accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="payment-shadow" role="region">
                    <div class="px-5 pb-4">
                        <p class="text-base-content/80 font-normal">
                            Payment is taken during the checkout process when you pay for your order. The order number that appears on the
                            confirmation screen indicates payment has been successfully processed.
                        </p>
                    </div>
                </div>
            </div>
            <div class="accordion-item" id="delivery-shadow">
                <button class="accordion-toggle inline-flex items-center gap-x-4 px-5 py-4 text-start" aria-controls="delivery-shadow-collapse" aria-expanded="false">
                    <span class="icon-[tabler--plus] accordion-item-active:hidden text-base-content size-4.5 block shrink-0"></span>
                    <span class="icon-[tabler--minus] accordion-item-active:block text-base-content size-4.5 hidden shrink-0"></span>
                    How would you ship my order?
                </button>
                <div id="delivery-shadow-collapse" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="delivery-shadow" role="region">
                    <div class="px-5 pb-4">
                        <p class="text-base-content/80 font-normal">
                            For large products, we deliver your product via a third party logistics company offering you the “room of
                            choice” scheduled delivery service. For small products, we offer free parcel delivery.
                        </p>
                    </div>
                </div>
            </div>
            <div class="accordion-item" id="cancel̉-shadow">
                <button class="accordion-toggle inline-flex items-center gap-x-4 px-5 py-4 text-start" aria-controls="cancel̉-shadow-collapse" aria-expanded="false">
                    <span class="icon-[tabler--plus] accordion-item-active:hidden text-base-content size-4.5 block shrink-0"></span>
                    <span class="icon-[tabler--minus] accordion-item-active:block text-base-content size-4.5 hidden shrink-0"></span>
                    Can I cancel my order?
                </button>
                <div id="cancel̉-shadow-collapse" class="accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="cancel̉-shadow" role="region">
                    <div class="px-5 pb-4">
                        <p class="text-base-content/80 font-normal">
                            Scheduled delivery orders can be cancelled 72 hours prior to your selected delivery date for full refund.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
@vite('resources/js/app.js')
</html>

vite.config.js

import fs from 'fs';
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

When I run npm run dev I do get something like this:

Let me know what am I missing here.
P.S. First Issue on the repo !!! ✨.

The text was updated successfully, but these errors were encountered:

github-actions · 2024-10-03T02:15:09Z

Hi @chintanbanugaria

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

PruthviPraj00 · 2024-10-03T13:51:36Z

Hello @chintanbanugaria,

Apologies for the inconvenience caused earlier; the issue was on our end. We've gone ahead and updated the documentation to provide clearer guidance. You can now follow the instructions in the Quickstart guide to get FlyonUI up and running smoothly, whether you're using Webpack, Parcel, or other bundling tools.

To properly import the JavaScript in your project, please use the following import statement in your app.js file:

import "flyonui/flyonui";

This step is all you need to integrate the JS.

Additionally, we’ve included a zip file below for further reference. You can check the files inside for more examples or clarification.

laravel-fresh.zip

If you have any further questions or need additional assistance, don't hesitate to reach out! We're here to help.

Regards

chintanbanugaria · 2024-10-03T15:00:51Z

Thanks for getting back. I tried your suggestion but somehow accordian is not working. I added import "flyonui/flyonui"; in app.js and still not working. Do I need to initialize the instance for js functionalities to work ?

PruthviPraj00 · 2024-10-03T15:47:19Z

Hi @chintanbanugaria,

We’ve provided you with the zip file that includes FlyonUI integrated into Laravel. Have you had a chance to check it out?

chintanbanugaria · 2024-10-03T16:02:31Z

Yes actually I did. I copied the same changes to my app and still its not working. May be I missed something. I will check again by EoD today and get back to you. Thanks for catching up on this.

chintanbanugaria · 2024-10-03T17:22:56Z

There was an issue with my app.js regarding pusher credentials. All sorted now. Thanks for your help. Closing this issue.

chintanbanugaria closed this as completed Oct 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: JS plugin is not working #2

bug: JS plugin is not working #2

chintanbanugaria commented Oct 3, 2024 •

edited

Loading

github-actions bot commented Oct 3, 2024

PruthviPraj00 commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024

PruthviPraj00 commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024

bug: JS plugin is not working #2

bug: JS plugin is not working #2

Comments

chintanbanugaria commented Oct 3, 2024 • edited Loading

What version of FlyonUI are you using?

Which browsers are you seeing the problem on?

Reproduction URL

Describe your issue

github-actions bot commented Oct 3, 2024

PruthviPraj00 commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024

PruthviPraj00 commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024

chintanbanugaria commented Oct 3, 2024 •

edited

Loading