sprintify-ui 0.0.41 → 0.0.42

package/src/components/BaseButtonGroup.vue

@@ -32,12 +32,13 @@ import { PropType } from 'vue';
 import { NormalizedOption, Option } from '@/types';
 import { cloneDeep, isArray } from 'lodash';
 import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Array, String, Number, null] as PropType<
-      Option[] | Option | undefined
+    type: [Object, Array, null, undefined] as PropType<
+      Option[] | Option | null | undefined
     >,
   },
   required: {
@@ -84,10 +85,25 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
+const { requiredInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
 const { normalizedOptions, normalizedModelValue, isSelected } = useHasOptions(
   computed(() => props.modelValue),
   computed(() => props.options),
@@ -112,23 +128,20 @@ function onSelect(option: NormalizedOption) {
       newModalValue.push(option);
     }
 
-    emit(
-      'update:modelValue',
-      newModalValue.map((o) => o.option)
-    );
+    emitUpdate(newModalValue.map((o) => o.option));
   } else {
-    if (!props.required) {
+    if (!requiredInternal.value) {
       if (
         !isArray(normalizedModelValue.value) &&
         option.value == normalizedModelValue.value?.value
       ) {
-        emit('update:modelValue', null);
+        emitUpdate(null);
         return;
       }
     }
 
     const newOption = option.option;
-    emit('update:modelValue', newOption);
+    emitUpdate(newOption);
   }
 }
 </script>

package/src/components/BaseCharacterCounter.stories.js

@@ -1,5 +1,5 @@
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
-import BaseInput from './BaseInput.vue';
+import BaseInput from '@/components/BaseInput.vue';
 
 export default {
   title: 'Components/BaseCharacterCounter',

package/src/components/BaseDatePicker.stories.js

@@ -1,5 +1,7 @@
 import BaseDatePicker from './BaseDatePicker.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { DateTime } from 'luxon';
+import { createFieldStory } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseDatePicker',
@@ -8,36 +10,32 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseDatePicker },
+  components: { BaseDatePicker, ShowValue },
   setup() {
-    return { args };
+    const value = ref(null);
+    return { value, args };
   },
   template: `
-    <BaseDatePicker v-bind="args">
+    <BaseDatePicker v-model="value" v-bind="args">
     </BaseDatePicker>
+    <ShowValue :value="value" />
   `,
 });
 
 export const Demo = Template.bind({});
-Demo.args = {
-  modelValue: '2023-01-01',
-};
 
 export const YearRange = Template.bind({});
 YearRange.args = {
-  modelValue: '1980-11-16',
   yearRange: [1920, 2020],
 };
 
 export const MinDate = Template.bind({});
 MinDate.args = {
-  modelValue: '2022-11-16',
   minDate: DateTime.fromISO('2022-11-10').toJSDate(),
 };
 
 export const MaxDate = Template.bind({});
 MaxDate.args = {
-  modelValue: '2022-11-16',
   maxDate: DateTime.fromISO('2022-11-20').toJSDate(),
 };
 
@@ -46,3 +44,9 @@ Disabled.args = {
   modelValue: '2022-11-16',
   disabled: true,
 };
+
+export const Field = createFieldStory({
+  component: BaseDatePicker,
+  componentName: 'BaseDatePicker',
+  label: 'Date',
+});

package/src/components/BaseDatePicker.vue

@@ -14,8 +14,8 @@
       type="text"
       readonly
       :disabled="disabled"
-      class="w-full rounded pl-10 pr-16 disabled:cursor-not-allowed disabled:text-gray-300"
-      :class="inputClass"
+      class="w-full rounded pl-10 pr-16 disabled:cursor-not-allowed disabled:text-slate-300"
+      :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
       :placeholder="$t('sui.click_or_select_date')"
     />
     <div
@@ -38,6 +38,8 @@ import { PropType, Ref } from 'vue';
 import Pikaday from 'pikaday';
 import { capitalize, padStart } from 'lodash';
 import { DateTime, Info } from 'luxon';
+import { BaseIcon } from '.';
+import { useField } from '@/composables/field';
 
 const props = defineProps({
   modelValue: {
@@ -52,10 +54,6 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  inputClass: {
-    default: 'border-slate-300',
-    type: String,
-  },
   minDate: {
     default: undefined,
     type: Date,
@@ -68,10 +66,25 @@ const props = defineProps({
     default: undefined,
     type: [Number, Array] as PropType<number | [number, number]>,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
+const { hasErrorInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
 const i18n = useI18n();
 
 const datepicker = ref(null) as Ref<HTMLInputElement | null>;
@@ -118,6 +131,10 @@ onMounted(() => {
       return `${year}-${month}-${day}`;
     },
     parse(dateString) {
+      if (!dateString) {
+        return null;
+      }
+
       const datetime = DateTime.fromISO(dateString);
       const year = datetime.year;
       const month = datetime.month - 1;
@@ -140,7 +157,7 @@ onMounted(() => {
         return;
       }
 
-      emit('update:modelValue', datetime.toISODate());
+      emitUpdate(datetime.toISODate());
     },
   });
 });
@@ -153,7 +170,7 @@ onBeforeUnmount(() => {
 
 function clear() {
   picker?.clear();
-  emit('update:modelValue', null);
+  emitUpdate(null);
 }
 
 // https://stackoverflow.com/a/23368052

package/src/components/BaseDateSelect.stories.js

@@ -1,4 +1,6 @@
 import BaseDateSelect from './BaseDateSelect.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseDateSelect',
@@ -7,30 +9,28 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { BaseDateSelect },
+  components: { BaseDateSelect, ShowValue },
   setup() {
-    return { args };
+    const value = ref(null);
+    return { value, args };
   },
   template: `
-    <BaseDateSelect v-bind="args">
-    </BaseDateSelect>
+  <BaseDateSelect v-model="value" v-bind="args">
+  </BaseDateSelect>
+  <ShowValue :value="value" />
   `,
 });
 
 export const Demo = Template.bind({});
-Demo.args = {
-  modelValue: '2021-01-01',
-};
+Demo.args = {};
 
 export const MinYear = Template.bind({});
 MinYear.args = {
-  modelValue: '2022-11-16',
   minYear: 1980,
 };
 
 export const MaxYear = Template.bind({});
 MaxYear.args = {
-  modelValue: '2002-11-16',
   maxYear: 2010,
 };
 
@@ -39,3 +39,9 @@ Disabled.args = {
   modelValue: '2022-11-16',
   disabled: true,
 };
+
+export const Field = createFieldStory({
+  component: BaseDateSelect,
+  componentName: 'BaseDateSelect',
+  label: 'Date',
+});

package/src/components/BaseDateSelect.vue

@@ -12,7 +12,7 @@
             {
               'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
             },
-            inputClass,
+            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
           ]"
           :placeholder="$t('sui.year')"
           @change="update()"
@@ -37,7 +37,7 @@
             {
               'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
             },
-            inputClass,
+            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
           ]"
           :placeholder="$t('sui.month')"
           @change="update()"
@@ -62,7 +62,7 @@
             {
               'cursor-not-allowed bg-slate-100 text-slate-500': dayDisabled,
             },
-            inputClass,
+            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
           ]"
           :placeholder="$t('sui.day')"
           @change="update()"
@@ -92,6 +92,7 @@
 import { PropType } from 'vue';
 import { range, padStart } from 'lodash';
 import { DateTime, Info } from 'luxon';
+import { useField } from '@/composables/field';
 
 const props = defineProps({
   modelValue: {
@@ -114,14 +115,25 @@ const props = defineProps({
     default: DateTime.now().year,
     type: Number,
   },
-  inputClass: {
-    default: 'border-slate-300',
+  name: {
+    default: undefined,
     type: String,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
+const { hasErrorInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
 const i18n = useI18n();
 
 const years = range(props.maxYear, props.minYear) as number[];
@@ -162,9 +174,9 @@ function update() {
   const dateTime = getDateTime();
 
   if (dateTime) {
-    emit('update:modelValue', dateTime.toISODate());
+    emitUpdate(dateTime.toISODate());
   } else {
-    emit('update:modelValue', null);
+    emitUpdate(null);
   }
 }
 
@@ -173,7 +185,7 @@ function clear() {
   date.value.month = null;
   date.value.year = null;
 
-  emit('update:modelValue', null);
+  emitUpdate(null);
 }
 
 function getDateTime(): DateTime | null {

package/src/components/BaseField.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :data-name="name">
+    <BaseInputLabel
+      v-if="labelNormalized"
+      :label="labelNormalized"
+      :required="required"
+      :class="labelClassInternal"
+    />
+    <slot></slot>
+    <template v-if="errorMessage">
+      <BaseInputError v-if="errorTypeInternal == 'default'" class="mt-1">
+        {{ errorMessage }}
+      </BaseInputError>
+      <BaseAlert
+        v-else-if="errorTypeInternal == 'alert'"
+        bordered
+        color="danger"
+        class="mt-4"
+      >
+        {{ errorMessage }}
+      </BaseAlert>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import BaseAlert from './BaseAlert.vue';
+import BaseInputError from './BaseInputError.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+
+const props = defineProps({
+  name: {
+    default: '',
+    type: String,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  errorType: {
+    type: String as PropType<'default' | 'alert'>,
+    default: 'default',
+  },
+  labelClass: {
+    default: '',
+    type: [String, Array, Object] as PropType<
+      string | string[] | Record<string, boolean>
+    >,
+  },
+});
+
+const errorTypeInternal = ref(props.errorType);
+
+function setErrorType(errorType: 'default' | 'alert' | null) {
+  if (errorType != null) {
+    errorTypeInternal.value = errorType;
+  }
+}
+
+const labelClassInternal = ref(props.labelClass);
+
+function setLabelClass(
+  labelClass: string | string[] | Record<string, boolean> | null
+) {
+  if (labelClass != null) {
+    labelClassInternal.value = labelClass;
+  }
+}
+
+const getErrorMessageByName = inject(
+  'form:getErrorMessageByName',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (name: string) => {
+    return null;
+  }
+) as (name: string) => string | null | undefined;
+
+const clearErrors = inject('form:clearErrors', () => {
+  return;
+}) as () => void;
+
+function fieldOnUpdate() {
+  clearErrors();
+}
+
+const labelNormalized = computed((): string | null => {
+  if (props.label) {
+    return props.label;
+  }
+
+  return null;
+});
+
+const errorMessage = computed((): string | null | undefined => {
+  return getErrorMessageByName(props.name);
+});
+
+provide('field:name', readonly(ref(props.name)));
+provide('field:required', readonly(ref(props.required)));
+provide('field:onUpdate', fieldOnUpdate);
+provide('field:errorMessage', errorMessage);
+provide('field:setErrorType', setErrorType);
+provide('field:setLabelClass', setLabelClass);
+</script>

package/src/components/BaseFieldI18n.stories.js

@@ -0,0 +1,38 @@
+import BaseFieldI18n from './BaseFieldI18n.vue';
+import BaseForm from './BaseForm.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseFieldI18n',
+  component: BaseFieldI18n,
+  decorators: [
+    (story) => ({
+      components: { story, BaseForm },
+      template: `
+      <BaseForm method="post" url="https://api.com/todos/422" :data="{}">
+        <story/>
+        <button type="submit" class="btn btn-primary mt-5">Submit</button>
+      </BaseForm>`,
+    }),
+  ],
+  args: {
+    component: 'BaseInput',
+    required: true,
+    name: 'name',
+    label: 'Name',
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseFieldI18n, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseFieldI18n v-model="value" v-bind="args" class="w-full"></BaseFieldI18n>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});

package/src/components/BaseFieldI18n.vue

@@ -0,0 +1,162 @@
+<template>
+  <div :data-name="nameInternal">
+    <div class="space-y-2">
+      <div v-for="(locale, key) in localesInternal" :key="key">
+        <BaseField
+          :name="`${nameInternal}.${key}`"
+          :required="requiredInternal"
+          :label="getLabel(locale)"
+        >
+          <BaseInput
+            v-if="component == 'BaseInput'"
+            :model-value="formattedValue[key] + ''"
+            class="w-full bg-white"
+            v-bind="componentProps"
+            @update:model-value="onInput($event, key + '')"
+          />
+          <BaseTextarea
+            v-else-if="component == 'BaseTextarea'"
+            :model-value="formattedValue[key] + ''"
+            :required="requiredInternal"
+            :name="`${nameInternal}.${key}`"
+            class="w-full bg-white"
+            v-bind="componentProps"
+            @update:model-value="onInput($event, key + '')"
+          />
+        </BaseField>
+      </div>
+    </div>
+    <BaseAlert v-if="globalErrorMessage" class="mt-3" bordered color="danger">
+      {{ globalErrorMessage }}
+    </BaseAlert>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Locales } from '@/types';
+import { get, isPlainObject } from 'lodash';
+import objectHash from 'object-hash';
+import { PropType } from 'vue';
+import { config } from '..';
+import { useField } from '@/composables/field';
+import BaseInput from './BaseInput.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseField from './BaseField.vue';
+import BaseAlert from './BaseAlert.vue';
+
+defineComponent({
+  components: {
+    BaseInput,
+    BaseTextarea,
+  },
+});
+
+type Value = { [locale: string]: string | number | boolean };
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [Object, null, undefined] as PropType<Value | null | undefined>,
+  },
+  locales: {
+    default: undefined,
+    type: Object as PropType<Locales>,
+  },
+  component: {
+    default: 'BaseInput',
+    type: String as PropType<'BaseInput' | 'BaseTextarea'>,
+  },
+  componentProps: {
+    default: undefined,
+    type: Object,
+  },
+  defaultValue: {
+    default: '',
+    type: [String, Boolean, Number] as PropType<string | boolean | number>,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  label: {
+    default: undefined,
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const getErrorMessageByName = inject(
+  'form:getErrorMessageByName',
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (name: string) => {
+    return null;
+  }
+) as (name: string) => string | null | undefined;
+
+const colors = ref(['#10b981', '#06b6d4', '#a855f7']);
+
+const localesInternal = computed((): Locales => {
+  if (props.locales) {
+    return props.locales;
+  }
+  return config.locales;
+});
+
+const formattedValue = computed((): Value => {
+  // Get current value
+  let value = {} as Value;
+  if (props.modelValue && isPlainObject(props.modelValue)) {
+    value = props.modelValue as Value;
+  }
+  // Fill missing locales
+  Object.keys(localesInternal.value).forEach((locale) => {
+    const currentValue = get(props.modelValue, locale);
+    if (!currentValue) {
+      value[locale] = props.defaultValue;
+    }
+  });
+  return value;
+});
+
+// If formatted value is different, send event to parent
+if (
+  !props.modelValue ||
+  objectHash(formattedValue.value) !== objectHash(props.modelValue)
+) {
+  const newFormattedValue = formattedValue.value;
+  emit('update:modelValue', newFormattedValue);
+}
+
+function onInput(value: string, locale: string) {
+  const newFormattedValue = formattedValue.value;
+  newFormattedValue[locale] = value;
+  emit('update:modelValue', newFormattedValue);
+}
+
+function getLabel(locale: string): string | undefined {
+  if (!props.label) {
+    return undefined;
+  }
+  return `${props.label} (${locale})`;
+}
+
+const globalErrorMessage = computed(() => {
+  return getErrorMessageByName(nameInternal.value);
+});
+</script>

package/src/components/BaseFileUploader.stories.js

@@ -1,6 +1,6 @@
-import BaseFileUploader from './BaseFileUploader.vue';
-import BaseLoadingCover from './BaseLoadingCover.vue';
-import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseFileUploader from '@/components/BaseFileUploader.vue';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 
 export default {

package/src/components/BaseFileUploader.vue

@@ -36,9 +36,9 @@
 import { config } from '@/index';
 import { PropType } from 'vue';
 import { UploadedFile } from '@/types/UploadedFile';
-import { toHumanList, fileSizeFormat } from '../utils';
-import { useNotificationsStore } from '../stores/notifications';
-import BaseLoadingCover from './BaseLoadingCover.vue';
+import { toHumanList, fileSizeFormat } from '@/utils';
+import { useNotificationsStore } from '@/stores/notifications';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 
 const http = config.http;