sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseFileUploader.vue

@@ -1,163 +1,163 @@
-<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"
-            icon-class="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 { useNotificationsStore } from '@/stores/notifications';
-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 notifications = useNotificationsStore();
-
-const props = withDefaults(
-  defineProps<{
-    component?: 'BaseFilePicker' | 'BaseFilePickerCrop';
-    url?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    beforeUpload?: () => boolean;
-    buttonClass?: string;
-    maxSize?: number;
-    accept?: string;
-    acceptedExtensions?: string[];
-    cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
-  }>(),
-  {
-    component: 'BaseFilePicker',
-    url: undefined,
-    disabled: false,
-    loading: false,
-    beforeUpload: (): boolean => {
-      return true;
-    },
-    buttonClass: '',
-    maxSize: undefined,
-    accept: undefined,
-    acceptedExtensions: undefined,
-    cropper: true,
-  }
-);
-
-const emit = defineEmits([
-  'upload:start',
-  'upload:success',
-  'upload:fail',
-  'upload:end',
-]);
-
-const componentInternal = computed(() => {
-  if (props.component == 'BaseFilePickerCrop') {
-    return BaseFilePickerCrop;
-  }
-  return BaseFilePicker;
-});
-
-const pickerProps = computed(() => {
-  const pickerProps = {
-    disabled: props.disabled || props.loading || uploading.value,
-    buttonClass: props.buttonClass,
-    maxSize: props.maxSize,
-    accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
-    acceptedExtensions: props.acceptedExtensions,
-  } as Record<string, any>;
-
-  if (props.component == 'BaseFilePickerCrop') {
-    pickerProps.cropper = props.cropper;
-  }
-
-  return pickerProps;
-});
-
-const uploading = ref(false);
-
-async function onFileSelect(file: File) {
-  if (uploading.value) {
-    return;
-  }
-
-  uploading.value = true;
-
-  if (!(await props.beforeUpload())) {
-    uploading.value = false;
-    return;
-  }
-
-  try {
-    const formData = new FormData();
-
-    formData.append('file', file);
-
-    emit('upload:start');
-
-    const response = await http.post(props.url ?? config.upload_url, formData);
-
-    const payload = response.data as UploadedFile;
-    payload.original_file = file;
-
-    const reader = new FileReader();
-
-    reader.onload = (e: any) => {
-      payload.data_url = e.target.result;
-      onSuccess(payload);
-    };
-
-    reader.onerror = (e: any) => {
-      onSuccess(payload);
-    };
-
-    if (payload.mime_type.includes('image')) {
-      reader.readAsDataURL(file);
-    } else {
-      onSuccess(payload);
-    }
-  } catch (e: unknown) {
-    console.error(e);
-    emit('upload:fail');
-    notifications.push({
-      color: 'danger',
-      title: t('sui.error'),
-      text: t('sui.upload_failed'),
-    });
-  } finally {
-    emit('upload:end');
-    uploading.value = false;
-  }
-}
-
-function onSuccess(payload: any) {
-  emit('upload:success', 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 { useNotificationsStore } from '@/stores/notifications';
+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 notifications = useNotificationsStore();
+
+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;
+  }>(),
+  {
+    component: 'BaseFilePicker',
+    url: undefined,
+    disabled: false,
+    loading: false,
+    beforeUpload: (): boolean => {
+      return true;
+    },
+    twButton: '',
+    maxSize: undefined,
+    accept: undefined,
+    acceptedExtensions: undefined,
+    cropper: true,
+  }
+);
+
+const emit = defineEmits([
+  'upload:start',
+  'upload:success',
+  'upload:fail',
+  'upload: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,
+  } as Record<string, any>;
+
+  if (props.component == 'BaseFilePickerCrop') {
+    pickerProps.cropper = props.cropper;
+  }
+
+  return pickerProps;
+});
+
+const uploading = ref(false);
+
+async function onFileSelect(file: File) {
+  if (uploading.value) {
+    return;
+  }
+
+  uploading.value = true;
+
+  if (!(await props.beforeUpload())) {
+    uploading.value = false;
+    return;
+  }
+
+  try {
+    const formData = new FormData();
+
+    formData.append('file', file);
+
+    emit('upload:start');
+
+    const response = await http.post(props.url ?? config.upload_url, formData);
+
+    const payload = response.data as UploadedFile;
+    payload.original_file = file;
+
+    const reader = new FileReader();
+
+    reader.onload = (e: any) => {
+      payload.data_url = e.target.result;
+      onSuccess(payload);
+    };
+
+    reader.onerror = (e: any) => {
+      onSuccess(payload);
+    };
+
+    if (payload.mime_type.includes('image')) {
+      reader.readAsDataURL(file);
+    } else {
+      onSuccess(payload);
+    }
+  } catch (e: unknown) {
+    console.error(e);
+    emit('upload:fail');
+    notifications.push({
+      color: 'danger',
+      title: t('sui.error'),
+      text: t('sui.upload_failed'),
+    });
+  } finally {
+    emit('upload:end');
+    uploading.value = false;
+  }
+}
+
+function onSuccess(payload: any) {
+  emit('upload:success', payload);
+}
+</script>

package/src/components/BaseForm.stories.js

@@ -1,48 +1,48 @@
-import BaseForm from './BaseForm.vue';
-import BaseField from './BaseField.vue';
-import BaseNumber from './BaseNumber.vue';
-import BaseMediaLibrary from './BaseMediaLibrary.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseForm',
-  component: BaseForm,
-};
-
-const Template = (args) => ({
-  components: {
-    ShowValue,
-    BaseForm,
-    BaseField,
-    BaseNumber,
-    BaseMediaLibrary,
-  },
-  setup() {
-    const form = ref({
-      number: 1.1,
-    });
-    return { args, form };
-  },
-  template: `
-  <BaseForm 
-    method="post" 
-    url="https://faker.witify.io/api/todos/422" 
-    :data="form" 
-    v-slot="{disabled}"
-  >
-    <BaseField class="mb-3" name="number" label="Number">
-      <BaseNumber v-model="form.number"></BaseNumber>
-    </BaseField>
-    
-    <BaseField class="mb-3" name="media" label="Media">
-      <BaseMediaLibrary v-model="form.media" upload-url="https://faker.witify.io/api/todos/upload"></BaseMediaLibrary>
-    </BaseField>
-
-    <button type="submit" class="btn btn-primary" :disabled="disabled">Submit</button>
-  </BaseForm>
-  <ShowValue :value="form" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseForm from './BaseForm.vue';
+import BaseField from './BaseField.vue';
+import BaseNumber from './BaseNumber.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseForm',
+  component: BaseForm,
+};
+
+const Template = (args) => ({
+  components: {
+    ShowValue,
+    BaseForm,
+    BaseField,
+    BaseNumber,
+    BaseMediaLibrary,
+  },
+  setup() {
+    const form = ref({
+      number: 1.1,
+    });
+    return { args, form };
+  },
+  template: `
+  <BaseForm 
+    method="post" 
+    url="https://faker.witify.io/api/todos/422" 
+    :data="form" 
+    v-slot="{disabled}"
+  >
+    <BaseField class="mb-3" name="number" label="Number">
+      <BaseNumber v-model="form.number"></BaseNumber>
+    </BaseField>
+    
+    <BaseField class="mb-3" name="media" label="Media">
+      <BaseMediaLibrary v-model="form.media" upload-url="https://faker.witify.io/api/todos/upload"></BaseMediaLibrary>
+    </BaseField>
+
+    <button type="submit" class="btn btn-primary" :disabled="disabled">Submit</button>
+  </BaseForm>
+  <ShowValue :value="form" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};