@bridge-ui/vue 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ai/skills/bridge-ui-components/SKILL.md +5 -3
- package/ai/skills/bridge-ui-forms/SKILL.md +4 -2
- package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts +0 -1
- package/dist/Components/Autocomplete/composables/useAutocomplete.js +0 -1
- package/dist/Components/Calendar/Calendar.vue_vue_type_script_setup_true_lang.js +0 -1
- package/dist/Components/Calendar/calendar.types.d.ts +1 -21
- package/dist/Components/Calendar/composables/useCalendar.d.ts +1 -2
- package/dist/Components/Calendar/composables/useCalendar.js +97 -97
- package/dist/Components/Calendar/index.d.ts +1 -1
- package/dist/Components/CalendarDate/CalendarDate.vue_vue_type_script_setup_true_lang.js +0 -1
- package/dist/Components/CalendarDate/calendarDate.types.d.ts +1 -21
- package/dist/Components/CalendarDate/composables/useCalendarDate.d.ts +1 -1
- package/dist/Components/CalendarDate/composables/useCalendarDate.js +73 -73
- package/dist/Components/CalendarDate/index.d.ts +1 -1
- package/dist/Components/CalendarMonth/CalendarMonth.vue_vue_type_script_setup_true_lang.js +0 -1
- package/dist/Components/CalendarMonth/calendarMonth.types.d.ts +1 -17
- package/dist/Components/CalendarMonth/composables/useCalendarMonth.d.ts +1 -1
- package/dist/Components/CalendarMonth/composables/useCalendarMonth.js +25 -25
- package/dist/Components/CalendarMonth/index.d.ts +1 -1
- package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js +0 -1
- package/dist/Components/CalendarRange/calendarRange.types.d.ts +1 -21
- package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts +1 -2
- package/dist/Components/CalendarRange/composables/useCalendarRange.js +111 -112
- package/dist/Components/CalendarRange/index.d.ts +1 -1
- package/dist/Components/CalendarYear/CalendarYear.vue_vue_type_script_setup_true_lang.js +0 -1
- package/dist/Components/CalendarYear/calendarYear.types.d.ts +1 -17
- package/dist/Components/CalendarYear/composables/useCalendarYear.d.ts +1 -1
- package/dist/Components/CalendarYear/composables/useCalendarYear.js +27 -27
- package/dist/Components/CalendarYear/index.d.ts +1 -1
- package/dist/Components/ColorField/ColorField.js +5 -0
- package/dist/Components/ColorField/ColorField.vue.d.ts +38 -0
- package/dist/Components/ColorField/ColorField.vue_vue_type_script_setup_true_lang.js +149 -0
- package/dist/Components/ColorField/colorField.types.d.ts +179 -0
- package/dist/Components/ColorField/composables/useColorField.d.ts +748 -0
- package/dist/Components/ColorField/composables/useColorField.js +182 -0
- package/dist/Components/ColorField/index.d.ts +3 -0
- package/dist/Components/ColorField/index.js +3 -0
- package/dist/Components/ColorPicker/ColorPicker.js +5 -0
- package/dist/Components/ColorPicker/ColorPicker.vue.d.ts +21 -0
- package/dist/Components/ColorPicker/ColorPicker.vue_vue_type_script_setup_true_lang.js +91 -0
- package/dist/Components/ColorPicker/colorPicker.types.d.ts +200 -0
- package/dist/Components/ColorPicker/composables/useColorPicker.d.ts +111 -0
- package/dist/Components/ColorPicker/composables/useColorPicker.js +253 -0
- package/dist/Components/ColorPicker/index.d.ts +3 -0
- package/dist/Components/ColorPicker/index.js +3 -0
- package/dist/Components/DatePicker/DatePicker.vue_vue_type_script_setup_true_lang.js +4 -7
- package/dist/Components/DatePicker/composables/useDatePicker.d.ts +1 -6
- package/dist/Components/DatePicker/composables/useDatePicker.js +30 -9
- package/dist/Components/DatePicker/datePicker.types.d.ts +1 -29
- package/dist/Components/DatePicker/index.d.ts +1 -1
- package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js +4 -7
- package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts +1 -6
- package/dist/Components/DateRangePicker/composables/useDateRangePicker.js +3 -9
- package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts +1 -29
- package/dist/Components/DateRangePicker/index.d.ts +1 -1
- package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js +16 -21
- package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts +1 -10
- package/dist/Components/DateTimePicker/composables/useDateTimePicker.js +30 -39
- package/dist/Components/DateTimePicker/dateTimePicker.types.d.ts +1 -36
- package/dist/Components/DateTimePicker/index.d.ts +1 -1
- package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js +20 -27
- package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts +1 -10
- package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js +34 -43
- package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts +1 -36
- package/dist/Components/DateTimeRangePicker/index.d.ts +1 -1
- package/dist/Components/FieldOverlay/composables/useFieldOverlay.js +17 -10
- package/dist/Components/FieldOverlay/fieldOverlay.types.d.ts +3 -0
- package/dist/Components/FormField/composables/useFormField.d.ts +1 -1
- package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js +1 -2
- package/dist/Components/Listbox/composables/useListbox.d.ts +1 -10
- package/dist/Components/Listbox/composables/useListbox.js +50 -51
- package/dist/Components/Listbox/index.d.ts +0 -1
- package/dist/Components/Listbox/listbox.types.d.ts +0 -6
- package/dist/Components/Select/composables/useSelect.d.ts +0 -1
- package/dist/Components/Select/composables/useSelect.js +0 -1
- package/dist/Components/Step/Step.js +5 -0
- package/dist/Components/Step/Step.vue.d.ts +11 -0
- package/dist/Components/Step/Step.vue_vue_type_script_setup_true_lang.js +32 -0
- package/dist/Components/Step/composables/useStep.d.ts +56 -0
- package/dist/Components/Step/composables/useStep.js +162 -0
- package/dist/Components/Step/index.d.ts +3 -0
- package/dist/Components/Step/index.js +3 -0
- package/dist/Components/Step/step.types.d.ts +160 -0
- package/dist/Components/Stepper/Stepper.js +5 -0
- package/dist/Components/Stepper/Stepper.vue.d.ts +24 -0
- package/dist/Components/Stepper/Stepper.vue_vue_type_script_setup_true_lang.js +33 -0
- package/dist/Components/Stepper/composables/useStepper.d.ts +18 -0
- package/dist/Components/Stepper/composables/useStepper.js +91 -0
- package/dist/Components/Stepper/index.d.ts +4 -0
- package/dist/Components/Stepper/index.js +4 -0
- package/dist/Components/Stepper/stepper.types.d.ts +93 -0
- package/dist/Components/Stepper/stepperInjectionKey.d.ts +77 -0
- package/dist/Components/Stepper/stepperInjectionKey.js +4 -0
- package/dist/Components/TimePanel/TimePanel.vue_vue_type_script_setup_true_lang.js +0 -1
- package/dist/Components/TimePanel/composables/useTimePanel.d.ts +1 -1
- package/dist/Components/TimePanel/composables/useTimePanel.js +75 -75
- package/dist/Components/TimePanel/index.d.ts +1 -1
- package/dist/Components/TimePanel/timePanel.types.d.ts +1 -17
- package/dist/Components/TimePicker/TimePicker.vue_vue_type_script_setup_true_lang.js +10 -13
- package/dist/Components/TimePicker/composables/useTimePicker.d.ts +1 -5
- package/dist/Components/TimePicker/composables/useTimePicker.js +12 -17
- package/dist/Components/TimePicker/index.d.ts +1 -1
- package/dist/Components/TimePicker/timePicker.types.d.ts +1 -24
- package/dist/Components/TimeRangePicker/TimeRangePicker.vue_vue_type_script_setup_true_lang.js +13 -18
- package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.d.ts +1 -5
- package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js +27 -32
- package/dist/Components/TimeRangePicker/index.d.ts +1 -1
- package/dist/Components/TimeRangePicker/timeRangePicker.types.d.ts +1 -24
- package/dist/index.d.ts +20 -12
- package/dist/index.js +88 -80
- package/docs/README.md +3 -0
- package/docs/components/Autocomplete.md +1 -1
- package/docs/components/BridgeUIProvider.md +9 -11
- package/docs/components/Calendar.md +2 -1
- package/docs/components/CalendarDate.md +2 -1
- package/docs/components/CalendarMonth.md +2 -1
- package/docs/components/CalendarRange.md +2 -1
- package/docs/components/CalendarYear.md +2 -1
- package/docs/components/ColorField.md +93 -0
- package/docs/components/ColorPicker.md +78 -0
- package/docs/components/DatePicker.md +2 -1
- package/docs/components/DateRangePicker.md +2 -1
- package/docs/components/DateTimePicker.md +2 -1
- package/docs/components/DateTimeRangePicker.md +2 -1
- package/docs/components/FieldOverlay.md +1 -1
- package/docs/components/Select.md +1 -1
- package/docs/components/Stepper.md +60 -0
- package/docs/components/TimePanel.md +2 -1
- package/docs/components/TimePicker.md +2 -1
- package/docs/components/TimeRangePicker.md +2 -1
- package/docs/examples/icon-fontawesome.ts +2 -0
- package/docs/examples/icon-heroicons.ts +2 -0
- package/docs/examples/icon-lucide.ts +2 -0
- package/docs/examples/icon-phosphor.ts +2 -0
- package/docs/examples/icon-tabler.ts +2 -0
- package/package.json +2 -2
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
name: bridge-ui-components
|
|
3
3
|
description: >-
|
|
4
4
|
Use Bridge UI Vue components — Button, Avatar, Card, Alert, Accordion, Badge, Icon,
|
|
5
|
-
Link, List, Tabs, Spinner, Skeleton, Progress, TextField, Select,
|
|
5
|
+
Link, List, Tabs, Spinner, Skeleton, Progress, Stepper, TextField, Select,
|
|
6
6
|
Autocomplete, DateField, DatePicker, DateRangeField, DateRangePicker,
|
|
7
|
-
TimeField, TimePicker, DateTimeField, DateTimePicker,
|
|
8
|
-
slots. Use when building UI with Bridge components.
|
|
7
|
+
TimeField, TimePicker, DateTimeField, DateTimePicker, ColorField, ColorPicker,
|
|
8
|
+
classes, customProps, slots. Use when building UI with Bridge components.
|
|
9
9
|
---
|
|
10
10
|
|
|
11
11
|
# Bridge UI (Vue) — components
|
|
@@ -24,6 +24,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
|
|
|
24
24
|
| Badge | `.ai/docs/components/Badge.md` |
|
|
25
25
|
| Alert | `.ai/docs/components/Alert.md` |
|
|
26
26
|
| Accordion | `.ai/docs/components/Accordion.md` |
|
|
27
|
+
| Stepper | `.ai/docs/components/Stepper.md` |
|
|
27
28
|
| Icon | `.ai/docs/components/Icon.md` |
|
|
28
29
|
| Lists | `.ai/docs/components/List.md` |
|
|
29
30
|
| Tabs | `.ai/docs/components/Tabs.md` |
|
|
@@ -35,6 +36,7 @@ In templates, use kebab-case attrs (`start-icon`, `custom-props`, `error-message
|
|
|
35
36
|
| Time range | `.ai/docs/components/TimeRangeField.md`, `TimeRangePicker.md` |
|
|
36
37
|
| Date-time | `.ai/docs/components/DateTimeField.md`, `DateTimePicker.md` |
|
|
37
38
|
| Date-time range | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
|
|
39
|
+
| Color | `.ai/docs/components/ColorField.md`, `ColorPicker.md` |
|
|
38
40
|
| Spinner / skeleton / progress | `.ai/docs/components/Spinner.md`, `Skeleton.md`, `Progress.md` |
|
|
39
41
|
| Index | `.ai/docs/README.md` |
|
|
40
42
|
|
|
@@ -5,7 +5,8 @@ description: >-
|
|
|
5
5
|
NumberField, OtpField, Select, Autocomplete, Slider, Checkbox, Radio,
|
|
6
6
|
Switch, DateField, DatePicker, DateRangeField, DateRangePicker, TimeField,
|
|
7
7
|
TimePicker, TimeRangeField, TimeRangePicker, DateTimeField, DateTimePicker,
|
|
8
|
-
DateTimeRangeField, DateTimeRangePicker,
|
|
8
|
+
DateTimeRangeField, DateTimeRangePicker, ColorField, ColorPicker, FormField,
|
|
9
|
+
FormControl, BaseField.
|
|
9
10
|
Use when wiring inputs, date/time pickers, validation chrome, or select.
|
|
10
11
|
---
|
|
11
12
|
|
|
@@ -34,6 +35,7 @@ Controlled fields: **`v-model` / `modelValue`**. Never React `value`/`onChange`.
|
|
|
34
35
|
| Time range | `.ai/docs/components/TimeRangeField.md`, `TimeRangePicker.md` |
|
|
35
36
|
| Date-time | `.ai/docs/components/DateTimeField.md`, `DateTimePicker.md` |
|
|
36
37
|
| Date-time range | `.ai/docs/components/DateTimeRangeField.md`, `DateTimeRangePicker.md` |
|
|
38
|
+
| Color | `.ai/docs/components/ColorField.md`, `ColorPicker.md` |
|
|
37
39
|
| Input chrome | `.ai/docs/components/FormField.md` |
|
|
38
40
|
| Toggle row chrome | `.ai/docs/components/FormControl.md` |
|
|
39
41
|
| Custom control chrome | `.ai/docs/components/BaseField.md` |
|
|
@@ -43,4 +45,4 @@ Controlled fields: **`v-model` / `modelValue`**. Never React `value`/`onChange`.
|
|
|
43
45
|
1. Map validation to `error`, `error-message`, `description`, `disabled`, `readOnly`.
|
|
44
46
|
2. Native input attrs often go through `:custom-props` → `input` — see TextField docs.
|
|
45
47
|
3. Use only documented option shapes for Select/Autocomplete.
|
|
46
|
-
4. Prefer public fields/controls in apps. `FormField`, `FormControl`,
|
|
48
|
+
4. Prefer public fields/controls in apps. `FormField`, `FormControl`, and `BaseField` are exported building blocks for advanced composition — they are **not** registry keys. Theme via the public parent (`components.TextField`, `tokens.baseField`, `tokens.formControl`). Dropdown tokens live on `components.Listbox`. Shared form density: `global.formDefaults: { size, rounded }` (Radio/Switch ignore `rounded`).
|
|
@@ -728,7 +728,6 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
|
|
|
728
728
|
anchorEl?: null | HTMLElement;
|
|
729
729
|
classes?: import('../../Listbox').ListboxClasses;
|
|
730
730
|
color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
|
|
731
|
-
componentName: "Select" | "Autocomplete";
|
|
732
731
|
customProps?: import('../../Listbox').ListboxCustomProps;
|
|
733
732
|
disableAutoFocus: boolean;
|
|
734
733
|
disableMaxHeight: boolean;
|
|
@@ -363,7 +363,6 @@ function m(m, h, g, _, Oe) {
|
|
|
363
363
|
error: q.invalidated.value,
|
|
364
364
|
color: q.merged.value.color,
|
|
365
365
|
labelledBy: q.controlId.value,
|
|
366
|
-
componentName: "Autocomplete",
|
|
367
366
|
rounded: q.merged.value.rounded,
|
|
368
367
|
highlightedIndex: w.value,
|
|
369
368
|
disableMaxHeight: m.disableMaxHeight === !0,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
|
|
2
2
|
import { DatePickerModel, DisableDatesInput, StartOfWeek } from '@bridge-ui/core/Domain';
|
|
3
|
-
import { CalendarColor,
|
|
3
|
+
import { CalendarColor, CalendarRounded } from '@bridge-ui/core/Tokens';
|
|
4
4
|
import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
|
|
5
5
|
import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
|
|
6
6
|
import { IconProps } from '../Icon/icon.types';
|
|
@@ -111,20 +111,6 @@ export interface CalendarSlots {
|
|
|
111
111
|
*/
|
|
112
112
|
day?: Slot<CalendarDateDayCell>;
|
|
113
113
|
}
|
|
114
|
-
export interface CalendarTokens {
|
|
115
|
-
/**
|
|
116
|
-
* Color token map overrides.
|
|
117
|
-
*/
|
|
118
|
-
color?: Record<string, Partial<CalendarColorItem>>;
|
|
119
|
-
/**
|
|
120
|
-
* Day chrome overrides.
|
|
121
|
-
*/
|
|
122
|
-
day?: Partial<CalendarDay>;
|
|
123
|
-
/**
|
|
124
|
-
* Border radius token map overrides.
|
|
125
|
-
*/
|
|
126
|
-
rounded?: Record<string, string>;
|
|
127
|
-
}
|
|
128
114
|
export interface CalendarOwnProps {
|
|
129
115
|
/**
|
|
130
116
|
* Classes for calendar regions.
|
|
@@ -271,12 +257,6 @@ export interface CalendarOwnProps {
|
|
|
271
257
|
* @default undefined
|
|
272
258
|
*/
|
|
273
259
|
timeZone?: string;
|
|
274
|
-
/**
|
|
275
|
-
* Token overrides.
|
|
276
|
-
*
|
|
277
|
-
* @default undefined
|
|
278
|
-
*/
|
|
279
|
-
tokens?: CalendarTokens;
|
|
280
260
|
/**
|
|
281
261
|
* Controlled selection model.
|
|
282
262
|
*
|
|
@@ -17,7 +17,6 @@ export declare function useCalendar(props: MaybeRefOrGetter<CalendarOwnProps>, l
|
|
|
17
17
|
shared: import('vue').ComputedRef<{
|
|
18
18
|
color: NonNullable<keyof import('@bridge-ui/core/Tokens').CalendarColor | undefined>;
|
|
19
19
|
error: boolean | undefined;
|
|
20
|
-
tokens: import('../calendar.types').CalendarTokens | undefined;
|
|
21
20
|
rounded: NonNullable<keyof import('@bridge-ui/core/Tokens').CalendarRounded | undefined>;
|
|
22
21
|
maxDate: Date | undefined;
|
|
23
22
|
minDate: Date | undefined;
|
|
@@ -27,7 +26,7 @@ export declare function useCalendar(props: MaybeRefOrGetter<CalendarOwnProps>, l
|
|
|
27
26
|
}>;
|
|
28
27
|
context: import('vue').ComputedRef<DateAdapterContext>;
|
|
29
28
|
showNav: import('vue').ComputedRef<boolean>;
|
|
30
|
-
rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarOwnProps, "error" | "color" | "fill" | "value" | "classes" | "
|
|
29
|
+
rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarOwnProps, "error" | "color" | "fill" | "value" | "classes" | "customProps" | "rounded" | "view" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate" | "defaultView" | "hideMonths" | "hideYears">>>>;
|
|
31
30
|
viewDate: import('vue').ComputedRef<Date>;
|
|
32
31
|
viewYear: import('vue').ComputedRef<number>;
|
|
33
32
|
bodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
|
|
@@ -1,176 +1,176 @@
|
|
|
1
1
|
import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
|
|
2
2
|
import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
|
|
3
3
|
import { mergePartBind as r, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
|
|
4
|
-
import { computed as a, getCurrentInstance as o, ref as s, toValue as c, useAttrs as
|
|
5
|
-
import { get as
|
|
6
|
-
import { isDateRangeValue as
|
|
4
|
+
import { computed as a, getCurrentInstance as o, ref as s, toValue as c, useAttrs as te } from "vue";
|
|
5
|
+
import { get as l, isArray as u, isFunction as d, isNil as f, omit as ne } from "es-toolkit/compat";
|
|
6
|
+
import { isDateRangeValue as p, resolveDatePickerMode as m } from "@bridge-ui/core/Domain";
|
|
7
7
|
import { calendarRoundedProps as h } from "@bridge-ui/core/Tokens";
|
|
8
8
|
import { cn as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
|
|
9
9
|
//#region src/Components/Calendar/composables/useCalendar.ts
|
|
10
|
-
var y = /* @__PURE__ */ "fill.view.color.error.range.value.
|
|
10
|
+
var y = /* @__PURE__ */ "fill.view.color.error.range.value.classes.maxDate.minDate.rounded.disabled.multiple.readOnly.timeZone.viewDate.hideYears.hideMonths.customProps.defaultView.previewDate.startOfWeek.defaultValue.disableDates.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
|
|
11
11
|
function b(e, t, n) {
|
|
12
|
-
return
|
|
12
|
+
return f(e) ? t.now(n) : p(e) ? e[0] : u(e) ? e[0] ?? t.now(n) : e;
|
|
13
13
|
}
|
|
14
|
-
function x(
|
|
15
|
-
let S =
|
|
14
|
+
function x(u, p, x) {
|
|
15
|
+
let S = te(), C = e(), w = n(), T = t(), E = a(() => v({
|
|
16
16
|
bridgeKeys: y,
|
|
17
17
|
props: {
|
|
18
18
|
...S,
|
|
19
|
-
...c(
|
|
19
|
+
...c(u)
|
|
20
20
|
}
|
|
21
|
-
})), { merged: D } = ee({
|
|
22
|
-
libDefaults:
|
|
21
|
+
})), { merged: D, entry: re } = ee({
|
|
22
|
+
libDefaults: p,
|
|
23
|
+
componentName: "Calendar",
|
|
23
24
|
props: () => E.value.componentProps
|
|
24
|
-
}), O = a(() => D.value.customProps),
|
|
25
|
+
}), O = a(() => D.value.customProps), k = a(() => ne(E.value.inheritedAttrs, [
|
|
25
26
|
"onChange",
|
|
26
27
|
"onViewChange",
|
|
27
28
|
"onViewDateChange",
|
|
28
29
|
"onPreviewDateChange"
|
|
29
|
-
])),
|
|
30
|
+
])), A = i({
|
|
30
31
|
props: () => E.value.componentProps,
|
|
31
32
|
entry: a(() => {})
|
|
32
|
-
}),
|
|
33
|
+
}), j = a(() => T(D.value.timeZone)), M = a(() => m({
|
|
33
34
|
range: D.value.range,
|
|
34
35
|
multiple: D.value.multiple
|
|
35
|
-
})),
|
|
36
|
-
let e = o()?.vnode.props ?? {}, t =
|
|
37
|
-
return !
|
|
38
|
-
}),
|
|
39
|
-
let e = o()?.vnode.props ?? {}, t =
|
|
40
|
-
return !
|
|
41
|
-
}),
|
|
42
|
-
let e =
|
|
36
|
+
})), N = a(() => c(u)), P = a(() => !f(N.value.value)), F = a(() => {
|
|
37
|
+
let e = o()?.vnode.props ?? {}, t = d(e.onViewChange) || d(e["onUpdate:view"]);
|
|
38
|
+
return !f(N.value.view) && t;
|
|
39
|
+
}), I = a(() => {
|
|
40
|
+
let e = o()?.vnode.props ?? {}, t = d(e.onViewDateChange) || d(e["onUpdate:viewDate"]);
|
|
41
|
+
return !f(N.value.viewDate) && t;
|
|
42
|
+
}), L = s(D.value.defaultValue ?? null), R = s(N.value.view ?? D.value.defaultView ?? "date"), z = s(C.value.startOfMonth(f(N.value.viewDate) ? b(N.value.value ?? D.value.defaultValue ?? null, C.value, j.value) : N.value.viewDate, j.value)), B = s(null), V = a(() => P.value ? N.value.value ?? null : L.value), H = a(() => {
|
|
43
|
+
let e = F.value ? N.value.view ?? "date" : R.value;
|
|
43
44
|
return e === "year" && D.value.hideYears || e === "month" && D.value.hideMonths ? "date" : e;
|
|
44
|
-
}),
|
|
45
|
-
let e = _(h,
|
|
46
|
-
return
|
|
47
|
-
}),
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
|
|
45
|
+
}), U = a(() => I.value ? N.value.viewDate : z.value), W = a(() => String(C.value.getYear(U.value, j.value))), G = a(() => C.value.getMonthNames(j.value)[C.value.getMonth(U.value, j.value)] ?? ""), K = a(() => C.value.getYear(U.value, j.value)), q = a(() => C.value.getMonth(U.value, j.value)), J = a(() => f(B.value) ? Math.max(1, K.value - 7) : B.value), Y = a(() => {
|
|
46
|
+
let e = _(h, re.value?.tokens?.rounded);
|
|
47
|
+
return l(e, D.value.rounded);
|
|
48
|
+
}), X = (e) => {
|
|
49
|
+
F.value || (R.value = e), x("viewChange", e);
|
|
50
|
+
}, ie = () => {
|
|
51
|
+
B.value = Math.max(1, K.value - 7), X("year");
|
|
51
52
|
}, Z = (e) => {
|
|
52
|
-
let t = C.value.startOfMonth(e,
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
}, ae = () => {
|
|
57
|
-
if (V.value === "year") {
|
|
58
|
-
z.value = Math.max(1, q.value - 15);
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
Z(C.value.addMonths(H.value, -1, A.value));
|
|
53
|
+
let t = C.value.startOfMonth(e, j.value);
|
|
54
|
+
I.value || (z.value = t), x("viewDateChange", t);
|
|
55
|
+
}, ae = (e) => {
|
|
56
|
+
P.value || (L.value = e), x("change", e);
|
|
62
57
|
}, oe = () => {
|
|
63
|
-
if (
|
|
64
|
-
|
|
58
|
+
if (H.value === "year") {
|
|
59
|
+
B.value = Math.max(1, J.value - 15);
|
|
65
60
|
return;
|
|
66
61
|
}
|
|
67
|
-
Z(C.value.addMonths(
|
|
62
|
+
Z(C.value.addMonths(U.value, -1, j.value));
|
|
68
63
|
}, se = () => {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
64
|
+
if (H.value === "year") {
|
|
65
|
+
B.value = J.value + 15;
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
Z(C.value.addMonths(U.value, 1, j.value));
|
|
69
|
+
}, ce = () => {
|
|
70
|
+
let e = C.value.startOfMonth(C.value.now(j.value), j.value);
|
|
71
|
+
B.value = null, Z(e), X("date");
|
|
73
72
|
}, le = (e) => {
|
|
74
|
-
Z(C.value.
|
|
75
|
-
}, ue =
|
|
73
|
+
B.value = null, Z(C.value.setYear(U.value, e, j.value)), X(D.value.hideMonths ? "date" : "month");
|
|
74
|
+
}, ue = (e) => {
|
|
75
|
+
Z(C.value.setMonth(U.value, e, j.value)), X("date");
|
|
76
|
+
}, de = a(() => ({
|
|
76
77
|
color: D.value.color,
|
|
77
78
|
error: D.value.error,
|
|
78
|
-
tokens: D.value.tokens,
|
|
79
79
|
rounded: D.value.rounded,
|
|
80
80
|
maxDate: D.value.maxDate,
|
|
81
81
|
minDate: D.value.minDate,
|
|
82
82
|
disabled: D.value.disabled,
|
|
83
83
|
readOnly: D.value.readOnly,
|
|
84
84
|
timeZone: D.value.timeZone
|
|
85
|
-
})),
|
|
85
|
+
})), fe = a(() => r(O.value?.root, k.value, g({
|
|
86
86
|
"flex flex-col overflow-hidden": !0,
|
|
87
87
|
"w-full min-w-72": D.value.fill,
|
|
88
88
|
"w-72": !D.value.fill,
|
|
89
|
-
[
|
|
90
|
-
}))),
|
|
89
|
+
[A.value.root ?? ""]: !0
|
|
90
|
+
}))), pe = a(() => r(O.value?.header, {}, g({
|
|
91
91
|
"flex items-center justify-between p-2.5": !0,
|
|
92
|
-
[
|
|
93
|
-
}))),
|
|
92
|
+
[A.value.header ?? ""]: !0
|
|
93
|
+
}))), me = a(() => r(O.value?.body, {}, g({
|
|
94
94
|
"flex flex-col p-2.5": !0,
|
|
95
|
-
[
|
|
95
|
+
[A.value.body ?? ""]: !0
|
|
96
96
|
}))), Q = a(() => r(O.value?.selector, {
|
|
97
97
|
type: "button",
|
|
98
98
|
disabled: D.value.disabled
|
|
99
99
|
}, g({
|
|
100
100
|
"inline-flex cursor-pointer items-center gap-x-2 px-1.5 py-1 text-sm font-medium text-dark-600 hover:bg-dark-100 focus:outline-none disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
|
|
101
|
-
[
|
|
102
|
-
[
|
|
101
|
+
[Y.value ?? ""]: !0,
|
|
102
|
+
[A.value.selector ?? ""]: !0
|
|
103
103
|
}))), $ = a(() => r(O.value?.navButton, {
|
|
104
104
|
type: "button",
|
|
105
105
|
disabled: D.value.disabled
|
|
106
106
|
}, g({
|
|
107
107
|
"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center text-dark-600 hover:bg-dark-100 disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
|
|
108
|
-
[
|
|
109
|
-
[
|
|
110
|
-
}))),
|
|
111
|
-
...$.value,
|
|
112
|
-
onClick: ae,
|
|
113
|
-
type: "button",
|
|
114
|
-
disabled: D.value.disabled,
|
|
115
|
-
"aria-label": me.value
|
|
116
|
-
}, g({ [k.value.navButton ?? ""]: !0 }))), _e = a(() => r(O.value?.nextButton, {
|
|
108
|
+
[Y.value ?? ""]: !0,
|
|
109
|
+
[A.value.navButton ?? ""]: !0
|
|
110
|
+
}))), he = a(() => H.value === "year" ? w("Previous years") : w("Previous month")), ge = a(() => H.value === "year" ? w("Next years") : w("Next month")), _e = a(() => r(O.value?.previousButton, {
|
|
117
111
|
...$.value,
|
|
118
112
|
onClick: oe,
|
|
119
113
|
type: "button",
|
|
120
114
|
disabled: D.value.disabled,
|
|
121
115
|
"aria-label": he.value
|
|
122
|
-
}, g({ [
|
|
116
|
+
}, g({ [A.value.navButton ?? ""]: !0 }))), ve = a(() => r(O.value?.nextButton, {
|
|
117
|
+
...$.value,
|
|
123
118
|
onClick: se,
|
|
124
119
|
type: "button",
|
|
125
120
|
disabled: D.value.disabled,
|
|
121
|
+
"aria-label": ge.value
|
|
122
|
+
}, g({ [A.value.navButton ?? ""]: !0 }))), ye = a(() => r(O.value?.todayButton, {
|
|
123
|
+
onClick: ce,
|
|
124
|
+
type: "button",
|
|
125
|
+
disabled: D.value.disabled,
|
|
126
126
|
"aria-label": w("Today")
|
|
127
127
|
}, g({
|
|
128
128
|
"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center hover:bg-dark-100 disabled:cursor-not-allowed dark:hover:bg-dark-800": !0,
|
|
129
|
-
[
|
|
130
|
-
[
|
|
131
|
-
}))),
|
|
129
|
+
[Y.value ?? ""]: !0,
|
|
130
|
+
[A.value.navButton ?? ""]: !0
|
|
131
|
+
}))), be = a(() => r(O.value?.selector, void 0, {
|
|
132
132
|
...Q.value,
|
|
133
|
-
onClick:
|
|
133
|
+
onClick: ie,
|
|
134
134
|
type: "button",
|
|
135
135
|
"aria-label": w("Select year"),
|
|
136
136
|
disabled: D.value.disabled || D.value.hideYears
|
|
137
|
-
})),
|
|
137
|
+
})), xe = a(() => r(O.value?.selector, void 0, {
|
|
138
138
|
...Q.value,
|
|
139
139
|
type: "button",
|
|
140
|
-
onClick: () =>
|
|
140
|
+
onClick: () => X("month"),
|
|
141
141
|
"aria-label": w("Select month"),
|
|
142
142
|
disabled: D.value.disabled || D.value.hideMonths
|
|
143
|
-
})),
|
|
143
|
+
})), Se = a(() => !D.value.hideYears), Ce = a(() => !D.value.hideMonths);
|
|
144
144
|
return {
|
|
145
|
-
view:
|
|
146
|
-
mode:
|
|
147
|
-
value:
|
|
145
|
+
view: H,
|
|
146
|
+
mode: M,
|
|
147
|
+
value: V,
|
|
148
148
|
merged: D,
|
|
149
|
-
shared:
|
|
150
|
-
context:
|
|
149
|
+
shared: de,
|
|
150
|
+
context: j,
|
|
151
151
|
showNav: a(() => !0),
|
|
152
|
-
rootBind:
|
|
153
|
-
viewDate:
|
|
154
|
-
viewYear:
|
|
155
|
-
bodyBind:
|
|
156
|
-
viewMonth:
|
|
157
|
-
yearLabel:
|
|
158
|
-
monthLabel:
|
|
159
|
-
headerBind:
|
|
152
|
+
rootBind: fe,
|
|
153
|
+
viewDate: U,
|
|
154
|
+
viewYear: K,
|
|
155
|
+
bodyBind: me,
|
|
156
|
+
viewMonth: q,
|
|
157
|
+
yearLabel: W,
|
|
158
|
+
monthLabel: G,
|
|
159
|
+
headerBind: pe,
|
|
160
160
|
setViewDate: Z,
|
|
161
161
|
navIconBind: a(() => O.value?.navIcon),
|
|
162
|
-
handleChange:
|
|
162
|
+
handleChange: ae,
|
|
163
163
|
yearPageSize: 15,
|
|
164
|
-
nextButtonBind:
|
|
165
|
-
todayButtonBind:
|
|
166
|
-
yearSelectorBind:
|
|
167
|
-
handleYearSelect:
|
|
168
|
-
showYearSelector:
|
|
169
|
-
monthSelectorBind:
|
|
170
|
-
handleMonthSelect:
|
|
171
|
-
showMonthSelector:
|
|
172
|
-
previousButtonBind:
|
|
173
|
-
yearPageStart:
|
|
164
|
+
nextButtonBind: ve,
|
|
165
|
+
todayButtonBind: ye,
|
|
166
|
+
yearSelectorBind: be,
|
|
167
|
+
handleYearSelect: le,
|
|
168
|
+
showYearSelector: Se,
|
|
169
|
+
monthSelectorBind: xe,
|
|
170
|
+
handleMonthSelect: ue,
|
|
171
|
+
showMonthSelector: Ce,
|
|
172
|
+
previousButtonBind: _e,
|
|
173
|
+
yearPageStart: J
|
|
174
174
|
};
|
|
175
175
|
}
|
|
176
176
|
//#endregion
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type { CalendarClasses, CalendarColorOverrides, CalendarCustomProps, CalendarEmits, CalendarOwnProps, CalendarProps, CalendarRoundedOverrides, CalendarSlots,
|
|
1
|
+
export type { CalendarClasses, CalendarColorOverrides, CalendarCustomProps, CalendarEmits, CalendarOwnProps, CalendarProps, CalendarRoundedOverrides, CalendarSlots, CalendarView, } from './calendar.types';
|
|
2
2
|
export { default as Calendar } from './Calendar.vue';
|
|
3
3
|
export { useCalendar } from './composables/useCalendar';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
|
|
2
2
|
import { CalendarDayInteractionState, DatePickerModel, DisableDatesInput, StartOfWeek } from '@bridge-ui/core/Domain';
|
|
3
|
-
import { CalendarColor,
|
|
3
|
+
import { CalendarColor, CalendarRounded } from '@bridge-ui/core/Tokens';
|
|
4
4
|
import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
|
|
5
5
|
export interface CalendarDateColorOverrides {}
|
|
6
6
|
export interface CalendarDateRoundedOverrides {}
|
|
@@ -107,20 +107,6 @@ export interface CalendarDateSlots {
|
|
|
107
107
|
*/
|
|
108
108
|
day?: Slot<CalendarDateDayCell>;
|
|
109
109
|
}
|
|
110
|
-
export interface CalendarDateTokens {
|
|
111
|
-
/**
|
|
112
|
-
* Color token map overrides (`base` / `hover` / `selected` / `disabled`).
|
|
113
|
-
*/
|
|
114
|
-
color?: Record<string, Partial<CalendarColorItem>>;
|
|
115
|
-
/**
|
|
116
|
-
* Day chrome overrides (`outside` / `today` / `weekday`).
|
|
117
|
-
*/
|
|
118
|
-
day?: Partial<CalendarDay>;
|
|
119
|
-
/**
|
|
120
|
-
* Border radius token map overrides.
|
|
121
|
-
*/
|
|
122
|
-
rounded?: Record<string, string>;
|
|
123
|
-
}
|
|
124
110
|
export interface CalendarDateOwnProps {
|
|
125
111
|
/**
|
|
126
112
|
* Classes for calendar regions.
|
|
@@ -243,12 +229,6 @@ export interface CalendarDateOwnProps {
|
|
|
243
229
|
* @default undefined
|
|
244
230
|
*/
|
|
245
231
|
timeZone?: string;
|
|
246
|
-
/**
|
|
247
|
-
* Token overrides (usually passed from `DatePicker` / `DateField` registry).
|
|
248
|
-
*
|
|
249
|
-
* @default undefined
|
|
250
|
-
*/
|
|
251
|
-
tokens?: CalendarDateTokens;
|
|
252
232
|
/**
|
|
253
233
|
* Controlled selection model.
|
|
254
234
|
*
|
|
@@ -15,7 +15,7 @@ export declare function useCalendarDate(props: MaybeRefOrGetter<CalendarDateOwnP
|
|
|
15
15
|
value: import('vue').ComputedRef<DatePickerModel>;
|
|
16
16
|
merged: import('vue').ComputedRef<CalendarDateMerged>;
|
|
17
17
|
context: import('vue').ComputedRef<DateAdapterContext>;
|
|
18
|
-
rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarDateOwnProps, "error" | "color" | "value" | "classes" | "
|
|
18
|
+
rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarDateOwnProps, "error" | "color" | "value" | "classes" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate">>>>;
|
|
19
19
|
gridBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
|
|
20
20
|
role: string;
|
|
21
21
|
onMouseleave: () => void;
|