@usssa/component-library 1.0.0-alpha.1 → 1.0.0-alpha.100

package/src/components/core/UBannerStd.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed } from 'vue'
+import UBtnStd from './UBtnStd.vue'
+
+const emit = defineEmits(['primaryAction', 'secondaryAction'])
+
+const props = defineProps({
+  icon: {
+    type: String,
+    default: 'fa-kit-duotone fa-circle-info',
+  },
+  message: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  primaryActionLabel: {
+    type: String,
+  },
+  secondaryActionLabel: {
+    type: String,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  showBorder: {
+    type: Boolean,
+    default: true
+  },
+  type: {
+    type: String,
+    default: 'info',
+  },
+})
+
+const bordered = computed(() => {
+  if (props.showBorder) {
+    return 'bordered'
+  }
+  return ''
+})
+
+const handlePrimaryActionClick = () => {
+  emit('primaryAction')
+}
+
+const handleSecondaryActionClick = () => {
+  emit('secondaryAction')
+}
+</script>
+
+<template>
+  <q-banner
+    v-if="show && message"
+    :class="`u-banner u-banner-${type} ${
+      !icon ? 'no-padding-label' : ''
+    } ${bordered}`"
+    inline-actions
+    tabindex="0"
+  >
+    <template v-slot:avatar>
+      <q-icon
+        v-if="icon"
+        :class="icon"
+        alt="Banner Info Icon"
+        aria-label="Banner Icon"
+        :color="type"
+        size="1.5rem"
+      />
+    </template>
+    <span class="text-caption-lg">{{ message }}</span>
+    <template v-slot:action>
+      <u-btn-std
+        v-if="primaryActionLabel"
+        :color="type"
+        :flat="false"
+        :label="primaryActionLabel"
+        size="md"
+        @onClick="handlePrimaryActionClick"
+      />
+      <u-btn-std
+        v-if="secondaryActionLabel"
+        class="q-ml-sm"
+        :color="type"
+        :label="secondaryActionLabel"
+        :outline="true"
+        size="md"
+        @onClick="handleSecondaryActionClick"
+      />
+    </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-7 !important
+  &.bordered
+    border: 1.5px solid $green-7
+
+.u-banner-info
+  background: $purple-1 !important
+  color: $info !important
+  &.bordered
+    border: 1.5px solid $purple-7
+
+.u-banner-warning
+  background: $orange-1 !important
+  color: $orange-7 !important
+  &.bordered
+    border: 1.5px solid $orange-7
+
+.u-banner-accent
+  background: $red-1 !important
+  color: $red-7 !important
+  &.bordered
+    border: 1.5px solid $red-7
+
+.u-banner-primary
+  background: $blue-1 !important
+  color: $primary !important
+  &.bordered
+    border: 1.5px solid $primary
+
+.no-padding-label
+  .q-banner__content
+    padding-left: 0px !important
+
+.bordered
+  border-radius: $xs
+</style>

package/src/components/core/UBreadCrumbs.vue

@@ -0,0 +1,67 @@
+<script setup>
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'left',
+  },
+  links: {
+    type: Array,
+    default: () => [],
+  },
+  clickable: {
+    type: Boolean,
+    default: true,
+  },
+  showActiveRoute: {
+    type: Boolean,
+    default: true,
+  },
+  activeColor: {
+    type: String,
+    default: 'primary',
+  },
+})
+</script>
+<template>
+  <q-breadcrumbs
+    gutter="none"
+    v-bind="$attrs"
+    class="u-breadcrumb"
+    :align="align"
+    :active-color="activeColor"
+  >
+    <q-breadcrumbs-el
+      v-for="(link, index) of links"
+      :key="index"
+      :label="link.label"
+      :to="link.to"
+      :class="`breadcrumb-label text-caption-lg ${
+        index === 0
+          ? 'q-mr-xs'
+          : index === links.length - 1
+          ? 'q-ml-xs'
+          : 'q-mx-xs'
+      } ${!showActiveRoute ? 'hide-active-route' : null} ${
+        !clickable ? 'non-clickable-route' : null
+      }`"
+    />
+  </q-breadcrumbs>
+</template>
+<style lang="sass">
+.u-breadcrumb
+  .q-breadcrumbs__separator
+    font-size: 1rem
+    font-weight: 500
+    line-height: 1.25rem
+    letter-spacing: 0.03333rem
+
+  .q-router-link--active
+    cursor: default
+
+  .hide-active-route
+    color: $dark !important
+
+  .non-clickable-route
+    cursor: default !important
+    pointer-events: none
+</style>

package/src/components/core/UBtnIcon.vue

@@ -0,0 +1,158 @@
+<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',
+  },
+  offset: {
+    type: Array,
+    default: () => [4, 4],
+  },
+})
+
+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}`"
+  >
+    <template #default>
+      <q-icon
+        :color="iconColor"
+        :aria-hidden="true"
+        :class="`${iconClass} size-${size}`"
+        :size="iconSize"
+      />
+
+      <UTooltip
+        v-if="tooltip"
+        :description="tooltip"
+        :anchor="anchor"
+        :self="self"
+        :offset="offset"
+      />
+      <slot name="menu" />
+    </template>
+  </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
+
+  &.accent:hover
+    background: $accent-bg-hover
+
+.icon-tooltip
+  background: $dark
+  border-radius: $xxs
+  padding: $xs $sm
+  box-shadow: 0px 0px 4px 0px rgba(16, 17, 20, 0.08)
+</style>

package/src/components/core/UBtnStd.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'neutral-7',
+  },
+  disable: {
+    type: Boolean,
+    default: false,
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: 'Button',
+  },
+  leftIcon: {
+    type: String,
+  },
+  rightIcon: {
+    type: String,
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+
+const textClass = computed(() => {
+  if (props.color === 'neutral') {
+    return 'text-neutral-9'
+  }
+  return ''
+})
+
+const isFullWidth = computed(() => {
+  if (props.fullWidth === true) {
+    return 'full-width'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <q-btn
+    class="u-btn q-py-none"
+    :class="`size-${size} ${textClass} focus-${color} ${isFullWidth}`"
+    :color="color"
+    :disable="disable"
+    :unelevated="!outline"
+    :outline="outline"
+    no-caps
+    :flat="flat"
+    @click="handleClick"
+  >
+    <template #default>
+      <slot name="default">
+        <div class="row items-center no-wrap">
+          <q-icon
+            v-if="leftIcon"
+            left
+            :class="leftIcon"
+            class="q-mr-xs"
+            size="1rem"
+          />
+
+          <div class="text-center text-caption-md button-label">
+            {{ label }}
+          </div>
+          <q-icon
+            v-if="rightIcon"
+            right
+            :class="rightIcon"
+            class="q-ml-xs"
+            size="1rem"
+          />
+        </div>
+      </slot>
+
+      <slot name="tooltip" />
+      <slot name="menu" />
+    </template>
+  </q-btn>
+</template>
+
+<style lang="sass">
+.u-btn
+  border-radius: $xs
+  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
+</style>

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

@@ -0,0 +1,95 @@
+<script setup>
+import { onMounted } from 'vue'
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  id: {
+    type: [String, Number],
+    default: 'u-checkbox',
+    required: true, // it is required for to match accessibility crieteria
+  },
+  indeterminate: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const isChecked = defineModel({ default: false, type: Boolean })
+
+onMounted(() => {
+  const checkboxElement = document.getElementById(`${props.id}`)
+  if (checkboxElement) {
+    const inputElement = checkboxElement.querySelector('input')
+    inputElement.id = `${props.id}`
+  } else {
+    // need to add if element is not found
+  }
+})
+</script>
+
+<template>
+  <label style="display: none" :for="`${id}`">Checkbox </label>
+  <q-checkbox
+    :id="`${id}`"
+    class="u-checkbox text-caption-lg"
+    :name="name"
+    v-model="isChecked"
+    :disable="disabled"
+    :label="showLabel ? label : ''"
+    size="md"
+    keep-color
+    color="primary"
+    :toggle-indeterminate="indeterminate"
+    v-bind="$attrs"
+  />
+</template>
+
+<style lang="sass">
+.u-checkbox
+  color: $primary
+  font-weight: 500
+
+  .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
+    border: 0.125rem solid $primary
+    border-radius: $xxs
+    height: $ms
+    width: $ms
+    position: static
+    display: flex
+    justify-content: center
+    align-items: center
+
+  .q-checkbox__svg
+    position: static
+    height: 1rem !important
+    width: 1rem !important
+</style>