@veritree/ui 0.85.0 → 0.87.0

package/mixins/form-control.js

@@ -5,6 +5,10 @@ export const formControlMixin = {
   },
 
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
     disabled: {
       type: Boolean,
       default: false,

package/package.json

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

package/src/components/Form/VTInput.vue

@@ -19,6 +19,13 @@ export default {
 
   mixins: [formControlMixin, formControlStyleMixin],
 
+  props: {
+    dataTestId: {
+      type: String,
+      default: null,
+    },
+  },
+
   data() {
     return {
       name: 'input',

package/src/components/Form/VTInputDate.vue

@@ -1,7 +1,13 @@
 <template>
   <VTPopover>
     <VTPopoverTrigger ref="trigger">
-      <button :class="classComputed" :disabled="disabled" @click.prevent>
+      <button
+        :id="id"
+        :class="classComputed"
+        :data-testid="dataTestid"
+        :disabled="disabled"
+        @click.prevent
+      >
         <span v-if="valueModel">{{ valueModelFormatted }}</span>
         <span class="text-gray-500" v-else>{{ format }}</span>
         <span
@@ -66,6 +72,10 @@ export default {
   },
 
   props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     disabledDates: {
       type: [Function, Object],
       default: null,

package/src/components/Form/VTInputNumber.vue

@@ -4,7 +4,9 @@
       currencySymbol
     }}</span>
     <input
+      :id="id"
       v-model="valueFormatted"
+      :data-testid="dataTestid"
       :disabled="disabled"
       :inputmode="inputmode"
       :placeholder="placeholder"
@@ -35,6 +37,10 @@ export default {
   },
 
   props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     currency: {
       type: String,
       default: 'USD',

package/src/components/Form/VTInputRanger.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="range-slider" :style="style">
+    <input
+      :id="id"
+      v-model.number="computedValue"
+      :data-testid="dataTestid"
+      :min="min"
+      :max="max"
+      :step="step"
+      type="range"
+      @input="onInput"
+      @change="onChange"
+    />
+    <div class="range-slider-track" aria-hidden />
+    <div ref="thumb" class="range-slider-thumb" aria-hidden />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTInputRanger',
+
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+    step: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  data() {
+    return {
+      thumbSize: null,
+    };
+  },
+
+  computed: {
+    computedValue: {
+      get() {
+        return Number(this.value);
+      },
+      set(value) {
+        this.$emit('input', value);
+      },
+    },
+
+    percentage() {
+      return ((this.computedValue - this.min) / (this.max - this.min)) * 100;
+    },
+
+    style() {
+      return {
+        '--value': `${this.percentage}%`,
+        '--thumb-left-position': `calc(${this.percentage}% - ${this.thumbSize * (this.percentage / 100)}px)`,
+      };
+    },
+  },
+
+  mounted() {
+    this.thumbSize = 20;
+  },
+
+  methods: {
+    onInput(e) {
+      this.computedValue = e.target.value;
+    },
+
+    onChange(e) {
+      console.log(e.target);
+    },
+  },
+};
+</script>

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     :id="id"
+    :data-testid="dataTestid"
     :class="triggerClassComputed"
     :disabled="isDisabled"
     :aria-expanded="expanded"
@@ -47,6 +48,10 @@ export default {
   inject: ['apiListbox'],
 
   props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     role: {
       type: String,
       default: 'combobox',
@@ -69,8 +74,8 @@ export default {
   },
 
   computed: {
-    id() {
-      return `listbox-trigger-${this.apiListbox().id}`;
+    idComputed() {
+      return this.id || `listbox-trigger-${this.apiListbox().id}`;
     },
 
     componentContent() {

package/src/components/Modal/VTModal.vue

@@ -1,69 +0,0 @@
-<template>
-  <transition
-    enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
-    leave-to-class="transform opacity-0"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave"
-  >
-    <div
-      v-if="visible"
-      class="bg-fd-700/75 fixed inset-0 z-50 flex flex-col justify-center"
-      tabindex="-1"
-      @keyup.esc="close"
-      @click="close"
-    >
-      <div
-        class="relative mx-auto flex max-w-lg flex-col justify-center rounded bg-white"
-        @click.stop
-      >
-        <div class="absolute right-4 top-4">
-          <VTButton variant="icon" @click.prevent="close"
-            ><IconClose class="h-4 w-4"
-          /></VTButton>
-        </div>
-        <slot></slot>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { IconClose } from '@veritree/icons';
-import VTButton from '../Button/VTButton.vue';
-
-export default {
-  name: 'VTModal',
-
-  components: { IconClose, VTButton },
-
-  model: {
-    prop: 'visible',
-  },
-
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  methods: {
-    close() {
-      this.$emit('input', false);
-    },
-
-    afterEnter() {
-      this.$emit('shown');
-      this.$nextTick(() => this.$el.focus());
-    },
-
-    afterLeave() {
-      this.$emit('hidden');
-    },
-  },
-};
-</script>