classcard-ui 0.2.1069 → 0.2.1071

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -1,114 +1,114 @@
-<template>
-  <div>
-    <div class="flex items-center">
-      <!-- label of phone field -->
-      <label
-        class="text-sm text-gray-900"
-        :class="[isBlock ? ' font-medium' : '']"
-        >{{ 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"
-        @blur="handleBlur"
-      ></vue-tel-input>
-    </div>
-    <p v-if="!isValidate" class="mt-1 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 { 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,
-    },
-    // description about the field
-    helpText: {
-      type: String,
-    },
-    //label font-weight medium
-    isBlock: {
-      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,
-      },
-    };
-  },
-  methods: {
-    handleBlur() {
-      this.$emit("blur", this.value);
-    },
-  },
-  watch: {
-    phone: {
-      handler(newValue) {
-        this.value = newValue;
-      },
-      deep: true,
-    },
-    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"
+        :class="[isBlock ? ' font-medium' : '']"
+        >{{ 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"
+        @blur="handleBlur"
+      ></vue-tel-input>
+    </div>
+    <p v-if="!isValidate" class="mt-1 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 { 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,
+    },
+    // description about the field
+    helpText: {
+      type: String,
+    },
+    //label font-weight medium
+    isBlock: {
+      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,
+      },
+    };
+  },
+  methods: {
+    handleBlur() {
+      this.$emit("blur", this.value);
+    },
+  },
+  watch: {
+    phone: {
+      handler(newValue) {
+        this.value = newValue;
+      },
+      deep: true,
+    },
+    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/CProgress/CProgress.vue

@@ -1,57 +1,57 @@
-<template>
-  <div class="flex items-center justify-center">
-    <p class="text-sm font-medium text-gray-900">
-      {{ steps[currentStep - 1].name }}
-    </p>
-    <ol role="list" class="ml-4 flex items-center space-x-5">
-      <li v-for="step in steps" :key="step.name">
-        <!-- completed steps -->
-        <div
-          v-if="step.number < currentStep"
-          @click="$emit('goStepBack', step.number)"
-          class="block h-2.5 w-2.5 cursor-pointer rounded-full bg-indigo-600 hover:bg-indigo-900"
-        >
-          <span class="sr-only">{{ step.name }}</span>
-        </div>
-        <!-- current step -->
-        <div
-          v-else-if="step.number === currentStep"
-          class="relative flex items-center justify-center"
-          aria-current="step"
-        >
-          <span class="absolute flex h-5 w-5 p-px" aria-hidden="true">
-            <span class="h-full w-full rounded-full bg-indigo-200" />
-          </span>
-          <span
-            class="relative block h-2.5 w-2.5 rounded-full bg-indigo-600"
-            aria-hidden="true"
-          />
-          <span class="sr-only">{{ step.name }}</span>
-        </div>
-        <!-- this is upcoming step so we don't have a emit from here -->
-        <div
-          v-else
-          class="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
-        >
-          <span class="sr-only">{{ step.name }}</span>
-        </div>
-      </li>
-    </ol>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CProgress",
-  props: {
-    steps: {
-      type: Array,
-      required: true,
-    },
-    currentStep: {
-      type: Number,
-      require: true,
-    },
-  },
-};
-</script>
+<template>
+  <div class="flex items-center justify-center">
+    <p class="text-sm font-medium text-gray-900">
+      {{ steps[currentStep - 1].name }}
+    </p>
+    <ol role="list" class="ml-4 flex items-center space-x-5">
+      <li v-for="step in steps" :key="step.name">
+        <!-- completed steps -->
+        <div
+          v-if="step.number < currentStep"
+          @click="$emit('goStepBack', step.number)"
+          class="block h-2.5 w-2.5 cursor-pointer rounded-full bg-indigo-600 hover:bg-indigo-900"
+        >
+          <span class="sr-only">{{ step.name }}</span>
+        </div>
+        <!-- current step -->
+        <div
+          v-else-if="step.number === currentStep"
+          class="relative flex items-center justify-center"
+          aria-current="step"
+        >
+          <span class="absolute flex h-5 w-5 p-px" aria-hidden="true">
+            <span class="h-full w-full rounded-full bg-indigo-200" />
+          </span>
+          <span
+            class="relative block h-2.5 w-2.5 rounded-full bg-indigo-600"
+            aria-hidden="true"
+          />
+          <span class="sr-only">{{ step.name }}</span>
+        </div>
+        <!-- this is upcoming step so we don't have a emit from here -->
+        <div
+          v-else
+          class="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
+        >
+          <span class="sr-only">{{ step.name }}</span>
+        </div>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CProgress",
+  props: {
+    steps: {
+      type: Array,
+      required: true,
+    },
+    currentStep: {
+      type: Number,
+      require: true,
+    },
+  },
+};
+</script>

package/src/components/CProgress/index.js

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

package/src/components/CRadio/CRadio.vue

@@ -1,126 +1,126 @@
-<template>
-  <div>
-    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
-      <div
-        v-for="(item, index) in items"
-        :class="`relative ${index != items.length - 1 ? 'pb-4' : ''} ${
-          customClasses ? classes(item, index) : ''
-        } first:rounded-t-md last:rounded-b-md`"
-        v-bind:key="item[labelName]"
-      >
-        <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 ${
-              isDisabled ? 'opacity-60' : ''
-            }`"
-            @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,
-    },
-    customWrapperClasses: {
-      type: String,
-    },
-    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>
+<template>
+  <div>
+    <div class="-space-y-px rounded-md bg-white" :class="customWrapperClasses">
+      <div
+        v-for="(item, index) in items"
+        :class="`relative ${index != items.length - 1 ? 'pb-4' : ''} ${
+          customClasses ? classes(item, index) : ''
+        } first:rounded-t-md last:rounded-b-md`"
+        v-bind:key="item[labelName]"
+      >
+        <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 ${
+              isDisabled ? 'opacity-60' : ''
+            }`"
+            @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,
+    },
+    customWrapperClasses: {
+      type: String,
+    },
+    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