classcard-ui 0.2.660 → 0.2.664

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -1,71 +1,81 @@
-<template>
-  <div>
-    <div class="flex items-center">
-      <!-- label of phone field -->
-      <label class="text-sm 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>
-    <div class="mt-1 w-full shadow-sm">
-      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
-    </div>
-  </div>
-</template>
-<script>
-import { VueTelInput } from "vue-tel-input";
-export default {
-  name: "CPhoneNumber",
-  components: {
-    VueTelInput,
-  },
-  props: {
-    // eslint-disable-next-line vue/require-prop-type-constructor
-    phone: {
-      type: String,
-    },
-    label: String,
-    isRequired:{
-      type:Boolean,
-      default:false
-    }
-  },
-  data() {
-    return {
-      value: this.phone,
-      bindProps: {
-        placeholder: "",
-        inputClasses: ["px-3", "py-2", "text-sm"],
-        inputId: "c-phone",
-        wrapperClasses: "c-phone-wrapper",
-        showDialCode: false,
-        enabledCountryCode: false,
-        mode: "international",
-        validCharactersOnly: true,
-      },
-    };
-  },
-  watch: {
-    value(newVal) {
-      this.$emit("onChange", newVal);
-    },
-  },
-};
-</script>
-<style>
-.vue-tel-input {
-  border: 1px solid #d1d5db !important;
-  @apply text-gray-900;
-}
-
-#c-phone {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-.c-phone-wrapper {
-  border-radius: 0.375rem !important;
-}
-.vti__dropdown:hover {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-</style>
+<template>
+  <div>
+    <div class="flex items-center">
+      <!-- label of phone field -->
+      <label class="text-sm 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>
+    <div class="mt-1 w-full shadow-sm">
+      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
+    </div>
+    <p v-if="!isValidate" class="mt-1 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+<script>
+import { VueTelInput } from "vue-tel-input";
+export default {
+  name: "CPhoneNumber",
+  components: {
+    VueTelInput,
+  },
+  props: {
+    // eslint-disable-next-line vue/require-prop-type-constructor
+    phone: {
+      type: String,
+    },
+    label: String,
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    isRequired: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      value: this.phone,
+      bindProps: {
+        placeholder: "",
+        inputClasses: ["px-3", "py-2", "text-sm"],
+        inputId: "c-phone",
+        wrapperClasses: "c-phone-wrapper",
+        showDialCode: false,
+        enabledCountryCode: false,
+        mode: "international",
+        validCharactersOnly: true,
+      },
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.$emit("onChange", newVal);
+    },
+  },
+};
+</script>
+<style>
+.vue-tel-input {
+  border: 1px solid #d1d5db !important;
+  @apply text-gray-900;
+}
+
+#c-phone {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+.c-phone-wrapper {
+  border-radius: 0.375rem !important;
+}
+.vti__dropdown:hover {
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+</style>

package/src/components/CPhoneNumber/index.js

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

package/src/components/CRadio/CRadio.vue

@@ -1,116 +1,120 @@
-<template>
-  <div>
-    <div class="-space-y-px rounded-md bg-white">
-      <div
-        v-for="(item, index) in items"
-        class="relative pb-4 first:rounded-t-md last:rounded-b-md"
-        v-bind:key="item.label"
-        :class="customClasses ? classes(item, index) : ''"
-      >
-        <div class="flex items-start">
-          <input
-            type="radio"
-            :value="item.value"
-            :name="name"
-            v-model="selectedItem"
-            @click="onChange(item.value)"
-            class="mt-0.5 h-4 w-4 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
-            :disabled="isDisabled"
-          />
-          <label
-            class="ml-3 flex cursor-pointer flex-col"
-            @click="onChange(item.value)"
-          >
-            <span
-              class="block text-sm font-medium text-gray-900"
-              :class="
-                customClasses && item.value === selectedItem
-                  ? 'text-indigo-900'
-                  : ''
-              "
-            >
-              {{ item.label }}
-            </span>
-            <span
-              class="block text-sm"
-              :class="
-                customClasses && item.value === selectedItem
-                  ? 'text-indigo-700'
-                  : 'text-gray-500'
-              "
-            >
-              {{ item.description }}
-            </span>
-          </label>
-        </div>
-        <slot v-if="item.value === selectedItem" :name="item.value" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CRadio",
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    selectedOption: {
-      type: String,
-    },
-    isDisabled: {
-      type: Boolean,
-    },
-    customClasses: {
-      type: Boolean,
-      default: false,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedItem: this.selectedOption,
-    };
-  },
-  methods: {
-    onChange(selectedValue) {
-      if (!this.isDisabled) {
-        this.$emit("onChange", selectedValue);
-        this.selectedItem = selectedValue;
-      }
-    },
-    classes(item, index) {
-      let classForRadio = "";
-      if (item.value === this.selectedItem && index === 0) {
-        classForRadio =
-          "border p-4 border-indigo-200 rounded-t-md bg-indigo-50";
-      } else if (
-        item.value === this.selectedItem &&
-        index === this.items.length - 1
-      ) {
-        classForRadio =
-          "border p-4 border-indigo-200 rounded-b-md bg-indigo-50";
-      } else if (
-        item.value === this.selectedItem &&
-        0 < index < this.items.length - 1
-      ) {
-        classForRadio = "border p-4 border-indigo-200 bg-indigo-50";
-      } else {
-        classForRadio = "border p-4 border-gray-200";
-      }
-
-      return classForRadio;
-    },
-  },
-  watch: {
-    selectedOption() {
-      this.selectedItem = this.selectedOption;
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="-space-y-px rounded-md bg-white">
+      <div
+        v-for="(item, index) in items"
+        class="relative pb-4 first:rounded-t-md last:rounded-b-md"
+        v-bind:key="item[labelName]"
+        :class="customClasses ? classes(item, index) : ''"
+      >
+        <div class="flex items-start">
+          <input
+            type="radio"
+            :value="item.value"
+            :name="name"
+            v-model="selectedItem"
+            @click="onChange(item.value)"
+            class="mt-0.5 h-4 w-4 cursor-pointer border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
+            :disabled="isDisabled"
+          />
+          <label
+            class="ml-3 flex cursor-pointer flex-col"
+            @click="onChange(item.value)"
+          >
+            <span
+              class="block text-sm font-medium text-gray-900"
+              :class="
+                customClasses && item.value === selectedItem
+                  ? 'text-indigo-900'
+                  : ''
+              "
+            >
+              {{ item[labelName] }}
+            </span>
+            <span
+              class="block text-sm"
+              :class="
+                customClasses && item.value === selectedItem
+                  ? 'text-indigo-700'
+                  : 'text-gray-500'
+              "
+            >
+              {{ item.description }}
+            </span>
+          </label>
+        </div>
+        <slot v-if="item.value === selectedItem" :name="item.value" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CRadio",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    selectedOption: {
+      type: String,
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+    customClasses: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    labelName:{
+      type:String,
+      default:'label'
+    }
+  },
+  data() {
+    return {
+      selectedItem: this.selectedOption,
+    };
+  },
+  methods: {
+    onChange(selectedValue) {
+      if (!this.isDisabled) {
+        this.$emit("onChange", selectedValue);
+        this.selectedItem = selectedValue;
+      }
+    },
+    classes(item, index) {
+      let classForRadio = "";
+      if (item.value === this.selectedItem && index === 0) {
+        classForRadio =
+          "border p-4 border-indigo-200 rounded-t-md bg-indigo-50";
+      } else if (
+        item.value === this.selectedItem &&
+        index === this.items.length - 1
+      ) {
+        classForRadio =
+          "border p-4 border-indigo-200 rounded-b-md bg-indigo-50";
+      } else if (
+        item.value === this.selectedItem &&
+        0 < index < this.items.length - 1
+      ) {
+        classForRadio = "border p-4 border-indigo-200 bg-indigo-50";
+      } else {
+        classForRadio = "border p-4 border-gray-200";
+      }
+
+      return classForRadio;
+    },
+  },
+  watch: {
+    selectedOption() {
+      this.selectedItem = this.selectedOption;
+    },
+  },
+};
+</script>

package/src/components/CRadio/index.js

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

package/src/components/CRangeSlider/CRangeSlider.vue

@@ -1,55 +1,55 @@
-<template>
-  <div class="flex  w-64 m-auto items-center h-32 justify-center">
-    <div class="py-1 relative min-w-full">
-      <div class="h-2 bg-gray-200 rounded-full">
-        <div
-          class="absolute h-2 rounded-full bg-teal-600 w-0"
-          style="width: 58.5714%;"
-        ></div>
-        <div
-          class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
-          unselectable="on"
-          onselectstart="return false;"
-          style="left: 58.5714%;"
-        >
-          <div class="relative -mt-2 w-1">
-            <div
-              class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
-              style="margin-left: -20.5px;"
-            >
-              <div class="relative shadow-md">
-                <div
-                  class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
-                >
-                  92
-                </div>
-                <svg
-                  class="absolute text-black w-full h-2 left-0 top-100"
-                  x="0px"
-                  y="0px"
-                  viewBox="0 0 255 255"
-                  xml:space="preserve"
-                >
-                  <polygon
-                    class="fill-current"
-                    points="0,0 127.5,127.5 255,0"
-                  ></polygon>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
-        <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
-          150
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "CRangeSlider",
-  props: {},
-};
-</script>
+<template>
+  <div class="flex  w-64 m-auto items-center h-32 justify-center">
+    <div class="py-1 relative min-w-full">
+      <div class="h-2 bg-gray-200 rounded-full">
+        <div
+          class="absolute h-2 rounded-full bg-teal-600 w-0"
+          style="width: 58.5714%;"
+        ></div>
+        <div
+          class="absolute h-4 flex items-center justify-center w-4 rounded-full bg-white shadow border border-gray-300 -ml-2 top-0 cursor-pointer"
+          unselectable="on"
+          onselectstart="return false;"
+          style="left: 58.5714%;"
+        >
+          <div class="relative -mt-2 w-1">
+            <div
+              class="absolute z-40 opacity-100 bottom-100 mb-2 left-0 min-w-full"
+              style="margin-left: -20.5px;"
+            >
+              <div class="relative shadow-md">
+                <div
+                  class="bg-black -mt-8 text-white truncate text-xs rounded py-1 px-4"
+                >
+                  92
+                </div>
+                <svg
+                  class="absolute text-black w-full h-2 left-0 top-100"
+                  x="0px"
+                  y="0px"
+                  viewBox="0 0 255 255"
+                  xml:space="preserve"
+                >
+                  <polygon
+                    class="fill-current"
+                    points="0,0 127.5,127.5 255,0"
+                  ></polygon>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="absolute text-gray-800 -ml-1 bottom-0 left-0 -mb-6">10</div>
+        <div class="absolute text-gray-800 -mr-1 bottom-0 right-0 -mb-6">
+          150
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CRangeSlider",
+  props: {},
+};
+</script>

package/src/components/CRangeSlider/index.js

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