classcard-ui 0.2.1489 → 0.2.1490-beta.0

package/src/components/CCollapsibleSection/CCollapsibleSection.vue

@@ -1,121 +1,121 @@
-<template>
-  <div>
-    <div
-      :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
-      class="flex cursor-pointer items-center justify-between gap-2"
-      :id="id"
-      @click.self="collapse"
-    >
-      <!-- left and right arrow icon as per opening and closing of collapsible -->
-      <div class="flex min-w-0 flex-1 items-center gap-1" @click="collapse">
-        <c-icon
-          :name="showSection ? 'chevron-down' : 'chevron-right'"
-          class="h-5 w-5 shrink-0 text-gray-900"
-          type="solid"
-        ></c-icon>
-        <!-- label of the collapsible section -->
-        <div
-          :class="[tabAction ? 'py-2' : '', customHeaderClass]"
-          class="flex min-w-0 flex-1 items-center gap-1 border-transparent hover:border-gray-300 hover:text-gray-700"
-        >
-          <span class="min-w-0 truncate" :title="label">{{ label }}</span>
-          <span
-            v-if="badgeCount > 0"
-            class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-100 text-sm font-medium text-gray-900"
-          >
-            {{ badgeCount }}
-          </span>
-          <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-        </div>
-      </div>
-      <!-- tertiary button to render on right side of collapsible section -->
-      <c-button
-        v-if="tabAction && showSection"
-        type="tertiary"
-        :label="buttonLabel"
-        :id="id + '_action_button'"
-        @action="action"
-      ></c-button>
-      <!-- anchor tag  to render on right side of collapsible section -->
-      <c-anchor-tag
-        v-if="tabLink && showSection"
-        :label="tabLink.label"
-        :id="id + '_action_link'"
-        :action="action"
-      ></c-anchor-tag>
-    </div>
-    <!-- content to render in collapsible section -->
-    <div class="mt-5 text-sm text-gray-500" v-if="showSection">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import CButton from "../CButton/CButton.vue";
-import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
-export default {
-  name: "CCollapsibleSection",
-  components: { CIcon, CButton, CAnchorTag },
-  props: {
-    // label of section
-    label: {
-      type: String,
-    },
-    // id of section
-    id: {
-      type: String,
-    },
-    // text to render on tertiary button
-    buttonLabel: {
-      type: String,
-    },
-    badgeCount: {
-      type: Number,
-      default: 0,
-    },
-    // whether to show the divider below section heading
-    divider: {
-      type: Boolean,
-    },
-    isCollapsed: {
-      type: Boolean,
-      default: true,
-    },
-    // to render button on right side of section heading
-    tabAction: { type: Boolean },
-    // link to render on right side of section
-    tabLink: { type: Object },
-    // action to emit on click of link/button
-    action: {
-      type: Function,
-    },
-    isRequired: {
-      type: Boolean,
-      default: false,
-    },
-    customHeaderClass: {
-      type: String,
-      default: " text-base font-semibold text-gray-900",
-    },
-  },
-  data() {
-    return {
-      showSection: this.isCollapsed,
-    };
-  },
-  methods: {
-    collapse() {
-      this.showSection = !this.showSection;
-    },
-  },
-  watch: {
-    isCollapsed() {
-      this.showSection = this.isCollapsed;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div
+      :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
+      class="flex cursor-pointer items-center justify-between gap-2"
+      :id="id"
+      @click.self="collapse"
+    >
+      <!-- left and right arrow icon as per opening and closing of collapsible -->
+      <div class="flex min-w-0 flex-1 items-center gap-1" @click="collapse">
+        <c-icon
+          :name="showSection ? 'chevron-down' : 'chevron-right'"
+          class="h-5 w-5 shrink-0 text-gray-900"
+          type="solid"
+        ></c-icon>
+        <!-- label of the collapsible section -->
+        <div
+          :class="[tabAction ? 'py-2' : '', customHeaderClass]"
+          class="flex min-w-0 flex-1 items-center gap-1 border-transparent hover:border-gray-300 hover:text-gray-700"
+        >
+          <span class="min-w-0 truncate" :title="label">{{ label }}</span>
+          <span
+            v-if="badgeCount > 0"
+            class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-100 text-sm font-medium text-gray-900"
+          >
+            {{ badgeCount }}
+          </span>
+          <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+        </div>
+      </div>
+      <!-- tertiary button to render on right side of collapsible section -->
+      <c-button
+        v-if="tabAction && showSection"
+        type="tertiary"
+        :label="buttonLabel"
+        :id="id + '_action_button'"
+        @action="action"
+      ></c-button>
+      <!-- anchor tag  to render on right side of collapsible section -->
+      <c-anchor-tag
+        v-if="tabLink && showSection"
+        :label="tabLink.label"
+        :id="id + '_action_link'"
+        :action="action"
+      ></c-anchor-tag>
+    </div>
+    <!-- content to render in collapsible section -->
+    <div class="mt-5 text-sm text-gray-500" v-if="showSection">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import CButton from "../CButton/CButton.vue";
+import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
+export default {
+  name: "CCollapsibleSection",
+  components: { CIcon, CButton, CAnchorTag },
+  props: {
+    // label of section
+    label: {
+      type: String,
+    },
+    // id of section
+    id: {
+      type: String,
+    },
+    // text to render on tertiary button
+    buttonLabel: {
+      type: String,
+    },
+    badgeCount: {
+      type: Number,
+      default: 0,
+    },
+    // whether to show the divider below section heading
+    divider: {
+      type: Boolean,
+    },
+    isCollapsed: {
+      type: Boolean,
+      default: true,
+    },
+    // to render button on right side of section heading
+    tabAction: { type: Boolean },
+    // link to render on right side of section
+    tabLink: { type: Object },
+    // action to emit on click of link/button
+    action: {
+      type: Function,
+    },
+    isRequired: {
+      type: Boolean,
+      default: false,
+    },
+    customHeaderClass: {
+      type: String,
+      default: " text-base font-semibold text-gray-900",
+    },
+  },
+  data() {
+    return {
+      showSection: this.isCollapsed,
+    };
+  },
+  methods: {
+    collapse() {
+      this.showSection = !this.showSection;
+    },
+  },
+  watch: {
+    isCollapsed() {
+      this.showSection = this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CCollapsibleSection/index.js

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

package/src/components/CColorDots/CColorDots.vue

@@ -1,52 +1,52 @@
-<template>
-  <div
-    :class="`flex items-center ${
-      isBackground ? `w-fit rounded-xl px-2 text-sm bg-${color}-100` : ''
-    }`"
-  >
-    <span
-      class="h-1.5 w-1.5 rounded-full"
-      :class="classes ? classes : colorClasses"
-      aria-hidden="true"
-    ></span>
-    <div class="ml-2 text-sm font-medium">
-      {{ label }}
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "CColorDots",
-  props: {
-    color: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    isBackground: {
-      type: Boolean,
-    },
-    //to pass color with specified shade, disables default color indicator
-    classes: {
-      type: String,
-      default: null,
-    },
-  },
-  computed: {
-    colorClasses() {
-      return {
-        "bg-gray-500": this.color == "gray",
-        "bg-red-500": this.color == "red",
-        "bg-yellow-500": this.color == "yellow",
-        "bg-green-500": this.color == "green",
-        "bg-blue-500": this.color == "indigo",
-        "bg-purple-500": this.color == "purple",
-        "bg-pink-500": this.color == "pink",
-        "bg-indigo-500": this.color == "indigo",
-        "bg-orange-500": this.color == "orange",
-      };
-    },
-  },
-};
-</script>
+<template>
+  <div
+    :class="`flex items-center ${
+      isBackground ? `w-fit rounded-xl px-2 text-sm bg-${color}-100` : ''
+    }`"
+  >
+    <span
+      class="h-1.5 w-1.5 rounded-full"
+      :class="classes ? classes : colorClasses"
+      aria-hidden="true"
+    ></span>
+    <div class="ml-2 text-sm font-medium">
+      {{ label }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CColorDots",
+  props: {
+    color: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    isBackground: {
+      type: Boolean,
+    },
+    //to pass color with specified shade, disables default color indicator
+    classes: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    colorClasses() {
+      return {
+        "bg-gray-500": this.color == "gray",
+        "bg-red-500": this.color == "red",
+        "bg-yellow-500": this.color == "yellow",
+        "bg-green-500": this.color == "green",
+        "bg-blue-500": this.color == "indigo",
+        "bg-purple-500": this.color == "purple",
+        "bg-pink-500": this.color == "pink",
+        "bg-indigo-500": this.color == "indigo",
+        "bg-orange-500": this.color == "orange",
+      };
+    },
+  },
+};
+</script>

package/src/components/CColorDots/index.js

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