sprintify-ui 0.0.41 → 0.0.42

package/src/components/BaseInput.vue

@@ -23,13 +23,13 @@
       ref="input"
       :value="modelValue"
       :type="type"
-      :name="name"
+      :name="nameInternal"
       :step="step"
       :min="min"
       :max="max"
       :disabled="disabled"
       :placeholder="placeholder"
-      :required="required"
+      :required="requiredInternal"
       class="w-full border-none bg-transparent outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
       :class="{
         'rounded-l': !iconLeft && !prefix,
@@ -37,7 +37,7 @@
       }"
       :autocomplete="autocomplete ? 'on' : 'off'"
       @keydown.enter="onEnter"
-      @input="$emit('update:modelValue', transformInputValue($event))"
+      @input="emitUpdate(transformInputValue($event))"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
     />
@@ -66,7 +66,8 @@
 <script lang="ts" setup>
 import { get, isNumber, isString, trim } from 'lodash';
 import { PropType } from 'vue';
-import { BaseIcon } from './index';
+import { BaseIcon } from '@/index';
+import { useField } from '@/composables/field';
 
 const props = defineProps({
   modelValue: {
@@ -138,7 +139,15 @@ const props = defineProps({
   },
 });
 
-defineEmits(['update:modelValue', 'focus', 'blur']);
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+
+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) {
@@ -166,14 +175,14 @@ function onEnter(e: Event) {
 }
 
 const borderColor = computed(() => {
-  return props.hasError ? 'border-red-500' : 'border-slate-300';
+  return hasErrorInternal.value ? 'border-red-500' : 'border-slate-300';
 });
 
 const backgroundColor = computed(() => {
-  return props.hasError ? 'bg-red-100' : 'bg-slate-100';
+  return hasErrorInternal.value ? 'bg-red-100' : 'bg-slate-100';
 });
 
 const textColor = computed(() => {
-  return props.hasError ? 'text-red-800' : 'text-slate-600';
+  return hasErrorInternal.value ? 'text-red-800' : 'text-slate-600';
 });
 </script>

package/src/components/BaseInputError.vue

@@ -0,0 +1,7 @@
+<template>
+  <p class="block text-sm font-medium leading-tight text-red-600">
+    <slot></slot>
+  </p>
+</template>
+
+<script lang="ts" setup></script>

package/src/components/BaseInputPercent.stories.js

@@ -1,11 +1,11 @@
 import BaseInputPercent from './BaseInputPercent.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
 
 export default {
   title: 'Form/BaseInputPercent',
   component: BaseInputPercent,
   args: {
-    required: true,
-    name: 'rebate',
     placeholder: 'Enter rebate, eg: 50%',
     step: 0.1,
     min: 0,
@@ -15,6 +15,7 @@ export default {
 
 const Template = (args) => ({
   components: {
+    ShowValue,
     BaseInputPercent,
   },
   setup() {
@@ -25,7 +26,7 @@ const Template = (args) => ({
   <form @submit.prevent="" class="border-none">
     <BaseInputPercent v-model="value" v-bind="args" class="w-full"></BaseInputPercent>
   </form>
-  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded text-white">{{ value }}</pre>
+  <ShowValue :value="value" />
   `,
 });
 
@@ -41,3 +42,9 @@ export const Error = Template.bind({});
 Error.args = {
   hasError: true,
 };
+
+export const Field = createFieldStory({
+  component: BaseInputPercent,
+  componentName: 'BaseInputPercent',
+  label: 'Rebate',
+});

package/src/components/BaseInputPercent.vue

@@ -3,6 +3,7 @@
     :model-value="value"
     suffix="%"
     type="number"
+    :required="required"
     :prevent-submit="preventSubmit"
     :name="name"
     :step="step"
@@ -19,7 +20,7 @@
 <script lang="ts" setup>
 import { round } from 'lodash';
 import { PropType } from 'vue';
-import { BaseInput } from '.';
+import BaseInput from './BaseInput.vue';
 
 const props = defineProps({
   /**

package/src/components/BaseLocaleForm.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="">
+    <BaseInputLabel
+      v-if="label"
+      :label="label"
+      classes="form-input-label mb-2"
+      :required="required"
+    />
+    <div class="space-y-1">
+      <div v-for="(locale, key, index) in localesInternal" :key="key">
+        <label
+          :for="name"
+          :class="[
+            layout == 'header'
+              ? 'border-b-none flex items-center rounded-t border border-slate-300 bg-slate-50 py-1.5 px-2  text-sm text-slate-700'
+              : 'mb-1.5 flex items-center text-sm text-slate-700',
+          ]"
+        >
+          <div
+            v-if="layout == 'header'"
+            class="mr-2 h-2.5 w-2.5 rounded-full"
+            :style="{ backgroundColor: colors[index] }"
+          />
+          <Icon
+            v-if="layout == 'header'"
+            icon="heroicons:language-solid"
+            class="mr-1"
+          />
+          <span>{{ locale }}</span>
+        </label>
+        <component
+          :is="component"
+          :model-value="formattedValue[key]"
+          :name="`${name}.${key}`"
+          :required="required"
+          v-bind="props"
+          :placeholder="placeholder"
+          :input-class="inputClass + ' border-t-0 rounded-t-none w-full'"
+          @update:model-value="onInput($event, key + '')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { get, isPlainObject } from 'lodash';
+import objectHash from 'object-hash';
+import { Locales } from '@/types';
+import { config } from '@/index';
+import BaseFormField from './BaseFormField';
+import BaseInputLabel from './BaseInputLabel.vue';
+
+type Value = { [locale: string]: string | number | boolean };
+
+export default defineComponent({
+  components: { BaseInputLabel },
+  extends: BaseFormField,
+  props: {
+    modelValue: {
+      required: true,
+      type: [Object, null, undefined] as PropType<Value | null | undefined>,
+    },
+    locales: {
+      default: undefined,
+      type: Object as PropType<Locales>,
+    },
+    component: {
+      default: 'VInput',
+      type: String,
+    },
+    props: {
+      default: undefined,
+      type: Object,
+    },
+    defaultValue: {
+      default: '',
+      type: [String, Boolean, Number] as PropType<string | boolean | number>,
+    },
+    layout: {
+      default: 'header',
+      type: String,
+    },
+    inputClass: {
+      default: undefined,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      colors: ['#10b981', '#06b6d4', '#a855f7'],
+    };
+  },
+  computed: {
+    localesInternal(): Locales {
+      if (this.locales) {
+        return this.locales;
+      }
+      return config.locales;
+    },
+    formattedValue(): Value {
+      // Get current value
+      let value = {} as Value;
+      if (this.modelValue && isPlainObject(this.modelValue)) {
+        value = this.modelValue as Value;
+      }
+      // Fill missing locales
+      Object.keys(this.localesInternal).forEach((locale) => {
+        const currentValue = get(this.modelValue, locale);
+        if (!currentValue) {
+          value[locale] = this.defaultValue;
+        }
+      });
+      return value;
+    },
+  },
+  created() {
+    // If formatted value is different, send event to parent
+    if (
+      !this.modelValue ||
+      objectHash(this.formattedValue) !== objectHash(this.modelValue)
+    ) {
+      const formattedValue = this.formattedValue;
+      this.inputListener(formattedValue);
+    }
+  },
+  methods: {
+    getLabel(locale: string): string {
+      if (Object.keys(this.localesInternal).length > 1) {
+        return `${this.label} (${locale})`;
+      }
+      return this.label;
+    },
+    onInput(value: string, locale: string) {
+      const formattedValue = this.formattedValue;
+      formattedValue[locale] = value;
+      this.inputListener(formattedValue);
+    },
+  },
+});
+</script>

package/src/components/BaseMediaLibrary.stories.js

@@ -1,5 +1,6 @@
 import BaseApp from './BaseApp.vue';
 import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import { createFieldStory } from '@/../.storybook/utils';
 
 const mediaModel = {
   id: 'xxxxx',
@@ -13,10 +14,10 @@ export default {
   title: 'Form/BaseMediaLibrary',
   component: BaseMediaLibrary,
   args: {
-    name: 'media',
-    max: 2,
+    max: 6,
     min: 2,
     acceptedExtensions: ['jpg', 'png'],
+    uploadUrl: 'https://api.com/upload',
     maxSize: 500 * 1024,
     currentMedia: [
       mediaModel,
@@ -74,7 +75,7 @@ Disabled.args = {
   disabled: true,
 };
 
-export const Errors = Template.bind({});
-Errors.args = {
-  errors: ['Whoops, you forgot the name of your mother!'],
-};
+export const Field = createFieldStory({
+  component: BaseMediaLibrary,
+  componentName: 'BaseMediaLibrary',
+});

package/src/components/BaseMediaLibrary.vue

@@ -7,6 +7,7 @@
       button-class="w-full"
       :accept="accept"
       :accepted-extensions="acceptedExtensions"
+      :url="uploadUrl"
       @upload:start="$emit('upload:start', $event)"
       @upload:end="$emit('upload:end', $event)"
       @upload:fail="$emit('upload:fail', $event)"
@@ -49,10 +50,6 @@
       </template>
     </BaseFileUploader>
 
-    <BaseAlert v-if="globalErrorMessage" class="mt-5" color="danger" bordered>
-      {{ globalErrorMessage }}
-    </BaseAlert>
-
     <div
       v-if="currentMediaInternal.length + normalizedModelValue.to_add.length"
       class="mt-5"
@@ -91,39 +88,30 @@
 </template>
 
 <script lang="ts" setup>
+import { PropType } from 'vue';
+import { cloneDeep, isArray, isObject, capitalize } from 'lodash';
 import { UploadedFile } from '@/types/UploadedFile';
 import { Media } from '@/types/Media';
-import { cloneDeep, isArray, isObject } from 'lodash';
-import { PropType } from 'vue';
 import { MediaLibraryPayload } from '@/types';
-import { useDialogsStore } from '../stores/dialogs';
-import { useNotificationsStore } from '../stores/notifications';
-import { capitalize } from 'lodash';
-import BaseFileUploader from './BaseFileUploader.vue';
-import BaseMediaItem from './BaseMediaItem.vue';
 import { fileSizeFormat } from '@/utils';
-import BaseAlert from './BaseAlert.vue';
+import { useDialogsStore } from '@/stores/dialogs';
+import { useNotificationsStore } from '@/stores/notifications';
+import BaseMediaItem from '@/components/BaseMediaItem.vue';
+import BaseFileUploader from './BaseFileUploader.vue';
+import { useField } from '@/composables/field';
 
 const i18n = useI18n();
 
 const dialogs = useDialogsStore();
 const notifications = useNotificationsStore();
 
-const emit = defineEmits([
-  'update',
-  'upload:start',
-  'upload:success',
-  'upload:fail',
-  'upload:end',
-]);
-
 const props = defineProps({
   modelValue: {
     default: undefined,
     type: Object as PropType<MediaLibraryPayload | null | undefined>,
   },
   name: {
-    required: true,
+    default: undefined,
     type: String,
   },
   min: {
@@ -152,9 +140,13 @@ const props = defineProps({
     },
     type: Array as PropType<Media[]>,
   },
-  errors: {
+  uploadUrl: {
     default: undefined,
-    type: [Array] as PropType<string[]>,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
   },
   disabled: {
     default: false,
@@ -162,6 +154,22 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits([
+  'update:modelValue',
+  'upload:start',
+  'upload:success',
+  'upload:fail',
+  'upload:end',
+]);
+
+const { emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => false),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+  errorType: 'alert',
+});
+
 const currentMediaInternal = ref(cloneDeep(props.currentMedia));
 
 const normalizedModelValue = computed(() => {
@@ -265,16 +273,9 @@ function removeMedia(index: number) {
 }
 
 function sync(modelValue: MediaLibraryPayload) {
-  emit('update', modelValue);
+  emitUpdate(modelValue);
 }
 
-const globalErrorMessage = computed(() => {
-  if (props.errors && props.errors.length) {
-    return props.errors[0];
-  }
-  return '';
-});
-
 const maxFileText = computed(() => {
   return i18n.t('sui.you_can_upload_up_to_n_files', { count: props.max });
 });

package/src/components/BaseMenu.vue

@@ -25,7 +25,7 @@
       >
         <slot name="items" :items="items">
           <template v-for="item in items" :key="item.label + 'link'">
-            <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-gray-200" />
+            <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-slate-200" />
 
             <router-link
               v-else-if="item.to"

package/src/components/BaseNumberForm.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <BaseInputLabel
+      v-if="labelValue"
+      :label="labelValue"
+      :required="required"
+    />
+    <input
+      :value="modelValue"
+      type="number"
+      :name="name"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disabled="disabled"
+      @input="inputListener(transformInputValue($event))"
+    />
+    <BaseInputError v-if="hasError()" class="mt-1">
+      {{ errorMessage() }}
+    </BaseInputError>
+  </div>
+</template>
+
+<script lang="ts">
+import { get, isNumber } from 'lodash';
+import { defineComponent } from 'vue';
+import BaseFormField from './BaseFormField';
+import BaseInputError from './BaseInputError.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+
+export default defineComponent({
+  components: { BaseInputLabel, BaseInputError },
+  extends: BaseFormField,
+  props: {
+    modelValue: {
+      required: true,
+      validator: (value) => {
+        return isNumber(value) || value === null;
+      },
+    },
+    step: {
+      default: 1,
+      type: Number,
+    },
+    min: {
+      type: Number,
+      default: undefined,
+    },
+    max: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  methods: {
+    transformInputValue(event: Event | null): number | null {
+      if (event === null) {
+        return null;
+      }
+      const value = get(event, 'target.value', null);
+      if (!isNumber(value)) {
+        return null;
+      }
+      return value as number;
+    },
+  },
+});
+</script>

package/src/components/BasePassword.stories.js

@@ -1,12 +1,10 @@
 import BasePassword from './BasePassword.vue';
+import { createFieldStory } from '@/../.storybook/utils';
 
 export default {
   title: 'Form/BasePassword',
   component: BasePassword,
-  args: {
-    required: true,
-    name: 'password',
-  },
+  args: {},
 };
 
 const Template = (args) => ({
@@ -26,6 +24,7 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
+  required: true,
   placeholder: 'Enter your password',
 };
 
@@ -34,3 +33,9 @@ Disabled.args = {
   disabled: true,
   placeholder: 'Enter your password',
 };
+
+export const Field = createFieldStory({
+  component: BasePassword,
+  componentName: 'BasePassword',
+  label: 'Password',
+});

package/src/components/BasePassword.vue

@@ -1,18 +1,20 @@
 <template>
   <div
-    class="flex rounded border border-slate-300 bg-white"
-    :class="[disabled ? 'cursor-not-allowed text-slate-300' : '']"
+    class="flex rounded border bg-white"
+    :class="[
+      disabled ? 'cursor-not-allowed text-slate-300' : '',
+      hasErrorInternal ? 'border-red-500' : 'border-slate-300',
+    ]"
   >
     <input
       ref="input"
       :value="modelValue"
       :type="showPassword ? 'text' : 'password'"
-      :name="name"
+      :name="nameInternal"
       :disabled="disabled"
       :placeholder="placeholder"
-      :required="required"
+      :required="requiredInternal"
       class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
-      :class="inputClass"
       @input="onInput"
     />
     <div class="flex shrink-0 pl-3">
@@ -34,50 +36,53 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { trim } from 'lodash';
-import { defineComponent, PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import { PropType } from 'vue';
+import { useField } from '@/composables/field';
 
-export default defineComponent({
-  components: { BaseIcon },
-  props: {
-    modelValue: {
-      default: '',
-      type: [String, null] as PropType<string | null>,
-    },
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
-    name: {
-      default: undefined,
-      type: String,
-    },
-    placeholder: {
-      default: undefined,
-      type: String,
-    },
-    required: {
-      default: undefined,
-      type: Boolean,
-    },
-    inputClass: {
-      default: '',
-      type: String,
-    },
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: [String, null] as PropType<string | null>,
   },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      showPassword: false,
-    };
+  disabled: {
+    default: false,
+    type: Boolean,
   },
-  methods: {
-    onInput(event: any) {
-      const value = event.target.value + '';
-      this.$emit('update:modelValue', trim(value));
-    },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
   },
 });
+
+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,
+  });
+
+const showPassword = ref(false);
+
+function onInput(event: any) {
+  const value = event.target.value + '';
+  emitUpdate(trim(value));
+}
 </script>