classcard-ui 0.2.989 → 0.2.990

package/src/components/CCalendar/index.js

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

package/src/components/CCard/CCard.vue

@@ -1,49 +1,49 @@
-<template>
-  <div
-    class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
-  >
-    <div class="flex-shrink-0 p-2 rounded-md bg-gray-100">
-      <c-avatar
-        :image="image.image"
-        :rounded="image.rounded"
-        :size="image.size"
-        imageClasses="object-contain"
-      ></c-avatar>
-    </div>
-    <div class="flex-1 min-w-0">
-      <a href="#" class="focus:outline-none">
-        <span class="absolute inset-0" aria-hidden="true"></span>
-        <div class="flex">
-          <p class="text-sm text-gray-900">
-            {{ name }}
-          </p>
-          <slot></slot>
-        </div>
-        <p class="text-sm text-gray-500 truncate">
-          {{ description }}
-        </p>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script>
-import CAvatar from "../CAvatar/CAvatar.vue";
-export default {
-  name: "CCard",
-  components: { CAvatar },
-  props: {
-    image: {
-      type: Object,
-    },
-    name: {
-      type: String,
-    },
-    description: {
-      type: String,
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div
+    class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
+  >
+    <div class="flex-shrink-0 p-2 rounded-md bg-gray-100">
+      <c-avatar
+        :image="image.image"
+        :rounded="image.rounded"
+        :size="image.size"
+        imageClasses="object-contain"
+      ></c-avatar>
+    </div>
+    <div class="flex-1 min-w-0">
+      <a href="#" class="focus:outline-none">
+        <span class="absolute inset-0" aria-hidden="true"></span>
+        <div class="flex">
+          <p class="text-sm text-gray-900">
+            {{ name }}
+          </p>
+          <slot></slot>
+        </div>
+        <p class="text-sm text-gray-500 truncate">
+          {{ description }}
+        </p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import CAvatar from "../CAvatar/CAvatar.vue";
+export default {
+  name: "CCard",
+  components: { CAvatar },
+  props: {
+    image: {
+      type: Object,
+    },
+    name: {
+      type: String,
+    },
+    description: {
+      type: String,
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CCard/index.js

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

package/src/components/CCheckbox/CCheckbox.vue

@@ -1,85 +1,85 @@
-<template>
-  <div>
-    <div class="relative flex items-start">
-      <div class="flex h-5 items-center">
-        <input
-          type="checkbox"
-          v-model="checkedValue"
-          class="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
-          @click="changeValue"
-          :disabled="isDisabled"
-        />
-      </div>
-      <div
-        class="ml-3 cursor-pointer text-sm"
-        :class="isDisabled ? 'pointer-events-none' : ''"
-        @click="changeValue"
-      >
-        <label
-          :class="`cursor-pointer font-medium text-gray-900 ${
-            isDisabled ? 'opacity-50' : ''
-          } ${tag ? 'flex' : ''}`"
-          >{{ label }}
-          <c-tag
-            v-if="tag && Object.keys(tag).length !== 0"
-            :label="tag.label"
-            :color="tag.color"
-            :class="tag.class"
-            class="ml-2"
-          />
-        </label>
-        <p
-          :class="`mt-0.5 cursor-pointer text-gray-500 ${
-            isDisabled ? 'opacity-50' : ''
-          }`"
-        >
-          {{ description }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import CTag from "../CTag/CTag.vue";
-export default {
-  components: { CTag },
-  name: "CCheckbox",
-  props: {
-    label: { type: String },
-    description: { type: String },
-    value: [Boolean, Number],
-    isDisabled: {
-      type: Boolean,
-    },
-    tag: {
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      checkedValue: this.value == 0 ? false : true,
-    };
-  },
-  methods: {
-    changeValue() {
-      let selectedValue = 0;
-      if (this.checkedValue) {
-        this.checkedValue = false;
-        selectedValue = 0;
-      } else if (!this.checkedValue) {
-        this.checkedValue = true;
-        selectedValue = 1;
-      }
-      this.$emit("onChange", selectedValue);
-    },
-  },
-  watch: {
-    value() {
-      this.checkedValue = this.value;
-    },
-  },
-  mounted() {
-    this.checkedValue = this.value == 0 ? false : true;
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="relative flex items-start">
+      <div class="flex h-5 items-center">
+        <input
+          type="checkbox"
+          v-model="checkedValue"
+          class="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
+          @click="changeValue"
+          :disabled="isDisabled"
+        />
+      </div>
+      <div
+        class="ml-3 cursor-pointer text-sm"
+        :class="isDisabled ? 'pointer-events-none' : ''"
+        @click="changeValue"
+      >
+        <label
+          :class="`cursor-pointer font-medium text-gray-900 ${
+            isDisabled ? 'opacity-50' : ''
+          } ${tag ? 'flex' : ''}`"
+          >{{ label }}
+          <c-tag
+            v-if="tag && Object.keys(tag).length !== 0"
+            :label="tag.label"
+            :color="tag.color"
+            :class="tag.class"
+            class="ml-2"
+          />
+        </label>
+        <p
+          :class="`mt-0.5 cursor-pointer text-gray-500 ${
+            isDisabled ? 'opacity-50' : ''
+          }`"
+        >
+          {{ description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CTag from "../CTag/CTag.vue";
+export default {
+  components: { CTag },
+  name: "CCheckbox",
+  props: {
+    label: { type: String },
+    description: { type: String },
+    value: [Boolean, Number],
+    isDisabled: {
+      type: Boolean,
+    },
+    tag: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      checkedValue: this.value == 0 ? false : true,
+    };
+  },
+  methods: {
+    changeValue() {
+      let selectedValue = 0;
+      if (this.checkedValue) {
+        this.checkedValue = false;
+        selectedValue = 0;
+      } else if (!this.checkedValue) {
+        this.checkedValue = true;
+        selectedValue = 1;
+      }
+      this.$emit("onChange", selectedValue);
+    },
+  },
+  watch: {
+    value() {
+      this.checkedValue = this.value;
+    },
+  },
+  mounted() {
+    this.checkedValue = this.value == 0 ? false : true;
+  },
+};
+</script>

package/src/components/CCheckbox/index.js

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

package/src/components/CCircularButton/CCircularButton.vue

@@ -1,52 +1,52 @@
-<template>
-  <button
-    type="button"
-    :disabled="disabled"
-    class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rounded-full p-1 text-white shadow-sm disabled:opacity-50"
-    :class="classes"
-    @click="$emit('action')"
-  >
-    <c-icon
-      :type="icon.type"
-      :name="icon.name"
-      :viewBox="icon.viewBox"
-      :class="icon.class"
-    />
-  </button>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  components: { CIcon },
-  name: "CCircularButton",
-  props: {
-    type: {
-      type: String,
-      default: "black",
-    },
-    icon: {
-      type: Object,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    classes() {
-      const classNames = {
-        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 ":
-          this.type == "success",
-        "text-white bg-gray-900 hover:bg-gray-800 focus:ring-gray-600 ":
-          this.type == "black",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 ":
-          this.type == "danger",
-      };
-      return classNames;
-    },
-  },
-};
-</script>
+<template>
+  <button
+    type="button"
+    :disabled="disabled"
+    class="focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rounded-full p-1 text-white shadow-sm disabled:opacity-50"
+    :class="classes"
+    @click="$emit('action')"
+  >
+    <c-icon
+      :type="icon.type"
+      :name="icon.name"
+      :viewBox="icon.viewBox"
+      :class="icon.class"
+    />
+  </button>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  components: { CIcon },
+  name: "CCircularButton",
+  props: {
+    type: {
+      type: String,
+      default: "black",
+    },
+    icon: {
+      type: Object,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      const classNames = {
+        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600 ":
+          this.type == "success",
+        "text-white bg-gray-900 hover:bg-gray-800 focus:ring-gray-600 ":
+          this.type == "black",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600 ":
+          this.type == "danger",
+      };
+      return classNames;
+    },
+  },
+};
+</script>

package/src/components/CCircularButton/index.js

@@ -1,2 +1,2 @@
-import CCircularButton from "./CCircularButton.vue";
-export default CCircularButton;
+import CCircularButton from "./CCircularButton.vue";
+export default CCircularButton;

package/src/components/CCollapsibleSection/CCollapsibleSection.vue

@@ -1,101 +1,101 @@
-<template>
-  <div>
-    <div
-      :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
-      class="flex cursor-pointer flex-row items-center justify-between"
-      @click.self="collapse"
-    >
-      <!-- left and right arrow icon as per opening and closing of collapsible -->
-      <div class="flex flex-row items-center" @click="collapse">
-        <c-icon
-          :name="showSection ? 'chevron-down' : 'chevron-right'"
-          class="h-5 w-5 text-gray-900"
-          type="solid"
-        ></c-icon>
-        <!-- label of the collapsible section -->
-        <div
-          :class="{ 'py-2': tabAction }"
-          class="ml-1 whitespace-nowrap border-transparent text-base font-semibold text-gray-900 hover:border-gray-300 hover:text-gray-700"
-        >
-          {{ label }}
-        </div>
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <!-- tertiary button to render on right side of collapsible section -->
-      <c-button
-        v-if="tabAction && showSection"
-        type="tertiary"
-        :label="buttonLabel"
-        @action="action"
-      ></c-button>
-      <!-- anchor tag  to render on right side of collapsible section -->
-      <c-anchor-tag
-        v-if="tabLink && showSection"
-        :label="tabLink.label"
-        :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,
-    },
-    // text to render on tertiary button
-    buttonLabel: {
-      type: String,
-    },
-    // 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,
-    },
-  },
-  data() {
-    return {
-      showSection: this.isCollapsed,
-    };
-  },
-  methods: {
-    collapse() {
-      console.log("collapsing");
-      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 flex-row items-center justify-between"
+      @click.self="collapse"
+    >
+      <!-- left and right arrow icon as per opening and closing of collapsible -->
+      <div class="flex flex-row items-center" @click="collapse">
+        <c-icon
+          :name="showSection ? 'chevron-down' : 'chevron-right'"
+          class="h-5 w-5 text-gray-900"
+          type="solid"
+        ></c-icon>
+        <!-- label of the collapsible section -->
+        <div
+          :class="{ 'py-2': tabAction }"
+          class="ml-1 whitespace-nowrap border-transparent text-base font-semibold text-gray-900 hover:border-gray-300 hover:text-gray-700"
+        >
+          {{ label }}
+        </div>
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <!-- tertiary button to render on right side of collapsible section -->
+      <c-button
+        v-if="tabAction && showSection"
+        type="tertiary"
+        :label="buttonLabel"
+        @action="action"
+      ></c-button>
+      <!-- anchor tag  to render on right side of collapsible section -->
+      <c-anchor-tag
+        v-if="tabLink && showSection"
+        :label="tabLink.label"
+        :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,
+    },
+    // text to render on tertiary button
+    buttonLabel: {
+      type: String,
+    },
+    // 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,
+    },
+  },
+  data() {
+    return {
+      showSection: this.isCollapsed,
+    };
+  },
+  methods: {
+    collapse() {
+      console.log("collapsing");
+      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