sprintify-ui 0.10.87 → 0.11.0

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

@@ -120,6 +120,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     class: string | string[];
     type: string;
+    placeholder: string;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
     disabled: boolean;
@@ -127,7 +128,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     modelValue: string | null | undefined;
     autocomplete: boolean;
     preventSubmit: boolean;
-    placeholder: string;
     hasError: boolean;
     rows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -114,12 +114,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onSubmit?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    placeholder: string;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
     disabled: boolean;
     name: string;
     modelValue: string | null;
-    placeholder: string;
     hasError: boolean;
     rows: number;
     maxHeight: number;

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

@@ -112,12 +112,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     class: string | string[];
+    placeholder: string;
     size: "xs" | "sm" | "md" | "lg" | "xl";
     required: boolean;
     disabled: boolean;
     name: string;
     modelValue: string | null | undefined;
-    placeholder: string;
     hasError: boolean;
     hourStep: number;
     minuteStep: number;

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

@@ -13,45 +13,12 @@ type __VLS_Props = {
     dark?: boolean;
     offset?: number;
 };
-declare const targetRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-declare const tooltipRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
-declare const floatingStyles: Readonly<import("vue").Ref<{
-    position: import("@floating-ui/utils").Strategy;
-    top: string;
-    left: string;
-    transform?: string;
-    willChange?: string;
-}, {
-    position: import("@floating-ui/utils").Strategy;
-    top: string;
-    left: string;
-    transform?: string;
-    willChange?: string;
-}>>, showTooltip: import("vue").Ref<boolean, boolean>;
-declare const classInternal: import("vue").ComputedRef<(string | string[] | null)[]>;
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {}, __VLS_11: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
     tooltip?: (props: typeof __VLS_11) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    targetRef: typeof targetRef;
-    tooltipRef: typeof tooltipRef;
-    floatingStyles: typeof floatingStyles;
-    showTooltip: typeof showTooltip;
-    classInternal: typeof classInternal;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    dark: boolean;
-    class: string | string[] | null;
-    text: string | null;
-    visible: boolean;
-    floatingOptions: UseFloatingOptions;
-    interactive: boolean;
-    delay: number;
-    offset: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     dark: boolean;
     class: string | string[] | null;

package/dist/types/services/gantt/types.d.ts

@@ -3,6 +3,7 @@ export interface GanttItem {
     id: number | string;
     start: string;
     end: string;
+    height?: number;
     name: string;
     meta?: Record<string, unknown>;
     color: string;
@@ -12,31 +13,40 @@ export interface GanttRow {
     name: string;
     meta?: Record<string, unknown>;
     items: GanttItem[];
+    height?: number;
 }
 export interface GanttRowFormatted {
     id: number | string;
     name: string;
-    meta?: Record<string, unknown>;
     items: GanttItemFormatted[];
+    height: number;
+    barHeight: number;
+    width: number;
+    start: DateTime;
+    end: DateTime;
+    x: number;
+    y: number;
+    meta?: Record<string, unknown>;
 }
 export interface GanttItemFormatted {
     id: number | string;
-    start: DateTime;
-    end: DateTime;
     name: string;
-    meta?: Record<string, unknown>;
     color: string;
-    milliseconds: number;
+    height: number;
+    barHeight: number;
+    width: number;
+    start: DateTime;
+    end: DateTime;
     x: number;
     y: number;
-    width: number;
-    height: number;
+    milliseconds: number;
+    meta?: Record<string, unknown>;
 }
 export interface FormatConfig {
     rows: GanttRow[];
+    sidebarWidth: number;
     minWidth: number;
     rowHeight: number;
-    rowPadding: number;
     includeToday: boolean;
 }
 export interface Tick {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.10.87",
+  "version": "0.11.0",
   "type": "module",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
@@ -48,12 +48,8 @@
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
     "@iconify/vue": "^4.1.1",
-    "@storybook/addon-controls": "^8.3.0",
-    "@storybook/addon-docs": "^8.3.0",
-    "@storybook/manager-api": "^8.3.0",
-    "@storybook/theming": "^8.3.0",
-    "@storybook/vue3": "^8.3.0",
-    "@storybook/vue3-vite": "^8.3.0",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/vue3-vite": "10.2.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
@@ -82,7 +78,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "10.2.0",
     "eslint-plugin-vue": "^9.23.0",
     "eslint-plugin-vue-scoped-css": "^2.7.2",
     "flatpickr": "^4.6.13",
@@ -98,12 +94,13 @@
     "postcss-import": "^15.1.0",
     "qs": "^6.12.0",
     "relative-deps": "^1.0.7",
+    "remark-gfm": "^4.0.1",
     "rimraf": "^3.0.2",
     "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
     "sortablejs": "^1.15.2",
     "standard-version": "^9.5.0",
-    "storybook": "^8.3.0",
+    "storybook": "10.2.0",
     "tailwindcss": "^3.4.1",
     "tiptap-footnotes": "^3.0.1",
     "typescript": "^5.6.3",

package/src/changelog.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from '@storybook/blocks';
+import { Meta, Markdown } from '@storybook/addon-docs/blocks';
  
 import Readme from '../CHANGELOG.md?raw';
  

package/src/components/BaseAssign.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
+import { Canvas, Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks';
  
 import * as BaseAssignStories from './BaseAssign.stories';
  

package/src/components/BaseAutocomplete.stories.js

@@ -22,6 +22,16 @@ export default {
     labelKey: "label",
     valueKey: "value",
     options: options,
+    optionColor: (option) => {
+      if (option.type === "jedi") return "blue";
+      if (option.type === "sith") return "black";
+      return "gray";
+    },
+    optionIcon: (option) => {
+      if (option.type === "jedi") return "fa7-solid:jedi";
+      if (option.type === "sith") return "fa7-brands:sith";
+      return "mdi:help-circle-outline";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseAutocomplete.vue

@@ -86,8 +86,10 @@
           :size="size"
           :loading="loading"
           :loading-bottom="loadingBottom"
-          tw-drawer="p-1"
           :keywords="keywords"
+          :option-color="optionColor"
+          :option-icon="optionIcon"
+          tw-drawer="p-1"
           @select="onSelect"
           @scroll-bottom="emit('scrollBottom')"
         >
@@ -231,6 +233,14 @@ const props = defineProps({
     },
     type: [String] as PropType<string>,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twInput: {
     default: undefined,
     type: [String, Array] as PropType<string | string[]>,

package/src/components/BaseAutocompleteDrawer.vue

@@ -51,6 +51,29 @@
                 class="flex items-center rounded px-[0.75em] py-[0.5em]"
                 :class="[optionClass(option), optionSizeClass]"
               >
+                <div
+                  v-if="optionIcon"
+                  class="shrink-0"
+                >
+                  <BaseIcon
+                    :icon="option.option ? optionIcon(option.option) : ''"
+                    class="flex-shrink-0"
+                    :class="optionIconSizeClass"
+                    :color="option.option && optionColor ? optionColor(option.option) : 'gray'"
+                  />
+                </div>
+                <div
+                  v-else-if="optionColor"
+                  class="shrink-0"
+                >
+                  <div
+                    class="flex-shrink-0 rounded-full"
+                    :class="optionColorSizeClass"
+                    :style="{
+                      backgroundColor: option.option ? optionColor(option.option) : 'gray',
+                    }"
+                  />
+                </div>
                 <div class="grow">
                   {{ option.label }}
                 </div>
@@ -120,7 +143,7 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { useInfiniteScroll } from '@vueuse/core';
-import { NormalizedOption } from '@/types';
+import { NormalizedOption, RawOption } from '@/types';
 import { isArray, isObject, throttle } from 'lodash';
 import BaseSkeleton from './BaseSkeleton.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
@@ -157,6 +180,14 @@ const props = defineProps({
     type: String as PropType<Size>,
     default: 'md',
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
   twDrawer: {
     type: String,
     default: '',
@@ -380,6 +411,26 @@ const optionIconClass = computed(() => {
   return 'w-5 h-5';
 });
 
+const optionColorSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'mr-2 -ml-px h-3 w-3';
+  }
+  if (props.size == 'sm') {
+    return 'mr-2 -ml-px h-2.5 w-2.5';
+  }
+  return 'mr-2 -ml-px h-2.5 w-2.5';
+});
+
+const optionIconSizeClass = computed(() => {
+  if (props.size == 'xs') {
+    return 'mr-2 -ml-px h-3 w-3';
+  }
+  if (props.size == 'sm') {
+    return 'mr-2 -ml-0.5 h-4 w-4';
+  }
+  return 'mr-2 -ml-0.5 h-4 w-4';
+});
+
 defineExpose({
   onKeydown,
 });

package/src/components/BaseAutocompleteFetch.stories.js

@@ -16,6 +16,12 @@ export default {
     url: "https://faker.witify.io/api/todos",
     labelKey: "title",
     valueKey: "id",
+    optionColor: (option) => {
+      if (option.type === "work") return "green";
+      if (option.type === "personal") return "blue";
+      if (option.type === "family") return "purple";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseAutocompleteFetch.vue

@@ -23,6 +23,9 @@
     :show-remove-button="showRemoveButton"
     :select="select"
     :filter="filterOptions"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
+    :icon="icon"
     :tw-input="twInput"
     @clear="onClear"
     @open="onOpen"
@@ -168,6 +171,18 @@ const props = defineProps({
     default: undefined,
     type: Object as PropType<SelectConfiguration | undefined>,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  icon: {
+    default: undefined,
+    type: [String] as PropType<string>,
+  },
   twInput: {
     default: undefined,
     type: [String, Array] as PropType<string | string[]>,

package/src/components/BaseBelongsTo.stories.js

@@ -16,6 +16,11 @@ export default {
     options: options,
     field: "label",
     primaryKey: "value",
+    optionColor: (option) => {
+      if (option.type === "jedi") return "blue";
+      if (option.type === "sith") return "black";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseBelongsTo.vue

@@ -22,6 +22,8 @@
     :focus-on-mount="focusOnMount"
     :select="select"
     :icon="icon"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -138,6 +140,14 @@ const props = defineProps({
     default: undefined,
     type: String,
   },
+  optionColor: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
+  optionIcon: {
+    default: undefined,
+    type: Function as PropType<(option: RawOption) => string>,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

package/src/components/BaseBelongsToFetch.stories.js

@@ -18,6 +18,12 @@ export default {
     showRouteUrl(id) {
       return `https://faker.witify.io/api/todos/${id}`;
     },
+    optionColor: (option) => {
+      if (option.type === "work") return "green";
+      if (option.type === "personal") return "blue";
+      if (option.type === "family") return "purple";
+      return "gray";
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };

package/src/components/BaseBelongsToFetch.vue

@@ -20,6 +20,9 @@
     :visible-focus="visibleFocus"
     :focus-on-mount="focusOnMount"
     :select="select"
+    :option-color="optionColor"
+    :option-icon="optionIcon"
+    :icon="icon"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -74,6 +77,9 @@ const props = withDefaults(
     showRemoveButton?: boolean;
     emptyOptionLabel?: string;
     select?: SelectConfiguration;
+    optionColor?: (option: RawOption) => string;
+    optionIcon?: (option: RawOption) => string;
+    icon?: string;
   }>(),
   {
     modelValue: undefined,
@@ -95,6 +101,9 @@ const props = withDefaults(
     showRemoveButton: true,
     emptyOptionLabel: undefined,
     select: undefined,
+    optionColor: undefined,
+    optionIcon: undefined,
+    icon: undefined,
   }
 );
 

package/src/components/BaseForm.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Primary, Controls, Story } from '@storybook/blocks';
+import { Canvas, Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks';
  
 import * as BaseFormStories from './BaseForm.stories';
  

package/src/components/BaseGantt.mdx

@@ -0,0 +1,79 @@
+import { Canvas, Meta, Primary, Controls, Story } from '@storybook/addon-docs/blocks';
+ 
+import * as BaseGanttStories from './BaseGantt.stories';
+ 
+<Meta of={BaseGanttStories} />
+ 
+# BaseGantt
+
+## Introduction
+ 
+This is the BaseGantt component used to display Gantt charts. It allows you to visualize tasks or events over a timeline.
+
+<Primary />
+
+## API
+
+### GanttRow
+
+| Prop      | Type                        | Description                                      |
+|-----------|-----------------------------|--------------------------------------------------|
+| id        | number \| string            | Unique identifier for the row                    |
+| name      | string                      | Name of the row                                  |
+| meta      | Object?                     | Optional metadata for the row                    |
+| items     | GanttItem[]                 | Array of items (tasks/events) in the row         |
+| height    | number?                     | Optional custom height for the row. If not provided, props.rowHeight will be used. |
+
+### GanttItem
+
+| Prop      | Type                        | Description                                      |
+|-----------|-----------------------------|--------------------------------------------------|
+| id        | number \| string            | Unique identifier for the item                   |
+| start     | string                      | Start date/time (ISO string)                     |
+| end       | string                      | End date/time (ISO string)                       |
+| height    | number?                     | Optional custom height for the item. If not provided, props.rowHeight will be used. |
+| name      | string                      | Name of the item                                 |
+| meta      | Object?                     | Optional metadata for the item                   |
+| color     | string                      | Color used to display the item                   |
+
+### GanttRowFormatted
+
+Once the rows have been formatted for rendering, the GanttRowFormatted type is used.
+
+| Prop      | Type                        | Description                                      |
+|-----------|-----------------------------|--------------------------------------------------|
+| id        | number \| string            | Unique identifier for the row                    |
+| name      | string                      | Name of the row                                  |
+| items     | GanttItemFormatted[]        | Array of formatted items (tasks/events) in the row         |
+| height    | number                     | The rendered height of the row |
+| barHeight | number                     | The height of the bars in the row |
+| width    | number                     | The width of the bar in pixels |
+| start   | DateTime                     | The DateTime start of the bar |
+| end     | DateTime                     | The DateTime end of the bar |
+| x      | number                     | The x position of the bar in pixels |
+| y      | number                     | The y position of the bar in pixels |
+| meta      | Object?                     | Optional metadata for the row                    |
+
+### GanttItemFormatted
+
+Once the items have been formatted for rendering, the GanttItemFormatted type is used.
+
+| Prop      | Type                        | Description                                      |
+|-----------|-----------------------------|--------------------------------------------------|
+| id        | number \| string            | Unique identifier for the item                   |
+| name     | string                      | Name of the item                                 |
+| color   | string                     | The color of the item |
+| height   | number                     | The rendered height of the item |
+| barHeight | number                     | The height of the bar in the item |
+| width    | number                     | The width of the item in pixels |
+| start     | DateTime                     | The DateTime start of the item                      |
+| end       | DateTime                     | The DateTime end of the item                        |
+| x     | number                     | The x position of the item in pixels               | 
+| y     | number                     | The y position of the item in pixels               |
+| milliseconds | number                  | The duration of the item in milliseconds          |
+| meta      | Object?                     | Optional metadata for the item                   |
+
+
+## Props
+ 
+<Controls />

package/src/components/BaseGantt.stories.js

@@ -10,10 +10,12 @@ const rows = [];
 for (let i = 0; i < 10; i++) {
   const items = [];
 
-  for (let j = 0; j < 1; j++) {
+  for (let j = 0; j < 2; j++) {
+
     const start = DateTime.now()
       .minus({ days: 50 })
-      .plus({ days: i * 2 });
+      .plus({ days: j + i * 2 });
+
     const end = start.plus({ days: 50 });
 
     const colors = [
@@ -42,8 +44,9 @@ for (let i = 0; i < 10; i++) {
 
   rows.push({
     id: i + 1,
-    name: `Project ${i + 1}`,
+    name: `Project sdf sdfg sdf gsdf gsdf gsdf g sdf sdf sdfg dsfg dsfg ${i + 1}`,
     items: items,
+    height: 30,
   });
 }
 
@@ -98,6 +101,13 @@ const SlotItemTemplate = (args) => ({
   template: `
   <BaseCard clipped>
     <BaseGantt v-bind="args" @item:click="onItemClick">
+      <template #row="{ row }">
+        <div class="flex w-full h-full items-center overflow-hidden hover:bg-slate-600 duration-200 text-white bg-slate-900 rounded-full">
+          <div class="flex items-center justify-center px-2">
+            <span class="truncate text-[10px] font-semibold uppercase"> {{ row.name }} </span>  
+          </div>
+        </div>
+      </template>
       <template #item="{ item }">
         <div class="flex w-full h-full items-center overflow-hidden hover:opacity-80 duration-200 bg-slate-100 hover:bg-slate-200 border border-slate-300 rounded-full">
           <div class="flex items-center justify-center">
@@ -114,7 +124,7 @@ const SlotItemTemplate = (args) => ({
 export const SlotItem = SlotItemTemplate.bind({});
 SlotItem.args = {};
 
-const SlotSidebarItemTemplate = (args) => ({
+const SlotSidebarSlotsTemplate = (args) => ({
   components: {
     BaseCard,
     BaseGantt,
@@ -130,10 +140,15 @@ const SlotSidebarItemTemplate = (args) => ({
   template: `
   <BaseCard clipped>
     <BaseGantt v-bind="args" @item:click="onItemClick">
-      <template #sidebarItem="{ row }">
-        <button class="flex items-center px-3 bg-slate-100 hover:bg-slate-300 w-full">
-          <Icon class="mr-2 h-4 w-4 text-slate-600" icon="heroicons:folder-solid" />
-          <span class="text-xs font-semibold"> {{ row.name }} </span>  
+      <template #sidebarRow="{ row }">
+        <button class="flex items-center pr-3 h-full w-full overflow-hidden">
+          <Icon class="mr-2 h-4 w-4 text-slate-600 shrink-0" icon="heroicons:folder-solid" />
+          <span class="text-xs font-semibold truncate"> {{ row.name }} </span>  
+        </button>
+      </template>
+      <template #sidebarItem="{ item }">
+        <button class="flex items-center px-3 bg-slate-100 hover:bg-slate-300 h-full w-full">
+          <span class="text-xs truncate"> {{ item.name }} </span>  
         </button>
       </template>
     </BaseGantt>
@@ -141,5 +156,5 @@ const SlotSidebarItemTemplate = (args) => ({
   `,
 });
 
-export const SlotSidebarItem = SlotSidebarItemTemplate.bind({});
-SlotSidebarItem.args = {};
+export const SlotSidebarSlots = SlotSidebarSlotsTemplate.bind({});
+SlotSidebarSlots.args = {};