sprintify-ui 0.6.82 → 0.6.83

package/src/assets/base-json-reader.css

@@ -0,0 +1,32 @@
+.base-json-reader {
+  ul {
+    list-style-type: disc !important; 
+    padding-left: 20px !important;
+  }
+
+  li {
+    margin-bottom: 5px !important;
+  }
+
+  .chevron {
+    cursor: pointer;
+  }
+
+  .heroicons--chevron-right-16-solid,
+  .heroicons--chevron-down-16-solid {
+    display: inline-block;
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+  }
+  .heroicons--chevron-right-16-solid {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8L6.22 5.28a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  }
+  .heroicons--chevron-down-16-solid {
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
+  }
+}

package/src/assets/main.css

@@ -6,6 +6,7 @@
 @import "./base-table.css";
 @import "./base-tabs.css";
 @import "./base-spinner.css";
+@import "./base-json-reader";
 
 /** BaseAddressForm */
 @import "./google-pac.css";

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">
+    </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,199 @@
+<template>
+  <div 
+    class="base-json-reader"
+    :class="classes"
+    @click="handleClick"
+  >
+    <div
+      v-html="renderObject(modelValue)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Size, sizes } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+import { defineProps } from 'vue';
+
+interface JsonData {
+  [key: string]: string | number | null | undefined | JsonData[];
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: JsonData;
+    size?: Size;
+    variant?: 'list' | 'collapse';
+  }>(),
+  {
+    size: 'sm',
+    variant: 'list',
+  }
+);
+
+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,
+  );
+});
+
+const classSizeChevron = computed(() => {
+  const chevronSizes = {
+    xs: {
+      width: 'w-[1em]',
+      height: 'h-[1em]',
+      marginBottom: 'mb-[-2.5px]'
+    },
+    sm: {
+      width: 'w-[1.1em]',
+      height: 'h-[1.1em]',
+      marginBottom: 'mb-[-3.5px]'
+    },
+    md: {
+      width: 'w-[1.2em]',
+      height: 'h-[1.2em]',
+      marginBottom: 'mb-[-5px]'
+    },
+  };
+
+  const sizeConfig = chevronSizes[props.size];
+  
+  return twMerge(
+    sizeConfig.height,
+    sizeConfig.width,
+    sizeConfig.marginBottom
+  );
+});
+
+const expandedKeys = ref<string[]>([]);
+
+function toggleExpand(key: string) {
+  if (isExpanded(key)) {
+    expandedKeys.value = expandedKeys.value.filter(k => k !== key);
+  } else {
+    expandedKeys.value.push(key);
+  }
+}
+
+function isExpanded(key: string): boolean {
+  return expandedKeys.value.includes(key);
+}
+
+// Expand when created
+function recursiveExpand(data: JsonData | JsonData[] , parentKey = '') {
+  if (props.variant !== 'collapse') {
+    return;
+  }
+
+  if (Array.isArray(data)) {
+    data.forEach((item, index) => {
+      const uniqueKey = parentKey ? `${parentKey}[${index}]` : `[${index}]`;
+      expandedKeys.value.push(uniqueKey);
+      recursiveExpand(item, uniqueKey);
+    });
+  } else {
+    Object.entries(data).forEach(([key, value], index) => {
+      const uniqueKey = parentKey ? `${parentKey}[${index}]` : `[${index}]`;
+      expandedKeys.value.push(uniqueKey);
+
+      if (typeof value === 'object' && value !== null) {
+        recursiveExpand(value, uniqueKey);
+      }
+    });
+  }
+}
+
+recursiveExpand(props.modelValue);
+
+function handleClick(event: MouseEvent) {
+  if (props.variant !== 'collapse') {
+    return;
+  }
+  
+  const target = event.target as HTMLElement;
+  if (target.classList.contains('chevron')) {
+    const key = target.dataset.key;
+    
+    if (key) {
+      toggleExpand(key);
+    }
+  }
+}
+
+function renderContent(data: JsonData | JsonData[], uniqueKey = ''): string {
+  if (Array.isArray(data)) {
+    return renderArray(data, uniqueKey);
+  } 
+  
+  else if (typeof data === 'object' && data !== null) {
+    return renderObject(data, uniqueKey);
+  } 
+  
+  return `<span>${data}</span>`;
+}
+
+// If data is an array
+function renderArray(data: JsonData[], parentKey = ''): string {
+  let result = '<ul>';
+
+  data.forEach((item, index) => {
+    const uniqueKey = parentKey ? `${parentKey}[${index}]` : `[${index}]`;
+
+    if (typeof item === 'object' && item !== null) {
+      result += `${renderContent(item, uniqueKey)}`;
+    }
+    else {
+      result += `<li>${renderContent(item, uniqueKey)}</li>`;
+    }
+    
+  });
+
+  result += '</ul>';
+
+  return result;
+}
+
+// If data is an object
+function renderObject(data: JsonData, parentKey = ''): string {
+  let result = '<ul>';
+
+  Object.entries(data).forEach(([key, value], index) => {
+    const uniqueKey = parentKey ? `${parentKey}[${index}]` : `[${index}]`;
+    console.log('uniqueKey', uniqueKey, 'parentKey', parentKey, 'index', index);
+    
+
+    if (props.variant === 'collapse') {
+      result += `<li> <b data-key="${uniqueKey}" class="${(typeof value === 'object' && value !== null) ? 'chevron' : ''}">${key}</b>`;
+    } else {
+      result += `<li> <b>${key}</b>`;
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      if (props.variant === 'collapse') {
+        result += `<span data-key="${uniqueKey}" class="chevron ml-[-2px]"> ${renderChevron(uniqueKey)} </span>`;
+      }
+
+      if (isExpanded(uniqueKey) || props.variant !== 'collapse') { 
+        result += renderContent(value, uniqueKey);
+      }
+    } else {
+      result += ` <span>${value}</span>`;
+    }
+
+    result += '</li>';
+  });
+
+  result += '</ul>';
+
+  return result;
+}
+
+function renderChevron(key: string): string {
+  return isExpanded(key) ? `<span class="chevron heroicons--chevron-right-16-solid w-1 h-1 ${classSizeChevron.value}" data-key="${key}"></span>`
+    : `<span class="chevron heroicons--chevron-down-16-solid ${classSizeChevron.value}" data-key="${key}"></span>`;
+}
+</script>

package/src/components/BaseScrollColumn.vue

@@ -77,8 +77,6 @@ const scrollToSelectedValue = (
   behavior: 'auto' | 'instant' | 'smooth' | undefined = 'smooth'
 ) => {
 
-  console.log('timeContainer', timeContainer, 'timeValue', timeValue.value);
-
   if (!timeContainer || !timeValue.value) {
     return;
   }

package/src/components/BaseTimePicker.vue

@@ -345,9 +345,6 @@ function ok(close: () => void) {
 
   emitUpdate(time);
 
-  console.log('time', time);
-  
-
   close();
 }