classcard-ui 0.2.1484 → 0.2.1486

package/src/components/CAvatar/CAvatar.vue

@@ -1,225 +1,232 @@
-<template>
-  <div>
-    <!-- adding class on div when label is present to prevent shrink of avatar -->
-    <div
-      :class="[
-        description ? 'items-start' : 'items-center',
-        hasLabel ? `${classes} shrink-0` : '',
-      ]"
-      class="flex"
-    >
-      <div v-if="image" class="relative">
-        <img
-          @error="$emit('error', $event)"
-          :class="[
-            classes,
-            imageClasses,
-            imageResizeClass,
-            hasRing ? `p-1 ring-2 ${getRingColor}` : '',
-          ]"
-          class="inline-block"
-          loading="lazy"
-          :src="image"
-          :alt="name || 'Avatar'"
-        />
-        <div
-          class="absolute left-1/2 -mt-3 -translate-x-1/2 rounded-md"
-          :class="labelDetails.parentClass"
-          v-if="hasLabel"
-        >
-          <span
-            v-if="labelDetails.type == 'text'"
-            :class="labelDetails.textClass"
-            >{{ labelDetails.text }}</span
-          ><c-icon
-            v-else
-            :type="labelDetails.icon.type"
-            :name="labelDetails.icon.name"
-            :class="
-              labelDetails.icon.class
-                ? labelDetails.icon.class
-                : `h-5 w-5 text-gray-400`
-            "
-            :viewBox="
-              labelDetails.icon.viewBox
-                ? labelDetails.icon.viewBox
-                : '0 0 20 20'
-            "
-          ></c-icon>
-        </div>
-      </div>
-      <div
-        v-else
-        :class="
-          hasRing
-            ? `${getRingColor} relative flex h-12 w-12 items-center justify-center justify-items-center rounded-full ring-2`
-            : ''
-        "
-      >
-        <div
-          :class="[
-            'flex-none text-center font-medium',
-            hasRing
-              ? 'flex h-10 w-10 items-center justify-center rounded-full text-sm'
-              : nameInitialsClasses,
-            `border-${isDynamicallyColored ? customColor : 'red'}-300`,
-            `bg-${isDynamicallyColored ? customColor : 'red'}-100`,
-            `text-${isDynamicallyColored ? customColor : 'red'}-600`,
-            hasLabel && !hasRing
-              ? 'relative flex items-center justify-center'
-              : '',
-          ]"
-          :style="[
-            size == 'medium' && !hasLabel ? { 'line-height': '3rem' } : '',
-            size == 'large' && !hasLabel ? { 'line-height': '3.5rem' } : '',
-            size == 'very large' && !hasLabel ? { 'line-height': '6rem' } : '',
-            size == 'very very large' && !hasLabel
-              ? { 'line-height': '8rem' }
-              : '',
-            size == 'extrasmall' && !hasLabel ? { 'font-size': '0.7rem' } : '',
-            size == 'extraextrasmall' && !hasLabel
-              ? { 'font-size': '0.5rem' }
-              : '',
-            size == 'extraextraextrasmall' && !hasLabel
-              ? { 'font-size': '0.5rem' }
-              : '',
-          ]"
-          :title="name || nameInitials"
-     
-        >
-          {{ nameInitials }}
-          <div
-            v-if="hasLabel"
-            class="absolute bottom-0 left-1/2 z-10 -translate-x-1/2 translate-y-1/2 whitespace-nowrap rounded-md"
-            :class="labelDetails.parentClass"
-          >
-            <span
-              v-if="labelDetails.type == 'text'"
-              :class="labelDetails.textClass"
-              >{{ labelDetails.text }}</span
-            ><c-icon
-              v-else
-              :type="labelDetails.icon.type"
-              :name="labelDetails.icon.name"
-              :class="
-                labelDetails.icon.class
-                  ? labelDetails.icon.class
-                  : `h-5 w-5 text-gray-400`
-              "
-              :viewBox="
-                labelDetails.icon.viewBox
-                  ? labelDetails.icon.viewBox
-                  : '0 0 20 20'
-              "
-            ></c-icon>
-          </div>
-        </div>
-      </div>
-      <div class="ml-3 text-left" v-if="name">
-        <p v-if="name" class="text-sm text-gray-900">
-          {{ name }}
-        </p>
-        <p
-          v-if="description"
-          class="text-xs text-gray-500 group-hover:text-gray-700"
-        >
-          {{ description }}
-        </p>
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CAvatar",
-  components: {
-    CIcon,
-  },
-  props: {
-    size: {
-      type: String,
-      required: true,
-      default: "medium",
-    },
-    image: {
-      type: String,
-    },
-    nameInitials: {
-      type: String,
-    },
-    rounded: { type: Boolean },
-    name: { type: String },
-    description: { type: String },
-    imageClasses: { type: String },
-    isDynamicallyColored: { type: Boolean, default: false },
-    hasRing: { type: Boolean, default: false },
-    ringColor: { type: String, default: "gray" },
-    hasLabel: { type: Boolean, default: false },
-    labelDetails: { type: Object, default: null },
-    imageResizeClass: {
-      type: String,
-      default: "object-cover",
-    },
-  },
-  data() {
-    return {
-      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
-      customColor: null,
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        "h-5 w-5": this.size == "extraextraextrasmall",
-        "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",
-        "h-32 w-32": this.size == "very very large",
-        "rounded-full": this.rounded == true,
-        "rounded-md": this.rounded == false,
-      };
-    },
-
-    nameInitialsClasses() {
-      return {
-        "h-5 w-5 leading-5": this.size == "extraextraextrasmall",
-        "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",
-        "h-32 w-32 text-3xl": this.size == "very very large",
-        "rounded-full": this.rounded == true,
-        "rounded-md": this.rounded == false,
-      };
-    },
-    getRingColor() {
-      if (this.ringColor == "yellow") {
-        return "ring-[#facc15]";
-      } else if (this.ringColor == "indigo") {
-        return "ring-indigo-400";
-      } else if (this.ringColor == "red") {
-        return "ring-red-600";
-      } else {
-        return "ring-gray-400";
-      }
-    },
-  },
-  methods: {
-    setColors() {
-      this.colors = this.colors.sort(() => Math.random() - 0.5);
-      let show = this.colors[Math.floor(Math.random() * this.colors.length)];
-      this.customColor = show;
-    },
-  },
-  mounted() {
-    this.setColors();
-  },
-};
-</script>
+<template>
+  <div>
+    <!-- adding class on div when label is present to prevent shrink of avatar -->
+    <div
+      :class="[
+        description ? 'items-start' : 'items-center',
+        hasLabel ? `${classes} shrink-0` : '',
+      ]"
+      class="flex"
+    >
+      <div v-if="image" class="relative">
+        <img
+          @error="$emit('error', $event)"
+          :class="[
+            classes,
+            imageClasses,
+            imageResizeClass,
+            hasRing ? `p-1 ring-2 ${getRingColor}` : '',
+          ]"
+          class="inline-block"
+          loading="lazy"
+          :src="image"
+          :alt="name || 'Avatar'"
+        />
+        <div
+          class="absolute left-1/2 -mt-3 -translate-x-1/2 rounded-md"
+          :class="labelDetails.parentClass"
+          v-if="hasLabel"
+        >
+          <span
+            v-if="labelDetails.type == 'text'"
+            :class="labelDetails.textClass"
+            >{{ labelDetails.text }}</span
+          ><c-icon
+            v-else
+            :type="labelDetails.icon.type"
+            :name="labelDetails.icon.name"
+            :class="
+              labelDetails.icon.class
+                ? labelDetails.icon.class
+                : `h-5 w-5 text-gray-400`
+            "
+            :viewBox="
+              labelDetails.icon.viewBox
+                ? labelDetails.icon.viewBox
+                : '0 0 20 20'
+            "
+          ></c-icon>
+        </div>
+      </div>
+      <div
+        v-else
+        :class="
+          hasRing
+            ? `${getRingColor} relative flex h-12 w-12 items-center justify-center justify-items-center rounded-full ring-2`
+            : ''
+        "
+      >
+        <div
+          :class="[
+            'flex-none text-center font-medium',
+            hasRing
+              ? 'flex h-10 w-10 items-center justify-center rounded-full text-sm'
+              : nameInitialsClasses,
+            `border-${isDynamicallyColored ? customColor : 'red'}-300`,
+            `bg-${isDynamicallyColored ? customColor : 'red'}-100`,
+            `text-${isDynamicallyColored ? customColor : 'red'}-600`,
+            hasLabel && !hasRing
+              ? 'relative flex items-center justify-center'
+              : '',
+          ]"
+          :style="[
+            size == 'medium' && !hasLabel ? { 'line-height': '3rem' } : '',
+            size == 'large' && !hasLabel ? { 'line-height': '3.5rem' } : '',
+            size == 'very large' && !hasLabel ? { 'line-height': '6rem' } : '',
+            size == 'very very large' && !hasLabel
+              ? { 'line-height': '8rem' }
+              : '',
+            size == 'extrasmall' && !hasLabel ? { 'font-size': '0.7rem' } : '',
+            size == 'extraextrasmall' && !hasLabel
+              ? { 'font-size': '0.5rem' }
+              : '',
+            size == 'extraextraextrasmall' && !hasLabel
+              ? { 'font-size': '0.5rem' }
+              : '',
+          ]"
+          :title="name || nameInitials"
+     
+        >
+          {{ nameInitials }}
+          <div
+            v-if="hasLabel"
+            class="absolute bottom-0 left-1/2 z-10 -translate-x-1/2 translate-y-1/2 whitespace-nowrap rounded-md"
+            :class="labelDetails.parentClass"
+          >
+            <span
+              v-if="labelDetails.type == 'text'"
+              :class="labelDetails.textClass"
+              >{{ labelDetails.text }}</span
+            ><c-icon
+              v-else
+              :type="labelDetails.icon.type"
+              :name="labelDetails.icon.name"
+              :class="
+                labelDetails.icon.class
+                  ? labelDetails.icon.class
+                  : `h-5 w-5 text-gray-400`
+              "
+              :viewBox="
+                labelDetails.icon.viewBox
+                  ? labelDetails.icon.viewBox
+                  : '0 0 20 20'
+              "
+            ></c-icon>
+          </div>
+        </div>
+      </div>
+      <div class="ml-3 text-left" v-if="name">
+        <p v-if="name" class="text-sm text-gray-900">
+          {{ name }}
+        </p>
+        <p
+          v-if="description"
+          class="text-xs text-gray-500 group-hover:text-gray-700"
+        >
+          {{ description }}
+        </p>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAvatar",
+  components: {
+    CIcon,
+  },
+  props: {
+    size: {
+      type: String,
+      required: true,
+      default: "medium",
+    },
+    image: {
+      type: String,
+    },
+    nameInitials: {
+      type: String,
+    },
+    rounded: { type: Boolean },
+    name: { type: String },
+    description: { type: String },
+    imageClasses: { type: String },
+    isDynamicallyColored: { type: Boolean, default: false },
+    hasRing: { type: Boolean, default: false },
+    ringColor: { type: String, default: "gray" },
+    hasLabel: { type: Boolean, default: false },
+    labelDetails: { type: Object, default: null },
+    imageResizeClass: {
+      type: String,
+      default: "object-cover",
+    },
+    id: { type: Number, default: null },
+    enableHashColor: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
+      customColor: null,
+    };
+  },
+  computed: {
+    classes() {
+      return {
+        "h-5 w-5": this.size == "extraextraextrasmall",
+        "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",
+        "h-32 w-32": this.size == "very very large",
+        "rounded-full": this.rounded == true,
+        "rounded-md": this.rounded == false,
+      };
+    },
+
+    nameInitialsClasses() {
+      return {
+        "h-5 w-5 leading-5": this.size == "extraextraextrasmall",
+        "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",
+        "h-32 w-32 text-3xl": this.size == "very very large",
+        "rounded-full": this.rounded == true,
+        "rounded-md": this.rounded == false,
+      };
+    },
+    getRingColor() {
+      if (this.ringColor == "yellow") {
+        return "ring-[#facc15]";
+      } else if (this.ringColor == "indigo") {
+        return "ring-indigo-400";
+      } else if (this.ringColor == "red") {
+        return "ring-red-600";
+      } else {
+        return "ring-gray-400";
+      }
+    },
+  },
+  methods: {
+    setColors() {
+      let showColor = null;
+      if (this.enableHashColor && typeof this.id === "number" && this.id >= 0) {
+        showColor = this.colors[this.id % this.colors.length];
+      } else {
+        this.colors.sort(() => Math.random() - 0.5);
+        showColor = this.colors[Math.floor(Math.random() * this.colors.length)];
+      }
+      this.customColor = showColor;
+    },
+  },
+  mounted() {
+    this.setColors();
+  },
+};
+</script>

package/src/components/CAvatar/index.js

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