sprintify-ui 0.0.0

package/src/components/BaseMediaLibraryItem.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="w-full rounded-lg border border-slate-200">
+    <div class="flex space-x-5 p-4">
+      <div
+        class="h-20 w-20 shrink-0 rounded border border-slate-200 bg-slate-900"
+      >
+        <component
+          :is="url ? 'a' : 'div'"
+          :href="url"
+          target="_blank"
+          class="flex h-full w-full items-center justify-center overflow-hidden"
+        >
+          <img
+            v-if="type == 'image' && url"
+            :src="url"
+            class="h-full w-full object-contain object-center"
+            :alt="name"
+          />
+          <img
+            v-else-if="type == 'image' && 'data_url' in media"
+            :src="media.data_url"
+            class="h-full w-full object-contain object-center"
+            :alt="name"
+          />
+          <span v-else class="leading-tight text-slate-600">{{
+            extension
+          }}</span>
+        </component>
+      </div>
+      <div class="grow overflow-hidden">
+        <div class="leading-normal">
+          <p class="mb-1 truncate text-sm font-medium leading-tight">
+            {{ name }}
+          </p>
+          <p class="text-sm leading-tight text-slate-500">
+            {{ size }}
+          </p>
+          <button
+            type="button"
+            class="mt-2 appearance-none text-sm underline"
+            @click="$emit('delete')"
+          >
+            {{ capitalize($t('sui.remove')) }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Media } from '@/types/Media';
+import { UploadedFile } from '@/types/UploadedFile';
+import { PropType } from 'vue';
+import { capitalize } from 'lodash';
+import { fileSizeFormat } from 'src/utils';
+
+defineEmits(['delete']);
+
+const props = defineProps({
+  media: {
+    required: true,
+    type: Object as PropType<Media | UploadedFile>,
+  },
+});
+
+const name = computed(() => {
+  return props.media.file_name;
+});
+
+const size = computed(() => {
+  return fileSizeFormat(props.media.size);
+});
+
+const type = computed(() => {
+  const parts = props.media.mime_type.split('/');
+  return parts[0];
+});
+
+const extension = computed(() => {
+  const parts = props.media.mime_type.split('/');
+  return parts[parts.length - 1];
+});
+
+const url = computed(() => {
+  if ('url' in props.media) {
+    return props.media.url;
+  }
+
+  return null;
+});
+</script>

package/src/components/BaseMenu.vue

@@ -0,0 +1,114 @@
+<template>
+  <Menu v-slot="{ open }" as="div" class="relative text-left">
+    <div>
+      <MenuButton class="flex">
+        <slot name="button" :open="open" />
+      </MenuButton>
+    </div>
+
+    <transition
+      enter-active-class="transition duration-200 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        :class="[menuClass, menuPositionClass]"
+        class="absolute z-10 mt-2 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
+      >
+        <slot name="items">
+          <template v-for="item in items" :key="item.label + 'link'">
+            <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-gray-200" />
+
+            <router-link
+              v-else-if="item.to"
+              v-slot="{ href, navigate }"
+              custom
+              :to="item.to"
+            >
+              <MenuItem
+                v-slot="{ active }"
+                as="a"
+                :href="href"
+                @click="navigate"
+              >
+                <BaseMenuItem
+                  :label="item.label"
+                  :count="item.count"
+                  :icon="item.icon"
+                  :color="item.color"
+                  :active="active"
+                />
+              </MenuItem>
+            </router-link>
+
+            <MenuItem
+              v-else-if="item.href"
+              v-slot="{ active }"
+              as="a"
+              :href="item.href"
+            >
+              <BaseMenuItem
+                :label="item.label"
+                :count="item.count"
+                :icon="item.icon"
+                :color="item.color"
+                :active="active"
+              />
+            </MenuItem>
+
+            <MenuItem
+              v-else-if="item.action"
+              v-slot="{ active }"
+              as="button"
+              type="button"
+              class="w-full"
+              @click="item.action"
+            >
+              <BaseMenuItem
+                :label="item.label"
+                :count="item.count"
+                :icon="item.icon"
+                :color="item.color"
+                :active="active"
+              />
+            </MenuItem>
+          </template>
+        </slot>
+      </MenuItems>
+    </transition>
+  </Menu>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import { MenuItemInterface } from '@/types/types';
+import BaseMenuItem from './BaseMenuItem.vue';
+
+const props = defineProps({
+  items: {
+    default: undefined,
+    type: Array as PropType<MenuItemInterface[]>,
+  },
+  menuClass: {
+    default: 'w-48',
+    type: String,
+  },
+  position: {
+    default: 'bottom-left',
+    type: String as PropType<'bottom-left' | 'bottom-right'>,
+  },
+});
+
+const menuPositionClass = computed(() => {
+  if (props.position == 'bottom-left') {
+    return 'origin-top-right right-0';
+  }
+  if (props.position == 'bottom-right') {
+    return 'origin-top-left left-0';
+  }
+});
+</script>

package/src/components/BaseMenuItem.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="buttonClasses">
+    <div class="flex items-center">
+      <Icon v-if="icon" :icon="icon" :class="iconClasses" />
+      {{ label }}
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter
+        :count="count"
+        :max-digit="2"
+        :color="active ? 'white' : 'primary'"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import BaseCounter from './BaseCounter.vue';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+  color: {
+    default: 'dark',
+    type: String as PropType<
+      'dark' | 'light' | 'danger' | 'success' | 'warning'
+    >,
+  },
+});
+
+const textColor = computed((): string => {
+  if (props.color == 'dark') {
+    return 'text-slate-700';
+  } else if (props.color == 'light') {
+    return 'text-slate-600';
+  } else if (props.color == 'danger') {
+    return 'text-red-600';
+  } else if (props.color == 'success') {
+    return 'text-green-600';
+  } else if (props.color == 'warning') {
+    return 'text-yellow-600';
+  }
+
+  return '';
+});
+
+const buttonClasses = computed((): string => {
+  let baseClasses =
+    'flex items-center justify-between w-full leading-tight py-2 text-sm text-left rounded';
+
+  if (!props.active) {
+    baseClasses += ' bg-white';
+    baseClasses += ' ' + textColor.value;
+  } else {
+    baseClasses += ' bg-primary-600 text-white';
+  }
+
+  if (props.icon) {
+    baseClasses += ' pl-2 pr-4';
+  } else {
+    baseClasses += ' px-4';
+  }
+
+  return baseClasses;
+});
+
+const iconClasses = computed((): string => {
+  let baseClasses = ' w-5 h-5 shrink-0 mr-2';
+
+  if (!props.active) {
+    baseClasses += ' opacity-70 ' + textColor.value;
+  } else {
+    baseClasses += ' text-primary-100';
+  }
+
+  return baseClasses;
+});
+</script>

package/src/components/BaseModalCenter.vue

@@ -0,0 +1,107 @@
+<template>
+  <Teleport to="body">
+    <transition
+      name="modal"
+      enter-active-class="duration-300"
+      leave-active-class="duration-200"
+    >
+      <div v-show="modelValue">
+        <div
+          ref="allow"
+          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
+          scroll-lock-target
+        >
+          <div
+            class="flex min-h-full w-full items-end justify-center overflow-hidden pt-20 sm:px-6 sm:pb-6 sm:pt-20"
+            :class="{
+              'sm:items-center': verticalAlign == 'center',
+              'sm:items-start': verticalAlign == 'top',
+            }"
+          >
+            <div class="pt-safe grow">
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-if="modelValue"
+                  :class="modalOverlayClasses"
+                  class="fixed inset-0 transition-opacity"
+                  @click="
+                    closeOnOutsideClick
+                      ? modal.close()
+                      : modal.refuseAnimation()
+                  "
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="translate-y-20 opacity-0"
+                enter-to-class="translate-y-0 opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="translate-y-0 opacity-100"
+                leave-to-class="translate-y-20 opacity-0"
+              >
+                <div
+                  v-if="modelValue"
+                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:max-w-lg sm:rounded-xl sm:shadow-xl"
+                  :class="[modal.animationClasses.value]"
+                >
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+
+          <button
+            class="right absolute top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
+            type="button"
+            @click="modal.close()"
+          >
+            <Icon class="h-8 w-8 text-white" icon="heroicons:x-mark"></Icon>
+          </button>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useModal } from '@/composables/modal';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  verticalAlign: {
+    default: 'center',
+    type: String,
+  },
+  modalOverlayClasses: {
+    default: 'bg-opacity-70 bg-slate-900',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const allow = ref(null);
+
+const modal = useModal(
+  computed(() => props.modelValue),
+  allow,
+  emit as any
+);
+</script>

package/src/components/BaseModalSide.vue

@@ -0,0 +1,112 @@
+<template>
+  <Teleport to="body">
+    <transition
+      name="modal"
+      enter-active-class="duration-300"
+      leave-active-class="duration-200"
+    >
+      <div v-show="modelValue">
+        <div
+          ref="allow"
+          class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
+          scroll-lock-target
+        >
+          <div class="flex min-h-full w-full pt-20 sm:pt-0">
+            <div class="min-h-full grow">
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+              >
+                <div
+                  v-show="modelValue"
+                  :class="modalOverlayClasses"
+                  class="fixed inset-0 transition-opacity"
+                  @click="
+                    closeOnOutsideClick
+                      ? modal.close()
+                      : modal.refuseAnimation()
+                  "
+                />
+              </transition>
+
+              <transition
+                appear
+                enter-active-class="duration-300 ease-out"
+                enter-from-class="translate-x-20 opacity-0"
+                enter-to-class="translate-x-0 opacity-100"
+                leave-active-class="duration-200 ease-in"
+                leave-from-class="translate-x-0 opacity-100"
+                leave-to-class="translate-x-20 opacity-0"
+              >
+                <div
+                  v-show="modelValue"
+                  :style="{
+                    maxWidth: realMaxWidth,
+                  }"
+                  class="pb-safe py-safe relative z-[1] ml-auto mr-0 flex h-full w-full flex-col rounded-t-lg bg-white text-left shadow-xl sm:rounded-t-none"
+                  :class="[modal.animationClasses.value]"
+                >
+                  <button
+                    class="absolute -top-[4.5rem] right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20 sm:-left-[4.5rem] sm:top-2"
+                    type="button"
+                    @click="modal.close()"
+                  >
+                    <Icon
+                      class="h-8 w-8 text-white"
+                      icon="heroicons:x-mark"
+                    ></Icon>
+                  </button>
+                  <slot :close="modal.close" />
+                </div>
+              </transition>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useBreakpoints } from '@/composables/breakpoints';
+import { useModal } from '@/composables/modal';
+
+const props = defineProps({
+  modelValue: {
+    default: false,
+    type: Boolean,
+  },
+  maxWidth: {
+    default: '32rem',
+    type: String,
+  },
+  modalOverlayClasses: {
+    default: 'bg-opacity-70 bg-slate-900',
+    type: String,
+  },
+  closeOnOutsideClick: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const allow = ref(null);
+const modal = useModal(
+  computed(() => props.modelValue),
+  allow,
+  emit
+);
+
+const breakpoints = useBreakpoints();
+
+const realMaxWidth = computed((): string => {
+  return breakpoints.greater('sm').value ? props.maxWidth : '100%';
+});
+</script>

package/src/components/BaseNavbar.vue

@@ -0,0 +1,72 @@
+<template>
+  <nav class="bg-slate-800">
+    <BaseContainer :size="size">
+      <div class="flex h-16 justify-between">
+        <!-- Navbar (desktop and mobile) -->
+        <div class="grow">
+          <slot name="navbar" />
+        </div>
+
+        <!-- Mobile Burger menu button -->
+        <div class="-mr-2 flex items-center md:hidden">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center rounded-md bg-slate-800 p-2 text-slate-400 hover:bg-slate-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 focus:ring-offset-slate-800"
+            @click="toggleMenu()"
+          >
+            <span class="sr-only">Open main menu</span>
+            <Icon
+              v-if="!showMobileMenu"
+              icon="heroicons:bars-3"
+              class="block h-6 w-6"
+              aria-hidden="true"
+            />
+            <Icon
+              v-else
+              icon="heroicons:x-mark"
+              class="block h-6 w-6"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+      </div>
+    </BaseContainer>
+
+    <!-- Mobile -->
+    <div v-if="showMobileMenu" class="absolute w-full bg-slate-800 md:hidden">
+      <slot
+        name="mobile"
+        :toggle-menu="toggleMenu"
+        :close-menu="closeMenu"
+        :open-menu="openMenu"
+      />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  size: {
+    default: '7xl',
+    type: String,
+  },
+});
+
+const showMobileMenu = ref(false);
+
+function toggleMenu() {
+  showMobileMenu.value = !showMobileMenu.value;
+}
+
+function openMenu() {
+  showMobileMenu.value = true;
+}
+
+function closeMenu() {
+  showMobileMenu.value = false;
+}
+
+provide('toggleMenu', toggleMenu);
+provide('openMenu', openMenu);
+provide('closeMenu', closeMenu);
+</script>

package/src/components/BaseNavbarItem.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <RouterLink
+      v-if="item.to"
+      v-slot="{ isActive, href: slotHref, navigate }"
+      custom
+      :to="item.to"
+    >
+      <a
+        :active="isActive"
+        :href="slotHref"
+        :aria-current="isActive ? 'page' : undefined"
+        class="block w-full"
+        @click.prevent="onClick(navigate)"
+      >
+        <slot :active="isActive">
+          <BaseNavbarItemContent
+            :label="item.label"
+            :icon="item.icon"
+            :active="isActive"
+            :count="item.count"
+          />
+        </slot>
+      </a>
+    </RouterLink>
+    <button
+      v-else-if="item.action"
+      type="button"
+      class="block w-full"
+      @click="item.action"
+    >
+      <slot :active="false">
+        <BaseNavbarItemContent
+          :label="item.label"
+          :icon="item.icon"
+          :count="item.count"
+        />
+      </slot>
+    </button>
+    <a v-else-if="item.href" :href="item.href" class="block w-full">
+      <slot :active="false">
+        <BaseNavbarItemContent
+          :label="item.label"
+          :icon="item.icon"
+          :count="item.count"
+        />
+      </slot>
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types/types';
+
+defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+});
+
+const closeMenu = inject('closeMenu') as () => void;
+
+const emit = defineEmits(['click']);
+
+function onClick(navigate: () => void) {
+  navigate();
+  emit('click');
+  closeMenu();
+}
+</script>