@veritree/ui 0.19.2-10 → 0.19.2-11

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/mixins/form-control.js

@@ -0,0 +1,67 @@
+export const formControlMixin = {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [String, Number, Object, Array],
+      default: null,
+    },
+    variant: {
+      type: [String, Object, Function],
+      default: '',
+    },
+  },
+
+  computed: {
+    attrsComputed() {
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign(
+        {},
+        // We add all the listeners from the parent
+        this.$attrs,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          onInput: (event) => {
+            // if (this.lazy) return;
+            this.$emit('update:modelValue', event.target.value);
+          },
+          onBlur: (event) => {
+            this.$emit('blur', event);
+          },
+        }
+      );
+    },
+
+    classComputed() {
+      return [
+        this.headless
+          ? `${this.name}`
+          : 'leading-0 flex w-full max-w-full appearance-none items-center justify-between gap-3 rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-secondary-200',
+        // variant styles
+        this.headless
+          ? `${this.name}--${this.variant}`
+          : this.isError
+          ? 'border-error-300'
+          : 'border-gray-300',
+        // height styles
+        this.headless
+          ? null
+          : this.name === 'textarea'
+          ? 'min-h-10' // limit it because input type number height can be different from other input types
+          : 'h-10',
+      ];
+    },
+
+    isError() {
+      return this.variant === 'error';
+    },
+  },
+};

package/package.json

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

package/src/components/Form/VTFormGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="as" :class="classes" class="form-group">
+  <component :is="as" :class="[headless ? 'form-control' : 'mt-3']">
     <slot></slot>
   </component>
 </template>
@@ -11,12 +11,10 @@ export default {
       type: String,
       default: 'div',
     },
-  },
-
-  data() {
-    return {
-      classes: {},
-    };
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>

package/src/components/Form/VTFormLabel.vue

@@ -0,0 +1,20 @@
+<template>
+  <label
+    :class="[
+      headless ? 'form-label' : 'font-semibold mb-1 flex justify-between gap-3',
+    ]"
+  >
+    <slot />
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Form/VTInput.vue

@@ -0,0 +1,40 @@
+<template>
+  <input
+    :class="classComputed"
+    :value="modelValue"
+    :disabled="disabled"
+    v-bind="attrsComputed"
+  />
+</template>
+
+<script>
+import { formControlMixin } from '../../../mixins/form-control';
+
+export default {
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'input',
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* input[type='date']::-webkit-inner-spin-button,
+input[type='date']::-webkit-calendar-picker-indicator {
+  position: absolute;
+  opacity: 0;
+} */
+
+input[type='number'] {
+  appearance: textfield;
+}
+
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+}
+</style>

package/src/components/Form/VTInputIcon.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="value"
+      :disabled="disabled"
+      v-bind="attrsComputed"
+    />
+    <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,49 @@
+<template>
+  <div :class="classComputedWrapper">
+    <input
+      :class="classComputed"
+      :value="modelValue"
+      :disabled="disabled"
+      :type="reveal ? 'text' : 'password'"
+      v-bind="attrsComputed"
+    />
+    <div :class="classComputedWrapperIcon">
+      <VTButton
+        v-show="modelValue.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/VTTextarea.vue

@@ -0,0 +1,22 @@
+<template>
+  <textarea
+    :class="classComputed"
+    :value="value"
+    :disabled="disabled"
+    v-bind="attrsComputed"
+  />
+</template>
+
+<script>
+import { formControlMixin } from '../../../mixins/form-control';
+
+export default {
+  mixins: [formControlMixin],
+
+  data() {
+    return {
+      name: 'textarea',
+    };
+  },
+};
+</script>