@simsustech/quasar-components 0.1.2 → 0.2.0

package/src/virtualModules.ts

@@ -0,0 +1,113 @@
+export const FlagIcon = (locale: string) => `
+  import { computed, ref, watch, h } from 'vue'
+  import { 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 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: string) => `
+  import { computed, ref, watch, h } from 'vue'
+  import { useQuasar, QIcon } from 'quasar'
+  import icon from '${
+    new URL(`../src/ui/icons/assets/${icon}.svg`, 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(labels['${icon}'])
+
+    const functions = ref({
+      // submit
+    })
+
+    context.expose({
+      variables,
+      functions
+    })
+
+    // return the render function
+    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,29 +1,72 @@
 import type { Plugin } from 'vite'
+import { promises } from 'fs'
+import { Icon, FlagIcon } from './virtualModules.js'
+const { readFile } = promises
+
+export default async function ({
+  buildFromSrc
+}: {
+  buildFromSrc?: boolean
+} = {}): Promise<Plugin> {
+  const pkgJson = JSON.parse(
+    await readFile(
+      new URL('../package.json', import.meta.url).pathname,
+      'utf-8'
+    )
+  )
+  const exports = pkgJson.exports as Record<
+    string,
+    {
+      types: string
+      import: string
+      src: string
+    }
+  >[]
+  const name = pkgJson.name
 
-export default async function (): Promise<Plugin> {
   return {
-    name: '@simsustech/quasar-components-plugin',
+    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') {
+      if (mode === 'development' || buildFromSrc) {
+        const alias = Object.entries(exports)
+          .filter(([key, val]) => {
+            return val.src
+          })
+          .map(([key, val]) => {
+            return {
+              find: new RegExp(
+                `^${
+                  name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + key.slice(1)
+                }$`
+              ),
+              // name: name + key.slice(1),
+              replacement: new URL('.' + val.src, import.meta.url).pathname
+            }
+          })
+
         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
-              }
-            ]
+            alias
           }
         }
       }
+
       return {}
     }
   }

package/tsconfig.build.plugin.json

@@ -3,5 +3,5 @@
     "rootDir": "src/"
   },
   "extends": "./tsconfig.node.json",
-  "include": ["./src/vite-plugin.ts"]
+  "include": ["./src/vite-plugin.ts", "./src/virtualModules.ts"]
 }

package/tsconfig.node.json

@@ -6,5 +6,5 @@
     "outDir": "./dist",
     "declaration": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "src/virtualModules.ts"]
 }

package/vite.config.ts

@@ -1,107 +1,103 @@
-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'
+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 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
-    })
+//     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
-    })
+//     context.expose({
+//       variables,
+//       functions
+//     })
 
-    // return the render function
-    return () => h(QIcon, { name: \`img:\${icon}\` })
-  }}
-`
+//     // 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()
+// 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 variables = ref(icons['${icon}'])
 
-    const functions = ref({
-      // submit
-    })
+//     const functions = ref({
+//       // submit
+//     })
 
-    context.expose({
-      variables,
-      functions
-    })
+//     context.expose({
+//       variables,
+//       functions
+//     })
 
-    // return the render function
-    return () => h(QIcon, { name: \`img:\${icon}\` })
-  }}
-`
+//     // return the render function
+//     return () => h(QIcon, { name: \`img:\${icon}\` })
+//   }}
+// `
+
+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,2 +0,0 @@
-export * from './authentication/index';
-export * from './general/index';

package/src/ui/index.ts

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