sprintify-ui 0.6.82 → 0.6.84

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

@@ -19,7 +19,6 @@ declare const _default: import("vue").DefineComponent<{
                 data: import("@/types/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
-                rowKey: string;
                 detailTransition: string;
             }> & Omit<{
                 readonly size: "xs" | "sm" | "md";
@@ -33,7 +32,6 @@ declare const _default: import("vue").DefineComponent<{
                 readonly isRowCheckable: Function;
                 readonly data: import("@/types/index.js").Row[];
                 readonly checkboxPosition: "right" | "left";
-                readonly rowKey: string;
                 readonly detailTransition: string;
                 readonly maxHeight?: number | undefined;
                 readonly visibleColumns?: number[] | undefined;
@@ -90,10 +88,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                rowKey: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 detailTransition: {
                     type: StringConstructor;
                     default: string;
@@ -115,7 +109,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onDetails-open"?: ((...args: any[]) => any) | undefined;
                 "onDetails-close"?: ((...args: any[]) => any) | undefined;
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
-            }, "size" | "loading" | "sortField" | "sortDirection" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "checkboxPosition" | "rowKey" | "detailTransition">;
+            }, "size" | "loading" | "sortField" | "sortDirection" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "checkboxPosition" | "detailTransition">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -174,10 +168,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                rowKey: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 detailTransition: {
                     type: StringConstructor;
                     default: string;
@@ -245,7 +235,6 @@ declare const _default: import("vue").DefineComponent<{
                 data: import("@/types/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
-                rowKey: string;
                 detailTransition: string;
             }, {}, string, {}> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -312,10 +301,6 @@ declare const _default: import("vue").DefineComponent<{
                 type: FunctionConstructor;
                 default: () => boolean;
             };
-            rowKey: {
-                type: StringConstructor;
-                default: string;
-            };
             detailTransition: {
                 type: StringConstructor;
                 default: string;
@@ -398,7 +383,6 @@ declare const _default: import("vue").DefineComponent<{
                 data: import("@/types/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
-                rowKey: string;
                 detailTransition: string;
             }> & Omit<{
                 readonly size: "xs" | "sm" | "md";
@@ -412,7 +396,6 @@ declare const _default: import("vue").DefineComponent<{
                 readonly isRowCheckable: Function;
                 readonly data: import("@/types/index.js").Row[];
                 readonly checkboxPosition: "right" | "left";
-                readonly rowKey: string;
                 readonly detailTransition: string;
                 readonly maxHeight?: number | undefined;
                 readonly visibleColumns?: number[] | undefined;
@@ -469,10 +452,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                rowKey: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 detailTransition: {
                     type: StringConstructor;
                     default: string;
@@ -494,7 +473,7 @@ declare const _default: import("vue").DefineComponent<{
                 "onDetails-open"?: ((...args: any[]) => any) | undefined;
                 "onDetails-close"?: ((...args: any[]) => any) | undefined;
                 "onUpdate:openedDetailed"?: ((...args: any[]) => any) | undefined;
-            }, "size" | "loading" | "sortField" | "sortDirection" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "checkboxPosition" | "rowKey" | "detailTransition">;
+            }, "size" | "loading" | "sortField" | "sortDirection" | "detailed" | "hasDetailedVisible" | "checkable" | "checkedRows" | "isRowCheckable" | "maxHeight" | "data" | "visibleColumns" | "checkboxPosition" | "detailTransition">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -553,10 +532,6 @@ declare const _default: import("vue").DefineComponent<{
                     type: FunctionConstructor;
                     default: () => boolean;
                 };
-                rowKey: {
-                    type: StringConstructor;
-                    default: string;
-                };
                 detailTransition: {
                     type: StringConstructor;
                     default: string;
@@ -624,7 +599,6 @@ declare const _default: import("vue").DefineComponent<{
                 data: import("@/types/index.js").Row[];
                 visibleColumns: number[];
                 checkboxPosition: "right" | "left";
-                rowKey: string;
                 detailTransition: string;
             }, {}, string, {}> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -691,10 +665,6 @@ declare const _default: import("vue").DefineComponent<{
                 type: FunctionConstructor;
                 default: () => boolean;
             };
-            rowKey: {
-                type: StringConstructor;
-                default: string;
-            };
             detailTransition: {
                 type: StringConstructor;
                 default: string;

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

@@ -1,5 +1,10 @@
 import { PropType } from 'vue';
 import { BaseTableColumn, Row } from '@/types';
+/**
+ * Remove all rows in current page.
+ */
+declare function uncheckAll(): void;
+declare function scrollTop(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     /** Table data */
     data: {
@@ -61,11 +66,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => boolean;
     };
-    /** Use a unique key of your data Object when use detailed or opened detailed. (id recommended) */
-    rowKey: {
-        type: StringConstructor;
-        default: string;
-    };
     detailTransition: {
         type: StringConstructor;
         default: string;
@@ -99,8 +99,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         thAttrs: (column: BaseTableColumn) => Record<string, any>;
         tdAttrs: (row: Row, column: BaseTableColumn) => Record<string, any>;
     }[]>;
-    uncheckAll: () => void;
-    scrollTop: () => void;
+    uncheckAll: typeof uncheckAll;
+    scrollTop: typeof scrollTop;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sort: (...args: any[]) => void;
     check: (...args: any[]) => void;
@@ -171,11 +171,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: FunctionConstructor;
         default: () => boolean;
     };
-    /** Use a unique key of your data Object when use detailed or opened detailed. (id recommended) */
-    rowKey: {
-        type: StringConstructor;
-        default: string;
-    };
     detailTransition: {
         type: StringConstructor;
         default: string;
@@ -211,7 +206,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     data: Row[];
     visibleColumns: number[];
     checkboxPosition: "right" | "left";
-    rowKey: string;
     detailTransition: string;
 }, {}>, {
     default?(_: {}): any;

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

@@ -0,0 +1,43 @@
+import { Size } from '@/utils/sizes';
+import { JsonData } from '@/types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue: JsonData;
+    size?: "xs" | "sm" | "md" | undefined;
+    variant?: "list" | "collapse" | undefined;
+    class?: string | string[] | undefined;
+}>, {
+    size: string;
+    variant: string;
+    class: undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
+    modelValue: JsonData;
+    size?: "xs" | "sm" | "md" | undefined;
+    variant?: "list" | "collapse" | undefined;
+    class?: string | string[] | undefined;
+}>, {
+    size: string;
+    variant: string;
+    class: undefined;
+}>>>, {
+    class: string | string[];
+    size: Size;
+    variant: 'list' | 'collapse';
+}, {}>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -0,0 +1,25 @@
+import { JsonDataItem } from '@/types';
+import { Size } from '@/utils/sizes';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    modelValue: JsonDataItem;
+    label: string | number;
+    size: Size;
+    class?: string | string[] | undefined;
+    variant: 'list' | 'collapse';
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    modelValue: JsonDataItem;
+    label: string | number;
+    size: Size;
+    class?: string | string[] | undefined;
+    variant: 'list' | 'collapse';
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -220,3 +220,7 @@ export interface TimelineItem {
     onEdit?: () => void | Promise<void>;
     onDelete?: () => void | Promise<void>;
 }
+export type JsonDataItem = string | number | null | undefined | JsonData[] | JsonData;
+export interface JsonData {
+    [key: string]: JsonDataItem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.82",
+  "version": "0.6.84",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDataTableTemplate.vue

@@ -125,7 +125,7 @@
               <tbody class="bg-white">
                 <template
                   v-for="(row, index) in data"
-                  :key="getRowIndex(row, index)"
+                  :key="getRowKey(row)"
                 >
                   <tr class="item-row">
                     <td
@@ -220,7 +220,7 @@
                   <transition :name="detailTransition">
                     <tr
                       v-if="isActiveDetailRow(row)"
-                      :key="getRowIndex(row, index) + 'detail'"
+                      :key="getRowKey(row) + 'detail'"
                     >
                       <td
                         :colspan="columnCount"
@@ -272,27 +272,26 @@
   </div>
 </template>
 
-<script lang="ts">
-export default {
-  name: 'BaseDataTableTemplate',
-  inheritAttrs: false,
-};
-</script>
-
 <script lang="ts" setup>
-import { PropType, ref } from 'vue';
+import { PropType, StyleValue, ref } from 'vue';
 import { BaseTableColumn, Row } from '@/types';
 import SlotComponent from './SlotComponent';
 import { useResizeObserver, useScroll } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 import { Size } from '@/utils/sizes';
+import objectHash from 'object-hash';
 
 const checkboxStyle =
   '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;
 
+defineOptions({
+  name: 'BaseDataTableTemplate',
+  inheritAttrs: false,
+});
+
 provide('table', getCurrentInstance());
 
 const props = defineProps({
@@ -356,11 +355,6 @@ const props = defineProps({
     type: Function,
     default: () => true,
   },
-  /** Use a unique key of your data Object when use detailed or opened detailed. (id recommended) */
-  rowKey: {
-    type: String,
-    default: 'id',
-  },
   /* Transition name to use when toggling row details. */
   detailTransition: {
     type: String,
@@ -388,7 +382,7 @@ const emit = defineEmits([
   'cell-click',
 ]);
 
-const visibleDetailRows = ref<Row[]>([]);
+const visibleDetailRows = ref<string[]>([]);
 // eslint-disable-next-line vue/no-setup-props-destructure
 const newCheckedRows = ref<Row[]>([...props.checkedRows]);
 const lastCheckedRowIndex = ref<number | null>(null);
@@ -521,10 +515,13 @@ function sort(column: BaseTableColumn, updatingData = false, event = null) {
  * Check if the row is checked (is added to the array).
  */
 function isRowChecked(row: Row): boolean {
-  return (
-    newCheckedRows.value.find((r) => r[props.rowKey] == row[props.rowKey]) !==
-    undefined
-  );
+  const found = newCheckedRows.value.find((r) => {
+    const key1 = getRowKey(r);
+    const key2 = getRowKey(row);
+    return key1 == key2
+  });
+
+  return found !== undefined;
 }
 
 /**
@@ -555,9 +552,13 @@ const isAllChecked = computed(() => {
 });
 
 function getCheckedRowIndex(row: Row) {
-  return newCheckedRows.value.findIndex(
-    (r) => r[props.rowKey] == row[props.rowKey]
-  );
+  const foundIndex = newCheckedRows.value.findIndex((r) => {
+    const key1 = getRowKey(r);
+    const key2 = getRowKey(row);
+    return key1 == key2
+  });
+
+  return foundIndex;
 }
 
 /**
@@ -668,36 +669,27 @@ function toggleDetails(row: Row) {
 }
 
 function openDetailRow(row: Row) {
-  const index = getDetailedIndex(row);
-  visibleDetailRows.value.push(index);
+  const key = getRowKey(row);
+  visibleDetailRows.value.push(key);
 }
 
 function closeDetailRow(row: Row) {
-  const index = getDetailedIndex(row);
-  const i = visibleDetailRows.value.indexOf(index);
+  const key = getRowKey(row);
+  const i = visibleDetailRows.value.indexOf(key);
   if (i >= 0) {
     visibleDetailRows.value.splice(i, 1);
   }
 }
 
 function isVisibleDetailRow(row: Row) {
-  const index = getDetailedIndex(row);
-  return visibleDetailRows.value.indexOf(index) >= 0;
+  const key = getRowKey(row);
+  return visibleDetailRows.value.indexOf(key) >= 0;
 }
 
 function isActiveDetailRow(row: Row) {
   return props.detailed && isVisibleDetailRow(row);
 }
 
-/**
- * When the rowKey is defined we use the object[rowKey] as index.
- * If not, use the object reference by default.
- */
-function getDetailedIndex(row: Row) {
-  const key = props.rowKey;
-  return !key.length || !row ? row : row[key];
-}
-
 /**
  * Update sort state
  */
@@ -759,7 +751,7 @@ function removeColumn(column: BaseTableColumn) {
 
 const borderClasses = 'border-b border-slate-200';
 
-function borderBottomClasses(index: number, row: Record<string, any>): string {
+function borderBottomClasses(index: number, row: Row): string {
   if (index < props.data.length - 1) {
     return borderClasses;
   }
@@ -795,7 +787,7 @@ function nextSequence() {
   return sequence.value++;
 }
 
-function getRowIndex(row: Row, index: number): string {
+function getRowKey(row: Row): string {
   if (row.id) {
     return row.id;
   }
@@ -805,7 +797,7 @@ function getRowIndex(row: Row, index: number): string {
   if (row.uuid) {
     return row.uuid;
   }
-  return index + '';
+  return objectHash(row);
 }
 
 // Sticky styles
@@ -825,7 +817,7 @@ function zIndex(th: boolean) {
   return 1;
 }
 
-function detailsStyles(th: boolean): any {
+function detailsStyles(th: boolean): StyleValue {
   if (props.detailed) {
     return {
       zIndex: zIndex(th) + 1,
@@ -839,7 +831,7 @@ function detailsStyles(th: boolean): any {
   return {};
 }
 
-function checkStyles(th: boolean): any {
+function checkStyles(th: boolean): StyleValue {
   if (props.checkable) {
     return {
       zIndex: zIndex(th) + 1,
@@ -853,7 +845,7 @@ function checkStyles(th: boolean): any {
   return {};
 }
 
-function firstColStyles(th: boolean): any {
+function firstColStyles(th: boolean): StyleValue {
   let left = 0;
   if (props.checkable) {
     left += CHECK_ROW_WIDTH;

package/src/components/BaseJsonReader.stories.js

@@ -0,0 +1,128 @@
+import BaseJsonReader from './BaseJsonReader.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+
+const sizes = ['xs', 'sm', 'md'];
+
+export default {
+  title: 'Components/BaseJsonReader',
+  component: BaseJsonReader,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    }
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseJsonReader, ShowValue },
+  setup() {
+    const object = {
+      "user": {
+        "name": "John Doe",
+        "email": "john@witify.io",
+        "permissions": [
+          "read",
+          "create",
+          "delete"
+        ],
+        comments: [
+          {
+            comment: "First comment",
+            replies: [
+              {
+                comment: "sub-comment 1 for comment 1",
+                replies: [
+                  {
+                    comment: "sub-sub-comment 1",
+                    replies: [
+                      {
+                        comment: "sub-sub-sub-comment 1",
+                      },
+                      {
+                        comment: {
+                          name: "sub-sub-sub-comment 2",
+                          desc: "test desc"
+                        }
+                      },
+                      {
+                        comment: {
+                          name: "sub-sub-sub-comment 3",
+                          desc: "test desc2"
+                        }
+                      },
+                    ],
+                  },
+                  { comment: "sub-sub-comment 2" },
+                ],
+              },
+              { comment: "sub-comment 2 for comment 1" },
+            ],
+          },
+
+          {
+            comment: "Second comment",
+            replies: [
+              {
+                comment: "sub-comment 1 for comment 2",
+                replies: [
+                  { comment: "sub-sub-comment 1" },
+                  { comment: "sub-sub-comment 2" },
+                ],
+              },
+              { comment: "sub-comment 2 for comment 2" },
+            ],
+          },
+        ],
+        "category": {
+          "id": 1,
+          "name": "Other"
+        },
+        "tags": {
+          "id": [
+            "create",
+            "delete"
+          ],
+          "name": {
+            "id": {
+              "read": {
+                "id": {
+                  "create": {
+                    "id": {
+                      "delete": {
+                        "id": {
+                          "update": {
+                            "id": {
+                              "name": "Read"
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            "name": "Read"
+          },
+        }
+      },
+      "foo": "bar",
+    };
+
+    const value = ref(object);
+    return { value, args };
+  },
+  template: `
+    <BaseJsonReader v-model="value" v-bind="args" class="bg-red-50 border p-5 text-red-900 rounded-none">
+    </BaseJsonReader>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+
+export const VariantCollapse = Template.bind({});
+VariantCollapse.args = {
+  variant: 'collapse',
+};

package/src/components/BaseJsonReader.vue

@@ -0,0 +1,53 @@
+<template>
+  <div 
+    :class="classes"
+  >
+    <ul>
+      <BaseJsonReaderItem
+        v-for="(value, key) in modelValue"
+        :key="key"
+        :size="size"
+        :label="key"
+        :variant="variant"
+        :model-value="value"
+      />
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Size, sizes } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+import { defineProps } from 'vue';
+import BaseJsonReaderItem from './BaseJsonReaderItem.vue';
+import { JsonData } from '@/types';
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: JsonData;
+    size?: Size;
+    variant?: 'list' | 'collapse';
+    class?: string | string[];
+  }>(),
+  {
+    size: 'sm',
+    variant: 'list',
+    class: undefined,
+  }
+);
+
+const classes = computed(() => {
+  const base = 'bg-slate-100 p-2 rounded-md text-sm text-slate-800';
+  const sizeConfig = sizes[props.size];
+
+  return twMerge(
+    base,
+    sizeConfig.fontSize,
+    props.class,
+  );
+});
+</script>