classcard-ui 0.2.1506 → 0.2.1508-beta.0

package/src/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -1,290 +1,290 @@
-<template>
-  <focus-trap :active="true" :escapeDeactivates="false">
-    <div
-      v-scroll-lock="true"
-      id="confirm-action-modal"
-      class="z-100 fixed inset-0 overflow-y-auto"
-    >
-      <div
-        class="flex min-h-screen items-end justify-center pt-4 pb-20 text-center sm:block sm:p-0 sm:px-4"
-        @click="shouldBlur ? $emit('close') : null"
-      >
-        <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 align-middle sm:inline-block sm:h-screen"
-          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 w-full transform overflow-y-visible rounded-lg bg-white text-left align-middle shadow-xl transition-all sm:my-8 sm:max-w-sm md:max-w-2xl"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="modal-title"
-            :aria-describedby="ariaDescribedby"
-            :aria-busy="loadButton"
-            @click.stop
-          >
-            <div
-              class="modal-content relative flex items-center gap-4 overflow-y-auto px-6 pt-6 pb-4"
-            >
-              <button
-                v-if="showClose"
-                type="button"
-                class="absolute top-3 right-3 p-2"
-                @click="$emit('close')"
-              >
-                <c-icon
-                  name="x-mark-solid-v2"
-                  type="solid"
-                  class="h-6 w-6 text-gray-400"
-                  cursor-type="cursor-pointer"
-                ></c-icon>
-              </button>
-              <div aria-hidden="true" :class="iconContainerClasses">
-                <c-icon
-                  :name="iconName"
-                  :type="iconType"
-                  :class="iconClasses"
-                  :viewBox="resolvedIconViewBox"
-                  :viewBoxOutline="resolvedIconViewBox"
-                ></c-icon>
-              </div>
-              <div class="flex-1">
-                <h3
-                  id="modal-title"
-                  class="text-base font-medium text-gray-900"
-                >
-                  {{ title }}
-                  <span
-                    v-if="isRequired"
-                    class="text-red-600"
-                    aria-hidden="true"
-                    >*</span
-                  >
-                  <span v-if="isRequired" class="sr-only">(required)</span>
-                </h3>
-                <div class="text-sm text-gray-500">
-                  <p id="modal-message">{{ message }}</p>
-                  <p
-                    v-if="description"
-                    id="modal-description"
-                    class="mt-1 text-gray-500"
-                  >
-                    {{ description }}
-                  </p>
-                  <slot name="description"></slot>
-                </div>
-                <div class="mt-2" v-if="isTextAreaEnabled">
-                  <c-textarea
-                    class="flex-grow"
-                    :label="textAreaLabel"
-                    :hint="textAreaHint"
-                    :value="textValue"
-                    :isValidate="isTextValid"
-                    :disabled="false"
-                    :helpText="textAreaHelperText"
-                    :errorMessage="errorMessage"
-                    @input="handleTextAreaInputChange"
-                  ></c-textarea>
-                </div>
-              </div>
-            </div>
-            <div
-              class="flex items-center justify-end gap-3 rounded-b-lg border-t border-gray-200 bg-gray-100 px-6 py-3"
-            >
-              <c-button
-                v-if="!hideActionOne"
-                id="cancel-button"
-                :type="actionOneType"
-                :label="actionOneLabel"
-                @action="$emit('action-one')"
-              ></c-button>
-              <c-button
-                id="confirm-button"
-                :type="actionTwoType"
-                :label="actionTwoLabel"
-                :isLoading="loadButton"
-                :disabled="loadButton"
-                :aria-busy="loadButton"
-                @action="$emit('action-two')"
-              ></c-button>
-            </div>
-          </div>
-        </transition>
-      </div>
-    </div>
-  </focus-trap>
-</template>
-
-<script>
-import CButton from "../CButton";
-import CIcon from "../CIcon/CIcon.vue";
-import CTextarea from "../CTextarea";
-
-const COLOR_VARIANT_CLASSES = {
-  red: {
-    background: "bg-red-100",
-    text: "text-red-600",
-  },
-  indigo: {
-    background: "bg-indigo-100",
-    text: "text-indigo-600",
-  },
-  yellow: {
-    background: "bg-yellow-100",
-    text: "text-yellow-600",
-  },
-};
-
-export default {
-  name: "CConfirmActionModal",
-  components: {
-    CButton,
-    CTextarea,
-    CIcon,
-  },
-  props: {
-    title: {
-      type: String,
-      default: "Are you sure?",
-    },
-    message: {
-      type: String,
-      default: "",
-    },
-    description: {
-      type: String,
-    },
-    actionOneLabel: {
-      type: String,
-      default: "Cancel",
-    },
-    actionTwoLabel: {
-      type: String,
-      default: "Confirm",
-    },
-    actionOneType: {
-      type: String,
-      default: "white",
-    },
-    actionTwoType: {
-      type: String,
-      default: "danger",
-    },
-    loadButton: {
-      type: Boolean,
-      default: false,
-    },
-    hideActionOne: {
-      type: Boolean,
-      default: false,
-    },
-    isRequired: {
-      type: Boolean,
-      default: false,
-    },
-    //props for c-textarea
-    isTextAreaEnabled: {
-      type: Boolean,
-      default: false,
-    },
-    textValue: {
-      type: String,
-    },
-    isTextValid: {
-      type: Boolean,
-      default: false,
-    },
-    textAreaHelperText: {
-      type: String,
-    },
-    errorMessage: {
-      type: String,
-    },
-    shouldBlur: {
-      type: Boolean,
-      default: false,
-    },
-    textAreaHint: {
-      type: String,
-    },
-    textAreaLabel: {
-      type: String,
-    },
-    colorVariant: {
-      type: String,
-      default: "red",
-    },
-    iconName: {
-      type: String,
-      default: "exclamation-triangle-outline-v2",
-    },
-    iconType: {
-      type: String,
-      default: "outline-v2",
-    },
-    iconViewBox: {
-      type: String,
-    },
-    showClose: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    ariaDescribedby() {
-      return this.description
-        ? "modal-message modal-description"
-        : "modal-message";
-    },
-    resolvedIconViewBox() {
-      return this.iconViewBox || "0 0 24 24";
-    },
-    colorVariantClasses() {
-      return (
-        COLOR_VARIANT_CLASSES[this.colorVariant] || COLOR_VARIANT_CLASSES.red
-      );
-    },
-    iconContainerClasses() {
-      return [
-        "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full",
-        this.colorVariantClasses.background,
-      ];
-    },
-    iconClasses() {
-      return ["h-6 w-6", this.colorVariantClasses.text];
-    },
-  },
-  methods: {
-    handleTextAreaInputChange(value) {
-      this.$emit("input-value-change", value);
-    },
-  },
-};
-</script>
-<style scoped>
-.modal-content {
-  max-height: calc(100vh - 200px);
-}
-</style>
+<template>
+  <focus-trap :active="true" :escapeDeactivates="false">
+    <div
+      v-scroll-lock="true"
+      id="confirm-action-modal"
+      class="z-100 fixed inset-0 overflow-y-auto"
+    >
+      <div
+        class="flex min-h-screen items-end justify-center pt-4 pb-20 text-center sm:block sm:p-0 sm:px-4"
+        @click="shouldBlur ? $emit('close') : null"
+      >
+        <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 align-middle sm:inline-block sm:h-screen"
+          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 w-full transform overflow-y-visible rounded-lg bg-white text-left align-middle shadow-xl transition-all sm:my-8 sm:max-w-sm md:max-w-2xl"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-title"
+            :aria-describedby="ariaDescribedby"
+            :aria-busy="loadButton"
+            @click.stop
+          >
+            <div
+              class="modal-content relative flex items-center gap-4 overflow-y-auto px-6 pt-6 pb-4"
+            >
+              <button
+                v-if="showClose"
+                type="button"
+                class="absolute top-3 right-3 p-2"
+                @click="$emit('close')"
+              >
+                <c-icon
+                  name="x-mark-solid-v2"
+                  type="solid"
+                  class="h-6 w-6 text-gray-400"
+                  cursor-type="cursor-pointer"
+                ></c-icon>
+              </button>
+              <div aria-hidden="true" :class="iconContainerClasses">
+                <c-icon
+                  :name="iconName"
+                  :type="iconType"
+                  :class="iconClasses"
+                  :viewBox="resolvedIconViewBox"
+                  :viewBoxOutline="resolvedIconViewBox"
+                ></c-icon>
+              </div>
+              <div class="flex-1">
+                <h3
+                  id="modal-title"
+                  class="text-base font-medium text-gray-900"
+                >
+                  {{ title }}
+                  <span
+                    v-if="isRequired"
+                    class="text-red-600"
+                    aria-hidden="true"
+                    >*</span
+                  >
+                  <span v-if="isRequired" class="sr-only">(required)</span>
+                </h3>
+                <div class="text-sm text-gray-500">
+                  <p id="modal-message">{{ message }}</p>
+                  <p
+                    v-if="description"
+                    id="modal-description"
+                    class="mt-1 text-gray-500"
+                  >
+                    {{ description }}
+                  </p>
+                  <slot name="description"></slot>
+                </div>
+                <div class="mt-2" v-if="isTextAreaEnabled">
+                  <c-textarea
+                    class="flex-grow"
+                    :label="textAreaLabel"
+                    :hint="textAreaHint"
+                    :value="textValue"
+                    :isValidate="isTextValid"
+                    :disabled="false"
+                    :helpText="textAreaHelperText"
+                    :errorMessage="errorMessage"
+                    @input="handleTextAreaInputChange"
+                  ></c-textarea>
+                </div>
+              </div>
+            </div>
+            <div
+              class="flex items-center justify-end gap-3 rounded-b-lg border-t border-gray-200 bg-gray-100 px-6 py-3"
+            >
+              <c-button
+                v-if="!hideActionOne"
+                id="cancel-button"
+                :type="actionOneType"
+                :label="actionOneLabel"
+                @action="$emit('action-one')"
+              ></c-button>
+              <c-button
+                id="confirm-button"
+                :type="actionTwoType"
+                :label="actionTwoLabel"
+                :isLoading="loadButton"
+                :disabled="loadButton"
+                :aria-busy="loadButton"
+                @action="$emit('action-two')"
+              ></c-button>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </focus-trap>
+</template>
+
+<script>
+import CButton from "../CButton";
+import CIcon from "../CIcon/CIcon.vue";
+import CTextarea from "../CTextarea";
+
+const COLOR_VARIANT_CLASSES = {
+  red: {
+    background: "bg-red-100",
+    text: "text-red-600",
+  },
+  indigo: {
+    background: "bg-indigo-100",
+    text: "text-indigo-600",
+  },
+  yellow: {
+    background: "bg-yellow-100",
+    text: "text-yellow-600",
+  },
+};
+
+export default {
+  name: "CConfirmActionModal",
+  components: {
+    CButton,
+    CTextarea,
+    CIcon,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "Are you sure?",
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+    },
+    actionOneLabel: {
+      type: String,
+      default: "Cancel",
+    },
+    actionTwoLabel: {
+      type: String,
+      default: "Confirm",
+    },
+    actionOneType: {
+      type: String,
+      default: "white",
+    },
+    actionTwoType: {
+      type: String,
+      default: "danger",
+    },
+    loadButton: {
+      type: Boolean,
+      default: false,
+    },
+    hideActionOne: {
+      type: Boolean,
+      default: false,
+    },
+    isRequired: {
+      type: Boolean,
+      default: false,
+    },
+    //props for c-textarea
+    isTextAreaEnabled: {
+      type: Boolean,
+      default: false,
+    },
+    textValue: {
+      type: String,
+    },
+    isTextValid: {
+      type: Boolean,
+      default: false,
+    },
+    textAreaHelperText: {
+      type: String,
+    },
+    errorMessage: {
+      type: String,
+    },
+    shouldBlur: {
+      type: Boolean,
+      default: false,
+    },
+    textAreaHint: {
+      type: String,
+    },
+    textAreaLabel: {
+      type: String,
+    },
+    colorVariant: {
+      type: String,
+      default: "red",
+    },
+    iconName: {
+      type: String,
+      default: "exclamation-triangle-outline-v2",
+    },
+    iconType: {
+      type: String,
+      default: "outline-v2",
+    },
+    iconViewBox: {
+      type: String,
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    ariaDescribedby() {
+      return this.description
+        ? "modal-message modal-description"
+        : "modal-message";
+    },
+    resolvedIconViewBox() {
+      return this.iconViewBox || "0 0 24 24";
+    },
+    colorVariantClasses() {
+      return (
+        COLOR_VARIANT_CLASSES[this.colorVariant] || COLOR_VARIANT_CLASSES.red
+      );
+    },
+    iconContainerClasses() {
+      return [
+        "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full",
+        this.colorVariantClasses.background,
+      ];
+    },
+    iconClasses() {
+      return ["h-6 w-6", this.colorVariantClasses.text];
+    },
+  },
+  methods: {
+    handleTextAreaInputChange(value) {
+      this.$emit("input-value-change", value);
+    },
+  },
+};
+</script>
+<style scoped>
+.modal-content {
+  max-height: calc(100vh - 200px);
+}
+</style>

package/src/components/CConfirmActionModal/index.js

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