@simsustech/quasar-components 0.7.1 → 0.8.0

package/eslint.config.js

@@ -0,0 +1,29 @@
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import pluginVue from 'eslint-plugin-vue'
+import typescriptEslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
+
+export default typescriptEslint.config(
+  ...typescriptEslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        sourceType: 'module',
+        parser: {
+          ts: typescriptEslint.parser
+        }
+      }
+    }
+  },
+
+  /**
+   * end
+   */
+  eslintConfigPrettier,
+  eslintPluginPrettierRecommended
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -49,39 +49,42 @@
     "validator": "^13.11.0"
   },
   "peerDependencies": {
-    "quasar": "^2.9.2"
+    "quasar": "^2.15.2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.12.7",
     "@types/validator": "^13.11.9",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/server-renderer": "^3.4.19",
-    "eslint": "^8.56.0",
+    "@vue/server-renderer": "^3.4.23",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^9.21.1",
-    "glob": "^10.3.10",
+    "eslint-plugin-vue": "^9.25.0",
+    "glob": "^10.3.12",
     "local-pkg": "^0.5.0",
     "prettier": "^3.2.5",
-    "quasar": "^2.14.4",
+    "quasar": "^2.15.2",
     "rimraf": "^5.0.5",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.7.0",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.3",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.2.9",
+    "vue": "^3.4.23",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.0.13"
   },
   "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 --ext .vue --ext .ts src",
-    "lint:fix": "eslint --ext .vue --ext .ts src --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "format:check": "prettier --check .",
     "format:write": "prettier --write .",
     "test": "echo \"Error: no test specified\" && exit 0"

package/src/ui/flags/index.ts

@@ -1,5 +1,6 @@
-// @ts-nocheck
+// @ts-expect-error vite only
 import nl from 'nl.flag'
+// @ts-expect-error vite only
 import enUs from 'en-US.flag'
 export { nl, enUs }
 export { useLang, loadLang } from './lang/index.js'

package/src/ui/form/CurrencySelect.vue

@@ -0,0 +1,49 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :options="currencyOptions"
+    :label="`${lang.currency.currency}${required ? '*' : ''}`"
+    emit-value
+    map-options
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-select>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, ref } from 'vue'
+import { QSelect, ValidationRule } from 'quasar'
+import { useLang } from './lang'
+
+export type Currency = 'EUR' | 'USD'
+export interface Props {
+  modelValue: Currency | null
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const currencyOptions = ref([
+  {
+    label: lang.value.currency.EUR,
+    value: 'EUR'
+  },
+  {
+    label: lang.value.currency.USD,
+    value: 'USD'
+  }
+])
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: { label: string; value: string }) =>
+      !!val || lang.value.validations.fieldRequired
+  )
+defineEmits(['update:modelValue'])
+</script>

package/src/ui/form/LocaleSelect.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :options="languageOptions"
+    :model-value="modelValue"
+    emit-value
+    map-options
+  >
+    <template #selected>
+      <div v-if="modelValue === 'en-US'">
+        <en-us /> {{ flagsLang.languages['en-US'] }}
+      </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-section avatar>
+          <en-us />
+        </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 }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, toRefs } from 'vue'
+import { QSelect } from 'quasar'
+import { nl, enUs } from '../flags/index.js'
+import { useLang as useFlagsLang } from '../flags/lang/index.js'
+export interface Props {
+  modelValue?: string | null
+}
+const props = defineProps<Props>()
+const { modelValue } = toRefs(props)
+const attrs = useAttrs()
+
+const flagsLang = useFlagsLang()
+const languageOptions = [
+  {
+    label: flagsLang.value.languages['en-US'],
+    value: 'en-US'
+  },
+  {
+    label: flagsLang.value.languages.nl,
+    value: 'nl'
+  }
+]
+</script>

package/src/ui/form/index.ts

@@ -9,5 +9,7 @@ export { default as BooleanSelect } from './BooleanSelect.vue'
 export { default as BooleanItem } from './BooleanItem.vue'
 export { default as EmailInput } from './EmailInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
+export { default as CurrencySelect } from './CurrencySelect.vue'
+export { default as LocaleSelect } from './LocaleSelect.vue'
 export { default as FilteredModelSelect } from './FilteredModelSelect.vue'
 export { useLang, loadLang } from './lang/index.js'

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

@@ -43,6 +43,11 @@ const lang: Language = {
     validations: {
       unavailableRange: 'The selected period contains unavailable dates.'
     }
+  },
+  currency: {
+    currency: 'Currency',
+    EUR: 'Euro',
+    USD: 'USD'
   }
 }
 

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

@@ -42,11 +42,16 @@ export interface Language {
       unavailableRange: string
     }
   }
+  currency: {
+    currency: string
+    EUR: string
+    USD: string
+  }
 }
 
 import type { Ref } from 'vue'
 import { ref } from 'vue'
-import en from './en-US'
+import en from './en-US.js'
 export const lang = ref(en)
 
 const locales = import.meta.glob<{ default: Language }>([

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

@@ -43,6 +43,11 @@ const lang: Language = {
     validations: {
       unavailableRange: 'De geselecteerde periode bevat ongeschikbare datums.'
     }
+  },
+  currency: {
+    currency: 'Valuta',
+    EUR: 'Euro',
+    USD: 'USD'
   }
 }
 

package/src/ui/general/QLanguageSelect.vue

@@ -42,7 +42,7 @@ import { nl, enUs } from '../flags/index.js'
 
 export interface Props {
   modelValue: string
-  languageImports: Record<string, () => Promise<QuasarLanguage>>
+  languageImports: Record<string, () => Promise<{ default: QuasarLanguage }>>
 }
 const props = defineProps<Props>()
 const $q = useQuasar()
@@ -75,7 +75,6 @@ watch(modelValue, (langIso: string) => {
     props.languageImports[langIso]().then(
       // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
       (lang) => {
-        // @ts-ignore
         $q.lang.set(lang.default)
       }
     )

package/src/ui/icons/index.ts

@@ -1,3 +1,3 @@
-// @ts-nocheck
+// @ts-expect-error vite only
 import microsoft from 'microsoft.icon'
 export { microsoft }

package/.eslintignore

@@ -1,2 +0,0 @@
-.eslintrc.cjs
-node_modules/

package/.eslintrc.cjs

@@ -1,19 +0,0 @@
-module.exports = {
-  ignorePatterns: ['.eslintrc.cjs'],
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:prettier-vue/recommended'
-  ],
-  parser: 'vue-eslint-parser',
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module'
-  },
-  rules: {
-    '@typescript-eslint/ban-ts-comment': 0
-  },
-  plugins: ['@typescript-eslint'],
-  root: true
-}