sprintify-ui 0.0.10 → 0.0.12

package/src/components/BaseCharacterCounter.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div
+      v-if="max && (!min || length >= min)"
+      :class="{
+        'text-red-600': length > max,
+      }"
+    >
+      {{ length }}/{{ max }}
+    </div>
+    <div v-else-if="min && length < min" class="text-red-600">
+      {{ $t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { trim } from 'lodash';
+
+const props = defineProps({
+  text: {
+    required: true,
+    type: String,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  trim: {
+    default: true,
+    type: Boolean,
+  },
+  removeDoubleSpaces: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const trimmedText = computed(() => {
+  let text = props.text;
+
+  if (props.trim) {
+    text = trim(props.text);
+  }
+
+  if (props.removeDoubleSpaces) {
+    text = text.replace(/ +(?= )/g, '');
+  }
+
+  return text;
+});
+
+const length = computed(() => {
+  return trimmedText.value.length;
+});
+</script>

package/src/components/BaseDataIterator.stories.js

@@ -1,4 +1,5 @@
 import BaseDataIterator from './BaseDataIterator.vue';
+import BaseSelect from './BaseSelect.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
@@ -43,16 +44,67 @@ const template = `
 
       <BaseLoadingCover
         v-show="loading"
-        backdropClass="bg-slate-100 bg-opacity-50"
+        size="lg"
+        backdropClass="bg-white bg-opacity-50"
       >
       </BaseLoadingCover>
     </div>
   </template>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.type ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('type', $event)"
+        >
+          <option value="video">
+            Video
+          </option>
+          <option value="article">
+            Article
+          </option>
+        </BaseSelect>
+      </div>
+      <div>
+        <p class="mb-1 text-sm">
+          Access Level
+        </p>
+        <BaseSelect
+          :model-value="query.access_level ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('access_level', $event)"
+        >
+          <option value="public">
+            Public
+          </option>
+          <option value="member">
+            Member
+          </option>
+          <option value="vip">
+            VIP
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
 </BaseDataIterator>
 `;
 
 const Template = (args) => ({
-  components: { BaseDataIterator, BaseCard, BaseCardRow, BaseLoadingCover },
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+    BaseSelect,
+  },
   setup() {
     return { args };
   },
@@ -83,7 +135,54 @@ Demo.args = {
   ],
 };
 
-export const Simple = Template.bind({});
+const SimpleTemplate = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseDataIterator v-bind="args">
+    <template #default="{ items, loading }">
+      <div class="relative">
+        <div class="space-y-1.5">
+          <a
+            v-for="item in items"
+            :key="item.id"
+            :href="item.website_url"
+            target="_blank"
+            class="block group"
+          >
+            <BaseCard class="group-hover:bg-slate-100">
+              <BaseCardRow size="sm">
+                <div class="font-medium text-slate-900">
+                  {{ item.title }}
+                </div>
+                <p class="text-xs leading-tight text-slate-500">
+                  {{ item.subtitle }}
+                </p>
+              </BaseCardRow>
+            </BaseCard>
+          </a>
+        </div>
+  
+        <BaseLoadingCover
+          v-show="loading"
+          size="lg"
+          backdropClass="bg-white bg-opacity-50"
+        >
+        </BaseLoadingCover>
+      </div>
+    </template>
+  </BaseDataIterator>
+  `,
+});
+
+export const Simple = SimpleTemplate.bind({});
 Simple.args = {
   searchable: false,
   actions: [],

package/src/components/BaseDataIterator.vue

@@ -6,14 +6,17 @@
         'grid-cols-[1fr_300px]': hasSidebar,
       }"
     >
-      <div class="col-span-2 min-w-0 lg:col-span-1">
+      <div
+        class="min-w-0"
+        :class="{ 'col-span-1': !mobileLayout, 'col-span-2': mobileLayout }"
+      >
         <!-- Header -->
-        <div class="mb-4 flex space-x-2 empty:mb-0">
+        <div class="flex mb-4 space-x-2 empty:mb-0">
           <!-- Search bar -->
           <div v-if="searchable" class="grow">
             <div class="relative h-11">
               <div
-                class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
+                class="flex pointer-events-none absolute top-0 left-0 h-full items-center justify-center pl-2.5"
               >
                 <BaseIcon
                   class="h-6 w-6 text-slate-400"
@@ -30,7 +33,7 @@
               />
               <div
                 v-if="searchQuery"
-                class="absolute top-0 right-0 flex h-full items-center justify-center p-1"
+                class="flex absolute top-0 right-0 h-full items-center justify-center p-1"
               >
                 <button
                   type="button"
@@ -52,15 +55,15 @@
           <!-- Filters (mobile) -->
           <button
             v-if="mobileLayout && hasFilters"
-            class="btn flex h-11 items-center justify-center py-1 text-base"
+            class="flex btn h-11 items-center justify-center py-1 text-base shadow-sm"
             type="button"
             @click="showFilters = true"
           >
             <BaseIcon
-              class="mr-2 h-6 w-6 text-slate-500"
+              class="h-6 w-6 text-slate-500 xs:mr-2"
               icon="heroicons:adjustments-horizontal-solid"
             />
-            <span>{{ $t('sui.filters') }}</span>
+            <span class="hidden xs:block">{{ $t('sui.filters') }}</span>
           </button>
 
           <!-- Menu -->
@@ -96,42 +99,36 @@
 
         <!-- Pagination -->
 
+        <div class="mt-5">
+          <p class="text-center text-xs text-slate-400 sm:text-right">
+            {{
+              (paginationMetadata.current_page - 1) *
+                paginationMetadata.per_page +
+              1
+            }}
+            -
+            {{
+              $t('sui.pagination_detail', {
+                page: Math.min(
+                  paginationMetadata.current_page * paginationMetadata.per_page,
+                  paginationMetadata.total
+                ),
+                total: paginationMetadata.total,
+              })
+            }}
+          </p>
+        </div>
+
         <div class="mt-4">
-          <div
-            class="flex flex-wrap xs:flex-nowrap xs:items-center xs:justify-between"
-          >
-            <div class="flex items-center space-x-3">
-              <BasePaginationSimple
-                :model-value="page"
-                :last-page="lastPage"
-                @model-value:update="onPageChange"
-              />
-              <div>
-                <p class="text-sm text-slate-600">
-                  {{
-                    (paginationMetadata.current_page - 1) *
-                      paginationMetadata.per_page +
-                    1
-                  }}
-                  -
-                  {{
-                    $t('sui.pagination_detail', {
-                      page: Math.min(
-                        paginationMetadata.current_page *
-                          paginationMetadata.per_page,
-                        paginationMetadata.total
-                      ),
-                      total: paginationMetadata.total,
-                    })
-                  }}
-                </p>
-              </div>
-            </div>
-          </div>
+          <BasePagination
+            :model-value="page"
+            :last-page="lastPage"
+            @update:model-value="onPageChange"
+          />
         </div>
       </div>
 
-      <div v-if="!mobileLayout && hasSidebar">
+      <div v-if="!mobileLayout" ref="sidebar">
         <slot
           name="sidebarTop"
           :pagination-metadata="paginationMetadata"
@@ -201,7 +198,6 @@ const DEFAULT_QUERY = {
 import { cloneDeep, debounce, isArray, merge, set } from 'lodash';
 import hash from 'object-hash';
 import { ComputedRef, PropType, Ref } from 'vue';
-import { useBreakpoints } from '@/composables/breakpoints';
 import {
   Collection,
   DataTableQuery,
@@ -214,9 +210,10 @@ import {
 import BaseMenu from './BaseMenu.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
-import BasePaginationSimple from './BasePaginationSimple.vue';
+import BasePagination from './BasePagination.vue';
 import BaseModalSide from './BaseModalSide.vue';
 import { config } from '@/index';
+import { useMutationObserver, useResizeObserver } from '@vueuse/core';
 
 const props = defineProps({
   /**
@@ -299,7 +296,10 @@ const route = useRoute();
 const router = useRouter();
 const routeName = route.name;
 
-const breakpoints = useBreakpoints();
+const width = ref(800);
+useResizeObserver(dataIteratorNode, () => {
+  width.value = dataIteratorNode.value?.clientWidth ?? 800;
+});
 
 /** Data table state */
 
@@ -315,7 +315,7 @@ const query = ref(cloneDeep(props.defaultQuery)) as Ref<DataTableQuery>;
 const slots = useSlots();
 
 const mobileLayout = computed(() => {
-  return breakpoints.smaller('lg').value;
+  return width.value < 1024;
 });
 
 const hasFilters = computed((): boolean => {
@@ -323,14 +323,40 @@ const hasFilters = computed((): boolean => {
   return numberOfFilterSlots !== undefined;
 });
 
-const hasSidebar = computed(() => {
-  return (
-    hasFilters.value ||
-    slots.sidebarTop !== undefined ||
-    slots.sidebarBottom !== undefined
-  );
+/*
+|--------------------------------------------------------------------------
+| Has sidebar observer
+|--------------------------------------------------------------------------
+*/
+
+const hasSidebar = ref(false);
+const sidebar = ref(null) as Ref<null | HTMLElement>;
+
+function checkIfSidebarIsEmpty() {
+  hasSidebar.value = (sidebar?.value?.childElementCount ?? 0) > 0;
+}
+
+const checkIfSidebarIsEmptyDebounce = debounce(checkIfSidebarIsEmpty, 100);
+
+useMutationObserver(sidebar, checkIfSidebarIsEmptyDebounce, {
+  attributes: false,
+  childList: true,
+});
+
+onMounted(() => {
+  checkIfSidebarIsEmpty();
 });
 
+watch(
+  () => mobileLayout.value,
+  () => {
+    // After the sidebar appears...
+    nextTick(() => {
+      checkIfSidebarIsEmpty();
+    });
+  }
+);
+
 /*
 |--------------------------------------------------------------------------
 | Query params

package/src/components/BaseDataTable.stories.js

@@ -1,6 +1,10 @@
 import BaseDataTable from './BaseDataTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseBoolean from './BaseBoolean.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseBadge from './BaseBadge.vue';
+import BaseAppNotifications from './BaseAppNotifications.vue';
+import BaseAppDialogs from './BaseAppDialogs.vue';
 
 export default {
   title: 'Data/BaseDataTable',
@@ -23,6 +27,7 @@ const template = `
     label="Titre"
     sortable
     field="title->en"
+    :toggle="false"
   >
     <div class="max-w-sm">
       <div class="font-medium text-slate-900">
@@ -53,11 +58,84 @@ const template = `
       {{ Math.round(row.votes_avg_score) }} / 5
     </div>
   </BaseTableColumn>
+
+  <BaseTableColumn
+    v-slot="{ row }"
+    label="Access level"
+    field="access_level"
+    sortable
+    optional
+  >
+    <BaseBadge>
+      {{ row.access_level }}
+    </BaseBadge>
+  </BaseTableColumn>
+
+  <template #detail="{ row }">
+    <div class="p-4 text-sm">
+      <p>ID : {{ row.id }}</p>
+      <p>Created at : {{ row.created_at }}</p>
+    </div>
+  </template>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.type ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('type', $event)"
+        >
+          <option value="video">
+            Video
+          </option>
+          <option value="article">
+            Article
+          </option>
+        </BaseSelect>
+      </div>
+      <div>
+        <p class="mb-1 text-sm">
+          Access Level
+        </p>
+        <BaseSelect
+          :model-value="query.access_level ?? null"
+          class="w-full rounded border-slate-300"
+          placeholder="-"
+          @update:model-value="updateQueryValue('access_level', $event)"
+        >
+          <option value="public">
+            Public
+          </option>
+          <option value="member">
+            Member
+          </option>
+          <option value="vip">
+            VIP
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
 </BaseDataTable>
+<BaseAppNotifications></BaseAppNotifications>
+<BaseAppDialogs></BaseAppDialogs>
 `;
 
 const Template = (args) => ({
-  components: { BaseDataTable, BaseTableColumn, BaseBoolean },
+  components: {
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+    BaseSelect,
+    BaseBadge,
+    BaseAppNotifications,
+    BaseAppDialogs,
+  },
   setup() {
     return { args };
   },
@@ -86,10 +164,79 @@ Demo.args = {
       color: 'danger',
     },
   ],
+  checkable: true,
+  checkableActions: [
+    {
+      label: 'Delete all',
+      action: () => {
+        alert('delete!');
+      },
+    },
+  ],
+  detailed: true,
+  maxHeight: 400,
+  editUrl() {
+    return '/';
+  },
+  deleteUrl() {
+    return '/';
+  },
 };
 
-export const Simple = Template.bind({});
+const SimpleTemplate = (args) => ({
+  components: {
+    BaseDataTable,
+    BaseTableColumn,
+    BaseBoolean,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseDataTable v-bind="args">
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="Titre"
+      sortable
+      field="title->en"
+      :toggle="false"
+    >
+      <div class="max-w-sm">
+        <div class="font-medium text-slate-900">
+          {{ row.title }}
+        </div>
+        <p class="text-xs leading-tight text-slate-500">
+          {{ row.subtitle }}
+        </p>
+      </div>
+    </BaseTableColumn>
+  
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="VIP"
+      field="access_level"
+      sortable
+    >
+      <BaseBoolean :model-value="row.access_level == 'vip'" />
+    </BaseTableColumn>
+  
+    <BaseTableColumn
+      v-slot="{ row }"
+      label="Vote"
+      field="votes_avg_score"
+      sortable
+    >
+      <div class="">
+        {{ Math.round(row.votes_avg_score) }} / 5
+      </div>
+    </BaseTableColumn>
+  </BaseDataTable>
+  `,
+});
+
+export const Simple = SimpleTemplate.bind({});
 Simple.args = {
   searchable: false,
+  toggleable: false,
   actions: [],
 };