Snippets

John Martini Quasar Snippets

Created by John Martini last modified
Console Splitter.vue
Raw 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
  <q-page class="column">
    <div class="col bg-purple relative-position">
      <div class="absolute-full scroll overflow-auto">
        <div class="text-h4 q-mb-md">Before</div>
        <div v-for="n in 50" :key="n" class="q-my-md">
          {{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Quis praesentium cumque magnam odio iure quidem, quod illum numquam
          possimus obcaecati commodi minima assumenda consectetur culpa fuga
          nulla ullam. In, libero.
        </div>
      </div>
    </div>

    <div v-if="isCategoriesEnabled">
      <q-bar
        class="bg-primary cursor-n-size"
        style="cursor: n-resize"
        v-touch-pan.vertical.prevent.mouse="handlePan"
      >
        <div>Console</div>
        <q-space />
        <q-btn dense flat round icon="mdi-text-box-remove-outline">
          <q-tooltip :delay="1000">Clear</q-tooltip>
        </q-btn>
        <q-btn
          dense
          round
          flat
          icon="mdi-close"
          @click="isCategoryEnabled = False"
        >
          <q-tooltip :delay="1000">Close</q-tooltip>
        </q-btn>
      </q-bar>

      <div
        class="col-auto bg-green relative-position"
        :style="`height: ${consoleHeight}px`"
      >
        <div class="absolute-full scroll overflow-auto">
          <div v-for="n in 6" :key="n" class="q-my-md">
            {{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Quis praesentium cumque magnam odio iure quidem, quod illum numquam
            possimus obcaecati commodi minima assumenda consectetur culpa fuga
            nulla ullam. In, libero.
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import AppItemsView from "components/AppItemsView.vue";

export default defineComponent({
  name: "PageIndex",
  components: {
    //AppItemsView,
  },
  setup() {
    const $store = useStore();
    const splitterModel = ref(75);
    const isBusy = computed(() => $store.state.app.isBusy);
    const isCategoriesEnabled = computed(
      () => $store.state.app.isCategoriesEnabled
    );
    const categories = computed(() => $store.state.app.categories);
    const changedExpandedState = (value, name) => {
      $store.commit("app/setCategoryExpanded", { expanded: value, name: name });
    };

    onMounted(() => {
      $store.dispatch("app/initialize");
    });

    // console
    const consoleHeight = ref(100);
    let originalHeight;
    let originalY;

    return {
      isBusy,
      isCategoriesEnabled,
      categories,
      splitterModel,
      changedExpandedState,
      consoleHeight,

      handlePan({ evt, ...newInfo }) {
        console.log("here");
        if (newInfo.isFirst) {
          originalHeight = consoleHeight.value;
          originalY = newInfo.position.top;
        } else {
          const newDelta = newInfo.position.top - originalY;
          // Should add (instead of subtract) for top drawer
          const newHeight = Math.max(
            100,
            Math.min(400, originalHeight - newDelta)
          );
          consoleHeight.value = newHeight;
        }
      },
    };
  },
});
</script>
Flexible Grid Gallery.vue
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="row items-stretch content-stretch q-gutter-md">
  <div class="col">
    <q-card class="bg-red fit">Here we go </q-card>
  </div>
  <div class="col">
    <q-card class=" bg-green fit">Here we go this is longer and it should wrap nicely in the column </q-card>
  </div>
  <div class="col">
    <q-card class=" bg-blue fit">Here we go </q-card>
  </div>
  <div class="col">
    <q-card class=" bg-orange fit">Here we go </q-card>
  </div>
</div>
Vertical Splitter.vue
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <q-page class="bg-red row justify-start">
    <div class="bg-green row col absolute-full"> 
      
      <q-splitter v-model="splitterModel" horizontal class="fit">
        <template v-slot:before>
          <div class="q-pa-md">
            <div class="text-h4 q-mb-md">Before</div>
            <div v-for="n in 20" :key="n" class="q-my-md">
              {{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Quis praesentium cumque magnam odio iure quidem, quod illum
              numquam possimus obcaecati commodi minima assumenda consectetur
              culpa fuga nulla ullam. In, libero.
            </div>
          </div>
        </template>
        
        <template v-slot:after>
          <div class="q-pa-md">
            <div class="text-h4 q-mb-md">After</div>
            <div v-for="n in 20" :key="n" class="q-my-md">
              {{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Quis praesentium cumque magnam odio iure quidem, quod illum
              numquam possimus obcaecati commodi minima assumenda consectetur
              culpa fuga nulla ullam. In, libero.
            </div>
          </div>
        </template>
      </q-splitter>
    </div>
  </q-page>
</template>

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.