@usssa/component-library 1.0.0-alpha.26 → 1.0.0-alpha.27

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.24
+# Component Library v1.0.0-alpha.27
 
 This library provides custom UI components for USSSA applications.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.26",
+  "version": "1.0.0-alpha.27",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UMenuDropdown.vue

@@ -0,0 +1,77 @@
+<script setup>
+import UMenuItem from './UMenutem.vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+  },
+  destructive: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  menuClass: {
+    type: String,
+  },
+  selected: {
+    type: Boolean,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+</script>
+
+<template>
+  <q-list :class="`u-menu-dropdown size-${size} ${menuClass}`">
+    <template v-for="(item, index) in data" :key="index">
+      <UMenuItem
+        :label="item.label"
+        :leftIcon="item.leftIcon"
+        :rightIcon="item.rightIcon"
+        @onClick="handleClick"
+        :destructive="destructive"
+        :iconClass="iconClass"
+      >
+        <template #leading_slot>
+          <slot name="leading_slot"></slot>
+        </template>
+
+        <template #trailing_slot>
+          <slot name="trailing_slot"></slot>
+        </template>
+      </UMenuItem>
+    </template>
+  </q-list>
+</template>
+
+<style lang="sass">
+.u-menu-dropdown
+   width: 11.5rem
+   padding: $xxs
+   flex-direction: column
+   align-items: flex-start
+   gap: q-my-xxs
+   flex-shrink: 0
+   border-radius: $xs
+   background: $neutral-1
+   box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+   &.size-sm
+    min-width: 11.5rem
+    max-width: 11.5rem
+   &.size-md
+    min-width: 11.75rem
+    max-width: 15rem
+   &.size-lg
+    width: 18rem
+</style>

package/src/components/core/UMenutem.vue

@@ -22,9 +22,6 @@ const props = defineProps({
   iconClass: {
     type: String,
   },
-  onClick: {
-    type: Function,
-  },
 })
 
 const type = ref(props.destructive ? 'destructive' : 'default')
@@ -69,7 +66,7 @@ const backgroundColor = computed(() => {
 </script>
 
 <template>
-  <div class="u-menu-link">
+  <div class="u-menu-link q-mb-xxs">
     <q-item
       clickable
       :class="`${backgroundColor} item-${type}`"
@@ -127,4 +124,7 @@ const backgroundColor = computed(() => {
         opacity: 1
     .label
       word-break: break-all
+
+.u-menu-link:last-child
+  margin-bottom : 0
 </style>

package/src/components/index.js

@@ -21,6 +21,7 @@ import UInputTextStd from './core/UInputTextStd.vue'
 import UDialogStd from './core/UDialogStd.vue'
 import URadioBtn from './core/URadioBtn.vue'
 import UMenuItem from './core/UMenutem.vue'
+import UMenuDropdown from './core/UMenuDropdown.vue'
 
 import { useNotify } from '../composables/useNotify.js'
 
@@ -48,4 +49,5 @@ export {
   UDialogStd,
   UInputPhoneStd,
   UMenuItem,
+  UMenuDropdown,
 }

package/src/layouts/MainLayout.vue

@@ -54,6 +54,10 @@ const components = [
     title: 'Input Phone',
     path: 'input-phone',
   },
+  {
+    title: 'Menu Dropdown',
+    path: 'menu-dropdown',
+  },
   {
     title: 'Menu Item',
     path: 'menu-item',

package/src/pages/MenuDropdown.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue'
+import { UMenuDropdown } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+
+const Data = [
+  {
+    label: 'Profile',
+    leftIcon: 'fa-kit-duotone fa-user',
+  },
+  {
+    label: 'Settings',
+    leftIcon: 'fa-kit-duotone fa-admin',
+  },
+  {
+    label: 'Logout',
+    leftIcon: 'fa-kit-duotone fa-logout',
+  },
+]
+
+const size = ref('sm')
+const sizeOptions = ['sm', 'md', 'lg']
+
+const htmlContent = `<UMenuDropdown
+  :data="Data"
+  @onClick="onClick"
+  iconClass="icon-secondary-opacity"
+  :size="size"
+/>`
+
+defineOptions({
+  name: 'UMenuDropdown',
+})
+
+const onClick = () => {
+  console.log('check....')
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-24&node-type=canvas&t=nWq2UjUIdqvWKgPg-0"
+    >
+      <template v-slot:component>
+        <!-- Using test-cls to demonstrate how to pass custom css -->
+        <UMenuDropdown
+          :data="Data"
+          @onClick="onClick"
+          iconClass="icon-secondary-opacity"
+          :size="size"
+          menuClass="test-cls"
+        >
+          <!-- Use slot here like this -->
+          <!-- <template #trailing_slot>
+            Write your code here
+          </template> -->
+        </UMenuDropdown>
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-y-lg">
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style lang="sass">
+.test-cls
+   max-height: 11.25rem !important
+   overflow-y: auto
+   scrollbar-width: none  // use this if we dont want to show scrollbar
+</style>

package/src/router/routes.js

@@ -103,6 +103,10 @@ const routes = [
         path: 'menu-item',
         component: () => import('src/pages/MenuItem.vue'),
       },
+      {
+        path: 'menu-dropdown',
+        component: () => import('src/pages/MenuDropdown.vue'),
+      },
     ],
   },