@simsustech/quasar-components 0.1.1 → 0.1.3

package/dist/vite-plugin.js

@@ -0,0 +1,81 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { promises } from 'fs';
+var readFile = promises.readFile;
+export default function (_a) {
+    var _b = _a === void 0 ? {} : _a, buildFromSrc = _b.buildFromSrc;
+    return __awaiter(this, void 0, void 0, function () {
+        var pkgJson, _c, _d, exports, name;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    _d = (_c = JSON).parse;
+                    return [4 /*yield*/, readFile(new URL('../package.json', import.meta.url).pathname, 'utf-8')];
+                case 1:
+                    pkgJson = _d.apply(_c, [_e.sent()]);
+                    exports = pkgJson.exports;
+                    name = pkgJson.name;
+                    return [2 /*return*/, {
+                            name: "".concat(name, "-plugin"),
+                            config: function (config, _a) {
+                                var mode = _a.mode;
+                                if (mode === 'development' || buildFromSrc) {
+                                    var alias = Object.entries(exports)
+                                        .map(function (_a) {
+                                        var key = _a[0], val = _a[1];
+                                        return {
+                                            find: name + key.slice(1),
+                                            replacement: new URL('.' + val.src, import.meta.url).pathname
+                                        };
+                                    })
+                                        .sort(function (a, b) {
+                                        return (b.find.match(/\//g) || []).length -
+                                            (a.find.match(/\//g) || []).length;
+                                    });
+                                    return {
+                                        resolve: {
+                                            alias: alias
+                                        }
+                                    };
+                                }
+                                return {};
+                            }
+                        }];
+            }
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -14,21 +14,24 @@
     },
     "./authentication": {
       "types": "./dist/types/ui/authentication/index.d.ts",
-      "import": "./dist/authentication.js"
+      "import": "./dist/authentication.js",
+      "src": "./src/ui/authentication/index.ts"
     },
     "./flags": {
       "types": "./dist/types/ui/flags/index.d.ts",
-      "import": "./dist/flags.js"
+      "import": "./dist/flags.js",
+      "src": "./src/ui/flags/index.ts"
     },
     "./icons": {
       "types": "./dist/types/ui/icons/index.d.ts",
-      "import": "./dist/icons.js"
+      "import": "./dist/icons.js",
+      "src": "./src/ui/icons/index.ts"
     },
     "./css": {
       "import": "./dist/style.css"
     },
     "./vite-plugin": {
-      "types": "./dist/vite-plugin.d.ts",
+      "types": "./dist/types/vite-plugin.d.ts",
       "import": "./dist/vite-plugin.js"
     }
   },

package/src/ui/authentication/EmailChangeForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <otp-input v-bind="input" v-model="otp" />
     <q-input
       v-bind="input"
@@ -41,7 +46,7 @@ import OtpInput from './OtpInput.vue'
 
 export interface Props {
   email: string
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'
@@ -106,8 +111,8 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
   formRef.value?.validate().then((success) => {
     if (success) {
       emit('submit', {
-        email: email.value,
-        newEmail: newEmail.value,
+        email: email.value.trim(),
+        newEmail: newEmail.value.trim(),
         otp: otp.value,
         done: evt.done
       })

package/src/ui/authentication/EmailChangeStepper.vue

@@ -3,6 +3,7 @@
     <q-step name="requestOtp" :title="requestOtpHeader">
       <request-otp-form
         ref="requestOtpFormRef"
+        :form="{ id: 'requestOtpForm' }"
         :input="input"
         @submit="requestOtp"
       ></request-otp-form>
@@ -11,6 +12,7 @@
     <q-step name="changeEmail" :title="emailChangeHeader">
       <email-change-form
         ref="emailChangeFormRef"
+        :form="{ id: 'emailChangeForm' }"
         :email="email"
         :input="input"
         @submit="changeEmail"
@@ -22,10 +24,12 @@
         <q-submit-button
           v-if="step === 'requestOtp'"
           is-next-button
+          form="requestOtpForm"
           @submit="requestOtpFormRef?.functions.submit"
         ></q-submit-button>
         <q-submit-button
           v-if="step === 'changeEmail'"
+          form="emailChangeForm"
           @submit="emailChangeFormRef?.functions.submit"
         ></q-submit-button>
       </q-stepper-navigation>

package/src/ui/authentication/LoginForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <q-input
       v-if="!useUsername"
       v-bind="input"
@@ -71,7 +76,7 @@ import QSubmitButton from '../general/QSubmitButton.vue'
 export interface Props {
   useUsername?: boolean
   passwordForgotUrl?: string
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/PasswordChangeForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <otp-input v-bind="input" v-model="otp" />
     <q-input
       v-bind="input"
@@ -61,7 +66,7 @@ import OtpInput from './OtpInput.vue'
 export interface Props {
   email: string
   minimumPasswordLength?: number
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/PasswordChangeStepper.vue

@@ -3,6 +3,7 @@
     <q-step name="requestOtp" :title="requestOtpHeader">
       <request-otp-form
         ref="requestOtpFormRef"
+        :form="{ id: 'requestOtpForm' }"
         :input="input"
         @submit="requestOtp"
       ></request-otp-form>
@@ -11,6 +12,7 @@
     <q-step name="changePassword" :title="passwordChangeHeader">
       <password-change-form
         ref="passwordChangeFormRef"
+        :form="{ id: 'passwordChangeForm' }"
         :email="email"
         :input="input"
         @submit="changePassword"
@@ -22,10 +24,12 @@
         <q-submit-button
           v-if="step === 'requestOtp'"
           is-next-button
+          form="requestOtpForm"
           @submit="requestOtpFormRef?.functions.submit"
         ></q-submit-button>
         <q-submit-button
           v-if="step === 'changePassword'"
+          form="passwordChangeForm"
           @submit="passwordChangeFormRef?.functions.submit"
         ></q-submit-button>
       </q-stepper-navigation>

package/src/ui/authentication/RegisterForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+  <q-form
+    ref="formRef"
+    class="q-gutter-md"
+    v-bind="form"
+    @submit="(e) => submit"
+  >
     <q-input
       v-if="!useUsername"
       v-bind="input"
@@ -97,7 +102,7 @@ export interface Props {
     rules?: ((val: string) => boolean)[]
   }[]
   minimumPasswordLength?: number
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'

package/src/ui/authentication/RequestOtpForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-form ref="formRef" v-bind="form">
+  <q-form ref="formRef" v-bind="form" @submit="(e) => submit">
     <q-input
       v-bind="input"
       id="email"
@@ -29,7 +29,7 @@ import isEmail from 'validator/es/lib/isEmail.js'
 import QSubmitButton from '../general/QSubmitButton.vue'
 
 export interface Props {
-  form?: QFormProps & HTMLFormElement
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
   input?: Omit<
     QInputProps,
     | 'id'
@@ -83,7 +83,7 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = ({
   formRef.value?.validate().then((success) => {
     if (success) {
       emit('submit', {
-        email: email.value,
+        email: email.value.trim(),
         done: done
       })
     } else done()

package/src/ui/general/QSubmitButton.vue

@@ -4,7 +4,7 @@
     :label="isNextButton ? lang.next : lang.submit"
     color="primary"
     :loading="loading || loadingInternal"
-    :type="useForm ? 'submit' : undefined"
+    type="submit"
     @click="submit"
   />
 </template>

package/src/ui/index.ts

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

package/src/virtualModules.ts

@@ -0,0 +1,70 @@
+export const FlagIcon = (locale: string) => `
+  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: string) => `
+  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}\` })
+  }}
+`

package/src/vite-plugin.ts

@@ -1,29 +1,52 @@
 import type { Plugin } from 'vite'
+import { promises } from 'fs'
+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`,
     config(config, { mode }) {
-      if (mode === 'development') {
+      if (mode === 'development' || buildFromSrc) {
+        const alias = Object.entries(exports)
+          .map(([key, val]) => {
+            return {
+              find: 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: {
-            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

@@ -2,77 +2,77 @@ import { defineConfig } 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 default defineConfig(async ({ command, mode }) => ({
   plugins: [