classcard-ui 0.2.510 → 0.2.511

package/src/components/CInputAddon/CInputAddon.vue

@@ -1,199 +1,199 @@
-<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="text-red-600 ml-1">*</p>
-      </div>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div v-if="!inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
-      <span
-        :class="disabled ? 'opacity-50' : ''"
-        v-if="addon"
-        class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
-      >
-        {{ addon }}
-      </span>
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="{ ...errorClasses, 'rounded-l-md': !addon }"
-        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-r-md sm:text-sm disabled:opacity-50 text-gray-900"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <div
-        v-if="!isValidate"
-        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-      </div>
-    </div>
-    <div v-if="!inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
-        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-l-md sm:text-sm disabled:opacity-50 text-gray-900"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <div
-        v-if="!isValidate"
-        class="absolute inset-y-0 right-14 pr-3 flex items-center pointer-events-none text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-      </div>
-      <span
-        :class="disabled ? 'opacity-50' : ''"
-        class="inline-flex items-center px-4 py-2 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
-      >
-        {{ addon }}
-      </span>
-    </div>
-    <div v-if="inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
-        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-md sm:text-sm disabled:opacity-50 text-gray-900"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
-        <div
-          v-if="!isValidate"
-          class="right-0 pr-2 flex items-center pointer-events-none text-red-600"
-        >
-          <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-        </div>
-        <span class="text-gray-500 sm:text-sm" :class="disabled ? 'opacity-50' : ''">
-          {{ addon }}
-        </span>
-      </div>
-    </div>
-    <div v-if="inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
-      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <span class="text-gray-500 sm:text-sm">{{ addon }}</span>
-      </div>
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
-        :style="`padding-left:${leftPaddingStyle}`"
-        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-md sm:text-sm disabled:opacity-50 text-gray-900"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <div
-        v-if="!isValidate"
-        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-      </div>
-    </div>
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600 text-left">
-      {{ errorMessage }}
-    </p>
-    <p v-if="helpText && isValidate == true" :class="`mt-2 text-sm ${helpTextColorStyles}`">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CInputAddon",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-    },
-    value: [String, Number],
-    hint: { type: String },
-    helpText: {
-      type: String,
-    },
-    addon: { type: String },
-    helpTextColor: {
-      type: String,
-      default: "gray",
-    },
-    inlineAddon: { type: Boolean },
-    addonType: {
-      type: String,
-    },
-    isValidate: { type: Boolean },
-    errorMessage: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    // whether the input field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    inputType: {
-      type: String,
-      default: "text",
-    },
-  },
-  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,
-      };
-    },
-    leftPaddingStyle() {
-      var leftPadding;
-      if (this.addon.length <= 2) {
-        leftPadding = "2rem";
-      } else if (this.addon.length >= 3) {
-        leftPadding = "3.5rem";
-      }
-      return leftPadding;
-    },
-    helpTextColorStyles() {
-      switch (this.helpTextColor) {
-        case "green":
-          return "text-green-500";
-        case "red":
-          return "text-red-500";
-        default:
-          return "text-gray-500";
-      }
-    },
-  },
-  data() {
-    return {
-      inputValue: this.value,
-    };
-  },
-  methods: {},
-  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="text-red-600 ml-1">*</p>
+      </div>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <div v-if="!inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
+      <span
+        :class="disabled ? 'opacity-50' : ''"
+        v-if="addon"
+        class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
+      >
+        {{ addon }}
+      </span>
+      <input
+        :type="inputType"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
+        :class="{ ...errorClasses, 'rounded-l-md': !addon }"
+        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-r-md sm:text-sm disabled:opacity-50 text-gray-900"
+        :placeholder="placeholder"
+        :disabled="disabled"
+      />
+      <div
+        v-if="!isValidate"
+        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-red-600"
+      >
+        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
+      </div>
+    </div>
+    <div v-if="!inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
+      <input
+        :type="inputType"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
+        :class="errorClasses"
+        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-l-md sm:text-sm disabled:opacity-50 text-gray-900"
+        :placeholder="placeholder"
+        :disabled="disabled"
+      />
+      <div
+        v-if="!isValidate"
+        class="absolute inset-y-0 right-14 pr-3 flex items-center pointer-events-none text-red-600"
+      >
+        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
+      </div>
+      <span
+        :class="disabled ? 'opacity-50' : ''"
+        class="inline-flex items-center px-4 py-2 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
+      >
+        {{ addon }}
+      </span>
+    </div>
+    <div v-if="inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
+      <input
+        :type="inputType"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
+        :class="errorClasses"
+        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-md sm:text-sm disabled:opacity-50 text-gray-900"
+        :placeholder="placeholder"
+        :disabled="disabled"
+      />
+      <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
+        <div
+          v-if="!isValidate"
+          class="right-0 pr-2 flex items-center pointer-events-none text-red-600"
+        >
+          <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
+        </div>
+        <span class="text-gray-500 sm:text-sm" :class="disabled ? 'opacity-50' : ''">
+          {{ addon }}
+        </span>
+      </div>
+    </div>
+    <div v-if="inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
+      <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+        <span class="text-gray-500 sm:text-sm">{{ addon }}</span>
+      </div>
+      <input
+        :type="inputType"
+        :value="inputValue"
+        @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
+        :class="errorClasses"
+        :style="`padding-left:${leftPaddingStyle}`"
+        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-md sm:text-sm disabled:opacity-50 text-gray-900"
+        :placeholder="placeholder"
+        :disabled="disabled"
+      />
+      <div
+        v-if="!isValidate"
+        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-red-600"
+      >
+        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
+      </div>
+    </div>
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600 text-left">
+      {{ errorMessage }}
+    </p>
+    <p v-if="helpText && isValidate == true" :class="`mt-2 text-sm ${helpTextColorStyles}`">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CInputAddon",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+    value: [String, Number],
+    hint: { type: String },
+    helpText: {
+      type: String,
+    },
+    addon: { type: String },
+    helpTextColor: {
+      type: String,
+      default: "gray",
+    },
+    inlineAddon: { type: Boolean },
+    addonType: {
+      type: String,
+    },
+    isValidate: { type: Boolean },
+    errorMessage: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    // whether the input field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
+    inputType: {
+      type: String,
+      default: "text",
+    },
+  },
+  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,
+      };
+    },
+    leftPaddingStyle() {
+      var leftPadding;
+      if (this.addon.length <= 2) {
+        leftPadding = "2rem";
+      } else if (this.addon.length >= 3) {
+        leftPadding = "3.5rem";
+      }
+      return leftPadding;
+    },
+    helpTextColorStyles() {
+      switch (this.helpTextColor) {
+        case "green":
+          return "text-green-500";
+        case "red":
+          return "text-red-500";
+        default:
+          return "text-gray-500";
+      }
+    },
+  },
+  data() {
+    return {
+      inputValue: this.value,
+    };
+  },
+  methods: {},
+  watch: {
+    value() {
+      this.inputValue = this.value;
+    },
+  },
+};
+</script>

package/src/components/CInputAddon/index.js

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

package/src/components/CInputEmail/CInputEmail.vue

@@ -1,84 +1,84 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <label class="block text-sm font-medium text-gray-900">
-        {{ label }}
-      </label>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div class="relative mt-1 rounded-md">
-      <input
-        type="text"
-        :class="errorClasses"
-        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        :placeholder="placeholder"
-        :value="email"
-        @blur="checkValidation"
-        @input="$emit('input', $event.target.value)"
-      />
-      <div
-        v-if="isValidate"
-        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"></c-icon>
-      </div>
-    </div>
-    <p v-if="isValidate" class="mt-2 text-sm text-red-600">Please enter valid email address</p>
-    <p v-if="helpText && isValidate == false" class="mt-2 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CInputEmail",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    placeholder: {
-      type: String,
-    },
-    hint: { type: String },
-    helpText: {
-      type: String,
-    },
-    // v-model of the field
-    value: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      email: this.value,
-      isValidate: false,
-    };
-  },
-  computed: {
-    errorClasses() {
-      return {
-        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
-          this.isValidate == true,
-        "border-gray-300": this.isValidate == false,
-      };
-    },
-  },
-  methods: {
-    checkValidation() {
-      this.isValidate =
-        /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(this.email) || this.email == ""
-          ? false
-          : true;
-    },
-  },
-  watch: {
-    value() {
-      this.email = this.value;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="flex justify-between">
+      <label class="block text-sm font-medium text-gray-900">
+        {{ label }}
+      </label>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <div class="relative mt-1 rounded-md">
+      <input
+        type="text"
+        :class="errorClasses"
+        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+        :placeholder="placeholder"
+        :value="email"
+        @blur="checkValidation"
+        @input="$emit('input', $event.target.value)"
+      />
+      <div
+        v-if="isValidate"
+        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"></c-icon>
+      </div>
+    </div>
+    <p v-if="isValidate" class="mt-2 text-sm text-red-600">Please enter valid email address</p>
+    <p v-if="helpText && isValidate == false" class="mt-2 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CInputEmail",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+    },
+    hint: { type: String },
+    helpText: {
+      type: String,
+    },
+    // v-model of the field
+    value: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      email: this.value,
+      isValidate: false,
+    };
+  },
+  computed: {
+    errorClasses() {
+      return {
+        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
+          this.isValidate == true,
+        "border-gray-300": this.isValidate == false,
+      };
+    },
+  },
+  methods: {
+    checkValidation() {
+      this.isValidate =
+        /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(this.email) || this.email == ""
+          ? false
+          : true;
+    },
+  },
+  watch: {
+    value() {
+      this.email = this.value;
+    },
+  },
+};
+</script>

package/src/components/CInputEmail/index.js

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

package/src/components/CModalHeading/CModalHeading.vue

@@ -1,22 +1,22 @@
-<template>
-  <div>
-    <div :class="{ 'border-b-2': divider }" class="pb-2 border-gray-200">
-      <h3 class="text-lg leading-6 font-medium text-gray-700">
-        {{ title }}
-      </h3>
-      <p v-if="description" class="max-w-4xl text-sm text-gray-500">
-        {{ description }}
-      </p>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "CModalHeading",
-  props: {
-    title: { type: String, required: true },
-    description: { type: String },
-    divider: { type: Boolean },
-  },
-};
-</script>
+<template>
+  <div>
+    <div :class="{ 'border-b-2': divider }" class="pb-2 border-gray-200">
+      <h3 class="text-lg leading-6 font-medium text-gray-700">
+        {{ title }}
+      </h3>
+      <p v-if="description" class="max-w-4xl text-sm text-gray-500">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CModalHeading",
+  props: {
+    title: { type: String, required: true },
+    description: { type: String },
+    divider: { type: Boolean },
+  },
+};
+</script>

package/src/components/CModalHeading/index.js

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