shared-ritm 1.3.21 → 1.3.23

package/src/common/app-datepicker/AppDatepicker.vue

@@ -1,218 +1,218 @@
-<template>
-  <div class="datepicker">
-    <app-input-new
-      v-model="model"
-      readonly
-      input-class="cursor-pointer"
-      :label="label"
-      :required="required"
-      :rules="rules"
-      :error="error"
-      :disable="disabled"
-      placeholder="Выберите дату"
-    >
-      <q-popup-proxy v-if="!disabled" class="datepicker__wrapper" @update:model-value="updateError">
-        <q-date
-          :model-value="model"
-          :mask="time ? `DD.MM.YYYY ${timeFormat}` : 'DD.MM.YYYY'"
-          :options="disablePastDates"
-          @update:model-value="updateDate"
-        />
-        <q-time
-          v-if="time"
-          v-model="model"
-          :mask="`DD.MM.YYYY ${timeFormat}`"
-          format24h
-          :hour-options="hourOptions()"
-          :minute-options="minuteOptions()"
-        />
-      </q-popup-proxy>
-      <template #append>
-        <q-icon name="event" class="cursor-pointer"></q-icon>
-      </template>
-    </app-input-new>
-  </div>
-</template>
-
-<script setup lang="ts">
-import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
-import { ref, withDefaults, defineEmits, defineProps, defineModel } from 'vue'
-import { date } from 'quasar'
-
-interface Props {
-  label?: string
-  modelValue?: string
-  rules?: ((val?: string | number | null) => boolean | string)[]
-  disableRuleDates?: string | string[]
-  time?: boolean
-  noPastDates?: boolean
-  disabled?: boolean
-  required?: boolean
-  timeFormat?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  timeFormat: 'HH:mm',
-  rules: () => [],
-  disableRuleDates: undefined,
-  modelValue: undefined,
-})
-
-defineEmits(['update:modelValue'])
-
-const model = defineModel<string | null | undefined>()
-
-const error = ref(false)
-
-const updateError = (state: boolean) => {
-  if (props.required && !error.value && !model.value && !state) {
-    error.value = true
-  }
-}
-
-const updateDate = (value: string) => {
-  error.value = false
-
-  if (!props.noPastDates) {
-    model.value = value
-    return
-  }
-
-  const today = new Date()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-  const selectedDate = getSelectedDate(value)
-
-  if (selectedDate !== todayStr) {
-    model.value = value
-    return
-  }
-
-  const selectedHour = getSelectedHour(value)
-  const selectedMinutes = getSelectedMinutes(value)
-  const currentHour = today.getHours()
-  const currentMinutes = today.getMinutes()
-
-  if (
-    (selectedHour || selectedHour === 0) &&
-    (selectedMinutes || selectedMinutes === 0) &&
-    (selectedHour < currentHour || (selectedHour === currentHour && selectedMinutes < currentMinutes))
-  ) {
-    today.setHours(currentHour, currentMinutes, 0)
-    model.value = date.formatDate(today, `DD.MM.YYYY ${props.timeFormat}`)
-  } else {
-    model.value = value
-  }
-}
-
-const disablePastDates = (date: string) => {
-  if (!props.noPastDates && !props.disableRuleDates) return true
-
-  const [year, month, day] = date.split('/')
-  const currentDate = new Date(Number(year), Number(month) - 1, Number(day))
-  currentDate.setHours(0, 0, 0, 0)
-
-  if (props.disableRuleDates) {
-    if (Array.isArray(props.disableRuleDates)) {
-      const firstDate = props.disableRuleDates[0] ? new Date(props.disableRuleDates[0]) : null
-      firstDate?.setHours(0, 0, 0, 0)
-      const lastDate = props.disableRuleDates[1] ? new Date(props.disableRuleDates[1]) : null
-      lastDate?.setHours(0, 0, 0, 0)
-
-      return (!firstDate || currentDate >= firstDate) && (!lastDate || currentDate <= lastDate)
-    } else {
-      const firstDate = new Date(props.disableRuleDates)
-      return currentDate >= firstDate
-    }
-  }
-
-  const today = new Date()
-  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
-
-  return currentDate >= todayDate
-}
-
-function getSelectedDate(value = model.value) {
-  if (!value) return null
-
-  return value.toString().substring(0, 10)
-}
-
-function getSelectedHour(value = model.value) {
-  if (!value) return null
-
-  const timePart = value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[0]) : null
-}
-
-function getSelectedMinutes(value = model.value) {
-  if (!value) return null
-
-  const timePart = value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[1]) : null
-}
-
-function hourOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-
-  if (selectedDate !== todayStr) {
-    return Array.from({ length: 24 }, (_, i) => i)
-  }
-
-  const currentHour = today.getHours()
-  return Array.from({ length: 24 - currentHour }, (_, i) => currentHour + i)
-}
-
-function minuteOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
-  const selectedHour = getSelectedHour()
-
-  if (selectedDate !== todayStr) {
-    return Array.from({ length: 60 }, (_, i) => i)
-  }
-
-  if (selectedHour === today.getHours()) {
-    const currentMinutes = today.getMinutes()
-    return Array.from({ length: 60 - currentMinutes }, (_, i) => currentMinutes + i)
-  }
-
-  return Array.from({ length: 60 }, (_, i) => i)
-}
-</script>
-
-<style scoped lang="scss">
-.datepicker {
-  :deep(input),
-  :deep(.q-field--readonly.q-field--float .q-field__native) {
-    cursor: pointer;
-  }
-
-  &__label {
-    font-size: 14px;
-    font-weight: 700;
-    color: #7d8592;
-
-    .required {
-      color: #f65160;
-      font-weight: bold;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.datepicker {
-  &__wrapper {
-    display: flex;
-
-    .q-time,
-    .q-date {
-      box-shadow: none;
-      border-radius: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div class="datepicker">
+    <app-input-new
+      v-model="model"
+      readonly
+      input-class="cursor-pointer"
+      :label="label"
+      :required="required"
+      :rules="rules"
+      :error="error"
+      :disable="disabled"
+      placeholder="Выберите дату"
+    >
+      <q-popup-proxy v-if="!disabled" class="datepicker__wrapper" @update:model-value="updateError">
+        <q-date
+          :model-value="model"
+          :mask="time ? `DD.MM.YYYY ${timeFormat}` : 'DD.MM.YYYY'"
+          :options="disablePastDates"
+          @update:model-value="updateDate"
+        />
+        <q-time
+          v-if="time"
+          v-model="model"
+          :mask="`DD.MM.YYYY ${timeFormat}`"
+          format24h
+          :hour-options="hourOptions()"
+          :minute-options="minuteOptions()"
+        />
+      </q-popup-proxy>
+      <template #append>
+        <q-icon name="event" class="cursor-pointer"></q-icon>
+      </template>
+    </app-input-new>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppInputNew from '@/common/app-input-new/AppInputNew.vue'
+import { ref, withDefaults, defineEmits, defineProps, defineModel } from 'vue'
+import { date } from 'quasar'
+
+interface Props {
+  label?: string
+  modelValue?: string
+  rules?: ((val?: string | number | null) => boolean | string)[]
+  disableRuleDates?: string | string[]
+  time?: boolean
+  noPastDates?: boolean
+  disabled?: boolean
+  required?: boolean
+  timeFormat?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  timeFormat: 'HH:mm',
+  rules: () => [],
+  disableRuleDates: undefined,
+  modelValue: undefined,
+})
+
+defineEmits(['update:modelValue'])
+
+const model = defineModel<string | null | undefined>()
+
+const error = ref(false)
+
+const updateError = (state: boolean) => {
+  if (props.required && !error.value && !model.value && !state) {
+    error.value = true
+  }
+}
+
+const updateDate = (value: string) => {
+  error.value = false
+
+  if (!props.noPastDates) {
+    model.value = value
+    return
+  }
+
+  const today = new Date()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+  const selectedDate = getSelectedDate(value)
+
+  if (selectedDate !== todayStr) {
+    model.value = value
+    return
+  }
+
+  const selectedHour = getSelectedHour(value)
+  const selectedMinutes = getSelectedMinutes(value)
+  const currentHour = today.getHours()
+  const currentMinutes = today.getMinutes()
+
+  if (
+    (selectedHour || selectedHour === 0) &&
+    (selectedMinutes || selectedMinutes === 0) &&
+    (selectedHour < currentHour || (selectedHour === currentHour && selectedMinutes < currentMinutes))
+  ) {
+    today.setHours(currentHour, currentMinutes, 0)
+    model.value = date.formatDate(today, `DD.MM.YYYY ${props.timeFormat}`)
+  } else {
+    model.value = value
+  }
+}
+
+const disablePastDates = (date: string) => {
+  if (!props.noPastDates && !props.disableRuleDates) return true
+
+  const [year, month, day] = date.split('/')
+  const currentDate = new Date(Number(year), Number(month) - 1, Number(day))
+  currentDate.setHours(0, 0, 0, 0)
+
+  if (props.disableRuleDates) {
+    if (Array.isArray(props.disableRuleDates)) {
+      const firstDate = props.disableRuleDates[0] ? new Date(props.disableRuleDates[0]) : null
+      firstDate?.setHours(0, 0, 0, 0)
+      const lastDate = props.disableRuleDates[1] ? new Date(props.disableRuleDates[1]) : null
+      lastDate?.setHours(0, 0, 0, 0)
+
+      return (!firstDate || currentDate >= firstDate) && (!lastDate || currentDate <= lastDate)
+    } else {
+      const firstDate = new Date(props.disableRuleDates)
+      return currentDate >= firstDate
+    }
+  }
+
+  const today = new Date()
+  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+
+  return currentDate >= todayDate
+}
+
+function getSelectedDate(value = model.value) {
+  if (!value) return null
+
+  return value.toString().substring(0, 10)
+}
+
+function getSelectedHour(value = model.value) {
+  if (!value) return null
+
+  const timePart = value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[0]) : null
+}
+
+function getSelectedMinutes(value = model.value) {
+  if (!value) return null
+
+  const timePart = value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[1]) : null
+}
+
+function hourOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+
+  if (selectedDate !== todayStr) {
+    return Array.from({ length: 24 }, (_, i) => i)
+  }
+
+  const currentHour = today.getHours()
+  return Array.from({ length: 24 - currentHour }, (_, i) => currentHour + i)
+}
+
+function minuteOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toLocaleDateString('ru-RU').slice(0, 10)
+  const selectedHour = getSelectedHour()
+
+  if (selectedDate !== todayStr) {
+    return Array.from({ length: 60 }, (_, i) => i)
+  }
+
+  if (selectedHour === today.getHours()) {
+    const currentMinutes = today.getMinutes()
+    return Array.from({ length: 60 - currentMinutes }, (_, i) => currentMinutes + i)
+  }
+
+  return Array.from({ length: 60 }, (_, i) => i)
+}
+</script>
+
+<style scoped lang="scss">
+.datepicker {
+  :deep(input),
+  :deep(.q-field--readonly.q-field--float .q-field__native) {
+    cursor: pointer;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-weight: 700;
+    color: #7d8592;
+
+    .required {
+      color: #f65160;
+      font-weight: bold;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.datepicker {
+  &__wrapper {
+    display: flex;
+
+    .q-time,
+    .q-date {
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+}
+</style>

package/src/common/app-dropdown/AppDropdown.vue

@@ -1,37 +1,37 @@
-<template>
-  <q-btn-dropdown
-    v-model="model"
-    :color="color"
-    :content-style="{ width: width || '200px', minWidth: height || '200px' }"
-  >
-    <template #label>
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </template>
-    <template #default>
-      <slot name="content" />
-    </template>
-  </q-btn-dropdown>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  label?: string
-  color?: string
-  width?: number
-  height?: number
-}
-
-const props = defineProps<Props>()
-
-const model = defineModel<boolean>()
-</script>
-
-<style scoped lang="scss">
-.q-btn {
-  &:before {
-    box-shadow: none;
-  }
-}
-</style>
+<template>
+  <q-btn-dropdown
+    v-model="model"
+    :color="color"
+    :content-style="{ width: width || '200px', minWidth: height || '200px' }"
+  >
+    <template #label>
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </template>
+    <template #default>
+      <slot name="content" />
+    </template>
+  </q-btn-dropdown>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label?: string
+  color?: string
+  width?: number
+  height?: number
+}
+
+const props = defineProps<Props>()
+
+const model = defineModel<boolean>()
+</script>
+
+<style scoped lang="scss">
+.q-btn {
+  &:before {
+    box-shadow: none;
+  }
+}
+</style>