sprintify-ui 0.0.144 → 0.0.146

package/dist/types/src/components/BaseDatePicker.vue.d.ts

@@ -45,10 +45,6 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"time" | "multiple" | "single" | "range" | undefined>;
     };
-    locale: {
-        default: string;
-        type: PropType<"en" | "fr" | undefined>;
-    };
     noCalendar: {
         default: boolean;
         type: BooleanConstructor;
@@ -102,10 +98,6 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<"time" | "multiple" | "single" | "range" | undefined>;
     };
-    locale: {
-        default: string;
-        type: PropType<"en" | "fr" | undefined>;
-    };
     noCalendar: {
         default: boolean;
         type: BooleanConstructor;
@@ -119,7 +111,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     required: boolean;
     name: string;
-    locale: "en" | "fr" | undefined;
     mode: "time" | "multiple" | "single" | "range" | undefined;
     disabled: boolean;
     modelValue: string | string[] | null | undefined;

package/dist/types/src/components/BaseNumber.vue.d.ts

@@ -0,0 +1,116 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        default: undefined;
+        type: PropType<number | null>;
+    };
+    /**
+     * The step of the input. Can be a number or null.
+     */
+    step: {
+        default: number;
+        type: NumberConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    borderless: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    rounded: {
+        default: string;
+        type: PropType<"left" | "right" | "none" | "full">;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "blur" | "focus" | "keydown")[], "update:modelValue" | "blur" | "focus" | "keydown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        default: undefined;
+        type: PropType<number | null>;
+    };
+    /**
+     * The step of the input. Can be a number or null.
+     */
+    step: {
+        default: number;
+        type: NumberConstructor;
+    };
+    name: {
+        default: undefined;
+        type: StringConstructor;
+    };
+    placeholder: {
+        default: string;
+        type: StringConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    min: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    max: {
+        default: undefined;
+        type: NumberConstructor;
+    };
+    hasError: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    borderless: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    rounded: {
+        default: string;
+        type: PropType<"left" | "right" | "none" | "full">;
+    };
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onKeydown?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    required: boolean;
+    name: string;
+    step: number;
+    disabled: boolean;
+    max: number;
+    min: number;
+    placeholder: string;
+    modelValue: number | null;
+    hasError: boolean;
+    rounded: "left" | "right" | "none" | "full";
+    borderless: boolean;
+}>;
+export default _default;

package/dist/types/src/components/index.d.ts

@@ -53,6 +53,7 @@ import BaseModalSide from './BaseModalSide.vue';
 import BaseNavbar from './BaseNavbar.vue';
 import BaseNavbarItem from './BaseNavbarItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BaseNumber from './BaseNumber.vue';
 import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
@@ -82,4 +83,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFileUploader, BaseForm, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNumber, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/index.d.ts

@@ -29,6 +29,9 @@ declare const messages: {
             file_must_be_of_type: string;
             filters: string;
             go_to_page: string;
+            invalid_value: string;
+            just_now: string;
+            maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
             next: string;
@@ -69,7 +72,6 @@ declare const messages: {
             yes_delete: string;
             you_can_upload_up_to_n_files: string;
             you_cannot_select_more_than_x_items: string;
-            just_now: string;
         };
     };
     fr: {
@@ -94,6 +96,9 @@ declare const messages: {
             file_must_be_of_type: string;
             filters: string;
             go_to_page: string;
+            invalid_value: string;
+            just_now: string;
+            maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
             next: string;
@@ -134,7 +139,6 @@ declare const messages: {
             yes_delete: string;
             you_can_upload_up_to_n_files: string;
             you_cannot_select_more_than_x_items: string;
-            just_now: string;
         };
     };
 };
@@ -172,6 +176,9 @@ declare const config: {
                 file_must_be_of_type: string;
                 filters: string;
                 go_to_page: string;
+                invalid_value: string;
+                just_now: string;
+                maximum_x_decimal_places: string;
                 min_x_characters: string;
                 month: string;
                 next: string;
@@ -212,7 +219,6 @@ declare const config: {
                 yes_delete: string;
                 you_can_upload_up_to_n_files: string;
                 you_cannot_select_more_than_x_items: string;
-                just_now: string;
             };
         };
         fr: {
@@ -237,6 +243,9 @@ declare const config: {
                 file_must_be_of_type: string;
                 filters: string;
                 go_to_page: string;
+                invalid_value: string;
+                just_now: string;
+                maximum_x_decimal_places: string;
                 min_x_characters: string;
                 month: string;
                 next: string;
@@ -277,7 +286,6 @@ declare const config: {
                 yes_delete: string;
                 you_can_upload_up_to_n_files: string;
                 you_cannot_select_more_than_x_items: string;
-                just_now: string;
             };
         };
     }, {}, {}, string, true>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.144",
+  "version": "0.0.146",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDatePicker.stories.js

@@ -21,7 +21,7 @@ export default {
 const Template = (args) => ({
   components: { BaseDatePicker, ShowValue },
   setup() {
-    const value = ref('2023-01-10T10:00:00Z');
+    const value = ref('2022-01-01');
     return { value, args };
   },
   template: `

package/src/components/BaseDatePicker.vue

@@ -94,10 +94,6 @@ const props = defineProps({
       'single' | 'multiple' | 'range' | 'time' | undefined
     >,
   },
-  locale: {
-    default: 'en',
-    type: String as PropType<'en' | 'fr' | undefined>,
-  },
   noCalendar: {
     default: false,
     type: Boolean,
@@ -110,6 +106,8 @@ const props = defineProps({
   },
 });
 
+const i18n = useI18n();
+
 const emit = defineEmits(['update:modelValue']);
 
 const { hasErrorInternal, emitUpdate } = useField({
@@ -162,7 +160,7 @@ function parseDate(date: string): string {
 }
 
 const locale = computed(() => {
-  if (props.locale === 'fr') {
+  if (i18n.locale.value == 'fr') {
     return French;
   }
 
@@ -190,15 +188,11 @@ const flatpickrConfig = computed(() => {
 });
 
 // Make sure the model value is always formatted on the parent component
-watch(
-  () => modelValueFormatted.value,
-  () => {
-    if (props.modelValue !== modelValueFormatted.value) {
-      emitUpdate(modelValueFormatted.value);
-    }
-  },
-  { immediate: true }
-);
+onMounted(() => {
+  if (props.modelValue !== modelValueFormatted.value) {
+    emitUpdate(modelValueFormatted.value);
+  }
+});
 
 /*
  | Flatpickr does not seem to observe changes in the value attribute of the input.
@@ -206,20 +200,25 @@ watch(
  | and manually react and apply the changes on the picker
 */
 watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (!picker) {
-      return;
-    }
+  () => modelValueFormatted.value,
+  () => {
+    setPickerDate();
+  },
+  { immediate: true }
+);
 
-    if (!newValue) {
-      picker.clear();
-      return;
-    }
+function setPickerDate() {
+  if (!picker) {
+    return;
+  }
 
-    picker.setDate(newValue, false);
+  if (!modelValueFormatted.value) {
+    picker.clear();
+    return;
   }
-);
+
+  picker.setDate(modelValueFormatted.value, false);
+}
 
 /*
  | If the props in flatpickrConfig are changed
@@ -283,6 +282,8 @@ function init() {
       emitUpdate(listDate[0]);
     },
   });
+
+  setPickerDate();
 }
 
 function clear() {

package/src/components/BaseInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex rounded border" :class="borderColor">
+  <div class="inline-flex rounded border" :class="[borderColor]">
     <div
       v-if="iconLeft"
       class="flex shrink-0 items-center justify-center rounded-l border-r px-3 transition-colors"
@@ -19,8 +19,40 @@
     >
       {{ prefix }}
     </div>
-    <input v-if="hasMask" ref="input" v-maska:[maskOptions] v-bind="bindings" />
-    <input v-else ref="input" v-bind="bindings" />
+    <BaseNumber
+      v-if="type == 'number'"
+      ref="input"
+      :model-value="modelValue"
+      borderless
+      :has-error="hasError"
+      :rounded="
+        emptyLeft && emptyRight
+          ? 'full'
+          : emptyLeft
+          ? 'left'
+          : emptyRight
+          ? 'right'
+          : 'none'
+      "
+      class="grow"
+      v-bind="bindings"
+      @update:model-value="emitUpdate"
+    />
+    <input
+      v-else
+      ref="input"
+      v-maska:[maskOptions]
+      v-bind="bindings"
+      :value="modelValue"
+      :type="type"
+      :autocomplete="autocomplete ? 'on' : 'off'"
+      :class="{
+        'rounded-l': emptyLeft,
+        'rounded-r': emptyRight,
+        'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300': true,
+      }"
+      @input="update"
+    />
     <div
       v-if="suffix"
       class="flex shrink-0 items-center justify-center border-l px-4 transition-colors"
@@ -49,6 +81,7 @@ import { PropType } from 'vue';
 import { BaseIcon } from '@/index';
 import { useField } from '@/composables/field';
 import { vMaska } from 'maska';
+import BaseNumber from './BaseNumber.vue';
 
 const props = defineProps({
   modelValue: {
@@ -135,14 +168,16 @@ const maskOptions = computed(() => {
   return undefined;
 });
 
-const hasMask = computed(() => {
-  return !!props.mask;
+const emptyLeft = computed(() => {
+  return !props.iconLeft && !props.prefix;
+});
+
+const emptyRight = computed(() => {
+  return !props.iconRight && !props.suffix;
 });
 
 const bindings = computed<any>(() => {
   return {
-    value: props.modelValue,
-    type: props.type,
     name: nameInternal.value,
     step: props.step,
     min: props.min,
@@ -150,19 +185,16 @@ const bindings = computed<any>(() => {
     disabled: props.disabled,
     placeholder: props.placeholder,
     required: requiredInternal.value,
-    autocomplete: props.autocomplete ? 'on' : 'off',
-    class: {
-      'rounded-l': !props.iconLeft && !props.prefix,
-      'rounded-r': !props.iconRight && !props.suffix,
-      'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300':
-        true,
-    },
+
     onKeydown: {
       enter: onEnter,
     },
-    onInput: update,
-    onFocus: (e: Event) => emit('focus', e),
-    onBlur: (e: Event) => emit('blur', e),
+    onFocus: (e: Event) => {
+      emit('focus', e);
+    },
+    onBlur: (e: Event) => {
+      emit('blur', e);
+    },
   };
 });
 

package/src/components/BaseInputPercent.stories.js

@@ -19,7 +19,7 @@ const Template = (args) => ({
     BaseInputPercent,
   },
   setup() {
-    const value = ref(null);
+    const value = ref(0.5);
     return { args, value };
   },
   template: `

package/src/components/BaseNumber.stories.js

@@ -0,0 +1,50 @@
+import BaseNumber from './BaseNumber.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+
+export default {
+  title: 'Form/BaseNumber',
+  component: BaseNumber,
+  args: {
+    placeholder: 'Enter number',
+    step: 0.1,
+    min: 0,
+    max: 100,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    ShowValue,
+    BaseNumber,
+  },
+  setup() {
+    const value = ref(12.1212);
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseNumber v-model="value" v-bind="args" class=""></BaseNumber>
+  </form>
+  <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  hasError: true,
+};
+
+export const Field = createFieldStory({
+  component: BaseNumber,
+  componentName: 'BaseNumber',
+  label: 'Rebate',
+});