sprintify-ui 0.0.145 → 0.0.147

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/BaseIconPicker.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | null | undefined;
+    collection?: string | undefined;
+}>, {
+    modelValue: null;
+    collection: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    modelValue?: string | null | undefined;
+    collection?: string | undefined;
+}>, {
+    modelValue: null;
+    collection: string;
+}>>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: string | null;
+    collection: string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
+        default: D[K];
+    } : P[K];
+};

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

@@ -39,6 +39,7 @@ import BaseFileUploader from './BaseFileUploader.vue';
 import BaseForm from './BaseForm.vue';
 import BaseHasMany from './BaseHasMany.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseIconPicker from './BaseIconPicker.vue';
 import BaseInput from './BaseInput.vue';
 import BaseInputLabel from './BaseInputLabel.vue';
 import BaseInputPercent from './BaseInputPercent.vue';
@@ -53,6 +54,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 +84,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, BaseIconPicker, 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.145",
+  "version": "0.0.147",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

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;
   }
 

package/src/components/BaseIconPicker.stories.js

@@ -0,0 +1,22 @@
+import BaseIconPicker from './BaseIconPicker.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Components/BaseIconPicker',
+  component: BaseIconPicker,
+};
+
+const Template = (args) => ({
+  components: { BaseIconPicker, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseIconPicker v-bind="args" v-model="value"></BaseIconPicker>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseIconPicker.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="w-full max-w-[268px] overflow-hidden rounded border bg-white">
+    <div class="flex w-full min-w-0 overflow-hidden px-3 pt-3">
+      <select
+        v-model="suffix"
+        class="max-w-[80px] shrink-0 rounded-l border-r-0 border-slate-300 text-xs focus:border-slate-300 focus:outline-none focus:ring-0"
+        @change="scrollTop"
+      >
+        <option v-for="(label, key) in suffixes" :key="key" :value="key">
+          {{ label }}
+        </option>
+      </select>
+
+      <input
+        v-model="keywords"
+        type="text"
+        :placeholder="$t('sui.autocomplete_placeholder')"
+        class="grow rounded-r border-slate-300 text-xs"
+      />
+    </div>
+
+    <div ref="drawer" class="h-44 overflow-y-auto py-2 px-3">
+      <ul class="flex flex-wrap">
+        <li v-for="icon in filteredIcons" :key="icon">
+          <button
+            type="button"
+            :class="[
+              modelValue == icon
+                ? 'bg-primary-600 text-white'
+                : 'bg-white text-slate-900 hover:bg-slate-200',
+            ]"
+            class="flex items-center justify-center rounded p-1"
+            @click="onClick(icon)"
+          >
+            <BaseIcon :icon="icon" />
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { BaseIcon, config } from '..';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null;
+    collection?: string;
+  }>(),
+  {
+    modelValue: null,
+    collection: 'heroicons',
+  }
+);
+
+const emit = defineEmits(['update:modelValue']);
+
+function onClick(icon: string) {
+  emit('update:modelValue', icon);
+}
+
+const icons = ref<string[]>([]);
+const suffixes = ref<Record<string, string>>({});
+const suffix = ref<string | null>(null);
+const otherSuffixValue = computed(() => {
+  return Object.keys(suffixes.value).filter((s) => {
+    return s !== suffix.value;
+  });
+});
+
+const drawer = ref<HTMLElement | null>(null);
+
+const fullIcons = computed(() => {
+  return icons.value.map((icon) => {
+    return props.collection + ':' + icon;
+  });
+});
+
+const visibleIcons = computed(() => {
+  return fullIcons.value.filter((i) => {
+    const matchCurrent = i.endsWith(suffix.value ?? '');
+
+    if (!matchCurrent) {
+      return false;
+    }
+
+    const matches = otherSuffixValue.value.filter((s) => {
+      return i.endsWith(s);
+    });
+
+    const anotherMatchHasBiggerWeight = matches.some((m) => {
+      return m.length > (suffix.value ?? '').length;
+    });
+
+    if (anotherMatchHasBiggerWeight) {
+      return false;
+    }
+
+    return true;
+  });
+});
+
+const keywords = ref('');
+
+const filteredIcons = computed(() => {
+  if (!keywords.value) {
+    return visibleIcons.value;
+  }
+
+  return visibleIcons.value.filter((i) => {
+    return i.toLocaleLowerCase().includes(keywords.value.toLowerCase());
+  });
+});
+
+function fetchIcons() {
+  config.http
+    .get('https://api.iconify.design/collection?prefix=' + props.collection)
+    .then((response) => {
+      icons.value = response.data.uncategorized;
+      suffixes.value = response.data.suffixes;
+      suffix.value = Object.keys(suffixes.value)[0] as string;
+    });
+}
+
+fetchIcons();
+
+function scrollTop() {
+  if (drawer.value) {
+    drawer.value.scrollTop = 0;
+  }
+}
+</script>

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',
+});