sprintify-ui 0.0.131 → 0.0.133

package/src/components/BaseAutocompleteFetch.vue

@@ -51,7 +51,7 @@
 <script lang="ts" setup>
 import { config } from '@/index';
 import { debounce, throttle } from 'lodash';
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { Option, SelectConfiguration } from '@/types';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 
@@ -153,11 +153,9 @@ const firstSearch = ref(false);
 const reachedEnd = ref(false);
 const keywords = ref('');
 const page = ref(1);
-const options = ref([]) as Ref<Option[]>;
+const options = ref<Option[]>([]);
 
-const autocomplete = ref(null) as Ref<InstanceType<
-  typeof BaseAutocomplete
-> | null>;
+const autocomplete = ref<InstanceType<typeof BaseAutocomplete> | null>(null);
 
 const onTyping = (query: string) => {
   page.value = 1;

package/src/components/BaseBelongsTo.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
@@ -124,9 +124,9 @@ const http = config.http;
 
 const emit = defineEmits(['update:modelValue']);
 
-const autocompleteFetch = ref(null) as Ref<InstanceType<
+const autocompleteFetch = ref<InstanceType<
   typeof BaseAutocompleteFetch
-> | null>;
+> | null>(null);
 
 const model = ref(props.currentModel);
 

package/src/components/BaseCard.vue

@@ -13,7 +13,6 @@
 
 <script lang="ts" setup>
 import { debounce } from 'lodash';
-import { Ref } from 'vue';
 
 defineProps({
   clipped: {
@@ -25,7 +24,7 @@ defineProps({
 // windowWidth should not be equal to width when the card is mounted
 const windowWidth = ref(1);
 const width = ref(0);
-const card = ref(null) as Ref<HTMLElement | null>;
+const card = ref<HTMLElement | null>(null);
 
 onMounted(() => {
   window.addEventListener('resize', onResizeDebounced);

package/src/components/BaseDataIterator.vue

@@ -137,7 +137,25 @@
         <div v-if="hasFilters" class="mb-4">
           <BaseCard>
             <BaseCardRow size="sm">
-              <div class="space-y-3">
+              <button
+                type="button"
+                class="flex w-full items-center justify-between"
+                @click="showFilterDesktop = !showFilterDesktop"
+              >
+                <h2 class="font-semibold">
+                  {{ $t('sui.filters') }}
+                </h2>
+
+                <BaseIcon
+                  :icon="
+                    showFilterDesktop
+                      ? 'heroicons:chevron-down'
+                      : 'heroicons:chevron-up'
+                  "
+                ></BaseIcon>
+              </button>
+
+              <div v-show="showFilterDesktop" class="mt-4 space-y-3">
                 <slot
                   name="filters"
                   :query="query"
@@ -197,7 +215,7 @@ const DEFAULT_QUERY = {
 <script lang="ts" setup>
 import { cloneDeep, debounce, isArray, merge, set } from 'lodash';
 import hash from 'object-hash';
-import { ComputedRef, PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import {
   Collection,
   DataTableQuery,
@@ -281,8 +299,8 @@ defineEmits([
   'update:query',
 ]);
 
-const dataIteratorNode = ref(null) as Ref<null | HTMLElement>;
-const searchInput = ref(null) as Ref<null | HTMLInputElement>;
+const dataIteratorNode = ref<null | HTMLElement>(null);
+const searchInput = ref<null | HTMLInputElement>(null);
 
 const route = useRoute();
 const router = useRouter();
@@ -309,7 +327,7 @@ const searchQuery = ref('');
 
 let lastUrl = '';
 let lastQueryHash = '';
-const query = ref(cloneDeep(props.defaultQuery)) as Ref<DataTableQuery>;
+const query = ref<DataTableQuery>(cloneDeep(props.defaultQuery));
 const slots = useSlots();
 
 const mobileLayout = computed(() => {
@@ -328,7 +346,7 @@ const hasFilters = computed((): boolean => {
 */
 
 const hasSidebar = ref(false);
-const sidebar = ref(null) as Ref<null | HTMLElement>;
+const sidebar = ref<null | HTMLElement>(null);
 
 function checkIfSidebarIsEmpty() {
   hasSidebar.value = (sidebar?.value?.childElementCount ?? 0) > 0;
@@ -355,6 +373,8 @@ watch(
   }
 );
 
+const showFilterDesktop = ref(true);
+
 /*
 |--------------------------------------------------------------------------
 | Query params
@@ -420,9 +440,9 @@ function queryHash(query: DataTableQuery): string {
 |--------------------------------------------------------------------------
 */
 
-const url = computed(() => {
+const url = computed<string>(() => {
   return props.url;
-}) as ComputedRef<string>;
+});
 
 /*
 |--------------------------------------------------------------------------
@@ -591,9 +611,9 @@ function fetch(force = false, showLoading = true) {
 |--------------------------------------------------------------------------
 */
 
-const data = ref(null) as Ref<
-  null | ResourceCollection | PaginatedCollection | Collection
->;
+const data = ref<null | ResourceCollection | PaginatedCollection | Collection>(
+  null
+);
 
 const items = computed(() => {
   if (!data.value) {
@@ -605,7 +625,7 @@ const items = computed(() => {
   return data.value.data;
 });
 
-const paginationMetadata = computed(() => {
+const paginationMetadata = computed<PaginationMetadata | null>(() => {
   const defaultMeta = {
     current_page: 1,
     last_page: 1,
@@ -633,7 +653,7 @@ const paginationMetadata = computed(() => {
   }
 
   return null;
-}) as ComputedRef<PaginationMetadata | null>;
+});
 
 const page = computed((): number => {
   if (query.value.page && parseInt(query.value.page + '')) {

package/src/components/BaseDataTable.vue

@@ -138,18 +138,33 @@
 
     <template v-if="toggleable" #sidebarBottom>
       <div class="mb-3">
-        <h3
-          class="mb-1 text-xs font-semibold uppercase tracking-wider text-slate-500"
-        >
-          {{ $t('sui.columns') }}
-        </h3>
         <BaseCard>
           <BaseCardRow size="sm">
-            <BaseDataTableToggleColumns
-              v-model:visibleColumns="visibleColumns"
-              :table="table"
-              @update:visible-columns="onUpdateVisibleColumn"
-            ></BaseDataTableToggleColumns>
+            <button
+              type="button"
+              class="flex w-full items-center justify-between"
+              @click="showColumnsDesktop = !showColumnsDesktop"
+            >
+              <h2 class="font-semibold">
+                {{ $t('sui.columns') }}
+              </h2>
+
+              <BaseIcon
+                :icon="
+                  showColumnsDesktop
+                    ? 'heroicons:chevron-down'
+                    : 'heroicons:chevron-up'
+                "
+              ></BaseIcon>
+            </button>
+
+            <div v-show="showColumnsDesktop" class="mt-4">
+              <BaseDataTableToggleColumns
+                v-model:visibleColumns="visibleColumns"
+                :table="table"
+                @update:visible-columns="onUpdateVisibleColumn"
+              ></BaseDataTableToggleColumns>
+            </div>
           </BaseCardRow>
         </BaseCard>
       </div>
@@ -158,7 +173,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { CollectionItem, DataTableQuery, MenuItemInterface } from '@/types';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useNotificationsStore } from '../stores/notifications';
@@ -180,7 +195,7 @@ const http = config.http;
 const dialogs = useDialogsStore();
 const notifications = useNotificationsStore();
 
-const table = ref(null) as Ref<null | InstanceType<typeof BaseTable>>;
+const table = ref<null | InstanceType<typeof BaseTable>>(null);
 
 const props = defineProps({
   /**
@@ -343,9 +358,7 @@ const emit = defineEmits([
   'check',
 ]);
 
-const dataIterator = ref(null) as Ref<null | InstanceType<
-  typeof BaseDataIterator
->>;
+const dataIterator = ref<null | InstanceType<typeof BaseDataIterator>>(null);
 
 /*
 |--------------------------------------------------------------------------
@@ -424,7 +437,9 @@ const onDelete = (row: CollectionItem) => {
 |--------------------------------------------------------------------------
 */
 
-const visibleColumns = ref([]) as Ref<number[]>;
+const showColumnsDesktop = ref<boolean>(false);
+
+const visibleColumns = ref<number[]>([]);
 
 // Find visible columns in local storage
 const VISIBLE_COLUMNS_LOCAL_STORAGE = 'sprintify.visible_columns.';

package/src/components/BaseDatePicker.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import Pikaday from 'pikaday';
 import { capitalize, padStart } from 'lodash';
 import { DateTime, Info } from 'luxon';
@@ -94,7 +94,7 @@ const { hasErrorInternal, emitUpdate } = useField({
 
 const i18n = useI18n();
 
-const datepicker = ref(null) as Ref<HTMLInputElement | null>;
+const datepicker = ref<HTMLInputElement | null>(null);
 
 const months = Info.months('long', { locale: i18n.locale.value }).map((m) =>
   capitalize(m)

package/src/components/BaseDescriptionListItem.vue

@@ -24,12 +24,11 @@
 <script lang="ts" setup>
 import { useResizeObserver } from '@vueuse/core';
 import { debounce } from 'lodash';
-import { Ref } from 'vue';
 import breakpoints from '../../config/breakpoints.json';
 
 const DEFAULT_WIDTH = 800;
 
-const item = ref(null) as Ref<HTMLElement | null>;
+const item = ref<HTMLElement | null>(null);
 const width = ref(DEFAULT_WIDTH);
 
 const mobile = computed(() => {

package/src/components/BaseDialog.vue

@@ -76,7 +76,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 
 defineProps({
@@ -110,7 +110,7 @@ defineProps({
 
 defineEmits(['cancel', 'confirm']);
 
-const confirm = ref(null) as Ref<HTMLButtonElement | null>;
+const confirm = ref<HTMLButtonElement | null>(null);
 
 onMounted(() => {
   if (confirm.value) {

package/src/components/BaseDisplayRelativeTime.vue

@@ -7,9 +7,7 @@
     :role="showTooltip ? 'tooltip' : undefined"
   >
     <slot name="default" :readable-date="readableDate">
-      <span
-        class="cursor-pointer rounded-full px-3 py-1 text-xs text-slate-600 hover:bg-slate-50"
-      >
+      <span class="text-xs text-slate-600">
         {{ readableDate }}
       </span>
     </slot>
@@ -26,7 +24,7 @@ const props = defineProps({
     type: String,
   },
   showTooltip: {
-    default: true,
+    default: false,
     type: Boolean,
   },
   tooltipPosition: {

package/src/components/BaseDropdownAutocomplete.vue

@@ -61,7 +61,7 @@
 
 <script lang="ts" setup>
 import { isArray } from 'lodash';
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { Option, SelectConfiguration } from '@/types';
 import BaseDropdown from './BaseDropdown.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
@@ -147,9 +147,9 @@ const componentName = computed(() => {
   console.error('BaseDropdownAutocomplete: options or url is required');
 });
 
-const autocomplete = ref(null) as Ref<any>;
+const autocomplete = ref<any>(null);
 
-const newValue = ref(null) as Ref<any>;
+const newValue = ref<any>(null);
 
 const autocompleteProps = computed(() => {
   const newProps = {} as any;

package/src/components/BaseForm.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { serialize } from 'object-to-formdata';
 import { Method, DataFormat } from '@/types';
 import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
@@ -110,10 +110,10 @@ const props = defineProps({
 const i18n = useI18n();
 const emit = defineEmits(['error', 'success']);
 
-const form = ref(null) as Ref<null | HTMLFormElement>;
+const form = ref<null | HTMLFormElement>(null);
 const loading = ref(false);
 const disabled = ref(false);
-const errors = ref({}) as Ref<Record<string, string[]>>;
+const errors = ref<Record<string, string[]>>({});
 
 const httpClient = computed((): AxiosInstance => {
   if (props.axiosInstance) {

package/src/components/BaseHasMany.vue

@@ -29,7 +29,7 @@
 import { isEqual } from 'lodash';
 import { Option } from '@/types';
 import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -82,9 +82,9 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const tagAutocompleteFetch = ref(null) as Ref<InstanceType<
+const tagAutocompleteFetch = ref<InstanceType<
   typeof BaseTagAutocompleteFetch
-> | null>;
+> | null>(null);
 
 const models = ref(props.currentModels);
 

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -4,55 +4,24 @@
       class="text-sm leading-tight text-slate-800"
       v-html="notification.text"
     ></div>
-    <p v-if="createdAt" class="mt-1 text-xs text-slate-400">
-      {{ createdAt }}
-    </p>
+    <BaseDisplayRelativeTime
+      v-if="notification.created_at"
+      v-slot="{ readableDate }"
+      :value="notification.created_at"
+    >
+      <p class="mt-1 text-xs text-slate-400">
+        {{ readableDate }}
+      </p>
+    </BaseDisplayRelativeTime>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { Notification } from '@/types/Notification';
-import { DateTime } from 'luxon';
-import { PropType } from 'vue';
-import humanizeDuration from 'humanize-duration';
+import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 
-const i18n = useI18n();
-
-const props = defineProps({
-  active: {
-    default: false,
-    type: Boolean,
-  },
-  notification: {
-    required: true,
-    type: Object as PropType<Notification>,
-  },
-});
-
-const now = ref(DateTime.now().toSeconds());
-
-const intervalId = setInterval(() => {
-  now.value += 1;
-}, 1000);
-
-const createdAt = computed(() => {
-  if (props.notification.created_at) {
-    const nowLuxon = DateTime.fromSeconds(now.value);
-    const duration = DateTime.fromISO(props.notification.created_at, {
-      zone: 'utc',
-    }).diff(nowLuxon).milliseconds;
-
-    const durationHuman = humanizeDuration(duration, {
-      language: i18n.locale.value,
-      round: true,
-      largest: 1,
-    });
-
-    return i18n.t('sui.x_ago', { duration: durationHuman });
-  }
-});
-
-onBeforeUnmount(() => {
-  clearInterval(intervalId);
-});
+defineProps<{
+  active: boolean;
+  notification: Notification;
+}>();
 </script>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -1,3 +1,4 @@
+import { DateTime } from 'luxon';
 import BaseContainer from './BaseContainer.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 
@@ -96,7 +97,7 @@ export default {
         {
           id: '1',
           text: 'You have a new message',
-          created_at: '2022-01-01T00:00:00',
+          created_at: DateTime.now().minus({ second: 1 }).toISO(),
         },
         {
           id: '2',

package/src/components/BasePagination.vue

@@ -96,7 +96,6 @@
 <script lang="ts" setup>
 import { useResizeObserver } from '@vueuse/core';
 import { debounce, isNumber, range } from 'lodash';
-import { Ref } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -116,8 +115,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:model-value']);
 
-const manualPage = ref(null) as Ref<null | string | number>;
-const manualPageMobile = ref(props.modelValue) as Ref<null | string | number>;
+const manualPage = ref<null | string | number>(null);
+const manualPageMobile = ref<null | string | number>(props.modelValue);
 
 watch(
   () => props.modelValue,
@@ -140,7 +139,7 @@ function previous() {
   updateModalValue(props.modelValue - 1);
 }
 
-const paginationNode = ref(null) as Ref<null | HTMLElement>;
+const paginationNode = ref<null | HTMLElement>(null);
 const width = ref(800);
 
 useResizeObserver(paginationNode, () => {

package/src/components/BaseReadMore.vue

@@ -20,9 +20,9 @@
 
 <script lang="ts" setup>
 import { useMutationObserver } from '@vueuse/core';
-import { Ref, StyleValue } from 'vue';
+import { StyleValue } from 'vue';
 
-const content = ref(null) as Ref<null | HTMLParagraphElement>;
+const content = ref<null | HTMLParagraphElement>(null);
 
 const props = defineProps({
   maxLines: {

package/src/components/BaseRichText.vue

@@ -162,10 +162,10 @@ function updateChange(value: string | null): string | null {
       }
     }
     blockquote {
-      @apply text-base;
+      @apply my-5 text-base;
     }
     pre {
-      @apply p-4 text-sm;
+      @apply my-5 p-4 text-sm;
     }
   }
   h1,

package/src/components/BaseSelect.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { get, isEqual } from 'lodash';
 import { useMutationObserver } from '@vueuse/core';
 import { useField } from '@/composables/field';
@@ -64,7 +64,7 @@ const props = defineProps({
   },
 });
 
-const select = ref(null) as Ref<HTMLSelectElement | null>;
+const select = ref<HTMLSelectElement | null>(null);
 
 const emit = defineEmits(['update:modelValue']);
 

package/src/components/BaseTable.vue

@@ -278,7 +278,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { PropType, ref, Ref } from 'vue';
+import { PropType, ref } from 'vue';
 import { BaseTableColumn, MenuItemInterface, Row } from '@/types';
 import SlotComponent from './SlotComponent';
 import { useResizeObserver } from '@vueuse/core';
@@ -385,16 +385,16 @@ const emit = defineEmits([
   'cell-click',
 ]);
 
-const visibleDetailRows = ref([]) as Ref<Row[]>;
-const newCheckedRows = ref([...props.checkedRows]) as Ref<Row[]>;
-const lastCheckedRowIndex = ref(null) as Ref<number | null>;
-const currentSortColumn = ref(null) as Ref<BaseTableColumn | null>;
+const visibleDetailRows = ref<Row[]>([]);
+const newCheckedRows = ref<Row[]>([...props.checkedRows]);
+const lastCheckedRowIndex = ref<number | null>(null);
+const currentSortColumn = ref<BaseTableColumn | null>(null);
 const isAsc = ref(true);
-const defaultSlots = ref([]) as Ref<BaseTableColumn[]>;
+const defaultSlots = ref<BaseTableColumn[]>([]);
 const sequence = ref(1);
 
-const slot = ref(null) as Ref<HTMLElement | null>;
-const thead = ref(null) as Ref<HTMLElement | null>;
+const slot = ref<HTMLElement | null>(null);
+const thead = ref<HTMLElement | null>(null);
 const theadHeight = ref(0);
 
 useResizeObserver(thead, () => setTheadHeightDebounce());

package/src/components/BaseTagAutocomplete.vue

@@ -89,7 +89,7 @@
 
 <script lang="ts" setup>
 import { cloneDeep, get } from 'lodash';
-import { PropType, Ref, ComputedRef } from 'vue';
+import { PropType, ComputedRef } from 'vue';
 import { NormalizedOption, Option } from '@/types';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
@@ -190,16 +190,14 @@ const hasOptions = useHasOptions(
   computed(() => true)
 );
 
-const drawer = ref(null) as Ref<InstanceType<
-  typeof BaseAutocompleteDrawer
-> | null>;
+const drawer = ref<InstanceType<typeof BaseAutocompleteDrawer> | null>(null);
 
 const keywords = ref('');
-const autocomplete = ref(null) as Ref<HTMLElement | null>;
-const inputElement = ref(null) as Ref<HTMLInputElement | null>;
+const autocomplete = ref<HTMLElement | null>(null);
+const inputElement = ref<HTMLInputElement | null>(null);
 const shouldFilter = ref(false);
 const opened = ref(false);
-const selectionToDelete = ref(null) as Ref<NormalizedOption | null>;
+const selectionToDelete = ref<NormalizedOption | null>(null);
 
 const isSelected = hasOptions.isSelected;
 const normalizedOptions = hasOptions.normalizedOptions;

package/src/components/BaseTagAutocompleteFetch.vue

@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import { debounce, throttle } from 'lodash';
 import { config } from '@/index';
-import { PropType, Ref } from 'vue';
+import { PropType } from 'vue';
 import { Option } from '@/types';
 import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 
@@ -90,9 +90,9 @@ const props = defineProps({
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
 
-const tagAutocomplete = ref(null) as Ref<InstanceType<
-  typeof BaseTagAutocomplete
-> | null>;
+const tagAutocomplete = ref<InstanceType<typeof BaseTagAutocomplete> | null>(
+  null
+);
 
 const http = config.http;
 
@@ -102,7 +102,7 @@ const firstSearch = ref(false);
 const reachedEnd = ref(false);
 const keywords = ref('');
 const page = ref(1);
-const options = ref([]) as Ref<Option[]>;
+const options = ref<Option[]>([]);
 
 const onTyping = (query: string) => {
   page.value = 1;

package/src/components/BaseTextareaAutoresize.vue

@@ -41,7 +41,6 @@
 
 <script lang="ts" setup>
 import { useField } from '@/composables/field';
-import { Ref } from 'vue';
 
 const BASE_TEXTAREA_CLASSES =
   'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border';
@@ -104,7 +103,7 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
-const wrapper = ref(null) as Ref<null | HTMLDivElement>;
+const wrapper = ref<null | HTMLDivElement>(null);
 
 const keys = {} as { [key: string]: boolean };