sprintify-ui 0.0.5 → 0.0.7

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -6,9 +6,9 @@ declare const _default: {
         $props: Partial<{
             required: boolean;
             type: string;
+            name: string;
             placeholder: string;
             disabled: boolean;
-            name: string;
             autocomplete: boolean;
             preventSubmit: boolean;
             rows: number;
@@ -51,7 +51,7 @@ declare const _default: {
             };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "placeholder" | "disabled" | "name" | "autocomplete" | "preventSubmit" | "rows">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "type" | "name" | "placeholder" | "disabled" | "autocomplete" | "preventSubmit" | "rows">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -107,9 +107,9 @@ declare const _default: {
         }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
             required: boolean;
             type: string;
+            name: string;
             placeholder: string;
             disabled: boolean;
-            name: string;
             autocomplete: boolean;
             preventSubmit: boolean;
             rows: number;
@@ -218,9 +218,9 @@ declare const _default: {
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
     required: boolean;
     type: string;
+    name: string;
     placeholder: string;
     disabled: boolean;
-    name: string;
     autocomplete: boolean;
     preventSubmit: boolean;
     rows: number;

package/dist/types/src/components/BaseTextareaAutoresize.vue.d.ts

@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     onKeyDown(event: any): void;
     onKeyUp(event: any): void;
     onFocus(event: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "focus" | "submit")[], "input" | "update:modelValue" | "focus" | "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: StringConstructor;

package/dist/types/src/components/index.d.ts

@@ -1,4 +1,7 @@
 import BaseAlert from './BaseAlert.vue';
+import BaseApp from './BaseApp.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import BaseAvatar from './BaseAvatar.vue';
@@ -16,10 +19,15 @@ import BaseDataIterator from './BaseDataIterator.vue';
 import BaseDataTable from './BaseDataTable.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
 import BaseDateSelect from './BaseDateSelect.vue';
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+import BaseDialog from './BaseDialog.vue';
+import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFileUploader from './BaseFileUploader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
-export { BaseAlert, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseIcon, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseTable, BaseTableColumn, };
+export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseIcon, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseTable, BaseTableColumn, };

package/dist/types/src/index.d.ts

@@ -1,6 +1,9 @@
 import { AxiosInstance } from 'axios';
 import { App } from 'vue';
 import { I18n } from 'vue-i18n';
+import { useDialogsStore } from './stores/dialogs';
+import { useNotificationsStore } from './stores/notifications';
+import { useSystemAlertStore } from './stores/systemAlerts';
 declare const messages: {
     en: {
         sui: {
@@ -116,14 +119,14 @@ declare const messages: {
     };
 };
 import './assets/main.css';
-interface SprintifyUIConfig {
+export interface Options {
     i18n?: I18n<typeof messages, {}, {}, string, true>;
     http?: AxiosInstance;
     upload_url?: string;
     formatQueryString?: (params: Record<string, any>) => string;
     parseQueryString?: (params: string) => Record<string, any>;
 }
-declare const pluginConfig: {
+declare const config: {
     i18n: I18n<{
         en: {
             sui: {
@@ -243,7 +246,7 @@ declare const pluginConfig: {
     formatQueryString(params: Record<string, any>): string;
     parseQueryString(params: string): Record<string, any>;
 };
-declare function install(app: App, config?: SprintifyUIConfig): void;
+declare function install(app: App, options?: Options): void;
 declare const _default: {
     install: typeof install;
 };
@@ -252,4 +255,7 @@ export * from './components';
 export * from './constants';
 export * from './utils';
 export { messages };
-export { pluginConfig as config };
+export { config };
+export { useDialogsStore };
+export { useNotificationsStore };
+export { useSystemAlertStore };

package/dist/types/src/stores/dialogs.d.ts

@@ -0,0 +1,9 @@
+import { Dialog, DialogOptions } from '../types/types';
+export declare const useDialogsStore: import("pinia").StoreDefinition<"dialogs", {
+    count: number;
+    dialogs: Dialog[];
+}, {}, {
+    push(options: DialogOptions): void;
+    remove(dialog: Dialog): void;
+    clear(): void;
+}>;

package/dist/types/src/stores/notifications.d.ts

@@ -0,0 +1,10 @@
+import { Notification, NotificationOptions } from '../types/types';
+export declare const useNotificationsStore: import("pinia").StoreDefinition<"notifications", {
+    count: number;
+    notifications: Notification[];
+    timeouts: Record<number, number>;
+}, {}, {
+    push(options: NotificationOptions): void;
+    remove(notification: Notification): void;
+    clear(): void;
+}>;

package/dist/types/src/stores/systemAlerts.d.ts

@@ -0,0 +1,9 @@
+import { SystemAlert, SystemAlertOptions } from '../types/types';
+export declare const useSystemAlertStore: import("pinia").StoreDefinition<"systemAlerts", {
+    count: number;
+    systemAlerts: SystemAlert[];
+}, {}, {
+    push(systemAlert: SystemAlertOptions): void;
+    remove(systemAlert: SystemAlert): void;
+    clear(): void;
+}>;

package/dist/types/src/types/types.d.ts

@@ -86,3 +86,61 @@ export interface BaseTableColumn {
     thAttrs: (column: BaseTableColumn) => Record<string, any>;
     tdAttrs: (row: Row, column: BaseTableColumn) => Record<string, any>;
 }
+/**
+ * System alert
+ */
+export interface SystemAlertOptions {
+    color?: 'info' | 'success' | 'danger' | 'warning';
+    message: string;
+    to?: RouteLocationRaw;
+    action?: () => void;
+    closable?: boolean;
+}
+export interface SystemAlert {
+    id: number;
+    color: 'info' | 'success' | 'danger' | 'warning';
+    message: string;
+    to?: RouteLocationRaw;
+    action?: () => void;
+    closable: boolean;
+}
+/**
+ * Dialog
+ */
+export interface DialogOptions {
+    color?: 'info' | 'success' | 'danger' | 'warning';
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    closeOnOutsideClick?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+export interface Dialog {
+    id: number;
+    color: 'info' | 'success' | 'danger' | 'warning';
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText: string;
+    closeOnOutsideClick: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+/**
+ * Notification
+ */
+export interface NotificationOptions {
+    title: string;
+    text: string;
+    color?: 'info' | 'success' | 'danger' | 'warning';
+    duration?: number;
+}
+export interface Notification {
+    id: number;
+    title: string;
+    text: string;
+    color: 'info' | 'success' | 'danger' | 'warning';
+    duration: number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",

package/src/components/BaseApp.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="min-h-full">
+    <slot />
+
+    <!-- Notifications 
+    <BaseAppNotifications />-->
+
+    <!-- Dialogs -->
+    <BaseAppDialogs />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BaseAppDialogs from './BaseAppDialogs.vue';
+</script>

package/src/components/BaseAppDialogs.vue

@@ -0,0 +1,113 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      appear
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="dialogs.length"
+        class="fixed inset-0 z-20 h-full w-full bg-black bg-opacity-60"
+      />
+    </Transition>
+
+    <TransitionGroup
+      appear
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="translate-y-10 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-10 opacity-0"
+      tag="div"
+    >
+      <div
+        v-for="dialog in dialogs"
+        :key="dialog.id"
+        scroll-lock-target
+        class="fixed inset-0 z-20 transform overflow-y-auto"
+      >
+        <div
+          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
+        >
+          <div
+            class="fixed inset-0 h-full w-full"
+            @click="
+              dialog.closeOnOutsideClick
+                ? cancel(dialog)
+                : refuseAnimation(dialog)
+            "
+          />
+          <BaseDialog
+            :class="animationClasses[dialog.id] ?? ''"
+            :color="dialog.color"
+            :title="dialog.title"
+            :message="dialog.message"
+            :confirm-text="dialog.confirmText"
+            :cancel-text="dialog.cancelText"
+            @cancel="cancel(dialog)"
+            @confirm="confirm(dialog)"
+          />
+        </div>
+      </div>
+    </TransitionGroup>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { Ref } from 'vue';
+import { Dialog } from '@/types/types';
+import BaseDialog from './BaseDialog.vue';
+import { useDialogsStore } from '@/stores/dialogs';
+import { disableScroll, enableScroll } from '@/utils/scrollPreventer';
+
+const dialogStore = useDialogsStore();
+
+const dialogs = computed(() => {
+  console.log(dialogStore.dialogs);
+
+  return dialogStore.dialogs;
+});
+
+function confirm(dialog: Dialog) {
+  dialog.onConfirm();
+  remove(dialog);
+}
+
+function cancel(dialog: Dialog) {
+  dialog.onCancel();
+  remove(dialog);
+}
+
+function remove(dialog: Dialog) {
+  dialogStore.remove(dialog);
+}
+
+const animationClasses = ref({}) as Ref<Record<string, string>>;
+
+function refuseAnimation(dialog: Dialog) {
+  animationClasses.value[dialog.id] = '';
+  setTimeout(() => {
+    animationClasses.value[dialog.id] = 'animate-shake';
+  });
+}
+
+watch(
+  () => dialogs.value.length,
+  () => {
+    if (dialogs.value.length == 0) {
+      enableScroll();
+    } else {
+      disableScroll();
+    }
+  }
+);
+
+defineExpose({
+  dialogs,
+});
+</script>

package/src/components/BaseAppNotifications.vue

@@ -0,0 +1,73 @@
+<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">
+        <TransitionGroup
+          enter-active-class="transition duration-300 ease-out transform"
+          enter-from-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
+          enter-to-class="sm:translate-x-0 translate-y-0 opacity-100"
+          leave-active-class="transition duration-100 ease-in"
+          leave-from-class="sm:translate-x-0 translate-y-0 opacity-100"
+          leave-to-class="sm:translate-y-0 sm:translate-x-4 translate-y-2 opacity-0"
+        >
+          <div v-for="notification in notifications" :key="notification.id">
+            <div
+              class="mx-auto mt-4 flex w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-xl"
+            >
+              <div
+                class="flex w-12 items-center justify-center"
+                :class="{
+                  'bg-blue-500': notification.color == 'info',
+                  'bg-red-500': notification.color == 'danger',
+                  'bg-yellow-500': notification.color == 'warning',
+                  'bg-green-500': notification.color == 'success',
+                }"
+              >
+                <svg
+                  class="h-6 w-6 fill-current text-white"
+                  viewBox="0 0 40 40"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"
+                  />
+                </svg>
+              </div>
+
+              <div class="-mx-3 px-4 pt-2 pb-3">
+                <div class="mx-3">
+                  <h3
+                    class="mb-1 font-semibold leading-tight"
+                    :class="{
+                      'text-blue-500': notification.color == 'info',
+                      'text-red-500': notification.color == 'danger',
+                      'text-yellow-500': notification.color == 'warning',
+                      'text-green-500': notification.color == 'success',
+                    }"
+                  >
+                    {{ notification.title }}
+                  </h3>
+                  <p class="text-sm leading-tight text-slate-600">
+                    {{ notification.text }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </TransitionGroup>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useNotificationsStore } from '@/index';
+
+const notificationsStore = useNotificationsStore();
+
+const notifications = computed(() => {
+  return notificationsStore.notifications;
+});
+</script>

package/src/components/BaseDataTable.vue

@@ -166,7 +166,7 @@ import {
   DataTableQuery,
   MenuItemInterface,
 } from '@/types/types';
-//import { useDialogsStore } from '../stores/dialogs';
+import { useDialogsStore } from '@/stores/dialogs';
 //import { useNotificationsStore } from '../stores/notifications';
 import BaseDataIterator from './BaseDataIterator.vue';
 import { isArray } from 'lodash';
@@ -182,7 +182,7 @@ const i18n = useI18n();
 
 const http = config.http;
 
-//const dialogs = useDialogsStore();
+const dialogs = useDialogsStore();
 //const notifications = useNotificationsStore();
 
 const table = ref(null) as Ref<null | InstanceType<typeof BaseTable>>;
@@ -384,14 +384,14 @@ const canDelete = (row: CollectionItem): boolean => {
 };
 
 function onDeleteClick(row: CollectionItem) {
-  /* dialogs.push({
+  dialogs.push({
     title: i18n.t('sui.delete_record') + '?',
     message: i18n.t('sui.delete_record_description'),
     color: 'danger',
     closeOnOutsideClick: false,
     confirmText: i18n.t('sui.yes_delete'),
     onConfirm: () => onDelete(row),
-  }); */
+  });
 }
 
 const onDelete = (row: CollectionItem) => {

package/src/components/BaseDatePicker.vue

@@ -38,7 +38,6 @@ import { PropType, Ref } from 'vue';
 import Pikaday from 'pikaday';
 import { capitalize, padStart } from 'lodash';
 import { DateTime, Info } from 'luxon';
-import { config } from '@/index';
 
 const props = defineProps({
   modelValue: {
@@ -54,7 +53,7 @@ const props = defineProps({
     type: Boolean,
   },
   inputClass: {
-    default: '',
+    default: 'border-slate-300',
     type: String,
   },
   minDate: {
@@ -77,17 +76,17 @@ const i18n = useI18n();
 
 const datepicker = ref(null) as Ref<HTMLInputElement | null>;
 
-const months = Info.months('long', { locale: config.i18n.global.locale }).map(
-  (m) => capitalize(m)
+const months = Info.months('long', { locale: i18n.locale.value }).map((m) =>
+  capitalize(m)
 );
 const weekdays = arrayRotate(
-  Info.weekdays('long', { locale: config.i18n.global.locale }).map((m) =>
+  Info.weekdays('long', { locale: i18n.locale.value }).map((m) =>
     capitalize(m)
   ),
   true
 );
 const weekdaysShort = arrayRotate(
-  Info.weekdays('short', { locale: config.i18n.global.locale }).map((m) =>
+  Info.weekdays('short', { locale: i18n.locale.value }).map((m) =>
     capitalize(m)
   ),
   true

package/src/components/BaseDateSelect.vue

@@ -115,7 +115,7 @@ const props = defineProps({
     type: Number,
   },
   inputClass: {
-    default: '',
+    default: 'border-slate-300',
     type: String,
   },
 });

package/src/components/BaseDialog.vue

@@ -76,6 +76,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
 
 defineProps({
   color: {

package/src/components/BaseFileUploader.vue

@@ -43,6 +43,10 @@ const i18n = useI18n();
 //const notifications = useNotificationsStore();
 
 const props = defineProps({
+  url: {
+    default: undefined,
+    type: String,
+  },
   disabled: {
     default: false,
     type: Boolean,
@@ -131,7 +135,7 @@ async function onPictureUpload(file: File) {
     uploading.value = true;
     emit('upload:start');
 
-    const response = await http.post(config.upload_url, formData);
+    const response = await http.post(props.url ?? config.upload_url, formData);
 
     const payload = response.data as UploadedFile;
     payload.original_file = file;

package/src/components/BaseInputLabel.vue

@@ -1,7 +1,7 @@
 <template>
-  <label :class="classes"
-    >{{ label }}<span v-if="required" class="text-red-600"> *</span></label
-  >
+  <label :class="classes">
+    {{ label }}<span v-if="required" class="text-red-600"> *</span>
+  </label>
 </template>
 
 <script lang="ts">

package/src/components/index.ts

@@ -1,4 +1,7 @@
 import BaseAlert from './BaseAlert.vue';
+import BaseApp from './BaseApp.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import BaseAvatar from './BaseAvatar.vue';
@@ -16,7 +19,11 @@ import BaseDataIterator from './BaseDataIterator.vue';
 import BaseDataTable from './BaseDataTable.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
 import BaseDateSelect from './BaseDateSelect.vue';
-
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+import BaseDialog from './BaseDialog.vue';
+import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFileUploader from './BaseFileUploader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
@@ -26,6 +33,9 @@ import BaseTableColumn from './BaseTableColumn.vue';
 
 export {
   BaseAlert,
+  BaseApp,
+  BaseAppDialogs,
+  BaseAppNotifications,
   BaseAutocomplete,
   BaseAutocompleteFetch,
   BaseAvatar,
@@ -43,6 +53,11 @@ export {
   BaseDataTable,
   BaseDatePicker,
   BaseDateSelect,
+  BaseDescriptionList,
+  BaseDescriptionListItem,
+  BaseDialog,
+  BaseFilePicker,
+  BaseFileUploader,
   BaseIcon,
   BaseLoadingCover,
   BaseMenu,