sprintify-ui 0.6.83 → 0.6.85

package/src/components/BaseHasMany.vue

@@ -45,7 +45,7 @@
 
 <script lang="ts" setup>
 import { debounce } from 'lodash';
-import { Option } from '@/types';
+import { RawOption } from '@/types';
 import { config } from '@/index';
 import { PropType } from 'vue';
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
@@ -97,7 +97,7 @@ const props = defineProps({
     default() {
       return undefined;
     },
-    type: Array as PropType<Option[] | undefined>,
+    type: Array as PropType<RawOption[] | undefined>,
   },
   hasError: {
     default: false,
@@ -113,7 +113,7 @@ const tagAutocompleteFetch = ref<InstanceType<
   typeof BaseTagAutocompleteFetch
 > | null>(null);
 
-const models = ref<Option[]>([]);
+const models = ref<RawOption[]>([]);
 const ensureModelIsFilledDebounced = debounce(() => ensureModelsAreFilled(), 100);
 
 watch(
@@ -130,7 +130,7 @@ watch(
 
 ensureModelIsFilledDebounced();
 
-function onUpdate(newModels: Option[]) {
+function onUpdate(newModels: RawOption[]) {
   models.value = newModels;
   emit(
     'update:modelValue',

package/src/components/BaseJsonReader.stories.js

@@ -114,7 +114,7 @@ const Template = (args) => ({
     return { value, args };
   },
   template: `
-    <BaseJsonReader v-model="value" v-bind="args">
+    <BaseJsonReader v-model="value" v-bind="args" class="bg-red-50 border p-5 text-red-900 rounded-none">
     </BaseJsonReader>
     <ShowValue :value="value" />
   `,

package/src/components/BaseJsonReader.vue

@@ -1,12 +1,17 @@
 <template>
   <div 
-    class="base-json-reader"
     :class="classes"
-    @click="handleClick"
   >
-    <div
-      v-html="renderObject(modelValue)"
-    />
+    <ul>
+      <BaseJsonReaderItem
+        v-for="(value, key) in modelValue"
+        :key="key"
+        :size="size"
+        :label="key"
+        :variant="variant"
+        :model-value="value"
+      />
+    </ul>
   </div>
 </template>
 
@@ -14,186 +19,35 @@
 import { Size, sizes } from '@/utils/sizes';
 import { twMerge } from 'tailwind-merge';
 import { defineProps } from 'vue';
+import BaseJsonReaderItem from './BaseJsonReaderItem.vue';
+import { JsonData } from '@/types';
 
-interface JsonData {
-  [key: string]: string | number | null | undefined | JsonData[];
-}
+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,
   );
 });
-
-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/BaseJsonReaderItem.vue

@@ -0,0 +1,112 @@
+<template>
+  <li>
+    <p class="flex items-center gap-1">
+      <button
+        v-if="variant == 'collapse'"
+        type="button"
+        class="duration-200 transform"
+        :class="[isPrimitive ? 'opacity-0 cursor-default' : '', visible ? 'rotate-0' : '-rotate-90']"
+        @click="toggle"
+      >
+        <BaseIcon
+          :class="classSizeChevron"
+          icon="ion:caret-down"
+        />
+      </button>
+      <span :class="[typeof label == 'number' ? '' : 'font-semibold']">
+        {{ label }}
+      </span>
+
+      <span
+        v-if="isPrimitive"
+        class="font-semibold"
+      >:</span>
+
+      <span v-if="isPrimitive">
+        {{ modelValue }}
+      </span>
+      <span
+        v-else
+        class="opacity-50"
+      >{<template v-if="true">{{ count }}</template>}</span>
+    </p>
+    <ul
+      v-show="visible"
+      v-if="isIterable"
+      class="pl-3"
+    >
+      <BaseJsonReaderItem
+        v-for="(value, key) in modelValue"
+        :key="key"
+        :label="key"
+        :model-value="value"
+        :size="size"
+        :variant="variant"
+      />
+    </ul>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { JsonDataItem } from '@/types';
+import { Size } from '@/utils/sizes';
+import { isBoolean, isNull, isNumber, isString, isArray, isObject } from 'lodash';
+
+const props = defineProps<{
+  modelValue: JsonDataItem;
+  label: string | number;
+  size: Size;
+  class?: string | string[];
+  variant: 'list' | 'collapse';
+}>();
+
+const visible = ref(true);
+
+function toggle() {
+  visible.value = !visible.value;
+}
+
+const count = computed(() => {
+  if (isArray(props.modelValue)) {
+    return props.modelValue.length;
+  }
+  if (isObject(props.modelValue)) {
+    return Object.keys(props.modelValue).length;
+  }
+  return 0;
+});
+
+const isPrimitive = computed(() => {
+  return isString(props.modelValue) || isNumber(props.modelValue) || isBoolean(props.modelValue) || isNull(props.modelValue) || isNumber(props.modelValue);
+});
+
+const isIterable = computed(() => {
+  if (isPrimitive.value) return false;
+  return isArray(props.modelValue) || isObject(props.modelValue);
+});
+
+const classSizeChevron = computed(() => {
+  const chevronSizes = {
+    xs: {
+      width: 'w-2.5',
+      height: 'h-2.5',
+    },
+    sm: {
+      width: 'w-3',
+      height: 'h-3',
+    },
+    md: {
+      width: 'w-3.5',
+      height: 'h-3.5',
+    },
+  };
+
+  const sizeConfig = chevronSizes[props.size];
+
+  return [
+    sizeConfig.height,
+    sizeConfig.width,
+  ];
+});
+
+</script>

package/src/components/BaseRadioGroup.vue

@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import { NormalizedOption, Option, OptionValue } from '@/types';
+import { NormalizedOption, RawOption, OptionValue } from '@/types';
 import { useField } from '@/composables/field';
 import { uniqueId } from 'lodash';
 
@@ -61,7 +61,7 @@ const props = defineProps({
   },
   options: {
     required: true,
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<RawOption[]>,
   },
   labelKey: {
     required: true,

package/src/components/BaseSelect.vue

@@ -41,7 +41,7 @@
 import { PropType } from 'vue';
 import { get, isArray } from 'lodash';
 import { useField } from '@/composables/field';
-import { NormalizedOption, OptionValue, Option } from '@/types';
+import { NormalizedOption, OptionValue, RawOption } from '@/types';
 import { t } from '@/i18n';
 import { twMerge } from 'tailwind-merge';
 import { Size, sizes } from '@/utils/sizes';
@@ -90,7 +90,7 @@ const props = defineProps({
   },
   options: {
     default: undefined,
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<RawOption[]>,
   },
   labelKey: {
     default: undefined,

package/src/components/BaseTagAutocomplete.vue

@@ -92,7 +92,7 @@
 <script lang="ts" setup>
 import { cloneDeep, get } from 'lodash';
 import { PropType, ComputedRef } from 'vue';
-import { NormalizedOption, Option } from '@/types';
+import { NormalizedOption, RawOption } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { useClickOutside } from '@/composables/clickOutside';
@@ -107,11 +107,11 @@ const notifications = useNotificationsStore();
 const props = defineProps({
   modelValue: {
     required: true,
-    type: [Array, null] as PropType<Option[] | null>,
+    type: [Array, null] as PropType<RawOption[] | null>,
   },
   options: {
     required: true,
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<RawOption[]>,
   },
   labelKey: {
     required: true,

package/src/components/BaseTagAutocompleteFetch.vue

@@ -63,7 +63,7 @@ import { config } from '@/index';
 import { PropType } from 'vue';
 import {
   Collection,
-  Option,
+  RawOption,
   PaginatedCollection,
   ResourceCollection,
 } from '@/types';
@@ -74,7 +74,7 @@ import { t } from '@/i18n';
 const props = defineProps({
   modelValue: {
     required: true,
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<RawOption[]>,
   },
   url: {
     required: true,
@@ -131,7 +131,7 @@ const fetching = ref(false);
 const firstSearch = ref(false);
 const keywords = ref('');
 const page = ref(1);
-const options = ref<Option[]>([]);
+const options = ref<RawOption[]>([]);
 
 const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
   null

package/src/composables/hasOptions.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
-import { NormalizedOption, Option } from '@/types';
+import { NormalizedOption, RawOption } from '@/types';
 import { isArray, isObject } from 'lodash';
 
 export function useHasOptions(
-  modelValue: Ref<Option[] | Option | null | undefined>,
-  options: Ref<Option[]>,
+  modelValue: Ref<RawOption[] | RawOption | null | undefined>,
+  options: Ref<RawOption[]>,
   labelKey: Ref<string>,
   valueKey: Ref<string>,
   multiple: Ref<boolean> = ref(false)

package/src/types/Media.ts

@@ -7,4 +7,4 @@ interface Media {
   url: string;
 }
 
-export { Media };
+export type { Media };

package/src/types/Notification.ts

@@ -8,4 +8,4 @@ interface Notification {
   created_at?: string;
 }
 
-export { Notification };
+export type { Notification };

package/src/types/UploadedFile.ts

@@ -8,4 +8,4 @@ interface UploadedFile {
   data_url?: string;
 }
 
-export { UploadedFile };
+export type { UploadedFile };

package/src/types/User.ts

@@ -4,4 +4,4 @@ interface User {
   avatar_url?: string;
 }
 
-export { User };
+export type { User };

package/src/types/index.ts

@@ -34,10 +34,10 @@ export interface DataTableQuery extends Record<string, any> {
 
 export type OptionValue = string | number | null;
 
-export type Option = Record<string, any>;
+export type RawOption = Record<string, any>;
 
 export type NormalizedOption = {
-  option: Option;
+  option: RawOption;
   value: OptionValue;
   label: string;
 };
@@ -268,3 +268,9 @@ 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/src/utils/sizes.ts

@@ -18,4 +18,6 @@ const sizes = {
 
 type Size = keyof typeof sizes;
 
-export { sizes, Size }
+export { sizes };
+
+export type { Size };

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

@@ -1,32 +0,0 @@
-.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");
-  }
-}