chore: improve datetime wip

Author: cab-mikee

docs/.vitepress/theme/components/DateInputDemo.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { TSInputs } from 'ts-inputs-vue'
+import { BaseInputs } from 'ts-inputs-vue'
 import { ref } from 'vue'
 
 const date = ref('')
 </script>
 
 <template>
-  <TSInputs
+  <BaseInputs
     v-model="date"
     type="date"
     class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"

packages/vue/package.json

@@ -35,16 +35,15 @@
     "lint": "bunx --bun eslint .",
     "lint:fix": "bunx --bun eslint . --fix"
   },
-  "dependencies": {
-    "@types/google.maps": "^3.58.1",
-    "date-fns": "^3.6.0"
-  },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.52.5",
+    "@microsoft/api-extractor": "^7.52.4",
     "@stacksjs/docs": "^0.70.23",
+    "@types/google.maps": "^3.58.1",
     "@vue/tsconfig": "^0.7.0",
     "bumpp": "^10.1.0",
     "bun-plugin-dtsx": "^0.21.9",
-    "changelogen": "^0.6.1"
+    "changelogen": "^0.6.1",
+    "clean-css": "^5.3.3",
+    "date-fns": "^3.3.1"
   }
 }

packages/vue/src/components/TSInputs.vue renamed to packages/vue/src/components/BaseInputs.vue

@@ -2,9 +2,8 @@
 import type { TSInputsProps } from '../types'
 import { format } from 'date-fns'
 import { ref, watch } from 'vue'
-import DpCalendar from './datetime-picker/components/DatePicker/DpCalendar.vue'
-import DpHeader from './datetime-picker/components/DatePicker/DpHeader.vue'
-import TimePicker from './datetime-picker/components/TimePicker/TimePicker.vue'
+
+import DateTimePicker from './datetime-picker/DateTimePicker.vue'
 
 const props = defineProps<TSInputsProps>()
 const emit = defineEmits<{
@@ -112,8 +111,9 @@ function handleTimeUpdate(value: { hours: number, minutes: number, seconds: numb
 </script>
 
 <template>
-  <div class="ts-inputs-wrapper">
+  <div class="base-inputs-wrapper">
     <input
+      v-if="type !== 'date'"
       ref="inputRef"
       v-model="formattedValue"
       :type="type === 'text' ? 'text' : 'text'"
@@ -125,45 +125,13 @@ function handleTimeUpdate(value: { hours: number, minutes: number, seconds: numb
     >
 
     <!-- Date Picker -->
-    <div v-if="type === 'date' && showDatePicker" class="date-picker-container">
-      <DpHeader
-        :month="month"
-        :year="year"
-        @update-month-year="handleMonthYearUpdate"
-      />
-      <DpCalendar
-        :days="[]"
-        :month="month"
-        :year="year"
-        @select-date="handleDateSelect"
-      />
-      <TimePicker
-        v-if="props.enableTimePicker"
-        :time="time"
-        @update-time="handleTimeUpdate"
-      />
-    </div>
+    <DateTimePicker v-if="type === 'date'" :class="className" v-model="formattedValue" range />
   </div>
 </template>
 
 <style>
-.dp__calendar {
-  display: flex;
-  flex-direction: column;
-  background-color: red;
-}
-
-.ts-inputs-wrapper {
+.base-inputs-wrapper {
   position: relative;
   display: inline-block;
 }
-
-.date-picker-container {
-  position: absolute;
-  z-index: 1000;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
 </style>

packages/vue/src/components/common/BaseInput.vue

@@ -677,21 +677,6 @@ defineExpose({
   --dp-loader: 5px solid #1976d2;
 }
 
-.dp__flex {
-  display: flex;
-  align-items: center;
-}
-
-.dp__btn {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font-family: var(--dp-font-family);
-  color: var(--dp-text-color);
-}
-
 .dp__main {
   font-family: var(--dp-font-family);
   user-select: none;
@@ -704,120 +689,29 @@ defineExpose({
   direction: var(--dp-direction, ltr);
 }
 
-.dp__pointer {
-  cursor: pointer;
-}
-
-.dp__icon {
-  stroke: currentcolor;
-  fill: currentcolor;
-}
-
-.dp__button {
-  width: 100%;
-  text-align: center;
-  color: var(--dp-icon-color);
-  cursor: pointer;
+.dp__flex_display {
   display: flex;
-  align-items: center;
-  place-content: center center;
-  padding: var(--dp-common-padding);
-  box-sizing: border-box;
-  height: var(--dp-button-height);
-}
-
-.dp__button.dp__overlay_action {
-  position: absolute;
-  bottom: 0;
-}
-
-.dp__button:hover {
-  background: var(--dp-hover-color);
-  color: var(--dp-hover-icon-color);
-}
-
-.dp__button svg {
-  height: var(--dp-button-icon-height);
-  width: auto;
-}
-
-.dp__button_bottom {
-  border-bottom-left-radius: var(--dp-border-radius);
-  border-bottom-right-radius: var(--dp-border-radius);
 }
 
-.dp__flex_display {
-  display: flex;
+.dp--flex-display-collapsed {
+  flex-direction: column;
 }
 
 .dp__flex_display_with_input {
   flex-direction: column;
   align-items: flex-start;
 }
 
-.dp__relative {
+.dp__outer_menu_wrap {
   position: relative;
 }
 
-.calendar-next-enter-active,
-.calendar-next-leave-active,
-.calendar-prev-enter-active,
-.calendar-prev-leave-active {
-  transition: all var(--dp-transition-timing-general) ease-out;
-}
-
-.calendar-next-enter-from {
-  opacity: 0;
-  transform: translateX(var(--dp-transition-length));
-}
-
-.calendar-next-leave-to {
-  opacity: 0;
-  transform: translateX(calc(var(--dp-transition-length) * -1));
-}
-
-.calendar-prev-enter-from {
-  opacity: 0;
-  transform: translateX(calc(var(--dp-transition-length) * -1));
-}
-
-.calendar-prev-leave-to {
-  opacity: 0;
-  transform: translateX(var(--dp-transition-length));
-}
-
-.dp-menu-appear-bottom-enter-active,
-.dp-menu-appear-bottom-leave-active,
-.dp-menu-appear-top-enter-active,
-.dp-menu-appear-top-leave-active,
-.dp-slide-up-enter-active,
-.dp-slide-up-leave-active,
-.dp-slide-down-enter-active,
-.dp-slide-down-leave-active {
-  transition: all var(--dp-animation-duration) var(--dp-transition-timing);
-}
-
-.dp-menu-appear-top-enter-from,
-.dp-menu-appear-top-leave-to,
-.dp-slide-down-leave-to,
-.dp-slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(var(--dp-transition-length));
-}
-
-.dp-menu-appear-bottom-enter-from,
-.dp-menu-appear-bottom-leave-to,
-.dp-slide-down-leave-to,
-.dp-slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(calc(var(--dp-transition-length) * -1));
-}
-
-.dp--arrow-btn-nav {
-  transition: var(--dp-common-transition);
-}
-
-.dp--highlighted {
-  background-color: var(--dp-highlight-color);
+.dp--menu-wrapper {
+  position: absolute;
+  z-index: 1000;
+  background: var(--dp-background-color);
+  border-radius: var(--dp-border-radius);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--dp-border-color);
 }
 </style>