q-stepper inside q-stepper horizontal/vertical mode

ourognao commented 11 months ago

What happened?

I would like to use the first stepper in horizontal and the second stepper (inside the first one) in vertical but the second stepper inherit from the parent stepper which is horizontal mode.

What did you expect to happen?

Child steppers should be free to work in vertical or horizontal mode.

Reproduction URL

https://codepen.io/alainrc2005/pen/MWmQwVx?editors=1000

How to reproduce?

Go to the provided codepen link
Look at the second stepper (Step One label) to see that the gray line is horizontal instead of vertical (even though that we set vertical at q-stepper level)

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome, Safari

Quasar info output

Operating System - Darwin(22.2.0) - darwin/x64
NodeJs - 18.12.0

Global packages
  NPM - 9.5.1
  yarn - 1.22.17
  @quasar/cli - 2.2.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.12.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.6.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.6 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.2
  pinia - Not installed
  vuex - 4.1.0 -- state management for Vue.js
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.41.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-unit-vitest - 0.4.0 -- A Quasar App Extension for running tests with Vitest

Relevant log output

No response

Additional context

The issue is close to this one here. It seems there is a inheritance issue.

HarisSpahija commented 10 months ago

Issue is caused by the props from the QStepper being provided on https://github.com/quasarframework/quasar/blob/7e794f7068475dabd9d64dc41ec78d19caa31b57/ui/src/components/stepper/QStepper.js#L60-L65

And the QStep injecting the props on https://github.com/quasarframework/quasar/blob/7e794f7068475dabd9d64dc41ec78d19caa31b57/ui/src/components/stepper/QStep.js#L64

Making it so the 2nd QStep child is inheriting from the first parent like described in: https://vuejs.org/guide/components/provide-inject.html#working-with-symbol-keys when using symbol keys.

QStepper would need to generate a unique key if a child QStepper is being used to avoid collision from the provide/inject. Its weird because Vue is supposed to walk up the dom and look for the first provide. Ill have to debug this a bit further.

I would like to tackle this issue if possible

ourognao commented 10 months ago

Oh, thanks for taking a look at this issue @HarisSpahija

quasarframework / quasar