@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.23

package/README.md

@@ -1,4 +1,4 @@
-# Component Library v1.0.0-alpha.21
+# Component Library v1.0.0-alpha.22
 
 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.21",
+  "version": "1.0.0-alpha.23",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/components/core/UInputPhoneStd.vue

@@ -113,7 +113,6 @@ const toLowerCase = (str) => str.toLowerCase()
         menu-anchor="top right"
         menu-self="bottom middle"
         :menu-offset="[30, 5]"
-        dropdown-icon="img:icons/caret-down.svg"
       >
         <template #label>
           <q-icon

package/src/components/core/UMenutem.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  leftIcon: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  destructive: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+  },
+  onClick: {
+    type: Function,
+  },
+})
+
+const type = ref(props.destructive ? 'destructive' : 'default')
+
+watch(
+  () => props.destructive,
+  (newValue) => {
+    type.value = newValue ? 'destructive' : 'default'
+  }
+)
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const labelColor = computed(() => {
+  if (props.destructive) {
+    return 'text-red-6'
+  } else if (props.selected) {
+    return 'text-primary'
+  }
+  return 'text-dark'
+})
+
+const iconColor = computed(() => {
+  if (props.destructive) {
+    return 'red-6'
+  } else if (props.selected) {
+    return 'primary'
+  }
+  return 'dark'
+})
+
+const backgroundColor = computed(() => {
+  if (props.selected && !props.destructive) {
+    return 'bg-blue-1'
+  }
+  return 'bg-neutral-1'
+})
+</script>
+
+<template>
+  <div class="u-menu-link">
+    <q-item
+      clickable
+      :class="`${backgroundColor} item-${type}`"
+      @click="handleClick"
+    >
+      <q-item-section side v-if="leftIcon">
+        <q-icon
+          :color="iconColor"
+          :class="`${leftIcon} ${iconClass}`"
+          size="1rem"
+          :aria-hidden="true"
+        />
+      </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 side v-if="rightIcon">
+        <q-icon
+          :color="iconColor"
+          :class="`${rightIcon} ${iconClass}`"
+          size="1rem"
+          :aria-hidden="true"
+        />
+      </q-item-section>
+
+      <slot name="trailing_slot"></slot>
+    </q-item>
+  </div>
+</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>

package/src/components/core/UPagination.vue

@@ -46,7 +46,7 @@ const onRowChange = (newRowPerPage) => {
 </script>
 
 <template>
-  <div class="row u-pagination-container">
+  <div class="row u-pagination-container"> 
     <q-pagination
       class="u-pagination"
       v-model="currentPage"
@@ -58,8 +58,6 @@ const onRowChange = (newRowPerPage) => {
       :max-pages="maxPageLink"
       boundary-numbers
       @update:model-value="onPageChange"
-      icon-prev="img:icons/chevron-left.svg"
-      icon-next="img:icons/chevron-right.svg"
       gutter="sm"
     />
 

package/src/components/index.js

@@ -20,6 +20,7 @@ import UInputPhoneStd from './core/UInputPhoneStd.vue'
 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 { useNotify } from '../composables/useNotify.js'
 
@@ -46,4 +47,5 @@ export {
   useNotify,
   UDialogStd,
   UInputPhoneStd,
+  UMenuItem,
 }

package/src/css/app.sass

@@ -154,3 +154,6 @@
   color: $red-7 !important
   .q-btn
     background: $accent
+
+.icon-secondary-opacity
+  --fa-secondary-opacity: 0.20

package/src/css/quasar.variables.sass

@@ -50,10 +50,10 @@ $h4-sm: (size: 1.00rem , line-height: 1.25rem, letter-spacing: .35px, weight: bo
 
 
 // DESKTOP
-$caption-lg:    (size: 1rem,    line-height: 1.25rem,   letter-spacing: .03333rem, font-weight: 500) !default
-$caption-md:    (size: 0.875rem,  line-height: 1.25rem, letter-spacing: .03333rem, font-weight: 500) !default
-$caption-sm:    (size: 0.75rem,    line-height: 1.25rem,   letter-spacing: .03333rem, font-weight: 500) !default
-$caption-xs:    (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem, font-weight: 500) !default
+$caption-lg: (size: 1rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
+$caption-md: (size: 0.875rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
+$caption-sm: (size: 0.75rem,    line-height: 1.25rem,   letter-spacing: .03333rem, weight: 500) !default
+$caption-xs: (size: 0.688rem,  line-height: 1.25rem, letter-spacing: .03333rem, weight: 500) !default
 
 $body-xl:   (size: 1.25rem, line-height: 2.5rem,   letter-spacing: .03215rem,  weight: 400) !default
 $body-lg:   (size: 1.125rem, line-height: 1.75rem,   letter-spacing: .03215rem,  weight: 400) !default
@@ -115,5 +115,5 @@ $shadow-inner: 0px 0px 1px 1px rgb(16, 17, 20, .12) inset
 $shadow-skeumorphic-primary: 0px 1px 0.4px 0px rgba(136, 136, 138, 0.40) inset, 0px -1px 0.4px 0px rgba(16, 17, 20, 0.40) inset, 0px 4px 10px 0px rgba(16,17,20,0.00), 0px 0px 0px 1px rgb(35,75,169)
 $stroke-skeuomorphic: 1px solid rgba(255, 255, 255, 0.12)
 $shadow-2: 0px 0px 8px 0px rgba(16, 17, 20, 0.12)
-
-
+$accent-bg-hover: rgba(203, 42, 61, 0.15)
+$surface-bg-link-hover :rgba(16, 17, 20, .5)

package/src/layouts/MainLayout.vue

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

package/src/pages/MenuItem.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref } from 'vue'
+import { UMenuItem } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+
+const leftIcon = ref('fa-kit-duotone fa-home')
+const rightIcon = ref('fa-kit-duotone fa-circle-check')
+const label = ref('Label')
+const selected = ref(false)
+const destructive = ref(false)
+
+const htmlContent = `<UMenuItem
+  :label="label"
+  :leftIcon="leftIcon"
+  :rightIcon="rightIcon"
+  :selected="selected"
+  :destructive="destructive"
+/>`
+
+defineOptions({
+  name: 'UMenuItem',
+})
+
+const handleClick = () => {
+  console.log('item clicked')
+}
+</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>
+        <UMenuItem
+          :label="label"
+          :leftIcon="leftIcon"
+          :rightIcon="rightIcon"
+          :selected="selected"
+          :destructive="destructive"
+          iconClass="icon-secondary-opacity"
+          @onClick="handleClick"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-y-lg">
+          <q-input label="Label" v-model="label" />
+          <q-input label="Left Icon" v-model="leftIcon" />
+          <q-input label="Right Icon" v-model="rightIcon" />
+          <div>
+            <q-checkbox
+              size="xs"
+              v-model="selected"
+              label="Selected"
+              v-if="!destructive"
+            />
+            <q-checkbox size="xs" v-model="destructive" label="Destructive" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/router/routes.js

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