@simsustech/quasar-components 0.11.9 → 0.11.11

package/src/ui/general/ResponsiveDialog.vue

@@ -3,18 +3,28 @@
     <q-layout
       view="LHh lpR fff"
       container
-      :class="$q.dark.isActive ? 'bg-dark' : 'bg-white'"
+      class="bg-light-surface dark:bg-dark-surface"
       style="min-width: 85vw"
     >
-      <q-header class="bg-primary">
+      <q-header
+        class="bg-light-surface-container-high dark:bg-dark-surface-container-high"
+      >
         <q-toolbar>
-          <q-btn :icon="closeIcon" flat round dense @click="close" />
+          <q-btn
+            :icon="icons.close"
+            class="text-light-on-surface dark:text-dark-on-surface"
+            flat
+            round
+            dense
+            @click="close"
+          />
           <q-toolbar-title>
             <slot name="title" />
           </q-toolbar-title>
           <q-submit-button
             v-if="!display"
-            color="accent"
+            flat
+            class="text-light-primary dark:text-dark-primary"
             :type="buttonType"
             @submit="submit"
           ></q-submit-button>
@@ -45,10 +55,17 @@ import QSubmitButton from './QSubmitButton.vue'
 export interface Props {
   display?: boolean
   buttonType?: 'submit' | 'send'
-  closeIcon?: string
   padding?: boolean
+  icons?: {
+    close: string
+  }
 }
-withDefaults(defineProps<Props>(), { buttonType: 'submit', closeIcon: 'close' })
+withDefaults(defineProps<Props>(), {
+  buttonType: 'submit',
+  icons: () => ({
+    close: 'close'
+  })
+})
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (

package/src/ui/general/index.ts

@@ -3,5 +3,6 @@ export { default as QStyledCard } from './QStyledCard.vue'
 export { default as ResponsiveDialog } from './ResponsiveDialog.vue'
 export { default as ResourcePage } from './ResourcePage.vue'
 export { default as QLanguageSelect } from './QLanguageSelect.vue'
+// export { default as QLanguageSelectBtn } from './QLanguageSelectBtn.vue'
 export { default as QDrawerList } from './QDrawerList.vue'
 export { useLang, loadLang } from './lang/index.js'

package/src/ui/md3/Md3Layout.vue

@@ -0,0 +1,139 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <div v-show="ready">
+      <q-header>
+        <q-toolbar>
+          <q-btn
+            v-if="!miniState"
+            flat
+            dense
+            round
+            aria-label="Menu"
+            icon="i-mdi-menu"
+            @click="toggleLeftDrawer()"
+          >
+          </q-btn>
+          <slot name="header-toolbar" />
+        </q-toolbar>
+      </q-header>
+
+      <q-drawer
+        ref="drawerRef"
+        :model-value="leftDrawerOpen"
+        :width="360"
+        :mini-width="80"
+        :mini="miniState"
+        show-if-above
+        bordered
+        @hide="onDrawerHide"
+        @update:model-value="toggleLeftDrawer"
+        @mouseleave="debouncedToggleMiniState(true)"
+      >
+        <template #mini>
+          <div
+            :class="{
+              column: true,
+              'items-center': miniState,
+              'pr-0': true
+            }"
+          >
+            <q-btn
+              flat
+              dense
+              round
+              aria-label="Menu"
+              icon="i-mdi-menu"
+              class="q-mb-md"
+              @click="toggleLeftDrawer()"
+            >
+            </q-btn>
+            <div id="fabs" class="q-mb-md">
+              <slot name="fabs" :show-sticky="false" />
+            </div>
+
+            <div id="spacing" class="gt-md min-h-32px" />
+
+            <slot name="drawer-mini-navigation" />
+          </div>
+        </template>
+        <slot name="drawer" />
+      </q-drawer>
+
+      <q-footer class="h-80px lt-md">
+        <slot name="footer" />
+      </q-footer>
+
+      <q-page-container>
+        <router-view />
+        <slot name="fabs" :show-sticky="true" />
+      </q-page-container>
+    </div>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { debounce, useQuasar } from 'quasar'
+
+import { QDrawer } from 'quasar'
+import { onClickOutside } from '@vueuse/core'
+
+interface Props {
+  ready?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  ready: true
+})
+
+const $q = useQuasar()
+const drawerRef = ref<QDrawer>()
+const leftDrawerOpen = ref(false)
+const miniState = ref(false)
+
+// Small screen: toggle leftDrawerOpen, large screen: toggle miniState
+// Prevent unresponsiveness with screen changes and drawer opened
+watch(
+  () => $q.screen.height,
+  () => {
+    toggleLeftDrawer(false)
+    if (!import.meta.env.SSR && $q.screen.gt.sm) {
+      miniState.value = true
+    } else {
+      miniState.value = false
+    }
+  }
+)
+
+const toggleLeftDrawer = (val?: boolean) => {
+  leftDrawerOpen.value = val ?? $q.screen.gt.sm
+  if (!import.meta.env.SSR && $q.screen.gt.sm) {
+    leftDrawerOpen.value = val ?? $q.screen.gt.sm
+    miniState.value = !miniState.value
+  } else {
+    leftDrawerOpen.value = val ?? !leftDrawerOpen.value
+    miniState.value = false
+  }
+}
+
+const toggleMiniState = (val?: boolean) => {
+  if ($q.screen.gt.sm) {
+    leftDrawerOpen.value = true
+    miniState.value = val ?? !miniState.value
+  }
+}
+
+const onDrawerHide = () => {
+  if (!import.meta.env.SSR && $q.screen.gt.sm) {
+    miniState.value = true
+    leftDrawerOpen.value = true
+  }
+}
+const debouncedToggleMiniState = debounce(toggleMiniState, 500)
+
+onClickOutside(drawerRef, () => toggleMiniState(true))
+
+onMounted(() => {
+  if ($q.screen.gt.sm) miniState.value = true
+})
+</script>

package/src/ui/md3/NavigationRailFabs.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="!showSticky">
+    <q-btn
+      v-if="busEmits.add && type === 'add'"
+      id="fabAdd"
+      class="gt-sm"
+      fab
+      :icon="addIcon"
+      @click="bus.emit(busEmits.add)"
+    />
+    <q-btn
+      v-if="busEmits.edit && type === 'edit'"
+      id="fabEdit"
+      class="gt-sm"
+      fab
+      :icon="editIcon"
+      @click="bus.emit(busEmits.edit)"
+    />
+  </div>
+  <q-page-sticky v-if="showSticky" position="bottom-right" :offset="[18, 18]">
+    <q-btn
+      v-if="busEmits.add && type === 'add'"
+      class="lt-md"
+      fab
+      :icon="addIcon"
+      @click="bus.emit(busEmits.add)"
+    />
+    <q-btn
+      v-if="busEmits.edit && type === 'edit'"
+      class="lt-md"
+      fab
+      :icon="editIcon"
+      @click="bus.emit(busEmits.edit)"
+    />
+  </q-page-sticky>
+</template>
+
+<script lang="ts" setup>
+import { EventBus } from 'quasar'
+import { inject, toRefs } from 'vue'
+
+interface Props {
+  type?: 'add' | 'edit'
+  showSticky?: boolean
+  busEmits: {
+    add?: string
+    edit?: string
+  }
+  icons?: {
+    add: string
+    edit: string
+  }
+}
+const props = defineProps<Props>()
+
+const { type, icons } = toRefs(props)
+
+if (!type.value) type.value = 'add'
+
+const bus = inject<EventBus>('bus')
+if (!bus)
+  throw new Error(
+    'Event bus not initialized (https://quasar.dev/quasar-utils/event-bus-util)'
+  )
+
+const addIcon = icons.value?.add ?? 'add'
+const editIcon = icons.value?.edit ?? 'edit'
+</script>

package/src/ui/md3/index.ts

@@ -0,0 +1,3 @@
+export { default as NavigationRailFabs } from './NavigationRailFabs.vue'
+export { default as Md3Layout } from './Md3Layout.vue'
+export { useLang, loadLang } from './lang/index.js'

package/src/ui/md3/lang/en-US.ts

@@ -0,0 +1,7 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'en-US'
+}
+
+export default lang

package/src/ui/md3/lang/index.ts

@@ -0,0 +1,41 @@
+export interface Language {
+  isoName: string
+}
+
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import en from './en-US'
+export const lang = ref(en)
+
+const locales = import.meta.glob<{ default: Language }>([
+  './*.ts',
+  '!./index.ts'
+])
+
+export const defineLang = (lang: Language) => {
+  return lang
+}
+
+export const useLang = () => {
+  return lang as Ref<Language>
+}
+
+let loadingLanguage = false
+export const loadLang = async (isoName: string) => {
+  if (!loadingLanguage) {
+    loadingLanguage = true
+    try {
+      const data = (await locales[`./${isoName}.ts`]()).default
+
+      if (data) {
+        lang.value = data
+      }
+    } catch (e) {
+      if (import.meta.env.DEBUG) console.error(e)
+      throw new Error(
+        `[quasar-components] Failed to load ${isoName} language file.`
+      )
+    }
+    loadingLanguage = false
+  }
+}

package/src/ui/md3/lang/nl.ts

@@ -0,0 +1,7 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'nl'
+}
+
+export default lang

package/vite.config.ts

@@ -3,76 +3,6 @@ import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
 import { FlagIcon, Icon } from './src/virtualModules.js'
-// export const FlagIcon = (locale) => `
-//   import { computed, ref, watch, h } from 'vue'
-//   import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
-//   import { useLang, loadLang } from '${
-//     new URL(`./src/ui/flags/lang`, import.meta.url).pathname
-//   }'
-//   import icon from '${
-//     new URL(`./src/ui/flags/assets/${locale}.svg`, import.meta.url).pathname
-//   }'
-//   export default {
-//   setup(props, context) {
-//     const $q = useQuasar()
-//     const lang = useLang()
-//     if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
-//     watch($q.lang, (val) => {
-//       loadLang($q.lang.isoName)
-//     })
-
-//     const country = computed(
-//       () => lang.value.countries['${locale}']
-//     )
-//     // @ts-ignore
-//     const language = computed(() => lang.value.languages['${locale}'])
-//     const variables = ref({
-//       country,
-//       language
-//       // header: lang.value.some.nested.prop
-//     })
-//     const functions = ref({
-//       // submit
-//     })
-
-//     context.expose({
-//       variables,
-//       functions
-//     })
-
-//     // return the render function
-//     return () => h(QIcon, { name: \`img:\${icon}\` })
-//   }}
-// `
-
-// export const Icon = (icon) => `
-//   import { computed, ref, watch, h } from 'vue'
-//   import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
-//   import icon from '${
-//     new URL(`./src/ui/icons/assets/${icon}.svg`, import.meta.url).pathname
-//   }'
-//   import icons from '${
-//     new URL(`./src/ui/icons/icons.ts`, import.meta.url).pathname
-//   }'
-//   export default {
-//   setup(props, context) {
-//     const $q = useQuasar()
-
-//     const variables = ref(icons['${icon}'])
-
-//     const functions = ref({
-//       // submit
-//     })
-
-//     context.expose({
-//       variables,
-//       functions
-//     })
-
-//     // return the render function
-//     return () => h(QIcon, { name: \`img:\${icon}\` })
-//   }}
-// `
 
 export const moduleTransformPlugin: Plugin = {
   name: 'module-tranform-plugin',
@@ -122,9 +52,10 @@ export default defineConfig(async ({ command, mode }) => ({
           import.meta.url
         ).pathname,
         general: new URL('./src/ui/general/index.ts', import.meta.url).pathname,
-        flags: new URL('./src/ui/flags/index.ts', import.meta.url).pathname,
-        icons: new URL('./src/ui/icons/index.ts', import.meta.url).pathname,
-        form: new URL('./src/ui/form/index.ts', import.meta.url).pathname
+        // flags: new URL('./src/ui/flags/index.ts', import.meta.url).pathname,
+        // icons: new URL('./src/ui/icons/index.ts', import.meta.url).pathname,
+        form: new URL('./src/ui/form/index.ts', import.meta.url).pathname,
+        md3: new URL('./src/ui/md3/index.ts', import.meta.url).pathname
       },
       output: {
         // entryFileNames: '[name].js',

package/dist/flags.js

@@ -1,255 +0,0 @@
-import { g, cR, a, k, i, b, m, h, j, l, c, p, o, n, d5, q, E, v, t, x, L, K, s, M, z, c5, A, J, C, D, H, r, B, G, F, w, y, P, X, $, S, _, cz, a7, a0, U, O, V, Y, a1, a3, Q, a4, W, a5, a6, av, a9, a8, aa, ab, d, ac, ah, ad, d1, e, ag, ct, aj, an, am, ak, bt, al, ao, as, cS, aA, au, ap, aE, aw, ax, az, at, aF, aB, af, ay, cr, aD, aC, aG, aH, aM, aJ, aL, a2, aI, aN, aQ, aP, aT, aV, aU, I, aS, aR, aO, aW, aZ, aX, a_, aY, b0, b5, N, b1, Z, c7, b2, b3, b4, R, a$, b6, b8, c8, bc, cu, d6, ba, b9, bd, be, b7, bb, bz, bv, bu, bx, c9, bh, bn, bg, bl, bB, bw, bf, bN, bo, bp, by, bm, bq, bk, bi, bs, bj, bA, bC, bG, bJ, bM, bK, bI, bF, bO, bE, bD, bL, bH, bP, bT, bW, aq, bU, bX, bQ, bZ, ca, bY, b$, bS, b_, bR, bV, c0, c4, c1, ch, c2, c3, cf, co, ci, cv, cy, ck, c6, cn, cx, cm, cj, cd, cg, cp, cw, cs, ce, ae, cl, cA, ai, cN, T, ar, cG, cE, cC, cH, cF, cM, cK, cI, cL, cJ, cO, cB, cD, cQ, cP, cU, cT, u, cV, cW, aK, cb, cY, c_, c$, cZ, cX, d0, cc, d2, br, cq, d3, d4 } from "./index-DnmJt2wP.js";
-export {
-  g as ad,
-  cR as ae,
-  a as af,
-  k as ag,
-  i as ai,
-  b as al,
-  m as am,
-  h as ao,
-  j as aq,
-  l as ar,
-  c as as,
-  p as at,
-  o as au,
-  n as aw,
-  d5 as ax,
-  q as az,
-  E as ba,
-  v as bb,
-  t as bd,
-  x as be,
-  L as bf,
-  K as bg,
-  s as bh,
-  M as bi,
-  z as bj,
-  c5 as bl,
-  A as bm,
-  J as bn,
-  C as bo,
-  D as bq,
-  H as br,
-  r as bs,
-  B as bt,
-  G as bv,
-  F as bw,
-  w as by,
-  y as bz,
-  P as ca,
-  X as cc,
-  $ as cd,
-  S as cf,
-  _ as cg,
-  cz as ch,
-  a7 as ci,
-  a0 as ck,
-  U as cl,
-  O as cm,
-  V as cn,
-  Y as co,
-  a1 as cr,
-  a3 as cu,
-  Q as cv,
-  a4 as cw,
-  W as cx,
-  a5 as cy,
-  a6 as cz,
-  av as de,
-  a9 as dj,
-  a8 as dk,
-  aa as dm,
-  ab as dom,
-  d as dz,
-  ac as ec,
-  ah as ee,
-  ad as eg,
-  d1 as eh,
-  e as enUs,
-  ag as er,
-  ct as es,
-  aj as et,
-  an as fi,
-  am as fj,
-  ak as fk,
-  bt as fm,
-  al as fo,
-  ao as fr,
-  as as ga,
-  cS as gb,
-  aA as gd,
-  au as ge,
-  ap as gf,
-  aE as gg,
-  aw as gh,
-  ax as gi,
-  az as gl,
-  at as gm,
-  aF as gn,
-  aB as gp,
-  af as gq,
-  ay as gr,
-  cr as gs,
-  aD as gt,
-  aC as gu,
-  aG as gw,
-  aH as gy,
-  aM as hk,
-  aJ as hm,
-  aL as hn,
-  a2 as hr,
-  aI as ht,
-  aN as hu,
-  aQ as id,
-  aP as idn,
-  aT as ie,
-  aV as il,
-  aU as im,
-  I as io,
-  aS as iq,
-  aR as ir,
-  aO as is,
-  aW as it,
-  aZ as je,
-  aX as jm,
-  a_ as jo,
-  aY as jp,
-  b0 as ke,
-  b5 as kg,
-  N as kh,
-  b1 as ki,
-  Z as km,
-  c7 as kn,
-  b2 as kp,
-  b3 as kr,
-  b4 as kw,
-  R as ky,
-  a$ as kz,
-  b6 as la,
-  b8 as lb,
-  c8 as lc,
-  bc as li,
-  cu as lk,
-  d6 as loadLang,
-  ba as lr,
-  b9 as ls,
-  bd as lt,
-  be as lu,
-  b7 as lv,
-  bb as ly,
-  bz as ma,
-  bv as mc,
-  bu as md,
-  bx as me,
-  c9 as mf,
-  bh as mg,
-  bn as mh,
-  bg as mk,
-  bl as ml,
-  bB as mm,
-  bw as mn,
-  bf as mo,
-  bN as mp,
-  bo as mq,
-  bp as mr,
-  by as ms,
-  bm as mt,
-  bq as mu,
-  bk as mv,
-  bi as mw,
-  bs as mx,
-  bj as my,
-  bA as mz,
-  bC as na,
-  bG as nc,
-  bJ as ne,
-  bM as nf,
-  bK as ng,
-  bI as ni,
-  bF as nl,
-  bO as no,
-  bE as np,
-  bD as nr,
-  bL as nu,
-  bH as nz,
-  bP as om,
-  bT as pa,
-  bW as pe,
-  aq as pf,
-  bU as pg,
-  bX as ph,
-  bQ as pk,
-  bZ as pl,
-  ca as pm,
-  bY as pn,
-  b$ as pr,
-  bS as ps,
-  b_ as pt,
-  bR as pw,
-  bV as py,
-  c0 as qa,
-  c4 as re,
-  c1 as ro,
-  ch as rs,
-  c2 as ru,
-  c3 as rw,
-  cf as sa,
-  co as sb,
-  ci as sc,
-  cv as sd,
-  cy as se,
-  ck as sg,
-  c6 as sh,
-  cn as si,
-  cx as sj,
-  cm as sk,
-  cj as sl,
-  cd as sm,
-  cg as sn,
-  cp as so,
-  cw as sr,
-  cs as ss,
-  ce as st,
-  ae as sv,
-  cl as sx,
-  cA as sy,
-  ai as sz,
-  cN as tc,
-  T as td,
-  ar as tf,
-  cG as tg,
-  cE as th,
-  cC as tj,
-  cH as tk,
-  cF as tl,
-  cM as tm,
-  cK as tn,
-  cI as to,
-  cL as tr,
-  cJ as tt,
-  cO as tv,
-  cB as tw,
-  cD as tz,
-  cQ as ua,
-  cP as ug,
-  cU as um,
-  cT as us,
-  u as useLang,
-  cV as uy,
-  cW as uz,
-  aK as va,
-  cb as vc,
-  cY as ve,
-  c_ as vg,
-  c$ as vi,
-  cZ as vn,
-  cX as vu,
-  d0 as wf,
-  cc as ws,
-  d2 as ye,
-  br as yt,
-  cq as za,
-  d3 as zm,
-  d4 as zw
-};

package/dist/icons.js

@@ -1,25 +0,0 @@
-import { ref, h } from "vue";
-import { useQuasar, QIcon } from "quasar";
-const icon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20aria-label='Microsoft'%20role='img'%20viewBox='0%200%20512%20512'%3e%3crect%20width='512'%20height='512'%20rx='15%25'%20fill='%23fff'/%3e%3cpath%20d='M75%2075v171h171v-171z'%20fill='%23f25022'/%3e%3cpath%20d='M266%2075v171h171v-171z'%20fill='%237fba00'/%3e%3cpath%20d='M75%20266v171h171v-171z'%20fill='%2300a4ef'/%3e%3cpath%20d='M266%20266v171h171v-171z'%20fill='%23ffb900'/%3e%3c/svg%3e";
-const labels = {
-  microsoft: {
-    name: "Microsoft"
-  }
-};
-const microsoft = {
-  setup(props, context) {
-    useQuasar();
-    const variables = ref(labels["microsoft"]);
-    const functions = ref({
-      // submit
-    });
-    context.expose({
-      variables,
-      functions
-    });
-    return () => h(QIcon, { name: `img:${icon}` });
-  }
-};
-export {
-  microsoft
-};