@rotki/ui-library 3.0.0-beta.1 → 3.0.0-beta.2
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/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/accordions/accordion/RuiAccordion.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/accordions/accordions/RuiAccordions.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/buttons/button/RuiButton.js.map +1 -1
- package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js +10 -10
- package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/buttons/button/button-styles.js +10 -2
- package/dist/components/buttons/button/button-styles.js.map +1 -1
- package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/calendar/RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/chips/RuiChip.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorBoard.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorDisplay.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorHue.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js +9 -10
- package/dist/components/color-picker/RuiColorInput.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js +3 -4
- package/dist/components/color-picker/RuiColorPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js +33 -33
- package/dist/components/date-time-picker/RuiDateTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/date-time-picker/use-date-bounds.js +1 -1
- package/dist/components/date-time-picker/use-date-time-selection.js +65 -66
- package/dist/components/date-time-picker/use-date-time-selection.js.map +1 -1
- package/dist/components/date-time-picker/use-input-handler.js +1 -1
- package/dist/components/date-time-picker/use-keyboard-handler.js +29 -30
- package/dist/components/date-time-picker/use-keyboard-handler.js.map +1 -1
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js +24 -24
- package/dist/components/forms/auto-complete/RuiAutoComplete.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js +49 -49
- package/dist/components/forms/category-picker/RuiCategoryPicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/checkbox/RuiCheckbox.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/checkbox/checkbox-group/RuiCheckboxGroup.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/file-upload/RuiFileUpload.js.map +1 -1
- package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js +19 -17
- package/dist/components/forms/file-upload/RuiFileUpload.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/radio-button/radio/RuiRadio.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js +11 -11
- package/dist/components/forms/select/RuiMenuSelect.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js +17 -17
- package/dist/components/forms/slider/RuiSlider.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/switch/RuiSwitch.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js +21 -21
- package/dist/components/forms/text-area/RuiTextArea.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/forms/text-field/RuiTextField.js.map +1 -1
- package/dist/components/forms/text-field/RuiTextField.vue.d.ts +2 -0
- package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js +24 -20
- package/dist/components/forms/text-field/RuiTextField.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/helpers/RuiFormTextDetail.js.map +1 -1
- package/dist/components/helpers/RuiFormTextDetail.vue.d.ts +11 -1
- package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js +3 -3
- package/dist/components/helpers/RuiFormTextDetail.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/logos/RuiLogo.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/overlays/badge/RuiBadge.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/overlays/dialog/RuiDialog.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js +17 -17
- package/dist/components/overlays/menu/RuiMenu.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.js.map +1 -1
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js +9 -9
- package/dist/components/overlays/navigation-drawer/RuiNavigationDrawer.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js +3 -4
- package/dist/components/overlays/notification/RuiNotification.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/overlays/tooltip/RuiTooltip.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/progress/RuiProgress.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/steppers/RuiFooterStepper.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/steppers/RuiStepper.js.map +1 -1
- package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js +13 -8
- package/dist/components/steppers/RuiStepper.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js +27 -27
- package/dist/components/tables/RuiDataTable.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/RuiTableHead.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/RuiTablePagination.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableCell.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableGroupRow.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableMobileSort.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js +23 -23
- package/dist/components/tables/data-table/RuiDataTableRow.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tables/use-pagination-navigation.js +1 -1
- package/dist/components/tabs/tab/RuiTab.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/tabs/tab/use-tab-link.js +1 -1
- package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js +6 -6
- package/dist/components/tabs/tab-items/RuiTabItems.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js +11 -12
- package/dist/components/tabs/tabs/RuiTabs.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/components/tabs/tabs/use-tab-indicator.js +7 -7
- package/dist/components/tabs/tabs/use-tab-indicator.js.map +1 -1
- package/dist/components/tabs/tabs/use-tab-keyboard.js +1 -1
- package/dist/components/tabs/tabs/use-tab-scroll.js +15 -15
- package/dist/components/tabs/tabs/use-tab-scroll.js.map +1 -1
- package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js +60 -61
- package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/composables/breakpoint.js +3 -3
- package/dist/composables/breakpoint.js.map +1 -1
- package/dist/composables/dropdown-menu.d.ts +9 -9
- package/dist/composables/dropdown-menu.js +32 -32
- package/dist/composables/dropdown-menu.js.map +1 -1
- package/dist/composables/floating.d.ts +1 -1
- package/dist/composables/floating.js +11 -11
- package/dist/composables/floating.js.map +1 -1
- package/dist/composables/forms/auto-complete/focus.js +16 -17
- package/dist/composables/forms/auto-complete/focus.js.map +1 -1
- package/dist/composables/forms/auto-complete/keyboard-navigation.js +1 -1
- package/dist/composables/forms/auto-complete/search.js +6 -7
- package/dist/composables/forms/auto-complete/search.js.map +1 -1
- package/dist/composables/forms/auto-complete/selection.js +1 -1
- package/dist/composables/forms/auto-complete/value.js +1 -1
- package/dist/composables/forms/category-picker/use-category-picker.js +1 -1
- package/dist/composables/forms/use-prepend-append-width.js +6 -6
- package/dist/composables/forms/use-prepend-append-width.js.map +1 -1
- package/dist/composables/keyboard-scroll.js +5 -5
- package/dist/composables/keyboard-scroll.js.map +1 -1
- package/dist/composables/overlay-stack.js +1 -1
- package/dist/composables/sticky-header.js +8 -8
- package/dist/composables/sticky-header.js.map +1 -1
- package/dist/composables/tables/data-table/columns.js +1 -1
- package/dist/composables/tables/data-table/expansion.js +1 -1
- package/dist/composables/tables/data-table/grouping.js +27 -28
- package/dist/composables/tables/data-table/grouping.js.map +1 -1
- package/dist/composables/tables/data-table/page-scroll.d.ts +7 -5
- package/dist/composables/tables/data-table/page-scroll.js +48 -17
- package/dist/composables/tables/data-table/page-scroll.js.map +1 -1
- package/dist/composables/tables/data-table/pagination.js +1 -1
- package/dist/composables/tables/data-table/selection.js +37 -38
- package/dist/composables/tables/data-table/selection.js.map +1 -1
- package/dist/composables/tables/data-table/sort.js +1 -1
- package/dist/composables/theme.js +12 -12
- package/dist/composables/theme.js.map +1 -1
- package/dist/composables/timeout-manager.js +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/style.css +2 -18
- package/dist/types/dom.d.ts +9 -0
- package/dist/types/theme.d.ts +2 -3
- package/dist/types/theme.js.map +1 -1
- package/dist/utils/form-text-detail.js +1 -1
- package/dist/utils/helpers.js +1 -1
- package/dist/vendor/@vueuse/core/dist/index.js +1577 -0
- package/dist/vendor/@vueuse/core/dist/index.js.map +1 -0
- package/dist/vendor/@vueuse/shared/dist/index.js +563 -0
- package/dist/vendor/@vueuse/shared/dist/index.js.map +1 -0
- package/dist/vite-plugin/index.js +5 -6
- package/dist/vite-plugin/index.js.map +1 -1
- package/dist/web-types.json +9 -2
- package/package.json +5 -4
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { assert } from "../../utils/assert.js";
|
|
2
|
+
import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
|
|
2
3
|
import { timePickerStyles } from "./time-picker-styles.js";
|
|
3
4
|
import { TimeAccuracy } from "../../consts/time-accuracy.js";
|
|
4
5
|
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, watch } from "vue";
|
|
5
|
-
import { isDefined } from "@vueuse/core";
|
|
6
|
-
import { get as get$1, set as set$1 } from "@vueuse/shared";
|
|
7
6
|
//#region src/components/time-picker/RuiTimePicker.vue?vue&type=script&setup=true&lang.ts
|
|
8
7
|
var _hoisted_1 = ["aria-pressed"];
|
|
9
8
|
var _hoisted_2 = ["aria-pressed"];
|
|
@@ -67,25 +66,25 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
67
66
|
const clockFace = useTemplateRef("clockFace");
|
|
68
67
|
const showSecond = computed(() => __props.accuracy === TimeAccuracy.SECOND || __props.accuracy === TimeAccuracy.MILLISECOND);
|
|
69
68
|
const showMillisecond = computed(() => __props.accuracy === TimeAccuracy.MILLISECOND);
|
|
70
|
-
const period = computed(() => isDefined(selectedHour) && get
|
|
69
|
+
const period = computed(() => isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? "PM" : "AM");
|
|
71
70
|
const displayHour = computed(() => {
|
|
72
71
|
if (!isDefined(selectedHour)) return;
|
|
73
|
-
const hour = get
|
|
72
|
+
const hour = get(selectedHour) % TWELVE_HOURS;
|
|
74
73
|
return hour === 0 ? TWELVE_HOURS : hour;
|
|
75
74
|
});
|
|
76
75
|
const editedValue = computed(() => {
|
|
77
|
-
const mode = get
|
|
78
|
-
if (mode === "hour") return get
|
|
79
|
-
else if (mode === "minute") return get
|
|
80
|
-
else if (mode === "second") return get
|
|
81
|
-
else return get
|
|
76
|
+
const mode = get(editMode);
|
|
77
|
+
if (mode === "hour") return get(displayHour);
|
|
78
|
+
else if (mode === "minute") return get(selectedMinute);
|
|
79
|
+
else if (mode === "second") return get(selectedSecond);
|
|
80
|
+
else return get(selectedMillisecond);
|
|
82
81
|
});
|
|
83
82
|
const displayClockHandCircle = computed(() => {
|
|
84
|
-
const mode = get
|
|
83
|
+
const mode = get(editMode);
|
|
85
84
|
if (mode === "hour" || !isDefined(editedValue)) return false;
|
|
86
85
|
else {
|
|
87
86
|
const interval = intervals[mode];
|
|
88
|
-
return get
|
|
87
|
+
return get(editedValue) % interval !== 0;
|
|
89
88
|
}
|
|
90
89
|
});
|
|
91
90
|
const dotStyle = computed(() => ({
|
|
@@ -100,14 +99,14 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
100
99
|
top: "14%",
|
|
101
100
|
left: "50%",
|
|
102
101
|
transformOrigin: "bottom center",
|
|
103
|
-
transform: `translateX(-50%) rotate(${get
|
|
102
|
+
transform: `translateX(-50%) rotate(${get(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get(editMode)])}deg)`,
|
|
104
103
|
zIndex: 10
|
|
105
104
|
};
|
|
106
105
|
});
|
|
107
106
|
const clockHandCircleStyle = computed(() => {
|
|
108
107
|
if (!isDefined(editedValue)) return {};
|
|
109
108
|
const radius = "38%";
|
|
110
|
-
const radians = get
|
|
109
|
+
const radians = get(editedValue) * (FULL_CIRCLE / totalItemsPerMode[get(editMode)]) * Math.PI / 180;
|
|
111
110
|
const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);
|
|
112
111
|
return {
|
|
113
112
|
position: "absolute",
|
|
@@ -121,7 +120,7 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
121
120
|
};
|
|
122
121
|
});
|
|
123
122
|
const clockNumbers = computed(() => {
|
|
124
|
-
const mode = get
|
|
123
|
+
const mode = get(editMode);
|
|
125
124
|
const interval = intervals[mode];
|
|
126
125
|
const total = totalItemsPerMode[mode];
|
|
127
126
|
const numbers = generateNumbers(total, interval);
|
|
@@ -129,16 +128,16 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
129
128
|
return numbers;
|
|
130
129
|
});
|
|
131
130
|
function getModelHours() {
|
|
132
|
-
return isDefined(modelValue) ? new Date(get
|
|
131
|
+
return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : void 0;
|
|
133
132
|
}
|
|
134
133
|
function getModelMinutes() {
|
|
135
|
-
return isDefined(modelValue) ? new Date(get
|
|
134
|
+
return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : void 0;
|
|
136
135
|
}
|
|
137
136
|
function getModelSeconds() {
|
|
138
|
-
return [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND].includes(__props.accuracy) && isDefined(modelValue) ? new Date(get
|
|
137
|
+
return [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND].includes(__props.accuracy) && isDefined(modelValue) ? new Date(get(modelValue)).getSeconds() : void 0;
|
|
139
138
|
}
|
|
140
139
|
function getModelMilliseconds() {
|
|
141
|
-
return __props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get
|
|
140
|
+
return __props.accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue) ? new Date(get(modelValue)).getMilliseconds() : void 0;
|
|
142
141
|
}
|
|
143
142
|
function generateNumbers(total, interval) {
|
|
144
143
|
const numbers = [];
|
|
@@ -150,7 +149,7 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
150
149
|
}
|
|
151
150
|
function numberStyle(num) {
|
|
152
151
|
const radius = "38%";
|
|
153
|
-
const radians = (num * (FULL_CIRCLE / totalItemsPerMode[get
|
|
152
|
+
const radians = (num * (FULL_CIRCLE / totalItemsPerMode[get(editMode)]) - 90) * Math.PI / 180;
|
|
154
153
|
const x = 50 + parseFloat(radius) * Math.cos(radians);
|
|
155
154
|
return {
|
|
156
155
|
top: `${50 + parseFloat(radius) * Math.sin(radians)}%`,
|
|
@@ -160,25 +159,25 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
160
159
|
}
|
|
161
160
|
function isSelectedNumber(num) {
|
|
162
161
|
if (!isDefined(editedValue)) return false;
|
|
163
|
-
const mode = get
|
|
164
|
-
if (mode === "hour") return get
|
|
162
|
+
const mode = get(editMode);
|
|
163
|
+
if (mode === "hour") return get(displayHour) === num;
|
|
165
164
|
else {
|
|
166
|
-
const value = get
|
|
165
|
+
const value = get(editedValue);
|
|
167
166
|
const interval = intervals[mode];
|
|
168
167
|
return value === num || value % interval === 0 && value === num;
|
|
169
168
|
}
|
|
170
169
|
}
|
|
171
170
|
function toggleAmPm() {
|
|
172
171
|
if (!isDefined(selectedHour)) return;
|
|
173
|
-
if (get
|
|
174
|
-
else set
|
|
172
|
+
if (get(selectedHour) < TWELVE_HOURS) set(selectedHour, get(selectedHour) + TWELVE_HOURS);
|
|
173
|
+
else set(selectedHour, get(selectedHour) - TWELVE_HOURS);
|
|
175
174
|
updateModelValue();
|
|
176
175
|
}
|
|
177
176
|
function startDrag(event) {
|
|
178
177
|
event.preventDefault();
|
|
179
|
-
set
|
|
178
|
+
set(isDragging, true);
|
|
180
179
|
if (!isDefined(clockFace)) return;
|
|
181
|
-
const rect = get
|
|
180
|
+
const rect = get(clockFace).getBoundingClientRect();
|
|
182
181
|
const centerX = rect.left + rect.width / 2;
|
|
183
182
|
const centerY = rect.top + rect.height / 2;
|
|
184
183
|
let rafId = null;
|
|
@@ -187,21 +186,21 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
187
186
|
const y = clientY - centerY;
|
|
188
187
|
let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;
|
|
189
188
|
if (angle < 0) angle += FULL_CIRCLE;
|
|
190
|
-
const mode = get
|
|
189
|
+
const mode = get(editMode);
|
|
191
190
|
const unit = Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];
|
|
192
191
|
if (mode === "hour") {
|
|
193
192
|
let hour = unit;
|
|
194
193
|
if (hour === 0) hour = TWELVE_HOURS;
|
|
195
|
-
if (get
|
|
196
|
-
else if (get
|
|
197
|
-
set
|
|
198
|
-
} else if (mode === "minute") set
|
|
199
|
-
else if (mode === "second") set
|
|
200
|
-
else set
|
|
194
|
+
if (get(period) === "PM" && hour < TWELVE_HOURS) hour += TWELVE_HOURS;
|
|
195
|
+
else if (get(period) === "AM" && hour === TWELVE_HOURS) hour = 0;
|
|
196
|
+
set(selectedHour, hour);
|
|
197
|
+
} else if (mode === "minute") set(selectedMinute, unit);
|
|
198
|
+
else if (mode === "second") set(selectedSecond, unit);
|
|
199
|
+
else set(selectedMillisecond, unit);
|
|
201
200
|
updateModelValue();
|
|
202
201
|
};
|
|
203
202
|
const handleMove = (moveEvent) => {
|
|
204
|
-
if (!get
|
|
203
|
+
if (!get(isDragging)) return;
|
|
205
204
|
if (rafId !== null) return;
|
|
206
205
|
let clientX;
|
|
207
206
|
let clientY;
|
|
@@ -224,14 +223,14 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
224
223
|
cancelAnimationFrame(rafId);
|
|
225
224
|
rafId = null;
|
|
226
225
|
}
|
|
227
|
-
set
|
|
226
|
+
set(isDragging, false);
|
|
228
227
|
document.removeEventListener("mousemove", handleMove);
|
|
229
228
|
document.removeEventListener("touchmove", handleMove);
|
|
230
229
|
document.removeEventListener("mouseup", handleEnd);
|
|
231
230
|
document.removeEventListener("touchend", handleEnd);
|
|
232
|
-
if (get
|
|
233
|
-
else if (get
|
|
234
|
-
else if (get
|
|
231
|
+
if (get(editMode) === "hour") set(editMode, "minute");
|
|
232
|
+
else if (get(showSecond) && get(editMode) === "minute") set(editMode, "second");
|
|
233
|
+
else if (get(showMillisecond) && get(editMode) === "second") set(editMode, "millisecond");
|
|
235
234
|
};
|
|
236
235
|
document.addEventListener("mousemove", handleMove);
|
|
237
236
|
document.addEventListener("touchmove", handleMove);
|
|
@@ -252,43 +251,43 @@ var RuiTimePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
252
251
|
applyMove(clientX, clientY);
|
|
253
252
|
}
|
|
254
253
|
function selectByClick(num) {
|
|
255
|
-
const mode = get
|
|
254
|
+
const mode = get(editMode);
|
|
256
255
|
if (mode === "hour") {
|
|
257
256
|
let newHour = num;
|
|
258
|
-
if (get
|
|
259
|
-
set
|
|
260
|
-
set
|
|
257
|
+
if (get(period) === "PM" && newHour < TWELVE_HOURS) newHour += TWELVE_HOURS;
|
|
258
|
+
set(selectedHour, newHour);
|
|
259
|
+
set(editMode, "minute");
|
|
261
260
|
} else if (mode === "minute") {
|
|
262
|
-
set
|
|
263
|
-
if (get
|
|
261
|
+
set(selectedMinute, num);
|
|
262
|
+
if (get(showSecond)) set(editMode, "second");
|
|
264
263
|
} else if (mode === "second") {
|
|
265
|
-
set
|
|
266
|
-
if (get
|
|
267
|
-
} else if (mode === "millisecond") set
|
|
264
|
+
set(selectedSecond, num);
|
|
265
|
+
if (get(showMillisecond)) set(editMode, "millisecond");
|
|
266
|
+
} else if (mode === "millisecond") set(selectedMillisecond, num);
|
|
268
267
|
updateModelValue();
|
|
269
268
|
}
|
|
270
269
|
function updateModelValue() {
|
|
271
270
|
if (!(isDefined(selectedHour) && isDefined(selectedMinute))) return;
|
|
272
271
|
nextTick(() => {
|
|
273
|
-
const date = isDefined(modelValue) ? new Date(get
|
|
274
|
-
date.setHours(get
|
|
275
|
-
date.setMinutes(get
|
|
276
|
-
date.setSeconds(get
|
|
277
|
-
date.setMilliseconds(get
|
|
278
|
-
set
|
|
272
|
+
const date = isDefined(modelValue) ? new Date(get(modelValue)) : /* @__PURE__ */ new Date();
|
|
273
|
+
date.setHours(get(selectedHour));
|
|
274
|
+
date.setMinutes(get(selectedMinute));
|
|
275
|
+
date.setSeconds(get(selectedSecond) ?? 0);
|
|
276
|
+
date.setMilliseconds(get(selectedMillisecond) ?? 0);
|
|
277
|
+
set(modelValue, date);
|
|
279
278
|
});
|
|
280
279
|
}
|
|
281
280
|
watch(modelValue, () => {
|
|
282
|
-
set
|
|
283
|
-
set
|
|
284
|
-
set
|
|
285
|
-
set
|
|
281
|
+
set(selectedHour, getModelHours());
|
|
282
|
+
set(selectedMinute, getModelMinutes());
|
|
283
|
+
set(selectedSecond, getModelSeconds());
|
|
284
|
+
set(selectedMillisecond, getModelMilliseconds());
|
|
286
285
|
});
|
|
287
286
|
onMounted(() => {
|
|
288
|
-
set
|
|
289
|
-
set
|
|
290
|
-
set
|
|
291
|
-
set
|
|
287
|
+
set(selectedHour, getModelHours());
|
|
288
|
+
set(selectedMinute, getModelMinutes());
|
|
289
|
+
set(selectedSecond, getModelSeconds());
|
|
290
|
+
set(selectedMillisecond, getModelMilliseconds());
|
|
292
291
|
});
|
|
293
292
|
return (_ctx, _cache) => {
|
|
294
293
|
return openBlock(), createElementBlock("div", {
|
package/dist/components/time-picker/RuiTimePicker.vue_vue_type_script_setup_true_lang.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n accuracy?: TimeAccuracy;\n borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n hour: 12,\n minute: 60,\n second: 60,\n millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n hour: 1,\n minute: 5,\n second: 5,\n millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n if (!isDefined(selectedHour)) {\n return undefined;\n }\n const hourValue = get(selectedHour);\n const hour = hourValue % TWELVE_HOURS;\n return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour);\n }\n else if (mode === 'minute') {\n return get(selectedMinute);\n }\n else if (mode === 'second') {\n return get(selectedSecond);\n }\n else {\n return get(selectedMillisecond);\n }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n const mode = get(editMode);\n if (mode === 'hour' || !isDefined(editedValue)) {\n return false;\n }\n else {\n const interval = intervals[mode];\n const value = get(editedValue);\n return value % interval !== 0;\n }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n return {\n height: '36%',\n top: '14%',\n left: '50%',\n transformOrigin: 'bottom center',\n transform: `translateX(-50%) rotate(${angle}deg)`,\n zIndex: 10,\n };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const radius = '38%';\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n const radians = (angle * Math.PI) / 180;\n\n const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n return {\n position: 'absolute',\n top: `${y}%`,\n left: `${x}%`,\n width: '10px',\n height: '10px',\n borderRadius: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 11,\n };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n const mode = get(editMode);\n const interval = intervals[mode];\n const total = totalItemsPerMode[mode];\n const numbers = generateNumbers(total, interval);\n if (mode === 'hour') {\n numbers[0] = 12;\n }\n return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n ? new Date(get(modelValue)).getSeconds()\n : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n ? new Date(get(modelValue)).getMilliseconds()\n : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n const numbers: number[] = [];\n for (let i = 0; i < total; i += interval) {\n numbers.push(i);\n }\n return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n const radius = '38%';\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n const radians = (angle * Math.PI) / 180;\n const x = 50 + parseFloat(radius) * Math.cos(radians);\n const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n return {\n top: `${y}%`,\n left: `${x}%`,\n transform: 'translate(-50%, -50%)',\n };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n if (!isDefined(editedValue)) {\n return false;\n }\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour) === num;\n }\n else {\n const value = get(editedValue);\n const interval = intervals[mode];\n return value === num || (value % interval === 0 && value === num);\n }\n}\n\nfunction toggleAmPm(): void {\n if (!isDefined(selectedHour)) {\n return;\n }\n if (get(selectedHour) < TWELVE_HOURS) {\n set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n }\n else {\n set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n }\n\n updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n event.preventDefault();\n set(isDragging, true);\n\n if (!isDefined(clockFace))\n return;\n\n const rect = get(clockFace).getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n let rafId: number | null = null;\n\n const applyMove = (clientX: number, clientY: number): void => {\n const x = clientX - centerX;\n const y = clientY - centerY;\n\n let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n if (angle < 0)\n angle += FULL_CIRCLE;\n\n const mode = get(editMode);\n const unit =\n Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n if (mode === 'hour') {\n let hour = unit;\n if (hour === 0)\n hour = TWELVE_HOURS;\n\n if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n hour += TWELVE_HOURS;\n }\n else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n hour = 0;\n }\n\n set(selectedHour, hour);\n }\n else if (mode === 'minute') {\n set(selectedMinute, unit);\n }\n else if (mode === 'second') {\n set(selectedSecond, unit);\n }\n else {\n set(selectedMillisecond, unit);\n }\n\n updateModelValue();\n };\n\n const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n if (!get(isDragging))\n return;\n\n if (rafId !== null)\n return;\n\n let clientX: number;\n let clientY: number;\n\n if ('touches' in moveEvent) {\n const touch = moveEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = moveEvent.clientX;\n clientY = moveEvent.clientY;\n }\n\n rafId = requestAnimationFrame(() => {\n applyMove(clientX, clientY);\n rafId = null;\n });\n };\n\n const handleEnd = (): void => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n rafId = null;\n }\n set(isDragging, false);\n document.removeEventListener('mousemove', handleMove);\n document.removeEventListener('touchmove', handleMove);\n document.removeEventListener('mouseup', handleEnd);\n document.removeEventListener('touchend', handleEnd);\n\n if (get(editMode) === 'hour') {\n set(editMode, 'minute');\n }\n else if (get(showSecond) && get(editMode) === 'minute') {\n set(editMode, 'second');\n }\n else if (get(showMillisecond) && get(editMode) === 'second') {\n set(editMode, 'millisecond');\n }\n };\n\n document.addEventListener('mousemove', handleMove);\n document.addEventListener('touchmove', handleMove);\n document.addEventListener('mouseup', handleEnd);\n document.addEventListener('touchend', handleEnd);\n\n // Apply initial position synchronously for immediate feedback\n const initialEvent = event;\n let clientX: number;\n let clientY: number;\n if ('touches' in initialEvent) {\n const touch = initialEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = initialEvent.clientX;\n clientY = initialEvent.clientY;\n }\n applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n const mode = get(editMode);\n if (mode === 'hour') {\n let newHour = num;\n\n if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n newHour += TWELVE_HOURS;\n }\n\n set(selectedHour, newHour);\n set(editMode, 'minute');\n }\n else if (mode === 'minute') {\n set(selectedMinute, num);\n if (get(showSecond))\n set(editMode, 'second');\n }\n else if (mode === 'second') {\n set(selectedSecond, num);\n if (get(showMillisecond)) {\n set(editMode, 'millisecond');\n }\n }\n else if (mode === 'millisecond') {\n set(selectedMillisecond, num);\n }\n\n updateModelValue();\n}\n\nfunction updateModelValue(): void {\n if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n return;\n }\n nextTick(() => {\n const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n date.setHours(get(selectedHour));\n date.setMinutes(get(selectedMinute));\n date.setSeconds(get(selectedSecond) ?? 0);\n date.setMilliseconds(get(selectedMillisecond) ?? 0);\n set(modelValue, date);\n });\n}\n\nwatch(\n modelValue,\n () => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n },\n);\n\nonMounted(() => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-label=\"Time picker\"\n :class=\"ui.root({ bordered: !borderless })\"\n >\n <div :class=\"ui.digitalDisplay()\">\n <div :class=\"ui.time()\">\n <button\n type=\"button\"\n aria-label=\"Select hours\"\n :aria-pressed=\"editMode === 'hour'\"\n :class=\"ui.digit({ active: editMode === 'hour' })\"\n @click=\"editMode = 'hour'\"\n >\n {{ formatValue(displayHour) }}\n </button>\n <div :class=\"ui.separator()\">\n :\n </div>\n <button\n type=\"button\"\n aria-label=\"Select minutes\"\n :aria-pressed=\"editMode === 'minute'\"\n :class=\"ui.digit({ active: editMode === 'minute' })\"\n @click=\"editMode = 'minute'\"\n >\n {{ formatValue(selectedMinute) }}\n </button>\n <div\n v-if=\"showSecond\"\n :class=\"ui.separator()\"\n >\n :\n </div>\n <button\n v-if=\"showSecond\"\n type=\"button\"\n aria-label=\"Select seconds\"\n :aria-pressed=\"editMode === 'second'\"\n :class=\"ui.digit({ active: editMode === 'second' })\"\n @click=\"editMode = 'second'\"\n >\n {{ formatValue(selectedSecond) }}\n </button>\n\n <div\n v-if=\"showMillisecond\"\n :class=\"ui.separator({ class: 'text-lg' })\"\n >\n .\n </div>\n\n <button\n v-if=\"showMillisecond\"\n type=\"button\"\n aria-label=\"Select milliseconds\"\n :aria-pressed=\"editMode === 'millisecond'\"\n :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n @click=\"editMode = 'millisecond'\"\n >\n {{ formatValue(selectedMillisecond, 3) }}\n </button>\n </div>\n <button\n type=\"button\"\n aria-label=\"Toggle AM/PM\"\n :class=\"ui.period()\"\n @click=\"toggleAmPm()\"\n >\n {{ period }}\n </button>\n </div>\n\n <div\n ref=\"clockFace\"\n role=\"listbox\"\n :aria-label=\"`Select ${editMode}`\"\n :class=\"ui.clockFace()\"\n @mousedown=\"startDrag($event)\"\n @touchstart=\"startDrag($event)\"\n >\n <div\n :class=\"ui.centerDot()\"\n :style=\"dotStyle\"\n />\n\n <div\n :class=\"ui.clockHand()\"\n :style=\"clockHandStyle\"\n />\n\n <div\n v-if=\"displayClockHandCircle\"\n :class=\"ui.clockHandCircle()\"\n :style=\"clockHandCircleStyle\"\n />\n\n <div\n v-for=\"num in clockNumbers\"\n :key=\"`num-${num}`\"\n role=\"option\"\n :aria-selected=\"isSelectedNumber(num)\"\n :class=\"[\n ui.clockNumber({ selected: isSelectedNumber(num) }),\n `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n ]\"\n :style=\"numberStyle(num)\"\n @click=\"selectByClick(num)\"\n >\n {{ num }}\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;AAyBA,IAAM,cAAc;AACpB,IAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAbrB,MAAM,aAAa,SAA6B,SAAA,YAAmB;EAEnE,MAAM,eAAe,SAA+B,SAAC,MAAM;EAC3D,MAAM,iBAAiB,SAA+B,SAAC,QAAQ;EAC/D,MAAM,iBAAiB,SAA+B,SAAC,QAAQ;EAC/D,MAAM,sBAAsB,SAA+B,SAAC,aAAa;EACzE,MAAM,WAAW,SAAgC,SAAC,WAAgC;EAIlF,MAAM,KAAK,iBAAiB;EAK5B,MAAM,oBAAyD;GAC7D,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,aAAa;EACf;EAEA,MAAM,YAAiD;GACrD,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,aAAa;EACf;EAEA,MAAM,aAAa,IAAa,KAAK;EACrC,MAAM,YAAY,eAAoD,WAAW;EAEjF,MAAM,aAAa,eACX,QAAA,aAAa,aAAa,UAAU,QAAA,aAAa,aAAa,WACtE;EACA,MAAM,kBAAkB,eAAwB,QAAA,aAAa,aAAa,WAAW;EAErF,MAAM,SAAS,eACb,UAAU,YAAY,KAAK,MAAI,YAAY,KAAK,eAAe,OAAO,IACxE;EAEA,MAAM,cAAc,eAAmC;GACrD,IAAI,CAAC,UAAU,YAAY,GACzB;GAGF,MAAM,OADY,MAAI,YACT,IAAY;GACzB,OAAO,SAAS,IAAI,eAAe;EACrC,CAAC;EAED,MAAM,cAAc,eAAmC;GACrD,MAAM,OAAO,MAAI,QAAQ;GACzB,IAAI,SAAS,QACX,OAAO,MAAI,WAAW;QAEnB,IAAI,SAAS,UAChB,OAAO,MAAI,cAAc;QAEtB,IAAI,SAAS,UAChB,OAAO,MAAI,cAAc;QAGzB,OAAO,MAAI,mBAAmB;EAElC,CAAC;EAED,MAAM,yBAAyB,eAAwB;GACrD,MAAM,OAAO,MAAI,QAAQ;GACzB,IAAI,SAAS,UAAU,CAAC,UAAU,WAAW,GAC3C,OAAO;QAEJ;IACH,MAAM,WAAW,UAAU;IAE3B,OADc,MAAI,WACX,IAAQ,aAAa;GAC9B;EACF,CAAC;EAED,MAAM,WAAW,gBAA4B;GAC3C,KAAK;GACL,MAAM;GACN,WAAW;EACb,EAAE;EAEF,MAAM,iBAAiB,eAA2B;GAChD,IAAI,CAAC,UAAU,WAAW,GACxB,OAAO,CAAC;GAMV,OAAO;IACL,QAAQ;IACR,KAAK;IACL,MAAM;IACN,iBAAiB;IACjB,WAAW,2BATQ,MAAI,WAEX,KAAgB,cADX,kBAAkB,MAAI,QAAQ,IAQH;IAC5C,QAAQ;GACV;EACF,CAAC;EAED,MAAM,uBAAuB,eAA2B;GACtD,IAAI,CAAC,UAAU,WAAW,GACxB,OAAO,CAAC;GAEV,MAAM,SAAS;GAKf,MAAM,UAJe,MAAI,WAEX,KAAgB,cADX,kBAAkB,MAAI,QAAQ,MAGxB,KAAK,KAAM;GAEpC,MAAM,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,UAAU,KAAK,KAAK,CAAC;GAGlE,OAAO;IACL,UAAU;IACV,KAAK,GAJG,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,UAAU,KAAK,KAAK,CAAC,EAItD;IACV,MAAM,GAAG,EAAE;IACX,OAAO;IACP,QAAQ;IACR,cAAc;IACd,WAAW;IACX,QAAQ;GACV;EACF,CAAC;EAED,MAAM,eAAe,eAAyB;GAC5C,MAAM,OAAO,MAAI,QAAQ;GACzB,MAAM,WAAW,UAAU;GAC3B,MAAM,QAAQ,kBAAkB;GAChC,MAAM,UAAU,gBAAgB,OAAO,QAAQ;GAC/C,IAAI,SAAS,QACX,QAAQ,KAAK;GAEf,OAAO;EACT,CAAC;EAED,SAAS,gBAAoC;GAC3C,OAAO,UAAU,UAAU,IAAI,IAAI,KAAK,MAAI,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,KAAA;EACxE;EAEA,SAAS,kBAAsC;GAC7C,OAAO,UAAU,UAAU,IAAI,IAAI,KAAK,MAAI,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,KAAA;EAC1E;EAEA,SAAS,kBAAsC;GAE7C,OAAO,CADmC,aAAa,QAAQ,aAAa,WACrE,CAAA,CAAiB,SAAS,QAAA,QAAQ,KAAK,UAAU,UAAU,IAC9D,IAAI,KAAK,MAAI,UAAU,CAAC,CAAC,CAAC,WAAW,IACrC,KAAA;EACN;EAEA,SAAS,uBAA2C;GAClD,OAAO,QAAA,aAAa,aAAa,eAAe,UAAU,UAAU,IAChE,IAAI,KAAK,MAAI,UAAU,CAAC,CAAC,CAAC,gBAAgB,IAC1C,KAAA;EACN;EAEA,SAAS,gBAAgB,OAAe,UAA4B;GAClE,MAAM,UAAoB,CAAC;GAC3B,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK,UAC9B,QAAQ,KAAK,CAAC;GAEhB,OAAO;EACT;EAEA,SAAS,YAAY,OAAgB,UAAU,GAAW;GACxD,OAAO,UAAU,KAAA,IAAY,MAAM,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,IAAI,IAAI,OAAO,OAAO;EAC3F;EAEA,SAAS,YAAY,KAAyB;GAC5C,MAAM,SAAS;GAIf,MAAM,WAFQ,OAAO,cADF,kBAAkB,MAAI,QAAQ,MACA,MAExB,KAAK,KAAM;GACpC,MAAM,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,OAAO;GAGpD,OAAO;IACL,KAAK,GAHG,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,OAAO,EAGxC;IACV,MAAM,GAAG,EAAE;IACX,WAAW;GACb;EACF;EAEA,SAAS,iBAAiB,KAAsB;GAC9C,IAAI,CAAC,UAAU,WAAW,GACxB,OAAO;GAET,MAAM,OAAO,MAAI,QAAQ;GACzB,IAAI,SAAS,QACX,OAAO,MAAI,WAAW,MAAM;QAEzB;IACH,MAAM,QAAQ,MAAI,WAAW;IAC7B,MAAM,WAAW,UAAU;IAC3B,OAAO,UAAU,OAAQ,QAAQ,aAAa,KAAK,UAAU;GAC/D;EACF;EAEA,SAAS,aAAmB;GAC1B,IAAI,CAAC,UAAU,YAAY,GACzB;GAEF,IAAI,MAAI,YAAY,IAAI,cACtB,MAAI,cAAc,MAAI,YAAY,IAAI,YAAY;QAGlD,MAAI,cAAc,MAAI,YAAY,IAAI,YAAY;GAGpD,iBAAiB;EACnB;EAEA,SAAS,UAAU,OAAsC;GACvD,MAAM,eAAe;GACrB,MAAI,YAAY,IAAI;GAEpB,IAAI,CAAC,UAAU,SAAS,GACtB;GAEF,MAAM,OAAO,MAAI,SAAS,CAAC,CAAC,sBAAsB;GAClD,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;GACzC,MAAM,UAAU,KAAK,MAAM,KAAK,SAAS;GACzC,IAAI,QAAuB;GAE3B,MAAM,aAAa,SAAiB,YAA0B;IAC5D,MAAM,IAAI,UAAU;IACpB,MAAM,IAAI,UAAU;IAEpB,IAAI,QAAQ,KAAK,MAAM,GAAG,CAAC,KAAK,MAAM,KAAK,MAAM;IACjD,IAAI,QAAQ,GACV,SAAS;IAEX,MAAM,OAAO,MAAI,QAAQ;IACzB,MAAM,OACJ,KAAK,MAAM,SAAS,cAAc,kBAAkB,MAAM,IAAI,kBAAkB;IAClF,IAAI,SAAS,QAAQ;KACnB,IAAI,OAAO;KACX,IAAI,SAAS,GACX,OAAO;KAET,IAAI,MAAI,MAAM,MAAM,QAAQ,OAAO,cACjC,QAAQ;UAEL,IAAI,MAAI,MAAM,MAAM,QAAQ,SAAS,cACxC,OAAO;KAGT,MAAI,cAAc,IAAI;IACxB,OACK,IAAI,SAAS,UAChB,MAAI,gBAAgB,IAAI;SAErB,IAAI,SAAS,UAChB,MAAI,gBAAgB,IAAI;SAGxB,MAAI,qBAAqB,IAAI;IAG/B,iBAAiB;GACnB;GAEA,MAAM,cAAc,cAA6C;IAC/D,IAAI,CAAC,MAAI,UAAU,GACjB;IAEF,IAAI,UAAU,MACZ;IAEF,IAAI;IACJ,IAAI;IAEJ,IAAI,aAAa,WAAW;KAC1B,MAAM,QAAQ,UAAU,QAAQ;KAChC,OAAO,KAAK;KACZ,UAAU,MAAM;KAChB,UAAU,MAAM;IAClB,OACK;KACH,UAAU,UAAU;KACpB,UAAU,UAAU;IACtB;IAEA,QAAQ,4BAA4B;KAClC,UAAU,SAAS,OAAO;KAC1B,QAAQ;IACV,CAAC;GACH;GAEA,MAAM,kBAAwB;IAC5B,IAAI,UAAU,MAAM;KAClB,qBAAqB,KAAK;KAC1B,QAAQ;IACV;IACA,MAAI,YAAY,KAAK;IACrB,SAAS,oBAAoB,aAAa,UAAU;IACpD,SAAS,oBAAoB,aAAa,UAAU;IACpD,SAAS,oBAAoB,WAAW,SAAS;IACjD,SAAS,oBAAoB,YAAY,SAAS;IAElD,IAAI,MAAI,QAAQ,MAAM,QACpB,MAAI,UAAU,QAAQ;SAEnB,IAAI,MAAI,UAAU,KAAK,MAAI,QAAQ,MAAM,UAC5C,MAAI,UAAU,QAAQ;SAEnB,IAAI,MAAI,eAAe,KAAK,MAAI,QAAQ,MAAM,UACjD,MAAI,UAAU,aAAa;GAE/B;GAEA,SAAS,iBAAiB,aAAa,UAAU;GACjD,SAAS,iBAAiB,aAAa,UAAU;GACjD,SAAS,iBAAiB,WAAW,SAAS;GAC9C,SAAS,iBAAiB,YAAY,SAAS;GAG/C,MAAM,eAAe;GACrB,IAAI;GACJ,IAAI;GACJ,IAAI,aAAa,cAAc;IAC7B,MAAM,QAAQ,aAAa,QAAQ;IACnC,OAAO,KAAK;IACZ,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,OACK;IACH,UAAU,aAAa;IACvB,UAAU,aAAa;GACzB;GACA,UAAU,SAAS,OAAO;EAC5B;EAEA,SAAS,cAAc,KAAmB;GACxC,MAAM,OAAO,MAAI,QAAQ;GACzB,IAAI,SAAS,QAAQ;IACnB,IAAI,UAAU;IAEd,IAAI,MAAI,MAAM,MAAM,QAAQ,UAAU,cACpC,WAAW;IAGb,MAAI,cAAc,OAAO;IACzB,MAAI,UAAU,QAAQ;GACxB,OACK,IAAI,SAAS,UAAU;IAC1B,MAAI,gBAAgB,GAAG;IACvB,IAAI,MAAI,UAAU,GAChB,MAAI,UAAU,QAAQ;GAC1B,OACK,IAAI,SAAS,UAAU;IAC1B,MAAI,gBAAgB,GAAG;IACvB,IAAI,MAAI,eAAe,GACrB,MAAI,UAAU,aAAa;GAE/B,OACK,IAAI,SAAS,eAChB,MAAI,qBAAqB,GAAG;GAG9B,iBAAiB;EACnB;EAEA,SAAS,mBAAyB;GAChC,IAAI,EAAE,UAAU,YAAY,KAAK,UAAU,cAAc,IACvD;GAEF,eAAe;IACb,MAAM,OAAO,UAAU,UAAU,IAAI,IAAI,KAAK,MAAI,UAAU,CAAC,oBAAI,IAAI,KAAK;IAC1E,KAAK,SAAS,MAAI,YAAY,CAAC;IAC/B,KAAK,WAAW,MAAI,cAAc,CAAC;IACnC,KAAK,WAAW,MAAI,cAAc,KAAK,CAAC;IACxC,KAAK,gBAAgB,MAAI,mBAAmB,KAAK,CAAC;IAClD,MAAI,YAAY,IAAI;GACtB,CAAC;EACH;EAEA,MACE,kBACM;GACJ,MAAI,cAAc,cAAc,CAAC;GACjC,MAAI,gBAAgB,gBAAgB,CAAC;GACrC,MAAI,gBAAgB,gBAAgB,CAAC;GACrC,MAAI,qBAAqB,qBAAqB,CAAC;EACjD,CACF;EAEA,gBAAgB;GACd,MAAI,cAAc,cAAc,CAAC;GACjC,MAAI,gBAAgB,gBAAgB,CAAC;GACrC,MAAI,gBAAgB,gBAAgB,CAAC;GACrC,MAAI,qBAAqB,qBAAqB,CAAC;EACjD,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAgHM,OAAA;IA/GJ,MAAK;IACL,cAAW;IACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,UAAA,CAAc,QAAA,WAAU,CAAA,CAAA;GAEvC,GAAA,CAAA,mBAkEM,OAAA,EAlEA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,eAAc,CAAA,EAAA,GAAA,CAC5B,mBAwDM,OAAA,EAxDA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA,EAAA,GAAA;IAClB,mBAQS,UAAA;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,QAAW,SAAA,UAAQ,OAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,YAAA,KAAW,CAAA,GAAA,IAAA,UAAA;IAE5B,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EAAI,GAAA,OAE7B,CAAA;IACA,mBAQS,UAAA;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,QAAW,SAAA,UAAQ,SAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,eAAA,KAAc,CAAA,GAAA,IAAA,UAAA;IAGvB,WAAA,SADR,UAAA,GAAA,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;IACrB,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEQ,WAAA,SADR,UAAA,GAAA,mBASS,UAAA;;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,QAAW,SAAA,UAAQ,SAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,eAAA,KAAc,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAIvB,gBAAA,SADR,UAAA,GAAA,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,EAAA,OAAA,UAAA,CAAA,CAAA;IACrB,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA;IAGQ,gBAAA,SADR,UAAA,GAAA,mBASS,UAAA;;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK;MAAA,QAAW,SAAA,UAAQ;MAAA,OAAA;KAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,oBAAA,OAAmB,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;GAGtC,GAAA,CAAA,GAAA,mBAOS,UAAA;IANP,MAAK;IACL,cAAW;IACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;IAChB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAU;GAEf,GAAA,gBAAA,OAAA,KAAM,GAAA,CAAA,CAAA,GAAA,CAAA,GAIb,mBAsCM,OAAA;IArCA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,cAAU,UAAY,SAAA;IACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;IACnB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;IAC3B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;;IAE7B,mBAGE,OAAA;KAFC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,OAAK,eAAE,SAAA,KAAQ;;IAGlB,mBAGE,OAAA;KAFC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,OAAK,eAAE,eAAA,KAAc;;IAIhB,uBAAA,SADR,UAAA,GAAA,mBAIE,OAAA;;KAFC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,gBAAe,CAAA;KACzB,OAAK,eAAE,qBAAA,KAAoB;;KAG9B,UAAA,IAAA,GAAA,mBAaM,UAAA,MAAA,WAZU,aAAA,QAAP,QAAG;KADZ,OAAA,UAAA,GAAA,mBAaM,OAAA;MAXH,KAAG,OAAS;MACb,MAAK;MACJ,iBAAe,iBAAiB,GAAG;MACnC,OAAK,eAAA,CAAc,MAAA,EAAA,CAAE,CAAC,YAAW,EAAA,UAAa,iBAAiB,GAAG,EAAA,CAAA,GAAuB,OAAA,SAAA,MAAQ,GAAI,IAAI,SAAQ,CAAA,CAAG,SAAQ,GAAA,GAAA,GAAA,CAAA;MAI5H,OAAK,eAAE,YAAY,GAAG,CAAA;MACtB,UAAK,WAAE,cAAc,GAAG;KAEtB,GAAA,gBAAA,GAAG,GAAA,IAAA,UAAA"}
|
|
1
|
+
{"version":3,"file":"RuiTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/time-picker/RuiTimePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, ref, type StyleValue, watch } from 'vue';\nimport { timePickerStyles } from '@/components/time-picker/time-picker-styles';\nimport { TimeAccuracy } from '@/consts/time-accuracy';\nimport { assert } from '@/utils/assert';\n\nexport type TimePickerSelection = 'hour' | 'minute' | 'second' | 'millisecond';\n\nexport interface RuiTimePickerProps {\n accuracy?: TimeAccuracy;\n borderless?: boolean;\n}\n\nconst modelValue = defineModel<Date | undefined>({ required: true });\n\nconst selectedHour = defineModel<number | undefined>('hour');\nconst selectedMinute = defineModel<number | undefined>('minute');\nconst selectedSecond = defineModel<number | undefined>('second');\nconst selectedMillisecond = defineModel<number | undefined>('millisecond');\nconst editMode = defineModel<TimePickerSelection>('selection', { default: 'hour' });\n\nconst { accuracy = TimeAccuracy.MINUTE, borderless = false } = defineProps<RuiTimePickerProps>();\n\nconst ui = timePickerStyles();\n\nconst FULL_CIRCLE = 360;\nconst TWELVE_HOURS = 12;\n\nconst totalItemsPerMode: Record<TimePickerSelection, number> = {\n hour: 12,\n minute: 60,\n second: 60,\n millisecond: 1000,\n};\n\nconst intervals: Record<TimePickerSelection, number> = {\n hour: 1,\n minute: 5,\n second: 5,\n millisecond: 100,\n};\n\nconst isDragging = ref<boolean>(false);\nconst clockFace = useTemplateRef<InstanceType<typeof HTMLDivElement>>('clockFace');\n\nconst showSecond = computed<boolean>(\n () => accuracy === TimeAccuracy.SECOND || accuracy === TimeAccuracy.MILLISECOND,\n);\nconst showMillisecond = computed<boolean>(() => accuracy === TimeAccuracy.MILLISECOND);\n\nconst period = computed<'PM' | 'AM'>(() =>\n isDefined(selectedHour) && get(selectedHour) >= TWELVE_HOURS ? 'PM' : 'AM',\n);\n\nconst displayHour = computed<number | undefined>(() => {\n if (!isDefined(selectedHour)) {\n return undefined;\n }\n const hourValue = get(selectedHour);\n const hour = hourValue % TWELVE_HOURS;\n return hour === 0 ? TWELVE_HOURS : hour;\n});\n\nconst editedValue = computed<number | undefined>(() => {\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour);\n }\n else if (mode === 'minute') {\n return get(selectedMinute);\n }\n else if (mode === 'second') {\n return get(selectedSecond);\n }\n else {\n return get(selectedMillisecond);\n }\n});\n\nconst displayClockHandCircle = computed<boolean>(() => {\n const mode = get(editMode);\n if (mode === 'hour' || !isDefined(editedValue)) {\n return false;\n }\n else {\n const interval = intervals[mode];\n const value = get(editedValue);\n return value % interval !== 0;\n }\n});\n\nconst dotStyle = computed<StyleValue>(() => ({\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n}));\n\nconst clockHandStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n return {\n height: '36%',\n top: '14%',\n left: '50%',\n transformOrigin: 'bottom center',\n transform: `translateX(-50%) rotate(${angle}deg)`,\n zIndex: 10,\n };\n});\n\nconst clockHandCircleStyle = computed<StyleValue>(() => {\n if (!isDefined(editedValue)) {\n return {};\n }\n const radius = '38%';\n const currentValue = get(editedValue);\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = currentValue * (FULL_CIRCLE / totalItems);\n\n const radians = (angle * Math.PI) / 180;\n\n const x = 50 + parseFloat(radius) * Math.cos(radians - Math.PI / 2);\n const y = 50 + parseFloat(radius) * Math.sin(radians - Math.PI / 2);\n\n return {\n position: 'absolute',\n top: `${y}%`,\n left: `${x}%`,\n width: '10px',\n height: '10px',\n borderRadius: '50%',\n transform: 'translate(-50%, -50%)',\n zIndex: 11,\n };\n});\n\nconst clockNumbers = computed<number[]>(() => {\n const mode = get(editMode);\n const interval = intervals[mode];\n const total = totalItemsPerMode[mode];\n const numbers = generateNumbers(total, interval);\n if (mode === 'hour') {\n numbers[0] = 12;\n }\n return numbers;\n});\n\nfunction getModelHours(): number | undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getHours() : undefined;\n}\n\nfunction getModelMinutes(): number | undefined {\n return isDefined(modelValue) ? new Date(get(modelValue)).getMinutes() : undefined;\n}\n\nfunction getModelSeconds(): number | undefined {\n const acceptedAccuracy: TimeAccuracy[] = [TimeAccuracy.SECOND, TimeAccuracy.MILLISECOND];\n return acceptedAccuracy.includes(accuracy) && isDefined(modelValue)\n ? new Date(get(modelValue)).getSeconds()\n : undefined;\n}\n\nfunction getModelMilliseconds(): number | undefined {\n return accuracy === TimeAccuracy.MILLISECOND && isDefined(modelValue)\n ? new Date(get(modelValue)).getMilliseconds()\n : undefined;\n}\n\nfunction generateNumbers(total: number, interval: number): number[] {\n const numbers: number[] = [];\n for (let i = 0; i < total; i += interval) {\n numbers.push(i);\n }\n return numbers;\n}\n\nfunction formatValue(value?: number, padding = 2): string {\n return value !== undefined ? value.toString().padStart(padding, '0') : '-'.repeat(padding);\n}\n\nfunction numberStyle(num: number): StyleValue {\n const radius = '38%';\n const totalItems = totalItemsPerMode[get(editMode)];\n const angle = num * (FULL_CIRCLE / totalItems) - 90;\n\n const radians = (angle * Math.PI) / 180;\n const x = 50 + parseFloat(radius) * Math.cos(radians);\n const y = 50 + parseFloat(radius) * Math.sin(radians);\n\n return {\n top: `${y}%`,\n left: `${x}%`,\n transform: 'translate(-50%, -50%)',\n };\n}\n\nfunction isSelectedNumber(num: number): boolean {\n if (!isDefined(editedValue)) {\n return false;\n }\n const mode = get(editMode);\n if (mode === 'hour') {\n return get(displayHour) === num;\n }\n else {\n const value = get(editedValue);\n const interval = intervals[mode];\n return value === num || (value % interval === 0 && value === num);\n }\n}\n\nfunction toggleAmPm(): void {\n if (!isDefined(selectedHour)) {\n return;\n }\n if (get(selectedHour) < TWELVE_HOURS) {\n set(selectedHour, get(selectedHour) + TWELVE_HOURS);\n }\n else {\n set(selectedHour, get(selectedHour) - TWELVE_HOURS);\n }\n\n updateModelValue();\n}\n\nfunction startDrag(event: MouseEvent | TouchEvent): void {\n event.preventDefault();\n set(isDragging, true);\n\n if (!isDefined(clockFace))\n return;\n\n const rect = get(clockFace).getBoundingClientRect();\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + rect.height / 2;\n let rafId: number | null = null;\n\n const applyMove = (clientX: number, clientY: number): void => {\n const x = clientX - centerX;\n const y = clientY - centerY;\n\n let angle = Math.atan2(y, x) * (180 / Math.PI) + 90;\n if (angle < 0)\n angle += FULL_CIRCLE;\n\n const mode = get(editMode);\n const unit =\n Math.round(angle / (FULL_CIRCLE / totalItemsPerMode[mode])) % totalItemsPerMode[mode];\n if (mode === 'hour') {\n let hour = unit;\n if (hour === 0)\n hour = TWELVE_HOURS;\n\n if (get(period) === 'PM' && hour < TWELVE_HOURS) {\n hour += TWELVE_HOURS;\n }\n else if (get(period) === 'AM' && hour === TWELVE_HOURS) {\n hour = 0;\n }\n\n set(selectedHour, hour);\n }\n else if (mode === 'minute') {\n set(selectedMinute, unit);\n }\n else if (mode === 'second') {\n set(selectedSecond, unit);\n }\n else {\n set(selectedMillisecond, unit);\n }\n\n updateModelValue();\n };\n\n const handleMove = (moveEvent: MouseEvent | TouchEvent): void => {\n if (!get(isDragging))\n return;\n\n if (rafId !== null)\n return;\n\n let clientX: number;\n let clientY: number;\n\n if ('touches' in moveEvent) {\n const touch = moveEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = moveEvent.clientX;\n clientY = moveEvent.clientY;\n }\n\n rafId = requestAnimationFrame(() => {\n applyMove(clientX, clientY);\n rafId = null;\n });\n };\n\n const handleEnd = (): void => {\n if (rafId !== null) {\n cancelAnimationFrame(rafId);\n rafId = null;\n }\n set(isDragging, false);\n document.removeEventListener('mousemove', handleMove);\n document.removeEventListener('touchmove', handleMove);\n document.removeEventListener('mouseup', handleEnd);\n document.removeEventListener('touchend', handleEnd);\n\n if (get(editMode) === 'hour') {\n set(editMode, 'minute');\n }\n else if (get(showSecond) && get(editMode) === 'minute') {\n set(editMode, 'second');\n }\n else if (get(showMillisecond) && get(editMode) === 'second') {\n set(editMode, 'millisecond');\n }\n };\n\n document.addEventListener('mousemove', handleMove);\n document.addEventListener('touchmove', handleMove);\n document.addEventListener('mouseup', handleEnd);\n document.addEventListener('touchend', handleEnd);\n\n // Apply initial position synchronously for immediate feedback\n const initialEvent = event;\n let clientX: number;\n let clientY: number;\n if ('touches' in initialEvent) {\n const touch = initialEvent.touches[0];\n assert(touch);\n clientX = touch.clientX;\n clientY = touch.clientY;\n }\n else {\n clientX = initialEvent.clientX;\n clientY = initialEvent.clientY;\n }\n applyMove(clientX, clientY);\n}\n\nfunction selectByClick(num: number): void {\n const mode = get(editMode);\n if (mode === 'hour') {\n let newHour = num;\n\n if (get(period) === 'PM' && newHour < TWELVE_HOURS) {\n newHour += TWELVE_HOURS;\n }\n\n set(selectedHour, newHour);\n set(editMode, 'minute');\n }\n else if (mode === 'minute') {\n set(selectedMinute, num);\n if (get(showSecond))\n set(editMode, 'second');\n }\n else if (mode === 'second') {\n set(selectedSecond, num);\n if (get(showMillisecond)) {\n set(editMode, 'millisecond');\n }\n }\n else if (mode === 'millisecond') {\n set(selectedMillisecond, num);\n }\n\n updateModelValue();\n}\n\nfunction updateModelValue(): void {\n if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n return;\n }\n nextTick(() => {\n const date = isDefined(modelValue) ? new Date(get(modelValue)) : new Date();\n date.setHours(get(selectedHour));\n date.setMinutes(get(selectedMinute));\n date.setSeconds(get(selectedSecond) ?? 0);\n date.setMilliseconds(get(selectedMillisecond) ?? 0);\n set(modelValue, date);\n });\n}\n\nwatch(\n modelValue,\n () => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n },\n);\n\nonMounted(() => {\n set(selectedHour, getModelHours());\n set(selectedMinute, getModelMinutes());\n set(selectedSecond, getModelSeconds());\n set(selectedMillisecond, getModelMilliseconds());\n});\n</script>\n\n<template>\n <div\n role=\"group\"\n aria-label=\"Time picker\"\n :class=\"ui.root({ bordered: !borderless })\"\n >\n <div :class=\"ui.digitalDisplay()\">\n <div :class=\"ui.time()\">\n <button\n type=\"button\"\n aria-label=\"Select hours\"\n :aria-pressed=\"editMode === 'hour'\"\n :class=\"ui.digit({ active: editMode === 'hour' })\"\n @click=\"editMode = 'hour'\"\n >\n {{ formatValue(displayHour) }}\n </button>\n <div :class=\"ui.separator()\">\n :\n </div>\n <button\n type=\"button\"\n aria-label=\"Select minutes\"\n :aria-pressed=\"editMode === 'minute'\"\n :class=\"ui.digit({ active: editMode === 'minute' })\"\n @click=\"editMode = 'minute'\"\n >\n {{ formatValue(selectedMinute) }}\n </button>\n <div\n v-if=\"showSecond\"\n :class=\"ui.separator()\"\n >\n :\n </div>\n <button\n v-if=\"showSecond\"\n type=\"button\"\n aria-label=\"Select seconds\"\n :aria-pressed=\"editMode === 'second'\"\n :class=\"ui.digit({ active: editMode === 'second' })\"\n @click=\"editMode = 'second'\"\n >\n {{ formatValue(selectedSecond) }}\n </button>\n\n <div\n v-if=\"showMillisecond\"\n :class=\"ui.separator({ class: 'text-lg' })\"\n >\n .\n </div>\n\n <button\n v-if=\"showMillisecond\"\n type=\"button\"\n aria-label=\"Select milliseconds\"\n :aria-pressed=\"editMode === 'millisecond'\"\n :class=\"ui.digit({ active: editMode === 'millisecond', class: 'text-lg' })\"\n @click=\"editMode = 'millisecond'\"\n >\n {{ formatValue(selectedMillisecond, 3) }}\n </button>\n </div>\n <button\n type=\"button\"\n aria-label=\"Toggle AM/PM\"\n :class=\"ui.period()\"\n @click=\"toggleAmPm()\"\n >\n {{ period }}\n </button>\n </div>\n\n <div\n ref=\"clockFace\"\n role=\"listbox\"\n :aria-label=\"`Select ${editMode}`\"\n :class=\"ui.clockFace()\"\n @mousedown=\"startDrag($event)\"\n @touchstart=\"startDrag($event)\"\n >\n <div\n :class=\"ui.centerDot()\"\n :style=\"dotStyle\"\n />\n\n <div\n :class=\"ui.clockHand()\"\n :style=\"clockHandStyle\"\n />\n\n <div\n v-if=\"displayClockHandCircle\"\n :class=\"ui.clockHandCircle()\"\n :style=\"clockHandCircleStyle\"\n />\n\n <div\n v-for=\"num in clockNumbers\"\n :key=\"`num-${num}`\"\n role=\"option\"\n :aria-selected=\"isSelectedNumber(num)\"\n :class=\"[\n ui.clockNumber({ selected: isSelectedNumber(num) }),\n `rui-${editMode}-${num.toString().padStart(2, '0')}`,\n ]\"\n :style=\"numberStyle(num)\"\n @click=\"selectByClick(num)\"\n >\n {{ num }}\n </div>\n </div>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;AAyBA,IAAM,cAAc;AACpB,IAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAbrB,MAAM,aAAa,SAA6B,SAAA,YAAmB;EAEnE,MAAM,eAAe,SAA+B,SAAC,MAAM;EAC3D,MAAM,iBAAiB,SAA+B,SAAC,QAAQ;EAC/D,MAAM,iBAAiB,SAA+B,SAAC,QAAQ;EAC/D,MAAM,sBAAsB,SAA+B,SAAC,aAAa;EACzE,MAAM,WAAW,SAAgC,SAAC,WAAgC;EAIlF,MAAM,KAAK,iBAAiB;EAK5B,MAAM,oBAAyD;GAC7D,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,aAAa;EACf;EAEA,MAAM,YAAiD;GACrD,MAAM;GACN,QAAQ;GACR,QAAQ;GACR,aAAa;EACf;EAEA,MAAM,aAAa,IAAa,KAAK;EACrC,MAAM,YAAY,eAAoD,WAAW;EAEjF,MAAM,aAAa,eACX,QAAA,aAAa,aAAa,UAAU,QAAA,aAAa,aAAa,WACtE;EACA,MAAM,kBAAkB,eAAwB,QAAA,aAAa,aAAa,WAAW;EAErF,MAAM,SAAS,eACb,UAAU,YAAY,KAAK,IAAI,YAAY,KAAK,eAAe,OAAO,IACxE;EAEA,MAAM,cAAc,eAAmC;GACrD,IAAI,CAAC,UAAU,YAAY,GACzB;GAGF,MAAM,OADY,IAAI,YACT,IAAY;GACzB,OAAO,SAAS,IAAI,eAAe;EACrC,CAAC;EAED,MAAM,cAAc,eAAmC;GACrD,MAAM,OAAO,IAAI,QAAQ;GACzB,IAAI,SAAS,QACX,OAAO,IAAI,WAAW;QAEnB,IAAI,SAAS,UAChB,OAAO,IAAI,cAAc;QAEtB,IAAI,SAAS,UAChB,OAAO,IAAI,cAAc;QAGzB,OAAO,IAAI,mBAAmB;EAElC,CAAC;EAED,MAAM,yBAAyB,eAAwB;GACrD,MAAM,OAAO,IAAI,QAAQ;GACzB,IAAI,SAAS,UAAU,CAAC,UAAU,WAAW,GAC3C,OAAO;QAEJ;IACH,MAAM,WAAW,UAAU;IAE3B,OADc,IAAI,WACX,IAAQ,aAAa;GAC9B;EACF,CAAC;EAED,MAAM,WAAW,gBAA4B;GAC3C,KAAK;GACL,MAAM;GACN,WAAW;EACb,EAAE;EAEF,MAAM,iBAAiB,eAA2B;GAChD,IAAI,CAAC,UAAU,WAAW,GACxB,OAAO,CAAC;GAMV,OAAO;IACL,QAAQ;IACR,KAAK;IACL,MAAM;IACN,iBAAiB;IACjB,WAAW,2BATQ,IAAI,WAEX,KAAgB,cADX,kBAAkB,IAAI,QAAQ,IAQH;IAC5C,QAAQ;GACV;EACF,CAAC;EAED,MAAM,uBAAuB,eAA2B;GACtD,IAAI,CAAC,UAAU,WAAW,GACxB,OAAO,CAAC;GAEV,MAAM,SAAS;GAKf,MAAM,UAJe,IAAI,WAEX,KAAgB,cADX,kBAAkB,IAAI,QAAQ,MAGxB,KAAK,KAAM;GAEpC,MAAM,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,UAAU,KAAK,KAAK,CAAC;GAGlE,OAAO;IACL,UAAU;IACV,KAAK,GAJG,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,UAAU,KAAK,KAAK,CAAC,EAItD;IACV,MAAM,GAAG,EAAE;IACX,OAAO;IACP,QAAQ;IACR,cAAc;IACd,WAAW;IACX,QAAQ;GACV;EACF,CAAC;EAED,MAAM,eAAe,eAAyB;GAC5C,MAAM,OAAO,IAAI,QAAQ;GACzB,MAAM,WAAW,UAAU;GAC3B,MAAM,QAAQ,kBAAkB;GAChC,MAAM,UAAU,gBAAgB,OAAO,QAAQ;GAC/C,IAAI,SAAS,QACX,QAAQ,KAAK;GAEf,OAAO;EACT,CAAC;EAED,SAAS,gBAAoC;GAC3C,OAAO,UAAU,UAAU,IAAI,IAAI,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,KAAA;EACxE;EAEA,SAAS,kBAAsC;GAC7C,OAAO,UAAU,UAAU,IAAI,IAAI,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,WAAW,IAAI,KAAA;EAC1E;EAEA,SAAS,kBAAsC;GAE7C,OAAO,CADmC,aAAa,QAAQ,aAAa,WACrE,CAAA,CAAiB,SAAS,QAAA,QAAQ,KAAK,UAAU,UAAU,IAC9D,IAAI,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,WAAW,IACrC,KAAA;EACN;EAEA,SAAS,uBAA2C;GAClD,OAAO,QAAA,aAAa,aAAa,eAAe,UAAU,UAAU,IAChE,IAAI,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,gBAAgB,IAC1C,KAAA;EACN;EAEA,SAAS,gBAAgB,OAAe,UAA4B;GAClE,MAAM,UAAoB,CAAC;GAC3B,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK,UAC9B,QAAQ,KAAK,CAAC;GAEhB,OAAO;EACT;EAEA,SAAS,YAAY,OAAgB,UAAU,GAAW;GACxD,OAAO,UAAU,KAAA,IAAY,MAAM,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,IAAI,IAAI,OAAO,OAAO;EAC3F;EAEA,SAAS,YAAY,KAAyB;GAC5C,MAAM,SAAS;GAIf,MAAM,WAFQ,OAAO,cADF,kBAAkB,IAAI,QAAQ,MACA,MAExB,KAAK,KAAM;GACpC,MAAM,IAAI,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,OAAO;GAGpD,OAAO;IACL,KAAK,GAHG,KAAK,WAAW,MAAM,IAAI,KAAK,IAAI,OAAO,EAGxC;IACV,MAAM,GAAG,EAAE;IACX,WAAW;GACb;EACF;EAEA,SAAS,iBAAiB,KAAsB;GAC9C,IAAI,CAAC,UAAU,WAAW,GACxB,OAAO;GAET,MAAM,OAAO,IAAI,QAAQ;GACzB,IAAI,SAAS,QACX,OAAO,IAAI,WAAW,MAAM;QAEzB;IACH,MAAM,QAAQ,IAAI,WAAW;IAC7B,MAAM,WAAW,UAAU;IAC3B,OAAO,UAAU,OAAQ,QAAQ,aAAa,KAAK,UAAU;GAC/D;EACF;EAEA,SAAS,aAAmB;GAC1B,IAAI,CAAC,UAAU,YAAY,GACzB;GAEF,IAAI,IAAI,YAAY,IAAI,cACtB,IAAI,cAAc,IAAI,YAAY,IAAI,YAAY;QAGlD,IAAI,cAAc,IAAI,YAAY,IAAI,YAAY;GAGpD,iBAAiB;EACnB;EAEA,SAAS,UAAU,OAAsC;GACvD,MAAM,eAAe;GACrB,IAAI,YAAY,IAAI;GAEpB,IAAI,CAAC,UAAU,SAAS,GACtB;GAEF,MAAM,OAAO,IAAI,SAAS,CAAC,CAAC,sBAAsB;GAClD,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;GACzC,MAAM,UAAU,KAAK,MAAM,KAAK,SAAS;GACzC,IAAI,QAAuB;GAE3B,MAAM,aAAa,SAAiB,YAA0B;IAC5D,MAAM,IAAI,UAAU;IACpB,MAAM,IAAI,UAAU;IAEpB,IAAI,QAAQ,KAAK,MAAM,GAAG,CAAC,KAAK,MAAM,KAAK,MAAM;IACjD,IAAI,QAAQ,GACV,SAAS;IAEX,MAAM,OAAO,IAAI,QAAQ;IACzB,MAAM,OACJ,KAAK,MAAM,SAAS,cAAc,kBAAkB,MAAM,IAAI,kBAAkB;IAClF,IAAI,SAAS,QAAQ;KACnB,IAAI,OAAO;KACX,IAAI,SAAS,GACX,OAAO;KAET,IAAI,IAAI,MAAM,MAAM,QAAQ,OAAO,cACjC,QAAQ;UAEL,IAAI,IAAI,MAAM,MAAM,QAAQ,SAAS,cACxC,OAAO;KAGT,IAAI,cAAc,IAAI;IACxB,OACK,IAAI,SAAS,UAChB,IAAI,gBAAgB,IAAI;SAErB,IAAI,SAAS,UAChB,IAAI,gBAAgB,IAAI;SAGxB,IAAI,qBAAqB,IAAI;IAG/B,iBAAiB;GACnB;GAEA,MAAM,cAAc,cAA6C;IAC/D,IAAI,CAAC,IAAI,UAAU,GACjB;IAEF,IAAI,UAAU,MACZ;IAEF,IAAI;IACJ,IAAI;IAEJ,IAAI,aAAa,WAAW;KAC1B,MAAM,QAAQ,UAAU,QAAQ;KAChC,OAAO,KAAK;KACZ,UAAU,MAAM;KAChB,UAAU,MAAM;IAClB,OACK;KACH,UAAU,UAAU;KACpB,UAAU,UAAU;IACtB;IAEA,QAAQ,4BAA4B;KAClC,UAAU,SAAS,OAAO;KAC1B,QAAQ;IACV,CAAC;GACH;GAEA,MAAM,kBAAwB;IAC5B,IAAI,UAAU,MAAM;KAClB,qBAAqB,KAAK;KAC1B,QAAQ;IACV;IACA,IAAI,YAAY,KAAK;IACrB,SAAS,oBAAoB,aAAa,UAAU;IACpD,SAAS,oBAAoB,aAAa,UAAU;IACpD,SAAS,oBAAoB,WAAW,SAAS;IACjD,SAAS,oBAAoB,YAAY,SAAS;IAElD,IAAI,IAAI,QAAQ,MAAM,QACpB,IAAI,UAAU,QAAQ;SAEnB,IAAI,IAAI,UAAU,KAAK,IAAI,QAAQ,MAAM,UAC5C,IAAI,UAAU,QAAQ;SAEnB,IAAI,IAAI,eAAe,KAAK,IAAI,QAAQ,MAAM,UACjD,IAAI,UAAU,aAAa;GAE/B;GAEA,SAAS,iBAAiB,aAAa,UAAU;GACjD,SAAS,iBAAiB,aAAa,UAAU;GACjD,SAAS,iBAAiB,WAAW,SAAS;GAC9C,SAAS,iBAAiB,YAAY,SAAS;GAG/C,MAAM,eAAe;GACrB,IAAI;GACJ,IAAI;GACJ,IAAI,aAAa,cAAc;IAC7B,MAAM,QAAQ,aAAa,QAAQ;IACnC,OAAO,KAAK;IACZ,UAAU,MAAM;IAChB,UAAU,MAAM;GAClB,OACK;IACH,UAAU,aAAa;IACvB,UAAU,aAAa;GACzB;GACA,UAAU,SAAS,OAAO;EAC5B;EAEA,SAAS,cAAc,KAAmB;GACxC,MAAM,OAAO,IAAI,QAAQ;GACzB,IAAI,SAAS,QAAQ;IACnB,IAAI,UAAU;IAEd,IAAI,IAAI,MAAM,MAAM,QAAQ,UAAU,cACpC,WAAW;IAGb,IAAI,cAAc,OAAO;IACzB,IAAI,UAAU,QAAQ;GACxB,OACK,IAAI,SAAS,UAAU;IAC1B,IAAI,gBAAgB,GAAG;IACvB,IAAI,IAAI,UAAU,GAChB,IAAI,UAAU,QAAQ;GAC1B,OACK,IAAI,SAAS,UAAU;IAC1B,IAAI,gBAAgB,GAAG;IACvB,IAAI,IAAI,eAAe,GACrB,IAAI,UAAU,aAAa;GAE/B,OACK,IAAI,SAAS,eAChB,IAAI,qBAAqB,GAAG;GAG9B,iBAAiB;EACnB;EAEA,SAAS,mBAAyB;GAChC,IAAI,EAAE,UAAU,YAAY,KAAK,UAAU,cAAc,IACvD;GAEF,eAAe;IACb,MAAM,OAAO,UAAU,UAAU,IAAI,IAAI,KAAK,IAAI,UAAU,CAAC,oBAAI,IAAI,KAAK;IAC1E,KAAK,SAAS,IAAI,YAAY,CAAC;IAC/B,KAAK,WAAW,IAAI,cAAc,CAAC;IACnC,KAAK,WAAW,IAAI,cAAc,KAAK,CAAC;IACxC,KAAK,gBAAgB,IAAI,mBAAmB,KAAK,CAAC;IAClD,IAAI,YAAY,IAAI;GACtB,CAAC;EACH;EAEA,MACE,kBACM;GACJ,IAAI,cAAc,cAAc,CAAC;GACjC,IAAI,gBAAgB,gBAAgB,CAAC;GACrC,IAAI,gBAAgB,gBAAgB,CAAC;GACrC,IAAI,qBAAqB,qBAAqB,CAAC;EACjD,CACF;EAEA,gBAAgB;GACd,IAAI,cAAc,cAAc,CAAC;GACjC,IAAI,gBAAgB,gBAAgB,CAAC;GACrC,IAAI,gBAAgB,gBAAgB,CAAC;GACrC,IAAI,qBAAqB,qBAAqB,CAAC;EACjD,CAAC;;GAIC,OAAA,UAAA,GAAA,mBAgHM,OAAA;IA/GJ,MAAK;IACL,cAAW;IACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,UAAA,CAAc,QAAA,WAAU,CAAA,CAAA;GAEvC,GAAA,CAAA,mBAkEM,OAAA,EAlEA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,eAAc,CAAA,EAAA,GAAA,CAC5B,mBAwDM,OAAA,EAxDA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,KAAI,CAAA,EAAA,GAAA;IAClB,mBAQS,UAAA;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,QAAW,SAAA,UAAQ,OAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,YAAA,KAAW,CAAA,GAAA,IAAA,UAAA;IAE5B,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA,EAAI,GAAA,OAE7B,CAAA;IACA,mBAQS,UAAA;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,QAAW,SAAA,UAAQ,SAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,eAAA,KAAc,CAAA,GAAA,IAAA,UAAA;IAGvB,WAAA,SADR,UAAA,GAAA,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;IACrB,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEQ,WAAA,SADR,UAAA,GAAA,mBASS,UAAA;;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK,EAAA,QAAW,SAAA,UAAQ,SAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,eAAA,KAAc,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAIvB,gBAAA,SADR,UAAA,GAAA,mBAKM,OAAA;;KAHH,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,EAAA,OAAA,UAAA,CAAA,CAAA;IACrB,GAAA,OAED,CAAA,KAAA,mBAAA,IAAA,IAAA;IAGQ,gBAAA,SADR,UAAA,GAAA,mBASS,UAAA;;KAPP,MAAK;KACL,cAAW;KACV,gBAAc,SAAA,UAAQ;KACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,MAAK;MAAA,QAAW,SAAA,UAAQ;MAAA,OAAA;KAAA,CAAA,CAAA;KAClC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,SAAA,QAAQ;IAEb,GAAA,gBAAA,YAAY,oBAAA,OAAmB,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;GAGtC,GAAA,CAAA,GAAA,mBAOS,UAAA;IANP,MAAK;IACL,cAAW;IACV,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,OAAM,CAAA;IAChB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,WAAU;GAEf,GAAA,gBAAA,OAAA,KAAM,GAAA,CAAA,CAAA,GAAA,CAAA,GAIb,mBAsCM,OAAA;IArCA,SAAA;IAAJ,KAAI;IACJ,MAAK;IACJ,cAAU,UAAY,SAAA;IACtB,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;IACnB,aAAS,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;IAC3B,cAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAU,MAAM;;IAE7B,mBAGE,OAAA;KAFC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,OAAK,eAAE,SAAA,KAAQ;;IAGlB,mBAGE,OAAA;KAFC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,UAAS,CAAA;KACnB,OAAK,eAAE,eAAA,KAAc;;IAIhB,uBAAA,SADR,UAAA,GAAA,mBAIE,OAAA;;KAFC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAC,gBAAe,CAAA;KACzB,OAAK,eAAE,qBAAA,KAAoB;;KAG9B,UAAA,IAAA,GAAA,mBAaM,UAAA,MAAA,WAZU,aAAA,QAAP,QAAG;KADZ,OAAA,UAAA,GAAA,mBAaM,OAAA;MAXH,KAAG,OAAS;MACb,MAAK;MACJ,iBAAe,iBAAiB,GAAG;MACnC,OAAK,eAAA,CAAc,MAAA,EAAA,CAAE,CAAC,YAAW,EAAA,UAAa,iBAAiB,GAAG,EAAA,CAAA,GAAuB,OAAA,SAAA,MAAQ,GAAI,IAAI,SAAQ,CAAA,CAAG,SAAQ,GAAA,GAAA,GAAA,CAAA;MAI5H,OAAK,eAAE,YAAY,GAAG,CAAA;MACtB,UAAK,WAAE,cAAc,GAAG;KAEtB,GAAA,gBAAA,GAAG,GAAA,IAAA,UAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { assert } from "../utils/assert.js";
|
|
2
|
+
import { get } from "../vendor/@vueuse/shared/dist/index.js";
|
|
3
|
+
import { breakpointsTailwind, useBreakpoints, useWindowSize } from "../vendor/@vueuse/core/dist/index.js";
|
|
2
4
|
import { computed } from "vue";
|
|
3
|
-
import { breakpointsTailwind, useBreakpoints, useWindowSize } from "@vueuse/core";
|
|
4
|
-
import { get as get$1 } from "@vueuse/shared";
|
|
5
5
|
import { camelCase } from "scule";
|
|
6
6
|
//#region src/composables/breakpoint.ts
|
|
7
7
|
function useBreakpoint() {
|
|
@@ -24,7 +24,7 @@ function useBreakpoint() {
|
|
|
24
24
|
const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);
|
|
25
25
|
const sizesUp = list.map((breakpoint) => [camelCase(`is_${breakpoint}_and_up`), breakpoints.greaterOrEqual(breakpoint)]);
|
|
26
26
|
const sizesDown = list.map((breakpoint) => [camelCase(`is_${breakpoint}_and_down`), breakpoints.smaller(breakpoint)]);
|
|
27
|
-
const name = computed(() => rawSizes.find((item) => get
|
|
27
|
+
const name = computed(() => rawSizes.find((item) => get(item[1]))?.[0] || "");
|
|
28
28
|
return {
|
|
29
29
|
...Object.fromEntries(sizes),
|
|
30
30
|
...Object.fromEntries(sizesUp),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breakpoint.js","names":[],"sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n const { width } = useWindowSize();\n\n const breakpointList = {\n xs: 0,\n ...breakpointsTailwind,\n } as const;\n\n type Breakpoint = keyof typeof breakpointList;\n\n const breakpoints = useBreakpoints(breakpointList);\n\n const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n const list = getKeys(breakpointList);\n\n const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n if (index < list.length - 1) {\n const nextBreakpoint = list[index + 1];\n assert(nextBreakpoint);\n return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n }\n return [breakpoint, breakpoints[breakpoint]];\n });\n\n const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n const sizesUp = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_up`),\n breakpoints.greaterOrEqual(breakpoint),\n ]);\n\n const sizesDown = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_down`),\n breakpoints.smaller(breakpoint),\n ]);\n\n const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n return {\n ...Object.fromEntries(sizes),\n ...Object.fromEntries(sizesUp),\n ...Object.fromEntries(sizesDown),\n name,\n width,\n };\n}\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB;CAC9B,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,iBAAiB;EACrB,IAAI;EACJ,GAAG;CACL;CAIA,MAAM,cAAc,eAAe,cAAc;CAEjD,MAAM,UAAU,OAAO;CAEvB,MAAM,OAAO,QAAQ,cAAc;CAEnC,MAAM,WAAyC,KAAK,KAAK,YAAY,UAAU;EAC7E,IAAI,QAAQ,KAAK,SAAS,GAAG;GAC3B,MAAM,iBAAiB,KAAK,QAAQ;GACpC,OAAO,cAAc;GACrB,OAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;EACrE;EACA,OAAO,CAAC,YAAY,YAAY,WAAW;CAC7C,CAAC;CAED,MAAM,QAAQ,SAAS,KAAK,CAAC,YAAY,WAAW,CAAC,UAAU,MAAM,YAAY,GAAG,KAAK,CAAC;CAE1F,MAAM,UAAU,KAAK,KAAI,eAAc,CACrC,UAAU,MAAM,WAAW,QAAQ,GACnC,YAAY,eAAe,UAAU,CACvC,CAAC;CAED,MAAM,YAAY,KAAK,KAAI,eAAc,CACvC,UAAU,MAAM,WAAW,UAAU,GACrC,YAAY,QAAQ,UAAU,CAChC,CAAC;CAED,MAAM,OAAO,eAAuB,SAAS,MAAK,SAAQ,
|
|
1
|
+
{"version":3,"file":"breakpoint.js","names":[],"sources":["../../src/composables/breakpoint.ts"],"sourcesContent":["import type { Ref } from 'vue';\nimport { breakpointsTailwind } from '@vueuse/core';\nimport { camelCase } from 'scule';\nimport { assert } from '@/utils/assert';\n\nexport function useBreakpoint() {\n const { width } = useWindowSize();\n\n const breakpointList = {\n xs: 0,\n ...breakpointsTailwind,\n } as const;\n\n type Breakpoint = keyof typeof breakpointList;\n\n const breakpoints = useBreakpoints(breakpointList);\n\n const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;\n\n const list = getKeys(breakpointList);\n\n const rawSizes: [Breakpoint, Ref<boolean>][] = list.map((breakpoint, index) => {\n if (index < list.length - 1) {\n const nextBreakpoint = list[index + 1];\n assert(nextBreakpoint);\n return [breakpoint, breakpoints.between(breakpoint, nextBreakpoint)];\n }\n return [breakpoint, breakpoints[breakpoint]];\n });\n\n const sizes = rawSizes.map(([breakpoint, value]) => [camelCase(`is_${breakpoint}`), value]);\n\n const sizesUp = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_up`),\n breakpoints.greaterOrEqual(breakpoint),\n ]);\n\n const sizesDown = list.map(breakpoint => [\n camelCase(`is_${breakpoint}_and_down`),\n breakpoints.smaller(breakpoint),\n ]);\n\n const name = computed<string>(() => rawSizes.find(item => get(item[1]))?.[0] || '');\n\n return {\n ...Object.fromEntries(sizes),\n ...Object.fromEntries(sizesUp),\n ...Object.fromEntries(sizesDown),\n name,\n width,\n };\n}\n"],"mappings":";;;;;;AAKA,SAAgB,gBAAgB;CAC9B,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,iBAAiB;EACrB,IAAI;EACJ,GAAG;CACL;CAIA,MAAM,cAAc,eAAe,cAAc;CAEjD,MAAM,UAAU,OAAO;CAEvB,MAAM,OAAO,QAAQ,cAAc;CAEnC,MAAM,WAAyC,KAAK,KAAK,YAAY,UAAU;EAC7E,IAAI,QAAQ,KAAK,SAAS,GAAG;GAC3B,MAAM,iBAAiB,KAAK,QAAQ;GACpC,OAAO,cAAc;GACrB,OAAO,CAAC,YAAY,YAAY,QAAQ,YAAY,cAAc,CAAC;EACrE;EACA,OAAO,CAAC,YAAY,YAAY,WAAW;CAC7C,CAAC;CAED,MAAM,QAAQ,SAAS,KAAK,CAAC,YAAY,WAAW,CAAC,UAAU,MAAM,YAAY,GAAG,KAAK,CAAC;CAE1F,MAAM,UAAU,KAAK,KAAI,eAAc,CACrC,UAAU,MAAM,WAAW,QAAQ,GACnC,YAAY,eAAe,UAAU,CACvC,CAAC;CAED,MAAM,YAAY,KAAK,KAAI,eAAc,CACvC,UAAU,MAAM,WAAW,UAAU,GACrC,YAAY,QAAQ,UAAU,CAChC,CAAC;CAED,MAAM,OAAO,eAAuB,SAAS,MAAK,SAAQ,IAAI,KAAK,EAAE,CAAC,CAAC,GAAG,MAAM,EAAE;CAElF,OAAO;EACL,GAAG,OAAO,YAAY,KAAK;EAC3B,GAAG,OAAO,YAAY,OAAO;EAC7B,GAAG,OAAO,YAAY,SAAS;EAC/B;EACA;CACF;AACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
|
|
1
|
+
import type { ComputedRef, MaybeRefOrGetter, Ref, TemplateRef } from 'vue';
|
|
2
2
|
export type KeyOfType<T, V> = T extends string | number | boolean | symbol | null | undefined ? never : V extends object ? keyof T : keyof {
|
|
3
3
|
[P in keyof T as T[P] extends V ? P : V extends T[P] ? P : never]: any;
|
|
4
4
|
};
|
|
@@ -58,24 +58,24 @@ export declare function useDropdownMenu<TValue, TItem>({ appendWidth, autoSelect
|
|
|
58
58
|
};
|
|
59
59
|
getIdentifier: (item: TItem) => any;
|
|
60
60
|
getText: (item: TItem) => string | undefined;
|
|
61
|
-
groupedOptions:
|
|
61
|
+
groupedOptions: ComputedRef<DropdownOptionGroup<TItem>[]>;
|
|
62
62
|
modelHighlightedIndex: Ref<number, number>;
|
|
63
63
|
isActiveItem: (item: TItem) => boolean;
|
|
64
|
-
isGrouped:
|
|
64
|
+
isGrouped: ComputedRef<boolean>;
|
|
65
65
|
isItemDisabled: (item: TItem) => boolean;
|
|
66
66
|
isOpen: Ref<boolean, boolean>;
|
|
67
67
|
itemIndexInValue: (item: TItem) => number;
|
|
68
|
-
menuWidth:
|
|
68
|
+
menuWidth: ComputedRef<string>;
|
|
69
69
|
moveHighlight: (up: boolean) => void;
|
|
70
|
-
optionsWithSelectedHidden:
|
|
71
|
-
renderedData:
|
|
70
|
+
optionsWithSelectedHidden: ComputedRef<TItem[]>;
|
|
71
|
+
renderedData: ComputedRef<{
|
|
72
72
|
_index: number;
|
|
73
73
|
item: TItem;
|
|
74
|
-
}>;
|
|
74
|
+
}[]>;
|
|
75
75
|
toggle: (state?: boolean) => void;
|
|
76
76
|
modelUserNavigated: globalThis.ShallowRef<boolean>;
|
|
77
|
-
valueKey:
|
|
78
|
-
wrapperProps:
|
|
77
|
+
valueKey: ComputedRef<TItem | TItem[] | TItem[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>][] | NonNullable<TItem>[KeyOfType<TItem, TValue extends (infer U)[] ? U : TValue>] | undefined>;
|
|
78
|
+
wrapperProps: ComputedRef<{
|
|
79
79
|
style: {
|
|
80
80
|
width: string;
|
|
81
81
|
height: string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { get, set, useArrayMap } from "../vendor/@vueuse/shared/dist/index.js";
|
|
2
|
+
import { useVirtualList } from "../vendor/@vueuse/core/dist/index.js";
|
|
1
3
|
import { computed, nextTick, ref, shallowRef, toValue, watch } from "vue";
|
|
2
|
-
import { useArrayMap, useVirtualList } from "@vueuse/core";
|
|
3
|
-
import { get as get$1, set as set$1 } from "@vueuse/shared";
|
|
4
4
|
//#region src/composables/dropdown-menu.ts
|
|
5
5
|
/**
|
|
6
6
|
* The rendered height of a default option row, a `list` button at its default or `sm` size.
|
|
@@ -42,13 +42,13 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
42
42
|
const getIdentifier = externalGetIdentifier ?? defaultGetIdentifier;
|
|
43
43
|
const getText = externalGetText ?? defaultGetText;
|
|
44
44
|
const activeIdentifiers = computed(() => {
|
|
45
|
-
const selected = toSelectedArray(get
|
|
45
|
+
const selected = toSelectedArray(get(value));
|
|
46
46
|
const identifiers = /* @__PURE__ */ new Set();
|
|
47
47
|
for (const item of selected) identifiers.add(getIdentifier(item));
|
|
48
48
|
return identifiers;
|
|
49
49
|
});
|
|
50
50
|
function isActiveItem(item) {
|
|
51
|
-
return get
|
|
51
|
+
return get(activeIdentifiers).has(getIdentifier(item));
|
|
52
52
|
}
|
|
53
53
|
const options = computed(() => {
|
|
54
54
|
const options = toValue(allOptions);
|
|
@@ -69,9 +69,9 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
69
69
|
}
|
|
70
70
|
const isGrouped = computed(() => toValue(groupBy) !== void 0);
|
|
71
71
|
const groupedOptions = computed(() => {
|
|
72
|
-
if (!get
|
|
72
|
+
if (!get(isGrouped)) return [];
|
|
73
73
|
const buckets = /* @__PURE__ */ new Map();
|
|
74
|
-
for (const item of get
|
|
74
|
+
for (const item of get(options)) {
|
|
75
75
|
const key = getGroupKey(item);
|
|
76
76
|
const list = buckets.get(key);
|
|
77
77
|
if (list) list.push(item);
|
|
@@ -92,16 +92,16 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
92
92
|
}));
|
|
93
93
|
const isOpen = externalIsOpen ?? shallowRef(false);
|
|
94
94
|
const valueKey = computed(() => {
|
|
95
|
-
const selected = get
|
|
95
|
+
const selected = get(value);
|
|
96
96
|
if (!keyAttr || !selected) return selected;
|
|
97
97
|
return Array.isArray(selected) ? selected.map((item) => item[keyAttr]) : selected[keyAttr];
|
|
98
98
|
});
|
|
99
|
-
const modelHighlightedIndex = ref(get
|
|
99
|
+
const modelHighlightedIndex = ref(get(autoSelectFirst) ? 0 : -1);
|
|
100
100
|
const modelUserNavigated = shallowRef(false);
|
|
101
101
|
const optionWidthBounds = computed(() => {
|
|
102
102
|
let min = 0;
|
|
103
103
|
let max = 0;
|
|
104
|
-
for (const option of get
|
|
104
|
+
for (const option of get(options)) {
|
|
105
105
|
const length = getText(option)?.toString()?.length ?? 0;
|
|
106
106
|
if (min === 0 && max === 0) {
|
|
107
107
|
min = length;
|
|
@@ -115,7 +115,7 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
115
115
|
};
|
|
116
116
|
});
|
|
117
117
|
const menuWidth = computed(() => {
|
|
118
|
-
const { min, max } = get
|
|
118
|
+
const { min, max } = get(optionWidthBounds);
|
|
119
119
|
const maxWidth = 30;
|
|
120
120
|
const paddingX = 1.5;
|
|
121
121
|
const fontMultiplier = toValue(dense) ? 12 : 13;
|
|
@@ -128,22 +128,22 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
128
128
|
return computeValue(min + difference / 2);
|
|
129
129
|
});
|
|
130
130
|
function toggle(state = false) {
|
|
131
|
-
set
|
|
131
|
+
set(isOpen, state);
|
|
132
132
|
}
|
|
133
133
|
function itemIndexInValue(item) {
|
|
134
|
-
const selected = toSelectedArray(get
|
|
134
|
+
const selected = toSelectedArray(get(value));
|
|
135
135
|
if (selected.length === 0) return -1;
|
|
136
136
|
const itemId = getIdentifier(item);
|
|
137
137
|
return selected.findIndex((selectedItem) => getIdentifier(selectedItem) === itemId);
|
|
138
138
|
}
|
|
139
139
|
function scrollHighlightedIntoView() {
|
|
140
|
-
get
|
|
140
|
+
get(_menuRef)?.querySelector("[data-highlighted=\"true\"]")?.scrollIntoView({ block: "nearest" });
|
|
141
141
|
}
|
|
142
142
|
async function adjustScrollByHighlightedIndex() {
|
|
143
|
-
const index = get
|
|
143
|
+
const index = get(modelHighlightedIndex);
|
|
144
144
|
if (index === -1) return;
|
|
145
145
|
await nextTick();
|
|
146
|
-
if (get
|
|
146
|
+
if (get(_menuRef)?.querySelector("[data-highlighted=\"true\"]")) {
|
|
147
147
|
scrollHighlightedIntoView();
|
|
148
148
|
return;
|
|
149
149
|
}
|
|
@@ -153,10 +153,10 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
153
153
|
}
|
|
154
154
|
async function updateOpen(open) {
|
|
155
155
|
if (!open) return;
|
|
156
|
-
const val = get
|
|
156
|
+
const val = get(value);
|
|
157
157
|
if (Array.isArray(val) && val.length > 0 || val !== null && val !== void 0) {
|
|
158
|
-
const index = get
|
|
159
|
-
if (index > -1) set
|
|
158
|
+
const index = get(options).findIndex(isActiveItem);
|
|
159
|
+
if (index > -1) set(modelHighlightedIndex, index);
|
|
160
160
|
}
|
|
161
161
|
await adjustScrollByHighlightedIndex();
|
|
162
162
|
}
|
|
@@ -167,47 +167,47 @@ function useDropdownMenu({ appendWidth, autoSelectFirst, dense, disabled = false
|
|
|
167
167
|
await adjustScrollByHighlightedIndex();
|
|
168
168
|
});
|
|
169
169
|
watch(options, async () => {
|
|
170
|
-
set
|
|
171
|
-
if (get
|
|
172
|
-
if (get
|
|
173
|
-
set
|
|
170
|
+
set(modelUserNavigated, false);
|
|
171
|
+
if (get(modelHighlightedIndex) !== -1) {
|
|
172
|
+
if (get(autoSelectFirst)) {
|
|
173
|
+
set(modelHighlightedIndex, 0);
|
|
174
174
|
await adjustScrollByHighlightedIndex();
|
|
175
175
|
} else {
|
|
176
|
-
set
|
|
176
|
+
set(modelHighlightedIndex, -1);
|
|
177
177
|
scrollTo(0);
|
|
178
178
|
}
|
|
179
179
|
} else scrollTo(0);
|
|
180
180
|
});
|
|
181
181
|
watch(isOpen, (open) => {
|
|
182
|
-
if (!open) set
|
|
182
|
+
if (!open) set(modelUserNavigated, false);
|
|
183
183
|
});
|
|
184
184
|
const moveHighlight = (up) => {
|
|
185
|
-
if (!get
|
|
185
|
+
if (!get(isOpen)) {
|
|
186
186
|
toggle(true);
|
|
187
187
|
return;
|
|
188
188
|
}
|
|
189
|
-
set
|
|
190
|
-
const items = get
|
|
189
|
+
set(modelUserNavigated, true);
|
|
190
|
+
const items = get(options);
|
|
191
191
|
const total = items.length;
|
|
192
192
|
if (total === 0) return;
|
|
193
193
|
const move = up ? -1 : 1;
|
|
194
|
-
let position = get
|
|
194
|
+
let position = get(modelHighlightedIndex);
|
|
195
195
|
for (let step = 0; step < total; step++) {
|
|
196
196
|
position += move;
|
|
197
197
|
if (position >= total) position = 0;
|
|
198
198
|
else if (position < 0) position = total - 1;
|
|
199
199
|
const candidate = items[position];
|
|
200
200
|
if (candidate !== void 0 && !isItemDisabled(candidate)) {
|
|
201
|
-
set
|
|
201
|
+
set(modelHighlightedIndex, position);
|
|
202
202
|
return;
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
};
|
|
206
206
|
const applyHighlighted = () => {
|
|
207
|
-
if (!setValue || !get
|
|
208
|
-
const highlightedIndexVal = get
|
|
207
|
+
if (!setValue || !get(isOpen)) return;
|
|
208
|
+
const highlightedIndexVal = get(modelHighlightedIndex);
|
|
209
209
|
if (highlightedIndexVal === -1) return;
|
|
210
|
-
const entry = get
|
|
210
|
+
const entry = get(options)[highlightedIndexVal];
|
|
211
211
|
if (entry !== void 0 && !isItemDisabled(entry)) setValue(entry);
|
|
212
212
|
};
|
|
213
213
|
return {
|