tsv2-library 0.0.1

package/dist/types/columns.d.ts

@@ -0,0 +1,26 @@
+import { Component } from 'vue';
+export type TableColumn = {
+    header: string;
+    field: string;
+    style?: string;
+    sortable?: boolean;
+    bodyStyle?: (props: any) => string;
+    bodyTemplate?: (data: any) => string;
+    bodyComponent?: (data: any) => {
+        component: string | Component;
+        props?: any;
+        model?: any;
+        events?: any;
+        onChange?: any;
+        disabled?: boolean;
+    };
+    headerTemplate?: () => string;
+    headerComponent?: () => {
+        component: string | Component;
+        props?: any;
+        model?: any;
+        events?: any;
+        onChange?: any;
+        disabled?: boolean;
+    };
+};

package/dist/types/fieldValidation.type.d.ts

@@ -0,0 +1,8 @@
+import { FieldContext } from 'vee-validate';
+import { Ref } from 'vue';
+type FieldValue = string | string[] | number | number[] | boolean | undefined | null | object;
+export type FieldValidation = {
+    value?: FieldValue;
+    errorMessage?: Ref<string | undefined>;
+} | FieldContext;
+export {};

package/dist/types/options.d.ts

@@ -0,0 +1,9 @@
+export type MenuOption = {
+    label: string;
+    command: (data?: any) => any;
+    icon?: string;
+    items?: any[];
+    class?: string;
+    disabled?: boolean | any;
+    danger?: boolean;
+};

package/dist/types/table.type.d.ts

@@ -0,0 +1,28 @@
+import { Component } from 'vue';
+export type TableColumn = {
+    header: string;
+    field: string;
+    style?: string;
+    sortable?: boolean;
+    bodyStyle?: (props: any) => string;
+    bodyTemplate?: (data: any) => string | undefined;
+    bodyComponent?: (data: any) => {
+        component: string | Component;
+        props?: any;
+        model?: any;
+        events?: any;
+        onChange?: any;
+        disabled?: boolean;
+    };
+};
+export type TableOption = {
+    label?: string;
+    command?: (data?: any) => any;
+    icon?: string;
+    items?: any[];
+    class?: string;
+    disabled?: boolean | any;
+    separator?: boolean;
+    danger?: boolean;
+    visible?: boolean | any;
+};

package/dist/utils/date.util.d.ts

@@ -0,0 +1,4 @@
+declare const DateUtils: {
+    formatDate: (date: string, useTime?: boolean) => string;
+};
+export default DateUtils;

package/dist/utils/exportToExcel.util.d.ts

@@ -0,0 +1,7 @@
+interface IExcelOptions {
+    headers: string[];
+    data: object[];
+    filename: string;
+}
+declare const exportToExcel: (options: IExcelOptions) => Promise<void>;
+export default exportToExcel;

package/dist/utils/index.d.ts

@@ -0,0 +1,8 @@
+import { AxiosInstance } from 'axios';
+import { formatUserName, formatVowelSoundLabel } from './textFormater.util';
+import exportToExcel from './exportToExcel.util';
+declare const isObjectEmpty: (obj: object) => boolean;
+declare const addTokenExpirationHandling: (instance: AxiosInstance) => void;
+declare const filterSelectedTreeKeys: (keys: any) => number[];
+declare const getImgURL: (fileName: string) => string;
+export { isObjectEmpty, addTokenExpirationHandling, filterSelectedTreeKeys, getImgURL, formatUserName, formatVowelSoundLabel, exportToExcel, };

package/dist/utils/string.util.d.ts

@@ -0,0 +1,4 @@
+declare const StringUtils: {
+    formatUserName: (name: string) => string;
+};
+export default StringUtils;

package/dist/utils/textFormater.util.d.ts

@@ -0,0 +1,3 @@
+export declare const formatVowelSoundLabel: (label?: string) => string;
+export declare const formatUserName: (name: string) => string;
+export default formatUserName;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "tsv2-library",
+  "private": false,
+  "version": "0.0.1",
+  "author": "fixedassetv2-fe",
+  "license": "ISC",
+  "homepage": "https://github.com/fixedassetv2-fe/tsv2-library#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fixedassetv2-fe/tsv2-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fixedassetv2-fe/tsv2-library/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src/utils"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:dev": "vue-tsc && vite build --watch",
+    "build:pub": "npm run build && npm link && npm publish",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore",
+    "tailwind": "tailwind -i ./src/assets/css/main.css -o ./cypress/support/tailwind.css",
+    "cy:run-ct": "npm run tailwind && cypress run --component",
+    "cy:open-ct": "npm run tailwind && cypress open --component",
+    "cy:run-e2e": "npm run tailwind && cypress run",
+    "cy:open-e2e": "npm run tailwind && cypress open",
+    "cy:test-all": "npm run tailwind && start-server-and-test dev http://localhost:8080 cy:run-e2e && npm run cy:run-ct"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.7.2",
+    "axios": "^1.3.4",
+    "base64toblob": "^0.0.2",
+    "primeicons": "^6.0.1",
+    "primevue": "^3.48.0",
+    "rfs": "^10.0.0",
+    "sass": "^1.62.1",
+    "vee-validate": "^4.9.5",
+    "vue": "^3.4.15",
+    "vue-advanced-cropper": "^2.8.8",
+    "vue-router": "^4.1.6",
+    "vuex": "^4.0.2",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@cypress/code-coverage": "^3.12.19",
+    "@cypress/vue": "^6.0.0",
+    "@originjs/vite-plugin-federation": "^1.3.4",
+    "@tsconfig/node18": "^18.2.2",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^18.19.3",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "autoprefixer": "^10.4.17",
+    "concurrently": "^8.2.2",
+    "cypress": "^13.6.4",
+    "eslint": "^8.49.0",
+    "eslint-config-ts-code-standard": "^1.0.5",
+    "eslint-plugin-css": "^0.9.1",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.21.1",
+    "highlight.js": "^11.9.0",
+    "istanbul-lib-coverage": "^3.2.2",
+    "nyc": "^15.1.0",
+    "postcss": "^8.4.35",
+    "postcss-nested": "^6.0.1",
+    "prettier": "^3.0.3",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "start-server-and-test": "^2.0.3",
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.1.6",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.1",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vue-tsc": "^1.8.25",
+    "wait-on": "^7.2.0"
+  },
+  "description": "Global reusable components for micro frontend",
+  "main": "./dist/tsv2-library.umd.js",
+  "module": "./dist/tsv2-library.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/tsv2-library.es.js",
+      "require": "./dist/tsv2-library.umd.js"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
+    }
+  },
+  "types": "./dist/main.d.ts"
+}

package/src/utils/date.util.ts

@@ -0,0 +1,58 @@
+const formatDate = (date: string, useTime?: boolean) => {
+  let dateFormat: DateFormat, timeFormat, timeZone;
+  interface DateFormat {
+    locale: string;
+    year: string;
+    month: string;
+    day: string;
+    weekday?: string;
+  }
+  dateFormat = {
+    locale: 'en-gb',
+    year: '2-digit',
+    month: '2-digit',
+    day: '2-digit',
+  };
+
+  const userStr = localStorage.getItem('user');
+
+  if (userStr) {
+    const user = JSON.parse(userStr);
+
+    if (user.generalSetting.dateFormat) {
+      dateFormat = user.generalSetting.dateFormat;
+    }
+
+    if (user.generalSetting.timeFormat) {
+      timeFormat = user.generalSetting.timeFormat;
+    }
+
+    if (user.generalSetting.timezone) {
+      timeZone = user.generalSetting.timezone;
+    }
+  }
+
+  let options: any = {
+    year: dateFormat.year,
+    month: dateFormat.month,
+    day: dateFormat.day,
+    weekday: dateFormat.weekday,
+    hour12: timeFormat,
+    timeZone: timeZone,
+  };
+
+  if (useTime) {
+    options = {
+      ...options,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    };
+  }
+
+  return new Date(date).toLocaleString(dateFormat.locale, options);
+};
+
+const DateUtils = { formatDate };
+
+export default DateUtils;

package/src/utils/exportToExcel.util.ts

@@ -0,0 +1,32 @@
+import * as XLSX from 'xlsx';
+
+interface IExcelOptions {
+  headers: string[];
+  data: object[];
+  filename: string;
+}
+
+const exportToExcel = async (options: IExcelOptions): Promise<void> => {
+  const heading = [options.headers];
+  const workbook = XLSX.utils.book_new();
+  const workSheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet([]);
+  XLSX.utils.sheet_add_aoa(workSheet, heading);
+
+  XLSX.utils.sheet_add_json(workSheet, options.data, {
+    origin: 'A2',
+    skipHeader: true,
+  });
+
+  XLSX.utils.book_append_sheet(workbook, workSheet, 'Sheet1');
+  const timestamps = new Date()
+    .toLocaleDateString('en-gb', {
+      day: '2-digit',
+      month: '2-digit',
+      year: '2-digit',
+    })
+    .replaceAll('/', '');
+
+  XLSX.writeFile(workbook, `${options.filename}-${timestamps}.xlsx`);
+};
+
+export default exportToExcel;

package/src/utils/index.ts

@@ -0,0 +1,45 @@
+import { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
+import { formatUserName, formatVowelSoundLabel } from './textFormater.util';
+import exportToExcel from './exportToExcel.util';
+
+const isObjectEmpty = (obj: object) => {
+  if (!obj) return true;
+  const keys = Object.keys(obj);
+  return !keys.length;
+};
+
+const addTokenExpirationHandling = (instance: AxiosInstance) => {
+  instance.interceptors.response.use(
+    (response: AxiosResponse) => {
+      return response;
+    },
+    (error: AxiosError) => {
+      if (error.response?.status === 401) {
+        localStorage.removeItem('user');
+        window.location.reload();
+      }
+    },
+  );
+};
+
+const filterSelectedTreeKeys = (keys: any) => {
+  const formatted = Object.entries(keys);
+  const filtered = formatted
+    .filter((data: any) => data[1].checked && !data[1].partialChecked)
+    .map((data) => parseInt(data[0]));
+  return filtered;
+};
+
+const getImgURL = (fileName: string) => {
+  return `https://assets.tagsamurai.com/img/${fileName}`;
+};
+
+export {
+  isObjectEmpty,
+  addTokenExpirationHandling,
+  filterSelectedTreeKeys,
+  getImgURL,
+  formatUserName,
+  formatVowelSoundLabel,
+  exportToExcel,
+};

package/src/utils/string.util.ts

@@ -0,0 +1,23 @@
+const formatUserName = (name: string) => {
+  if (name.length > 8) {
+    const splitted = name.split(' ');
+    if (splitted.length > 1) {
+      let firstWord;
+      const lastWord = splitted[splitted.length - 1];
+      const firstToRestWord = splitted.slice(0, -1).join(' ');
+      if (firstToRestWord.length > 8) {
+        firstWord = `${firstToRestWord.slice(0, 8)}..`;
+      } else {
+        firstWord = firstToRestWord;
+      }
+      return `${firstWord} ${lastWord.slice(0, 1)}`;
+    }
+    const word = splitted[0];
+    return word.length > 8 ? `${word.slice(0, 8)}..` : word;
+  }
+  return name;
+};
+
+const StringUtils = { formatUserName };
+
+export default StringUtils;

package/src/utils/textFormater.util.ts

@@ -0,0 +1,46 @@
+export const formatVowelSoundLabel = (label?: string): string => {
+  if (!label) return '';
+
+  const vowelSound = ['a', 'e', 'i', 'o', 'h'];
+  const vocalSound = ['a', 'e', 'i', 'o', 'u'];
+  const word = label.toLowerCase();
+  const firstLetter = word[0];
+  const isStartWithVowel = vowelSound.includes(firstLetter);
+
+  if (firstLetter === 'h') {
+    const silent = ['hour', 'honest', 'heir', 'honor'];
+    const includeSilent = silent.some((phrase) => word.includes(phrase));
+
+    if (!vocalSound.includes(word.slice(2, 3)) && !includeSilent)
+      return `a ${label}`;
+    return `an ${label}`;
+  }
+
+  return isStartWithVowel ||
+    (firstLetter === 'u' && !vowelSound.includes(word.slice(2, 3)))
+    ? `an ${label}`
+    : `a ${label}`;
+};
+
+export const formatUserName = (name: string): string => {
+  if (name.length <= 8) return name;
+
+  const splitted = name.split(' ');
+
+  if (splitted.length === 1) {
+    return `${splitted[0].slice(0, 8)}..`;
+  }
+
+  const firstToRestWord = splitted.slice(0, -1).join(' ');
+
+  const firstWord =
+    firstToRestWord.length > 8
+      ? `${firstToRestWord.slice(0, 8)}..`
+      : firstToRestWord;
+
+  const lastWord = splitted[splitted.length - 1];
+
+  return `${firstWord} ${lastWord.slice(0, 1)}`;
+};
+
+export default formatUserName;