@simsustech/quasar-components 0.1.0

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

@@ -0,0 +1,44 @@
+export interface Language {
+  isoName: string
+  submit: string
+  next: string
+  back: 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/general/lang/nl.ts

@@ -0,0 +1,10 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'nl',
+  submit: 'Versturen',
+  next: 'Volgende',
+  back: 'Vorige'
+}
+
+export default lang

package/src/ui/icons/README.md

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

package/src/ui/icons/assets/microsoft.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+aria-label="Microsoft" role="img"
+viewBox="0 0 512 512"><rect
+width="512" height="512"
+rx="15%"
+fill="#fff"/><path
+d="M75 75v171h171v-171z" fill="#f25022"/><path
+d="M266 75v171h171v-171z" fill="#7fba00"/><path
+d="M75 266v171h171v-171z" fill="#00a4ef"/><path
+d="M266 266v171h171v-171z" fill="#ffb900"/></svg>

package/src/ui/icons/icons.ts

@@ -0,0 +1,5 @@
+export default {
+  microsoft: {
+    name: 'Microsoft'
+  }
+}

package/src/ui/icons/index.ts

@@ -0,0 +1,3 @@
+// @ts-nocheck
+import microsoft from 'microsoft.icon'
+export { microsoft }

package/src/ui/index.ts

@@ -0,0 +1,2 @@
+export * from './authentication/index'
+export * from './general/index'

package/src/vite-plugin.ts

@@ -0,0 +1,30 @@
+import type { Plugin } from 'vite'
+
+export default async function (): Promise<Plugin> {
+  return {
+    name: '@simsustech/quasar-components-plugin',
+    config(config, { mode }) {
+      if (mode === 'development') {
+        return {
+          resolve: {
+            alias: [
+              {
+                find: '@simsustech/quasar-components/flags',
+                replacement: new URL(
+                  '../src/ui/flags/index.ts',
+                  import.meta.url
+                ).pathname
+              },
+              {
+                find: '@simsustech/quasar-components',
+                replacement: new URL('../src/ui/index.ts', import.meta.url)
+                  .pathname
+              }
+            ]
+          }
+        }
+      }
+      return {}
+    }
+  }
+}

package/tsconfig.build.plugin.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "rootDir": "src/"
+  },
+  "extends": "./tsconfig.node.json",
+  "include": ["./src/vite-plugin.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"],
+    "outDir": "./dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "declaration": true
+  },
+  "include": ["vite.config.ts"]
+}

package/tsconfig.types.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true,
+    "declarationDir": "./dist/types",
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["./src"]
+}

package/vite.config.ts

@@ -0,0 +1,136 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { QuasarResolver } from 'unplugin-vue-components/resolvers'
+
+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}\` })
+  }}
+`
+
+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 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' }
+      //   }
+      // }
+    },
+    Components({
+      resolvers: [QuasarResolver()]
+    }),
+    vue()
+  ],
+  build: {
+    // minify: false,
+    lib: {
+      // UMD not supported for code-splitting builds
+      fileName: 'ui',
+      formats: ['es'],
+      entry: './src/ui/index.ts'
+    },
+    minify: false,
+    emptyOutDir: true,
+    rollupOptions: {
+      input: {
+        authentication: new URL(
+          './src/ui/authentication/index.ts',
+          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
+      },
+      output: {
+        entryFileNames: '[name].js'
+      },
+      external: ['vue', 'vue-router', 'quasar']
+    }
+  }
+}))