@goweekdays/layer-common 0.0.1

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.github/workflows/main.yml

@@ -0,0 +1,17 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile && yarn dev:prepare
+      - run: yarn build

package/.github/workflows/publish.yml

@@ -0,0 +1,39 @@
+name: Publish
+on:
+  workflow_run:
+    workflows: [CI]
+    branches: [main]
+    types: [completed]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  publish:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: "yarn" # Use yarn for caching
+          cache-dependency-path: yarn.lock # Cache Yarn lockfile
+
+      - run: yarn install --immutable # Install dependencies with immutable lockfile
+
+      - name: Create .npmrc for publishing
+        run: |
+          echo '//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}' > ~/.npmrc
+
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: yarn release # Use yarn for publishing
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.playground/app.vue

@@ -0,0 +1,37 @@
+<template>
+  <v-app>
+    <LayoutHeader />
+
+    <LayoutNavigationDrawer :navigationItems="navigationItems">
+    </LayoutNavigationDrawer>
+
+    <v-main>
+      <slot />
+    </v-main>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+const navigationItems = computed(() => {
+  const items: Array<TNavigationItem> = [];
+  items.push(
+    {
+      title: "Create new request",
+      route: { name: "index" },
+      icon: "mdi-plus",
+    },
+    {
+      title: "Requests",
+      route: { name: "index" },
+      icon: "mdi-account-circle",
+    },
+    {
+      title: "Draft",
+      route: { name: "index" },
+      icon: "mdi-account-circle",
+    }
+  );
+
+  return items;
+});
+</script>

package/.playground/nuxt.config.ts

@@ -0,0 +1,21 @@
+export default defineNuxtConfig({
+  extends: [".."],
+  modules: ["@nuxt/eslint"],
+  compatibilityDate: "2024-11-03",
+
+  runtimeConfig: {
+    public: {
+      cookieConfig: {
+        domain: (process.env.DOMAIN as string) ?? "localhost",
+        secure: true,
+        maxAge: 30 * 24 * 60 * 60,
+      },
+      APP_NAME: (process.env.APP_NAME as string) ?? "App",
+      APP_NAME_ROUTE: (process.env.APP_NAME_ROUTE as string) ?? "index",
+      APP_ACCOUNT: (process.env.APP_ACCOUNT as string) ?? "",
+      S3_BUCKET_ENDPOINT: (process.env.S3_BUCKET_ENDPOINT as string) ?? "",
+      APP_ADMIN: (process.env.APP_ADMIN as string) ?? "",
+      APP_CBA_RECAP: (process.env.APP_CBA_RECAP as string) ?? "",
+    },
+  },
+});

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @goweekdays/layer-common
+
+## 0.0.1
+
+### Patch Changes
+
+- 940da0b: Init

package/README.md

@@ -0,0 +1,73 @@
+# Nuxt Layer Starter
+
+Create Nuxt extendable layer with this GitHub template.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your layer
+
+Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+The `.playground` directory should help you on trying your layer during development.
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+
+## Distributing your layer
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-layer
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-layer'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.vue

@@ -0,0 +1,3 @@
+<template>
+  <h1>Common</h1>
+</template>

package/components/BtnUploadFile.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-input
+    :label="label"
+    :error="!!errorMessage"
+    :error-messages="errorMessage"
+    :hide-details="readOnly ?? !!value"
+    class="btn-input-file"
+  >
+    <template #default>
+      <v-row no-gutters>
+        <v-col cols="12" v-if="value || readOnly">
+          <v-row no-gutters>
+            <v-card
+              variant="outlined"
+              border="thin"
+              class="px-4 text-caption font-weight-medium"
+              :rounded="readOnly ? '' : '0 s'"
+              @click="emit('click:view')"
+              height="36"
+            >
+              <v-row no-gutters class="fill-height" align="center">
+                {{ value ? "View attachment" : "No file attached" }}
+              </v-row>
+            </v-card>
+            <v-card
+              v-if="!readOnly"
+              variant="outlined"
+              border="s-0 thin"
+              rounded="0 e"
+              class="px-4 d-inline"
+              @click="emit('click:close')"
+              height="36"
+            >
+              <v-row no-gutters class="fill-height" align="center">
+                <v-icon size="small"> mdi-close </v-icon>
+              </v-row>
+            </v-card>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12" v-else>
+          <v-btn
+            variant="outlined"
+            border="thin"
+            class="text-none"
+            :prepend-icon="value ? '' : 'mdi-tray-arrow-up'"
+            @click="selectAttachment"
+            :disabled="loading"
+            :loading="loading"
+          >
+            Add file
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-file-input
+        v-show="false"
+        v-model="attachment"
+        multiple
+        accept="image/*"
+        :class="`attachment-input-${inputClass}`"
+        @change="uploadAttachment"
+        :name="name + 'custom-input-file'"
+      ></v-file-input>
+    </template>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const value = defineModel<string>({ required: true, default: "" });
+const attachment = ref<File | null>(null);
+const loading = ref(false);
+
+const emit = defineEmits(["click:view", "click:close", "upload"]);
+
+const { addFile } = useFile();
+const inputClass = Date.now().toString();
+
+function selectAttachment() {
+  const input = document.querySelector(
+    `.attachment-input-${inputClass} input`
+  ) as HTMLInputElement;
+  input.click();
+}
+
+async function uploadAttachment(e: Event) {
+  loading.value = true;
+  const files = (e.target as HTMLInputElement).files;
+
+  if (files && files.length > 0) {
+    const file = files[0];
+
+    try {
+      const res = await addFile(file);
+      value.value = res.id as string;
+      await emit("upload", res);
+    } catch (error) {
+      console.log(error);
+    }
+  } else {
+    console.log("No file selected");
+  }
+  loading.value = false;
+}
+
+// Other props (optional)
+const { label, rules, name, readOnly } = defineProps({
+  label: {
+    type: String,
+    default: "Rating",
+  },
+  // Array of validation functions: (number) => true | string
+  rules: {
+    type: Array<Function>,
+    default: () => [],
+  },
+  name: {
+    type: String,
+    required: true,
+    default: "button-upload-file",
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Compute the first failed validation rule, if any.
+ * Each rule returns true (if valid) or a string (if invalid).
+ */
+const errorMessage = computed(() => {
+  for (const rule of rules) {
+    const result = rule(attachment.value || value.value);
+    return typeof result === "string" ? result : null;
+  }
+  return null;
+});
+</script>

package/components/Input/Date.vue

@@ -0,0 +1,177 @@
+<template>
+  <v-input
+    :error="!!validationErrMsg"
+    :error-messages="validationErrMsg"
+    hide-details="auto"
+    :name="name + 'custom-input-date'"
+    :disabled="props.disabled"
+  >
+    <template #default>
+      <v-row>
+        <v-col cols="12" lg="6" md="6">
+          <v-select
+            v-model="month"
+            :items="props.months"
+            label="Month"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-month'"
+            hide-details
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="3" md="3">
+          <v-text-field
+            v-model.number="day"
+            type="number"
+            label="Day"
+            hide-details
+            placeholder="DD"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-day'"
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+
+        <v-col cols="12" lg="3" md="3">
+          <v-text-field
+            v-model.number="year"
+            type="number"
+            label="Year"
+            hide-details
+            placeholder="YYYY"
+            density="comfortable"
+            :name="props.name + 'custom-input-date-year'"
+            :error="!!validationErrMsg"
+            :disabled="props.disabled"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const month = defineModel("month", { default: "" });
+const day = defineModel("day", { default: 0 });
+const year = defineModel("year", { default: 0 });
+
+const props = defineProps({
+  months: {
+    type: Array,
+    default: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ],
+  },
+  name: {
+    type: String,
+    default: "input-date-combo",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isLeapYear = (year: number): boolean =>
+  (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+
+const monthMap: Record<string, number> = {
+  January: 1,
+  February: 2,
+  March: 3,
+  April: 4,
+  May: 5,
+  June: 6,
+  July: 7,
+  August: 8,
+  September: 9,
+  October: 10,
+  November: 11,
+  December: 12,
+};
+
+const validateBirthDate = (): string => {
+  const _month = monthMap[month.value];
+  const _day = day.value;
+  const _year = year.value;
+
+  const errorMessage = "Enter a valid date";
+
+  if (
+    !_month ||
+    !_day ||
+    !_year ||
+    _year < 1904 ||
+    _year > new Date().getFullYear()
+  ) {
+    return errorMessage;
+  }
+
+  const daysInMonth = [
+    31,
+    isLeapYear(_year) ? 29 : 28,
+    31,
+    30,
+    31,
+    30,
+    31,
+    31,
+    30,
+    31,
+    30,
+    31,
+  ];
+
+  if (_day < 1 || _day > daysInMonth[_month - 1]) {
+    return errorMessage;
+  }
+
+  if (!_month || !_day || !_year) {
+    return errorMessage;
+  }
+
+  return "";
+};
+
+const validationErrMsg = ref("");
+
+const date = computed(() => {
+  return {
+    day: day.value,
+    month: month.value,
+    year: year.value,
+  };
+});
+
+validationErrMsg.value = validateBirthDate();
+
+const disabled = computed(() => props.disabled);
+
+watch(disabled, (curr) => {
+  if (curr) {
+    validationErrMsg.value = validateBirthDate();
+  }
+});
+
+watch(
+  date,
+  () => {
+    validationErrMsg.value = validateBirthDate();
+  },
+  { deep: true }
+);
+</script>

package/components/Input/Number.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { ref, computed, nextTick, useAttrs } from "vue";
+
+const modelValue = defineModel<number>(); // Store actual number
+const inputRef = ref<HTMLInputElement | null>(null); // Reference input field
+const attrs = useAttrs(); // Get all passed attributes (rules, required, etc.)
+
+let cursorPosition = 0; // Track cursor position
+let forceCursorToEnd = false; // Track if cursor should be forced to end
+
+// Computed property to format value with commas
+const formattedValue = computed({
+  get: () =>
+    modelValue.value !== undefined ? modelValue.value.toLocaleString() : "",
+  set: (val: string) => {
+    const rawValue = val.replace(/\D/g, ""); // Remove non-numeric characters
+    const numericValue = rawValue ? Number(rawValue) : 0;
+
+    if (!isNaN(numericValue)) {
+      modelValue.value = numericValue;
+      nextTick(() => restoreCursor());
+    }
+  },
+});
+
+// Handle keydown for navigation & number changes
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!inputRef.value || modelValue.value === undefined) return;
+
+  const { selectionStart, selectionEnd, value } = inputRef.value;
+  const isAllSelected = selectionStart === 0 && selectionEnd === value.length;
+
+  // Allow only numbers (prevent non-numeric input)
+  if (
+    !/^\d$/.test(event.key) &&
+    ![
+      "Backspace",
+      "Delete",
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+    ].includes(event.key)
+  ) {
+    event.preventDefault();
+    return;
+  }
+
+  // If all text is selected and a number is pressed, replace entire value
+  if (isAllSelected && /^\d$/.test(event.key)) {
+    event.preventDefault();
+    modelValue.value = Number(event.key);
+    forceCursorToEnd = true;
+    nextTick(() => restoreCursor());
+    return;
+  }
+
+  // Allow cursor movement with ArrowLeft & ArrowRight
+  if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+    forceCursorToEnd = false;
+    return;
+  }
+
+  // Force cursor to end when incrementing/decrementing
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    modelValue.value += 1;
+    forceCursorToEnd = true;
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    modelValue.value = Math.max(0, modelValue.value - 1);
+    forceCursorToEnd = true;
+  } else {
+    cursorPosition = selectionStart || 0; // Store cursor position before input
+  }
+
+  nextTick(() => restoreCursor());
+};
+
+// Restore cursor position correctly
+const restoreCursor = () => {
+  if (!inputRef.value) return;
+  const length = formattedValue.value.length;
+
+  if (forceCursorToEnd) {
+    inputRef.value.setSelectionRange(length, length); // Keep cursor at end
+  } else {
+    inputRef.value.setSelectionRange(cursorPosition, cursorPosition); // Keep normal position
+  }
+};
+</script>
+
+<template>
+  <v-text-field
+    ref="inputRef"
+    v-model="formattedValue"
+    v-bind="attrs"
+    type="text"
+    placeholder="Enter a number"
+    @keydown="handleKeyDown"
+  ></v-text-field>
+</template>

package/components/Input/Password.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-text-field
+    id="_password"
+    :model-value="modelValue"
+    :type="showPassword ? 'text' : 'password'"
+    :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
+    @click:append-inner="togglePasswordVisibility"
+    @update:model-value="updatePassword"
+    v-bind="$attrs"
+    autocomplete="off"
+  />
+</template>
+
+<script setup lang="ts">
+// Define the props for the v-model
+defineProps({
+  modelValue: {
+    type: String,
+  },
+});
+
+// Define emit for updating v-model
+const emit = defineEmits(["update:modelValue"]);
+
+// Control password visibility
+const showPassword = ref(false);
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value;
+};
+
+// Handle input update and emit to parent
+const updatePassword = (value: string) => {
+  emit("update:modelValue", value);
+};
+</script>