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

package/README.md

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

package/src/components/core/UChip.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
 
 const props = defineProps({
   chipLabel: {
@@ -35,6 +36,18 @@ const props = defineProps({
   remove: {
     type: Function,
   },
+  isShowTooltip: {
+    type: Boolean,
+    default: false,
+  },
+  offset: {
+    default: () => [14, 14],
+    type: Array,
+  },
+  anchor: {
+    type: String,
+    default: 'bottom middle',
+  },
 })
 
 const emit = defineEmits(['update:modelValue', 'onClick'])
@@ -79,6 +92,12 @@ const avatarLabel = computed(() => {
     <span :class="`chip-label text-overline-${size} text-uppercase`">
       {{ chipLabel }}
     </span>
+    <UTooltip
+      v-if="isShowTooltip"
+      :description="chipLabel"
+      :offset="offset"
+      :anchor="anchor"
+    />
   </q-chip>
 </template>
 
@@ -223,4 +242,10 @@ const avatarLabel = computed(() => {
 
     .q-chip__icon--remove
       padding: $xxs
+
+.chip-label
+  max-width: 12.5rem
+  white-space: normal
+  overflow-wrap: break-word
+  line-height: 1.2 !important // over-ridding this in long chip label case
 </style>

package/src/components/core/UInputTextStd.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue'
 import UTooltip from './UTooltip.vue'
+
 const props = defineProps({
   hintText: {
     type: String,
@@ -64,6 +65,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  parentClass: {
+    type: String,
+  },
+})
+
+defineOptions({
+  inheritAttrs: false,
 })
 
 const leftBorderRadius = computed(() => {
@@ -82,101 +90,99 @@ const handleRightIconClick = () => {
 </script>
 
 <template>
-  <div class="q-gutter-xs q-pb-ms">
-    <div>
-      <label
-        v-if="label"
-        role="label"
-        for="input"
-        class="row items-center q-mb-xxs"
+  <div class="q-gutter-xs" :class="parentClass">
+    <label
+      v-if="label"
+      role="label"
+      for="input"
+      class="row items-center q-mb-xxs"
+    >
+      <div class="u-input-label text-body-sm">
+        {{ label }}
+        <span class="text-red-5 text-body-sm q-mx-xxs" v-if="isRequired">
+          *
+        </span>
+      </div>
+      <q-icon
+        class="q-ml-xxs fa-kit-duotone fa-circle-info cursor-pointer"
+        v-if="toolTipText"
+        size="1rem"
+        color="neutral-9"
+        :aria-label="toolTipText"
       >
-        <div class="u-input-label text-body-sm">
-          {{ label }}
-          <span class="text-red-5 text-body-sm q-mx-xxs" v-if="isRequired">
-            *
-          </span>
-        </div>
+        <UTooltip
+          :description="toolTipText"
+          anchor="top middle"
+          self="bottom middle"
+          :offset="[0, 0]"
+        />
+      </q-icon>
+    </label>
+    <q-input
+      id="input"
+      class="u-input"
+      :class="`field-${size} ${leftBorderRadius}`"
+      v-model="modelValue"
+      name="input"
+      :outlined="outlined"
+      :placeholder="placeholder"
+      :rules="validationRules"
+      :standout="!outlined"
+      type="text"
+      :bottom-slots="!!hintText"
+      hide-bottom-space
+      :readonly="readonly"
+      :disable="disable"
+      :borderless="borderless"
+      :error="error"
+      v-bind="$attrs"
+    >
+      <template #prepend v-if="leftIcon">
+        <slot name="prepend"></slot>
         <q-icon
-          class="q-ml-xxs fa-kit-duotone fa-circle-info cursor-pointer"
-          v-if="toolTipText"
-          size="1rem"
-          color="neutral-9"
-          :aria-label="toolTipText"
-        >
-          <UTooltip
-            :description="toolTipText"
-            anchor="top middle"
-            self="bottom middle"
-            :offset="[0, 0]"
+          v-if="!$slots.prepend"
+          :class="`slot-icon-size-${size} ${leftIcon}`"
+        />
+      </template>
+      <template #hint v-if="hintText">
+        <div class="row items-center text-neutral-9 no-wrap">
+          <q-icon
+            :class="hintIcon"
+            v-if="hintIcon"
+            size="1rem"
+            :aria-label="hintText"
           />
-        </q-icon>
-      </label>
-      <q-input
-        id="input"
-        class="u-input"
-        :class="`field-${size} ${leftBorderRadius}`"
-        v-model="modelValue"
-        name="input"
-        :outlined="outlined"
-        :placeholder="placeholder"
-        :rules="validationRules"
-        :standout="!outlined"
-        type="text"
-        :bottom-slots="!!hintText"
-        hide-bottom-space
-        :readonly="readonly"
-        :disable="disable"
-        :borderless="borderless"
-        :error="error"
-        v-bind="$attrs"
-      >
-        <template #prepend v-if="leftIcon">
-          <slot name="prepend"></slot>
+          <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
+        </div>
+      </template>
+      <template #append>
+        <slot name="append">
           <q-icon
-            v-if="!$slots.prepend"
-            :class="`slot-icon-size-${size} ${leftIcon}`"
+            v-if="rightIcon"
+            @click="handleRightIconClick"
+            :class="`slot-icon-size-${size} ${rightIcon}`"
+            :tabindex="0"
+            :aria-label="
+              rightIcon && rightIconAriaLabel
+                ? rightIconAriaLabel
+                : 'right input icon '
+            "
           />
-        </template>
-        <template #hint v-if="hintText">
-          <div class="row items-center text-neutral-9 no-wrap">
-            <q-icon
-              :class="hintIcon"
-              v-if="hintIcon"
-              size="1rem"
-              :aria-label="hintText"
-            />
-            <div class="q-ml-xxs text-body-xs">{{ hintText }}</div>
-          </div>
-        </template>
-        <template #append>
-          <slot name="append">
-            <q-icon
-              v-if="rightIcon"
-              @click="handleRightIconClick"
-              :class="`slot-icon-size-${size} ${rightIcon}`"
-              :tabindex="0"
-              :aria-label="
-                rightIcon && rightIconAriaLabel
-                  ? rightIconAriaLabel
-                  : 'right input icon '
-              "
-            />
-          </slot>
-        </template>
-        <template v-slot:error>
-          <div class="row items-center no-wrap" v-if="errorMessage">
-            <q-icon
-              class="fa-kit-duotone fa-warning-octagon"
-              size="1rem"
-              :aria-label="errorMessage"
-            />
-            <div class="q-ml-xxs text-body-xs" role="validation error">
-              {{ errorMessage }}
-            </div>
+        </slot>
+      </template>
+      <template v-slot:error>
+        <div class="row items-center no-wrap" v-if="errorMessage">
+          <q-icon
+            class="fa-kit-duotone fa-warning-octagon"
+            size="1rem"
+            :aria-label="errorMessage"
+          />
+          <div class="q-ml-xxs text-body-xs" role="validation error">
+            {{ errorMessage }}
           </div>
-        </template>
-      </q-input>
-    </div>
+        </div>
+      </template>
+    </q-input>
   </div>
 </template>
 

package/src/components/core/UTableStd.vue

@@ -158,11 +158,11 @@ const isRowSelected = (row) => {
         if (value !== null) {
           selectedRows.value.splice(0, selectedRows.value.length)
         } else {
-            handleSelectAllData().then((res) => {
-              if (res === 200) {
-                customLoading.value = false
-              }
-            })
+          handleSelectAllData().then((res) => {
+            if (res === 200) {
+              customLoading.value = false
+            }
+          })
         }
       },
     })
@@ -311,7 +311,12 @@ const onRowPerPageChange = (value) => {
           :separator="separator"
           :style="col.headerStyle"
         >
-          {{ col.label }}
+          <span
+            :class="`${col.field === 'action' ? 'hidden-header-label' : ''}`"
+          >
+            {{ col.field === 'action' ? 'Action' : col.label }}
+          </span>
+
           <span v-if="col.sortable && col.field !== 'action'">
             <q-btn label="Sorting Button" :ripple="false" class="u-sorting-btn">
               <q-icon
@@ -369,6 +374,9 @@ const onRowPerPageChange = (value) => {
                 :chipLabel="props.row[col.field].toString()"
                 :removable="false"
                 class="u-table-chip"
+                :is-show-tooltip="col.showChipTooltip"
+                :offset="col.offset"
+                :anchor="col.anchor"
               />
             </template>
             <!-- to show the avatar of user image with name and other details -->
@@ -622,4 +630,7 @@ const onRowPerPageChange = (value) => {
 .td-grid-content
   text-wrap: balance
   word-break: break-all
+
+.hidden-header-label
+  visibility: hidden
 </style>

package/src/pages/Chip.vue

@@ -22,19 +22,24 @@ const typeOptions = [
 
 const dense = ref(false)
 const removable = ref(false)
+const isShowTooltip = ref(false)
 const modelVal = ref(true)
 
-const htmlContent = ` <UChip
-          ref="chip"
-          v-model="modelVal"
-          @update:modelValue="modelVal = $event"
-          :type="type"
-          :dense="dense"
-          :iconClass="iconClass"
-          :avatarLabel="avatarLabel"
-          :chipLabel="chipLabel"
-          :removable="removable"
-        />`
+const htmlContent = `
+<UChip
+  ref="chip"
+  v-model="modelVal"
+  @update:modelValue="modelVal = $event"
+  :type="type"
+  :dense="dense"
+  :iconClass="iconClass"
+  :avatarLabel="avatarLabel"
+  :chipLabel="chipLabel"
+  :removable="removable"
+  :isShowTooltip="isShowTooltip"
+  :offset="[14, 14]"
+  anchor="bottom middle"
+/>`
 
 defineOptions({
   name: 'UChip',
@@ -57,6 +62,9 @@ defineOptions({
           :avatarLabel="avatarLabel"
           :chipLabel="chipLabel"
           :removable="removable"
+          :isShowTooltip="isShowTooltip"
+          :offset="[14, 14]"
+          anchor="bottom middle"
         />
       </template>
 
@@ -67,6 +75,14 @@ defineOptions({
           <!-- <q-input label="Icon" v-model="icon"></q-input> -->
           <q-input label="Icon Class" v-model="iconClass"></q-input>
           <q-select v-model="type" :options="typeOptions" label="Chip Type" />
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>
+            <q-checkbox
+              size="xs"
+              v-model="isShowTooltip"
+              label="Show Tooltip"
+            />
+          </div>
 
           <div class="column">
             <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>

package/src/pages/InputText.vue

@@ -80,6 +80,7 @@ defineOptions({
           :borderless="borderless"
           :outlined="outline"
           :leftBorderRadius="leftBorderRadius"
+          parentClass="q-mb-ms"
         />
       </template>
 

package/src/pages/TablePage.vue

@@ -45,6 +45,7 @@ const htmlContent = `<UTableStd
   classes: 'my-classs', // custom class on td
   headerStyle: 'width:50%', // custom header style
   headerClasses: 'my-header-class', // custom header classes
+  showChipTooltip:true/false // to hide show tooltip on chip
 }
 `
 
@@ -116,6 +117,9 @@ const columns = ref([
       { value: 'Default', color: 'primary' },
     ],
     align: 'center',
+    showChipTooltip: true, // to show and hide tooltip on chip only
+    offset: [14, 14], // tooltip offset to set position
+    anchor: 'bottom middle', // tooltip anchor
     autoWidth: true,
   },
   {