sprintify-ui 0.10.65 → 0.10.67

package/src/components/BaseNavbarItem.vue

@@ -1,108 +1,108 @@
-<template>
-  <div class="flex group relative">
-    <BaseActionItem
-      :item="item"
-      class="flex w-full"
-      @click="onClick"
-    >
-      <template #default="{ active }">
-        <BaseNavbarItemContent
-          :size="size"
-          :label="item.label"
-          :icon="item.icon"
-          :active="active"
-          :count="item.count"
-          :dark="dark"
-        />
-      </template>
-    </BaseActionItem>
-    <div
-      v-if="item.actions && item.actions.length"
-      :class="dropdownClasses"
-      :style="{
-        width: `${dropdownWidth}px`,
-        top: `${height - 3}px`,
-      }"
-    >
-      <div class="space-y-px">
-        <div
-          v-for="subItem in item.actions"
-          :key="subItem.label"
-        >
-          <div
-            v-if="subItem.meta?.line"
-            class="-mx-1 my-1 flex h-px bg-slate-200"
-          />
-          <BaseActionItem
-            v-else
-            :item="subItem"
-          >
-            <BaseMenuItem
-              :size="size == 'xs' ? 'xs' : 'sm'"
-              :label="subItem.label"
-              :count="subItem.count"
-              :icon="subItem.icon"
-              :description="subItem.description"
-            />
-          </BaseActionItem>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { PropType, Ref } from 'vue';
-import { ActionItem } from '@/types';
-import BaseActionItem from './BaseActionItem.vue';
-import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
-import BaseMenuItem from './BaseMenuItem.vue';
-import { twMerge } from 'tailwind-merge';
-
-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'>,
-  },
-  twDropdown: {
-    default: undefined,
-    type: [String, Array] as PropType<string | string[]>,
-  },
-});
-
-const height = inject('navbar:height') as Ref<number>;
-
-const closeMenu = inject('closeMenu') as () => void;
-
-const emit = defineEmits(['click']);
-
-async function onClick() {
-  emit('click');
-  closeMenu();
-}
-
-const dropdownWidth = computed(() => {
-  if (props.item.meta?.dropdownWidth) {
-    return props.item.meta.dropdownWidth;
-  }
-
-  return 256;
-});
-
-const dropdownClasses = computed(() => {
-  return twMerge(
-    'absolute ring-1 ring-black ring-opacity-10 shadow-lg rounded-md invisible p-1 left-0 bg-white duration-100 opacity-0 translate-y-1',
-    'group-hover:visible group-hover:opacity-100 group-hover:translate-y-0',
-    props.twDropdown
-  );
-});
-
-</script>
+<template>
+  <div class="flex group relative">
+    <BaseActionItem
+      :item="item"
+      class="flex w-full"
+      @click="onClick"
+    >
+      <template #default="{ active }">
+        <BaseNavbarItemContent
+          :size="size"
+          :label="item.label"
+          :icon="item.icon"
+          :active="active"
+          :count="item.count"
+          :dark="dark"
+        />
+      </template>
+    </BaseActionItem>
+    <div
+      v-if="item.actions && item.actions.length"
+      :class="dropdownClasses"
+      :style="{
+        width: `${dropdownWidth}px`,
+        top: `${height - 3}px`,
+      }"
+    >
+      <div class="space-y-px">
+        <div
+          v-for="subItem in item.actions"
+          :key="subItem.label"
+        >
+          <div
+            v-if="subItem.meta?.line"
+            class="-mx-1 my-1 flex h-px bg-slate-200"
+          />
+          <BaseActionItem
+            v-else
+            :item="subItem"
+          >
+            <BaseMenuItem
+              :size="size == 'xs' ? 'xs' : 'sm'"
+              :label="subItem.label"
+              :count="subItem.count"
+              :icon="subItem.icon"
+              :description="subItem.description"
+            />
+          </BaseActionItem>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, Ref } from 'vue';
+import { ActionItem } from '@/types';
+import BaseActionItem from './BaseActionItem.vue';
+import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
+import BaseMenuItem from './BaseMenuItem.vue';
+import { twMerge } from 'tailwind-merge';
+
+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'>,
+  },
+  twDropdown: {
+    default: undefined,
+    type: [String, Array] as PropType<string | string[]>,
+  },
+});
+
+const height = inject('navbar:height') as Ref<number>;
+
+const closeMenu = inject('closeMenu') as () => void;
+
+const emit = defineEmits(['click']);
+
+async function onClick() {
+  emit('click');
+  closeMenu();
+}
+
+const dropdownWidth = computed(() => {
+  if (props.item.meta?.dropdownWidth) {
+    return props.item.meta.dropdownWidth;
+  }
+
+  return 256;
+});
+
+const dropdownClasses = computed(() => {
+  return twMerge(
+    'absolute ring-1 ring-black ring-opacity-10 shadow-lg rounded-md invisible p-1 left-0 bg-white duration-100 opacity-0 translate-y-1',
+    'group-hover:visible group-hover:opacity-100 group-hover:translate-y-0',
+    props.twDropdown
+  );
+});
+
+</script>

package/src/components/BaseNavbarItemContent.vue

@@ -1,124 +1,124 @@
-<template>
-  <div :class="classes">
-    <div :class="classesInner">
-      <BaseIcon
-        v-if="icon"
-        :icon="icon"
-        :class="iconClasses"
-      />
-      <div :class="[sizeClasses, 'text-base']">
-        {{ label }}
-      </div>
-      <div
-        v-if="count"
-        class="relative -top-px ml-[5px]"
-      >
-        <BaseCounter
-          :size="size"
-          :count="count"
-          :max-digit="2"
-          color="danger"
-        />
-      </div>
-    </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'>,
-  },
-});
-
-const classes = computed(() => {
-  const classList = [
-    'flex items-center w-full',
-  ];
-
-  if (props.active) {
-    if (props.dark) {
-      classList.push('text-white');
-    } else {
-      classList.push('text-primary-600');
-    }
-  } else {
-    if (props.dark) {
-      classList.push('hover:text-white text-slate-300');
-    } else {
-      classList.push(
-        'hover:text-slate-900 text-slate-800'
-      );
-    }
-  }
-
-  return classList;
-});
-
-const classesInner = computed(() => {
-  const classList = [
-    'py-1 grow rounded-md duration-100 flex items-center font-medium',
-  ];
-
-  if (props.size == 'xs') {
-    classList.push('px-2 h-7')
-  } else if (props.size == 'sm') {
-    classList.push('px-2 h-8')
-  } else {
-    classList.push('px-3 h-10')
-  }
-
-  if (props.dark) {
-    classList.push('hover:bg-slate-700');
-  } else {
-    classList.push('hover:bg-slate-100');
-  }
-
-  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 == 'xs') {
-    return 'text-xs';
-  }
-  if (props.size == 'sm') {
-    return 'text-sm';
-  }
-  return 'text-base';
-});
-</script>
+<template>
+  <div :class="classes">
+    <div :class="classesInner">
+      <BaseIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
+      <div :class="[sizeClasses, 'text-base']">
+        {{ label }}
+      </div>
+      <div
+        v-if="count"
+        class="relative -top-px ml-[5px]"
+      >
+        <BaseCounter
+          :size="size"
+          :count="count"
+          :max-digit="2"
+          color="danger"
+        />
+      </div>
+    </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'>,
+  },
+});
+
+const classes = computed(() => {
+  const classList = [
+    'flex items-center w-full',
+  ];
+
+  if (props.active) {
+    if (props.dark) {
+      classList.push('text-white');
+    } else {
+      classList.push('text-primary-600');
+    }
+  } else {
+    if (props.dark) {
+      classList.push('hover:text-white text-slate-300');
+    } else {
+      classList.push(
+        'hover:text-slate-900 text-slate-800'
+      );
+    }
+  }
+
+  return classList;
+});
+
+const classesInner = computed(() => {
+  const classList = [
+    'py-1 grow rounded-md duration-100 flex items-center font-medium',
+  ];
+
+  if (props.size == 'xs') {
+    classList.push('px-2 h-7')
+  } else if (props.size == 'sm') {
+    classList.push('px-2 h-8')
+  } else {
+    classList.push('px-3 h-10')
+  }
+
+  if (props.dark) {
+    classList.push('hover:bg-slate-700');
+  } else {
+    classList.push('hover:bg-slate-100');
+  }
+
+  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 == 'xs') {
+    return 'text-xs';
+  }
+  if (props.size == 'sm') {
+    return 'text-sm';
+  }
+  return 'text-base';
+});
+</script>