classcard-ui 0.2.471 → 0.2.472

package/src/components/CDatepicker/CDatepicker.vue

@@ -1,134 +1,134 @@
-<template>
-  <div>
-    <div class="flex items-center">
-      <div v-if="label">
-        <label class="block text-sm font-medium text-gray-900">
-          {{ label }}
-        </label>
-      </div>
-      <!-- asterisk sign to render if field is required -->
-      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-    </div>
-    <v-date-picker
-      :class="{
-        'inline-block h-full': true,
-        'w-full': isExpanded,
-      }"
-      :masks="masks"
-      @input="onDayClick"
-      :value="value"
-      :min-date="minDate"
-      :attributes="attrs"
-      firstDayOfWeek="2"
-      :is-required="true"
-    >
-      <template v-slot="{ inputValue, togglePopover }">
-        <div class="mt-1 flex items-center">
-          <button
-            type="button"
-            :class="[
-              disabled ? 'pointer-events-none border-gray-100' : 'border-gray-300',
-              'bg-blue-100 hover:bg-blue-200 text-blue-600 focus:bg-blue-500  focus:border-blue-500 focus:outline-none rounded-l-md border p-2 shadow-sm focus:text-white',
-            ]"
-            @click="togglePopover()"
-          >
-            <c-icon
-              name="calendar-solid"
-              :class="[disabled ? 'text-gray-200' : 'text-gray-400', 'h-5 w-5 ']"
-              type="solid"
-            ></c-icon>
-          </button>
-          <input
-            :value="inputValue"
-            :class="[
-              disabled
-                ? 'pointer-events-none border-l-0 border-gray-100 text-gray-400'
-                : 'border-l-0 border-gray-300 text-gray-900',
-              'focus:outline-none focus:border-blue-500 w-full appearance-none rounded-r-md border  bg-white p-2 text-sm shadow-sm',
-            ]"
-            :readonly="disabled"
-            @click="togglePopover()"
-          />
-        </div>
-      </template>
-    </v-date-picker>
-    <!-- validation error message -->
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-// import Calendar from "v-calendar/lib/components/calendar.umd";
-import VDatePicker from "v-calendar/lib/components/date-picker.umd";
-export default {
-  name: "CDatepicker",
-  components: {
-    // Calendar,
-    VDatePicker,
-    CIcon,
-  },
-  props: {
-    classes: {
-      type: String,
-    },
-    isRequired: {
-      type: Boolean,
-    },
-    label: {
-      type: String,
-    },
-    helpText: {
-      type: String,
-    },
-    value: {
-      type: [String, Date, Array],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    minDate: {
-      type: [String, Date],
-      default: null,
-    },
-    isExpanded: {
-      type: Boolean,
-      default: false,
-    },
-    isValidate: {
-      type: Boolean,
-      default: true,
-    },
-    errorMessage: {
-      type: String,
-    },
-  },
-  data() {
-    const masks = {
-      input: ["MMM DD, YYYY", "YYYY/MM/DD", "DD-MM-YYYY", "DD/MM/YYYY", "YYYY-MM-DD", "L"],
-    };
-    return {
-      masks,
-      attrs: [
-        {
-          highlight: {
-            color: "blue",
-            fillMode: "outline",
-          },
-          dates: new Date(),
-        },
-      ],
-    };
-  },
-  methods: {
-    onDayClick(date) {
-      this.$emit("input", date);
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="flex items-center">
+      <div v-if="label">
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+      </div>
+      <!-- asterisk sign to render if field is required -->
+      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+    </div>
+    <v-date-picker
+      :class="{
+        'inline-block h-full': true,
+        'w-full': isExpanded,
+      }"
+      :masks="masks"
+      @input="onDayClick"
+      :value="value"
+      :min-date="minDate"
+      :attributes="attrs"
+      firstDayOfWeek="2"
+      :is-required="true"
+    >
+      <template v-slot="{ inputValue, togglePopover }">
+        <div class="mt-1 flex items-center">
+          <button
+            type="button"
+            :class="[
+              disabled ? 'pointer-events-none border-gray-100' : 'border-gray-300',
+              'bg-blue-100 hover:bg-blue-200 text-blue-600 focus:bg-blue-500  focus:border-blue-500 focus:outline-none rounded-l-md border p-2 shadow-sm focus:text-white',
+            ]"
+            @click="togglePopover()"
+          >
+            <c-icon
+              name="calendar-solid"
+              :class="[disabled ? 'text-gray-200' : 'text-gray-400', 'h-5 w-5 ']"
+              type="solid"
+            ></c-icon>
+          </button>
+          <input
+            :value="inputValue"
+            :class="[
+              disabled
+                ? 'pointer-events-none border-l-0 border-gray-100 text-gray-400'
+                : 'border-l-0 border-gray-300 text-gray-900',
+              'focus:outline-none focus:border-blue-500 w-full appearance-none rounded-r-md border  bg-white p-2 text-sm shadow-sm',
+            ]"
+            :readonly="disabled"
+            @click="togglePopover()"
+          />
+        </div>
+      </template>
+    </v-date-picker>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+// import Calendar from "v-calendar/lib/components/calendar.umd";
+import VDatePicker from "v-calendar/lib/components/date-picker.umd";
+export default {
+  name: "CDatepicker",
+  components: {
+    // Calendar,
+    VDatePicker,
+    CIcon,
+  },
+  props: {
+    classes: {
+      type: String,
+    },
+    isRequired: {
+      type: Boolean,
+    },
+    label: {
+      type: String,
+    },
+    helpText: {
+      type: String,
+    },
+    value: {
+      type: [String, Date, Array],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    minDate: {
+      type: [String, Date],
+      default: null,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
+  },
+  data() {
+    const masks = {
+      input: ["MMM DD, YYYY", "YYYY/MM/DD", "DD-MM-YYYY", "DD/MM/YYYY", "YYYY-MM-DD", "L"],
+    };
+    return {
+      masks,
+      attrs: [
+        {
+          highlight: {
+            color: "blue",
+            fillMode: "outline",
+          },
+          dates: new Date(),
+        },
+      ],
+    };
+  },
+  methods: {
+    onDayClick(date) {
+      this.$emit("input", date);
+    },
+  },
+};
+</script>

package/src/components/CDatepicker/index.js

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

package/src/components/CDualSelect/CDualSelect.vue

@@ -1,193 +1,193 @@
-<template>
-  <div>
-    <div class="flex">
-      <button
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-labelledby="listbox-label"
-        @click="toggleFirstDropdown = !toggleFirstDropdown"
-        @blur="close()"
-        class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
-        :disabled="isDisabled"
-      >
-        <span class="block truncate">
-          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
-        </span>
-        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
-        </span>
-      </button>
-      <button
-        type="button"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-labelledby="listbox-label"
-        @click="toggleSecondDropdown = !toggleSecondDropdown"
-        @blur="close()"
-        class="relative items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
-        :disabled="isDisabled"
-      >
-        <span class="block truncate">
-          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
-        </span>
-        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
-        </span>
-      </button>
-    </div>
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <div
-        v-if="toggleFirstDropdown && !isDisabled"
-        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
-      >
-        <ul
-          tabindex="-1"
-          role="listbox"
-          aria-labelledby="listbox-label"
-          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-        >
-          <li
-            v-for="item in firstDropdownOptions"
-            v-bind:key="item.items"
-            role="menuitem"
-            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
-            @mousedown="handleFirstClick(item)"
-          >
-            <span class="font-normal block truncate list-options">
-              {{ item.text }}
-            </span>
-          </li>
-        </ul>
-      </div>
-    </transition>
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <div
-        v-if="toggleSecondDropdown && !isDisabled"
-        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
-      >
-        <ul
-          tabindex="-1"
-          role="listbox"
-          aria-labelledby="listbox-label"
-          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-        >
-          <li
-            v-for="item in secondDropdownOptions"
-            v-bind:key="item.items"
-            role="menuitem"
-            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
-            @mousedown="handleSecondClick(item)"
-          >
-            <span class="font-normal block truncate list-options">
-              {{ item.text }}
-            </span>
-          </li>
-        </ul>
-      </div>
-    </transition>
-    <!-- validation error message -->
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CDualSelect",
-  components: { CIcon },
-  props: {
-    // validation is passed or not
-    isValidate: { type: Boolean },
-    // validation error message
-    errorMessage: {
-      type: String,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    firstDropdownValue: {
-      type: String,
-    },
-    secondDropdownValue: {
-      type: String,
-    },
-    firstDropdownOptions: {
-      type: Array,
-      required: true,
-    },
-    secondDropdownOptions: {
-      type: Array,
-    },
-    onChangeFirstOptions: {
-      type: Function,
-    },
-    onChangeSecondOptions: {
-      type: Function,
-    },
-    isDisabled: {
-      type: Boolean,
-    },
-  },
-  data() {
-    return {
-      toggleFirstDropdown: false,
-      toggleSecondDropdown: false,
-      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
-      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
-    };
-  },
-  methods: {
-    close() {
-      this.toggleFirstDropdown = false;
-      this.toggleSecondDropdown = false;
-    },
-    handleFirstClick(item) {
-      this.firstDropdownSelectedValue = item.text;
-      this.$emit("onChangeFirstOptions", item);
-    },
-    handleSecondClick(item) {
-      this.secondDropdownSelectedValue = item.text;
-      this.$emit("onChangeSecondOptions", item);
-    },
-  },
-  computed: {
-    classes() {
-      return {
-        "text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary",
-        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
-        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-  },
-  watch: {
-    firstDropdownValue() {
-      this.firstDropdownSelectedValue = this.firstDropdownValue;
-      this.secondDropdownSelectedValue = this.secondDropdownValue;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <div class="flex">
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="toggleFirstDropdown = !toggleFirstDropdown"
+        @blur="close()"
+        class="relative inline-flex items-center pl-3 pr-10 py-2 text-left rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
+        :disabled="isDisabled"
+      >
+        <span class="block truncate">
+          {{ firstDropdownSelectedValue ? firstDropdownSelectedValue : "Select a option" }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </span>
+      </button>
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="toggleSecondDropdown = !toggleSecondDropdown"
+        @blur="close()"
+        class="relative items-center -ml-px pl-3 pr-10 py-2 text-left rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-900 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm disabled:opacity-50"
+        :disabled="isDisabled"
+      >
+        <span class="block truncate">
+          {{ secondDropdownSelectedValue ? secondDropdownSelectedValue : "Select a option" }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </span>
+      </button>
+    </div>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="toggleFirstDropdown && !isDisabled"
+        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
+      >
+        <ul
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
+          <li
+            v-for="item in firstDropdownOptions"
+            v-bind:key="item.items"
+            role="menuitem"
+            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            @mousedown="handleFirstClick(item)"
+          >
+            <span class="font-normal block truncate list-options">
+              {{ item.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="toggleSecondDropdown && !isDisabled"
+        class="origin-top-right absolute mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-10"
+      >
+        <ul
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          class="max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+        >
+          <li
+            v-for="item in secondDropdownOptions"
+            v-bind:key="item.items"
+            role="menuitem"
+            class="text-gray-900 select-none relative py-2 pl-3 pr-9 cursor-pointer"
+            @mousedown="handleSecondClick(item)"
+          >
+            <span class="font-normal block truncate list-options">
+              {{ item.text }}
+            </span>
+          </li>
+        </ul>
+      </div>
+    </transition>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CDualSelect",
+  components: { CIcon },
+  props: {
+    // validation is passed or not
+    isValidate: { type: Boolean },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    firstDropdownValue: {
+      type: String,
+    },
+    secondDropdownValue: {
+      type: String,
+    },
+    firstDropdownOptions: {
+      type: Array,
+      required: true,
+    },
+    secondDropdownOptions: {
+      type: Array,
+    },
+    onChangeFirstOptions: {
+      type: Function,
+    },
+    onChangeSecondOptions: {
+      type: Function,
+    },
+    isDisabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      toggleFirstDropdown: false,
+      toggleSecondDropdown: false,
+      firstDropdownSelectedValue: this.firstDropdownValue ? this.firstDropdownValue : "",
+      secondDropdownSelectedValue: this.secondDropdownValue ? this.secondDropdownValue : "",
+    };
+  },
+  methods: {
+    close() {
+      this.toggleFirstDropdown = false;
+      this.toggleSecondDropdown = false;
+    },
+    handleFirstClick(item) {
+      this.firstDropdownSelectedValue = item.text;
+      this.$emit("onChangeFirstOptions", item);
+    },
+    handleSecondClick(item) {
+      this.secondDropdownSelectedValue = item.text;
+      this.$emit("onChangeSecondOptions", item);
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        "text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
+        "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600": this.type == "success",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+  },
+  watch: {
+    firstDropdownValue() {
+      this.firstDropdownSelectedValue = this.firstDropdownValue;
+      this.secondDropdownSelectedValue = this.secondDropdownValue;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CDualSelect/index.js

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