sprintify-ui 0.0.179 → 0.0.180

package/src/components/BaseDataIterator.vue

@@ -8,7 +8,7 @@
     >
       <div
         class="min-w-0"
-        :class="{ 'col-span-1': !mobileLayout, 'col-span-2': mobileLayout }"
+        :class="{ 'col-span-1': !compactLayout, 'col-span-2': compactLayout }"
       >
         <!-- Header -->
         <div class="mb-4 flex space-x-2 empty:mb-0">
@@ -52,19 +52,18 @@
             </div>
           </div>
 
-          <!-- Filters (mobile) -->
-          <button
-            v-if="mobileLayout && hasFilters"
-            class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
-            type="button"
-            @click="showFilters = true"
-          >
-            <BaseIcon
-              class="h-6 w-6 text-slate-500 xs:mr-2"
-              icon="heroicons:adjustments-horizontal-solid"
-            />
-            <span class="hidden xs:block">{{ $t('sui.filters') }}</span>
-          </button>
+          <template v-if="compactLayout">
+            <template
+              v-for="(section, i) in sectionsInternal"
+              :key="section.name"
+            >
+              <BaseDataIteratorSectionButton
+                :section="section"
+                @open="openSection(i)"
+              >
+              </BaseDataIteratorSectionButton>
+            </template>
+          </template>
 
           <!-- Menu -->
           <BaseMenu
@@ -99,8 +98,8 @@
 
         <!-- Pagination -->
 
-        <div v-if="paginationMetadata" class="mt-5">
-          <p class="text-center text-xs text-slate-400 sm:text-right">
+        <div v-if="paginationMetadata" class="mt-4">
+          <p class="text-center text-sm text-slate-400 sm:text-right">
             {{
               (paginationMetadata.current_page - 1) *
                 paginationMetadata.per_page +
@@ -128,74 +127,46 @@
         </div>
       </div>
 
-      <div v-if="!mobileLayout" ref="sidebar">
-        <slot
-          name="sidebarTop"
-          :pagination-metadata="paginationMetadata"
-        ></slot>
-
-        <div v-if="hasFilters" class="mb-4">
-          <BaseCard>
-            <BaseCardRow size="sm">
-              <button
-                type="button"
-                class="flex w-full items-center justify-between"
-                @click="showFilterDesktop = !showFilterDesktop"
-              >
-                <h2 class="font-semibold">
-                  {{ $t('sui.filters') }}
-                </h2>
-
-                <BaseIcon
-                  :icon="
-                    showFilterDesktop
-                      ? 'heroicons:chevron-down'
-                      : 'heroicons:chevron-up'
-                  "
-                ></BaseIcon>
-              </button>
-
-              <div v-show="showFilterDesktop" class="mt-4 space-y-3">
-                <slot
-                  name="filters"
-                  :query="query"
-                  :update-query="updateFilterQuery"
-                  :update-query-value="updateFilterQueryValue"
-                />
-              </div>
-            </BaseCardRow>
-          </BaseCard>
-        </div>
-
-        <slot
-          name="sidebarBottom"
-          :pagination-metadata="paginationMetadata"
-        ></slot>
-      </div>
-    </div>
-
-    <BaseModalSide v-if="hasFilters" v-model="showFilters">
-      <div class="px-4 py-5">
-        <h2 class="mb-4 font-semibold">
-          {{ $t('sui.filters') }}
-        </h2>
-
+      <div v-if="!compactLayout" ref="sidebar">
         <div class="space-y-3">
           <slot
-            name="filters"
-            :query="query"
-            :update-query="updateFilterQuery"
-            :update-query-value="updateFilterQueryValue"
-          />
-        </div>
+            name="sidebarTop"
+            :pagination-metadata="paginationMetadata"
+          ></slot>
+
+          <template v-for="section in sectionsInternal" :key="section.name">
+            <BaseDataIteratorSectionBox :section="section">
+              <slot
+                :name="section.name"
+                :query="query"
+                :update-query="updateFilterQuery"
+                :update-query-value="updateFilterQueryValue"
+              />
+            </BaseDataIteratorSectionBox>
+          </template>
 
-        <div>
-          <button class="btn btn-primary mt-4" @click="showFilters = false">
-            {{ $t('sui.apply_filters') }}
-          </button>
+          <slot
+            name="sidebarBottom"
+            :pagination-metadata="paginationMetadata"
+          ></slot>
         </div>
       </div>
-    </BaseModalSide>
+    </div>
+
+    <template v-for="(section, i) in sectionsInternal" :key="section.name">
+      <BaseDataIteratorSectionModal
+        :section="section"
+        :model-value="sectionModalActive == i"
+        @update:model-value="closeSection"
+      >
+        <slot
+          :name="section.name"
+          :query="query"
+          :update-query="updateFilterQuery"
+          :update-query-value="updateFilterQueryValue"
+        />
+      </BaseDataIteratorSectionModal>
+    </template>
   </div>
 </template>
 
@@ -218,6 +189,7 @@ import hash from 'object-hash';
 import { PropType } from 'vue';
 import {
   Collection,
+  DataIteratorSection,
   DataTableQuery,
   MenuItemInterface,
   PaginatedCollection,
@@ -225,13 +197,13 @@ import {
 } from '@/types';
 
 import BaseMenu from './BaseMenu.vue';
-import BaseCard from './BaseCard.vue';
-import BaseCardRow from './BaseCardRow.vue';
 import BasePagination from './BasePagination.vue';
-import BaseModalSide from './BaseModalSide.vue';
 import { config } from '@/index';
 import { useMutationObserver, useResizeObserver } from '@vueuse/core';
 import { useHasPaginatedData } from '@/composables/paginatedData';
+import BaseDataIteratorSectionButton from './BaseDataIteratorSectionButton.vue';
+import BaseDataIteratorSectionModal from './BaseDataIteratorSectionModal.vue';
+import BaseDataIteratorSectionBox from './BaseDataIteratorSectionBox.vue';
 
 const props = defineProps({
   /**
@@ -286,8 +258,25 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+
+  /**
+   * Layout type
+   */
+  layout: {
+    default: 'default',
+    type: String as PropType<'default' | 'compact'>,
+  },
+
+  /**
+   * Sections
+   */
+  sections: {
+    default: undefined,
+    type: Array as PropType<DataIteratorSection[]>,
+  },
 });
 
+const i18n = useI18n();
 const http = config.http;
 
 defineEmits([
@@ -322,7 +311,6 @@ useResizeObserver(dataIteratorNode, () => {
 const firstLoad = ref(false);
 const loading = ref(true);
 const error = ref(false);
-const showFilters = ref(false);
 const searchQuery = ref('');
 
 let lastUrl = '';
@@ -330,7 +318,10 @@ let lastQueryHash = '';
 const query = ref<DataTableQuery>(cloneDeep(props.defaultQuery));
 const slots = useSlots();
 
-const mobileLayout = computed(() => {
+const compactLayout = computed(() => {
+  if (props.layout === 'compact') {
+    return true;
+  }
   return width.value < 1024;
 });
 
@@ -364,7 +355,7 @@ onMounted(() => {
 });
 
 watch(
-  () => mobileLayout.value,
+  () => compactLayout.value,
   () => {
     // After the sidebar appears...
     nextTick(() => {
@@ -685,6 +676,53 @@ onMounted(() => {
   updateSearchInput();
 });
 
+/*
+|--------------------------------------------------------------------------
+| Sections
+|--------------------------------------------------------------------------
+*/
+
+const sectionModalActive = ref<null | number>(null);
+
+const sectionsInternal = computed<DataIteratorSection[]>(() => {
+  const sections = props.sections ?? [];
+
+  if (hasFilters.value) {
+    return [
+      {
+        name: 'filters',
+        title: i18n.t('sui.filters'),
+        closeText: i18n.t('sui.apply_filters'),
+        icon: 'heroicons:adjustments-horizontal-solid',
+        opened: true,
+      },
+      ...sections,
+    ];
+  }
+
+  return sections;
+});
+
+function openSection(index: number) {
+  if (sectionsInternal.value[index]) {
+    sectionModalActive.value = index;
+  } else {
+    sectionModalActive.value = null;
+  }
+}
+
+function closeSection() {
+  sectionModalActive.value = null;
+}
+
+/*
+|--------------------------------------------------------------------------
+| Provide
+|--------------------------------------------------------------------------
+*/
+
+provide('dataIterator:width', width);
+
 /*
 |--------------------------------------------------------------------------
 | Exposed API

package/src/components/BaseDataIteratorSectionBox.vue

@@ -0,0 +1,33 @@
+<template>
+  <BaseCard>
+    <button
+      type="button"
+      class="flex w-full items-center justify-between px-4 py-3"
+      @click="active = !active"
+    >
+      <h2 class="text-sm font-semibold">
+        {{ section.title }}
+      </h2>
+
+      <BaseIcon
+        class="h-5 w-5 text-slate-500 duration-300"
+        :class="active ? 'rotate-90 transform' : ''"
+        icon="heroicons:chevron-right-20-solid"
+      ></BaseIcon>
+    </button>
+    <div v-show="active" class="border-t border-slate-300 py-5 px-4">
+      <slot />
+    </div>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup>
+import { DataIteratorSection } from '@/types';
+import { BaseCard, BaseIcon } from '.';
+
+const props = defineProps<{
+  section: DataIteratorSection;
+}>();
+
+const active = ref<boolean>(props.section.opened ?? false);
+</script>

package/src/components/BaseDataIteratorSectionButton.vue

@@ -0,0 +1,34 @@
+<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']"
+    type="button"
+    @click="open()"
+  >
+    <BaseIcon class="h-5 w-5 text-slate-500" :icon="section.icon" />
+    <span
+      v-if="section.title && width > 600"
+      class="ml-2 whitespace-pre text-sm"
+      >{{ section.title }}</span
+    >
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { DataIteratorSection } from '@/types';
+import { BaseIcon } from '.';
+
+defineProps<{
+  section: DataIteratorSection;
+}>();
+
+const emit = defineEmits<{
+  (event: 'open'): void;
+}>();
+
+const width = inject('dataIterator:width', ref(0));
+
+function open() {
+  emit('open');
+}
+</script>

package/src/components/{BaseDataTableToggleColumns.vue → BaseDataIteratorSectionColumns.vue}

@@ -1,15 +1,15 @@
 <template>
   <ul>
     <li v-for="col in toggleableColumns" :key="col.newKey">
-      <label>
+      <label class="cursor-pointer">
         <input
           :checked="visibleColumns.includes(col.newKey)"
           type="checkbox"
-          class="mr-1.5 h-3.5 w-3.5 rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
+          class="mr-2 h-3.5 w-3.5 cursor-pointer rounded focus:ring-1 focus:ring-primary-300 focus:ring-offset-1"
           :value="col.newKey"
           @change="onVisibleColumnChange($event, col.newKey)"
         />
-        <span class="text-xs text-slate-600">
+        <span class="text-xs text-slate-700">
           {{ col.label }}
         </span>
       </label>

package/src/components/BaseDataIteratorSectionModal.vue

@@ -0,0 +1,41 @@
+<template>
+  <BaseModalSide
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div>
+      <div class="border-b border-slate-300 p-4">
+        <h2 class="text-base font-semibold">
+          {{ section.title }}
+        </h2>
+      </div>
+
+      <div class="py-5 px-4">
+        <slot />
+      </div>
+
+      <div class="border-t border-slate-300 p-4">
+        <button
+          class="btn btn-primary w-full sm:w-auto"
+          @click="emit('update:modelValue', false)"
+        >
+          {{ section.closeText }}
+        </button>
+      </div>
+    </div>
+  </BaseModalSide>
+</template>
+
+<script lang="ts" setup>
+import { DataIteratorSection } from '@/types';
+import BaseModalSide from './BaseModalSide.vue';
+
+defineProps<{
+  modelValue: boolean;
+  section: DataIteratorSection;
+}>();
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void;
+}>();
+</script>

package/src/components/BaseDataTable.stories.js

@@ -9,7 +9,14 @@ import BaseAppDialogs from './BaseAppDialogs.vue';
 export default {
   title: 'Data/BaseDataTable',
   component: BaseDataTable,
-  argTypes: {},
+  argTypes: {
+    layout: {
+      control: {
+        type: 'select',
+        options: ['default', 'compact'],
+      },
+    },
+  },
   args: {
     url: 'https://effettandem.com/api/content/articles',
     urlQuery: {
@@ -99,6 +106,12 @@ const template = `
     </div>
   </template>
 
+  <template #test>
+    <div>
+      Section Test
+    </div>
+  </template>
+
   <template #filters="{ query, updateQueryValue }">
     <div class="space-y-3">
       <div>
@@ -107,7 +120,7 @@ const template = `
         </p>
         <BaseSelect
           :model-value="query.type ?? null"
-          class="w-full rounded border-slate-300"
+          class="w-full rounded border-slate-300 text-base sm:text-sm"
           placeholder="-"
           @update:model-value="updateQueryValue('type', $event)"
         >
@@ -125,7 +138,7 @@ const template = `
         </p>
         <BaseSelect
           :model-value="query.access_level ?? null"
-          class="w-full rounded border-slate-300"
+          class="w-full rounded border-slate-300 text-base sm:text-sm"
           placeholder="-"
           @update:model-value="updateQueryValue('access_level', $event)"
         >
@@ -170,7 +183,19 @@ const Template = (args) => ({
 export const Demo = Template.bind({});
 
 Demo.args = {
+  showUrl() {
+    return '/';
+  },
+  editUrl() {
+    return '/';
+  },
+  deleteUrl() {
+    return '/';
+  },
+  detailed: true,
   searchable: true,
+  maxHeight: 300,
+  checkable: true,
   actions: [
     {
       label: 'Open Google',
@@ -190,7 +215,6 @@ Demo.args = {
       color: 'danger',
     },
   ],
-  checkable: true,
   checkableActions: [
     {
       label: 'Delete all',
@@ -199,16 +223,23 @@ Demo.args = {
       },
     },
   ],
-  detailed: true,
-  showUrl() {
-    return '/';
-  },
-  editUrl() {
-    return '/';
-  },
-  deleteUrl() {
-    return '/';
-  },
+  rowActions: [
+    {
+      label: 'Open Google',
+      icon: 'heroicons:link',
+      action() {
+        alert('hit');
+      },
+    },
+  ],
+  sections: [
+    {
+      name: 'test',
+      title: 'Section Test',
+      icon: 'heroicons:link',
+      closeText: 'Close',
+    },
+  ],
 };
 
 const SimpleTemplate = (args) => ({