classcard-ui 0.2.651 → 0.2.652

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.651",
+  "version": "0.2.652",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CInputEmail/CInputEmail.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
     <div class="flex justify-between">
-      <label class="block text-sm font-medium text-gray-900">
-        {{ label }}
-      </label>
+      <div class="flex items-center">
+        <!-- label of input field -->
+        <label v-if="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>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
     <div class="relative mt-1 rounded-md">
@@ -51,6 +56,10 @@ export default {
     value: {
       type: String,
     },
+    // whether the email field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
   },
   data() {
     return {

package/src/components/CTextarea/CTextarea.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
     <div class="flex justify-between">
-      <label v-if="label" class="block text-sm font-medium text-gray-900">
-        {{ label }}
-      </label>
+      <div class="flex items-center">
+        <!-- label of input field -->
+        <label v-if="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>
+
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
 
@@ -16,11 +22,11 @@
         :rows="rows"
         :class="errorClasses"
         :disabled="disabled"
-        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md disabled:opacity-50 text-gray-900"
+        class="block w-full rounded-md text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
       ></textarea>
       <div
         v-if="!isValidate"
-        class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-red-600"
+        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>
@@ -57,6 +63,10 @@ export default {
     errorMessage: {
       type: String,
     },
+    // whether the textarea field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
     disabled: {
       type: Boolean,
       default: false,

package/src/components/CUpload/CUpload.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="flex h-full flex-col">
     <div class="flex items-center justify-between">
-      <label class="block text-sm font-medium text-gray-900">{{ label }}</label>
+      <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>
       <label v-if="!isUploaded" class="block text-sm font-medium text-gray-400">
         {{ hint }}
       </label>
@@ -175,6 +180,9 @@ export default {
       type: Array,
       default: () => ["local_file_system", "unsplash"],
     },
+    isRequired:{
+      type:Boolean
+    }
   },
   data() {
     return {};