Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Coude
    C
    • Profile
    • Following 0
    • Followers 0
    • Topics 4
    • Posts 16
    • Best 1
    • Groups 0

    Coude

    @Coude

    1
    Reputation
    2
    Profile views
    16
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Coude Follow

    Best posts made by Coude

    • RE: vue-tel-input with Quasar

      Hi,

      This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

      <template>
        <q-field
          label="Your phone number"
          stack-label
          :error="isError">
          <vue-tel-input
            :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
            input-classes="input-vue-tel-input-in-qfield"
            @input="handleInput"
          >
          </vue-tel-input>
        </q-field>
      </template>
      
      <style>
      /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
      .input-vue-tel-input-in-qfield {
        height:98%;
        margin-bottom: auto;
      }
      
      /* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
      .wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
        color: var(--q-color-dark);
      }
      </style>
      
      <script>
      import { VueTelInput } from 'vue-tel-input';
      
      export default {
        name: 'InputPhone',
        props: {
          //
        },
        components: {
          VueTelInput,
        },
        data() {
          return {
            isError: false,
          }
        },
        methods: {
          handleInput (val, objVal) {
            console.log(val, objVal);
            this.isError = !objVal.isValid;
          }
        },
      }
      </script>
      
      posted in Help
      C
      Coude

    Latest posts made by Coude

    • RE: Quasar v2 with Vue 3 roadmap

      I looked for this question/info on the forum and github, but did not find it, so sorry if if has already been said or answered somewhere 🙂

      How long do you plan to keep support/update the quasar v1? Do you plan to add new features in v1 too? For how long? Or will you only fix bugs and things like that?

      Thanks!

      posted in Announcements
      C
      Coude
    • RE: We need your help! Quasar 2021 Community Survey

      @Hawkeye64 and @s-molinari Thank you for your answers! 🙂

      posted in Announcements
      C
      Coude
    • RE: We need your help! Quasar 2021 Community Survey

      @s-molinari Hi, any updates about the results? 🙂

      posted in Announcements
      C
      Coude
    • RE: Close drawer from deep component in V1

      Hi,

      @currycode I would say that using v-model of the drawer and click event for elements inside it, it should do the work. You have some closely related examples in the docs

       <q-drawer
              v-model="showDrawer"
            >
              <q-scroll-area class="fit">
                <q-list>
                  <q-item clickable v-ripple @click="showDrawer = !showDrawer">
                    <q-item-section avatar>
                      <q-icon name="inbox" />
                    </q-item-section>
                 </q-item>
      (...)
              </q-list>
          </q-scroll-area>
       </q-drawer>
      
      posted in Help
      C
      Coude
    • RE: vue-tel-input with Quasar

      Hi,

      This is a start, probably far from perfect, but enough to use vue-tel-input with quasar without too much pain. It is fast and easy solution, which works ok.

      <template>
        <q-field
          label="Your phone number"
          stack-label
          :error="isError">
          <vue-tel-input
            :wrapper-classes="['no-border','no-box-shadow','no-ouline','wrapper-vue-tel-input-in-qfield']"
            input-classes="input-vue-tel-input-in-qfield"
            @input="handleInput"
          >
          </vue-tel-input>
        </q-field>
      </template>
      
      <style>
      /* note: the height 98% is to avoid the inner input to hide the bottom border of q-field */
      .input-vue-tel-input-in-qfield {
        height:98%;
        margin-bottom: auto;
      }
      
      /* note: I use color dark for my text, I am forcing it because otherwise it is the same color as q-field - so here primary color or negative color when error - */
      .wrapper-vue-tel-input-in-qfield li.vti__dropdown-item {
        color: var(--q-color-dark);
      }
      </style>
      
      <script>
      import { VueTelInput } from 'vue-tel-input';
      
      export default {
        name: 'InputPhone',
        props: {
          //
        },
        components: {
          VueTelInput,
        },
        data() {
          return {
            isError: false,
          }
        },
        methods: {
          handleInput (val, objVal) {
            console.log(val, objVal);
            this.isError = !objVal.isValid;
          }
        },
      }
      </script>
      
      posted in Help
      C
      Coude
    • RE: How to add transition on q-header component when they reveal or hide out?

      I would use the reveal event (see docs )

      In template:

      <q-header reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98” 
      @reveal="handleReveal"
      :class="isRevealed ? 'revealed' : 'not-revealed'"
      >
      ...
      </q-header>
      

      in script:

      handleReveal(isRevealed) {
        this.isRevealed = isRevealed;
      //do something else if you want
      }
      

      and in style you can add css-transition

      .revealed {
        background-color:rgba(255,255,255,0.94);
        transition: background-color 0.25s ease-in-out;
      }
      
      .not-revealed {
        background-color:rgba(255,255,255,0.01);
        transition: background-color 0.25s ease-in;
      }
      

      This is a start, hope it might help.

      posted in Help
      C
      Coude
    • vue-tel-input with Quasar

      Hi,

      I am planning to use vue-tel-input ( here ) in my quasar app (made using vue-cli). Do anyone has some experience with it?
      More precisely, I would like to know if we may manage to get the quasar/material look using this component (if I wrap it inside a QField, would it be enough?). If you have some advices, I would be glad to hear it ;).

      posted in Help
      C
      Coude
    • RE: We need your help! Quasar 2021 Community Survey

      I’m looking forward to see the results! 🙂

      posted in Announcements
      C
      Coude
    • RE: ssr, preFetch and store : have to go to $store._vm._data.$$state

      @metalsadman I just tried it, it does not change anything.
      I added getters, it works better.

      One issue I have, it’s that I am not able to lazy-register my stores. I’ve tried many many different things and I am getting hydration issue (likely due to data difference between front and ssr) and vuex namespace duplicates. So, for now, I am registering my vuex modules/stores globally in the index, it is not optimal but at least it is working!

      posted in Help
      C
      Coude
    • RE: ssr, preFetch and store : have to go to $store._vm._data.$$state

      @beets
      Thank you for your answer. Of course I’ve tried this.home = this.$store.state.cms.all; 🙂 (That’s why I have those console.log, because I tried to find if it was hidden somewhere, and it was!).

      And, that’s what I thought about during sleep : I did not make a getter.

      posted in Help
      C
      Coude