classcard-ui 0.2.705 → 0.2.708

package/src/components/CAvatar/CAvatar.vue

@@ -1,112 +1,112 @@
-<template>
-  <div>
-    <div :class="description ? 'items-start' : 'items-center'" class="flex">
-      <div v-if="image">
-        <img
-          @error="$emit('error', $event)"
-          :class="[classes, imageClasses]"
-          class="inline-block object-cover"
-          :src="image"
-          alt=""
-        />
-      </div>
-      <div
-        v-else
-        :class="[
-          'flex-none text-center font-medium',
-          nameInitialsClasses,
-          `border-${isDynamicallyColored ? customColor : 'red'}-300`,
-          `bg-${isDynamicallyColored ? customColor : 'red'}-100`,
-          `text-${isDynamicallyColored ? customColor : 'red'}-600`,
-        ]"
-        :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' } : '',
-        ]"
-      >
-        {{ nameInitials }}
-      </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>
-export default {
-  name: "CAvatar",
-  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 },
-  },
-  data() {
-    return {
-      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
-      customColor: 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",
-        "rounded-full": this.rounded == true,
-        "rounded-md": this.rounded == false,
-      };
-    },
-  },
-  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>
+    <div :class="description ? 'items-start' : 'items-center'" class="flex">
+      <div v-if="image">
+        <img
+          @error="$emit('error', $event)"
+          :class="[classes, imageClasses]"
+          class="inline-block object-cover"
+          :src="image"
+          alt=""
+        />
+      </div>
+      <div
+        v-else
+        :class="[
+          'flex-none text-center font-medium',
+          nameInitialsClasses,
+          `border-${isDynamicallyColored ? customColor : 'red'}-300`,
+          `bg-${isDynamicallyColored ? customColor : 'red'}-100`,
+          `text-${isDynamicallyColored ? customColor : 'red'}-600`,
+        ]"
+        :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' } : '',
+        ]"
+      >
+        {{ nameInitials }}
+      </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>
+export default {
+  name: "CAvatar",
+  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 },
+  },
+  data() {
+    return {
+      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
+      customColor: 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",
+        "rounded-full": this.rounded == true,
+        "rounded-md": this.rounded == false,
+      };
+    },
+  },
+  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>

package/src/components/CAvatar/index.js

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

package/src/components/CAvatarGroup/CAvatarGroup.vue

@@ -1,145 +1,145 @@
-<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">
-      <div
-        v-for="(name, index) in nameInitialsWithColors.slice(0, 4)"
-        :key="index"
-        :class="[
-          'inline-block text-center font-medium ring-2 ring-white',
-          nameInitialsClasses,
-          'bg-' + name.color + '-100',
-          'border-' + name.color + '-300',
-          ,
-          'text-' + name.color + '-600',
-        ]"
-        :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>
-    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length <= 4">
-      <div
-        v-for="(name, index) in nameInitialsWithColors"
-        :key="index"
-        :class="[
-          'inline-block text-center font-medium ring-2 ring-white',
-          nameInitialsClasses,
-          'bg-' + name.color + '-100',
-          'border-' + name.color + '-300',
-          ,
-          'text-' + name.color + '-600',
-        ]"
-        :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>
-    <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>
-export default {
-  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 },
-  },
-  data() {
-    return {
-      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
-    };
-  },
-  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",
-        "rounded-full": this.rounded == true,
-        "rounded-md": this.rounded == false,
-      };
-    },
-    nameInitialsWithColors() {
-      let nameWithColors = this.nameInitials;
-      nameWithColors.map((name) => {
-        name.color = this.setColors();
-      });
-      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;
-    },
-  },
-};
-</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">
+      <div
+        v-for="(name, index) in nameInitialsWithColors.slice(0, 4)"
+        :key="index"
+        :class="[
+          'inline-block text-center font-medium ring-2 ring-white',
+          nameInitialsClasses,
+          'bg-' + name.color + '-100',
+          'border-' + name.color + '-300',
+          ,
+          'text-' + name.color + '-600',
+        ]"
+        :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>
+    <div class="flex -space-x-1" v-if="nameInitials && nameInitialsWithColors.length <= 4">
+      <div
+        v-for="(name, index) in nameInitialsWithColors"
+        :key="index"
+        :class="[
+          'inline-block text-center font-medium ring-2 ring-white',
+          nameInitialsClasses,
+          'bg-' + name.color + '-100',
+          'border-' + name.color + '-300',
+          ,
+          'text-' + name.color + '-600',
+        ]"
+        :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>
+    <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>
+export default {
+  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 },
+  },
+  data() {
+    return {
+      colors: ["gray", "red", "yellow", "indigo", "pink", "purple", "green"],
+    };
+  },
+  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",
+        "rounded-full": this.rounded == true,
+        "rounded-md": this.rounded == false,
+      };
+    },
+    nameInitialsWithColors() {
+      let nameWithColors = this.nameInitials;
+      nameWithColors.map((name) => {
+        name.color = this.setColors();
+      });
+      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;
+    },
+  },
+};
+</script>

package/src/components/CAvatarGroup/index.js

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