shopperlabs/shopper v0.0.17

on GitHub

To upgrade to this release update shopper/framework to ^0.0.17

"require": {
   ....
   "shopper/framework": "^0.0.17",
}

Remember this is an pre-release, so some things might be broken. I have probably deleted some classes or Traits that you are using. If you have any concerns let me know.

What's New

• New components.php file to load all blade and livewire components used in shopper
• Laravel Livewire Tables to provide datatables
• Wire UI for Livewire forms input in #83

What's Changed

For the moment I do not recommend that you change the name of the prefix which is in the components.php config file. This is still experimental and may change to not generate errors or potential bugs. But you can now modify the livewire components used. This makes the system more configurable to adapt the solution to your needs. Just keep the same name but replace the component by your own.

// shopper/components.php

 'livewire' => [

        'account.devices' => Livewire\Account\Devices::class,
        'account.dropdown' => Livewire\Account\Dropdown::class,
        'account.password' => Livewire\Account\Password::class,
       ...

  ],

In your tailwind.config.js file you must add a new preset. You must recompile the css assets again to be able to enabled styles in features that you could have added

module.exports = {
    ...
    presets: [
        ...
        require('./vendor/shopper/framework/tailwind.config'),
    ],
    purge: [
        ...
       './vendor/shopper/framework/resources/**/*.blade.php',
    ],
    ...
}

Colors Customization

You can customize default colors to all components. Set default colors to input, card, inputs, selects, buttons and anything
Just extends tailwind colors and set your colors

const colors = require('tailwindcss/colors')
 
module.exports = {
    ...
    theme: {
        extend: {
            colors: {
                ...
                primary: colors.blue,
                secondary: colors.blueGray,
                gray: colors.blueGray,
                orange: colors.orange,
                success: colors.green,
                warning: colors.amber,
                negative: colors.red,
                info: colors.sky,
            },
        },
    },
    ...
}

After making all these changes you must add your css file to the list of additional css files in the system.php config file

// shopper/system.php
'resources' => [
        'stylesheets' => ['/css/app.css'],
        'scripts'     => [],
 ],

You can achieve the following result by changing the primary color of your tailwind.config.js file to colors.rose

Dark Mode

Full Changelog: v0.0.16...v0.0.17