@coreui/vue-pro 5.0.0-alpha.1 → 5.0.0-beta.0

package/dist/esm/components/date-picker/CDatePicker.js

@@ -0,0 +1,347 @@
+import { defineComponent, h } from 'vue';
+import { CDateRangePicker } from '../date-range-picker/CDateRangePicker.js';
+import { Color } from '../props.js';
+
+const CDatePicker = defineComponent({
+    name: 'CDatePicker',
+    props: {
+        /**
+         * Default date of the component
+         */
+        calendarDate: {
+            type: [Date, String],
+        },
+        /**
+         * Toggle visibility or set the content of cancel button.
+         */
+        cancelButton: {
+            type: [Boolean, String],
+            default: 'Cancel',
+        },
+        /**
+         * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        cancelButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the cancel button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        cancelButtonSize: {
+            type: String,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Set the cancel button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
+         */
+        cancelButtonVariant: {
+            type: String,
+            default: 'ghost',
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
+        },
+        /**
+         * Toggle visibility of the cleaner button.
+         */
+        cleaner: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Toggle visibility or set the content of confirm button.
+         */
+        confirmButton: {
+            type: [Boolean, String],
+            default: 'OK',
+        },
+        /**
+         * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        confirmButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the confirm button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        confirmButtonSize: {
+            type: String,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Set the confirm button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
+         */
+        confirmButtonVariant: {
+            type: String,
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
+        },
+        /**
+         * Set the format of day name.
+         *
+         * @default 'numeric'
+         * @since 4.6.0
+         */
+        dayFormat: {
+            type: [Function, String],
+            default: 'numeric',
+            required: false,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['numeric', '2-digit'].includes(value);
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * Specify the list of dates that cannot be selected.
+         */
+        disabledDates: {
+            type: Array,
+        },
+        /**
+         * Initial selected date.
+         */
+        date: {
+            type: [Date, String],
+            required: false,
+        },
+        /**
+         * Sets the day of start week.
+         * - 0 - Sunday,
+         * - 1 - Monday,
+         * - 2 - Tuesday,
+         * - 3 - Wednesday,
+         * - 4 - Thursday,
+         * - 5 - Friday,
+         * - 6 - Saturday,
+         */
+        firstDayOfWeek: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Set date format.
+         * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
+         */
+        format: String,
+        /**
+         * Toggle visibility of footer element or set the content of footer.
+         */
+        footer: Boolean,
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         *
+         * The name attribute for the input element is generated based on the `id` property:
+         * - {id}-date
+         */
+        id: String,
+        /**
+         * Toggle visibility or set the content of the input indicator.
+         */
+        indicator: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Toggle the readonly state for the component.
+         */
+        inputReadOnly: Boolean,
+        /**
+         * Custom function to format the selected date into a string according to a custom format.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputDateFormat: Function,
+        /**
+         * Custom function to parse the input value into a valid Date object.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputDateParse: Function,
+        /**
+         * Defines the delay (in milliseconds) for the input field's onChange event.
+         *
+         * @since v5.0.0-alpha.4
+         */
+        inputOnChangeDelay: {
+            type: Number,
+            default: 750,
+        },
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+         */
+        locale: {
+            type: String,
+            default: 'default',
+        },
+        /**
+         * Max selectable date.
+         */
+        maxDate: {
+            type: [Date, String],
+        },
+        /**
+         * Min selectable date.
+         */
+        minDate: {
+            type: [Date, String],
+        },
+        /**
+         * Show arrows navigation.
+         */
+        navigation: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Reorder year-month navigation, and render year first.
+         *
+         * @since 4.6.0
+         */
+        navYearFirst: Boolean,
+        /**
+         * Specifies a short hint that is visible in the input.
+         */
+        placeholder: {
+            type: String,
+            default: 'Select date',
+        },
+        /**
+         * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
+         *
+         * @since 4.9.0
+         */
+        selectAdjacementDays: Boolean,
+        /**
+         * Specify the type of date selection as day, week, month, or year.
+         *
+         * @since 5.0.0-beta.0
+         */
+        selectionType: {
+            type: String,
+            default: 'day',
+            validator: (value) => ['day', 'week', 'month', 'year'].includes(value),
+        },
+        /**
+         * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+         *
+         * @since 4.9.0
+         */
+        showAdjacementDays: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Set whether to display week numbers in the calendar.
+         *
+         * @since 5.0.0-beta.0
+         */
+        showWeekNumber: Boolean,
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        size: {
+            type: String,
+            required: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Provide an additional time selection by adding select boxes to choose times.
+         */
+        timepicker: Boolean,
+        /**
+         * Set length or format of day name.
+         *
+         * @type  number | 'long' | 'narrow' | 'short'
+         */
+        weekdayFormat: {
+            type: [Function, Number, String],
+            default: 2,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['long', 'narrow', 'short'].includes(value);
+                }
+                if (typeof value === 'number') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
+        /**
+         * Label displayed over week numbers in the calendar.
+         *
+         * @since 5.0.0-beta.0
+         */
+        weekNumbersLabel: String,
+    },
+    emits: [
+        /**
+         * Callback fired when the date changed.
+         *
+         * @property {Date} date - date object
+         * @property {string} formatedDate - formated date
+         */
+        'date-change',
+        /**
+         * Callback fired when the date changed.
+         *
+         * @property {Date | null} date - date object
+         * @since 4.7.0
+         */
+        'update:date',
+    ],
+    setup(props, { emit }) {
+        return () => h(CDateRangePicker, {
+            calendars: 1,
+            onStartDateChange: (date, formatedDate) => {
+                emit('date-change', date, formatedDate);
+                emit('update:date', date);
+            },
+            range: false,
+            startDate: props.date,
+            ...props,
+        });
+    },
+});
+
+export { CDatePicker };
+//# sourceMappingURL=CDatePicker.js.map

package/dist/esm/components/date-picker/CDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CDatePicker.js","sources":["../../../../src/components/date-picker/CDatePicker.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/date-picker/index.d.ts

@@ -0,0 +1,6 @@
+import { App } from 'vue';
+import { CDatePicker } from './CDatePicker';
+declare const CDatePickerPlugin: {
+    install: (app: App) => void;
+};
+export { CDatePickerPlugin, CDatePicker };

package/dist/esm/components/date-picker/index.js

@@ -0,0 +1,10 @@
+import { CDatePicker } from './CDatePicker.js';
+
+const CDatePickerPlugin = {
+    install: (app) => {
+        app.component(CDatePicker.name, CDatePicker);
+    },
+};
+
+export { CDatePicker, CDatePickerPlugin };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/date-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/date-picker/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,iBAAiB,GAAG;AACxB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;KAC7C;;;;;"}