classcard-ui 0.2.1475 → 0.2.1476

package/src/components/CTag/CTag.vue

@@ -1,109 +1,109 @@
-<template>
-  <div>
-    <div
-      :class="[
-        colorClasses,
-        customLineHeight,
-        tagClasses,
-        useFlex ? 'flex' : 'inline-flex',
-      ]"
-      class="items-center rounded-md px-2.5 py-0.5 text-sm"
-    >
-      <span
-        v-if="dotIcon"
-        class="mr-1.5 h-1.5 w-1.5 rounded-full"
-        :class="dotColorClasses"
-        aria-hidden="true"
-      ></span>
-      <c-icon
-        v-if="icon && iconPosition == 'left'"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      {{ label }}
-      <c-icon
-        v-if="icon && iconPosition == 'right'"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-    </div>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CTag",
-  components: { CIcon },
-  props: {
-    label: { type: String },
-    color: { type: String, default: "green" },
-    tagClasses: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    iconPosition: {
-      type: String,
-      default: "left",
-    },
-    dotColor: {
-      type: String,
-      default: "green",
-    },
-    dotIcon: {
-      type: Boolean,
-    },
-    useFlex: {
-      type: Boolean,
-      default: false,
-    },
-    customLineHeight: {
-      type: String,
-      default: "leading-5",
-    },
-  },
-  computed: {
-    colorClasses() {
-      return {
-        "bg-gray-50 text-gray-800 ring-1 ring-inset ring-gray-500/10":
-          this.color == "gray",
-        "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10":
-          this.color == "red",
-        "bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20":
-          this.color == "yellow",
-        "bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20":
-          this.color == "green",
-        "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10":
-          this.color == "blue",
-        "bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-700/10":
-          this.color == "purple",
-        "bg-pink-50 text-pink-700 ring-1 ring-inset ring-pink-700/10":
-          this.color == "pink",
-        "bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10":
-          this.color == "indigo",
-        "bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-700/10":
-          this.color == "orange",
-        "bg-white text-gray-800 ring-1 ring-inset ring-gray-200":
-          this.color == "white",
-      };
-    },
-    dotColorClasses() {
-      return {
-        "bg-gray-500": this.dotColor == "gray",
-        "bg-red-500": this.dotColor == "red",
-        "bg-yellow-500": this.dotColor == "yellow",
-        "bg-green-500": this.dotColor == "green",
-        "bg-blue-500": this.dotColor == "indigo",
-        "bg-purple-500": this.dotColor == "purple",
-        "bg-pink-500": this.dotColor == "pink",
-        "bg-indigo-500": this.dotColor == "indigo",
-      };
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div
+      :class="[
+        colorClasses,
+        customLineHeight,
+        tagClasses,
+        useFlex ? 'flex' : 'inline-flex',
+      ]"
+      class="items-center rounded-md px-2.5 py-0.5 text-sm"
+    >
+      <span
+        v-if="dotIcon"
+        class="mr-1.5 h-1.5 w-1.5 rounded-full"
+        :class="dotColorClasses"
+        aria-hidden="true"
+      ></span>
+      <c-icon
+        v-if="icon && iconPosition == 'left'"
+        :type="icon.type"
+        :class="icon.class"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      {{ label }}
+      <c-icon
+        v-if="icon && iconPosition == 'right'"
+        :type="icon.type"
+        :class="icon.class"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+    </div>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CTag",
+  components: { CIcon },
+  props: {
+    label: { type: String },
+    color: { type: String, default: "green" },
+    tagClasses: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    iconPosition: {
+      type: String,
+      default: "left",
+    },
+    dotColor: {
+      type: String,
+      default: "green",
+    },
+    dotIcon: {
+      type: Boolean,
+    },
+    useFlex: {
+      type: Boolean,
+      default: false,
+    },
+    customLineHeight: {
+      type: String,
+      default: "leading-5",
+    },
+  },
+  computed: {
+    colorClasses() {
+      return {
+        "bg-gray-50 text-gray-800 ring-1 ring-inset ring-gray-500/10":
+          this.color == "gray",
+        "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10":
+          this.color == "red",
+        "bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20":
+          this.color == "yellow",
+        "bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20":
+          this.color == "green",
+        "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10":
+          this.color == "blue",
+        "bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-700/10":
+          this.color == "purple",
+        "bg-pink-50 text-pink-700 ring-1 ring-inset ring-pink-700/10":
+          this.color == "pink",
+        "bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-700/10":
+          this.color == "indigo",
+        "bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-700/10":
+          this.color == "orange",
+        "bg-white text-gray-800 ring-1 ring-inset ring-gray-200":
+          this.color == "white",
+      };
+    },
+    dotColorClasses() {
+      return {
+        "bg-gray-500": this.dotColor == "gray",
+        "bg-red-500": this.dotColor == "red",
+        "bg-yellow-500": this.dotColor == "yellow",
+        "bg-green-500": this.dotColor == "green",
+        "bg-blue-500": this.dotColor == "indigo",
+        "bg-purple-500": this.dotColor == "purple",
+        "bg-pink-500": this.dotColor == "pink",
+        "bg-indigo-500": this.dotColor == "indigo",
+      };
+    },
+  },
+};
+</script>

package/src/components/CTag/index.js

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

package/src/components/CTextarea/CTextarea.vue

@@ -1,118 +1,118 @@
-<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="mt-1">
-      <textarea
-        :value="textareaValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        @keyup="updateCursorPosition"
-        @click="updateCursorPosition"
-        :placeholder="placeholder"
-        :id="id"
-        :rows="rows"
-        :class="[
-          errorClasses,
-          extraClasses,
-          disableResize ? 'resize-none' : '',
-        ]"
-        :disabled="disabled"
-        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"
-      ></textarea>
-      <!-- <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">
-      {{ errorMessage }}
-    </p>
-    <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: "CTextarea",
-  // components: { CIcon },
-  props: {
-    id: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    extraClasses: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-    },
-    value: {
-      type: String,
-    },
-    rows: { type: String, default: "3" },
-    helpText: {
-      type: String,
-    },
-    hint: { type: String },
-    isValidate: { type: Boolean },
-    errorMessage: {
-      type: String,
-    },
-    // whether the textarea field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    //disable the resize
-    disableResize: {
-      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,
-      };
-    },
-  },
-  methods: {
-    updateCursorPosition(event) {
-      this.$emit("handleCursorIndex", event.target.selectionStart);
-    },
-  },
-  data() {
-    return {
-      textareaValue: this.value,
-    };
-  },
-  watch: {
-    value() {
-      this.textareaValue = 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="mt-1">
+      <textarea
+        :value="textareaValue"
+        @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
+        @keyup="updateCursorPosition"
+        @click="updateCursorPosition"
+        :placeholder="placeholder"
+        :id="id"
+        :rows="rows"
+        :class="[
+          errorClasses,
+          extraClasses,
+          disableResize ? 'resize-none' : '',
+        ]"
+        :disabled="disabled"
+        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"
+      ></textarea>
+      <!-- <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">
+      {{ errorMessage }}
+    </p>
+    <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: "CTextarea",
+  // components: { CIcon },
+  props: {
+    id: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    extraClasses: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+    value: {
+      type: String,
+    },
+    rows: { type: String, default: "3" },
+    helpText: {
+      type: String,
+    },
+    hint: { type: String },
+    isValidate: { type: Boolean },
+    errorMessage: {
+      type: String,
+    },
+    // whether the textarea field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    //disable the resize
+    disableResize: {
+      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,
+      };
+    },
+  },
+  methods: {
+    updateCursorPosition(event) {
+      this.$emit("handleCursorIndex", event.target.selectionStart);
+    },
+  },
+  data() {
+    return {
+      textareaValue: this.value,
+    };
+  },
+  watch: {
+    value() {
+      this.textareaValue = this.value;
+    },
+  },
+};
+</script>

package/src/components/CTextarea/index.js

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