sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseFileUploader.vue

@@ -1,185 +1,185 @@
-<template>
-  <div class="relative">
-    <component
-      :is="componentInternal"
-      v-bind="pickerProps"
-      @select="onFileSelect"
-    >
-      <template #default="slotProps">
-        <slot
-          name="default"
-          :uploading="uploading"
-          :loading="loading"
-          v-bind="slotProps"
-        />
-        <slot
-          name="loading"
-          :uploading="uploading"
-          :loading="loading"
-          v-bind="slotProps"
-        >
-          <BaseLoadingCover
-            :delay="0"
-            tw-icon="w-6 h-6 text-primary-600"
-            :model-value="loading || uploading || slotProps.selecting"
-          />
-        </slot>
-      </template>
-    </component>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { config } from '@/index';
-import { UploadedFile } from '@/types/UploadedFile';
-import { useSnackbarsStore } from '@/stores/snackbars';
-import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import { BaseCropperConfig } from '@/types';
-import BaseFilePicker from './BaseFilePicker.vue';
-import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
-import { t } from '@/i18n';
-
-const http = config.http;
-const snackbarsStore = useSnackbarsStore();
-
-const props = withDefaults(
-  defineProps<{
-    component?: 'BaseFilePicker' | 'BaseFilePickerCrop';
-    url?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    beforeUpload?: () => boolean;
-    twButton?: string;
-    maxSize?: number;
-    accept?: string;
-    acceptedExtensions?: string[];
-    cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
-    multiple?: boolean;
-  }>(),
-  {
-    component: 'BaseFilePicker',
-    url: undefined,
-    disabled: false,
-    loading: false,
-    beforeUpload: (): boolean => {
-      return true;
-    },
-    twButton: '',
-    maxSize: undefined,
-    accept: undefined,
-    acceptedExtensions: undefined,
-    cropper: true,
-    multiple: false
-  }
-);
-
-const emit = defineEmits([
-  'start',
-  'success',
-  'fail',
-  'end',
-]);
-
-const componentInternal = computed(() => {
-  if (props.component == 'BaseFilePickerCrop') {
-    return BaseFilePickerCrop;
-  }
-  return BaseFilePicker;
-});
-
-const pickerProps = computed(() => {
-  const pickerProps = {
-    disabled: props.disabled || props.loading || uploading.value,
-    twButton: props.twButton,
-    maxSize: props.maxSize,
-    accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
-    acceptedExtensions: props.acceptedExtensions,
-    multiple: props.component == 'BaseFilePickerCrop' ? undefined : props.multiple,
-  } as Record<string, any>;
-
-  if (props.component == 'BaseFilePickerCrop') {
-    pickerProps.cropper = props.cropper;
-  }
-
-  return pickerProps;
-});
-
-const uploading = ref(false);
-
-async function onFileSelect(files: File | File[]) {
-  if (uploading.value) {
-    return;
-  }
-
-  uploading.value = true;
-
-  if (!(await props.beforeUpload())) {
-    uploading.value = false;
-    return;
-  }
-
-  emit('start');
-
-
-  let payloads = [] as UploadedFile[];
-
-  try {
-
-    if (Array.isArray(files)) {
-      payloads = await Promise.all(files.map(f => processFileUpload(f)));
-    } else {
-      const payload = await processFileUpload(files);
-      payloads.push(payload);
-    }
-
-    emit('success', payloads)
-
-  } catch (e: unknown) {
-    console.error(e);
-    emit('fail');
-    snackbarsStore.push({
-      color: 'danger',
-      title: t('sui.error'),
-      text: t('sui.upload_failed'),
-    });
-  } finally {
-    emit('end');
-    uploading.value = false;
-  }
-}
-
-async function processFileUpload(file: File): Promise<UploadedFile> {
-
-  const formData = new FormData();
-
-  formData.append('file', file);
-
-  const response = await http.post(props.url ?? config.upload_url, formData);
-
-  const payload = response.data as UploadedFile;
-  payload.original_file = file;
-
-  // Read file if image, add add data_url to payload
-
-  return new Promise(resolve => {
-
-    const reader = new FileReader();
-
-    reader.onload = (e: any) => {
-      payload.data_url = e.target.result;
-      resolve(payload);
-    };
-
-    reader.onerror = () => {
-      resolve(payload);
-    };
-
-    if (payload.mime_type.includes('image')) {
-      reader.readAsDataURL(file);
-    } else {
-      resolve(payload);
-    }
-  });
-}
-
-</script>
+<template>
+  <div class="relative">
+    <component
+      :is="componentInternal"
+      v-bind="pickerProps"
+      @select="onFileSelect"
+    >
+      <template #default="slotProps">
+        <slot
+          name="default"
+          :uploading="uploading"
+          :loading="loading"
+          v-bind="slotProps"
+        />
+        <slot
+          name="loading"
+          :uploading="uploading"
+          :loading="loading"
+          v-bind="slotProps"
+        >
+          <BaseLoadingCover
+            :delay="0"
+            tw-icon="w-6 h-6 text-primary-600"
+            :model-value="loading || uploading || slotProps.selecting"
+          />
+        </slot>
+      </template>
+    </component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { config } from '@/index';
+import { UploadedFile } from '@/types/UploadedFile';
+import { useSnackbarsStore } from '@/stores/snackbars';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import { BaseCropperConfig } from '@/types';
+import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
+import { t } from '@/i18n';
+
+const http = config.http;
+const snackbarsStore = useSnackbarsStore();
+
+const props = withDefaults(
+  defineProps<{
+    component?: 'BaseFilePicker' | 'BaseFilePickerCrop';
+    url?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    beforeUpload?: () => boolean;
+    twButton?: string;
+    maxSize?: number;
+    accept?: string;
+    acceptedExtensions?: string[];
+    cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
+    multiple?: boolean;
+  }>(),
+  {
+    component: 'BaseFilePicker',
+    url: undefined,
+    disabled: false,
+    loading: false,
+    beforeUpload: (): boolean => {
+      return true;
+    },
+    twButton: '',
+    maxSize: undefined,
+    accept: undefined,
+    acceptedExtensions: undefined,
+    cropper: true,
+    multiple: false
+  }
+);
+
+const emit = defineEmits([
+  'start',
+  'success',
+  'fail',
+  'end',
+]);
+
+const componentInternal = computed(() => {
+  if (props.component == 'BaseFilePickerCrop') {
+    return BaseFilePickerCrop;
+  }
+  return BaseFilePicker;
+});
+
+const pickerProps = computed(() => {
+  const pickerProps = {
+    disabled: props.disabled || props.loading || uploading.value,
+    twButton: props.twButton,
+    maxSize: props.maxSize,
+    accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
+    acceptedExtensions: props.acceptedExtensions,
+    multiple: props.component == 'BaseFilePickerCrop' ? undefined : props.multiple,
+  } as Record<string, any>;
+
+  if (props.component == 'BaseFilePickerCrop') {
+    pickerProps.cropper = props.cropper;
+  }
+
+  return pickerProps;
+});
+
+const uploading = ref(false);
+
+async function onFileSelect(files: File | File[]) {
+  if (uploading.value) {
+    return;
+  }
+
+  uploading.value = true;
+
+  if (!(await props.beforeUpload())) {
+    uploading.value = false;
+    return;
+  }
+
+  emit('start');
+
+
+  let payloads = [] as UploadedFile[];
+
+  try {
+
+    if (Array.isArray(files)) {
+      payloads = await Promise.all(files.map(f => processFileUpload(f)));
+    } else {
+      const payload = await processFileUpload(files);
+      payloads.push(payload);
+    }
+
+    emit('success', payloads)
+
+  } catch (e: unknown) {
+    console.error(e);
+    emit('fail');
+    snackbarsStore.push({
+      color: 'danger',
+      title: t('sui.error'),
+      text: t('sui.upload_failed'),
+    });
+  } finally {
+    emit('end');
+    uploading.value = false;
+  }
+}
+
+async function processFileUpload(file: File): Promise<UploadedFile> {
+
+  const formData = new FormData();
+
+  formData.append('file', file);
+
+  const response = await http.post(props.url ?? config.upload_url, formData);
+
+  const payload = response.data as UploadedFile;
+  payload.original_file = file;
+
+  // Read file if image, add add data_url to payload
+
+  return new Promise(resolve => {
+
+    const reader = new FileReader();
+
+    reader.onload = (e: any) => {
+      payload.data_url = e.target.result;
+      resolve(payload);
+    };
+
+    reader.onerror = () => {
+      resolve(payload);
+    };
+
+    if (payload.mime_type.includes('image')) {
+      reader.readAsDataURL(file);
+    } else {
+      resolve(payload);
+    }
+  });
+}
+
+</script>

package/src/components/BaseForm.mdx

@@ -1,88 +1,88 @@
-import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
- 
-import * as BaseFormStories from './BaseForm.stories';
- 
-<Meta of={BaseFormStories} />
- 
-# BaseForm
-
-## Overview
-
-The **BaseForm** Vue component is a versatile form wrapper designed to handle common tasks such as sending HTTP requests, formatting request data, displaying loading states, showing notifications, and managing form errors. By default, the payload is sent as JSON, but you can switch it to `formData` if needed. 
-
-It also handles errors gracefully—if you're using **BaseFields** (or components that wrap them) to display inputs, any validation errors received from the server can be shown directly under those fields. You can additionally show a global success or error notification for a better user experience. All of this can be toggled as you see fit.
-
-<Primary />
-
-## Component Responsibilities
-
-- **Sending Requests:** The component can be bound to an `axiosInstance`, which it uses to send POST, PUT, PATCH, or any other method requests to a specified `url`.
-- **Formatting JSON Payload:** By default, the form data is sent as JSON, but you can switch to `formData` by adjusting the `format` prop.
-- **Loading State:** A loading spinner can be displayed while the form is submitting. This spinner can have custom Tailwind CSS classes via the `twLoadingMask` prop, and it can be toggled on/off using `showLoadingMask`.
-- **Error and Success Handling:** 
-  - The component can display error messages next to fields (if those fields are wrapped in a **BaseField** and `name` prop is set and equivalent to the server response).  
-  - It can also show a global success or error notification, which is controlled by `showNotificationOnSuccess` and `showNotificationOnError`. 
-- **Lifecycle Hooks:** The form provides hooks for `beforeSubmit`, `successHandler`, and `errorHandler` that allow you to intercept the submission lifecycle at various points.
-
-## Default Slot
-
-The default slot is where you place your form elements and the submit buttons. For example:
-
-```html
-<BaseForm url="/api/save" :data="formData" method="post">
-  <BaseField label="Name" name="name">
-    <BaseInput v-model="formData.name" />
-  </BaseField>
-  <BaseField label="Email" name="email">
-    <BaseInput v-model="formData.email" />
-  </BaseField>
-
-  <button type="submit">Submit</button>
-</BaseForm>
-```
-
-- All standard HTML and Vue event handling still applies. 
-- If you’re using custom input components, make sure they handle `v-model` correctly so that the internal `data` is properly updated.
-
-
-## Autosave
-
-The **autosave** feature is a powerful enhancement that automatically saves the form whenever any field changes. It waits for a brief interval—by default, 400ms—to collect and debounce multiple changes, then sends a request.
-
-### How it Works
-1. **Change Detection:** Whenever an input updates the `data` object, the component sets a timer for 400ms.  
-2. **Debouncing:** If another change is detected before 400ms has passed, it resets the timer.  
-3. **Auto Submission:** Once 400ms have elapsed with no further changes, the form is automatically submitted to the given `url` using the specified `method` and `format`.  
-4. **Notifications and Hooks:** The usual loading state, success notifications, and error handling still apply. The `beforeSubmit`, `successHandler`, and `errorHandler` hooks are also triggered for these autosave submissions.
-
-### Why Use Autosave?
-- **Reduced Friction:** Users don’t need to remember to click “Save” or “Submit.”  
-- **Immediate Updates:** Ideal for scenarios like live collaboration or frequent data entry.  
-- **Fewer Data Loss Risks:** Changes are saved quickly, so fewer chances of losing progress.
-- **Inline edit in tables:** Great for inline editing in tables or other scenarios where a user might make many small changes.
-
-### Example
-
-In the example below, the form will automatically save after a 400ms delay whenever a field changes. The server also returns a 422 status code with validation errors, highlighting the field with the error.
-
-<Canvas of={BaseFormStories.Autosave} />
-
-
-## Lifecycle Hooks
-
-**beforeSubmit(formData)**
-   - Called right before the request is sent.  
-   - A good place to do last-minute transformations on `formData` or to trigger validations.
-
-**successHandler(response)**
-   - Invoked when the request is successful (2xx status).  
-   - Use it to update your UI further or show additional success messages.
-
-**errorHandler(error)**
-   - Runs when the request fails (4xx, 5xx, or network error).  
-   - Useful for custom error logging or handling specialized error formats.
-
-
-## API
- 
+import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
+ 
+import * as BaseFormStories from './BaseForm.stories';
+ 
+<Meta of={BaseFormStories} />
+ 
+# BaseForm
+
+## Overview
+
+The **BaseForm** Vue component is a versatile form wrapper designed to handle common tasks such as sending HTTP requests, formatting request data, displaying loading states, showing notifications, and managing form errors. By default, the payload is sent as JSON, but you can switch it to `formData` if needed. 
+
+It also handles errors gracefully—if you're using **BaseFields** (or components that wrap them) to display inputs, any validation errors received from the server can be shown directly under those fields. You can additionally show a global success or error notification for a better user experience. All of this can be toggled as you see fit.
+
+<Primary />
+
+## Component Responsibilities
+
+- **Sending Requests:** The component can be bound to an `axiosInstance`, which it uses to send POST, PUT, PATCH, or any other method requests to a specified `url`.
+- **Formatting JSON Payload:** By default, the form data is sent as JSON, but you can switch to `formData` by adjusting the `format` prop.
+- **Loading State:** A loading spinner can be displayed while the form is submitting. This spinner can have custom Tailwind CSS classes via the `twLoadingMask` prop, and it can be toggled on/off using `showLoadingMask`.
+- **Error and Success Handling:** 
+  - The component can display error messages next to fields (if those fields are wrapped in a **BaseField** and `name` prop is set and equivalent to the server response).  
+  - It can also show a global success or error notification, which is controlled by `showNotificationOnSuccess` and `showNotificationOnError`. 
+- **Lifecycle Hooks:** The form provides hooks for `beforeSubmit`, `successHandler`, and `errorHandler` that allow you to intercept the submission lifecycle at various points.
+
+## Default Slot
+
+The default slot is where you place your form elements and the submit buttons. For example:
+
+```html
+<BaseForm url="/api/save" :data="formData" method="post">
+  <BaseField label="Name" name="name">
+    <BaseInput v-model="formData.name" />
+  </BaseField>
+  <BaseField label="Email" name="email">
+    <BaseInput v-model="formData.email" />
+  </BaseField>
+
+  <button type="submit">Submit</button>
+</BaseForm>
+```
+
+- All standard HTML and Vue event handling still applies. 
+- If you’re using custom input components, make sure they handle `v-model` correctly so that the internal `data` is properly updated.
+
+
+## Autosave
+
+The **autosave** feature is a powerful enhancement that automatically saves the form whenever any field changes. It waits for a brief interval—by default, 400ms—to collect and debounce multiple changes, then sends a request.
+
+### How it Works
+1. **Change Detection:** Whenever an input updates the `data` object, the component sets a timer for 400ms.  
+2. **Debouncing:** If another change is detected before 400ms has passed, it resets the timer.  
+3. **Auto Submission:** Once 400ms have elapsed with no further changes, the form is automatically submitted to the given `url` using the specified `method` and `format`.  
+4. **Notifications and Hooks:** The usual loading state, success notifications, and error handling still apply. The `beforeSubmit`, `successHandler`, and `errorHandler` hooks are also triggered for these autosave submissions.
+
+### Why Use Autosave?
+- **Reduced Friction:** Users don’t need to remember to click “Save” or “Submit.”  
+- **Immediate Updates:** Ideal for scenarios like live collaboration or frequent data entry.  
+- **Fewer Data Loss Risks:** Changes are saved quickly, so fewer chances of losing progress.
+- **Inline edit in tables:** Great for inline editing in tables or other scenarios where a user might make many small changes.
+
+### Example
+
+In the example below, the form will automatically save after a 400ms delay whenever a field changes. The server also returns a 422 status code with validation errors, highlighting the field with the error.
+
+<Canvas of={BaseFormStories.Autosave} />
+
+
+## Lifecycle Hooks
+
+**beforeSubmit(formData)**
+   - Called right before the request is sent.  
+   - A good place to do last-minute transformations on `formData` or to trigger validations.
+
+**successHandler(response)**
+   - Invoked when the request is successful (2xx status).  
+   - Use it to update your UI further or show additional success messages.
+
+**errorHandler(error)**
+   - Runs when the request fails (4xx, 5xx, or network error).  
+   - Useful for custom error logging or handling specialized error formats.
+
+
+## API
+ 
 <Controls />