sprintify-ui 0.6.81 → 0.6.83

package/dist/types/{src/components → components}/BaseUniqueCode.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<string | number | null>;

package/dist/types/{src/components → components}/SlotComponent.d.ts

@@ -19,7 +19,7 @@ declare const _default: DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     component: {
         type: ObjectConstructor;
         required: true;

package/dist/types/{src/services → services}/gantt/format.d.ts

@@ -6,8 +6,8 @@ export declare class Format {
     constructor(config: FormatConfig);
     handle(): {
         rows: GanttRowFormatted[];
-        min: DateTime;
-        max: DateTime;
+        min: DateTime<true> | DateTime<false>;
+        max: DateTime<true> | DateTime<false>;
         millisecondToPixel: number;
         height: number;
         width: number;
@@ -19,7 +19,7 @@ export declare class Format {
     formatGanttRow(row: GanttRow): GanttRowFormatted;
     formatGanttItem(item: GanttItem): GanttItemFormatted;
     getMinMax(rowsFormatted: GanttRowFormatted[]): {
-        min: DateTime;
-        max: DateTime;
+        min: DateTime<true> | DateTime<false>;
+        max: DateTime<true> | DateTime<false>;
     };
 }

package/dist/types/{src/services → services}/gantt/timescale.d.ts

@@ -14,8 +14,8 @@ export declare class Timescale {
         ticks: Tick[];
         width: number;
         millisecondToPixel: number;
-        min: DateTime;
-        max: DateTime;
+        min: DateTime<boolean>;
+        max: DateTime<boolean>;
     };
     private getMillisecondToPixel;
     private getGroups;

package/dist/types/stories/PageInputSizes.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/stories/PageShow.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/svg/BaseEmptyState.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/svg/BaseSpinnerLarge.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/svg/BaseSpinnerSmall.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/types/{src/types → types}/index.d.ts

@@ -65,6 +65,7 @@ export interface ActionItem {
     meta?: {
         line?: boolean;
         showSubItems?: 'always' | 'active' | 'never';
+        dropdownWidth?: number;
         [key: string]: any;
     };
     actions?: ActionItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.81",
+  "version": "0.6.83",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -38,90 +38,90 @@
     "vue-router": "^4.0.0"
   },
   "dependencies": {
-    "@floating-ui/vue": "^1.0.2",
-    "@fullcalendar/core": "^6.1.8",
-    "@fullcalendar/daygrid": "^6.1.8",
-    "@fullcalendar/interaction": "^6.1.8",
-    "@fullcalendar/list": "^6.1.8",
-    "@fullcalendar/multimonth": "^6.1.8",
-    "@fullcalendar/timegrid": "^6.1.8",
-    "@fullcalendar/vue3": "^6.1.8",
-    "@headlessui/vue": "^1.7.12",
-    "color2k": "^2.0.2",
-    "tailwind-merge": "^1.12.0"
+    "@floating-ui/vue": "^1.0.6",
+    "@fullcalendar/core": "^6.1.11",
+    "@fullcalendar/daygrid": "^6.1.11",
+    "@fullcalendar/interaction": "^6.1.11",
+    "@fullcalendar/list": "^6.1.11",
+    "@fullcalendar/multimonth": "^6.1.11",
+    "@fullcalendar/timegrid": "^6.1.11",
+    "@fullcalendar/vue3": "^6.1.11",
+    "@headlessui/vue": "^1.7.19",
+    "color2k": "^2.0.3",
+    "tailwind-merge": "^1.14.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@commitlint/cli": "^17.4.4",
-    "@commitlint/config-conventional": "^17.4.4",
-    "@iconify/vue": "^4.1.0",
+    "@babel/core": "^7.24.0",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@iconify/vue": "^4.1.1",
     "@storybook/addon-actions": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
     "@storybook/manager-api": "^7.2.1",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.2.1",
     "@storybook/vue3": "^7.2.1",
-    "@storybook/vue3-vite": "^7.2.1",
+    "@storybook/vue3-vite": "^7.6.17",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/croppie": "^2.6.1",
-    "@types/google.maps": "^3.51.1",
-    "@types/humanize-duration": "^3.27.1",
-    "@types/luxon": "^3.2.0",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/croppie": "^2.6.4",
+    "@types/google.maps": "^3.55.4",
+    "@types/humanize-duration": "^3.27.4",
+    "@types/luxon": "^3.4.2",
     "@types/object-hash": "^2.2.1",
-    "@types/qs": "^6.9.7",
-    "@types/scroll-lock": "^2.1.0",
-    "@types/sortablejs": "^1.15.1",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vueup/vue-quill": "^1.1.0",
-    "@vueuse/core": "^10.0.2",
-    "autoprefixer": "^10.4.13",
+    "@types/qs": "^6.9.12",
+    "@types/scroll-lock": "^2.1.3",
+    "@types/sortablejs": "^1.15.8",
+    "@typescript-eslint/eslint-plugin": "^7.3.0",
+    "@typescript-eslint/parser": "^7.3.0",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vueup/vue-quill": "^1.2.0",
+    "@vueuse/core": "^10.9.0",
+    "autoprefixer": "^10.4.18",
     "axios": "^0.26.1",
     "babel-loader": "^8.3.0",
     "croppie": "^2.6.5",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.33.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-storybook": "^0.6.13",
-    "eslint-plugin-vue": "^9.9.0",
-    "eslint-plugin-vue-scoped-css": "^2.4.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-vue": "^9.23.0",
+    "eslint-plugin-vue-scoped-css": "^2.7.2",
     "flatpickr": "^4.6.13",
-    "humanize-duration": "^3.28.0",
+    "humanize-duration": "^3.31.0",
     "husky": "^8.0.3",
     "lodash": "^4.17.21",
-    "luxon": "^3.2.1",
-    "maska": "^2.1.6",
+    "luxon": "^3.4.4",
+    "maska": "^2.1.11",
     "object-hash": "^3.0.0",
-    "object-to-formdata": "^4.4.2",
-    "pinia": "^2.0.30",
-    "postcss": "^8.4.21",
+    "object-to-formdata": "^4.5.1",
+    "pinia": "^2.1.7",
+    "postcss": "^8.4.36",
     "postcss-import": "^15.1.0",
-    "qs": "^6.11.0",
+    "qs": "^6.12.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "relative-deps": "^1.0.7",
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
-    "sortablejs": "^1.15.0",
+    "sortablejs": "^1.15.2",
     "standard-version": "^9.5.0",
-    "storybook": "^7.2.1",
-    "storybook-addon-mock": "^4.1.0",
-    "tailwindcss": "^3.2.6",
-    "typescript": "^4.9.5",
+    "storybook": "^7.6.17",
+    "storybook-addon-mock": "^4.3.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.4.2",
     "unplugin-auto-import": "^0.12.2",
-    "vite": "^4.1.1",
+    "vite": "^4.5.2",
     "vitepress": "^0.21.6",
     "vue": "^3.2.47",
-    "vue-loader": "^17.0.1",
-    "vue-router": "^4.1.6",
-    "vue-tsc": "^1.0.24"
+    "vue-loader": "^17.4.2",
+    "vue-router": "^4.3.0",
+    "vue-tsc": "^2.0.6"
   },
   "files": [
     "src",

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/BaseActionItem.vue

@@ -68,8 +68,9 @@ const closeMenu = inject('closeMenu', () => {
 const emit = defineEmits(['click']);
 
 type asyncFunc = () => Promise<void>;
+type func = () => void;
 
-async function onClick(func: asyncFunc | null = null) {
+async function onClick(func: func | asyncFunc | null = null) {
   if (func) {
     await func();
   }

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',
+};