sprintify-ui 0.0.11 → 0.0.12

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 = {};

package/src/components/BasePagination.vue

@@ -1,9 +1,10 @@
 <template>
   <nav
     v-if="lastPage > 1 || lastPage < modelValue"
-    class="flex items-center justify-between border-t border-slate-200 px-4 sm:px-0"
+    ref="paginationNode"
+    class="flex items-center justify-between border-t border-slate-200"
   >
-    <div class="-mt-px flex w-0 flex-1">
+    <div class="flex -mt-px w-0 flex-1">
       <button
         type="button"
         :disabled="modelValue == 1"
@@ -17,23 +18,25 @@
         {{ $t('sui.previous') }}
       </button>
     </div>
-    <div class="hidden md:-mt-px md:flex">
+    <div :class="[mobileLayout ? 'hidden' : 'flex -mt-px']">
       <button
-        v-for="i in lastPage"
-        :key="i"
+        v-for="(i, index) in items"
+        :key="i + (index + '')"
         type="button"
-        class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium hover:border-slate-300 hover:text-slate-700"
-        :class="
-          i == modelValue
-            ? 'border-primary-500 text-primary-600'
-            : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'
-        "
-        @click="$emit('model-value:update', i)"
+        class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium"
+        :class="[
+          i == modelValue ? 'border-primary-500 text-primary-500' : '',
+          i != modelValue ? 'border-transparent text-slate-500' : '',
+          i != modelValue && isClickable(i)
+            ? 'hover:border-slate-300 hover:text-slate-700'
+            : '',
+        ]"
+        @click="onButtonClick(i)"
       >
         {{ i }}
       </button>
     </div>
-    <div class="-mt-px flex w-0 flex-1 justify-end">
+    <div class="flex -mt-px w-0 flex-1 justify-end">
       <button
         :disabled="modelValue >= lastPage"
         class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
@@ -49,34 +52,117 @@
   </nav>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    modelValue: {
-      required: true,
-      type: Number,
-    },
-    lastPage: {
-      required: true,
-      type: Number,
-    },
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core';
+import { range } from 'lodash';
+import { Ref } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    default: 1,
+    required: true,
+    type: Number,
+  },
+  lastPage: {
+    required: true,
+    type: Number,
   },
-  emits: ['model-value:update'],
-  methods: {
-    next() {
-      if (this.modelValue >= this.lastPage) {
-        return;
-      }
-      this.$emit('model-value:update', this.modelValue + 1);
-    },
-    previous() {
-      if (this.modelValue == 1) {
-        return;
-      }
-      this.$emit('model-value:update', this.modelValue - 1);
-    },
+  totalVisible: {
+    default: 10,
+    type: Number,
   },
 });
+
+const emit = defineEmits(['update:model-value']);
+
+function next() {
+  if (props.modelValue >= props.lastPage) {
+    return;
+  }
+  emit('update:model-value', props.modelValue + 1);
+}
+
+function previous() {
+  if (props.modelValue == 1) {
+    return;
+  }
+  emit('update:model-value', props.modelValue - 1);
+}
+
+const paginationNode = ref(null) as Ref<null | HTMLElement>;
+const width = ref(800);
+
+useResizeObserver(paginationNode, () => {
+  width.value = paginationNode.value?.clientWidth ?? 800;
+  maxButtons.value = Math.floor((width.value - 96) / 56);
+});
+
+const mobileLayout = computed(() => {
+  return width.value < 600;
+});
+
+const length = computed(() => {
+  return props.lastPage + 1;
+});
+
+const maxButtons = ref(0);
+
+const items = computed(() => {
+  const totalVisible = props.totalVisible + 2;
+
+  if (
+    totalVisible === 0 ||
+    isNaN(length.value) ||
+    length.value > Number.MAX_SAFE_INTEGER
+  ) {
+    return [];
+  }
+
+  const maxLength = Math.min(
+    Math.max(0, totalVisible) || length.value,
+    Math.max(0, maxButtons.value) || length.value,
+    length.value
+  );
+
+  if (length.value <= maxLength) {
+    return range(1, length.value);
+  }
+
+  const even = maxLength % 2 === 0 ? 1 : 0;
+  const left = Math.floor(maxLength / 2);
+  const right = length.value - left + 1 + even;
+
+  if (props.modelValue > left && props.modelValue < right) {
+    const firstItem = 1;
+    const lastItem = length.value;
+    const start = props.modelValue - left + 2;
+    const end = props.modelValue + left - 2 - even;
+    const secondItem = start - 1 === firstItem + 1 ? 2 : '...';
+    const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : '...';
+
+    return [1, secondItem, ...range(start, end), beforeLastItem, length.value];
+  } else if (props.modelValue === left) {
+    const end = props.modelValue + left - 1 - even;
+    return [...range(1, end), '...', length.value];
+  } else if (props.modelValue === right) {
+    const start = props.modelValue - left + 1;
+    return [1, '...', ...range(start, length.value)];
+  } else {
+    return [...range(1, left), '...', ...range(right, length.value)];
+  }
+});
+
+function isClickable(i: number | string) {
+  if (i == '...') {
+    return false;
+  }
+  return true;
+}
+
+function onButtonClick(i: number | string) {
+  if (!isClickable(i)) {
+    return;
+  }
+  emit('update:model-value', i);
+}
 </script>