sprintify-ui 0.1.17 → 0.2.0

package/src/components/BaseNavbar.vue

@@ -1,91 +1,91 @@
-<template>
-  <nav
-    class="border-t-[3px] border-primary-500"
-    :class="[dark ? 'bg-slate-900' : 'bg-white']"
-  >
-    <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 p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
-            :class="[
-              dark
-                ? 'text-slate-200 hover:bg-slate-800 hover:text-white focus:ring-slate-700  focus:ring-offset-slate-900'
-                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-300  focus:ring-offset-white',
-            ]"
-            @click="toggleMenu()"
-          >
-            <span class="sr-only">Open main menu</span>
-            <BaseIcon
-              v-if="!showMobileMenu"
-              icon="heroicons:bars-3"
-              class="block h-6 w-6"
-              aria-hidden="true"
-            />
-            <BaseIcon
-              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 md:hidden"
-      :class="[dark ? 'bg-slate-900' : 'bg-white']"
-    >
-      <slot
-        name="mobile"
-        :toggle-menu="toggleMenu"
-        :close-menu="closeMenu"
-        :open-menu="openMenu"
-      />
-    </div>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { Icon as BaseIcon } from '@iconify/vue';
-import BaseContainer from './BaseContainer.vue';
-
-defineProps({
-  size: {
-    default: '7xl',
-    type: String,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-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>
+<template>
+  <nav
+    class="border-t-[3px] border-primary-500"
+    :class="[dark ? 'bg-slate-900' : 'bg-white']"
+  >
+    <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 p-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            :class="[
+              dark
+                ? 'text-slate-200 hover:bg-slate-800 hover:text-white focus:ring-slate-700  focus:ring-offset-slate-900'
+                : 'text-slate-500 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-300  focus:ring-offset-white',
+            ]"
+            @click="toggleMenu()"
+          >
+            <span class="sr-only">Open main menu</span>
+            <BaseIcon
+              v-if="!showMobileMenu"
+              icon="heroicons:bars-3"
+              class="block h-6 w-6"
+              aria-hidden="true"
+            />
+            <BaseIcon
+              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 md:hidden"
+      :class="[dark ? 'bg-slate-900' : 'bg-white']"
+    >
+      <slot
+        name="mobile"
+        :toggle-menu="toggleMenu"
+        :close-menu="closeMenu"
+        :open-menu="openMenu"
+      />
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Icon as BaseIcon } from '@iconify/vue';
+import BaseContainer from './BaseContainer.vue';
+
+defineProps({
+  size: {
+    default: '7xl',
+    type: String,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+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

@@ -1,49 +1,49 @@
-<template>
-  <div class="flex">
-    <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
-      class="flex w-full"
-      @click="onClick"
-    >
-      <template #default="{ active }">
-        <BaseNavbarItemContent
-          :label="item.label"
-          :icon="item.icon"
-          :active="active"
-          :count="item.count"
-          :dark="dark"
-        />
-      </template>
-    </BaseActionItem>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue';
-import { ActionItem } from '@/types';
-import BaseActionItem from './BaseActionItem.vue';
-import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
-
-defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<ActionItem>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const closeMenu = inject('closeMenu') as () => void;
-
-const emit = defineEmits(['click']);
-
-async function onClick() {
-  emit('click');
-  closeMenu();
-}
-</script>
+<template>
+  <div class="flex">
+    <BaseActionItem
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
+      :dark="dark"
+      class="flex w-full"
+      @click="onClick"
+    >
+      <template #default="{ active }">
+        <BaseNavbarItemContent
+          :label="item.label"
+          :icon="item.icon"
+          :active="active"
+          :count="item.count"
+          :dark="dark"
+        />
+      </template>
+    </BaseActionItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+
+defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const closeMenu = inject('closeMenu') as () => void;
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+  closeMenu();
+}
+</script>

package/src/components/BaseNavbarItemContent.vue

@@ -1,86 +1,86 @@
-<template>
-  <div :class="classes">
-    <div class="group flex grow items-center">
-      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
-      <span :class="[sizeClasses]">{{ label }}</span>
-    </div>
-    <div v-if="count" class="relative -top-px ml-[5px]">
-      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Icon as BaseIcon } from '@iconify/vue';
-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,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'sm' | 'md'>,
-  },
-});
-
-const classes = computed(() => {
-  const classList = [
-    'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
-  ];
-
-  if (props.active) {
-    if (props.dark) {
-      classList.push('border-white text-white');
-    } else {
-      classList.push('border-primary-500 text-slate-900');
-    }
-  } else {
-    classList.push('border-transparent');
-    if (props.dark) {
-      classList.push('hover:border-white hover:text-white text-slate-200');
-    } else {
-      classList.push(
-        'hover:border-primary-500 hover:text-slate-900 text-slate-800'
-      );
-    }
-  }
-
-  return classList;
-});
-
-const iconClasses = computed((): string[] => {
-  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
-  if (props.active) {
-    classList.push('opacity-100');
-  } else {
-    classList.push('opacity-70 group-hover:opacity-100');
-  }
-  return classList;
-});
-
-const sizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'text-sm';
-  }
-  return 'text-base';
-});
-</script>
+<template>
+  <div :class="classes">
+    <div class="group flex grow items-center">
+      <BaseIcon v-if="icon" :icon="icon" :class="iconClasses" />
+      <span :class="[sizeClasses]">{{ label }}</span>
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Icon as BaseIcon } from '@iconify/vue';
+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,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'sm' | 'md'>,
+  },
+});
+
+const classes = computed(() => {
+  const classList = [
+    'text-left border-b-2 px-2 flex items-center text-base font-medium w-full',
+  ];
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('border-white text-white');
+    } else {
+      classList.push('border-primary-500 text-slate-900');
+    }
+  } else {
+    classList.push('border-transparent');
+    if (props.dark) {
+      classList.push('hover:border-white hover:text-white text-slate-200');
+    } else {
+      classList.push(
+        'hover:border-primary-500 hover:text-slate-900 text-slate-800'
+      );
+    }
+  }
+
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['w-5 h-5 shrink-0 mr-2 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+  return classList;
+});
+
+const sizeClasses = computed(() => {
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-base';
+});
+</script>

package/src/components/BaseNavbarSideItem.vue

@@ -1,111 +1,111 @@
-<template>
-  <div>
-    <BaseActionItem
-      :to="item.to"
-      :href="item.href"
-      :action="item.action"
-      :dark="dark"
-      class="flex w-full"
-      @click="onClick"
-    >
-      <template #default="{ active }">
-        <BaseNavbarSideItemContent
-          :label="item.label"
-          :icon="item.icon"
-          :active="active"
-          :count="item.count"
-          :dark="dark"
-          :size="size"
-        />
-      </template>
-    </BaseActionItem>
-
-    <div
-      v-if="showSubActions && item.actions && item.actions.length"
-      class="mt-2 mb-3"
-    >
-      <div v-for="subItem in item.actions" :key="subItem.label">
-        <BaseActionItem
-          :to="subItem.to"
-          :href="subItem.href"
-          :action="subItem.action"
-          :class="subItemClasses"
-        >
-          {{ subItem.label }}
-        </BaseActionItem>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue';
-import { ActionItem } from '@/types';
-import BaseActionItem from './BaseActionItem.vue';
-import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<ActionItem>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  actionsVisible: {
-    default: 'toggle',
-    type: String as PropType<'toggle' | 'always'>,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-});
-
-const emit = defineEmits(['click']);
-
-async function onClick() {
-  emit('click');
-}
-
-const routeActive = computed((): boolean => {
-  if (!props.item.to) {
-    return false;
-  }
-
-  const link = useLink({ to: props.item.to });
-
-  return link.isActive.value;
-});
-
-const showSubActions = computed((): boolean => {
-  if (props.actionsVisible == 'always') {
-    return true;
-  }
-  if (!props.item.to) {
-    return true;
-  }
-  return routeActive.value;
-});
-
-const subItemClasses = computed((): string[] => {
-  const classList = ['flex w-full font-normal'];
-
-  if (props.dark) {
-    classList.push('text-slate-300 hover:text-white');
-  } else {
-    classList.push('text-slate-900 hover:text-slate-600');
-  }
-
-  if (props.size == 'xs') {
-    classList.push('pl-[33.5px] text-[13px] mb-1');
-  } else if (props.size == 'sm') {
-    classList.push('pl-[36px] text-sm mb-1.5');
-  } else {
-    classList.push('pl-[40px] text-base mb-1');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <div>
+    <BaseActionItem
+      :to="item.to"
+      :href="item.href"
+      :action="item.action"
+      :dark="dark"
+      class="flex w-full"
+      @click="onClick"
+    >
+      <template #default="{ active }">
+        <BaseNavbarSideItemContent
+          :label="item.label"
+          :icon="item.icon"
+          :active="active"
+          :count="item.count"
+          :dark="dark"
+          :size="size"
+        />
+      </template>
+    </BaseActionItem>
+
+    <div
+      v-if="showSubActions && item.actions && item.actions.length"
+      class="mt-2 mb-3"
+    >
+      <div v-for="subItem in item.actions" :key="subItem.label">
+        <BaseActionItem
+          :to="subItem.to"
+          :href="subItem.href"
+          :action="subItem.action"
+          :class="subItemClasses"
+        >
+          {{ subItem.label }}
+        </BaseActionItem>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { ActionItem } from '@/types';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  actionsVisible: {
+    default: 'toggle',
+    type: String as PropType<'toggle' | 'always'>,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+}
+
+const routeActive = computed((): boolean => {
+  if (!props.item.to) {
+    return false;
+  }
+
+  const link = useLink({ to: props.item.to });
+
+  return link.isActive.value;
+});
+
+const showSubActions = computed((): boolean => {
+  if (props.actionsVisible == 'always') {
+    return true;
+  }
+  if (!props.item.to) {
+    return true;
+  }
+  return routeActive.value;
+});
+
+const subItemClasses = computed((): string[] => {
+  const classList = ['flex w-full font-normal'];
+
+  if (props.dark) {
+    classList.push('text-slate-300 hover:text-white');
+  } else {
+    classList.push('text-slate-900 hover:text-slate-600');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('pl-[33.5px] text-[13px] mb-1');
+  } else if (props.size == 'sm') {
+    classList.push('pl-[36px] text-sm mb-1.5');
+  } else {
+    classList.push('pl-[40px] text-base mb-1');
+  }
+
+  return classList;
+});
+</script>