@veritree/ui 0.75.0 → 0.75.1-0

package/mixins/form-control.js

@@ -14,7 +14,7 @@ export const formControlMixin = {
       default: false,
     },
     value: {
-      type: [String, Number, Object, Array],
+      type: [String, Number, Object, Array, Date],
       default: null,
     },
     variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.75.0",
+  "version": "0.75.1-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -17,7 +17,8 @@
   "dependencies": {
     "@floating-ui/dom": "^1.2.0",
     "@linusborg/vue-simple-portal": "^0.1.5",
-    "@veritree/icons": "^0.60.0"
+    "@veritree/icons": "^0.60.0",
+    "v-calendar": "^2.4.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.10",

package/src/components/Form/VTInputDate.vue

@@ -1,19 +1,27 @@
 <template>
-  <div class="relative">
-    <input
-      type="date"
-      :class="classComputed"
-      :value="date"
-      :disabled="disabled"
-      v-bind="$attrs"
-      v-on="listeners"
-    />
-    <span
-      class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
-      :class="[disabled ? 'bg-gray-100' : 'bg-white']"
-      ><IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600"
-    /></span>
-  </div>
+  <VTPopover>
+    <VTPopoverTrigger ref="trigger">
+      <button :class="classComputed" :disabled="disabled">
+        <span>{{ date }}</span>
+        <span
+          class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
+          :class="[disabled ? 'bg-gray-100' : 'bg-white']"
+        >
+          <IconCalendar class="-z-0 h-5 w-5 scale-90 text-gray-600" />
+        </span>
+      </button>
+    </VTPopoverTrigger>
+    <VTPopoverContent>
+      <DatePicker
+        v-model="date"
+        :min-date="min"
+        :max-date="max"
+        color="null"
+        class="min-w-full"
+        @dayclick="onDayClick"
+      />
+    </VTPopoverContent>
+  </VTPopover>
 </template>
 
 <script>
@@ -21,27 +29,49 @@ import {
   formControlMixin,
   formControlStyleMixin,
 } from '../../../mixins/form-control';
+import VTPopover from './../Popover/VTPopover.vue';
+import VTPopoverTrigger from './../Popover/VTPopoverTrigger.vue';
+import VTPopoverContent from './../Popover/VTPopoverContent.vue';
+import DatePicker from 'v-calendar/lib/components/date-picker.umd';
 
 export default {
   name: 'VTInputDate',
 
   mixins: [formControlMixin, formControlStyleMixin],
 
+  components: {
+    VTPopover,
+    VTPopoverTrigger,
+    VTPopoverContent,
+    DatePicker,
+  },
+
+  props: {
+    min: {
+      type: [String, Date],
+      default: null,
+    },
+    max: {
+      type: [String, Date],
+      default: null,
+    },
+  },
+
   computed: {
     date: {
       get() {
-        return this.value ? this.$date.format(this.value, 'YYYY-MM-DD') : null;
+        return this.value ? new Date(this.value).toLocaleDateString() : null;
       },
       set(newDate) {
         this.$emit('input', newDate);
       },
     },
   },
+
+  methods: {
+    onDayClick() {
+      this.$refs.trigger.cancel();
+    },
+  },
 };
 </script>
-
-<style scoped lang="postcss">
-input[type='date']::-webkit-calendar-picker-indicator {
-  @apply absolute right-0 z-10 h-10 w-10 cursor-pointer opacity-0;
-}
-</style>

package/src/components/Input/VTInput.vue

@@ -1,82 +0,0 @@
-<template>
-  <input
-    :class="classes"
-    class="form-control"
-    :data-theme="theme"
-    :type="type"
-    :value="value"
-    v-on="listeners"
-  />
-</template>
-
-<script>
-export default {
-  name: 'VTInput',
-
-  props: {
-    lazy: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    variant: {
-      type: [String, Object],
-      default: '',
-      validator(value) {
-        if (value === '' || typeof value === 'object') {
-          return true;
-        }
-
-        return ['success', 'warning', 'error'].includes(value);
-      },
-    },
-    value: {
-      type: [String, Number, Object, Array],
-      default: null,
-    },
-  },
-
-  computed: {
-    classes() {
-      const classes = {};
-
-      if (this.variant) {
-        classes[`form-control--${this.variant}`] = true;
-      }
-
-      return classes;
-    },
-
-    listeners() {
-      // `Object.assign` merges objects together to form a new object
-      return Object.assign(
-        {},
-        // We add all the listeners from the parent
-        this.$listeners,
-        // Then we can add custom listeners or override the
-        // behavior of some listeners.
-        {
-          // This ensures that the component works with v-model
-          input: (event) => {
-            if (this.lazy) return;
-            this.$emit('input', event.target.value);
-          },
-          blur: (event) => {
-            this.$emit('blur', event);
-          },
-        }
-      );
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputDate.vue

@@ -1,36 +0,0 @@
-<template>
-  <VTInput v-model="date" type="date" @change="$emit('change')" />
-</template>
-
-<script>
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputDate',
-
-  components: { VTInput },
-
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    date: {
-      get() {
-        return this.$date.format(this.value, 'YYYY-MM-DD');
-      },
-      set(newDate) {
-        this.$emit('input', newDate);
-      },
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputFile.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="flex items-stretch gap-2">
-    <VTInput
-      ref="input"
-      type="file"
-      :value="value"
-      :theme="theme"
-      v-bind="$attrs"
-      @change="onChange"
-    />
-    <VTButton :theme="theme" @click.stop="onButtonClick">Browse</VTButton>
-  </div>
-</template>
-
-<script>
-import VTButton from '../Button/VTButton.vue';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    VTButton,
-  },
-
-  inheritAttrs: false,
-
-  props: {
-    theme: {
-      type: String,
-      default: null,
-      validator(value) {
-        return ['dark'].includes(value);
-      },
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      value: null,
-    };
-  },
-
-  methods: {
-    onChange(event) {
-      this.value = this.$refs.input.$el.value;
-      this.$emit('change', event);
-    },
-
-    onButtonClick() {
-      this.$refs.input.$el.click();
-    },
-  },
-};
-</script>

package/src/components/Input/VTInputUpload.vue

@@ -1,54 +0,0 @@
-<template>
-  <label
-    class="flex h-full w-full flex-col items-center justify-center rounded border-2 border-dotted border-white p-4 text-center hover:border-fl-500 hover:bg-fd-500"
-    :class="{ 'border-fl-500 bg-fd-500': isDraggingOver }"
-    @drop.prevent="onDrop"
-    @dragover.prevent="onDragOver"
-    @dragleave.prevent="onDragLeave"
-  >
-    <IconImagePlaceholder class="mb-3" />
-    <span>Drop your images here, or click to browse</span>
-    <VTInput type="file" class="sr-only" v-bind="$attrs" @change="onChange" />
-  </label>
-</template>
-
-<script>
-import { IconImagePlaceholder } from '@veritree/icons';
-import VTInput from './VTInput.vue';
-
-export default {
-  name: 'VTInputFile',
-
-  components: {
-    VTInput,
-    IconImagePlaceholder,
-  },
-
-  inheritAttrs: false,
-
-  data() {
-    return {
-      isDraggingOver: false,
-    };
-  },
-
-  methods: {
-    onDrop(event) {
-      this.isDraggingOver = false;
-      this.$emit('drop', event);
-    },
-
-    onDragOver() {
-      this.isDraggingOver = true;
-    },
-
-    onDragLeave() {
-      this.isDraggingOver = false;
-    },
-
-    onChange(event) {
-      this.$emit('change', event);
-    },
-  },
-};
-</script>