@onereach/ui-components 4.3.6 → 4.3.7-beta.2642.0

package/src/components/or-bottom-sheet-v3/props.ts

@@ -0,0 +1,4 @@
+export enum BottomSheetVariant {
+  Basic = 'basic',
+  Advanced = 'advanced',
+}

package/src/components/or-bottom-sheet-v3/styles.ts

@@ -1,4 +1,6 @@
-export const BottomSheetRoot: string[] = [
+import { BottomSheetVariant } from './props';
+
+export const BottomSheet: string[] = [
   // Position
   'fixed',
 
@@ -9,9 +11,6 @@ export const BottomSheetRoot: string[] = [
   // Layout
   'layout-column',
 
-  // Box
-  'max-h-[50%]',
-
   // Shape
   'rounded-t-lg',
 
@@ -25,12 +24,21 @@ export const BottomSheetRoot: string[] = [
   // Elevation
   'shadow-contextual',
   'dark:shadow-contextual-dark',
-
-  // Animation
-  'transition-[min-height]',
-  'transition-[max-height]',
 ];
 
+export const BottomSheetVariants: Record<BottomSheetVariant, string[]> = {
+  'basic': [],
+
+  'advanced': [
+    // Box
+    'max-h-[50%]',
+
+    // Animation
+    'transition-[min-height]',
+    'transition-[max-height]',
+  ],
+};
+
 export const BottomSheetHandle: string[] = [
   // Layout
   'layout-row justify-center',

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -38,6 +38,7 @@
         ref="popover"
         :class="popoverStyles"
         :variant="'auto'"
+        :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
         @update:state:closed-automatically="reset()"

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -47,6 +47,7 @@
         ref="datePopover"
         :class="datePopoverStyles"
         :variant="'auto'"
+        :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
         @update:state:closed-automatically="reset()"
@@ -84,6 +85,7 @@
         ref="timePopover"
         :class="timePopoverStyles"
         :variant="'auto'"
+        :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
         @update:state:closed-automatically="reset()"

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/styles.ts

@@ -15,7 +15,7 @@ export const DateTimePickerDateSelectButtonGroup: string[] = [
   'grid-cols-7',
 
   // Box
-  'h-[318px] md:h-[262px]',
+  'h-[262px]',
 
   // Spacing
   'gap-xs',

package/src/components/or-popover-v3/OrPopover.stories3.ts

@@ -27,6 +27,10 @@ export default {
       options: Object.values(PopoverVariant),
     },
 
+    bottomSheetProps: {
+      control: { type: 'object' },
+    },
+
     trigger: {
       table: { disable: true },
     },

package/src/components/or-popover-v3/OrPopover.vue

@@ -25,6 +25,7 @@
       <template v-if="isMobile && variant === 'auto' || variant === 'bottom-sheet'">
         <OrBottomSheet
           ref="bottomSheet"
+          v-bind="bottomSheetProps"
           @update:state="state = $event"
           @update:state:closed-automatically="$emit('update:state:closed-automatically')"
         >
@@ -61,6 +62,11 @@ export default defineComponent({
       default: PopoverVariant.Auto,
     },
 
+    bottomSheetProps: {
+      type: Object as PropType<InstanceType<typeof OrBottomSheet>['$props']>,
+      default: undefined,
+    },
+
     trigger: {
       type: HTMLElement,
       default: undefined,

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -38,6 +38,7 @@
         ref="popover"
         :class="popoverStyles"
         :variant="'auto'"
+        :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
         @update:state:closed-automatically="reset()"