sprintify-ui 0.2.22 → 0.2.24

package/dist/types/src/components/BaseTable.vue.d.ts

@@ -74,6 +74,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    size: {
+        type: PropType<"sm" | "md">;
+        default: string;
+    };
 }, {
     newColumns: import("vue").ComputedRef<{
         id: string;
@@ -171,6 +175,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
+    size: {
+        type: PropType<"sm" | "md">;
+        default: string;
+    };
 }>> & {
     onCheck?: ((...args: any[]) => any) | undefined;
     onSort?: ((...args: any[]) => any) | undefined;
@@ -182,6 +190,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     "onCell-click"?: ((...args: any[]) => any) | undefined;
 }, {
     data: Row[];
+    size: "sm" | "md";
     loading: boolean;
     sortField: string;
     sortDirection: string;

package/dist/types/src/components/BaseTableColumn.vue.d.ts

@@ -79,7 +79,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     style(): {
         width: string | undefined;
-        padding: string;
+        padding: string | undefined;
     };
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {

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.22",
+  "version": "0.2.24",
   "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/BaseBreadcrumbs.stories.js

@@ -3,7 +3,7 @@ import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 const breadcrumbs = [
   {
     label: 'Home',
-    icon: 'heroicons:home-solid',
+    icon: 'heroicons:home-20-solid',
     to: '/',
   },
   {
@@ -23,7 +23,12 @@ const breadcrumbs = [
 export default {
   title: 'Layout/BaseBreadcrumbs',
   component: BaseBreadcrumbs,
-  argTypes: {},
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md']
+    }
+  },
   args: {
     breadcrumbs: breadcrumbs,
   },

package/src/components/BaseBreadcrumbs.vue

@@ -7,26 +7,21 @@
     >
       <ol
         role="list"
-        class="flex items-center space-x-3"
+        class="flex items-center space-x-2"
       >
         <li
           v-for="(breadcrumb, index) in breadcrumbs"
           :key="index"
         >
           <div class="flex items-center">
-            <svg
+            <div
               v-if="index > 0"
-              class="h-5 w-5 flex-shrink-0 text-gray-400"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
+              class="text-gray-300"
+              :class="{ 'text-xs': size == 'md', 'text-[10px]': size == 'sm' }"
             >
-              <path
-                fill-rule="evenodd"
-                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                clip-rule="evenodd"
-              />
-            </svg>
+              /
+            </div>
+
             <RouterLink
               v-slot="{ href, navigate, isExactActive }"
               :to="breadcrumb.to"
@@ -36,7 +31,7 @@
                 :href="href"
                 class="text-sm"
                 :class="[
-                  { 'ml-3': index > 0 },
+                  { 'ml-2': index > 0 },
                   isExactActive
                     ? 'text-primary-600'
                     : 'text-slate-500 hover:text-slate-700',
@@ -44,9 +39,15 @@
                 @click.prevent="navigate()"
               >
                 <span v-if="breadcrumb.icon">
-                  <BaseIcon :icon="breadcrumb.icon" />
+                  <BaseIcon
+                    :icon="breadcrumb.icon"
+                    :class="{ 'h-4 w-4': size == 'md', 'h-3 w-3': size == 'sm' }"
+                  />
                 </span>
-                <span v-else>
+                <span
+                  v-else
+                  :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }"
+                >
                   {{ truncate(breadcrumb.label) }}
                 </span>
               </a>
@@ -61,7 +62,7 @@
       :to="mobileBreadcrumb.to"
       class="block text-slate-500 sm:hidden"
     >
-      <div class="flex items-center text-sm">
+      <div class="flex items-center">
         <svg
           class="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
           viewBox="0 0 20 20"
@@ -72,9 +73,9 @@
             fill-rule="evenodd"
             d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
             clip-rule="evenodd"
-          />
+          ></path>
         </svg>
-        <span>
+        <span :class="{ 'text-sm': size == 'md', 'text-xs': size == 'sm' }">
           {{ mobileBreadcrumb.label }}
         </span>
       </div>
@@ -93,6 +94,10 @@ const props = defineProps({
     required: true,
     type: Array as PropType<Breadcrumb[]>,
   },
+  size: {
+    type: String as PropType<'sm' | 'md'>,
+    default: 'md',
+  },
 });
 
 const mobileBreadcrumb = computed((): Breadcrumb | undefined => {

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',
@@ -50,21 +53,35 @@ const template = `
   >
     <div class="max-w-[200px]">
       <div class="font-medium text-slate-900 leading-tight truncate">
-        {{ row.title }}
+        {{ row.title.slice(0, 30) }}...
       </div>
-      <p class="text-xs leading-tight mt-1 text-slate-500 line-clamp-2">
-        {{ row.subtitle }}
-      </p>
-    </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 +93,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,40 +107,38 @@ 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>
 
+
   <template #test>
     <div>
       Section Test
@@ -189,7 +204,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 +234,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 +277,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 +368,4 @@ Simple.args = {
   searchable: false,
   toggleable: false,
   actions: [],
-};
+};