sprintify-ui 0.8.3 → 0.8.5

package/src/assets/flatpickr.css

@@ -20,15 +20,15 @@
 
 .flatpickr-calendar {
     border: inherit;
-    @apply bg-white dark:bg-slate-800 rounded shadow-lg border border-slate-200 dark:border-slate-700 left-1/2;
+    @apply bg-white rounded shadow-lg border border-slate-200 left-1/2;
     padding: var(--calendarPadding);
-    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
+    width: calc(var(--daysWidth) + calc(var(--calendarPadding)*3));
 }
 
 .flatpickr-calendar.inline {
     position: static;
     width: 100%;
-    @apply bg-white pt-3 px-1 dark:bg-slate-800 border-0 shadow-none;
+    @apply bg-white pt-3 px-1 border-0 shadow-none;
 }
 
 @screen lg {
@@ -67,7 +67,7 @@
 }
 
 .flatpickr-day {
-    @apply bg-slate-50 dark:bg-slate-700/20 text-sm font-medium text-slate-600 dark:text-slate-100;
+    @apply text-sm font-medium text-slate-600;
     max-width: var(--daySize);
     height: var(--daySize);
     line-height: var(--daySize);
@@ -101,7 +101,7 @@
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
 .flatpickr-day.endRange.startRange.endRange {
-    border-radius: 0;
+    @apply rounded-none;
 }
 
 .flatpickr-day.flatpickr-disabled,
@@ -111,7 +111,7 @@
 .flatpickr-day.notAllowed,
 .flatpickr-day.notAllowed.prevMonthDay,
 .flatpickr-day.notAllowed.nextMonthDay {
-    @apply text-slate-400 dark:text-slate-500;
+    @apply text-slate-400;
 }
 
 .rangeMode .flatpickr-day {
@@ -136,7 +136,7 @@
 .flatpickr-day.selected.nextMonthDay,
 .flatpickr-day.startRange.nextMonthDay,
 .flatpickr-day.endRange.nextMonthDay {
-    @apply bg-primary-500 text-primary-50;
+    @apply bg-primary-600 text-primary-50;
 }
 
 .flatpickr-day.inRange,
@@ -153,7 +153,11 @@
 .flatpickr-day.nextMonthDay:focus,
 .flatpickr-day.today:hover,
 .flatpickr-day.today:focus {
-    @apply bg-primary-400 text-primary-50;
+    @apply bg-primary-500 text-primary-50;
+}
+
+.flatpickr-day.today {
+    @apply ring-1 ring-inset ring-primary-500;
 }
 
 .flatpickr-day.inRange,
@@ -173,7 +177,7 @@
 .flatpickr-months .flatpickr-next-month {
     position: static;
     height: auto;
-    @apply text-slate-600 hover:text-slate-900 dark:text-slate-500 dark:hover:text-slate-300;    
+    @apply text-slate-600 hover:text-slate-900;    
 }
 
 .flatpickr-months .flatpickr-prev-month svg,
@@ -197,7 +201,7 @@
 }
 
 .flatpickr-months .flatpickr-month {
-    @apply text-slate-800 dark:text-slate-100;
+    @apply text-slate-800;
     height: auto;
     line-height: inherit;
 }
@@ -233,7 +237,7 @@
 }
 
 span.flatpickr-weekday {
-    @apply text-slate-400 dark:text-slate-500 font-medium text-xs;
+    @apply text-slate-400 font-medium text-xs;
 }
 
 .flatpickr-calendar.arrowTop::before,

package/src/components/BaseCollapse.stories.js

@@ -0,0 +1,169 @@
+import { method } from 'lodash';
+import BaseCollapse from './BaseCollapse.vue';
+
+export default {
+    title: 'Components/BaseCollapse',
+    component: BaseCollapse,
+    args: {},
+    argTypes: {
+        defaultOpen: {
+            control: { type: 'boolean' },
+        },
+        icon: {
+            control: { type: 'text' },
+        },
+        isOpenIconClass: {
+            control: { type: 'text' },
+        },
+        isCloseIconClass: {
+            control: { type: 'text' },
+        },
+        twIcon: {
+            control: { type: 'text' },
+        },
+        twHeader: {
+            control: { type: 'text' },
+        },
+        twContent: {
+            control: { type: 'text' },
+        },
+        twTitle: {
+            control: { type: 'text' },
+        },
+        iconPosition: {
+            control: { type: 'select' },
+            options: ['left', 'right'],
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { BaseCollapse },
+    setup() {
+        return { args };
+    },
+    template: `
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content={isOpen}>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse> 
+
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse> 
+
+    <BaseCollapse v-bind="args" class="mb-1">
+        <template #title>
+            <h6 class="font-semibold"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+    
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+    defaultOpen: false,
+};
+
+
+const CustomHeaderTemplate = (args) => ({
+    components: { BaseCollapse },
+    setup() {
+        return { args };
+    },
+    method: {
+        toggle() {
+            this.defaultOpen = !this.defaultOpen;
+        },
+    },
+    template: `
+    
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    <BaseCollapse v-bind="args" class="mb-3">
+        <template #header={toggle}>
+            <h6 class="cursor-pointer hover:text-slate-400" @click="toggle()"> Qu'est-ce que le Lorem Ipsum? </h6>
+        </template>
+        <template #content>
+            <p class="p-3">
+                Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
+            </p>
+        </template>
+    </BaseCollapse>
+
+    `,
+    argTypes: {
+        defaultOpen: {
+            control: { type: 'boolean' },
+        },
+        icon: {
+            control: { type: 'text' },
+        },
+        isOpenIconClass: {
+            control: { type: 'text' },
+        },
+        isCloseIconClass: {
+            control: { type: 'text' },
+        },
+        twIcon: {
+            control: { type: 'text' },
+        },
+        twHeader: {
+            control: { type: 'text' },
+        },
+        twContent: {
+            control: { type: 'text' },
+        },
+        twTitle: {
+            control: { type: 'text' },
+        },
+        iconPosition: {
+            control: { type: 'select' },
+            options: ['left', 'right'],
+        },
+    }
+});
+export const CustomHeader = CustomHeaderTemplate.bind({});
+
+CustomHeader.args = {
+    defaultOpen: false,
+};

package/src/components/BaseCollapse.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <div>
+      <slot
+        name="header"
+        :open="isOpen"
+        :toggle="toggle"
+      >
+        <button
+          :class="headerClass"
+          type="button"
+          @click="toggle()"
+        >
+          <BaseIcon
+            v-if="iconPosition === 'left'"
+            :class="internalIconClass"
+            :icon="icon"
+          />
+        
+          <div :class="internalTitleClass">
+            <slot
+              name="title"
+              :open="isOpen"
+            />
+          </div>
+          <BaseIcon
+            v-if="iconPosition === 'right'"
+            :class="internalIconClass"
+            :icon="icon"
+          />
+        </button>
+      </slot>
+    </div>
+  
+    <div
+      v-show="isOpen"
+      :class="internalContentClass"
+    >
+      <slot
+        name="content"
+        :open="isOpen"
+      />
+    </div>
+  </div>
+</template>
+  
+<script lang="ts" setup>
+
+import { twMerge } from 'tailwind-merge';
+
+const internalIconClass = computed(() => {
+  const base = "w-6 h-6 flex items-center justify-center transition duration-300 ease-in-out transform cursor-pointer";
+
+  return twMerge(base, props.twIcon, isOpen.value ? props.isOpenIconClass : props.isCloseIconClass,);
+});
+
+const headerClass = computed(() => {
+  return twMerge('flex items-center w-full space-x-1', props.twHeader);
+});
+
+const internalContentClass = computed(() => {
+  return twMerge('transition duration-300 ease-in-out transform', props.twContent);
+});
+
+const internalTitleClass = computed(() => {
+  return twMerge(props.twTitle, '');
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+
+const props = withDefaults(defineProps<{
+  defaultOpen?: boolean;
+  icon?: string;
+  iconPosition?: 'left' | 'right';
+  isOpenIconClass?: string;
+  isCloseIconClass?: string;
+  twIcon?: string | string[] | null;
+  twHeader?: string | string[] | null;
+  twTitle?: string | string[] | null;
+  twContent?: string | string[] | null;
+}>(), {
+  defaultOpen: true,
+  icon: 'heroicons:chevron-down-16-solid',
+  iconPosition: 'left',
+  twIcon: null,
+  twHeader: null,
+  twTitle: null,
+  twContent: null,
+  isOpenIconClass: '-rotate-0',
+  isCloseIconClass: '-rotate-90',
+});
+
+const isOpen = ref(props.defaultOpen as boolean);
+
+</script>

package/src/components/index.ts

@@ -20,6 +20,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClipboard from './BaseClipboard.vue';
 import BaseCalendar from './BaseCalendar.vue';
+import BaseCollapse from './BaseCollapse.vue';
 import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
@@ -127,6 +128,7 @@ export {
   BaseCharacterCounter,
   BaseClipboard,
   BaseCalendar,
+  BaseCollapse,
   BaseColor,
   BaseContainer,
   BaseCounter,
@@ -135,7 +137,6 @@ export {
   BaseDataIterator,
   BaseDataTable,
   BaseDatePicker,
-  BaseTimePicker,
   BaseDateSelect,
   BaseDescriptionList,
   BaseDescriptionListItem,
@@ -203,6 +204,7 @@ export {
   BaseTextareaAutoresize,
   BaseTimeline,
   BaseTimelineItem,
+  BaseTimePicker,
   BaseTooltip,
   BaseUniqueCode,
   BaseLayoutStacked,

package/src/types/index.ts

@@ -120,10 +120,6 @@ export interface BaseTableColumnData {
   style: {
     width: undefined | number;
   };
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  thAttrs: (column: BaseTableColumnData) => Record<string, any>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  tdAttrs: (row: Row, column: BaseTableColumnData) => Record<string, any>;
 }
 
 /**