@onereach/ui-components 3.0.4-beta.2497.0 → 3.0.4-beta.2500.0

package/dist/esm/v3/index.js

@@ -18,7 +18,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrConfirm } from './OrConfirm-f408faf5.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-ecb8c576.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-30749526.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-a8247a84.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-46b452b3.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TextareaSize } from './OrInputBox-901887a1.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "3.0.4-beta.2497.0",
+  "version": "3.0.4-beta.2500.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.37.4-beta.2497.0",
+    "@onereach/styles": "^2.37.4-beta.2500.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",

package/src/components/or-date-time-picker-v3/OrDateTimePicker.stories3.ts

@@ -27,6 +27,10 @@ export default {
       control: { type: 'text' },
     },
 
+    filter: {
+      table: { disable: true },
+    },
+
     size: {
       control: { type: 'select' },
       options: Object.values(DateTimePickerSize),

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -97,8 +97,14 @@
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
-        <OrDateTimePickerMonthSelect v-model="draftModelValue" />
-        <OrDateTimePickerDaySelect v-model="draftModelValue" />
+        <OrDateTimePickerMonthSelect
+          v-model="draftModelValue"
+          :filter="filter"
+        />
+        <OrDateTimePickerDaySelect
+          v-model="draftModelValue"
+          :filter="filter"
+        />
 
         <OrDateTimePickerPopoverFooter
           @resolve="proxyModelValue = draftModelValue; datePopover.close()"
@@ -122,7 +128,10 @@
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
-        <OrDateTimePickerTimeSelect v-model="draftModelValue" />
+        <OrDateTimePickerTimeSelect
+          v-model="draftModelValue"
+          :filter="filter"
+        />
 
         <OrDateTimePickerPopoverFooter
           @resolve="proxyModelValue = draftModelValue; timePopover.close()"
@@ -213,6 +222,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<DateTimePickerSize>,
       default: DateTimePickerSize.M,

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/OrDateTimePickerDaySelect.vue

@@ -10,6 +10,7 @@
         :class="buttonGroupItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :disabled="filter && !filter(value)"
         @click.stop="proxyModelValue = value"
       >
         {{ formatDay(value) }}
@@ -19,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { useDefaultDate } from '../../hooks/useDefaultDate';
 import { useDefaultHours } from '../../hooks/useDefaultHours';
@@ -45,6 +46,11 @@ export default defineComponent({
       type: Date,
       default: undefined,
     },
+
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
   },
 
   emits: [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -35,6 +35,7 @@
           v-for="value in yearOptions"
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
+          :disabled="filter && !filter(value)"
           @click.stop="proxyModelValue = value; yearMenu.close()"
         >
           {{ formatYear(value) }}
@@ -49,6 +50,7 @@
           v-for="value in monthOptions"
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
+          :disabled="filter && !filter(value)"
           @click.stop="proxyModelValue = value; monthMenu.close()"
         >
           {{ formatMonth(value) }}
@@ -64,7 +66,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
@@ -98,6 +100,11 @@ export default defineComponent({
       type: Date,
       default: undefined,
     },
+
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
   },
 
   emits: [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -10,6 +10,7 @@
         :class="buttonGroupItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :disabled="filter && !filter(value)"
         @click.stop="proxyModelValue = value"
       >
         {{ formatHours(value) }}
@@ -25,6 +26,7 @@
         :class="buttonGroupItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :disabled="filter && !filter(value)"
         @click.stop="proxyModelValue = value"
       >
         {{ formatMinutes(value) }}
@@ -34,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { useDefaultDate } from '../../hooks/useDefaultDate';
 import { useDefaultHours } from '../../hooks/useDefaultHours';
@@ -60,6 +62,11 @@ export default defineComponent({
       type: Date,
       default: undefined,
     },
+
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
   },
 
   emits: [