@1001-digital/components 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1001-digital/components",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "type": "module",
   "main": "./src/index.ts",
   "sideEffects": [

package/src/base/components/BottomNav.vue

@@ -6,7 +6,7 @@
   </nav>
 </template>
 
-<style>
+<style scoped>
 @layer components {
   .bottom-nav {
     position: fixed;

package/src/base/components/Combobox.vue

@@ -104,7 +104,7 @@ const resolveDisplayValue = (val: any) => {
 }
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .combobox-root {
     inline-size: 100%;

package/src/base/components/Dropdown.vue

@@ -71,7 +71,7 @@ const props = withDefaults(
 const open = defineModel<boolean>('open', { required: true })
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .dropdown {
     background: var(--dropdown-background);

package/src/base/components/FormDatePicker.vue

@@ -187,7 +187,7 @@ const open = defineModel<boolean>('open')
 const placeholderValue = ref(props.placeholder) as ReturnType<typeof ref<DateValue | undefined>>
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .form-date-picker-anchor {
     display: inline-flex;

package/src/base/components/FormInputGroup.vue

@@ -9,6 +9,7 @@
   position: relative;
   display: flex;
   align-items: center;
+  gap: var(--border-width);
 
   & :deep(input + .icon) {
     position: absolute;
@@ -42,7 +43,6 @@
     + input,
     + button,
     + a {
-      margin-inline-start: calc(-1 * var(--border-width));
       border-start-start-radius: 0 !important;
       border-end-start-radius: 0 !important;
     }

package/src/base/components/Sidebar.vue

@@ -25,7 +25,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, watchEffect, onMounted, onBeforeUnmount } from 'vue'
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  watchEffect,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue'
 import { useMediaQuery, useScrollLock, useElementSize } from '@vueuse/core'
 
 const open = defineModel<boolean>('open', { default: false })
@@ -119,6 +127,9 @@ onMounted(() => {
       }
     }
 
+    // Prevent browser back/forward navigation gesture
+    e.preventDefault()
+
     const w = sidebarWidth.value
     if (!w) return
 
@@ -160,7 +171,7 @@ onMounted(() => {
   }
 
   document.addEventListener('touchstart', onTouchStart, { passive: true })
-  document.addEventListener('touchmove', onTouchMove, { passive: true })
+  document.addEventListener('touchmove', onTouchMove, { passive: false })
   document.addEventListener('touchend', onTouchEnd)
 
   cleanupSwipe = () => {
@@ -206,7 +217,7 @@ defineExpose({
 })
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .sidebar {
     position: fixed;

package/src/base/components/Tooltip.vue

@@ -64,7 +64,7 @@ const props = withDefaults(
 )
 </script>
 
-<style>
+<style scoped>
 @layer components {
   .tooltip {
     background: var(--tooltip-background);