appsalutely 0.1.0

package/.editorconfig

@@ -0,0 +1,9 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+end_of_line = lf
+max_line_length = 100

package/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

package/eslint.config.ts

@@ -0,0 +1,22 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  skipFormatting,
+)

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "appsalutely",
+  "version": "0.1.0",
+  "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.umd.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "pinia": "^3.0.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.8.5"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-vue": "~10.0.0",
+    "jiti": "^2.4.2",
+    "npm-run-all2": "^7.0.2",
+    "prettier": "3.5.3",
+    "typescript": "~5.8.0",
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.2.8"
+  }
+}

package/src/components/AppBase.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, onBeforeMount, watch, useSlots } from 'vue'
+import { useRouter, RouterView } from 'vue-router'
+import {
+  VApp,
+  VProgressLinear,
+  VAppBar,
+  VNavigationDrawer,
+  VList,
+  VMain,
+  VFooter,
+  VBtn,
+  VSnackbar,
+} from 'vuetify/components'
+import useColorMode from '../stores/colorMode'
+import useFooter from '../stores/footer'
+import useNotify from '../stores/notify'
+
+const colorMode = useColorMode()
+const drawerOpen = defineModel<boolean>('drawerOpen', { default: false })
+const drawerDocked = ref(false)
+const footer = useFooter()
+const navigating = ref(false)
+const navigatingTimeout = ref<number | null>(null)
+const notify = useNotify()
+const router = useRouter()
+const slots = useSlots()
+
+watch(drawerDocked, (newValue) => {
+  localStorage.setItem('drawerDocked', String(newValue))
+})
+
+onBeforeMount(() => {
+  router.beforeEach(() => {
+    navigatingTimeout.value = setTimeout(() => {
+      navigating.value = true
+    }, 300)
+  })
+  router.afterEach(() => {
+    if (navigatingTimeout.value) {
+      clearTimeout(navigatingTimeout.value)
+      navigatingTimeout.value = null
+    }
+    navigating.value = false
+  })
+  drawerDocked.value = localStorage.getItem('drawerDocked') === 'true'
+  drawerOpen.value = drawerDocked.value
+})
+</script>
+<template>
+  <VApp :theme="colorMode.mode">
+    <VProgressLinear
+      indeterminate
+      v-if="navigating"
+      class="mb-n1"
+      style="z-index: 100000; opacity: 0.5"
+      height="1"
+    />
+    <VAppBar height="64">
+      <slot name="header" />
+    </VAppBar>
+    <VMain class="bg-surface-light">
+      <div class="d-flex flex-column pa-4 h-100">
+        <RouterView />
+      </div>
+    </VMain>
+    <VAppBar v-if="slots.footer" height="40" location="bottom">
+      <VFooter class="py-0 w-100 d-flex align-center">
+        <span
+          v-if="footer.current"
+          v-text="footer.current.text"
+          :class="footer.current.type ? {} : { ['text-' + footer.current.type]: true }"
+          style="text-overflow: ellipsis"
+          class="overflow-hidden text-no-wrap"
+        />
+        <template v-if="footer.current && footer.current.actions">
+          <VBtn
+            v-for="(action, index) of Object.entries(footer.current.actions)"
+            :text="action[0]"
+            @click="action[1]"
+            :key="index"
+            density="comfortable"
+            variant="tonal"
+            class="mx-2 px-2 text-none"
+            :color="footer.current.type"
+          />
+        </template>
+        <div class="me-auto" />
+        <slot name="footer" />
+      </VFooter>
+    </VAppBar>
+    <VNavigationDrawer
+      v-if="slots.drawer"
+      v-model="drawerOpen"
+      width="250"
+      rail-width="58"
+      :rail="drawerDocked"
+      :mobile="drawerDocked ? false : undefined"
+    >
+      <VList class="h-100 d-flex flex-column">
+        <slot name="drawer" />
+        <VBtn
+          @click="drawerDocked = !drawerDocked"
+          icon="mdi-pin-outline"
+          rounded="rounded"
+          density="comfortable"
+          :title="drawerDocked ? 'Undock sidebar' : 'Dock sidebar'"
+          class="my-1 mx-3 ms-auto"
+          :variant="drawerDocked ? 'tonal' : 'text'"
+        />
+      </VList>
+    </VNavigationDrawer>
+    <VSnackbar
+      v-for="(message, index) of notify.messages"
+      :key="index"
+      :model-value="true"
+      :text="message.text"
+      :color="message.type"
+      location="bottom end"
+      :style="{ bottom: `${index * 56}px` }"
+      :timeout="-1"
+    >
+      <template #actions>
+        <VBtn icon="mdi-close" @click="notify.remove(message.id!)" />
+      </template>
+    </VSnackbar>
+  </VApp>
+</template>
+<style>
+html {
+  overflow: auto;
+}
+html[data-theme='dark'] {
+  color-scheme: dark;
+}
+html[data-theme='light'] {
+  color-scheme: light;
+}
+</style>

package/src/components/DashboardPage.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { VBreadcrumbs, VContainer } from 'vuetify/components'
+import { defineProps, withDefaults } from 'vue'
+
+withDefaults(
+  defineProps<{
+    breadcrumbs?: VBreadcrumbs['$props']['items']
+    fluid?: boolean
+    title?: string
+  }>(),
+  {
+    fluid: true,
+  },
+)
+</script>
+<template>
+  <VContainer :fluid="fluid" class="h-100 d-flex flex-column py-0 h-100">
+    <VBreadcrumbs :items="breadcrumbs" density="comfortable" class="pa-0" v-if="breadcrumbs" />
+    <h1 v-if="title" v-text="title" class="text-h5 font-bold ma-1" />
+    <slot />
+  </VContainer>
+</template>

package/src/components/FooterSection.vue

@@ -0,0 +1,6 @@
+<template>
+  <span class="border-s mx-3" style="height: 32px" />
+  <span class="h-100 d-flex align-center">
+    <slot />
+  </span>
+</template>

package/src/components/LoginForm.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { defineProps, withDefaults, defineModel, defineEmits, ref } from 'vue'
+import { VBtn, VCard, VCardText, VForm, VTextField } from 'vuetify/components'
+
+const username = defineModel<string>('username', { default: '' })
+const password = defineModel<string>('password', { default: '' })
+const emit = defineEmits<{
+  submit: [string, string]
+}>()
+withDefaults(
+  defineProps<{
+    title?: string
+    submitButtonText?: string
+    minWidth?: string | number
+    maxWidth?: string | number
+    loading?: boolean
+  }>(),
+  {
+    title: 'Login',
+    submitButtonText: 'Login',
+  },
+)
+const valid = ref(false)
+</script>
+<template>
+  <VCard :title="title" :min-width="minWidth" :max-width="maxWidth">
+    <VForm @submit.prevent="emit('submit', username, password)" v-model="valid">
+      <VCardText>
+        <VTextField
+          v-model="username"
+          label="Username"
+          :rules="[(v) => !!v || 'Username is required']"
+          persistent-placeholder
+          autofocus
+        />
+        <VTextField
+          v-model="password"
+          label="Password"
+          type="password"
+          :rules="[(v) => !!v || 'Password is required']"
+          persistent-placeholder
+        />
+        <div class="d-flex justify-center">
+          <VBtn
+            :disabled="!valid"
+            type="submit"
+            color="primary"
+            variant="flat"
+            :text="submitButtonText"
+            :loading="loading"
+          />
+        </div>
+      </VCardText>
+    </VForm>
+  </VCard>
+</template>

package/src/components/NavDrawerLink.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { VListItem, VIcon } from 'vuetify/components'
+
+defineProps<{
+  to: RouteLocationRaw
+  icon: string
+  text: string
+}>()
+</script>
+<template>
+  <VListItem role="option" :to="to" slim>
+    <template #prepend>
+      <VIcon :icon="icon" />
+    </template>
+    <span class="text-no-wrap overflow-hidden">{{ text }}</span>
+  </VListItem>
+</template>

package/src/components/OTPForm.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { defineProps, withDefaults, defineModel, defineEmits, computed, watch } from 'vue'
+import { VBtn, VCard, VCardText, VForm, VOtpInput } from 'vuetify/components'
+
+const otp = defineModel<string>('otp', { default: '' })
+const emit = defineEmits<{
+  submit: [string]
+}>()
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    submitButtonText?: string
+    minWidth?: string | number
+    maxWidth?: string | number
+    loading?: boolean
+    length?: number
+    autosubmit?: boolean
+  }>(),
+  {
+    title: '2FA Verification',
+    subtitle: 'Enter the code from your authenticator app',
+    submitButtonText: 'Verify',
+    length: 6,
+    autosubmit: true,
+  },
+)
+const valid = computed(() => otp.value.length === props.length)
+
+watch(otp, () => {
+  if (props.autosubmit && otp.value.length === props.length) {
+    emit('submit', otp.value)
+  }
+})
+</script>
+<template>
+  <VCard :title="title" :subtitle="subtitle" :min-width="minWidth" :max-width="maxWidth">
+    <VForm @submit.prevent="emit('submit', otp)" :model-value="valid">
+      <VCardText>
+        <VOtpInput v-model="otp" label="OTP" persistent-placeholder autofocus :length="length" />
+        <div class="d-flex justify-center">
+          <VBtn
+            :disabled="!valid"
+            type="submit"
+            color="primary"
+            variant="flat"
+            :text="submitButtonText"
+            :loading="loading"
+          />
+        </div>
+      </VCardText>
+    </VForm>
+  </VCard>
+</template>

package/src/index.ts

@@ -0,0 +1,22 @@
+import AppBase from './components/AppBase.vue'
+import DashboardPage from './components/DashboardPage.vue'
+import FooterSection from './components/FooterSection.vue'
+import LoginForm from './components/LoginForm.vue'
+import NavDrawerLink from './components/NavDrawerLink.vue'
+import OTPForm from './components/OTPForm.vue'
+
+import useColorMode from './stores/colorMode'
+import useFooter from './stores/footer'
+import useNotify from './stores/notify'
+
+export {
+  AppBase,
+  DashboardPage,
+  FooterSection,
+  LoginForm,
+  NavDrawerLink,
+  OTPForm,
+  useColorMode,
+  useFooter,
+  useNotify,
+}

package/src/stores/colorMode.ts

@@ -0,0 +1,16 @@
+import { ref, watch } from 'vue'
+import { defineStore } from 'pinia'
+
+export default defineStore('colorMode', () => {
+  const mode = ref<'light' | 'dark'>(localStorage.getItem('colorMode') == 'dark' ? 'dark' : 'light')
+  function toggle() {
+    mode.value = mode.value === 'dark' ? 'light' : 'dark'
+  }
+  function update(newMode: 'light' | 'dark') {
+    localStorage.setItem('colorMode', newMode)
+    document.documentElement.setAttribute('data-theme', newMode)
+  }
+  watch(mode, (newMode) => update(newMode))
+  update(mode.value)
+  return { mode, toggle }
+})

package/src/stores/footer.ts

@@ -0,0 +1,41 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface FooterMessage {
+  id?: string
+  text: string
+  type?: 'info' | 'success' | 'warning' | 'error'
+  timeout?: number
+  actions?: {
+    [key: string]: () => void
+  }
+}
+
+export default defineStore('footer', () => {
+  const messages = ref<FooterMessage[]>([])
+  const current = computed(() => {
+    if (messages.value.length > 0) {
+      return messages.value[messages.value.length - 1]
+    }
+    return null
+  })
+  function addMessage(message: FooterMessage) {
+    if (!message.id) {
+      message.id = new Date().getTime().toString()
+    }
+    if (message.timeout === undefined) {
+      message.timeout = 5000
+    }
+    messages.value.push(message)
+    if (message.timeout) {
+      setTimeout(() => {
+        removeMessage(message.id!)
+      }, message.timeout)
+    }
+    return message.id!
+  }
+  function removeMessage(id: string) {
+    messages.value = messages.value.filter((message) => message.id !== id)
+  }
+  return { messages, current, addMessage, removeMessage }
+})

package/src/stores/notify.ts

@@ -0,0 +1,51 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export interface NotifyMessage {
+  id?: string
+  text: string
+  type?: 'info' | 'success' | 'warning' | 'error'
+  timeout?: number
+}
+
+export default defineStore('notify', () => {
+  const messages = ref<NotifyMessage[]>([])
+  const timeouts = ref<Record<string, number>>({})
+  function add(message: NotifyMessage) {
+    if (!message.id) {
+      message.id = new Date().getTime().toString()
+    } else {
+      remove(message.id)
+    }
+    if (message.timeout === undefined) {
+      message.timeout = 5000
+    }
+    messages.value.push(message)
+    if (message.timeout) {
+      timeouts.value[message.id] = setTimeout(() => {
+        remove(message.id!)
+      }, message.timeout)
+    }
+    return message.id!
+  }
+  function remove(id: string) {
+    messages.value = messages.value.filter((message) => message.id !== id)
+    if (timeouts.value[id]) {
+      clearTimeout(timeouts.value[id])
+      delete timeouts.value[id]
+    }
+  }
+  function info(text: string) {
+    return add({ text, type: 'info' })
+  }
+  function success(text: string) {
+    return add({ text, type: 'success' })
+  }
+  function warning(text: string) {
+    return add({ text, type: 'warning' })
+  }
+  function error(text: string) {
+    return add({ text, type: 'error' })
+  }
+  return { messages, add, remove, info, success, warning, error }
+})

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "outDir": "./dist",
+    "declaration": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig, type UserConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+
+const config: UserConfig = {
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'appsalutely',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['vue', 'vue-router', 'pinia', 'vuetify', 'vuetify/components'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          'vue-router': 'VueRouter',
+          pinia: 'Pinia',
+          vuetify: 'Vuetify',
+          'vuetify/components': 'VuetifyComponents',
+        },
+      },
+    },
+  },
+  plugins: [Vue()],
+}
+export default defineConfig(config)