sprintify-ui 0.0.41 → 0.0.42

package/src/components/BaseForm.vue

@@ -0,0 +1,298 @@
+<template>
+  <form ref="form" class="relative" @submit.prevent="submit()">
+    <slot
+      :errors="errors"
+      :loading="loading"
+      :disabled="disabled"
+      :submit="submit"
+    />
+
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <slot v-if="loading" name="loading">
+        <div
+          class="absolute inset-0 flex h-full w-full items-center justify-center"
+        >
+          <div
+            class="absolute inset-0 h-full w-full opacity-80"
+            :class="loadingMaskClass"
+          />
+          <svg
+            class="relative h-6 w-6 animate-spin text-blue-600"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+            />
+          </svg>
+        </div>
+      </slot>
+    </transition>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { PropType, Ref } from 'vue';
+import { serialize } from 'object-to-formdata';
+import { Method, DataFormat } from '@/types';
+import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
+import { config, useNotificationsStore } from '@/index';
+import { isArray } from 'lodash';
+
+const notifications = useNotificationsStore();
+
+type NextFunction = () => void;
+
+const props = defineProps({
+  url: {
+    required: true,
+    type: String,
+  },
+  method: {
+    required: true,
+    type: String as PropType<Method>,
+    validator: (value: string) => {
+      return Object.values(Method).includes(value as Method);
+    },
+  },
+  data: {
+    required: true,
+    type: Object as PropType<Record<string, any>>,
+  },
+  axiosInstance: {
+    default: null,
+    type: Object as PropType<AxiosInstance | null>,
+  },
+  format: {
+    type: String as PropType<DataFormat>,
+    default: DataFormat.json,
+    validator: (value: string) => {
+      return Object.values(DataFormat).includes(value as DataFormat);
+    },
+  },
+  beforeSubmit: {
+    default: (next: NextFunction) => {
+      next();
+    },
+    type: Function as PropType<(next: NextFunction) => void>,
+  },
+  successHandler: {
+    default: undefined,
+    type: Function as PropType<(response: any) => void>,
+  },
+  errorHandler: {
+    default: (error: AxiosError) => {
+      error;
+    },
+    type: Function as PropType<(error: AxiosError) => void>,
+  },
+  loadingMaskClass: {
+    default: 'bg-white',
+    type: String,
+  },
+});
+
+const i18n = useI18n();
+const emit = defineEmits(['error', 'success']);
+
+const form = ref(null) as Ref<null | HTMLFormElement>;
+const loading = ref(false);
+const disabled = ref(false);
+const errors = ref({}) as Ref<Record<string, string[]>>;
+
+const httpClient = computed((): AxiosInstance => {
+  if (props.axiosInstance) {
+    return props.axiosInstance;
+  }
+
+  return config.http;
+});
+
+const htmlFormElement = computed((): HTMLFormElement | null => {
+  return form.value;
+});
+
+const hasErrors = computed((): boolean => {
+  return Object.keys(errors.value).length > 0;
+});
+
+const elementWithError = computed((): HTMLElement | null => {
+  if (!hasErrors.value) {
+    return null;
+  }
+
+  const keys = Object.keys(errors.value);
+
+  for (let i = 0; i < keys.length; i++) {
+    const name = keys[i];
+    const element = findElementByName(name);
+    if (element) {
+      return element;
+    }
+  }
+
+  return null;
+});
+
+function findElementByName(name: string): HTMLElement | null {
+  let el = htmlFormElement.value?.querySelector(`[name='${name}']`) as
+    | HTMLElement
+    | undefined;
+  if (el) {
+    return el;
+  }
+
+  el = htmlFormElement.value?.querySelector(`[data-name='${name}']`) as
+    | HTMLElement
+    | undefined;
+
+  if (el) {
+    return el;
+  }
+
+  return null;
+}
+
+function submit() {
+  props.beforeSubmit(query);
+}
+
+function query() {
+  if (loading.value) {
+    return;
+  }
+
+  loading.value = true;
+
+  let method = props.method as Method;
+  let data = props.data;
+  let headers = { 'Content-Type': 'application/json' };
+
+  if (props.format == 'formData') {
+    method = Method.post;
+
+    data = serialize(props.data, {
+      nullsAsUndefineds: false,
+      booleansAsIntegers: true,
+      allowEmptyArrays: true,
+    });
+
+    if (props.method !== Method.post) {
+      data.append('_method', props.method);
+    }
+
+    headers = {
+      'Content-Type': 'multipart/form-data',
+    };
+  }
+
+  httpClient.value[method](props.url, data, { headers: headers })
+    .then((response) => {
+      loading.value = false;
+
+      errors.value = {};
+
+      successHandler(response);
+
+      emit('success', response);
+    })
+    .catch((error: AxiosError<AxiosResponse<any>>) => {
+      console.error(error);
+
+      loading.value = false;
+
+      if (error.response && error.response.status == 422) {
+        loadErrors(error);
+      }
+
+      props.errorHandler(error);
+
+      emit('error', error);
+    });
+}
+
+function successHandler(response: AxiosResponse<any, any>) {
+  if (props.successHandler) {
+    props.successHandler(response);
+  } else {
+    const message = response.data.message ?? ('' as string);
+
+    if (!message) {
+      return;
+    }
+
+    notifications.push({
+      color: 'success',
+      title: i18n.t('sui.success'),
+      text: message,
+    });
+  }
+}
+
+function loadErrors(error: AxiosError): void {
+  errors.value = error?.response?.data.errors ?? {};
+
+  if (elementWithError.value) {
+    elementWithError.value.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    });
+  }
+}
+
+function getErrorMessageByName(name: string): string | null {
+  if (!errors.value[name]) {
+    return null;
+  }
+
+  if (!isArray(errors.value[name])) {
+    return null;
+  }
+
+  if (errors.value[name].length == 0) {
+    return null;
+  }
+
+  return errors.value[name][0];
+}
+
+function clearErrors(name = null): void {
+  if (name == null) {
+    errors.value = {};
+  } else {
+    delete errors.value[name];
+  }
+}
+
+function disabledForm() {
+  disabled.value = true;
+}
+
+function enableForm() {
+  disabled.value = false;
+}
+
+provide('form:errors', readonly(errors));
+provide('form:getErrorMessageByName', getErrorMessageByName);
+provide('form:clearErrors', clearErrors);
+
+provide('form:disabled', readonly(disabled));
+provide('form:enable', enableForm);
+provide('form:disable', disabledForm);
+
+defineExpose({
+  submit,
+  errors,
+  hasErrors,
+  clearErrors,
+  disabled,
+  loading,
+});
+</script>

package/src/components/BaseFormField.ts

@@ -0,0 +1,117 @@
+import { defineComponent } from 'vue';
+import BaseForm from './BaseForm.vue';
+
+export default defineComponent({
+  props: {
+    name: {
+      required: true,
+      type: String,
+    },
+    placeholder: {
+      default: '',
+      type: String,
+    },
+    label: {
+      default: '',
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      default: false,
+      type: Boolean,
+    },
+    autofocus: {
+      default: false,
+      type: Boolean,
+    },
+    preventSubmit: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    form(): typeof BaseForm | null {
+      let parent = this.$parent;
+      for (let i = 0; i < 20; i++) {
+        if (parent == null) {
+          throw new Error(
+            'A BaseForm field component must be in a BaseForm component'
+          );
+        }
+        if (parent.$options.__name == 'BaseForm') {
+          return parent as unknown as typeof BaseForm;
+        }
+        parent = parent.$parent;
+      }
+      return null;
+    },
+    errors() {
+      if (!this.form) {
+        return {};
+      }
+
+      return this.form.errors;
+    },
+    labelValue(): string {
+      if (this.label != '' && this.label != null && this.label != undefined) {
+        return this.label;
+      }
+
+      if (this.label === '') {
+        return '';
+      }
+
+      if (this.$te(this.name)) {
+        return this.$t(this.name);
+      }
+
+      return this.name;
+    },
+  },
+  methods: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    inputListener(payload: any) {
+      this.clearErrors();
+      this.$emit('update:modelValue', payload);
+    },
+    errorMessage(name: string | null = null) {
+      if (name == null) {
+        name = this.name;
+      }
+      if (this.hasError(name)) {
+        return this.errors[name][0];
+      }
+      return null;
+    },
+    hasError(name: string | null = null) {
+      if (name == null) {
+        name = this.name;
+      }
+      return (
+        Object.keys(this.errors).length > 0 &&
+        Object.prototype.hasOwnProperty.call(this.errors, name) &&
+        this.errors[name].length > 0
+      );
+    },
+    clearErrors(name: string | null = null) {
+      if (name == null) {
+        name = this.name;
+      }
+      this.form?.clearErrors(name);
+    },
+    disableForm() {
+      if (this.form) {
+        this.form.disabled = true;
+      }
+    },
+    enableForm() {
+      if (this.form) {
+        this.form.disabled = false;
+      }
+    },
+  },
+});

package/src/components/BaseHasMany.stories.js

@@ -1,4 +1,7 @@
 import BaseHasMany from './BaseHasMany.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory, options } from '../../.storybook/utils';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 
 export default {
   title: 'Form/BaseHasMany',
@@ -7,14 +10,14 @@ export default {
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
-    foreignKey: 'id',
+    primaryKey: 'id',
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 
 const Template = (args) => {
   return {
-    components: { BaseHasMany },
+    components: { BaseHasMany, ShowValue, BaseAppNotifications },
     setup() {
       const value = ref([]);
       return { args, value };
@@ -24,7 +27,8 @@ const Template = (args) => {
         v-model="value"
         v-bind="args"
       ></BaseHasMany>
-      <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? '[]' }}</span></p>
+      <ShowValue :value="value" />
+      <BaseAppNotifications />
   `,
   };
 };
@@ -37,13 +41,16 @@ export const Disabled = (args) => {
     components: { BaseHasMany },
     setup() {
       const value = ref([]);
-      return { args, value };
+      const currentModel = options[0];
+      return { args, value, currentModel };
     },
     template: `<BaseHasMany
       v-bind="args"
       v-model="value"
-      :current-models="[{title: 'Dark Vader', id: 1}]"
+      :current-models="[currentModel]"
       :disabled="true"
+      primaryKey="value"
+      field="label"
     ></BaseHasMany>`,
   };
 };
@@ -55,7 +62,7 @@ Maximum.args = {
 
 export const SlotOption = (args) => {
   return {
-    components: { BaseHasMany },
+    components: {},
     setup() {
       const value = ref([]);
       return { args, value };
@@ -88,11 +95,13 @@ export const SlotOption = (args) => {
 
 export const SlotFooter = (args) => {
   return {
-    components: { BaseHasMany },
+    components: {},
     setup() {
       const value = ref([]);
       function onClick() {
-        alert(1);
+        setTimeout(() => {
+          alert(1);
+        }, 300);
       }
       return { args, value, onClick };
     },
@@ -103,7 +112,7 @@ export const SlotFooter = (args) => {
     >
       <template #footer>
         <div class="text-center p-2 border-t">
-          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+          <button type="button" @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
         </div>
       </template>
     </BaseHasMany>
@@ -113,7 +122,7 @@ export const SlotFooter = (args) => {
 
 export const SlotEmpty = (args) => {
   return {
-    components: { BaseHasMany },
+    components: {},
     setup() {
       const value = ref([]);
       return { args, value };
@@ -133,3 +142,9 @@ export const SlotEmpty = (args) => {
   `,
   };
 };
+
+export const Field = createFieldStory({
+  component: BaseHasMany,
+  componentName: 'BaseHasMany',
+  label: 'Name',
+});

package/src/components/BaseHasMany.vue

@@ -5,9 +5,9 @@
     :disabled="disabled"
     :placeholder="placeholder"
     :required="required"
-    :value-key="foreignKey"
+    :value-key="primaryKey"
     :label-key="field"
-    :input-class="inputClass"
+    :has-error="hasError"
     :query-key="queryKey"
     :max="max"
     @update:model-value="onUpdate"
@@ -32,13 +32,13 @@ import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
 const props = defineProps({
   modelValue: {
     required: true,
-    type: Array as PropType<Option[]>,
+    type: [Array, null] as PropType<Option[] | null>,
   },
   url: {
     required: true,
     type: String,
   },
-  foreignKey: {
+  primaryKey: {
     default: 'id',
     type: String,
   },
@@ -58,10 +58,6 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
-  inputClass: {
-    default: undefined,
-    type: String,
-  },
   max: {
     default: undefined,
     type: Number,
@@ -76,6 +72,10 @@ const props = defineProps({
     },
     type: Array as PropType<Option[]>,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -94,7 +94,7 @@ function onUpdate(newModels: Option[]) {
   models.value = newModels;
   emit(
     'update:modelValue',
-    newModels.map((m) => m[props.foreignKey])
+    newModels.map((m) => m[props.primaryKey])
   );
 }
 </script>

package/src/components/BaseInput.stories.js

@@ -1,34 +1,38 @@
 import BaseInput from './BaseInput.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
 
 export default {
   title: 'Form/BaseInput',
   component: BaseInput,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+      <form @submit.prevent="" class="border-none">
+        <story/>
+      </form>`,
+    }),
+  ],
   args: {
-    required: true,
     type: 'text',
-    name: 'name',
+    placeholder: 'Enter your name',
   },
 };
 
 const Template = (args) => ({
-  components: {
-    BaseInput,
-  },
+  components: { BaseInput, ShowValue },
   setup() {
-    const value = ref('');
+    const value = ref(null);
     return { args, value };
   },
   template: `
-  <form @submit.prevent="" class="border-none">
-    <BaseInput v-model="value" v-bind="args"></BaseInput>
-  </form>
+    <BaseInput v-model="value" v-bind="args" class="w-full"></BaseInput>
+    <ShowValue :value="value" />
   `,
 });
 
 export const Demo = Template.bind({});
-Demo.args = {
-  placeholder: 'Enter your name',
-};
 
 export const IconLeft = Template.bind({});
 IconLeft.args = {
@@ -74,7 +78,11 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   modelValue: 'Disabled input!',
   disabled: true,
-  placeholder: 'Enter your name',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
 };
 
 export const Error = Template.bind({});
@@ -82,5 +90,10 @@ Error.args = {
   hasError: true,
   prefix: 'Price',
   iconRight: 'heroicons:currency-dollar',
-  placeholder: 'Enter your name',
 };
+
+export const Field = createFieldStory({
+  component: BaseInput,
+  componentName: 'BaseInput',
+  label: 'Name',
+});