sprintify-ui 0.0.10 → 0.0.12

package/src/components/BaseTable.vue

@@ -6,7 +6,7 @@
 
     <div class="flex flex-col">
       <div
-        class="isolate overflow-x-auto overflow-y-auto"
+        class="overflow-x-auto overflow-y-auto"
         :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
       >
         <div class="inline-block min-w-full align-middle">
@@ -17,17 +17,19 @@
                   <th v-if="showDetailRowIcon" class="th" />
                   <th
                     v-if="checkable && checkboxPosition === 'left'"
-                    class="th pl-3"
+                    class="th py-0 pl-3"
                     align="left"
                   >
-                    <input
-                      type="checkbox"
-                      autocomplete="off"
-                      :checked="isAllChecked"
-                      :disabled="isAllUncheckable"
-                      :class="checkboxStyle"
-                      @change="checkAll"
-                    />
+                    <div class="flex items-center">
+                      <input
+                        type="checkbox"
+                        autocomplete="off"
+                        :checked="isAllChecked"
+                        :disabled="isAllUncheckable"
+                        :class="checkboxStyle"
+                        @change="checkAll"
+                      />
+                    </div>
                   </th>
                   <th
                     v-for="(column, index) in visibleColumns"
@@ -166,14 +168,16 @@
                       class="pl-3"
                       :class="borderBottomClasses(index, row)"
                     >
-                      <input
-                        type="checkbox"
-                        autocomplete="off"
-                        :disabled="!isRowCheckable(row)"
-                        :checked="isRowChecked(row)"
-                        :class="checkboxStyle"
-                        @click="checkRow(row, index, $event as MouseEvent)"
-                      />
+                      <div class="flex items-center">
+                        <input
+                          type="checkbox"
+                          autocomplete="off"
+                          :disabled="!isRowCheckable(row)"
+                          :checked="isRowChecked(row)"
+                          :class="checkboxStyle"
+                          @click="checkRow(row, index, $event as MouseEvent)"
+                        />
+                      </div>
                     </td>
 
                     <SlotComponent
@@ -239,12 +243,25 @@
             </table>
 
             <slot name="loading">
-              <BaseLoadingCover
-                :delay="0"
-                :model-value="loading"
-                backdrop-class="bg-white bg-opacity-50"
-              />
-              <div v-if="loading" class="h-[300px]" />
+              <Transition
+                enter-active-class="transition ease-out duration-200"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition ease-in duration-200"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-if="loading"
+                  class="absolute inset-0 flex h-full w-full items-start justify-center"
+                >
+                  <div class="absolute h-full w-full bg-white bg-opacity-60" />
+
+                  <div class="pt-20">
+                    <BaseSpinnerLarge class="h-10 w-10 text-blue-500" />
+                  </div>
+                </div>
+              </Transition>
             </slot>
           </div>
         </div>
@@ -266,8 +283,8 @@ import { BaseTableColumn, MenuItemInterface, Row } from '@/types/types';
 import SlotComponent from './SlotComponent';
 import { useResizeObserver } from '@vueuse/core';
 import { debounce, isArray } from 'lodash';
-import BaseLoadingCover from './BaseLoadingCover.vue';
 import BaseMenu from './BaseMenu.vue';
+import BaseSpinnerLarge from '../svg/BaseSpinnerLarge.vue';
 
 const checkboxStyle =
   'disabled:bg-slate-100 disabled:border-slate-300 disabled:cursor-not-allowed border-slate-400 rounded';
@@ -406,10 +423,6 @@ const visibleColumns = computed(() => {
       return false;
     }
 
-    if (column.alwaysVisible) {
-      return true;
-    }
-
     if (!isArray(props.visibleColumns)) {
       return true;
     }

package/src/components/BaseTableColumn.vue

@@ -44,9 +44,9 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    alwaysVisible: {
+    toggle: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     optional: {
       type: Boolean,

package/src/components/BaseTabs.stories.js

@@ -0,0 +1,54 @@
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+
+export default {
+  title: 'Layout/BaseTabs',
+  component: BaseTabs,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTabs,
+    BaseTabItem,
+    BaseContainer,
+    BaseCard,
+    BaseCardRow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BaseTabs v-bind="args">
+        <BaseTabItem to="/">
+          Home
+        </BaseTabItem>
+        <BaseTabItem to="/setup">
+          Setup
+        </BaseTabItem>
+        <BaseTabItem to="/settings">
+          Settings
+        </BaseTabItem>
+        <BaseTabItem to="/misc">
+          Miscellaneous
+        </BaseTabItem>
+      </BaseTabs>
+      <div class="mt-10">
+        <BaseCard>
+          <BaseCardRow>
+            {{ $route.path }}
+          </BaseCardRow>
+        </BaseCard>
+      </div>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseTabs.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative">
-    <div class="absolute bottom-0 left-0 h-[2px] w-full bg-slate-300" />
-    <div class="overflow-x-auto overflow-y-hidden">
-      <ul class="flex space-x-2 text-center text-sm font-medium">
+    <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
+    <div class="relative overflow-x-auto overflow-y-hidden">
+      <ul class="flex space-x-4 text-center">
         <slot />
       </ul>
     </div>

package/src/components/BaseTextarea.stories.js

@@ -0,0 +1,35 @@
+import BaseTextarea from './BaseTextarea.vue';
+
+export default {
+  title: 'Form/BaseTextarea',
+  component: BaseTextarea,
+  args: {
+    name: 'bio',
+    required: true,
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextarea,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseTextarea v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};

package/src/components/BaseTextarea.vue

@@ -7,7 +7,7 @@
     :disabled="disabled"
     :required="required"
     :rows="rows"
-    class="mb-0 block rounded"
+    class="mb-0 block rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
     @input="$emit('update:modelValue', transformInputValue($event))"
   />
 </template>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -0,0 +1,49 @@
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+
+export default {
+  title: 'Form/BaseTextareaAutoresize',
+  component: BaseTextareaAutoresize,
+  args: {
+    name: 'bio',
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextareaAutoresize,
+  },
+  setup() {
+    function onSubmit() {
+      alert('submit');
+    }
+    const value = ref('');
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseTextareaAutoresize 
+      v-model="value" 
+      v-bind="args" 
+      class="w-full" 
+      @submit="onSubmit"
+    ></BaseTextareaAutoresize>
+  </form>
+
+  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded whitespace-pre-wrap text-white">{{ {value} }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SubmitOnEnter = Template.bind({});
+SubmitOnEnter.args = {
+  submitOnEnter: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};

package/src/components/BaseTextareaAutoresize.vue

@@ -1,117 +1,113 @@
 <template>
-  <div ref="wrapper" class="wrapper">
+  <div
+    ref="wrapper"
+    class="wrapper grid"
+    :style="{ maxHeight: maxHeight + 'px' }"
+  >
     <textarea
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      :disabled="disabled"
+      class="resize-none"
+      :class="BASE_TEXTAREA_CLASSES"
+      :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
       rows="1"
-      class="focus:outline-none focus:ring-0"
       @input="onInput"
       @keyup="onKeyUp"
       @keydown="onKeyDown"
       @focus="onFocus"
     />
+    <div
+      class="invisible whitespace-pre-wrap"
+      :class="BASE_TEXTAREA_CLASSES"
+      :style="{
+        content: DIV_CONTENT,
+        maxHeight: maxHeight + 'px',
+        gridArea: BASE_GRID_AREA,
+      }"
+    >
+      {{ modelValue }} {{ ' ' }}
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { defineComponent, inject } from 'vue';
+<script lang="ts" setup>
+import { Ref } from 'vue';
 
-const keys = {} as { [key: string]: boolean };
+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 border-slate-300';
+
+const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      default: '',
-      type: String,
-    },
-    placeholder: {
-      default: '',
-      type: String,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
+/* Note the weird space! Needed to prevent jumpy behavior */
+const DIV_CONTENT = "attr(data-replicated-value) ' '";
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: String,
   },
-  emits: ['update:modelValue', 'submit', 'focus', 'input'],
-  setup() {
-    const mobile = inject('mobile') as boolean;
-    return {
-      mobile,
-    };
+  placeholder: {
+    default: '',
+    type: String,
   },
-  watch: {
-    modelValue(value: string) {
-      this.updateReplicatedValue(value);
-    },
+  name: {
+    required: true,
+    type: String,
   },
-  methods: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onInput(e: any) {
-      const value = e.target.value ?? '';
-      this.$emit('update:modelValue', value);
-      this.$emit('input', e);
-      this.updateReplicatedValue(value);
-    },
-    updateReplicatedValue(value: string) {
-      const wrapper = this.$refs.wrapper as HTMLElement;
-      wrapper.dataset.replicatedValue = value;
-    },
-    onKeyDown(event: any) {
-      keys[event.key as number] = true;
-
-      if (keys['Enter'] && !keys['Shift'] && !this.mobile) {
-        this.$emit('submit');
-        event.preventDefault();
-      }
-    },
-    onKeyUp(event: any) {
-      delete keys[event.key];
-    },
-    onFocus(event: any) {
-      this.$emit('focus', event);
-    },
+  maxHeight: {
+    default: 100,
+    type: Number,
+  },
+  /**
+   * Setting this to true will trigger the 'submit' event while pressing Enter.
+   * Users will be able to add a line break while pressing Shift + Enter.
+   */
+  submitOnEnter: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
   },
 });
-</script>
 
-<style lang="postcss" scoped>
-.wrapper {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-.wrapper::after {
-  /* Note the weird space! Needed to prevent jumpy behavior */
-  content: attr(data-replicated-value) ' ';
+const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
-  /* This is how textarea text behaves */
-  white-space: pre-wrap;
+const wrapper = ref(null) as Ref<null | HTMLDivElement>;
 
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
+const keys = {} as { [key: string]: boolean };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onInput(e: any) {
+  const value = e.target.value ?? '';
+  emit('update:modelValue', value);
+  emit('input', e);
 }
-.wrapper > textarea {
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
 
-  @apply focus:outline-none;
-  @apply focus-visible:outline-none;
+function onKeyDown(event: KeyboardEvent) {
+  keys[event.key] = true;
+
+  if (keys['Enter'] && !keys['Shift'] && props.submitOnEnter) {
+    // If submit triggers alert, Enter wont be delete from keys,
+    // manually remove it here
+    delete keys['Enter'];
+
+    // Submit event to listen to
+    emit('submit');
+
+    // Prevent adding an EOL the the textarea
+    event.preventDefault();
+  }
 }
-.wrapper > textarea,
-.wrapper::after {
-  /* Identical styling required!! */
-  padding: 0.5rem;
-  font: inherit;
 
-  @apply text-base;
-  @apply max-h-28;
-  @apply border-transparent;
-  @apply bg-slate-100;
-  @apply rounded-lg;
+function onKeyUp(event: KeyboardEvent) {
+  delete keys[event.key];
+}
 
-  /* Place on top of each other */
-  grid-area: 1 / 1 / 2 / 2;
+function onFocus(event: FocusEvent) {
+  emit('focus', event);
 }
-</style>
+</script>

package/src/components/index.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';
 
@@ -59,9 +82,32 @@ export {
   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/src/lang/en.json

@@ -23,6 +23,7 @@
     "month": "Month",
     "next": "Next",
     "next_month": "Next month",
+    "none": "None",
     "nothing_found": "Nothing found",
     "or": "or",
     "pagination_detail": "{page} records of {total}",

package/src/lang/fr.json

@@ -23,6 +23,7 @@
     "month": "Mois",
     "next": "Suivant",
     "next_month": "Mois prochain",
+    "none": "Aucun",
     "nothing_found": "Rien n'a été trouvé",
     "or": "ou",
     "pagination_detail": "{page} items de {total}",

package/src/svg/BaseEmptyState.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      class="text-slate-100"
+      d="M75 150C116.421 150 150 116.421 150 75C150 33.5786 116.421 0 75 0C33.5786 0 0 33.5786 0 75C0 116.421 33.5786 150 75 150Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-white"
+      d="M120 150H30V53C34.242 52.9952 38.3089 51.308 41.3084 48.3085C44.308 45.3089 45.9952 41.242 46 37H104C103.996 39.1014 104.408 41.1828 105.213 43.1238C106.018 45.0648 107.2 46.8268 108.691 48.308C110.172 49.7991 111.934 50.9816 113.875 51.787C115.817 52.5924 117.898 53.0047 120 53V150Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-slate-300"
+      d="M75 102C88.2548 102 99 91.2548 99 78C99 64.7452 88.2548 54 75 54C61.7452 54 51 64.7452 51 78C51 91.2548 61.7452 102 75 102Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-white"
+      d="M83.4853 89.3138L75 80.8286L66.5147 89.3138L63.6863 86.4854L72.1716 78.0001L63.6863 69.5148L66.5147 66.6864L75 75.1717L83.4853 66.6864L86.3137 69.5148L77.8284 78.0001L86.3137 86.4854L83.4853 89.3138Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-slate-200"
+      d="M88 108H62C60.3431 108 59 109.343 59 111C59 112.657 60.3431 114 62 114H88C89.6569 114 91 112.657 91 111C91 109.343 89.6569 108 88 108Z"
+      fill="currentColor"
+    />
+    <path
+      class="text-slate-200"
+      d="M97 120H53C51.3431 120 50 121.343 50 123C50 124.657 51.3431 126 53 126H97C98.6569 126 100 124.657 100 123C100 121.343 98.6569 120 97 120Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/svg/BaseSpinnerSmall.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg class="animate-spin" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped></style>

package/src/types/types.ts

@@ -99,7 +99,7 @@ export interface BaseTableColumn {
   searchable: boolean;
   sortable: boolean;
   visible: boolean;
-  alwaysVisible: boolean;
+  toggle: boolean;
   optional: boolean;
   width: number;
   style: {

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

@@ -1,31 +0,0 @@
-declare const _default: import("vue").DefineComponent<{
-    text: {
-        required: true;
-        type: StringConstructor;
-    };
-    min: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-    max: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    text: {
-        required: true;
-        type: StringConstructor;
-    };
-    min: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-    max: {
-        default: undefined;
-        type: NumberConstructor;
-    };
-}>>, {
-    max: number;
-    min: number;
-}>;
-export default _default;