@sabrenski/spire-ui 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sabrenski/spire-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A dependency-free Vue 3 component library built with pure CSS and OKLCH colors",
   "type": "module",
   "license": "MIT",

package/src/components/Drawer/Drawer.vue

@@ -30,6 +30,10 @@ export interface DrawerProps {
   closeOnEscape?: boolean
   /** Show close button in header */
   showClose?: boolean
+  /** Force specified placement on mobile (disable bottom sheet behavior) */
+  forcePlacement?: boolean
+  /** Remove body padding for flush content */
+  flush?: boolean
 }
 
 const props = withDefaults(defineProps<DrawerProps>(), {
@@ -39,7 +43,9 @@ const props = withDefaults(defineProps<DrawerProps>(), {
   size: 'md',
   maskClosable: true,
   closeOnEscape: true,
-  showClose: true
+  showClose: true,
+  forcePlacement: false,
+  flush: false
 })
 
 const emit = defineEmits<{
@@ -73,6 +79,7 @@ onUnmounted(() => {
 })
 
 const actualPlacement = computed(() => {
+  if (props.forcePlacement) return props.placement
   return isMobile.value ? 'bottom' : props.placement
 })
 
@@ -160,7 +167,7 @@ const drawerClasses = computed(() => [
   `ui-drawer__panel--${actualPlacement.value}`,
   `ui-drawer__panel--${props.variant}`,
   `ui-drawer__panel--${props.size}`,
-  { 'ui-drawer__panel--mobile': isMobile.value }
+  { 'ui-drawer__panel--mobile': isMobile.value && !props.forcePlacement }
 ])
 
 const transitionName = computed(() => {
@@ -177,7 +184,7 @@ defineExpose({
     <Transition :name="transitionName">
       <div
         v-if="isOpen"
-        class="ui-drawer"
+        :class="['ui-drawer', { 'ui-drawer--force-placement': forcePlacement }]"
         @keydown="handleKeydown"
       >
         <div
@@ -209,7 +216,7 @@ defineExpose({
             </button>
           </header>
 
-          <div class="ui-drawer__body">
+          <div :class="['ui-drawer__body', { 'ui-drawer__body--flush': flush }]">
             <slot />
           </div>
 
@@ -373,6 +380,10 @@ defineExpose({
   padding: var(--space-6);
 }
 
+.ui-drawer__body--flush {
+  padding: 0;
+}
+
 /* Footer */
 .ui-drawer__footer {
   display: flex;
@@ -451,12 +462,12 @@ defineExpose({
 
 /* Mobile adjustments */
 @media (max-width: 639px) {
-  .ui-drawer {
+  .ui-drawer:not(.ui-drawer--force-placement) {
     align-items: flex-end;
     justify-content: stretch;
   }
 
-  .ui-drawer__panel {
+  .ui-drawer:not(.ui-drawer--force-placement) .ui-drawer__panel {
     width: 100% !important;
     max-height: 90vh;
     margin: 0;