pgo-ui 1.0.0

package/README.md

@@ -0,0 +1,195 @@
+# uiux
+PGP UIUX
+
+## Installation (as a package)
+
+Install the package in your Vue 3 project:
+
+```sh
+npm install pgo-uiux2
+```
+
+## Usage
+
+1. **Import the library and styles in your main.js/main.ts:**
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import router from './router/index.js' //Add this
+import 'pgo-uiux2/style.css' //Add this
+import PgoUiux from 'pgo-uiux2' //Add this Line
+
+const app = createApp(App)
+app.use(router)
+app.use(PgoUiux)  //Add this
+
+app.mount('#app')
+```
+
+2. **Add routes in your router: (router/index.js)**
+
+```js
+import { ComponentRenderer, Examples } from 'pgo-uiux2'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Examples,
+    meta: {
+      title: 'Home - PGO UI Components',
+      breadcrumb: [
+        { label: 'Home', to: '/' },
+        { label: 'Examples', to: '/asdf' },
+        { label: 'Page 1' }
+      ]
+    }
+  },
+  {
+    path: '/page/:modelName/:componentName',
+    name: 'Custom Home',
+    model: 'modelName',
+    componentName: 'componentName',
+    component: ComponentRenderer,
+    meta: {
+      title: 'Home - PGO UI Components',
+      breadcrumb: [
+        { label: 'Home', to: '/' },
+        { label: 'Examples', to: '/asdf' },
+        { label: 'Page 1' }
+      ]
+    }
+  },
+  // ...other routes
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  }
+})
+
+// Update document title
+router.beforeEach((to, from, next) => {
+  const title = (to && to.meta && to.meta.title) ? String(to.meta.title) : 'PGO UI Components'
+  document.title = title
+  next()
+})
+```
+
+############### Optional #############
+
+**Tailwind CSS Setup**
+
+Make sure your `tailwind.config.js` includes the package for class scanning:
+
+```js
+content: [
+  './index.html',
+  './src/**/*.{vue,js,ts,jsx,tsx}',
+  './node_modules/pgo-uiux2/**/*.{js,ts,vue}'
+], 
+darkMode: 'selector',
+theme: {
+    extend: {
+      // Add RTL and app font families for easier usage in utilities or components
+      fontFamily: {
+        app: ['var(--app-font)'],
+        rtl: [
+          'Faruma',
+          'system-ui',
+          'sans-serif',
+        ],
+      },
+    },
+    colors: {
+      // background: '#05644D',
+      primary: '#05644D',
+      // secondary: '#FFA500',
+      // third: '#1E40AF',
+      // appcolor: '#05644D',
+
+      // required defaults (otherwise classes like bg-white fail)
+      white: '#ffffff',
+      black: '#000000',
+      transparent: 'transparent',
+      current: 'currentColor',
+    },
+
+    fontFamily: {
+      // Make Tailwind's default font-sans use the app font CSS variable
+      sans: ['var(--app-font)'],
+      dv: ['Faruma', 'sans-serif'],
+      en: ['Roboto', 'sans-serif'],
+      // keep `app` and `rtl` in extend above for convenience
+    },
+  },
+
+  // Optional (Vuetify compatibility)
+  corePlugins: {
+    preflight: false,
+  },
+
+  plugins: [
+    // Add small utilities to toggle app font and rtl font via classes
+    function ({ addUtilities, theme }) {
+      const newUtilities = {
+        '.font-app': { 'font-family': theme('fontFamily.app', 'var(--app-font)') },
+        '.rtl-font': { 'font-family': theme('fontFamily.rtl').join(', ') },
+      }
+      addUtilities(newUtilities, { variants: ['responsive'] })
+    },
+  ],
+```
+
+---
+
+## package.json Setup
+```js
+"dependencies": {
+    "@heroicons/vue": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.18",
+    "@tiptap/extension-character-count": "^3.13.0",
+    "@tiptap/extension-table": "^3.13.0",
+    "@tiptap/extension-table-cell": "^3.13.0",
+    "@tiptap/extension-table-header": "^3.13.0",
+    "@tiptap/extension-table-row": "^3.13.0",
+    "@tiptap/extension-text-align": "^3.13.0",
+    "@tiptap/pm": "^3.13.0",
+    "@tiptap/starter-kit": "^3.13.0",
+    "@tiptap/vue-3": "^3.13.0",
+    "@vuepic/vue-datepicker": "^12.1.0",
+    "@vueuse/components": "^14.0.0",
+    "@vueuse/core": "^14.0.0",
+    "axios": "^1.13.2",
+    "date-fns": "^4.1.0",
+    "pgo-uiux": "^1.0.13",
+    "pgo-uiux2": "^1.0.55",
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.4",
+    "vue3-tailwind-components": "^0.3.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.6.2",
+    "postcss": "^8.5.6",
+    "sass-embedded": "^1.96.0",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-vue-devtools": "^8.0.5"
+  },
+
+```
+

package/dist/InputSearch-CHSoQ7GH.js

@@ -0,0 +1,155 @@
+import { inject as f, computed as o, ref as c, onBeforeUnmount as T, openBlock as q, createElementBlock as A, normalizeClass as N, createVNode as R, unref as D, createSlots as E, withCtx as g, createElementVNode as d, mergeProps as F, toHandlers as L, withKeys as j } from "vue";
+import { _ as H, a as K } from "./index-BeW0KHDT.js";
+import "vue-router";
+const $ = ["value", "placeholder"], O = {
+  __name: "InputSearch",
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    label: { type: [String, Object], default: "" },
+    placeholder: { type: String, default: "Search..." },
+    hint: { type: String, default: "" },
+    error: { type: String, default: "" },
+    errorMessages: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !0 },
+    loading: { type: Boolean, default: !1 },
+    prepend: { type: String, default: "" },
+    append: { type: String, default: "" },
+    rules: { type: Array, default: () => [] },
+    // ADD THIS
+    // Search behavior
+    debounce: { type: Number, default: 300 },
+    // Appearance
+    size: { type: String },
+    rounded: { type: String },
+    border: { type: String },
+    textColor: { type: String },
+    bg: { type: String },
+    containerClass: { type: String, default: "" },
+    id: { type: String, default: "" },
+    width: { type: String, default: "w-full" },
+    // RTL/Lang support
+    dir: { type: String, default: "" },
+    lang: { type: String, default: "" },
+    // Props that might be passed but not used (to avoid warnings)
+    items: { type: Array, default: () => [] },
+    itemText: { type: String, default: "text" },
+    itemValue: { type: String, default: "value" }
+  },
+  emits: [
+    "update:modelValue",
+    "input",
+    "change",
+    "focus",
+    "blur",
+    "clear",
+    "search",
+    "enter"
+  ],
+  setup(e, { expose: m, emit: y }) {
+    const a = e, h = f("parentDir", ""), p = f("parentLang", ""), b = o(() => a.dir || h), S = o(() => a.lang || p), t = y, u = c(null), v = c(null), r = c(!1);
+    let i = null;
+    const x = o(() => a.id || `search-${Math.random().toString(36).substr(2, 9)}`), V = o(() => [
+      "w-full bg-transparent outline-none border-none",
+      "placeholder:text-gray-400",
+      "focus:outline-none"
+    ]), w = (l) => {
+      const n = l.target.value;
+      t("update:modelValue", n), clearTimeout(i), i = setTimeout(() => {
+        t("input", n), t("search", n);
+      }, a.debounce);
+    }, B = (l) => {
+      r.value = !0, t("focus", l);
+    }, C = (l) => {
+      r.value = !1, t("blur", l);
+    }, k = (l) => {
+      t("enter", a.modelValue), t("search", a.modelValue);
+    }, s = () => {
+      t("update:modelValue", ""), t("clear"), u.value?.focus();
+    }, z = () => {
+      u.value?.focus();
+    };
+    return T(() => {
+      clearTimeout(i);
+    }), m({ focus: z, clear: s }), (l, n) => (q(), A("div", {
+      ref_key: "containerRef",
+      ref: v,
+      class: N(["relative", e.containerClass, e.width])
+    }, [
+      R(D(K), {
+        "model-value": e.modelValue,
+        label: e.label,
+        hint: e.hint,
+        "persistent-hint": !!e.hint,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        required: e.required,
+        error: !!e.error || e.errorMessages.length > 0,
+        "error-messages": e.errorMessages,
+        clearable: e.clearable && !e.loading,
+        size: e.size,
+        id: x.value,
+        prepend: e.prepend,
+        append: e.append,
+        "is-open": r.value,
+        "onClick:clear": s,
+        bg: e.bg,
+        border: e.border,
+        "text-color": e.textColor,
+        rounded: e.rounded,
+        dir: b.value,
+        lang: S.value,
+        width: e.width,
+        rules: e.rules
+      }, E({
+        control: g(({ attrs: I, events: M }) => [
+          d("input", F({
+            ref_key: "inputRef",
+            ref: u
+          }, I, L(M, !0), {
+            type: "search",
+            value: e.modelValue,
+            placeholder: r.value && !e.modelValue || !e.label && !e.modelValue ? e.placeholder : "",
+            class: V.value,
+            onInput: w,
+            onKeydown: j(k, ["enter"]),
+            onFocus: B,
+            onBlur: C
+          }), null, 16, $)
+        ]),
+        _: 2
+      }, [
+        e.loading ? {
+          name: "append",
+          fn: g(() => [
+            n[0] || (n[0] = d("svg", {
+              class: "animate-spin h-4 w-4",
+              fill: "none",
+              viewBox: "0 0 24 24"
+            }, [
+              d("circle", {
+                class: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                "stroke-width": "4"
+              }),
+              d("path", {
+                class: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              })
+            ], -1))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["model-value", "label", "hint", "persistent-hint", "disabled", "readonly", "required", "error", "error-messages", "clearable", "size", "id", "prepend", "append", "is-open", "bg", "border", "text-color", "rounded", "dir", "lang", "width", "rules"])
+    ], 2));
+  }
+}, J = /* @__PURE__ */ H(O, [["__scopeId", "data-v-eb472641"]]);
+export {
+  J as default
+};