@winchsa/ui 0.1.0

package/dist/utils/toaster.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.responseAlert = responseAlert;
+exports.toaster = void 0;
+var _vueSonner = require("vue-sonner");
+var _vueI18n = require("vue-i18n");
+const toaster = () => {
+  const {
+    t
+  } = (0, _vueI18n.useI18n)();
+  const success = message => {
+    _vueSonner.toast.success(message ?? t("success"));
+  };
+  const error = message => {
+    _vueSonner.toast.error(message ?? t("error"));
+  };
+  const successLang = message => {
+    _vueSonner.toast.success(t(message));
+  };
+  const errorLang = message => {
+    _vueSonner.toast.error(t(message));
+  };
+  return {
+    success,
+    error,
+    successLang,
+    errorLang
+  };
+};
+exports.toaster = toaster;
+function responseAlert() {
+  const {
+    error: showError
+  } = toaster();
+  const getErrorMessage = response => {
+    const errorResponse = response?.response?._data;
+    const error = errorResponse?.status.errors_list?.find(e => e.field == "0");
+    const message = errorResponse?.status.message;
+    if (!error && !message) {
+      return null;
+    }
+    if (response?.data?.status.code === 422) {
+      return null;
+    }
+    return error ? error.message : message;
+  };
+  const showAlert = response => {
+    const message = getErrorMessage(response);
+    if (message) {
+      showError(message);
+    }
+  };
+  const showValidationAlert = response => {
+    const errorResponse = response?.response?._data;
+    if (response?.data?.status.code === 422) {
+      const validationErrors = errorResponse?.status.errors_list?.map(error => error.message).join(" ,");
+      if (validationErrors) {
+        showError(validationErrors);
+        return;
+      }
+    }
+    showAlert(response);
+  };
+  return {
+    showAlert,
+    showValidationAlert
+  };
+}

package/dist/utils/toaster.mjs

@@ -0,0 +1,59 @@
+import { toast as sonnerToast } from "vue-sonner";
+import { useI18n } from "vue-i18n";
+export const toaster = () => {
+  const { t } = useI18n();
+  const success = (message) => {
+    sonnerToast.success(message ?? t("success"));
+  };
+  const error = (message) => {
+    sonnerToast.error(message ?? t("error"));
+  };
+  const successLang = (message) => {
+    sonnerToast.success(t(message));
+  };
+  const errorLang = (message) => {
+    sonnerToast.error(t(message));
+  };
+  return {
+    success,
+    error,
+    successLang,
+    errorLang
+  };
+};
+export function responseAlert() {
+  const { error: showError } = toaster();
+  const getErrorMessage = (response) => {
+    const errorResponse = response?.response?._data;
+    const error = errorResponse?.status.errors_list?.find((e) => e.field == "0");
+    const message = errorResponse?.status.message;
+    if (!error && !message) {
+      return null;
+    }
+    if (response?.data?.status.code === 422) {
+      return null;
+    }
+    return error ? error.message : message;
+  };
+  const showAlert = (response) => {
+    const message = getErrorMessage(response);
+    if (message) {
+      showError(message);
+    }
+  };
+  const showValidationAlert = (response) => {
+    const errorResponse = response?.response?._data;
+    if (response?.data?.status.code === 422) {
+      const validationErrors = errorResponse?.status.errors_list?.map((error) => error.message).join(" ,");
+      if (validationErrors) {
+        showError(validationErrors);
+        return;
+      }
+    }
+    showAlert(response);
+  };
+  return {
+    showAlert,
+    showValidationAlert
+  };
+}

package/dist/utils/utils.d.ts

@@ -0,0 +1,8 @@
+export declare const generateRandomId: (length: number) => string;
+export declare const generateUniqueId: () => string;
+export declare const isEmpty: (value: unknown) => boolean;
+export declare const isNullOrUndefined: (value: unknown) => value is undefined | null;
+export declare const isEmptyArray: (arr: unknown) => boolean;
+export declare const buildFormData: <T>(data: T | T[], excludedKeys?: string[], formData?: FormData, parentKey?: string) => FormData;
+export declare const stripLeadingZero: (mobile: string) => string;
+export declare const cloneObjectDeep: <T>(obj: T) => T;

package/dist/utils/utils.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stripLeadingZero = exports.isNullOrUndefined = exports.isEmptyArray = exports.isEmpty = exports.generateUniqueId = exports.generateRandomId = exports.cloneObjectDeep = exports.buildFormData = void 0;
+const generateRandomId = length => {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+};
+exports.generateRandomId = generateRandomId;
+const generateUniqueId = () => {
+  const timestamp = (/* @__PURE__ */new Date()).getTime().toString(36);
+  const randomPart = generateRandomId(6);
+  return `${timestamp}-${randomPart}`;
+};
+exports.generateUniqueId = generateUniqueId;
+const isEmpty = value => {
+  if (value === null || value === void 0 || value === "") {
+    return true;
+  }
+  return !!(Array.isArray(value) && value.length === 0);
+};
+exports.isEmpty = isEmpty;
+const isNullOrUndefined = value => {
+  return value === null || value === void 0;
+};
+exports.isNullOrUndefined = isNullOrUndefined;
+const isEmptyArray = arr => {
+  return Array.isArray(arr) && arr.length === 0;
+};
+exports.isEmptyArray = isEmptyArray;
+const buildFormData = (data, excludedKeys = [], formData = new FormData(), parentKey = "") => {
+  if (Array.isArray(data)) {
+    data.forEach((item, index) => {
+      buildFormData(item, excludedKeys, formData, `${parentKey}[${index}]`);
+    });
+    return formData;
+  }
+  if (data && typeof data === "object" && !(data instanceof File)) {
+    Object.keys(data).forEach(key => {
+      if (excludedKeys.includes(key)) return;
+      const value = data[key];
+      const newKey = parentKey ? `${parentKey}[${key}]` : key;
+      buildFormData(value, excludedKeys, formData, newKey);
+    });
+    return formData;
+  }
+  if (data instanceof File) {
+    formData.append(parentKey, data);
+  } else if (typeof data === "boolean") {
+    formData.append(parentKey, data ? "1" : "0");
+  } else if (data != null) {
+    formData.append(parentKey, data.toString());
+  }
+  return formData;
+};
+exports.buildFormData = buildFormData;
+const stripLeadingZero = mobile => {
+  return mobile.replace(/^0+/, "");
+};
+exports.stripLeadingZero = stripLeadingZero;
+const cloneObjectDeep = obj => {
+  return JSON.parse(JSON.stringify(obj));
+};
+exports.cloneObjectDeep = cloneObjectDeep;

package/dist/utils/utils.mjs

@@ -0,0 +1,56 @@
+export const generateRandomId = (length) => {
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+};
+export const generateUniqueId = () => {
+  const timestamp = (/* @__PURE__ */ new Date()).getTime().toString(36);
+  const randomPart = generateRandomId(6);
+  return `${timestamp}-${randomPart}`;
+};
+export const isEmpty = (value) => {
+  if (value === null || value === void 0 || value === "") {
+    return true;
+  }
+  return !!(Array.isArray(value) && value.length === 0);
+};
+export const isNullOrUndefined = (value) => {
+  return value === null || value === void 0;
+};
+export const isEmptyArray = (arr) => {
+  return Array.isArray(arr) && arr.length === 0;
+};
+export const buildFormData = (data, excludedKeys = [], formData = new FormData(), parentKey = "") => {
+  if (Array.isArray(data)) {
+    data.forEach((item, index) => {
+      buildFormData(item, excludedKeys, formData, `${parentKey}[${index}]`);
+    });
+    return formData;
+  }
+  if (data && typeof data === "object" && !(data instanceof File)) {
+    Object.keys(data).forEach((key) => {
+      if (excludedKeys.includes(key)) return;
+      const value = data[key];
+      const newKey = parentKey ? `${parentKey}[${key}]` : key;
+      buildFormData(value, excludedKeys, formData, newKey);
+    });
+    return formData;
+  }
+  if (data instanceof File) {
+    formData.append(parentKey, data);
+  } else if (typeof data === "boolean") {
+    formData.append(parentKey, data ? "1" : "0");
+  } else if (data != null) {
+    formData.append(parentKey, data.toString());
+  }
+  return formData;
+};
+export const stripLeadingZero = (mobile) => {
+  return mobile.replace(/^0+/, "");
+};
+export const cloneObjectDeep = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@winchsa/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist/*",
+    "src/styles/*"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./utils": {
+      "require": "./dist/utils/index.js",
+      "import": "./dist/utils/index.mjs",
+      "types": "./dist/utils/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "peerDependencies": {
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@tanstack/vue-query": "^5.74.5",
+    "@vuepic/vue-datepicker": "^11.0.0",
+    "@vueuse/core": "11.3.0",
+    "@vueuse/router": "^13.1.0",
+    "ofetch": "^1.4.1",
+    "vue": "^3.5.13",
+    "vue-i18n": "9.14.4",
+    "vue-multiselect": "^3.1.0",
+    "vue-router": "4.4.5",
+    "vue3-perfect-scrollbar": "2.0.0",
+    "vuetify": "3.3.12"
+  },
+  "dependencies": {
+    "moment-hijri": "^3.0.0",
+    "cropperjs": "^1.6.2",
+    "vue-sonner": "^1.3.0",
+    "print-js": "^1.6.0",
+    "v-calendar": "^3.1.2"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.73.3",
+    "@types/node": "20.17.27",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "eslint": "^8.57.1",
+    "eslint-import-resolver-typescript": "^4.3.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "typescript": "5.5.4",
+    "unbuild": "^3.0.0",
+    "vite": "^4.5.14",
+    "sass": "1.86.0",
+    "vite-plugin-vuetify": "1.0.2",
+    "vue-sfc-transformer": "^0.1.16",
+    "vue-tsc": "2.2.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "unbuild",
+    "test": "vitest --run",
+    "lint": "eslint \"**/*.{ts,vue,mjs,json}\"",
+    "lint:fix": "eslint \"**/*.{ts,vue,mjs,json}\" --fix",
+    "version:patch": "pnpm version patch --no-git-tag-version",
+    "version:minor": "pnpm version minor --no-git-tag-version",
+    "version:major": "pnpm version major --no-git-tag-version",
+    "publish:patch": "pnpm run version:patch && git add package.json && git commit -m \"chore: bump version\" && git push origin main",
+    "publish:minor": "pnpm run version:minor && git add package.json && git commit -m \"chore: bump version\" && git push origin main",
+    "publish:major": "pnpm run version:major && git add package.json && git commit -m \"chore: bump version\" && git push origin main",
+    "release": "pnpm run build && pnpm publish",
+    "release:dry-run": "pnpm run build && pnpm publish --dry-run"
+  }
+}

package/src/styles/@core/scss/base/_components.scss

@@ -0,0 +1,164 @@
+@use 'mixins';
+@use '../../../@layouts/styles/placeholders';
+@use '../../../assets/scss/variables/template' as variables;
+
+//  Avatar group
+.v-avatar-group {
+  display: flex;
+  align-items: center;
+
+  > * {
+    &:not(:first-child) {
+      margin-inline-start: -0.8rem;
+    }
+
+    transition: transform 0.25s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      z-index: 2;
+      transform: translateY(-5px) scale(1.05);
+
+      @include mixins.elevation(3);
+    }
+  }
+
+  > .v-avatar {
+    border: 2px solid rgb(var(--v-theme-surface));
+    transition: transform 0.15s ease;
+  }
+}
+
+//  Button outline with default color border color
+.v-alert--variant-outlined,
+.v-avatar--variant-outlined,
+.v-btn.v-btn--variant-outlined,
+.v-card--variant-outlined,
+.v-chip--variant-outlined,
+.v-list-item--variant-outlined {
+  &:not([class*='text-']) {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+
+  &.text-default {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  }
+}
+
+//  Custom Input
+.v-label.custom-input {
+  padding: 1rem;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  opacity: 1;
+  white-space: normal;
+  height: auto;
+
+  &:hover {
+    border-color: rgba(var(--v-border-color), 0.25);
+  }
+
+  &.active {
+    border-color: rgb(var(--v-theme-primary));
+
+    .v-icon {
+      color: rgb(var(--v-theme-primary)) !important;
+    }
+  }
+}
+
+// Dialog responsive width
+.v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    position: absolute;
+    z-index: 1;
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
+    inset-block-start: 0.9375rem;
+    inset-inline-end: 0.9375rem;
+
+    .v-btn__overlay {
+      display: none;
+    }
+  }
+
+  .v-card {
+    @extend %style-scroll-bar;
+  }
+}
+
+@media (min-width: 600px) {
+  .v-dialog {
+    &.v-dialog-sm,
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 565px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 960px) {
+  .v-dialog {
+    &.v-dialog-lg,
+    &.v-dialog-xl {
+      .v-overlay__content {
+        inline-size: 865px !important;
+      }
+    }
+  }
+}
+
+@media (min-width: 1264px) {
+  .v-dialog.v-dialog-xl {
+    .v-overlay__content {
+      inline-size: 1165px !important;
+    }
+  }
+}
+
+// v-tab with pill support
+
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 6px !important;
+    transition: none;
+
+    &:not(.v-tab--selected):hover {
+      background-color: rgb(var(--v-theme-gray-200));
+    }
+
+    .v-tab__slider {
+      visibility: hidden;
+    }
+  }
+}
+
+// loop for all colors bg
+@each $color-name in variables.$theme-colors-name {
+  .v-tabs.v-tabs-pill {
+    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
+      background-color: rgb(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-#{$color-name})) !important;
+    }
+
+    &:not(.v-tab--selected) {
+      button {
+        background-color: rgb(var(--v-theme-#{gray-100}));
+        color: rgb(var(--v-theme-on-#{gray-100})) !important;
+      }
+    }
+  }
+}
+
+.v-tabs.v-tabs-pill .v-slide-group-item--active.v-tab--selected.text-primary {
+  color: rgb(var(--v-theme-button-on-primary)) !important;
+}
+
+// ℹ️ We are make even width of all v-timeline body
+.v-timeline--vertical.v-timeline {
+  .v-timeline-item {
+    .v-timeline-item__body {
+      justify-self: stretch !important;
+    }
+  }
+}

package/src/styles/@core/scss/base/_dark.scss

@@ -0,0 +1,16 @@
+@use '../../../assets/scss/variables/template' as variables;
+
+// ————————————————————————————————————
+// * ——— Perfect Scrollbar
+// ————————————————————————————————————
+
+.v-application.v-theme--dark {
+  .ps__rail-y,
+  .ps__rail-x {
+    background-color: transparent !important;
+  }
+
+  .ps__thumb-y {
+    background-color: variables.$plugin-ps-thumb-y-dark;
+  }
+}

package/src/styles/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,106 @@
+@use '../../../assets/scss/variables/template' as variables;
+@use 'placeholders' as *;
+@use '../template/placeholders' as *;
+@use 'misc';
+@use 'mixins';
+
+$header: '.layout-navbar';
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: '.layout-navbar .navbar-content-container';
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  //  Elevated navbar
+  @if variables.$vertical-nav-navbar-style == 'elevated' {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0
+          0
+          variables.$default-layout-with-vertical-nav-navbar-footer-roundness
+          variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*='--v-body-scroll-y:0px;']) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  //  Floating navbar
+  @else if variables.$vertical-nav-navbar-style == 'floating' {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  //  Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness
+        variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/@core/scss/base/_default-layout.scss

@@ -0,0 +1,16 @@
+@use 'placeholders';
+@use 'variables';
+
+.layout-vertical-nav,
+.layout-horizontal-nav {
+  ol,
+  ul {
+    list-style: none;
+  }
+}
+
+.layout-navbar {
+  @if variables.$navbar-high-emphasis-text {
+    @extend %layout-navbar;
+  }
+}

package/src/styles/@core/scss/base/_index.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+
+// Layout
+@use 'vertical-nav';
+@use 'default-layout';
+@use 'default-layout-w-vertical-nav';
+
+// Layouts package
+@use 'layouts';
+
+// Skins
+@use 'skins';
+
+// Components
+@use 'components';
+
+// Utilities
+@use 'utilities';
+
+// Route Transitions
+@use 'route-transitions';
+
+// Misc
+@use 'misc';
+
+// Dark
+@use 'dark';
+
+// libs
+@use 'libs/perfect-scrollbar';
+
+a {
+  color: rgb(var(--v-theme-blue));
+  text-decoration: none;
+  cursor: pointer;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}