classcard-ui 0.2.671 → 0.2.689

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.671",
+  "version": "0.2.689",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,7 +12,8 @@
     "build-storybook": "build-storybook"
   },
   "files": [
-    "dist/*"
+    "dist/*",
+    "src/*"
   ],
   "dependencies": {
     "@shopify/draggable": "^1.0.0-beta.8",

package/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+   
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'App'
+}
+</script>
+
+<style>
+
+</style>

package/src/components/CAlerts/CAlerts.vue

@@ -0,0 +1,70 @@
+<template>
+<div :class=" type == 'withAccentBorder' ? `bg-${color}-50 border-l-4 border-${color}-400 p-4` : `rounded-md bg-${color}-50 p-4`">
+  <div class="flex">
+    <div class="flex-shrink-0" v-if="icon">
+      <c-icon :type="icon.type" :name="icon.name" :class="`h-5 w-5 text-${color}-700`"></c-icon>
+    </div>
+     <div class="ml-3" v-if="type == 'withAccentBorder'">
+      <p :class="`text-sm text-${color}-700`">
+        <a href="#" :class="`font-medium underline text-${color}-700 hover:text-${color}-600`">
+          {{linkLabel}}
+        </a>
+        {{label}}
+      </p>
+    </div>
+    <div v-else class="ml-3">
+      <h3 :class="`text-sm font-medium text-${color}-800`">
+        {{label}}
+      </h3>
+      <div :class="`mt-2 text-sm text-${color}-700`" v-if="description">
+        <p>
+         {{description}}
+        </p>
+      </div>
+      <div class="mt-4" v-if="type == 'withActions'">
+        <div class="-mx-2 -my-1.5 flex">
+          <button :class="`bg-${color}-50 px-2 py-1.5 rounded-md text-sm font-medium text-${color}-800 hover:bg-${color}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-${color}-50 focus:ring-${color}-600`">
+            {{actions.label}}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAlerts",
+  components: {
+    CIcon,
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    classes:{
+      type:String
+    },
+    color:{
+      type:String
+    },
+    type:{
+      type:String
+    },
+    description:{
+      type:String
+    },
+    actions:{
+      type:Object
+    },
+    linkLabel:{
+      type:String
+    }
+  },
+};
+</script>

package/src/components/CAlerts/index.js

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

package/src/components/CAnchorTabs/CAnchorTabs.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="sm:hidden">
+      <label for="tabs" class="sr-only">Select a tab</label>
+      <select
+        class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+      >
+        <option>My Account</option>
+
+        <option>Company</option>
+
+        <option selected>Team Members</option>
+
+        <option>Billing</option>
+      </select>
+    </div>
+    <div class="hidden sm:block">
+      <div class="border-b border-gray-200">
+        <nav :class="classes" class="-mb-px flex space-x-8" aria-label="Tabs">
+          <a
+            v-for="tab in tabs"
+            :key="tab.name"
+            @click="switchTab(tab.name)"
+            :class="
+              activeTab == tab.name
+                ? 'border-indigo-600 text-indigo-700 hover:text-indigo-800'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+            "
+            class="group inline-flex cursor-pointer items-center whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium"
+          >
+            <c-icon
+              v-if="tab.icon"
+              :name="tab.icon"
+              class="-ml-0.5 mr-2 h-5 w-5"
+              type="solid"
+              :class="
+                activeTab == tab.name
+                  ? 'text-indigo-700 group-hover:text-indigo-800'
+                  : 'text-gray-400 group-hover:text-gray-500 '
+              "
+            ></c-icon>
+            <span
+              :class="
+                activeTab == tab.name
+                  ? 'font-semibold text-indigo-700'
+                  : 'text-gray-500 hover:text-gray-700'
+              "
+            >
+              {{ tab.text }}
+            </span>
+          </a>
+        </nav>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAnchorTabs",
+  components: { CIcon },
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+    },
+    initialTab: {
+      type: String,
+    },
+    classes: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      activeTab: this.initialTab,
+    };
+  },
+  methods: {
+    switchTab(name) {
+      this.activeTab = name;
+      this.$emit("tabSwitched", name);
+    },
+    switchTabForMobile(index) {
+      var selectedOption = this.tabs[index];
+      this.activeTab = selectedOption.text;
+    },
+  },
+  watch: {
+    initialTab() {
+      this.activeTab = this.value;
+    },
+  },
+};
+</script>

package/src/components/CAnchorTabs/index.js

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

package/src/components/CAnchorTag/CAnchorTag.vue

@@ -0,0 +1,62 @@
+<template>
+  <a
+    :href="href"
+    :class="`${classes} ${textColor}`"
+    class="flex cursor-pointer text-sm hover:underline"
+    @click="(event) => clickAction(event,action)"
+    ><c-icon
+      v-if="icon"
+      :type="icon.type"
+      :class="icon.class"
+      :name="icon.name"
+    ></c-icon>
+    {{ label }}
+  </a>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CAnchorTag",
+  components: {
+    CIcon,
+  },
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    classes: {
+      type: String,
+    },
+    action: {
+      type: Function,
+    },
+    color: {
+      type: String,
+      default: "blue",
+    },
+  },
+  methods: {
+    clickAction(event,action) {
+      if(action) {
+        event.preventDefault();
+        action();
+      }
+    }
+  },
+  computed: {
+    textColor() {
+      if (this.color === "red") {
+        return "text-red-800";
+      } else {
+        return "text-indigo-800";
+      }
+    },
+  },
+};
+</script>

package/src/components/CAnchorTag/index.js

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

package/src/components/CAvatar/CAvatar.vue

@@ -0,0 +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>

package/src/components/CAvatar/index.js

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

package/src/components/CAvatarGroup/CAvatarGroup.vue

@@ -0,0 +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>

package/src/components/CAvatarGroup/index.js

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