Skip to content

Commit 8ec6ce7

Browse files
tookittookit
committed
fix build issue
1 parent cfeaea3 commit 8ec6ce7

File tree

8 files changed

+58
-92
lines changed

8 files changed

+58
-92
lines changed

‎src/components/AppDateTimePicker.vue‎

Lines changed: 39 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,35 @@
11
<script setup lang="ts">
22
import FlatPickr from 'vue-flatpickr-component';
3-
import { ref, computed, onMounted, nextTick, PropType, useAttrs } from 'vue';
3+
import { ref, computed, onMounted, nextTick, PropType } from 'vue';
44
import { useTheme } from 'vuetify';
55
import { useFocus } from '@vueuse/core';
66
7-
// @ts-expect-error There won't be declaration file for it
8-
import { VField, filterFieldProps, makeVFieldProps } from 'vuetify/lib/components/VField/VField';
9-
10-
// @ts-expect-error There won't be declaration file for it
11-
import { VInput, makeVInputProps } from 'vuetify/lib/components/VInput/VInput';
12-
13-
// @ts-expect-error There won't be declaration file for it
14-
import { filterInputAttrs } from 'vuetify/lib/util/helpers';
15-
167
const props = defineProps({
17-
autofocus: Boolean,
18-
counter: [Boolean, Number, String] as PropType<true | number | string>,
19-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
20-
counterValue: Function as PropType<(value: any) => number>,
8+
// Support string dates to match existing usage, plus Date/number/array
9+
modelValue: {
10+
type: [String, Number, Array, Object] as PropType<null | string | number | Date | (string | number | Date)[]>,
11+
default: null
12+
},
13+
label: String,
14+
id: String,
2115
prefix: String,
22-
placeholder: String,
23-
persistentPlaceholder: Boolean,
24-
persistentCounter: Boolean,
2516
suffix: String,
26-
type: {
27-
type: String,
28-
default: 'text'
17+
placeholder: String,
18+
density: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'compact' },
19+
hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: 'auto' },
20+
variant: {
21+
type: String as PropType<'outlined' | 'plain' | 'filled' | 'solo' | 'solo-filled' | 'solo-inverted' | 'underlined'>,
22+
default: 'outlined'
2923
},
30-
modelModifiers: Object as PropType<Record<string, boolean>>,
31-
...makeVInputProps({
32-
density: 'compact',
33-
hideDetails: 'auto'
34-
}),
35-
...makeVFieldProps({
36-
variant: 'outlined',
37-
color: 'primary'
38-
})
24+
color: { type: String, default: 'primary' },
25+
// Additional styling passthroughs
26+
class: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
27+
style: [String, Object] as PropType<string | Record<string, string>>,
28+
// Whether to mark the field as dirty
29+
dirty: Boolean,
30+
// Flatpickr config object
31+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
32+
config: { type: Object as PropType<Record<string, any>>, default: () => ({}) }
3933
});
4034
4135
const emit = defineEmits<Emit>();
@@ -53,25 +47,20 @@ defineOptions({
5347
inheritAttrs: false
5448
});
5549
56-
const attrs = useAttrs();
57-
58-
const [rootAttrs, compAttrs] = filterInputAttrs(attrs);
59-
60-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
61-
const { modelValue: _, ...inputProps } = VInput.filterProps(props);
62-
const fieldProps = filterFieldProps(props);
63-
console.log(filterFieldProps(props), VInput.filterProps(props));
64-
6550
const refFlatPicker = ref();
6651
const { focused } = useFocus(refFlatPicker);
6752
const isCalendarOpen = ref(false);
6853
const isInlinePicker = ref(false);
6954
const isReadonly = ref(false);
7055
7156
// flat picker prop manipulation
72-
if (compAttrs.config && compAttrs.config.inline) {
73-
isInlinePicker.value = compAttrs.config.inline;
74-
Object.assign(compAttrs, { altInputClass: 'inlinePicker' });
57+
const compAttrs = ref<Record<string, unknown>>({});
58+
if (props.config) {
59+
compAttrs.value = { ...props.config };
60+
if ((props.config as Record<string, unknown>).inline) {
61+
isInlinePicker.value = Boolean((props.config as Record<string, unknown>).inline);
62+
Object.assign(compAttrs.value, { altInputClass: 'inlinePicker' });
63+
}
7564
}
7665
7766
// v-field clear prop
@@ -111,7 +100,7 @@ const emitModelValue = (val: string) => {
111100
};
112101
113102
const elementId = computed(() => {
114-
const _elementIdToken = fieldProps.id || fieldProps.label;
103+
const _elementIdToken = props.id || props.label;
115104
116105
return _elementIdToken ? `app-picker-field-${_elementIdToken}-${Math.random().toString(36).slice(2, 7)}` : undefined;
117106
});
@@ -120,17 +109,11 @@ const elementId = computed(() => {
120109
<template>
121110
<div class="app-picker-field">
122111
<!-- v-input -->
123-
<VLabel
124-
v-if="fieldProps.label"
125-
class="mb-1 text-body-2 text-high-emphasis"
126-
:for="elementId"
127-
:text="fieldProps.label"
128-
/>
112+
<VLabel v-if="props.label" class="mb-1 text-body-2 text-high-emphasis" :for="elementId" :text="props.label" />
129113

130114
<VInput
131-
v-bind="{ ...inputProps, ...rootAttrs }"
132-
:model-value="modelValue"
133115
:hide-details="props.hideDetails"
116+
:density="props.density"
134117
:class="[
135118
{
136119
'v-text-field--prefixed': props.prefix,
@@ -145,7 +128,8 @@ const elementId = computed(() => {
145128
<template #default="{ id, isDirty, isValid, isDisabled }">
146129
<!-- v-field -->
147130
<VField
148-
v-bind="{ ...fieldProps, label: undefined }"
131+
:variant="props.variant"
132+
:color="props.color"
149133
:id="id.value"
150134
role="textbox"
151135
:active="focused || isDirty.value || isCalendarOpen"
@@ -163,7 +147,7 @@ const elementId = computed(() => {
163147
v-bind="compAttrs"
164148
:id="elementId"
165149
ref="refFlatPicker"
166-
:model-value="modelValue"
150+
:model-value="props.modelValue"
167151
:placeholder="props.placeholder"
168152
class="flat-picker-custom-style"
169153
:disabled="isReadonly"
@@ -175,7 +159,7 @@ const elementId = computed(() => {
175159
<!-- simple input for inline prop -->
176160
<input
177161
v-if="isInlinePicker"
178-
:value="modelValue"
162+
:value="props.modelValue"
179163
:placeholder="props.placeholder"
180164
class="flat-picker-custom-style"
181165
type="text"
@@ -191,7 +175,7 @@ const elementId = computed(() => {
191175
v-if="isInlinePicker"
192176
v-bind="compAttrs"
193177
ref="refFlatPicker"
194-
:model-value="modelValue"
178+
:model-value="props.modelValue"
195179
@update:model-value="emitModelValue"
196180
@on-open="isCalendarOpen = true"
197181
@on-close="isCalendarOpen = false"
@@ -201,8 +185,8 @@ const elementId = computed(() => {
201185

202186
<style lang="scss">
203187
/* stylelint-disable no-descending-specificity */
204-
@use 'flatpickr/dist/flatpickr.css';
205188
@use '@/scss/mixins';
189+
@import url('flatpickr/dist/flatpickr.css');
206190
207191
.flat-picker-custom-style {
208192
position: absolute;

‎src/components/charts/apex-chart/apexCharConfig.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { ThemeInstance } from 'vuetify';
2+
import type { ApexOptions } from 'apexcharts';
23
import { hexToRgb } from '@/utils';
34
// 👉 Colors variables
45
const colorVariables = (themeColors: ThemeInstance['themes']['value']['colors']) => {
@@ -18,7 +19,7 @@ const colorVariables = (themeColors: ThemeInstance['themes']['value']['colors'])
1819
return { themeSecondaryTextColor, themeDisabledTextColor, themeBorderColor, themePrimaryTextColor };
1920
};
2021

21-
export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
22+
export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
2223
const scatterColors = {
2324
series1: '#ff9f43',
2425
series2: '#7367f0',
@@ -74,7 +75,7 @@ export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['valu
7475
}
7576
};
7677
};
77-
export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
78+
export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
7879
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors);
7980

8081
return {
@@ -144,7 +145,7 @@ export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['v
144145
};
145146
};
146147

147-
export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
148+
export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
148149
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors);
149150

150151
return {
@@ -158,8 +159,7 @@ export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value'][
158159
bar: {
159160
borderRadius: 8,
160161
barHeight: '30%',
161-
horizontal: true,
162-
startingShape: 'rounded'
162+
horizontal: true
163163
}
164164
},
165165
grid: {
@@ -187,7 +187,7 @@ export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value'][
187187
};
188188
};
189189

190-
export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
190+
export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
191191
const candlestickColors = {
192192
series1: '#28c76f',
193193
series2: '#ea5455'
@@ -238,7 +238,7 @@ export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['
238238
}
239239
};
240240
};
241-
export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
241+
export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
242242
const radialBarColors = {
243243
series1: '#fdd835',
244244
series2: '#32baff',
@@ -312,7 +312,7 @@ export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['va
312312
};
313313
};
314314

315-
export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
315+
export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
316316
const donutColors = {
317317
series1: '#fdd835',
318318
series2: '#00d4bd',
@@ -406,7 +406,7 @@ export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value'
406406
};
407407
};
408408

409-
export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
409+
export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
410410
const areaColors = {
411411
series3: '#e0cffe',
412412
series2: '#b992fe',
@@ -487,7 +487,7 @@ export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['v
487487
};
488488
};
489489

490-
export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
490+
export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
491491
const columnColors = {
492492
series1: '#826af9',
493493
series2: '#d2b0ff',
@@ -573,7 +573,7 @@ export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value
573573
};
574574
};
575575

576-
export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
576+
export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
577577
const { themeSecondaryTextColor, themeDisabledTextColor } = colorVariables(themeColors);
578578

579579
return {
@@ -632,7 +632,7 @@ export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['valu
632632
};
633633
};
634634

635-
export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
635+
export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']): ApexOptions => {
636636
const radarColors = {
637637
series1: '#9b88fa',
638638
series2: '#ffa1a1'

‎src/components/picker/AppDatePicker.ts‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎src/scss/_variables.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,6 @@ $card-text-spacer: 24px !default;
122122
$card-title-size: 18px !default;
123123
// Global Shadow
124124
$box-shadow: rgb(145 158 171 / 20%) 0px 0px 2px 0px, rgb(145 158 171 / 12%) 0px 12px 24px -4px;
125+
126+
// Buttons
127+
$btn-letter-spacing: 0.0892857143em !default;

‎src/scss/components/_VButtons.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../variables' as *;
12
//
23
// Light Buttons
34
//

‎src/scss/components/_VShadow.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../variables' as *;
12
.elevation-10 {
23
box-shadow: $box-shadow !important;
3-
}
4+
}

‎src/scss/layout/_sidebar.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '../variables' as *;
12
/*This is for the logo*/
23
.leftSidebar {
34
box-shadow: none !important;

‎src/scss/style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import './variables';
21
@import 'vuetify/styles/main.sass';
32
@import './utils';
43
@import './layout/container';

0 commit comments

Comments
 (0)