classcard-ui 0.2.1506 → 0.2.1508-beta.0

package/src/components/CInput/CInput.vue

@@ -1,227 +1,227 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <div class="flex items-center">
-        <!-- label of input field -->
-        <label class="block text-sm font-medium text-gray-900">
-          {{ label }}
-        </label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <!-- hint on the right side of input field -->
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div
-      :class="`relative h-9 ${
-        label || hint ? 'mt-1' : ''
-      } rounded-md ${inputWrapperClass}`"
-    >
-      <c-icon
-        v-if="isSearchEnabled"
-        name="search-outline-v2"
-        type="outline"
-        class="absolute top-2 left-2 h-5 w-5 flex-shrink-0 text-gray-400"
-      ></c-icon>
-      <input
-        :readonly="readonly"
-        :type="type"
-        :value="inputValue"
-        :id="id"
-        @input="handleInput"
-        @click="handleClick"
-        @blur="
-          $emit('blur', $event.target.value);
-          $emit('blurEvent', $event);
-        "
-        @focus="$emit('focus', $event.target.value)"
-        @keyup.enter="$emit('enter')"
-        :class="[
-          errorClasses,
-          customClasses ? customClasses : 'rounded-md',
-          isSearchEnabled ? 'pl-8' : '',
-          trailingIcon && isValidate ? 'pr-9' : '',
-        ]"
-        class="block w-full h-full flex-1 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :min="minValue"
-        :max="maxValue"
-      />
-      <!-- to render to show validation is failed -->
-      <div
-        v-if="!isValidate && !customIcon"
-        class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5 bg-white"></c-icon>
-      </div>
-      <!-- trailing info icon with optional tooltip; hidden when a validation error is shown so the error icon takes priority -->
-      <div
-        v-if="trailingIcon && isValidate"
-        class="absolute inset-y-0 right-0 flex items-center pr-3"
-      >
-        <span
-          tabindex="0"
-          class="relative flex items-center text-gray-400 focus:outline-none"
-          @mouseenter="showTrailingTooltip = true"
-          @mouseleave="showTrailingTooltip = false"
-          @focus="showTrailingTooltip = true"
-          @blur="showTrailingTooltip = false"
-        >
-          <c-icon
-            :name="trailingIcon"
-            :type="trailingIconType"
-            :viewBox="trailingIconViewBox || undefined"
-            :classes="`${trailingIconClass} `"
-            cursorType="cursor-pointer"
-          ></c-icon>
-          <c-tool-tip
-            v-if="showTrailingTooltip && trailingIconTooltip"
-            :tooltipText="trailingIconTooltip"
-            isTopAligned
-            classes="bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white"
-            color="#111827"
-          ></c-tool-tip>
-        </span>
-      </div>
-      <slot name="customIcon" v-if="customIcon"></slot>
-    </div>
-    <!-- validation error message -->
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-    <!-- description about the input field -->
-    <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import CToolTip from "../CToolTip/CToolTip.vue";
-export default {
-  name: "CInput",
-  components: { CIcon, CToolTip },
-  props: {
-    // Label of input field
-    label: {
-      type: String,
-    },
-    // Read only of input field
-    readonly: {
-      type: Boolean,
-    },
-    // placeholder of input
-    placeholder: {
-      type: String,
-    },
-    // v-model of the field
-    value: {
-      type: String,
-    },
-    // hint on right side of input
-    hint: { type: String },
-    // description about the field
-    helpText: {
-      type: String,
-    },
-    // validation is passed or not
-    isValidate: { type: Boolean },
-    // validation error message
-    errorMessage: {
-      type: String,
-    },
-    // to disable the input field
-    disabled: {
-      type: Boolean,
-    },
-    // whether the input field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    // type of input field
-    type: {
-      type: String,
-      default: "text",
-    },
-    customClasses: {
-      type: String,
-    },
-    customIcon: {
-      type: Boolean,
-      default: false,
-    },
-    minValue: {
-      type: Number,
-    },
-    maxValue: {
-      type: Number,
-    },
-    inputWrapperClass: {
-      type: String,
-      default: "",
-    },
-    id: {
-      type: String,
-    },
-    isSearchEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    // c-icon name to render at the right edge of the input
-    trailingIcon: {
-      type: String,
-    },
-    // type passed through to the trailing <c-icon :type>
-    trailingIconType: {
-      type: String,
-      default: "outline",
-    },
-    // tooltip text shown on hover/focus of the trailing icon
-    trailingIconTooltip: {
-      type: String,
-    },
-    // viewBox passed through to the trailing <c-icon>; only applied when provided
-    trailingIconViewBox: {
-      type: String,
-    },
-    // class bound on the trailing <c-icon> so callers control colour/size (positioning is preserved)
-    trailingIconClass: {
-      type: String,
-      default: "h-5 w-5 text-gray-400",
-    },
-  },
-  computed: {
-    errorClasses() {
-      return {
-        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
-          this.isValidate == false,
-        "border-gray-300": this.isValidate == true,
-      };
-    },
-  },
-  methods: {
-    handleInput(event) {
-      const value = event.target.value;
-      this.inputValue = value;
-      this.$emit("input", value);
-      this.$emit("getCursorIndex", event.target.selectionStart);
-    },
-    handleClick(event) {
-      this.$emit("getCursorIndex", event.target.selectionStart);
-    },
-  },
-  data() {
-    return {
-      inputValue: this.value,
-      showTrailingTooltip: false,
-    };
-  },
-  watch: {
-    value() {
-      this.inputValue = this.value;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="flex justify-between">
+      <div class="flex items-center">
+        <!-- label of input field -->
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+        <!-- asterisk sign to render if field is required -->
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <!-- hint on the right side of input field -->
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <div
+      :class="`relative h-9 ${
+        label || hint ? 'mt-1' : ''
+      } rounded-md ${inputWrapperClass}`"
+    >
+      <c-icon
+        v-if="isSearchEnabled"
+        name="search-outline-v2"
+        type="outline"
+        class="absolute top-2 left-2 h-5 w-5 flex-shrink-0 text-gray-400"
+      ></c-icon>
+      <input
+        :readonly="readonly"
+        :type="type"
+        :value="inputValue"
+        :id="id"
+        @input="handleInput"
+        @click="handleClick"
+        @blur="
+          $emit('blur', $event.target.value);
+          $emit('blurEvent', $event);
+        "
+        @focus="$emit('focus', $event.target.value)"
+        @keyup.enter="$emit('enter')"
+        :class="[
+          errorClasses,
+          customClasses ? customClasses : 'rounded-md',
+          isSearchEnabled ? 'pl-8' : '',
+          trailingIcon && isValidate ? 'pr-9' : '',
+        ]"
+        class="block w-full h-full flex-1 px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :min="minValue"
+        :max="maxValue"
+      />
+      <!-- to render to show validation is failed -->
+      <div
+        v-if="!isValidate && !customIcon"
+        class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-red-600"
+      >
+        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5 bg-white"></c-icon>
+      </div>
+      <!-- trailing info icon with optional tooltip; hidden when a validation error is shown so the error icon takes priority -->
+      <div
+        v-if="trailingIcon && isValidate"
+        class="absolute inset-y-0 right-0 flex items-center pr-3"
+      >
+        <span
+          tabindex="0"
+          class="relative flex items-center text-gray-400 focus:outline-none"
+          @mouseenter="showTrailingTooltip = true"
+          @mouseleave="showTrailingTooltip = false"
+          @focus="showTrailingTooltip = true"
+          @blur="showTrailingTooltip = false"
+        >
+          <c-icon
+            :name="trailingIcon"
+            :type="trailingIconType"
+            :viewBox="trailingIconViewBox || undefined"
+            :classes="`${trailingIconClass} `"
+            cursorType="cursor-pointer"
+          ></c-icon>
+          <c-tool-tip
+            v-if="showTrailingTooltip && trailingIconTooltip"
+            :tooltipText="trailingIconTooltip"
+            isTopAligned
+            classes="bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap bg-gray-900 text-white"
+            color="#111827"
+          ></c-tool-tip>
+        </span>
+      </div>
+      <slot name="customIcon" v-if="customIcon"></slot>
+    </div>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+    <!-- description about the input field -->
+    <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import CToolTip from "../CToolTip/CToolTip.vue";
+export default {
+  name: "CInput",
+  components: { CIcon, CToolTip },
+  props: {
+    // Label of input field
+    label: {
+      type: String,
+    },
+    // Read only of input field
+    readonly: {
+      type: Boolean,
+    },
+    // placeholder of input
+    placeholder: {
+      type: String,
+    },
+    // v-model of the field
+    value: {
+      type: String,
+    },
+    // hint on right side of input
+    hint: { type: String },
+    // description about the field
+    helpText: {
+      type: String,
+    },
+    // validation is passed or not
+    isValidate: { type: Boolean },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
+    // to disable the input field
+    disabled: {
+      type: Boolean,
+    },
+    // whether the input field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
+    // type of input field
+    type: {
+      type: String,
+      default: "text",
+    },
+    customClasses: {
+      type: String,
+    },
+    customIcon: {
+      type: Boolean,
+      default: false,
+    },
+    minValue: {
+      type: Number,
+    },
+    maxValue: {
+      type: Number,
+    },
+    inputWrapperClass: {
+      type: String,
+      default: "",
+    },
+    id: {
+      type: String,
+    },
+    isSearchEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    // c-icon name to render at the right edge of the input
+    trailingIcon: {
+      type: String,
+    },
+    // type passed through to the trailing <c-icon :type>
+    trailingIconType: {
+      type: String,
+      default: "outline",
+    },
+    // tooltip text shown on hover/focus of the trailing icon
+    trailingIconTooltip: {
+      type: String,
+    },
+    // viewBox passed through to the trailing <c-icon>; only applied when provided
+    trailingIconViewBox: {
+      type: String,
+    },
+    // class bound on the trailing <c-icon> so callers control colour/size (positioning is preserved)
+    trailingIconClass: {
+      type: String,
+      default: "h-5 w-5 text-gray-400",
+    },
+  },
+  computed: {
+    errorClasses() {
+      return {
+        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
+          this.isValidate == false,
+        "border-gray-300": this.isValidate == true,
+      };
+    },
+  },
+  methods: {
+    handleInput(event) {
+      const value = event.target.value;
+      this.inputValue = value;
+      this.$emit("input", value);
+      this.$emit("getCursorIndex", event.target.selectionStart);
+    },
+    handleClick(event) {
+      this.$emit("getCursorIndex", event.target.selectionStart);
+    },
+  },
+  data() {
+    return {
+      inputValue: this.value,
+      showTrailingTooltip: false,
+    };
+  },
+  watch: {
+    value() {
+      this.inputValue = this.value;
+    },
+  },
+};
+</script>

package/src/components/CInput/index.js

@@ -1,3 +1,3 @@
-import CInput from './CInput.vue'
-
+import CInput from './CInput.vue'
+
 export default CInput