@simsustech/quasar-components 0.1.3 → 0.2.0

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']
     }

package/dist/types/ui/index.d.ts

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

package/src/ui/index.ts

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