@simsustech/quasar-components 0.1.0

package/.eslintignore

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

package/.eslintrc.cjs

@@ -0,0 +1,19 @@
+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
+}

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": ["*.json5"],
+      "options": {
+        "singleQuote": false,
+        "quoteProps": "preserve"
+      }
+    },
+    {
+      "files": ["*.yml"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @simsustech/quasar-components
+
+## 0.1.0
+
+### Minor Changes
+
+- 62f9629: Release

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Stefan van Herwijnen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/StandardComponent.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-card ref="qCardRef"> </q-card>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'StandardComponent'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { QCard, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+// export interface Props {}
+// const props = defineProps<Props>();
+// const attrs = useAttrs();
+// const emit = defineEmits<{
+//   (
+//     e: "asyncEmit",
+//     {
+//       value,
+//       done,
+//     }: {
+//       value: string;
+//       done: () => void;
+//     }
+//   ): void;
+// }>();
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const qCardRef = ref<QCard>()
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@simsustech/quasar-components",
+  "version": "0.1.0",
+  "author": "Stefan van Herwijnen",
+  "description": "High level components for Quasar Framework",
+  "license": "MIT",
+  "type": "module",
+  "types": "./dist/types/ui/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/ui/general/index.d.ts",
+      "import": "./dist/general.js",
+      "src": "./src/ui/general/index.ts"
+    },
+    "./authentication": {
+      "types": "./dist/types/ui/authentication/index.d.ts",
+      "import": "./dist/authentication.js"
+    },
+    "./flags": {
+      "types": "./dist/types/ui/flags/index.d.ts",
+      "import": "./dist/flags.js"
+    },
+    "./icons": {
+      "types": "./dist/types/ui/icons/index.d.ts",
+      "import": "./dist/icons.js"
+    },
+    "./css": {
+      "import": "./dist/style.css"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.js"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/simsustech/quasar-components"
+  },
+  "bugs": "https://github.com/simsusech/quasar-components/issues",
+  "dependencies": {
+    "validator": "^13.7.0"
+  },
+  "peerDependencies": {
+    "quasar": "^2.9.2"
+  },
+  "devDependencies": {
+    "@types/node": "^18.7.13",
+    "@types/validator": "^13.7.5",
+    "@types/ws": "^8.5.3",
+    "@typescript-eslint/eslint-plugin": "^5.34.0",
+    "@typescript-eslint/parser": "^5.34.0",
+    "@vitejs/plugin-vue": "^3.2.0-beta.0",
+    "@vue/server-renderer": "^3.2.37",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier-vue": "^4.2.0",
+    "eslint-plugin-vue": "^9.6.0",
+    "glob": "^8.0.3",
+    "local-pkg": "^0.4.2",
+    "prettier": "^2.7.1",
+    "quasar": "^2.9.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.7.4",
+    "unplugin-vue-components": "^0.22.8",
+    "vite": "^3.2.0-beta.0",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.4",
+    "vue-tsc": "^1.0.8"
+  },
+  "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",
+    "format:check": "prettier --check .",
+    "format:write": "prettier --write .",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}

package/src/ui/authentication/ConsentList.vue

@@ -0,0 +1,89 @@
+<template>
+  <q-list>
+    <q-item v-for="scope in scopes" :key="scope.name">
+      <q-item-section avatar>
+        <q-icon color="green" name="check" />
+      </q-item-section>
+      <q-item-section>
+        {{ scope.name }}
+      </q-item-section>
+    </q-item>
+    <q-item v-for="claim in claims" :key="claim.name">
+      <q-item-section avatar>
+        <q-icon color="green" name="check" />
+      </q-item-section>
+      <q-item-section>
+        {{ claim.name }}
+      </q-item-section>
+    </q-item>
+    <q-item v-for="resourceScope in resourceScopes" :key="resourceScope.name">
+      <q-item-section avatar>
+        <q-icon color="green" name="check" />
+      </q-item-section>
+      <q-item-section>
+        {{ resourceScope.name }}
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ConsentList'
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  scopes: {
+    name: string
+  }[]
+  claims?: {
+    name: string
+  }[]
+  resourceScopes?: {
+    name: string
+  }[]
+}
+defineProps<Props>()
+// const attrs = useAttrs();
+// const emit = defineEmits<{
+//   (
+//     e: "asyncEmit",
+//     {
+//       value,
+//       done,
+//     }: {
+//       value: string;
+//       done: () => void;
+//     }
+//   ): void;
+// }>();
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const message = computed(() => lang.value.consent.message)
+const allow = computed(() => lang.value.consent.allow)
+const deny = computed(() => lang.value.consent.deny)
+
+const variables = ref({
+  message,
+  allow,
+  deny
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/EmailChangeForm.vue

@@ -0,0 +1,128 @@
+<template>
+  <q-form ref="formRef" class="q-gutter-md" v-bind="form">
+    <otp-input v-bind="input" v-model="otp" />
+    <q-input
+      v-bind="input"
+      id="newEmail"
+      v-model="newEmail"
+      name="newEmail"
+      :label="lang.email.fields.newEmail"
+      bottom-slots
+      :rules="validations['newEmail']"
+      lazy-rules
+    />
+    <q-input
+      v-bind="input"
+      id="repeatNewEmail"
+      v-model="repeatNewEmail"
+      name="repeatNewEmail"
+      :label="lang.email.fields.repeatNewEmail"
+      bottom-slots
+      :rules="validations['repeatNewEmail']"
+      lazy-rules
+    />
+    <slot name="default" :submit="submit" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'EmailChangeForm'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, toRef } from 'vue'
+import { useQuasar, QFormProps, QForm, QInputProps } from 'quasar'
+import { useLang, loadLang } from './lang'
+import isEmail from 'validator/es/lib/isEmail.js'
+import QSubmitButton from '../general/QSubmitButton.vue'
+import OtpInput from './OtpInput.vue'
+
+export interface Props {
+  email: string
+  form?: QFormProps & HTMLFormElement
+  input?: Omit<
+    QInputProps,
+    | 'id'
+    | 'name'
+    | 'modelValue'
+    | 'label'
+    | 'rules'
+    | 'type'
+    | 'lazy-rules'
+    | 'autofocus'
+    | ('label' & { style?: Partial<CSSStyleDeclaration> })
+  >
+}
+const props = defineProps<Props>()
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'submit',
+    {
+      email,
+      newEmail,
+      otp,
+      done
+    }: {
+      email: string
+      newEmail: string
+      otp: string
+      done: () => void
+    }
+  ): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const email = toRef(props, 'email')
+const otp = ref('')
+const newEmail = ref('')
+const repeatNewEmail = ref('')
+const header = computed(() => lang.value.email.changeEmail)
+
+const formRef = ref<QForm>()
+const validations = computed<
+  Record<string, ((val: string) => boolean | string)[]>
+>(() => ({
+  newEmail: [
+    (val) => !!val || lang.value.email.validations.fieldRequired,
+    (val) => isEmail(val) || lang.value.email.validations.invalidEmail
+  ],
+  repeatNewEmail: [
+    (val) => !!val || lang.value.email.validations.fieldRequired,
+    (val) => isEmail(val) || lang.value.email.validations.emailsDoNotMatch
+  ]
+}))
+
+const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
+  evt
+) => {
+  formRef.value?.validate().then((success) => {
+    if (success) {
+      emit('submit', {
+        email: email.value,
+        newEmail: newEmail.value,
+        otp: otp.value,
+        done: evt.done
+      })
+    } else evt.done()
+  })
+}
+
+const variables = ref({
+  header
+})
+const functions = ref({
+  submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/EmailChangeStepper.vue

@@ -0,0 +1,153 @@
+<template>
+  <q-stepper v-model="step">
+    <q-step name="requestOtp" :title="requestOtpHeader">
+      <request-otp-form
+        ref="requestOtpFormRef"
+        :input="input"
+        @submit="requestOtp"
+      ></request-otp-form>
+    </q-step>
+
+    <q-step name="changeEmail" :title="emailChangeHeader">
+      <email-change-form
+        ref="emailChangeFormRef"
+        :email="email"
+        :input="input"
+        @submit="changeEmail"
+      >
+      </email-change-form>
+    </q-step>
+    <template #navigation>
+      <q-stepper-navigation class="text-right">
+        <q-submit-button
+          v-if="step === 'requestOtp'"
+          is-next-button
+          @submit="requestOtpFormRef?.functions.submit"
+        ></q-submit-button>
+        <q-submit-button
+          v-if="step === 'changeEmail'"
+          @submit="emailChangeFormRef?.functions.submit"
+        ></q-submit-button>
+      </q-stepper-navigation>
+    </template>
+  </q-stepper>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'EmailChangeStepper'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useQuasar, QInputProps } from 'quasar'
+import { useLang, loadLang } from './lang'
+import QSubmitButton from '../general/QSubmitButton.vue'
+import RequestOtpForm from './RequestOtpForm.vue'
+import EmailChangeForm from './EmailChangeForm.vue'
+export interface Props {
+  input?: Omit<
+    QInputProps,
+    | 'id'
+    | 'name'
+    | 'modelValue'
+    | 'label'
+    | 'rules'
+    | 'type'
+    | 'lazy-rules'
+    | 'autofocus'
+    | ('label' & { style?: Partial<CSSStyleDeclaration> })
+  >
+}
+defineProps<Props>()
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'requestOtp',
+    {
+      email,
+      done
+    }: {
+      email: string
+      done: () => void
+    }
+  ): void
+  (
+    e: 'changeEmail',
+    {
+      email,
+      newEmail,
+      otp,
+      done
+    }: {
+      email: string
+      newEmail: string
+      otp: string
+      done: () => void
+    }
+  ): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const steps = ['requestOtp', 'changeEmail'] as const
+const step = ref<typeof steps[number]>('requestOtp')
+const email = ref('')
+const header = computed(() => lang.value.email.changeEmail)
+const emailChanged = computed(() => lang.value.email.emailChanged)
+const unprocessableRequest = computed(() => lang.value.unprocessableRequest)
+const checkEmail = computed(() => lang.value.otp.checkEmail)
+
+const requestOtpFormRef = ref<typeof RequestOtpForm>()
+const emailChangeFormRef = ref<typeof EmailChangeForm>()
+
+const requestOtpHeader = computed(
+  () => requestOtpFormRef.value?.variables.header || ''
+)
+const emailChangeHeader = computed(
+  () => emailChangeFormRef.value?.variables.header || ''
+)
+const requestOtp: InstanceType<typeof RequestOtpForm>['$props']['onSubmit'] = ({
+  email: emittedEmail,
+  done
+}) => {
+  emit('requestOtp', {
+    email: emittedEmail,
+    done: () => {
+      email.value = emittedEmail
+      done()
+    }
+  })
+}
+
+const changeEmail: InstanceType<
+  typeof EmailChangeForm
+>['$props']['onSubmit'] = ({ email, newEmail, otp, done }) => {
+  emit('changeEmail', {
+    email,
+    newEmail,
+    otp,
+    done
+  })
+}
+
+const variables = ref({
+  header,
+  emailChanged,
+  unprocessableRequest,
+  checkEmail,
+  steps
+})
+const functions = ref({
+  goToStep: (newStep: typeof steps[number]) => (step.value = newStep)
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/LoginButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <q-btn>
+    <slot name="icon" />
+    <div v-if="withNetwork">{{ lang.login.loginWith }} {{ withNetwork }}</div>
+    <div v-else>
+      {{ lang.login.login }}
+    </div>
+  </q-btn>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LoginButton'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  withNetwork?: string
+}
+defineProps<Props>()
+// const attrs = useAttrs();
+// const emit = defineEmits<{
+//   (
+//     e: "asyncEmit",
+//     {
+//       value,
+//       done,
+//     }: {
+//       value: string;
+//       done: () => void;
+//     }
+//   ): void;
+// }>();
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>