sprintify-ui 0.0.41 → 0.0.42

package/src/components/BasePasswordForm.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <BaseInputLabel
+      v-if="labelValue"
+      :label="labelValue"
+      :required="required"
+    />
+
+    <BasePassword
+      ref="input"
+      :model-value="modelValue"
+      :name="name"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :required="required"
+      class="rounded"
+      :class="[
+        {
+          'border-red-600': hasError(),
+          'border-slate-300': !hasError(),
+        },
+        inputClass,
+      ]"
+      @update:model-value="onInput"
+    />
+
+    <BaseInputError v-if="hasError()" class="mt-1">
+      {{ errorMessage() }}
+    </BaseInputError>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import BaseFormField from './BaseFormField';
+import BaseInputError from './BaseInputError.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+import BasePassword from './BasePassword.vue';
+
+export default defineComponent({
+  components: { BaseInputLabel, BasePassword, BaseInputError },
+  extends: BaseFormField,
+  props: {
+    modelValue: {
+      required: true,
+      type: [String, null] as PropType<string | null>,
+    },
+    inputClass: {
+      default: undefined,
+      type: String,
+    },
+  },
+  methods: {
+    onInput(value: string | null) {
+      this.inputListener(value);
+    },
+  },
+});
+</script>

package/src/components/BaseRadioGroup.stories.js

@@ -1,4 +1,6 @@
+import { options } from '../../.storybook/utils';
 import BaseRadioGroup from './BaseRadioGroup.vue';
+import { createFieldStory } from '@/../.storybook/utils';
 
 export default {
   title: 'Form/BaseRadioGroup',
@@ -8,14 +10,7 @@ export default {
     name: 'character',
     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>' })],
 };
@@ -86,3 +81,9 @@ export const SlotOption = (args) => ({
   </BaseRadioGroup>
   `,
 });
+
+export const Field = createFieldStory({
+  component: BaseRadioGroup,
+  componentName: 'BaseRadioGroup',
+  label: 'Choose your character',
+});

package/src/components/BaseRadioGroup.vue

@@ -10,13 +10,13 @@
           <input
             :id="name + '-' + option.value"
             type="radio"
-            :name="name"
+            :name="nameInternal"
             :checked="isSelected(option)"
-            :required="required"
+            :required="requiredInternal"
             :disabled="disabled"
             :value="option.value"
             :class="inputClass"
-            @input="emit('update:modelValue', option.option)"
+            @input="emitUpdate(option.option)"
           />
 
           <slot name="option" :option="option">
@@ -32,6 +32,7 @@
 import { PropType } from 'vue';
 import { Option } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
 
 const props = defineProps({
   modelValue: {
@@ -70,10 +71,23 @@ const props = defineProps({
     default: 'mt-0.5 border-slate-300',
     type: String,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
+const { nameInternal, requiredInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+  errorType: 'alert',
+  labelClass: 'mb-3 font-medium',
+});
+
 const { normalizedOptions, isSelected } = useHasOptions(
   computed(() => props.modelValue),
   computed(() => props.options),

package/src/components/BaseSelect.stories.js

@@ -1,11 +1,12 @@
 import BaseSelect from './BaseSelect.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '../../.storybook/utils.js';
 
 export default {
   title: 'Form/BaseSelect',
   component: BaseSelect,
   args: {
-    name: 'name',
     class: 'w-full',
   },
 };
@@ -14,6 +15,7 @@ const Template = (args) => ({
   components: {
     BaseSelect,
     BaseInputLabel,
+    ShowValue,
   },
   setup() {
     function onSubmit() {
@@ -43,7 +45,7 @@ const Template = (args) => ({
     </BaseSelect>
     <button type="submit" class="btn btn-primary mt-5">Submit</button>
   </form>
-  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded text-white">{{ {value} }}</pre>
+  <ShowValue :value="value" />
   `,
 });
 
@@ -65,3 +67,14 @@ Disabled.args = {
   placeholder: 'Choose a language',
   disabled: true,
 };
+
+export const Field = createFieldStory({
+  component: BaseSelect,
+  componentName: 'BaseSelect',
+  template: `<BaseSelect v-model="value" v-bind="args" class="w-full">
+  <option value="javascript">JavaScript</option>
+  <option value="typescript">Typescript</option>
+  <option value="golang">Golang</option>
+</BaseSelect>`,
+  label: 'Choose your favorite programing language',
+});

package/src/components/BaseSelect.vue

@@ -2,14 +2,17 @@
   <select
     ref="select"
     :value="modelValueInternal"
-    :name="name"
+    :name="nameInternal"
     :disabled="disabled"
-    :required="required"
-    class="rounded border border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100"
-    :class="[!modelValue && required ? 'text-slate-400' : '']"
+    :required="requiredInternal"
+    class="rounded border disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100"
+    :class="[
+      !modelValue && requiredInternal ? 'text-slate-400' : '',
+      hasErrorInternal ? 'border-red-600' : 'border-slate-300',
+    ]"
     @change="onChange($event)"
   >
-    <template v-if="required">
+    <template v-if="requiredInternal">
       <option disabled hidden :value="EMPTY_VALUE_INTERNAL">
         {{ placeholder ? placeholder : $t('sui.select_an_option') }}
       </option>
@@ -27,6 +30,7 @@
 import { PropType, Ref } from 'vue';
 import { get, isEqual } from 'lodash';
 import { useMounted } from '@vueuse/core';
+import { useField } from '@/composables/field';
 
 type Option = string | number | null;
 
@@ -54,6 +58,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const mounted = useMounted();
@@ -61,6 +69,14 @@ const select = ref(null) as Ref<HTMLSelectElement | null>;
 
 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 isEmptyExternal(value: string | number | null | undefined) {
   if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {
     return true;
@@ -131,9 +147,9 @@ function validateAndFixModelVale() {
     return;
   }
   if (isEmptyInternal(props.modelValue)) {
-    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+    emitUpdate(EMPTY_VALUE_EXTERNAL);
   } else if (!validModelValue()) {
-    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+    emitUpdate(EMPTY_VALUE_EXTERNAL);
   }
 }
 
@@ -144,16 +160,16 @@ function validateAndFixModelVale() {
  */
 function onChange(event: Event) {
   if (event === null) {
-    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+    emitUpdate(EMPTY_VALUE_EXTERNAL);
   }
 
   const value = get(event, 'target.value', null);
 
   if (isEmptyExternal(value)) {
-    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+    emitUpdate(EMPTY_VALUE_EXTERNAL);
     return;
   }
 
-  emit('update:modelValue', value);
+  emitUpdate(value);
 }
 </script>

package/src/components/BaseSwitch.stories.js

@@ -1,5 +1,6 @@
 import BaseSwitch from './BaseSwitch.vue';
 import BaseContainer from './BaseContainer.vue';
+import { createFieldStory } from '../../.storybook/utils';
 
 export default {
   title: 'Form/BaseSwitch',
@@ -99,3 +100,9 @@ const Sizes = (args) => ({
 
 export const AllSizes = Sizes.bind({});
 AllSizes.args = {};
+
+export const Field = createFieldStory({
+  component: BaseSwitch,
+  componentName: 'BaseSwitch',
+  label: 'Activate',
+});

package/src/components/BaseSwitch.vue

@@ -31,135 +31,145 @@
   </SwitchGroup>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { useField } from '@/composables/field';
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
-import { defineComponent, PropType } from 'vue';
+import { PropType } from 'vue';
 
-export default defineComponent({
-  components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Switch,
-    SwitchGroup,
-    SwitchLabel,
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
   },
-  props: {
-    modelValue: {
-      default: false,
-      type: Boolean,
-    },
-    color: {
-      default: 'primary',
-      type: String as PropType<
-        'primary' | 'info' | 'danger' | 'warning' | 'success' | 'dark' | 'light'
-      >,
-    },
-    size: {
-      default: 'base',
-      type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl'>,
-    },
+  name: {
+    default: undefined,
+    type: String,
   },
-  emits: ['update:modelValue'],
-  computed: {
-    bg() {
-      if (this.color == 'primary') {
-        return 'bg-primary-500';
-      }
-      if (this.color == 'info') {
-        return 'bg-blue-500';
-      }
-      if (this.color == 'danger') {
-        return 'bg-red-500';
-      }
-      if (this.color == 'warning') {
-        return 'bg-yellow-500';
-      }
-      if (this.color == 'success') {
-        return 'bg-green-500';
-      }
-      if (this.color == 'light') {
-        return 'bg-slate-500';
-      }
-      return 'bg-slate-900';
-    },
-    focus() {
-      if (this.color == 'primary') {
-        return 'focus:ring-primary-500';
-      }
-      if (this.color == 'info') {
-        return 'focus:ring-blue-500';
-      }
-      if (this.color == 'danger') {
-        return 'focus:ring-red-500';
-      }
-      if (this.color == 'warning') {
-        return 'focus:ring-yellow-500';
-      }
-      if (this.color == 'success') {
-        return 'focus:ring-green-500';
-      }
-      if (this.color == 'light') {
-        return 'focus:ring-slate-500';
-      }
-      return 'focus:ring-slate-900';
-    },
-    sizePx() {
-      if (this.size == 'xs') {
-        return 12;
-      }
-      if (this.size == 'sm') {
-        return 16;
-      }
-      if (this.size == 'base') {
-        return 20;
-      }
-      if (this.size == 'lg') {
-        return 24;
-      }
-      if (this.size == 'xl') {
-        return 32;
-      }
-      return 16;
-    },
-    padding() {
-      if (this.size == 'xs') {
-        return 2;
-      }
-      if (this.size == 'sm') {
-        return 2.5;
-      }
-      if (this.size == 'base') {
-        return 3;
-      }
-      if (this.size == 'lg') {
-        return 3;
-      }
-      if (this.size == 'xl') {
-        return 4;
-      }
-      return 2;
-    },
-    height() {
-      return this.sizePx + 2 * this.padding;
-    },
-    distance() {
-      return 2 * this.sizePx;
-    },
-    width() {
-      return this.distance + 2 * this.padding;
-    },
-    translateX() {
-      if (this.modelValue) {
-        return this.padding + this.distance - this.sizePx;
-      }
-
-      return this.padding;
-    },
+  color: {
+    default: 'primary',
+    type: String as PropType<
+      'primary' | 'info' | 'danger' | 'warning' | 'success' | 'dark' | 'light'
+    >,
+  },
+  size: {
+    default: 'base',
+    type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl'>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
   },
-  methods: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    update(payload: any) {
-      this.$emit('update:modelValue', payload);
-    },
+  required: {
+    default: false,
+    type: Boolean,
   },
 });
+
+const emit = defineEmits(['update:modelValue']);
+
+const { emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const bg = computed(() => {
+  if (props.color == 'primary') {
+    return 'bg-primary-500';
+  }
+  if (props.color == 'info') {
+    return 'bg-blue-500';
+  }
+  if (props.color == 'danger') {
+    return 'bg-red-500';
+  }
+  if (props.color == 'warning') {
+    return 'bg-yellow-500';
+  }
+  if (props.color == 'success') {
+    return 'bg-green-500';
+  }
+  if (props.color == 'light') {
+    return 'bg-slate-500';
+  }
+  return 'bg-slate-900';
+});
+const focus = computed(() => {
+  if (props.color == 'primary') {
+    return 'focus:ring-primary-500';
+  }
+  if (props.color == 'info') {
+    return 'focus:ring-blue-500';
+  }
+  if (props.color == 'danger') {
+    return 'focus:ring-red-500';
+  }
+  if (props.color == 'warning') {
+    return 'focus:ring-yellow-500';
+  }
+  if (props.color == 'success') {
+    return 'focus:ring-green-500';
+  }
+  if (props.color == 'light') {
+    return 'focus:ring-slate-500';
+  }
+  return 'focus:ring-slate-900';
+});
+const sizePx = computed(() => {
+  if (props.size == 'xs') {
+    return 12;
+  }
+  if (props.size == 'sm') {
+    return 16;
+  }
+  if (props.size == 'base') {
+    return 20;
+  }
+  if (props.size == 'lg') {
+    return 24;
+  }
+  if (props.size == 'xl') {
+    return 32;
+  }
+  return 16;
+});
+const padding = computed(() => {
+  if (props.size == 'xs') {
+    return 2;
+  }
+  if (props.size == 'sm') {
+    return 2.5;
+  }
+  if (props.size == 'base') {
+    return 3;
+  }
+  if (props.size == 'lg') {
+    return 3;
+  }
+  if (props.size == 'xl') {
+    return 4;
+  }
+  return 2;
+});
+const height = computed(() => {
+  return sizePx.value + 2 * padding.value;
+});
+const distance = computed(() => {
+  return 2 * sizePx.value;
+});
+const width = computed(() => {
+  return distance.value + 2 * padding.value;
+});
+const translateX = computed(() => {
+  if (props.modelValue) {
+    return padding.value + distance.value - sizePx.value;
+  }
+
+  return padding.value;
+});
+
+function update(payload: any) {
+  emitUpdate(payload);
+}
 </script>

package/src/components/BaseTagAutocomplete.stories.js

@@ -1,4 +1,7 @@
+import { createFieldStory, options } from '../../.storybook/utils';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
 
 export default {
   title: 'Form/BaseTagAutocomplete',
@@ -7,24 +10,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' },
-    ],
+    options: options,
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
 
 const Template = (args) => ({
-  components: { BaseTagAutocomplete },
+  components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
   setup() {
     const value = ref(null);
     return { args, value };
   },
   template: `
     <BaseTagAutocomplete v-model="value" v-bind="args"></BaseTagAutocomplete>
-    <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" />
   `,
 });
 
@@ -33,9 +32,9 @@ Demo.args = {};
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  options: [],
+  options: options,
   disabled: true,
-  modelValue: [{ label: 'Dark Maul', value: '1' }],
+  modelValue: [options[0]],
 };
 
 export const Loading = Template.bind({});
@@ -44,7 +43,7 @@ Loading.args = {
 };
 
 export const SlotOption = (args) => ({
-  components: { BaseTagAutocomplete },
+  components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
   setup() {
     const value = ref(null);
 
@@ -82,11 +81,13 @@ export const SlotOption = (args) => ({
 
 export const SlotFooter = (args) => {
   return {
-    components: { BaseTagAutocomplete },
+    components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
     setup() {
       const value = ref(null);
       function onClick() {
-        alert(1);
+        setTimeout(() => {
+          alert(1);
+        }, 300);
       }
       return { args, value, onClick };
     },
@@ -97,7 +98,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>
     </BaseTagAutocomplete>
@@ -107,7 +108,7 @@ export const SlotFooter = (args) => {
 
 export const SlotEmpty = (args) => {
   return {
-    components: { BaseTagAutocomplete },
+    components: { BaseTagAutocomplete, ShowValue, BaseAppNotifications },
     setup() {
       const value = ref(null);
       return { args, value };
@@ -125,3 +126,9 @@ export const SlotEmpty = (args) => {
   `,
   };
 };
+
+export const Field = createFieldStory({
+  component: BaseTagAutocomplete,
+  componentName: 'BaseTagAutocomplete',
+  label: 'Name',
+});