@1001-digital/components 1.3.0 → 1.5.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@1001-digital/components",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
+  "main": "./src/index.ts",
   "sideEffects": [
     "*.css"
   ],
@@ -14,18 +15,18 @@
   ],
   "peerDependencies": {
     "vue": "^3.5.0",
-    "@1001-digital/styles": "^1.1.0"
+    "@1001-digital/styles": "^1.3.0"
   },
   "dependencies": {
     "@iconify/vue": "^5.0.0",
-    "@internationalized/date": "^3.8.0",
-    "@types/luxon": "^3.7.0",
+    "@internationalized/date": "^3.12.0",
     "@visualizevalue/opepicons": "^0.1.0",
-    "@vueuse/core": "^14.2.0",
+    "@vueuse/core": "^14.2.1",
     "luxon": "^3.7.0",
-    "reka-ui": "^2.8.0"
+    "reka-ui": "^2.9.0"
   },
   "devDependencies": {
-    "vue": "^3.5.0"
+    "@types/luxon": "^3.7.0",
+    "vue": "^3.5.30"
   }
 }

package/src/base/components/Actions.vue

@@ -14,10 +14,14 @@
   flex-wrap: wrap;
   gap: var(--spacer-sm);
 
-  &:not(.left) {
+  &:not(.left):not(.center) {
     justify-content: flex-end;
   }
 
+  &.center {
+    justify-content: center;
+  }
+
   &:empty {
     display: none !important;
   }

package/src/base/components/AppShell.vue

@@ -39,21 +39,27 @@ const sidebarOpen = defineModel<boolean>('sidebarOpen', { default: false })
 
 <style>
 @layer components {
+  html:has(.app-shell) {
+    scrollbar-gutter: auto;
+    overflow: hidden;
+    height: 100dvh;
+  }
+
   .app-shell {
     display: flex;
-    min-block-size: var(--100vh);
+    block-size: 100dvh;
+    overflow: hidden;
   }
 
   .app-shell-main {
     flex: 1;
     min-inline-size: 0;
-  }
-
-  .app-shell:has(.bottom-nav) .app-shell-main {
-    padding-block-end: var(--bottom-nav-height);
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    padding-block-start: env(safe-area-inset-top);
 
-    @media (min-width: 1024px) {
-      padding-block-end: 0;
+    &:has(+ nav.bottom-nav) {
+      padding-block-end: var(--bottom-nav-height);
     }
   }
 }

package/src/base/components/BottomNav.vue

@@ -1,6 +1,8 @@
 <template>
   <nav class="bottom-nav">
-    <slot />
+    <div class="bottom-nav-items">
+      <slot />
+    </div>
   </nav>
 </template>
 
@@ -17,12 +19,16 @@
     border-block-start: var(--border);
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
     padding-block-end: env(safe-area-inset-bottom);
+  }
 
-    @media (min-width: 1024px) {
-      display: none;
-    }
+  .bottom-nav-items {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    inline-size: 100%;
+    max-inline-size: var(--bottom-nav-max-inline-size);
 
     > a,
     > button {

package/src/base/components/Dialog.vue

@@ -2,6 +2,7 @@
   <Teleport :to="teleportTarget || 'body'">
     <Transition
       :css="false"
+      appear
       @enter="onEnter"
       @leave="onLeave"
       @after-leave="() => emit('closed')"
@@ -15,24 +16,26 @@
         @cancel.stop.prevent="closable && (open = false)"
         @click="onDialogClick"
       >
-        <h1 v-if="title">{{ title }}</h1>
-        <button
-          v-if="closable"
-          class="close"
-          :title="`Close ${title || 'Dialog'}`"
-          @pointerdown="open = false"
-          @click="open = false"
-        >
-          <Icon type="close" />
-        </button>
-
-        <section>
-          <slot />
-        </section>
-
-        <footer v-if="$slots.footer">
-          <slot name="footer" />
-        </footer>
+        <div class="dialog-content">
+          <h1 v-if="title">{{ title }}</h1>
+          <button
+            v-if="closable"
+            class="close"
+            :title="`Close ${title || 'Dialog'}`"
+            @pointerdown="open = false"
+            @click="open = false"
+          >
+            <Icon type="close" />
+          </button>
+
+          <section>
+            <slot />
+          </section>
+
+          <footer v-if="$slots.footer">
+            <slot name="footer" />
+          </footer>
+        </div>
       </component>
     </Transition>
 
@@ -144,14 +147,71 @@ onBeforeUnmount(() => {
     background: var(--background);
     color: var(--color);
     border: var(--border);
-    border-radius: var(--border-radius);
+    border-radius: var(--dialog-border-radius);
     padding: 0;
-    max-block-size: 80dvh;
-    container-type: inline-size;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
     overflow: hidden;
 
+    > .dialog-content {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      max-block-size: 80dvh;
+
+      > h1:first-child,
+      > .close {
+        display: flex;
+        align-items: center;
+        block-size: calc(var(--spacer) * 2);
+        box-shadow: var(--border-shadow);
+        padding-inline-start: var(--spacer);
+        font-family: var(--font-family);
+        font-size: var(--ui-font-size);
+        text-transform: var(--ui-text-transform);
+        margin: 0;
+      }
+
+      > h1:first-child {
+        padding-right: calc(var(--spacer) * 3);
+      }
+
+      > .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        inline-size: calc(var(--spacer) * 2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border-radius: 0;
+        border-start-end-radius: var(--dialog-border-radius);
+
+        &:is(:hover, :active, :focus, .active) {
+          outline: none;
+        }
+      }
+
+      > section {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding: var(--spacer);
+        display: grid;
+        gap: var(--spacer);
+      }
+
+      > footer {
+        display: flex;
+        gap: var(--spacer);
+        justify-content: safe flex-end;
+        padding: var(--spacer);
+        border-block-start: var(--border);
+        overflow-x: auto;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+
     /* Entry/exit animations */
     opacity: 1;
     scale: 1;
@@ -213,61 +273,6 @@ onBeforeUnmount(() => {
       outline: none;
     }
 
-    > h1:first-child,
-    > .close {
-      display: flex;
-      align-items: center;
-      block-size: calc(var(--spacer) * 2);
-      box-shadow: var(--border-shadow);
-      padding-inline-start: var(--spacer);
-      font-family: var(--font-family);
-      font-size: var(--ui-font-size);
-      text-transform: var(--ui-text-transform);
-      margin: 0;
-    }
-
-    > h1:first-child {
-      padding-right: calc(var(--spacer) * 3);
-    }
-
-    > .close {
-      position: absolute;
-      top: 0;
-      right: 0;
-      inline-size: calc(var(--spacer) * 2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0;
-      border-radius: 0;
-      border-start-end-radius: var(--border-radius);
-
-      &:is(:hover, :active, :focus, .active) {
-        outline: none;
-      }
-    }
-
-    > section {
-      overflow-y: auto;
-      overscroll-behavior: contain;
-      padding: var(--spacer);
-      display: grid;
-      gap: var(--spacer);
-    }
-
-    > footer {
-      display: flex;
-      gap: var(--spacer);
-      justify-content: safe flex-end;
-      padding: var(--spacer);
-      border-block-start: var(--border);
-      overflow-x: auto;
-
-      &:empty {
-        display: none;
-      }
-    }
-
     &.large {
       --dialog-width: min(90vw, 64rem);
     }

package/src/base/components/FormItem.vue

@@ -20,6 +20,7 @@
 @layer components {
   .form-item {
     border-radius: var(--border-radius);
+    overflow: hidden;
     display: flex;
     align-items: center;
     background: var(--background);
@@ -65,24 +66,14 @@
       border-end-end-radius: var(--border-radius);
     }
 
-    &:has(> .prefix) {
+    &:has(> .prefix) :deep(> :last-child) {
       border-start-start-radius: 0;
       border-end-start-radius: 0;
-
-      & :deep(> :last-child) {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
-      }
     }
 
-    &:has(> .suffix) {
+    &:has(> .suffix) :deep(> :first-child) {
       border-start-end-radius: 0;
       border-end-end-radius: 0;
-
-      & :deep(> :first-child) {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
-      }
     }
   }
 }

package/src/base/components/Prose.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="prose"
+    :class="{ centered }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  centered?: boolean
+}>()
+</script>

package/src/base/components/Sidebar.vue

@@ -82,6 +82,7 @@ onMounted(() => {
     if (isLargeScreen.value) return
 
     const touch = e.touches[0]
+    if (!touch) return
     startX = touch.clientX
     startY = touch.clientY
     tracking = false
@@ -103,6 +104,7 @@ onMounted(() => {
     if (!tracking || isLargeScreen.value) return
 
     const touch = e.touches[0]
+    if (!touch) return
     const dx = touch.clientX - startX
     const dy = touch.clientY - startY
 

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) {
@@ -153,7 +129,7 @@ const onClose = (id: string) => {
     max-inline-size: calc(100vw - var(--spacer) * 2);
     padding: 0;
     border: var(--border);
-    border-radius: var(--border-radius);
+    border-radius: var(--toast-border-radius);
     overflow: hidden;
     font-family: var(--font-family);
     font-size: var(--ui-font-size);
@@ -272,7 +248,7 @@ const onClose = (id: string) => {
       right: 0;
       box-shadow: var(--border-shadow) !important;
       border-radius: 0 !important;
-      border-start-end-radius: var(--border-radius) !important;
+      border-start-end-radius: var(--toast-border-radius) !important;
     }
 
     .actions {

package/src/client-only.ts

@@ -0,0 +1,10 @@
+// Components that require browser APIs and must be rendered client-only
+export const clientOnlyComponents = [
+  'Combobox',
+  'ConfirmDialog',
+  'Dialog',
+  'Toasts',
+  'Popover',
+  'Dropdown',
+  'FormDatePicker',
+]

package/src/index.ts

@@ -36,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 Prose } from './base/components/Prose.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'
@@ -84,3 +85,5 @@ export type { DateValue } from '@internationalized/date'
 export { IconAliasesKey, defaultIconAliases } from './base/icons'
 export type { IconAliases } from './base/icons'
 export { LinkComponentKey } from './base/link'
+
+export { clientOnlyComponents } from './client-only'