sprintify-ui 0.0.41 → 0.0.43

package/src/components/BaseTagAutocomplete.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <div class="min-h-[42px] rounded border border-slate-300 p-1">
+    <div
+      class="min-h-[42px] rounded border p-1"
+      :class="[hasErrorInternal ? 'border-red-600' : 'border-slate-300']"
+    >
       <div class="-m-0.5 flex flex-wrap">
         <div
           v-for="selection in normalizedModelValue"
@@ -38,8 +41,7 @@
             :value="keywords"
             type="text"
             :placeholder="$t('sui.select_an_item')"
-            class="h-[32px] w-full min-w-[50px] border-none p-0 pl-1 shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none focus:ring-0"
-            :class="inputClass"
+            class="h-[32px] w-full min-w-[50px] border-none p-0 pl-1 shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none focus:ring-0 disabled:cursor-not-allowed"
             @focus="onTextFocus"
             @blur="onTextBlur"
             @input="onTextInput"
@@ -129,13 +131,14 @@ import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
 import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import { useNotificationsStore } from '@/stores/notifications';
-import BaseSkeleton from './BaseSkeleton.vue';
+import BaseSkeleton from '@/components/BaseSkeleton.vue';
 import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
 
 const props = defineProps({
   modelValue: {
     required: true,
-    type: Array as PropType<Option[]>,
+    type: [Array, null] as PropType<Option[] | null>,
   },
   options: {
     required: true,
@@ -149,7 +152,7 @@ const props = defineProps({
     required: true,
     type: String,
   },
-  inputClass: {
+  name: {
     default: undefined,
     type: String,
   },
@@ -177,6 +180,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(option: NormalizedOption) => boolean>,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits([
@@ -186,6 +193,13 @@ const emit = defineEmits([
   'scrollBottom',
 ]);
 
+const { hasErrorInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
 const i18n = useI18n();
 const notifications = useNotificationsStore();
 
@@ -377,7 +391,7 @@ const addOption = (option: NormalizedOption) => {
 
   beforeAddOption();
 
-  emitUpdate([...normalizedModelValue.value, option]);
+  update([...normalizedModelValue.value, option]);
 
   setKeywords('');
 };
@@ -405,16 +419,13 @@ const attemptRemoveLastSelection = () => {
 const removeOption = (option: NormalizedOption) => {
   let newModelValue = cloneDeep(normalizedModelValue.value);
   newModelValue = newModelValue.filter((v) => v.value != option.value);
-  emitUpdate(newModelValue);
+  update(newModelValue);
 };
 
-const emitUpdate = (value: NormalizedOption[]) => {
-  emit(
-    'update:modelValue',
-    value.map((v) => v.option)
-  );
+function update(value: NormalizedOption[]) {
+  emitUpdate(value.map((v) => v.option));
   afterUpdate();
-};
+}
 
 const beforeAddOption = () => {
   selectionToDelete.value = null;

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -1,5 +1,7 @@
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
-import BaseApp from './BaseApp.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory, options } from '../../.storybook/utils';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 
 export default {
   title: 'Form/BaseTagAutocompleteFetch',
@@ -9,25 +11,24 @@ export default {
     url: 'https://effettandem.com/api/content/articles',
     labelKey: 'title',
     valueKey: 'id',
-    disabled: false,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 
 const Template = (args) => {
   return {
-    components: { BaseTagAutocompleteFetch, BaseApp },
+    components: { BaseTagAutocompleteFetch, ShowValue, BaseAppNotifications },
     setup() {
       const value = ref([]);
       return { args, value };
     },
     template: `
-    <BaseTagAutocompleteFetch
-      v-model="value"
-      v-bind="args"
-    ></BaseTagAutocompleteFetch>
-    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
-    <BaseApp />
+      <BaseTagAutocompleteFetch
+        v-model="value"
+        v-bind="args"
+      ></BaseTagAutocompleteFetch>
+      <ShowValue :value="value" />
+      <BaseAppNotifications />
   `,
   };
 };
@@ -35,12 +36,19 @@ const Template = (args) => {
 export const Demo = Template.bind({});
 Demo.args = {};
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  modelValue: [{ label: 'Dark Maul', value: '1' }],
-  labelKey: 'label',
-  valueKey: 'value',
-  disabled: true,
+export const Disabled = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `<BaseTagAutocompleteFetch
+      v-bind="args"
+      v-model="value"
+      :disabled="true"
+    ></BaseTagAutocompleteFetch>`,
+  };
 };
 
 export const Maximum = Template.bind({});
@@ -50,7 +58,7 @@ Maximum.args = {
 
 export const SlotOption = (args) => {
   return {
-    components: { BaseTagAutocompleteFetch },
+    components: {},
     setup() {
       const value = ref([]);
       return { args, value };
@@ -83,11 +91,13 @@ export const SlotOption = (args) => {
 
 export const SlotFooter = (args) => {
   return {
-    components: { BaseTagAutocompleteFetch },
+    components: {},
     setup() {
       const value = ref([]);
       function onClick() {
-        alert(1);
+        setTimeout(() => {
+          alert(1);
+        }, 300);
       }
       return { args, value, onClick };
     },
@@ -98,7 +108,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>
     </BaseTagAutocompleteFetch>
@@ -108,7 +118,7 @@ export const SlotFooter = (args) => {
 
 export const SlotEmpty = (args) => {
   return {
-    components: { BaseTagAutocompleteFetch },
+    components: {},
     setup() {
       const value = ref([]);
       return { args, value };
@@ -121,10 +131,16 @@ export const SlotEmpty = (args) => {
       <template #empty="props">
         <div>
           <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
-          <div v-else class="text-center p-6">Start your search... 🔎</div>
+          <div v-else class="text-center px-6 py-20">Start your search... 🔎</div>
         </div>
       </template>
     </BaseTagAutocompleteFetch>
   `,
   };
 };
+
+export const Field = createFieldStory({
+  component: BaseTagAutocompleteFetch,
+  componentName: 'BaseTagAutocompleteFetch',
+  label: 'Name',
+});

package/src/components/BaseTagAutocompleteFetch.vue

@@ -7,7 +7,7 @@
     :options="options"
     :value-key="valueKey"
     :label-key="labelKey"
-    :input-class="inputClass"
+    :has-error="hasError"
     :max="max"
     :filter="() => true"
     @focus="onFocus"
@@ -60,10 +60,6 @@ const props = defineProps({
     required: true,
     type: String,
   },
-  inputClass: {
-    default: undefined,
-    type: String,
-  },
   placeholder: {
     default: undefined,
     type: String,
@@ -84,6 +80,10 @@ const props = defineProps({
     default: 'search',
     type: String,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);

package/src/components/BaseTextarea.stories.js

@@ -1,11 +1,10 @@
+import { createFieldStory } from '../../.storybook/utils';
 import BaseTextarea from './BaseTextarea.vue';
 
 export default {
   title: 'Form/BaseTextarea',
   component: BaseTextarea,
   args: {
-    name: 'bio',
-    required: true,
     placeholder: 'Describe your complete life in 4 sentences...',
   },
 };
@@ -21,15 +20,24 @@ const Template = (args) => ({
   template: `
   <form @submit.prevent="" class="border-none">
     <BaseTextarea v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+    <button type="submit" class="btn btn-primary mt-4">Submit</button>
   </form>
   `,
 });
 
 export const Demo = Template.bind({});
-Demo.args = {};
+Demo.args = {
+  required: true,
+};
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   modelValue: 'Lorem ipsum...',
   disabled: true,
 };
+
+export const Field = createFieldStory({
+  component: BaseTextarea,
+  componentName: 'BaseTextarea',
+  label: 'Biography',
+});

package/src/components/BaseTextarea.vue

@@ -2,21 +2,23 @@
   <textarea
     :value="modelValue"
     :type="type"
-    :name="name"
+    :name="nameInternal"
     :placeholder="placeholder"
     :disabled="disabled"
-    :required="required"
+    :required="requiredInternal"
     :rows="rows"
-    class="mb-0 block rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
-    @input="$emit('update:modelValue', transformInputValue($event))"
+    :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
+    class="mb-0 block rounded disabled:cursor-not-allowed disabled:text-slate-300"
+    @input="emitUpdate(transformInputValue($event))"
   />
 </template>
 
 <script lang="ts" setup>
+import { useField } from '@/composables/field';
 import { get, isString, trim } from 'lodash';
 import { PropType } from 'vue';
 
-defineProps({
+const props = defineProps({
   modelValue: {
     default: undefined,
     type: String as PropType<string | undefined>,
@@ -53,9 +55,21 @@ defineProps({
     default: undefined,
     type: Number,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
 
 function transformInputValue(event: Event | null): string | null {
   if (event === null) {

package/src/components/BaseTextareaAutoresize.stories.js

@@ -1,4 +1,6 @@
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseTextareaAutoresize',
@@ -12,12 +14,13 @@ export default {
 const Template = (args) => ({
   components: {
     BaseTextareaAutoresize,
+    ShowValue,
   },
   setup() {
     function onSubmit() {
       alert('submit');
     }
-    const value = ref('');
+    const value = ref(null);
     return { args, value, onSubmit };
   },
   template: `
@@ -30,7 +33,7 @@ const Template = (args) => ({
     ></BaseTextareaAutoresize>
   </form>
 
-  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded whitespace-pre-wrap text-white">{{ {value} }}</pre>
+  <ShowValue :value="value" />
   `,
 });
 
@@ -47,3 +50,9 @@ Disabled.args = {
   modelValue: 'Lorem ipsum...',
   disabled: true,
 };
+
+export const Field = createFieldStory({
+  component: BaseTextareaAutoresize,
+  componentName: 'BaseTextareaAutoresize',
+  label: 'Biography',
+});

package/src/components/BaseTextareaAutoresize.vue

@@ -6,11 +6,15 @@
   >
     <textarea
       :value="modelValue"
-      :name="name"
+      :name="nameInternal"
       :placeholder="placeholder"
       :disabled="disabled"
+      :required="requiredInternal"
       class="resize-none"
-      :class="BASE_TEXTAREA_CLASSES"
+      :class="[
+        BASE_TEXTAREA_CLASSES,
+        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
+      ]"
       :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
       rows="1"
       @input="onInput"
@@ -20,7 +24,10 @@
     />
     <div
       class="invisible whitespace-pre-wrap"
-      :class="BASE_TEXTAREA_CLASSES"
+      :class="[
+        BASE_TEXTAREA_CLASSES,
+        hasErrorInternal ? 'border-red-500' : 'border-slate-300',
+      ]"
       :style="{
         content: DIV_CONTENT,
         maxHeight: maxHeight + 'px',
@@ -33,10 +40,11 @@
 </template>
 
 <script lang="ts" setup>
+import { useField } from '@/composables/field';
 import { Ref } from 'vue';
 
 const BASE_TEXTAREA_CLASSES =
-  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border border-slate-300';
+  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border';
 
 const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 
@@ -56,6 +64,10 @@ const props = defineProps({
     required: true,
     type: String,
   },
+  required: {
+    default: false,
+    type: Boolean,
+  },
   maxHeight: {
     default: 100,
     type: Number,
@@ -72,10 +84,22 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
 const wrapper = ref(null) as Ref<null | HTMLDivElement>;
 
 const keys = {} as { [key: string]: boolean };

package/src/components/BaseTextareaForm.vue

@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <BaseInputLabel
+      v-if="labelValue"
+      :label="labelValue"
+      :required="required"
+    />
+    <BaseTextarea
+      :model-value="normalizedModelValue"
+      :type="type"
+      :name="name"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :rows="rows"
+      :class="[
+        {
+          'border-red-600': hasError(),
+          'border-slate-300': !hasError(),
+        },
+      ]"
+      @update:model-value="inputListener($event)"
+    />
+    <div class="mt-1 flex flex-wrap sm:space-x-3">
+      <BaseInputError v-if="hasError()" class="order-2 grow sm:order-1">
+        {{ errorMessage() }}
+      </BaseInputError>
+      <div
+        class="order-1 w-full grow text-left sm:order-2 sm:w-auto sm:text-right"
+      >
+        <BaseCharacterCounter
+          :text="normalizedModelValue"
+          :min="min"
+          :max="max"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import BaseFormField from './BaseFormField';
+import { get, isString, trim } from 'lodash';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseInputError from './BaseInputError.vue';
+
+export default defineComponent({
+  components: {
+    BaseTextarea,
+    BaseInputLabel,
+    BaseCharacterCounter,
+    BaseInputError,
+  },
+  extends: BaseFormField,
+  props: {
+    modelValue: {
+      required: true,
+      type: [String, null] as PropType<string | null>,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    rows: {
+      default: 3,
+      type: Number,
+    },
+    min: {
+      default: undefined,
+      type: Number,
+    },
+    max: {
+      default: undefined,
+      type: Number,
+    },
+  },
+  computed: {
+    normalizedModelValue(): string {
+      if (isString(this.modelValue)) {
+        return this.modelValue;
+      }
+      return '';
+    },
+  },
+  methods: {
+    transformInputValue(event: Event | null): string | null {
+      if (event === null) {
+        return null;
+      }
+      const value = get(event, 'target.value', null);
+      if (!isString(value)) {
+        return null;
+      }
+      return trim(value as string);
+    },
+  },
+});
+</script>

package/src/components/BaseTimeline.vue

@@ -5,7 +5,7 @@
         <div class="relative pb-8">
           <span
             v-if="index != items.length - 1"
-            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+            class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-slate-200"
             aria-hidden="true"
           />
           <BaseTimelineItem :item="item" />

package/src/components/BaseTimelineItem.vue

@@ -8,14 +8,14 @@
         ]"
       >
         <BaseIcon
-          class="w-5 h-5 text-white"
+          class="h-5 w-5 text-white"
           aria-hidden="true"
           :icon="item.icon"
         />
       </span>
     </div>
     <div
-      class="flex justify-between flex-1 min-w-0 space-x-4"
+      class="flex min-w-0 flex-1 justify-between space-x-4"
       :class="{ 'pt-1.5': !item.description }"
     >
       <div>
@@ -31,7 +31,7 @@
       </div>
       <div
         v-if="item.date"
-        class="text-sm text-right text-gray-500 whitespace-nowrap"
+        class="whitespace-nowrap text-right text-sm text-slate-500"
       >
         <time :datetime="item.date">{{ item.date }}</time>
       </div>
@@ -74,6 +74,6 @@ const iconBackgroundClass = computed((): string => {
   if (props.item.color == Colors.success) {
     return 'bg-green-500';
   }
-  return 'bg-gray-500';
+  return 'bg-slate-500';
 });
 </script>

package/src/components/index.ts

@@ -25,8 +25,11 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseField from './BaseField.vue';
+import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
+import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import BaseInput from './BaseInput.vue';
@@ -100,8 +103,11 @@ export {
   BaseDescriptionList,
   BaseDescriptionListItem,
   BaseDialog,
+  BaseField,
+  BaseFieldI18n,
   BaseFilePicker,
   BaseFileUploader,
+  BaseForm,
   BaseHasMany,
   BaseIcon,
   BaseInput,