classcard-ui 0.2.1497 → 0.2.1498-beta.1

package/package.json

@@ -1,84 +1,84 @@
-{
-  "name": "classcard-ui",
-  "version": "0.2.1497",
-  "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",
-    "build-storybook": "build-storybook",
-    "version-patch": "git checkout main && git pull && git checkout deploy && git pull && git merge main && npm version patch && git push",
-    "publish-to-npm": "git checkout main && git pull && npm run build-bundle && npm publish",
-    "publish-to-beta": "npm version prerelease --preid=beta --no-git-tag-version && npm run build-bundle && npm publish --tag next"
-  },
-  "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.30.0",
-    "focus-trap-vue": "^1.1.1",
-    "gridjs-selection": "^3.4.0",
-    "gridjs-vue": "^3.4.0",
-    "lodash-es": "^4.17.23",
-    "skeleton-loader-vue": "^1.0.10",
-    "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.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",
-    "@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": "^8.4.31",
-    "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.1498-beta.1",
+  "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",
+    "build-storybook": "build-storybook",
+    "version-patch": "git checkout main && git pull && git checkout deploy && git pull && git merge main && npm version patch && git push",
+    "publish-to-npm": "git checkout main && git pull && npm run build-bundle && npm publish",
+    "publish-to-beta": "npm version prerelease --preid=beta --no-git-tag-version && npm run build-bundle && npm publish --tag next"
+  },
+  "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.30.0",
+    "focus-trap-vue": "^1.1.1",
+    "gridjs-selection": "^3.4.0",
+    "gridjs-vue": "^3.4.0",
+    "lodash-es": "^4.17.23",
+    "skeleton-loader-vue": "^1.0.10",
+    "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.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",
+    "@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": "^8.4.31",
+    "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/colorConfig.js

@@ -1,52 +1,52 @@
-export const COLOR_CONFIG = {
-  red: {
-    shade50: "#fef2f2", // red-50
-    shade100: "#fee2e2", // red-100
-    shade200: "#fecaca", // red-200
-    shade500: "#ef4444", // red-500
-    shade600: "#dc2626", // red-600
-    shade700: "#b91c1c", // red-700
-    shade800: "#991b1b", // red-800
-    shade900: "#7f1d1d", // red-900
-  },
-  indigo: {
-    shade50: "#f0f9ff", // indigo-50
-    shade100: "#e0f2fe", // indigo-100
-    shade200: "#bae6fd", // indigo-200
-    shade500: "#0ea5e9", // indigo-500
-    shade600: "#0284c7", // indigo-600
-    shade700: "#0369a1", // indigo-700
-    shade800: "#075985", // indigo-800
-    shade900: "#0c4a6e", //indigo-900
-  },
-  yellow: {
-    shade50: "#fefce8", // yellow-50
-    shade100: "#fef9c3", // yellow-100
-    shade200: "#fef08a", // yellow-200
-    shade500: "#eab308", // yellow-500
-    shade600: "#ca8a04", // yellow-600
-    shade700: "#a16207", // yellow-700
-    shade800: "#854d0e", // yellow-800
-    shade900: "#713f12", // yellow-900
-  },
-  purple: {
-    shade50: "#f5f3ff", // purple-50
-    shade100: "#ede9fe", // purple-100
-    shade200: "#ddd6fe", // violet-200
-    shade500: "#8b5cf6", // purple-500
-    shade600: "#7c3aed", // purple-600
-    shade700: "#6d28d9", // purple-700
-    shade800: "#5b21b6", // purple-800
-    shade900: "#4c1d95", // purple-900
-  },
-  green: {
-    shade50: "#f0fdf4", // green-50
-    shade100: "#dcfce7", // green-100
-    shade200: "#bbf7d0", // green-200
-    shade500: "#22c55e", // green-500
-    shade600: "#16a34a", // green-600
-    shade700: "#15803d", // green-700
-    shade800: "#166534", // green-800
-    shade900: "#14532d", // green-900
-  },
-};
+export const COLOR_CONFIG = {
+  red: {
+    shade50: "#fef2f2", // red-50
+    shade100: "#fee2e2", // red-100
+    shade200: "#fecaca", // red-200
+    shade500: "#ef4444", // red-500
+    shade600: "#dc2626", // red-600
+    shade700: "#b91c1c", // red-700
+    shade800: "#991b1b", // red-800
+    shade900: "#7f1d1d", // red-900
+  },
+  indigo: {
+    shade50: "#f0f9ff", // indigo-50
+    shade100: "#e0f2fe", // indigo-100
+    shade200: "#bae6fd", // indigo-200
+    shade500: "#0ea5e9", // indigo-500
+    shade600: "#0284c7", // indigo-600
+    shade700: "#0369a1", // indigo-700
+    shade800: "#075985", // indigo-800
+    shade900: "#0c4a6e", //indigo-900
+  },
+  yellow: {
+    shade50: "#fefce8", // yellow-50
+    shade100: "#fef9c3", // yellow-100
+    shade200: "#fef08a", // yellow-200
+    shade500: "#eab308", // yellow-500
+    shade600: "#ca8a04", // yellow-600
+    shade700: "#a16207", // yellow-700
+    shade800: "#854d0e", // yellow-800
+    shade900: "#713f12", // yellow-900
+  },
+  purple: {
+    shade50: "#f5f3ff", // purple-50
+    shade100: "#ede9fe", // purple-100
+    shade200: "#ddd6fe", // violet-200
+    shade500: "#8b5cf6", // purple-500
+    shade600: "#7c3aed", // purple-600
+    shade700: "#6d28d9", // purple-700
+    shade800: "#5b21b6", // purple-800
+    shade900: "#4c1d95", // purple-900
+  },
+  green: {
+    shade50: "#f0fdf4", // green-50
+    shade100: "#dcfce7", // green-100
+    shade200: "#bbf7d0", // green-200
+    shade500: "#22c55e", // green-500
+    shade600: "#16a34a", // green-600
+    shade700: "#15803d", // green-700
+    shade800: "#166534", // green-800
+    shade900: "#14532d", // green-900
+  },
+};

package/src/components/CAlertModal/CAlertModal.vue

@@ -1,179 +1,179 @@
-<template>
-  <div class="z-100 fixed inset-0 overflow-y-auto">
-    <div
-      class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
-      @click="$emit('proceedAddingEvent', false)"
-    >
-      <transition
-        enter-active-class="ease-out duration-300"
-        enter-class="opacity-0"
-        enter-to-class="opacity-100"
-        leave-active-class="ease-in duration-200"
-        leave-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
-        </div>
-      </transition>
-
-      <!-- This element is to trick the browser into centering the modal contents. -->
-      <span
-        class="hidden sm:inline-block sm:h-screen sm:align-middle"
-        aria-hidden="true"
-        >&#8203;</span
-      >
-      <transition
-        enter-active-class="ease-out duration-300"
-        enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-        leave-active-class="ease-in duration-200"
-        leave-class="opacity-100 translate-y-0 sm:scale-100"
-        leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-      >
-        <div
-          :class="`inline-block transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 ${parentWrapperClass}`"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="modal-headline"
-          @click.stop
-        >
-          <div class="sm:flex sm:items-start" :style="`${contentWrapperStyle}`">
-            <div
-              class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
-              :class="`bg-${alertModalColor}-100`"
-            >
-              <svg
-                :class="`h-6 w-6 text-${alertModalColor}-600`"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-                />
-              </svg>
-            </div>
-            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-              <h3
-                :class="`text-base font-semibold leading-6 text-gray-900 ${titleClass}`"
-                id="modal-title"
-              >
-                {{ title }}
-              </h3>
-              <div class="mt-2">
-                <p class="text-sm text-gray-500">{{ msg }}</p>
-
-                <p class="mt-4 text-sm text-gray-500">{{ msg2 }}</p>
-              </div>
-            </div>
-          </div>
-          <div
-            :class="`mt-4 items-center justify-end gap-4 sm:ml-10 sm:flex ${btnWrapperClass}`"
-          >
-            <c-button
-              v-if="secondaryButtonText"
-              :type="secondaryButtonType"
-              :label="secondaryButtonText"
-              :id="getActionIDFn(secondaryButtonText)"
-              @action="$emit('proceedAddingEvent', false)"
-            ></c-button>
-            <c-button
-              v-if="primaryButtonText"
-              :type="primaryButtonType"
-              :label="primaryButtonText"
-              :isLoading="primaryButtonLoader"
-              :id="getActionIDFn(secondaryButtonText)"
-              @action="$emit('proceedAddingEvent', true)"
-            ></c-button>
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-<script>
-import { getActionID } from "../../helper";
-import CButton from "../CButton/CButton.vue";
-export default {
-  name: "CAlertModal",
-  components: { CButton },
-  props: {
-    proceedAddingEvent: {
-      type: Function,
-    },
-    titleClass: {
-      type: String,
-      default: "",
-    },
-    btnWrapperClass: {
-      type: String,
-      default: "",
-    },
-    parentWrapperClass: {
-      type: String,
-      default: "",
-    },
-    contentWrapperStyle: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "Outside working hour",
-    },
-    iconColor: {
-      type: String,
-      default: "",
-    },
-    msg: {
-      type: String,
-      default:
-        "You are adding an event outside of the working hours. Are you sure wish to proceed?",
-    },
-    msg2: {
-      type: String,
-      default: "",
-    },
-    primaryButtonText: {
-      type: String,
-    },
-    id: {
-      type: String,
-    },
-    primaryButtonLoader: {
-      type: Boolean,
-    },
-    secondaryButtonText: {
-      type: String,
-    },
-    alertModalColor: {
-      type: String,
-      default: "yellow",
-    },
-    primaryButtonType: {
-      type: String,
-      default: "primary",
-    },
-    secondaryButtonType: {
-      type: String,
-      default: "white",
-    },
-  },
-  methods: {
-    getActionIDFn(name) {
-      return getActionID(name, this.id);
-    },
-  },
-};
-</script>
-
-<style>
-.form-content {
-  max-height: calc(100vh - 200px);
-}
-</style>
+<template>
+  <div class="z-100 fixed inset-0 overflow-y-auto">
+    <div
+      class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+      @click="$emit('proceedAddingEvent', false)"
+    >
+      <transition
+        enter-active-class="ease-out duration-300"
+        enter-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="ease-in duration-200"
+        leave-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+        </div>
+      </transition>
+
+      <!-- This element is to trick the browser into centering the modal contents. -->
+      <span
+        class="hidden sm:inline-block sm:h-screen sm:align-middle"
+        aria-hidden="true"
+        >&#8203;</span
+      >
+      <transition
+        enter-active-class="ease-out duration-300"
+        enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+        leave-active-class="ease-in duration-200"
+        leave-class="opacity-100 translate-y-0 sm:scale-100"
+        leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+      >
+        <div
+          :class="`inline-block transform overflow-y-visible rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 ${parentWrapperClass}`"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-headline"
+          @click.stop
+        >
+          <div class="sm:flex sm:items-start" :style="`${contentWrapperStyle}`">
+            <div
+              class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
+              :class="`bg-${alertModalColor}-100`"
+            >
+              <svg
+                :class="`h-6 w-6 text-${alertModalColor}-600`"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                />
+              </svg>
+            </div>
+            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+              <h3
+                :class="`text-base font-semibold leading-6 text-gray-900 ${titleClass}`"
+                id="modal-title"
+              >
+                {{ title }}
+              </h3>
+              <div class="mt-2">
+                <p class="text-sm text-gray-500">{{ msg }}</p>
+
+                <p class="mt-4 text-sm text-gray-500">{{ msg2 }}</p>
+              </div>
+            </div>
+          </div>
+          <div
+            :class="`mt-4 items-center justify-end gap-4 sm:ml-10 sm:flex ${btnWrapperClass}`"
+          >
+            <c-button
+              v-if="secondaryButtonText"
+              :type="secondaryButtonType"
+              :label="secondaryButtonText"
+              :id="getActionIDFn(secondaryButtonText)"
+              @action="$emit('proceedAddingEvent', false)"
+            ></c-button>
+            <c-button
+              v-if="primaryButtonText"
+              :type="primaryButtonType"
+              :label="primaryButtonText"
+              :isLoading="primaryButtonLoader"
+              :id="getActionIDFn(secondaryButtonText)"
+              @action="$emit('proceedAddingEvent', true)"
+            ></c-button>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+<script>
+import { getActionID } from "../../helper";
+import CButton from "../CButton/CButton.vue";
+export default {
+  name: "CAlertModal",
+  components: { CButton },
+  props: {
+    proceedAddingEvent: {
+      type: Function,
+    },
+    titleClass: {
+      type: String,
+      default: "",
+    },
+    btnWrapperClass: {
+      type: String,
+      default: "",
+    },
+    parentWrapperClass: {
+      type: String,
+      default: "",
+    },
+    contentWrapperStyle: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "Outside working hour",
+    },
+    iconColor: {
+      type: String,
+      default: "",
+    },
+    msg: {
+      type: String,
+      default:
+        "You are adding an event outside of the working hours. Are you sure wish to proceed?",
+    },
+    msg2: {
+      type: String,
+      default: "",
+    },
+    primaryButtonText: {
+      type: String,
+    },
+    id: {
+      type: String,
+    },
+    primaryButtonLoader: {
+      type: Boolean,
+    },
+    secondaryButtonText: {
+      type: String,
+    },
+    alertModalColor: {
+      type: String,
+      default: "yellow",
+    },
+    primaryButtonType: {
+      type: String,
+      default: "primary",
+    },
+    secondaryButtonType: {
+      type: String,
+      default: "white",
+    },
+  },
+  methods: {
+    getActionIDFn(name) {
+      return getActionID(name, this.id);
+    },
+  },
+};
+</script>
+
+<style>
+.form-content {
+  max-height: calc(100vh - 200px);
+}
+</style>