sprintify-ui 0.7.11 → 0.8.1

package/dist/types/components/BaseTableRow.vue.d.ts

@@ -6,12 +6,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     title?: string | undefined;
     class?: ClassNameValue;
+    onClick?: ((e: MouseEvent) => void) | undefined;
 }>, {
     href: undefined;
     to: undefined;
     target: undefined;
     title: undefined;
     class: undefined;
+    onClick: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     mouseenter: (...args: any[]) => void;
@@ -22,18 +24,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
     title?: string | undefined;
     class?: ClassNameValue;
+    onClick?: ((e: MouseEvent) => void) | undefined;
 }>, {
     href: undefined;
     to: undefined;
     target: undefined;
     title: undefined;
     class: undefined;
+    onClick: undefined;
 }>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onMouseenter?: ((...args: any[]) => any) | undefined;
     onMouseleave?: ((...args: any[]) => any) | undefined;
 }, {
     class: string | false | 0 | ClassNameValue[] | null;
+    onClick: (e: MouseEvent) => void;
     title: string;
     to: RouteLocationRaw;
     href: string;

package/dist/types/composables/isFirstColumn.d.ts

@@ -0,0 +1,4 @@
+import { MaybeRef } from "vue";
+export declare function useIsFirstColumn(tdOrTh: MaybeRef<HTMLTableCellElement | null>): {
+    isFirstColumn: import("vue").ComputedRef<boolean>;
+};

package/dist/types/composables/isLastColumn.d.ts

@@ -0,0 +1,4 @@
+import { MaybeRef } from "vue";
+export declare function useIsLastColumn(tdOrTh: MaybeRef<HTMLTableCellElement | null>): {
+    isLastColumn: import("vue").ComputedRef<boolean>;
+};

package/dist/types/composables/paginatedData.d.ts

@@ -1,7 +1,7 @@
-import { Ref } from 'vue';
+import { ComputedRef, Ref } from 'vue';
 import { Collection, PaginatedCollection, ResourceCollection, PaginationMetadata } from '@/types';
-export declare function useHasPaginatedData(data: Ref<Collection | PaginatedCollection | ResourceCollection | null>): {
-    items: import("vue").ComputedRef<Collection>;
-    paginationMetadata: import("vue").ComputedRef<PaginationMetadata | null>;
-    lastPage: import("vue").ComputedRef<number>;
+export declare function useHasPaginatedData(data: Ref<Collection | PaginatedCollection | ResourceCollection | null | undefined>, page?: ComputedRef<number>, perPage?: ComputedRef<number>): {
+    items: ComputedRef<Collection>;
+    paginationMetadata: ComputedRef<PaginationMetadata | null>;
+    lastPage: ComputedRef<number>;
 };

package/dist/types/services/table/types.d.ts

@@ -1,15 +1,16 @@
 import { RouteLocationRaw } from "vue-router";
-export type CellSpacing = 'none' | 'sm' | 'md' | 'lg';
+export type CellSize = 'none' | 'xs' | 'sm' | 'md' | 'lg';
 export interface TableProps {
-    spacing?: CellSpacing;
+    size?: CellSize;
     flush?: boolean;
+    fixedHeader?: boolean;
+    fixedColumn?: boolean;
 }
-export type CellConfig = {
-    flush?: boolean;
-} & TableProps;
+export type CellConfig = TableProps;
 export interface CellProps {
     title?: string;
     href?: string;
     to?: RouteLocationRaw;
     target?: string;
+    onClick?: (e: MouseEvent) => void;
 }

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

@@ -76,15 +76,20 @@ export interface BaseTableColumnData {
     label: string;
     field: string;
     meta: undefined | Record<string, any>;
-    newKey: number;
+    newKey: string;
     numeric: boolean;
     position: 'left' | 'right';
     searchable: boolean;
     sortable: boolean;
-    clickable: boolean;
+    ignoreRowInteractions: boolean;
     toggle: boolean;
     toggleDefault: boolean;
     width: number;
+    class?: string | string[];
+    to?: (row: Row) => RouteLocationRaw;
+    href?: (row: Row) => string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    onClick?: (row: Row, index: number, column: BaseTableColumnData, colIndex: number, event: MouseEvent) => void;
     style: {
         width: undefined | number;
     };

package/dist/types/utils/getApiData.d.ts

@@ -1,2 +1,2 @@
 import { Collection, PaginatedCollection, ResourceCollection } from "@/types";
-export declare function getItems(data: Collection | PaginatedCollection | ResourceCollection | null): Collection;
+export declare function getItems(data: Collection | PaginatedCollection | ResourceCollection | null | undefined): Collection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.7.11",
+  "version": "0.8.1",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -56,6 +56,7 @@
     "@commitlint/config-conventional": "^17.8.1",
     "@iconify/vue": "^4.1.1",
     "@storybook/addon-actions": "^7.2.1",
+    "@storybook/addon-controls": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",

package/src/assets/main.css

@@ -3,7 +3,6 @@
 @import "./base-date-picker.css";
 @import "./base-time-picker.css";
 @import "./base-rich-text.css";
-@import "./base-table.css";
 @import "./base-tabs.css";
 @import "./base-spinner.css";
 

package/src/components/BaseAvatar.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseTooltip
+    v-if="user"
     :visible="tooltip"
     :text="tooltipText"
     :class="classInternal"

package/src/components/BaseDataIterator.stories.js

@@ -3,7 +3,8 @@ import BaseSelect from './BaseSelect.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
-import { sizes } from '../../.storybook/utils';
+import { options, sizes } from '../../.storybook/utils';
+import { computed } from 'vue';
 
 export default {
   title: 'Data/BaseDataIterator',
@@ -205,3 +206,97 @@ Simple.args = {
   searchable: false,
   actions: [],
 };
+
+const LocalDataTemplate = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+    BaseSelect,
+  },
+  setup() {
+
+    const baseDataIteratorRef = ref(null);
+
+    const filteredItems = computed(() => {
+      return options
+        .filter((item) => {
+
+          const type = baseDataIteratorRef.value?.query?.filter?.type ?? null;
+
+          if (type) {
+            return item.type === type;
+          }
+
+          return true;
+        });
+    });
+
+    return { args, filteredItems, baseDataIteratorRef };
+  },
+  template: `
+  <BaseDataIterator ref="baseDataIteratorRef" v-bind="args" :items="filteredItems">
+    <template #default="{ items, loading }">
+
+      <div class="relative">
+        <div class="space-y-1.5">
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="block group"
+          >
+            <BaseCard class="group-hover:bg-slate-100">
+              <BaseCardRow size="xs">
+                <div class="font-medium text-slate-900">
+                  {{ item.label }}
+                </div>
+                <p class="text-xs leading-tight text-slate-500">
+                  {{ item.type }}
+                </p>
+              </BaseCardRow>
+            </BaseCard>
+          </div>
+        </div>
+  
+        <BaseLoadingCover
+          v-show="loading"
+          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.filter.type ?? null"
+            class="w-full rounded border-slate-300"
+            placeholder="-"
+            @update:model-value="updateQueryValue('filter.type', $event)"
+          >
+            <option value="jedi">
+              Jedi
+            </option>
+            <option value="sith">
+              Sith
+            </option>
+          </BaseSelect>
+        </div>
+      </div>
+    </template>
+  </BaseDataIterator>
+  `,
+});
+
+export const Local = LocalDataTemplate.bind({});
+Local.args = {
+  url: null,
+  actions: [],
+  perPage: 4,
+};

package/src/components/BaseDataIterator.vue

@@ -84,10 +84,8 @@
             />
           </BaseDataIteratorSectionBox>
         </div>
-
-
         <slot
-          :items="items"
+          :items="itemsInternal"
           :loading="loading"
           :error="error"
           :first-load="firstLoad"
@@ -197,7 +195,7 @@ const DEFAULT_QUERY = {
 </script>
 
 <script lang="ts" setup>
-import { cloneDeep, debounce, merge, set } from 'lodash';
+import { cloneDeep, debounce, merge, set, sortBy } from 'lodash';
 import hash from 'object-hash';
 import { PropType } from 'vue';
 import {
@@ -220,12 +218,21 @@ import BaseDataIteratorSectionModal from './BaseDataIteratorSectionModal.vue';
 import BaseDataIteratorSectionBox from './BaseDataIteratorSectionBox.vue';
 
 const props = defineProps({
+
+  /**
+   * Data to display
+   */
+  items: {
+    default: undefined,
+    type: Array as PropType<Collection | undefined>,
+  },
+
   /**
    * Base URL from which to make requests
    */
   url: {
-    required: true,
-    type: String,
+    default: undefined,
+    type: String as PropType<string | undefined>,
   },
 
   /**
@@ -311,9 +318,28 @@ const props = defineProps({
   filtersPosition: {
     default: 'section',
     type: String as PropType<'section' | 'top'>,
+  },
+
+  /**
+   * Per page (only when using local data)
+   */
+  perPage: {
+    default: 16,
+    type: Number,
+  },
+
+  /**
+   * Function to search local data
+   */
+  search: {
+    default: undefined,
+    type: Function as PropType<(items: Collection, search: string | null) => Collection>,
   }
 });
 
+const LOCAL = 'local';
+const REMOTE = 'remote';
+
 const http = config.http;
 
 const emit = defineEmits([
@@ -327,6 +353,14 @@ const emit = defineEmits([
   'fetch',
 ]);
 
+const dataMode = computed(() => {
+  if (props.url) {
+    return REMOTE;
+  }
+
+  return LOCAL;
+});
+
 const dataIteratorNode = ref<null | HTMLElement>(null);
 const searchInputFocus = ref(false);
 
@@ -350,7 +384,7 @@ useResizeObserver(dataIteratorNode, () => {
 /** Data table state */
 
 const firstLoad = ref(false);
-const loading = ref(true);
+const loading = ref(false);
 const error = ref(false);
 const searchQuery = ref('');
 
@@ -476,7 +510,7 @@ function queryHash(query: DataTableQuery): string {
 |--------------------------------------------------------------------------
 */
 
-const url = computed<string>(() => {
+const url = computed<string | undefined>(() => {
   return props.url;
 });
 
@@ -518,7 +552,7 @@ const onSearch = debounce((event: any) => {
   newQuery.search = searchQuery.value;
 
   updateQuery(newQuery);
-}, 350);
+}, dataMode.value == REMOTE ? 350 : 0);
 
 /*
 |--------------------------------------------------------------------------
@@ -608,6 +642,11 @@ function fetch(force = false, showLoading = true) {
     return;
   }
 
+  if (url.value == null) {
+    firstLoad.value = true;
+    return;
+  }
+
   const urlSplit = url.value.split(/[?#]/);
 
   const baseUrl = urlSplit[0];
@@ -664,15 +703,100 @@ const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
   null
 );
 
-const { items, paginationMetadata, lastPage } = useHasPaginatedData(data);
-
 const page = computed((): number => {
   if (query.value.page && parseInt(query.value.page + '')) {
     return parseInt(query.value.page + '');
   }
+
   return 1;
 });
 
+const dataInternal = computed<ResourceCollection | PaginatedCollection | Collection | null | undefined>(() => {
+  if (dataMode.value == REMOTE) {
+    return data.value;
+  }
+
+  return searchItems(props.items);
+});
+
+const { items, paginationMetadata, lastPage } = useHasPaginatedData(
+  dataInternal,
+  page,
+  computed(() => props.perPage),
+);
+
+const itemsInternal = computed(() => {
+  if (dataMode.value == REMOTE) {
+    return items.value;
+  }
+
+  return paginateItems(sortItems(items.value));
+});
+
+/*
+|--------------------------------------------------------------------------
+| Local data filtering, sorting and pagination
+|--------------------------------------------------------------------------
+*/
+
+function searchItems(items: Collection | undefined) {
+
+  if (!items) {
+    return [];
+  }
+
+  const searchWords = searchKeywords.value.toLowerCase();
+
+  if (props.search) {
+    return props.search(items, searchKeywords.value);
+  }
+
+  return items?.filter((item) => {
+    return Object.values(item).some((value) => {
+      if (typeof value == 'string') {
+        return value.toLowerCase().includes(searchWords);
+      }
+      return false;
+    });
+  });
+}
+
+function sortItems(items: Collection | undefined) {
+  if (!items) {
+    return [];
+  }
+
+  if (!sortField.value) {
+    return items;
+  }
+
+  if (!sortDirection.value) {
+    return items;
+  }
+
+  if (sortDirection.value == 'asc') {
+    return sortBy(items, (item) => {
+      return item[sortField.value];
+    });
+  }
+
+  return sortBy(items, (item) => {
+    return item[sortField.value];
+  })
+    .reverse();
+}
+
+function paginateItems(items: Collection | undefined) {
+  if (!items) {
+    return [];
+  }
+
+  return items.slice(
+    (page.value - 1) * props.perPage,
+    page.value * props.perPage
+  );
+}
+
 const sortField = computed((): string => {
   return query.value.sort?.trim().replace(/^(-)/, '') ?? '';
 });

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -32,7 +32,7 @@ const props = defineProps({
   },
   visibleColumns: {
     required: true,
-    type: Array as PropType<number[]>,
+    type: Array as PropType<string[]>,
   },
 });
 
@@ -52,7 +52,7 @@ const toggleableColumns = computed(() => {
   return tableVue.newColumns.filter((c) => c.toggle);
 });
 
-function onVisibleColumnChange(event: any, newKey: number) {
+function onVisibleColumnChange(event: any, newKey: string) {
   const checked = event.target.checked as boolean;
 
   let newVisibleColumns = cloneDeep(props.visibleColumns);