classcard-ui 0.2.666 → 0.2.671

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.666",
+  "version": "0.2.671",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -12,8 +12,7 @@
     "build-storybook": "build-storybook"
   },
   "files": [
-    "dist/*",
-    "src/*"
+    "dist/*"
   ],
   "dependencies": {
     "@shopify/draggable": "^1.0.0-beta.8",
@@ -39,10 +38,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/vue": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/vue": "^6.5.10",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",

package/src/App.vue

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

package/src/components/CAlerts/CAlerts.vue

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

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

package/src/components/CAnchorTabs/CAnchorTabs.vue

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

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

package/src/components/CAnchorTag/CAnchorTag.vue

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

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

package/src/components/CAvatar/CAvatar.vue

@@ -1,112 +0,0 @@
-<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 +0,0 @@
-import CAvatar from './CAvatar.vue'
-
-export default CAvatar

package/src/components/CAvatarGroup/CAvatarGroup.vue

@@ -1,145 +0,0 @@
-<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 +0,0 @@
-import CAvatarGroup from './CAvatarGroup.vue'
-
-export default CAvatarGroup