@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.6

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.6",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",
-  "main": "index.js",
+  "main": "src/components/index.js",
   "files": [
-    "dist/spa",
+    "src/components",
     "README.md"
   ],
   "publishConfig": {

package/src/components/ComponentLink.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-item clickable :to="path">
+    <q-item-section class="bg-neutral-4">
+      <q-item-label class="q-pa-sm">{{ title }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ComponentLink',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+
+    path: {
+      type: String,
+      default: '/',
+    },
+  },
+})
+</script>

package/src/components/core/UAvatar.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { computed } from 'vue'
+import UBadgeStd from './UBadgeStd.vue'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  icon: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'xl',
+  },
+  image: {
+    type: String,
+  },
+  indicatorColor: {
+    type: String,
+    default: 'neutral-4',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const labelSize = computed(() => {
+  if (props.size === 'sm') {
+    return 'xs'
+  }
+  if (props.size === 'md') {
+    return 'sm'
+  }
+  if (props.size === 'lg') {
+    return 'md'
+  }
+  if (props.size === 'xl') {
+    return 'lg'
+  }
+
+  return props.size
+})
+</script>
+
+<template>
+  <q-avatar
+    class="u-avatar"
+    :class="`size-${size}`"
+    @click="handleClick"
+    :round="round"
+    :rounded="!round"
+    :icon="icon"
+    v-bind="$attrs"
+  >
+    <img v-if="image" :src="image" :alt="`avatar ${name}`" :aria-label="name" />
+    <span
+      v-if="!image"
+      class="name"
+      :class="`text-${color} text-caption-${labelSize}`"
+    >
+      {{ name }}
+    </span>
+    <UBadgeStd
+      v-if="showIndicator"
+      :color="indicatorColor"
+      :class="`indicator`"
+      size="xs"
+      type="indicator"
+    />
+    <slot name="item" />
+  </q-avatar>
+</template>
+<style lang="sass">
+.u-avatar
+  position: relative
+  background: $blue-1
+
+  &.rounded-borders
+    border-radius: $xxs
+
+  &.size-lg.rounded-borders,&.size-xl.rounded-borders
+    border-radius: $xs
+
+  &.size-sm
+    width: $ba
+    height: $ba
+
+    .indicator
+      width: $xs
+      height: $xs
+
+    .q-avatar__content .name
+      line-height: $xs !important
+
+  &.size-md
+    width: $ms
+    height: $ms
+
+    .indicator
+      width: $xs
+      height: $xs
+
+  &.size-lg
+    width: $md
+    height: $md
+
+    .indicator
+      width: $sm
+      height: $sm
+
+  &.size-xl
+    width: $lg
+    height: $lg
+
+    .indicator
+      width: $ba
+      height: $ba
+
+  .indicator
+    position: absolute
+    bottom: 0
+    right: 0
+    width: $sm
+    height: $sm
+    border: 1.5px solid $neutral-1
+    background: $neutral-4
+</style>

package/src/components/core/UAvatarGroup.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+import UAvatar from './UAvatar.vue'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  icon: {
+    type: String,
+  },
+  size: {
+    type: String,
+  },
+  image: {
+    type: String,
+  },
+  images: {
+    type: Array,
+  },
+  indicatorColor: {
+    type: String,
+    default: 'neutral-4',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  showIndicator: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  avatarLimit: {
+    type: Number,
+    default: 4,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const displayedAvatars = computed(() => {
+  return props.images.slice(0, props.avatarLimit)
+})
+const remainingAvatars = computed(() => {
+  return props.images.slice(props.avatarLimit)
+})
+</script>
+
+<template>
+  <UAvatar
+    v-for="(avatar, index) in displayedAvatars"
+    class="avatarGroup"
+    :name="avatar.name"
+    :size="size"
+    :showIndicator="showIndicator"
+    :indicatorColor="indicatorColor"
+    :round="round"
+    :image="avatar.image"
+    :key="index"
+    @click="handleClick"
+  />
+
+  <q-icon
+    :class="`avatarGroup additonalUsersAvatar size-${size} fa-duotone fa-solid fa-circle-plus`"
+    color="primary"
+    aria-label="See more Avatar"
+    v-if="remainingAvatars.length"
+  >
+    <UTooltip
+      anchor="bottom middle"
+      description=""
+      self="top middle"
+      :offset="[4, 4]"
+    >
+      <template v-slot:item>
+        <div class="text-body-xs tooltip-text">
+          <span v-for="(avatar, index) in remainingAvatars" :key="index">
+            {{ avatar.name }}<br />
+          </span>
+        </div>
+      </template>
+    </UTooltip>
+  </q-icon>
+</template>
+<style lang="sass">
+.additonalUsersAvatar:after
+  background-color: $blue-1
+  border-radius:50%
+
+.additonalUsersAvatar
+  cursor: pointer
+
+  &.size-sm
+    font-size: $ba !important
+
+  &.size-md
+    font-size: $ms !important
+
+  &.size-lg
+    font-size: $md !important
+
+  &.size-xl
+    font-size: $lg !important
+
+.avatarGroup
+  margin: -0.125rem
+.avatarGroup:not(:nth-child(1)) .q-avatar__content
+    border: 1.5px solid $neutral-1
+    background : lightgray 0px -0.033px / 100% 150.273% no-repeat
+</style>

package/src/components/core/UBadgeStd.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['xxs', 'xs', 'sm', 'md', 'lg'].includes(val),
+  },
+  type: {
+    type: String,
+    default: 'basic',
+    validator: (val) => ['basic', 'indicator'].includes(val),
+  },
+})
+
+const currentColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-6'
+  }
+  return props.color
+})
+</script>
+
+<template>
+  <q-badge
+    class="u-badge"
+    :class="[
+      type === 'basic' ? 'type-basic' : 'type-indicator justify-center',
+      `size-${size}`,
+      type === 'basic'
+        ? size === 'md'
+          ? `text-overline-xs`
+          : `text-overline-sm`
+        : '',
+    ]"
+    :color="currentColor"
+    rounded
+    tabindex="0"
+    :aria-label="label"
+  >
+    <div v-if="type === 'basic'">
+      {{ label }}
+    </div>
+    <slot name="default" />
+  </q-badge>
+</template>
+
+<style lang="sass">
+.u-badge
+  min-height:0px
+
+  &.size-xxs
+    width: $xs
+    height: $xs
+    padding: 0px
+
+  &.size-xs
+    width: $sm
+    height: $sm
+    padding: 0px
+
+  &.size-sm
+    width: $ba
+    height: $ba
+    padding: 0px
+
+  &.size-md
+    letter-spacing: 0.24px
+    line-height: 1.013rem
+
+  &.size-lg
+    width: $md
+    height: $ms
+    justify-content: center
+    line-height: 0
+
+  &.type-basic
+    border: 1.5px solid $neutral-1
+
+  &.type-indicator
+    border: 1px solid $neutral-1
+</style>

package/src/components/core/UBannerStd.vue

@@ -0,0 +1,113 @@
+<script setup>
+import UBtnStd from 'src/components/core/UBtnStd.vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+  },
+  icon: {
+    type: String,
+    default: 'fa-kit-duotone fa-circle-info',
+  },
+  message: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  primaryActionLabel: {
+    type: String,
+    default: 'Action 1',
+  },
+  secondaryActionLabel: {
+    type: String,
+    default: 'Action 2',
+  },
+})
+
+const emit = defineEmits(['primaryAction', 'secondaryAction'])
+
+const handlePrimaryActionClick = () => {
+  emit('primaryAction')
+}
+
+const handleSecondaryActionClick = () => {
+  emit('secondaryAction')
+}
+</script>
+
+<template>
+  <q-banner
+    v-if="show && message"
+    inline-actions
+    :class="`u-banner u-banner-${type}`"
+    tabindex="0"
+  >
+    <template v-slot:avatar>
+      <q-icon
+        aria-label="Banner Icon"
+        :class="icon"
+        size="1.5rem"
+        :color="type"
+        alt="Banner Info Icon"
+      />
+    </template>
+    <span class="text-caption-lg">{{ message }}</span>
+    <template v-slot:action>
+      <u-btn-std
+        v-if="primaryActionLabel"
+        :flat="false"
+        :label="primaryActionLabel"
+        @onClick="handlePrimaryActionClick"
+        :color="type"
+        size="md"
+      />
+      <u-btn-std
+        class="q-ml-sm"
+        :outline="true"
+        v-if="secondaryActionLabel"
+        :label="secondaryActionLabel"
+        @onClick="handleSecondaryActionClick"
+        :color="type"
+        size="md"
+      />
+    </template>
+  </q-banner>
+</template>
+
+<style lang="sass">
+.u-banner
+  min-width: 24.563rem
+  padding: $sm
+  .q-banner__avatar
+    align-self: center
+
+  .q-banner__content
+    padding-left: $xs !important
+
+.u-banner-positive
+  background: $green-1 !important
+  color: $green-6 !important
+
+.u-banner-info
+  background: $purple-1 !important
+  color: $info !important
+
+.u-banner-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+
+.u-banner-accent
+  background: $red-1 !important
+  color: $red-7 !important
+
+.u-banner-primary
+  background: $blue-1 !important
+  color: $primary !important
+</style>

package/src/components/core/UBtnIcon.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { computed } from 'vue'
+import UTooltip from './UTooltip.vue'
+const props = defineProps({
+  iconClass: {
+    type: String,
+    required: true,
+    default: 'fa-kit-duotone fa-circle-bolt',
+  },
+  ariaLabel: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  round: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  tooltip: {
+    type: String,
+    default: '',
+  },
+  tooltipPosition: {
+    type: String,
+    default: 'top',
+  },
+  anchor: {
+    type: String,
+    default: 'center left',
+  },
+  self: {
+    type: String,
+    default: 'center end',
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const iconSize = computed(() => {
+  if (props.size === 'sm') {
+    return 'xs'
+  }
+  if (props.size === 'md') {
+    return 'sm'
+  }
+  if (props.size === 'lg') {
+    return 'md'
+  }
+
+  return props.size
+})
+const iconColor = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-9'
+  }
+  return props.color
+})
+
+const btnClass = computed(() => {
+  if (props.color === 'neutral') {
+    return 'neutral-4'
+  }
+  return props.color
+})
+</script>
+
+<template>
+  <q-btn
+    @click="handleClick"
+    flat="flat"
+    :round="round"
+    :aria-label="ariaLabel"
+    class="u-btn-icon"
+    :class="`size-${size} ${btnClass}`"
+  >
+    <q-icon
+      :color="iconColor"
+      :aria-hidden="true"
+      :class="`${iconClass} size-${size}`"
+      :size="iconSize"
+    />
+
+    <UTooltip
+      v-if="tooltip"
+      :description="tooltip"
+      :anchor="anchor"
+      :self="self"
+      :offset="[4, 4]"
+    />
+  </q-btn>
+</template>
+
+<style lang="sass">
+.u-btn-icon
+  &.neutral-4
+    color: $neutral-4
+
+  &.transparent
+    color: $neutral-1
+
+  &.size-sm
+    height: $md
+    width: $md
+
+  &.size-md
+    height: $lg
+    width: $lg
+
+  &.size-lg
+    height: $xl
+    width: $xl
+
+  .q-icon
+    &.text-transparent
+      color: $neutral-1 !important
+
+    &.size-sm
+      height: $ba
+      width: $ba
+
+    &.size-md
+      height: $ms
+      width: $ms
+
+    &.size-lg
+      height: $md
+      width: $md
+    &.neutral-9
+      color: $neutral-9
+
+.icon-tooltip
+  background: $dark
+  border-radius: $xxs
+  padding: $xs $sm
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+</style>