@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.9

package/src/ui/sidebar/SidebarDescription.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <div :class="['sidebar-description', props.class]">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div :class="['sidebar-description', props.class]">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarExpandButton.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <button :class="['sidebar-expand-button', props.class]">
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <button :class="['sidebar-expand-button', props.class]">
+    <slot />
+  </button>
+</template>

package/src/ui/sidebar/SidebarFooter.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <footer :class="['sidebar-footer', props.class]">
-    <slot />
-  </footer>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <footer :class="['sidebar-footer', props.class]">
+    <slot />
+  </footer>
+</template>

package/src/ui/sidebar/SidebarGroup.vue

@@ -1,11 +1,11 @@
-<template>
-  <div :class="['sidebar-group', props.class]">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
+<template>
+  <div :class="['sidebar-group', props.class]">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>

package/src/ui/sidebar/SidebarGroupContent.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <div :class="['sidebar-group-content', props.class]">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div :class="['sidebar-group-content', props.class]">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarGroupLabel.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-</script>
-<template>
-  <div class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+</script>
+<template>
+  <div class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarHeader.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <header :class="['sidebar-header', props.class]">
-    <slot />
-  </header>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <header :class="['sidebar-header', props.class]">
+    <slot />
+  </header>
+</template>

package/src/ui/sidebar/SidebarInset.vue

@@ -1,19 +1,19 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { cn } from '@/lib/utils';
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-const classes = computed(() =>
-  cn(
-    'bg-background relative flex w-full flex-1 flex-col',
-    'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-    props.class
-  )
-);
-</script>
-<template>
-  <main data-slot="sidebar-inset" :class="classes">
-    <slot />
-  </main>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+const classes = computed(() =>
+  cn(
+    'bg-background relative flex w-full flex-1 flex-col',
+    'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+    props.class
+  )
+);
+</script>
+<template>
+  <main data-slot="sidebar-inset" :class="classes">
+    <slot />
+  </main>
+</template>

package/src/ui/sidebar/SidebarMenu.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-</script>
-<template>
-  <ul class="sidebar-menu">
-    <slot />
-  </ul>
-</template>
+<script setup lang="ts">
+</script>
+<template>
+  <ul class="sidebar-menu">
+    <slot />
+  </ul>
+</template>

package/src/ui/sidebar/SidebarMenuBadge.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-</script>
-<template>
-  <span class="sidebar-menu-badge ml-2 text-xs bg-muted px-2 py-0.5 rounded-full">
-    <slot />
-  </span>
-</template>
+<script setup lang="ts">
+</script>
+<template>
+  <span class="sidebar-menu-badge ml-2 text-xs bg-muted px-2 py-0.5 rounded-full">
+    <slot />
+  </span>
+</template>

package/src/ui/sidebar/SidebarMenuButton.vue

@@ -1,17 +1,17 @@
-<script setup lang="ts">
-const props = defineProps({
-  isActive: { type: Boolean, default: false },
-  tooltip: String,
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <button
-    :class="['sidebar-menu-button w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
-      props.isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
-      props.class
-    ]"
-  >
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  isActive: { type: Boolean, default: false },
+  tooltip: String,
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <button
+    :class="['sidebar-menu-button w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+      props.isActive ? 'bg-accent text-accent-foreground' : 'hover:bg-accent hover:text-accent-foreground',
+      props.class
+    ]"
+  >
+    <slot />
+  </button>
+</template>

package/src/ui/sidebar/SidebarMenuItem.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <li :class="['sidebar-menu-item', props.class]">
-    <slot />
-  </li>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <li :class="['sidebar-menu-item', props.class]">
+    <slot />
+  </li>
+</template>

package/src/ui/sidebar/SidebarMenuSub.vue

@@ -1,18 +1,18 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: String,
-});
-</script>
-<template>
-  <ul
-    data-slot="sidebar-menu-sub"
-    data-sidebar="menu-sub"
-    :class="[
-      'border-sidebar-border ml-4.5 pl-2 pr-4.5 flex min-w-0 translate-x-px flex-col gap-1 border-l pt-1 pb-0.5',
-      'group-data-[collapsible=icon]:hidden',
-      props.class
-    ].filter(Boolean).join(' ')"
-  >
-    <slot />
-  </ul>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: String,
+});
+</script>
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    :class="[
+      'border-sidebar-border ml-4.5 pl-2 pr-4.5 flex min-w-0 translate-x-px flex-col gap-1 border-l pt-1 pb-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class
+    ].filter(Boolean).join(' ')"
+  >
+    <slot />
+  </ul>
+</template>

package/src/ui/sidebar/SidebarMenuSubContent.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <ul :class="['sidebar-menu-sub-content', props.class]">
-    <slot />
-  </ul>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <ul :class="['sidebar-menu-sub-content', props.class]">
+    <slot />
+  </ul>
+</template>

package/src/ui/sidebar/SidebarMenuSubItem.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <li :class="['sidebar-menu-sub-item', props.class]">
-    <slot />
-  </li>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <li :class="['sidebar-menu-sub-item', props.class]">
+    <slot />
+  </li>
+</template>

package/src/ui/sidebar/SidebarMenuSubTrigger.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <button :class="['sidebar-menu-sub-trigger', props.class]">
-    <slot />
-  </button>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <button :class="['sidebar-menu-sub-trigger', props.class]">
+    <slot />
+  </button>
+</template>

package/src/ui/sidebar/SidebarProvider.vue

@@ -1,108 +1,108 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, provide, watch } from 'vue';
-
-const SIDEBAR_WIDTH = '16rem';
-const SIDEBAR_WIDTH_ICON = '3.5rem';
-const SIDEBAR_WIDTH_AUTOCOLLAPSE = '3.5rem';
-const SIDEBAR_COOKIE_NAME = 'sidebar-open';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-
-const props = defineProps({
-  defaultOpen: { type: Boolean, default: true },
-  open: { type: Boolean, default: undefined },
-  onOpenChange: { type: Function, default: undefined },
-  class: { type: String, default: '' },
-  style: { type: Object, default: () => ({}) },
-});
-
-// Mobile detection utility (replace with your own if needed)
-function useIsMobile() {
-  const isMobile = ref(false);
-  const check = () => {
-    isMobile.value = window.matchMedia('(max-width: 768px)').matches;
-  };
-  onMounted(() => {
-    check();
-    window.addEventListener('resize', check);
-  });
-  onUnmounted(() => {
-    window.removeEventListener('resize', check);
-  });
-  return isMobile;
-}
-
-const isMobile = useIsMobile();
-const openMobile = ref(false);
-const setOpenMobile = (val) => {
-  openMobile.value = val;
-};
-
-// Internal open state for uncontrolled usage
-const _open = ref(props.defaultOpen);
-const open = computed(() => (props.open !== undefined ? props.open : _open.value));
-const setOpen = (val) => {
-  const openState = typeof val === 'function' ? val(open.value) : val;
-  if (props.onOpenChange) {
-    props.onOpenChange(openState);
-  } else {
-    _open.value = openState;
-  }
-  document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-};
-
-const toggleSidebar = () => {
-  if (isMobile.value) {
-    setOpenMobile(!openMobile.value);
-  } else {
-    setOpen((v) => !v);
-  }
-};
-
-function handleKeyDown(event) {
-  if (
-    event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
-    (event.metaKey || event.ctrlKey)
-  ) {
-    event.preventDefault();
-    toggleSidebar();
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeyDown);
-});
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
-});
-
-const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
-
-const contextValue = computed(() => ({
-  state: state.value,
-  open: open.value,
-  setOpen,
-  isMobile: isMobile.value,
-  openMobile: openMobile.value,
-  setOpenMobile,
-  toggleSidebar,
-}));
-
-provide('sidebarContext', contextValue.value);
-</script>
-<template>
-  <!-- TooltipProvider slot can be added here if using a tooltip system -->
-  <div
-    data-slot="sidebar-wrapper"
-    :style="{
-      '--sidebar-width': SIDEBAR_WIDTH,
-      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
-      '--sidebar-width-autocollapse': SIDEBAR_WIDTH_AUTOCOLLAPSE,
-      ...props.style
-    }"
-    :class="['group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-full w-full', props.class]"
-    v-bind="$attrs"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, provide, watch } from 'vue';
+
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_ICON = '3.5rem';
+const SIDEBAR_WIDTH_AUTOCOLLAPSE = '3.5rem';
+const SIDEBAR_COOKIE_NAME = 'sidebar-open';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+const props = defineProps({
+  defaultOpen: { type: Boolean, default: true },
+  open: { type: Boolean, default: undefined },
+  onOpenChange: { type: Function, default: undefined },
+  class: { type: String, default: '' },
+  style: { type: Object, default: () => ({}) },
+});
+
+// Mobile detection utility (replace with your own if needed)
+function useIsMobile() {
+  const isMobile = ref(false);
+  const check = () => {
+    isMobile.value = window.matchMedia('(max-width: 768px)').matches;
+  };
+  onMounted(() => {
+    check();
+    window.addEventListener('resize', check);
+  });
+  onUnmounted(() => {
+    window.removeEventListener('resize', check);
+  });
+  return isMobile;
+}
+
+const isMobile = useIsMobile();
+const openMobile = ref(false);
+const setOpenMobile = (val) => {
+  openMobile.value = val;
+};
+
+// Internal open state for uncontrolled usage
+const _open = ref(props.defaultOpen);
+const open = computed(() => (props.open !== undefined ? props.open : _open.value));
+const setOpen = (val) => {
+  const openState = typeof val === 'function' ? val(open.value) : val;
+  if (props.onOpenChange) {
+    props.onOpenChange(openState);
+  } else {
+    _open.value = openState;
+  }
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+};
+
+const toggleSidebar = () => {
+  if (isMobile.value) {
+    setOpenMobile(!openMobile.value);
+  } else {
+    setOpen((v) => !v);
+  }
+};
+
+function handleKeyDown(event) {
+  if (
+    event.key.toLowerCase() === SIDEBAR_KEYBOARD_SHORTCUT &&
+    (event.metaKey || event.ctrlKey)
+  ) {
+    event.preventDefault();
+    toggleSidebar();
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
+
+const contextValue = computed(() => ({
+  state: state.value,
+  open: open.value,
+  setOpen,
+  isMobile: isMobile.value,
+  openMobile: openMobile.value,
+  setOpenMobile,
+  toggleSidebar,
+}));
+
+provide('sidebarContext', contextValue.value);
+</script>
+<template>
+  <!-- TooltipProvider slot can be added here if using a tooltip system -->
+  <div
+    data-slot="sidebar-wrapper"
+    :style="{
+      '--sidebar-width': SIDEBAR_WIDTH,
+      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      '--sidebar-width-autocollapse': SIDEBAR_WIDTH_AUTOCOLLAPSE,
+      ...props.style
+    }"
+    :class="['group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-full w-full', props.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarScrollArea.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <div :class="['sidebar-scroll-area', props.class]">
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <div :class="['sidebar-scroll-area', props.class]">
+    <slot />
+  </div>
+</template>

package/src/ui/sidebar/SidebarSection.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <section :class="['sidebar-section', props.class]">
-    <slot />
-  </section>
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <section :class="['sidebar-section', props.class]">
+    <slot />
+  </section>
+</template>

package/src/ui/sidebar/SidebarSeparator.vue

@@ -1,8 +1,8 @@
-<script setup lang="ts">
-const props = defineProps({
-  class: { type: String, default: '' },
-});
-</script>
-<template>
-  <hr :class="['sidebar-separator', props.class]" />
-</template>
+<script setup lang="ts">
+const props = defineProps({
+  class: { type: String, default: '' },
+});
+</script>
+<template>
+  <hr :class="['sidebar-separator', props.class]" />
+</template>