@simsustech/quasar-components 0.1.3 → 0.3.0

package/src/ui/general/QLanguageSelect.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :options="languageOptions"
+    :model-value="modelValue"
+    emit-value
+    map-options
+  >
+    <template #selected>
+      <en-us v-if="modelValue === 'en-US'" />
+      <nl v-if="modelValue === 'nl'" />
+    </template>
+    <template #option="scope">
+      <q-item v-if="scope.opt.value === 'en-US'" v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <en-us ref="enUsRef" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ enUsLanguage }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-if="scope.opt.value === 'nl'" v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <nl ref="nlRef" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ nlLanguage }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs, computed, toRefs, watch } from 'vue'
+import { useQuasar, QSelect, QuasarLanguage } from 'quasar'
+import { nl, enUs } from '../flags/index.js'
+
+export interface Props {
+  modelValue: string
+  languageImports: Record<string, () => Promise<QuasarLanguage>>
+}
+const props = defineProps<Props>()
+const $q = useQuasar()
+const { modelValue } = toRefs(props)
+const attrs = useAttrs()
+
+// const langList = import.meta.glob('../../../node_modules/quasar/lang/*.mjs')
+
+const nlRef = ref<typeof nl>()
+const nlCountry = computed(() => nlRef.value?.variables.country)
+const nlLanguage = computed(() => nlRef.value?.variables.language)
+
+const enUsRef = ref<typeof enUs>()
+const enUsCountry = computed(() => enUsRef.value?.variables.country)
+const enUsLanguage = computed(() => enUsRef.value?.variables.language)
+
+const languageOptions = [
+  {
+    label: enUsLanguage.value,
+    value: 'en-US'
+  },
+  {
+    label: nlLanguage.value,
+    value: 'nl'
+  }
+]
+
+watch(modelValue, (langIso: string) => {
+  try {
+    props.languageImports[langIso]().then(
+      // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
+      (lang) => {
+        // @ts-ignore
+        $q.lang.set(lang.default)
+      }
+    )
+  } catch (e) {
+    console.error(e)
+  }
+})
+</script>

package/src/ui/general/QStyledCard.vue

@@ -73,5 +73,5 @@ defineExpose({
 <style lang="sass" scoped>
 .card
   width: 100%
-  max-width: 400px
+  max-width: 300px
 </style>

package/src/ui/general/QSubmitButton.vue

@@ -2,7 +2,7 @@
   <q-btn
     v-bind="attrs"
     :label="isNextButton ? lang.next : lang.submit"
-    color="primary"
+    :color="color"
     :loading="loading || loadingInternal"
     type="submit"
     @click="submit"
@@ -24,6 +24,7 @@ export interface Props {
   loading?: boolean
   useForm?: boolean
   isNextButton?: boolean
+  color?: string
 }
 const props = defineProps({
   loading: {
@@ -35,6 +36,10 @@ const props = defineProps({
   },
   isNextButton: {
     type: Boolean
+  },
+  color: {
+    type: String,
+    default: 'primary'
   }
 })
 const attrs = useAttrs()

package/src/ui/general/ResourcePage.vue

@@ -0,0 +1,121 @@
+<template>
+  <q-page class="q-ma-md">
+    <div style="margin-top: 80px">
+      <slot name="default" />
+    </div>
+    <q-page-sticky expand position="top">
+      <q-toolbar
+        class="shadow-2"
+        :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
+      >
+        <q-btn
+          v-if="type === 'create'"
+          :disable="disabled"
+          flat
+          style="margin-bottom: -50px; z-index: 5"
+          round
+          size="lg"
+          dense
+          icon="add"
+          class="q-mr-sm bg-primary text-white"
+          @click="create"
+        />
+        <q-btn
+          v-else
+          :disable="disabled"
+          flat
+          style="margin-bottom: -50px; z-index: 5"
+          round
+          size="lg"
+          dense
+          icon="edit"
+          class="q-mr-sm bg-primary text-white"
+          @click="update"
+        />
+        <q-toolbar-title shrink>
+          <slot name="header" />
+        </q-toolbar-title>
+        <q-space />
+      </q-toolbar>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ResourcePage'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  type?: 'create' | 'update'
+  disabled?: boolean
+}
+// const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  type: 'create',
+  disabled: false
+})
+
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'create',
+    {
+      data,
+      done
+    }: {
+      data?: any
+      done: (success?: boolean) => void
+    }
+  ): void
+  (
+    e: 'update',
+    {
+      data,
+      done
+    }: {
+      data?: any
+      done: (success?: boolean) => void
+    }
+  ): void
+}>()
+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 { disabled } = toRefs(props)
+
+const done = () => ''
+const create = (evt: unknown) =>
+  disabled.value
+    ? () => {
+        //
+      }
+    : emit('create', { done })
+const update = (evt: unknown) =>
+  disabled.value
+    ? () => {
+        //
+      }
+    : emit('update', { done })
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/general/ResponsiveDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-dialog ref="dialogRef" :maximized="$q.screen.lt.md">
+    <q-layout
+      view="LHh lpR fff"
+      container
+      :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
+      style="min-width: 85vw"
+    >
+      <q-header class="bg-primary">
+        <q-toolbar>
+          <q-btn icon="close" flat round dense @click="close" />
+          <q-toolbar-title>
+            <slot name="title" />
+          </q-toolbar-title>
+          <q-submit-button
+            v-if="!display"
+            color="accent"
+            @submit="submit"
+          ></q-submit-button>
+        </q-toolbar>
+      </q-header>
+
+      <q-page-container style="padding-bottom: -50px">
+        <q-page class="q-pa-md q-pb-xl">
+          <slot></slot>
+        </q-page>
+      </q-page-container>
+    </q-layout>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ResponsiveDialog'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { QDialog, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+import QSubmitButton from './QSubmitButton.vue'
+
+export interface Props {
+  display?: boolean
+}
+const props = defineProps<Props>()
+// const attrs = useAttrs();
+const modelValue = ref(false)
+const emit = defineEmits<{
+  (
+    e: 'submit',
+    {
+      done
+    }: {
+      done: (success?: boolean) => void
+    }
+  ): void
+}>()
+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 submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
+  evt
+) => {
+  emit('submit', {
+    done: (success = true) => {
+      evt.done()
+      if (success) dialogRef.value?.hide()
+    }
+  })
+}
+const dialogRef = ref<QDialog>()
+const open = () => dialogRef.value?.show()
+const close = () => dialogRef.value?.hide()
+const toggle = () => dialogRef.value?.toggle()
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  open,
+  close,
+  toggle
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/general/index.ts

@@ -1,2 +1,5 @@
 export { default as QSubmitButton } from './QSubmitButton.vue'
 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'

package/src/ui/icons/README.md

@@ -1,3 +1,5 @@
+# Socials
+
 # Credits
 
 Thanks to [SuperTinyIcons](https://github.com/edent/SuperTinyIcons) for providing the SVG icons.

package/src/virtualModules.ts

@@ -1,6 +1,6 @@
 export const FlagIcon = (locale: string) => `
   import { computed, ref, watch, h } from 'vue'
-  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
+  import { useQuasar, QIcon } from 'quasar'
   import { useLang, loadLang } from '${
     new URL(`../src/ui/flags/lang`, import.meta.url).pathname
   }'
@@ -20,6 +20,7 @@ export const FlagIcon = (locale: string) => `
       () => lang.value.countries['${locale}']
     )
     // @ts-ignore
+    // const language = computed(() => lang.value.languages['${locale}'])
     const language = computed(() => lang.value.languages['${locale}'])
     const variables = ref({
       country,
@@ -42,18 +43,18 @@ export const FlagIcon = (locale: string) => `
 
 export const Icon = (icon: string) => `
   import { computed, ref, watch, h } from 'vue'
-  import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
+  import { 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
+  import labels from '${
+    new URL(`../src/ui/icons/labels.ts`, import.meta.url).pathname
   }'
   export default {
   setup(props, context) {
     const $q = useQuasar()
 
-    const variables = ref(icons['${icon}'])
+    const variables = ref(labels['${icon}'])
 
     const functions = ref({
       // submit
@@ -68,3 +69,45 @@ export const Icon = (icon: string) => `
     return () => h(QIcon, { name: \`img:\${icon}\` })
   }}
 `
+
+export const FormItem = (field: string) => `
+import { ref, watch, useAttrs, h } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from '${
+  new URL(`../src/ui/form/lang/index.ts`, import.meta.url).pathname
+}'
+
+export default {
+  setup(props, context) {
+    const $q = useQuasar()
+    const attrs = useAttrs()
+
+    const lang = useLang()
+
+    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+    watch($q.lang, (val) => {
+      loadLang($q.lang.isoName)
+    })
+
+    const variables = ref({})
+
+    const functions = ref({
+      // submit
+    })
+
+    context.expose({
+      variables,
+      functions
+    })
+
+    // return the render function
+    return () =>
+      h(QItem, { attrs }, [
+        h(QItemSection, {}, [
+          h(QItemLabel, { overline: true }, 'field'),
+          h(QItemLabel, {}, 'field')
+        ])
+      ])
+  }
+}
+`

package/src/vite-plugin.ts

@@ -1,5 +1,6 @@
 import type { Plugin } from 'vite'
 import { promises } from 'fs'
+import { Icon, FlagIcon } from './virtualModules.js'
 const { readFile } = promises
 
 export default async function ({
@@ -25,20 +26,39 @@ export default async function ({
 
   return {
     name: `${name}-plugin`,
+    enforce: 'pre',
+    resolveId: (id) => {
+      if (id.includes('.flag')) return id
+      else if (id.includes('.icon')) return id
+    },
+    load: (id) => {
+      if (id.includes('.flag')) {
+        const locale = id.slice(0, -5)
+        const flag = FlagIcon(locale)
+        return flag
+      } else if (id.includes('.icon')) {
+        const iconId = id.slice(0, -5)
+        const icon = Icon(iconId)
+        return icon
+      }
+    },
     config(config, { mode }) {
       if (mode === 'development' || buildFromSrc) {
         const alias = Object.entries(exports)
+          .filter(([key, val]) => {
+            return val.src
+          })
           .map(([key, val]) => {
             return {
-              find: name + key.slice(1),
+              find: new RegExp(
+                `^${
+                  name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + key.slice(1)
+                }$`
+              ),
+              // name: name + key.slice(1),
               replacement: new URL('.' + val.src, import.meta.url).pathname
             }
           })
-          .sort(
-            (a, b) =>
-              (b.find.match(/\//g) || []).length -
-              (a.find.match(/\//g) || []).length
-          )
 
         return {
           resolve: {

package/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
@@ -74,34 +74,30 @@ import { FlagIcon, Icon } from './src/virtualModules.js'
 //   }}
 // `
 
+export const moduleTransformPlugin: Plugin = {
+  name: 'module-tranform-plugin',
+  enforce: 'pre',
+  resolveId: (id) => {
+    if (id.includes('.flag')) return id
+    else if (id.includes('.icon')) return id
+  },
+  load: (id) => {
+    if (id.includes('.flag')) {
+      const locale = id.slice(0, -5)
+      console.log(locale)
+      const flag = FlagIcon(locale)
+      return flag
+    } else if (id.includes('.icon')) {
+      const iconId = id.slice(0, -5)
+      const icon = Icon(iconId)
+      return icon
+    }
+  }
+}
+
 export default defineConfig(async ({ command, mode }) => ({
   plugins: [
-    {
-      name: 'module-tranform-plugin',
-      enforce: 'pre',
-      resolveId: (id) => {
-        if (id.includes('.flag')) return id
-        else if (id.includes('.icon')) return id
-      },
-      load: (id) => {
-        if (id.includes('.flag')) {
-          const locale = id.slice(0, -5)
-          const flag = FlagIcon(locale)
-          return flag
-        } else if (id.includes('.icon')) {
-          const iconId = id.slice(0, -5)
-          const icon = Icon(iconId)
-          return icon
-        }
-      }
-      // resolveId: (source) => {
-      //   if (source.includes('FlagIcon.vue')) {
-      //     const split = source.split('FlagIcon.vue')
-      //     split[0].slice(2)
-      //     return { id: './FlagIcon.vue' }
-      //   }
-      // }
-    },
+    moduleTransformPlugin,
     Components({
       resolvers: [QuasarResolver()]
     }),
@@ -111,7 +107,9 @@ export default defineConfig(async ({ command, mode }) => ({
     // minify: false,
     lib: {
       // UMD not supported for code-splitting builds
-      fileName: 'ui',
+      fileName: (format, entryName) => {
+        return entryName + '.js'
+      },
       formats: ['es'],
       entry: './src/ui/index.ts'
     },
@@ -125,10 +123,12 @@ export default defineConfig(async ({ command, mode }) => ({
         ).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
+        icons: new URL('./src/ui/icons/index.ts', import.meta.url).pathname,
+        form: new URL('./src/ui/form/index.ts', import.meta.url).pathname
       },
       output: {
-        entryFileNames: '[name].js'
+        // entryFileNames: '[name].js',
+        // assetFileNames: '[name].[ext]'
       },
       external: ['vue', 'vue-router', 'quasar']
     }