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

package/src/components/core/UPagination.vue

@@ -1,14 +1,28 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
 import USelectStd from './USelectStd.vue'
+
+const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
+
+const model = defineModel()
+
 const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: 1,
+  applyLabel: {
+    type: String,
+    default: 'Apply',
   },
-  rowPerPage: {
-    type: Number,
-    default: 5,
+  cancelLabel: {
+    type: String,
+    default: 'Cancel',
+  },
+  closeIconLabel: {
+    type: String,
+    default: 'Close icon'
+  },
+  dataTestId: {
+    type: String,
+    default: 'pagination-std',
   },
   maxPageLink: {
     //Maximum number of page links to display at a time
@@ -17,7 +31,11 @@ const props = defineProps({
   },
   maxPages: {
     type: Number,
-    default: 10,
+    default: 1,
+  },
+  modelValue: {
+    type: Number,
+    default: 1,
   },
   perPageOptions: {
     type: Array,
@@ -28,45 +46,78 @@ const props = defineProps({
       { label: '20 / per page', value: 20 },
     ],
   },
+  rowPerPage: {
+    type: Number,
+    default: 5,
+  },
+  sheetLabel: {
+    type: String,
+    default: 'Selections Per Page',
+  },
 })
-const emit = defineEmits(['update:modelValue', 'onRowChange', 'onPageChange'])
-const rowPerPage = ref(props.rowPerPage)
+
+const $screen = useScreenType()
+
+// refs
 const currentPage = ref(props.modelValue)
+const rowPerPage = ref(props.rowPerPage)
 
-watch(currentPage, (newValue) => {
-  emit('update:modelValue', newValue)
-  emit('onPageChange', newValue)
+const perPageOptionsList = computed(() => {
+  if ($screen.value.isMobile) {
+    return [...props.perPageOptions].map((option) => ({
+      ...option,
+      label: option.label.split(' ')[0],
+    }))
+  }
+  return props.perPageOptions
 })
+
+// custom functions
 const onPageChange = (newPage) => {
   currentPage.value = newPage
 }
 const onRowChange = (newRowPerPage) => {
   emit('onRowChange', newRowPerPage)
 }
+
+// watcher function
+watch(currentPage, (newValue) => {
+  emit('update:modelValue', newValue)
+  emit('onPageChange', newValue)
+})
 </script>
 
 <template>
-  <div class="row u-pagination-container"> 
+  <div
+    :class="`row u-pagination-container no-wrap items-center ${
+      $screen.isMobile ? 'justify-between' : 'justify-end'
+    }`"
+  >
     <q-pagination
+      v-model="model"
       class="u-pagination"
-      v-model="currentPage"
+      active-color="primary"
+      boundary-numbers
+      color="dark"
+      :dataTestId="dataTestId"
       direction-links
       flat
-      color="dark"
-      active-color="primary"
+      gutter="sm"
       :max="maxPages"
       :max-pages="maxPageLink"
-      boundary-numbers
       @update:model-value="onPageChange"
-      gutter="sm"
     />
 
     <USelectStd
-      class="q-gutter-x-sm text-body-sm perpage-dropdown"
       v-model="rowPerPage"
-      color="primary"
-      :options="perPageOptions"
+      class="q-gutter-x-sm text-body-sm perpage-dropdown"
       popupClass="pagination-dropdown"
+      :apply-label="applyLabel"
+      :cancel-label="cancelLabel"
+      :close-icon-label="closeIconLabel"
+      color="primary"
+      :options="perPageOptionsList"
+      :sheetLabel="sheetLabel"
       @update:model-value="onRowChange"
     />
   </div>
@@ -77,12 +128,13 @@ const onRowChange = (newRowPerPage) => {
   width: auto !important
 
 .perpage-dropdown
-  width: 9.375rem
   .q-field__marginal
     padding-left: $xs
+  .q-field--outlined
+    margin-top: 0 !important
   .q-field--outlined .q-field__control
     display: inline-flex
-    width: 8.75rem
+    max-width: 8.75rem
 
 .u-pagination
   .q-icon

package/src/components/core/URadioBtn.vue

@@ -1,23 +1,32 @@
 <script setup>
 import { computed } from 'vue'
 import URadioStd from './URadioStd.vue'
+import { useScreenType } from '../../composables/useScreenType'
+
+const emit = defineEmits(['onClick', 'onButtonClick'])
+const model = defineModel()
 const props = defineProps({
-  iconClass: {
+  altText: {
     type: String,
     default: '',
   },
-  label: {
+  dataTestId: {
     type: String,
-    default: '',
+    default: 'radio-btn-std',
   },
   description: {
     type: String,
     default: '',
   },
-  value: {
+  iconClass: {
     type: String,
     default: '',
   },
+  iconColor: {
+    type: String,
+    default: 'primary',
+  },
+  id: { String },
   image: {
     type: String,
     default: '',
@@ -26,24 +35,17 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  altText: {
+  label: {
     type: String,
     default: '',
   },
-  iconColor: {
+  value: {
     type: String,
-    default: 'primary',
+    default: '',
   },
-
-  id: { String },
 })
 
-const emit = defineEmits(['onClick', 'onButtonClick'])
-const model = defineModel()
-
-const handleChange = () => {
-  model.value = props.value
-}
+const $screen = useScreenType()
 
 const activeClass = computed(() => {
   if (model.value === props.value) {
@@ -51,32 +53,56 @@ const activeClass = computed(() => {
   }
   return ''
 })
+
+const isMobile = computed(() => $screen.value.isMobile)
+
+const handleChange = () => {
+  model.value = props.value
+}
 </script>
 
 <template>
-  <q-btn flat class="u-radio-btn" @click="handleChange" :class="activeClass">
-    <div class="radio-btn-content flex items-center">
-      <URadioStd v-model="model" :value="value" :id="id" :aria-label="label" />
-      <div class="button-text">
-        <div class="text-caption-lg">{{ label }}</div>
-        <div class="description-text text-body-sm">{{ description }}</div>
+  <q-btn
+    :class="`u-radio-btn ${activeClass}${isMobile ? ' full-width' : ''}`"
+    :dataTestId="dataTestId"
+    flat
+    @click="handleChange"
+  >
+    <div class="radio-btn-content flex items-center justify-between full-width">
+      <div
+        class="flex items-center justify-center radio-btn-text-wrapper no-wrap"
+      >
+        <URadioStd
+          v-model="model"
+          :aria-label="label"
+          :id="id"
+          :value="value"
+        />
+        <div class="button-text q-ml-xs">
+          <div class="text-caption-lg">{{ label }}</div>
+          <div class="description-text text-body-sm">
+            {{ description }}
+          </div>
+        </div>
       </div>
 
-      <img
-        class="radio-btn-img"
-        v-if="image"
-        size="1.5rem"
-        :src="image"
-        :alt="altText"
-        :aria-label="imgAriaLabel"
-      />
-      <q-icon
-        v-if="iconClass"
-        :aria-label="imgAriaLabel"
-        :color="iconColor"
-        size="1.5rem"
-        :class="iconClass"
-      />
+      <div class="flex items-center">
+        <img
+          v-if="image"
+          class="radio-btn-img"
+          :alt="altText"
+          :aria-label="imgAriaLabel"
+          size="1.5rem"
+          :src="image"
+        />
+        <q-icon
+          v-if="iconClass"
+          :class="iconClass"
+          :aria-label="imgAriaLabel"
+          :color="iconColor"
+          size="1.5rem"
+        />
+      </div>
     </div>
   </q-btn>
 </template>
@@ -84,31 +110,28 @@ const activeClass = computed(() => {
 <style lang="sass">
 .u-radio-btn
   padding: $xs $sm
-  border: 2px solid $neutral-4
+  border: 0.125rem solid $neutral-4
   border-radius: $xs
   min-height: $lg
   .q-radio__label
     padding-left: 0 !important
 
-  .radio-btn-content
-    gap: $xs
-
   .button-text
     text-align: left !important
-    min-width: 6.063rem
 
   .description-text
     color: $description
+    white-space: nowrap
 
   .radio-btn-img
     width: $ms
     height: $ms
 
 .active
-  border: 2px solid $primary
+  border: 0.125rem solid $primary
 
 .u-radio-btn:hover
-  border: 2px solid $primary
+  border: 0.125rem solid $primary
   background-color: $primary-transparent
 
   .q-radio .q-radio__inner

package/src/components/core/URadioStd.vue

@@ -1,15 +1,15 @@
 <script setup>
 import { onMounted } from 'vue'
 
+const radioValue = defineModel()
+
 const props = defineProps({
-  label: {
-    type: String,
-  },
   ariaLabel: {
     type: String,
   },
-  value: {
+  dataTestId: {
     type: String,
+    default: 'radio-std',
   },
   disable: {
     type: Boolean,
@@ -20,34 +20,43 @@ const props = defineProps({
     default: 'u-radio',
     required: true, // it is required for to match accessibility crieteria
   },
+  label: {
+    type: String,
+  },
+  value: {
+    type: String,
+  },
 })
 onMounted(() => {
   const radioElement = document.getElementById(props.id)
   if (radioElement) {
     const inputElement = radioElement.querySelector('input')
-    inputElement.id = props.id
+    if (inputElement) {
+      inputElement.id = props.id
+    }
   }
 })
-
-const radioValue = defineModel()
 </script>
 
 <template>
-  <label class="hidden" :for="id" v-if="label || ariaLabel">{{
-    label || ariaLabel
-  }}</label>
+  <label v-if="label || ariaLabel" class="hidden" :for="id">
+    {{ label || ariaLabel }}
+  </label>
   <q-radio
+    v-bind="$attrs"
     v-model="radioValue"
+    :aria-label="ariaLabel"
     class="u-radio"
-    :val="value"
     color="primary"
-    keep-color
+    :dataTestId="dataTestId"
     dense
-    size="3rem"
     :disable="disable"
     :id="id"
+    keep-color
+    size="3rem"
+    :val="value"
   >
-    <div class="text-center text-caption-lg radio-label" v-if="label">
+    <div v-if="label" class="text-center text-caption-lg radio-label">
       {{ label }}
     </div>
   </q-radio>