@simsustech/quasar-components 0.11.10 → 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,119 +1,43 @@
 <template>
-  <q-select
-    v-bind="attrs"
-    :options="languageOptions"
+  <locale-select
     :model-value="modelValue"
-    borderless
-    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 → QLanguageSelectBtn.vue.bak}

@@ -1,5 +1,5 @@
 <template>
-  <q-btn>
+  <q-btn flat>
     <div v-if="modelValue">
       <component
         :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"

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/ResponsiveDialog.vue

@@ -3,18 +3,28 @@
     <q-layout
       view="LHh lpR fff"
       container
-      :class="$q.dark.isActive ? 'bg-dark' : 'bg-white'"
+      class="bg-light-surface dark:bg-dark-surface"
       style="min-width: 85vw"
     >
-      <q-header class="bg-primary">
+      <q-header
+        class="bg-light-surface-container-high dark:bg-dark-surface-container-high"
+      >
         <q-toolbar>
-          <q-btn :icon="icons.close" flat round dense @click="close" />
+          <q-btn
+            :icon="icons.close"
+            class="text-light-on-surface dark:text-dark-on-surface"
+            flat
+            round
+            dense
+            @click="close"
+          />
           <q-toolbar-title>
             <slot name="title" />
           </q-toolbar-title>
           <q-submit-button
             v-if="!display"
-            color="accent"
+            flat
+            class="text-light-primary dark:text-dark-primary"
             :type="buttonType"
             @submit="submit"
           ></q-submit-button>

package/src/ui/general/index.ts

@@ -3,6 +3,6 @@ export { default as QStyledCard } from './QStyledCard.vue'
 export { default as ResponsiveDialog } from './ResponsiveDialog.vue'
 export { default as ResourcePage } from './ResourcePage.vue'
 export { default as QLanguageSelect } from './QLanguageSelect.vue'
-export { default as QLanguageSelectBtn } from './QLanguageSelectBtn.vue'
+// export { default as QLanguageSelectBtn } from './QLanguageSelectBtn.vue'
 export { default as QDrawerList } from './QDrawerList.vue'
 export { useLang, loadLang } from './lang/index.js'