classcard-ui 0.2.1506 → 0.2.1508-beta.0

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -1,213 +1,213 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <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>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div
-      :class="[
-        'mt-1 w-full shadow-sm c-phone-container',
-        {
-          'c-phone-dropdown-list-right':
-            countryDropdownListPosition === 'right',
-        },
-      ]"
-    >
-      <vue-tel-input
-        v-bind="bindProps"
-        :autoFormat="false"
-        :id="id"
-        v-model="value"
-        :disabled="disabled"
-        @input="handleBlur"
-      >
-        <template v-slot:arrow-icon>
-          <c-icon
-            name="chevron-down"
-            type="solid"
-            cursorType="cursor-pointer"
-            class="h-5 w-5 text-gray-400 flex-shrink-0"
-          ></c-icon>
-        </template>
-      </vue-tel-input>
-    </div>
-    <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 { VueTelInput } from "vue-tel-input";
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CPhoneNumber",
-  components: {
-    VueTelInput,
-    CIcon,
-  },
-  props: {
-    // eslint-disable-next-line vue/require-prop-type-constructor
-    id: {
-      type: String,
-    },
-    phone: {
-      type: String,
-    },
-    label: String,
-    placeholder: {
-      type: String,
-      default: "Enter a phone number",
-    },
-    isValidate: {
-      type: Boolean,
-      default: true,
-    },
-    isRequired: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-    },
-    // description about the field
-    helpText: {
-      type: String,
-    },
-    //label font-weight medium
-    isBlock: {
-      type: Boolean,
-      default: false,
-    },
-    usePasteEventListener: {
-      type: Boolean,
-      default: false,
-    },
-    hint: {
-      type: String,
-    },
-    countryDropdownListPosition: {
-      type: String,
-      default: "left",
-      validator: (value) => ["left", "right"].includes(value),
-    },
-  },
-  data() {
-    return {
-      value: this.phone,
-      bindProps: {
-        placeholder: this.placeholder,
-        inputClasses: ["px-3", "py-2", "text-sm", "focus:ring-indigo-500"],
-        inputId: "c-phone",
-        wrapperClasses: "c-phone-wrapper",
-        showDialCode: false,
-        enabledCountryCode: false,
-        mode: "international",
-        validCharactersOnly: true,
-      },
-    };
-  },
-  methods: {
-    handleBlur() {
-      this.isFocused = false;
-      this.$emit("blur", this.value);
-    },
-    handlePaste(event) {
-      // Check if the paste event is happening within the vue-tel-input component
-      const telInput = this.$el.querySelector(".vue-tel-input");
-      if (!telInput || !telInput.contains(event.target)) {
-        return;
-      }
-
-      event.preventDefault();
-      const pastedText = (event.clipboardData || window.clipboardData).getData(
-        "text"
-      );
-      const cleanedData = pastedText.replace(/[^\d+]/g, "");
-      this.value = cleanedData;
-      this.$emit("onChange", cleanedData);
-    },
-  },
-  watch: {
-    phone: {
-      handler(newValue) {
-        this.value = newValue;
-      },
-      deep: true,
-    },
-    value(newVal) {
-      this.$emit("onChange", newVal);
-    },
-  },
-  mounted() {
-    if (this.usePasteEventListener) {
-      this.$el.addEventListener("paste", this.handlePaste);
-    }
-  },
-  beforeDestroy() {
-    if (this.usePasteEventListener) {
-      this.$el.removeEventListener("paste", this.handlePaste);
-    }
-  },
-};
-</script>
-<style>
-.vue-tel-input {
-  border: 1px solid #d1d5db !important;
-  @apply h-9 text-gray-900 !shadow-none;
-}
-
-.vue-tel-input.disabled {
-  @apply !text-gray-500 !bg-gray-50 !border-gray-200 shadow-none opacity-100 cursor-not-allowed pointer-events-auto;
-}
-
-.vue-tel-input.disabled .vti__dropdown {
-  @apply cursor-not-allowed hover:bg-transparent;
-}
-
-#c-phone {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.c-phone-wrapper {
-  border-radius: 0.375rem !important;
-}
-
-.vti__dropdown {
-  @apply px-3 py-2 border-r border-gray-300;
-}
-
-.vti__dropdown:hover {
-  @apply rounded-l-md;
-}
-
-.vti__selection {
-  @apply gap-1;
-}
-
-.vti__flag {
-  @apply m-0 flex-shrink-0;
-}
-
-.c-phone-dropdown-list-right .vti__dropdown-list {
-  left: auto;
-  right: -1px;
-}
-</style>
+<template>
+  <div>
+    <div class="flex justify-between">
+      <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>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <div
+      :class="[
+        'mt-1 w-full shadow-sm c-phone-container',
+        {
+          'c-phone-dropdown-list-right':
+            countryDropdownListPosition === 'right',
+        },
+      ]"
+    >
+      <vue-tel-input
+        v-bind="bindProps"
+        :autoFormat="false"
+        :id="id"
+        v-model="value"
+        :disabled="disabled"
+        @input="handleBlur"
+      >
+        <template v-slot:arrow-icon>
+          <c-icon
+            name="chevron-down"
+            type="solid"
+            cursorType="cursor-pointer"
+            class="h-5 w-5 text-gray-400 flex-shrink-0"
+          ></c-icon>
+        </template>
+      </vue-tel-input>
+    </div>
+    <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 { VueTelInput } from "vue-tel-input";
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CPhoneNumber",
+  components: {
+    VueTelInput,
+    CIcon,
+  },
+  props: {
+    // eslint-disable-next-line vue/require-prop-type-constructor
+    id: {
+      type: String,
+    },
+    phone: {
+      type: String,
+    },
+    label: String,
+    placeholder: {
+      type: String,
+      default: "Enter a phone number",
+    },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    isRequired: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+    },
+    // description about the field
+    helpText: {
+      type: String,
+    },
+    //label font-weight medium
+    isBlock: {
+      type: Boolean,
+      default: false,
+    },
+    usePasteEventListener: {
+      type: Boolean,
+      default: false,
+    },
+    hint: {
+      type: String,
+    },
+    countryDropdownListPosition: {
+      type: String,
+      default: "left",
+      validator: (value) => ["left", "right"].includes(value),
+    },
+  },
+  data() {
+    return {
+      value: this.phone,
+      bindProps: {
+        placeholder: this.placeholder,
+        inputClasses: ["px-3", "py-2", "text-sm", "focus:ring-indigo-500"],
+        inputId: "c-phone",
+        wrapperClasses: "c-phone-wrapper",
+        showDialCode: false,
+        enabledCountryCode: false,
+        mode: "international",
+        validCharactersOnly: true,
+      },
+    };
+  },
+  methods: {
+    handleBlur() {
+      this.isFocused = false;
+      this.$emit("blur", this.value);
+    },
+    handlePaste(event) {
+      // Check if the paste event is happening within the vue-tel-input component
+      const telInput = this.$el.querySelector(".vue-tel-input");
+      if (!telInput || !telInput.contains(event.target)) {
+        return;
+      }
+
+      event.preventDefault();
+      const pastedText = (event.clipboardData || window.clipboardData).getData(
+        "text"
+      );
+      const cleanedData = pastedText.replace(/[^\d+]/g, "");
+      this.value = cleanedData;
+      this.$emit("onChange", cleanedData);
+    },
+  },
+  watch: {
+    phone: {
+      handler(newValue) {
+        this.value = newValue;
+      },
+      deep: true,
+    },
+    value(newVal) {
+      this.$emit("onChange", newVal);
+    },
+  },
+  mounted() {
+    if (this.usePasteEventListener) {
+      this.$el.addEventListener("paste", this.handlePaste);
+    }
+  },
+  beforeDestroy() {
+    if (this.usePasteEventListener) {
+      this.$el.removeEventListener("paste", this.handlePaste);
+    }
+  },
+};
+</script>
+<style>
+.vue-tel-input {
+  border: 1px solid #d1d5db !important;
+  @apply h-9 text-gray-900 !shadow-none;
+}
+
+.vue-tel-input.disabled {
+  @apply !text-gray-500 !bg-gray-50 !border-gray-200 shadow-none opacity-100 cursor-not-allowed pointer-events-auto;
+}
+
+.vue-tel-input.disabled .vti__dropdown {
+  @apply cursor-not-allowed hover:bg-transparent;
+}
+
+#c-phone {
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.c-phone-wrapper {
+  border-radius: 0.375rem !important;
+}
+
+.vti__dropdown {
+  @apply px-3 py-2 border-r border-gray-300;
+}
+
+.vti__dropdown:hover {
+  @apply rounded-l-md;
+}
+
+.vti__selection {
+  @apply gap-1;
+}
+
+.vti__flag {
+  @apply m-0 flex-shrink-0;
+}
+
+.c-phone-dropdown-list-right .vti__dropdown-list {
+  left: auto;
+  right: -1px;
+}
+</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,95 +1,95 @@
-<template>
-  <div class="flex items-center justify-center">
-    <p class="text-sm font-medium text-gray-900">
-      {{ customName ? customName : 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="progress-item block h-2.5 w-2.5 cursor-pointer rounded-full"
-          :style="colorStyles"
-        >
-          <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="progress-item-light-ring h-full w-full rounded-full"
-              :style="colorStyles"
-            />
-          </span>
-          <span
-            class="progress-item relative block h-2.5 w-2.5 rounded-full"
-            :style="colorStyles"
-            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>
-import { COLOR_CONFIG } from "../../colorConfig";
-
-export default {
-  name: "CProgress",
-  props: {
-    steps: {
-      type: Array,
-      required: true,
-    },
-    currentStep: {
-      type: Number,
-      require: true,
-    },
-    customName: {
-      type: String,
-      default: "",
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-
-  computed: {
-    colorStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--progress-item-color": colors.shade600,
-        "--progress-item-hover-color": colors.shade900,
-        "--progress-item-light-ring-color": colors.shade200,
-      };
-    },
-  },
-};
-</script>
-
-<style scoped>
-.progress-item {
-  background-color: var(--progress-item-color);
-}
-.progress-item:hover {
-  background-color: var(--progress-item-hover-color);
-}
-.progress-item-light-ring {
-  background-color: var(--progress-item-light-ring-color);
-}
-</style>
+<template>
+  <div class="flex items-center justify-center">
+    <p class="text-sm font-medium text-gray-900">
+      {{ customName ? customName : 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="progress-item block h-2.5 w-2.5 cursor-pointer rounded-full"
+          :style="colorStyles"
+        >
+          <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="progress-item-light-ring h-full w-full rounded-full"
+              :style="colorStyles"
+            />
+          </span>
+          <span
+            class="progress-item relative block h-2.5 w-2.5 rounded-full"
+            :style="colorStyles"
+            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>
+import { COLOR_CONFIG } from "../../colorConfig";
+
+export default {
+  name: "CProgress",
+  props: {
+    steps: {
+      type: Array,
+      required: true,
+    },
+    currentStep: {
+      type: Number,
+      require: true,
+    },
+    customName: {
+      type: String,
+      default: "",
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+
+  computed: {
+    colorStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--progress-item-color": colors.shade600,
+        "--progress-item-hover-color": colors.shade900,
+        "--progress-item-light-ring-color": colors.shade200,
+      };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.progress-item {
+  background-color: var(--progress-item-color);
+}
+.progress-item:hover {
+  background-color: var(--progress-item-hover-color);
+}
+.progress-item-light-ring {
+  background-color: var(--progress-item-light-ring-color);
+}
+</style>

package/src/components/CProgress/index.js

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