feat: introduces a date-time-picker component

Author: kelsos

package.json

@@ -92,6 +92,7 @@
   "peerDependencies": {
     "@vueuse/core": ">13.0.0",
     "@vueuse/shared": ">13.0.0",
+    "dayjs": ">=1.11.13 <12",
     "vue": ">=3.5.0"
   },
   "web-types": "dist/web-types.json",

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import RuiDateTimePicker from './RuiDateTimePicker.vue';
+
+function createWrapper(options: ComponentMountingOptions<typeof RuiDateTimePicker>) {
+  return mount(RuiDateTimePicker, { ...options });
+}
+
+describe('date-time-picker/RuiDateTimePicker', () => {
+  it('renders properly', () => {
+    const wrapper = createWrapper({});
+
+    expect(wrapper.exists()).toBeTruthy();
+  });
+});

src/components/date-time-picker/RuiDateTimePicker.spec.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
+import { TimeAccuracy } from '@/consts/time-accuracy';
+import RuiDateTimePicker from './RuiDateTimePicker.vue';
+
+const render: StoryFn<typeof RuiDateTimePicker> = args => ({
+  components: { RuiDateTimePicker },
+  setup() {
+    return { args };
+  },
+  template: `<RuiDateTimePicker v-bind="args" />`,
+});
+
+const meta: Meta<typeof RuiDateTimePicker> = {
+  argTypes: {
+    'accuracy': {
+      control: 'select',
+      options: [TimeAccuracy.SECOND, TimeAccuracy.MINUTE, TimeAccuracy.MILLISECOND],
+      table: {
+        defaultValue: {
+          summary: TimeAccuracy.MINUTE,
+        },
+      },
+    },
+    'modelValue': {
+      control: 'date',
+    },
+    'onUpdate:modelValue': {
+      action: 'update:modelValue',
+    },
+  },
+  component: RuiDateTimePicker,
+  render,
+  tags: ['autodocs'],
+  title: 'Components/DateTimePicker',
+};
+
+type Story = StoryObj<typeof RuiDateTimePicker>;
+
+export const Default: Story = {
+  args: {
+    modelValue: new Date(),
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    accuracy: TimeAccuracy.SECOND,
+    modelValue: new Date(),
+    variant: 'outlined',
+  },
+};
+
+export default meta;