@usssa/component-library 1.0.0-alpha.2 → 1.0.0-alpha.200

package/src/components/core/UExpansionStd.vue

@@ -0,0 +1,266 @@
+<script setup>
+import { ref } from 'vue'
+import URadioStd from './URadioStd.vue'
+
+const emit = defineEmits(['handleSelectChange'])
+const isSelected = defineModel('isSelected', {
+  default: '',
+  type: [String, Number, Object, Array],
+})
+const props = defineProps({
+  caption: {
+    type: String,
+    default: '',
+  },
+  collapsedAriaLabel: {
+    type: String,
+    default: 'Collapsed',
+  },
+  dataTestId: {
+    type: String,
+    default: 'expansion-std',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  enableIconToggle: {
+    type: Boolean,
+    default: false,
+  },
+  enableSelection: {
+    type: Boolean,
+    default: false,
+  },
+  expandAriaLabel: {
+    type: String,
+    default: 'Expand',
+  },
+  expansionIcon: {
+    type: String,
+    default: 'fa-kit fa-caret-down',
+  },
+  expansionIconColor: {
+    type: String,
+    default: 'description',
+  },
+  expansionIconSize: {
+    type: String,
+    default: '1rem', // accept px , rem and (xs|sm|md|lg|xl)
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  option: {
+    default: null,
+    type: Object,
+  },
+  rowCardHeight: {
+    type: Number,
+    default: 20.563,
+  },
+  toggleIconLeft: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isExpanded = ref(false)
+
+const handleChange = (value) => {
+  emit('handleSelectChange', value)
+}
+
+const onIconKeydown = (event) => {
+  if (props.disabled) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    toggleExpansion()
+  }
+}
+
+const toggleExpansion = () => {
+  if (!props.disabled) {
+    isExpanded.value = !isExpanded.value
+  }
+}
+</script>
+
+<template>
+  <!-- For expand on expansion icon -->
+  <q-expansion-item
+    v-bind="$attrs"
+    v-if="enableIconToggle"
+    v-model="isExpanded"
+    class="u-expansion"
+    :dataTestId="dataTestId"
+    :disable="disabled"
+    expand-icon-class="hidden"
+    expand-icon-toggle
+    :style="{
+      'min-height': `${isExpanded ? rowCardHeight + 'rem' : 'auto'}`,
+      overflowX: 'hidden',
+    }"
+  >
+    <template v-slot:header>
+      <div class="u-expansion-header">
+        <URadioStd
+          v-if="enableSelection"
+          v-model="isSelected"
+          class="expansion-radio-wrapper"
+          :aria-label="option.ariaLabel"
+          :dataTestId="`expansion-radio-std-${option.id}`"
+          :disable="option.disable || disabled"
+          :id="option.id"
+          :value="option.id"
+          @update:model-value="handleChange"
+        />
+        <q-icon
+          v-if="toggleIconLeft"
+          :class="[
+            'cursor-pointer',
+            'icon-secondary-opacity',
+            'transition-all',
+            expansionIcon,
+            { 'rotate-180': isExpanded },
+          ]"
+          :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+          :color="expansionIconColor"
+          :size="expansionIconSize"
+          :tabindex="disabled ? -1 : 0"
+          @click.stop="toggleExpansion"
+          @keydown.stop="onIconKeydown"
+        >
+        </q-icon>
+        <slot name="avatar" />
+        <div class="column u-expansion-label">
+          <span class="text-caption-lg">{{ label }}</span>
+          <span class="text-body-xs">{{ caption }}</span>
+        </div>
+        <q-icon
+          v-if="!toggleIconLeft"
+          :class="[
+            'cursor-pointer',
+            'icon-secondary-opacity',
+            'transition-all',
+            expansionIcon,
+            { 'rotate-180': isExpanded },
+          ]"
+          :aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+          :color="expansionIconColor"
+          :size="expansionIconSize"
+          :tabindex="disabled ? -1 : 0"
+          @click.stop="toggleExpansion"
+          @keydown.stop="onIconKeydown"
+        >
+        </q-icon>
+      </div>
+    </template>
+    <slot name="body" />
+    <slot name="footer" />
+  </q-expansion-item>
+
+  <!-- For default expansion behaviour -->
+  <q-expansion-item
+    v-bind="$attrs"
+    v-else
+    v-model="isExpanded"
+    class="u-expansion"
+    :dataTestId="dataTestId"
+    :disable="disabled"
+    expand-icon-class="hidden"
+    :style="{
+      'min-height': `${isExpanded ? rowCardHeight + 'rem' : 'auto'}`,
+      overflowX: 'hidden',
+    }"
+    :toggle-aria-label="isExpanded ? collapsedAriaLabel : expandAriaLabel"
+    @keydown.space.prevent
+  >
+    <template v-slot:header>
+      <div class="u-expansion-header">
+        <URadioStd
+          v-if="enableSelection"
+          v-model="isSelected"
+          class="expansion-radio-wrapper"
+          :aria-label="option.ariaLabel"
+          :dataTestId="`expansion-radio-std-${option.id}`"
+          :disable="option.disable || disabled"
+          :id="option.id"
+          :value="option.id"
+          @update:model-value="handleChange"
+        />
+        <q-icon
+          v-if="toggleIconLeft"
+          :class="[
+            'cursor-pointer',
+            'icon-secondary-opacity',
+            'transition-all',
+            expansionIcon,
+            { 'rotate-180': isExpanded },
+          ]"
+          :color="expansionIconColor"
+          :size="expansionIconSize"
+        >
+        </q-icon>
+        <slot name="avatar" />
+        <div class="column u-expansion-label">
+          <span class="text-caption-lg">{{ label }}</span>
+          <span class="text-body-xs text-description">{{ caption }}</span>
+        </div>
+        <q-icon
+          v-if="!toggleIconLeft"
+          :class="[
+            'cursor-pointer',
+            'icon-secondary-opacity',
+            'transition-all',
+            expansionIcon,
+            { 'rotate-180': isExpanded },
+          ]"
+          :color="expansionIconColor"
+          :size="expansionIconSize"
+        >
+        </q-icon>
+      </div>
+    </template>
+    <slot name="body" />
+    <slot name="footer" />
+  </q-expansion-item>
+</template>
+
+<style lang="sass">
+.u-expansion
+  border-radius: $border-radius-sm
+  border: 1px solid $neutral-4
+  overflow: hidden
+  width: 100%
+
+  .q-item
+    padding: $ba !important
+
+  .u-expansion-header
+    width: 100%
+    display: flex
+    align-items: center
+    gap: $xs
+
+  .u-expansion-label
+    flex: 1 1 0
+    min-width: 0
+    word-break: break-word
+    overflow-wrap: break-word
+
+  .q-expansion-item__content > :first-child
+    padding: 0px $ba $ba $ba
+
+  .q-expansion-item__content > :nth-child(2)
+    padding: $ba
+
+  .rotate-180
+    transform: rotate(180deg)
+    transition: 0.3s
+
+.expansion-radio-wrapper
+  .q-radio__label
+    padding-left: 0px !important
+</style>

package/src/components/core/UInnerLoader.vue

@@ -0,0 +1,69 @@
+<script setup>
+defineProps({
+  dataTestId: {
+    type: String,
+    default: 'inner-loader',
+  },
+  image: {
+    type: String,
+    required: true,
+  },
+  imageHeight: {
+    type: String,
+    default: '24'
+  },
+  imageWidth: {
+    type: String,
+    default: '95'
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  loadingMessage: {
+    type: String,
+    required: true,
+  },
+  spinnerColor: {
+    type: String,
+    required: false,
+  },
+  spinnerSize: {
+    type: String,
+    requried: false,
+    default: '2rem',
+  },
+})
+</script>
+<template>
+  <q-inner-loading
+    v-bind="$attrs"
+    color="primary"
+    :dataTestId="dataTestId"
+    :showing="loading"
+  >
+    <div class="column items-center q-gutter-y-sm">
+      <img
+        class="q-my-none"
+        alt="Loader Image"
+        :height="imageHeight"
+        :src="image"
+        :width="imageWidth"
+      />
+      <div class="row items-center">
+        <div v-if="loadingMessage" class="text-center">
+          <span class="message q-mr-sm">{{ loadingMessage }}</span>
+          <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
+        </div>
+      </div>
+    </div>
+  </q-inner-loading>
+</template>
+<style scoped lang="sass">
+.u-loader
+  position: relative
+  height: 100%
+.message
+  color: $dark
+  font-weight: 500
+</style>