classcard-ui 0.2.1506 → 0.2.1508-beta.0

package/src/components/CAlertModal/CAlertModal.vue

@@ -1,181 +1,181 @@
-<template>
-  <div class="z-100 fixed inset-0 overflow-y-auto">
-    <div
-      class="flex min-h-screen items-end justify-center p-4 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 flex flex-col-reverse gap-3 sm:ml-10 sm:flex-row sm:items-center sm:justify-end sm:gap-4 ${btnWrapperClass}`"
-          >
-            <c-button
-              v-if="secondaryButtonText"
-              :type="secondaryButtonType"
-              :label="secondaryButtonText"
-              :id="getActionIDFn(secondaryButtonText)"
-              customClasses="w-full justify-center sm:w-auto"
-              @action="$emit('proceedAddingEvent', false)"
-            ></c-button>
-            <c-button
-              v-if="primaryButtonText"
-              :type="primaryButtonType"
-              :label="primaryButtonText"
-              :isLoading="primaryButtonLoader"
-              :id="getActionIDFn(primaryButtonText)"
-              customClasses="w-full justify-center sm:w-auto"
-              @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 p-4 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 flex flex-col-reverse gap-3 sm:ml-10 sm:flex-row sm:items-center sm:justify-end sm:gap-4 ${btnWrapperClass}`"
+          >
+            <c-button
+              v-if="secondaryButtonText"
+              :type="secondaryButtonType"
+              :label="secondaryButtonText"
+              :id="getActionIDFn(secondaryButtonText)"
+              customClasses="w-full justify-center sm:w-auto"
+              @action="$emit('proceedAddingEvent', false)"
+            ></c-button>
+            <c-button
+              v-if="primaryButtonText"
+              :type="primaryButtonType"
+              :label="primaryButtonText"
+              :isLoading="primaryButtonLoader"
+              :id="getActionIDFn(primaryButtonText)"
+              customClasses="w-full justify-center sm:w-auto"
+              @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>

package/src/components/CAlertModal/index.js

@@ -1,3 +1,3 @@
-import CAlertModal from "./CAlertModal.vue";
-
-export default CAlertModal;
+import CAlertModal from "./CAlertModal.vue";
+
+export default CAlertModal;

package/src/components/CAlerts/CAlerts.vue

@@ -1,114 +1,114 @@
-<template>
-  <div
-    :class="
-      type == 'withAccentBorder'
-        ? `bg-${color}-50 border-l-4 border-${color}-400 p-4`
-        : `rounded-md bg-${color}-50 p-4`
-    "
-    :id="id || undefined"
-    :role="id ? 'region' : undefined"
-    :aria-labelledby="id ? id + '-title' : undefined"
-    :aria-describedby="
-      id && description && type !== 'withAccentBorder'
-        ? id + '-desc'
-        : undefined
-    "
-  >
-    <div class="flex gap-2">
-      <div class="flex-shrink-0" v-if="icon" aria-hidden="true">
-        <c-icon
-          :type="icon.type"
-          :name="icon.name"
-          :class="`h-5 w-5 text-${color}-500`"
-        ></c-icon>
-      </div>
-      <div class="flex-1">
-        <template v-if="type == 'withAccentBorder'">
-          <p
-            :id="id ? id + '-title' : undefined"
-            :class="`text-sm text-${color}-700`"
-          >
-            <a
-              href="#"
-              :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
-            >
-              {{ linkLabel }}
-            </a>
-            {{ label }}
-          </p>
-        </template>
-        <template v-else>
-          <h3
-            :id="id ? id + '-title' : undefined"
-            :class="`text-sm font-medium text-${color}-700 word-break`"
-          >
-            {{ label }}
-          </h3>
-          <div
-            :id="id && description ? id + '-desc' : undefined"
-            :class="`mt-2 text-sm text-${color}-700 max-w-full`"
-            v-if="description"
-          >
-            <p class="whitespace-pre-line break-all">
-              {{ description }}
-            </p>
-          </div>
-          <div class="mt-4" v-if="type == 'withActions'">
-            <div class="-mx-2 -my-1.5 flex">
-              <button
-                type="button"
-                :id="id ? id + '-action' : undefined"
-                :class="`bg-${color}-50 rounded-md px-2 py-1.5 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>
-        </template>
-      </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,
-    },
-    id: {
-      type: String,
-    },
-  },
-};
-</script>
-<style scoped>
-.word-break {
-  word-break: break-word;
-}
-</style>
+<template>
+  <div
+    :class="
+      type == 'withAccentBorder'
+        ? `bg-${color}-50 border-l-4 border-${color}-400 p-4`
+        : `rounded-md bg-${color}-50 p-4`
+    "
+    :id="id || undefined"
+    :role="id ? 'region' : undefined"
+    :aria-labelledby="id ? id + '-title' : undefined"
+    :aria-describedby="
+      id && description && type !== 'withAccentBorder'
+        ? id + '-desc'
+        : undefined
+    "
+  >
+    <div class="flex gap-2">
+      <div class="flex-shrink-0" v-if="icon" aria-hidden="true">
+        <c-icon
+          :type="icon.type"
+          :name="icon.name"
+          :class="`h-5 w-5 text-${color}-500`"
+        ></c-icon>
+      </div>
+      <div class="flex-1">
+        <template v-if="type == 'withAccentBorder'">
+          <p
+            :id="id ? id + '-title' : undefined"
+            :class="`text-sm text-${color}-700`"
+          >
+            <a
+              href="#"
+              :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
+            >
+              {{ linkLabel }}
+            </a>
+            {{ label }}
+          </p>
+        </template>
+        <template v-else>
+          <h3
+            :id="id ? id + '-title' : undefined"
+            :class="`text-sm font-medium text-${color}-700 word-break`"
+          >
+            {{ label }}
+          </h3>
+          <div
+            :id="id && description ? id + '-desc' : undefined"
+            :class="`mt-2 text-sm text-${color}-700 max-w-full`"
+            v-if="description"
+          >
+            <p class="whitespace-pre-line break-all">
+              {{ description }}
+            </p>
+          </div>
+          <div class="mt-4" v-if="type == 'withActions'">
+            <div class="-mx-2 -my-1.5 flex">
+              <button
+                type="button"
+                :id="id ? id + '-action' : undefined"
+                :class="`bg-${color}-50 rounded-md px-2 py-1.5 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>
+        </template>
+      </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,
+    },
+    id: {
+      type: String,
+    },
+  },
+};
+</script>
+<style scoped>
+.word-break {
+  word-break: break-word;
+}
+</style>

package/src/components/CAlerts/index.js

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