pgo-ui 1.0.0

package/src/components/pgo/inputs/TextField.vue

@@ -0,0 +1,194 @@
+<template>
+  <div 
+    ref="containerRef"
+    :class="['relative', containerClass, width]"
+  >
+    <Base
+        :model-value="modelValue"
+        :label="label"
+        :hint="hint"
+        :persistent-hint="!!hint"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :error="!!error || errorMessages.length > 0"
+        :error-messages="errorMessages"
+        :clearable="clearable && !loading"
+        :size="size"
+        :id="inputId"
+        :prepend="prepend"
+        :append="append"
+        :is-open="isFocused"
+        @click:clear="clear"
+        :bg="bg"
+        :border="border"
+        :text-color="textColor"
+        :rounded="rounded"
+        :dir="computedDir" 
+        :lang="computedLang"
+        :width="width"
+        :rules="rules"
+    >
+      <template #control="{ attrs, events }">
+        <input
+          ref="inputRef"
+          v-bind="attrs"
+          v-on="events"
+          type="text"
+          :value="modelValue"
+          :placeholder="isFocused && !modelValue ? placeholder : ''"
+          :class="inputClasses"
+          @input="handleInput"
+          @keydown.enter="handleEnter"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+      </template>
+
+      <!-- Loading spinner in append slot -->
+      <template v-if="loading" #append>
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <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"></path>
+        </svg>
+      </template>
+    </Base>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, onBeforeUnmount } from 'vue'
+import Base from '../base/Base.vue'
+import { roundedMap, sizes, iconSizes } from '../../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+    modelValue: { type: [String, Number], default: '' },
+    label: { type: [String, Object], default: '' },
+    placeholder: { type: String, default: 'text ...' },
+    hint: { type: String, default: '' },
+    error: { type: String, default: '' },
+    errorMessages: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    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' },
+})
+
+// Inject dir from parent Card (if exists)
+const cardDir = inject('parentDir', '')
+const cardLang = inject('parentLang', '')
+
+// Use component's dir if provided, otherwise use card's dir
+const computedDir = computed(() => props.dir || cardDir)
+const computedLang = computed(() => props.lang || cardLang)
+
+const emit = defineEmits([
+  'update:modelValue', 
+  'input', 
+  'change', 
+  'focus', 
+  'blur',
+  'clear',
+  // 'search',
+  'enter'
+])
+
+const inputRef = ref(null)
+const containerRef = ref(null)
+const isFocused = ref(false)
+// let debounceTimeout = null
+
+// Generate unique ID
+const inputId = computed(() => props.id || `input-${Math.random().toString(36).substr(2, 9)}`)
+
+// Input classes
+const inputClasses = computed(() => [
+  'w-full bg-transparent outline-none border-none',
+  'placeholder:text-gray-400',
+  'focus:outline-none'
+])
+
+// Handlers
+const handleInput = (e) => {
+  const value = e.target.value
+  
+  // Update immediately for label animation
+  emit('update:modelValue', value)
+  
+  // clearTimeout(debounceTimeout)
+  // debounceTimeout = setTimeout(() => {
+  //   emit('input', value)
+  //   emit('search', value)
+  // }, props.debounce)
+}
+
+const handleFocus = (event) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const handleEnter = (event) => {
+  emit('enter', props.modelValue)
+  // emit('search', props.modelValue)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+// Focus method
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+// Lifecycle
+// onBeforeUnmount(() => {
+//   clearTimeout(debounceTimeout)
+// })
+
+// Expose methods
+defineExpose({ focus, clear })
+</script>
+
+<style scoped>
+/* Remove default search input styling */
+/* input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+} */
+</style>

package/src/components/pgo/inputs/Textarea.vue

@@ -0,0 +1,181 @@
+<template>
+  <div 
+    ref="containerRef"
+    :class="['relative', containerClass, width]"
+  >
+    <Base
+        v-bind="$props"
+        :model-value="modelValue"
+        :error="!!error || errorMessages.length > 0"
+        :clearable="clearable && !loading"
+        :id="inputId"
+        :is-open="isFocused"
+        @click:clear="clear"
+        :dir="computedDir" 
+        :lang="computedLang"
+        :rules="rules"
+    >
+      <template #control="{ attrs, events }">
+        <textarea
+          ref="inputRef"
+          v-bind="attrs"
+          v-on="events"
+          type="text"
+          :value="modelValue"
+          :placeholder="isFocused && !modelValue ? placeholder : ''"
+          :class="inputClasses"
+          :rows="rows"
+          :maxlength="maxlength"
+          @input="handleInput"
+          @keydown.enter="handleEnter"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        />
+      </template>
+
+      <!-- Loading spinner in append slot -->
+      <template v-if="loading" #append>
+        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <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"></path>
+        </svg>
+      </template>
+    </Base>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, onBeforeUnmount } from 'vue'
+import Base from '../base/Base.vue'
+import { roundedMap, sizes, iconSizes, heights } from '../../../pgo-components/lib/componentConfig'
+
+const props = defineProps({
+    modelValue: { type: [String, Number], default: '' },
+    label: { type: [String, Object], default: '' },
+    placeholder: { type: String, default: 'text ...' },
+    hint: { type: String, default: '' },
+    error: { type: String, default: '' },
+    errorMessages: { type: Array, default: () => [] },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    loading: { type: Boolean, default: false },
+    prepend: { type: String, default: '' },
+    append: { type: String, default: '' },
+    rules: { type: Array, default: () => [] },  // ADD THIS
+    rows: { type: [Number, String], default: 3 },
+    maxlength: { type: [Number, String], default: null },
+
+    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' },
+    height: { type: String, default: 'h-auto' },
+})
+
+// Inject dir from parent Card (if exists)
+const cardDir = inject('parentDir', '')
+const cardLang = inject('parentLang', '')
+
+// Use component's dir if provided, otherwise use card's dir
+const computedDir = computed(() => props.dir || cardDir)
+const computedLang = computed(() => props.lang || cardLang)
+
+const emit = defineEmits([
+  'update:modelValue', 
+  'input', 
+  'change', 
+  'focus', 
+  'blur',
+  'clear',
+  // 'search',
+  'enter'
+])
+
+const inputRef = ref(null)
+const containerRef = ref(null)
+const isFocused = ref(false)
+// let debounceTimeout = null
+
+// Generate unique ID
+const inputId = computed(() => props.id || `input-${Math.random().toString(36).substr(2, 9)}`)
+
+// Input classes
+const inputClasses = computed(() => [
+  'w-full bg-transparent outline-none border-none',
+  'placeholder:text-gray-400',
+  'focus:outline-none'
+])
+
+// Handlers
+const handleInput = (e) => {
+  const value = e.target.value
+  
+  // Update immediately for label animation
+  emit('update:modelValue', value)
+  
+  // clearTimeout(debounceTimeout)
+  // debounceTimeout = setTimeout(() => {
+  //   emit('input', value)
+  //   emit('search', value)
+  // }, props.debounce)
+}
+
+const handleFocus = (event) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const handleEnter = (event) => {
+  emit('enter', props.modelValue)
+  // emit('search', props.modelValue)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+// Focus method
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+// Lifecycle
+// onBeforeUnmount(() => {
+//   clearTimeout(debounceTimeout)
+// })
+
+// Expose methods
+defineExpose({ focus, clear })
+</script>
+
+<style scoped>
+/* Remove default search input styling */
+/* input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+} */
+</style>

package/src/index.js

@@ -0,0 +1,81 @@
+// Import all components
+import './pgo-components/styles/global.css'
+import { createThemePlugin } from './pgo-components/plugins/theme-plugin.js'
+import { themes } from './pgo-components/tokens/index.js'
+import { useTheme as _useTheme } from './pgo-components/composables/useTheme.js'
+import { SnackBarPlugin } from './pgo-components/plugins/SnackBarPlugin.ts'
+import { useSnackBar } from './pgo-components/plugins/useSnackBar.js'
+import validationPlugin from './pgo-components/plugins/validation-plugin'
+import { tooltipDirective } from './pgo-components/directives/tooltip-directive.ts'
+import { i18nPlugin } from './pgo-components/lib/i18n/i18nPlugin'
+import api from './pgo-components/services/axios'
+
+
+import { drawerOpen } from './pgo-components/lib/drawerState.ts'
+
+
+import {globalRtl} from './pgo-components/lib/core/rtl/rtl.ts'
+import { setRtl } from './pgo-components/lib/core/rtl/setRtl.ts'
+
+//components
+import {Button, Card, HeroIcon} from './components/pgo/index.ts' // for Global registration
+export * from './components/pgo/index.ts' // export all components
+
+// Export plugin
+export { i18nPlugin }
+export { globalRtl }
+export { setRtl }
+export { drawerOpen }
+// export { useSnackBar }
+export { _useTheme as useTheme }
+export { createThemePlugin } from './pgo-components/plugins/theme-plugin.js'
+export { themes } from './pgo-components/tokens/index.js'
+
+// export { default as Chip } from './components/pgo/buttons/Chip.vue'
+
+export { default as ComponentRenderer } from './pgo-components/pages/ComponentRenderer.vue'
+export { default as ListView } from './pgo-components/pages/ListView.vue'
+export { default as Examples } from './pgo-components/pages/Home.vue'
+
+// create default plugin instance
+const defaultPlugin = createThemePlugin({ themes, defaultTheme: 'default', defaultVariant: 'light' })
+
+// attach to window for the demo/example app convenience
+if (typeof window !== 'undefined') {
+  window.__VTS_PLUGIN__ = defaultPlugin
+  window.__VTS_THEMES__ = Object.keys(themes)
+}
+
+// set rtl default
+const savedRtl = localStorage.getItem('rtlSetting')
+if (savedRtl !== null) {
+  globalRtl.value = JSON.parse(savedRtl)
+  setRtl(globalRtl.value)
+} else {
+  globalRtl.value = true
+  setRtl(globalRtl.value)
+}
+
+// Export install function
+export default {
+  install(app) {
+    app.component('Button', Button)
+    app.component('HeroIcon', HeroIcon)
+    app.component('Card', Card)
+    // app.component('Footer', Footer)
+    // app.component('Main', Main)
+    app.provide('api', api)
+    app.provide('globalRtl', globalRtl)
+    app.provide('setRtl', setRtl)
+    app.provide('drawerOpen', drawerOpen)
+    app.use(i18nPlugin)
+    // app.provide('snackbar', useSnackBar())
+    // Do NOT use app.use(globalRtl) or app.use(setRtl)
+    // app.use(defaultPlugin)
+    app.use(SnackBarPlugin, { position: 'top-right', timeout: 5000 })
+    // app.use(validationPlugin)
+    app.directive('tooltip', tooltipDirective)
+    // app.config.globalProperties.$snackbar = useSnackBar()
+  }
+}
+

package/src/main.js

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import PgoUiux from'/src/index.js'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.use(PgoUiux)
+
+app.mount('#app')

package/src/pgo-components/__index.js

@@ -0,0 +1,104 @@
+// Import all components
+import './styles/global.css'
+import { createThemePlugin } from './plugins/theme-plugin.js'
+import { themes } from './tokens/index.js'
+import { useTheme as _useTheme } from './composables/useTheme.js'
+import { SnackBarPlugin } from './plugins/SnackBarPlugin.ts'
+import { useSnackBar } from './plugins/useSnackBar.js'
+import validationPlugin from './plugins/validation-plugin'
+import { tooltipDirective } from './directives/tooltip-directive.ts'
+import { i18nPlugin } from './lib/i18n/i18nPlugin'
+import api from './services/axios'
+
+
+//components
+import Footer from '../components/pgo/Footer.vue'
+import PApp from '../components/pgo/PApp.vue'
+import Button from '../components/pgo/Button.vue'
+import Card from '../components/pgo/Card.vue'
+import Select from '../components/pgo/inputs/Select.vue'
+import AppBar from '../components/pgo/AppBar.vue'
+import NavigationDrawer from '../components/pgo/NavigationDrawer.vue'
+import Main from '../components/pgo/Main.vue'
+import HeroIcon from '../components/pgo/HeroIcon.vue'
+import Modal from '../components/pgo/Modal.vue'
+import NavDrawer from '../components/pgo/NavDrawer.vue'
+import NavDrawerItem from '../components/pgo/NavDrawerItem.vue'
+import { drawerOpen } from '../pgo-components/lib/drawerState.ts'
+
+
+import {globalRtl} from '../pgo-components/lib/core/rtl/rtl.ts'
+import { setRtl } from '../pgo-components/lib/core/rtl/setRtl.ts'
+
+
+// Export components
+export {
+  Footer,
+  Select,
+  AppBar,
+  NavigationDrawer,
+  Main,
+  HeroIcon,
+  NavDrawerItem,
+  NavDrawer,
+  Modal,
+  PApp,
+  Button,
+  Card,
+}
+
+// Export plugin
+export { i18nPlugin }
+export { globalRtl }
+export { setRtl }
+export { drawerOpen }
+// export { useSnackBar }
+export { _useTheme as useTheme }
+export { createThemePlugin } from './plugins/theme-plugin.js'
+export { themes } from './tokens/index.js'
+
+export { default as ComponentRenderer } from './pages/ComponentRenderer.vue'
+export { default as ListView } from './pages/ListView.vue'
+export { default as Examples } from './pages/Home.vue'
+
+// create default plugin instance
+const defaultPlugin = createThemePlugin({ themes, defaultTheme: 'default', defaultVariant: 'light' })
+
+// attach to window for the demo/example app convenience
+if (typeof window !== 'undefined') {
+  window.__VTS_PLUGIN__ = defaultPlugin
+  window.__VTS_THEMES__ = Object.keys(themes)
+}
+
+// Export install function
+export default {
+  install(app) {
+    app.component('PApp', PApp)
+    app.component('AppBar', AppBar)
+    app.component('Button', Button)
+    app.component('HeroIcon', HeroIcon)
+    app.component('NavigationDrawer', NavigationDrawer)
+    // app.component('NavDrawer', NavDrawer)
+    app.component('NavDrawerItem', NavDrawerItem)
+    app.component('Card', Card)
+    app .component('Footer', Footer)
+    app.component('Main', Main)
+    // app.component('Modal', Modal)
+    // app.component('Select', Select)
+    app.provide('api', api)
+    // app.provide('themes', themes)
+    // app.provide('useTheme', _useTheme)
+    app.provide('globalRtl', globalRtl)
+    app.provide('setRtl', setRtl)
+    app.provide('drawerOpen', drawerOpen)
+    app.use(i18nPlugin)
+    // app.provide('snackbar', useSnackBar())
+    // Do NOT use app.use(globalRtl) or app.use(setRtl)
+    // app.use(defaultPlugin)
+    // app.use(SnackBarPlugin, { position: 'top-right', timeout: 5000 })
+    // app.use(validationPlugin)
+    // app.directive('tooltip', tooltipDirective)
+    // app.config.globalProperties.$snackbar = useSnackBar()
+  }
+}
+

package/src/pgo-components/_index.js

@@ -0,0 +1,31 @@
+// src/index.js
+import './styles/global.css'
+import { createThemePlugin } from './plugins/theme-plugin.js'
+import { themes } from './tokens/index.js'
+import { useTheme as _useTheme } from './composables/useTheme.js'
+import { i18nPlugin } from './lib/i18n/i18nPlugin'
+import { SnackBarPlugin } from './plugins/SnackBarPlugin.ts'
+import validationPlugin from './plugins/validation-plugin'
+import { tooltipDirective } from './directives/tooltip-directive.ts'
+import api from './services/axios'
+
+// create default plugin instance
+const plugin = createThemePlugin({ themes, defaultTheme: 'default', defaultVariant: 'light' })
+
+// attach to window for the demo/example app convenience
+if (typeof window !== 'undefined') {
+  window.__VTS_PLUGIN__ = plugin
+  window.__VTS_THEMES__ = Object.keys(themes)
+}
+
+export { 
+  createThemePlugin, 
+  plugin as defaultPlugin, 
+  themes, 
+  _useTheme as useTheme,
+  i18nPlugin,
+  SnackBarPlugin,
+  validationPlugin,
+  tooltipDirective,
+  api
+}

package/src/pgo-components/composables/useTheme.js

@@ -0,0 +1,10 @@
+// src/composables/useTheme.js
+import { inject } from 'vue';
+
+export function useTheme() {
+  const themeState = inject('vts-theme');
+  if (!themeState) {
+    throw new Error('[vts] theme plugin not installed. Did you call app.use(plugin)?');
+  }
+  return themeState;
+}