@winchsa/ui 0.1.0

package/dist/styles/assets/scss/styles.scss

@@ -0,0 +1,246 @@
+$font-family-custom: 'Saudi Riyal Symbol', 'Noto Sans English', 'Noto Sans Arabic', 'SA', --apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
+
+@use 'vuetify/styles' as * with ($body-font-family: $font-family-custom);
+
+@font-face {
+  font-family: 'Noto Sans English';
+  src: url('../../../fonts/NotoSans-Medium.ttf') format('woff2');
+  font-display: swap;
+  font-weight: normal;
+  letter-spacing: 0 !important;
+  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF;
+}
+
+@font-face {
+  font-family: 'Noto Sans Arabic';
+  src: url('../../../fonts/NotoSansArabic-Medium.ttf') format('woff2');
+  font-display: swap;
+  font-weight: normal;
+  unicode-range: U+0600-06FF;
+}
+
+@font-face {
+  font-family: 'Saudi Riyal Symbol';
+  src: url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.eot');
+  src: url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.eot') format('embedded-opentype'),
+    url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.woff') format('woff'),
+    url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.ttf') format('truetype'),
+    url('../../../fonts/saudi_riyal_symbol/saudi_riyal_symbol.svg') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.v-application {
+
+  &,
+  * {
+    [dir='ltr'] & {
+      font-family: 'Saudi Riyal Symbol', 'Noto Sans English', 'Noto Sans Arabic', sans-serif;
+    }
+
+    [dir='rtl'] & {
+      font-family: 'Saudi Riyal Symbol', 'Noto Sans Arabic', 'Noto Sans English', sans-serif;
+    }
+  }
+
+  .v-slide-group__next,
+  .v-tab-login .v-slide-group__prev {
+    display: none;
+  }
+
+  .v-tabs--grow .v-btn {
+    flex: 1 1 0 !important;
+    padding: 10px 0;
+    height: auto;
+  }
+
+  .app-text-field {
+    input {
+      font-size: 13px;
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      margin: 0;
+    }
+
+    .v-field--active.v-field--focused {
+      box-shadow: none !important;
+    }
+  }
+
+  .v-overlay__content {
+
+    .v-list-item:not(.v-list-item--active):hover,
+    .v-list-item:not(.v-list-item--active):focus-visible {
+      color: #000;
+      background-color: rgba(255, 194, 15, 1);
+    }
+
+    .v-list-item--variant-text .v-list-item__overlay {
+      background-color: rgba(255, 194, 15, 1);
+    }
+  }
+
+  .v-input--disabled {
+    .v-field {
+      pointer-events: none;
+      background: rgb(var(--v-disabled-background)) !important;
+      border: none !important;
+
+      &--disabled {
+        opacity: 1 !important;
+      }
+    }
+
+    .v-field__outline {
+      color: rgb(var(--v-disabled-border)) !important;
+    }
+  }
+}
+
+.v-field--active.v-field--focused {
+  box-shadow: none !important;
+}
+
+.v-breadcrumbs,
+.v-card-title {
+  font-weight: 600 !important;
+}
+
+.v-label,
+.nav-item-title,
+.v-input__details,
+.v-list-item-title,
+.v-list-item__content,
+.v-list-item-title,
+.v-card-item__content,
+.v-card-title,
+.v-card-text {
+  overflow: initial !important;
+}
+
+.v-window {
+  padding: 12px 0;
+}
+
+.text-pre-line {
+  white-space: pre-line !important;
+}
+
+.v-input__prepend,
+.v-input__append {
+  padding-top: 0 !important;
+}
+
+.hover-underline,
+%hover-underline {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    inset-inline-start: 0;
+    width: 0;
+    height: 2px;
+    background-color: rgba(var(--v-theme-primary));
+    transition: width 0.3s ease;
+  }
+
+  &:hover {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+.outline-none {
+  outline: none !important;
+}
+
+.v-breadcrumbs-item--link {
+  text-decoration: none !important;
+  @extend %hover-underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.back-btn {
+  position: absolute;
+  top: 50%;
+  inset-inline-start: 0;
+  transform: translateY(-50%);
+  background: rgb(var(--v-theme-gray-200)) !important;
+
+  &:hover {
+    background: rgb(var(--v-theme-secondary)) !important;
+    color: rgb(var(--v-theme-on-secondary)) !important;
+  }
+
+  .v-btn__overlay {
+    display: none !important;
+  }
+
+  &:active {
+    transform: translateY(-50%) !important;
+  }
+}
+
+.v-chip {
+  min-width: 96px !important;
+  text-align: center;
+  justify-content: center;
+  letter-spacing: 0 !important;
+}
+
+.v-autocomplete__selection {
+  .v-chip {
+    max-width: 100% !important;
+  }
+}
+
+.v-input__control {
+  .v-field {
+    position: relative !important;
+
+    .v-field__clearable {
+      position: absolute !important;
+      inset-inline-start: -20px !important;
+      z-index: 999 !important;
+      width: 20px !important;
+      background-color: rgb(var(--v-theme-surface));
+      top: 50% !important;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+.v-input--disabled {
+  .v-field {
+    .v-field__clearable {
+      background-color: rgb(var(--v-disabled-background));
+    }
+  }
+}
+
+.v-input--disabled .v-input__control .v-field__field {
+  border: none !important;
+}
+
+.v-input--disabled .v-field .v-field__overlay {
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+}
+
+.v-breadcrumbs-item {
+  padding: 0px !important;
+}
+
+.multiselect__tags {
+  padding-top: 10px !important;
+  padding-inline-start: 8px !important;
+  padding-bottom: 0 !important;
+  padding-inline-end: 40px !important;
+}

package/dist/styles/assets/scss/variables/_template.scss

@@ -0,0 +1 @@
+@forward '../../../@core/scss/template/variables';

package/dist/styles/assets/scss/variables/_vuetify.scss

@@ -0,0 +1 @@
+@forward '../../../@core/scss/template/libs/vuetify/variables';

package/dist/types.d.ts

@@ -0,0 +1,226 @@
+import type { Ref } from 'vue'
+
+export type SortItem = { key: string; order?: boolean | 'asc' | 'desc' }
+
+export type ReplaceableItem = Record<string, string | number | null> |
+Array<ReplaceableItem> |
+string |
+number |
+null
+
+export type ItemData = Record<string, string | number | null>
+export type Params = Record<string, string | number | null | undefined | string[] | Date[] | number[] | (string | number)[] | boolean>
+
+export type ApiResponse<T> = {
+	data: T
+	status: {
+		success: boolean
+		code: number
+		message: string
+		error_key: string
+		errors_list?: ErrorResponseFiled[]
+	}
+	totals?: { [key: string]: number }
+	pagination: Pagination
+}
+
+export type ErrorResponse<T = null> = {
+	data: T
+	status: {
+		success: boolean
+		code: number
+		message: string
+		error_key: string
+		errors_list?: ErrorResponseFiled[]
+	}
+}
+
+export type ErrorResponseFiled = {
+	field: string
+	message: string
+}
+
+export type Breadcrumb = {
+	title: string
+	params?: Record<string, string>
+	to?: string
+	disabled?: boolean
+	hasLang?: boolean
+	onClick?: () => void
+}
+
+export type Header = {
+	key: string
+	title: string
+	sortable?: boolean
+	width?: string
+	maxWidth?: string
+}
+
+export type FormFilterType = 'text' | 'range' | 'radio' | 'select' | 'datepicker' | 'datepickerRange' | 'autocomplete' | 'autocompleteGroups' | 'mobile' | 'bankSelect' | 'licensePlate'
+
+export type FormFilter = {
+	name: string
+	keys?: string[]
+	label: string
+	placeholder?: string
+	type?: FormFilterType
+	hasLang?: boolean
+	options?: OptionItem[]
+	itemLabel?: string
+	urlSearch?: string
+	multiple?: boolean
+	trackBy?: string
+	trackByValue?: string | number | string[]
+	searchInternally?: boolean
+	params?: Record<string, string | number | null>
+	class?: string
+	clearable?: boolean
+	showDescription?: boolean
+	closableChips?: boolean
+	invisible?: boolean
+	value?: string | number | [] | object[] | string[] | number[] | null | (string | number | null)[]
+	rules?: []
+	fromMinDate?: Date | null
+	toMinDate?: Date | null
+	fromMaxDate?: Date | null
+	toMaxDate?: Date | null
+}
+
+export type Options = {
+	page: number
+	itemsPerPage: number
+	sortBy: readonly SortItem[]
+	groupBy: readonly SortItem[]
+	search: string | undefined
+}
+
+export type Pagination = {
+	to: number
+	from: number
+	total: number
+	count: number
+	per_page: number
+	current_page: number
+	last_page: number
+}
+
+export type EditableDataTableItemType = 'text' | 'datepicker' | 'timepicker' | 'autocomplete' | 'autocompleteGroups' | 'select' | 'number' | 'display' | 'license_plate' | 'manual_date'
+
+export type EditableDataTableItem = {
+	internalIndex?: number
+	key: string
+	width?: string
+	title?: string
+	text?: string | undefined
+	placeholder?: string
+	type?: EditableDataTableItemType
+	required?: boolean
+	rules?: ((value: unknown) => typeof value | string)[]
+	renderDataOnMounted?: boolean
+	renderDataOnBeforeMount?: boolean
+	showDescription?: boolean
+	tooltip?: string
+	clearable?: boolean
+	disabled?: boolean
+	maxlength?: number
+	dependsOn?: string
+	nestedDependsOnKey?: string
+	fields?: EditableDataTableItem[]
+	errorKey?: string | string[]
+	useDependsOnAsParams?: boolean
+	dependsOnFunction?: (...args: unknown[]) => boolean
+	closableChips?: boolean
+	urlSearch?: string | ((...args: unknown[]) => string)
+	params?: Record<string, string | number | null>
+	menuIcon?: string
+	searchable?: boolean
+	searchInternally?: boolean
+	trackBy?: string
+	itemLabel?: string
+	multiple?: boolean
+	groupLabel?: string
+	groupValues?: string
+	options?: Record<string, unknown>[] | OptionItem[] | Ref<OptionItem[]>
+	disableIfEmpty?: boolean
+}
+
+export type OptionItem = {
+	id?: string | number | boolean
+	name?: string | number
+	value?: string | number | boolean
+	allowTranslate?: boolean
+	svg_icon_url?: string
+	png_icon_url?: string
+	children?: OptionItem[]
+}
+
+export type Item = {
+	id: number | string
+	name: string
+}
+
+export type Attachment = {
+	id?: string | number
+	src: string
+	file?: File
+}
+
+export type City = {
+	id: string
+	name: string
+	lat: number
+	lng: number
+	is_winch_city: boolean
+	coordinates: [[number, number]] | []
+}
+
+export type Bank = {
+	id: number
+	name: string
+	account_number: string
+	iban: string
+	bank_code: string
+	created_at: string
+	updated_at: string
+}
+
+export type CustomInputContent = {
+  title: string
+  desc?: string
+  value: string | number
+  subtitle?: string
+  icon?: { icon: string; size?: string; color?: string }
+  images?: string
+  image?: string
+}
+
+export type GridColumn = {
+  cols?: string
+  sm?: string
+  md?: string
+  lg?: string
+  xl?: string
+  xxl?: string
+}
+
+// Suppress intlify type inference errors
+declare module '@intlify/core-base' {
+  export interface CoreTranslation {
+    [key: string]: any;
+  }
+}
+
+// Global type augmentation to suppress TS2742 errors
+declare global {
+  interface Window {
+    // Add any global window properties if needed
+  }
+}
+
+// Suppress TS2742 errors for vue-i18n
+declare module 'vue-i18n' {
+  interface ComposerTranslation {
+    (key: string, ...args: any[]): string;
+  }
+}

package/dist/utils/apiUrl.d.ts

@@ -0,0 +1 @@
+export declare const buildApiUrl: (relativePath?: string) => string;

package/dist/utils/apiUrl.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildApiUrl = void 0;
+const buildApiUrl = relativePath => {
+  const baseUrl = process.env.VITE_BASE_API;
+  if (!relativePath) {
+    return baseUrl;
+  }
+  const normalizedPath = relativePath.startsWith("/") ? relativePath.slice(1) : relativePath;
+  return `${baseUrl}/${normalizedPath}`;
+};
+exports.buildApiUrl = buildApiUrl;

package/dist/utils/apiUrl.mjs

@@ -0,0 +1,8 @@
+export const buildApiUrl = (relativePath) => {
+  const baseUrl = import.meta.env.VITE_BASE_API;
+  if (!relativePath) {
+    return baseUrl;
+  }
+  const normalizedPath = relativePath.startsWith("/") ? relativePath.slice(1) : relativePath;
+  return `${baseUrl}/${normalizedPath}`;
+};

package/dist/utils/client.d.ts

@@ -0,0 +1,9 @@
+import { type FetchOptions } from 'ofetch';
+import type { ApiResponse } from '../types';
+type RequestOptions = Omit<FetchOptions<'json'>, 'method'> & {
+    ignoreUrlPrefix?: boolean;
+};
+export declare const client: {
+    get: <T>(path: string, options?: RequestOptions) => Promise<ApiResponse<T>>;
+};
+export {};

package/dist/utils/client.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.client = void 0;
+var _ofetch = require("ofetch");
+const clientInstance = _ofetch.ofetch.create({
+  credentials: "include"
+});
+async function apiRequest(method, path, options) {
+  const baseUrl = process.env.VITE_BASE_API;
+  const prefix = process.env.VITE_APP_TYPE;
+  const {
+    ignoreUrlPrefix,
+    headers,
+    ...restOptions
+  } = options || {};
+  const token = localStorage.getItem("token");
+  return clientInstance(path, {
+    method,
+    baseURL: ignoreUrlPrefix ? baseUrl : `${baseUrl}/${prefix}`,
+    credentials: "include",
+    headers: {
+      "Accept": "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+      "Accept-Language": localStorage.getItem("token"),
+      "User-Platform": "web",
+      ...(token && {
+        Authorization: `Bearer ${token}`
+      }),
+      ...headers
+    },
+    ...restOptions
+  });
+}
+const client = exports.client = {
+  get: async (path, options) => apiRequest("GET", path, options)
+};

package/dist/utils/client.mjs

@@ -0,0 +1,25 @@
+import { ofetch } from "ofetch";
+const clientInstance = ofetch.create({ credentials: "include" });
+async function apiRequest(method, path, options) {
+  const baseUrl = import.meta.env.VITE_BASE_API;
+  const prefix = import.meta.env.VITE_APP_TYPE;
+  const { ignoreUrlPrefix, headers, ...restOptions } = options || {};
+  const token = localStorage.getItem("token");
+  return clientInstance(path, {
+    method,
+    baseURL: ignoreUrlPrefix ? baseUrl : `${baseUrl}/${prefix}`,
+    credentials: "include",
+    headers: {
+      "Accept": "application/json",
+      "X-Requested-With": "XMLHttpRequest",
+      "Accept-Language": localStorage.getItem("token"),
+      "User-Platform": "web",
+      ...token && { Authorization: `Bearer ${token}` },
+      ...headers
+    },
+    ...restOptions
+  });
+}
+export const client = {
+  get: async (path, options) => apiRequest("GET", path, options)
+};

package/dist/utils/files.d.ts

@@ -0,0 +1,2 @@
+export declare const printPdf: (url: string) => Promise<void>;
+export declare const saveFile: (blob: Blob, fileName: string) => void;

package/dist/utils/files.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.saveFile = exports.printPdf = void 0;
+var _printJs = _interopRequireDefault(require("print-js"));
+var _client = require("./client");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const printPdf = async url => {
+  const {
+    data
+  } = await _client.client.get(`/pdf/base64?url=${url}`, {
+    ignoreUrlPrefix: true
+  });
+  if (data) {
+    await (0, _printJs.default)({
+      printable: data,
+      type: "pdf",
+      base64: true
+    });
+  }
+};
+exports.printPdf = printPdf;
+const saveFile = (blob, fileName) => {
+  const urlFile = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.style.display = "none";
+  a.href = urlFile;
+  a.download = fileName ?? `${Date.now()}`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(urlFile);
+};
+exports.saveFile = saveFile;

package/dist/utils/files.mjs

@@ -0,0 +1,22 @@
+import printJS from "print-js";
+import { client } from "./client.mjs";
+export const printPdf = async (url) => {
+  const { data } = await client.get(`/pdf/base64?url=${url}`, { ignoreUrlPrefix: true });
+  if (data) {
+    await printJS({
+      printable: data,
+      type: "pdf",
+      base64: true
+    });
+  }
+};
+export const saveFile = (blob, fileName) => {
+  const urlFile = window.URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.style.display = "none";
+  a.href = urlFile;
+  a.download = fileName ?? `${Date.now()}`;
+  document.body.appendChild(a);
+  a.click();
+  window.URL.revokeObjectURL(urlFile);
+};

package/dist/utils/formValidation.d.ts

@@ -0,0 +1,7 @@
+import type { ErrorResponseFiled } from '../types';
+export declare function formValidator(errors: ErrorResponseFiled[] | undefined, key: string): {
+    getError: () => ErrorResponseFiled | undefined;
+    getMessage: () => string;
+    hasError: () => boolean;
+};
+export declare function getErrorMessage(errors: ErrorResponseFiled[] | undefined, key: string): string;

package/dist/utils/formValidation.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formValidator = formValidator;
+exports.getErrorMessage = getErrorMessage;
+function formValidator(errors = [], key) {
+  const getError = () => errors?.find(e => e.field == key);
+  const getMessage = () => getError()?.message || "";
+  const hasError = () => Boolean(getError()?.field);
+  return {
+    getError,
+    getMessage,
+    hasError
+  };
+}
+function getErrorMessage(errors = [], key) {
+  return errors?.find(e => e.field == key)?.message || "";
+}

package/dist/utils/formValidation.mjs

@@ -0,0 +1,13 @@
+export function formValidator(errors = [], key) {
+  const getError = () => errors?.find((e) => e.field == key);
+  const getMessage = () => getError()?.message || "";
+  const hasError = () => Boolean(getError()?.field);
+  return {
+    getError,
+    getMessage,
+    hasError
+  };
+}
+export function getErrorMessage(errors = [], key) {
+  return errors?.find((e) => e.field == key)?.message || "";
+}

package/dist/utils/formatters.d.ts

@@ -0,0 +1,12 @@
+export declare const formatDate: (date: string) => string;
+export declare const formatDateWithoutTime: (date: string | Date, format?: string) => string;
+export declare const formatTime: (date: string) => string;
+export declare const formatDateWithTime: (date: string) => string;
+export declare const formatDateWithDay: (date: string) => string;
+export declare const extractDate: (dateString: string | Date | null, format?: string, hasTime?: boolean) => {
+    day: string;
+    month: string;
+    year: string;
+} | null;
+export declare const formatNumber: (number: number | undefined | string, withCurrency?: boolean) => string;
+export declare const formatNumberColor: (number: number | string | undefined) => string;