@dasidev/dasi-ui 1.0.0

package/src/stores/dialog.ts

@@ -0,0 +1,168 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { InfoDialogOptions } from '@/components/dialog/InfoDialog.vue';
+import type { ErrorDialogOptions } from '@/components/dialog/ErrorDialog.vue';
+import type { DasiV2FormSchema } from '@/types/form.types';
+
+interface ConfirmDialogOptions {
+  title: string
+  description: string
+  cancelLabel?: string
+  actionLabel?: string
+  negative?: boolean
+  loading?: boolean
+  actionIcon?: string
+}
+
+interface SuccessDialogOptions {
+  title?: string
+  description?: string
+  closeLabel?: string
+}
+
+interface FormInputerDialogOptions {
+  title: string
+  description?: string
+  formSchema: DasiV2FormSchema
+  cancelLabel?: string
+  actionLabel?: string
+  negative?: boolean
+  loading?: boolean
+  actionIcon?: string
+  class?: string
+  classContent?: string
+  classOverlay?: string
+  onSubmit?: (formData: any, form$?: any) => void
+  onCancel?: () => void
+  onChange?: (after: any, before: any, el$: any) => void
+}
+
+export const useInfoDialog = defineStore('infoDialog', () => {
+  const show = ref(false)
+  const options = ref<InfoDialogOptions>();
+  let resolveFn: () => void
+
+  function open(dialogOptions: InfoDialogOptions): Promise<void> {
+    options.value = dialogOptions;
+    show.value = true;
+    return new Promise((resolve) => {
+      resolveFn = resolve
+    })
+  }
+
+  function close() {
+    show.value = false;
+    resolveFn();
+  }
+
+  return { show, open, close, options }
+})
+
+export const useErrorDialog = defineStore('errorDialog', () => {
+  const show = ref(false)
+  const options = ref<ErrorDialogOptions>();
+  let resolveFn: () => void
+
+  function open(dialogOptions: ErrorDialogOptions): Promise<void> {
+    options.value = dialogOptions;
+    show.value = true;
+    return new Promise((resolve) => {
+      resolveFn = resolve
+    })
+  }
+
+  function close() {
+    show.value = false;
+    resolveFn();
+  }
+
+  return { show, open, close, options }
+})
+
+export const useConfirmDialog = defineStore('confirmDialog', () => {
+  const show = ref(false);
+  const options = ref<ConfirmDialogOptions>();
+  let resolveFn: (value: boolean) => void
+
+  function open(dialogOptions: ConfirmDialogOptions): Promise<boolean> {
+    options.value = dialogOptions;
+    show.value = true;
+    return new Promise((resolve) => {
+      resolveFn = resolve
+    })
+  }
+
+  function close(b: boolean) {
+    resolveFn(b);
+    show.value = false;
+  }
+
+  return { show, open, close, options }
+})
+
+export const useSuccessDialog = defineStore('successDialog', () => {
+  const show = ref(false);
+  const options = ref<SuccessDialogOptions>();
+  let resolveFn: () => void
+
+  function open(dialogOptions?: SuccessDialogOptions): Promise<void> {
+    options.value = dialogOptions;
+    show.value = true;
+    return new Promise((resolve) => {
+      resolveFn = resolve
+    })
+  }
+
+  function close() {
+    resolveFn();
+    show.value = false;
+  }
+
+  return { show, open, close, options }
+})
+
+export const useLoadingDialog = defineStore('loadingDialog', () => {
+  const show = ref(false)
+
+  function open() {
+    show.value = true;
+  }
+
+  function close() {
+    show.value = false;
+  }
+
+  return { show, open, close }
+})
+
+export const useFormInputerDialog = defineStore('formInputerDialog', () => {
+  const show = ref(false);
+  const options = ref<FormInputerDialogOptions>();
+  const formError = ref<null | string>(null);
+  const formSchema = ref<any>();
+  const saving = ref(false);
+
+  function open(dialogOptions: FormInputerDialogOptions): void {
+    formSchema.value = dialogOptions.formSchema;
+    formError.value = null;
+    saving.value = false;
+    options.value = dialogOptions;
+    show.value = true;
+  }
+
+  function close() {
+    show.value = false;
+  }
+
+  function submit(formData: any, form$: any) {
+    if (options.value?.onSubmit) options.value?.onSubmit(formData, form$);
+  }
+
+  function cancel() {
+    if (options.value?.onCancel) options.value?.onCancel();
+    close();
+  }
+
+  return { show, open, close, cancel, submit, options, formSchema, formError, saving }
+})
+

package/src/stores/form.ts

@@ -0,0 +1,103 @@
+import { defineStore } from 'pinia';
+import type { DasiV2FormSchema, FormReactiveSchema, FormSchemaItem } from '@/types/form.types';
+import { ref } from 'vue';
+import type { Vueform } from '@vueform/vueform';
+
+interface FormSheetOptions {
+  title: string
+  formSchema: FormReactiveSchema
+  loading?: boolean
+  className?: string
+
+  /**
+   * Called when form item changed
+   *
+   */
+  onChange?: (after: any, before: any, el$: any) => void
+
+  /**
+   * Called as soon as sheet dialog open
+   * the dialog open animation may not finished yet
+   *
+   */
+  onDialogOpen?: () => void
+
+  /**
+   * Called after form rendered
+   *
+   */
+  onMounted?: (el$: any) => void
+
+  /**
+   * Called when form submited
+   *
+   */
+  onSubmit?: (form$: Vueform) => void
+}
+
+export const useFormSheet = defineStore('formSheet', () => { 
+  const title = ref<string>();
+  const show = ref(false);
+  const loading = ref(false);
+  const saving = ref(false);
+  const formError = ref<string | null>(null);
+  const el$ = ref<Vueform>();
+  const className = ref('');
+  const formSchema = ref<DasiV2FormSchema>();
+
+  let onChangeEvent: ((after: any, before: any, el$: any) => void) | null
+  let onMountedEvent: ((el$: any) => void) | null
+  let onSubmitEvent: ((form$: Vueform) => void) | null
+  let resolveFn: (b: boolean) => void
+
+  function open(options: FormSheetOptions): Promise<boolean> {
+    title.value = options.title
+    loading.value = options.loading ?? false;
+    formSchema.value = options.formSchema.value;
+    onChangeEvent = options.onChange ?? null;
+    onMountedEvent = options.onMounted ?? null;
+    onSubmitEvent = options.onSubmit ?? null;
+    className.value = options.className ?? '';
+    saving.value = false;
+    formError.value = null;
+    show.value = true;
+
+    /**
+     * Run on dialog open as soon
+     * after set show.value to true
+     *
+     */
+    if (options.onDialogOpen) options.onDialogOpen();
+
+    return new Promise((resolve) => {
+      resolveFn = resolve
+    })
+  }
+
+  function submitForm(_: FormData, form$: Vueform) {
+    if (!onSubmitEvent) return;
+    onSubmitEvent(form$);
+  }
+
+  function onChange(after: any, before: any) {
+    if (!onChangeEvent) return;
+    onChangeEvent(after, before, el$.value);
+  }
+
+  function onMounted() {
+    if (!onMountedEvent) return;
+    onMountedEvent(el$.value);
+  }
+
+  function close(b?: boolean) {
+    show.value = false;
+    resolveFn(b === true);
+  }
+
+  return {
+    show, title, className,
+    loading, saving, formError,
+    open, close,
+    formSchema, submitForm, onChange, onMounted, el$,
+  };
+})

package/src/stores/tabs.ts

@@ -0,0 +1,52 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Submenu } from '@/menu'
+
+const TABS_STORAGE_KEY = 'dasi.tabs'
+
+export const useTab = defineStore('tabs', () => {
+  const tabs = ref<Submenu[]>([])
+
+  function loadTabsFromStorage() {
+    try {
+      const storedTabs = localStorage.getItem(TABS_STORAGE_KEY)
+      if (storedTabs) {
+        tabs.value = JSON.parse(storedTabs)
+      }
+    } catch (error) {
+      console.warn('Failed to load tabs from localStorage:', error)
+      tabs.value = []
+    }
+  }
+
+  function saveTabsToStorage() {
+    try {
+      localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(tabs.value))
+    } catch (error) {
+      console.warn('Failed to save tabs to localStorage:', error)
+    }
+  }
+
+  function addTab(tab: Submenu) {
+    if (tabs.value.some(existingTab => existingTab.url === tab.url)) return;
+    tabs.value.push(tab);
+    saveTabsToStorage()
+  }
+
+  function removeTab(tab: Submenu) {
+    const index = tabs.value.findIndex(existingTab => existingTab.url === tab.url);
+    if (index >= 0) {
+      tabs.value.splice(index, 1);
+      saveTabsToStorage()
+    }
+  }
+
+  function clearTabs() {
+    tabs.value = []
+    localStorage.removeItem(TABS_STORAGE_KEY)
+  }
+
+  loadTabsFromStorage()
+
+  return { tabs, addTab, removeTab, clearTabs }
+})