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

package/src/components/index.ts

@@ -6,11 +6,14 @@ export * from './badge'
 export * from './breadcrumb'
 export * from './button'
 export * from './button-group'
+export * from './calendar'
 export * from './callout'
 export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './date-picker'
+export * from './date-range-picker'
 export * from './dropdown'
 export * from './element-cover'
 export * from './footer'
@@ -27,6 +30,7 @@ export * from './nav'
 export * from './navbar'
 export * from './offcanvas'
 export * from './pagination'
+export * from './picker'
 export * from './placeholder'
 export * from './progress'
 export * from './popover'
@@ -35,6 +39,7 @@ export * from './smart-table'
 export * from './spinner'
 export * from './table'
 export * from './tabs'
+export * from './time-picker'
 export * from './toast'
 export * from './tooltip'
 export * from './widgets'

package/src/components/picker/CPicker.ts

@@ -0,0 +1,220 @@
+import { defineComponent, h, PropType, ref, watch } from 'vue'
+
+import { CButton } from '../button/'
+import { CDropdown, CDropdownMenu, CDropdownToggle } from '../dropdown/'
+
+import { Color } from '../props'
+
+const CPicker = defineComponent({
+  name: 'CPicker',
+  props: {
+    ...CDropdown.props,
+    /**
+     * 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 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)
+      },
+    },
+    /**
+     * Set container type for the component.
+     */
+    container: {
+      type: String as PropType<'dropdown' | 'inline'>,
+      default: 'dropdown',
+    },
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer: Boolean,
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: Boolean,
+  },
+  emits: [
+    /**
+     * Callback fired when the cancel button has been clicked.
+     */
+    'cancel',
+    /**
+     * Callback fired when the confirm button has been clicked.
+     */
+    'confirm',
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { emit, slots }) {
+    const visible = ref(props.visible)
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+    )
+
+    const handleConfirm = () => {
+      emit('confirm')
+      visible.value = false
+    }
+
+    const Footer = () =>
+      h('div', { class: 'picker-footer' }, [
+        props.cancelButton &&
+          h(
+            CButton,
+            {
+              color: props.cancelButtonColor,
+              onClick: () => emit('cancel'),
+              size: props.cancelButtonSize,
+              variant: props.cancelButtonVariant,
+            },
+            /**
+             * @slot Location for the cancel button content.
+             */
+            () => (slots.cancelButton ? slots.cancelButton() : props.cancelButton),
+          ),
+        props.confirmButton &&
+          h(
+            CButton,
+            {
+              color: props.confirmButtonColor,
+              onClick: handleConfirm,
+              size: props.confirmButtonSize,
+              variant: props.confirmButtonVariant,
+            },
+            /**
+             * @slot Location for the confirm button content.
+             */
+            () => (slots.confirmButton ? slots.confirmButton() : props.confirmButton),
+          ),
+      ])
+
+    switch (props.container) {
+      case 'inline':
+        return () => h('div', { class: 'picker' }, slots.default && slots.default())
+      default:
+        return () =>
+          h(
+            CDropdown,
+            {
+              autoClose: 'outside',
+              class: 'picker',
+              onHide: () => {
+                visible.value = false
+                emit('hide')
+              },
+              onShow: () => {
+                visible.value = true
+                emit('show')
+              },
+              variant: 'dropdown',
+              visible: visible.value,
+            },
+            () => [
+              h(
+                CDropdownToggle,
+                {
+                  custom: true,
+                  disabled: visible.value || props.disabled,
+                },
+                {
+                  /**
+                   * @slot Location for the toggler element.
+                   */
+                  default: () => slots.toggler && slots.toggler(),
+                },
+              ),
+              h(CDropdownMenu, {}, () => [
+                slots.default && slots.default(),
+                props.footer && Footer(),
+              ]),
+            ],
+          )
+    }
+  },
+})
+export { CPicker }

package/src/components/picker/index.ts

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

package/src/components/time-picker/CTimePicker.ts

@@ -0,0 +1,410 @@
+import { defineComponent, h, ref, watch } from 'vue'
+
+import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form/'
+import { CPicker } from '../picker'
+import { CTimePickerRollCol } from './CTimePickerRollCol'
+
+import {
+  convert12hTo24h,
+  convertTimeToDate,
+  getAmPm,
+  getListOfHours,
+  getMinutesOrSeconds,
+  getSelectedHour,
+  getSelectedMinutes,
+  getSelectedSeconds,
+  isAmPm,
+  isValidTime,
+} from '../../utils/time'
+
+import { Color } from '../props'
+
+const CTimePicker = defineComponent({
+  name: 'CTimePicker',
+  props: {
+    ...CPicker.props,
+    /**
+     * 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 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,
+      defalut: 'default',
+    },
+    /**
+     * Specifies a short hint that is visible in the input.
+     */
+    placeholder: {
+      type: String,
+      default: 'Select time',
+    },
+    /**
+     * Size the component small or large.
+     *
+     * @values 'sm', 'lg'
+     */
+    size: {
+      type: String,
+      default: undefined,
+      validator: (value: string) => {
+        return ['sm', 'lg'].includes(value)
+      },
+    },
+    /**
+     * Initial selected time.
+     */
+    time: {
+      type: [Date, String],
+    },
+    /**
+     * Set the time picker variant to a roll or select.
+     *
+     * @values 'roll', 'select'
+     */
+    variant: {
+      type: String,
+      default: 'roll',
+      validator: (value: string) => {
+        return ['roll', 'select'].includes(value)
+      },
+    },
+  },
+  emits: [
+    /**
+     * Callback fired when the time changed.
+     */
+    'change',
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { emit, slots }) {
+    const date = ref<Date | null>(convertTimeToDate(props.time))
+    const initialDate = ref<Date | null>(null)
+    const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
+
+    watch(
+      () => props.time,
+      () => {
+        date.value = convertTimeToDate(props.time)
+      },
+    )
+
+    watch(date, () => {
+      if (date.value) {
+        ampm.value = getAmPm(new Date(date.value), props.locale)
+      }
+    })
+
+    const handleClear = (event: Event) => {
+      event.stopPropagation()
+      date.value = null
+    }
+
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+      const _date = date.value || new Date('1970-01-01')
+
+      if (set === 'toggle') {
+        if (value === 'am') {
+          _date.setHours(_date.getHours() - 12)
+        }
+        if (value === 'pm') {
+          _date.setHours(_date.getHours() + 12)
+        }
+      }
+
+      if (set === 'hours') {
+        if (isAmPm(props.locale)) {
+          _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
+        } else {
+          _date.setHours(parseInt(value))
+        }
+      }
+
+      if (set === 'minutes') {
+        _date.setMinutes(parseInt(value))
+      }
+
+      if (set === 'seconds') {
+        _date.setSeconds(parseInt(value))
+      }
+
+      date.value = new Date(_date)
+      emit('change', _date.toTimeString(), _date.toLocaleTimeString(), _date)
+    }
+
+    const InputGroup = () =>
+      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
+        h(CFormInput, {
+          disabled: props.disabled,
+          onInput: (event) => {
+            if (isValidTime(event.target.value)) {
+              date.value = convertTimeToDate(event.target.value)
+            }
+          },
+          placeholder: props.placeholder,
+          readonly: props.inputReadOnly,
+          value: date.value ? date.value.toLocaleTimeString(props.locale) : '',
+        }),
+        (props.indicator || props.cleaner) &&
+          h(CInputGroupText, {}, () => [
+            props.indicator &&
+              h(
+                'span',
+                {
+                  class: 'picker-input-group-indicator',
+                },
+                slots.indicator
+                  ? slots.indicator()
+                  : h('span', { class: 'picker-input-group-icon time-picker-input-icon' }),
+              ),
+            props.cleaner &&
+              h(
+                'span',
+                {
+                  class: 'picker-input-group-cleaner',
+                  onClick: (event: Event) => handleClear(event),
+                  role: 'button',
+                },
+                slots.cleaner
+                  ? slots.cleaner()
+                  : h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' }),
+              ),
+          ]),
+      ])
+
+    const TimePickerSelect = () => [
+      h('span', { class: 'time-picker-inline-icon' }),
+      h(CFormSelect, {
+        disabled: props.disabled,
+        options: getListOfHours(props.locale).map((option) => {
+          return {
+            value: option.value.toString(),
+            label: option.label,
+          }
+        }),
+        onChange: (event) => handleTimeChange('hours', event.target.value),
+        ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
+      }),
+      ':',
+      h(CFormSelect, {
+        disabled: props.disabled,
+        options: Array.from({ length: 60 }, (_, i) => {
+          return {
+            value: i.toString(),
+            label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
+          }
+        }),
+        onChange: (event) => handleTimeChange('minutes', event.target.value),
+        ...(date.value && { value: getSelectedMinutes(date.value) }),
+      }),
+      ':',
+      h(CFormSelect, {
+        disabled: props.disabled,
+        options: Array.from({ length: 60 }, (_, i) => {
+          return {
+            value: i.toString(),
+            label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
+          }
+        }),
+        onChange: (event) => handleTimeChange('seconds', event.target.value),
+        ...(date.value && { value: getSelectedSeconds(date.value) }),
+      }),
+      isAmPm(props.locale) &&
+        h(CFormSelect, {
+          disabled: props.disabled,
+          options: [
+            { value: 'am', label: 'AM' },
+            { value: 'pm', label: 'PM' },
+          ],
+          onChange: (event) => handleTimeChange('toggle', event.target.value),
+          value: ampm.value,
+        }),
+    ]
+
+    const TimePickerRoll = () => [
+      h(CTimePickerRollCol, {
+        elements: getListOfHours(props.locale),
+        onClick: (index: number) => handleTimeChange('hours', index.toString()),
+        selected: getSelectedHour(date.value, props.locale),
+      }),
+      h(CTimePickerRollCol, {
+        elements: getMinutesOrSeconds(props.locale),
+        onClick: (index: number) => handleTimeChange('minutes', index.toString()),
+        selected: getSelectedMinutes(date.value),
+      }),
+      h(CTimePickerRollCol, {
+        elements: getMinutesOrSeconds(props.locale),
+        onClick: (index: number) => handleTimeChange('seconds', index.toString()),
+        selected: getSelectedSeconds(date.value),
+      }),
+      isAmPm(props.locale) &&
+        h(CTimePickerRollCol, {
+          elements: [
+            { value: 'am', label: 'AM' },
+            { value: 'pm', label: 'PM' },
+          ],
+          onClick: (value: string) => handleTimeChange('toggle', value),
+          selected: ampm.value,
+        }),
+    ]
+
+    return () =>
+      h(
+        CPicker,
+        {
+          cancelButton: props.cancelButton,
+          cancelButtonColor: props.cancelButtonColor,
+          cancelButtonSize: props.cancelButtonSize,
+          cancelButtonVariant: props.cancelButtonVariant,
+          class: 'time-picker',
+          confirmButton: props.confirmButton,
+          confirmButtonColor: props.confirmButtonColor,
+          confirmButtonSize: props.confirmButtonSize,
+          confirmButtonVariant: props.confirmButtonVariant,
+          container: props.container,
+          disabled: props.disabled,
+          footer: true,
+          onCancel: () => {
+            if (initialDate.value) {
+              date.value = new Date(initialDate.value)
+            }
+          },
+          onHide: () => {
+            emit('hide')
+          },
+          onShow: () => {
+            if (date.value) {
+              initialDate.value = new Date(date.value)
+            }
+
+            emit('show')
+          },
+        },
+        {
+          ...(slots.cancelButton && {
+            cancelButton: () => slots.cancelButton && slots.cancelButton(),
+          }),
+          ...(slots.confirmButton && {
+            confirmButton: () => slots.confirmButton && slots.confirmButton(),
+          }),
+          toggler: () => InputGroup(),
+          default: () =>
+            h(
+              'div',
+              {
+                class: [
+                  'time-picker-body',
+                  {
+                    ['time-picker-roll']: props.variant === 'roll',
+                  },
+                ],
+              },
+              props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
+            ),
+        },
+      )
+  },
+})
+export { CTimePicker }