Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE #16

Closed
mateuswetah opened this issue Jul 31, 2023 · 13 comments · Fixed by #223
Closed

Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE #16

mateuswetah opened this issue Jul 31, 2023 · 13 comments · Fixed by #223
Assignees
@kikuomax
Labels
bug Something isn't working
Milestone
v0.1.3

Comments

@mateuswetah
Copy link

Overview of the problem

Hi folks, thank you for all the effort on the migration.

I've started using the package this week. In my repository I have vue-compat installed to see all the things that I must change and therefore some warnings appear.

Buefy-next version: 0.1.0
Vuejs version: 3.3.4
OS/Browser: Linux/Firefox

Description

The following warning message appears:
image

Steps to reproduce

It should happen with any usage of the <b-input> component as long as vue-compat is installed (I believe other components might fall into this too, but I'm focusing on this to keep things simple).

Expected behavior

No warning at all :)
@wesdevpro
Copy link

wesdevpro commented Jul 31, 2023 •
edited
Loading

Closing as expected behavior. @kikuomax let me know if this is something we may want to consider fixing for SEO purposes. @mateuswetah thanks for using Buefy V3! Please don't hesitate to open up more issues as you run into more errors while migrating your projects. Thanks 😊

@mateuswetah
Copy link
Author

Ok!

So just to understand, are any "deprecation" warnings expected behavior or is there any warning that the vue-compat script point at me that I should report here?

@wesdevpro
Copy link

wesdevpro commented Jul 31, 2023 •
edited
Loading

Ok!

So just to understand, are any "deprecation" warnings expected behavior or is there any warning that the vue-compat script point at me that I should report here?

My bad…so this is on me. I completely misunderstood what was being stated in this issue 😂 I’m reopening because this is not expected behavior as far as I know. I’m super unfamiliar with how Buefy originally opened issues. And that’s why the one of the sub titles confused me🤦🏼‍♂️ @mateuswetah @kikuomax

@wesdevpro wesdevpro reopened this Jul 31, 2023
@mateuswetah
Copy link
Author

Hahha no prob @wesdevpro, it may be a miscommunication as English is not my native language!

@wesdevpro
Copy link

wesdevpro commented Jul 31, 2023 •
edited
Loading

Hahha no prob @wesdevpro, it may be a miscommunication as English is not my native language!

No worries. Hopefully we can take a look into this issue soon. @kikuomax is working on unit testing right now, and I’m working on maintaining Buefy V2 and an EOL plan for moving to Buefy V3. I will let you know what we find out

@kikuomax
Copy link
Collaborator

@wesdevpro @mateuswetah It looks the use of inheritAttrs: false in the following line is causing the warning.

buefy-next/src/components/input/Input.vue

Line 79 in f0348bf

inheritAttrs: false,

If I correctly understand the Vue 3 behavior, setting inheritAttrs false here is necessary. Because <b-input> expects attributes fall through not to the root <div> element but to its child: <input> or <textarea>.

@kikuomax
Copy link
Collaborator

kikuomax commented Jul 31, 2023 •
edited
Loading

So just to understand, are any "deprecation" warnings expected behavior or is there any warning that the vue-compat script point at me that I should report here?

@mateuswetah I appreciate your report.

@mateuswetah
Copy link
Author

No problem. This warning will appear for many other components, basically everyone that has this inheritAttrs. I've just found a couple other warnings, I'll open separate issues for them.

@mateuswetah
Copy link
Author

@kikuomax, something related to this here... while testing version 0.1.2, I noticed that some situations where I was passing classes to the <b-select> component where conflicting with the Vue 2 behavior.

Previously, something like this:

<b-select :class="my-select">
   ....

Would result in this:

<div class="control my-select">
   <span class="select">
      <select>
         ....

Now, the same code output this:

<div class="control">
   <span class="select">
      <select class="my-select">
         ....

Which I guess is fine... if it wouldn't break much of the logic that I had so far... Is there a way to disable this new behavior? I know it happens due to this.

@kikuomax kikuomax mentioned this issue Sep 21, 2023
Open
@kikuomax
Copy link
Collaborator

@mateuswetah

Which I guess is fine... if it wouldn't break much of the logic that I had so far... Is there a way to disable this new behavior? I know it happens due to this.

Setting inheritAttrs to false is necessary here because we do not want all the props to be bound to the root div. The problem is that Vue 3 includes class and style props in $attrs, but Vue 2 does not. I think I can exclude class and style from $attrs, and it should not hurt.

@mateuswetah
Copy link
Author

@kikuomax do you keep planning on exclude class and style from $attrs? I was circling back to this issue today. Maybe offering an extra option where we could define the .control wrapper classes and styles would be fine, I could refactor things a bit from my side.

@mateuswetah mateuswetah mentioned this issue Jan 30, 2024
Closed
@mateuswetah
Copy link
Author

BTW, the same said here for class and style applies for IDs as well

kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 31, 2024
@kikuomax
feat(lib): add compat fallthrough to Input
fb5ec2c 
- `Input` introduces a new prop `compat-fallthrough` that determines if
  `class`, `style`, and `id` attributes are applied to the root `<div>`
  element, instead of the underlying `<input>` or `<textarea>`. Since
  Vue 3 changed the fallthrough behavior, `Input` became incompatible
  with Buefy for Vue 2. Setting the prop to `true`, makes `Input`
  compatible with Buefy for Vue 2. The default value for this prop is
  configured by a new config option `defaultInputCompatFallthrough`,
  which is `true` by default.

issue ntohq#16
@kikuomax
Copy link
Collaborator

kikuomax commented Jan 31, 2024 •
edited
Loading

The following components are possibly affected:

@kikuomax kikuomax mentioned this issue Jan 31, 2024
Merged
@kikuomax kikuomax self-assigned this Jan 31, 2024
@kikuomax kikuomax moved this to 🏗 In progress in Buefy Vue3 Project Board Jan 31, 2024
@kikuomax kikuomax added the bug Something isn't working label Jan 31, 2024
kikuomax added a commit to kikuomax/buefy that referenced this issue Jan 31, 2024
@kikuomax
chore: rename defaultInputCompatFallthrough → defaultCompatFallthrough
ea5bf77 
- Renames `defaultInputCompatFallthrough` to `defaultCompatFallthrough`
  because there are many other components affected by the same Vue 3
  change in attribute fallthrough behavior. I think having different
  config options for individual components is tedious for both users and
  maintainers. If one wants to apply different behavior to different
  components, can explicitly use `compat-fallthrough`.
  See ntohq#16 (comment)
kikuomax added a commit to kikuomax/buefy that referenced this issue Feb 12, 2024
@kikuomax
feat(lib): add compat fallthrough to Input
22850bd 
- `Input` introduces a new prop `compat-fallthrough` that determines if
  `class`, `style`, and `id` attributes are applied to the root `<div>`
  element, instead of the underlying `<input>` or `<textarea>`. Since
  Vue 3 changed the fallthrough behavior, `Input` became incompatible
  with Buefy for Vue 2. Setting the prop to `true`, makes `Input`
  compatible with Buefy for Vue 2. The default value for this prop is
  configured by a new config option `defaultInputCompatFallthrough`,
  which is `true` by default.

issue ntohq#16
kikuomax added a commit to kikuomax/buefy that referenced this issue Feb 12, 2024
@kikuomax
chore: rename defaultInputCompatFallthrough → defaultCompatFallthrough
5f8a9fc 
- Renames `defaultInputCompatFallthrough` to `defaultCompatFallthrough`
  because there are many other components affected by the same Vue 3
  change in attribute fallthrough behavior. I think having different
  config options for individual components is tedious for both users and
  maintainers. If one wants to apply different behavior to different
  components, can explicitly use `compat-fallthrough`.
  See ntohq#16 (comment)
kikuomax added a commit that referenced this issue Feb 17, 2024
@kikuomax
Fix: [Input] Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16) (…
4905bd9 
…#189)

* feat(lib): add compat fallthrough to Input

- `Input` introduces a new prop `compat-fallthrough` that determines if
  `class`, `style`, and `id` attributes are applied to the root `<div>`
  element, instead of the underlying `<input>` or `<textarea>`. Since
  Vue 3 changed the fallthrough behavior, `Input` became incompatible
  with Buefy for Vue 2. Setting the prop to `true`, makes `Input`
  compatible with Buefy for Vue 2. The default value for this prop is
  configured by a new config option `defaultCompatFallthrough`,
  which is `true` by default.

  The config option `defaultCompatFallthrough` is not specific to `Input`
  because there are many other components affected by the same Vue 3
  change in attribute fallthrough behavior. I think having different
  config options for individual components is tedious for both users and
  maintainers. If one wants to apply different behavior to different
  components, can explicitly use `compat-fallthrough`.
  See #16 (comment)
issue #16

* test(lib): test Input fallthrough behavior

- Tests the new prop `compat-fallthrough` of `Input`.
- Refreshes test snapshots affected by the introduction of
  `compat-fallthrough` prop of `Input`.

* chore(docs): explain compat-fallthrough prop of Input

* docs(CHANGELOG): add new compat-fallthrough prop of Input

- `CHANGELOG.md` is not well-structured for now, though, it is important
  to leave any clues for coming release.
@kikuomax kikuomax mentioned this issue Feb 19, 2024
Merged
@kikuomax kikuomax added this to the v0.1.3 milestone Feb 22, 2024
kikuomax added a commit that referenced this issue Mar 6, 2024
@kikuomax
Fix: [Autocomplete] Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (
070b3a7 
#16) (#195)

* feat(lib): add compat fallthrough to Autocomplete

- `Autocomplete` introduces a new prop `compat-fallthrough` that
  determines if the `class`, `style`, and `id` attributes are applied to the
  root `<div>` element instead of the underlying `BInput` component.
  Since Vue 3 changed the fallthrough behavior, `Autocomplete` became
  incompatible with Buefy for Vue 2. The default value for this prop is
  configured by the `defaultCompatFallthrough` config option, which is
  `true` by default.

* test(lib): test Autocomplete fallthrough behavior

- Tests the new prop `compat-fallthrough` of `Autocomplete`.
- Refreshes the test snapshot of `Taginput` which is affected by the
  change of `Autocomplete`.

* chore(docs): explain compat-fallthrough of Autcomplete

* docs(CHANGELOG): add new compat-fallthrough prop of Autcomplete
This was referenced Mar 20, 2024
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
Merged
kikuomax added a commit that referenced this issue Mar 26, 2024
@kikuomax
Fix [Datepicker]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#…
bb8d7f8 
…16) (#211)

* feat(lib): add compat-fallthrough prop to Datepicker

- `Datepicker` introduces a new prop `compat-fallthrough` which
  determines if the `class`, `style`, and `id` attributes are applied to
  the root `<div>` element or the underlying `<b-input>` component.
  Since Vue 3 changed the fallthrough behavior, `Datepicker` became
  incompatible with that of Buefy for Vue 2. The default value of this
  prop is determined by the `defaultCompatFallthrough` config option
  that is `true` by default.

* test(lib): test Datepicker fallthrough behavior

- Adds new test cases that test the new `compat-fallthrough` prop of
  `Datepicker`

* chore(docs): explain compat-fallthrough prop of Datepicker

* docs(CHANGELOG): explain compat-fallthrough prop of Datepicker
@kikuomax kikuomax moved this from 🏗 In progress to 👀 In review in Buefy Vue3 Project Board Mar 26, 2024
kikuomax added a commit that referenced this issue Mar 28, 2024
@kikuomax
Fix [MenuItem]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16…
97c9524 
…) (#212)

* feat(lib): add compat-fallthrough prop to MenuItem

- `MenuItem` introduces a new prop `compat-fallthrough` that determines
  if the `class`, `style`, and `id` attributes are applied to the root
  `<li>` element or the underlying tag. Since Vue 3 changed the
  fallthrough behavior, `MenuItem` became incompatible with that of
  Buefy for Vue 2. The default value of this prop is determined by the
  `defaultCompatFallthrough` config option that is `true` by default.

* test(lib): test MenuItem fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `MenuItem`

* chore(docs): explain compat-fallthrough prop of MenuItem

* docs(CHANGELOG): explain compat-fallthrough prop of MenuItem
kikuomax added a commit that referenced this issue Mar 28, 2024
@kikuomax
Fix [NavbarDropdown]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_ST…
2b5e892 
…YLE (#16) (#213)

* feat(lib): add compat-fallthrough prop to NavbarDropdown

- `NavbarDropdown` introduces a new prop `compat-fallthrough` which
  determines if the `class`, `style`, and `id` attributes are applied to
  the root `<div>` element or the underlying tag. Since Vue 3 changed
  the fallthrough behavior, `NavbarDropdown` became incompatible with
  that of Buefy for Vue 2. The default value of this prop is given
  by the `defaultCompatFallthrough` config option that is `true` by
  default (compatible with Buefy for Vue 2).

* test(lib): test NavbarDropdown fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `NavbarDropdown`

* chore(docs): explain compat-fallthrough prop of NavbarDropdown

* docs(CHANGELOG): explain compat-fallthrough prop of NavbarDropdown
kikuomax added a commit that referenced this issue Mar 29, 2024
@kikuomax
Fix [Numberinput]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (…
8952a69 
…#16) (#214)

* feat(lib): add compat-fallthrough prop to Numberinput

- `Numberinput` introduces a new prop `compat-fallthrough` which
  determines if the `class`, `style`, and `id` attributes are applied to
  the root `<div>` element or the underlying `<b-input>` component.
  Since Vue 3 changed the fallthrough behavior, `Numberinput` became
  incompatible with that of Buefy for Vue 2. The default value of this
  prop is given by the `defaultCompatFallthrough` config option
  that is `true` by default (compatible with Buefy for Vue 2).

* test(lib): test Numberinput fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Numberinput`

* chore(docs): explain compat-fallthrough prop of Numberinput

* docs(CHANGELOG): explain compat-fallthrough prop of Numberinput
kikuomax added a commit that referenced this issue Mar 29, 2024
@kikuomax
Fix [Select]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16) (
ae57f1a 
#215)

* feat(lib): add compat-fallthrough prop to Select

- `Select` introduces a new prop `compat-fallthrough` which determines
  if the `class`, `style`, and `id` attributes are applied to the root
  `<div>` element or the underlying `<select>` element. Since Vue 3
  changed the fallthrough behavior, `Select` became incompatible with
  that of Buefy for Vue 2. The default value of this prop is given by
  the `defaultCompatFallthrough` config option that is `true` by default
  (compatible with Buefy for Vue 2).

* test(lib): test Select fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Select`

* chore(docs): explain compat-fallthrough prop of Select

* docs(CHANGELOG): explain compat-fallthrough prop of Select
kikuomax added a commit that referenced this issue Mar 29, 2024
@kikuomax
Fix [SliderThumb]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (…
4ab5493 
…#16) (#216)

* feat(lib): add compat-fallthrough prop to SliderThumb

- `SliderThumb` introduces a new prop `compat-fallthrough` which
  determines the `class`, `style`, and `id` attributes are applied to
  the root or inner `<div>` element. Since Vue 3 changed the fallthrough
  behavior, `SliderThumb` became incompatible with that of Buefy for Vue
  2. The default value of this prop is given by the
  `defaultCompatFallthrough` config option that is `true` by default
  (compatible with Buefy for Vue 2).

* test(lib): test SliderThumb fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `SliderThumb`

* docs(CHANGELOG): explain compat-fallthrough prop o SliderThumb
kikuomax added a commit that referenced this issue Mar 29, 2024
@kikuomax
Fix [Table]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16) (…
8addee9 
…#217)

* feat(lib): add compat-fallthrough prop to Table

- `Table` introduces a new prop `compat-fallthrough` which determines if
  the `class`, `style`, and `id` attributes are applied to the root
  `<div>` element or the underlying `<b-table-pagination>` components.
  Since Vue 3 changed the fallthrough behavior, `Table` became
  incompatible with that of Buefy for Vue 2. The default value of this
  prop is given by the `defaultCompatFallthrough` config option that is
  `true` by default (compatible with Buefy for Vue 2).

* test(lib): test Table fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Table`

* chore(docs): explain compat-fallthrough prop of Table

* docs(CHANGELOG): explain compat-fallthrough prop of Table
kikuomax added a commit that referenced this issue Mar 29, 2024
@kikuomax
Fix [Taginput]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16…
1ad2aaf 
…) (#218)

* feat(lib): add compat-fallthrough prop to Taginput

- `Taginput` introduces a new prop `compat-fallthrough` which determines
  the `class`, `style`, and `id` attributes are applied to the root
  `<div>` element or the underlying `<b-autocomplete>` component. Since
  Vue 3 changed the fallthrough behavior, `Taginput` became incompatible
  with that of Buefy for Vue 2. The default value of this prop is given
  by the `defaultCompatFallthrough` config option that is `true` by
  default (compatible with Buefy for Vue 2).

* test(lib): test Taginput fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Taginput`

* chore(docs): explain compat-fallthrough prop of Taginput

* docs(CHANGELOG): explain compat-fallthrough prop of Taginput
kikuomax added a commit that referenced this issue Mar 29, 2024
@kikuomax
Fix [Upload]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16) (
b28f56f 
#219)

* feat(lib): add compat-fallthrough prop to Upload

- `Upload` introduces a new prop `compat-fallthrough` which determines
  if the `class`, `style`, and `id` attributes are applied to the root
  `<label>` element or the underlying `<input>` element. Since Vue 3
  changed the fallthrough behavior, `Upload` became incompatible with
  that of Buefy for Vue 2. The default value of this prop is given by
  the `defaultCompatFallthrough` config option that is `true` by default
  (compatible with Buefy for Vue 2).

  Replaces the `classAndStyle` computed value with `rootAttrs`, which
  did not address the `id` attribute.

* test(lib): test Upload fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `Upload`

* chore(docs): explain compat-fallthrough prop of Upload

* docs(CHANGELOG): explain compat-fallthrough prop of Upload
kikuomax added a commit that referenced this issue Mar 31, 2024
@kikuomax
Fix: [BreadcrumbItem] Vue Compat: deprecation INSTANCE_ATTRS_CLASS_ST…
3cfc599 
…YLE (#16) (#209)

* feat(lib): add compat fallthrough prop to BreadcrumbItem

- `BreadcrumbItem` introduces a new prop `compat-fallthrough` which
  determines if the `style`, `class`, and `id` attributes falls through
  to the root `<li>` element rather than the underlying tag. Since Vue 3
  changed the fallthrough behavior, `BreadcrumbItem` became incompatible
  with that of Buefy for Vue 2. The default value for this prop is
  configured by the `defaultCompatFallthrough` config option, which is
  `true` by default (compatible with Buefy for Vue 2).

* test(lib): test BreadcrumbItem fallthrough behavior

- Tests the new prop `compat-fallthrough` of `BreadcrumbItem`

* chore(docs): explain compat-fallthrough of BreadcrumbItem

* docs(CHANGELOG): explain compat-fallthrough of BreadcrumbItem
kikuomax added a commit that referenced this issue Mar 31, 2024
@kikuomax
Fix [Clockpicker, Timepicker]: Vue Compat: deprecation INSTANCE_ATTRS…
dc56cc1 
…_CLASS_STYLE (#16) (#210)

* feat(lib): mix CompatFallthroughMixin in TimepickerMixin

- `TimepickerMixin` mixes in `CompatFallthroughMixin`, because both
  hosts `Clockpicker` and `Timepicker` provide fallthrough behavior.

* feat(lib): add compat fallthrough to Clockpicker

- `Clockpicker` introduces a new prop `compat-fallthrough`, which
  determines if the `class`, `style`, and `id` attributes are applied to
  the root `<div>` element or the underlying `BInput` component. Since
  Vue 3 changed the fallthrough behavior, `Clockpicker` became
  incompatible with that of Buefy for Vue 2. The default value of this
  prop is configured by the `defaultCompatFallthrough` config option,
  which is `true` by default (compatible with Buefy for Vue 2).

* test(lib): test compat-fallthrough prop of Clockpicker

- Tests the fallthrough behavior of `Clockpicker`

* feat(lib): add compat fallthrough to Timepicker

- `Timepicker` introduces a new prop `compat-fallthrough`, which
  determines if the `class`, `style`, and `id` attributes are applied to
  the root `<div>` element or the underlying `BInput` component. Since
  Vue 3 changed the fallthrough behavior, `Timepicker` became
  incompatible with that of Buefy for Vue 2. The default value for this
  prop is configured by the `defaultCompatFallthrough` config option,
  which is `true` by default (compatible with Buefy for Vue 2).

* test(lib): test fallthrough behavior of Timepicker

- Tests the fallthrough behavior of `Timepicker`

* chore(docs): explain compat-fallthrough of Clockpicker

* chore(docs): explain compat-fallthrough of Timepicker

* docs(CHANGELOG): explain compat-fallthrough of Clockpicker and Timepicker
@kikuomax kikuomax mentioned this issue Apr 3, 2024
Merged
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in Buefy Vue3 Project Board Apr 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kikuomax kikuomax

Labels
bug Something isn't working
Projects
Buefy Vue3 Project Board
Status: ✅ Done
Milestone
v0.1.3
Development

Successfully merging a pull request may close this issue.

test(lib): replace snapshots affected by CompatFallthroughMixin kikuomax/buefy
3 participants
@mateuswetah @kikuomax @wesdevpro