@invopop/alpine-kit NPM

Invopop Alpine Kit

This repository contains a collection of reusable components for Alpine.js and a centralized stylesheet for common elements such as inputs and buttons.

Getting Started

Prerequisites

Alpine.js v3

1. Include Alpine.js

Make sure to include Alpine.js in your module. You can include it from a CDN.

<script src="https://cdn.jsdelivr.net/npm/alpinejs@v3"></script>

2. Include common CSS stylesheet

Include the stylesheet for common elements, such as inputs and buttons.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@invopop/alpine-kit@0.0.33/style.css"
/>

3. Include Inter font from Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
  rel="stylesheet"
/>

Usage

Components

Browse through the components directory to find reusable Alpine.js components. Each component is self-contained, including logic and styles, and can be easily integrated into your module. Just copy and paste the html content. Make sure to replace any reference to placeholders to actual implementation.

<!-- image-picker-html -->
<div class="ui-image-picker">
  <img x-show="config.logo_url" :src="config.logo_url" />
  <div x-show="!config.logo_url" class="ui-logo-placeholder"></div>
  <span x-text="loading ? 'Uploading...' : 'Select logo'"></span>
  <button
    class="ui-save-button ui-button-small"
    @click="selectImage"
    :disabled="loading"
  >
    Upload
  </button>
  <button
    class="ui-secondary-button ui-button-small"
    @click="deleteImage"
    :disabled="loading || !config.logo_url"
  >
    Remove
  </button>
</div>

Common Styles

The global stylesheet provides styling for common elements like inputs and buttons and complex component described above. Simply include it in your project, and use the styles accordingly.