@d-mok/quasar-app-extension-quasar-axe 2.0.14 → 2.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d-mok/quasar-app-extension-quasar-axe",
-    "version": "2.0.14",
+    "version": "2.0.17",
     "description": "A Quasar App Extension",
     "author": "d-mok <49301824+d-mok@users.noreply.github.com>",
     "license": "MIT",
@@ -24,7 +24,7 @@
         "jszip": "^3.9.0",
         "lodash": "^4.17.21",
         "papaparse": "^5.3.2",
-        "sapphire-js": "^1.0.68",
+        "sapphire-js": "^1.0.69",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {

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

@@ -0,0 +1,11 @@
+<template>
+    <qx-btn
+        v-bind="$attrs"
+        flat
+        dense
+    />
+</template>
+
+<script lang="ts" setup>
+// this component follow qx-btn, with default flat and dense
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+    <q-btn-toggle
+        v-model="selected"
+        :options="opts"
+        v-bind="$attrs"
+    />
+</template>
+
+<script lang="ts" setup>
+import { computed } from '@vue/reactivity'
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: any
+        options: any[]
+        optionLabel?: string | ((_: any) => string)
+    }>(),
+    {}
+)
+const emits = defineEmits(['update:modelValue'])
+
+const selected = useVModel(props, 'modelValue', emits)
+
+function getLabelFunc(labeler?: string | ((_: any) => string)) {
+    if (typeof labeler === 'string') {
+        return ($: any) => String($[labeler])
+    }
+    if (typeof labeler === 'function') {
+        return labeler
+    }
+    return ($: any) => String($)
+}
+
+let opts = computed(() => {
+    let f = getLabelFunc(props.optionLabel)
+    return props.options.map($ => {
+        let str = f($)
+        return { label: str, value: str }
+    })
+})
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+    <q-option-group
+        v-model="selected"
+        :options="opts"
+        v-bind="$attrs"
+    />
+</template>
+
+<script lang="ts" setup>
+import { computed } from '@vue/reactivity'
+import { useVModel } from '@vueuse/core'
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: any
+        options: any[]
+        optionLabel?: string | ((_: any) => string)
+    }>(),
+    {}
+)
+const emits = defineEmits(['update:modelValue'])
+
+const selected = useVModel(props, 'modelValue', emits)
+
+function getLabelFunc(labeler?: string | ((_: any) => string)) {
+    if (typeof labeler === 'string') {
+        return ($: any) => String($[labeler])
+    }
+    if (typeof labeler === 'function') {
+        return labeler
+    }
+    return ($: any) => String($)
+}
+
+let opts = computed(() => {
+    let f = getLabelFunc(props.optionLabel)
+    return props.options.map($ => {
+        let str = f($)
+        return { label: str, value: str }
+    })
+})
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+    <div
+        v-bind="$attrs"
+        :class="{
+            'text-caption': caption,
+            'text-subtitle1': subtitle1,
+            'text-subtitle2': subtitle2,
+            'text-body1': body1,
+            'text-body2': body2,
+            'text-h6': h6,
+            'text-h5': h5,
+            'text-h4': h4,
+            'text-weight-bold': bold,
+            'text-weight-bolder': bolder,
+        }"
+    >
+        <slot></slot>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+    defineProps<{
+        bold?: boolean
+        bolder?: boolean
+        caption?: boolean
+        subtitle1?: boolean
+        subtitle2?: boolean
+        body1?: boolean
+        body2?: boolean
+        h6?: boolean
+        h5?: boolean
+        h4?: boolean
+    }>(),
+    {}
+)
+</script>

package/src/templates/src/utils/index.ts

@@ -3,6 +3,9 @@ export * as qNotify from './notify'
 
 export { Sheet, List } from 'sapphire-js'
 
+import * as lo from 'lodash'
+export const _ = lo
+
 export { HANDLE_ERROR, supabase } from './supabase'
 
 export { localSettings } from './settings'