sprintify-ui 0.0.10 → 0.0.12

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

@@ -12,49 +12,59 @@
       class="absolute inset-0 flex h-full w-full items-center justify-center"
     >
       <div class="absolute h-full w-full" :class="backdropClass" />
-      <svg
-        v-if="icon == 'line'"
-        class="animate-spin"
-        :class="iconClass"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill="currentColor"
-          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-        />
-      </svg>
-      <BaseSpinner v-else-if="icon == 'spinner'" :class="iconClass" />
+
+      <BaseSpinnerSmall v-if="size == 'sm'" :class="iconClass" />
+      <BaseSpinnerLarge v-else-if="size == 'lg'" :class="iconClass" />
     </div>
   </Transition>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue';
-import BaseSpinner from './BaseSpinner.vue';
+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,
   },
-  icon: {
-    default: 'line',
-    type: String as PropType<'line' | 'spinner'>,
+  /**
+   * 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,
   },
 });

package/src/components/BaseMenu.stories.js

@@ -0,0 +1,125 @@
+import BaseMenu from './BaseMenu.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseMenu',
+  component: BaseMenu,
+  args: {
+    position: 'bottom-right',
+  },
+  argTypes: {
+    position: {
+      control: { type: 'select' },
+      options: ['bottom-left', 'bottom-right'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseMenu,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const items = [
+      {
+        label: 'Export file',
+        icon: 'mdi-export',
+        action() {
+          alert('Export!');
+        },
+      },
+      {
+        label: 'Google',
+        icon: 'mdi-google',
+        href: 'https://google.com',
+        count: 1000,
+      },
+      {
+        icon: 'mdi-access-point',
+        label: 'Reconnect',
+        to: 'home',
+        color: 'success',
+      },
+      {
+        icon: 'mdi-archive',
+        label: 'Archive',
+        href: 'https://google.com',
+        color: 'warning',
+      },
+      {
+        icon: 'mdi-trash-can',
+        label: 'Delete',
+        href: 'https://google.com',
+        color: 'danger',
+        count: 1,
+      },
+    ];
+
+    const user = {
+      email: 'jane@witify.io',
+      first_name: 'Jane',
+      last_name: 'Doe',
+      full_name: 'Jane Doe',
+      avatar_url:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+    };
+
+    args.items = items;
+
+    return { args, user };
+  },
+  template: `
+    <div class="pb-52">
+
+      <h2 class="mb-5 font-semibold">Various examples</h2>
+      
+      <p class="text-sm mb-1 text-slate-600">Simple button</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div 
+            class="btn" 
+            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
+          >
+            Click me
+          </div>
+        </template>
+      </BaseMenu>
+
+      <br>
+      <br>
+
+      <p class="text-sm mb-1 text-slate-600">Contextual action button</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div
+            class="flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white duration-150 hover:bg-slate-50"
+            :class="[open ? 'ring-2 ring-primary-500 ring-offset-2': '']"
+          >
+            <BaseIcon icon="heroicons-solid:dots-vertical" />
+          </div>
+        </template>
+      </BaseMenu>
+
+      <br>
+      <br>
+
+      <p class="text-sm mb-1 text-slate-600">With BaseAvatar</p>
+
+      <BaseMenu v-bind="args" class="inline-block">
+        <template #button="{ open }">
+          <div class="bg-white">
+            <BaseAvatar show-details :user="user" />
+          </div>
+        </template>
+      </BaseMenu>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseModalCenter.stories.js

@@ -0,0 +1,61 @@
+import BaseModalCenter from './BaseModalCenter.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseModalCenter',
+  component: BaseModalCenter,
+  args: {
+    position: 'bottom-right',
+  },
+  argTypes: {
+    verticalAlign: {
+      control: { type: 'select' },
+      options: ['center', 'top'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalCenter,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalCenter v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <p class="mb-6">Hello!</p>
+
+            <button @click="close" class="btn btn-sm">Close</button>
+          </div>
+        </template>
+      </BaseModalCenter>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const VerticalAlignTop = Template.bind({});
+VerticalAlignTop.args = {
+  verticalAlign: 'top',
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: 'bg-red-500 bg-opacity-70',
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};

package/src/components/BaseModalCenter.vue

@@ -30,7 +30,7 @@
               >
                 <div
                   v-if="modelValue"
-                  :class="modalOverlayClasses"
+                  :class="backdropClass"
                   class="fixed inset-0 transition-opacity"
                   @click="
                     closeOnOutsideClick
@@ -85,7 +85,7 @@ const props = defineProps({
     default: 'center',
     type: String,
   },
-  modalOverlayClasses: {
+  backdropClass: {
     default: 'bg-opacity-70 bg-slate-900',
     type: String,
   },

package/src/components/BaseModalSide.stories.js

@@ -0,0 +1,55 @@
+import BaseModalSide from './BaseModalSide.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseAvatar from './BaseAvatar.vue';
+
+export default {
+  title: 'Components/BaseModalSide',
+  component: BaseModalSide,
+  args: {
+    position: 'bottom-right',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseModalSide,
+    BaseIcon,
+    BaseAvatar,
+  },
+  setup() {
+    const show = ref(false);
+    return { args, show };
+  },
+  template: `
+    <div class="">
+      <button @click="show = true" class="btn">Show modal</button>
+      <BaseModalSide v-model="show" v-bind="args">
+        <template #default="{close}">
+          <div class="p-8">
+            <p class="mb-6">Hello!</p>
+
+            <button @click="close" class="btn btn-sm">Close</button>
+          </div>
+        </template>
+      </BaseModalSide>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const CustomMaxWidth = Template.bind({});
+CustomMaxWidth.args = {
+  maxWidth: '16rem',
+};
+
+export const CustomBackdropClass = Template.bind({});
+CustomBackdropClass.args = {
+  backdropClass: 'bg-red-500 bg-opacity-70',
+};
+
+export const PreventLeave = Template.bind({});
+PreventLeave.args = {
+  closeOnOutsideClick: false,
+};

package/src/components/BaseModalSide.vue

@@ -24,7 +24,7 @@
               >
                 <div
                   v-show="modelValue"
-                  :class="modalOverlayClasses"
+                  :class="backdropClass"
                   class="fixed inset-0 transition-opacity"
                   @click="
                     closeOnOutsideClick
@@ -85,7 +85,7 @@ const props = defineProps({
     default: '32rem',
     type: String,
   },
-  modalOverlayClasses: {
+  backdropClass: {
     default: 'bg-opacity-70 bg-slate-900',
     type: String,
   },

package/src/components/BaseNavbar.stories.js

@@ -0,0 +1,150 @@
+import BaseNavbar from './BaseNavbar.vue';
+import BaseNavbarItem from './BaseNavbarItem.vue';
+import BaseAvatar from './BaseAvatar.vue';
+import BaseMenu from './BaseMenu.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Layout/BaseNavbar',
+  component: BaseNavbar,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseNavbar,
+    BaseNavbarItem,
+    BaseIcon,
+    BaseAvatar,
+    BaseMenu,
+  },
+  setup() {
+    const user = {
+      email: 'jane@witify.io',
+      first_name: 'Jane',
+      last_name: 'Doe',
+      full_name: 'Jane Doe',
+      avatar_url:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330??auto=format&fit=crop&w=200&h=200&q=80&g=face',
+    };
+
+    const menu = [
+      {
+        label: 'Home',
+        to: '/',
+        type: 'RouterLink',
+      },
+      {
+        label: 'Products',
+        to: '/',
+        count: 234,
+        type: 'RouterLink',
+      },
+      {
+        label: 'Settings',
+        to: '/',
+        type: 'RouterLink',
+      },
+    ];
+
+    const userMenu = [
+      {
+        label: 'Home',
+        icon: 'heroicons:home',
+        href: 'https://google.com',
+      },
+      {
+        line: true,
+      },
+      {
+        label: 'Logout',
+        icon: 'heroicons:arrow-right-on-rectangle',
+        href: 'https://google.com',
+      },
+    ];
+
+    return { args, menu, userMenu, user };
+  },
+  template: `
+    <div class="mb-40">
+      <BaseNavbar v-bind="args">
+        <template #navbar>
+          <div class="flex h-16 justify-between">
+            <!-- Left -->
+
+            <div class="flex items-center justify-center">
+              <!-- Logo -->
+              <router-link to="/" class="flex flex-shrink-0 grow items-center p-2 pl-0">
+                <img
+                  class="block h-8 w-auto"
+                  src="https://sprintify.witify.io/img/logo/logo-side-dark.svg"
+                  alt="Sprintify"
+                />
+              </router-link>
+
+              <!-- Links (desktop) -->
+              <div class="ml-10 hidden items-center space-x-4 md:flex">
+                <BaseNavbarItem
+                  v-for="item in menu"
+                  :key="item.label"
+                  :item="item"
+                />
+              </div>
+            </div>
+
+            <!-- Right -->
+
+            <div class="hidden md:ml-6 md:flex md:items-center">
+              <!-- Profile dropdown -->
+              <BaseMenu menu-class="w-52" :items="userMenu">
+                <template #button="{ open }">
+                  <div
+                    class="flex rounded-full"
+                    :class="[open ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700' : '']"
+                  >
+                    <BaseAvatar class="text-white" :user="user" />
+                  </div>
+                </template>
+              </BaseMenu>
+            </div>
+          </div>
+        </template>
+
+        <template #mobile>
+          <!-- Links mobile -->
+          <div class="space-y-1 p-2">
+            <BaseNavbarItem
+              v-for="item in menu"
+              :key="item.label"
+              :item="item"
+              class="flex w-full"
+            />
+          </div>
+    
+          <hr class="my-4 border-slate-700" />
+    
+          <!-- Profile links -->
+          <div class="p-2 pb-6">
+            <BaseAvatar
+              :user="user"
+              show-details
+              size="base"
+              class="px-3 text-white"
+            />
+            <div class="mt-4 space-y-1">
+              <BaseNavbarItem
+                v-for="item in userMenu"
+                :key="item.label"
+                :item="item"
+                class="flex w-full"
+              />
+            </div>
+          </div>
+        </template>
+      </BaseNavbar>
+    </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseNavbar.vue

@@ -45,6 +45,9 @@
 </template>
 
 <script setup lang="ts">
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseContainer from './BaseContainer.vue';
+
 defineProps({
   size: {
     default: '7xl',

package/src/components/BaseNavbarItem.vue

@@ -52,6 +52,7 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { ActionItem } from '@/types/types';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 
 defineProps({
   item: {

package/src/components/BaseNavbarItemContent.vue

@@ -11,6 +11,9 @@
 </template>
 
 <script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseCounter from './BaseCounter.vue';
+
 const buttonClasses =
   'px-3 py-2 text-left rounded-md md:text-sm flex text-base font-normal w-full';
 const buttonInactiveClasses =

package/src/components/BasePagination.stories.js

@@ -0,0 +1,32 @@
+import BasePagination from './BasePagination.vue';
+
+export default {
+  title: 'Components/BasePagination',
+  component: BasePagination,
+  args: {
+    totalVisible: 12,
+    lastPage: 20,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BasePagination,
+  },
+  setup() {
+    const modelValue = ref(10);
+
+    return { args, modelValue };
+  },
+  template: `
+  <div>
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  <div style="max-width: 500px;">
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};