sprintify-ui 0.0.64 → 0.0.66

package/dist/types/src/components/BaseNavbarSideItem.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    actionsVisible: {
+        default: string;
+        type: PropType<"toggle" | "always">;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     item: {
         required: true;
@@ -18,9 +22,14 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    actionsVisible: {
+        default: string;
+        type: PropType<"toggle" | "always">;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
     dark: boolean;
+    actionsVisible: "toggle" | "always";
 }>;
 export default _default;

package/dist/types/src/types/index.d.ts

@@ -69,6 +69,7 @@ export interface ActionItem {
     icon?: string;
     count?: number;
     meta?: Record<string, any>;
+    actions?: ActionItem[];
 }
 export interface ActionSection {
     title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseClipboard.vue

@@ -39,8 +39,6 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps } from 'vue';
-
 const tooltipShown = ref(false);
 const showCopied = ref(false);
 

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -29,7 +29,26 @@ export default {
             label: 'Articles',
             to: '/articles',
             icon: 'heroicons:document-text',
+            actions: [
+              {
+                label: 'Articles',
+                to: '/articles/1',
+              },
+              {
+                label: 'Videos',
+                to: '/articles/2',
+              },
+              {
+                label: 'Training',
+                to: '/articles/3',
+              },
+              {
+                label: 'Archived',
+                to: '/articles/4',
+              },
+            ],
           },
+
           {
             label: 'Users',
             to: '/users',

package/src/components/BaseNavbarSideItem.vue

@@ -1,20 +1,42 @@
 <template>
-  <BaseActionItem
-    :item="item"
-    :dark="dark"
-    item-class="flex w-full"
-    @click="onClick"
-  >
-    <template #default="{ active }">
-      <BaseNavbarSideItemContent
-        :label="item.label"
-        :icon="item.icon"
-        :active="active"
-        :count="item.count"
-        :dark="dark"
-      />
-    </template>
-  </BaseActionItem>
+  <div>
+    <BaseActionItem
+      :item="item"
+      :dark="dark"
+      item-class="flex w-full"
+      @click="onClick"
+    >
+      <template #default="{ active }">
+        <BaseNavbarSideItemContent
+          :label="item.label"
+          :icon="item.icon"
+          :active="active"
+          :count="item.count"
+          :dark="dark"
+        />
+      </template>
+    </BaseActionItem>
+
+    <div
+      v-if="showSubActions && item.actions && item.actions.length"
+      class="ml-10 mt-1.5 mb-3"
+    >
+      <div v-for="subItem in item.actions" :key="subItem.label" class="mb-1">
+        <BaseActionItem
+          :item="subItem"
+          :dark="dark"
+          :item-class="[
+            'flex w-full',
+            dark
+              ? 'text-slate-300 hover:text-white'
+              : 'text-slate-900 hover:text-slate-600',
+          ]"
+        >
+          {{ subItem.label }}
+        </BaseActionItem>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -23,7 +45,7 @@ import { ActionItem } from '@/types';
 import BaseActionItem from './BaseActionItem.vue';
 import BaseNavbarSideItemContent from './BaseNavbarSideItemContent.vue';
 
-defineProps({
+const props = defineProps({
   item: {
     required: true,
     type: Object as PropType<ActionItem>,
@@ -32,11 +54,39 @@ defineProps({
     default: false,
     type: Boolean,
   },
+  actionsVisible: {
+    default: 'toggle',
+    type: String as PropType<'toggle' | 'always'>,
+  },
 });
 
 const emit = defineEmits(['click']);
 
+const router = useRouter();
+
 async function onClick() {
   emit('click');
 }
+
+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 itemRoute.path == route.path;
+  });
+});
+
+const showSubActions = computed((): boolean => {
+  if (props.actionsVisible == 'always') {
+    return true;
+  }
+  if (!props.item.to) {
+    return true;
+  }
+  return routeActive.value;
+});
 </script>

package/src/types/index.ts

@@ -85,6 +85,7 @@ export interface ActionItem {
   icon?: string;
   count?: number;
   meta?: Record<string, any>;
+  actions?: ActionItem[];
 }
 
 export interface ActionSection {