@simsustech/quasar-components 0.10.6 → 0.11.0

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

@@ -64,7 +64,256 @@ const lang: Language = {
     'uz-Latn': "O'zbekcha (Lotin)",
     vi: 'Vietnam',
     'zh-CN': '中文(简体)',
-    'zh-TW': '中文（繁體）'
+    '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': 'العربية (تونس)',

package/src/ui/form/DateInput.vue

@@ -185,7 +185,11 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
   YYYY: {
     modelValue: year.value,
     placeholder: lang.value.datePicker.YYYY,
-    style: 'width: 7ch; margin-top: -2em; margin-bottom: -0.5em',
+    style: {
+      width: format.value === 'YYYY-MM-DD' ? '8ch' : '6ch',
+      'margin-top': '-2em',
+      'margin-bottom': '-0.5em'
+    },
     // suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
     class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-none' : undefined,
     'onUpdate:modelValue': setYear,
@@ -194,7 +198,11 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
   MM: {
     modelValue: month.value ? String(month.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.MM,
-    style: 'width: 6ch; margin-top: -2em; margin-bottom: -0.5em',
+    style: {
+      width: '6ch',
+      'margin-top': '-2em',
+      'margin-bottom': '-0.5em'
+    },
     // suffix: '-',
     class: 'q-ml-none',
     'onUpdate:modelValue': setMonth,
@@ -203,7 +211,11 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
   DD: {
     modelValue: day.value ? String(day.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.DD,
-    style: 'width: 6ch; margin-top: -2em; margin-bottom: -0.5em',
+    style: {
+      width: format.value === 'DD-MM-YYYY' ? '6ch' : '4ch',
+      'margin-top': '-2em',
+      'margin-bottom': '-0.5em'
+    },
     // suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
     class: format.value === 'YYYY-MM-DD' ? 'q-ml-none' : undefined,
     'onUpdate:modelValue': setDay,

package/src/ui/form/LocaleSelect.vue

@@ -8,29 +8,31 @@
     map-options
   >
     <template #selected>
-      <div v-if="modelValue === 'en-US'">
-        <en-us /> {{ flagsLang.languages['en-US'] }}
+      <div v-if="modelValue">
+        <component
+          :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
+        />
+        {{
+          flagsLang.languages[
+            modelValue as keyof (typeof flagsLang)['languages']
+          ]
+        }}
       </div>
-      <div v-if="modelValue === 'nl'"><nl /> {{ flagsLang.languages.nl }}</div>
     </template>
     <template #option="scope">
-      <q-item v-if="scope.opt.value === 'en-US'" v-bind="scope.itemProps">
+      <q-item v-bind="scope.itemProps">
         <q-item-section avatar>
-          <en-us />
+          <component
+            :is="
+              flags[
+                scope.opt.value.slice(-2).toLowerCase() as keyof typeof flags
+              ]
+            "
+          />
         </q-item-section>
         <q-item-section>
           <q-item-label>
-            {{ flagsLang.languages['en-US'] }}
-          </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 />
-        </q-item-section>
-        <q-item-section>
-          <q-item-label>
-            {{ flagsLang.languages.nl }}
+            {{ scope.opt.label }}
           </q-item-label>
         </q-item-section>
       </q-item>
@@ -39,30 +41,39 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, toRefs } from 'vue'
+import { useAttrs, computed } from 'vue'
 import { QSelect } from 'quasar'
-import { nl, enUs } from '../flags/index.js'
+import * as flags from '../flags/index.js'
 import { useLang as useFlagsLang } from '../flags/lang/index.js'
 import { useLang } from './lang/index.js'
 
 export interface Props {
   modelValue?: string | null
   required?: boolean
+  allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']]
 }
-const props = defineProps<Props>()
-const { modelValue } = toRefs(props)
+const {
+  modelValue,
+  required,
+  allowedCodes = ['en-US', 'nl']
+} = defineProps<Props>()
 const attrs = useAttrs()
 
 const lang = useLang()
 const flagsLang = useFlagsLang()
-const languageOptions = [
-  {
-    label: flagsLang.value.languages['en-US'],
-    value: 'en-US'
-  },
-  {
-    label: flagsLang.value.languages.nl,
-    value: 'nl'
+
+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
+})
 </script>

package/src/ui/general/QLanguageSelect.vue

@@ -7,11 +7,30 @@
     map-options
   >
     <template #selected>
-      <en-us v-if="modelValue === 'en-US'" />
-      <nl v-if="modelValue === 'nl'" />
+      <div v-if="modelValue">
+        <component
+          :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
+        />
+      </div>
     </template>
     <template #option="scope">
-      <q-item v-if="scope.opt.value === 'en-US'" v-bind="scope.itemProps">
+      <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>
@@ -30,56 +49,70 @@
             {{ nlLanguage }}
           </q-item-label>
         </q-item-section>
-      </q-item>
+      </q-item> -->
     </template>
   </q-select>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs, computed, toRefs, watch } from 'vue'
+import { useAttrs, computed, watch } from 'vue'
 import { useQuasar, QSelect, QuasarLanguage } from 'quasar'
-import { nl, enUs } from '../flags/index.js'
+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 props = defineProps<Props>()
+const {
+  modelValue,
+  allowedCodes = ['en-US', 'nl'],
+  languageImports
+} = defineProps<Props>()
 const $q = useQuasar()
-const { modelValue } = toRefs(props)
 const attrs = useAttrs()
+const flagsLang = useFlagsLang()
 
-// const langList = import.meta.glob('../../../node_modules/quasar/lang/*.mjs')
-
-const nlRef = ref<typeof nl>()
-// const nlCountry = computed(() => nlRef.value?.variables.country)
-const nlLanguage = computed(() => nlRef.value?.variables.language)
-
-const enUsRef = ref<typeof enUs>()
-// const enUsCountry = computed(() => enUsRef.value?.variables.country)
-const enUsLanguage = computed(() => enUsRef.value?.variables.language)
-
-const languageOptions = [
-  {
-    label: enUsLanguage.value,
-    value: 'en-US'
-  },
-  {
-    label: nlLanguage.value,
-    value: 'nl'
+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 {
-    props.languageImports[langIso]().then(
-      // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
-      (lang) => {
-        $q.lang.set(lang.default)
-      }
-    )
-  } catch (e) {
-    console.error(e)
+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>