sprintify-ui 0.1.15 → 0.1.17

package/README.md

@@ -1,255 +1,230 @@
-
-
-<p align="center">
-<img src="https://sprintify.witify.io/img/logo/logo-side.svg" width="190" />
-</p>
-
-<p align="center">
-<a href="https://badge.fury.io/js/sprintify-ui"><img src="https://badge.fury.io/js/sprintify-ui.svg" alt="npm version" height="18"></a>
-<img src="https://api.netlify.com/api/v1/badges/e95b44db-1c89-450d-99e1-887c9b261438/deploy-status" height="18" />
-</p>
-
-## About Sprintify UI
-
-Sprintify UI is a Vue 3 components library for Vite projects using a Laravel backend.
-
-
-**Storybook Documentation**
-https://sprintify-ui-storybook.netlify.app
-
-## Getting started
-
-### Install
-
-```bash
-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-i18n`
-`vue-router`
-
-To install them all :
-
-```bash
-npm i @vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-i18n vue-router --save
-```
-
-### Basic Configuration
-
-```ts
-import { createApp } from 'vue';
-import axios from "axios";
-import { createI18n } from "vue-i18n";
-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 i18n */
-
-const messages = {
-  en: {},
-  fr: {},
-};
-
-messages.en.sui = SprintifyUIMessages.en.sui;
-messages.fr.sui = SprintifyUIMessages.fr.sui;
-
-type MessageSchema = typeof messages.en;
-
-const i18n = createI18n<[MessageSchema], 'en' | 'fr', false>({
-  locale: "en",
-  legacy: false,
-  messages,
-});
-
-/** Vue Router */
-
-const router = createRouter({
-  routes: [],
-  history: createWebHistory("admin"),
-});
-
-const app = createApp(App);
-
-/** Vue Plugins */
-
-// Import router and i18n *before* importing Sprintify UI plugin
-app.use(i18n);
-app.use(router);
-app.use(createPinia());
-
-// Import Sprintify UI plugin
-app.use(SprintifyUI, {
-  i18n, // Import your i18n instance 
-  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:
-
-```bash
-npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/line-clamp -D
-```
-
-#### Update tailwind.config.js
-
-Update your content list :
-
-```js
-{
-  content: [
-    //...,
-    "./node_modules/sprintify-ui/src/**/*.ts",
-    "./node_modules/sprintify-ui/src/**/*.js",
-    "./node_modules/sprintify-ui/src/**/*.vue",
-  ],
-}
-```
-
-Update your plugin list :
-
-```js
-plugins: [
-  //...,
-  require("sprintify-ui/tailwindcss"),
-  require("@tailwindcss/forms"),
-  require("@tailwindcss/typography"),
-  require("@tailwindcss/aspect-ratio"),
-  require("@tailwindcss/line-clamp"),
-],
-```
-
-### Configure using unplugin-vue-components
-
-Add a custom resolver
-
-```js
-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 `<BaseAppNotifications>` and `<BaseAppDialogs>` components.
-These components will observe the Pinia store and render dialogs and notifications.
-
-```vue
-<template>
-  <RouterView></RouterView>
-  <BaseAppNotifications />
-  <BaseAppDialogs />
-</template>
-
-<script lang="ts" setup>
-</script>
-```
-
-#### Custom notifications and dialogs
-
-You may 100% customize the look and feel of dialogs and notifications by removing `<BaseApp>` and instead creating your own render logic. Here's a simple example to render notifications:
-
-```vue
-<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="notification in notifications" :key="notification.id">
-          <h2>{{ notification.title }}</h2>
-          <p>{{ notification.text }}</p>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script lang="ts" setup>
-import { useNotificationsStore } from 'sprintify-ui';
-
-const notificationsStore = useNotificationsStore();
-
-const notifications = computed(() => {
-  return notificationsStore.notifications;
-});
-</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
-
-```js
-app.use(SprintifyUI, {
-  i18n, 
-  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.
-
-```html
-<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:
-
-```html
-<template>
-  <BaseAlert title="Test" color="danger"></BaseAlert>
-</template>
-
-<script lang="ts" setup>
-</script>  
+
+
+<p align="center">
+<img src="https://sprintify.witify.io/img/logo/logo-side.svg" width="190" />
+</p>
+
+<p align="center">
+<a href="https://badge.fury.io/js/sprintify-ui"><img src="https://badge.fury.io/js/sprintify-ui.svg" alt="npm version" height="18"></a>
+<img src="https://api.netlify.com/api/v1/badges/e95b44db-1c89-450d-99e1-887c9b261438/deploy-status" height="18" />
+</p>
+
+## About Sprintify UI
+
+Sprintify UI is a Vue 3 components library for Vite projects using a Laravel backend.
+
+
+**Storybook Documentation**
+https://sprintify-ui-storybook.netlify.app
+
+## Getting started
+
+### Install
+
+```bash
+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 :
+
+```bash
+npm i @vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-router --save
+```
+
+### Basic Configuration
+
+```ts
+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:
+
+```bash
+npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/line-clamp -D
+```
+
+#### Update tailwind.config.js
+
+Update your content list :
+
+```js
+{
+  content: [
+    //...,
+    "./node_modules/sprintify-ui/src/**/*.ts",
+    "./node_modules/sprintify-ui/src/**/*.js",
+    "./node_modules/sprintify-ui/src/**/*.vue",
+  ],
+}
+```
+
+Update your plugin list :
+
+```js
+plugins: [
+  //...,
+  require("sprintify-ui/tailwindcss"),
+  require("@tailwindcss/forms"),
+  require("@tailwindcss/typography"),
+  require("@tailwindcss/aspect-ratio"),
+  require("@tailwindcss/line-clamp"),
+],
+```
+
+### Configure using unplugin-vue-components
+
+Add a custom resolver
+
+```js
+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 `<BaseAppNotifications>` and `<BaseAppDialogs>` components.
+These components will observe the Pinia store and render dialogs and notifications.
+
+```vue
+<template>
+  <RouterView></RouterView>
+  <BaseAppNotifications />
+  <BaseAppDialogs />
+</template>
+
+<script lang="ts" setup>
+</script>
+```
+
+#### Custom notifications and dialogs
+
+You may 100% customize the look and feel of dialogs and notifications by removing `<BaseApp>` and instead creating your own render logic. Here's a simple example to render notifications:
+
+```vue
+<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="notification in notifications" :key="notification.id">
+          <h2>{{ notification.title }}</h2>
+          <p>{{ notification.text }}</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useNotificationsStore } from 'sprintify-ui';
+
+const notificationsStore = useNotificationsStore();
+
+const notifications = computed(() => {
+  return notificationsStore.notifications;
+});
+</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
+
+```js
+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.
+
+```html
+<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:
+
+```html
+<template>
+  <BaseAlert title="Test" color="danger"></BaseAlert>
+</template>
+
+<script lang="ts" setup>
+</script>  
 ```