sprintify-ui 0.6.52 → 0.6.55

package/src/components/BaseTableBody.vue

@@ -0,0 +1,15 @@
+<template>
+  <tbody>
+    <slot />  
+  </tbody> 
+</template>
+
+<script lang="ts" setup>
+
+const baseTable = inject('BaseTable');
+
+if (!baseTable) {
+  throw new Error('BaseTableBody must be used within a BaseTable.');
+}
+
+</script>

package/src/components/BaseTableCell.vue

@@ -0,0 +1,87 @@
+<template>
+  <td class="p-0 border-b border-slate-200">
+    <component
+      :is="componentName"
+      :class="classes"
+      :to="propsInternal.to"
+      :href="propsInternal.href"
+      :title="propsInternal.title"
+      :target="propsInternal.target"
+    >
+      <slot />
+    </component>
+  </td> 
+</template>
+
+<script lang="ts" setup>
+import { RouteLocationRaw } from 'vue-router';
+import { TableProps, CellConfig, CellProps } from '../services/table/types'
+import { cellClasses } from '../services/table/classes'
+import { ClassNameValue, twMerge } from 'tailwind-merge';
+import { cloneDeep, merge } from 'lodash';
+import { ComputedRef } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const baseTable = inject('BaseTable') as ComputedRef<TableProps> | undefined;
+const baseTableHead = inject('BaseTableHead', undefined);
+const baseTableRow = inject('BaseTableRow', undefined) as ComputedRef<CellProps> | undefined;
+
+if (!baseTableRow) {
+  throw new Error('BaseTableCell must be used within a BaseTableRow.');
+}
+
+const isHead = computed(() => baseTableHead !== undefined);
+
+const props = withDefaults(defineProps<{
+  href?: string,
+  to?: RouteLocationRaw,
+  target?: '_blank' | '_self' | '_parent' | '_top',
+  title?: string,
+  class?: ClassNameValue,
+}>(), {
+  href: undefined,
+  to: undefined,
+  target: undefined,
+  title: undefined,
+  class: undefined,
+});
+
+const cellConfig = computed<CellConfig>(() => {
+  return {
+    spacing: baseTable?.value?.spacing,
+    flush: baseTable?.value?.flush,
+    head: isHead.value,
+  }
+});
+
+const propsInternal = computed<CellProps>(() => {
+  return merge(cloneDeep(baseTableRow.value), props);
+});
+
+const componentName = computed(() => {
+  if (propsInternal.value.href) {
+    return 'a';
+  }
+
+  if (propsInternal.value.to) {
+    return 'router-link';
+  }
+
+  return 'div';
+});
+
+const classes = computed(() => {
+  const base = cellClasses(cellConfig.value);
+  const click = propsInternal.value.href || propsInternal.value.to ? 'cursor-pointer' : '';
+
+  return twMerge(
+    base,
+    click,
+    props.class,
+  );
+})
+
+</script>

package/src/components/BaseTableHead.vue

@@ -0,0 +1,23 @@
+<template>
+  <thead>
+    <slot />  
+  </thead> 
+</template>
+
+<script lang="ts" setup>
+
+const props = withDefaults(defineProps<{
+  sticky?: boolean,
+}>(), {
+  sticky: false,
+});
+
+const baseTable = inject('BaseTable');
+
+if (!baseTable) {
+  throw new Error('BaseTableHead must be used within a BaseTable.');
+}
+
+provide('BaseTableHead', computed(() => props));
+
+</script>

package/src/components/BaseTableHeader.vue

@@ -0,0 +1,56 @@
+<template>
+  <th class="p-0 border-b border-slate-200">
+    <div :class="classes">
+      <slot />  
+    </div>
+  </th> 
+</template>
+
+<script lang="ts" setup>
+import { cellClasses } from '@/services/table/classes';
+import { CellConfig, TableProps } from '@/services/table/types';
+import { ClassNameValue, twMerge } from 'tailwind-merge';
+import { ComputedRef } from 'vue';
+
+const baseTable = inject('BaseTable') as ComputedRef<TableProps> | undefined;
+const baseTableHead = inject('BaseTableHead', undefined);
+const baseTableRow = inject('BaseTableRow');
+
+if (!baseTableRow) {
+  throw new Error('BaseTableCell must be used within a BaseTableRow.');
+}
+
+if (!baseTableHead) {
+  throw new Error('BaseTableCell must be used within a BaseTableHead.');
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  class?: ClassNameValue,
+}>(), {
+  class: undefined,
+});
+
+const cellConfig = computed<CellConfig>(() => {
+  return {
+    spacing: baseTable?.value?.spacing,
+    flush: baseTable?.value?.flush,
+    head: true,
+  }
+});
+
+const classes = computed(() => {
+  const base = cellClasses(cellConfig.value);
+
+  return twMerge(
+    'text-slate-500 font-normal',
+    base,
+    props.class,
+  );
+})
+
+
+</script>

package/src/components/BaseTableRow.vue

@@ -0,0 +1,30 @@
+<template>
+  <tr>
+    <slot />  
+  </tr> 
+</template>
+
+<script lang="ts" setup>
+import { RouteLocationRaw } from 'vue-router';
+
+const baseTable = inject('BaseTable');
+
+if (!baseTable) {
+  throw new Error('baseTable must be used within a BaseTable.');
+}
+
+const props = withDefaults(defineProps<{
+  href?: string,
+  to?: RouteLocationRaw,
+  target?: '_blank' | '_self' | '_parent' | '_top',
+  title?: string,
+}>(), {
+  href: undefined,
+  to: undefined,
+  target: undefined,
+  title: undefined,
+});
+
+provide('BaseTableRow', computed(() => props));
+
+</script>

package/src/components/index.ts

@@ -79,11 +79,16 @@ import BaseStepper from './BaseStepper.vue';
 import BaseStepperItem from './BaseStepperItem.vue';
 import BaseSwitch from './BaseSwitch.vue';
 import BaseSystemAlert from './BaseSystemAlert.vue';
+import BaseTable from './BaseTable.vue';
+import BaseTableBody from './BaseTableBody.vue';
+import BaseTableCell from './BaseTableCell.vue';
+import BaseTableHead from './BaseTableHead.vue';
+import BaseTableHeader from './BaseTableHeader.vue';
+import BaseTableRow from './BaseTableRow.vue';
 import BaseTabs from './BaseTabs.vue';
 import BaseTabItem from './BaseTabItem.vue';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
-import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
 import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
@@ -179,11 +184,16 @@ export {
   BaseStepperItem,
   BaseSwitch,
   BaseSystemAlert,
+  BaseTable,
+  BaseTableBody,
+  BaseTableCell,
+  BaseTableHead,
+  BaseTableHeader,
+  BaseTableRow,
   BaseTabs,
   BaseTabItem,
   BaseTagAutocomplete,
   BaseTagAutocompleteFetch,
-  BaseTable,
   BaseTableColumn,
   BaseTextarea,
   BaseTextareaAutoresize,

package/src/services/table/classes.ts

@@ -0,0 +1,26 @@
+import { twMerge } from "tailwind-merge";
+import { CellConfig, CellSpacing } from "./types";
+
+export function cellClasses(config: CellConfig): string {
+    const base = 'text-left block';
+    const space = spacing(config.spacing ?? 'md');
+    const flush = config.flush ? 'px-0' : '';
+
+    return twMerge([base, space, flush]);
+}
+
+function spacing(spacing: CellSpacing): string {
+    if (spacing == 'sm') {
+        return 'px-1 py-0.5';
+    }
+
+    if (spacing == 'md') {
+        return 'px-2 py-2';
+    }
+
+    if (spacing == 'lg') {
+        return 'px-4 py-3';
+    }
+
+    return '';
+}

package/src/services/table/types.ts

@@ -0,0 +1,19 @@
+import { RouteLocationRaw } from "vue-router";
+
+export type CellSpacing = 'none' | 'sm' | 'md' | 'lg';
+
+export interface TableProps {
+    spacing?: CellSpacing;
+    flush?: boolean;
+}
+
+export type CellConfig = {
+    flush?: boolean;
+} & TableProps;
+
+export interface CellProps {
+    title?: string;
+    href?: string;
+    to?: RouteLocationRaw;
+    target?: string;
+}