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

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>

package/src/components/core/UBtnStd.vue

@@ -0,0 +1,122 @@
+<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"
+  >
+    <div class="row items-center no-wrap">
+      <q-icon
+        v-if="leftIcon"
+        left
+        :class="leftIcon"
+        class="q-mr-xs"
+        size="1.25rem"
+      />
+
+      <div class="text-center text-caption-md button-label">
+        {{ label }}
+      </div>
+      <q-icon
+        v-if="rightIcon"
+        right
+        :class="rightIcon"
+        class="q-ml-xs"
+        size="1.25rem"
+      />
+    </div>
+  </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,88 @@
+<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
+  },
+})
+
+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}`
+  }
+})
+</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
+  />
+</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>

package/src/components/core/UChip.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  chipLabel: {
+    type: String,
+    default: 'Chip',
+  },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  avatarLabel: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+  },
+  iconClass: {
+    type: String,
+  },
+  type: {
+    type: String,
+    default: 'neutral',
+  },
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  remove: {
+    type: Function,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+const size = computed(() => {
+  if (props.dense) {
+    return 'xs'
+  }
+  return 'sm'
+})
+
+const avatarLabel = computed(() => {
+  if (props.avatarLabel && props.avatarLabel.length > 2) {
+    return props.avatarLabel.substring(0, 2)
+  }
+  return props.avatarLabel
+})
+</script>
+
+<template>
+  <q-chip
+    v-if="chipLabel"
+    class="u-chip q-px-xs"
+    v-bind="$attrs"
+    :class="type"
+    :modelValue="modelValue"
+    :dense="dense"
+    @remove="remove"
+    :removable="removable"
+    :aria-label="chipLabel"
+    @click="handleClick"
+  >
+    <q-avatar v-if="avatarLabel" class="u-avatar">
+      <span class="text-caption-xs">{{ avatarLabel }}</span>
+    </q-avatar>
+
+    <q-icon v-if="iconClass" :class="`iconLeft ${iconClass}`" />
+
+    <span :class="`chip-label text-overline-${size} text-uppercase`">
+      {{ chipLabel }}
+    </span>
+  </q-chip>
+</template>
+
+<style lang="sass">
+.u-chip
+  padding: $xs
+  border-radius: 20px
+  height: $lg
+
+  .u-avatar
+    width: $ms
+    height: $ms
+    margin-left:0 !important
+
+
+  .q-icon
+    width: $ba
+    height: $ba
+    font-size:$ba
+
+  .iconLeft
+    padding-right: $xs
+
+  .q-chip__icon--remove
+    padding: $xs 0 $xs $xs
+    margin:0
+
+
+  &.neutral
+    background-color: $neutral-3
+    color: $neutral-9
+    .q-avatar
+      background-color: $neutral-9 !important
+      color: $neutral-3
+
+    .q-icon
+      color: $neutral-9 !important
+
+  &.primary
+    background-color: $blue-2
+    color: $primary
+    .q-avatar
+      background-color: $primary !important
+      color: $blue-2 !important
+
+    .q-icon
+      color: $primary !important
+
+  &.positive
+    background-color: $green-2
+    color: $green-7
+    .q-avatar
+      background-color: $green-7 !important
+      color: $green-2 !important
+
+    .q-icon
+      color: $green-7 !important
+
+  &.accent
+    background-color: $red-2
+    color: $red-7
+    .q-avatar
+      background-color: $red-7 !important
+      color: $red-2 !important
+
+    .q-icon
+      color: $red-7 !important
+
+  &.info
+    background-color: $purple-2
+    color: $purple-7
+    .q-avatar
+      background-color: $purple-7 !important
+      color: $purple-2 !important
+
+    .q-icon
+      color: $purple-7 !important
+
+  &.warning
+    background-color: $orange-2
+    color: $orange-7
+    .q-avatar
+      background-color: $orange-7 !important
+      color: $orange-2 !important
+
+    .q-icon
+      color: $orange-7 !important
+  &.yellow
+    background-color: $yellow-1
+    color: $yellow-9
+    .q-avatar
+      background-color: $yellow-9 !important
+      color: $yellow-1 !important
+
+    .q-icon
+      color: $yellow-9 !important
+
+  &.teal
+    background-color: $teal-1
+    color: $teal-7
+    .q-avatar
+      background-color: $teal-7 !important
+      color: $teal-1 !important
+
+    .q-icon
+      color: $teal-7 !important
+
+  &.gold
+    background-color: $gold-2
+    color: $gold-8
+    .q-avatar
+      background-color: $gold-8 !important
+      color: $gold-2 !important
+
+    .q-icon
+      color: $gold-8 !important
+
+  &.pink
+    background-color: $pink-1
+    color: $pink-7
+    .q-avatar
+      background-color: $pink-7 !important
+      color: $pink-1 !important
+
+    .q-icon
+      color: $pink-7 !important
+
+  &.q-chip--dense
+    padding: $xxs !important
+    height: $ms !important
+    .q-avatar
+      width: $ba !important
+      height: $ba !important
+    .q-avatar__content span
+      font-size:$xs !important
+      line-height:0rem !important
+    .q-icon
+      width: $sm !important
+      height: $sm !important
+      font-size:$sm !important
+      padding: $xxs $xxs $xxs 0rem
+
+    .q-chip__icon--remove
+      padding: $xxs
+</style>