classcard-ui 0.2.666 → 0.2.671

package/src/components/CIconDropdown/CIconDropdown.vue

@@ -1,111 +0,0 @@
-<template>
-  <div>
-    <slot></slot>
-    <div
-      :class="`${isDropDownRelative ? 'relative' : ''} inline-block text-left`"
-    >
-      <div>
-        <button
-          type="white"
-          @click.stop="toggleDropdown = !toggleDropdown"
-          @blur="close()"
-          :class="
-            customClasses
-              ? iconClasses
-              : 'inline-flex w-full justify-center rounded-full border-none p-2 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
-          "
-          aria-haspopup="true"
-          aria-expanded="true"
-        >
-          <c-icon
-            :name="icon.name"
-            :type="icon.type"
-            :class="icon.class"
-          ></c-icon>
-        </button>
-      </div>
-      <div
-        v-show="toggleDropdown"
-        :class="classes"
-        class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
-      >
-        <div
-          class="w-max py-2"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="option-menu"
-        >
-          <a
-            v-for="(item, index) in items"
-            v-bind:key="item.text"
-            @mousedown.stop.prevent="dropdownAction(item)"
-            class="flex cursor-pointer px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
-            :class="item.class"
-            role="menuitem"
-            :disabled="item.disabled"
-          >
-            <c-icon
-              v-if="item.icon"
-              :name="dropdownIcons[index].name"
-              :type="dropdownIcons[index].type"
-              :class="dropdownIcons[index].class"
-            ></c-icon>
-            {{ item.text }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CIconDropdown",
-  components: { CIcon },
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    customClasses: {
-      type: Boolean,
-      default: false,
-    },
-    iconClasses: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    dropdownIcons: {
-      type: Array,
-    },
-    classes: {
-      type: String,
-    },
-    action: {
-      type: Function,
-    },
-    isDropDownRelative: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-    };
-  },
-  methods: {
-    dropdownAction(item) {
-      this.$emit("action", item);
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CIconDropdown/index.js

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

package/src/components/CInput/CInput.vue

@@ -1,120 +0,0 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <div class="flex items-center">
-        <!-- label of input field -->
-        <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>
-      <!-- hint on the right side of input field -->
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div class="relative mt-1 rounded-md">
-      <input
-        :readonly="readonly"
-        :type="type"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        @focus="$emit('focus', $event.target.value)"
-        :class="errorClasses"
-        class="block w-full flex-1 rounded-md px-3 py-2 text-sm text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <!-- to render to show validation is failed -->
-      <div
-        v-if="!isValidate && !customIcon"
-        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>
-      <slot name="customIcon" v-if="customIcon"></slot>
-    </div>
-    <!-- validation error message -->
-    <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 CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CInput",
-  components: { CIcon },
-  props: {
-    // Label of input field
-    label: {
-      type: String,
-    },
-    // Read only of input field
-    readonly: {
-      type: Boolean,
-    },
-    // placeholder of input
-    placeholder: {
-      type: String,
-    },
-    // v-model of the field
-    value: {
-      type: String,
-    },
-    // hint on right side of input
-    hint: { type: String },
-    // description about the field
-    helpText: {
-      type: String,
-    },
-    // validation is passed or not
-    isValidate: { type: Boolean },
-    // validation error message
-    errorMessage: {
-      type: String,
-    },
-    // to disable the input field
-    disabled: {
-      type: Boolean,
-    },
-    // whether the input field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    // type of input field
-    type: {
-      type: String,
-      default: "text",
-    },
-    customIcon: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    errorClasses() {
-      return {
-        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
-          this.isValidate == false,
-        "border-gray-300": this.isValidate == true,
-      };
-    },
-  },
-  data() {
-    return {
-      inputValue: this.value,
-    };
-  },
-  watch: {
-    value() {
-      this.inputValue = this.value;
-    },
-  },
-};
-</script>

package/src/components/CInput/index.js

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

package/src/components/CInputAddon/CInputAddon.vue

@@ -1,202 +0,0 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <div class="flex items-center">
-        <!-- label of input field -->
-        <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 v-if="!inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
-      <span
-        :class="disabled ? 'opacity-50' : ''"
-        v-if="addon"
-        class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500 sm:text-sm"
-      >
-        {{ addon }}
-      </span>
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="{ ...errorClasses, 'rounded-l-md': !addon }"
-        class="block w-full flex-1 rounded-r-md px-3 py-2 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <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>
-    <div v-if="!inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
-        class="block w-full flex-1 rounded-l-md px-3 py-2 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <div
-        v-if="!isValidate"
-        class="pointer-events-none absolute inset-y-0 right-14 flex items-center pr-3 text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-      </div>
-      <span
-        :class="disabled ? 'opacity-50' : ''"
-        class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 bg-gray-50 px-4 py-2 text-gray-500 sm:text-sm"
-      >
-        {{ addon }}
-      </span>
-    </div>
-    <div v-if="inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
-        class="block w-full flex-1 rounded-md px-3 py-2 text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
-        <div
-          v-if="!isValidate"
-          class="pointer-events-none right-0 flex items-center pr-2 text-red-600"
-        >
-          <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-        </div>
-        <span
-          class="text-gray-500 sm:text-sm"
-          :class="[disabled ? 'opacity-50' : '', inputType === 'number' ? 'mr-5' : '']"
-        >
-          {{ addon }}
-        </span>
-      </div>
-    </div>
-    <div v-if="inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
-      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <span class="text-gray-500 sm:text-sm">{{ addon }}</span>
-      </div>
-      <input
-        :type="inputType"
-        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
-        :style="`padding-left:${leftPaddingStyle}`"
-        class="block w-full rounded-md text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
-        :placeholder="placeholder"
-        :disabled="disabled"
-      />
-      <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-left text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-    <p v-if="helpText && isValidate == true" :class="`mt-2 text-sm ${helpTextColorStyles}`">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CInputAddon",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-    },
-    value: [String, Number],
-    hint: { type: String },
-    helpText: {
-      type: String,
-    },
-    addon: { type: String },
-    helpTextColor: {
-      type: String,
-      default: "gray",
-    },
-    inlineAddon: { type: Boolean },
-    addonType: {
-      type: String,
-    },
-    isValidate: { type: Boolean },
-    errorMessage: {
-      type: String,
-    },
-    disabled: {
-      type: Boolean,
-    },
-    // whether the input field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    inputType: {
-      type: String,
-      default: "text",
-    },
-  },
-  computed: {
-    errorClasses() {
-      return {
-        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
-          this.isValidate == false,
-        "border-gray-300": this.isValidate == true,
-      };
-    },
-    leftPaddingStyle() {
-      var leftPadding;
-      if (this.addon.length <= 2) {
-        leftPadding = "2rem";
-      } else if (this.addon.length >= 3) {
-        leftPadding = "3.5rem";
-      }
-      return leftPadding;
-    },
-    helpTextColorStyles() {
-      switch (this.helpTextColor) {
-        case "green":
-          return "text-green-500";
-        case "red":
-          return "text-red-500";
-        default:
-          return "text-gray-500";
-      }
-    },
-  },
-  data() {
-    return {
-      inputValue: this.value,
-    };
-  },
-  methods: {},
-  watch: {
-    value() {
-      this.inputValue = this.value;
-    },
-  },
-};
-</script>

package/src/components/CInputAddon/index.js

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

package/src/components/CInputEmail/CInputEmail.vue

@@ -1,93 +0,0 @@
-<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 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
-        :placeholder="placeholder"
-        :value="email"
-        @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: {
-    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,
-    },
-  },
-  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 +0,0 @@
-import CInputEmail from './CInputEmail.vue'
-
-export default CInputEmail

package/src/components/CModalHeading/CModalHeading.vue

@@ -1,22 +0,0 @@
-<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 +0,0 @@
-import CModalHeading from './CModalHeading.vue'
-
-export default CModalHeading

package/src/components/CModuleHelpLinks/CModuleHelpLinks.vue

@@ -1,39 +0,0 @@
-<template>
-  <div>
-    <div v-if="description" class="mt-2 flex flex-col sm:flex-row sm:flex-wrap sm:space-x-6">
-      <div class="flex items-center text-sm text-gray-500">
-        {{ description }}
-      </div>
-    </div>
-    <div class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
-      <div class="mt-2 flex items-center text-sm text-indigo-600" v-if="helpArticle">
-        <c-icon class="mr-1.5 h-5 w-5" name="book-open" type="solid"></c-icon>
-        <a :href="helpArticle" target="_blank" class="font-medium text-indigo-600 hover:underline">
-          How to get started
-        </a>
-      </div>
-      <div class="mt-2 flex items-center text-sm text-indigo-600" v-if="helpVideo">
-        <c-icon class="mr-1.5 h-5 w-5" name="video-camera" type="solid"></c-icon>
-        <a :href="helpVideo" target="_blank" class="font-medium text-indigo-600 hover:underline">
-          Watch a video
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CModuleHelpLinks",
-  components: { CIcon },
-  props: {
-    description: { type: String },
-    helpVideo: {
-      type: String,
-    },
-    helpArticle: { type: String },
-  },
-  methods: {},
-};
-</script>

package/src/components/CModuleHelpLinks/index.js

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