@veritree/ui 0.21.1-10 → 0.21.1-11

package/index.js

@@ -21,6 +21,9 @@ import VTPopoverItem from "./src/components/Popover/VTPopoverItem.vue";
 import VTPopoverTrigger from "./src/components/Popover/VTPopoverTrigger.vue";
 import VTFormFeedback from "./src/components/Form/VTFormFeedback.vue";
 import VTFormGroup from "./src/components/Form/VTFormGroup.vue";
+import VTInput from "./src/components/Form/VTInput.vue";
+import VTInputIcon from "./src/components/Form/VTInputIcon.vue";
+import VTInputPassword from "./src/components/Form/VTInputPassword.vue";
 import VTListbox from "./src/components/Listbox/VTListbox.vue";
 import VTListboxContent from "./src/components/Listbox/VTListboxContent.vue";
 import VTListboxItem from "./src/components/Listbox/VTListboxItem.vue";
@@ -29,7 +32,6 @@ import VTListboxList from "./src/components/Listbox/VTListboxList.vue";
 import VTListboxSearch from "./src/components/Listbox/VTListboxSearch.vue";
 import VTListboxTrigger from "./src/components/Listbox/VTListboxTrigger.vue";
 import VTSpinner from "./src/components/Spinner/VTSpinner.vue";
-import VTInput from "./src/components/Input/VTInput.vue";
 import VTInputDate from "./src/components/Input/VTInputDate.vue";
 import VTInputFile from "./src/components/Input/VTInputFile.vue";
 import VTInputUpload from "./src/components/Input/VTInputUpload.vue";
@@ -96,6 +98,8 @@ export {
   VTListboxTrigger,
   VTButton,
   VTInput,
+  VTInputIcon,
+  VTInputPassword,
   VTInputDate,
   VTInputFile,
   VTInputUpload,

package/mixins/form-control-icon.js

@@ -0,0 +1,53 @@
+import { formControlMixin } from '../mixins/form-control';
+
+export const formControlIconMixin = {
+  inheritAttrs: false,
+
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'input',
+    };
+  },
+
+  computed: {
+    isLeft() {
+      return this.iconPlacement === 'left';
+    },
+
+    isRight() {
+      return this.iconPlacement === 'right';
+    },
+
+    classComputedWrapper() {
+      return [
+        this.headless ? 'form-control-wrapper' : 'relative',
+        // placement styles
+        this.headless
+          ? `form-control-icon--${this.placement}`
+          : this.isLeft
+          ? '[&_input]:pl-9'
+          : this.isRight
+          ? '[&_input]:pr-9'
+          : null,
+      ];
+    },
+
+    classComputedWrapperIcon() {
+      return [
+        this.headless
+          ? 'form-control-wrapper__icon'
+          : `absolute top-0 bottom-0 flex w-9 justify-center items-center text-gray-400`,
+        // placement styles
+        this.headless
+          ? null
+          : this.isLeft
+          ? 'left-0'
+          : this.isRight
+          ? 'right-0'
+          : null,
+      ];
+    },
+  },
+};

package/package.json

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

package/src/components/Form/VTInput.vue

@@ -22,11 +22,11 @@ export default {
 </script>
 
 <style scoped>
-input[type='date']::-webkit-inner-spin-button,
+/* input[type='date']::-webkit-inner-spin-button,
 input[type='date']::-webkit-calendar-picker-indicator {
   position: absolute;
   opacity: 0;
-}
+} */
 
 input[type='number'] {
   appearance: textfield;

package/src/components/Form/VTInputIcon.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <div :class="classComputedWrapperIcon">
+      <component :is="icon" class="h-5 w-5" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputIcon',
+
+  mixins: [formControlIconMixin],
+
+  props: {
+    icon: {
+      type: String,
+      default: null,
+      required: true,
+    },
+    iconPlacement: {
+      type: String,
+      default: 'left',
+    },
+  },
+};
+</script>

package/src/components/Form/VTInputPassword.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      :type="reveal ? 'text' : 'password'"
+      v-bind="$attrs"
+      v-on="listeners"
+    />
+    <div :class="classComputedWrapperIcon">
+      <VTButton v-show="value.length" variant="icon" @click="reveal = !reveal">
+        <component :is="iconVisibility" class="h-5 w-5" />
+      </VTButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formControlIconMixin } from '../../../mixins/form-control-icon';
+
+export default {
+  name: 'VTInputPassword',
+
+  mixins: [formControlIconMixin],
+
+  props: {
+    iconPlacement: {
+      type: String,
+      default: 'right',
+    },
+  },
+
+  data() {
+    return {
+      reveal: false,
+    };
+  },
+
+  computed: {
+    iconVisibility() {
+      return this.reveal ? 'IconVisibilityOn' : 'IconVisibilityOff';
+    },
+  },
+};
+</script>

package/src/components/Form/VTInputQty.vue

@@ -1,165 +0,0 @@
-<template>
-  <div>
-    <input
-      ref="input"
-      v-bind="$attrs"
-      type="number"
-      :class="classComputed"
-      :value="value"
-      :disabled="disabled"
-      @blur="onBlur"
-      @change="onChange"
-      @keypress="isNumber"
-    />
-    <div v-if="!hideArrows">
-      <VTButton
-        variant="secondary"
-        :disabled="qty >= max"
-        tabindex="-1"
-        @click="increase"
-      >
-        <IconChevronUp text="Increase" />
-      </VTButton>
-      <VTButton
-        variant="secondary"
-        :disabled="qty <= min"
-        tabindex="-1"
-        @click="decrease"
-      >
-        <IconChevronDown text="Increase" />
-      </VTButton>
-    </div>
-  </div>
-</template>
-
-<script>
-import { formControlMixin } from '../../../mixins/form-control';
-
-export default {
-  mixins: [formControlMixin],
-
-  inheritAttrs: false,
-
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-
-  props: {
-    hideArrows: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: [String, Number],
-      default: 0,
-    },
-    step: {
-      type: [Number],
-      default: 1,
-    },
-    allowDecimal: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  data() {
-    return {
-      decimalPlaces: this.setDecimalPlaces(this.value),
-      // id: 'qty-' + this._uid,
-    };
-  },
-
-  computed: {
-    numberAllowedKeys() {
-      const allowed = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-      if (this.allowDecimal) allowed.push('.');
-      return allowed;
-    },
-
-    qty: {
-      get() {
-        return this.value;
-      },
-      set(newVal) {
-        this.$emit('input', Number(newVal));
-        this.$emit('change');
-      },
-    },
-
-    min() {
-      return this.$attrs.min ? this.$attrs.min : 0;
-    },
-
-    max() {
-      return this.$attrs.max ? this.$attrs.max : Number.MAX_VALUE;
-    },
-
-    internalStep() {
-      if (this.step && this.step > 0) return this.step;
-      if (!this.decimalPlaces) return 1;
-
-      const decimalStep = '1'.padStart(this.decimalPlaces, '0');
-      return parseFloat('0.' + decimalStep);
-    },
-  },
-
-  methods: {
-    increase() {
-      this.qty = (
-        isNaN(parseFloat(this.qty))
-          ? 0
-          : parseFloat(this.qty) + this.internalStep
-      ).toFixed(this.decimalPlaces);
-    },
-
-    decrease() {
-      this.qty = (
-        isNaN(parseFloat(this.qty))
-          ? 0
-          : parseFloat(this.qty) - this.internalStep
-      ).toFixed(this.decimalPlaces);
-    },
-
-    /**
-     * Checks if key pressed is a number (0-9)
-     * TODO: combine validation with input price
-     *
-     * @param {object} - event
-     */
-    isNumber(ev) {
-      const key = ev.key;
-
-      if (!this.numberAllowedKeys.includes(key)) ev.preventDefault();
-    },
-
-    canUpdateQty(value) {
-      return value >= this.min && value <= this.max;
-    },
-
-    setDecimalPlaces(typedValue) {
-      this.decimalPlaces = typedValue.toString().includes('.')
-        ? typedValue.toString().split('.')[1].length
-        : 0;
-    },
-
-    onChange(event) {
-      // const input = event.target;
-      //
-      // if (this.canUpdateQty(input.value)) {
-      //   this.setDecimalPlaces(input.value);
-      //   this.qty = input.value;
-      //   return;
-      // }
-      //
-      // if (input.value < this.min) input.value = this.min;
-      // if (input.value > this.max) input.value = this.max;
-    },
-
-    onBlur(event) {
-      this.$emit('blur', event);
-    },
-  },
-};
-</script>