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

package/README.md

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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.11",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",
   "main": "src/components/index.js",
   "files": [
     "src/components",
+    "src/composables",
     "README.md"
   ],
   "publishConfig": {
@@ -24,6 +25,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
+    "flag-icons": "^7.2.3",
     "quasar": "^2.16.0",
     "vue": "^3.4.18",
     "vue-router": "^4.0.12"

package/src/components/core/UBannerStd.vue

@@ -1,6 +1,5 @@
 <script setup>
-import UBtnStd from 'src/components/core/UBtnStd.vue'
-import { computed } from 'vue'
+import UBtnStd from './UBtnStd.vue'
 
 const props = defineProps({
   type: {
@@ -46,11 +45,12 @@ const handleSecondaryActionClick = () => {
   <q-banner
     v-if="show && message"
     inline-actions
-    :class="`u-banner u-banner-${type}`"
+    :class="`u-banner u-banner-${type} ${!icon ? 'no-padding-label' : ''}`"
     tabindex="0"
   >
     <template v-slot:avatar>
       <q-icon
+        v-if="icon"
         aria-label="Banner Icon"
         :class="icon"
         size="1.5rem"
@@ -93,7 +93,7 @@ const handleSecondaryActionClick = () => {
 
 .u-banner-positive
   background: $green-1 !important
-  color: $green-6 !important
+  color: $green-7 !important
 
 .u-banner-info
   background: $purple-1 !important
@@ -110,4 +110,8 @@ const handleSecondaryActionClick = () => {
 .u-banner-primary
   background: $blue-1 !important
   color: $primary !important
+
+.no-padding-label
+  .q-banner__content
+    padding-left: 0px !important
 </style>

package/src/components/core/UBtnStd.vue

@@ -39,20 +39,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['onClick'])
 
 const handleClick = () => {
   return emit('onClick')
 }
 
-const paddingClass = computed(() => {
-  if (props.size === 'sm') {
-    return 'q-px-sm'
-  }
-
-  return 'q-px-ba'
-})
-
 const textClass = computed(() => {
   if (props.color === 'neutral') {
     return 'text-neutral-9'
@@ -71,7 +63,7 @@ const isFullWidth = computed(() => {
 <template>
   <q-btn
     class="u-btn q-py-none"
-    :class="`size-${size} ${paddingClass} ${textClass} focus-${color} ${isFullWidth}`"
+    :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
     :color="color"
     :disable="disable"
     :unelevated="!outline"
@@ -106,19 +98,24 @@ const isFullWidth = computed(() => {
 <style lang="sass">
 .u-btn
   border-radius: $xs
-  min-width: 5.5rem
+  min-width: 5.5rem !important
 
   &.bg-neutral
     background-color: $neutral-3
 
   &.size-sm
     min-height: $md
+    padding: 0 $sm !important
 
   &.size-md
     min-height: $lg
+    padding: 0 $ba !important
+
 
   &.size-lg
     min-height: $xl
+    padding: 0 $ba !important
+
 
 .button-label
   word-break: break-all

package/src/components/core/UBtnToggle.vue

@@ -0,0 +1,68 @@
+<script setup>
+const props = defineProps({
+  options: {
+    type: Array,
+    require: true,
+  },
+})
+const model = defineModel()
+</script>
+
+<template>
+  <q-btn-toggle
+    class="u-btn-toggle"
+    v-model="model"
+    size="md"
+    text-color="dark"
+    unelevated
+    color="white"
+    no-caps
+    spread
+    toggle-color="primary"
+    :options="options"
+  >
+    <template
+      v-for="(option, index) in options"
+      v-slot:[option.slot]
+      :key="option"
+    >
+      <div class="row items-center no-wrap slot">
+        <q-icon
+          :class="options[index].iconClass"
+          v-if="options[index].iconClass"
+        />
+        <div class="text-center text-caption-md">
+          {{ options[index].name }}
+        </div>
+      </div>
+    </template>
+  </q-btn-toggle>
+</template>
+
+<style lang="sass">
+.slot
+  gap: $xxs
+
+.u-btn-toggle
+  &.q-btn-toggle
+    border-radius: $xs
+    padding: $xxs
+    box-shadow: $shadow-inner
+
+  .q-btn-item
+    .q-btn__content
+      font-size: 0.875rem
+      line-height: 1.25rem
+      letter-spacing: .03333rem
+      font-weight: 500
+
+  .q-btn-item
+    border-radius: $xxs !important
+    padding: $xs $sm !important
+    &[aria-pressed="true"]
+      &::before
+        color: $neutral-1
+        box-shadow: $shadow-skeumorphic-primary
+        border: $stroke-skeuomorphic
+        z-index: 2
+</style>

package/src/components/core/UCheckboxStd.vue

@@ -4,7 +4,7 @@ import { onMounted } from 'vue'
 const props = defineProps({
   label: {
     type: String,
-    default: 'Checkbox',
+    default: '',
   },
   name: {
     type: String,
@@ -28,18 +28,18 @@ const props = defineProps({
 const isChecked = defineModel({ default: false, type: Boolean })
 
 onMounted(() => {
-  const checkboxElement = document.getElementById(`u-checkbox-${props.id}`)
+  const checkboxElement = document.getElementById(`${props.id}`)
   if (checkboxElement) {
     const inputElement = checkboxElement.querySelector('input')
-    inputElement.id = `u-checkbox-${props.id}`
+    inputElement.id = `${props.id}`
   }
 })
 </script>
 
 <template>
-  <label style="display: none" :for="`u-checkbox-${id}`">Checkbox </label>
+  <label style="display: none" :for="`${id}`">Checkbox </label>
   <q-checkbox
-    :id="`u-checkbox-${id}`"
+    :id="`${id}`"
     class="u-checkbox text-caption-lg"
     :name="name"
     v-model="isChecked"
@@ -48,6 +48,7 @@ onMounted(() => {
     size="md"
     keep-color
     color="primary"
+    toggle-indeterminate
   />
 </template>
 
@@ -56,12 +57,21 @@ onMounted(() => {
   color: $primary
   font-weight: 500
 
-  &.q-checkbox__inner
+  .q-checkbox__inner
     display: flex
     justify-content: center
     align-items: center
+    height: $ms
+    width: $ms
+
+  .q-checkbox__inner:before
+    top: -9px !important
+    left: -2px !important
+    width: 2.7rem
+    height: 2.7rem
+    border-radius: 10rem !important
 
-  &.q-checkbox__bg
+  .q-checkbox__bg
     border: 0.125rem solid $primary
     border-radius: $xxs
     height: $ms
@@ -71,7 +81,7 @@ onMounted(() => {
     justify-content: center
     align-items: center
 
-  &.q-checkbox__svg
+  .q-checkbox__svg
     position: static
     height: 1rem !important
     width: 1rem !important

package/src/components/core/UChip.vue

@@ -16,15 +16,13 @@ const props = defineProps({
   },
   avatarLabel: {
     type: String,
-    default: 'NA',
+    default: '',
   },
   icon: {
     type: String,
-    default: 'NA',
   },
   iconClass: {
     type: String,
-    default: 'NA',
   },
   type: {
     type: String,
@@ -34,6 +32,9 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  remove: {
+    type: Function,
+  },
 })
 
 const emit = defineEmits(['update:modelValue', 'onClick'])
@@ -64,7 +65,7 @@ const avatarLabel = computed(() => {
     :class="type"
     :modelValue="modelValue"
     :dense="dense"
-    @remove="() => $emit('update:modelValue', false)"
+    @remove="remove"
     :removable="removable"
     :aria-label="chipLabel"
     @click="handleClick"

package/src/components/core/UDialogStd.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  heading: {
+    type: String,
+    required: true,
+  },
+  fields: Object,
+  position: String,
+  size: {
+    type: String,
+    default: 'default',
+  },
+  headingCaption: String,
+  leftIcon: String,
+  closeIcon: String,
+  showActionButtons: Boolean,
+  leftIconLabel: String,
+  closeIconLabel: String,
+  divider: Boolean,
+})
+
+const model = defineModel()
+
+const emit = defineEmits(['onBackIconClick', 'hideDialog'])
+const dialogRef = ref(true)
+
+const handleBackClick = () => {
+  return emit('onBackIconClick')
+}
+
+const headerClass = computed(() => {
+  return props.divider ? 'divider' : ''
+})
+</script>
+
+<template>
+  <q-dialog
+    no-backdrop-dismiss
+    ref="dialogRef"
+    :position="position"
+    full-width
+    :class="`dialog-${size}`"
+    v-model="model"
+    v-bind="$attrs"
+  >
+    <q-card class="dialog-wrapper full-height">
+      <q-card-section
+        :class="`col items-center q-pa-none heading-section ${headerClass}`"
+      >
+        <div class="heading-wrapper row">
+          <div class="flex items-center dialog-heading-container">
+            <div v-if="leftIcon">
+              <q-icon
+                class="icon-back"
+                :class="leftIcon"
+                size="1.5rem"
+                @click="handleBackClick()"
+                tabindex="0"
+                :aria-label="leftIconLabel"
+              >
+              </q-icon>
+            </div>
+            <div class="col">
+              <div>
+                <span class="text-heading-sm dialog-heading">
+                  {{ heading }}
+                </span>
+              </div>
+              <div>
+                <span class="text-body-sm dialog-caption" v-if="headingCaption">
+                  {{ headingCaption }}
+                </span>
+              </div>
+            </div>
+          </div>
+          <q-icon
+            v-if="closeIcon"
+            class="icon-close"
+            :class="closeIcon"
+            size="1.5rem"
+            @click="dialogRef.hide()"
+            tabindex="0"
+            :aria-label="closeIconLabel"
+            :aria-hidden="false"
+          >
+          </q-icon>
+        </div>
+        <div class="row">
+          <slot name="secondary_row"></slot>
+        </div>
+      </q-card-section>
+
+      <q-card-section class="full-height main-content-dialog scroll q-px-ba">
+        <slot name="content" />
+      </q-card-section>
+
+      <div class="q-pa-ba action-wrapper" v-if="showActionButtons">
+        <q-card-actions align="left" class="action-buttons">
+          <slot name="action_secondary_one"></slot>
+          <slot name="action_secondary_two"></slot>
+        </q-card-actions>
+        <q-card-actions align="right" class="action-buttons">
+          <slot name="action_primary_one"></slot>
+          <slot name="action_primary_two"></slot>
+        </q-card-actions>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="sass">
+.dialog-default, .dialog-half
+  .q-dialog__inner--left, .q-dialog__inner--right
+    .dialog-wrapper
+      max-height: 100vh !important
+  .q-dialog__inner
+    &.q-dialog__inner--right
+      padding-right: $ba !important
+    &.q-dialog__inner--left
+      padding-left: $ba !important
+.dialog-heading-container
+  gap: $xs
+
+.dialog-caption
+  color: $neutral-9
+.dialog-heading
+  color: $dark
+
+.heading-section
+    padding: $ba
+
+.dialog-wrapper
+  border-radius: $xs !important
+  .divider
+    border-bottom: 1.5px solid $neutral-4
+  .action-wrapper
+    display: flex
+    justify-content: space-between
+    border-radius: 0 0 $xs $xs !important
+  .q-card__actions
+    padding: 0
+
+.dialog-half
+  .q-dialog__inner
+    padding: $ba 0
+    width: 50% !important
+
+.dialog-full
+  .q-dialog__inner
+    padding: 0 0
+    width: 100% !important
+  .dialog-wrapper
+    max-height: calc(100vh - 1rem)
+    border-radius: $xs $xs 0 0 !important
+    &.action-wrapper
+      border-radius: 0 !important
+  .main-content-dialog
+    padding: $ms $ms
+    padding-bottom: 0
+    margin-bottom: $ms !important
+  .heading-section
+    padding: $ba $ms !important
+  .action-wrapper
+    padding: $ba $ms
+
+.dialog-default
+  .q-dialog__inner
+    padding: $ba 0
+    width: 35.25rem !important
+
+.heading-wrapper
+  justify-content: space-between
+  flex-wrap: nowrap
+  margin-bottom: $ba
+
+.icon-close
+  color: $neutral-9
+  cursor: pointer
+  align-self: flex-start
+
+.icon-back
+  cursor: pointer
+  color: $neutral-9
+
+.main-content-dialog
+  margin-bottom: $ba
+  padding-bottom: 0
+
+.full-height
+  height: 100vh
+  display: flex
+  flex-direction: column
+
+.action-buttons
+  display: flex
+  align-items: center
+  gap: $xs
+  .q-btn
+    margin: 0 !important
+</style>