@d-mok/quasar-app-extension-quasar-axe 2.1.21 → 2.1.23

package/src/templates/src/boot/axe/components/QxFloatBtn.vue

@@ -1,46 +1,46 @@
-<template>
-    <q-page-sticky
-        :position="position"
-        :offset="[18, 18]"
-    >
-        <q-fab
-            :color="color"
-            :icon="icon"
-            :direction="direction"
-            glossy
-            push
-            :vertical-actions-align="align"
-            :label="label"
-        >
-            <q-fab-action
-                v-for="ac in actions"
-                :color="ac.color"
-                :icon="ac.icon"
-                :label="ac.label"
-                @click="ac.onClick()"
-            />
-        </q-fab>
-    </q-page-sticky>
-</template>
-
-<script lang="ts" setup>
-type action = {
-    color: string
-    icon: string
-    label: string
-    onClick: () => void
-}
-
-const props = defineProps<{
-    position: 'bottom-left' | 'bottom-right'
-    color?: string
-    icon: string
-    label?: string
-    actions: action[]
-}>()
-
-let direction: 'up' | 'left' | 'right' | 'down' = 'up'
-let align: 'left' | 'right' | 'center' = 'left'
-if (props.position === 'bottom-left') align = 'left'
-if (props.position === 'bottom-right') align = 'right'
-</script>
+<template>
+    <q-page-sticky
+        :position="position"
+        :offset="[18, 18]"
+    >
+        <q-fab
+            :color="color"
+            :icon="icon"
+            :direction="direction"
+            glossy
+            push
+            :vertical-actions-align="align"
+            :label="label"
+        >
+            <q-fab-action
+                v-for="ac in actions"
+                :color="ac.color"
+                :icon="ac.icon"
+                :label="ac.label"
+                @click="ac.onClick()"
+            />
+        </q-fab>
+    </q-page-sticky>
+</template>
+
+<script lang="ts" setup>
+type action = {
+    color: string
+    icon: string
+    label: string
+    onClick: () => void
+}
+
+const props = defineProps<{
+    position: 'bottom-left' | 'bottom-right'
+    color?: string
+    icon: string
+    label?: string
+    actions: action[]
+}>()
+
+let direction: 'up' | 'left' | 'right' | 'down' = 'up'
+let align: 'left' | 'right' | 'center' = 'left'
+if (props.position === 'bottom-left') align = 'left'
+if (props.position === 'bottom-right') align = 'right'
+</script>

package/src/templates/src/boot/axe/components/QxImg.vue

@@ -1,22 +1,22 @@
-<template>
-    <img
-        :sizes="100 * (scale ?? 1) + 'px'"
-        :srcset="src + ' 100w'"
-        :src="src ?? undefined"
-        :class="{ border: bordered ?? false }"
-    />
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-    src: string | undefined
-    bordered?: boolean
-    scale?: number
-}>()
-</script>
-
-<style scoped>
-.border {
-    border: 2px solid;
-}
-</style>
+<template>
+    <img
+        :sizes="100 * (scale ?? 1) + 'px'"
+        :srcset="src + ' 100w'"
+        :src="src ?? undefined"
+        :class="{ border: bordered ?? false }"
+    />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    src: string | undefined
+    bordered?: boolean
+    scale?: number
+}>()
+</script>
+
+<style scoped>
+.border {
+    border: 2px solid;
+}
+</style>

package/src/templates/src/boot/axe/components/QxInputAutocomplete.vue

@@ -1,51 +1,51 @@
-<template>
-    <q-select
-        :model-value="text"
-        use-input
-        hide-selected
-        fill-input
-        hide-dropdown-icon
-        input-debounce="0"
-        :options="options"
-        @filter="filterFn"
-        @input-value="setModel"
-        v-bind="$attrs"
-    >
-    </q-select>
-</template>
-
-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import _ from 'lodash'
-import { ref, watch } from 'vue'
-
-const props = defineProps<{
-    autocomplete: string[]
-    modelValue: any
-}>()
-
-const emits = defineEmits(['update:modelValue'])
-
-const text = useVModel(props, 'modelValue', emits)
-if (!text.value) text.value = null
-
-let options = ref<string[]>([])
-
-function filterFn(val: any, update: any) {
-    if (!val) val = text.value
-    update(() => {
-        if (!val) {
-            options.value = []
-            return
-        }
-        const needle = val.toLowerCase()
-        options.value = props.autocomplete.filter(
-            v => v.toLowerCase().indexOf(needle) > -1
-        )
-    })
-}
-
-function setModel(val: string) {
-    text.value = val
-}
-</script>
+<template>
+    <q-select
+        :model-value="text"
+        use-input
+        hide-selected
+        fill-input
+        hide-dropdown-icon
+        input-debounce="0"
+        :options="options"
+        @filter="filterFn"
+        @input-value="setModel"
+        v-bind="$attrs"
+    >
+    </q-select>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core'
+import _ from 'lodash'
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+    autocomplete: string[]
+    modelValue: any
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const text = useVModel(props, 'modelValue', emits)
+if (!text.value) text.value = null
+
+let options = ref<string[]>([])
+
+function filterFn(val: any, update: any) {
+    if (!val) val = text.value
+    update(() => {
+        if (!val) {
+            options.value = []
+            return
+        }
+        const needle = val.toLowerCase()
+        options.value = props.autocomplete.filter(
+            v => v.toLowerCase().indexOf(needle) > -1
+        )
+    })
+}
+
+function setModel(val: string) {
+    text.value = val
+}
+</script>

package/src/templates/src/boot/axe/components/QxLayout.vue

@@ -1,123 +1,123 @@
-<template>
-    <q-layout :view="view">
-        <q-header
-            v-if="!noHeader"
-            elevated
-            z-top
-        >
-            <q-toolbar>
-                <q-btn
-                    flat
-                    round
-                    icon="menu"
-                    aria-label="Menu"
-                    @click="open = !open"
-                />
-                <q-toolbar-title class="text-weight-bolder text-h5">{{
-                    title
-                }}</q-toolbar-title>
-                <div
-                    class="text-h6"
-                    @click="onClickAppendix?.()"
-                    :class="{ clickable: onClickAppendix }"
-                >
-                    {{ appendix }}
-                </div>
-            </q-toolbar>
-        </q-header>
-
-        <q-drawer
-            v-model="open"
-            elevated
-            :show-if-above="showDrawer"
-        >
-            <q-item-label
-                class="text-h6 q-mt-xs"
-                header
-                >Menu</q-item-label
-            >
-            <q-separator />
-            <q-list separator>
-                <qx-menu-item
-                    v-for="item in items"
-                    :key="item.title"
-                    v-bind="item"
-                />
-            </q-list>
-            <q-separator />
-            <qx-menu-item
-                v-if="onSignOut"
-                icon="logout"
-                title="Sign Out"
-                :caption="account"
-                @click="onSignOut?.()"
-            />
-            <q-separator v-if="onSignOut" />
-        </q-drawer>
-
-        <slot name="drawer"></slot>
-
-        <div
-            class="q-my-md q-mx-auto"
-            :style="{ 'max-width': width }"
-        >
-            <q-page-container>
-                <router-view
-                    v-slot="{ Component }"
-                    :key="$route.fullPath"
-                >
-                    <transition
-                        enter-active-class="animated fadeIn"
-                        leave-active-class="animated fadeOut"
-                        appear
-                        mode="out-in"
-                        :duration="200"
-                    >
-                        <component :is="Component" />
-                    </transition>
-                </router-view>
-            </q-page-container>
-        </div>
-    </q-layout>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-type item = {
-    title: string
-    caption?: string
-    icon: string
-    link: string
-}
-
-const props = withDefaults(
-    defineProps<{
-        title: string
-        appendix?: string
-        onClickAppendix?: () => void
-        items: item[]
-        width?: string
-        showDrawer?: boolean
-        view?: string
-        noHeader?: boolean
-        onSignOut?: () => void
-        account?: string
-    }>(),
-    {
-        appendix: '',
-        width: '1200px',
-        showDrawer: false,
-        view: 'hHh LpR fFf',
-        noHeader: false,
-    }
-)
-
-let open = ref(false)
-</script>
-
-<style scoped>
-.clickable {
-    cursor: pointer;
-}
-</style>
+<template>
+    <q-layout :view="view">
+        <q-header
+            v-if="!noHeader"
+            elevated
+            z-top
+        >
+            <q-toolbar>
+                <q-btn
+                    flat
+                    round
+                    icon="menu"
+                    aria-label="Menu"
+                    @click="open = !open"
+                />
+                <q-toolbar-title class="text-weight-bolder text-h5">{{
+                    title
+                }}</q-toolbar-title>
+                <div
+                    class="text-h6"
+                    @click="onClickAppendix?.()"
+                    :class="{ clickable: onClickAppendix }"
+                >
+                    {{ appendix }}
+                </div>
+            </q-toolbar>
+        </q-header>
+
+        <q-drawer
+            v-model="open"
+            elevated
+            :show-if-above="showDrawer"
+        >
+            <q-item-label
+                class="text-h6 q-mt-xs"
+                header
+                >Menu</q-item-label
+            >
+            <q-separator />
+            <q-list separator>
+                <qx-menu-item
+                    v-for="item in items"
+                    :key="item.title"
+                    v-bind="item"
+                />
+            </q-list>
+            <q-separator />
+            <qx-menu-item
+                v-if="onSignOut"
+                icon="logout"
+                title="Sign Out"
+                :caption="account"
+                @click="onSignOut?.()"
+            />
+            <q-separator v-if="onSignOut" />
+        </q-drawer>
+
+        <slot name="drawer"></slot>
+
+        <div
+            class="q-my-md q-mx-auto"
+            :style="{ 'max-width': width }"
+        >
+            <q-page-container>
+                <router-view
+                    v-slot="{ Component }"
+                    :key="$route.fullPath"
+                >
+                    <transition
+                        enter-active-class="animated fadeIn"
+                        leave-active-class="animated fadeOut"
+                        appear
+                        mode="out-in"
+                        :duration="200"
+                    >
+                        <component :is="Component" />
+                    </transition>
+                </router-view>
+            </q-page-container>
+        </div>
+    </q-layout>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+type item = {
+    title: string
+    caption?: string
+    icon: string
+    link: string
+}
+
+const props = withDefaults(
+    defineProps<{
+        title: string
+        appendix?: string
+        onClickAppendix?: () => void
+        items: item[]
+        width?: string
+        showDrawer?: boolean
+        view?: string
+        noHeader?: boolean
+        onSignOut?: () => void
+        account?: string
+    }>(),
+    {
+        appendix: '',
+        width: '1200px',
+        showDrawer: false,
+        view: 'hHh LpR fFf',
+        noHeader: false,
+    }
+)
+
+let open = ref(false)
+</script>
+
+<style scoped>
+.clickable {
+    cursor: pointer;
+}
+</style>

package/src/templates/src/boot/axe/components/QxMenuItem.vue

@@ -1,36 +1,36 @@
-<template>
-    <q-item
-        clickable
-        :to="link"
-    >
-        <q-item-section
-            v-if="icon"
-            avatar
-        >
-            <q-icon :name="icon" />
-        </q-item-section>
-
-        <q-item-section>
-            <q-item-label
-                title
-                class="text-weight-bold"
-                >{{ title }}</q-item-label
-            >
-            <q-item-label
-                caption
-                v-if="caption"
-            >
-                {{ caption }}
-            </q-item-label>
-        </q-item-section>
-    </q-item>
-</template>
-
-<script lang="ts" setup>
-defineProps<{
-    title: string
-    caption?: string
-    link?: string
-    icon?: string
-}>()
-</script>
+<template>
+    <q-item
+        clickable
+        :to="link"
+    >
+        <q-item-section
+            v-if="icon"
+            avatar
+        >
+            <q-icon :name="icon" />
+        </q-item-section>
+
+        <q-item-section>
+            <q-item-label
+                title
+                class="text-weight-bold"
+                >{{ title }}</q-item-label
+            >
+            <q-item-label
+                caption
+                v-if="caption"
+            >
+                {{ caption }}
+            </q-item-label>
+        </q-item-section>
+    </q-item>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+    title: string
+    caption?: string
+    link?: string
+    icon?: string
+}>()
+</script>