sprintify-ui 0.0.177 → 0.0.179

package/src/components/BaseDataTable.vue

@@ -50,8 +50,9 @@
               :toggle="false"
               :clickable="false"
               custom-key="actions"
+              class="overflow-hidden"
             >
-              <div class="flex justify-end text-right">
+              <div class="flex justify-end gap-1 text-right">
                 <slot name="rowActions" :row="row" />
 
                 <router-link
@@ -59,7 +60,9 @@
                   :to="editUrl(row)"
                   :disabled="!canUpdate(row)"
                 >
-                  <button class="btn btn-white bg-transparent p-2">
+                  <button
+                    class="btn btn-white border border-slate-300 p-2 shadow-sm"
+                  >
                     <BaseIcon
                       icon="heroicons:cog-6-tooth-solid"
                       class="text-slate-500"
@@ -70,7 +73,7 @@
                 <button
                   v-if="deleteButton && deleteUrl"
                   type="button"
-                  class="btn btn-white bg-transparent p-2"
+                  class="btn btn-white border border-slate-300 p-2 shadow-sm"
                   :disabled="!canDelete(row)"
                   @click="onDeleteClick(row)"
                 >
@@ -190,6 +193,7 @@ import BaseEmptyState from '../svg/BaseEmptyState.vue';
 import { RouteLocationRaw } from 'vue-router';
 
 const i18n = useI18n();
+const router = useRouter();
 
 const http = config.http;
 
@@ -224,6 +228,16 @@ const props = defineProps({
     type: Object as PropType<DataTableQuery>,
   },
 
+  /**
+   * Show url for router link
+   */
+  showUrl: {
+    default: undefined,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
+  },
+
   /**
    * Show/Hide edit button
    */
@@ -237,7 +251,9 @@ const props = defineProps({
    */
   editUrl: {
     default: undefined,
-    type: Function as PropType<(row: CollectionItem) => RouteLocationRaw>,
+    type: Function as PropType<
+      ((row: CollectionItem) => RouteLocationRaw) | undefined
+    >,
   },
 
   /**
@@ -253,7 +269,7 @@ const props = defineProps({
    */
   deleteUrl: {
     default: undefined,
-    type: Function as PropType<(row: CollectionItem) => string>,
+    type: Function as PropType<((row: CollectionItem) => string) | undefined>,
   },
 
   /**
@@ -368,6 +384,9 @@ const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
 */
 
 function onCellClick(payload: CollectionItem) {
+  if (props.showUrl) {
+    router.push(props.showUrl(payload));
+  }
   emit('cell-click', payload);
 }
 

package/src/components/BaseFieldI18n.stories.js

@@ -9,7 +9,7 @@ export default {
     (story) => ({
       components: { story, BaseForm },
       template: `
-      <BaseForm method="post" url="https://api.com/todos/422" :data="{}">
+      <BaseForm method="post" url="https://faker.witify.io/api/todos/422" :data="{}">
         <story/>
         <button type="submit" class="btn btn-primary mt-5">Submit</button>
       </BaseForm>`,

package/src/components/BaseMediaLibrary.stories.js

@@ -17,7 +17,7 @@ export default {
     max: null,
     min: 2,
     acceptedExtensions: ['jpg', 'png'],
-    uploadUrl: 'https://api.com/upload',
+    uploadUrl: 'https://faker.witify.io/upload',
     maxSize: 500 * 1024,
     currentMedia: [
       mediaModel,

package/src/components/BaseTable.vue

@@ -1,11 +1,15 @@
 <template>
-  <div class="relative w-full overflow-hidden">
+  <div
+    class="relative w-full overflow-hidden"
+    :class="maxHeight ? 'base-table--has-max-height' : ''"
+  >
     <div ref="slot" style="display: none">
       <slot />
     </div>
 
     <div class="flex flex-col">
       <div
+        ref="scrollable"
         class="overflow-x-auto overflow-y-auto"
         data-scroll-lock-scrollable
         :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
@@ -15,11 +19,17 @@
             <table class="min-w-full border-separate border-spacing-0">
               <thead v-if="newColumns.length" ref="thead">
                 <tr>
-                  <th v-if="showDetailRowIcon" class="th" />
+                  <th
+                    v-if="showDetailRowIcon"
+                    class="th"
+                    :style="detailsStyles"
+                  />
                   <th
                     v-if="checkable && checkboxPosition === 'left'"
-                    class="th py-0 pl-3"
+                    class="th group cursor-pointer py-0 pl-3"
                     align="left"
+                    :style="checkStyles"
+                    @click="checkAll"
                   >
                     <div class="flex items-center">
                       <input
@@ -28,7 +38,6 @@
                         :checked="isAllChecked"
                         :disabled="isAllUncheckable"
                         :class="checkboxStyle"
-                        @change="checkAll"
                       />
                     </div>
                   </th>
@@ -36,8 +45,11 @@
                     v-for="(column, index) in visibleColumns"
                     :key="column.newKey + ':' + index + 'header'"
                     v-bind="column.thAttrs && column.thAttrs(column)"
-                    :style="column.style"
-                    class="th py-2 pl-3 pr-3 text-left"
+                    :style="[
+                      column.style,
+                      index == 0 ? firstColStyles : { position: 'relative' },
+                    ]"
+                    class="th group py-2 pl-3 pr-3 text-left"
                     @click.stop="sort(column, undefined, $event as any)"
                   >
                     <button
@@ -49,26 +61,45 @@
                           column.sortable && currentSortColumn === column,
                       }"
                     >
-                      <span class="mr-1 whitespace-nowrap">{{
-                        column.label
-                      }}</span>
-                      <span
-                        v-show="column.sortable && currentSortColumn === column"
-                      >
-                        <BaseIcon
-                          icon="mdi:chevron-down"
-                          class="h-5 w-5 duration-300"
-                          :class="{
-                            'rotate-180': isAsc,
-                          }"
-                        />
+                      <span class="whitespace-nowrap text-xs text-slate-500">
+                        {{ column.label }}
                       </span>
+                      <div
+                        v-if="column.sortable"
+                        class="w-3"
+                        :class="[
+                          currentSortColumn === column
+                            ? ''
+                            : 'opacity-0 duration-200 group-hover:opacity-100',
+                        ]"
+                      >
+                        <svg
+                          viewBox="0 0 24 24"
+                          class="absolute top-1/2 h-5 w-5 -translate-y-1/2"
+                        >
+                          <g transform="translate(0 -3)">
+                            <path
+                              :opacity="!isAsc ? '0.5' : '1'"
+                              fill="currentColor"
+                              d="M8.71 12.29L11.3 9.7a.996.996 0 0 1 1.41 0l2.59 2.59c.63.63.18 1.71-.71 1.71H9.41c-.89 0-1.33-1.08-.7-1.71z"
+                            ></path>
+                          </g>
+                          <g transform="translate(0 3)">
+                            <path
+                              :opacity="isAsc ? '0.5' : '1'"
+                              fill="currentColor"
+                              d="m8.71 11.71l2.59 2.59c.39.39 1.02.39 1.41 0l2.59-2.59c.63-.63.18-1.71-.71-1.71H9.41c-.89 0-1.33 1.08-.7 1.71z"
+                            ></path>
+                          </g>
+                        </svg>
+                      </div>
                     </button>
                   </th>
                   <th
                     v-if="checkable && checkboxPosition === 'right'"
-                    class="th pr-3"
+                    class="th group cursor-pointer pr-3"
                     align="right"
+                    @click="checkAll"
                   >
                     <input
                       autocomplete="off"
@@ -76,7 +107,6 @@
                       :checked="isAllChecked"
                       :disabled="isAllUncheckable"
                       :class="checkboxStyle"
-                      @change="checkAll"
                     />
                   </th>
                 </tr>
@@ -144,33 +174,35 @@
                   v-for="(row, index) in data"
                   :key="getRowIndex(row, index)"
                 >
-                  <tr>
+                  <tr class="item-row">
                     <td
                       v-if="showDetailRowIcon"
-                      class="pl-3"
+                      class="group cursor-pointer bg-white pl-3"
                       :class="borderBottomClasses(index, row)"
-                      style="width: 36px"
+                      :style="detailsStyles"
+                      @click.stop="toggleDetails(row)"
                     >
                       <button
                         type="button"
-                        class="mr-0 flex h-8 w-8 appearance-none items-center justify-center rounded-full border-0 bg-white text-slate-400 duration-300 hover:bg-slate-100 hover:text-slate-700"
-                        :class="{
-                          'rotate-180': isVisibleDetailRow(row),
-                        }"
-                        @click.stop="toggleDetails(row)"
+                        class="mr-0 flex h-5 w-5 appearance-none items-center justify-center rounded-full border border-slate-300 bg-white text-slate-400 shadow duration-100 group-hover:text-slate-600 group-hover:shadow-md"
                       >
                         <BaseIcon
                           v-if="hasDetailedVisible(row)"
                           icon="mdi:chevron-down"
-                          class="h-5 w-5"
+                          class="h-5 w-5 duration-300"
+                          :class="{
+                            'rotate-180': isVisibleDetailRow(row),
+                          }"
                         />
                       </button>
                     </td>
 
                     <td
                       v-if="checkable && checkboxPosition === 'left'"
-                      class="pl-3"
+                      class="group z-[1] cursor-pointer bg-white pl-3"
+                      :style="checkStyles"
                       :class="borderBottomClasses(index, row)"
+                      @click="checkRow(row, index, $event as MouseEvent)"
                     >
                       <div class="flex items-center">
                         <input
@@ -179,7 +211,6 @@
                           :disabled="!isRowCheckable(row)"
                           :checked="isRowChecked(row)"
                           :class="checkboxStyle"
-                          @click="checkRow(row, index, $event as MouseEvent)"
                         />
                       </div>
                     </td>
@@ -192,8 +223,15 @@
                       scoped
                       name="default"
                       tag="td"
-                      class="py-3 pl-3 pr-3 text-sm"
-                      :class="borderBottomClasses(index, row)"
+                      class="bg-white py-3 pl-3 pr-3 text-sm"
+                      :style="[
+                        column.style,
+                        colindex === 0 ? firstColStyles : {},
+                      ]"
+                      :class="[
+                        borderBottomClasses(index, row),
+                        column.clickable ? 'cursor-pointer' : '',
+                      ]"
                       :data-label="column.label"
                       :props="{ row, column, index, colindex, toggleDetails }"
                       @click="
@@ -203,9 +241,10 @@
 
                     <td
                       v-if="checkable && checkboxPosition === 'right'"
-                      class="pr-3"
+                      class="group cursor-pointer pr-3"
                       :class="borderBottomClasses(index, row)"
                       align="right"
+                      @click="checkRow(row, index, $event as MouseEvent)"
                     >
                       <input
                         type="checkbox"
@@ -213,7 +252,6 @@
                         :disabled="!isRowCheckable(row)"
                         :checked="isRowChecked(row)"
                         :class="checkboxStyle"
-                        @click="checkRow(row, index, $event as MouseEvent)"
                       />
                     </td>
                   </tr>
@@ -253,7 +291,7 @@
               >
                 <div
                   v-if="loading"
-                  class="absolute inset-0 flex h-full w-full items-start justify-center"
+                  class="absolute inset-0 z-[1] flex h-full w-full items-start justify-center"
                 >
                   <div class="absolute h-full w-full bg-white bg-opacity-60" />
 
@@ -281,13 +319,15 @@ export default {
 import { PropType, ref } from 'vue';
 import { BaseTableColumn, MenuItemInterface, Row } from '@/types';
 import SlotComponent from './SlotComponent';
-import { useResizeObserver } from '@vueuse/core';
+import { useResizeObserver, useScroll } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
 import BaseMenu from './BaseMenu.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const checkboxStyle =
-  'disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-not-allowed border-slate-400 rounded';
+  'disabled:bg-slate-100 group-hover:shadow-md  disabled:border-slate-300 disabled:cursor-not-allowed duration-300 cursor-pointer focus:ring-blue-300 border border-slate-300 shadow h-[18px] w-[18px] rounded';
+const DETAIL_ROW_WIDTH = 36;
+const CHECK_ROW_WIDTH = 36;
 
 provide('table', getCurrentInstance());
 
@@ -749,7 +789,7 @@ function removeColumn(column: BaseTableColumn) {
   );
 }
 
-const borderClasses = 'border-b border-slate-300';
+const borderClasses = 'border-b border-slate-200';
 
 function borderBottomClasses(index: number, row: Record<string, any>): string {
   if (index < props.data.length - 1) {
@@ -800,6 +840,60 @@ function getRowIndex(row: Row, index: number): string {
   return index + '';
 }
 
+// Sticky styles
+
+const horizontalScrolling = ref(false);
+const scrollable = ref<null | HTMLElement>(null);
+
+const { x } = useScroll(scrollable);
+watch(x, (value) => {
+  horizontalScrolling.value = value > 0;
+});
+
+const detailsStyles = computed<any>(() => {
+  if (props.detailed) {
+    return {
+      zIndex: 1,
+      position: 'sticky',
+      left: 0,
+      width: DETAIL_ROW_WIDTH + 'px',
+      minWidth: DETAIL_ROW_WIDTH + 'px',
+      maxWidth: DETAIL_ROW_WIDTH + 'px',
+    };
+  }
+  return {};
+});
+
+const checkStyles = computed<any>(() => {
+  if (props.checkable) {
+    return {
+      zIndex: 1,
+      position: 'sticky',
+      left: props.detailed ? DETAIL_ROW_WIDTH + 'px' : 0,
+      width: CHECK_ROW_WIDTH + 'px',
+      minWidth: CHECK_ROW_WIDTH + 'px',
+      maxWidth: CHECK_ROW_WIDTH + 'px',
+    };
+  }
+  return {};
+});
+
+const firstColStyles = computed<any>(() => {
+  let left = 0;
+  if (props.checkable) {
+    left += CHECK_ROW_WIDTH;
+  }
+  if (props.detailed) {
+    left += DETAIL_ROW_WIDTH;
+  }
+  return {
+    zIndex: 1,
+    position: 'sticky',
+    left: left + 'px',
+    borderRight: horizontalScrolling.value ? '1px solid #e2e8f0' : 'none',
+  };
+});
+
 provide('addColumn', addColumn);
 provide('removeColumn', removeColumn);
 provide('nextSequence', nextSequence);
@@ -809,13 +903,20 @@ defineExpose({
 });
 </script>
 
-<style scoped>
+<style lang="postcss" scoped>
 .th {
   @apply bg-slate-50;
+  @apply border-b border-slate-300;
+}
+
+.base-table--has-max-height .th {
   @apply sticky;
   @apply top-0;
   @apply z-[1];
-  @apply border-b border-slate-300;
   @apply bg-opacity-75 backdrop-blur backdrop-filter;
 }
+
+tbody tr.item-row:hover td {
+  @apply bg-slate-50;
+}
 </style>

package/src/components/BaseTableColumn.vue

@@ -24,6 +24,10 @@ export default defineComponent({
       default: undefined,
       type: Number,
     },
+    padding: {
+      default: undefined,
+      type: String,
+    },
     numeric: {
       default: false,
       type: Boolean,
@@ -95,6 +99,7 @@ export default defineComponent({
     style() {
       return {
         width: this.width ? this.width + 'px' : undefined,
+        padding: this.padding ? this.padding : '0.5rem 0.75rem',
       };
     },
   },