@simsustech/quasar-components 0.11.9 → 0.11.11

package/src/ui/authentication/UserMenuButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn icon="person">
+  <q-btn :icon="personIcon">
     <q-menu>
       <q-list>
         <q-item :to="userRoute">
@@ -21,15 +21,19 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, toRefs, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 import type { RouteLocationRaw } from 'vue-router'
 
 export interface Props {
   userRoute: RouteLocationRaw
+  icons?: {
+    person: string
+  }
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+const { icons } = toRefs(props)
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (e: 'signOut'): void
@@ -41,6 +45,8 @@ watch($q.lang, (val) => {
   loadLang($q.lang.isoName)
 })
 
+const personIcon = icons.value?.person ?? 'person'
+
 const variables = ref({
   // header: lang.value.some.nested.prop
 })

package/src/ui/authentication/index.ts

@@ -11,4 +11,6 @@ export { default as ConsentList } from './ConsentList.vue'
 export { default as UserMenuButton } from './UserMenuButton.vue'
 export { default as LoginButton } from './LoginButton.vue'
 export { default as AccountsTable } from './AccountsTable.vue'
+export { default as LogoutForm } from './LogoutForm.vue'
+export { default as LogoutButton } from './LogoutButton.vue'
 export { useLang, loadLang } from './lang/index.js'

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

@@ -108,6 +108,10 @@ const lang: Language = {
       removeRole: ({ email }) =>
         `Select the role which you want to remove from ${email}.`
     }
+  },
+  logout: {
+    confirmation: 'Are you sure you want to log out?',
+    logout: 'Log out'
   }
 }
 

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

@@ -102,6 +102,10 @@ export interface Language {
       removeRole: ({ email }: { email: string }) => string
     }
   }
+  logout: {
+    confirmation: string
+    logout: string
+  }
 }
 
 import type { Ref } from 'vue'

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

@@ -108,6 +108,10 @@ const lang: Language = {
       removeRole: ({ email }) =>
         `Selecteer de rol die u wilt verwijderen van ${email}.`
     }
+  },
+  logout: {
+    confirmation: 'Weet u zeker dat u wilt uitloggen?',
+    logout: 'Log uit'
   }
 }
 

package/src/ui/form/DateInput.vue

@@ -7,30 +7,36 @@
     stack-label
   >
     <template #control>
-      <component
-        :is="QInput"
-        v-for="(part, index) in format.split('-')"
-        :key="part"
-        borderless
-        v-bind="dateProps[part]"
-        inputmode="numeric"
-      >
-        <template #after>
-          <a v-if="index < 2" style="margin-left: -0.75em; margin-top: 0.75em"
-            >-</a
-          >
-        </template>
-      </component>
+      <div class="row">
+        <component
+          :is="QInput"
+          v-for="(part, index) in format.split('-')"
+          :key="part"
+          class="col-auto"
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          v-bind="dateProps[part]"
+          inputmode="numeric"
+          dense
+        >
+          <template #after>
+            <a v-if="index < 2" style="margin-top: 1em; width: 1ch">-</a>
+          </template>
+        </component>
+      </div>
     </template>
 
     <template #append>
       <q-icon
         v-if="clearable"
-        name="clear"
+        :name="icons.clear"
         class="cursor-pointer"
         @click="emit('update:modelValue', null)"
       />
-      <q-icon name="event" class="cursor-pointer">
+      <q-icon :name="icons.event" class="cursor-pointer">
         <q-tooltip v-if="formattedDate">
           {{ formattedDate }}
         </q-tooltip>
@@ -52,6 +58,10 @@
         </q-popup-proxy>
       </q-icon>
     </template>
+
+    <template v-for="(_, slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
   </q-field>
 </template>
 
@@ -74,12 +84,20 @@ export interface Props {
   required?: boolean
   clearable?: boolean
   date?: Partial<QDateProps>
+  icons?: {
+    event: string
+    clear: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   format: 'YYYY-MM-DD',
   locale: 'en-US',
   label: '',
-  date: () => ({})
+  date: () => ({}),
+  icons: () => ({
+    event: 'event',
+    clear: 'clear'
+  })
 })
 const emit = defineEmits<{
   (e: 'update:modelValue', val: string | null): void
@@ -187,12 +205,15 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     modelValue: year.value,
     placeholder: lang.value.datePicker.YYYY,
     style: {
-      width: format.value === 'YYYY-MM-DD' ? '8ch' : '6ch',
-      'margin-top': '-2em',
-      'margin-bottom': '-0.5em'
+      'max-width': format.value === 'YYYY-MM-DD' ? '8ch' : '7ch',
+      'margin-top': '-1.75em',
+      'margin-bottom': '-0.5em',
+      background: 'transparent',
+      border: 0
     },
     // suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
     class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-none' : undefined,
+    inputClass: 'text-center',
     'onUpdate:modelValue': setYear,
     onKeydown: goToNextElement
   },
@@ -200,12 +221,15 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     modelValue: month.value ? String(month.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.MM,
     style: {
-      width: '6ch',
-      'margin-top': '-2em',
-      'margin-bottom': '-0.5em'
+      'max-width': '7ch',
+      'margin-top': '-1.75em',
+      'margin-bottom': '-0.5em',
+      background: 'transparent',
+      border: 0
     },
     // suffix: '-',
     class: 'q-ml-none',
+    inputClass: 'text-center',
     'onUpdate:modelValue': setMonth,
     onKeydown: goToNextElement
   },
@@ -213,12 +237,15 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     modelValue: day.value ? String(day.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.DD,
     style: {
-      width: format.value === 'DD-MM-YYYY' ? '6ch' : '4ch',
-      'margin-top': '-2em',
-      'margin-bottom': '-0.5em'
+      'max-width': format.value === 'DD-MM-YYYY' ? '7ch' : '4ch',
+      'margin-top': '-1.75em',
+      'margin-bottom': '-0.5em',
+      background: 'transparent',
+      border: 0
     },
     // suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
     class: format.value === 'YYYY-MM-DD' ? 'q-ml-none' : undefined,
+    inputClass: 'text-center',
     'onUpdate:modelValue': setDay,
     onKeydown: goToNextElement
   }

package/src/ui/form/LocaleSelect.vue

@@ -3,32 +3,27 @@
     v-bind="attrs"
     :options="languageOptions"
     :model-value="modelValue"
-    :label="`${lang.locale.locale}${required ? '*' : ''}`"
+    :filled="false"
+    borderless
     emit-value
     map-options
   >
-    <template #selected>
-      <div v-if="modelValue">
-        <component
-          :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
-        />
-        {{
-          flagsLang.languages[
-            modelValue as keyof (typeof flagsLang)['languages']
-          ]
-        }}
+    <template #selected-item="scope">
+      <div v-if="scope.opt">
+        <q-item>
+          <q-item-section avatar>
+            <q-icon :name="scope.opt.icon" />
+          </q-item-section>
+          <q-item-section label>
+            {{ scope.opt.label }}
+          </q-item-section>
+        </q-item>
       </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-icon :name="scope.opt.icon" />
         </q-item-section>
         <q-item-section>
           <q-item-label>
@@ -41,39 +36,30 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, computed } from 'vue'
+import { useAttrs, computed, toRefs } from 'vue'
 import { QSelect } from 'quasar'
-import * as flags from '../flags/index.js'
-import { useLang as useFlagsLang } from '../flags/lang/index.js'
-import { useLang } from './lang/index.js'
+import { Language, useLang } from './lang/index.js'
 
 export interface Props {
-  modelValue?: string | null
-  required?: boolean
-  allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']]
+  modelValue: keyof Language['countries']
+  locales: {
+    icon: string
+    isoName: keyof Language['languages']
+  }[]
 }
-const {
-  modelValue,
-  required,
-  allowedCodes = ['en-US', 'nl']
-} = defineProps<Props>()
-const attrs = useAttrs()
+const props = defineProps<Props>()
+const { modelValue, locales } = toRefs(props)
 
 const lang = useLang()
-const flagsLang = useFlagsLang()
+const attrs = useAttrs()
 
 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
-      })
-    }
-  }
+  const options = locales.value.map((locale) => ({
+    label: lang.value.languages[locale.isoName],
+    value: locale.isoName,
+    icon: locale.icon
+  }))
+
   return options
 })
 </script>