AdminKit is a free & open-source HTML dashboard & admin template based on Bootstrap 5

The system dropdown notifications (on the top navbar) break when inserting a link.

<a href="#" class="list-group-item">
    <div class="row g-0 align-items-center">
        <div class="col-2">
            <i class="text-primary" data-feather="info"></i>
        </div>
        <div class="col-10">
            <div class="text-dark">System Notification</div>
            <div class="text-muted small mt-1">This is a test notification...</div>
            <div class="text-muted small mt-1">4 hours ago</div>
            <div class="text-muted small mt-1"><a href="#">mark as read</a></div>
        </div>
    </div>
</a>

It seems like some javascript is going crazy here because it grabs the list-group-item link tag and repeats it multiple times on it's own.. No, I didn't duplicate it and mess up the HTML, it automatically is grabbing it and inserting the link in there. When I remove the link tag from mark as read, it works fine.

Current Behavior 😯

I've generated a table with th and td tags, and on clicking the th element it suddenly re-order to a-z. It looks like it will do only if the table has left/right th and td.

Expected Behavior 🤔

Do nothing on click, never asked this. Cannot find an example on the demo site

Steps to Reproduce 🕹

Steps:

1. Create a card with table element and use class table
2. Setup the code like below.
3. Click on the TH element inside the browser
4. You will see it re-order according to values.

<!-- Example HTML -->
<table class="table">
    <tbody>
        <tr>
            <th>Element 1</th>
            <td>Value element 1</td>
        </tr>
        <tr>
            <th>Ascending name</th>
            <td>Value ascending</td>
        </tr>
        <tr>
            <th>Descending name</th>
            <td>value descending</td>
        </tr>
    </tbody>
</table>

Your Environment 🌎

• Browser: Google Chrome 104.0.5112.101
• OS: Windows 10
• Screen size: Different screens/sizes same behavior

Screenshots 📷

Not available, this can only be checked on active screen

Summary 💡

The adminkit library is lacking an official integration with a library that enhances dropdowns, for example select2. A library like that is a crucial component to providing more user friendly forms for the user. If we choose to implement such library on our adminkit themed website, the dropdown's styling does not fit with adminkit. It's a lot of work to manually make it all look neatly integrated. Therefore, it would be very appreciated to have one of those libraries styled for us with the kit.

Examples 🌈

Straight after dropping in select2:

I still haven't covered all the different select2 configurations, or all the adminkit themes, but this is a nice preview of what it could look like. I did this by manually overwriting some CSS:

Motivation 🔦

Searching in a dropdown with a lot of items is easier with a library like select2. They provide a searchbox and also async ajax searching. They also allow multi selects with a pills like visualisation.

Current Behavior 😯

When you put a .table-striped inside a .card, and you have an odd row at the top or bottom, the top or bottom border radius respectively of the card gets ignored. Giving you a sharp corner.

Expected Behavior 🤔

The card keeps its border radius.

Steps to Reproduce 🕹

Most basic:

<div class="card">
    <table class="table table-striped">
        <tbody>
            <tr><td>Something 1</td></tr>
            <tr><td>Something 2</td></tr>
        </tbody>
    </table>
</div>

Your Environment 🌎

• Browser: Chrome 102.0.5005.63
• OS: Windows 10
• Screen size: no impact

Screenshots 📷

The phenomenon can be seen on the adminkit live demo page (Striped Rows section: https://demo.adminkit.io/tables-bootstrap.html Here is a gif of the demo page (look at bottom radiuses):

For me it looks like this (look at top radiuses):

I was not able to start the project with the configured packages and their versions.

Current Behavior 😯

The project is not running with npm start. It receives the following error:

$ npm run start

> @adminkit/[email protected] start
> webpack serve --config webpack.config.js --progress

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:173:25)
    at ServeCommand.apply (/Users/workspace/frontend/adminkit/node_modules/@webpack-cli/serve/lib/index.js:41:19)
    at loadCommandByName (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:909:35)
    at async Command.<anonymous> (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:1485:17)
    at async Promise.all (index 0)
    at async WebpackCLI.run (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/webpack-cli.js:1523:9)
    at async runCLI (/Users/workspace/frontend/adminkit/node_modules/webpack-cli/lib/bootstrap.js:11:9)

Expected Behavior 🤔

The project should correctly start with npm start

Steps to Reproduce 🕹

Steps:

1. check out the project
2. perform npm i
3. perform npm start
4. check the command line output

Your Environment 🌎

• OS: MacOS
• node: 16.13.0
• npm: 8.3.1

Additional Information

I took a quick check on the options variable in webpack-cli. And somehow the options variable is a promise (rejected) and not an array. Upgrading the dependency webpack-cli to 4.9.1 solves it for me.

To reproduce, browse in a mobile viewer and go to https://demo.adminkit.io/pages-clients.html

Scroll down to Angela Ramos and click on the three dots:

The menu should appear there, instead it's below the rest of the content.

With Yarn 2, I"m getting a warning message about babel/polyfill. (It's in AdminkitPro, but I think it has the same issue for the free version).

In my webpack, I'm using

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

Here's the error:

    at C (/home/tac/ca/ac/.yarn/releases/yarn-berry.cjs:2:364565)
[email protected]:~/ca/ac$ yarn install
➤ YN0000: ┌ Resolution step
➤ YN0061: │ @babel/[email protected]:7.12.1 is deprecated: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
➤ YN0061: │ [email protected]:2.6.12 is deprecated: [email protected]<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

In Yarn 1:

yarn install
yarn install v1.23.0-20210103.1434
[1/4] Resolving packages...
warning @symfony/webpack-encore > webpack-dev-server > sockjs > [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @symfony/webpack-encore > resolve-url-loader > rework > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @symfony/webpack-encore > resolve-url-loader > rework > css > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning @symfony/webpack-encore > resolve-url-loader > rework > css > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning adminkit-pro > @babel/[email protected]: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
warning adminkit-pro > @babel/polyfill > [email protected]: [email protected]<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

I'd love to be able to install this with

yarn add adminkit/adminkit

Alas, it looks like there an old, unrelated adminkit there already.

https://yarnpkg.com/?q=adminkit&p=1

I think this is what will help me, but I'll create another issue that gets more to the core of what I'm confused about.

git clone .. followed by npm install gives this error:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.17.tgz - Not found
npm ERR! 404 
npm ERR! 404  '@babel/[email protected]://registry.npmjs.org/@babel/traverse/-/traverse-7.12.17.tgz' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

Also, a big plus of bootstrap 5 is using popper 2, but it seems that it's trying to install popper 1.

bootstrap 5 beta 2 is out, and they've indicated it's pretty close to final. Can you bump all the dependencies please?

Bumps sass-loader from 10.0.5 to 10.1.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

An error in the log of the page "pages-sign-in.html" also signup page of your template is visible in the console log with the following stack trace: link : https://demo.adminkit.io/pages-sign-up.html

Uncaught TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at t.e.init (simplebar.esm.js:401)
    at new t (simplebar.esm.js:354)
    at HTMLDocument.<anonymous> (sidebar.js:6)

this causes crashes in javascript sometimes. browser is the brand new chromium edge, tested also on google chrome same error "Invalid value used as weak map key"