sprintify-ui 0.0.41 → 0.0.42

package/src/components/BaseAutocomplete.vue

@@ -6,11 +6,11 @@
           ref="inputElement"
           :value="keywords"
           type="text"
-          :class="inputClass + ' pl-9'"
           :placeholder="
             placeholder ? placeholder : $t('sui.autocomplete_placeholder')
           "
-          class="rounded disabled:cursor-not-allowed disabled:text-slate-300"
+          class="w-full rounded pl-9 disabled:cursor-not-allowed disabled:text-slate-300"
+          :class="[hasErrorInternal ? 'border-red-600' : 'border-slate-300']"
           autocomplete="off"
           :disabled="disabled"
           @focus="onTextFocus"
@@ -95,7 +95,11 @@
 
         <div ref="footer">
           <div v-if="$slots.footer" class="bg-white">
-            <slot :options="filteredNormalizedOptions" name="footer" />
+            <slot
+              :options="filteredNormalizedOptions"
+              :keywords="keywords"
+              name="footer"
+            />
           </div>
         </div>
 
@@ -125,8 +129,10 @@ import { get } from 'lodash';
 import { PropType, Ref, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
 import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
-import BaseSkeleton from './BaseSkeleton.vue';
+import BaseSkeleton from '@/components/BaseSkeleton.vue';
 import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
+import { BaseIcon } from './index';
 
 const props = defineProps({
   modelValue: {
@@ -145,8 +151,8 @@ const props = defineProps({
     required: true,
     type: String,
   },
-  inputClass: {
-    default: 'border-slate-300 w-full',
+  name: {
+    default: undefined,
     type: String,
   },
   placeholder: {
@@ -169,6 +175,10 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<(option: NormalizedOption) => boolean>,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits([
@@ -179,6 +189,13 @@ const emit = defineEmits([
   'clear',
 ]);
 
+const { hasErrorInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
 const timerId = ref(0);
 const keywords = ref('');
 const showDropdown = ref(false);
@@ -358,7 +375,7 @@ const update = (normalizedSelection: Option | null | undefined) => {
   if (normalizedSelection) {
     setKeywordsWithoutEvent(normalizedSelection.label);
   }
-  emit('update:modelValue', selection);
+  emitUpdate(selection);
 };
 
 const setKeywordsWithoutEvent = (input: string) => {
@@ -387,6 +404,6 @@ useMutationObserver(
   () => {
     preventUnfocusOnFooter();
   },
-  { attributes: false, childList: true }
+  { attributes: false, childList: true, subtree: true }
 );
 </script>

package/src/components/BaseAutocompleteFetch.stories.js

@@ -1,43 +1,39 @@
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { options } from '@/../.storybook/utils';
+import { createFieldStory } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseAutocompleteFetch',
   component: BaseAutocompleteFetch,
-  argTypes: {},
   args: {
     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: { BaseAutocompleteFetch },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-    <BaseAutocompleteFetch
-      v-model="value"
-      v-bind="args"
-    ></BaseAutocompleteFetch>
-    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
-  `,
-  };
-};
+const Template = (args) => ({
+  components: { BaseAutocompleteFetch, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+      <BaseAutocompleteFetch v-model="value" v-bind="args"></BaseAutocompleteFetch>
+      <ShowValue :value="value" />
+    `,
+});
 
 export const Demo = Template.bind({});
 Demo.args = {};
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  modelValue: { label: 'Dark Maul', value: '1' },
   labelKey: 'label',
   valueKey: 'value',
+  modelValue: options[0],
   disabled: true,
 };
 
@@ -49,28 +45,26 @@ export const SlotOption = (args) => {
       return { args, value };
     },
     template: `
-  <div class="mb-20">
-    <BaseAutocompleteFetch
-      v-model="value"
-      v-bind="args"
-    >
-      <template #option="{ option, active, selected }">
-        <div
-          class="rounded px-2 py-1"
-          :class="{
-            'hover:bg-slate-100': !active && !selected,
-            'bg-slate-200 hover:bg-slate-300': active && !selected,
-            'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-            'bg-blue-600 text-white hover:bg-blue-700': active && selected,
-          }"
-        >
-          <p class="text-sm font-medium">{{ option.title }}</p>
-          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
-        </div>
-      </template>
-    </BaseAutocompleteFetch>
-  </div>
-  `,
+      <BaseAutocompleteFetch
+        v-model="value"
+        v-bind="args"
+      >
+        <template #option="{ option, active, selected }">
+          <div
+            class="rounded px-2 py-1"
+            :class="{
+              'hover:bg-slate-100': !active && !selected,
+              'bg-slate-200 hover:bg-slate-300': active && !selected,
+              'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+              'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+            }"
+          >
+            <p class="text-sm font-medium">{{ option.title }}</p>
+            <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+          </div>
+        </template>
+      </BaseAutocompleteFetch>
+    `,
   };
 };
 
@@ -80,22 +74,24 @@ export const SlotFooter = (args) => {
     setup() {
       const value = ref(null);
       function onClick() {
-        alert(1);
+        setTimeout(() => {
+          alert(1);
+        }, 150);
       }
       return { args, value, onClick };
     },
     template: `
-    <BaseAutocompleteFetch
-      v-model="value"
-      v-bind="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>
-        </div>
-      </template>
-    </BaseAutocompleteFetch>
-  `,
+      <BaseAutocompleteFetch
+        v-model="value"
+        v-bind="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>
+          </div>
+        </template>
+      </BaseAutocompleteFetch>
+    `,
   };
 };
 
@@ -107,17 +103,23 @@ export const SlotEmpty = (args) => {
       return { args, value };
     },
     template: `
-    <BaseAutocompleteFetch
-      v-model="value"
-      v-bind="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>
-      </template>
-    </BaseAutocompleteFetch>
-  `,
+      <BaseAutocompleteFetch
+        v-model="value"
+        v-bind="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>
+        </template>
+      </BaseAutocompleteFetch>
+    `,
   };
 };
+
+export const Field = createFieldStory({
+  component: BaseAutocompleteFetch,
+  componentName: 'BaseAutocompleteFetch',
+  label: 'Article',
+});

package/src/components/BaseAutocompleteFetch.vue

@@ -4,11 +4,12 @@
     :loading="showLoading && page == 1"
     :model-value="modelValue"
     :disabled="disabled"
+    :name="name"
     :placeholder="placeholder"
     :options="options"
     :value-key="valueKey"
     :label-key="labelKey"
-    :input-class="inputClass"
+    :has-error="hasError"
     :filter="() => true"
     @clear="onClear"
     @focus="onFocus"
@@ -21,27 +22,7 @@
     </template>
 
     <template #footer="footerProps">
-      <slot name="footer" v-bind="footerProps" :keywords="keywords">
-        <div
-          v-if="createNewUrl"
-          class="p-2"
-          :class="{
-            'border-t border-slate-300': footerProps.options.length > 0,
-          }"
-        >
-          <router-link
-            :to="createNewUrl"
-            target="_blank"
-            class="btn btn-slate-200-outline flex items-center justify-center"
-          >
-            <BaseIcon
-              icon="heroicons-solid:plus"
-              class="mr-1.5 block h-5 w-5"
-            />
-            <span>{{ $t('sui.create_new') }}</span>
-          </router-link>
-        </div>
-      </slot>
+      <slot name="footer" v-bind="footerProps" :keywords="keywords" />
     </template>
 
     <template #empty="emptyProps">
@@ -58,11 +39,10 @@
 </template>
 
 <script lang="ts" setup>
-import { config } from '../';
+import { config } from '@/index';
 import { debounce } from 'lodash';
 import { PropType, Ref } from 'vue';
 import { Option } from '@/types';
-import { RouteLocationRaw } from 'vue-router';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 
 const props = defineProps({
@@ -82,7 +62,7 @@ const props = defineProps({
     required: true,
     type: String,
   },
-  inputClass: {
+  name: {
     default: undefined,
     type: String,
   },
@@ -98,14 +78,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  createNewUrl: {
-    default: '',
-    type: [String, Object] as PropType<RouteLocationRaw>,
-  },
   queryKey: {
     default: 'search',
     type: String,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits([

package/src/components/BaseBelongsTo.stories.js

@@ -1,9 +1,11 @@
 import BaseBelongsTo from './BaseBelongsTo.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { options } from '@/../.storybook/utils';
+import { createFieldStory } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseBelongsTo',
   component: BaseBelongsTo,
-  argTypes: {},
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
@@ -11,45 +13,27 @@ export default {
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 
-const Template = (args) => {
-  return {
-    components: { BaseBelongsTo },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `
-      <BaseBelongsTo
-        v-model="value"
-        v-bind="args"
-      ></BaseBelongsTo>
-      <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
-  `,
-  };
-};
+const Template = (args) => ({
+  components: { BaseBelongsTo, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+      <BaseBelongsTo v-model="value" v-bind="args"></BaseBelongsTo>
+      <ShowValue :value="value" />
+    `,
+});
 
 export const Demo = Template.bind({});
 Demo.args = {};
 
-export const CreateNew = Template.bind({});
-CreateNew.args = {
-  createNewUrl: '/users/create',
-};
-
-export const Disabled = (args) => {
-  return {
-    components: { BaseBelongsTo },
-    setup() {
-      const value = ref(null);
-      return { args, value };
-    },
-    template: `<BaseBelongsTo
-      v-bind="args"
-      v-model="value"
-      :current-model="{title: 'Dark Vader', id: 1}"
-      :disabled="true"
-    ></BaseBelongsTo>`,
-  };
+export const Disabled = Template.bind({});
+Disabled.args = {
+  currentModel: options[0],
+  primaryKey: 'value',
+  field: 'label',
+  disabled: true,
 };
 
 export const SlotOption = (args) => {
@@ -60,28 +44,26 @@ export const SlotOption = (args) => {
       return { args, value };
     },
     template: `
-  <div class="mb-20">
-    <BaseBelongsTo
-      v-model="value"
-      v-bind="args"
-    >
-      <template #option="{ option, active, selected }">
-        <div
-          class="rounded px-2 py-1"
-          :class="{
-            'hover:bg-slate-100': !active && !selected,
-            'bg-slate-200 hover:bg-slate-300': active && !selected,
-            'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-            'bg-blue-600 text-white hover:bg-blue-700': active && selected,
-          }"
-        >
-          <p class="text-sm font-medium">{{ option.title }}</p>
-          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
-        </div>
-      </template>
-    </BaseBelongsTo>
-  </div>
-  `,
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="args"
+      >
+        <template #option="{ option, active, selected }">
+          <div
+            class="rounded px-2 py-1"
+            :class="{
+              'hover:bg-slate-100': !active && !selected,
+              'bg-slate-200 hover:bg-slate-300': active && !selected,
+              'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+              'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+            }"
+          >
+            <p class="text-sm font-medium">{{ option.title }}</p>
+            <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+          </div>
+        </template>
+      </BaseBelongsTo>
+    `,
   };
 };
 
@@ -91,22 +73,24 @@ export const SlotFooter = (args) => {
     setup() {
       const value = ref(null);
       function onClick() {
-        alert(1);
+        setTimeout(() => {
+          alert(1);
+        }, 150);
       }
       return { args, value, onClick };
     },
     template: `
-    <BaseBelongsTo
-      v-model="value"
-      v-bind="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>
-        </div>
-      </template>
-    </BaseBelongsTo>
-  `,
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="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>
+          </div>
+        </template>
+      </BaseBelongsTo>
+    `,
   };
 };
 
@@ -118,17 +102,23 @@ export const SlotEmpty = (args) => {
       return { args, value };
     },
     template: `
-    <BaseBelongsTo
-      v-model="value"
-      v-bind="args"
-    >
-      <template #empty="props">
-        <div>
-          <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
-          <div v-else class="text-center px-6 py-20">Start your search... 🔎</div>
-        </div>
-      </template>
-    </BaseBelongsTo>
-  `,
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="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>
+        </template>
+      </BaseBelongsTo>
+    `,
   };
 };
+
+export const Field = createFieldStory({
+  component: BaseBelongsTo,
+  componentName: 'BaseBelongsTo',
+  label: 'Article',
+});

package/src/components/BaseBelongsTo.vue

@@ -3,12 +3,12 @@
     :model-value="model"
     :url="url"
     :disabled="disabled"
+    :name="name"
     :placeholder="placeholder"
     :required="required"
-    :value-key="foreignKey"
+    :value-key="primaryKey"
     :label-key="field"
-    :create-new-url="createNewUrl"
-    :input-class="inputClass"
+    :has-error="hasError"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -25,7 +25,6 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { RouteLocationRaw } from 'vue-router';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
@@ -46,7 +45,7 @@ const props = defineProps({
     default: undefined,
     type: Function as PropType<((id: string | number) => string) | undefined>,
   },
-  foreignKey: {
+  primaryKey: {
     default: 'id',
     type: String,
   },
@@ -62,11 +61,11 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  placeholder: {
+  name: {
     default: undefined,
     type: String,
   },
-  inputClass: {
+  placeholder: {
     default: undefined,
     type: String,
   },
@@ -74,9 +73,9 @@ const props = defineProps({
     default: null,
     type: [Object, null] as PropType<Option | null>,
   },
-  createNewUrl: {
-    default: '',
-    type: [String, Object] as PropType<RouteLocationRaw>,
+  hasError: {
+    default: false,
+    type: Boolean,
   },
 });
 
@@ -126,7 +125,7 @@ function onUpdate(newModel: Option | null) {
     emit('update:modelValue', null);
   } else {
     model.value = newModel;
-    emit('update:modelValue', newModel[props.foreignKey]);
+    emit('update:modelValue', newModel[props.primaryKey]);
   }
 }
 </script>

package/src/components/BaseButtonGroup.stories.js

@@ -1,4 +1,6 @@
+import { createFieldStory, options } from '../../.storybook/utils';
 import BaseButtonGroup from './BaseButtonGroup.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
 
 export default {
   title: 'Form/BaseButtonGroup',
@@ -7,27 +9,20 @@ export default {
   args: {
     labelKey: 'label',
     valueKey: 'value',
-    options: [
-      { label: 'Dark Vader', value: 'dark_vader' },
-      { label: 'Darth Maul', value: 'darth_maul' },
-      { label: 'Dark Sidious', value: 'dark_sidious' },
-      { label: 'Obi Wan Kenobi', value: 'obiwan' },
-      { label: 'Anakin Skywalker', value: 'anakin' },
-      { label: 'Mace Windu', value: 'windu' },
-    ],
+    options: options,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 
 const Template = (args) => ({
-  components: { BaseButtonGroup },
+  components: { BaseButtonGroup, ShowValue },
   setup() {
     const value = ref(null);
     return { args, value };
   },
   template: `
     <BaseButtonGroup v-model="value" v-bind="args"></BaseButtonGroup>
-    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+    <ShowValue :value="value"></ShowValue>
   `,
 });
 
@@ -82,3 +77,9 @@ export const SlotOption = (args) => ({
   </BaseButtonGroup>
   `,
 });
+
+export const Field = createFieldStory({
+  component: BaseButtonGroup,
+  componentName: 'BaseButtonGroup',
+  label: 'Choose your Jedi ou Sith',
+});