sprintify-ui 0.4.5 → 0.4.7

package/README.md

@@ -1,259 +1,259 @@
-
-
-<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>
-</p>
-
-## 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
-
-```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 -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"),
-],
-```
-
-### 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>  
-```
-
-
-## 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 && npm publish
+
+
+<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>
+</p>
+
+## 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
+
+```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 -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"),
+],
+```
+
+### 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>  
+```
+
+
+## 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 && npm publish
 ```

package/dist/sprintify-ui.es.js

@@ -9531,7 +9531,7 @@ const Gd = /* @__PURE__ */ Ce({
     ], 6));
   }
 }), JS = /* @__PURE__ */ Ce({
-  __name: "BaseBelongsTo",
+  __name: "BaseBelongsToFetch",
   props: {
     modelValue: {
       default: void 0,
@@ -24906,13 +24906,13 @@ const aI = {
   class: "spinner h-20 w-20",
   viewBox: "0 0 66 66",
   xmlns: "http://www.w3.org/2000/svg"
-}, lI = /* @__PURE__ */ Sm('<circle class="path" fill="transparent" stroke-width="2" cx="33" cy="33" r="30" stroke="url(#gradient)" data-v-7ef7a4cf></circle><linearGradient id="gradient" data-v-7ef7a4cf><stop offset="50%" stop-color="#2563eb" stop-opacity="1" data-v-7ef7a4cf></stop><stop offset="65%" stop-color="#2563eb" stop-opacity=".5" data-v-7ef7a4cf></stop><stop offset="100%" stop-color="#2563eb" stop-opacity="0" data-v-7ef7a4cf></stop></linearGradient>', 2), sI = [
+}, lI = /* @__PURE__ */ Sm('<circle class="path" fill="transparent" stroke-width="2" cx="33" cy="33" r="30" stroke="url(#gradient)" data-v-94061b0d></circle><linearGradient id="gradient" data-v-94061b0d><stop offset="50%" stop-color="#2563eb" stop-opacity="1" data-v-94061b0d></stop><stop offset="65%" stop-color="#2563eb" stop-opacity=".5" data-v-94061b0d></stop><stop offset="100%" stop-color="#2563eb" stop-opacity="0" data-v-94061b0d></stop></linearGradient>', 2), sI = [
   lI
 ];
 function uI(n, t, e, r, i, o) {
   return B(), Z("svg", aI, sI);
 }
-const gb = /* @__PURE__ */ Kn(oI, [["render", uI], ["__scopeId", "data-v-7ef7a4cf"]]), cI = (n) => (_m("data-v-04055e00"), n = n(), km(), n), dI = { class: "flex flex-col" }, fI = { class: "inline-block min-w-full align-middle" }, hI = { class: "relative min-h-[300px]" }, pI = { class: "min-w-full border-separate border-spacing-0" }, mI = { class: "flex items-center" }, gI = ["checked", "disabled"], vI = ["onClick"], yI = {
+const gb = /* @__PURE__ */ Kn(oI, [["render", uI], ["__scopeId", "data-v-94061b0d"]]), cI = (n) => (_m("data-v-7657b365"), n = n(), km(), n), dI = { class: "flex flex-col" }, fI = { class: "inline-block min-w-full align-middle" }, hI = { class: "relative min-h-[300px]" }, pI = { class: "min-w-full border-separate border-spacing-0" }, mI = { class: "flex items-center" }, gI = ["checked", "disabled"], vI = ["onClick"], yI = {
   viewBox: "0 0 20 20",
   class: "absolute top-1/2 h-5 w-5 -translate-y-1/2"
 }, bI = ["opacity"], wI = ["opacity"], xI = ["checked", "disabled"], EI = { class: "bg-white" }, SI = { class: "item-row" }, _I = ["onClick"], kI = {
@@ -25452,7 +25452,7 @@ const gb = /* @__PURE__ */ Kn(oI, [["render", uI], ["__scopeId", "data-v-7ef7a4c
     };
   }
 });
-const vb = /* @__PURE__ */ Kn(jI, [["__scopeId", "data-v-04055e00"]]), yb = Ce({
+const vb = /* @__PURE__ */ Kn(jI, [["__scopeId", "data-v-7657b365"]]), yb = Ce({
   name: "BaseTableColumn",
   props: {
     label: {
@@ -30839,7 +30839,7 @@ function fd(n, t, e, r) {
 }
 var mP = {
   serialize: fd
-}, Ql = /* @__PURE__ */ ((n) => (n.post = "post", n.patch = "patch", n))(Ql || {}), hd = /* @__PURE__ */ ((n) => (n.json = "json", n.formData = "formData", n))(hd || {});
+}, Ql = /* @__PURE__ */ ((n) => (n.post = "post", n.put = "put", n.patch = "patch", n))(Ql || {}), hd = /* @__PURE__ */ ((n) => (n.json = "json", n.formData = "formData", n))(hd || {});
 const gP = { class: "absolute inset-0 flex h-full w-full items-center justify-center" }, vP = /* @__PURE__ */ L("svg", {
   class: "relative h-6 w-6 animate-spin text-blue-600",
   viewBox: "0 0 24 24"
@@ -34532,7 +34532,7 @@ function X5(n, t, e, r, i, o) {
     }, Ne(Math.round(n.progress * 100)) + "% ", 13, Z5)
   ], 8, Y5);
 }
-const J5 = /* @__PURE__ */ Kn(G5, [["render", X5], ["__scopeId", "data-v-c64835c6"]]), e3 = { class: "space-y-3" }, t3 = ["for"], n3 = ["id", "name", "checked", "required", "disabled", "value", "onInput"], r3 = { class: "text-sm" }, i3 = /* @__PURE__ */ Ce({
+const J5 = /* @__PURE__ */ Kn(G5, [["render", X5], ["__scopeId", "data-v-dc71b3cd"]]), e3 = { class: "space-y-3" }, t3 = ["for"], n3 = ["id", "name", "checked", "required", "disabled", "value", "onInput"], r3 = { class: "text-sm" }, i3 = /* @__PURE__ */ Ce({
   __name: "BaseRadioGroup",
   props: {
     modelValue: {
@@ -44469,7 +44469,7 @@ const q3 = /* @__PURE__ */ Kn(B3, [["render", H3]]), U3 = /* @__PURE__ */ L("spa
       ]);
     };
   }
-}), EL = (n) => (_m("data-v-5d46d20e"), n = n(), km(), n), SL = { class: "relative" }, _L = /* @__PURE__ */ EL(() => /* @__PURE__ */ L("div", { class: "absolute bottom-0 left-0 h-px w-full bg-slate-300" }, null, -1)), kL = { class: "flex text-center" }, AL = /* @__PURE__ */ Ce({
+}), EL = (n) => (_m("data-v-a3256401"), n = n(), km(), n), SL = { class: "relative" }, _L = /* @__PURE__ */ EL(() => /* @__PURE__ */ L("div", { class: "absolute bottom-0 left-0 h-px w-full bg-slate-300" }, null, -1)), kL = { class: "flex text-center" }, AL = /* @__PURE__ */ Ce({
   __name: "BaseTabs",
   props: {
     size: { default: "md" }
@@ -44516,7 +44516,7 @@ const q3 = /* @__PURE__ */ Kn(B3, [["render", H3]]), U3 = /* @__PURE__ */ L("spa
     ]));
   }
 });
-const CL = /* @__PURE__ */ Kn(AL, [["__scopeId", "data-v-5d46d20e"]]), TL = { class: "[&:first-child_a]:pl-0 [&:last-child_a]:pr-0" }, DL = ["href", "disabled", "onClick"], OL = { class: "relative flex py-1" }, ML = {
+const CL = /* @__PURE__ */ Kn(AL, [["__scopeId", "data-v-a3256401"]]), TL = { class: "[&:first-child_a]:pl-0 [&:last-child_a]:pr-0" }, DL = ["href", "disabled", "onClick"], OL = { class: "relative flex py-1" }, ML = {
   key: 0,
   class: "absolute left-0 bottom-0 w-full h-[2px] bg-primary-600"
 }, RL = /* @__PURE__ */ Ce({
@@ -45609,7 +45609,7 @@ const CL = /* @__PURE__ */ Kn(AL, [["__scopeId", "data-v-5d46d20e"]]), TL = { cl
   BaseAvatar: Da,
   BaseAvatarGroup: LS,
   BaseBadge: Gd,
-  BaseBelongsTo: JS,
+  BaseBelongsToFetch: JS,
   BaseBoolean: n_,
   BaseBreadcrumbs: Pg,
   BaseButton: Bg,
@@ -45743,7 +45743,7 @@ export {
   Da as BaseAvatar,
   LS as BaseAvatarGroup,
   Gd as BaseBadge,
-  JS as BaseBelongsTo,
+  JS as BaseBelongsToFetch,
   n_ as BaseBoolean,
   Pg as BaseBreadcrumbs,
   Bg as BaseButton,