Mass changes

resources/js/Components/Dropdown.vue

@@ -14,6 +14,10 @@ const props = defineProps({
         type: Array,
         default: () => ['py-1', 'bg-white'],
     },
+    closeOnContentClick: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 let open = ref(false);
@@ -77,9 +81,16 @@ onUnmounted(() => {
 });
 
 const widthClass = computed(() => {
-    return {
-        '48': 'w-48',
-    }[props.width.toString()];
+    const map = {
+        '48': 'w-48', // 12rem
+        '64': 'w-64', // 16rem
+        '72': 'w-72', // 18rem
+        '80': 'w-80', // 20rem
+        '96': 'w-96', // 24rem
+        'wide': 'w-[34rem] max-w-[90vw]',
+        'auto': '',
+    };
+    return map[props.width.toString()] ?? '';
 });
 
 const alignmentClasses = computed(() => {
@@ -93,6 +104,11 @@ const alignmentClasses = computed(() => {
 
     return 'origin-top';
 });
+const onContentClick = () => {
+    if (props.closeOnContentClick) {
+        open.value = false;
+    }
+};
 </script>
 
 <template>
@@ -120,7 +136,7 @@ const alignmentClasses = computed(() => {
                     :class="[widthClass]"
                     :style="[panelStyle]"
                 >
-                    <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses" @click="open = false">
+                    <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses" @click="onContentClick">
                         <slot name="content" />
                     </div>
                 </div>