sprintify-ui 0.10.64 → 0.10.65

package/src/components/BaseNavbarSideItem.vue

@@ -1,187 +1,187 @@
-<template>
-  <div>
-    <BaseTooltip
-      :floating-options="{
-        placement: 'right-start',
-      }"
-      :visible="collapsed"
-      :interactive="hasItems"
-      :offset="hasItems ? 0 : 6"
-    >
-      <template #default>
-        <BaseActionItem
-          v-if="!item.meta?.line"
-          :item="item"
-          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"
-              :collapsed="collapsed"
-            />
-          </template>
-        </BaseActionItem>
-      </template>
-
-      <template
-        v-if="collapsed"
-        #tooltip
-      >
-        <div
-          v-if="hasItems"
-          class="bg-white shadow-lg py-2 ring-1 ring-black ring-opacity-10 rounded-r-md w-[180px]"
-        >
-          <div
-            v-for="subItem in item.actions"
-            :key="subItem.label"
-          >
-            <BaseActionItem
-              :item="subItem"
-              class="flex gap-1 items-center px-4 py-1.5 hover:bg-slate-100"
-            >
-              <template #default="{ active }">
-                <div class="flex justify-between gap-2 items-center w-full">
-                  <div
-                    class="text-sm text-slate-600 hover:text-slate-950"
-                    :class="{ 'font-medium': active }"
-                  >
-                    {{ subItem.label }}
-                  </div>
-                  <BaseCounter
-                    v-if="subItem.count"
-                    :count="subItem.count"
-                    size="sm"
-                  />
-                </div>
-              </template>
-            </BaseActionItem>
-          </div>
-        </div>
-        <div
-          v-else
-          class="bg-slate-900 text-white rounded shadow-lg px-2 py-1.5 text-xs"
-        >
-          <span>{{ item.label }}</span>
-        </div>
-      </template>
-    </BaseTooltip>
-
-    <div
-      v-if="!collapsed && hasItems && showSubActions"
-      class="mt-1 sm:mt-2 mb-3"
-    >
-      <div
-        v-for="subItem in item.actions"
-        :key="subItem.label"
-      >
-        <BaseActionItem
-          :item="subItem"
-          :class="subItemClasses"
-        >
-          <template #default="{ active }">
-            <div
-              class="grow"
-              :class="{ 'font-medium': active, 'text-white': active && dark }"
-            >
-              {{ subItem.label }}
-            </div>
-            <BaseCounter
-              v-if="subItem.count"
-              :count="subItem.count"
-              :size="size"
-              :color="dark ? 'light' : 'light'"
-            />
-          </template>
-        </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';
-import BaseCounter from './BaseCounter.vue';
-import BaseTooltip from './BaseTooltip.vue';
-
-const router = useRouter();
-
-const props = defineProps({
-  item: {
-    required: true,
-    type: Object as PropType<ActionItem>,
-  },
-  dark: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: 'md',
-    type: String as PropType<'xs' | 'sm' | 'md'>,
-  },
-  collapsed: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['click']);
-
-async function onClick() {
-  emit('click');
-}
-
-const hasItems = computed((): boolean => {
-  return !!props.item.actions && props.item.actions.length > 0;
-});
-
-const routeActive = computed((): boolean => {
-  if (!props.item.to) {
-    return false;
-  }
-
-  const itemRoute = router.resolve(props.item.to);
-
-  return router.currentRoute.value.matched.some((route) => {
-    return route.path.startsWith(itemRoute.path);
-  });
-});
-
-const showSubActions = computed((): boolean => {
-  if (props.item.meta?.showSubItems == 'always') {
-    return true;
-  }
-  if (!props.item.to) {
-    return true;
-  }
-  return routeActive.value;
-});
-
-const subItemClasses = computed((): string[] => {
-  const classList = ['flex w-full'];
-
-  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-3 sm:pl-[33.5px] text-[13px] mb-1 pr-2.5');
-  } else if (props.size == 'sm') {
-    classList.push('pl-3 sm:pl-[36px] text-sm mb-1.5 pr-3');
-  } else {
-    classList.push('pl-3 sm:pl-[40px] text-base mb-1 pr-3');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <div>
+    <BaseTooltip
+      :floating-options="{
+        placement: 'right-start',
+      }"
+      :visible="collapsed"
+      :interactive="hasItems"
+      :offset="hasItems ? 0 : 6"
+    >
+      <template #default>
+        <BaseActionItem
+          v-if="!item.meta?.line"
+          :item="item"
+          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"
+              :collapsed="collapsed"
+            />
+          </template>
+        </BaseActionItem>
+      </template>
+
+      <template
+        v-if="collapsed"
+        #tooltip
+      >
+        <div
+          v-if="hasItems"
+          class="bg-white shadow-lg py-2 ring-1 ring-black ring-opacity-10 rounded-r-md w-[180px]"
+        >
+          <div
+            v-for="subItem in item.actions"
+            :key="subItem.label"
+          >
+            <BaseActionItem
+              :item="subItem"
+              class="flex gap-1 items-center px-4 py-1.5 hover:bg-slate-100"
+            >
+              <template #default="{ active }">
+                <div class="flex justify-between gap-2 items-center w-full">
+                  <div
+                    class="text-sm text-slate-600 hover:text-slate-950"
+                    :class="{ 'font-medium': active }"
+                  >
+                    {{ subItem.label }}
+                  </div>
+                  <BaseCounter
+                    v-if="subItem.count"
+                    :count="subItem.count"
+                    size="sm"
+                  />
+                </div>
+              </template>
+            </BaseActionItem>
+          </div>
+        </div>
+        <div
+          v-else
+          class="bg-slate-900 text-white rounded shadow-lg px-2 py-1.5 text-xs"
+        >
+          <span>{{ item.label }}</span>
+        </div>
+      </template>
+    </BaseTooltip>
+
+    <div
+      v-if="!collapsed && hasItems && showSubActions"
+      class="mt-1 sm:mt-2 mb-3"
+    >
+      <div
+        v-for="subItem in item.actions"
+        :key="subItem.label"
+      >
+        <BaseActionItem
+          :item="subItem"
+          :class="subItemClasses"
+        >
+          <template #default="{ active }">
+            <div
+              class="grow"
+              :class="{ 'font-medium': active, 'text-white': active && dark }"
+            >
+              {{ subItem.label }}
+            </div>
+            <BaseCounter
+              v-if="subItem.count"
+              :count="subItem.count"
+              :size="size"
+              :color="dark ? 'light' : 'light'"
+            />
+          </template>
+        </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';
+import BaseCounter from './BaseCounter.vue';
+import BaseTooltip from './BaseTooltip.vue';
+
+const router = useRouter();
+
+const props = defineProps({
+  item: {
+    required: true,
+    type: Object as PropType<ActionItem>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'md',
+    type: String as PropType<'xs' | 'sm' | 'md'>,
+  },
+  collapsed: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+}
+
+const hasItems = computed((): boolean => {
+  return !!props.item.actions && props.item.actions.length > 0;
+});
+
+const routeActive = computed((): boolean => {
+  if (!props.item.to) {
+    return false;
+  }
+
+  const itemRoute = router.resolve(props.item.to);
+
+  return router.currentRoute.value.matched.some((route) => {
+    return route.path.startsWith(itemRoute.path);
+  });
+});
+
+const showSubActions = computed((): boolean => {
+  if (props.item.meta?.showSubItems == 'always') {
+    return true;
+  }
+  if (!props.item.to) {
+    return true;
+  }
+  return routeActive.value;
+});
+
+const subItemClasses = computed((): string[] => {
+  const classList = ['flex w-full'];
+
+  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-3 sm:pl-[33.5px] text-[13px] mb-1 pr-2.5');
+  } else if (props.size == 'sm') {
+    classList.push('pl-3 sm:pl-[36px] text-sm mb-1.5 pr-3');
+  } else {
+    classList.push('pl-3 sm:pl-[40px] text-base mb-1 pr-3');
+  }
+
+  return classList;
+});
+</script>

package/src/components/BaseNavbarSideItemContent.vue

@@ -1,126 +1,126 @@
-<template>
-  <div :class="classes">
-    <div
-      class="group flex grow items-center"
-      :class="[collapsed ? 'justify-center' : 'justify-start']"
-    >
-      <BaseIcon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClasses"
-      />
-      <span v-if="!collapsed">{{ label }}</span>
-    </div>
-    <div
-      v-if="count && !collapsed"
-      class="relative -top-px ml-[5px]"
-    >
-      <BaseCounter
-        :size="size"
-        :count="count"
-        :max-digit="2"
-        color="danger"
-      />
-    </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<'xs' | 'sm' | 'md'>,
-  },
-  collapsed: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const classes = computed(() => {
-  const classList = ['text-left flex w-full'];
-
-  if (!props.collapsed) {
-    classList.push('rounded-md');
-  }
-
-  if (props.active) {
-    if (props.dark) {
-      classList.push('bg-slate-700 text-white');
-    } else {
-      classList.push('bg-slate-100 text-primary-700');
-    }
-  } else {
-    if (props.dark) {
-      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
-    } else {
-      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
-    }
-  }
-
-  if (props.size == 'xs') {
-    classList.push('text-[13px] px-2.5 py-1 font-medium');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('text-sm px-3 py-1.5 font-medium');
-  }
-
-  if (props.size == 'md') {
-    classList.push('text-base px-3 py-2 font-medium');
-  }
-
-  return classList;
-});
-
-const iconClasses = computed((): string[] => {
-  const classList = ['shrink-0 leading-none inline-block'];
-  if (props.active) {
-    classList.push('opacity-100');
-  } else {
-    classList.push('opacity-70 group-hover:opacity-100');
-  }
-
-  if (props.size == 'xs') {
-    classList.push('w-3.5 h-3.5');
-  }
-
-  if (props.size == 'sm') {
-    classList.push('w-4 h-4');
-  }
-
-  if (props.size == 'md') {
-    classList.push('w-5 h-5');
-  }
-
-  if (!props.collapsed) {
-    classList.push('mr-2');
-  }
-
-  return classList;
-});
-</script>
+<template>
+  <div :class="classes">
+    <div
+      class="group flex grow items-center"
+      :class="[collapsed ? 'justify-center' : 'justify-start']"
+    >
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
+      <span v-if="!collapsed">{{ label }}</span>
+    </div>
+    <div
+      v-if="count && !collapsed"
+      class="relative -top-px ml-[5px]"
+    >
+      <BaseCounter
+        :size="size"
+        :count="count"
+        :max-digit="2"
+        color="danger"
+      />
+    </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<'xs' | 'sm' | 'md'>,
+  },
+  collapsed: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const classes = computed(() => {
+  const classList = ['text-left flex w-full'];
+
+  if (!props.collapsed) {
+    classList.push('rounded-md');
+  }
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('bg-slate-700 text-white');
+    } else {
+      classList.push('bg-slate-100 text-primary-700');
+    }
+  } else {
+    if (props.dark) {
+      classList.push('hover:bg-slate-800 hover:text-white text-slate-300');
+    } else {
+      classList.push('hover:bg-slate-50 hover:text-slate-900 text-slate-800');
+    }
+  }
+
+  if (props.size == 'xs') {
+    classList.push('text-[13px] px-2.5 py-1 font-medium');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('text-sm px-3 py-1.5 font-medium');
+  }
+
+  if (props.size == 'md') {
+    classList.push('text-base px-3 py-2 font-medium');
+  }
+
+  return classList;
+});
+
+const iconClasses = computed((): string[] => {
+  const classList = ['shrink-0 leading-none inline-block'];
+  if (props.active) {
+    classList.push('opacity-100');
+  } else {
+    classList.push('opacity-70 group-hover:opacity-100');
+  }
+
+  if (props.size == 'xs') {
+    classList.push('w-3.5 h-3.5');
+  }
+
+  if (props.size == 'sm') {
+    classList.push('w-4 h-4');
+  }
+
+  if (props.size == 'md') {
+    classList.push('w-5 h-5');
+  }
+
+  if (!props.collapsed) {
+    classList.push('mr-2');
+  }
+
+  return classList;
+});
+</script>