@skewedaspect/sleekspace-ui 0.8.1 → 0.9.1

package/src/components/Page/SkPage.vue

@@ -4,11 +4,11 @@
 
 <template>
     <div ref="rootRef" :class="classes" :style="customStyles" :data-scheme="theme">
-        <header v-if="$slots.header" class="sk-page-header">
+        <header v-if="hasSlotContent(slots.header)" class="sk-page-header">
             <slot name="header" />
         </header>
 
-        <div v-if="$slots.subheader" class="sk-page-subheader">
+        <div v-if="hasSlotContent(slots.subheader)" class="sk-page-subheader">
             <slot name="subheader" />
         </div>
 
@@ -18,25 +18,25 @@
                 v-if="hasSidebar && !isSidebarDrawerActive"
                 class="sk-page-sidebar"
             >
-                <div v-if="$slots['sidebar-header']" class="sk-page-sidebar-header">
+                <div v-if="hasSlotContent(slots['sidebar-header'])" class="sk-page-sidebar-header">
                     <slot name="sidebar-header" :is-drawer="false" />
                 </div>
                 <div class="sk-page-sidebar-body">
                     <slot name="sidebar" :is-drawer="false" />
                 </div>
-                <div v-if="$slots['sidebar-footer']" class="sk-page-sidebar-footer">
+                <div v-if="hasSlotContent(slots['sidebar-footer'])" class="sk-page-sidebar-footer">
                     <slot name="sidebar-footer" :is-drawer="false" />
                 </div>
             </aside>
 
             <div class="sk-page-center">
-                <div v-if="$slots['main-header']" class="sk-page-main-header">
+                <div v-if="hasSlotContent(slots['main-header'])" class="sk-page-main-header">
                     <slot name="main-header" />
                 </div>
                 <main class="sk-page-content">
                     <slot />
                 </main>
-                <div v-if="$slots['main-footer']" class="sk-page-main-footer">
+                <div v-if="hasSlotContent(slots['main-footer'])" class="sk-page-main-footer">
                     <slot name="main-footer" />
                 </div>
             </div>
@@ -46,19 +46,19 @@
                 v-if="hasAside && !isAsideDrawerActive"
                 class="sk-page-aside"
             >
-                <div v-if="$slots['aside-header']" class="sk-page-aside-header">
+                <div v-if="hasSlotContent(slots['aside-header'])" class="sk-page-aside-header">
                     <slot name="aside-header" :is-drawer="false" />
                 </div>
                 <div class="sk-page-aside-body">
                     <slot name="aside" :is-drawer="false" />
                 </div>
-                <div v-if="$slots['aside-footer']" class="sk-page-aside-footer">
+                <div v-if="hasSlotContent(slots['aside-footer'])" class="sk-page-aside-footer">
                     <slot name="aside-footer" :is-drawer="false" />
                 </div>
             </aside>
         </div>
 
-        <footer v-if="$slots.footer" class="sk-page-footer">
+        <footer v-if="hasSlotContent(slots.footer)" class="sk-page-footer">
             <slot name="footer" />
         </footer>
 
@@ -84,13 +84,13 @@
                     tabindex="-1"
                     @click="onSidebarDrawerClick"
                 >
-                    <div v-if="$slots['sidebar-header']" class="sk-page-sidebar-header">
+                    <div v-if="hasSlotContent(slots['sidebar-header'])" class="sk-page-sidebar-header">
                         <slot name="sidebar-header" :is-drawer="true" />
                     </div>
                     <div class="sk-page-sidebar-body">
                         <slot name="sidebar" :is-drawer="true" />
                     </div>
-                    <div v-if="$slots['sidebar-footer']" class="sk-page-sidebar-footer">
+                    <div v-if="hasSlotContent(slots['sidebar-footer'])" class="sk-page-sidebar-footer">
                         <slot name="sidebar-footer" :is-drawer="true" />
                     </div>
                 </aside>
@@ -119,13 +119,13 @@
                     tabindex="-1"
                     @click="onAsideDrawerClick"
                 >
-                    <div v-if="$slots['aside-header']" class="sk-page-aside-header">
+                    <div v-if="hasSlotContent(slots['aside-header'])" class="sk-page-aside-header">
                         <slot name="aside-header" :is-drawer="true" />
                     </div>
                     <div class="sk-page-aside-body">
                         <slot name="aside" :is-drawer="true" />
                     </div>
-                    <div v-if="$slots['aside-footer']" class="sk-page-aside-footer">
+                    <div v-if="hasSlotContent(slots['aside-footer'])" class="sk-page-aside-footer">
                         <slot name="aside-footer" :is-drawer="true" />
                     </div>
                 </aside>
@@ -199,6 +199,9 @@
     import { useFocusTrap } from '@/composables/useFocusTrap';
     import { providePageDrawers } from '@/composables/usePageDrawer';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkPageComponentProps
@@ -279,6 +282,15 @@
          * @default false
          */
         flush ?: boolean;
+
+        /**
+         * When true, disables the bouncy overscroll / rubber-band effect on the page's scroll
+         * containers (main content, sidebar body, aside body). Applies `overscroll-behavior: none`
+         * to every scrollable region owned by SkPage. Note: the document-level bounce from scrolling
+         * the page itself (outside SkPage's containers) can only be killed on `html`/`body`.
+         * @default false
+         */
+        noBounce ?: boolean;
     }
 
     //------------------------------------------------------------------------------------------------------------------
@@ -296,6 +308,7 @@
         asideOpen: undefined,
         theme: undefined,
         flush: false,
+        noBounce: false,
     });
 
     const emit = defineEmits<{
@@ -322,8 +335,8 @@
     // Slot-derived state
     //------------------------------------------------------------------------------------------------------------------
 
-    const hasSidebar = computed<boolean>(() => Boolean(slots.sidebar));
-    const hasAside = computed<boolean>(() => Boolean(slots.aside));
+    const hasSidebar = computed<boolean>(() => hasSlotContent(slots.sidebar));
+    const hasAside = computed<boolean>(() => hasSlotContent(slots.aside));
 
     //------------------------------------------------------------------------------------------------------------------
     // Responsive mode detection — driven by SkPage's own width, not the viewport, so embedded
@@ -535,6 +548,7 @@
         'sk-sidebar-drawer-active': isSidebarDrawerActive.value,
         'sk-aside-drawer-active': isAsideDrawerActive.value,
         'sk-flush': props.flush,
+        'sk-no-bounce': props.noBounce,
     }));
 
     const customStyles = computed(() =>

package/src/components/Panel/SkPanel.vue

@@ -131,7 +131,8 @@
     const customColorStyles = useCustomColors(
         'panel',
         toRef(() => props.baseColor),
-        toRef(() => props.textColor)
+        toRef(() => props.textColor),
+        toRef(() => props.borderColor)
     );
 
     //------------------------------------------------------------------------------------------------------------------

package/src/components/Popover/SkPopover.vue

@@ -14,7 +14,7 @@
                 :collision-padding="8"
             >
                 <!-- Header -->
-                <div v-if="title || $slots.header" class="sk-popover-header">
+                <div v-if="title || hasSlotContent(slots.header)" class="sk-popover-header">
                     <h3 v-if="title" class="sk-popover-title">
                         {{ title }}
                     </h3>
@@ -42,12 +42,12 @@
                 </div>
 
                 <!-- Content -->
-                <div v-if="$slots.default" class="sk-popover-body">
+                <div v-if="hasSlotContent(slots.default)" class="sk-popover-body">
                     <slot />
                 </div>
 
                 <!-- Footer -->
-                <div v-if="$slots.footer" class="sk-popover-footer">
+                <div v-if="hasSlotContent(slots.footer)" class="sk-popover-footer">
                     <slot name="footer" />
                 </div>
 
@@ -100,7 +100,7 @@
      *   button pairs or other closing actions.
      */
 
-    import { computed, toRef } from 'vue';
+    import { type Slots, computed, toRef, useSlots } from 'vue';
     import {
         PopoverArrow,
         PopoverClose,
@@ -118,6 +118,9 @@
     import { useCustomColors } from '@/composables/useCustomColors';
     import { usePortalContext } from '@/composables/usePortalContext';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkPopoverComponentProps extends ComponentCustomColors
@@ -223,6 +226,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     const contentClasses = computed(() => ({
         'sk-popover-content': true,
         [`sk-${ props.kind }`]: true,

package/src/components/Radio/SkRadio.vue

@@ -12,7 +12,7 @@
         >
             <RadioGroupIndicator class="sk-radio-indicator" />
         </RadioGroupItem>
-        <span v-if="label || $slots.default" class="sk-radio-label">
+        <span v-if="label || hasSlotContent(slots.default)" class="sk-radio-label">
             <slot>{{ label }}</slot>
         </span>
     </label>
@@ -46,7 +46,7 @@
      *                 formatting, icons, or complex layouts alongside the radio button.
      */
 
-    import { type ComputedRef, computed, inject, toRef } from 'vue';
+    import { type ComputedRef, computed, inject, toRef, useSlots } from 'vue';
     import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
 
     // Types
@@ -56,6 +56,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkRadioComponentProps extends ComponentCustomColors
@@ -110,6 +113,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     // Inject parent kind and size
     const parentKind = inject<ComputedRef<SkRadioKind | undefined>>('radio-kind', computed(() => undefined));
     const parentSize = inject<ComputedRef<SkRadioSize | undefined>>('radio-size', computed(() => undefined));

package/src/components/ScrollArea/SkScrollArea.vue

@@ -3,8 +3,8 @@
   --------------------------------------------------------------------------------------------------------------------->
 
 <template>
-    <ScrollAreaRoot :type="type" :class="classes" :style="customColorStyles">
-        <ScrollAreaViewport class="sk-scroll-area-viewport">
+    <ScrollAreaRoot :type="type" :class="classes" :style="rootStyles">
+        <ScrollAreaViewport ref="viewportRef" class="sk-scroll-area-viewport">
             <slot />
         </ScrollAreaViewport>
         <ScrollAreaScrollbar
@@ -34,7 +34,7 @@
 <!--------------------------------------------------------------------------------------------------------------------->
 
 <script setup lang="ts">
-    import { computed, toRef } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref, toRef } from 'vue';
     import {
         ScrollAreaCorner,
         ScrollAreaRoot,
@@ -61,9 +61,10 @@
 
         /**
          * When true, fade the scrollable edges with a CSS mask so content visibly tapers
-         * into/out of the viewport. Applies to whichever axis (or both) is scrollable.
+         * into/out of the viewport. Only edges with more content to scroll toward get the
+         * fade -- the top fade disappears at scrollTop=0, bottom fade at scroll end, etc.
          * Override the fade distance via the `--sk-scroll-area-fade` custom property
-         * (default 1.5rem).
+         * (default 1rem).
          * @default false
          */
         fade ?: boolean;
@@ -94,6 +95,78 @@
         [`sk-${ props.orientation }`]: true,
         'sk-fade': props.fade,
     }));
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Scroll-position-aware fade tracking
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewportRef = ref<InstanceType<typeof ScrollAreaViewport> | null>(null);
+
+    const fadeTop = ref(0);
+    const fadeBottom = ref(0);
+    const fadeLeft = ref(0);
+    const fadeRight = ref(0);
+
+    let scrollEl : HTMLElement | null = null;
+    let resizeObs : ResizeObserver | null = null;
+    let rafID : number | null = null;
+
+    function updateFades() : void
+    {
+        if(!scrollEl) { return; }
+        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollEl;
+        const threshold = 1;
+        fadeTop.value = scrollTop > threshold ? 1 : 0;
+        fadeBottom.value = scrollHeight - scrollTop - clientHeight > threshold ? 1 : 0;
+        fadeLeft.value = scrollLeft > threshold ? 1 : 0;
+        fadeRight.value = scrollWidth - scrollLeft - clientWidth > threshold ? 1 : 0;
+    }
+
+    function scheduleUpdate() : void
+    {
+        if(rafID !== null) { return; }
+        rafID = requestAnimationFrame(() =>
+        {
+            rafID = null;
+            updateFades();
+        });
+    }
+
+    onMounted(() =>
+    {
+        const exposed = viewportRef.value as unknown as { viewportElement ?: HTMLElement } | null;
+        scrollEl = exposed?.viewportElement ?? null;
+        if(!scrollEl) { return; }
+
+        scrollEl.addEventListener('scroll', scheduleUpdate, { passive: true });
+        resizeObs = new ResizeObserver(scheduleUpdate);
+        resizeObs.observe(scrollEl);
+        for(const child of Array.from(scrollEl.children))
+        {
+            resizeObs.observe(child);
+        }
+        updateFades();
+    });
+
+    onBeforeUnmount(() =>
+    {
+        if(scrollEl) { scrollEl.removeEventListener('scroll', scheduleUpdate); }
+        resizeObs?.disconnect();
+        if(rafID !== null) { cancelAnimationFrame(rafID); }
+    });
+
+    const rootStyles = computed(() =>
+    {
+        const styles : Record<string, string> = { ...customColorStyles.value };
+        if(props.fade)
+        {
+            styles['--sk-scroll-fade-top'] = String(fadeTop.value);
+            styles['--sk-scroll-fade-bottom'] = String(fadeBottom.value);
+            styles['--sk-scroll-fade-left'] = String(fadeLeft.value);
+            styles['--sk-scroll-fade-right'] = String(fadeRight.value);
+        }
+        return styles;
+    });
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/components/Switch/SkSwitch.vue

@@ -18,17 +18,17 @@
         </SwitchRoot>
         <label v-if="showLabel" class="sk-switch-label">
             <!-- Default slot overrides everything -->
-            <slot v-if="slots.default" />
+            <slot v-if="hasSlotContent(slots.default)" />
             <!-- If using on/off labels with animation -->
             <Transition v-else-if="useOnOffLabels && !disableLabelAnimation" name="sk-switch-label-fade" mode="out-in">
                 <span v-if="modelValue" :key="'on'">
-                    <slot v-if="slots['label-on']" name="label-on" />
+                    <slot v-if="hasSlotContent(slots['label-on'])" name="label-on" />
                     <template v-else>
                         {{ labelOn }}
                     </template>
                 </span>
                 <span v-else :key="'off'">
-                    <slot v-if="slots['label-off']" name="label-off" />
+                    <slot v-if="hasSlotContent(slots['label-off'])" name="label-off" />
                     <template v-else>
                         {{ labelOff }}
                     </template>
@@ -37,13 +37,13 @@
             <!-- If using on/off labels without animation -->
             <template v-else-if="useOnOffLabels && disableLabelAnimation">
                 <span v-if="modelValue">
-                    <slot v-if="slots['label-on']" name="label-on" />
+                    <slot v-if="hasSlotContent(slots['label-on'])" name="label-on" />
                     <template v-else>
                         {{ labelOn }}
                     </template>
                 </span>
                 <span v-else>
-                    <slot v-if="slots['label-off']" name="label-off" />
+                    <slot v-if="hasSlotContent(slots['label-off'])" name="label-off" />
                     <template v-else>
                         {{ labelOff }}
                     </template>
@@ -88,6 +88,9 @@
     // Composables
     import { useCustomColors } from '@/composables/useCustomColors';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkSwitchComponentProps extends ComponentCustomColors
@@ -232,14 +235,12 @@
         // - labelOn/labelOff props are provided, OR
         // - label-on/label-off slots are provided, OR
         // - fallback label prop is provided
-        return Boolean(
-            slots.default
-                || props.labelOn
-                || props.labelOff
-                || slots['label-on']
-                || slots['label-off']
-                || props.label
-        );
+        return hasSlotContent(slots.default)
+            || Boolean(props.labelOn)
+            || Boolean(props.labelOff)
+            || hasSlotContent(slots['label-on'])
+            || hasSlotContent(slots['label-off'])
+            || Boolean(props.label);
     });
 
     const useOnOffLabels = computed(() =>

package/src/components/Tabs/SkTab.vue

@@ -8,7 +8,7 @@
         :disabled="disabled"
         :class="classes"
     >
-        <span v-if="$slots.icon" class="sk-tab-icon">
+        <span v-if="hasSlotContent(slots.icon)" class="sk-tab-icon">
             <slot name="icon" />
         </span>
         <span class="sk-tab-label">
@@ -47,9 +47,10 @@
      * @slot icon - Optional icon displayed before the tab label. Useful for visual indicators.
      */
 
-    import { type ComputedRef, computed, inject } from 'vue';
+    import { type ComputedRef, type Slots, computed, inject, useSlots } from 'vue';
     import { TabsTrigger } from 'reka-ui';
     import type { ComponentKind } from '@/types';
+    import { hasSlotContent } from '@/utils/slots';
 
     //------------------------------------------------------------------------------------------------------------------
 
@@ -93,6 +94,10 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    const slots : Slots = useSlots();
+
+    //------------------------------------------------------------------------------------------------------------------
+
     // Inject parent kind (Sleekspace-specific for theming)
     const parentKind = inject<ComputedRef<ComponentKind | undefined>>('tabs-kind', computed(() => undefined));
 

package/src/components/TreeView/SkTreeItem.vue

@@ -32,7 +32,7 @@
         <div v-else-if="showChevron" class="sk-tree-item-chevron-spacer" />
 
         <!-- Leading slot (icons, checkboxes, etc.) -->
-        <div v-if="$slots.leading" class="sk-tree-item-leading">
+        <div v-if="hasSlotContent(slots.leading)" class="sk-tree-item-leading">
             <slot name="leading" :is-expanded="isExpanded" :is-selected="isSelected" />
         </div>
 
@@ -47,7 +47,7 @@
         </div>
 
         <!-- Trailing slot -->
-        <div v-if="$slots.trailing" class="sk-tree-item-trailing">
+        <div v-if="hasSlotContent(slots.trailing)" class="sk-tree-item-trailing">
             <slot name="trailing" :is-expanded="isExpanded" :is-selected="isSelected" />
         </div>
     </TreeItem>
@@ -62,8 +62,12 @@
 <!--------------------------------------------------------------------------------------------------------------------->
 
 <script setup lang="ts">
+    import { type Slots, useSlots } from 'vue';
     import { type FlattenedItem, TreeItem } from 'reka-ui';
 
+    // Utils
+    import { hasSlotContent } from '@/utils/slots';
+
     //------------------------------------------------------------------------------------------------------------------
 
     export interface SkTreeItemComponentProps
@@ -79,6 +83,10 @@
         disabled: false,
         showChevron: true,
     });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    const slots : Slots = useSlots();
 </script>
 
 <!--------------------------------------------------------------------------------------------------------------------->

package/src/components/TreeView/SkTreeView.vue

@@ -6,13 +6,13 @@
     <TreeRoot
         :items="items"
         :get-key="getKey"
-        :model-value="modelValue"
+        :model-value="rekaModelValue"
         :multiple="multiple"
         :propagate-select="propagateSelect"
         :default-expanded="expandedKeys"
         :class="classes"
         :style="customColorStyles"
-        @update:model-value="$emit('update:modelValue', $event as T | T[])"
+        @update:model-value="$emit('update:modelValue', $event as unknown as T | T[])"
     >
         <template #default="{ flattenItems }">
             <slot :flatten-items="flattenItems" />
@@ -73,6 +73,11 @@
 
     //------------------------------------------------------------------------------------------------------------------
 
+    type RekaTreeValue = Record<string, unknown> | Record<string, unknown>[];
+    const rekaModelValue = computed(() => props.modelValue as unknown as RekaTreeValue);
+
+    //------------------------------------------------------------------------------------------------------------------
+
     function getAllKeys(items : T[]) : string[]
     {
         const keys : string[] = [];