shared-ritm 1.2.98 → 1.2.99

package/src/common/app-date-picker/AppDatePicker.vue

@@ -1,81 +1,81 @@
-<template>
-  <div class="date-picker">
-    <app-button
-      class="button"
-      outline
-      size="20px"
-      padding="10px"
-      border-radius="8px"
-      border-width="2px"
-      rounded
-      :disabled="disabled"
-      text-color="primary"
-      icon="event"
-    >
-      <q-popup-proxy anchor="top left" self="top left" transition-show="scale-up" transition-hide="scale-down">
-        <q-date v-model="model" mask="YYYY-MM-DD" minimal :options="disablePastDates" />
-      </q-popup-proxy>
-    </app-button>
-    <div class="date-picker__content">
-      <p>{{ label }}<span> * </span></p>
-      <span>{{ model || 'Выберите дату' }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import AppButton from '@/common/app-button/AppButton.vue'
-
-interface Props {
-  label: string
-  disabled?: boolean
-  modelValue: string
-  disableRuleDates?: string
-}
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps<Props>()
-
-const model = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value: string) {
-    emits('update:modelValue', value)
-  },
-})
-
-function disablePastDates(date) {
-  const today = new Date()
-  const [year, month, day] = date.split('/')
-  const currentDate = new Date(year, month - 1, day)
-  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
-  if (props?.disableRuleDates) {
-    const firstDate = new Date(props.disableRuleDates)
-    return currentDate >= firstDate
-  }
-  return currentDate >= todayDate
-}
-</script>
-
-<style scoped lang="scss">
-.date-picker {
-  display: flex;
-  gap: 14px;
-  &__content {
-    color: #7d8592;
-    font-weight: 500;
-    p {
-      margin: 0;
-      font-weight: 700;
-      span {
-        color: red;
-      }
-    }
-    span {
-    }
-  }
-}
-.button {
-}
-</style>
+<template>
+  <div class="date-picker">
+    <app-button
+      class="button"
+      outline
+      size="20px"
+      padding="10px"
+      border-radius="8px"
+      border-width="2px"
+      rounded
+      :disabled="disabled"
+      text-color="primary"
+      icon="event"
+    >
+      <q-popup-proxy anchor="top left" self="top left" transition-show="scale-up" transition-hide="scale-down">
+        <q-date v-model="model" mask="YYYY-MM-DD" minimal :options="disablePastDates" />
+      </q-popup-proxy>
+    </app-button>
+    <div class="date-picker__content">
+      <p>{{ label }}<span> * </span></p>
+      <span>{{ model || 'Выберите дату' }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import AppButton from '@/common/app-button/AppButton.vue'
+
+interface Props {
+  label: string
+  disabled?: boolean
+  modelValue: string
+  disableRuleDates?: string
+}
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
+
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: string) {
+    emits('update:modelValue', value)
+  },
+})
+
+function disablePastDates(date) {
+  const today = new Date()
+  const [year, month, day] = date.split('/')
+  const currentDate = new Date(year, month - 1, day)
+  const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+  if (props?.disableRuleDates) {
+    const firstDate = new Date(props.disableRuleDates)
+    return currentDate >= firstDate
+  }
+  return currentDate >= todayDate
+}
+</script>
+
+<style scoped lang="scss">
+.date-picker {
+  display: flex;
+  gap: 14px;
+  &__content {
+    color: #7d8592;
+    font-weight: 500;
+    p {
+      margin: 0;
+      font-weight: 700;
+      span {
+        color: red;
+      }
+    }
+    span {
+    }
+  }
+}
+.button {
+}
+</style>

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

@@ -1,165 +1,165 @@
-<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
-          v-model="model"
-          :mask="`DD.MM.YYYY ${timeFormat}`"
-          :options="disablePastDates"
-          @update:model-value="error = false"
-        />
-        <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'
-
-interface Props {
-  label: string
-  modelValue?: string
-  rules?: ((val?: string | number | null) => boolean | string)[]
-  disableRuleDates?: string
-  time?: boolean
-  noPastDates?: boolean
-  disabled?: boolean
-  required?: boolean
-  timeFormat?: string
-}
-const props = withDefaults(defineProps<Props>(), {
-  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 (!error.value && !model.value && !state) {
-    error.value = true
-  }
-}
-
-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))
-
-  if (props.disableRuleDates) {
-    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() {
-  if (!model.value) return null
-
-  return model.value.toString().substring(0, 10)
-}
-
-function getSelectedHour() {
-  if (!model.value) return null
-
-  const timePart = model.value.toString().split(' ')[1]
-  return timePart ? Number(timePart.split(':')[0]) : null
-}
-
-function hourOptions(): number[] {
-  const today = new Date()
-  const selectedDate = getSelectedDate()
-  const todayStr = today.toISOString().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.toISOString().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
+          v-model="model"
+          :mask="`DD.MM.YYYY ${timeFormat}`"
+          :options="disablePastDates"
+          @update:model-value="error = false"
+        />
+        <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'
+
+interface Props {
+  label: string
+  modelValue?: string
+  rules?: ((val?: string | number | null) => boolean | string)[]
+  disableRuleDates?: string
+  time?: boolean
+  noPastDates?: boolean
+  disabled?: boolean
+  required?: boolean
+  timeFormat?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  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 (!error.value && !model.value && !state) {
+    error.value = true
+  }
+}
+
+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))
+
+  if (props.disableRuleDates) {
+    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() {
+  if (!model.value) return null
+
+  return model.value.toString().substring(0, 10)
+}
+
+function getSelectedHour() {
+  if (!model.value) return null
+
+  const timePart = model.value.toString().split(' ')[1]
+  return timePart ? Number(timePart.split(':')[0]) : null
+}
+
+function hourOptions(): number[] {
+  const today = new Date()
+  const selectedDate = getSelectedDate()
+  const todayStr = today.toISOString().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.toISOString().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>