@simsustech/quasar-components 0.11.9 → 0.11.11

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

@@ -71,6 +71,383 @@ const lang: Language = {
     validations: {
       invalidCron: 'Cron regel is ongeldig.'
     }
+  },
+  countries: {
+    'ar-TN': 'العربية (تونس)',
+    ar: 'العربية',
+    'az-Latn': 'Azerbaijan',
+    bg: 'български език',
+    bn: 'বাংলা',
+    ca: 'Català',
+    cs: 'Čeština',
+    da: 'Denemarken',
+    de: 'Duitsland',
+    el: 'ελληνικά',
+    'en-GB': 'Verenigd koninkrijk',
+    'en-US': 'Verenigde staten van Amerika',
+    eo: 'Esperanto',
+    es: 'Spanje',
+    et: 'Eesti',
+    eu: 'Euskara',
+    'fa-IR': 'فارسی',
+    fa: 'فارسی',
+    fi: 'Suomi',
+    fr: 'Frankrijk',
+    gn: "Avañe'ẽ",
+    he: 'עברית',
+    hr: 'Hrvatski jezik',
+    hu: 'Magyar',
+    id: 'Bahasa Indonesia',
+    is: 'Íslenska',
+    it: 'Italië',
+    ja: 'Japan',
+    km: 'ខ្មែរ',
+    'ko-KR': '한국어',
+    'kur-CKB': 'کوردی سۆرانی',
+    kz: 'Қазақша',
+    lt: 'Lithuanian',
+    lu: 'Kiluba',
+    lv: 'Latviešu valoda',
+    ml: 'മലയാളം',
+    mm: 'မြန်မာ(ဗမာ)',
+    ms: 'Bahasa Melayu',
+    my: 'Malaysia',
+    'nb-NO': 'Norsk',
+    nl: 'Nederland',
+    pl: 'Polen',
+    'pt-BR': 'Portugal',
+    pt: 'Portugal',
+    ro: 'Roemenië',
+    ru: 'Rusland',
+    sk: 'Slovenčina',
+    sl: 'Slovenski Jezik',
+    sm: "Fa'asāmoa",
+    'sr-CYR': 'српски језик',
+    sr: 'srpski jezik',
+    sv: 'Zweden',
+    ta: 'தமிழ்',
+    th: 'ไทย',
+    tr: 'Turkijke',
+    ug: 'ئۇيغۇرچە',
+    uk: 'Українська',
+    'uz-Cyrl': 'Ўзбекча (Кирил)',
+    'uz-Latn': "O'zbekcha (Lotin)",
+    vi: 'Vietnam',
+    'zh-CN': '中文(简体)',
+    'zh-TW': '中文（繁體）',
+    AF: 'Afghanistan',
+    AX: 'Åland',
+    AL: 'Albanië',
+    DZ: 'Algerije',
+    VI: 'Amerikaanse Maagdeneilanden',
+    AS: 'Amerikaans-Samoa',
+    AD: 'Andorra',
+    AO: 'Angola',
+    AI: 'Anguilla',
+    AQ: 'Antarctica',
+    AG: 'Antigua en Barbuda',
+    AR: 'Argentinië',
+    AM: 'Armenië',
+    AW: 'Aruba',
+    AU: 'Australië',
+    AZ: 'Azerbeidzjan',
+    BS: "Bahama's",
+    BH: 'Bahrein',
+    BD: 'Bangladesh',
+    BB: 'Barbados',
+    BE: 'België',
+    BZ: 'Belize',
+    BJ: 'Benin',
+    BM: 'Bermuda',
+    BT: 'Bhutan',
+    BO: 'Bolivia',
+    BA: 'Bosnië en Herzegovina',
+    BW: 'Botswana',
+    BV: 'Bouvet',
+    BR: 'Brazilië',
+    VG: 'Britse Maagdeneilanden',
+    IO: 'Brits Indische Oceaanterritorium',
+    BN: 'Brunei',
+    BG: 'Bulgarije',
+    BF: 'Burkina Faso',
+    BI: 'Burundi',
+    KH: 'Cambodja',
+    CA: 'Canada',
+    BQ: 'Caribisch Nederland',
+    CF: 'Centraal-Afrikaanse Republiek',
+    CL: 'Chili',
+    CN: 'China',
+    CX: 'Christmaseiland',
+    CC: 'Cocoseilanden',
+    CO: 'Colombia',
+    KM: 'Comoren',
+    CG: 'Congo-Brazzaville',
+    CD: 'Congo-Kinshasa',
+    CK: 'Cookeilanden',
+    CR: 'Costa Rica',
+    CU: 'Cuba',
+    CW: 'Curaçao',
+    CY: 'Cyprus',
+    DK: 'Denemarken',
+    DJ: 'Djibouti',
+    DM: 'Dominica',
+    DO: 'Dominicaanse Republiek',
+    DE: 'Duitsland',
+    EC: 'Ecuador',
+    EG: 'Egypte',
+    SV: 'El Salvador',
+    GQ: 'Equatoriaal-Guinea',
+    ER: 'Eritrea',
+    EE: 'Estland',
+    ET: 'Ethiopië',
+    FO: 'Faeröer',
+    FK: 'Falklandeilanden',
+    FJ: 'Fiji',
+    PH: 'Filipijnen',
+    FI: 'Finland',
+    FR: 'Frankrijk',
+    TF: 'Franse Zuidelijke Gebieden',
+    GF: 'Frans-Guyana',
+    PF: 'Frans-Polynesië',
+    GA: 'Gabon',
+    GM: 'Gambia',
+    GE: 'Georgië',
+    GH: 'Ghana',
+    GI: 'Gibraltar',
+    GD: 'Grenada',
+    GR: 'Griekenland',
+    GL: 'Groenland',
+    GP: 'Guadeloupe',
+    GU: 'Guam',
+    GT: 'Guatemala',
+    GG: 'Guernsey',
+    GN: 'Guinee',
+    GW: 'Guinee-Bissau',
+    GY: 'Guyana',
+    HT: 'Haïti',
+    HM: 'Heard en McDonaldeilanden',
+    HN: 'Honduras',
+    HU: 'Hongarije',
+    HK: 'Hongkong',
+    IE: 'Ierland',
+    IS: 'IJsland',
+    IN: 'India',
+    ID: 'Indonesië',
+    IQ: 'Irak',
+    IR: 'Iran',
+    IL: 'Israël',
+    IT: 'Italië',
+    CI: 'Ivoorkust',
+    JM: 'Jamaica',
+    JP: 'Japan',
+    YE: 'Jemen',
+    JE: 'Jersey',
+    JO: 'Jordanië',
+    KY: 'Kaaimaneilanden',
+    CV: 'Kaapverdië',
+    CM: 'Kameroen',
+    KZ: 'Kazachstan',
+    KE: 'Kenia',
+    KG: 'Kirgizië',
+    KI: 'Kiribati',
+    UM: 'Kleine afgelegen eilanden van de Verenigde Staten',
+    KW: 'Koeweit',
+    HR: 'Kroatië',
+    LA: 'Laos',
+    LS: 'Lesotho',
+    LV: 'Letland',
+    LB: 'Libanon',
+    LR: 'Liberia',
+    LY: 'Libië',
+    LI: 'Liechtenstein',
+    LT: 'Litouwen',
+    LU: 'Luxemburg',
+    MO: 'Macau',
+    MG: 'Madagaskar',
+    MW: 'Malawi',
+    MV: 'Malediven',
+    MY: 'Maleisië',
+    ML: 'Mali',
+    MT: 'Malta',
+    IM: 'Man',
+    MA: 'Marokko',
+    MH: 'Marshalleilanden',
+    MQ: 'Martinique',
+    MR: 'Mauritanië',
+    MU: 'Mauritius',
+    YT: 'Mayotte',
+    MX: 'Mexico',
+    FM: 'Micronesië',
+    MD: 'Moldavië',
+    MC: 'Monaco',
+    MN: 'Mongolië',
+    ME: 'Montenegro',
+    MS: 'Montserrat',
+    MZ: 'Mozambique',
+    MM: 'Myanmar',
+    NA: 'Namibië',
+    NR: 'Nauru',
+    NL: 'Nederland',
+    NP: 'Nepal',
+    NI: 'Nicaragua',
+    NC: 'Nieuw-Caledonië',
+    NZ: 'Nieuw-Zeeland',
+    NE: 'Niger',
+    NG: 'Nigeria',
+    NU: 'Niue',
+    MP: 'Noordelijke Marianen',
+    KP: 'Noord-Korea',
+    MK: 'Noord-Macedonië',
+    NO: 'Noorwegen',
+    NF: 'Norfolk',
+    UG: 'Oeganda',
+    UA: 'Oekraïne',
+    UZ: 'Oezbekistan',
+    OM: 'Oman',
+    AT: 'Oostenrijk',
+    TL: 'Oost-Timor',
+    PK: 'Pakistan',
+    PW: 'Palau',
+    PS: 'Palestina',
+    PA: 'Panama',
+    PG: 'Papoea-Nieuw-Guinea',
+    PY: 'Paraguay',
+    PE: 'Peru',
+    PN: 'Pitcairneilanden',
+    PL: 'Polen',
+    PT: 'Portugal',
+    PR: 'Puerto Rico',
+    QA: 'Qatar',
+    RE: 'Réunion',
+    RO: 'Roemenië',
+    RU: 'Rusland',
+    RW: 'Rwanda',
+    BL: 'Saint-Barthélemy',
+    KN: 'Saint Kitts en Nevis',
+    LC: 'Saint Lucia',
+    PM: 'Saint-Pierre en Miquelon',
+    VC: 'Saint Vincent en de Grenadines',
+    SB: 'Salomonseilanden',
+    WS: 'Samoa',
+    SM: 'San Marino',
+    SA: 'Saoedi-Arabië',
+    ST: 'Sao Tomé en Principe',
+    SN: 'Senegal',
+    RS: 'Servië',
+    SC: 'Seychellen',
+    SL: 'Sierra Leone',
+    SG: 'Singapore',
+    SH: 'Sint-Helena, Ascension en Tristan da Cunha',
+    MF: 'Saint-Martin',
+    SX: 'Sint Maarten',
+    SI: 'Slovenië',
+    SK: 'Slowakije',
+    SD: 'Soedan',
+    SO: 'Somalië',
+    ES: 'Spanje',
+    SJ: 'Spitsbergen en Jan Mayen',
+    LK: 'Sri Lanka',
+    SR: 'Suriname',
+    SZ: 'Swaziland',
+    SY: 'Syrië',
+    TJ: 'Tadzjikistan',
+    TW: 'Taiwan',
+    TZ: 'Tanzania',
+    TH: 'Thailand',
+    TG: 'Togo',
+    TK: 'Tokelau',
+    TO: 'Tonga',
+    TT: 'Trinidad en Tobago',
+    TD: 'Tsjaad',
+    CZ: 'Tsjechië',
+    TN: 'Tunesië',
+    TR: 'Turkije',
+    TM: 'Turkmenistan',
+    TC: 'Turks- en Caicoseilanden',
+    TV: 'Tuvalu',
+    UY: 'Uruguay',
+    VU: 'Vanuatu',
+    VA: 'Vaticaanstad',
+    VE: 'Venezuela',
+    AE: 'Verenigde Arabische Emiraten',
+    US: 'Verenigde Staten',
+    GB: 'Verenigd Koninkrijk',
+    VN: 'Vietnam',
+    WF: 'Wallis en Futuna',
+    EH: 'Westelijke Sahara/SADR',
+    BY: 'Wit-Rusland',
+    ZM: 'Zambia',
+    ZW: 'Zimbabwe',
+    ZA: 'Zuid-Afrika',
+    GS: 'Zuid-Georgia en de Zuidelijke Sandwicheilanden',
+    KR: 'Zuid-Korea',
+    SS: 'Zuid-Soedan',
+    SE: 'Zweden',
+    CH: 'Zwitserland'
+  },
+  languages: {
+    'ar-TN': 'العربية (تونس)',
+    ar: 'العربية',
+    'az-Latn': 'Azerbaijani (latin)',
+    bg: 'български език',
+    bn: 'বাংলা',
+    ca: 'Català',
+    cs: 'Čeština',
+    da: 'Dansk',
+    de: 'Deutsch',
+    el: 'ελληνικά',
+    'en-GB': 'Emgels (UK)',
+    'en-US': 'Engels (US)',
+    eo: 'Esperanto',
+    es: 'Español',
+    et: 'Eesti',
+    eu: 'Euskara',
+    'fa-IR': 'فارسی',
+    fa: 'فارسی',
+    fi: 'Suomi',
+    fr: 'Français',
+    gn: "Avañe'ẽ",
+    he: 'עברית',
+    hr: 'Hrvatski jezik',
+    hu: 'Magyar',
+    id: 'Bahasa Indonesia',
+    is: 'Íslenska',
+    it: 'Italiano',
+    ja: '日本語 (にほんご)',
+    km: 'ខ្មែរ',
+    'ko-KR': '한국어',
+    'kur-CKB': 'کوردی سۆرانی',
+    kz: 'Қазақша',
+    lt: 'Lithuanian',
+    lu: 'Kiluba',
+    lv: 'Latviešu valoda',
+    ml: 'മലയാളം',
+    mm: 'မြန်မာ(ဗမာ)',
+    ms: 'Bahasa Melayu',
+    my: 'Malaysia',
+    'nb-NO': 'Norsk',
+    nl: 'Nederlands',
+    pl: 'Polski',
+    'pt-BR': 'Português (BR)',
+    pt: 'Português',
+    ro: 'Română',
+    ru: 'русский',
+    sk: 'Slovenčina',
+    sl: 'Slovenski Jezik',
+    sm: "Fa'asāmoa",
+    'sr-CYR': 'српски језик',
+    sr: 'srpski jezik',
+    sv: 'Svenska',
+    ta: 'தமிழ்',
+    th: 'ไทย',
+    tr: 'Türkçe',
+    ug: 'ئۇيغۇرچە',
+    uk: 'Українська',
+    'uz-Cyrl': 'Ўзбекча (Кирил)',
+    'uz-Latn': "O'zbekcha (Lotin)",
+    vi: 'Tiếng Việt',
+    'zh-CN': '中文(简体)',
+    'zh-TW': '中文（繁體）'
   }
 }
 

package/src/ui/general/QLanguageSelect.vue

@@ -1,118 +1,43 @@
 <template>
-  <q-select
-    v-bind="attrs"
-    :options="languageOptions"
+  <locale-select
     :model-value="modelValue"
-    emit-value
-    map-options
-  >
-    <template #selected>
-      <div v-if="modelValue">
-        <component
-          :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
-        />
-      </div>
-    </template>
-    <template #option="scope">
-      <q-item v-bind="scope.itemProps">
-        <q-item-section avatar>
-          <component
-            :is="
-              flags[
-                scope.opt.value.slice(-2).toLowerCase() as keyof typeof flags
-              ]
-            "
-          />
-        </q-item-section>
-        <q-item-section>
-          <q-item-label>
-            {{ scope.opt.label }}
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-      <!-- <q-item v-if="scope.opt.value === 'en-US'" v-bind="scope.itemProps">
-        <q-item-section avatar>
-          <en-us ref="enUsRef" />
-        </q-item-section>
-        <q-item-section>
-          <q-item-label>
-            {{ enUsLanguage }}
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-      <q-item v-if="scope.opt.value === 'nl'" v-bind="scope.itemProps">
-        <q-item-section avatar>
-          <nl ref="nlRef" />
-        </q-item-section>
-        <q-item-section>
-          <q-item-label>
-            {{ nlLanguage }}
-          </q-item-label>
-        </q-item-section>
-      </q-item> -->
-    </template>
-  </q-select>
+    :locales="locales"
+    @update:model-value="(val) => $emit('update:model-value', val)"
+  />
 </template>
 
 <script setup lang="ts">
-import { useAttrs, computed, watch } from 'vue'
-import { useQuasar, QSelect, QuasarLanguage } from 'quasar'
-import * as flags from '../flags/index.js'
-import { useLang as useFlagsLang } from '../flags/lang/index.js'
+import { watch, toRefs } from 'vue'
+import { useQuasar, QuasarLanguage } from 'quasar'
+import LocaleSelect from '../form/LocaleSelect.vue'
+import type { Language as FormLanguage } from '../form/lang/index.js'
 
 export interface Props {
-  modelValue: string
-  languageImports: Record<string, () => Promise<{ default: QuasarLanguage }>>
-  allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']]
+  modelValue: keyof FormLanguage['countries']
+  languageImports: Record<
+    keyof FormLanguage['countries'],
+    () => Promise<{ default: QuasarLanguage }>
+  >
+  locales: {
+    icon: string
+    isoName: keyof FormLanguage['languages']
+  }[]
 }
-const {
-  modelValue,
-  allowedCodes = ['en-US', 'nl'],
-  languageImports
-} = defineProps<Props>()
+const props = defineProps<Props>()
+const { modelValue, languageImports, locales } = toRefs(props)
+
 const $q = useQuasar()
-const attrs = useAttrs()
-const flagsLang = useFlagsLang()
 
-const languageOptions = computed(() => {
-  const options = []
-  for (let lang of Object.keys(flagsLang.value.languages) as Array<
-    keyof (typeof flagsLang.value)['languages']
-  >) {
-    if (!allowedCodes.length || allowedCodes.includes(lang)) {
-      options.push({
-        label: flagsLang.value.languages[lang],
-        value: lang
-      })
-    }
+watch(modelValue, (langIso) => {
+  try {
+    languageImports.value[langIso]().then(
+      // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
+      (lang) => {
+        $q.lang.set(lang.default)
+      }
+    )
+  } catch (e) {
+    console.error(e)
   }
-  return options
 })
-
-// const languageOptions = [
-//   {
-//     label: enUsLanguage.value,
-//     value: 'en-US'
-//   },
-//   {
-//     label: nlLanguage.value,
-//     value: 'nl'
-//   }
-// ]
-
-watch(
-  () => modelValue,
-  (langIso: string) => {
-    try {
-      languageImports[langIso]().then(
-        // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
-        (lang) => {
-          $q.lang.set(lang.default)
-        }
-      )
-    } catch (e) {
-      console.error(e)
-    }
-  }
-)
 </script>

package/src/ui/general/QLanguageSelectBtn.vue.bak

@@ -0,0 +1,99 @@
+<template>
+  <q-btn flat>
+    <div v-if="modelValue">
+      <component
+        :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
+      />
+    </div>
+
+    <q-menu>
+      <q-list>
+        <q-item
+          v-for="option in languageOptions"
+          :key="option.value"
+          v-close-popup
+          clickable
+          @click="$emit('update:model-value', option.value)"
+        >
+          <q-item-section avatar>
+            <component
+              :is="
+                flags[
+                  option.value.slice(-2).toLowerCase() as keyof typeof flags
+                ]
+              "
+            />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>
+              {{ option.label }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useQuasar, QuasarLanguage } from 'quasar'
+import * as flags from '../flags/index.js'
+import { useLang as useFlagsLang } from '../flags/lang/index.js'
+
+export interface Props {
+  modelValue: string
+  languageImports: Record<string, () => Promise<{ default: QuasarLanguage }>>
+  allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']]
+}
+const {
+  modelValue,
+  allowedCodes = ['en-US', 'nl'],
+  languageImports
+} = defineProps<Props>()
+const $q = useQuasar()
+
+const flagsLang = useFlagsLang()
+
+const languageOptions = computed(() => {
+  const options = []
+  for (let lang of Object.keys(flagsLang.value.languages) as Array<
+    keyof (typeof flagsLang.value)['languages']
+  >) {
+    if (!allowedCodes.length || allowedCodes.includes(lang)) {
+      options.push({
+        label: flagsLang.value.languages[lang],
+        value: lang
+      })
+    }
+  }
+  return options
+})
+
+// const languageOptions = [
+//   {
+//     label: enUsLanguage.value,
+//     value: 'en-US'
+//   },
+//   {
+//     label: nlLanguage.value,
+//     value: 'nl'
+//   }
+// ]
+
+watch(
+  () => modelValue,
+  (langIso: string) => {
+    try {
+      languageImports[langIso]().then(
+        // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
+        (lang) => {
+          $q.lang.set(lang.default)
+        }
+      )
+    } catch (e) {
+      console.error(e)
+    }
+  }
+)
+</script>

package/src/ui/general/QStyledCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card ref="qCardRef">
+  <q-card ref="qCardRef" style="max-width: 300px">
     <slot name="image" />
 
     <q-card-section>
@@ -58,4 +58,4 @@ defineExpose({
 })
 </script>
 
-<style lang="sass" scoped></style>
+<style scoped></style>

package/src/ui/general/ResourcePage.vue

@@ -18,7 +18,7 @@
             round
             size="lg"
             dense
-            icon="add"
+            :icon="icons.add"
             class="q-mr-sm bg-primary text-white"
             @click="create"
           />
@@ -30,7 +30,7 @@
             round
             size="lg"
             dense
-            icon="edit"
+            :icon="icons.edit"
             class="q-mr-sm bg-primary text-white"
             @click="update"
           />
@@ -44,7 +44,7 @@
             v-if="type === 'create'"
             :disable="disabled"
             :label="lang.add"
-            icon="add"
+            :icon="icons.add"
             outline
             @click="create"
           />
@@ -52,7 +52,7 @@
             v-else-if="type === 'update'"
             :disable="disabled"
             :label="lang.edit"
-            icon="edit"
+            :icon="icons.edit"
             outline
             @click="update"
           />
@@ -80,12 +80,20 @@ export interface Props {
   disabled?: boolean
   topBarFab?: boolean
   topBarShrink?: boolean
+  icons?: {
+    add: string
+    edit: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   type: undefined,
   disabled: false,
   topBarFab: false,
-  topBarShrink: true
+  topBarShrink: true,
+  icons: () => ({
+    add: 'add',
+    edit: 'edit'
+  })
 })
 
 const emit = defineEmits<{