sprintify-ui 0.6.34 → 0.6.35

package/src/components/BaseDataIterator.vue

@@ -14,101 +14,55 @@
         <div
           class="flex space-x-2 empty:mb-0"
           :class="{
-            'mb-2.5': size == 'sm',
-            'mb-4': size == 'md',
+            'mb-2.5': sizeInternal.size.value == 'sm',
+            'mb-4': sizeInternal.size.value == 'md',
           }"
         >
           <!-- Search bar -->
           <div
             v-if="searchable"
-            class="grow"
+            class="grow min-w-0"
           >
-            <div
-              class="relative"
-              :class="{
-                'h-9': size == 'sm',
-                'h-11': size == 'md',
-              }"
-            >
-              <div
-                class="pointer-events-none absolute left-0 top-0 flex h-full items-center justify-center pl-2.5"
-              >
-                <BaseIcon
-                  class="text-slate-400"
-                  :class="{
-                    'h-5 w-5': size == 'sm',
-                    'h-6 w-6': size == 'md',
-                  }"
-                  icon="heroicons:magnifying-glass"
-                />
-              </div>
-              <input
-                ref="searchInput"
-                v-model="searchQuery"
-                type="text"
-                class="w-full h-full py-0 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm placeholder:font-light placeholder:text-sm focus:ring-blue-300 focus:ring-4"
-                :class="{
-                  'pl-9 pr-8': size == 'sm',
-                  'pl-10 pr-9': size == 'md',
-                }"
-                :placeholder="t('sui.autocomplete_placeholder')"
-                @input="onSearch"
-              >
-              <div
-                v-if="searchQuery"
-                class="absolute right-0 top-0 flex h-full items-center justify-center p-1"
-              >
-                <button
-                  type="button"
-                  class="flex appearance-none items-center rounded p-1 hover:bg-slate-100"
-                  @click="searchQuery = ''; onSearch('');"
-                >
-                  <BaseIcon
-                    class="text-slate-500"
-                    :class="{
-                      'h-5 w-5': size == 'sm',
-                      'h-6 w-6': size == 'md',
-                    }"
-                    icon="heroicons:x-mark"
-                  />
-                </button>
-              </div>
-            </div>
+            <BaseInput
+              v-model="searchQuery"
+              :placeholder="t('sui.autocomplete_placeholder')"
+              :size="sizeInternal.size.value"
+              class="w-full"
+              icon-left="heroicons:magnifying-glass"
+              :icon-right="searchQuery ? 'heroicons:x-mark' : undefined"
+              @icon-right-click="searchQuery = ''; onSearch('');"
+              @update:model-value="onSearch"
+              @focus="searchInputFocus = true"
+              @blur="searchInputFocus = false"
+            />
           </div>
 
           <template v-if="compactLayout">
-            <template
+            <BaseDataIteratorSectionButton
               v-for="(section, i) in sectionsInternal"
               :key="section.name"
-            >
-              <BaseDataIteratorSectionButton
-                :section="section"
-                :size="size"
-                @open="openSection(i)"
-              />
-            </template>
+              :section="section"
+              :size="sizeInternal.size.value"
+              @open="openSection(i)"
+            />
           </template>
 
           <!-- Menu -->
           <BaseMenu
             v-if="actions && actions.length"
             tw-menu="w-52"
-            :size="size == 'sm' ? 'xs' : 'sm'"
+            :size="sizeInternal.size.value == 'sm' ? 'xs' : 'sm'"
             :items="actions"
           >
             <template #button="{ open }">
-              <div
-                class="flex items-center justify-center rounded-md border border-slate-300 bg-white shadow-sm duration-150 hover:bg-slate-50"
+              <BaseButton
+                as="div"
+                :size="sizeInternal.size.value"
                 :class="[
-                  open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
-                  {
-                    'h-9 w-9': size == 'sm',
-                    'h-11 w-11': size == 'md',
-                  }
+                  open ? 'input-focus' : '',
                 ]"
-              >
-                <BaseIcon icon="heroicons-solid:dots-vertical" />
-              </div>
+                icon="heroicons-solid:dots-vertical"
+              />
             </template>
           </BaseMenu>
         </div>
@@ -211,6 +165,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { t } from '@/i18n';
 type Direction = 'asc' | 'desc';
+import { Size } from '@/utils/sizes';
+import BaseInput from './BaseInput.vue';
+import { useInputSize } from '@/composables/inputSize';
 
 const DEFAULT_QUERY = {
   page: 1,
@@ -234,6 +191,7 @@ import {
 import { ActionItem } from '@/types';
 
 import BaseMenu from './BaseMenu.vue';
+import BaseButton from './BaseButton.vue';
 import BasePagination from './BasePagination.vue';
 import { config } from '@/index';
 import { useMutationObserver, useResizeObserver } from '@vueuse/core';
@@ -309,7 +267,7 @@ const props = defineProps({
   */
   size: {
     default: 'md',
-    type: String as PropType<'sm' | 'md'>,
+    type: String as PropType<Size>,
   },
 
   /**
@@ -343,12 +301,14 @@ const emit = defineEmits([
 ]);
 
 const dataIteratorNode = ref<null | HTMLElement>(null);
-const searchInput = ref<null | HTMLInputElement>(null);
+const searchInputFocus = ref(false);
 
 const route = useRoute();
 const router = useRouter();
 const routeName = route.name;
 
+const sizeInternal = useInputSize(props.size);
+
 let willUnmount = false;
 
 onBeforeUnmount(() => {
@@ -595,7 +555,7 @@ function onRouteChange() {
   query.value = newQuery;
 
   // Update search input if not in focus
-  if (searchInput.value && searchInput.value !== document.activeElement) {
+  if (!searchInputFocus.value) {
     updateSearchInput();
   }
 

package/src/components/BaseDataIteratorSectionButton.vue

@@ -1,23 +1,11 @@
 <template>
-  <button
-    class="btn flex items-center justify-center text-base shadow-sm"
-    :class="[
-      width > 600 ? 'px-4' : 'px-3.5',
-      {
-        'h-9': size == 'sm',
-        'h-11': size == 'md',
-      }]"
+  <BaseButton
+    :icon="section.icon"
+    :size="size"
     type="button"
     @click="open()"
   >
-    <BaseIcon
-      class="h-5 w-5 text-slate-500"
-      :icon="section.icon"
-    />
-    <span
-      v-if="section.title && width > 600"
-      class="ml-2 whitespace-pre text-sm"
-    >
+    <span v-if="section.title && width > 600">
       {{ section.title }}
     </span>
     <BaseBadge
@@ -28,17 +16,18 @@
     >
       {{ section.count }}
     </BaseBadge>
-  </button>
+  </BaseButton>
 </template>
 
 <script lang="ts" setup>
 import { DataIteratorSection } from '@/types';
-import { BaseIcon } from '.';
+import BaseButton from './BaseButton.vue';
 import BaseBadge from './BaseBadge.vue';
+import { Size } from '@/utils/sizes';
 
 defineProps<{
   section: DataIteratorSection;
-  size: 'sm' | 'md';
+  size: Size;
 }>();
 
 const emit = defineEmits<{

package/src/components/BaseDataTable.vue

@@ -8,7 +8,7 @@
     :actions="actions"
     :history-mode="historyMode"
     :layout="layout"
-    :size="size"
+    :size="sizeInternal.size.value"
     :sections="sectionsInternal"
     :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
     @fetch="onFetch"
@@ -87,7 +87,7 @@
           :sort-direction="sortDirection"
           :max-height="maxHeight"
           :visible-columns="visibleColumns"
-          :size="size"
+          :size="sizeInternal.size.value"
           @update:checked-rows="onCheckedRowsUpdate"
           @sort="onSortChange"
           @cell-click="onCellClick"
@@ -112,27 +112,19 @@
                     <BaseDataTableRowAction
                       :row="row"
                       :row-action="rowAction"
-                      :size="size"
+                      :size="sizeInternal.size.value"
                     />
                   </template>
                   <BaseMenu
                     v-if="showRowActionMenu"
                     :items="rowActionMenuItems(row)"
-                    :size="size == 'sm' ? 'xs' : 'sm'"
-                    :tw-button="[
-                      'btn flex p-0 items-center justify-center',
-                      {
-                        'btn-xs py-1 px-2': size == 'sm',
-                        'btn-sm p-2': size == 'md'
-                      }
-                    ]"
+                    :size="menuSize"
                   >
                     <template #button>
-                      <BaseIcon
+                      <BaseButton
+                        as="div"
+                        :size="menuSize"
                         icon="heroicons-solid:dots-vertical"
-                        :class="{
-                          'h-3 w-3': size === 'sm',
-                        }"
                       />
                     </template>
                   </BaseMenu>
@@ -261,6 +253,9 @@ import { RouteLocationRaw } from 'vue-router';
 import BaseMenu from './BaseMenu.vue';
 import BaseDataTableRowAction from './BaseDataTableRowAction.vue';
 import { ActionItem } from '@/types';
+import { Size } from '@/utils/sizes';
+import { useInputSize } from '@/composables/inputSize';
+import BaseButton from './BaseButton.vue';
 
 const router = useRouter();
 
@@ -467,7 +462,7 @@ const props = defineProps({
    */
   size: {
     default: 'md',
-    type: String as PropType<'sm' | 'md'>,
+    type: String as PropType<Size>,
   },
 
   sections: {
@@ -494,6 +489,18 @@ const props = defineProps({
   },
 });
 
+const sizeInternal = useInputSize(props.size);
+
+const menuSize = computed(() => {
+  if (sizeInternal.size.value == 'md') {
+    return 'sm';
+  }
+  if (sizeInternal.size.value == 'sm') {
+    return 'xs';
+  }
+  return 'xs';
+})
+
 const emit = defineEmits([
   'cell-click',
   'delete',

package/src/components/BaseDataTableRowAction.vue

@@ -41,11 +41,12 @@
 <script lang="ts" setup>
 import { CollectionItem, RowAction } from '@/types';
 import { BaseIcon } from '.';
+import { Size } from '@/utils/sizes';
 
 withDefaults(defineProps<{
   row: CollectionItem;
   rowAction: RowAction;
-  size?: 'sm' | 'md';
+  size?: Size,
 }>(), {
   size: 'md',
 });

package/src/components/BaseDatePicker.stories.js

@@ -3,6 +3,8 @@ import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { DateTime } from 'luxon';
 import { createFieldStory } from '../../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseDatePicker',
   component: BaseDatePicker,
@@ -17,6 +19,10 @@ export default {
       control: { type: 'select' },
       options: ['single', 'multiple', 'range', 'time'],
     },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    }
   },
 };
 
@@ -119,6 +125,23 @@ DateTimeConversion.args = {
   modelValue: '2023-01-05T00:00:00Z',
 };
 
+const TemplateSizes = (args) => ({
+  components: { BaseDatePicker },
+  setup() {
+    const value = ref(null);
+    const sizes = ['xs', 'sm', 'md'];
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseDatePicker v-model="value" v-bind="args" :size="size" class="w-full"></BaseDatePicker>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 export const Field = createFieldStory({
   component: BaseDatePicker,
   componentName: 'BaseDatePicker',

package/src/components/BaseDatePicker.vue

@@ -7,10 +7,10 @@
   >
     <div
       v-if="showInput"
-      class="pointer-events-none absolute top-0 left-0 flex h-[42px] items-center justify-center pl-2.5"
+      :class="iconWrapClasses"
     >
       <BaseIcon
-        class="relative -top-px h-5 w-5 text-slate-400"
+        :class="iconClasses"
         icon="heroicons:calendar"
       />
     </div>
@@ -19,21 +19,21 @@
       type="text"
       readonly
       :disabled="disabled"
-      class="w-full rounded pl-10 pr-8 disabled:cursor-not-allowed disabled:text-slate-300"
-      :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
+      class="w-full"
+      :class="classes"
       :placeholder="t('sui.click_or_select_date')"
     >
     <div
       v-if="modelValueFormatted && !disabled && showInput"
-      class="absolute right-0 top-0 flex h-[42px] items-center justify-center p-1"
+      class="absolute top-0 right-0 h-full flex p-1"
     >
       <button
         type="button"
-        class="flex items-center rounded p-1.5 hover:bg-slate-100"
+        class="flex justify-center items-center rounded hover:bg-slate-100 aspect-1"
         @click="clear()"
       >
         <BaseIcon
-          class="h-5 w-5 text-slate-600"
+          :class="iconClasses"
           icon="heroicons:x-mark"
         />
       </button>
@@ -54,11 +54,14 @@ import { French } from 'flatpickr/dist/l10n/fr';
 import { english } from 'flatpickr/dist/l10n/default';
 import { Instance } from 'flatpickr/dist/types/instance';
 import { useI18nStore } from '@/stores/i18n';
+import { twMerge } from 'tailwind-merge';
+import { Size, sizes } from '@/utils/sizes';
 
 const props = withDefaults(
   defineProps<{
     modelValue?: string | null | string[];
     required?: boolean;
+    size?: Size;
     disabled?: boolean;
     minDate?: string | Date | null;
     maxDate?: string | Date | null;
@@ -75,6 +78,7 @@ const props = withDefaults(
     modelValue: null,
     required: false,
     disabled: false,
+    size: undefined,
     minDate: null,
     maxDate: null,
     hasError: false,
@@ -100,9 +104,10 @@ const formatInternal = computed(() => {
   return 'Y-m-d';
 });
 
-const { hasErrorInternal, emitUpdate } = useField({
+const { hasErrorInternal, emitUpdate, sizeInternal } = useField({
   name: computed(() => props.name),
   required: computed(() => props.required),
+  size: computed(() => props.size),
   hasError: computed(() => props.hasError),
   emit: emit,
 });
@@ -293,4 +298,56 @@ function init() {
 function clear() {
   emitUpdate(null);
 }
+
+const classes = computed(() => {
+  const base = 'transition-colors duration-200 input-rounded';
+  const focus = 'focus:input-focus'
+  const error = hasErrorInternal.value ? 'border-red-500 focus:input-focus-error' : 'border-slate-300';
+  const disabled = 'disabled:cursor-not-allowed disabled:text-slate-300';
+  const sizeConfig = sizes[sizeInternal.value];
+  const padding = {
+    'xs': 'pl-6 pr-5',
+    'sm': 'pl-[2.1rem] pr-6',
+    'md': 'pl-10 pr-7',
+  }[sizeInternal.value];
+
+  const paddingRight = props.modelValue ? padding : 'pr-0';
+
+  return twMerge(
+    base,
+    focus,
+    error,
+    disabled,
+    padding,
+    paddingRight,
+    sizeConfig.height,
+    sizeConfig.fontSize,
+  );
+});
+
+const iconWrapClasses = computed(() => {
+  const base = 'pointer-events-none absolute top-0 left-0 h-full flex items-center justify-center';
+  const padding = {
+    'xs': 'pl-2',
+    'sm': 'pl-2.5',
+    'md': 'pl-3',
+  }[sizeInternal.value];
+
+  return twMerge(
+    base,
+    padding
+  );
+});
+
+const iconClasses = computed(() => {
+  const base = '';
+  const error = hasErrorInternal.value ? 'text-red-500' : 'text-slate-500';
+  const sizeConfig = sizes[sizeInternal.value];
+
+  return twMerge(
+    base,
+    error,
+    sizeConfig.iconSize,
+  );
+});
 </script>

package/src/components/BaseDateSelect.stories.js

@@ -2,10 +2,17 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import ShowValue from '@/../.storybook/components/ShowValue.vue';
 import { createFieldStory } from '../../.storybook/utils';
 
+const sizes = ['xs', 'sm', 'md'];
+
 export default {
   title: 'Form/BaseDateSelect',
   component: BaseDateSelect,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    }
+  },
 };
 
 const Template = (args) => ({
@@ -40,6 +47,23 @@ Disabled.args = {
   disabled: true,
 };
 
+const TemplateSizes = (args) => ({
+  components: { BaseDateSelect },
+  setup() {
+    const value = ref(null);
+    const sizes = ['xs', 'sm', 'md'];
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseDateSelect v-model="value" v-bind="args" :size="size" class="w-full"></BaseDateSelect>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
 export const Field = createFieldStory({
   component: BaseDateSelect,
   componentName: 'BaseDateSelect',