@usssa/component-library 1.0.0-alpha.10 → 1.0.0-alpha.100

package/src/components/core/UMenuItem.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const emit = defineEmits(['onClick'])
+const props = defineProps({
+  destructive: {
+    type: Boolean,
+    default: false,
+  },
+  disable: {
+    default: false,
+    type: Boolean,
+  },
+  hide: {
+    default: false,
+    type: Boolean,
+  },
+  iconClass: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  leftIcon: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const type = ref(props.destructive ? 'destructive' : 'default')
+
+/* Computed variables */
+const backgroundColor = computed(() => {
+  if (props.selected && !props.destructive) {
+    return 'bg-blue-1'
+  }
+  return 'bg-neutral-1'
+})
+
+const iconColor = computed(() => {
+  if (props.destructive) {
+    return 'accent'
+  } else if (props.selected) {
+    return 'primary'
+  }
+  return 'dark'
+})
+
+const labelColor = computed(() => {
+  if (props.destructive) {
+    return 'text-accent'
+  } else if (props.selected) {
+    return 'text-primary'
+  }
+  return 'text-dark'
+})
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+watch(
+  () => props.destructive,
+  (newValue) => {
+    type.value = newValue ? 'destructive' : 'default'
+  }
+)
+</script>
+
+<template>
+  <q-item
+    v-if="!hide"
+    :class="`${backgroundColor} item-${type} u-menu-link q-mb-xxs`"
+    :aria-label="label"
+    clickable
+    :disable="disable"
+    role="button"
+    tabindex="0"
+    @click="handleClick"
+  >
+    <q-item-section v-if="leftIcon" side>
+      <q-icon
+        :class="`${leftIcon} ${iconClass}`"
+        :aria-hidden="true"
+        :color="iconColor"
+        size="1rem"
+      />
+    </q-item-section>
+    <slot name="leading_slot"></slot>
+    <q-item-section class="text-body-sm label" :class="labelColor">
+      {{ label }}
+    </q-item-section>
+    <q-item-section v-if="rightIcon" side>
+      <q-icon
+        :class="`${rightIcon} ${iconClass}`"
+        :aria-hidden="true"
+        :color="iconColor"
+        size="1rem"
+      />
+    </q-item-section>
+    <slot name="trailing_slot"></slot>
+  </q-item>
+</template>
+
+<style lang="sass">
+.u-menu-link
+  &.q-item
+    border-radius: $xxs
+    padding: 0rem $xs
+    align-items: center
+    display: flex
+    min-height: $lg
+    gap: $xs
+    .q-item__section--avatar
+      min-width: 0px
+    .q-item__section--side
+      padding: 0px
+    &.item-destructive
+      &.q-hoverable:hover > .q-focus-helper:after
+        background: $red-6
+        opacity: 1
+    &.item-default
+      &.q-hoverable:hover > .q-focus-helper:after
+        background: $surface-bg-link-hover
+        opacity: 1
+    .label
+      word-break: break-all
+</style>