sprintify-ui 0.2.23 → 0.2.25

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

@@ -20,6 +20,7 @@ declare const messages: {
             apply_filters: string;
             authentication_code: string;
             autocomplete_placeholder: string;
+            bulk_actions: string;
             cancel: string;
             city: string;
             clear: string;
@@ -108,6 +109,7 @@ declare const messages: {
             apply_filters: string;
             authentication_code: string;
             autocomplete_placeholder: string;
+            bulk_actions: string;
             cancel: string;
             city: string;
             clear: string;

package/package.json

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

package/src/components/BaseBadge.vue

@@ -25,6 +25,7 @@ const props = withDefaults(
     size?: 'sm' | 'base' | 'lg';
     icon?: string;
     wrap?: boolean;
+    bordered?: boolean;
   }>(),
   {
     contrast: 'high',
@@ -37,10 +38,18 @@ const props = withDefaults(
 const colorStyle = computed((): Record<string, string> => {
   const config = getColorConfig(props.color, props.contrast == 'high');
 
-  return {
+  const styles: Record<string, string> = {
     backgroundColor: config.backgroundColor,
     color: config.textColor,
   };
+
+  if (props.bordered) {
+    styles.borderColor = config.borderColor;
+    styles.borderWidth = '1px';
+    styles.borderStyle = 'solid';
+  }
+
+  return styles;
 });
 
 const wrapClasses = computed(() => {

package/src/components/BaseDataIterator.vue

@@ -11,18 +11,34 @@
         :class="{ 'col-span-1': !compactLayout, 'col-span-2': compactLayout }"
       >
         <!-- Header -->
-        <div class="mb-4 flex space-x-2 empty:mb-0">
+        <div
+          class="flex space-x-2 empty:mb-0"
+          :class="{
+            'mb-2.5': size == 'sm',
+            'mb-4': size == 'md',
+          }"
+        >
           <!-- Search bar -->
           <div
             v-if="searchable"
             class="grow"
           >
-            <div class="relative h-11">
+            <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="h-6 w-6 text-slate-400"
+                  class="text-slate-400"
+                  :class="{
+                    'h-5 w-5': size == 'sm',
+                    'h-6 w-6': size == 'md',
+                  }"
                   icon="heroicons:magnifying-glass"
                 />
               </div>
@@ -30,7 +46,11 @@
                 ref="searchInput"
                 v-model="searchQuery"
                 type="text"
-                class="h-11 w-full overflow-hidden rounded-md border border-slate-300 bg-white pl-10 pr-9 shadow-sm"
+                class="w-full h-full py-0 overflow-hidden rounded-md border border-slate-300 bg-white shadow-sm"
+                :class="{
+                  'pl-9 pr-8': size == 'sm',
+                  'pl-10 pr-9': size == 'md',
+                }"
                 :placeholder="t('sui.autocomplete_placeholder')"
                 @input="onSearch"
               >
@@ -41,13 +61,14 @@
                 <button
                   type="button"
                   class="flex appearance-none items-center rounded p-1 hover:bg-slate-100"
-                  @click="
-                    searchQuery = '';
-                    onSearch('');
-                  "
+                  @click="searchQuery = ''; onSearch('');"
                 >
                   <BaseIcon
-                    class="h-6 w-6 text-slate-500"
+                    class="text-slate-500"
+                    :class="{
+                      'h-5 w-5': size == 'sm',
+                      'h-6 w-6': size == 'md',
+                    }"
                     icon="heroicons:x-mark"
                   />
                 </button>
@@ -62,6 +83,7 @@
             >
               <BaseDataIteratorSectionButton
                 :section="section"
+                :size="size"
                 @open="openSection(i)"
               />
             </template>
@@ -71,13 +93,18 @@
           <BaseMenu
             v-if="actions && actions.length"
             tw-menu="w-52"
+            :size="size == 'sm' ? 'xs' : 'sm'"
             :items="actions"
           >
             <template #button="{ open }">
               <div
-                class="flex h-11 w-11 items-center justify-center rounded-md border border-slate-300 bg-white shadow-sm duration-150 hover:bg-slate-50"
+                class="flex items-center justify-center rounded-md border border-slate-300 bg-white shadow-sm duration-150 hover:bg-slate-50"
                 :class="[
                   open ? 'ring-2 ring-primary-500 ring-offset-2' : false,
+                  {
+                    'h-9 w-9': size == 'sm',
+                    'h-11 w-11': size == 'md',
+                  }
                 ]"
               >
                 <BaseIcon icon="heroicons-solid:dots-vertical" />
@@ -277,6 +304,14 @@ const props = defineProps({
     type: String as PropType<'default' | 'compact'>,
   },
 
+  /**
+  * Overall size and spacing of the component
+  */
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
+
   /**
    * Sections
    */
@@ -334,6 +369,8 @@ const searchQuery = ref('');
 
 let lastUrl = '';
 let lastQueryHash = '';
+
+// eslint-disable-next-line vue/no-setup-props-destructure
 const query = ref<DataTableQuery>(cloneDeep(props.defaultQuery));
 const slots = useSlots();
 
@@ -705,7 +742,7 @@ const paginationStart = computed(() => {
 
   return (
     paginationMetadata.value.per_page *
-      (paginationMetadata.value.current_page - 1) +
+    (paginationMetadata.value.current_page - 1) +
     1
   );
 });
@@ -756,7 +793,7 @@ const sectionsInternal = computed<DataIteratorSection[]>(() => {
         name: 'filters',
         title: t('sui.filters'),
         closeText: t('sui.apply_filters'),
-        icon: 'heroicons:adjustments-horizontal-solid',
+        icon: 'heroicons:adjustments-horizontal',
         opened: true,
       },
       ...sections,

package/src/components/BaseDataIteratorSectionButton.vue

@@ -1,7 +1,12 @@
 <template>
   <button
-    class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
-    :class="[width > 600 ? 'px-4' : 'px-3.5']"
+    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',
+      }]"
     type="button"
     @click="open()"
   >
@@ -12,12 +17,17 @@
     <span
       v-if="section.title && width > 600"
       class="ml-2 whitespace-pre text-sm"
-    >{{ section.title }}</span>
+    >
+      {{ section.title }}
+    </span>
     <BaseBadge
       v-if="section.count"
       class="ml-2"
-      :label="section.count"
-    />
+      color="blue"
+      :size="size == 'sm' ? 'sm' : 'base'"
+    >
+      {{ section.count }}
+    </BaseBadge>
   </button>
 </template>
 
@@ -28,6 +38,7 @@ import BaseBadge from './BaseBadge.vue';
 
 defineProps<{
   section: DataIteratorSection;
+  size: 'sm' | 'md';
 }>();
 
 const emit = defineEmits<{

package/src/components/BaseDataTable.stories.js

@@ -6,17 +6,20 @@ import BaseBadge from './BaseBadge.vue';
 import BaseAppNotifications from './BaseAppNotifications.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
 import { onBeforeUnmount } from 'vue';
+import { DateTime } from 'luxon';
 
 export default {
   title: 'Data/BaseDataTable',
   component: BaseDataTable,
   argTypes: {
     layout: {
-      control: {
-        type: 'select',
-        options: ['default', 'compact'],
-      },
+      control: { type: 'select' },
+      options: ['default', 'compact'],
     },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md'],
+    }
   },
   args: {
     url: 'https://effettandem.com/api/content/articles',
@@ -48,23 +51,36 @@ const template = `
     field="title->en"
     :toggle="false"
   >
-    <div class="max-w-[200px]">
-      <div class="font-medium text-slate-900 leading-tight truncate">
-        {{ row.title }}
-      </div>
-      <p class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
-        {{ row.subtitle }}
-      </p>
+    <div class="font-medium text-slate-900 leading-tight truncate">
+      {{ row.title.slice(0, 30) }}...
     </div>
   </BaseTableColumn>
 
   <BaseTableColumn
     v-slot="{ row }"
-    label="VIP"
+    label="URL"
+    field="website_url"
+    sortable
+  >
+    <a :href="row.website_url" target="_blank" class="btn btn-xs whitespace-pre space-x-1.5 shadow-sm">
+      <span class="whitespace-pre">Open website</span>
+      <BaseIcon icon="heroicons:arrow-top-right-on-square-20-solid" class="w-4 h-4 inline-block" />
+    </a>
+  </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Access Level"
     field="access_level"
     sortable
   >
-    <BaseBoolean :model-value="row.access_level == 'vip'" />
+    <BaseBadge
+      contrast="low"
+      :color="row.access_level == 'public' ? 'green' : 'gray'"
+      bordered
+    >
+      {{ row.access_level }}
+    </BaseBadge>
   </BaseTableColumn>
 
   <BaseTableColumn
@@ -76,9 +92,9 @@ const template = `
     :toggle="true"
     :toggle-default="false"
   >
-    <div class="whitespace-pre">
+    <BaseBadge color="blue" contrast="low" bordered>
       {{ Math.round(row.votes_avg_score) }} / 5
-    </div>
+    </BaseBadge>
   </BaseTableColumn>
 
   <BaseTableColumn
@@ -90,37 +106,34 @@ const template = `
     :toggle="true"
     sortable
   >
-    <BaseBadge>
-      <span class="whitespace-pre">{{ row.owner?.name }}</span>
-    </BaseBadge>
+    <span class="text-slate-600 whitespace-pre">{{ row.owner?.name }}</span>
   </BaseTableColumn>
 
   <BaseTableColumn
     v-slot="{ row }"
-    label="Select"
-    :clickable="false"
-    padding="0px"
+    label="Created at"
+    field="created_at"
+    sortable
   >
-    <select class="select border border-slate-300 rounded text-xs">
-      <option>Option 1</option>
-    </select>
+    <p class="text-slate-600 text-sm">{{ DateTime.fromISO(row.created_at).toLocaleString() }}</p>
   </BaseTableColumn>
 
   <BaseTableColumn
     v-slot="{ row }"
-    label="Access level"
-    field="access_level"
-    sortable
+    label="Select"
+    :clickable="false"
+    padding="0px"
   >
-    <BaseBadge>
-      {{ row.access_level }}
-    </BaseBadge>
+    <select class="select border-none text-sm rounded text-slate-600  focus:z-10 focus:ring-2 bg-transparent">
+      <option>Option 1</option>
+      <option>Option 2</option>
+    </select>
   </BaseTableColumn>
 
   <template #detail="{ row }">
-    <div class="p-4 text-sm">
-      <p>ID : {{ row.id }}</p>
-      <p>Created at : {{ row.created_at }}</p>
+    <div class="p-4 text-xs">
+      <p>ID : <span class="font-mono">{{ row.id }}</span></p>
+      <p>Created at : <span class="font-mono">{{ row.created_at }}</span></p>
     </div>
   </template>
 
@@ -189,7 +202,7 @@ const templateSetup = (args) => {
     lastFetch.value = new Date();
   }
 
-  return { args, onCellClick, ownerIsVisible: true, onFetch, lastFetch };
+  return { args, onCellClick, ownerIsVisible: true, onFetch, lastFetch, DateTime };
 };
 
 const Template = (args) => ({
@@ -219,12 +232,12 @@ Demo.args = {
   actions: [
     {
       label: 'Open Google',
-      icon: 'heroicons:link',
+      icon: 'heroicons:link-20-solid',
       href: 'https://google.com',
     },
     {
       label: 'Export',
-      icon: 'heroicons:table-cells',
+      icon: 'heroicons:arrow-down-tray',
       action: () => alert('export!'),
     },
     { line: true },
@@ -262,6 +275,21 @@ Demo.args = {
   ],
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  editUrl() {
+    return '/';
+  },
+  deleteUrl() {
+    return '/';
+  },
+  size: 'sm',
+  searchable: true,
+  toggleable: true,
+  actions: [],
+};
+
+
 const VIfOnBaseTableColumn = (args) => ({
   components: templateComponents,
   setup() {
@@ -338,4 +366,4 @@ Simple.args = {
   searchable: false,
   toggleable: false,
   actions: [],
-};
+};

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