pimelon-ui 0.1.89 → 0.1.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.89",
+  "version": "0.1.91",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -47,10 +47,10 @@
     "@tiptap/suggestion": "^2.0.3",
     "@tiptap/vue-3": "^2.0.3",
     "@vueuse/core": "^10.4.1",
+    "dayjs": "^1.11.13",
     "feather-icons": "^4.28.0",
     "husky": "^9.1.7",
     "idb-keyval": "^6.2.0",
-    "luxon": "^3.5.0",
     "prettier": "^3.3.2",
     "radix-vue": "^1.5.3",
     "showdown": "^2.1.0",

package/src/components/{DatePicker.vue → DatePicker/DatePicker.vue}

@@ -126,16 +126,17 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
 
-import Input from './Input.vue'
-import { Button } from './Button'
-import Popover from './Popover.vue'
-import FeatherIcon from './FeatherIcon.vue'
-import TextInput from './TextInput.vue'
+import Input from '../Input.vue'
+import { Button } from '../Button'
+import Popover from '../Popover.vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import TextInput from '../TextInput.vue'
 
-import { getDate, getDateValue, luxonDate } from '../utils/dates'
-import { useDatePicker } from '../utils/useDatePicker'
+import { getDate, getDateValue } from './utils'
+import { useDatePicker } from './useDatePicker'
+import { dayjsLocal } from '../../utils/dayjs'
 
-import type { DatePickerEmits, DatePickerProps } from './types/DatePicker'
+import type { DatePickerEmits, DatePickerProps } from './DatePicker'
 
 const props = defineProps<DatePickerProps>()
 const emit = defineEmits<DatePickerEmits>()
@@ -167,9 +168,7 @@ const dateValue = computed(() => {
 })
 
 function selectDate(date: Date | string, isNow: boolean = false) {
-  if (isNow && window.timezone?.user) {
-    date = luxonDate(date).setZone(window.timezone.user)
-  }
+  date = isNow ? dayjsLocal(date) : date
   emit('change', getDateValue(date))
   emit('update:modelValue', getDateValue(date))
 }

package/src/components/{DateRangePicker.vue → DatePicker/DateRangePicker.vue}

@@ -122,16 +122,16 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 
-import Input from './Input.vue'
-import { Button } from './Button'
-import Popover from './Popover.vue'
-import FeatherIcon from './FeatherIcon.vue'
-import TextInput from './TextInput.vue'
+import Input from '../Input.vue'
+import { Button } from '../Button'
+import Popover from '../Popover.vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import TextInput from '../TextInput.vue'
 
-import { getDate, getDateValue } from '../utils/dates'
-import { useDatePicker } from '../utils/useDatePicker'
+import { getDate, getDateValue } from './utils'
+import { useDatePicker } from './useDatePicker'
 
-import type { DatePickerEmits, DatePickerProps } from './types/DatePicker'
+import type { DatePickerEmits, DatePickerProps } from './DatePicker'
 
 const props = defineProps<DatePickerProps>()
 const emit = defineEmits<DatePickerEmits>()

package/src/components/{DateTimePicker.vue → DatePicker/DateTimePicker.vue}

@@ -62,7 +62,7 @@
             class="text-sm"
             @click="
               () => {
-                selectDate(getDate(), false, true)
+                selectDate(getDate(), true)
                 togglePopover()
               }
             "
@@ -189,21 +189,17 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 
-import Input from './Input.vue'
-import { Button } from './Button'
-import Popover from './Popover.vue'
-import FeatherIcon from './FeatherIcon.vue'
-import TextInput from './TextInput.vue'
+import Input from '../Input.vue'
+import { Button } from '../Button'
+import Popover from '../Popover.vue'
+import FeatherIcon from '../FeatherIcon.vue'
+import TextInput from '../TextInput.vue'
 
-import {
-  getDate,
-  convertToUserTimezone,
-  convertToSystemTimezone,
-  luxonDate,
-} from '../utils/dates'
-import { useDatePicker } from '../utils/useDatePicker'
+import { getDate } from './utils'
+import { useDatePicker } from './useDatePicker'
+import { dayjs, dayjsLocal, dayjsSystem } from '../../utils/dayjs'
 
-import type { DatePickerEmits, DatePickerProps } from './types/DatePicker'
+import type { DatePickerEmits, DatePickerProps } from './DatePicker'
 
 const props = defineProps<DatePickerProps>()
 const emit = defineEmits<DatePickerEmits>()
@@ -236,55 +232,38 @@ const second = ref<number>(0)
 
 const dateValue = computed(() => {
   let date = props.value ? props.value : props.modelValue
-  return date ? convertToUserTimezone(date) : ''
+  return date ? dayjsLocal(date).format('YYYY-MM-DD HH:mm:ss') : ''
 })
 
 function changeTime() {
   let date = dateValue.value ? getDate(dateValue.value) : getDate()
-  selectDate(date, true)
+  selectDate(date)
 }
 
-function selectDate(
-  date: Date | string,
-  isTimeChange: boolean = false,
-  isNow: boolean = false,
-) {
-  if (!isTimeChange) {
-    let currentDate = luxonDate()
-    if (dateValue.value && !isNow) {
-      currentDate = luxonDate(dateValue.value)
-    } else if (isNow && window.timezone?.user) {
-      currentDate = currentDate.setZone(window.timezone.user)
-      // set only date part of currentDate to date
-      date = luxonDate(date)
-        .set({
-          year: currentDate.year,
-          month: currentDate.month,
-          day: currentDate.day,
-        })
-        .toJSDate()
-    }
-
-    hour.value = currentDate.hour
-    minute.value = currentDate.minute
-    second.value = currentDate.second
+function selectDate(date: Date | string, isNow: boolean = false) {
+  if (isNow) {
+    date = dayjsLocal(date)
+    hour.value = date.hour()
+    minute.value = date.minute()
+    second.value = date.second()
   }
 
-  emit('change', convertToSystemTimezone(toValue(date)))
-  emit('update:modelValue', convertToSystemTimezone(toValue(date)))
+  let systemParsedDate = date
+    ? dayjsSystem(toValue(date)).format('YYYY-MM-DD HH:mm:ss')
+    : ''
+  emit('change', systemParsedDate)
+  emit('update:modelValue', systemParsedDate)
 }
 
 function toValue(date: Date | string) {
   if (!date || date.toString() === 'Invalid Date') return ''
 
-  // "YYYY-MM-DD HH:MM:SS"
-  return luxonDate(date)
-    .set({
-      hours: hour.value,
-      minutes: minute.value,
-      seconds: second.value,
-    })
-    .toFormat('yyyy-MM-dd HH:mm:ss')
+  // "YYYY-MM-DD HH:mm:ss"
+  return dayjs(date)
+    .set('hour', hour.value)
+    .set('minute', minute.value)
+    .set('second', second.value)
+    .format('YYYY-MM-DD HH:mm:ss')
 }
 
 function twoDigit(number: number) {
@@ -296,7 +275,7 @@ function updateDate(date: Date | string) {
   hour.value = date.getHours()
   minute.value = date.getMinutes()
   second.value = date.getSeconds()
-  selectDate(date, true)
+  selectDate(date)
 }
 
 function selectCurrentMonthYear() {

package/src/{utils → components/DatePicker}/useDatePicker.ts

@@ -1,5 +1,5 @@
 import { computed, ref } from 'vue'
-import { getDate, getDatesAfter, getDaysInMonth } from './dates'
+import { getDate, getDatesAfter, getDaysInMonth } from './utils'
 
 export function useDatePicker() {
   const currentYear = ref<number>(0)

package/src/components/DatePicker/utils.ts

@@ -0,0 +1,60 @@
+import { dayjs } from '../../utils/dayjs'
+
+type DateConstructorParam = string | number | Date
+
+function getDate(...args: DateConstructorParam[]): Date {
+  return new Date(...(args as [DateConstructorParam]))
+}
+
+function getDateValue(date: Date | string) {
+  if (!date || date.toString() === 'Invalid Date') return ''
+
+  return dayjs(date)
+    .set('hour', 0)
+    .set('minute', 0)
+    .set('second', 0)
+    .set('millisecond', 0)
+    .format('YYYY-MM-DD')
+}
+
+function getDatesAfter(date: Date, count: number) {
+  let incrementer = 1
+  if (count < 0) {
+    incrementer = -1
+    count = Math.abs(count)
+  }
+  const dates: Date[] = []
+
+  while (count) {
+    date = getDate(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate() + incrementer,
+    )
+    dates.push(date)
+    count--
+  }
+
+  if (incrementer === -1) {
+    return dates.reverse()
+  }
+  return dates
+}
+
+function getDaysInMonth(monthIndex: number, year: number) {
+  const daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+  const daysInMonth = daysInMonthMap[monthIndex]
+  if (monthIndex === 1 && isLeapYear(year)) {
+    return 29
+  }
+  return daysInMonth
+}
+
+function isLeapYear(year: number) {
+  if (year % 400 === 0) return true
+  if (year % 100 === 0) return false
+  if (year % 4 === 0) return true
+  return false
+}
+
+export { getDate, getDateValue, getDatesAfter, getDaysInMonth, isLeapYear }

package/src/index.js

@@ -7,9 +7,9 @@ export { default as Breadcrumbs } from './components/Breadcrumbs.vue'
 export * from './components/Button'
 export { default as Card } from './components/Card.vue'
 export { default as Checkbox } from './components/Checkbox.vue'
-export { default as DatePicker } from './components/DatePicker.vue'
-export { default as DateTimePicker } from './components/DateTimePicker.vue'
-export { default as DateRangePicker } from './components/DateRangePicker.vue'
+export { default as DatePicker } from './components/DatePicker/DatePicker.vue'
+export { default as DateTimePicker } from './components/DatePicker/DateTimePicker.vue'
+export { default as DateRangePicker } from './components/DatePicker/DateRangePicker.vue'
 export { default as Dialog } from './components/Dialog.vue'
 export { default as Dialogs } from './components/Dialogs.vue'
 export { default as Divider } from './components/Divider.vue'
@@ -79,7 +79,7 @@ export { default as debounce } from './utils/debounce.ts'
 export { default as fileToBase64 } from './utils/file-to-base64.js'
 export { default as FileUploadHandler } from './utils/fileUploadHandler.ts'
 export { usePageMeta } from './utils/pageMeta.js'
-export * from './utils/dates.ts'
+export { dayjsLocal, dayjs } from './utils/dayjs.js'
 
 // data-fetching, resources
 export {

package/src/utils/dayjs.js

@@ -0,0 +1,45 @@
+import _dayjs from 'dayjs/esm'
+import relativeTime from 'dayjs/esm/plugin/relativeTime'
+import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
+import updateLocale from 'dayjs/esm/plugin/updateLocale'
+import isToday from 'dayjs/esm/plugin/isToday'
+import duration from 'dayjs/esm/plugin/duration'
+import utc from 'dayjs/esm/plugin/utc'
+import timezone from 'dayjs/esm/plugin/timezone'
+import advancedFormat from 'dayjs/esm/plugin/advancedFormat'
+import { getConfig } from './config'
+
+_dayjs.extend(updateLocale)
+_dayjs.extend(relativeTime)
+_dayjs.extend(localizedFormat)
+_dayjs.extend(isToday)
+_dayjs.extend(duration)
+_dayjs.extend(utc)
+_dayjs.extend(timezone)
+_dayjs.extend(advancedFormat)
+
+function getBrowserTimezone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone
+}
+
+export function dayjsLocal(dateTimeString) {
+  let systemTimezone = getConfig('systemTimezone')
+  let localTimezone = getConfig('localTimezone') || getBrowserTimezone()
+
+  if (!systemTimezone) return _dayjs(dateTimeString)
+
+  if (!dateTimeString) return _dayjs().tz(localTimezone)
+  return _dayjs.tz(dateTimeString, systemTimezone).tz(localTimezone)
+}
+
+export function dayjsSystem(dateTimeString) {
+  let systemTimezone = getConfig('systemTimezone')
+  let localTimezone = getConfig('localTimezone') || getBrowserTimezone()
+
+  if (!systemTimezone) return _dayjs(dateTimeString)
+
+  if (!dateTimeString) return _dayjs().tz(systemTimezone)
+  return _dayjs.tz(dateTimeString, localTimezone).tz(systemTimezone)
+}
+
+export let dayjs = _dayjs

package/src/utils/dates.ts

@@ -1,126 +0,0 @@
-import { DateTime } from 'luxon'
-
-declare global {
-  interface Window {
-    timezone?: {
-      system?: string
-      user?: string
-    }
-  }
-}
-
-type DateConstructorParam = string | number | Date
-
-function getDate(...args: DateConstructorParam[]): Date {
-  return new Date(...(args as [DateConstructorParam]))
-}
-
-function getDateValue(date: Date | string) {
-  if (!date || date.toString() === 'Invalid Date') return ''
-
-  return luxonDate(date)
-    .set({ hours: 0, minutes: 0, seconds: 0, milliseconds: 0 })
-    .toFormat('yyyy-MM-dd')
-}
-
-function getDatesAfter(date: Date, count: number) {
-  let incrementer = 1
-  if (count < 0) {
-    incrementer = -1
-    count = Math.abs(count)
-  }
-  const dates: Date[] = []
-
-  while (count) {
-    date = getDate(
-      date.getFullYear(),
-      date.getMonth(),
-      date.getDate() + incrementer,
-    )
-    dates.push(date)
-    count--
-  }
-
-  if (incrementer === -1) {
-    return dates.reverse()
-  }
-  return dates
-}
-
-function getDaysInMonth(monthIndex: number, year: number) {
-  const daysInMonthMap = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
-  const daysInMonth = daysInMonthMap[monthIndex]
-  if (monthIndex === 1 && isLeapYear(year)) {
-    return 29
-  }
-  return daysInMonth
-}
-
-function isLeapYear(year: number) {
-  if (year % 400 === 0) return true
-  if (year % 100 === 0) return false
-  if (year % 4 === 0) return true
-  return false
-}
-
-function convertToUserTimezone(date: string, format = 'yyyy-MM-dd HH:mm:ss') {
-  if (!date) return ''
-
-  const systemTimeZone = window.timezone?.system || null
-  const userTimeZone = window.timezone?.user || null
-  const isTimezoneEnabled = systemTimeZone && userTimeZone
-
-  if (!isTimezoneEnabled) return formatDate(date, format)
-
-  // Convert the date from system to the user's time zone
-  let systemTimezoneDate = luxonDate(date).setZone(systemTimeZone, {
-    keepLocalTime: true,
-  })
-  let userTimezoneDate = systemTimezoneDate.setZone(userTimeZone)
-
-  return userTimezoneDate.toFormat(format)
-}
-
-function convertToSystemTimezone(date: string, format = 'yyyy-MM-dd HH:mm:ss') {
-  if (!date) return ''
-
-  const systemTimeZone = window.timezone?.system || null
-  const userTimeZone = window.timezone?.user || null
-  const isTimezoneEnabled = systemTimeZone && userTimeZone
-
-  if (!isTimezoneEnabled) return formatDate(date, format)
-  // Convert the date from user's to the system time zone
-  let userTimezoneDate = luxonDate(date).setZone(userTimeZone, {
-    keepLocalTime: true,
-  })
-  let systemTimezoneDate = userTimezoneDate.setZone(systemTimeZone)
-
-  return systemTimezoneDate.toFormat(format)
-}
-
-function formatDate(date: string | Date, format: string) {
-  return luxonDate(date).toFormat(format)
-}
-
-function luxonDate(date: string | Date | DateTime | null = null) {
-  if (!date) return DateTime.local()
-  if (typeof date === 'string') {
-    date = new Date(date)
-  } else if (date.isLuxonDateTime) {
-    return date
-  }
-  return DateTime.fromJSDate(date)
-}
-
-export {
-  getDate,
-  getDateValue,
-  getDatesAfter,
-  getDaysInMonth,
-  isLeapYear,
-  convertToUserTimezone,
-  convertToSystemTimezone,
-  formatDate,
-  luxonDate,
-  DateTime,
-}