sprintify-ui 0.6.81 → 0.6.83

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

@@ -43,7 +43,7 @@ const props = defineProps({
   },
 });
 
-function onClick(close: () => void | null) {
+function onClick(close?: () => void | undefined) {
   emit('click', props.notification);
 
   if (close) {

package/src/components/BaseNavbarItem.vue

@@ -18,8 +18,9 @@
     </BaseActionItem>
     <div
       v-if="item.actions && item.actions.length"
-      class="absolute ring-1 ring-black ring-opacity-10 shadow-lg rounded-md invisible p-1 left-0 bg-white w-56 duration-100 opacity-0 translate-y-1 || group-hover:visible group-hover:opacity-100 group-hover:translate-y-0"
+      :class="dropdownClasses"
       :style="{
+        width: `${dropdownWidth}px`,
         top: `${height - 3}px`,
       }"
     >
@@ -56,8 +57,9 @@ import { ActionItem } from '@/types';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
+import { twMerge } from 'tailwind-merge';
 
-defineProps({
+const props = defineProps({
   item: {
     required: true,
     type: Object as PropType<ActionItem>,
@@ -70,6 +72,10 @@ defineProps({
     default: 'md',
     type: String as PropType<'xs' | 'sm' | 'md'>,
   },
+  twDropdown: {
+    default: undefined,
+    type: [String, Array] as PropType<string | string[]>,
+  },
 });
 
 const height = inject('navbar:height') as Ref<number>;
@@ -82,4 +88,21 @@ async function onClick() {
   emit('click');
   closeMenu();
 }
+
+const dropdownWidth = computed(() => {
+  if (props.item.meta?.dropdownWidth) {
+    return props.item.meta.dropdownWidth;
+  }
+
+  return 256;
+});
+
+const dropdownClasses = computed(() => {
+  return twMerge(
+    'absolute ring-1 ring-black ring-opacity-10 shadow-lg rounded-md invisible p-1 left-0 bg-white duration-100 opacity-0 translate-y-1',
+    'group-hover:visible group-hover:opacity-100 group-hover:translate-y-0',
+    props.twDropdown
+  );
+});
+
 </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();
 }
 

package/src/types/index.ts

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

package/dist/types/src/components/BaseActionItem.vue.d.ts

@@ -1,32 +0,0 @@
-import { ActionItem } from '@/types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    item: {
-        type: import("vue").PropType<ActionItem>;
-        required: true;
-    };
-    class: {
-        type: import("vue").PropType<string | string[] | null>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    item: {
-        type: import("vue").PropType<ActionItem>;
-        required: true;
-    };
-    class: {
-        type: import("vue").PropType<string | string[] | null>;
-    };
-}>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
-}, {}, {}>, {
-    default?(_: {
-        active: boolean;
-    }): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/src/components/BaseActionItemButton.vue.d.ts

@@ -1,25 +0,0 @@
-import { ActionItem } from '@/types';
-declare const _default: import("vue").DefineComponent<{
-    item: {
-        type: import("vue").PropType<ActionItem>;
-        required: true;
-    };
-    size: {
-        type: import("vue").PropType<"sm" | "md" | "lg">;
-        required: true;
-        default: string;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    item: {
-        type: import("vue").PropType<ActionItem>;
-        required: true;
-    };
-    size: {
-        type: import("vue").PropType<"sm" | "md" | "lg">;
-        required: true;
-        default: string;
-    };
-}>>, {
-    size: 'sm' | 'md' | 'lg';
-}, {}>;
-export default _default;

package/dist/types/src/components/BaseAddressForm.vue.d.ts

@@ -1,121 +0,0 @@
-import { Country } from '@/types/Country';
-import { Region } from '@/types/Region';
-import { Size } from '@/utils/sizes';
-type Address = {
-    address_1?: string | null;
-    address_2?: string | null;
-    postal_code?: string | null;
-    city?: string | null;
-    region?: string | null;
-    country?: string | null;
-    notes?: string | null;
-};
-declare const _default: import("vue").DefineComponent<{
-    required: {
-        type: import("vue").PropType<boolean>;
-    };
-    size: {
-        type: import("vue").PropType<"xs" | "sm" | "md">;
-        default: undefined;
-    };
-    modelValue: {
-        type: import("vue").PropType<Address | null | undefined>;
-        required: true;
-        default: () => {};
-    };
-    prefix: {
-        type: import("vue").PropType<string | null>;
-        required: true;
-        default: null;
-    };
-    countries: {
-        type: import("vue").PropType<Country[]>;
-        default: () => never[];
-    };
-    regions: {
-        type: import("vue").PropType<Region[]>;
-        default: () => never[];
-    };
-    restrictCountry: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    hideRegion: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    hideCountry: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    showNotes: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    requiredFields: {
-        type: import("vue").PropType<(keyof Address)[]>;
-        default: () => string[];
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:model-value": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    required: {
-        type: import("vue").PropType<boolean>;
-    };
-    size: {
-        type: import("vue").PropType<"xs" | "sm" | "md">;
-        default: undefined;
-    };
-    modelValue: {
-        type: import("vue").PropType<Address | null | undefined>;
-        required: true;
-        default: () => {};
-    };
-    prefix: {
-        type: import("vue").PropType<string | null>;
-        required: true;
-        default: null;
-    };
-    countries: {
-        type: import("vue").PropType<Country[]>;
-        default: () => never[];
-    };
-    regions: {
-        type: import("vue").PropType<Region[]>;
-        default: () => never[];
-    };
-    restrictCountry: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    hideRegion: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    hideCountry: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    showNotes: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    requiredFields: {
-        type: import("vue").PropType<(keyof Address)[]>;
-        default: () => string[];
-    };
-}>> & {
-    "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
-}, {
-    size: Size;
-    modelValue: undefined | null | Address;
-    prefix: string | null;
-    countries: Country[];
-    regions: Region[];
-    restrictCountry: boolean;
-    hideRegion: boolean;
-    hideCountry: boolean;
-    showNotes: boolean;
-    requiredFields: (keyof Address)[];
-}, {}>;
-export default _default;

package/dist/types/src/components/BaseAlert.vue.d.ts

@@ -1,68 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    class: {
-        type: import("vue").PropType<string | string[]>;
-        default: undefined;
-    };
-    title: {
-        type: import("vue").PropType<string>;
-        default: undefined;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-        required: true;
-        default: string;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-        default: undefined;
-    };
-    showIcon: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    bordered: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    class: {
-        type: import("vue").PropType<string | string[]>;
-        default: undefined;
-    };
-    title: {
-        type: import("vue").PropType<string>;
-        default: undefined;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-        required: true;
-        default: string;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-        default: undefined;
-    };
-    showIcon: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    bordered: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-}>>, {
-    class: string | string[];
-    title: string;
-    color: string;
-    icon: string;
-    showIcon: boolean;
-    bordered: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/src/components/BaseAppNotifications.vue.d.ts

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

package/dist/types/src/components/BaseBadge.vue.d.ts

@@ -1,69 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    class: {
-        type: import("vue").PropType<string | string[]>;
-        default: undefined;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-        default: undefined;
-    };
-    bordered: {
-        type: import("vue").PropType<boolean>;
-    };
-    size: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    contrast: {
-        type: import("vue").PropType<"high" | "low">;
-        default: string;
-    };
-    wrap: {
-        type: import("vue").PropType<boolean>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    class: {
-        type: import("vue").PropType<string | string[]>;
-        default: undefined;
-    };
-    color: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    icon: {
-        type: import("vue").PropType<string>;
-        default: undefined;
-    };
-    bordered: {
-        type: import("vue").PropType<boolean>;
-    };
-    size: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
-    contrast: {
-        type: import("vue").PropType<"high" | "low">;
-        default: string;
-    };
-    wrap: {
-        type: import("vue").PropType<boolean>;
-    };
-}>>, {
-    class: string | string[];
-    color: string;
-    icon: string;
-    size: string;
-    contrast: "high" | "low";
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/src/components/BaseBoolean.vue.d.ts

@@ -1,10 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: import("vue").PropType<string | number | boolean | null>;
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: import("vue").PropType<string | number | boolean | null>;
-    };
-}>>, {}, {}>;
-export default _default;