x

smastrom · Jan 14, 2024 · 96277c5 · 96277c5
1 parent 8d8ec00
commit 96277c5
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 69 deletions.
diff --git a/packages/vue-use-fixed-header/src/useFixedHeader.ts b/packages/vue-use-fixed-header/src/useFixedHeader.ts
@@ -32,10 +32,6 @@ export function useFixedHeader(
 
    const { enterStyles, leaveStyles } = TRANSITION_STYLES
 
-   const root = () => (options.root || options.root === null ? unref(options.root) : null)
-   const transitionOpacity = () =>
-      options.transitionOpacity === undefined ? false : unref(options.transitionOpacity)
-
    const isReduced = useReducedMotion()
 
    // State
@@ -57,17 +53,17 @@ export function useFixedHeader(
    // Utils
 
    function getRoot() {
-      const _root = root()
+      const _root = unref(options.root)
       if (_root != null) return _root
 
       return document.documentElement
    }
 
-   function getScrollTop() {
-      const root = getRoot()
-      if (!root) return 0
+   const getScrollTop = () => getRoot().scrollTop
 
-      return root.scrollTop
+   function getScrollRoot() {
+      const root = getRoot()
+      return root === document.documentElement ? document : root
    }
 
    function isFixed() {
@@ -104,8 +100,7 @@ export function useFixedHeader(
          toggleListeners()
       })
 
-      const root = getRoot()
-      if (root) internal.resizeObserver.observe(root)
+      internal.resizeObserver.observe(getRoot())
    }
 
    function onVisible() {
@@ -115,7 +110,7 @@ export function useFixedHeader(
 
       setStyles({
          ...enterStyles,
-         ...(transitionOpacity() ? { opacity: 1 } : {}),
+         ...(unref(options.transitionOpacity) ? { opacity: 1 } : {}),
          visibility: '' as CSS['visibility'],
       })
 
@@ -125,7 +120,7 @@ export function useFixedHeader(
    function onHidden() {
       if (state.value === State.LEAVE) return
 
-      setStyles({ ...leaveStyles, ...(transitionOpacity() ? { opacity: 0 } : {}) })
+      setStyles({ ...leaveStyles, ...(unref(options.transitionOpacity) ? { opacity: 0 } : {}) })
 
       setState(State.LEAVE)
 
@@ -198,22 +193,12 @@ export function useFixedHeader(
    const onScroll = createScrollHandler()
 
    function addScrollListener() {
-      const root = getRoot()
-      if (!root) return
-
-      const scrollRoot = root === document.documentElement ? document : root
-
-      scrollRoot.addEventListener('scroll', onScroll, { passive: true })
+      getScrollRoot().addEventListener('scroll', onScroll, { passive: true })
       internal.isListeningScroll = true
    }
 
    function removeScrollListener() {
-      const root = getRoot()
-      if (!root) return
-
-      const scrollRoot = root === document.documentElement ? document : root
-
-      scrollRoot.removeEventListener('scroll', onScroll)
+      getScrollRoot().removeEventListener('scroll', onScroll)
       internal.isListeningScroll = false
    }
 

diff --git a/playground/assets/global.css b/playground/assets/global.css
@@ -1,7 +1,7 @@
 :root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
-   background-image: var(--Gradient);
+   background: var(--AccentBrightColor);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
@@ -11,7 +11,9 @@
    --AccentColor: #00976b;
    --TextColor: #494949;
    --WhiteColor: #fff;
-   --Gradient: linear-gradient(to top, #00ff8d 0%, #00c68c 100%);
+   --AccentBrightColor: #2fe292;
+   --AccentLightColor: #d5ece2;
+   --AccentDarkColor: #076046;
 }
 
 :root {

diff --git a/playground/components/Header.vue b/playground/components/Header.vue
@@ -5,6 +5,8 @@ import { useFixedHeader } from 'vue-use-fixed-header'
 const headerRef = ref<HTMLElement | null>(null)
 
 const { styles } = useFixedHeader(headerRef)
+
+const linkProps = { target: '_blank', class: 'Nav_List_Link' }
 </script>
 
 <template>
@@ -14,48 +16,42 @@ const { styles } = useFixedHeader(headerRef)
             <h2 class="Global_Logo">Vufh</h2>
             <ul class="Nav_List">
                <li class="Nav_List_Dropdown_Trigger Nav_List_Hidden">
-                  <a target="_blank" href="https://github.com/smastrom/vue-use-fixed-header">
+                  <a v-bind="linkProps" href="https://github.com/smastrom/vue-use-fixed-header">
                      Dropdown
                   </a>
 
                   <ul class="Nav_List_Dropdown">
-                     <li>
-                        <a target="_blank" href="#">Dropdown Item 1</a>
-                     </li>
-                     <li>
-                        <a target="_blank" href="#">Dropdown Item 2</a>
-                     </li>
-                     <li>
-                        <a target="_blank" href="#">Dropdown Item 3</a>
-                     </li>
+                     <li><a v-bind="linkProps" href="#">Dropdown Item 1</a></li>
+                     <li><a v-bind="linkProps" href="#">Dropdown Item 2</a></li>
+                     <li><a v-bind="linkProps" href="#">Dropdown Item 3</a></li>
                   </ul>
                </li>
 
                <li>
-                  <a target="_blank" href="https://github.com/smastrom/vue-use-fixed-header">
+                  <a v-bind="linkProps" href="https://github.com/smastrom/vue-use-fixed-header">
                      GitHub
                   </a>
                </li>
                <li class="Nav_List_Hidden">
-                  <a target="_blank" href="https://www.npmjs.com/package/vue-use-fixed-header"
-                     >NPM</a
-                  >
+                  <a v-bind="linkProps" href="https://www.npmjs.com/package/vue-use-fixed-header">
+                     NPM
+                  </a>
                </li>
                <li class="Nav_List_Hidden">
                   <a
-                     target="_blank"
+                     v-bind="linkProps"
                      href="https://stackblitz.com/@smastrom/collections/vue-use-fixed-header"
                   >
                      Examples
                   </a>
                </li>
                <li>
                   <a
-                     target="_blank"
                      class="Nav_List_Button"
-                     href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/Header.vue"
+                     target="_blank"
+                     href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/Header.vue"
                   >
-                     View Code
+                     See Code
                   </a>
                </li>
             </ul>
@@ -80,9 +76,8 @@ const { styles } = useFixedHeader(headerRef)
    border-radius: 1rem;
    width: 1280px;
    max-width: 100%;
-   height: 80px;
    margin: 1rem;
-   padding: 1rem;
+   padding: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -103,7 +98,7 @@ const { styles } = useFixedHeader(headerRef)
    align-items: center;
 }
 
-.Nav_List a {
+.Nav_List_Link {
    color: var(--TextColor);
    text-decoration: none;
    transition: color 200ms ease-in-out;
@@ -113,17 +108,12 @@ const { styles } = useFixedHeader(headerRef)
    position: relative;
 }
 
-.Nav_List_Dropdown_Trigger:hover .Nav_List_Dropdown {
-   display: flex;
-}
-
 .Nav_List_Dropdown {
    position: absolute;
-   top: 45px;
-   left: 0;
+   top: 40px;
+   left: -1rem;
    width: 200px;
    background-color: var(--WhiteColor);
-   box-shadow: var(--Shadow);
    border-radius: 0.5rem;
    padding: 1rem;
    display: none;
@@ -134,24 +124,29 @@ const { styles } = useFixedHeader(headerRef)
 
 .Nav_List_Button {
    background-color: var(--AccentColor);
-   color: var(--WhiteColor) !important;
-   padding: 0.75rem 1rem;
+   color: var(--WhiteColor);
+   padding: 0.5rem 1rem;
    border-radius: 0.5rem;
-   transition: opacity 200ms ease-in-out !important;
+   transition: all 200ms ease-in-out;
+   text-decoration: none;
 }
 
 @media (hover: hover) {
+   .Nav_List_Dropdown_Trigger:hover .Nav_List_Dropdown {
+      display: flex;
+   }
+
    .Nav_List_Dropdown_Trigger:hover > a {
       color: var(--AccentColor);
    }
 
-   .Nav_List a:hover {
+   .Nav_List_Link:hover,
+   .Nav_List_Dropdown a:hover {
       color: var(--AccentColor);
-      text-decoration: none;
    }
 
    .Nav_List_Button:hover {
-      opacity: 0.5;
+      opacity: 0.75;
    }
 }
 
@@ -163,7 +158,7 @@ const { styles } = useFixedHeader(headerRef)
       gap: 2rem;
    }
    .Nav_List_Hidden {
-      display: none !important;
+      display: none;
    }
 }
 </style>
diff --git a/playground/components/WithContainer.vue b/playground/components/WithContainer.vue
@@ -22,9 +22,9 @@ const { styles } = useFixedHeader(headerRef, {
                <a
                   target="_blank"
                   class="Header_Button"
-                  href="https://github.com/smastrom/vue-use-fixed-header/blob/main/demo/WithContainer.vue"
+                  href="https://github.com/smastrom/vue-use-fixed-header/blob/main/playground/components/WithContainer.vue"
                >
-                  View Code
+                  See Code
                </a>
             </div>
          </header>
@@ -55,7 +55,7 @@ const { styles } = useFixedHeader(headerRef, {
 }
 
 .Header_Wrapper {
-   padding: 1rem;
+   padding: 0.875rem;
    position: sticky;
    top: 0;
 }
@@ -65,7 +65,7 @@ const { styles } = useFixedHeader(headerRef, {
    background-color: var(--AccentColor);
    display: flex;
    align-items: center;
-   padding: 1rem;
+   padding: 0.875rem;
    border-radius: 1rem;
 }
 
@@ -74,7 +74,7 @@ const { styles } = useFixedHeader(headerRef, {
 }
 
 .Header_Button {
-   color: var(--AccentColor);
+   color: var(--AccentDarkColor);
    background-color: var(--WhiteColor);
    border-radius: 0.5rem;
    line-height: 1;
@@ -87,8 +87,7 @@ const { styles } = useFixedHeader(headerRef, {
 
 @media (hover: hover) {
    .Header_Button:hover {
-      color: var(--WhiteColor);
-      background-color: var(--AccentColor);
+      background-color: var(--AccentLightColor);
    }
 }