now at 9 pm PDT it is loading again @rstoenescu

loaded from here
https://www.locabrowser.com/
and from all locations I tried the page won’t load.
Definitely not me.

Anyone else been having issues loading the quasar.dev website?

It’s been mostly down all weekend (maybe longer),

Currently at Sunday 8pm Pacific Time US 10/10 I can’t reach it.

Never had issues before.

Not having issues reaching any other website including this forum which apparently is on a different server.

See my post in this thread for a start. Doesn’t have expandable items but that would be added easily
https://forum.quasar-framework.org/topic/4520/how-to-add-opacity-to-the-drawer-background-please/2

@bambinou just so you know this component also dependents on some dynamic font sizing otherwise it will look wonky.
https://forum.quasar-framework.org/topic/3483/fluid-typography-solved/34

Here is my latest version of that

// SET DEFAULT FONT SIZES

// FONT SIZING
@import '../../node_modules/rfs/stylus'
// rfs settable variables - commented are defaults
$rfs-base-font-size = 1rem
// $rfs-font-size-unit = rem
$rfs-breakpoint = 1400px
// $rfs-breakpoint-unit = px
// $rfs-factor = 10
// $rfs-rem-value = 16
$rfs-two-dimensional = true
// $rfs-class = false

$field-font-factor = 1.2  // relative to base font size
$field-label-font-factor = 1 // relative to field font size

$item-font-factor = 1.1  // relative to base font size
$item-caption-font-factor = .8 // relative to item size
$item-header-font-factor = 1.5 // relative to item size

.q-item__label
  rfs($rfs-base-font-size * $item-font-factor)

.q-item__label--header
  rfs($rfs-base-font-size * $item-font-factor * $item-header-font-factor)

.q-item__label--caption
  rfs($rfs-base-font-size * $field-label-font-factor * $item-caption-font-factor )
  padding-bottom .3em // needs to be dynamic based on font size

.q-field__native
   rfs($rfs-base-font-size * $field-font-factor)

.q-field__label
   rfs($rfs-base-font-size * $field-font-factor)
   padding-bottom .7em // needs to be dynamic based on font size

.q-field__label
&.no-pointer-events
  rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor )
  padding-bottom .5em // needs to be dynamic based on font size

As is typical it was my issue.

I was setting the props.value incorrectly when the value was a boolean. The select is working normally now with boolean values for options

If I set up options like so for a select

   options:
      - label: 'MCP 23017, 16 GPIOs'
        value: true
      - label: 'MCP 23008, 8 GPIOs'
        value: false

and use emit-value, and map-options it works if value was initially true but once set false then component no longer emits an input event on change.

Previous to 1.0 this worked fine only since 1.0 has it stopped functioning with boolean values.

If I swap a string for the two values it works fine (no surprise) only when using boolean values does issue arise

In the meantime I’ve had to resort to using a checkbox as I need boolean values output from this component.

I am running 1.17/1.1.4

This doesn’t answer your question directly for the built-in/example drawer menu but

I wrote a drawer menu component that one can drop into the drawer that gives more/easier control over the elements.
If you don’t want to use it then try using similar classes in the existing drawer section of your template.

fyi .q-drawer__content is the primary class element into which the component drops. Take a look at styling section below

This component uses a menu prop which is just an object with the menu options. This for me was way easier than hard coding each choice. I just change an entry or change it’s disabled or hide property. Very easy to do dynamically too.

<template>
  <q-list class="q-drawer-menu">
    <q-item-label class="q-drawer-menu__heading" header v-if="menu.heading">{{ menu.heading }} </q-item-label>
    <q-separator v-if="menu.separator"/>
    <!-- <q-separator spaced v-if="menu.separator"/> -->
    <div :key="item.name" v-for="item in menu.items">
      <q-item
      :clickable="item.disabled"
      v-if="!item.hidden"
      :class="item.disabled ? 'disabled':'enabled'"
      class="q-drawer-menu__item"
      @click="$emit('active',item)"
      :to="`/${item.path||item.name}`">
        <q-tooltip v-if="item.tip">{{item.tip}}</q-tooltip>
        <q-item-section v-if="!menu.disableIcons" top avatar>
          <q-avatar v-if="item.icon" :color="item.iconColor" class="q-drawer-menu__item--icon" :icon="item.icon" />
          <!-- <q-icon v-if="item.icon" :color="item.iconColor || 'primary'" class="q-drawer-menu__item--icon" :name="item.icon" /> -->
        </q-item-section>
        <q-item-section>
          <q-item-label class="q-drawer-menu__item--name">{{ item.label ? item.label : item.name[0].toUpperCase()+item.name.slice(1) }}</q-item-label>
          <q-item-label caption class="q-drawer-menu__item--caption" lines="2">{{item.caption}}</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator v-if="!item.disabled & menu.separator" />
    </div>
    <q-icon />
</q-list>
</template>

<script>
import { QItem, QItemLabel, QItemSection, QSeparator, QIcon } from 'quasar'

// is array of object that looks

export default {
  data () {
    return {
      pin: '',
      disabled: false
    }
  },
  props: ['menu'],
  methods: {
  },
  watch: {
    pin (val) {
      if (val && val.length === this.pin.length) {
        this.disabled = true
        this.validatePin()
      }
    }
  },
  components: { QItem, QItemLabel, QItemSection, QSeparator, QIcon }
}
</script>

<style lang="stylus">
.q-drawer__content
  background-color $menu-color
.q-drawer-menu__heading
  color $menu-heading-text-color
  background $menu-heading-color
.q-drawer-menu__item
  padding .2em
  color $menu-item-text-color
  background $menu-item-color
.q-drawer-menu__item
 &.disabled
  background $menu-item-disabled-color
.q-drawer-menu__item--caption
  color $menu-item-caption-text-color
.q-drawer-menu__item--icon
  color $menu-item-icon-symbol-color
  background-color $menu-item-icon-color

</style>

I put this in assets and then load it and set is as the passed menu prop.

export default {
  heading: 'System Configuration',
  // disableIcons: true,
  // disabled: true,
  separator: true,
  items: [ // name is only required
    // full props supported are, label, name, caption,icon,hidden,disabled
    { label: 'Primary', name: 'config', caption: 'primay configuration', icon: 'fas fa-cog' },
    { name: 'network', path: 'service/network', caption: 'Networked Devices/SBCs/Computers', icon: 'fas fa-network-wired' },
    { name: 'hardware', path: 'service/hardware', caption: 'Hardware Firmware Setup', icon: 'fas fa-microchip' },
    { name: 'circuits', path: 'service/circuits', caption: 'Physical Light/Outlet Circuits Setup', icon: 'fas fa-lightbulb' },
    { name: 'switches', path: 'service/switches', caption: 'Physical and Virtual Switch Setup', icon: 'fas fa-toggle-on' },
    { name: 'security', caption: 'System User Credentials', icon: 'fa fa-shield-alt' },
    { name: 'backup', caption: 'Backup Underlying Database', icon: 'fas fa-save', disabled: true },
    { name: 'help', caption: 'Configuration Help/Docs', tip: 'this is a tip', icon: 'fas fa-info-circle' },
    { name: 'command', caption: 'Custom Command', icon: 'fas fa-chevron-right', hidden: true }
  ]
}

    <q-drawer show-if-above v-model="menuOpen" side="left" bordered>
      <q-drawer-menu :menu="menu" @active="(item) => active=item"/>
    </q-drawer>

...

import menu from 'assets/menu'
import QDrawerMenu from 'src/components/DrawerMenu'


...
      menu: menu,

    }
  },
  components: {
    QDrawerMenu
  },
...

I would like to import some components at runtime via a path determined at runtime.
https://quasar.dev/quasar-cli/cli-documentation/lazy-loading#Lazy-load-on-the-fly

like so

    async loadService () {
      let path = `${SERVICE_DIR}/${this.service}.vue`
      console.log(path)
      return import(path)  // throws errors
     //  return import('src/pages/services/network.vue')  // works fine
    }
  },

BUT.

1. webpack complains with

 warning  in ./src/components/Service.vue?vue&type=script&lang=js&

Critical dependency: the request of a dependency is an expression

2. When it tries to load can’t find module which is not true cause it loads via static import at that path

Error: Cannot find module 'src/pages/services/network.vue'

If I hard code a path for testing purposes (in the comment above) then both 1 and 2 go away and it works as intended.

Seems there is some webpack issue? I am running latest quasar 1+

Some other issues in other projects indicate that a runtime path is an issue with webpack.

Apparently this works cause the docs indicate that it does so has something changed?

One advantage of using dynamic imports as opposed to regular imports is that the import path can be determined at runtime:

Ok sure I can extend as I have done with select slots but with a PR you would not incorporate this? This would not be a one off (for me). Would like that added functionality as part of a quasar base form components. Slider component as is not a great one for mobile/touch (spinner with big buttons and touch repeat so much easier)

Alternatively the quasar project could make it easier to import/use project/community “extra” components. The featherjs project makes that pretty easy (like with common hooks library). Maybe this is already happening just unaware.

Like the current quasar extras maybe a quasar vetted component “extras” repo/module. Submissions would abide by some criteria and the component would be vetted by a project member or experienced community member. Then if package is installed the components therein can be loaded via quasar.conf.js just like the main component library (all, manual, auto) instead of one off in code as would be the case currently.