feat(features): useSize and useIntersection examples

Author: AlexVipond

src/components/ExampleBind.vue

@@ -2,14 +2,14 @@
   <section
     class="
       mx-auto with-max-w flex flex-col gap-7 p-6 rounded-4 shadow-4
-      bg-primary-10 text-primary-100 dork:bg-primary-gray-80
+      bg-primary-10 dork:bg-primary-gray-110
     "
   >
     <section>
-      <span class="preexisting-class" ref="example">👉 Inspect this <code :class="store.statuses.darkTheme === 'enabled' ? 'bg-primary-gray-70' : 'bg-primary-10'">&lt;span&gt;</code> in devtools 👈</span>
+      <span class="preexisting-class" ref="example">👉 Inspect this <code>&lt;span&gt;</code> in devtools 👈</span>
     </section>
     <section class="flex flex-col gap-2">
-      <label for="bind-example-ariaLabel-input">Edit the <code :class="store.statuses.darkTheme === 'enabled' ? 'bg-primary-gray-70' : 'bg-primary-10'">aria-label</code> dynamically:</label>
+      <label for="bind-example-ariaLabel-input">Edit the <code>aria-label</code> dynamically:</label>
       <input
         id="bind-example-ariaLabel-input"
         type="text"
@@ -22,33 +22,29 @@
       />
     </section>
     <section class="flex flex-col gap-2">
-      <label for="bind-example-class-input">Edit the <code :class="store.statuses.darkTheme === 'enabled' ? 'bg-primary-gray-70' : 'bg-primary-10'">class</code> list dynamically:</label>
+      <label for="bind-example-class-input">Edit the <code>class</code> list dynamically:</label>
       <input
         id="bind-example-class-input"
         type="text"
         v-model="classes"
-        class="form -shadow-4"
-        :class="[
-          store.statuses.darkTheme === 'enabled'
-            ? 'bg-primary-gray-90 ring-primary-gray-80 focus:ring-primary-gray-40'
-            : 'bg-white ring-primary-20 focus:ring-primary-70'
-          
-        ]"
+        class="
+          form -shadow-4
+          bg-white ring-primary-20 focus:ring-primary-70
+          dork:bg-primary-gray-90 dork:ring-primary-gray-80 dork:focus:ring-primary-gray-40
+        "
       />
     </section>
     <section class="flex flex-col gap-2">
-      <label for="bind-example-backgroundColor-input">Edit the <code :class="store.statuses.darkTheme === 'enabled' ? 'bg-primary-gray-70' : 'bg-primary-10'">backgroundColor</code> dynamically:</label>
+      <label for="bind-example-backgroundColor-input">Edit the <code>backgroundColor</code> dynamically:</label>
       <input
         id="bind-example-backgroundColor-input"
         type="text"
         v-model="backgroundColor"
-        class="form -shadow-4"
-        :class="[
-          store.statuses.darkTheme === 'enabled'
-            ? 'bg-primary-gray-90 ring-primary-gray-80 focus:ring-primary-gray-40'
-            : 'bg-white ring-primary-20 focus:ring-primary-70'
-          
-        ]"
+        class="
+          form -shadow-4
+          bg-white ring-primary-20 focus:ring-primary-70
+          dork:bg-primary-gray-90 dork:ring-primary-gray-80 dork:focus:ring-primary-gray-40
+        "
       />
     </section>
   </section>

src/components/ExampleUseFocus.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="with-mt mx-auto w-full with-max-w flex-col center-all-x">
-    <p>Status: <code>{{ focus.status.value }}</code></p>
+  <div class="mx-auto w-full with-max-w flex-col center-all-x">
+    <p class="text-3">Focus this element:</p>
     <div
       :ref="api.ref()"
       tabindex="0"
@@ -9,6 +9,7 @@
         focus.is.focused() ? 'bg-primary-40 dork:bg-primary-90' : 'bg-gray-30 dork:bg-primary-gray-100',
       ]"
     />
+    <p>Status: <code>{{ focus.status.value }}</code></p>
   </div>
 </template>
 

src/components/ExampleUseHover.vue

@@ -1,13 +1,14 @@
 <template>
-  <div class="with-mt mx-auto w-full with-max-w flex-col center-all-x">
-    <p>Status: <code>{{ hover.status.value }}</code></p>
+  <div class="mx-auto w-full with-max-w flex-col center-all-x">
+    <p class="text-3">Hover this element:</p>
     <div
       :ref="api.ref()"
       class="with-mt d-14 rounded-6"
       :class="[
         hover.is.hovered() ? 'bg-primary-40 dork:bg-primary-90' : 'bg-gray-30 dork:bg-primary-gray-100',
       ]"
     />
+    <p>Status: <code>{{ hover.status.value }}</code></p>
   </div>
 </template>
 

src/components/ExampleUseIntersection.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="mx-auto w-full with-max-w flex-col center-all-x">
+    <p class="text-3">Scroll to bring the element into view:</p>
+    <div class="
+      with-mt w-16 h-20 p-4 scroll-p-4 overflow-y-scroll
+      ring-sh-2-gray-30 dork:ring-primary-gray-100
+      rounded-3 scrollbar-hide
+    ">
+      <div
+        :ref="api.ref()"
+        class="my-22 d-14 rounded-6 bg-primary-40 dork:bg-primary-90"
+      />
+    </div>
+    <p>Status: <code>{{ intersection.status.value }}</code></p>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { useElementApi, useIntersection } from '@baleada/vue-features'
+
+const api = useElementApi()
+const intersection = useIntersection(api.element)
+</script>

src/components/ExampleUseSize.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="mx-auto w-full with-max-w flex-col center-all-x">
+    <p class="text-3">Resize this element:</p>
+    <div
+      :ref="api.ref()"
+      class="
+        with-mt
+        rounded-6 bg-primary-40 dork:bg-primary-90
+        overflow-scroll resize
+      "
+      style="width: 4rem; height: 4rem;"
+    >
+    </div>
+    <p>Height: <code>{{ size.borderBox.value?.height }}</code>, Width: <code>{{ size.borderBox.value?.width }}</code></p>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { useElementApi, useSize } from '@baleada/vue-features'
+
+const api = useElementApi()
+const size = useSize(api.element)
+</script>

src/components/LayoutArticleLinks.vue

@@ -2,7 +2,7 @@
   <span class="flex flex-col gap-2 text-3">
     <a
       v-if="source"
-      class="flex/2 center-all-y text-3"
+      class="mr-auto flex/2 center-all-y text-3"
       :href="source"
       target="_blank"
     >
@@ -11,7 +11,7 @@
     </a>
     <a
       v-if="tests"
-      class="flex/2 center-all-y text-3"
+      class="mr-auto flex/2 center-all-y text-3"
       :href="tests"
       target="_blank"
     >
@@ -20,7 +20,7 @@
     </a>
     <a
       v-if="stub"
-      class="flex/2 center-all-y text-3"
+      class="mr-auto flex/2 center-all-y text-3"
       :href="stub"
       target="_blank"
     >

src/components/LayoutExample.vue

@@ -1,19 +1,20 @@
 <template>
-  <p>
+  <p class="flex">
     <a
-      class="flex/2 center-all-y text-3"
+      class="mr-auto flex/2 center-all-y text-3"
       :href="`https://github.com/baleada/docs/blob/main/src/components/${component}.vue`"
       target="_blank"
     >
       <SimpleGitHub class="icon icon-btn duration-1" />
       <span class="duration-1">Example source code</span>
     </a>
   </p>
-  <component :is="component" />
+  <div class="with-mt">
+    <component :is="component" />
+  </div>
 </template>
 
 <script setup lang="tsx">
 import SimpleGitHub from '@simple-icons/github.svg'
-const props = defineProps<{ component: any }>()
-console.log(props)
+defineProps<{ component: any }>()
 </script>

src/composition/useStore.ts

@@ -13,7 +13,11 @@ type Article = {
     summary?: string,
     image?: string,
     imageAlt?: string,
+    source?: string | boolean,
   },
+  source?: string,
+  tests?: string,
+  stub?: string,
   relativePath?: string
 }
 

src/prose/features/04-extensions/intersection.md

@@ -5,19 +5,24 @@ publish: true
 order: 0
 ---
 
-::: type="warning"
-Under construction 🚧
-:::
+`useIntersection` is an [extension](/docs/features/extensions-overview) that tracks whether or not an element has entered a viewport.
 
+Under the hood, `useIntersection` uses the `IntersectionObserver` API for performant intersection tracking.
 
-`useIntersection` is an [extension](/docs/features/extensions-overview) that allows you to reactively track whether or not an element has entered a viewport.
 
-::: type="info"
-Under the hood, `useIntersection` uses the `IntersectionObserver` API for performant intersection tracking.
+:::
+## Example
 :::
 
+<LayoutExample component="ExampleUseIntersection" />
 
+
+
+::: type="warning"
+Under construction 🚧
 :::
+
+<!-- :::
 ## Create visibility
 :::
 
@@ -45,9 +50,9 @@ Instead of passing the unreliable DOM element to `options.observer.root`, you ca
 :::
 
 :::
-```html
+```html -->
 <!-- MyComponent.vue -->
-<template>
+<!-- <template>
   <div ref="viewport">
     <div :ref="tablist.root.ref()">...</div>
   </div>
@@ -90,4 +95,4 @@ Here's a breakdown of that object:
 | `isVisible` | Ref (Boolean) | <p>A reactive reference to a Boolean describing the visibility of your element. `isVisible` is `true` when `status` is `visible`, and `false` when it's `invisible`.</p> |
 | `time` | Ref (DOMHighResTimestamp) | A reactive reference to the [time](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry/time) of the most recent change in visibility. |
 :::
-
+ -->

src/prose/features/04-extensions/size.md

@@ -5,19 +5,24 @@ publish: true
 order: 0
 ---
 
-::: type="warning"
-Under construction 🚧
-:::
+`useSize` is an [extension](/docs/features/extensions-overview) that tracks the dimensions of an element, and whether that element's width is currently wider than certain breakpoints.
 
+Under the hood, `useSize` uses the `ResizeObserver` API for performant size tracking.
 
-`useSize` is an [extension](/docs/features/extensions-overview) that allows you to reactively track the dimensions of an element, and whether that element's width is currently wider than certain breakpoints.
 
-::: type="info"
-Under the hood, `useSize` uses the `ResizeObserver` API for performant dimension tracking.
 :::
+## Example
+:::
+
+<LayoutExample component="ExampleUseSize" />
 
 
+::: type="warning"
+Under construction 🚧
 :::
+
+
+<!-- :::
 ## Create size
 :::
 
@@ -37,12 +42,12 @@ Here's a breakdown of the `useSize` options:
 | --- | --- | --- | --- | --- |
 | `breakpoints` | Object | no | See description | <p>An object specifying breakpoints for `useSize` to compare against. Each key should be the name of the breakpoint, and the value should be the width (Number) of that breakpoint, measured in pixels.</p><p>The keys of the default `breakpoints` object are `sm`, `md`, `lg`, `xl`, and `2xl`. The values of those keys are [the default TailwindCSS breakpoints](https://tailwindcss.com/docs/responsive-design).</p> |
 | `observe` | Object | no | none | The `options` parameter of the [Resize Observer's `observe` method](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe). |
-:::
+::: -->
 
-:::
-```html
+<!-- :::
+```html -->
 <!-- MyComponent.vue -->
-<template>...</template>
+<!-- <template>...</template>
 
 <script setup>
 import { computed } from 'vue'
@@ -89,9 +94,9 @@ If you stick with the default `breakpoints`, the properties of `breaks` will be
 You can use these values to, for example, swap out the `src` of an `img` element based on screen size, so that only the correct image for that screen size is loaded:
 
 :::
-```html
+```html -->
 <!-- MyComponent.vue -->
-<style>
+<!-- <style>
 header {
   height: 100vw;
   width: 100vw;
@@ -127,4 +132,4 @@ const header = ref(null)
 const size = readonly(useSize(header))
 </script>
 ```
-:::
+::: -->