sprintify-ui 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
@@ -23,7 +23,8 @@
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "pikaday": "^1.8.2"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.4"
@@ -72,6 +73,7 @@
     "prettier-plugin-tailwindcss": "^0.1.13",
     "qs": "^6.11.0",
     "rimraf": "^3.0.2",
+    "rollup-plugin-analyzer": "^4.0.0",
     "scroll-lock": "^2.1.5",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.4.4",

package/src/assets/form.css

@@ -1,13 +1,4 @@
-
-.form-input-label {
-    @apply block text-sm leading-tight text-slate-600;
-}
-
-.form-input-error {
-    @apply text-sm leading-tight text-red-600;
-}
-
-/** Placehoder color */
+/** Placeholder color */
 
 input,
 textarea {

package/src/assets/main.css

@@ -1,3 +1,2 @@
 @import './pikaday.css';
-@import './button.css';
 @import './form.css';

package/src/assets/tailwind.css

@@ -1,5 +1,3 @@
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/components/BaseAutocomplete.stories.js

@@ -87,16 +87,19 @@ export const SlotFooter = (args) => {
     components: { BaseAutocomplete },
     setup() {
       const value = ref(null);
-      return { args, value };
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
     },
     template: `
     <BaseAutocomplete
       v-model="value"
-      v-bind="args"
+      v-bind="args" 
     >
       <template #footer>
-        <div class="text-center p-1 pt-2 mt-2 border-t">
-          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        <div class="text-center p-2 border-t">
+          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
         </div>
       </template>
     </BaseAutocomplete>

package/src/components/BaseAutocomplete.vue

@@ -50,7 +50,10 @@
         v-show="showDropdown"
         class="absolute top-1 z-[1] min-h-[110px] w-full overflow-hidden rounded border border-slate-300 bg-white shadow-md"
       >
-        <div ref="dropdown" class="max-h-[214px] w-full overflow-y-auto p-1">
+        <div
+          ref="dropdown"
+          class="max-h-[214px] min-h-[75px] w-full overflow-y-auto"
+        >
           <slot v-if="filteredNormalizedOptions.length == 0" name="empty">
             <div
               class="flex items-center justify-center px-5 py-10 text-center text-slate-600"
@@ -59,7 +62,7 @@
             </div>
           </slot>
 
-          <ul v-else>
+          <ul v-else class="p-1">
             <li
               v-for="option in filteredNormalizedOptions"
               :key="option.value"
@@ -70,7 +73,7 @@
                 type="button"
                 tabindex="-1"
                 @click="onSelect(option)"
-                @mousedown="dontLooseFocus"
+                @mousedown.prevent="dontLooseFocus"
               >
                 <slot
                   name="option"
@@ -91,12 +94,12 @@
               </button>
             </li>
           </ul>
+        </div>
 
-          <slot
-            :options="filteredNormalizedOptions"
-            :dont-loose-focus="dontLooseFocus"
-            name="footer"
-          />
+        <div ref="footer">
+          <div v-if="$slots.footer" class="bg-white">
+            <slot :options="filteredNormalizedOptions" name="footer" />
+          </div>
         </div>
 
         <Transition>
@@ -131,7 +134,7 @@ import {
   Selection,
   NormalizedSelection,
 } from '@/types/types';
-import { useInfiniteScroll } from '@vueuse/core';
+import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import BaseSkeleton from './BaseSkeleton.vue';
 
 const props = defineProps({
@@ -198,7 +201,7 @@ onMounted(() => {
     () => {
       emit('scrollBottom');
     },
-    { distance: 10 }
+    { distance: 60 }
   );
 });
 
@@ -255,12 +258,18 @@ const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   });
 });
 
-const dontLooseFocus = (event: Event, next: null | (() => void) = null) => {
-  event.preventDefault();
+function preventUnfocus(elements: HTMLElement[]) {
+  elements.forEach((e) => {
+    e.removeEventListener('mousedown', dontLooseFocus);
+  });
+  elements.forEach((e) => {
+    e.addEventListener('mousedown', dontLooseFocus);
+  });
+}
+
+const dontLooseFocus = (event: Event) => {
   inputElement.value?.focus();
-  if (next) {
-    next();
-  }
+  event.preventDefault();
 };
 
 const onTextFocus = () => {
@@ -373,4 +382,24 @@ const setKeywords = (input: string) => {
   keywords.value = input;
   emit('typing', input);
 };
+
+const footer = ref(null) as Ref<HTMLDivElement | null>;
+
+function preventUnfocusOnFooter() {
+  const elements = (footer.value?.querySelectorAll('button, a') ??
+    []) as HTMLElement[];
+  preventUnfocus(elements);
+}
+
+onMounted(() => {
+  preventUnfocusOnFooter();
+});
+
+useMutationObserver(
+  footer,
+  () => {
+    preventUnfocusOnFooter();
+  },
+  { attributes: false, childList: true }
+);
 </script>

package/src/components/BaseAutocompleteFetch.stories.js

@@ -79,7 +79,10 @@ export const SlotFooter = (args) => {
     components: { BaseAutocompleteFetch },
     setup() {
       const value = ref(null);
-      return { args, value };
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
     },
     template: `
     <BaseAutocompleteFetch
@@ -87,8 +90,8 @@ export const SlotFooter = (args) => {
       v-bind="args"
     >
       <template #footer>
-        <div class="text-center p-1 pt-2 mt-2 border-t">
-          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        <div class="text-center p-2 border-t">
+          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
         </div>
       </template>
     </BaseAutocompleteFetch>

package/src/components/BaseAutocompleteFetch.vue

@@ -22,12 +22,17 @@
 
     <template #footer="footerProps">
       <slot name="footer" v-bind="footerProps" :keywords="keywords">
-        <div v-if="createNewUrl" class="p-2">
+        <div
+          v-if="createNewUrl"
+          class="p-2"
+          :class="{
+            'border-t border-slate-300': footerProps.options.length > 0,
+          }"
+        >
           <router-link
             :to="createNewUrl"
             target="_blank"
-            class="btn flex items-center justify-center font-normal shadow"
-            @mousedown="footerProps.dontLooseFocus"
+            class="btn btn-slate-200-outline flex items-center justify-center"
           >
             <BaseIcon
               icon="heroicons-solid:plus"

package/src/components/BaseBelongsTo.stories.js

@@ -40,10 +40,12 @@ export const Disabled = (args) => {
   return {
     components: { BaseBelongsTo },
     setup() {
-      return { args };
+      const value = ref(null);
+      return { args, value };
     },
     template: `<BaseBelongsTo
       v-bind="args"
+      v-model="value"
       :current-model="{title: 'Dark Vader', id: 1}"
       :disabled="true"
     ></BaseBelongsTo>`,
@@ -88,7 +90,10 @@ export const SlotFooter = (args) => {
     components: { BaseBelongsTo },
     setup() {
       const value = ref(null);
-      return { args, value };
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
     },
     template: `
     <BaseBelongsTo
@@ -96,8 +101,8 @@ export const SlotFooter = (args) => {
       v-bind="args"
     >
       <template #footer>
-        <div class="text-center p-1 pt-2 mt-2 border-t">
-          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        <div class="text-center p-2 border-t">
+          <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
         </div>
       </template>
     </BaseBelongsTo>

package/src/components/BaseBelongsTo.vue

@@ -29,6 +29,7 @@ import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 
 const props = defineProps({
   modelValue: {

package/src/components/BaseButton.stories.js

@@ -5,8 +5,11 @@ const colors = [
   'btn-secondary',
   'btn-secondary-outline',
   'btn-success',
+  'btn-success-outline',
   'btn-warning',
+  'btn-warning-outline',
   'btn-danger',
+  'btn-danger-outline',
   'btn-white',
   'btn-slate-100',
   'btn-slate-100-outline',
@@ -41,7 +44,7 @@ const Template = (args) => ({
 
 export const Demo = Template.bind({});
 Demo.args = {
-  class: 'btn-primary btn-base',
+  class: '',
 };
 
 export const Loading = Template.bind({});
@@ -55,8 +58,13 @@ export const Colors = (args) => ({
     return { args, colors };
   },
   template: `
+    <p class="text-xs text-slate-600 leading-tight mb-1">btn</p>
+    <BaseButton class="btn">
+      Click here
+    </BaseButton>
+    <div class="mb-4"></div>
     <div v-for="color in colors" :key="color" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ color }}</p>
       <BaseButton :class="color">
         Click here
       </BaseButton>
@@ -71,7 +79,7 @@ export const Sizes = (args) => ({
   },
   template: `
     <div v-for="size in sizes" :key="size" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+      <p class="text-xs text-slate-600 leading-tight mb-1">btn {{ size }}</p>
       <BaseButton class="btn-primary" :class="size">
       Click here
       </BaseButton>

package/src/components/BaseCard.vue

@@ -4,7 +4,7 @@
     class="border-t border-b border-slate-300 bg-white"
     :class="{
       'rounded-lg border-r border-l shadow-sm': width != windowWidth,
-      'overflow-hidden': clipped,
+      'relative isolate overflow-hidden': clipped,
     }"
   >
     <slot />

package/src/components/BaseDataIterator.stories.js

@@ -1,4 +1,5 @@
 import BaseDataIterator from './BaseDataIterator.vue';
+import BaseSelect from './BaseSelect.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseLoadingCover from './BaseLoadingCover.vue';
@@ -43,16 +44,67 @@ const template = `
 
       <BaseLoadingCover
         v-show="loading"
-        backdropClass="bg-slate-100 bg-opacity-50"
+        size="lg"
+        backdropClass="bg-white bg-opacity-50"
       >
       </BaseLoadingCover>
     </div>
   </template>
+
+  <template #filters="{ query, updateQueryValue }">
+    <div class="space-y-3">
+      <div>
+        <p class="mb-1 text-sm">
+          Type
+        </p>
+        <BaseSelect
+          :model-value="query.type ?? null"
+          class="w-full rounded border-slate-300"
+          @update:model-value="updateQueryValue('type', $event)"
+        >
+          <option value="">-</option>
+          <option value="video">
+            Video
+          </option>
+          <option value="article">
+            Article
+          </option>
+        </BaseSelect>
+      </div>
+      <div>
+        <p class="mb-1 text-sm">
+          Access Level
+        </p>
+        <BaseSelect
+          :model-value="query.access_level ?? null"
+          class="w-full rounded border-slate-300"
+          @update:model-value="updateQueryValue('access_level', $event)"
+        >
+          <option value="">-</option>
+          <option value="public">
+            Public
+          </option>
+          <option value="member">
+            Member
+          </option>
+          <option value="vip">
+            VIP
+          </option>
+        </BaseSelect>
+      </div>
+    </div>
+  </template>
 </BaseDataIterator>
 `;
 
 const Template = (args) => ({
-  components: { BaseDataIterator, BaseCard, BaseCardRow, BaseLoadingCover },
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+    BaseSelect,
+  },
   setup() {
     return { args };
   },
@@ -83,7 +135,54 @@ Demo.args = {
   ],
 };
 
-export const Simple = Template.bind({});
+const SimpleTemplate = (args) => ({
+  components: {
+    BaseDataIterator,
+    BaseCard,
+    BaseCardRow,
+    BaseLoadingCover,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseDataIterator v-bind="args">
+    <template #default="{ items, loading }">
+      <div class="relative">
+        <div class="space-y-1.5">
+          <a
+            v-for="item in items"
+            :key="item.id"
+            :href="item.website_url"
+            target="_blank"
+            class="block group"
+          >
+            <BaseCard class="group-hover:bg-slate-100">
+              <BaseCardRow size="sm">
+                <div class="font-medium text-slate-900">
+                  {{ item.title }}
+                </div>
+                <p class="text-xs leading-tight text-slate-500">
+                  {{ item.subtitle }}
+                </p>
+              </BaseCardRow>
+            </BaseCard>
+          </a>
+        </div>
+  
+        <BaseLoadingCover
+          v-show="loading"
+          size="lg"
+          backdropClass="bg-white bg-opacity-50"
+        >
+        </BaseLoadingCover>
+      </div>
+    </template>
+  </BaseDataIterator>
+  `,
+});
+
+export const Simple = SimpleTemplate.bind({});
 Simple.args = {
   searchable: false,
   actions: [],

package/src/components/BaseDataIterator.vue

@@ -6,7 +6,10 @@
         'grid-cols-[1fr_300px]': hasSidebar,
       }"
     >
-      <div class="col-span-2 min-w-0 lg:col-span-1">
+      <div
+        class="min-w-0"
+        :class="{ 'col-span-1': !mobileLayout, 'col-span-2': mobileLayout }"
+      >
         <!-- Header -->
         <div class="mb-4 flex space-x-2 empty:mb-0">
           <!-- Search bar -->
@@ -52,7 +55,7 @@
           <!-- Filters (mobile) -->
           <button
             v-if="mobileLayout && hasFilters"
-            class="btn flex h-11 items-center justify-center py-1 text-base"
+            class="btn flex h-11 items-center justify-center py-1 text-base shadow-sm"
             type="button"
             @click="showFilters = true"
           >
@@ -131,7 +134,7 @@
         </div>
       </div>
 
-      <div v-if="!mobileLayout && hasSidebar">
+      <div v-if="!mobileLayout" ref="sidebar">
         <slot
           name="sidebarTop"
           :pagination-metadata="paginationMetadata"
@@ -201,7 +204,6 @@ const DEFAULT_QUERY = {
 import { cloneDeep, debounce, isArray, merge, set } from 'lodash';
 import hash from 'object-hash';
 import { ComputedRef, PropType, Ref } from 'vue';
-import { useBreakpoints } from '@/composables/breakpoints';
 import {
   Collection,
   DataTableQuery,
@@ -217,6 +219,7 @@ import BaseCardRow from './BaseCardRow.vue';
 import BasePaginationSimple from './BasePaginationSimple.vue';
 import BaseModalSide from './BaseModalSide.vue';
 import { config } from '@/index';
+import { useMutationObserver, useResizeObserver } from '@vueuse/core';
 
 const props = defineProps({
   /**
@@ -299,7 +302,10 @@ const route = useRoute();
 const router = useRouter();
 const routeName = route.name;
 
-const breakpoints = useBreakpoints();
+const width = ref(800);
+useResizeObserver(dataIteratorNode, () => {
+  width.value = dataIteratorNode.value?.clientWidth ?? 800;
+});
 
 /** Data table state */
 
@@ -315,7 +321,7 @@ const query = ref(cloneDeep(props.defaultQuery)) as Ref<DataTableQuery>;
 const slots = useSlots();
 
 const mobileLayout = computed(() => {
-  return breakpoints.smaller('lg').value;
+  return width.value < 1024;
 });
 
 const hasFilters = computed((): boolean => {
@@ -323,14 +329,40 @@ const hasFilters = computed((): boolean => {
   return numberOfFilterSlots !== undefined;
 });
 
-const hasSidebar = computed(() => {
-  return (
-    hasFilters.value ||
-    slots.sidebarTop !== undefined ||
-    slots.sidebarBottom !== undefined
-  );
+/*
+|--------------------------------------------------------------------------
+| Has sidebar observer
+|--------------------------------------------------------------------------
+*/
+
+const hasSidebar = ref(false);
+const sidebar = ref(null) as Ref<null | HTMLElement>;
+
+function checkIfSidebarIsEmpty() {
+  hasSidebar.value = (sidebar?.value?.childElementCount ?? 0) > 0;
+}
+
+const checkIfSidebarIsEmptyDebounce = debounce(checkIfSidebarIsEmpty, 100);
+
+useMutationObserver(sidebar, checkIfSidebarIsEmptyDebounce, {
+  attributes: false,
+  childList: true,
 });
 
+onMounted(() => {
+  checkIfSidebarIsEmpty();
+});
+
+watch(
+  () => mobileLayout.value,
+  () => {
+    // After the sidebar appears...
+    nextTick(() => {
+      checkIfSidebarIsEmpty();
+    });
+  }
+);
+
 /*
 |--------------------------------------------------------------------------
 | Query params