Sprintify-ui NPM

About Sprintify UI

Sprintify UI is a Vue 3 components library for Vite projects using a Laravel backend.

Storybook Documentation https://sprintify-ui.witify.io

Getting started

Install

npm i sprintify-ui --save

Peer dependencies:

sprintify-ui is highly opinionated and requires multiple dependencies :

@vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-router

To install them all :

npm i @vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-router --save

Basic Configuration

import { createApp } from 'vue';
import axios from "axios";
import { createPinia } from "pinia";
import { createRouter, createWebHistory } from "vue-router";
import SprintifyUI from "sprintify-ui";
import { messages as SprintifyUIMessages } from "sprintify-ui";
import App from './App.vue';

// Import your TailwindCSS *before* importing Sprintify UI CSS
import "./assets/tailwind.css";

// Import Sprintify UI CSS
import "sprintify-ui/dist/style.css";

/** Axios */

const http = axios.create({
  useCredentials: true,
});

/** Vue Router */

const router = createRouter({
  routes: [],
  history: createWebHistory("admin"),
});

const app = createApp(App);

/** Vue Plugins */

app.use(router);
app.use(createPinia());

// Import Sprintify UI plugin
app.use(SprintifyUI, {
  http, // Default axios instance for <BaseAutocompleteFetch>, <BaseDataIterator>, etc...
  upload_url: "/api/files/upload", // Default upload URL for <BaseFileUploader>
});

app.mount("#app");

TailwindCSS

Make sure you have all the required tailwindCSS plugins installed:

npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio -D

Update tailwind.config.js

Update your content list :

{
  content: [
    //...,
    "./node_modules/sprintify-ui/src/**/*.ts",
    "./node_modules/sprintify-ui/src/**/*.js",
    "./node_modules/sprintify-ui/src/**/*.vue",
  ],
}

Update your plugin list :

plugins: [
  //...,
  require("sprintify-ui/tailwindcss"),
  require("@tailwindcss/forms"),
  require("@tailwindcss/typography"),
  require("@tailwindcss/aspect-ratio"),
],

Configure using unplugin-vue-components

Add a custom resolver

Components({
  resolvers: [
    (componentName) => {
      if (componentName.startsWith("Base"))
        return { name: componentName, from: "sprintify-ui" };
    },
  ],
}),

Notifications and Dialogs

To use notifications and dialogs, your main layout must contain the <BaseAppSnackbars> and <BaseAppDialogs> components. These components will observe the Pinia store and render dialogs and notifications.

<template>
  <RouterView></RouterView>
  <BaseAppSnackbars />
  <BaseAppDialogs />
</template>

<script lang="ts" setup>
</script>

Custom snackbars and dialogs

You may 100% customize the look and feel of dialogs and snackbars by removing <BaseApp> and instead creating your own render logic. Here's a simple example to render snackbars:

<template>
  <Teleport to="body">
    <div class="pointer-events-none fixed inset-0 flex items-end justify-end p-6 md:p-8">
      <div class="w-full max-w-sm">
        <div v-for="snackbar in snackbars" :key="snackbar.id">
          <h2>{{ snackbar.title }}</h2>
          <p>{{ snackbar.text }}</p>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script lang="ts" setup>
import { useSnackbarsStore } from 'sprintify-ui';

const snackbarsStore = useSnackbarsStore();

const snackbars = computed(() => {
  return snackbarsStore.snackbars;
});
</script>

Configure countries and regions globally

In order to make BaseAddressForm work correctly, you must import countries and regions to Sprintify UI.

Each country must adhere to the following interface:

code: string
name: string

Each region must adhere to the following interface:

code: string
name: string
country_id: string

app.use(SprintifyUI, {
  http,
  // Import while initializing Sprintify UI
  countries: window.yourCountryList,
  regions: window.yourRegionList,
});

Using BaseAddressForm with Google Maps Autocomplete

Add this snippet to your HTML <head>. Replace YOUR_API_KEY with you API key.

<script defer async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Using components

All components are globally available, you can use them without importation:

<template>
  <BaseAlert title="Test" color="danger"></BaseAlert>
</template>

<script lang="ts" setup>
</script>

Make changes

Git add .

git add .

Commit

For your commit you must run the following code:

npm run commit

Release

To release (only from main after review)

npm run release

Push to git

git push --follow-tags origin main

Publish to npm

npm publish

@floating-ui/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction @fullcalendar/list @fullcalendar/multimonth @fullcalendar/timegrid @fullcalendar/vue3 @headlessui/vue color2k quill-markdown-shortcuts tailwind-merge

@infinitebrahmanuniverse/nolb-spr @everything-registry/sub-chunk-2809

7 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

10 months ago

10 months ago

10 months ago

11 months ago

10 months ago

11 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago