sprintify-ui 0.2.22 → 0.2.24

package/src/components/BaseDataTable.vue

@@ -8,6 +8,7 @@
     :actions="actions"
     :history-mode="historyMode"
     :layout="layout"
+    :size="size"
     :sections="sectionsInternal"
     :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
     @fetch="onFetch"
@@ -40,7 +41,7 @@
               }}.</span>
               <button
                 type="button"
-                class="mr-3 inline text-slate-700 underline"
+                class="mr-3 inline text-slate-800 underline underline-offset-1 decoration-slate-400 decoration-2 decoration-dashed"
                 @click="uncheckAll()"
               >
                 {{ t('sui.deselect_all') }}
@@ -53,12 +54,19 @@
             >
               <template #button="{ open }">
                 <div
-                  class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white duration-150 hover:bg-slate-50"
+                  class="flex h-10 px-4 items-center justify-center btn pl-3"
                   :class="[
                     open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
                   ]"
                 >
-                  <BaseIcon icon="heroicons-solid:dots-vertical" />
+                  <BaseIcon
+                    icon="heroicons-solid:dots-vertical"
+                    class="mr-2"
+                  />
+
+                  <span class="font-semibold">
+                    {{ t('sui.bulk_actions') }}
+                  </span>
                 </div>
               </template>
             </BaseMenu>
@@ -79,6 +87,7 @@
           :sort-direction="sortDirection"
           :max-height="maxHeight"
           :visible-columns="visibleColumns"
+          :size="size"
           @update:checked-rows="onCheckedRowsUpdate"
           @sort="onSortChange"
           @cell-click="onCellClick"
@@ -103,16 +112,28 @@
                     <BaseDataTableRowAction
                       :row="row"
                       :row-action="rowAction"
+                      :size="size"
                     />
                   </template>
                   <BaseMenu
                     v-if="showRowActionMenu"
                     :items="rowActionMenuItems(row)"
                     size="sm"
-                    button-class="btn flex h-8 w-8 p-0 items-center justify-center"
+                    :tw-button="[
+                      'btn flex p-0 items-center justify-center',
+                      {
+                        'py-1.5 px-2': size == 'sm',
+                        'p-2': size == 'md'
+                      }
+                    ]"
                   >
                     <template #button>
-                      <BaseIcon icon="heroicons-solid:dots-vertical" />
+                      <BaseIcon
+                        icon="heroicons-solid:dots-vertical"
+                        :class="{
+                          'h-3 w-3': size == 'sm'
+                        }"
+                      />
                     </template>
                   </BaseMenu>
                 </div>
@@ -416,12 +437,23 @@ const props = defineProps({
 
   /**
    * Layout type
+   * 
+   * default: Layout with a sidebar
+   * compact: Layout without a sidebar, this is the default layout for mobile, even if you don't specify it
    */
   layout: {
     default: 'default',
     type: String as PropType<'default' | 'compact'>,
   },
 
+  /**
+   * Overall size and spacing of the component
+   */
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
+
   sections: {
     default: undefined,
     type: Array as PropType<DataIteratorSection[]>,
@@ -665,7 +697,7 @@ const sectionsInternal = computed<DataIteratorSection[]>(() => {
       ...sections,
       {
         name: 'columns',
-        icon: 'heroicons:table-cells-20-solid',
+        icon: 'heroicons:view-columns',
         title: t('sui.columns'),
         closeText: t('sui.apply'),
         opened: false,

package/src/components/BaseDataTableRowAction.vue

@@ -2,33 +2,52 @@
   <button
     v-if="rowAction.action"
     type="button"
-    class="btn btn-white border border-slate-300 p-2 shadow-sm"
+    class="btn btn-white border border-slate-300 shadow-sm"
+    :class="{
+      'py-1.5 px-2': size === 'sm',
+      'p-2': size === 'md',
+    }"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
     @click="rowAction.action ? rowAction.action(row) : null"
   >
     <BaseIcon
       :icon="rowAction.icon"
       class="text-slate-500"
+      :class="{
+        'h-3 w-3': size == 'sm'
+      }"
     />
   </button>
   <RouterLink
     v-else-if="rowAction.to"
     :to="rowAction.to(row)"
     :disabled="rowAction.disabled && rowAction.disabled(row)"
-    class="btn btn-white border border-slate-300 p-2 shadow-sm hover:bg-slate-100"
+    class="btn btn-white border border-slate-300 shadow-sm hover:bg-slate-100"
+    :class="{
+      'py-1.5 px-2': size === 'sm',
+      'p-2': size === 'md',
+    }"
   >
     <BaseIcon
       :icon="rowAction.icon"
       class="text-slate-500"
+      :class="{
+        'h-3 w-3': size == 'sm'
+      }"
     />
   </RouterLink>
 </template>
 
 <script lang="ts" setup>
 import { CollectionItem, RowAction } from '@/types';
+import { BaseIcon } from '.';
 
-defineProps<{
+withDefaults(defineProps<{
   row: CollectionItem;
   rowAction: RowAction;
-}>();
+  size?: 'sm' | 'md';
+}>(), {
+  size: 'md',
+});
+
 </script>

package/src/components/BaseHeader.stories.js

@@ -3,6 +3,12 @@ import BaseHeader from './BaseHeader.vue';
 export default {
   title: 'Layout/BaseHeader',
   component: BaseHeader,
+  argTypes: {
+    layout: {
+      control: { type: 'select' },
+      options: ['default', 'compact'],
+    },
+  },
 };
 
 const Template = (args) => ({

package/src/components/BaseHeader.vue

@@ -3,10 +3,11 @@
     <BaseBreadcrumbs
       v-if="breadcrumbs"
       :breadcrumbs="breadcrumbs"
-      class="mb-2"
+      :size="compactLayout ? 'sm' : 'md'"
+      class="lg:mb-1 mb-2"
     />
 
-    <div class="lg:flex lg:items-center lg:justify-between">
+    <div class="lg:flex lg:items-top lg:justify-between">
       <div class="min-w-0 flex-1">
         <div class="flex flex-col xs:flex-row xs:flex-wrap xs:items-center">
           <h2
@@ -35,8 +36,8 @@
         </div>
         <h3
           v-if="subtitle"
-          class="mt-1 leading-tight text-slate-500"
-          :class="[compactLayout ? 'text-sm' : 'truncate text-base']"
+          class="mt-1 leading-tight text-slate-500 text-sm"
+          :class="[compactLayout ? '' : 'truncate text-base']"
         >
           {{ subtitle }}
         </h3>
@@ -45,18 +46,18 @@
           class="flex"
           :class="[
             compactLayout
-              ? 'mt-1 flex-col'
-              : 'mt-0 flex-row flex-wrap space-x-6',
+              ? 'mt-2 flex-col'
+              : 'mt-2 flex-row flex-wrap space-x-4',
           ]"
         >
           <div
             v-for="attribute in attributes"
             :key="attribute.label"
-            class="mt-2 flex items-center text-sm text-slate-500"
+            class="flex items-center text-sm text-slate-500"
           >
             <BaseIcon
               :icon="attribute.icon"
-              class="mr-1.5 h-5 w-5 flex-shrink-0 text-slate-400"
+              class="mr-1.5 h-4 w-4 flex-shrink-0 text-slate-400"
               aria-hidden="true"
             />
             {{ attribute.label }}
@@ -64,7 +65,9 @@
         </div>
       </div>
 
-      <div class="mt-5">
+      <div
+        class="mt-4 lg:mt-0"
+      >
         <div
           class="flex gap-2"
           :class="{

package/src/components/BaseMenu.stories.js

@@ -13,6 +13,10 @@ export default {
       control: { type: 'select' },
       options: ['bottom-left', 'bottom-right'],
     },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md'],
+    }
   },
 };
 

package/src/components/BaseMenuItem.vue

@@ -1,12 +1,16 @@
 <template>
-  <div :class="buttonClasses">
+  <div
+    :style="buttonStyles"
+    class="rounded leading-tight"
+    :class="[active ? 'bg-slate-100' : 'bg-white']"
+  >
     <div class="flex items-center">
       <BaseIcon
         v-if="icon"
         :icon="icon"
-        :class="iconClasses"
+        :class="[iconClasses]"
       />
-      <span :class="textSize">{{ label }}</span>
+      <span :class="[textClasses, textColor]">{{ label }}</span>
     </div>
     <div
       v-if="count"
@@ -16,13 +20,14 @@
         :count="count"
         :max-digit="2"
         :color="color"
+        :size="size"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { PropType, StyleValue } from 'vue';
 import BaseCounter from './BaseCounter.vue';
 import { ActionColors } from '@/types';
 
@@ -73,7 +78,7 @@ const textColor = computed((): string => {
   return '';
 });
 
-const textSize = computed((): string => {
+const textClasses = computed((): string => {
   if (props.size == 'xs') {
     return 'text-xs';
   } else if (props.size == 'sm') {
@@ -85,25 +90,47 @@ const textSize = computed((): string => {
   return '';
 });
 
-const buttonClasses = computed((): string => {
-  let baseClasses =
-    'flex items-center justify-between w-full leading-tight py-2 text-sm text-left rounded';
+const buttonStyles = computed((): StyleValue => {
 
-  baseClasses += ' ' + textColor.value;
+  let paddingY = 0.5;
+  let paddingLeft = 1;
+  let paddingRight = 1;
 
-  if (!props.active) {
-    baseClasses += ' bg-white';
-  } else {
-    baseClasses += ' bg-slate-100';
+  const baseStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    lineHeight: '1.25rem',
+    text: 'left',
+    paddingTop: '',
+    paddingBottom: '',
+    paddingLeft: '',
+    paddingRight: '',
   }
 
   if (props.icon) {
-    baseClasses += ' pl-2 pr-4';
-  } else {
-    baseClasses += ' px-4';
+    paddingLeft = 0.5;
+    paddingRight = 1;
   }
 
-  return baseClasses;
+  if (props.size == 'xs') {
+    paddingY = 0.3;
+    if (props.icon) {
+      paddingRight = 0.75;
+    }
+  } else if (props.size == 'sm') {
+    paddingY = 0.5;
+  } else if (props.size == 'md') {
+    paddingY = 0.5;
+  }
+
+  baseStyles.paddingLeft = paddingLeft + 'rem';
+  baseStyles.paddingRight = paddingRight + 'rem';
+  baseStyles.paddingTop = paddingY + 'rem';
+  baseStyles.paddingBottom = paddingY + 'rem';
+
+  return baseStyles;
 });
 
 const iconClasses = computed((): string => {

package/src/components/BaseTable.vue

@@ -55,7 +55,7 @@
                       column.style,
                       index == 0 ? firstColStyles(true) : {},
                     ]"
-                    class="th group py-2 pl-3 pr-3 text-left"
+                    class="th group text-left px-3 py-2"
                     :class="{
                       'cursor-pointer': column.sortable,
                     }"
@@ -69,7 +69,13 @@
                           column.sortable && currentSortColumn === column,
                       }"
                     >
-                      <span class="whitespace-nowrap text-xs text-slate-500">
+                      <span
+                        class="whitespace-nowrap text-slate-600"
+                        :class="{
+                          'text-[12px]': size == 'sm',
+                          'text-xs': size == 'md',
+                        }"
+                      >
                         {{ column.label }}
                       </span>
                       <div
@@ -90,14 +96,14 @@
                               :opacity="!isAsc ? '0.5' : '1'"
                               fill="currentColor"
                               d="M8.71 12.29L11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"
-                            />
+                            ></path>
                           </g>
                           <g transform="translate(0 3)">
                             <path
                               :opacity="isAsc ? '0.5' : '1'"
                               fill="currentColor"
                               d="m8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"
-                            />
+                            ></path>
                           </g>
                         </svg>
                       </div>
@@ -151,8 +157,8 @@
                     <td
                       v-if="checkable && checkboxPosition === 'left'"
                       class="group z-[1] cursor-pointer bg-white pl-3"
-                      :style="checkStyles(false)"
                       :class="borderBottomClasses(index, row)"
+                      :style="checkStyles(false)"
                       @click="checkRow(row, index, $event as MouseEvent)"
                     >
                       <div class="flex items-center">
@@ -174,26 +180,34 @@
                       scoped
                       name="default"
                       tag="td"
-                      class="bg-white py-3 pl-3 pr-3 text-sm"
-                      :style="[
-                        column.style,
-                        colindex === 0 ? firstColStyles(false) : {},
-                      ]"
+                      class="bg-white text-sm"
                       :class="[
                         borderBottomClasses(index, row),
                         column.clickable ? 'cursor-pointer' : '',
+                        {
+                          'py-0.5 px-3': size == 'sm',
+                          'py-2 px-3': size == 'md',
+                        }
+                      ]"
+                      :style="[
+                        column.style,
+                        colindex === 0 ? firstColStyles(false) : {}
                       ]"
                       :data-label="column.label"
                       :props="{ row, column, index, colindex, toggleDetails }"
-                      @click="
-                        onColumnClick(row, column, index, colindex, $event)
-                      "
+                      @click="onColumnClick(row, column, index, colindex, $event)"
                     />
 
                     <td
                       v-if="checkable && checkboxPosition === 'right'"
-                      class="group cursor-pointer pr-3"
-                      :class="borderBottomClasses(index, row)"
+                      class="group cursor-pointer"
+                      :class="[
+                        borderBottomClasses(index, row),
+                        {
+                          'px-3 py-1': size == 'sm',
+                          'p-3': size == 'md',
+                        }
+                      ]"
                       align="right"
                       @click="checkRow(row, index, $event as MouseEvent)"
                     >
@@ -214,7 +228,6 @@
                     >
                       <td
                         :colspan="columnCount"
-                        class="td"
                         :class="borderBottomDetailClasses(index)"
                       >
                         <slot
@@ -361,6 +374,10 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+  size: {
+    type: String as PropType<'sm' | 'md'>,
+    default: 'md',
+  },
 });
 
 const emit = defineEmits([
@@ -375,6 +392,7 @@ const emit = defineEmits([
 ]);
 
 const visibleDetailRows = ref<Row[]>([]);
+// eslint-disable-next-line vue/no-setup-props-destructure
 const newCheckedRows = ref<Row[]>([...props.checkedRows]);
 const lastCheckedRowIndex = ref<number | null>(null);
 const currentSortColumn = ref<BaseTableColumn | null>(null);

package/src/components/BaseTableColumn.vue

@@ -95,7 +95,7 @@ export default defineComponent({
     style() {
       return {
         width: this.width ? this.width + 'px' : undefined,
-        padding: this.padding ? this.padding : '0.5rem 0.75rem',
+        padding: this.padding ? this.padding : undefined,
       };
     },
   },

package/src/index.ts

@@ -19,11 +19,12 @@ import { Region } from './types/Region';
 import { useI18nStore } from './stores/i18n';
 
 export interface Options {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   http?: AxiosInstance;
   upload_url?: string;
   locales?: Locales;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formatQueryString?: (params: Record<string, any>) => string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   parseQueryString?: (params: string) => Record<string, any>;
   countries?: Country[];
   regions?: Region[];
@@ -36,12 +37,14 @@ const config = {
     fr: 'Français',
   } as Locales,
   upload_url: '/api/upload',
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formatQueryString(params: Record<string, any>) {
     return QueryString.stringify(params, {
       arrayFormat: 'comma',
       encode: import.meta.env.PROD ? true : false,
     });
   },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   parseQueryString(params: string): Record<string, any> {
     return QueryString.parse(params);
   },

package/src/lang/en.json

@@ -12,6 +12,7 @@
     "apply_filters": "Apply filters",
     "authentication_code": "Authentication code",
     "autocomplete_placeholder": "Type to start your search",
+    "bulk_actions": "Bulk actions",
     "cancel": "Cancel",
     "city": "City",
     "clear": "Clear",
@@ -85,4 +86,4 @@
     "you_can_upload_up_to_n_files": "You can upload one file at most|You can upload up to {count} files",
     "you_cannot_select_more_than_x_items": "You can't select more than one item|You can't select more than {count} items"
   }
-}
+}

package/src/lang/fr.json

@@ -12,6 +12,7 @@
     "apply_filters": "Appliquer les filtres",
     "authentication_code": "Code d'authentification",
     "autocomplete_placeholder": "Taper pour lancer votre recherche",
+    "bulk_actions": "Actions en lot",
     "cancel": "Annuler",
     "city": "Ville",
     "clear": "Effacer",
@@ -85,4 +86,4 @@
     "you_can_upload_up_to_n_files": "Vous pouvez télécharger un fichier au maximum|Vous pouvez télécharger jusqu'à {count} fichiers",
     "you_cannot_select_more_than_x_items": "Vous ne pouvez pas sélectionner plus de un élément|Vous ne pouvez pas sélectionner plus de {count} éléments"
   }
-}
+}

package/src/utils/colors.ts

@@ -31,7 +31,7 @@ export const palette: Record<string, ColorPalette> = {
   },
   gray: {
     low: {
-      backgroundColor: colors.slate[100],
+      backgroundColor: colors.slate[200],
       textColor: colors.slate[800],
       borderColor: colors.slate[300],
     },