classcard-ui 0.2.1506 → 0.2.1508-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,222 +1,222 @@
-<template>
-  <div :class="rootClasses">
-    <nav
-      :class="[
-        'custom-inset-tabs-nav group max-w-full overflow-x-auto rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200',
-        navClasses,
-      ]"
-      aria-label="Tabs"
-    >
-      <div ref="tabList" :class="['relative', tabListClasses]">
-        <div
-          class="inset-tabs-overlay pointer-events-none absolute inset-y-0 left-0 rounded-md bg-white shadow-sm"
-          :style="overlayStyle"
-        ></div>
-        <button
-          v-for="(tabOption, index) in tabOptions"
-          :key="index"
-          ref="tabButtons"
-          type="button"
-          :class="[
-            'relative z-10 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border-0 bg-transparent px-2 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 sm:px-3',
-            tabButtonClasses,
-          ]"
-          :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
-          :id="
-            id
-              ? id + '-' + String(getTabIdentifier(tabOption)).toLowerCase()
-              : String(getTabIdentifier(tabOption)).toLowerCase()
-          "
-          :style="computedStyles"
-          :title="tabOption.label"
-          :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="[
-              'hidden sm:inline',
-              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",
-    },
-    isFullWidth: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      overlayStyle: {
-        width: "0px",
-        transform: "translateX(0px)",
-      },
-      resizeObserver: null,
-    };
-  },
-  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 = Array.isArray(tabButtons)
-        ? tabButtons[index]
-        : tabButtons;
-      if (!tabButton) return;
-
-      this.overlayStyle = {
-        width: `${tabButton.offsetWidth}px`,
-        transform: `translateX(${tabButton.offsetLeft}px)`,
-      };
-    },
-    setupOverlayObserver() {
-      if (typeof ResizeObserver === "undefined" || !this.$refs.tabList) {
-        return;
-      }
-
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateOverlayPosition();
-      });
-      this.resizeObserver.observe(this.$refs.tabList);
-    },
-    teardownOverlayObserver() {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect();
-        this.resizeObserver = null;
-      }
-    },
-  },
-  computed: {
-    rootClasses() {
-      return this.isFullWidth ? "w-full max-w-full" : "max-w-full";
-    },
-    navClasses() {
-      return this.isFullWidth ? "flex w-full" : "inline-flex";
-    },
-    tabListClasses() {
-      return this.isFullWidth
-        ? "flex w-full min-w-0"
-        : "inline-flex min-w-0";
-    },
-    tabButtonClasses() {
-      return this.isFullWidth
-        ? "min-w-0 flex-1"
-        : "min-w-9 shrink-0 sm:min-w-0";
-    },
-    computedStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--inset-tab-icon-color": colors.shade700,
-      };
-    },
-  },
-  watch: {
-    currentTab() {
-      this.$nextTick(this.updateOverlayPosition);
-    },
-    tabOptions: {
-      deep: true,
-      handler() {
-        this.$nextTick(this.updateOverlayPosition);
-      },
-    },
-    isFullWidth() {
-      this.$nextTick(this.updateOverlayPosition);
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.updateOverlayPosition();
-      this.setupOverlayObserver();
-    });
-    if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", this.updateOverlayPosition);
-    }
-  },
-  beforeDestroy() {
-    if (typeof ResizeObserver === "undefined") {
-      window.removeEventListener("resize", this.updateOverlayPosition);
-    }
-    this.teardownOverlayObserver();
-  },
-};
-</script>
-
-<style>
-.custom-inset-tabs-nav {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.custom-inset-tabs-nav::-webkit-scrollbar {
-  display: none;
-}
-
-.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="rootClasses">
+    <nav
+      :class="[
+        'custom-inset-tabs-nav group max-w-full overflow-x-auto rounded-lg bg-gray-100 p-0.5 hover:bg-gray-200',
+        navClasses,
+      ]"
+      aria-label="Tabs"
+    >
+      <div ref="tabList" :class="['relative', tabListClasses]">
+        <div
+          class="inset-tabs-overlay pointer-events-none absolute inset-y-0 left-0 rounded-md bg-white shadow-sm"
+          :style="overlayStyle"
+        ></div>
+        <button
+          v-for="(tabOption, index) in tabOptions"
+          :key="index"
+          ref="tabButtons"
+          type="button"
+          :class="[
+            'relative z-10 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border-0 bg-transparent px-2 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 sm:px-3',
+            tabButtonClasses,
+          ]"
+          :tabindex="getTabIdentifier(tabOption) === currentTab ? '0' : '-1'"
+          :id="
+            id
+              ? id + '-' + String(getTabIdentifier(tabOption)).toLowerCase()
+              : String(getTabIdentifier(tabOption)).toLowerCase()
+          "
+          :style="computedStyles"
+          :title="tabOption.label"
+          :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="[
+              'hidden sm:inline',
+              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",
+    },
+    isFullWidth: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      overlayStyle: {
+        width: "0px",
+        transform: "translateX(0px)",
+      },
+      resizeObserver: null,
+    };
+  },
+  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 = Array.isArray(tabButtons)
+        ? tabButtons[index]
+        : tabButtons;
+      if (!tabButton) return;
+
+      this.overlayStyle = {
+        width: `${tabButton.offsetWidth}px`,
+        transform: `translateX(${tabButton.offsetLeft}px)`,
+      };
+    },
+    setupOverlayObserver() {
+      if (typeof ResizeObserver === "undefined" || !this.$refs.tabList) {
+        return;
+      }
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateOverlayPosition();
+      });
+      this.resizeObserver.observe(this.$refs.tabList);
+    },
+    teardownOverlayObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+    },
+  },
+  computed: {
+    rootClasses() {
+      return this.isFullWidth ? "w-full max-w-full" : "max-w-full";
+    },
+    navClasses() {
+      return this.isFullWidth ? "flex w-full" : "inline-flex";
+    },
+    tabListClasses() {
+      return this.isFullWidth
+        ? "flex w-full min-w-0"
+        : "inline-flex min-w-0";
+    },
+    tabButtonClasses() {
+      return this.isFullWidth
+        ? "min-w-0 flex-1"
+        : "min-w-9 shrink-0 sm:min-w-0";
+    },
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--inset-tab-icon-color": colors.shade700,
+      };
+    },
+  },
+  watch: {
+    currentTab() {
+      this.$nextTick(this.updateOverlayPosition);
+    },
+    tabOptions: {
+      deep: true,
+      handler() {
+        this.$nextTick(this.updateOverlayPosition);
+      },
+    },
+    isFullWidth() {
+      this.$nextTick(this.updateOverlayPosition);
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.updateOverlayPosition();
+      this.setupOverlayObserver();
+    });
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", this.updateOverlayPosition);
+    }
+  },
+  beforeDestroy() {
+    if (typeof ResizeObserver === "undefined") {
+      window.removeEventListener("resize", this.updateOverlayPosition);
+    }
+    this.teardownOverlayObserver();
+  },
+};
+</script>
+
+<style>
+.custom-inset-tabs-nav {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.custom-inset-tabs-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.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;