No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. ddenev
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 8
    • Posts 27
    • Best 3
    • Groups 0

    ddenev

    @ddenev

    3
    Reputation
    32
    Profile views
    27
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    ddenev Follow

    Best posts made by ddenev

    • Quasar with ESlint 6.x - cannot find module 'eslint-plugin-import'

      Hi,

      I upgraded the following packages:

      • eslint 5.16.0 => 6.7.1
      • eslint-plugin-vue 5.2.3 =>6.0.1
      • @vue/eslint-config-standard 4.0.0 => 5.0.0

      and now when I start my dev app I get a list of the following warnings:

      Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):
      Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
      Require stack:
      - D:\Projects\editor\__placeholder__.js
      

      I also get an error in WebStorm (when I open a .js file) with a stacktrace:

      Error: Failed to load plugin 'import' declared in '.eslintrc.js » @vue/eslint-config-standard » D:\Projects\editor\node_modules\eslint-config-standard\index.js': Cannot find module 'eslint-plugin-import'
      Require stack:
      - D:\Projects\editor\__placeholder__.js
          at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
          at Function.resolve (internal/modules/cjs/helpers.js:75:19)
          at Object.resolve (D:\Projects\editor\node_modules\eslint\lib\shared\relative-module-resolver.js:44:50)
          at ConfigArrayFactory._loadPlugin (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:957:39)
          at D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:846:33
          at Array.reduce (<anonymous>)
          at ConfigArrayFactory._loadPlugins (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:842:22)
          at ConfigArrayFactory._normalizeObjectConfigDataBody (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:665:32)
          at _normalizeObjectConfigDataBody.next (<anonymous>)
          at ConfigArrayFactory._normalizeObjectConfigData (D:\Projects\editor\node_modules\eslint\lib\cli-engine\config-array-factory.js:594:20)
      Process finished with exit code -1
      

      Is Quasar compatible with ESlint 6.x or shall I stick to 5.x?

      posted in Help
      D
      ddenev
    • RE: How to compile SCSS to CSS and load the CSS code as string into a variable? **Solved**

      I have found the following solution:

      1. Install the “raw-loader” loader
      2. Import the SCSS using the following statement:

      import style from '!raw-loader!sass-loader!./my-styles.scss'

      Note: the “!” at the beginning is to override the default loaders configuration. In my case Quasar chains the “style-loader” for SCSS files by default (to output a tag in the head) so I have to disable it in this case.

      And now I have the compiled CSS code in the  style  variable.

      Update: After adding the above import statement, my ESLint complained that I shouldn’t use the import syntax to configure webpack loaders (more details why: https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md). So I removed the import statement and added this code to my quasar.conf.js:

      build: {
        // ...
        extendWebpack (cfg) {
          // ...
          const ruleIndex = cfg.module.rules.findIndex(rule => rule.test.toString() === '/\\.scss$/')
          cfg.module.rules[ruleIndex].oneOf.unshift({
            test: /my-styles\.scss$/,
            use: [
              'raw-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins: [
                    require('autoprefixer')
                  ]
                }
              },
              'sass-loader'
            ]
          })
          // ...
        }
        // ...
      }
      

      Note that in this case I have also added the postcss-loader with the autoprefixer plugin as I wanted my CSS to be enriched with vendor prefixes.

      posted in Useful Tips (NEW)
      D
      ddenev
    • RE: How to compile SCSS to CSS and load the CSS code as string into a variable? **Solved**

      An update to the solution has been added above

      posted in Useful Tips (NEW)
      D
      ddenev

    Latest posts made by ddenev

    • RE: How to use Quasar components as dynamic components?

      @dobbel and @metalsadman , thank you!

      posted in Help
      D
      ddenev
    • RE: How to use Quasar components as dynamic components?

      importStrategy: 'auto'

      Yes, if I put 'QBtn' in components then it works.

      So if I want to use dynamic components I have to manually put them in components… what an irony 🙂

      posted in Help
      D
      ddenev
    • How to use Quasar components as dynamic components?

      What is the proper way to use Quasar components as a dynamic components, i.e.:

      <component is="q-btn" />
      

      Currently I get the following error:

      Unknown custom element: <q-btn> - did you register the component correctly?
      

      My use case is - I am creating a wrapper component to add drag-n-drop functionality so I need to be able to pass the wrapped component as a prop to my drag wrapper, which in turn uses <component :is="tag" /> to render the actual wrapped component.

      posted in Help
      D
      ddenev
    • RE: QTable select row when clicking row

      @metalsadman, that’s a great tip, thanks! I was just looking for that.

      One question though - in this case, when using q-tr with q-td in a body slot, it seems that I will need to effectively rewrite the whole implementation of the body row, e.g.:

      <template v-slot:body="props">
        <q-tr :props="props">
          // 1. the td for the selection column with the q-checkbox and all the logic
          // 2. all other tds for all other columns
        </q-tr>
      </template>
      

      while by default all of this is done by Quasar. So my question is - is there a more efficient way to just make a row clickable, without rewriting the complete default implementation of the body row slot?

      Thank you in advance!

      posted in Framework
      D
      ddenev
    • RE: Dialog Plugin - 'style' and 'class' are not passed to buttons

      @ddenev class and style are not qbtn props, those are native attributes

      @metalsadman, yes, I know that, thank you for mentioning 🙂

      Nevertheless, I believe it’s intuitive to expect that both the QBtn-related props and the native “style” and “class” attributes work. This expectation is based on “See QBtn for available props” which refers to the QBtn-inherent ones but leaves the native attributes out and that in turn leads to a default assumption that if they work naturally with the QBtn component then they should also work for the Dialog Plugin case.

      … and that’s why the docs wasn’t wrong about it

      I wasn’t implying that the docs are “wrong”, I was just suggesting to make them a bit more clear based on my belief above. Other people could, like me, naively assume that the “style” and “class” native attributes should naturally work in that case.

      posted in Help
      D
      ddenev
    • RE: Dialog Plugin - 'style' and 'class' are not passed to buttons

      OK, got it, thank you again!

      I guess custom component is the way to go then. In addition it might be a good idea IMHO to update the docs that “style” and “class” will not work in this case since the current description implies that all QBtn props would work.

      posted in Help
      D
      ddenev
    • RE: Dialog Plugin - 'style' and 'class' are not passed to buttons

      @metalsadman, thank you very much for the effort but unfortunately this does not help in solving the problem that I described.

      I definitely checked all the properties of QBtn before posting the question here and there is no QBtn-specific properties that manage the general style and class, apart from the base “style” and “class” ones, which in turn do not work, as described. The border radius that I want to apply above can only be applied with “style”, there is no inherent property of QBtn that allows this.

      Providing a “style” or a “class” property binding to a regular QBtn component works just fine. It does not work for Dialog Plugin though.

      So back to square 1 - is this a bug and if not then how is this supposed to work?

      posted in Help
      D
      ddenev
    • Dialog Plugin - 'style' and 'class' are not passed to buttons

      Hi,

      I’m having the following code:

      exportSelected () {
        this.$q.dialog({
          title: 'Export selected',
          message: 'Export the selected analyses?',
          cancel: true,
          ok: {
            label: 'Export',
            unelevated: true,
            style: { 'border-radius': 0 }
          }
        })
      }
      

      The problem is that the ‘style’ is not applied to the button. Same is with ‘class’ property.

      How is this supposed to work?

      posted in Help
      D
      ddenev
    • RE: Quasar Upgrade is failing due to npm server error on MAC

      Found the problem - there was an old yarn.lock file in the project dir and the quasar upgrade script checks for its existence in order to decide which packager to use.
      Removed it and now everything works.
      Sorry for the false alarm!

      posted in Help
      D
      ddenev
    • RE: Quasar Upgrade is failing due to npm server error on MAC

      I guess there might be some regression going on since @rstoenescu fixed something that seems related in 1.0.0-beta7 - https://github.com/quasarframework/quasar/releases/tag/%40quasar%2Fcli-v1.0.0-beta.7

      posted in Help
      D
      ddenev