sprintify-ui 0.2.9 → 0.2.11

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

@@ -1,18 +1,21 @@
 import { Notification } from '@/types/Notification';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    active: boolean;
-    notification: Notification;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    active: boolean;
-    notification: Notification;
-}>>>, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
+declare const _default: import("vue").DefineComponent<{
+    active: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    notification: {
+        type: import("vue").PropType<Notification>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    notification: {
+        type: import("vue").PropType<Notification>;
         required: true;
     };
-};
+}>>, {}, {}>;
+export default _default;

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

@@ -1,36 +1,21 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    size?: "xs" | "sm" | "lg" | "md" | undefined;
-}>, {
-    size: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    size?: "xs" | "sm" | "lg" | "md" | undefined;
-}>, {
-    size: string;
-}>>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        default: string;
+    };
+}>>, {
     size: "xs" | "sm" | "lg" | "md";
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -1,19 +1,31 @@
 import { RouteLocationRaw } from 'vue-router';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean | undefined;
-    activeStrategy?: "default" | "exact" | undefined;
-}>, {
-    disabled: boolean;
-    activeStrategy: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean | undefined;
-    activeStrategy?: "default" | "exact" | undefined;
-}>, {
-    disabled: boolean;
-    activeStrategy: string;
-}>>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    to: {
+        type: import("vue").PropType<RouteLocationRaw>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    activeStrategy: {
+        type: import("vue").PropType<"default" | "exact">;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").PropType<RouteLocationRaw>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    activeStrategy: {
+        type: import("vue").PropType<"default" | "exact">;
+        default: string;
+    };
+}>>, {
     disabled: boolean;
     activeStrategy: "default" | "exact";
 }, {}>, {
@@ -22,25 +34,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     }): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -1,19 +1,31 @@
 import { RouteLocationRaw } from 'vue-router';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean | undefined;
-    activeStrategy?: "default" | "exact" | undefined;
-}>, {
-    disabled: boolean;
-    activeStrategy: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    to: RouteLocationRaw;
-    disabled?: boolean | undefined;
-    activeStrategy?: "default" | "exact" | undefined;
-}>, {
-    disabled: boolean;
-    activeStrategy: string;
-}>>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    to: {
+        type: import("vue").PropType<RouteLocationRaw>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    activeStrategy: {
+        type: import("vue").PropType<"default" | "exact">;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").PropType<RouteLocationRaw>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    activeStrategy: {
+        type: import("vue").PropType<"default" | "exact">;
+        default: string;
+    };
+}>>, {
     disabled: boolean;
     activeStrategy: "default" | "exact";
 }, {}>, {
@@ -22,25 +34,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     }): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -1,36 +1,21 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    size?: "xs" | "sm" | "lg" | "md" | undefined;
-}>, {
-    size: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    size?: "xs" | "sm" | "lg" | "md" | undefined;
-}>, {
-    size: string;
-}>>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    size: {
+        type: import("vue").PropType<"xs" | "sm" | "lg" | "md">;
+        default: string;
+    };
+}>>, {
     size: "xs" | "sm" | "lg" | "md";
 }, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -0,0 +1,24 @@
+import { DateTime } from "luxon";
+import { FormatConfig, GanttItem, GanttItemFormatted, GanttRow, GanttRowFormatted } from "./types";
+export declare class Format {
+    private rows;
+    private config;
+    constructor(config: FormatConfig);
+    handle(): {
+        rows: GanttRowFormatted[];
+        min: DateTime;
+        max: DateTime;
+        millisecondToPixel: number;
+        height: number;
+        width: number;
+        groups: import("./types").Group[];
+        ticks: import("./types").Tick[];
+    };
+    formatGanttRows(): GanttRowFormatted[];
+    formatGanttRow(row: GanttRow): GanttRowFormatted;
+    formatGanttItem(item: GanttItem): GanttItemFormatted;
+    getMinMax(rowsFormatted: GanttRowFormatted[]): {
+        min: DateTime;
+        max: DateTime;
+    };
+}

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

@@ -0,0 +1,26 @@
+import { DateTime } from "luxon";
+import { Group, Tick } from "./types";
+export declare class Timescale {
+    private minWidth;
+    private width;
+    private min;
+    private max;
+    private scale;
+    private millisecondToPixel;
+    constructor(minWidth: number, min: DateTime, max: DateTime);
+    handle(): {
+        groups: Group[];
+        ticks: Tick[];
+        width: number;
+        millisecondToPixel: number;
+        min: DateTime;
+        max: DateTime;
+    };
+    private getMillisecondToPixel;
+    private getGroups;
+    private getTicks;
+    private getDiffFromMin;
+    private diffInMilliseconds;
+    private mutateGroupsToKeepOneVisible;
+    private getScale;
+}

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

@@ -0,0 +1,67 @@
+import { DateTime, DateTimeUnit } from "luxon";
+export interface GanttItem {
+    id: number;
+    start: string;
+    end: string;
+    name: string;
+    meta?: Record<string, unknown>;
+    color: string;
+}
+export interface GanttRow {
+    id: number;
+    name: string;
+    meta?: Record<string, unknown>;
+    items: GanttItem[];
+}
+export interface GanttRowFormatted {
+    id: number;
+    name: string;
+    meta?: Record<string, unknown>;
+    items: GanttItemFormatted[];
+}
+export interface GanttItemFormatted {
+    id: number;
+    start: DateTime;
+    end: DateTime;
+    name: string;
+    meta?: Record<string, unknown>;
+    color: string;
+    milliseconds: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface FormatConfig {
+    rows: GanttRow[];
+    minWidth: number;
+    rowHeight: number;
+    rowPadding: number;
+}
+export interface Tick {
+    date: DateTime;
+    x: number;
+    width: number;
+    label: string;
+    align: "start" | "middle" | string;
+}
+export interface Group {
+    date: DateTime;
+    x: number;
+    width: number;
+    label: string;
+    labelX: number;
+    labelTextAnchor: "start" | "middle" | "end";
+}
+export interface Scale {
+    tick: {
+        step: DateTimeUnit;
+        format: string;
+        size: number;
+        align: "start" | "middle" | string;
+    };
+    group: {
+        step: DateTimeUnit;
+        format: string;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseGantt.stories.js

@@ -0,0 +1,130 @@
+import { DateTime } from 'luxon';
+import BaseGantt from './BaseGantt.vue';
+import defaultColors from 'tailwindcss/colors';
+import { Icon } from '@iconify/vue';
+import BaseCard from './BaseCard.vue';
+import { random } from 'lodash';
+
+const rows = [];
+
+for (let i = 0; i < 10; i++) {
+
+  const items = [];
+
+  for (let j = 0; j < 3; j++) {
+
+    const start = DateTime.now().plus({ days: j * 1 });
+    const end = start.plus({ days: 0.5 });
+
+    const colors = ['blue', 'green', 'red', 'yellow', 'indigo', 'pink', 'purple', 'gray'];
+
+    const colorKey = random(0, colors.length - 1);
+
+    const color = defaultColors[colors[colorKey]][500];
+
+    items.push({
+      id: j + 1,
+      name: `Item ${j + 1}`,
+      start: start.toISO(),
+      end: end.toISO(),
+      color: color,
+    });
+  }
+
+  rows.push({
+    id: i + 1,
+    name: `Project ${i + 1}`,
+    items: items,
+  });
+}
+
+
+export default {
+  title: 'Form/BaseGantt',
+  component: BaseGantt,
+  args: {
+    rows,
+    maxHeight: 300,
+  }
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCard,
+    BaseGantt,
+  },
+  setup() {
+
+    function onItemClick(item) {
+      alert(`Item "${item.name}" clicked`);
+    }
+
+    return { args, onItemClick };
+  },
+  template: `
+  <BaseCard clipped>
+    <BaseGantt v-bind="args" @item:click="onItemClick">
+    </BaseGantt>
+  </BaseCard>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const SlotItemTemplate = (args) => ({
+  components: {
+    BaseCard,
+    BaseGantt,
+  },
+  setup() {
+    function onItemClick(item) {
+      alert(`Item "${item.name}" clicked`);
+    }
+
+    return { args, onItemClick };
+  },
+  template: `
+  <BaseCard clipped>
+    <BaseGantt v-bind="args" @item:click="onItemClick">
+      <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">
+            <span class="h-2 w-2 rounded-full shrink-0 mr-2 ml-2" :style="{backgroundColor: item.color}"></span>
+            <span class="truncate text-[10px] font-semibold uppercase"> {{ item.name }} </span>  
+          </div>
+        </div>
+      </template>
+    </BaseGantt>
+  </BaseCard>
+  `,
+});
+
+export const SlotItem = SlotItemTemplate.bind({});
+SlotItem.args = {};
+
+const SlotSidebarItemTemplate = (args) => ({
+  components: {
+    BaseCard,
+    BaseGantt,
+    Icon,
+  },
+  setup() {
+    return { 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>  
+        </button>
+      </template>
+    </BaseGantt>
+  </BaseCard>
+  `,
+});
+
+export const SlotSidebarItem = SlotSidebarItemTemplate.bind({});
+SlotSidebarItem.args = {};