sprintify-ui 0.2.23 → 0.2.24

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],
     },