classcard-ui 0.2.1489 → 0.2.1490-beta.0

package/src/components/CInputEmail/CInputEmail.vue

@@ -1,107 +1,107 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <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">
-      <input
-        type="text"
-        :class="errorClasses"
-        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        :placeholder="placeholder"
-        :value="email"
-        :id="id"
-        :disabled="disabled"
-        @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: {
-    id: {
-      type: String,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    placeholder: {
-      type: String,
-    },
-    hint: { type: String },
-    helpText: {
-      type: String,
-    },
-    // v-model of the field
-    value: {
-      type: String,
-    },
-    // whether the email field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-    },
-  },
-  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">
+      <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">
+      <input
+        type="text"
+        :class="errorClasses"
+        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+        :placeholder="placeholder"
+        :value="email"
+        :id="id"
+        :disabled="disabled"
+        @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: {
+    id: {
+      type: String,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+    },
+    hint: { type: String },
+    helpText: {
+      type: String,
+    },
+    // v-model of the field
+    value: {
+      type: String,
+    },
+    // whether the email field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+    },
+  },
+  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/CInsetTabs/CInsetTabs.vue

@@ -1,141 +1,141 @@
-<template>
-  <div class="inline-block">
-    <nav
-      class="group rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
-      aria-label="Tabs"
-    >
-      <div class="relative inline-flex">
-        <div
-          class="inset-tabs-overlay pointer-events-none absolute inset-y-0 left-0 rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5"
-          :style="overlayStyle"
-        ></div>
-        <button
-          v-for="(tabOption, index) in tabOptions"
-          :key="index"
-          ref="tabButtons"
-          type="button"
-          class="inset-tabs-classes relative z-10 inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border-0 bg-transparent px-3 py-1.5 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
-          :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
-          :id="id ? `${id}-${getTabIdentifier(tabOption).toLowerCase()}` : getTabIdentifier(tabOption).toLowerCase()"
-          :style="computedStyles"
-          :aria-label="tabOption.label"
-          :aria-selected="getTabIdentifier(tabOption) === currentTab"
-          :aria-current="getTabIdentifier(tabOption) === currentTab"
-          :aria-controls="getTabIdentifier(tabOption)"
-          @click="handleButtonClick(tabOption)"
-        >
-          <c-icon
-            v-if="tabOption.icon"
-            :type="tabOption.icon.type"
-            :class="[
-              'inset-tabs-icon h-5 w-5 shrink-0',
-              getTabIdentifier(tabOption) === currentTab
-                ? 'inset-tabs-icon-selected'
-                : 'text-gray-400',
-            ]"
-            cursorType="cursor-pointer"
-            :name="tabOption.icon.name"
-            :viewBox="tabOption.icon.viewBox"
-          ></c-icon>
-          <span
-            v-if="tabOption.showLabel"
-            :class="[
-              'inset-tabs-label',
-              getTabIdentifier(tabOption) === currentTab
-                ? 'text-gray-900'
-                : 'text-gray-600 group-hover:text-gray-900',
-            ]"
-            >{{ tabOption.label }}</span
-          >
-        </button>
-      </div>
-    </nav>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import { COLOR_CONFIG } from "../../colorConfig";
-
-export default {
-  name: "CInsetTabs",
-  components: {
-    CIcon,
-  },
-  props: {
-    currentTab: {
-      type: String,
-    },
-    id: {
-      type: String,
-      default: "tab",
-    },
-    tabOptions: {
-      type: Array,
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-  data() {
-    return {
-      overlayStyle: {
-        width: "0px",
-        transform: "translateX(0px)",
-      },
-    };
-  },
-  methods: {
-    getTabIdentifier(tabOption) {
-      return tabOption.value !== undefined ? tabOption.value : tabOption.label;
-    },
-    handleButtonClick(tabOption) {
-      const identifier = this.getTabIdentifier(tabOption);
-      this.$emit("update-tab", identifier);
-    },
-    updateOverlayPosition() {
-      const tabButtons = this.$refs.tabButtons;
-      if (!tabButtons || !tabButtons.length) return;
-
-      const index = this.tabOptions.findIndex(
-        (tab) => this.getTabIdentifier(tab) === this.currentTab
-      );
-      if (index === -1) return;
-      const tabButton = tabButtons[index];
-      if (!tabButton) return;
-
-      this.overlayStyle = {
-        width: `${tabButton.offsetWidth}px`,
-        transform: `translateX(${tabButton.offsetLeft}px)`,
-      };
-    },
-  },
-  computed: {
-    computedStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--inset-tab-icon-color": colors.shade700,
-      };
-    },
-  },
-  watch: {
-    currentTab() {
-      this.$nextTick(this.updateOverlayPosition);
-    },
-  },
-  mounted() {
-    this.$nextTick(this.updateOverlayPosition);
-  },
-};
-</script>
-
-<style>
-.inset-tabs-overlay {
-  transition: transform 200ms ease-in-out, width 200ms ease-in-out;
-}
-
-.inset-tabs-icon.inset-tabs-icon-selected {
-  color: var(--inset-tab-icon-color);
-}
-</style>
+<template>
+  <div class="inline-block">
+    <nav
+      class="group rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200"
+      aria-label="Tabs"
+    >
+      <div class="relative inline-flex">
+        <div
+          class="inset-tabs-overlay pointer-events-none absolute inset-y-0 left-0 rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5"
+          :style="overlayStyle"
+        ></div>
+        <button
+          v-for="(tabOption, index) in tabOptions"
+          :key="index"
+          ref="tabButtons"
+          type="button"
+          class="inset-tabs-classes relative z-10 inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border-0 bg-transparent px-3 py-1.5 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-100"
+          :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
+          :id="id ? `${id}-${getTabIdentifier(tabOption).toLowerCase()}` : getTabIdentifier(tabOption).toLowerCase()"
+          :style="computedStyles"
+          :aria-label="tabOption.label"
+          :aria-selected="getTabIdentifier(tabOption) === currentTab"
+          :aria-current="getTabIdentifier(tabOption) === currentTab"
+          :aria-controls="getTabIdentifier(tabOption)"
+          @click="handleButtonClick(tabOption)"
+        >
+          <c-icon
+            v-if="tabOption.icon"
+            :type="tabOption.icon.type"
+            :class="[
+              'inset-tabs-icon h-5 w-5 shrink-0',
+              getTabIdentifier(tabOption) === currentTab
+                ? 'inset-tabs-icon-selected'
+                : 'text-gray-400',
+            ]"
+            cursorType="cursor-pointer"
+            :name="tabOption.icon.name"
+            :viewBox="tabOption.icon.viewBox"
+          ></c-icon>
+          <span
+            v-if="tabOption.showLabel"
+            :class="[
+              'inset-tabs-label',
+              getTabIdentifier(tabOption) === currentTab
+                ? 'text-gray-900'
+                : 'text-gray-600 group-hover:text-gray-900',
+            ]"
+            >{{ tabOption.label }}</span
+          >
+        </button>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import { COLOR_CONFIG } from "../../colorConfig";
+
+export default {
+  name: "CInsetTabs",
+  components: {
+    CIcon,
+  },
+  props: {
+    currentTab: {
+      type: String,
+    },
+    id: {
+      type: String,
+      default: "tab",
+    },
+    tabOptions: {
+      type: Array,
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+  data() {
+    return {
+      overlayStyle: {
+        width: "0px",
+        transform: "translateX(0px)",
+      },
+    };
+  },
+  methods: {
+    getTabIdentifier(tabOption) {
+      return tabOption.value !== undefined ? tabOption.value : tabOption.label;
+    },
+    handleButtonClick(tabOption) {
+      const identifier = this.getTabIdentifier(tabOption);
+      this.$emit("update-tab", identifier);
+    },
+    updateOverlayPosition() {
+      const tabButtons = this.$refs.tabButtons;
+      if (!tabButtons || !tabButtons.length) return;
+
+      const index = this.tabOptions.findIndex(
+        (tab) => this.getTabIdentifier(tab) === this.currentTab
+      );
+      if (index === -1) return;
+      const tabButton = tabButtons[index];
+      if (!tabButton) return;
+
+      this.overlayStyle = {
+        width: `${tabButton.offsetWidth}px`,
+        transform: `translateX(${tabButton.offsetLeft}px)`,
+      };
+    },
+  },
+  computed: {
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--inset-tab-icon-color": colors.shade700,
+      };
+    },
+  },
+  watch: {
+    currentTab() {
+      this.$nextTick(this.updateOverlayPosition);
+    },
+  },
+  mounted() {
+    this.$nextTick(this.updateOverlayPosition);
+  },
+};
+</script>
+
+<style>
+.inset-tabs-overlay {
+  transition: transform 200ms ease-in-out, width 200ms ease-in-out;
+}
+
+.inset-tabs-icon.inset-tabs-icon-selected {
+  color: var(--inset-tab-icon-color);
+}
+</style>

package/src/components/CInsetTabs/index.js

@@ -1,3 +1,3 @@
-import CInsetTabs from "./CInsetTabs.vue";
-
-export default CInsetTabs;
+import CInsetTabs from "./CInsetTabs.vue";
+
+export default CInsetTabs;

package/src/components/CLinearProgressBar/CLinearProgressBar.vue

@@ -1,35 +1,35 @@
-<template>
-  <div class="flex items-center gap-3">
-    <div
-      :class="'h-1 w-full overflow-hidden rounded-full bg-gray-200 ' + customClasses"
-      role="progressbar"
-      :aria-valuemin="0"
-      :aria-valuemax="max"
-      :aria-valuenow="percentage"
-      :aria-label="ariaLabel"
-    >
-      <div
-        class="h-full origin-left rounded-full transition-transform duration-300"
-        :class="fillColorClass"
-        :style="{ transform: 'scaleX(' + (percentage / max) + ')' }"
-      />
-    </div>
-
-    <span class="text-sm text-gray-500">
-      {{ percentage + "%" }}
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CLinearProgressBar",
-  props: {
-    max: { type: Number, default: 100 },
-    ariaLabel: { type: String, default: "Progress" },
-    fillColorClass: { type: String, default: "bg-gray-900" },
-    customClasses: { type: String, default: "" },
-    percentage: { type: Number, default: 0 },
-  },
-};
-</script>
+<template>
+  <div class="flex items-center gap-3">
+    <div
+      :class="'h-1 w-full overflow-hidden rounded-full bg-gray-200 ' + customClasses"
+      role="progressbar"
+      :aria-valuemin="0"
+      :aria-valuemax="max"
+      :aria-valuenow="percentage"
+      :aria-label="ariaLabel"
+    >
+      <div
+        class="h-full origin-left rounded-full transition-transform duration-300"
+        :class="fillColorClass"
+        :style="{ transform: 'scaleX(' + (percentage / max) + ')' }"
+      />
+    </div>
+
+    <span class="text-sm text-gray-500">
+      {{ percentage + "%" }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CLinearProgressBar",
+  props: {
+    max: { type: Number, default: 100 },
+    ariaLabel: { type: String, default: "Progress" },
+    fillColorClass: { type: String, default: "bg-gray-900" },
+    customClasses: { type: String, default: "" },
+    percentage: { type: Number, default: 0 },
+  },
+};
+</script>

package/src/components/CLinearProgressBar/index.js

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

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