@simsustech/quasar-components 0.1.2 → 0.2.0

package/dist/vite-plugin.js

@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        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]) {
@@ -34,33 +34,69 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-export default function () {
+import { promises } from 'fs';
+import { Icon, FlagIcon } from './virtualModules.js';
+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 () {
-        return __generator(this, function (_a) {
-            return [2 /*return*/, {
-                    name: '@simsustech/quasar-components-plugin',
-                    config: function (config, _a) {
-                        var mode = _a.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
+        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"),
+                            enforce: 'pre',
+                            resolveId: function (id) {
+                                if (id.includes('.flag'))
+                                    return id;
+                                else if (id.includes('.icon'))
+                                    return id;
+                            },
+                            load: function (id) {
+                                if (id.includes('.flag')) {
+                                    var locale = id.slice(0, -5);
+                                    var flag = FlagIcon(locale);
+                                    return flag;
+                                }
+                                else if (id.includes('.icon')) {
+                                    var iconId = id.slice(0, -5);
+                                    var icon = Icon(iconId);
+                                    return icon;
+                                }
+                            },
+                            config: function (config, _a) {
+                                var mode = _a.mode;
+                                if (mode === 'development' || buildFromSrc) {
+                                    var alias = Object.entries(exports)
+                                        .filter(function (_a) {
+                                        var key = _a[0], val = _a[1];
+                                        return val.src;
+                                    })
+                                        .map(function (_a) {
+                                        var key = _a[0], val = _a[1];
+                                        return {
+                                            find: new RegExp("^".concat(name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + key.slice(1), "$")),
+                                            // name: name + key.slice(1),
+                                            replacement: new URL('.' + val.src, import.meta.url).pathname
+                                        };
+                                    });
+                                    return {
+                                        resolve: {
+                                            alias: alias
                                         }
-                                    ]
+                                    };
                                 }
-                            };
-                        }
-                        return {};
-                    }
-                }];
+                                return {};
+                            }
+                        }];
+            }
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -14,21 +14,29 @@
     },
     "./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"
+    },
+    "./form": {
+      "types": "./dist/types/ui/form/index.d.ts",
+      "import": "./dist/form.js",
+      "src": "./src/ui/form/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'

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'

package/src/ui/authentication/lang/en-US.ts

@@ -86,8 +86,7 @@ const lang: Language = {
     alreadyRegistered: 'Email address is already registered.'
   },
   verification: {
-    slider:
-      'Sleep a.u.b. de onderstaande balk helemaal naar rechts tot deze groen wordt.'
+    slider: 'Please drag the slider below all the way to the right.'
   }
 }
 

package/src/ui/authentication/lang/nl.ts

@@ -86,8 +86,7 @@ const lang: Language = {
     alreadyRegistered: 'Email adres is al geregistreerd.'
   },
   verification: {
-    slider:
-      'Please drag the slider all the way to the right until it turns green.'
+    slider: 'Sleep a.u.b. het onderstaande bolletje helemaal naar rechts.'
   }
 }
 

package/src/ui/flags/README.md

@@ -16,7 +16,7 @@ Tree-shakeable flag icons for Quasar Framework built with Vite.
 </template>
 
 <script setup>
-  import {enUsIcon} from '@simsustech/quasar-components/flags'
+  import {enUS} from '@simsustech/quasar-components/flags'
   ...
 </script>
 ```

package/src/ui/form/BooleanItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section>
+      <q-item-label overline>
+        {{ label }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue ? lang.yes : lang.no }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue: boolean
+  label: string
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/form/BooleanSelect.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :options="booleanOptions"
+    :label="`${label}${required ? '*' : ''}`"
+    emit-value
+    map-options
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-select>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, ref } from 'vue'
+import { QSelect, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue: boolean
+  label?: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const booleanOptions = [
+  {
+    label: lang.value.yes,
+    value: true
+  },
+  {
+    label: lang.value.no,
+    value: false
+  }
+]
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: { label: string; value: string }) =>
+      !!val || lang.value.validations.fieldRequired
+  )
+defineEmits(['update:modelValue'])
+</script>

package/src/ui/form/DateInput.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${label}${required ? '*' : ''}`"
+    mask="date"
+    class="q-pr-md"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template v-slot:append>
+      <q-icon
+        v-if="clearable"
+        name="clear"
+        class="cursor-pointer"
+        @click="$emit('update:modelValue', '')"
+      />
+      <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <q-date
+            v-bind="date"
+            :model-value="modelValue"
+            @update:model-value="$emit('update:modelValue', $event)"
+          >
+            <div class="row items-center justify-end">
+              <q-btn
+                v-close-popup
+                :label="lang.buttons.close"
+                color="primary"
+                flat
+              />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useAttrs } from 'vue'
+import { QDateProps, QInput, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue?: string | null
+  label?: string
+  required?: boolean
+  clearable?: boolean
+  date?: Partial<QDateProps>
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const validations = ref<((val: string) => boolean | string)[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/FormInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${field ? lang.fields[field] : label ? label : ''}${
+      required ? '*' : ''
+    }`"
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useAttrs } from 'vue'
+import { QInput, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type FormItems = 'name' | 'firstName' | 'surname' | 'address' | 'city'
+
+export interface Props {
+  modelValue?: string | null
+  field?: FormItems
+  label?: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/FormItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section v-if="slots.avatar" avatar>
+      <slot name="avatar" />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label overline>
+        {{ label ? label : field ? lang.fields[field] : '' }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue || '-' }}
+      </q-item-label>
+    </q-item-section>
+    <q-item-section v-if="slots.side" side>
+      <slot name="side" />
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, useSlots } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type FormItems =
+  | 'name'
+  | 'firstName'
+  | 'surname'
+  | 'address'
+  | 'city'
+  | 'postalCode'
+
+export interface Props {
+  modelValue?: string
+  label?: string
+  field?: FormItems
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/form/GenderItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section>
+      <q-item-label overline>
+        {{ lang.gender.gender }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue ? lang.gender[modelValue] : '' }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+import type { Gender } from './GenderSelect.vue'
+
+export interface Props {
+  modelValue: Gender
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>