classcard-ui 0.2.1475 → 0.2.1476

package/src/components/CDatepicker/CDatepicker.vue

@@ -1,235 +1,235 @@
-<template>
-  <div>
-    <div class="flex items-center justify-between">
-      <div class="flex items-center">
-        <label v-if="label" class="block text-sm font-medium text-gray-900">
-          {{ label }}
-        </label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div class="relative">
-      <v-date-picker
-        ref="datepicker"
-        :class="[
-          'h-full',
-          isExpanded ? 'w-full' : '',
-          isInline ? 'inline' : 'inline-block',
-        ]"
-        :masks="masks"
-        @input="onDayClick"
-        :id="id"
-        :value="value"
-        :popover="popoverPlacement"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :attributes="attrs"
-        :first-day-of-week="firstDayOfWeek"
-        :is-required="isDatePickerRequired"
-        :timezone="timezone"
-      >
-        <template v-slot="{ inputValue, togglePopover }">
-          <div v-if="showOnlyDatePickerIcon">
-            <button
-              type="button"
-              class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
-              :id="id + '_button_toggle_dropdown'"
-              :disabled="disabled"
-              @click="togglePopover()"
-            >
-              <c-icon
-                :name="calendarIcon.iconName"
-                class="text-gray-400 flex h-5 w-5 justify-center"
-                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
-                :viewBox="calendarIcon.viewBox ? calendarIcon.viewBox : ''"
-              ></c-icon>
-            </button>
-          </div>
-          <div :class="`${isCustom ? '' : 'mt-1'} h-9 flex items-center`" v-else>
-            <button
-              type="button"
-              :class="['border-gray-300 text-blue-600 focus:outline-none bg-white shadow-sm focus:text-white disabled:custom-disabled-state',
-                isCustom ? 'border-t border-b px-3 py-2' : 'rounded-l-md border p-2'
-              ]"
-              :id="id + '_button_toggle_dropdown'"
-              :disabled="disabled"
-              @click="togglePopover()"
-            >
-              <c-icon
-                :name="calendarIcon.iconName"
-                class="text-gray-400 h-5 w-5"
-                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
-                :viewBox="calendarIcon.viewBox"
-              ></c-icon>
-            </button>
-            <input
-              type="text"
-              :value="inputValue"
-              class="border-l-0 border-gray-300 text-gray-900 w-full appearance-none rounded-r-md border bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none"
-              :readonly="disabled"
-              :disabled="disabled"
-              @input="handleInputBoxInput"
-              @click="togglePopover()"
-            />
-          </div>
-        </template>
-      </v-date-picker>
-    </div>
-    <!-- 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-2 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,
-    },
-    id: {
-      type: String,
-    },
-    isRequired: {
-      type: Boolean,
-    },
-    isCustom: {
-      type: Boolean,
-    },
-    label: {
-      type: String,
-    },
-    helpText: {
-      type: String,
-    },
-    value: {
-      type: [String, Date, Array],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    minDate: {
-      type: [String, Date],
-      default: null,
-    },
-    maxDate: {
-      type: [String, Date],
-      default: null,
-    },
-    isExpanded: {
-      type: Boolean,
-      default: false,
-    },
-    isValidate: {
-      type: Boolean,
-      default: true,
-    },
-    errorMessage: {
-      type: String,
-    },
-    hint: {
-      type: String,
-    },
-    isDatePickerRequired: {
-      type: Boolean,
-      default: true,
-    },
-    showOnlyDatePickerIcon: {
-      type: Boolean,
-      default: false,
-    },
-    popoverPlacement: {
-      type: Object,
-      default() {
-        return {
-          placement: "bottom-start",
-        };
-      },
-    },
-    calendarIcon: {
-      type: Object,
-      default() {
-        return {
-          iconName: "calendar-solid",
-          type: "solid",
-          viewBox: "0 0 20 20",
-        };
-      },
-    },
-    firstDayOfWeek: {
-      type: Number,
-      default: 2,
-    },
-    timezone: {
-      type: String,
-      default: null,
-    },
-    isInline: {
-      type: Boolean,
-      default: false,
-    },
-    //to trigger popover close manually
-    manualHidePopover: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  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);
-      if (this.manualHidePopover) {
-        this.$refs.datepicker.hidePopover();
-      }
-    },
-    handleInputBoxInput(input) {
-      if (input.target.value.length == 0) {
-        this.$emit("input", null);
-      }
-    },
-    toggleDatePicker() {
-      if (this.$refs.datepicker) {
-        this.$refs.datepicker.togglePopover();
-      }
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <div class="flex items-center">
+        <label v-if="label" class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+        <!-- asterisk sign to render if field is required -->
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <div class="relative">
+      <v-date-picker
+        ref="datepicker"
+        :class="[
+          'h-full',
+          isExpanded ? 'w-full' : '',
+          isInline ? 'inline' : 'inline-block',
+        ]"
+        :masks="masks"
+        @input="onDayClick"
+        :id="id"
+        :value="value"
+        :popover="popoverPlacement"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :attributes="attrs"
+        :first-day-of-week="firstDayOfWeek"
+        :is-required="isDatePickerRequired"
+        :timezone="timezone"
+      >
+        <template v-slot="{ inputValue, togglePopover }">
+          <div v-if="showOnlyDatePickerIcon">
+            <button
+              type="button"
+              class="relative flex h-9 w-9 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:custom-disabled-state"
+              :id="id + '_button_toggle_dropdown'"
+              :disabled="disabled"
+              @click="togglePopover()"
+            >
+              <c-icon
+                :name="calendarIcon.iconName"
+                class="text-gray-400 flex h-5 w-5 justify-center"
+                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
+                :viewBox="calendarIcon.viewBox ? calendarIcon.viewBox : ''"
+              ></c-icon>
+            </button>
+          </div>
+          <div :class="`${isCustom ? '' : 'mt-1'} h-9 flex items-center`" v-else>
+            <button
+              type="button"
+              :class="['border-gray-300 text-blue-600 focus:outline-none bg-white shadow-sm focus:text-white disabled:custom-disabled-state',
+                isCustom ? 'border-t border-b px-3 py-2' : 'rounded-l-md border p-2'
+              ]"
+              :id="id + '_button_toggle_dropdown'"
+              :disabled="disabled"
+              @click="togglePopover()"
+            >
+              <c-icon
+                :name="calendarIcon.iconName"
+                class="text-gray-400 h-5 w-5"
+                :type="calendarIcon.type ? calendarIcon.type : 'solid'"
+                :viewBox="calendarIcon.viewBox"
+              ></c-icon>
+            </button>
+            <input
+              type="text"
+              :value="inputValue"
+              class="border-l-0 border-gray-300 text-gray-900 w-full appearance-none rounded-r-md border bg-white px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none"
+              :readonly="disabled"
+              :disabled="disabled"
+              @input="handleInputBoxInput"
+              @click="togglePopover()"
+            />
+          </div>
+        </template>
+      </v-date-picker>
+    </div>
+    <!-- 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-2 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,
+    },
+    id: {
+      type: String,
+    },
+    isRequired: {
+      type: Boolean,
+    },
+    isCustom: {
+      type: Boolean,
+    },
+    label: {
+      type: String,
+    },
+    helpText: {
+      type: String,
+    },
+    value: {
+      type: [String, Date, Array],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    minDate: {
+      type: [String, Date],
+      default: null,
+    },
+    maxDate: {
+      type: [String, Date],
+      default: null,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
+    hint: {
+      type: String,
+    },
+    isDatePickerRequired: {
+      type: Boolean,
+      default: true,
+    },
+    showOnlyDatePickerIcon: {
+      type: Boolean,
+      default: false,
+    },
+    popoverPlacement: {
+      type: Object,
+      default() {
+        return {
+          placement: "bottom-start",
+        };
+      },
+    },
+    calendarIcon: {
+      type: Object,
+      default() {
+        return {
+          iconName: "calendar-solid",
+          type: "solid",
+          viewBox: "0 0 20 20",
+        };
+      },
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 2,
+    },
+    timezone: {
+      type: String,
+      default: null,
+    },
+    isInline: {
+      type: Boolean,
+      default: false,
+    },
+    //to trigger popover close manually
+    manualHidePopover: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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);
+      if (this.manualHidePopover) {
+        this.$refs.datepicker.hidePopover();
+      }
+    },
+    handleInputBoxInput(input) {
+      if (input.target.value.length == 0) {
+        this.$emit("input", null);
+      }
+    },
+    toggleDatePicker() {
+      if (this.$refs.datepicker) {
+        this.$refs.datepicker.togglePopover();
+      }
+    },
+  },
+};
+</script>

package/src/components/CDatepicker/index.js

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