pimelon-ui 0.1.88 → 0.1.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.88",
+  "version": "0.1.90",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -47,6 +47,7 @@
     "@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",

package/src/components/{types → DatePicker}/DatePicker.ts

@@ -5,6 +5,7 @@ export interface DatePickerProps {
   formatter?: (date: string) => string
   readonly?: boolean
   inputClass?: string | Array<string> | Record<string, boolean>
+  placement?: string
 }
 
 export type DatePickerEmits = {

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

@@ -2,6 +2,7 @@
   <Popover
     @open="selectCurrentMonthYear"
     class="flex w-full [&>div:first-child]:w-full"
+    :placement="placement"
   >
     <template #target="{ togglePopover }">
       <Input
@@ -18,11 +19,12 @@
     </template>
 
     <template #body="{ togglePopover }">
-      <!-- Month Switcher -->
       <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="w-fit select-none text-base text-ink-gray-9 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        :class="marginClass"
       >
-        <div class="flex items-center p-1 text-gray-500">
+        <!-- Month Switcher -->
+        <div class="flex items-center p-1 text-ink-gray-4">
           <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
             <FeatherIcon
               :stroke-width="2"
@@ -30,7 +32,7 @@
               class="h-4 w-4"
             />
           </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
+          <div class="flex-1 text-center text-base font-medium text-ink-gray-6">
             {{ formattedMonth }}
           </div>
           <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
@@ -55,7 +57,7 @@
             class="text-sm"
             @click="
               () => {
-                selectDate(getDate())
+                selectDate(getDate(), true)
                 togglePopover()
               }
             "
@@ -64,12 +66,12 @@
 
         <!-- Calendar -->
         <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
+          class="flex flex-col items-center justify-center p-1 text-ink-gray-8"
         >
           <div class="flex items-center text-xs uppercase">
             <div
               class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
+              v-for="(d, i) in ['s', 'm', 't', 'w', 't', 'f', 's']"
               :key="i"
             >
               {{ d }}
@@ -83,12 +85,12 @@
             <div
               v-for="date in week"
               :key="getDateValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-surface-gray-2"
               :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'font-extrabold text-gray-900':
+                'text-ink-gray-3': date.getMonth() !== currentMonth - 1,
+                'font-extrabold text-ink-gray-9':
                   getDateValue(date) === getDateValue(today),
-                'bg-gray-800 text-white hover:bg-gray-800':
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
                   getDateValue(date) === dateValue,
               }"
               @click="
@@ -124,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 } 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>()
@@ -148,11 +151,24 @@ const {
   nextMonth,
 } = useDatePicker()
 
+const marginClass = computed(() => {
+  let _marginClass = 'mt-2'
+  if (props.placement?.startsWith('top')) {
+    _marginClass = 'mb-2'
+  } else if (props.placement?.startsWith('left')) {
+    _marginClass = 'mr-2'
+  } else if (props.placement?.startsWith('right')) {
+    _marginClass = 'ml-2'
+  }
+  return _marginClass
+})
+
 const dateValue = computed(() => {
   return props.value ? props.value : props.modelValue
 })
 
-function selectDate(date: Date | string) {
+function selectDate(date: Date | string, isNow: boolean = false) {
+  date = isNow ? dayjsLocal(date) : date
   emit('change', getDateValue(date))
   emit('update:modelValue', getDateValue(date))
 }

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

@@ -2,6 +2,7 @@
   <Popover
     @open="selectCurrentMonthYear"
     class="flex w-full [&>div:first-child]:w-full"
+    :placement="placement"
   >
     <template #target="{ togglePopover }">
       <Input
@@ -18,11 +19,12 @@
     </template>
 
     <template #body="{ togglePopover }">
-      <!-- Month Switcher -->
       <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="w-fit select-none text-base text-ink-gray-9 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        :class="marginClass"
       >
-        <div class="flex items-center p-1 text-gray-500">
+        <!-- Month Switcher -->
+        <div class="flex items-center p-1 text-ink-gray-4">
           <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
             <FeatherIcon
               :stroke-width="2"
@@ -30,7 +32,7 @@
               class="h-4 w-4"
             />
           </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
+          <div class="flex-1 text-center text-base font-medium text-ink-gray-6">
             {{ formattedMonth }}
           </div>
           <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
@@ -50,12 +52,12 @@
 
         <!-- Calendar -->
         <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
+          class="flex flex-col items-center justify-center p-1 text-ink-gray-8"
         >
           <div class="flex items-center text-xs uppercase">
             <div
               class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
+              v-for="(d, i) in ['s', 'm', 't', 'w', 't', 'f', 's']"
               :key="i"
             >
               {{ d }}
@@ -69,16 +71,16 @@
             <div
               v-for="date in week"
               :key="getDateValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-surface-gray-2"
               :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'text-gray-900': date.getMonth() === currentMonth - 1,
-                'font-extrabold text-gray-900':
+                'text-ink-gray-3': date.getMonth() !== currentMonth - 1,
+                'text-ink-gray-9': date.getMonth() === currentMonth - 1,
+                'font-extrabold text-ink-gray-9':
                   getDateValue(date) === getDateValue(today),
-                'rounded-none bg-gray-100': isInRange(date),
-                'rounded-l-md rounded-r-none bg-gray-800 text-white hover:bg-gray-800':
+                'rounded-none bg-surface-gray-3': isInRange(date),
+                'rounded-l-md rounded-r-none bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
                   fromDate && getDateValue(date) === getDateValue(fromDate),
-                'rounded-r-md bg-gray-800 text-white hover:bg-gray-800':
+                'rounded-r-md bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
                   toDate && getDateValue(date) === getDateValue(toDate),
               }"
               @click="() => handleDateClick(date)"
@@ -120,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>()
@@ -144,6 +146,18 @@ const {
   nextMonth,
 } = useDatePicker()
 
+const marginClass = computed(() => {
+  let _marginClass = 'mt-2'
+  if (props.placement?.startsWith('top')) {
+    _marginClass = 'mb-2'
+  } else if (props.placement?.startsWith('left')) {
+    _marginClass = 'mr-2'
+  } else if (props.placement?.startsWith('right')) {
+    _marginClass = 'ml-2'
+  }
+  return _marginClass
+})
+
 const dateValue = computed(() => {
   return props.value ? props.value : props.modelValue
 })

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

@@ -2,6 +2,7 @@
   <Popover
     @open="selectCurrentMonthYear"
     class="flex w-full [&>div:first-child]:w-full"
+    :placement="placement"
   >
     <template #target="{ togglePopover }">
       <Input
@@ -18,11 +19,12 @@
     </template>
 
     <template #body="{ togglePopover }">
-      <!-- Month Switcher -->
       <div
-        class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="w-fit select-none text-base text-ink-gray-9 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
+        :class="marginClass"
       >
-        <div class="flex items-center p-1 text-gray-500">
+        <!-- Month Switcher -->
+        <div class="flex items-center p-1 text-ink-gray-4">
           <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
             <FeatherIcon
               :stroke-width="2"
@@ -30,7 +32,7 @@
               class="h-4 w-4"
             />
           </Button>
-          <div class="flex-1 text-center text-base font-medium text-gray-700">
+          <div class="flex-1 text-center text-base font-medium text-ink-gray-6">
             {{ formattedMonth }}
           </div>
           <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
@@ -60,7 +62,7 @@
             class="text-sm"
             @click="
               () => {
-                selectDate(getDate(), false, true)
+                selectDate(getDate(), true)
                 togglePopover()
               }
             "
@@ -69,12 +71,12 @@
 
         <!-- Date Picker -->
         <div
-          class="flex flex-col items-center justify-center p-1 text-gray-800"
+          class="flex flex-col items-center justify-center p-1 text-ink-gray-8"
         >
           <div class="flex items-center text-xs uppercase">
             <div
               class="flex h-6 w-8 items-center justify-center text-center"
-              v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
+              v-for="(d, i) in ['s', 'm', 't', 'w', 't', 'f', 's']"
               :key="i"
             >
               {{ d }}
@@ -88,12 +90,12 @@
             <div
               v-for="date in week"
               :key="toValue(date)"
-              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
+              class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-surface-gray-2"
               :class="{
-                'text-gray-400': date.getMonth() !== currentMonth - 1,
-                'font-extrabold text-gray-900':
+                'text-ink-gray-3': date.getMonth() !== currentMonth - 1,
+                'font-extrabold text-ink-gray-9':
                   toValue(date) === toValue(today),
-                'bg-gray-800 text-white hover:bg-gray-800':
+                'bg-surface-gray-6 text-ink-white hover:bg-surface-gray-6':
                   toValue(date) === dateValue,
               }"
               @click="
@@ -187,16 +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 } 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>()
@@ -211,50 +214,56 @@ const {
   nextMonth,
 } = useDatePicker()
 
+const marginClass = computed(() => {
+  let _marginClass = 'mt-2'
+  if (props.placement?.startsWith('top')) {
+    _marginClass = 'mb-2'
+  } else if (props.placement?.startsWith('left')) {
+    _marginClass = 'mr-2'
+  } else if (props.placement?.startsWith('right')) {
+    _marginClass = 'ml-2'
+  }
+  return _marginClass
+})
+
 const hour = ref<number>(0)
 const minute = ref<number>(0)
 const second = ref<number>(0)
 
 const dateValue = computed(() => {
-  return props.value ? props.value : props.modelValue
+  let date = props.value ? props.value : props.modelValue
+  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 =
-      dateValue.value && !isNow ? getDate(dateValue.value) : getDate()
-    hour.value = currentDate.getHours()
-    minute.value = currentDate.getMinutes()
-    second.value = currentDate.getSeconds()
+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', toValue(date))
-  emit('update:modelValue', 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 ''
 
-  if (typeof date === 'string') {
-    date = new Date(date)
-  }
-
-  date.setHours(hour.value, minute.value, second.value, 0)
-  // "YYYY-MM-DD HH:MM:SS"
-  return `${date.getFullYear()}-${twoDigit(
-    date.getMonth() + 1,
-  )}-${twoDigit(date.getDate())} ${twoDigit(
-    date.getHours(),
-  )}:${twoDigit(date.getMinutes())}:${twoDigit(date.getSeconds())}`
+  // "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) {
@@ -266,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/{utils/dates.ts → components/DatePicker/utils.ts}

@@ -1,3 +1,5 @@
+import { dayjs } from '../../utils/dayjs'
+
 type DateConstructorParam = string | number | Date
 
 function getDate(...args: DateConstructorParam[]): Date {
@@ -7,18 +9,12 @@ function getDate(...args: DateConstructorParam[]): Date {
 function getDateValue(date: Date | string) {
   if (!date || date.toString() === 'Invalid Date') return ''
 
-  if (typeof date === 'string') {
-    date = new Date(date)
-  }
-
-  // toISOString is buggy and reduces the day by one
-  // this is because it considers the UTC timestamp
-  // in order to circumvent that we need to use luxon/moment
-  // but that refactor could take some time, so fixing the time difference
-  // as suggested in this answer.
-  // https://stackoverflow.com/a/16084846/3541205
-  date.setHours(0, -date.getTimezoneOffset(), 0, 0)
-  return date.toISOString().slice(0, 10)
+  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) {

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,6 +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 { 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/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