@veritree/ui 0.46.0 → 0.48.0

package/mixins/floating-ui.js

@@ -1,6 +1,13 @@
 import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 
 export const floatingUiMixin = {
+  props: {
+    offset: {
+      type: [Number, String],
+      default: 5,
+    },
+  },
+
   data() {
     return {
       component: null,
@@ -40,7 +47,7 @@ export const floatingUiMixin = {
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
-          offset(5),
+          offset(Number(this.offset)),
           flip(),
           shift({ padding: 5 }),
           size({

package/mixins/form-control.js

@@ -70,6 +70,12 @@ export const formControlStyleMixin = {
           : this.name === 'textarea'
           ? 'min-h-10' // limit it because input type number height can be different from other input types
           : 'h-10',
+        // disabled styles
+        this.disabled
+          ? this.headless
+            ? `${this.name}--disabled`
+            : 'bg-gray-100'
+          : null,
       ];
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInputDate.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="relative">
+    <input
+      type="date"
+      :class="classComputed"
+      :value="date"
+      :disabled="disabled"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <span
+      class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none"
+      :class="[disabled ? 'bg-gray-100' : 'bg-white']"
+      ><IconCalendar class="-z-0 scale-90 text-gray-500"
+    /></span>
+  </div>
+</template>
+
+<script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
+
+export default {
+  name: 'VTInputDate',
+
+  mixins: [formControlMixin, formControlStyleMixin],
+
+  computed: {
+    date: {
+      get() {
+        return this.value ? this.$date.format(this.value, 'YYYY-MM-DD') : null;
+      },
+      set(newDate) {
+        this.$emit('input', newDate);
+      },
+    },
+  },
+};
+</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/Tooltip/VTTooltip.vue

@@ -18,18 +18,30 @@ export default {
       type: [String, Number],
       default: 500,
     },
+    /**
+     * Determines whether the button will use its default atomic style (tailwind) or its default class
+     * @type {boolean}
+     * @values
+     * - true: The button will have no default style and can be fully customized with a custom class
+     * - false: The button will use its default atomic style (tailwind) and can be further customized with additional classes
+     * @default null
+     */
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The placement of the component relative to its trigger element.
+     * @type {string}
+     * @values 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
+     * @default 'bottom-start'
+     */
     placement: {
       type: String,
       default: 'bottom',
     },
   },
 
-  data() {
-    return {
-      floatingUiMinWidth: 0,
-    };
-  },
-
   provide() {
     return {
       apiTooltip: () => {
@@ -59,6 +71,7 @@ export default {
   data() {
     return {
       componentId: genId(),
+      floatingUiMinWidth: 0,
     };
   },
 };