@kalisio/kdk 2.1.7 → 2.1.8

package/core/client/components/time/KDateTime.vue

@@ -1,172 +1,172 @@
-<template>
-  <div class="row items-center no-wrap">
-    <!-- Date -->
-    <KDate
-      v-model="dateModel"
-      :options="dateOptions"
-      :disabled="disabled"
-      :dense="dense"
-    />
-    <!-- Time -->
-    <KTime
-      v-model="timeModel"
-      :options="timeOptions"
-      :disabled="disabled || dateTime === null"
-      :dense="dense"
-    />
-  </div>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import moment from 'moment'
-import { ref, computed, watch } from 'vue'
-import KDate from './KDate.vue'
-import KTime from './KTime.vue'
-
-// Props
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: () => null,
-    validator: (value) => {
-      if (value) return moment(value).isValid()
-      return true
-    }
-  },
-  options: {
-    type: Object,
-    default: () => {}
-  },
-  format: {
-    type: String,
-    default: 'YYYY/MM/DD HH:mm',
-    validator: (value) => {
-      return !_.isEmpty(value) && value.split(' ').length === 2
-    }
-  },
-  min: {
-    type: String,
-    default: () => null,
-    validator: (value) => {
-      if (value) return moment(value).isValid()
-      return true
-    }
-  },
-  max: {
-    type: String,
-    default: () => null,
-    validator: (value) => {
-      if (value) return moment(value).isValid()
-      return true
-    }
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// Emits
-const emit = defineEmits(['update:modelValue'])
-
-// Data
-const dateTime = ref(null)
-const minDateTime = ref(null)
-const maxDateTime = ref(null)
-const dateMask = 'YYYY/MM/DD'
-const timeMask = 'HH:mm:ss'
-
-// Computed
-const dateModel = computed({
-  get: function () {
-    return dateTime.value ? dateTime.value.format(dateMask) : null
-  },
-  set: function (value) {
-    const { YYYY, MM, DD } = toYMD(value)
-    if (!dateTime.value) dateTime.value = moment({ year: YYYY, month: MM, date: DD })
-    else dateTime.value.set({ year: YYYY, month: MM, date: DD })
-    emit('update:modelValue', dateTime.value.toISOString())
-  }
-})
-const dateOptions = computed(() => {
-  return _.merge({}, _.get(props.options, 'date'), { picker: { options: checkDate } })
-})
-const timeModel = computed({
-  get: function () {
-    return dateTime.value ? dateTime.value.format(timeMask) : null
-  },
-  set: function (value) {
-    const { HH, mm, ss } = toHMS(value)
-    dateTime.value.set({ hour: HH, minute: mm, second: ss })
-    emit('update:modelValue', dateTime.value.toISOString())
-  }
-})
-const timeOptions = computed(() => {
-  return _.merge({}, _.get(props.options, 'time'), { picker: { options: checkTime } })
-})
-
-// Watch
-watch(() => props.modelValue, (value) => {
-  dateTime.value = moment.utc(value).local()
-})
-watch(() => props.min, (value) => {
-  minDateTime.value = moment.utc(value).local()
-})
-watch(() => props.max, (value) => {
-  maxDateTime.value = moment.utc(value).local()
-})
-
-// Functions
-function checkDate (date) {
-  const { YYYY, MM, DD } = toYMD(date)
-  const dateToCheck = moment({
-    year: YYYY,
-    month: MM,
-    date: DD,
-    hour: dateTime.value ? dateTime.value.hour() : 0,
-    minute: dateTime.value ? dateTime.value.minute() : 0
-  })
-  if (minDateTime.value && dateToCheck.isBefore(minDateTime.value)) return false
-  if (maxDateTime.value && dateToCheck.isAfter(maxDateTime.value)) return false
-  return true
-}
-function checkTime (hours, minutes, seconds) {
-  const timeToCheck = moment({
-    year: dateTime.value.year(),
-    month: dateTime.value.month(),
-    date: dateTime.value.date(),
-    hour: hours || dateTime.value.hour(),
-    minute: minutes || dateTime.value.minute(),
-    second: seconds || dateTime.value.second()
-  })
-  if (minDateTime.value && timeToCheck.isBefore(minDateTime.value)) return false
-  if (maxDateTime.value && timeToCheck.isAfter(maxDateTime.value)) return false
-  return true
-}
-
-// Functions
-function toYMD (value) {
-  return {
-    YYYY: value.substring(0, 4),
-    MM: value.substring(5, 7) - 1,
-    DD: value.substring(8, 10)
-  }
-}
-function toHMS (value) {
-  return {
-    HH: value.substring(0, 2),
-    mm: value.substring(3, 5),
-    ss: value.substring(6, 8)
-  }
-}
-
-// Immedaite
-if (props.modelValue) dateTime.value = moment.utc(props.modelValue).local()
-if (props.min) minDateTime.value = moment.utc(props.min).local()
-if (props.max) maxDateTime.value = moment.utc(props.max).local()
-</script>
+<template>
+  <div class="row items-center no-wrap">
+    <!-- Date -->
+    <KDate
+      v-model="dateModel"
+      :options="dateOptions"
+      :disabled="disabled"
+      :dense="dense"
+    />
+    <!-- Time -->
+    <KTime
+      v-model="timeModel"
+      :options="timeOptions"
+      :disabled="disabled || dateTime === null"
+      :dense="dense"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import { ref, computed, watch } from 'vue'
+import KDate from './KDate.vue'
+import KTime from './KTime.vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  },
+  format: {
+    type: String,
+    default: 'YYYY/MM/DD HH:mm',
+    validator: (value) => {
+      return !_.isEmpty(value) && value.split(' ').length === 2
+    }
+  },
+  min: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  max: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const dateTime = ref(null)
+const minDateTime = ref(null)
+const maxDateTime = ref(null)
+const dateMask = 'YYYY/MM/DD'
+const timeMask = 'HH:mm:ss'
+
+// Computed
+const dateModel = computed({
+  get: function () {
+    return dateTime.value ? dateTime.value.format(dateMask) : null
+  },
+  set: function (value) {
+    const { YYYY, MM, DD } = toYMD(value)
+    if (!dateTime.value) dateTime.value = moment({ year: YYYY, month: MM, date: DD })
+    else dateTime.value.set({ year: YYYY, month: MM, date: DD })
+    emit('update:modelValue', dateTime.value.toISOString())
+  }
+})
+const dateOptions = computed(() => {
+  return _.merge({}, _.get(props.options, 'date'), { picker: { options: checkDate } })
+})
+const timeModel = computed({
+  get: function () {
+    return dateTime.value ? dateTime.value.format(timeMask) : null
+  },
+  set: function (value) {
+    const { HH, mm, ss } = toHMS(value)
+    dateTime.value.set({ hour: HH, minute: mm, second: ss })
+    emit('update:modelValue', dateTime.value.toISOString())
+  }
+})
+const timeOptions = computed(() => {
+  return _.merge({}, _.get(props.options, 'time'), { picker: { options: checkTime } })
+})
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  dateTime.value = moment.utc(value).local()
+})
+watch(() => props.min, (value) => {
+  minDateTime.value = moment.utc(value).local()
+})
+watch(() => props.max, (value) => {
+  maxDateTime.value = moment.utc(value).local()
+})
+
+// Functions
+function checkDate (date) {
+  const { YYYY, MM, DD } = toYMD(date)
+  const dateToCheck = moment({
+    year: YYYY,
+    month: MM,
+    date: DD,
+    hour: dateTime.value ? dateTime.value.hour() : 0,
+    minute: dateTime.value ? dateTime.value.minute() : 0
+  })
+  if (minDateTime.value && dateToCheck.isBefore(minDateTime.value)) return false
+  if (maxDateTime.value && dateToCheck.isAfter(maxDateTime.value)) return false
+  return true
+}
+function checkTime (hours, minutes, seconds) {
+  const timeToCheck = moment({
+    year: dateTime.value.year(),
+    month: dateTime.value.month(),
+    date: dateTime.value.date(),
+    hour: hours || dateTime.value.hour(),
+    minute: minutes || dateTime.value.minute(),
+    second: seconds || dateTime.value.second()
+  })
+  if (minDateTime.value && timeToCheck.isBefore(minDateTime.value)) return false
+  if (maxDateTime.value && timeToCheck.isAfter(maxDateTime.value)) return false
+  return true
+}
+
+// Functions
+function toYMD (value) {
+  return {
+    YYYY: value.substring(0, 4),
+    MM: value.substring(5, 7) - 1,
+    DD: value.substring(8, 10)
+  }
+}
+function toHMS (value) {
+  return {
+    HH: value.substring(0, 2),
+    mm: value.substring(3, 5),
+    ss: value.substring(6, 8)
+  }
+}
+
+// Immedaite
+if (props.modelValue) dateTime.value = moment.utc(props.modelValue).local()
+if (props.min) minDateTime.value = moment.utc(props.min).local()
+if (props.max) maxDateTime.value = moment.utc(props.max).local()
+</script>

package/core/client/components/time/KDateTimeRange.vue

@@ -1,118 +1,118 @@
-<template>
-  <div class="row items-center q-gutter-x-sm no-wrap">
-    <!-- Start dateTime -->
-    <KDateTime
-      v-model="startModel"
-      :options="props.options"
-      :min="props.min"
-      :max="props.max"
-      :disabled="disabled"
-      :dense="dense"
-    />
-    <div>
-      {{ separator }}
-    </div>
-    <!-- End dateTime -->
-    <KDateTime
-      v-model="endModel"
-      :options="props.options"
-      :min="startDateTime ? startDateTime.toISOString() : null"
-      :max="props.max"
-      :disabled="disabled || startDateTime === null"
-      :dense="dense"
-    />
-  </div>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import moment from 'moment'
-import { ref, computed, watch } from 'vue'
-import KDateTime from './KDateTime.vue'
-
-// Props
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => null,
-    validator: (value) => {
-      if (value && value.start && !moment(value.start).isValid()) return false
-      if (value && value.end && !moment(value.end).isValid()) return false
-      return true
-    }
-  },
-  options: {
-    type: Object,
-    default: () => {}
-  },
-  min: {
-    type: String,
-    default: () => null,
-    validator: (value) => {
-      if (value) return moment(value).isValid()
-      return true
-    }
-  },
-  max: {
-    type: String,
-    default: () => null,
-    validator: (value) => {
-      if (value) return moment(value).isValid()
-      return true
-    }
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// Emits
-const emit = defineEmits(['update:modelValue'])
-
-// Data
-const startDateTime = ref(null)
-const endDateTime = ref(null)
-
-// Computed
-const startModel = computed({
-  get: function () {
-    return startDateTime.value ? startDateTime.value.toISOString() : null
-  },
-  set: function (value) {
-    if (endDateTime.value) {
-      if (moment.utc(value).isAfter(endDateTime.value)) endDateTime.value = value
-    } else {
-      endDateTime.value = value
-    }
-    emit('update:modelValue', { start: value, end: endDateTime.value })
-  }
-})
-const endModel = computed({
-  get: function () {
-    return endDateTime.value ? endDateTime.value.toISOString() : null
-  },
-  set: function (value) {
-    emit('update:modelValue', { start: startDateTime.value.toISOString(), end: value })
-  }
-})
-const separator = computed(() => {
-  return _.get(props.options, 'separator', '/')
-})
-
-// Watch
-watch(() => props.modelValue, (value) => {
-  startDateTime.value = value ? moment.utc(value.start) : null
-  endDateTime.value = value ? moment.utc(value.end) : null
-})
-
-// Immedaite
-if (props.modelValue) {
-  startDateTime.value = moment.utc(props.modelValue.start)
-  endDateTime.value = moment.utc(props.modelValue.end)
-}
-</script>
+<template>
+  <div class="row items-center q-gutter-x-sm no-wrap">
+    <!-- Start dateTime -->
+    <KDateTime
+      v-model="startModel"
+      :options="props.options"
+      :min="props.min"
+      :max="props.max"
+      :disabled="disabled"
+      :dense="dense"
+    />
+    <div>
+      {{ separator }}
+    </div>
+    <!-- End dateTime -->
+    <KDateTime
+      v-model="endModel"
+      :options="props.options"
+      :min="startDateTime ? startDateTime.toISOString() : null"
+      :max="props.max"
+      :disabled="disabled || startDateTime === null"
+      :dense="dense"
+    />
+  </div>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import moment from 'moment'
+import { ref, computed, watch } from 'vue'
+import KDateTime from './KDateTime.vue'
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => null,
+    validator: (value) => {
+      if (value && value.start && !moment(value.start).isValid()) return false
+      if (value && value.end && !moment(value.end).isValid()) return false
+      return true
+    }
+  },
+  options: {
+    type: Object,
+    default: () => {}
+  },
+  min: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  max: {
+    type: String,
+    default: () => null,
+    validator: (value) => {
+      if (value) return moment(value).isValid()
+      return true
+    }
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:modelValue'])
+
+// Data
+const startDateTime = ref(null)
+const endDateTime = ref(null)
+
+// Computed
+const startModel = computed({
+  get: function () {
+    return startDateTime.value ? startDateTime.value.toISOString() : null
+  },
+  set: function (value) {
+    if (endDateTime.value) {
+      if (moment.utc(value).isAfter(endDateTime.value)) endDateTime.value = value
+    } else {
+      endDateTime.value = value
+    }
+    emit('update:modelValue', { start: value, end: endDateTime.value })
+  }
+})
+const endModel = computed({
+  get: function () {
+    return endDateTime.value ? endDateTime.value.toISOString() : null
+  },
+  set: function (value) {
+    emit('update:modelValue', { start: startDateTime.value.toISOString(), end: value })
+  }
+})
+const separator = computed(() => {
+  return _.get(props.options, 'separator', '/')
+})
+
+// Watch
+watch(() => props.modelValue, (value) => {
+  startDateTime.value = value ? moment.utc(value.start) : null
+  endDateTime.value = value ? moment.utc(value.end) : null
+})
+
+// Immedaite
+if (props.modelValue) {
+  startDateTime.value = moment.utc(props.modelValue.start)
+  endDateTime.value = moment.utc(props.modelValue.end)
+}
+</script>