@simsustech/quasar-components 0.11.26 → 0.12.1

package/dist/types/{ui → src/ui}/general/QLanguageSelect.vue.d.ts

@@ -1,13 +1,13 @@
 import { QuasarLanguage } from 'quasar';
-import type { Language as FormLanguage } from '../form/lang/index.js';
+import type { ISO639, Locales } from '../form/lang/index.js';
 export interface Props {
-    modelValue: keyof FormLanguage['countries'];
-    languageImports: Record<keyof FormLanguage['countries'], () => Promise<{
+    modelValue: Locales;
+    languageImports: Record<ISO639 | Locales, () => Promise<{
         default: QuasarLanguage;
     }>>;
     locales: {
         icon: string;
-        isoName: keyof FormLanguage['languages'];
+        bcp47: Locales;
     }[];
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/virtualModules.js

@@ -1,5 +1,65 @@
-export var FlagIcon = function (locale) { return "\n  import { computed, ref, watch, h } from 'vue'\n  import { useQuasar, QIcon } from 'quasar'\n  import { useLang, loadLang } from '".concat(new URL("../src/ui/flags/lang", import.meta.url).pathname, "'\n  import icon from '").concat(new URL("../src/ui/flags/assets/".concat(locale, ".svg"), import.meta.url).pathname, "'\n  export default {\n  setup(props, context) {\n    const $q = useQuasar()\n    const lang = useLang()\n    if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)\n    watch($q.lang, (val) => {\n      loadLang($q.lang.isoName)\n    })\n    \n    const country = computed(\n      () => lang.value.countries['").concat(locale, "']\n    )\n    // @ts-ignore\n    // const language = computed(() => lang.value.languages['").concat(locale, "'])\n    const language = computed(() => lang.value.languages['").concat(locale, "'])\n    const variables = ref({\n      country,\n      language\n      // header: lang.value.some.nested.prop\n    })\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () => h(QIcon, { name: `img:${icon}` })\n  }}\n"); };
-export var Icon = function (icon) { return "\n  import { computed, ref, watch, h } from 'vue'\n  import { useQuasar, QIcon } from 'quasar'\n  import icon from '".concat(new URL("../src/ui/icons/assets/".concat(icon, ".svg"), import.meta.url).pathname, "'\n  import labels from '").concat(new URL("../src/ui/icons/labels.ts", import.meta.url).pathname, "'\n  export default {\n  setup(props, context) {\n    const $q = useQuasar()\n\n    const variables = ref(labels['").concat(icon, "'])\n\n    const functions = ref({\n      // submit\n    })\n\n    context.expose({\n      variables,\n      functions\n    })\n\n    // return the render function\n    return () => h(QIcon, { name: `img:${icon}` })\n  }}\n"); };
+export const FlagIcon = (locale) => `
+  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) => `
+  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'

package/dist/vite-plugin.js

@@ -1,106 +1,55 @@
-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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["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';
 import { Icon, FlagIcon } from './virtualModules.js';
-var readFile = promises.readFile;
+const { readFile } = promises;
 import { fileURLToPath } from 'node:url';
-export default function () {
-    return __awaiter(this, arguments, void 0, function (_a) {
-        var pkgJson, _b, _c, exports, name;
-        var _d = _a === void 0 ? {} : _a, buildFromSrc = _d.buildFromSrc;
-        return __generator(this, function (_e) {
-            switch (_e.label) {
-                case 0:
-                    _c = (_b = JSON).parse;
-                    return [4 /*yield*/, readFile(fileURLToPath(new URL('../package.json', import.meta.url)), 'utf-8')];
-                case 1:
-                    pkgJson = _c.apply(_b, [_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 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
-                                        },
-                                        optimizeDeps: {
-                                            exclude: ['@simsustech/quasar-components']
-                                        }
-                                    };
-                                }
-                                return {};
-                            }
-                        }];
+export default async function ({ buildFromSrc } = {}) {
+    const pkgJson = JSON.parse(await readFile(fileURLToPath(new URL('../package.json', import.meta.url)), 'utf-8'));
+    const exports = pkgJson.exports;
+    const name = pkgJson.name;
+    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(([, 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
+                    },
+                    optimizeDeps: {
+                        exclude: ['@simsustech/quasar-components']
+                    }
+                };
             }
-        });
-    });
+            return {};
+        }
+    };
 }

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.11.26",
-  "author": "Stefan van Herwijnen",
+  "version": "0.12.1",
   "description": "High level components for Quasar Framework",
+  "bugs": "https://github.com/simsusech/quasar-components/issues",
   "license": "MIT",
+  "author": "Stefan van Herwijnen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/simsustech/quasar-components"
+  },
   "type": "module",
   "types": "./dist/types/ui/index.d.ts",
   "exports": {
@@ -45,55 +50,50 @@
       "import": "./dist/vite-plugin.js"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/simsustech/quasar-components"
-  },
-  "bugs": "https://github.com/simsusech/quasar-components/issues",
   "dependencies": {
-    "@vueuse/core": "^14.2.1",
-    "validator": "^13.15.26"
-  },
-  "peerDependencies": {
-    "quasar": "^2.18.6"
+    "@vueuse/core": "^14.3.0",
+    "validator": "^13.15.35"
   },
   "devDependencies": {
     "@iconify-json/flagpack": "^1.2.7",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.9.1",
     "@types/validator": "^13.15.10",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/server-renderer": "^3.5.28",
-    "eslint": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.60.0",
+    "@typescript-eslint/parser": "^8.60.0",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/server-renderer": "^3.5.35",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^10.8.0",
-    "glob": "^13.0.5",
-    "local-pkg": "^1.1.2",
-    "prettier": "^3.8.1",
-    "quasar": "^2.18.6",
+    "eslint-plugin-vue": "^10.9.1",
+    "glob": "^13.0.6",
+    "local-pkg": "^1.2.1",
+    "prettier": "^3.8.3",
+    "quasar": "^2.19.3",
     "rimraf": "^6.1.3",
-    "typescript": "5.9.3",
-    "typescript-eslint": "^8.56.0",
-    "unplugin-vue-components": "^31.0.0",
-    "vite": "^7.3.1",
-    "vue": "^3.5.28",
+    "typescript": "6.0.3",
+    "typescript-eslint": "^8.60.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.0.14",
+    "vue": "^3.5.35",
     "vue-eslint-parser": "^10.4.0",
-    "vue-router": "^5.0.2",
-    "vue-tsc": "^3.2.4"
+    "vue-router": "^5.0.7",
+    "vue-tsc": "^3.3.2"
+  },
+  "peerDependencies": {
+    "quasar": "^2.19.3"
   },
   "scripts": {
     "build:plugin": "vite build",
     "build:vite-plugin": "rimraf tsconfig.build.plugin.tsbuildinfo && tsc -p tsconfig.build.plugin.json",
     "generate:types": "vue-tsc -p tsconfig.types.json",
     "build": "run-s build:plugin build:vite-plugin generate:types",
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
-    "format:check": "prettier --check .",
-    "format:write": "prettier --write .",
+    "lint": "oxlint src",
+    "lint:fix": "oxlint src --fix",
+    "format:check": "oxfmt --check .",
+    "format:write": "oxfmt --write .",
     "test": "echo \"Error: no test specified\" && exit 0"
   }
 }

package/src/ui/authentication/LoginForm.vue

@@ -96,9 +96,14 @@ export interface Props {
     visibility: string
     visibilifyOff: string
   }
+  defaultCredentials?: {
+    username?: string
+    email: string
+    password: string
+  }
 }
 const props = defineProps<Props>()
-const { icons } = toRefs(props)
+const { icons, defaultCredentials } = toRefs(props)
 
 // const attrs = useAttrs();
 const emit = defineEmits<{
@@ -124,9 +129,9 @@ watch($q.lang, (val) => {
   loadLang($q.lang.isoName)
 })
 
-const email = ref('')
-const password = ref('')
-const username = ref('')
+const email = ref(defaultCredentials.value?.email ?? '')
+const password = ref(defaultCredentials.value?.password ?? '')
+const username = ref(defaultCredentials.value?.username ?? '')
 const showPassword = ref(false)
 const header = computed(() => lang.value.login.login)
 const createAccount = computed(() => lang.value.login.createAccount)

package/src/ui/form/CountrySelect.vue

@@ -0,0 +1,83 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :options="countryOptions"
+    :model-value="modelValue"
+    :filled="false"
+    emit-value
+    map-options
+    @update:model-value="(val: string) => emit('update:modelValue', val)"
+  >
+    <template #selected-item="scope">
+      <q-item v-if="scope.opt && isItem">
+        <q-item-section avatar>
+          <q-icon :name="scope.opt.icon" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ scope.opt.label }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <div v-else-if="scope.opt">
+        <q-icon :name="scope.opt.icon" />
+        {{ scope.opt.label }}
+      </div>
+    </template>
+    <template #option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <q-icon :name="scope.opt.icon" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ scope.opt.label }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, computed, toRefs, ref } from 'vue'
+import { QSelect } from 'quasar'
+import { ISO3166, useLang } from './lang/index.js'
+
+export interface Props {
+  modelValue: ISO3166
+  countries: {
+    icon: string
+    iso3166: ISO3166
+  }[]
+  isItem?: boolean
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+const { modelValue, countries } = toRefs(props)
+
+const lang = useLang()
+const attrs = useAttrs()
+
+const countryOptions = computed(() => {
+  const options = countries.value.map((country) => ({
+    label: lang.value.countries[country.iso3166],
+    value: country.iso3166,
+    icon: country.icon
+  }))
+
+  return options
+})
+
+const variables = ref({
+  //
+})
+const functions = ref({
+  //
+})
+
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/form/LocaleSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <q-select
     v-bind="attrs"
-    :options="languageOptions"
+    :options="localeOptions"
     :model-value="modelValue"
     :filled="false"
     emit-value
@@ -40,15 +40,15 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, computed, toRefs } from 'vue'
+import { useAttrs, computed, toRefs, ref } from 'vue'
 import { QSelect } from 'quasar'
-import { Language, useLang } from './lang/index.js'
+import { type Language, type Locales, useLang } from './lang/index.js'
 
 export interface Props {
-  modelValue: keyof Language['countries']
+  modelValue: Locales
   locales: {
     icon: string
-    isoName: keyof Language['languages']
+    bcp47: Locales
   }[]
   isItem?: boolean
 }
@@ -59,13 +59,32 @@ const { modelValue, locales } = toRefs(props)
 const lang = useLang()
 const attrs = useAttrs()
 
-const languageOptions = computed(() => {
+const localeOptions = computed(() => {
   const options = locales.value.map((locale) => ({
-    label: lang.value.languages[locale.isoName],
-    value: locale.isoName,
+    label: getLanguageLabel(locale.bcp47),
+    value: locale.bcp47,
     icon: locale.icon
   }))
 
   return options
 })
+
+const getCountryLabel = (v: keyof Language['bcp47']) =>
+  lang.value.bcp47[v]?.country
+
+const getLanguageLabel = (v: keyof Language['bcp47']) =>
+  lang.value.bcp47[v]?.language
+
+const variables = ref({
+  //
+})
+const functions = ref({
+  getCountryLabel,
+  getLanguageLabel
+})
+
+defineExpose({
+  variables,
+  functions
+})
 </script>

package/src/ui/form/index.ts

@@ -13,4 +13,12 @@ export { default as CurrencySelect } from './CurrencySelect.vue'
 export { default as LocaleSelect } from './LocaleSelect.vue'
 export { default as FilteredModelSelect } from './FilteredModelSelect.vue'
 export { default as CronScheduleInput } from './CronScheduleInput.vue'
-export { useLang, loadLang } from './lang/index.js'
+export { default as CountrySelect } from './CountrySelect.vue'
+
+export {
+  useLang,
+  loadLang,
+  type Locales,
+  type ISO3166,
+  type ISO639
+} from './lang/index.js'