sprintify-ui 0.0.11 → 0.0.12

package/dist/types/src/components/index.d.ts

@@ -25,9 +25,32 @@ import BaseDialog from './BaseDialog.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
 import BaseFileUploader from './BaseFileUploader.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
+import BaseInput from './BaseInput.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseMenuItem from './BaseMenuItem.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
+import BaseModalSide from './BaseModalSide.vue';
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BasePagination from './BasePagination.vue';
+import BasePanel from './BasePanel.vue';
+import BasePassword from './BasePassword.vue';
+import BaseProcessRing from './BaseProcessRing.vue';
+import BaseReadMore from './BaseReadMore.vue';
+import BaseSelect from './BaseSelect.vue';
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseSwitch from './BaseSwitch.vue';
+import BaseSystemAlert from './BaseSystemAlert.vue';
+import BaseTextarea from './BaseTextarea.vue';
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
 import BaseTable from './BaseTable.vue';
 import BaseTableColumn from './BaseTableColumn.vue';
-export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseIcon, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseTable, BaseTableColumn, };
+export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTextarea, BaseTextareaAutoresize, BaseCharacterCounter, BaseTabs, BaseTabItem, BaseTable, BaseTableColumn, };

package/dist/types/src/index.d.ts

@@ -30,6 +30,7 @@ declare const messages: {
             month: string;
             next: string;
             next_month: string;
+            none: string;
             nothing_found: string;
             or: string;
             pagination_detail: string;
@@ -87,6 +88,7 @@ declare const messages: {
             month: string;
             next: string;
             next_month: string;
+            none: string;
             nothing_found: string;
             or: string;
             pagination_detail: string;
@@ -155,6 +157,7 @@ declare const config: {
                 month: string;
                 next: string;
                 next_month: string;
+                none: string;
                 nothing_found: string;
                 or: string;
                 pagination_detail: string;
@@ -212,6 +215,7 @@ declare const config: {
                 month: string;
                 next: string;
                 next_month: string;
+                none: string;
                 nothing_found: string;
                 or: string;
                 pagination_detail: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",

package/src/components/BaseCharacterCounter.stories.js

@@ -0,0 +1,30 @@
+import BaseCharacterCounter from './BaseCharacterCounter.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Components/BaseCharacterCounter',
+  component: BaseCharacterCounter,
+  args: {
+    text: 'Test',
+    max: 100,
+    min: 10,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseCharacterCounter,
+    BaseInput,
+  },
+  setup() {
+    const text = ref('bla bla');
+    return { args, text };
+  },
+  template: `
+    <BaseInput v-model="text" name="test" class="w-full mb-1"></BaseInput>
+    <BaseCharacterCounter v-bind="args" :text="text" class="text-xs text-slate-500"></BaseCharacterCounter>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseCharacterCounter.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div
+      v-if="max && (!min || length >= min)"
+      :class="{
+        'text-red-600': length > max,
+      }"
+    >
+      {{ length }}/{{ max }}
+    </div>
+    <div v-else-if="min && length < min" class="text-red-600">
+      {{ $t('sui.min_x_characters', { x: min }) }} ({{ length }}/{{ min }})
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { trim } from 'lodash';
+
+const props = defineProps({
+  text: {
+    required: true,
+    type: String,
+  },
+  min: {
+    default: undefined,
+    type: Number,
+  },
+  max: {
+    default: undefined,
+    type: Number,
+  },
+  trim: {
+    default: true,
+    type: Boolean,
+  },
+  removeDoubleSpaces: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const trimmedText = computed(() => {
+  let text = props.text;
+
+  if (props.trim) {
+    text = trim(props.text);
+  }
+
+  if (props.removeDoubleSpaces) {
+    text = text.replace(/ +(?= )/g, '');
+  }
+
+  return text;
+});
+
+const length = computed(() => {
+  return trimmedText.value.length;
+});
+</script>

package/src/components/BaseDataIterator.stories.js

@@ -60,9 +60,9 @@ const template = `
         <BaseSelect
           :model-value="query.type ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('type', $event)"
         >
-          <option value="">-</option>
           <option value="video">
             Video
           </option>
@@ -78,9 +78,9 @@ const template = `
         <BaseSelect
           :model-value="query.access_level ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('access_level', $event)"
         >
-          <option value="">-</option>
           <option value="public">
             Public
           </option>

package/src/components/BaseDataIterator.vue

@@ -11,12 +11,12 @@
         :class="{ 'col-span-1': !mobileLayout, 'col-span-2': mobileLayout }"
       >
         <!-- Header -->
-        <div class="mb-4 flex space-x-2 empty:mb-0">
+        <div class="flex mb-4 space-x-2 empty:mb-0">
           <!-- Search bar -->
           <div v-if="searchable" class="grow">
             <div class="relative h-11">
               <div
-                class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
+                class="flex pointer-events-none absolute top-0 left-0 h-full items-center justify-center pl-2.5"
               >
                 <BaseIcon
                   class="h-6 w-6 text-slate-400"
@@ -33,7 +33,7 @@
               />
               <div
                 v-if="searchQuery"
-                class="absolute top-0 right-0 flex h-full items-center justify-center p-1"
+                class="flex absolute top-0 right-0 h-full items-center justify-center p-1"
               >
                 <button
                   type="button"
@@ -55,15 +55,15 @@
           <!-- Filters (mobile) -->
           <button
             v-if="mobileLayout && hasFilters"
-            class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
+            class="flex btn h-11 items-center justify-center py-1 text-base shadow-sm"
             type="button"
             @click="showFilters = true"
           >
             <BaseIcon
-              class="mr-2 h-6 w-6 text-slate-500"
+              class="h-6 w-6 text-slate-500 xs:mr-2"
               icon="heroicons:adjustments-horizontal-solid"
             />
-            <span>{{ $t('sui.filters') }}</span>
+            <span class="hidden xs:block">{{ $t('sui.filters') }}</span>
           </button>
 
           <!-- Menu -->
@@ -99,38 +99,32 @@
 
         <!-- Pagination -->
 
+        <div class="mt-5">
+          <p class="text-center text-xs text-slate-400 sm:text-right">
+            {{
+              (paginationMetadata.current_page - 1) *
+                paginationMetadata.per_page +
+              1
+            }}
+            -
+            {{
+              $t('sui.pagination_detail', {
+                page: Math.min(
+                  paginationMetadata.current_page * paginationMetadata.per_page,
+                  paginationMetadata.total
+                ),
+                total: paginationMetadata.total,
+              })
+            }}
+          </p>
+        </div>
+
         <div class="mt-4">
-          <div
-            class="flex flex-wrap xs:flex-nowrap xs:items-center xs:justify-between"
-          >
-            <div class="flex items-center space-x-3">
-              <BasePaginationSimple
-                :model-value="page"
-                :last-page="lastPage"
-                @model-value:update="onPageChange"
-              />
-              <div>
-                <p class="text-sm text-slate-600">
-                  {{
-                    (paginationMetadata.current_page - 1) *
-                      paginationMetadata.per_page +
-                    1
-                  }}
-                  -
-                  {{
-                    $t('sui.pagination_detail', {
-                      page: Math.min(
-                        paginationMetadata.current_page *
-                          paginationMetadata.per_page,
-                        paginationMetadata.total
-                      ),
-                      total: paginationMetadata.total,
-                    })
-                  }}
-                </p>
-              </div>
-            </div>
-          </div>
+          <BasePagination
+            :model-value="page"
+            :last-page="lastPage"
+            @update:model-value="onPageChange"
+          />
         </div>
       </div>
 
@@ -216,7 +210,7 @@ import {
 import BaseMenu from './BaseMenu.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
-import BasePaginationSimple from './BasePaginationSimple.vue';
+import BasePagination from './BasePagination.vue';
 import BaseModalSide from './BaseModalSide.vue';
 import { config } from '@/index';
 import { useMutationObserver, useResizeObserver } from '@vueuse/core';

package/src/components/BaseDataTable.stories.js

@@ -87,9 +87,9 @@ const template = `
         <BaseSelect
           :model-value="query.type ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('type', $event)"
         >
-          <option value="">-</option>
           <option value="video">
             Video
           </option>
@@ -105,9 +105,9 @@ const template = `
         <BaseSelect
           :model-value="query.access_level ?? null"
           class="w-full rounded border-slate-300"
+          placeholder="-"
           @update:model-value="updateQueryValue('access_level', $event)"
         >
-          <option value="">-</option>
           <option value="public">
             Public
           </option>

package/src/components/BaseFileUploader.vue

@@ -92,6 +92,10 @@ const emit = defineEmits([
 const uploading = ref(false);
 
 async function onFileSelect(file: File) {
+  if (uploading.value) {
+    return;
+  }
+
   uploading.value = true;
 
   if (!(await props.beforeUpload())) {

package/src/components/BaseInput.stories.js

@@ -0,0 +1,46 @@
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Form/BaseInput',
+  component: BaseInput,
+  args: {
+    required: true,
+    type: 'text',
+    name: 'name',
+    class: 'w-full',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseInput,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseInput v-model="value" v-bind="args"></BaseInput>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  placeholder: 'Enter your name',
+};
+
+export const Number = Template.bind({});
+Number.args = {
+  type: 'number',
+  step: 0.1,
+  placeholder: 'Enter a number',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Disabled input!',
+  disabled: true,
+  placeholder: 'Enter your name',
+};

package/src/components/BaseInput.vue

@@ -4,10 +4,11 @@
     :value="modelValue"
     :type="type"
     :name="name"
+    :step="step"
     :disabled="disabled"
     :placeholder="placeholder"
     :required="required"
-    class="rounded"
+    class="rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
     :autocomplete="autocomplete ? 'on' : 'off'"
     @keydown.enter="onEnter"
     @input="$emit('update:modelValue', transformInputValue($event))"
@@ -20,17 +21,24 @@ import { PropType } from 'vue';
 
 const props = defineProps({
   modelValue: {
-    required: true,
+    default: '',
     type: [String, Number, null] as PropType<string | number | null>,
   },
   type: {
     type: String,
     default: 'text',
   },
+  step: {
+    default: undefined,
+    type: Number,
+  },
   autocomplete: {
     default: true,
     type: Boolean,
   },
+  /**
+   * Prevents submit when pressing 'Enter' while the input is focused.
+   */
   preventSubmit: {
     default: false,
     type: Boolean,

package/src/components/BaseInputLabel.stories.js

@@ -0,0 +1,31 @@
+import BaseInputLabel from './BaseInputLabel.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Form/BaseInputLabel',
+  component: BaseInputLabel,
+  args: {
+    required: true,
+    label: 'First Name',
+    class: 'text-slate-600 block text-sm',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseInputLabel,
+    BaseInput,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <form @submit.prevent="">
+    <BaseInputLabel v-bind="args"></BaseInputLabel>
+    <BaseInput required name="name" placeholder="Enter your first name"></BaseInput>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseInputLabel.vue

@@ -18,7 +18,7 @@ export default defineComponent({
       type: String,
     },
     classes: {
-      default: 'form-input-label mb-1',
+      default: 'mb-1 block text-sm',
       type: String,
     },
   },

package/src/components/BaseLoadingCover.stories.js

@@ -0,0 +1,55 @@
+import BaseLoadingCover from './BaseLoadingCover.vue';
+
+export default {
+  title: 'Layout/BaseLoadingCover',
+  component: BaseLoadingCover,
+  args: {
+    delay: 0,
+    modelValue: true,
+    size: 'sm',
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseLoadingCover,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div class="relative bg-slate-100 p-6 py-10">
+      <p class="text-center text-slate-700">Non dolor consectetur et occaecat.</p>
+      <BaseLoadingCover v-bind="args" />
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SmallSpinner = Template.bind({});
+SmallSpinner.args = {
+  size: 'sm',
+};
+
+export const LargeSpinner = Template.bind({});
+LargeSpinner.args = {
+  size: 'lg',
+};
+
+export const SpinnerCustomClass = Template.bind({});
+SpinnerCustomClass.args = {
+  iconClass: 'text-red-500 w-10 h-10',
+};
+
+export const BackdropCustomClass = Template.bind({});
+BackdropCustomClass.args = {
+  backdropClass: 'bg-slate-100 opacity-50',
+};

package/src/components/BaseLoadingCover.vue

@@ -25,28 +25,46 @@ import BaseSpinnerSmall from '../svg/BaseSpinnerSmall.vue';
 import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const props = defineProps({
+  /**
+   * Show/Hide the loading cover
+   */
   modelValue: {
     default: true,
     type: Boolean,
   },
+  /**
+   * Classes added to the backdrop
+   */
   backdropClass: {
     default: 'bg-white',
     type: String,
   },
+  /**
+   * Classes added to the spinner icon
+   */
   iconClass: {
     default: 'text-blue-500 w-10 h-10',
     type: String,
   },
+  /**
+   * Change the type of spinner. 'sm' for a small spinner. 'lg' for a large spinner.
+   */
   size: {
     default: 'sm',
     type: String as PropType<'sm' | 'lg'>,
   },
+  /**
+   * Transition duration class.
+   */
   duration: {
     default: 'duration-300',
     type: String,
   },
+  /**
+   * Delay before showing the loading cover. This delay is used to avoid unnecessary showing the spinner for a fraction of second when the loading time is too short.
+   */
   delay: {
-    default: 330,
+    default: 0,
     type: Number,
   },
 });