sprintify-ui 0.0.8 → 0.0.9

package/README.md

@@ -1,45 +1,65 @@
-## Peer dependencies:
 
-@vueuse/core
-axios
-lodash
-luxon
-pinia
-qs
-tailwindcss
-vue
-vue-18n
-vue-router
 
-They must all be installed and configured with your vue app.
+<p align="center">
+<img src="https://sprintify.witify.io/img/logo/logo-side.svg" width="190" />
+</p>
 
-## Install
+<p align="center">
+<img src="https://api.netlify.com/api/v1/badges/e95b44db-1c89-450d-99e1-887c9b261438/deploy-status" />
+</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
+
+### Peer dependencies:
+
+`sprintify-ui` is highly opinionated and requires multiple dependencies :
+
+`@vueuse/core`
+`axios`
+`lodash`
+`luxon`
+`pinia`
+`qs`
+`tailwindcss`
+`vue`
+`vue-18n`
+`vue-router`
+
+To install them all :
+
+```bash
+npm i @vueuse/core axios lodash luxon pinia qs tailwindcss vue vue-18n vue-router --save
+```
+
+### Basic Configuration
 
 ```ts
+import axios from "axios";
+import { createI18n } from "vue-i18n";
+import { createRouter, createWebHistory } from "vue-router";
 import SprintifyUI from "sprintify-ui";
 
-// Import your tailwind.css *before* importing Sprintify UI CSS
+// Import your TailwindCSS *before* importing Sprintify UI CSS
 import "../css/tailwind.css";
 
 // Import Sprintify UI CSS
 import "sprintify-ui/dist/style.css";
 
-// Import router and i18n *before* importing Sprintify UI plugin
-app.use(router);
-app.use(i18n);
-
-// Import Sprintify UI plugin
-app.use(SprintifyUI);
-```
-
-## i18n
+/** Axios */
 
-Add Sprintify UI messages :
-
-```ts
+const http = axios.create({
+  credentials: true,
+}),
 
-import en from "sprintify-ui/dist/lang/en.json";
-import fr from "sprintify-ui/dist/lang/fr.json";
+/** Vue i18n */
 
 const messages = {
   en: {},
@@ -54,33 +74,60 @@ const i18n = createI18n({
   messages,
 });
 
+/** Vue Router */
+
+const router = createRouter({
+  routes: [],
+  history: createWebHistory("admin"),
+});
+
+/** 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
+### TailwindCSS
+
+Make sure you have all the required tailwindCSS plugins installed:
 
-Update your tailwind.config.json:
+```bash
+npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/line-clamp -D
+```
 
-```json
+#### 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",
-  ]
+  ],
 }
 ```
 
-Make sure you have all the required plugins installed:
+Update your plugin list :
 
-```bash
-npm i tailwindcss @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio @tailwindcss/line-clamp -D
-```
-
-Add them to your plugin list :
-
-```
+```js
 plugins: [
+  //...,
+  require("sprintify-ui/tailwindcss"),
   require("@tailwindcss/forms"),
   require("@tailwindcss/typography"),
   require("@tailwindcss/aspect-ratio"),
@@ -88,7 +135,7 @@ plugins: [
 ],
 ```
 
-### Configure using unplugin-vue-components
+## Configure using unplugin-vue-components
 
 Add a custom resolver
 
@@ -101,4 +148,62 @@ Components({
     },
   ],
 }),
+```
+
+### Notifications and Dialogs
+
+To use notification and dialogs, you main layout must extend the `<BaseApp>` component.
+This component will observe the pinia store and render dialogs and notifications.
+
+```vue
+<template>
+  <BaseApp>
+    <RouterView></RouterView>
+  </BaseApp>
+</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 create you 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>
+```
+
+## Using components
+
+All components are globally available, you can use them without importation:
+
+```vue
+<template>
+  <BaseAlert title="Test" color="danger"></BaseAlert>
+</template>
+
+<script lang="ts" setup>
+</script>  
 ```