ThemeStyles and Attributes props does not working on new versions

[tenlisboa]

From now on I apologize for this can be something trivial, and I appreciate the time of who was willing to respond.

When I define the props theme-styles they have no alteration in the component, when I inspect the component through VueDevTools the prop is passed correctly.

My component remains normal with no changes:

My code:

<template>
  <v-date-picker
    :value="value"
    @input="$emit('input', $event)"
    :mode="mode"
    :columns="columns"
    transition="fade"
    :theme-styles="themeStyles"
    >
      <slot></slot>
  </v-date-picker>
</template>

<script>
export default {
    props: {
        value: { default: null },
        columns: { default: 1 },
        mode: { default: "range" }
        // color: { default: "orange" }
    },

    data() {
        return {
            themeStyles: {
                dayCell: {
                    fontSize: "3rem"
                },
                dayContent: {
                    backgroundColor: "#E8513E",
                    color: "#E8513E",
                    borderRadius: "3px"
                },

                dayPopoverContent: {
                    fontSize: "3rem"
                }
            }
        };
    }
};
</script>

<style lang="scss">
.vc-popover-content-wrapper {
    left: -1.5% !important;
    .vc-popover-content {
        border-radius: 0;
        margin-top: 1.4rem !important;
    }

    .vc-popover-caret {
        display: none !important;
    }
}
</style>

The version is: 1.0.0-beta.6

[nikwins]

As the changlog says, the use of theme-styles was removed.

[boycce]

Hey @nikwins, what do we use instead, thanks.

[nikwins]

@Boycce https://github.com/nathanreyes/v-calendar/blob/next/src/utils/defaults/theme.js Here you go.

[KeironLowe]

@nikwins where do we use that file?

[nikwins]

@KeironLowe

Like so:

<template>
  <v-date-picker
    :theme="theme"
    >
  </v-date-picker>
</template>

<script>
export default {
    data() {
        return {
            theme: {                
                    title: {
                        light: "vc-text-lg text-style--dark hover:vc-opacity-75",
                    },
                    arrows: {
                        light: "text-style--dark hover:vc-opacity-50",
                    },
                    weekdays: {
                        light: "vc-text-sm vc-font-bold text-style--gray",
                    },
                    navPopoverContainer: {
                        light: "vc-rounded vc-text-sm text-style--dark vc-bg-white vc-shadow",
                    },
                    ...
            }
        };
    }
};
</script>