classcard-ui 0.2.1475 → 0.2.1476

package/src/components/CAvatarGroup/CAvatarGroup.vue

@@ -1,213 +1,213 @@
-<template>
-  <div :class="description ? 'items-start' : 'items-center'" class="flex">
-    <div class="flex -space-x-1" v-if="images && images.length <= 3">
-      <img
-        v-for="(image, index) in images"
-        :key="index"
-        :class="classes"
-        class="inline-block ring-2 ring-white"
-        :src="image.image"
-        alt=""
-      />
-    </div>
-    <div class="flex -space-x-1" v-if="images && images.length > 3">
-      <img
-        v-for="(image, index) in images.slice(0, 4)"
-        :key="index"
-        :class="classes"
-        class="inline-block ring-2 ring-white"
-        :src="image.image"
-        alt=""
-      />
-    </div>
-    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length > 4">
-      <template v-for="(name, index) in nameInitialsWithColors.slice(0, 4)">
-        <div
-        :key="index"
-        :class="[nameInitialsClasses, 'relative']"
-        @mouseover="handleMouseOver(index)"
-        @mouseleave="handleMouseLeave"
-        >
-          <c-tool-tip
-            v-if="showTooltipOnHover && hoveredIndex === index"
-            :tooltipText="name.fullName"
-            :isTopAligned="true"
-            color="#1f2937"
-            classes="absolute left-1/2 -translate-x-1/2 -mt-12 text-white bg-gray-800 w-max"
-          ></c-tool-tip>
-          <img
-            v-if="showImageWithInitials && (name.image || name.image_240)"
-            :class="[
-              'w-full h-full object-cover',
-              rounded ? 'rounded-full' : 'rounded-md'
-            ]"
-            :src="name.image || name.image_240"
-            :alt="'Profile picture of ' + name.fullName"
-          />
-          <div
-            v-else
-            :class="[
-              'w-full h-full inline-block text-center font-medium ring-2 ring-white',
-              'bg-' + name.color + '-100',
-              'border-' + name.color + '-300',
-              ,
-              'text-' + name.color + '-600',
-              rounded ? 'rounded-full' : 'rounded-md'
-            ]"
-            :style="[
-              size == 'medium' ? { 'line-height': '3rem' } : '',
-              size == 'large' ? { 'line-height': '3.5rem' } : '',
-              size == 'very large' ? { 'line-height': '6rem' } : '',
-              size == 'extraextrasmall' ? { 'font-size': '0.5rem' } : '',
-              size == 'extrasmall' ? { 'font-size': '0.7rem' } : '',
-            ]"
-          >
-            {{ name.initials }}
-          </div>
-        </div>
-      </template>
-    </div>
-    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length <= 4">
-      <template v-for="(name, index) in nameInitialsWithColors">
-        <div
-        :key="index"
-        :class="[nameInitialsClasses, 'relative']"
-        @mouseover="handleMouseOver(index)"
-        @mouseleave="handleMouseLeave"
-        >
-          <c-tool-tip
-            v-if="showTooltipOnHover && hoveredIndex === index"
-            :tooltipText="name.fullName"
-            :isTopAligned="true"
-            color="#1f2937"
-            classes="absolute left-1/2 -translate-x-1/2 -mt-12 text-white bg-gray-800 w-max"
-          ></c-tool-tip>
-          <img
-            v-if="showImageWithInitials && (name.image || name.image_240)"
-            :class="[
-              'w-full h-full object-cover',
-              rounded ? 'rounded-full' : 'rounded-md'
-            ]"
-            :src="name.image || name.image_240"
-            :alt="'Profile picture of ' + name.fullName"
-          />
-          <div
-          v-else
-          :class="[
-            'w-full h-full inline-block text-center font-medium ring-2 ring-white',
-            'bg-' + name.color + '-100',
-            'border-' + name.color + '-300',
-            ,
-            'text-' + name.color + '-600',
-            rounded ? 'rounded-full' : 'rounded-md'
-          ]"
-          :style="[
-            size == 'medium' ? { 'line-height': '3rem' } : '',
-            size == 'large' ? { 'line-height': '3.5rem' } : '',
-            size == 'very large' ? { 'line-height': '6rem' } : '',
-            size == 'extraextrasmall' ? { 'font-size': '0.5rem' } : '',
-            size == 'extrasmall' ? { 'font-size': '0.7rem' } : '',
-          ]"
-        >
-          {{ name.initials }}
-          </div>
-        </div>
-      </template>
-    </div>
-    <div class="ml-3 text-left" v-if="name">
-      <p v-if="name" class="text-sm text-gray-500">
-        {{ name }}
-      </p>
-      <p v-if="description" class="text-xs text-gray-500 group-hover:text-gray-700">
-        {{ description }}
-      </p>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-<script>
-import CToolTip from '../CToolTip/CToolTip.vue';
-export default {
-  components: { CToolTip },
-  name: "CAvatarGroup",
-  props: {
-    size: {
-      type: String,
-      required: true,
-      default: "medium",
-    },
-    images: {
-      type: Array,
-    },
-    nameInitials: {
-      type: Array,
-    },
-    rounded: { type: Boolean },
-    name: { type: String },
-    description: { type: String },
-    showTooltipOnHover: {
-      type: Boolean,
-      default: false,
-    },
-    showImageWithInitials: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
-      hoveredIndex: null,
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        "h-6 w-6": this.size == "extraextrasmall",
-        "h-8 w-8": this.size == "extrasmall",
-        "h-10 w-10": this.size == "small",
-        "h-12 w-12": this.size == "medium",
-        "h-14 w-14": this.size == "large",
-        "h-24 w-24": this.size == "very large",
-        "rounded-full": this.rounded == true,
-        "rounded-md": this.rounded == false,
-      };
-    },
-    nameInitialsClasses() {
-      return {
-        "h-6 w-6 leading-6": this.size == "extraextrasmall",
-        "h-8 w-8 leading-8": this.size == "extrasmall",
-        "h-10 w-10 leading-10 text-xs": this.size == "small",
-        "h-12 w-12 text-sm": this.size == "medium",
-        "h-14 w-14 text-base": this.size == "large",
-        "h-24 w-24 text-2xl": this.size == "very large"
-      };
-    },
-    nameInitialsWithColors() {
-      let nameWithColors = this.nameInitials;
-      nameWithColors.map((name) => {
-        name.color = this.setColors();
-        name.fullName = name.surname ? `${name.firstName} ${name.surname}` : name.firstName
-      });
-      return nameWithColors;
-    },
-  },
-  methods: {
-    setColors() {
-      this.colors = this.colors.sort(() => Math.random() - 0.5);
-      let show = this.colors[Math.floor(Math.random() * this.colors.length)];
-      return show;
-    },
-    handleMouseOver(index) {
-    if (this.showTooltipOnHover) {
-      this.hoveredIndex = index;
-    }
-  },
-  handleMouseLeave() {
-    if (this.showTooltipOnHover) {
-      this.hoveredIndex = null;
-    }
-  },
-  },
-};
-</script>
+<template>
+  <div :class="description ? 'items-start' : 'items-center'" class="flex">
+    <div class="flex -space-x-1" v-if="images && images.length <= 3">
+      <img
+        v-for="(image, index) in images"
+        :key="index"
+        :class="classes"
+        class="inline-block ring-2 ring-white"
+        :src="image.image"
+        alt=""
+      />
+    </div>
+    <div class="flex -space-x-1" v-if="images && images.length > 3">
+      <img
+        v-for="(image, index) in images.slice(0, 4)"
+        :key="index"
+        :class="classes"
+        class="inline-block ring-2 ring-white"
+        :src="image.image"
+        alt=""
+      />
+    </div>
+    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length > 4">
+      <template v-for="(name, index) in nameInitialsWithColors.slice(0, 4)">
+        <div
+        :key="index"
+        :class="[nameInitialsClasses, 'relative']"
+        @mouseover="handleMouseOver(index)"
+        @mouseleave="handleMouseLeave"
+        >
+          <c-tool-tip
+            v-if="showTooltipOnHover && hoveredIndex === index"
+            :tooltipText="name.fullName"
+            :isTopAligned="true"
+            color="#1f2937"
+            classes="absolute left-1/2 -translate-x-1/2 -mt-12 text-white bg-gray-800 w-max"
+          ></c-tool-tip>
+          <img
+            v-if="showImageWithInitials && (name.image || name.image_240)"
+            :class="[
+              'w-full h-full object-cover',
+              rounded ? 'rounded-full' : 'rounded-md'
+            ]"
+            :src="name.image || name.image_240"
+            :alt="'Profile picture of ' + name.fullName"
+          />
+          <div
+            v-else
+            :class="[
+              'w-full h-full inline-block text-center font-medium ring-2 ring-white',
+              'bg-' + name.color + '-100',
+              'border-' + name.color + '-300',
+              ,
+              'text-' + name.color + '-600',
+              rounded ? 'rounded-full' : 'rounded-md'
+            ]"
+            :style="[
+              size == 'medium' ? { 'line-height': '3rem' } : '',
+              size == 'large' ? { 'line-height': '3.5rem' } : '',
+              size == 'very large' ? { 'line-height': '6rem' } : '',
+              size == 'extraextrasmall' ? { 'font-size': '0.5rem' } : '',
+              size == 'extrasmall' ? { 'font-size': '0.7rem' } : '',
+            ]"
+          >
+            {{ name.initials }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length <= 4">
+      <template v-for="(name, index) in nameInitialsWithColors">
+        <div
+        :key="index"
+        :class="[nameInitialsClasses, 'relative']"
+        @mouseover="handleMouseOver(index)"
+        @mouseleave="handleMouseLeave"
+        >
+          <c-tool-tip
+            v-if="showTooltipOnHover && hoveredIndex === index"
+            :tooltipText="name.fullName"
+            :isTopAligned="true"
+            color="#1f2937"
+            classes="absolute left-1/2 -translate-x-1/2 -mt-12 text-white bg-gray-800 w-max"
+          ></c-tool-tip>
+          <img
+            v-if="showImageWithInitials && (name.image || name.image_240)"
+            :class="[
+              'w-full h-full object-cover',
+              rounded ? 'rounded-full' : 'rounded-md'
+            ]"
+            :src="name.image || name.image_240"
+            :alt="'Profile picture of ' + name.fullName"
+          />
+          <div
+          v-else
+          :class="[
+            'w-full h-full inline-block text-center font-medium ring-2 ring-white',
+            'bg-' + name.color + '-100',
+            'border-' + name.color + '-300',
+            ,
+            'text-' + name.color + '-600',
+            rounded ? 'rounded-full' : 'rounded-md'
+          ]"
+          :style="[
+            size == 'medium' ? { 'line-height': '3rem' } : '',
+            size == 'large' ? { 'line-height': '3.5rem' } : '',
+            size == 'very large' ? { 'line-height': '6rem' } : '',
+            size == 'extraextrasmall' ? { 'font-size': '0.5rem' } : '',
+            size == 'extrasmall' ? { 'font-size': '0.7rem' } : '',
+          ]"
+        >
+          {{ name.initials }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="ml-3 text-left" v-if="name">
+      <p v-if="name" class="text-sm text-gray-500">
+        {{ name }}
+      </p>
+      <p v-if="description" class="text-xs text-gray-500 group-hover:text-gray-700">
+        {{ description }}
+      </p>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import CToolTip from '../CToolTip/CToolTip.vue';
+export default {
+  components: { CToolTip },
+  name: "CAvatarGroup",
+  props: {
+    size: {
+      type: String,
+      required: true,
+      default: "medium",
+    },
+    images: {
+      type: Array,
+    },
+    nameInitials: {
+      type: Array,
+    },
+    rounded: { type: Boolean },
+    name: { type: String },
+    description: { type: String },
+    showTooltipOnHover: {
+      type: Boolean,
+      default: false,
+    },
+    showImageWithInitials: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
+      hoveredIndex: null,
+    };
+  },
+  computed: {
+    classes() {
+      return {
+        "h-6 w-6": this.size == "extraextrasmall",
+        "h-8 w-8": this.size == "extrasmall",
+        "h-10 w-10": this.size == "small",
+        "h-12 w-12": this.size == "medium",
+        "h-14 w-14": this.size == "large",
+        "h-24 w-24": this.size == "very large",
+        "rounded-full": this.rounded == true,
+        "rounded-md": this.rounded == false,
+      };
+    },
+    nameInitialsClasses() {
+      return {
+        "h-6 w-6 leading-6": this.size == "extraextrasmall",
+        "h-8 w-8 leading-8": this.size == "extrasmall",
+        "h-10 w-10 leading-10 text-xs": this.size == "small",
+        "h-12 w-12 text-sm": this.size == "medium",
+        "h-14 w-14 text-base": this.size == "large",
+        "h-24 w-24 text-2xl": this.size == "very large"
+      };
+    },
+    nameInitialsWithColors() {
+      let nameWithColors = this.nameInitials;
+      nameWithColors.map((name) => {
+        name.color = this.setColors();
+        name.fullName = name.surname ? `${name.firstName} ${name.surname}` : name.firstName
+      });
+      return nameWithColors;
+    },
+  },
+  methods: {
+    setColors() {
+      this.colors = this.colors.sort(() => Math.random() - 0.5);
+      let show = this.colors[Math.floor(Math.random() * this.colors.length)];
+      return show;
+    },
+    handleMouseOver(index) {
+    if (this.showTooltipOnHover) {
+      this.hoveredIndex = index;
+    }
+  },
+  handleMouseLeave() {
+    if (this.showTooltipOnHover) {
+      this.hoveredIndex = null;
+    }
+  },
+  },
+};
+</script>

package/src/components/CAvatarGroup/index.js

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