@coreui/vue-pro 4.2.0 → 4.3.0-beta.0

package/src/components/date-picker/CDatePicker.ts

@@ -0,0 +1,243 @@
+import { defineComponent, h, PropType } from 'vue'
+
+import { CDateRangePicker } from '../date-range-picker/'
+
+import { Color } from '../props'
+
+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: string) => {
+        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: string) => {
+        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: string) => {
+        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: string) => {
+        return ['ghost', 'outline'].includes(value)
+      },
+    },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * Specify the list of dates that cannot be selected.
+     */
+    disabledDates: {
+      type: Array as PropType<Date[] | Date[][]>,
+    },
+    /**
+     * 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,
+     * - 7 - Sunday
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: Boolean,
+    /**
+     * Toggle visibility or set the content of the input indicator.
+     */
+    indicator: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * Toggle the readonly state for the component.
+     */
+    inputReadOnly: Boolean,
+    /**
+     * 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,
+    },
+    /**
+     * Specifies a short hint that is visible in the input.
+     */
+    placeholder: {
+      type: String,
+      default: 'Select date',
+    },
+    /**
+     * Size the component small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      required: false,
+      validator: (value: string) => {
+        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: [Number, String],
+      default: 2,
+      validator: (value: string | number) => {
+        if (typeof value === 'string') {
+          return ['long', 'narrow', 'short'].includes(value)
+        }
+        if (typeof value === 'number') {
+          return true
+        }
+        return false
+      },
+    },
+  },
+  emit: [
+    /**
+     * Callback fired when the date changed.
+     */
+    'date-change',
+  ],
+  setup(props, { emit }) {
+    return () =>
+      h(CDateRangePicker, {
+        calendars: 1,
+        onStartDateChange: (date: Date) => emit('date-change', date),
+        range: false,
+        startDate: props.date,
+        ...props,
+        // cleaner: props.cleaner,
+        // disabled: props.disabled,
+        // indicator: props.indicator,
+        // inputReadOnly: props.inputReadOnly,
+        // locale: props.locale,
+        // placeholder: props.placeholder,
+        // size: props.size,
+        // timepicker: props.timepicker,
+      })
+  },
+})
+
+export { CDatePicker }

package/src/components/date-picker/index.ts

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