@winchsa/ui 0.1.0

package/README.md

@@ -0,0 +1,166 @@
+# Winch UI
+
+A Vue 3 + Vuetify UI component library for Winch SA.
+
+**🚧 TESTING VERSION** - This is a test version published to personal npm account.
+
+## 📦 Publishing Workflow
+
+### Prerequisites
+
+1. **NPM Token**: Add `NPM_TOKEN` secret to your GitHub repository settings
+   - Go to [npmjs.com](https://www.npmjs.com) → Account Settings → Access Tokens
+   - Create a new token with "Automation" type
+   - Add it as `NPM_TOKEN` in your repository secrets
+
+2. **Personal Account**: This test version uses your personal npm account
+
+### Publishing Options
+
+#### Option 1: Automatic Publishing (Recommended)
+The package automatically publishes when you push to the main branch:
+
+- **Every commit** to main triggers an automatic patch version bump and release
+- **Manual workflow** can be triggered from GitHub Actions tab for specific version bumps
+- **Git tags** starting with `v` trigger immediate releases
+
+#### Option 2: Manual Version Bumps
+```bash
+# For patch releases (0.1.0 → 0.1.1)
+pnpm run publish:patch
+
+# For minor releases (0.1.0 → 0.2.0)  
+pnpm run publish:minor
+
+# For major releases (0.1.0 → 1.0.0)
+pnpm run publish:major
+```
+
+#### Option 3: GitHub Actions Manual Trigger
+1. Go to your repository's "Actions" tab
+2. Select "Release" workflow
+3. Click "Run workflow"
+4. Choose version type (patch/minor/major)
+5. Click "Run workflow"
+
+#### Option 4: Git Tags
+Create a git tag to trigger immediate release:
+
+```bash
+git tag v0.1.1
+git push origin v0.1.1
+```
+
+#### Option 5: Direct Publishing
+```bash
+# Build and publish directly
+pnpm run release
+
+# Dry run to test publishing without publishing
+pnpm run release:dry-run
+```
+
+## 🚀 Installation in Projects (TESTING)
+
+```bash
+# Using pnpm
+pnpm add @winchsa/ui
+
+# Using npm
+npm install @winchsa/ui
+
+# Using yarn
+yarn add @winchsa/ui
+```
+
+## 📖 Usage
+
+```vue
+<template>
+  <div>
+    <!-- Your Winch UI components here -->
+  </div>
+</template>
+
+<script setup>
+// Import components as needed
+// import { YourComponent } from '@winchsa/ui'
+</script>
+```
+
+## 🛠️ Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm run dev
+
+# Build for production
+pnpm run build
+
+# Run linting
+pnpm run lint
+
+# Fix linting issues
+pnpm run lint:fix
+
+# Run tests
+pnpm run test
+```
+
+## 🔄 GitHub Actions Workflows
+
+### CI Workflow (`ci.yml`)
+- Runs on every push and pull request
+- Lints code, runs tests, and builds the package
+- Ensures code quality before merging
+
+### Auto Version Bump (`auto-version.yml`)
+- Automatically bumps patch version on commits to main
+- Skips version bumps for documentation changes
+- Prevents infinite loops on version bump commits
+
+### Release Workflow (`release.yml`)
+- Publishes to npm when version changes
+- Creates GitHub releases for tagged versions
+- Handles both automatic and manual version bumps
+- Checks for duplicate versions before publishing
+
+## 📋 Release Notes
+
+The workflow will automatically:
+- ✅ Run CI checks (lint, test, build)
+- ✅ Bump version automatically on commits
+- ✅ Build the library
+- ✅ Check if version already exists on npm
+- ✅ Publish to npm with public access (personal account)
+- ✅ Create GitHub releases for tagged versions
+- ✅ Skip publishing if version already exists
+- ✅ Handle manual version bumps via GitHub Actions
+
+## 🔓 Public Package (Testing)
+
+This test version is published with public access to your personal npm account.
+
+## 🚨 Troubleshooting
+
+### Version Already Exists
+If you get an error that a version already exists:
+1. Check the current version in `package.json`
+2. Use a different version type (patch/minor/major)
+3. Or manually edit the version in `package.json`
+
+### Publishing Fails
+1. Ensure `NPM_TOKEN` is set in repository secrets
+2. Check that you have publish permissions to `@winchsa/ui`
+3. Verify the package builds successfully locally
+
+## 🔄 Moving to Organization
+
+When ready to move to the organization:
+1. Change package name back to `@winchsa/ui`
+2. Update access to `restricted` in both `package.json` and `.npmrc`
+3. Update GitHub Actions workflows
+4. Ensure organization has paid npm plan for private packages

package/dist/components/Breadcrumbs.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+import { VBreadcrumbsItem, VBreadcrumbs } from "vuetify/components";
+import AppLink from "./forms/AppLink.vue";
+const { t } = useI18n();
+const { path } = useRoute();
+const props = defineProps({
+  items: { type: Array, required: true }
+});
+const itemsBreadcrumb = computed(() => props.items.map((item) => {
+  if (props.items.lastIndexOf(item) === props.items.length - 1) {
+    item.to = path;
+  }
+  return {
+    ...item,
+    title: item.hasLang === false ? item.title : t(item.title, item?.params || {})
+  };
+}));
+</script>
+
+<template>
+  <VBreadcrumbs color="blue">
+    <VBreadcrumbsItem v-for="(item, index) in itemsBreadcrumb" :key="item.title" @click="item.onClick">
+      <p v-if="itemsBreadcrumb.length - 1 === index" class="ma-0 text-gray-600">
+        {{ item.title }}
+      </p>
+      <AppLink v-else :to="item.to">
+        {{ item.title }}
+      </AppLink>
+      <span v-if="itemsBreadcrumb.length - 1 !== index" class="v-breadcrumbs-divider text-gray-600">/</span>
+    </VBreadcrumbsItem>
+  </VBreadcrumbs>
+</template>
+
+<style scoped>
+:deep(.v-breadcrumbs-item--active.v-breadcrumbs-item--disabled) a {
+  pointer-events: all;
+  user-select: text !important;
+  cursor: text !important;
+}
+:deep(.v-breadcrumbs-item--active.v-breadcrumbs-item--disabled) a::after {
+  display: none !important;
+}
+</style>

package/dist/components/Breadcrumbs.vue.d.ts

@@ -0,0 +1,6 @@
+import type { Breadcrumb } from '../types';
+type __VLS_Props = {
+    items: Breadcrumb[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/Drawer.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { VCardTitle, VDialog, VCardActions, VCardText } from "vuetify/components";
+import AppCard from "./core/cards/AppCard.vue";
+import IconBtn from "./IconBtn.vue";
+defineProps({
+  isAppRtl: { type: Boolean, required: true }
+});
+const editModal = defineModel("editModal", { type: Boolean });
+</script>
+
+<template>
+  <VDialog
+    v-model="editModal"
+    max-width="480"
+    height="100%"
+    class="my-0 edit_driver_modal"
+    :content-class="isAppRtl ? 'left' : 'right'"
+    :transition="isAppRtl ? 'slide-x-transition' : 'slide-x-reverse-transition'"
+  >
+    <AppCard class="h-100 py-10">
+      <VCardTitle class="d-flex justify-space-between">
+        <slot name="title" />
+
+        <IconBtn
+          size="small"
+          icon="tabler-x"
+          @click="editModal = false"
+        />
+      </VCardTitle>
+
+      <VCardText class="d-flex flex-column h-100">
+        <div class="flex-grow-1">
+          <slot />
+        </div>
+
+        <VCardActions class="pa-0">
+          <slot name="actions" />
+        </VCardActions>
+      </VCardText>
+    </AppCard>
+  </VDialog>
+</template>
+
+<style scoped>
+:deep(.v-overlay__content) {
+  margin: 0px;
+  max-height: 100%;
+  height: 100%;
+}
+:deep(.v-overlay__content).left {
+  left: 0;
+}
+:deep(.v-overlay__content).right {
+  right: 0;
+}
+
+:deep(.v-tabs) {
+  border: none !important;
+}
+</style>

package/dist/components/Drawer.vue.d.ts

@@ -0,0 +1,44 @@
+import { VCardTitle, VDialog, VCardActions, VCardText } from 'vuetify/components';
+import AppCard from './core/cards/AppCard.vue';
+import IconBtn from './IconBtn.vue';
+type __VLS_Props = {
+    isAppRtl: boolean;
+};
+declare const editModal: import("vue").ModelRef<boolean | undefined, string, boolean | undefined, boolean | undefined>;
+type __VLS_PublicProps = {
+    'editModal'?: boolean;
+} & __VLS_Props;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_13: {}, __VLS_26: {}, __VLS_32: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    title?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    actions?: (props: typeof __VLS_32) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_PublicProps, {
+    VCardTitle: typeof VCardTitle;
+    VDialog: typeof VDialog;
+    VCardActions: typeof VCardActions;
+    VCardText: typeof VCardText;
+    AppCard: typeof AppCard;
+    IconBtn: typeof IconBtn;
+    editModal: typeof editModal;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:editModal": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:editModal"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:editModal": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:editModal"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/IconBtn.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { VBtn } from "vuetify/components";
+const props = defineProps({
+  color: { type: null, required: false, default: "default" },
+  variant: { type: null, required: false, default: "text" },
+  density: { type: null, required: false, default: "comfortable" }
+});
+</script>
+
+<template>
+  <VBtn :icon="true" v-bind="{ ...props, ...$attrs }">
+    <slot />
+  </VBtn>
+</template>
+
+<style>
+.v-btn .v-icon{height:22px;width:22px}
+</style>

package/dist/components/IconBtn.vue.d.ts

@@ -0,0 +1,30 @@
+import { VBtn } from 'vuetify/components';
+type __VLS_Props = {
+    color?: any;
+    variant?: any;
+    density?: any;
+};
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_6: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_6) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    VBtn: typeof VBtn;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: any;
+    density: any;
+    variant: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: any;
+    density: any;
+    variant: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Modal.vue

@@ -0,0 +1,155 @@
+<script setup>
+import { PerfectScrollbar } from "vue3-perfect-scrollbar";
+import { useDisplay } from "vuetify";
+import { computed, nextTick, ref } from "vue";
+import { VDialog, VCol, VRow, VIcon } from "vuetify/components";
+import { useI18n } from "vue-i18n";
+import AppCard from "../components/core/cards/AppCard.vue";
+import BaseButton from "./forms/BaseButton.vue";
+import DialogCloseBtn from "./core/DialogCloseBtn.vue";
+const { xs } = useDisplay();
+const { t } = useI18n();
+const props = defineProps({
+  modelValue: { type: Boolean, required: false, default: false },
+  persistent: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: "" },
+  width: { type: String, required: false, default: "434px" },
+  maxWidth: { type: String, required: false, default: "70%" },
+  zIndex: { type: String, required: false, default: "9999" },
+  confirmBtn: { type: [Object, null], required: false, default: () => ({
+    text: "actions.save",
+    color: "primary"
+  }) },
+  closeBtn: { type: [Object, null], required: false, default: () => ({
+    text: "actions.cancel",
+    color: "gray-200"
+  }) },
+  hasIcon: { type: Boolean, required: false, default: true },
+  icon: { type: String, required: false, default: "tabler-info-circle" },
+  iconColor: { type: String, required: false, default: "primary" },
+  contentContainerClass: { type: Array, required: false },
+  showActions: { type: Boolean, required: false, default: true },
+  loading: { type: Boolean, required: false },
+  actionsClass: { type: [String, Array], required: false },
+  height: { type: [String, Number], required: false }
+});
+const emits = defineEmits(["update:modelValue", "save", "cancel"]);
+const modalScrollbarRef = ref(null);
+const save = () => {
+  emits("save");
+};
+const cancel = () => {
+  isOpen.value = false;
+  emits("cancel");
+};
+const isOpen = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emits("update:modelValue", value);
+  }
+});
+const checkScrollbar = () => {
+  nextTick(() => {
+    if (modalScrollbarRef?.value?.ps) {
+      modalScrollbarRef?.value?.ps.update();
+    }
+  });
+};
+const mergedConfirmBtn = computed(() => ({
+  text: "actions.save",
+  color: "primary",
+  disabled: false,
+  ...props.confirmBtn || {}
+}));
+const mergedCloseBtn = computed(() => ({
+  text: "actions.cancel",
+  color: "gray-200",
+  disabled: false,
+  ...props.closeBtn || {}
+}));
+</script>
+
+<template>
+  <PerfectScrollbar
+    ref="modalScrollbarRef"
+    :options="{
+  wheelPropagation: false,
+  suppressScrollX: true
+}"
+    @mouseover="checkScrollbar"
+  >
+    <VDialog
+      v-model="isOpen"
+      :width="xs ? '100%' : width"
+      :max-width="xs ? '90%' : maxWidth"
+      :z-index="zIndex"
+      :persistent="persistent"
+      :height="height"
+    >
+      <DialogCloseBtn @click="cancel" />
+      <AppCard class="pa-4 pb-0 h-100" :height="height">
+        <div v-if="title" class="d-flex justify-space-between border-b pb-2 mb-3">
+          <h4 class="mb-2 font-weight-bold">
+            {{ title }}
+          </h4>
+        </div>
+
+        <div class="d-flex flex-column align-center justify-center gap-2" :class="contentContainerClass">
+          <div v-if="hasIcon" class="d-flex align-center justify-center app-w-50px app-h-50px rounded-pill position-relative my-4">
+            <div class="d-flex align-center justify-center app-w-60px app-h-60px rounded-pill position-absolute app-opacity-17" :class="`bg-${iconColor}`" />
+            <div class="d-flex align-center justify-center app-w-50px app-h-50px rounded-pill position-absolute app-opacity-11" :class="`bg-${iconColor}`" />
+            <VIcon
+              size="30"
+              :icon="icon"
+              :color="iconColor"
+            />
+          </div>
+          <div class="w-100 text-center">
+            <slot />
+          </div>
+        </div>
+
+        <slot v-if="showActions" name="actions">
+          <VRow class="modal-actions" no-gutters>
+            <slot name="additional-actions" />
+            <VCol
+              cols="12"
+              :class="actionsClass"
+              class="d-flex flex-wrap justify-center gap-4 mt-4 "
+            >
+              <BaseButton
+                v-if="mergedCloseBtn"
+                :color="mergedCloseBtn.color"
+                :disabled="mergedCloseBtn?.disabled"
+                class="flex-1-1"
+                elevation="0"
+                @click="cancel"
+              >
+                {{ t(mergedCloseBtn.text) }}
+              </BaseButton>
+
+              <BaseButton
+                v-if="mergedConfirmBtn"
+                type="submit"
+                class="flex-1-1"
+                :color="mergedConfirmBtn.color"
+                :disabled="mergedConfirmBtn?.disabled"
+                elevation="0"
+                :loading="loading"
+                @click="save"
+              >
+                {{ t(mergedConfirmBtn.text) }}
+              </BaseButton>
+            </VCol>
+          </VRow>
+        </slot>
+      </AppCard>
+    </VDialog>
+  </PerfectScrollbar>
+</template>
+
+<style scoped>
+.modal-actions{background-color:#fff;bottom:0;padding-bottom:18px;position:sticky}
+</style>

package/dist/components/SiteTitle.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+const siteName = computed(() => {
+  return t(`${import.meta.env.VITE_APP_TYPE}_site_name`);
+});
+</script>
+
+<template>
+  <h2 class="text-center">
+    {{ siteName }}
+  </h2>
+</template>

package/dist/components/SiteTitle.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Toaster.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { Toaster } from "vue-sonner";
+defineProps({
+  theme: { type: String, required: true }
+});
+</script>
+
+<template>
+  <Toaster
+    position="top-center"
+    :theme="theme"
+    close-button
+    rich-colors
+  />
+</template>
+
+<style>
+[data-sonner-toast] [data-icon]{margin:0}[data-sonner-toast] [data-icon] svg{margin-inline-start:-2px}[data-sonner-toaster][data-theme=light]{--normal-bg:#fff;--normal-text:var(--gray12);--normal-icon:#fdc930;--success-text:#28c76f;--error-text:#ea5455;--error-bg:#fbe3e4;--error-border:#fbe3e4;--success-bg:#dcf6e8;--success-border:#dcf6e8}[data-sonner-toaster][data-theme=dark]{--normal-bg:#2f3349;--normal-border:#2f3349;--normal-text:var(--gray1);--success-text:#28c76f;--error-text:#ea5455;--error-bg:#4c384b;--error-border:#4c384b;--success-bg:#2d4b4f;--success-border:#2d4b4f}[data-sonner-toast][data-styled=true]{gap:10px!important}
+</style>

package/dist/components/Toaster.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    theme: 'light' | 'dark';
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/cards/CheckboxesCard.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { onMounted, reactive, watch } from "vue";
+import { VCardItem, VCheckbox, VDivider } from "vuetify/components";
+import AppCard from "../core/cards/AppCard.vue";
+const props = defineProps({
+  id: { type: [String, Number], required: false, default: "" },
+  title: { type: String, required: false, default: "" },
+  modelValue: { type: Array, required: true, default: () => [] }
+});
+const data = reactive({
+  selectedAll: false,
+  model: props.modelValue || []
+});
+const emit = defineEmits(["update:modelValue"]);
+watch(
+  () => props.modelValue,
+  () => {
+    data.model = props.modelValue;
+  }
+);
+watch(
+  () => data.model,
+  () => {
+    allCheckboxSelected();
+    getItemOnChange();
+  },
+  { deep: true }
+);
+onMounted(() => {
+  allCheckboxSelected();
+});
+const selectAll = () => {
+  data.selectedAll = !data.selectedAll;
+  data.model.forEach((item) => item.selected = data.selectedAll);
+};
+function allCheckboxSelected() {
+  data.model.find((item) => item.selected === false || item.selected === void 0) ? data.selectedAll = false : data.selectedAll = true;
+}
+function getItemOnChange() {
+  emit("update:modelValue", data.model);
+}
+</script>
+
+<template>
+  <AppCard class="h-100">
+    <!-- title card -->
+    <VCardItem class="text-center">
+      <div class="d-flex justify-space-between w-100">
+        <h3 class="fw-bold">
+          {{ title }}
+        </h3>
+
+        <VCheckbox
+          v-model="data.selectedAll"
+          class="form-check-input"
+          @click="selectAll()"
+        />
+      </div>
+
+      <VDivider />
+    </VCardItem>
+
+    <VCardItem class="pt-0">
+      <div
+        v-for="(item, key) in data.model"
+        :key="key"
+        class="d-flex justify-space-between mb-2"
+      >
+        <span>{{ item.label }}</span>
+
+        <!--  item checkbox   -->
+        <VCheckbox v-model="item.selected" />
+      </div>
+    </VCardItem>
+  </AppCard>
+</template>

package/dist/components/cards/CheckboxesCard.vue.d.ts

@@ -0,0 +1,20 @@
+type ChechboxModel = {
+    key: string | number;
+    label: string;
+    selected?: boolean;
+};
+type __VLS_Props = {
+    id?: string | number;
+    title?: string;
+    modelValue: ChechboxModel[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: ChechboxModel[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ChechboxModel[]) => any) | undefined;
+}>, {
+    title: string;
+    modelValue: ChechboxModel[];
+    id: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;