@onereach/ui-components 8.19.2 → 8.19.3-beta.3975.0

package/src/components/or-menu-item-v3/OrMenuItem.vue

@@ -13,22 +13,32 @@
       <OrIcon v-bind="typeof icon === 'string' ? { icon } : icon" />
     </template>
 
-    <div :class="['truncate', 'w-full']">
+    <div :class="['truncate']">
       <slot />
     </div>
+
+    <template v-if="closeButton">
+      <div :class="['grow']" />
+
+      <OrIconButton
+        :icon="'close'"
+        :disabled="disabled"
+        @click.stop="$emit('close')"
+      />
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
-import { MenuItemRoot } from './styles';
+import { MenuItem } from './styles';
 
 export default defineComponent({
-  name: 'OrMenuItem',
-
   components: {
     OrIcon,
+    OrIconButton,
   },
 
   props: {
@@ -37,6 +47,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    closeButton: {
+      type: Boolean,
+      default: false,
+    },
+
     selected: {
       type: Boolean,
       default: false,
@@ -52,6 +67,8 @@ export default defineComponent({
     'click',
     'focus',
     'blur',
+
+    'close',
   ],
 
   expose: [
@@ -65,7 +82,7 @@ export default defineComponent({
     // Styles
     const rootStyles = computed(() => [
       'or-menu-item-v3',
-      ...MenuItemRoot,
+      ...MenuItem,
     ]);
 
     return {

package/src/components/or-menu-item-v3/styles.ts

@@ -1,4 +1,4 @@
-export const MenuItemRoot: string[] = [
+export const MenuItem: string[] = [
   // Layout
   'layout-row',