sprintify-ui 0.10.64 → 0.10.65

package/README.md

@@ -1,267 +1,267 @@
-
-
-<p align="center">
-<img src="https://demo.sprintify.app/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`
-`ckeditor5`
-`@ckeditor/ckeditor5-vue`
-`lodash`
-`luxon`
-`pinia`
-`qs`
-`tailwindcss`
-`vue`
-`vue-router`
-
-By default, if you don't have these dependencies installed, you will get a warning message in the console.
-
-```bash
-npm i @vueuse/core axios [...] --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 `<BaseAppSnackbars>` and `<BaseAppDialogs>` components.
-These components will observe the Pinia store and render dialogs and notifications.
-
-```vue
-<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:
-
-```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="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
-
-```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
-```
-
-### Publish to npm
-
-```
-npm publish
+
+
+<p align="center">
+<img src="https://demo.sprintify.app/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`
+`ckeditor5`
+`@ckeditor/ckeditor5-vue`
+`lodash`
+`luxon`
+`pinia`
+`qs`
+`tailwindcss`
+`vue`
+`vue-router`
+
+By default, if you don't have these dependencies installed, you will get a warning message in the console.
+
+```bash
+npm i @vueuse/core axios [...] --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 `<BaseAppSnackbars>` and `<BaseAppDialogs>` components.
+These components will observe the Pinia store and render dialogs and notifications.
+
+```vue
+<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:
+
+```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="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
+
+```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
+```
+
+### Publish to npm
+
+```
+npm publish
 ```

package/dist/{BaseCkeditor-B4PbYw6a.js → BaseCkeditor-D6D4FPEb.js}

@@ -1,4 +1,4 @@
-import { defineComponent as f, computed as i, createBlock as c, openBlock as I, unref as r } from "vue";
+import { defineComponent as f, computed as i, openBlock as c, createBlock as I, unref as r } from "vue";
 import { ClassicEditor as B, BalloonEditor as k, InlineEditor as y, Essentials as z, SourceEditing as E, Paragraph as v, Bold as C, Italic as T, Underline as V, Code as h, CodeBlock as w, List as F, Link as L, Autoformat as R, Heading as S, Image as A, AutoImage as D, ImageStyle as P, ImageResize as U, ImageToolbar as G, ImageInsert as O, Base64UploadAdapter as q, Table as x, TableToolbar as H, MediaEmbed as K, PasteFromOffice as M, BlockToolbar as N, Font as W, FindAndReplace as j, RemoveFormat as J } from "ckeditor5";
 import { Ckeditor as Q } from "@ckeditor/ckeditor5-vue";
 const $ = /* @__PURE__ */ f({
@@ -105,7 +105,7 @@ const $ = /* @__PURE__ */ f({
       getEditorData() {
         return (n == null ? void 0 : n.getData()) || "";
       }
-    }), (t, e) => (I(), c(r(Q), {
+    }), (t, e) => (c(), I(r(Q), {
       "model-value": r(p),
       editor: r(g),
       config: r(b),