@1001-digital/components 1.2.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.2.3",
+  "version": "1.4.0",
   "type": "module",
   "sideEffects": [
     "*.css"
@@ -14,7 +14,7 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^1.0.1"
+    "@1001-digital/styles": "^1.2.0"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",

package/src/base/components/AppShell.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="app-shell">
+    <Sidebar
+      v-if="$slots.sidebar"
+      v-model:open="sidebarOpen"
+      :side="sidebarSide"
+      :swipeable="sidebarSwipeable"
+    >
+      <slot name="sidebar" />
+    </Sidebar>
+
+    <main class="app-shell-main">
+      <slot />
+    </main>
+
+    <BottomNav v-if="$slots['bottom-nav']">
+      <slot name="bottom-nav" />
+    </BottomNav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Sidebar from './Sidebar.vue'
+import BottomNav from './BottomNav.vue'
+
+withDefaults(
+  defineProps<{
+    sidebarSide?: 'left' | 'right'
+    sidebarSwipeable?: boolean
+  }>(),
+  {
+    sidebarSide: 'left',
+    sidebarSwipeable: true,
+  },
+)
+
+const sidebarOpen = defineModel<boolean>('sidebarOpen', { default: false })
+</script>
+
+<style>
+@layer components {
+  .app-shell {
+    display: flex;
+    min-block-size: var(--100vh);
+  }
+
+  .app-shell-main {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .app-shell:has(.bottom-nav) .app-shell-main {
+    padding-block-end: var(--bottom-nav-height);
+
+    @media (min-width: 1024px) {
+      padding-block-end: 0;
+    }
+  }
+}
+</style>

package/src/base/components/BottomNav.vue

@@ -0,0 +1,44 @@
+<template>
+  <nav class="bottom-nav">
+    <slot />
+  </nav>
+</template>
+
+<style>
+@layer components {
+  .bottom-nav {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: 0;
+    z-index: var(--bottom-nav-z-index);
+    block-size: var(--bottom-nav-height);
+    background: var(--bottom-nav-background);
+    backdrop-filter: var(--blur);
+    border-block-start: var(--border);
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    padding-block-end: env(safe-area-inset-bottom);
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+
+    > a,
+    > button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--size-1);
+      color: var(--muted);
+      transition: color var(--speed);
+      padding: var(--spacer-sm);
+
+      &:is(:hover, :focus-visible, .router-link-active) {
+        color: var(--color);
+      }
+    }
+  }
+}
+</style>

package/src/base/components/Sidebar.vue

@@ -0,0 +1,282 @@
+<template>
+  <aside
+    ref="el"
+    class="sidebar"
+    :class="[
+      `sidebar-${side}`,
+      {
+        'is-open': open,
+        'is-swiping': swiping.active,
+      },
+    ]"
+    :style="sidebarStyle"
+  >
+    <slot />
+  </aside>
+  <div
+    class="sidebar-overlay"
+    :class="{
+      'is-visible': open && !isLargeScreen,
+      'is-swiping': swiping.active,
+    }"
+    :style="overlayStyle"
+    @click="open = false"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch, watchEffect, onMounted, onBeforeUnmount } from 'vue'
+import { useMediaQuery, useScrollLock, useElementSize } from '@vueuse/core'
+
+const open = defineModel<boolean>('open', { default: false })
+
+const props = withDefaults(
+  defineProps<{
+    side?: 'left' | 'right'
+    swipeable?: boolean
+  }>(),
+  {
+    side: 'left',
+    swipeable: true,
+  },
+)
+
+const el = ref<HTMLElement>()
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+const { width: sidebarWidth } = useElementSize(el)
+
+const swiping = reactive({
+  active: false,
+  translateX: 0,
+})
+
+// Scroll lock on mobile when open
+if (typeof document !== 'undefined') {
+  const scrollLocked = useScrollLock(document.body)
+  watchEffect(() => {
+    scrollLocked.value = (open.value || swiping.active) && !isLargeScreen.value
+  })
+}
+
+// Auto open/close on breakpoint change
+watch(isLargeScreen, (lg) => {
+  open.value = lg
+})
+
+// Swipe gesture handling
+const EDGE_WIDTH = 30
+const SNAP_THRESHOLD = 0.3
+
+let cleanupSwipe: (() => void) | undefined
+
+onMounted(() => {
+  if (!props.swipeable) return
+
+  let startX = 0
+  let startY = 0
+  let tracking = false
+  let directionLocked = false
+  let isHorizontal = false
+
+  const onTouchStart = (e: TouchEvent) => {
+    if (isLargeScreen.value) return
+
+    const touch = e.touches[0]
+    startX = touch.clientX
+    startY = touch.clientY
+    tracking = false
+    directionLocked = false
+    isHorizontal = false
+
+    if (props.side === 'left') {
+      if (!open.value && startX > EDGE_WIDTH) return
+      if (open.value && startX > sidebarWidth.value) return
+    } else {
+      if (!open.value && startX < window.innerWidth - EDGE_WIDTH) return
+      if (open.value && startX < window.innerWidth - sidebarWidth.value) return
+    }
+
+    tracking = true
+  }
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (!tracking || isLargeScreen.value) return
+
+    const touch = e.touches[0]
+    const dx = touch.clientX - startX
+    const dy = touch.clientY - startY
+
+    if (!directionLocked) {
+      if (Math.abs(dx) < 5 && Math.abs(dy) < 5) return
+      directionLocked = true
+      isHorizontal = Math.abs(dx) > Math.abs(dy)
+
+      if (!isHorizontal) {
+        tracking = false
+        return
+      }
+    }
+
+    const w = sidebarWidth.value
+    if (!w) return
+
+    swiping.active = true
+
+    if (props.side === 'left') {
+      if (open.value) {
+        swiping.translateX = Math.max(-w, Math.min(0, dx))
+      } else {
+        swiping.translateX = Math.max(-w, Math.min(0, -w + dx))
+      }
+    } else {
+      if (open.value) {
+        swiping.translateX = Math.min(w, Math.max(0, dx))
+      } else {
+        swiping.translateX = Math.min(w, Math.max(0, w + dx))
+      }
+    }
+  }
+
+  const onTouchEnd = () => {
+    if (!swiping.active) {
+      tracking = false
+      return
+    }
+
+    const w = sidebarWidth.value
+    const threshold = w * SNAP_THRESHOLD
+
+    if (props.side === 'left') {
+      open.value = swiping.translateX > -w + threshold
+    } else {
+      open.value = swiping.translateX < threshold
+    }
+
+    swiping.active = false
+    swiping.translateX = 0
+    tracking = false
+  }
+
+  document.addEventListener('touchstart', onTouchStart, { passive: true })
+  document.addEventListener('touchmove', onTouchMove, { passive: true })
+  document.addEventListener('touchend', onTouchEnd)
+
+  cleanupSwipe = () => {
+    document.removeEventListener('touchstart', onTouchStart)
+    document.removeEventListener('touchmove', onTouchMove)
+    document.removeEventListener('touchend', onTouchEnd)
+  }
+})
+
+onBeforeUnmount(() => {
+  cleanupSwipe?.()
+})
+
+const sidebarStyle = computed(() => {
+  if (isLargeScreen.value || !swiping.active) return {}
+
+  return {
+    transform: `translateX(${swiping.translateX}px)`,
+  }
+})
+
+const overlayStyle = computed(() => {
+  if (isLargeScreen.value || !swiping.active || !sidebarWidth.value) return {}
+
+  const progress = 1 - Math.abs(swiping.translateX) / sidebarWidth.value
+
+  return {
+    opacity: String(progress * 0.6),
+    pointerEvents: progress > 0 ? ('all' as const) : ('none' as const),
+  }
+})
+
+defineExpose({
+  open: () => {
+    open.value = true
+  },
+  close: () => {
+    open.value = false
+  },
+  toggle: () => {
+    open.value = !open.value
+  },
+})
+</script>
+
+<style>
+@layer components {
+  .sidebar {
+    position: fixed;
+    inset-block: 0;
+    z-index: var(--sidebar-z-index);
+    inline-size: var(--sidebar-width);
+    background-color: var(--sidebar-background);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    transition: transform var(--speed);
+
+    &.sidebar-left {
+      inset-inline-start: 0;
+      border-inline-end: var(--sidebar-border);
+      transform: translateX(-100%);
+
+      &.is-open {
+        transform: translateX(0);
+      }
+    }
+
+    &.sidebar-right {
+      inset-inline-end: 0;
+      border-inline-start: var(--sidebar-border);
+      transform: translateX(100%);
+
+      &.is-open {
+        transform: translateX(0);
+      }
+    }
+
+    &.is-swiping {
+      transition: none;
+    }
+
+    @media (min-width: 1024px) {
+      position: sticky;
+      inset-block-start: 0;
+      block-size: var(--100vh);
+      z-index: auto;
+      flex-shrink: 0;
+
+      &.sidebar-left,
+      &.sidebar-right {
+        transform: none;
+      }
+    }
+  }
+
+  .sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--sidebar-z-index) - 1);
+    background-color: var(--sidebar-overlay-background);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--speed);
+
+    &.is-visible {
+      opacity: 0.6;
+      pointer-events: all;
+    }
+
+    &.is-swiping {
+      transition: none;
+    }
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+  }
+}
+</style>

package/src/base/components/Toasts.vue

@@ -66,10 +66,7 @@
       </section>
     </ToastRoot>
 
-    <ToastViewport
-      class="toast-viewport"
-      :class="[position]"
-    />
+    <ToastViewport class="toast-viewport" />
   </ToastProvider>
 
 </template>
@@ -94,12 +91,10 @@ withDefaults(
   defineProps<{
     duration?: number
     swipeDirection?: 'right' | 'left' | 'up' | 'down'
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
   }>(),
   {
     duration: 5_000,
     swipeDirection: 'right',
-    position: 'bottom-right',
   },
 )
 
@@ -114,6 +109,7 @@ const onClose = (id: string) => {
 @layer components {
   :deep(.toast-viewport) {
     position: fixed;
+    inset: var(--toast-inset);
     z-index: var(--z-index-toast);
     display: flex;
     flex-direction: column;
@@ -123,26 +119,6 @@ const onClose = (id: string) => {
     list-style: none;
     max-width: 100vw;
     outline: none;
-
-    &.bottom-right {
-      bottom: 0;
-      right: 0;
-    }
-
-    &.bottom-left {
-      bottom: 0;
-      left: 0;
-    }
-
-    &.top-right {
-      top: 0;
-      right: 0;
-    }
-
-    &.top-left {
-      top: 0;
-      left: 0;
-    }
   }
 
   :deep(.toast) {

package/src/index.ts

@@ -1,6 +1,8 @@
 // Components
 export { default as Actions } from './base/components/Actions.vue'
 export { default as Alert } from './base/components/Alert.vue'
+export { default as AppShell } from './base/components/AppShell.vue'
+export { default as BottomNav } from './base/components/BottomNav.vue'
 export { default as Button } from './base/components/Button.vue'
 export { default as Calendar } from './base/components/Calendar.vue'
 export { default as Card } from './base/components/Card.vue'
@@ -34,6 +36,7 @@ export { default as Loading } from './base/components/Loading.vue'
 export { default as Opepicon } from './base/components/Opepicon.vue'
 export { default as Popover } from './base/components/Popover.vue'
 export { default as Progress } from './base/components/Progress.vue'
+export { default as Sidebar } from './base/components/Sidebar.vue'
 export { default as Tag } from './base/components/Tag.vue'
 export { default as Tags } from './base/components/Tags.vue'
 export { default as Toasts } from './base/components/Toasts.vue'