vuetify/lib/labs/VDateRangePicker/VDateRangePickerHeader.mjs.map

Vue Material Component Framework

{"version":3,"file":"VDateRangePickerHeader.mjs","names":["VBtn","useBackgroundColor","useLocale","useDate","computed","genericComponent","propsFactory","useRender","makeVDateRangePickerHeaderProps","color","String","title","header","keyboardIcon","type","default","calendarIcon","closeIcon","showInputSwitch","Boolean","inputMode","modelValue","displayDate","range","VDateRangePickerHeader","name","props","emits","cancel","save","input","date","setup","_ref","emit","t","adapter","backgroundColorClasses","backgroundColorStyles","headerText","length","format","map","join","titleText","handleHeaderClick","_createVNode","value","onClick","_createTextVNode"],"sources":["../../../src/labs/VDateRangePicker/VDateRangePickerHeader.tsx"],"sourcesContent":["// Styles\nimport './VDateRangePickerHeader.sass'\n\n// Components\nimport { VBtn } from '../../components/VBtn'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useLocale } from '@/composables/locale'\nimport { useDate } from '@/labs/date'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVDateRangePickerHeaderProps = propsFactory({\n  color: String,\n  title: String,\n  header: String,\n  keyboardIcon: {\n    type: String,\n    default: '$edit',\n  },\n  calendarIcon: {\n    type: String,\n    default: '$calendar',\n  },\n  closeIcon: {\n    type: String,\n    default: '$close',\n  },\n  showInputSwitch: Boolean,\n  inputMode: String,\n  modelValue: null,\n  displayDate: null,\n  range: null,\n}, 'VDateRangePickerHeader')\n\nexport const VDateRangePickerHeader = genericComponent()({\n  name: 'VDateRangePickerHeader',\n\n  props: makeVDateRangePickerHeaderProps(),\n\n  emits: {\n    cancel: () => true,\n    save: () => true,\n    'update:inputMode': (input: string) => true,\n    'update:displayDate': (date: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const { t } = useLocale()\n    const adapter = useDate()\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(props, 'color')\n\n    const headerText = computed(() => {\n      if (props.header) return props.header\n\n      if (!props.modelValue.length) return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}header.placeholder`)\n\n      if (props.modelValue.length === 1) return adapter.format(props.modelValue[0], 'normalDateWithWeekday')\n\n      return props.modelValue.map((date: any) => adapter.format(date, 'shortDate')).join(' - ')\n    })\n\n    const titleText = computed(() => {\n      if (props.title) return props.title\n\n      if (!props.modelValue.length) return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}title.placeholder`)\n\n      return t(`$vuetify.datePicker.${props.range ? 'range.' : ''}title.selected`)\n    })\n\n    function handleHeaderClick () {\n      if (!props.modelValue.length) return\n\n      const date = props.modelValue[0]\n\n      emit('update:displayDate', date)\n    }\n\n    useRender(() => (\n      <div\n        class={[\n          'v-date-range-picker-header',\n          backgroundColorClasses.value,\n          `v-date-range-picker-header--${props.inputMode}`,\n        ]}\n        style={ backgroundColorStyles.value }\n      >\n        { props.inputMode === 'calendar' && (\n          <div key=\"calendar-buttons\" class=\"v-date-range-picker-header__buttons\">\n            <VBtn\n              variant=\"text\"\n              icon={ props.closeIcon }\n              onClick={ () => emit('cancel') }\n            />\n            <VBtn\n              variant=\"text\"\n              onClick={ () => emit('save') }\n            >\n              Save\n            </VBtn>\n          </div>\n        )}\n        <div class=\"v-date-range-picker-header__wrapper\">\n          <div class=\"v-date-range-picker-header__title\">\n            { titleText.value }\n          </div>\n          <div class=\"v-date-range-picker-header__text\">\n            <div\n              class=\"v-date-range-picker-header__date\"\n              onClick={ handleHeaderClick }\n            >\n              { headerText.value }\n            </div>\n            <VBtn\n              variant=\"text\"\n              icon={ props.inputMode === 'keyboard' ? props.calendarIcon : props.keyboardIcon }\n              onClick={ () => emit('update:inputMode', props.inputMode === 'keyboard' ? 'calendar' : 'keyboard') }\n            />\n          </div>\n        </div>\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VDateRangePickerHeader = InstanceType<typeof VDateRangePickerHeader>\n"],"mappings":"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"}