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

package/src/components/core/UDate.vue

@@ -0,0 +1,581 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useScreenType } from '../../composables/useScreenType'
+import UBtnStd from './UBtnStd.vue'
+import UInputTextStd from './UInputTextStd.vue'
+import USheet from './USheet.vue'
+
+const date = defineModel('date', { default: null })
+
+const props = defineProps({
+  anchor: { type: String, default: 'bottom start' },
+  applyLabel: {
+    type: String,
+    default: 'Apply',
+  },
+  borderless: {
+    type: Boolean,
+    default: false,
+  },
+  closeLabel: {
+    type: String,
+    default: 'Close',
+  },
+  dataTestId: {
+    type: String,
+    default: 'date',
+  },
+  datePickerClass: { type: String, default: null },
+  datePickerOptions: { type: [Array, Function] },
+  disable: { type: Boolean, default: false },
+  hintIcon: { type: String, default: null },
+  hintText: { type: String, default: null },
+  inputClass: { type: String, default: null },
+  isRequired: { type: Boolean, default: false },
+  label: {
+    type: String,
+  },
+  mask: { default: 'MM/DD/YYYY', type: String },
+  navigationMaxYearMonth: {
+    type: String,
+    default: `${new Date().toISOString().slice(0, 7).replace('-', '/')}`,
+  },
+  navigationMinYearMonth: {
+    type: String,
+    default: '',
+  },
+  offset: { type: Array, default: () => [310, 15] },
+  placeholder: {
+    type: String,
+    default: null,
+  },
+  range: { type: Boolean, default: false },
+  self: { type: String, default: 'top left' },
+  sheetHeading: {
+    type: String,
+    default: 'Select Date',
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  toolTipText: {
+    type: String,
+  },
+  validationRules: { type: Array, default: () => [] },
+})
+
+const $screen = useScreenType()
+
+//refs
+const datePickerRef = ref(null)
+const dialogDate = ref('')
+const dialogs = ref([])
+const dialogSelectedDate = ref('')
+const selectedDate = ref('')
+
+//custom functions
+const closeDialog = () => {
+  setTimeout(() => {
+    if (dialogs.value[0]) {
+      dialogs.value[0].open = false
+    }
+  }, 100)
+  setTimeout(() => {
+    dialogs.value.splice(0, 1)
+  }, 500)
+}
+
+const handleApply = () => {
+  date.value = dialogDate.value
+  selectedDate.value = dialogSelectedDate.value
+  closeDialog()
+}
+
+const handleClose = () => {
+  dialogSelectedDate.value = selectedDate.value
+  dialogDate.value = date.value
+
+  closeDialog()
+}
+
+const onUpdateSheet = (value) => {
+  if (value.search('-') > -1) {
+    dialogDate.value = { from: value.split('-')[0], to: value.split('-')[1] }
+  } else {
+    dialogDate.value = value
+  }
+}
+
+const onUpdateValue = (value) => {
+  if (value.search('-') > -1) {
+    date.value = { from: value.split('-')[0], to: value.split('-')[1] }
+  } else {
+    date.value = value
+  }
+}
+
+const openDatePicker = () => {
+  if ($screen.value.isMobile) {
+    openDialogs()
+  } else if (datePickerRef.value && !props.disable) {
+    datePickerRef.value.show()
+  }
+}
+
+const openDialogs = () => {
+  dialogSelectedDate.value = selectedDate.value
+  dialogDate.value = date.value
+
+  let copiedDialogsArray = JSON.parse(JSON.stringify(dialogs.value))
+  copiedDialogsArray.push({
+    open: true,
+    height: 390,
+    persistent: true,
+    transitionDuration: 500, // ms
+    position: 'bottom',
+  })
+  dialogs.value = copiedDialogsArray
+}
+
+// watchers
+watch(
+  date,
+  (newData) => {
+    if (!newData) {
+      selectedDate.value = ''
+      return
+    }
+    if (typeof newData === 'string') {
+      selectedDate.value = newData
+    } else {
+      if (newData.from && newData.to) {
+        selectedDate.value = `${newData.from}-${newData.to}`
+      }
+    }
+  },
+  { immediate: true }
+)
+watch(
+  dialogDate,
+  (newData) => {
+    if (!newData) return
+    if (typeof newData === 'string') {
+      dialogSelectedDate.value = newData
+    } else {
+      if (newData.from && newData.to) {
+        dialogSelectedDate.value = `${newData.from}-${newData.to}`
+      }
+    }
+  },
+  { immediate: true }
+)
+</script>
+<template>
+  <UInputTextStd
+    v-model="selectedDate"
+    :class="inputClass ? inputClass : ''"
+    :borderless="borderless"
+    :dataTestId="dataTestId"
+    :disable="disable"
+    :hint-icon="hintIcon"
+    :hint-text="hintText"
+    :is-required="isRequired"
+    :label="label"
+    :mask="`${range ? '##/##/####-##/##/####' : '##/##/####'}`"
+    :placeholder="placeholder"
+    :size="size"
+    tabindex="-1"
+    :toolTipText="toolTipText"
+    :validation-rules="validationRules"
+    @update:modelValue="onUpdateValue"
+  >
+    <template #append>
+      <UBtnStd
+        class="date-picker-btn-icon"
+        aria-label="open date picker"
+        :flat="true"
+        :size="size"
+        :tabindex="disable ? -1 : 0"
+        @on-click="openDatePicker"
+      >
+        <q-icon
+          class="cursor-pointer date-picker-icon fa-kit-duotone fa-calendar-event"
+          alt="open date picker"
+          size="1rem"
+          tabindex="-1"
+        >
+          <q-popup-proxy
+            v-if="!$screen.isMobile"
+            :anchor="anchor"
+            aria-label="date-picker"
+            fit
+            :offset="offset"
+            ref="datePickerRef"
+            :self="self"
+            transition-hide="scale"
+            transition-show="scale"
+          >
+            <q-date
+              v-model="date"
+              :class="`u-date ${
+                datePickerClass ? datePickerClass : ''
+              } q-py-xxs q-px-xxs`"
+              color="primary"
+              :mask="mask"
+              minimal
+              :navigation-max-year-month="navigationMaxYearMonth"
+              :navigation-min-year-month="navigationMinYearMonth"
+              :options="datePickerOptions"
+              :range="range"
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </UBtnStd>
+    </template>
+  </UInputTextStd>
+  <USheet
+    v-model:dialogs="dialogs"
+    dialog-class="date-sheet"
+    closeIconLabel="Close Icon"
+    :heading="sheetHeading"
+    :show-action-buttons="true"
+  >
+    <template #content>
+      <UInputTextStd
+        v-model="dialogSelectedDate"
+        :dataTestId="dataTestId"
+        :hint-icon="hintIcon"
+        :mask="`${range ? '##/##/####-##/##/####' : '##/##/####'}`"
+        tabindex="-1"
+        @update:modelValue="onUpdateSheet"
+      >
+        <template #append>
+          <UBtnStd
+            class="date-picker-btn-icon"
+            aria-label="open date picker"
+            :flat="true"
+            :size="size"
+            :tabindex="disable ? -1 : 0"
+          >
+            <q-icon
+              class="cursor-pointer date-picker-icon fa-kit-duotone fa-calendar-event"
+              alt="open date picker"
+              size="1rem"
+              tabindex="-1"
+            >
+            </q-icon>
+          </UBtnStd>
+        </template>
+      </UInputTextStd>
+      <div>
+        <q-date
+          v-model="dialogDate"
+          :class="`u-date ${
+            datePickerClass ? datePickerClass : 'dialog-date'
+          } q-py-xxs q-px-xxs`"
+          color="primary"
+          flat
+          :mask="mask"
+          minimal
+          :navigation-max-year-month="navigationMaxYearMonth"
+          :navigation-min-year-month="navigationMinYearMonth"
+          :options="datePickerOptions"
+          :range="range"
+        />
+      </div>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        color="primary"
+        :label="closeLabel"
+        outline
+        size="md"
+        @on-click="handleClose"
+      />
+    </template>
+    <template #action_primary_two>
+      <UBtnStd
+        color="primary"
+        :label="applyLabel"
+        size="md"
+        @on-click="handleApply"
+      />
+    </template>
+  </USheet>
+</template>
+<style lang="sass">
+.q-menu:has(.u-date)
+  width: 21rem
+  border-radius: $border-radius-sm !important
+  background: $neutral-1 !important
+  box-shadow: $shadow-1 !important
+
+.u-date
+  width: 100%
+  height: 100%
+
+  .q-btn .q-icon
+    font-size: $ba !important
+    color: $dark !important
+
+  .q-date__calendar-item
+    padding: 0 !important
+
+  .q-date__navigation
+    .q-date__arrow
+      &:nth-of-type(3)
+        margin-right: $xs
+      .q-btn:hover
+        background: #dce1e926 !important
+    margin-bottom: $xs
+    .relative-position div .q-btn
+      padding: $xs
+      &:hover
+        background: #dce1e926 !important
+
+    .q-btn .block
+      font-size: 0.875rem
+      font-weight: 500
+      line-height: 1.25rem
+      letter-spacing: 0.03333rem
+
+  .q-date__view.q-date__months
+    height: 15rem !important
+
+  .q-date__years
+    .col-auto
+      &:nth-of-type(1)
+        margin-right: $xxs
+      &:nth-of-type(3)
+        margin-left: $xxs
+    .col-auto .q-btn
+      width: $ms
+      height: $ms
+      padding: $xxs
+      &:hover
+        background: #dce1e926 !important
+
+  .q-btn
+    .q-focus-helper::before, .q-focus-helper::after
+      opacity: 0 !important
+
+  .q-date__months-item
+    .q-date__today
+      box-shadow: none
+
+    .q-btn:hover
+      background: #dce1e926 !important
+
+    .q-btn.bg-primary:hover
+      background: $primary !important
+
+    .q-date__today::after
+      content: ""
+      position: absolute
+      bottom: 0.125rem
+      left: 50%
+      transform: translateX(-50%)
+      width: $xxs
+      height: $xxs
+      background: $primary
+      border-radius: 50%
+
+  .q-date__years-content
+    padding: 0 !important
+    .q-date__years-item
+      padding-right: $xxs
+      .q-btn
+        border-radius: $xxl !important
+        width: $xxl
+        height: $lg
+        font-size: 0.875rem
+        font-weight: 400
+        line-height: $ms
+        letter-spacing: 0.01786rem
+        padding: 0 !important
+        &:hover
+          background: #dce1e926 !important
+      .q-btn.bg-primary:hover
+        background: $primary !important
+
+      .q-date__today
+        box-shadow: none
+
+      .q-date__today::after
+        content: ""
+        position: absolute
+        bottom: 0.125rem
+        left: 50%
+        transform: translateX(-50%)
+        width: $xxs
+        height: $xxs
+        background: $primary
+        border-radius: 50%
+
+  .q-date__calendar-days
+    .q-date__range-from::before, .q-date__range-to::before
+      background: $bg-blue-1
+      opacity: 1
+      border-width: 1px 0px
+      border-color: $primary !important
+      border-style: solid !important
+      top: 0px !important
+      bottom: 0px !important
+
+    .q-date__range::before
+      background: $bg-blue-1
+      opacity: 1
+      border-width: 1px 0px
+      border-color: $primary !important
+      border-style: solid !important
+      top: 0px !important
+      bottom: 0px !important
+
+    .q-date__edit-range-from-to::after
+      right: 0.625rem !important
+      left: 0.625rem !important
+      top: 0px !important
+      bottom: 0px !important
+
+    .q-date__edit-range-to::after
+      right: 0.625rem !important
+      height: $md
+      top: 0px !important
+
+    .q-date__edit-range-from::after
+      left: 0.625rem !important
+      height: $md
+      top: 0px !important
+
+    .q-date__edit-range::after
+      height: $md
+      top: 0px !important
+
+    .q-date__range
+      .q-btn
+        color: $primary !important
+
+    .q-date__calendar-item
+      margin-bottom: $xxs
+      .q-date__today
+        box-shadow: none !important
+        position: relative
+        display: inline-block
+
+      .q-date__today::after
+        content: ""
+        position: absolute
+        bottom: 0.125rem
+        left: 50%
+        transform: translateX(-50%)
+        width: $xxs
+        height: $xxs
+        background: $primary
+        border-radius: 50%
+
+      .q-btn
+        border-radius: $xxl !important
+        width: $md
+        height: $md
+        font-size: 0.875rem
+        font-weight: 400
+        line-height: $ms
+        letter-spacing: 0.01786rem
+        color: $dark
+        padding: 0 !important
+
+      .q-btn.bg-primary:hover
+        background: $primary !important
+
+      .q-btn:hover
+        background: #dce1e926 !important
+
+  .q-date__months-item
+    padding-right: $xxs
+    .q-btn
+      border-radius: $xxl !important
+      width: $xxl
+      height: $lg
+      font-size: 0.875rem
+      font-weight: 400
+      line-height: $ms
+      letter-spacing: 0.01786rem
+      padding: 0 !important
+
+  .q-date__actions
+    display: none
+
+  .q-date__calendar-weekdays
+    .q-date__calendar-item
+      text-transform: uppercase
+      color: $dark
+      font-size: 0.875rem
+      font-weight: 400
+      line-height: $ms
+      letter-spacing: 0.01786rem
+      opacity: 1 !important
+      height: $ms !important
+      div
+        line-height: $ms
+        display: flex
+        align-items: center
+
+  .q-date__view
+    padding: 0 !important
+    height: inherit !important
+    min-height: 0rem !important
+
+  .q-date__calendar-days-container
+    height: 100% !important
+    min-height: 0rem !important
+
+    .q-date__arrow
+      .q-btn
+        width: $ms
+        height: $ms
+        padding: 0.25rem
+        flex-wrap: nowrap
+        justify-content: center
+      &:hover
+        background: #dce1e926 !important
+
+    .relative-position div .q-btn
+      padding: $xs
+      color: $dark
+      font-size: 0.875rem
+      font-weight: 500
+      line-height: 1.25rem
+      letter-spacing: 0.03333rem
+
+.date-picker-btn-icon.u-btn
+  padding: 0px !important
+  min-width: 0px !important
+
+  &.q-hoverable:hover > .q-focus-helper
+    opacity: 0
+
+  &:focus-visible
+    outline: auto !important
+
+    .q-focus-helper
+      display: none
+
+.date-picker-icon
+  color: $description
+
+.selected-month-year
+  color: #12316C
+  background: #234ba926
+  border-radius: $xs
+
+.q-dialog__inner .u-date
+  padding-bottom: 1rem
+
+.date-sheet
+  .main-content-dialog
+    overflow: hidden
+.date-sheet .q-card
+  padding-bottom: 1rem
+</style>