classcard-ui 0.2.542 → 0.2.545

package/package.json

@@ -1,81 +1,81 @@
-{
-  "name": "classcard-ui",
-  "version": "0.2.542",
-  "main": "dist/classcard-ui.umd.min.js",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name classcard-ui src/main.js",
-    "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -p 6006",
-    "publish-to-npm": "npm version patch && git push && npm run build-bundle && npm publish",
-    "build-storybook": "build-storybook"
-  },
-  "files": [
-    "dist/*",
-    "src/*"
-  ],
-  "dependencies": {
-    "@shopify/draggable": "^1.0.0-beta.8",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@tailwindcss/forms": "^0.2.1",
-    "core-js": "^3.18.0",
-    "dayjs": "^1.10.7",
-    "filestack-js": "^3.25.0",
-    "focus-trap-vue": "^1.1.1",
-    "gridjs-selection": "^3.4.0",
-    "gridjs-vue": "^3.4.0",
-    "lodash-es": "^4.17.21",
-    "v-calendar": "^2.3.2",
-    "v-scroll-lock": "^1.3.1",
-    "vue": "^2.6.14",
-    "vue-good-table": "^2.21.8",
-    "vue-multiselect": "^2.1.6",
-    "vue-quill-editor": "^3.0.6",
-    "vue-select": "^3.13.0",
-    "vue-table-draggable": "^1.0.1",
-    "vue-tailwind-picker": "^2.0.0",
-    "vue-tel-input": "^4.4.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-essentials": "^6.5.7",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/vue": "^6.5.7",
-    "@tailwindcss/postcss7-compat": "^2.2.14",
-    "@types/lodash-es": "^4.17.5",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
-    "autoprefixer": "^9.8.6",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "postcss": "^7.0.36",
-    "prettier": "^2.5.1",
-    "prettier-plugin-tailwindcss": "^0.1.6",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
-    "vue-template-compiler": "^2.6.14"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "classcard-ui",
+  "version": "0.2.545",
+  "main": "dist/classcard-ui.umd.min.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build-bundle": "vue-cli-service build --target lib --name classcard-ui src/main.js",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "publish-to-npm": "npm version patch && git push && npm run build-bundle && npm publish",
+    "build-storybook": "build-storybook"
+  },
+  "files": [
+    "dist/*",
+    "src/*"
+  ],
+  "dependencies": {
+    "@shopify/draggable": "^1.0.0-beta.8",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@tailwindcss/forms": "^0.2.1",
+    "core-js": "^3.18.0",
+    "dayjs": "^1.10.7",
+    "filestack-js": "^3.25.0",
+    "focus-trap-vue": "^1.1.1",
+    "gridjs-selection": "^3.4.0",
+    "gridjs-vue": "^3.4.0",
+    "lodash-es": "^4.17.21",
+    "v-calendar": "^2.3.2",
+    "v-scroll-lock": "^1.3.1",
+    "vue": "^2.6.14",
+    "vue-good-table": "^2.21.8",
+    "vue-multiselect": "^2.1.6",
+    "vue-quill-editor": "^3.0.6",
+    "vue-select": "^3.13.0",
+    "vue-table-draggable": "^1.0.1",
+    "vue-tailwind-picker": "^2.0.0",
+    "vue-tel-input": "^4.4.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@storybook/addon-actions": "^6.5.8",
+    "@storybook/addon-essentials": "^6.5.8",
+    "@storybook/addon-links": "^6.5.8",
+    "@storybook/vue": "^6.5.8",
+    "@tailwindcss/postcss7-compat": "^2.2.14",
+    "@types/lodash-es": "^4.17.5",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "autoprefixer": "^9.8.6",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "postcss": "^7.0.36",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.6",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.14",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/App.vue

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

package/src/components/CAlerts/CAlerts.vue

@@ -1,70 +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>
+<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 +1,3 @@
-import CAlerts from './CAlerts.vue'
-
+import CAlerts from './CAlerts.vue'
+
 export default CAlerts

package/src/components/CAnchorTabs/CAnchorTabs.vue

@@ -1,108 +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>
-      <div ref="accounts">
-      Accounts section
-      </div>
-      <br>
-      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
-      <div ref="members">
-      members section
-      </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) {
-      console.log(name)
-      this.activeTab = name;
-      let element = this.$refs[name];
-      console.log(element)
-      let topPos = element.offsetTop;
-      document.getElementById("container").scrollTop = topPos;
-    },
-    switchTabForMobile(index) {
-      var selectedOption = this.tabs[index];
-      this.activeTab = selectedOption.text;
-    },
-  },
-  watch: {
-    initialTab() {
-      this.activeTab = this.value;
-    },
-  },
-};
-</script>
+<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 +1,3 @@
-import CAnchorTabs from './CAnchorTabs.vue'
-
+import CAnchorTabs from './CAnchorTabs.vue'
+
 export default CAnchorTabs