vuetify 3.3.2 → 3.3.4

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

@@ -0,0 +1 @@
+{"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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"}

package/lib/labs/VDateRangePicker/VDateRangePickerHeader.sass

@@ -0,0 +1,39 @@
+.v-date-range-picker-header
+  width: 100%
+  height: 128px
+
+.v-date-range-picker-header--calendar
+  padding-left: 12px
+  padding-right: 12px
+  padding-bottom: 24px
+
+  .v-date-range-picker-header__wrapper
+    margin-left: 60px
+
+.v-date-range-picker-header--keyboard
+  padding-left: 24px
+  padding-right: 24px
+  padding-bottom: 20px
+  padding-top: 24px
+
+  .v-date-range-picker-header__title
+    margin-bottom: 32px
+
+.v-date-range-picker-header__buttons
+  display: flex
+  justify-content: space-between
+  align-items: center
+
+.v-date-range-picker-header__wrapper
+  display: flex
+  flex-direction: column
+
+.v-date-range-picker-header__title
+  text-transform: uppercase
+  font-size: 0.7rem
+
+.v-date-range-picker-header__text
+  font-size: 1.7rem
+  display: flex
+  align-items: center
+  justify-content: space-between

package/lib/labs/VDateRangePicker/VDateRangePickerMonth.mjs

@@ -0,0 +1,61 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
+// Styles
+import "./VDateRangePickerMonth.css";
+
+// Components
+import { makeVDatePickerMonthProps, VDatePickerMonth } from "../VDatePicker/VDatePickerMonth.mjs"; // Composables
+import { useDatePicker } from "../VDatePicker/composables.mjs"; // Utilities
+import { computed, onMounted, ref } from 'vue';
+import { useDate } from "../date/index.mjs";
+import { createRange, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
+export const makeVDateRangePickerMonthProps = propsFactory({
+  ...makeVDatePickerMonthProps({
+    hideWeekdays: true,
+    multiple: true
+  })
+}, 'VDateRangePickerMonth');
+export const VDateRangePickerMonth = genericComponent()({
+  name: 'VDateRangePickerMonth',
+  props: makeVDateRangePickerMonthProps(),
+  emits: {
+    'update:modelValue': date => true
+  },
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const adapter = useDate();
+    const {
+      hasScrolled
+    } = useDatePicker();
+    const months = computed(() => {
+      const range = createRange(6, -3);
+      return range.map(offset => adapter.addMonths(props.displayDate, offset));
+    });
+    const monthRef = ref();
+    onMounted(() => {
+      monthRef.value?.$el.scrollIntoView({
+        block: 'center'
+      });
+    });
+    function handleScroll() {
+      hasScrolled.value = true;
+    }
+    useRender(() => {
+      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props);
+      return _createVNode("div", {
+        "class": "v-date-range-picker-month",
+        "onScrollPassive": handleScroll
+      }, [months.value.map(month => _createVNode(_Fragment, null, [_createVNode("div", {
+        "class": "v-date-range-picker-month__header"
+      }, [adapter.format(month, 'monthAndYear')]), _createVNode(VDatePickerMonth, _mergeProps({
+        "ref": adapter.isSameMonth(month, props.displayDate) ? monthRef : undefined
+      }, datePickerMonthProps, {
+        "modelValue": props.modelValue,
+        "onUpdate:modelValue": modelValue => emit('update:modelValue', modelValue),
+        "displayDate": month
+      }), null)]))]);
+    });
+  }
+});
+//# sourceMappingURL=VDateRangePickerMonth.mjs.map

package/lib/labs/VDateRangePicker/VDateRangePickerMonth.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VDateRangePickerMonth.mjs","names":["makeVDatePickerMonthProps","VDatePickerMonth","useDatePicker","computed","onMounted","ref","useDate","createRange","genericComponent","propsFactory","useRender","makeVDateRangePickerMonthProps","hideWeekdays","multiple","VDateRangePickerMonth","name","props","emits","date","setup","_ref","emit","adapter","hasScrolled","months","range","map","offset","addMonths","displayDate","monthRef","value","$el","scrollIntoView","block","handleScroll","datePickerMonthProps","filterProps","_createVNode","month","_Fragment","format","_mergeProps","isSameMonth","undefined","modelValue"],"sources":["../../../src/labs/VDateRangePicker/VDateRangePickerMonth.tsx"],"sourcesContent":["// Styles\nimport './VDateRangePickerMonth.sass'\n\n// Components\nimport { makeVDatePickerMonthProps, VDatePickerMonth } from '../VDatePicker/VDatePickerMonth'\n\n// Composables\nimport { useDatePicker } from '../VDatePicker/composables'\n\n// Utilities\nimport { computed, onMounted, ref } from 'vue'\nimport { useDate } from '@/labs/date'\nimport { createRange, genericComponent, propsFactory, useRender } from '@/util'\n\nexport const makeVDateRangePickerMonthProps = propsFactory({\n  ...makeVDatePickerMonthProps({\n    hideWeekdays: true,\n    multiple: true,\n  }),\n}, 'VDateRangePickerMonth')\n\nexport const VDateRangePickerMonth = genericComponent()({\n  name: 'VDateRangePickerMonth',\n\n  props: makeVDateRangePickerMonthProps(),\n\n  emits: {\n    'update:modelValue': (date: any) => true,\n  },\n\n  setup (props, { emit }) {\n    const adapter = useDate()\n    const { hasScrolled } = useDatePicker()\n\n    const months = computed(() => {\n      const range = createRange(6, -3)\n\n      return range.map(offset => adapter.addMonths(props.displayDate, offset))\n    })\n\n    const monthRef = ref()\n    onMounted(() => {\n      monthRef.value?.$el.scrollIntoView({ block: 'center' })\n    })\n\n    function handleScroll () {\n      hasScrolled.value = true\n    }\n\n    useRender(() => {\n      const [datePickerMonthProps] = VDatePickerMonth.filterProps(props)\n\n      return (\n        <div\n          class=\"v-date-range-picker-month\"\n          onScrollPassive={ handleScroll }\n        >\n          { months.value.map(month => (\n            <>\n              <div class=\"v-date-range-picker-month__header\">{ adapter.format(month, 'monthAndYear') }</div>\n              <VDatePickerMonth\n                ref={ adapter.isSameMonth(month, props.displayDate) ? monthRef : undefined }\n                { ...datePickerMonthProps }\n                modelValue={ props.modelValue }\n                onUpdate:modelValue={ modelValue => emit('update:modelValue', modelValue) }\n                displayDate={ month }\n              />\n            </>\n          ))}\n        </div>\n      )\n    })\n  },\n})\n\nexport type VDateRangePickerMonth = InstanceType<typeof VDateRangePickerMonth>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,yBAAyB,EAAEC,gBAAgB,+CAEpD;AAAA,SACSC,aAAa,0CAEtB;AACA,SAASC,QAAQ,EAAEC,SAAS,EAAEC,GAAG,QAAQ,KAAK;AAAA,SACrCC,OAAO;AAAA,SACPC,WAAW,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAE/D,OAAO,MAAMC,8BAA8B,GAAGF,YAAY,CAAC;EACzD,GAAGT,yBAAyB,CAAC;IAC3BY,YAAY,EAAE,IAAI;IAClBC,QAAQ,EAAE;EACZ,CAAC;AACH,CAAC,EAAE,uBAAuB,CAAC;AAE3B,OAAO,MAAMC,qBAAqB,GAAGN,gBAAgB,EAAE,CAAC;EACtDO,IAAI,EAAE,uBAAuB;EAE7BC,KAAK,EAAEL,8BAA8B,EAAE;EAEvCM,KAAK,EAAE;IACL,mBAAmB,EAAGC,IAAS,IAAK;EACtC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAY;IAAA,IAAV;MAAEC;IAAK,CAAC,GAAAD,IAAA;IACpB,MAAME,OAAO,GAAGhB,OAAO,EAAE;IACzB,MAAM;MAAEiB;IAAY,CAAC,GAAGrB,aAAa,EAAE;IAEvC,MAAMsB,MAAM,GAAGrB,QAAQ,CAAC,MAAM;MAC5B,MAAMsB,KAAK,GAAGlB,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;MAEhC,OAAOkB,KAAK,CAACC,GAAG,CAACC,MAAM,IAAIL,OAAO,CAACM,SAAS,CAACZ,KAAK,CAACa,WAAW,EAAEF,MAAM,CAAC,CAAC;IAC1E,CAAC,CAAC;IAEF,MAAMG,QAAQ,GAAGzB,GAAG,EAAE;IACtBD,SAAS,CAAC,MAAM;MACd0B,QAAQ,CAACC,KAAK,EAAEC,GAAG,CAACC,cAAc,CAAC;QAAEC,KAAK,EAAE;MAAS,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,SAASC,YAAYA,CAAA,EAAI;MACvBZ,WAAW,CAACQ,KAAK,GAAG,IAAI;IAC1B;IAEArB,SAAS,CAAC,MAAM;MACd,MAAM,CAAC0B,oBAAoB,CAAC,GAAGnC,gBAAgB,CAACoC,WAAW,CAACrB,KAAK,CAAC;MAElE,OAAAsB,YAAA;QAAA,SAEU,2BAA2B;QAAA,mBACfH;MAAY,IAE5BX,MAAM,CAACO,KAAK,CAACL,GAAG,CAACa,KAAK,IAAAD,YAAA,CAAAE,SAAA,SAAAF,YAAA;QAAA,SAET;MAAmC,IAAGhB,OAAO,CAACmB,MAAM,CAACF,KAAK,EAAE,cAAc,CAAC,IAAAD,YAAA,CAAArC,gBAAA,EAAAyC,WAAA;QAAA,OAE9EpB,OAAO,CAACqB,WAAW,CAACJ,KAAK,EAAEvB,KAAK,CAACa,WAAW,CAAC,GAAGC,QAAQ,GAAGc;MAAS,GACrER,oBAAoB;QAAA,cACZpB,KAAK,CAAC6B,UAAU;QAAA,uBACPA,UAAU,IAAIxB,IAAI,CAAC,mBAAmB,EAAEwB,UAAU,CAAC;QAAA,eAC3DN;MAAK,WAGxB,CAAC;IAGR,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/labs/VDateRangePicker/VDateRangePickerMonth.sass

@@ -0,0 +1,12 @@
+.v-date-range-picker-month
+  overflow-y: scroll
+  height: 100%
+
+.v-date-range-picker-month__header
+  height: 48px
+  margin-left: 48px
+  display: flex
+  align-items: center
+  font-size: 0.9rem
+  font-weight: bold
+  color: grey