pgo-uiux2 1.0.0

package/src/pgo-components/pages/_Page1.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="p-6 max-w-4xl mx-auto space-y-8">
+        <Card dir="ltr" 
+            rounded="lg"
+            labels="dd"
+            padding="px-4"
+        >
+
+            <div class="my-4 flex gap-4">
+                <InputSearch 
+                     v-model="basicSearch"
+                     dir="ltr"
+                     :items="countries"
+                     :label="SelectLabel" 
+                     prepend=""
+                     item-title="text"
+                     item-value="value"
+                     append="magnifying-glass"
+                     searchable
+                     bg="bg-white"
+                     size="md"
+                     rounded="sm"
+                />
+                
+               <Select 
+                    v-model="multiSelect"
+                    dir="ltr"
+                    :items="countries"
+                    :label="SelectLabel" 
+                    prepend="user"
+                    item-title="text"
+                    item-value="value"
+                    multiple
+                    searchable
+                    bg="bg-white"
+                    size="md"
+                    rounded="sm"
+                    
+                />
+                <div class="flex items-center">
+                    <HeroIcon name="funnel" type="outline" size="18" />
+                </div>
+            </div>
+
+        </Card>
+        <Card dir="ltr"  :labels="labels" bg="bg-gray-100">
+
+            <div class="my-4 flex gap-4">
+                <InputSearch 
+                     v-model="basicSearch"
+                     dir="ltr"
+                     :items="countries"
+                     :label="SelectLabel" 
+                     prepend=""
+                     item-title="text"
+                     item-value="value"
+                     append="magnifying-glass"
+                     searchable
+                     bg="bg-white"
+                     size="md"
+                />
+                
+               <Select 
+                    v-model="multiSelect"
+                    dir="ltr"
+                    :items="countries"
+                    :label="SelectLabel" 
+                    prepend="user"
+                    item-title="text"
+                    item-value="value"
+                    multiple
+                    searchable
+                    bg="bg-white"
+                    size="md"
+                    rounded=""
+                />
+                <div class="flex items-center">
+                    <HeroIcon name="funnel" type="outline" size="18" />
+                </div>
+            </div>
+            
+            <!-- <div class="flex gap-4 text-gray-700">
+                <Search
+                    v-model="basicSearch"
+                    label="Search here "
+                    placeholder=""
+                    hint=""
+                />
+                <Select v-model="basicSearch" searchable :items="countries" label="" />
+                <Select
+                    v-model="Dropdown"
+                    label="select"
+                    :items="countries"
+                    searchable
+                    size="xl"
+                />
+            </div> -->
+
+        </Card>
+        
+
+
+
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import Card from '../Card.vue'
+import Search from '../Search.vue'
+import Select from '../inputs/Select.vue'
+import InputSearch from '../InputSearch.vue'
+import HeroIcon from '../HeroIcon.vue'
+import TestInput from '../TestInput.vue'
+// import BaseInput from "../base/BaseInput.vue";
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
+  modelValue: [String, Number, Boolean, Object, Array, ''],
+  fields: { type: [String, Array, Object], default: '' }, //search, select, filer, date,
+});
+
+
+const multiSelect = ref([])
+const basicSearch = ref('')
+const Dropdown = ref('')
+
+const labels = {
+    en: {
+        title: 'title 1',
+        body: 'body'
+    },
+    dv: {
+        title: 'ދިވެހި ',
+        body: 'ބޮޑީ'
+    }
+}
+
+const SelectLabel = {
+    en: {
+        label: 'Country'
+    },
+    dv: {
+        label: 'ޖަމިލް'
+    }
+}
+
+const countries = [
+    { value: 1, text: 'Maldives' },
+    { value: 3, text: 'India' },
+    { value: 4, text: 'Sri Lanka' },
+    { value: 2, text: 'USA' },
+]
+</script>
+<style scoped>
+/* .label-gap {
+  position: relative;
+} */
+
+/* .label-gap::before {
+  content: "";
+  position: absolute;
+  top: -1.5px;
+  left: 0;
+  height: 1.5px;
+  width: 100%;
+  background: black;
+
+  mask: linear-gradient(
+    to right,
+    black 0%,
+    black calc(50% - 30px),
+    transparent calc(50% - 30px),
+    transparent calc(50% + 30px),
+    black calc(50% + 30px),
+    black 100%
+  );
+} */
+
+
+</style>

package/src/pgo-components/plugins/SnackBar.vue

@@ -0,0 +1,251 @@
+<template>
+  <div
+    class="max-w-lg min-w-[200px] shadow-lg rounded-md px-4 py-3 flex items-start gap-3 cursor-pointer select-none"
+    :class="[variantClasses, positionClasses]"
+    role="status"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+    @click="onClick"
+    ref="root"
+    v-show="visible"
+    @pointerdown.passive="onPointerDown"
+    @pointermove.passive="onPointerMove"
+    @pointerup.passive="onPointerUp"
+    @pointercancel.passive="onPointerCancel"
+  >
+    <div class="flex-1">
+      <div class="text-sm leading-tight" v-html="item.message"></div>
+      <div v-if="item.actions?.length" class="mt-2 flex gap-2">
+        <button v-for="(a, i) in item.actions" :key="i" @click.stop="onActionClick(a)" class="text-sm font-medium underline">
+          {{ a.label }}
+        </button>
+      </div>
+    </div>
+
+    <button v-if="showClose" @click.stop="closeLocal" class="ml-3 flex-none">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
+  import type { SnackInternal, SnackAction } from './types.ts'
+
+  const props = defineProps<{ item: SnackInternal }>()
+  const emit = defineEmits<{
+    close: (id: string) => void
+  }>()
+
+  const item = props.item
+
+  const visible = ref(true)
+  const paused = ref(false)
+  const root = ref<HTMLElement | null>(null)
+
+  let timer: number | null = null
+  let startTime = 0
+  let remaining = item.timeout
+
+  // pointer swipe state
+  let isPointerDown = false
+  let startX = 0
+  let currentX = 0
+  let translateX = 0
+
+  const showIcon = item.icon !== undefined ? true : true
+  const iconComponent = item.icon || defaultIconFor(item.variant)
+  const showClose = true
+
+  function startTimer() {
+    if (item.timeout === 0) return
+    clearTimer()
+    startTime = Date.now()
+    timer = window.setTimeout(() => {
+      closeLocal()
+    }, remaining)
+  }
+
+  function clearTimer() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  function onMouseEnter() {
+    if (!item.pauseOnHover) return
+    paused.value = true
+
+    if (timer) {
+      clearTimer()
+      const elapsed = Date.now() - startTime
+      remaining = Math.max(0, remaining - elapsed)
+    }
+  }
+
+  function onMouseLeave() {
+    if (!item.pauseOnHover) return
+
+    if (paused.value) {
+      paused.value = false
+      startTimer()
+    }
+  }
+
+  function onClick() {
+    if (item.closeOnClick) closeLocal()
+  }
+
+  function onActionClick(a: SnackAction) {
+    if (a.onClick) {
+      try {
+        a.onClick(item.meta)
+      } catch (e) {
+        console.warn(e)
+      }
+    }
+  }
+
+  function closeLocal() {
+    visible.value = false
+    // let animation settle then emit
+    setTimeout(() => {
+      // emit to container
+      emit('close', item.id)
+      if (item.onClose) item.onClose()
+    }, 180)
+  }
+
+  // pointer swipe handlers: horizontal swipe to dismiss
+  function onPointerDown(e: PointerEvent) {
+    isPointerDown = true
+    root.value?.setPointerCapture(e.pointerId)
+    startX = e.clientX
+  }
+  function onPointerMove(e: PointerEvent) {
+    if (!isPointerDown) return
+    currentX = e.clientX
+    translateX = currentX - startX
+    if (root.value) root.value.style.transform = `translateX(${translateX}px)`
+  }
+  function onPointerUp(e: PointerEvent) {
+    if (!isPointerDown) return
+    isPointerDown = false
+    root.value?.releasePointerCapture(e.pointerId)
+    // if swiped sufficiently
+    if (Math.abs(translateX) > 80) {
+      // animate out
+      if (root.value) root.value.style.transition = 'transform .16s ease, opacity .16s ease'
+      root.value!.style.transform = `translateX(${translateX > 0 ? 1000 : -1000}px)`
+      root.value!.style.opacity = '0'
+      setTimeout(() => closeLocal(), 160)
+    } else {
+      // reset
+      if (root.value) {
+        root.value.style.transition = 'transform .12s ease'
+        root.value.style.transform = ''
+      }
+    }
+    translateX = 0
+  }
+  function onPointerCancel() {
+    isPointerDown = false
+    translateX = 0
+  }
+
+  // read global direction and position the snackbar accordingly
+  const dirRef = ref<'ltr' | 'rtl'>('ltr')
+  const positionClasses = computed(() =>
+    dirRef.value === 'ltr' ? 'fixed left-4 top-4' : 'fixed right-4 top-4'
+  )
+
+  function getGlobalDir(): 'ltr' | 'rtl' {
+    const g = (window as any)?.globalrtl
+    if (typeof g === 'string') {
+      const v = g.toLowerCase()
+      if (v === 'ltr' || v === 'rtl') return v as 'ltr' | 'rtl'
+    }
+    const attr = document.documentElement.getAttribute('dir') || 'ltr'
+    return attr.toLowerCase() === 'rtl' ? 'rtl' : 'ltr'
+  }
+
+  let dirObserver: MutationObserver | null = null
+
+  onMounted(() => {
+    remaining = item.timeout
+    if (item.timeout > 0) startTimer()
+
+    // initialize position
+    dirRef.value = getGlobalDir()
+    // watch for dir changes on <html>
+    dirObserver = new MutationObserver(() => {
+      dirRef.value = getGlobalDir()
+    })
+    dirObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] })
+  })
+
+  onBeforeUnmount(() => {
+    clearTimer()
+    if (dirObserver) {
+      dirObserver.disconnect()
+      dirObserver = null
+    }
+  })
+
+  function defaultIconFor(variant: string) {
+    const icons: Record<string, string> = {
+      success: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414-1.414L8 11.172 5.707 8.879a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l8-8z" clip-rule="evenodd"/>
+      </svg>
+    `,
+      error: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+        <path fill-rule="evenodd" d="M8.257 3.099c.366-.446.957-.699 1.57-.699h.346c.613 0 1.204.253 1.57.699l6.518 7.944c.36.438.39 1.07.073 1.53a1.5 1.5 0 01-1.2.642H3.068a1.5 1.5 0 01-1.2-.642c-.317-.46-.287-1.092.073-1.53L8.257 3.1zM9 9a1 1 0 100 2 1 1 0 000-2zm1 4a1 1 0 10-2 0 1 1 0 002 0z" clip-rule="evenodd"/>
+      </svg>
+    `,
+      info: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+        <path d="M18 10A8 8 0 1110 2a8 8 0 018 8zM9 8a1 1 0 112 0 1 1 0 01-2 0zm0 2h2v4H9v-4z"/>
+      </svg>
+    `,
+      warning: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+        <path d="M8.257 3.099c.366-.446.957-.699 1.57-.699h.346c.613 0 1.204.253 1.57.699l6.518 7.944c.36.438.39 1.07.073 1.53a1.5 1.5 0 01-1.2.642H3.068a1.5 1.5 0 01-1.2-.642c-.317-.46-.287-1.092.073-1.53L8.257 3.1z"/>
+      </svg>
+    `,
+      default: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
+        <path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V5z"/>
+      </svg>
+    `
+    }
+
+    return icons[variant] || icons['default']
+  }
+
+  // compute tailwind classes by variant
+  const variantClasses = (() => {
+    switch (item.variant) {
+      case 'success':
+        return 'bg-green-50 text-green-800 border border-green-100'
+      case 'error':
+        return 'bg-red-50 text-red-800 border border-red-100'
+      case 'warning':
+        return 'bg-yellow-50 text-yellow-800 border border-yellow-100'
+      case 'info':
+        return 'bg-blue-50 text-blue-800 border border-blue-100'
+      default:
+        return 'bg-white text-slate-800 border border-slate-100'
+    }
+  })()
+</script>
+
+<style scoped></style>

package/src/pgo-components/plugins/SnackBarContainer.vue

@@ -0,0 +1,53 @@
+<template>
+  <!-- Teleport handled by mounting root to body in plugin. We render lists by position. -->
+  <div aria-hidden="false">
+    <div v-for="pos of positions" :key="pos" :class="containerClass(pos)">
+      <transition-group name="snack-list" tag="div">
+        <SnackBar v-for="item in itemsByPosition(pos)" :key="item.id" :item="item" @close="handleClose" />
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import type { SnackInternal } from './types.js'
+  import SnackBar from './SnackBar.vue'
+
+  const props = defineProps<{ state: { active: SnackInternal[]; queue: SnackInternal[] }; config: any }>()
+
+  const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right']
+
+  function containerClass(pos: string) {
+    // maping positions to tailwind utility container classes
+    const map: Record<string, string> = {
+      'top-left': 'fixed top-4 left-4 z-50 flex flex-col items-start space-y-2',
+      'top-center': 'fixed top-4 left-1/2 transform -translate-x-1/2 z-50 flex flex-col items-center space-y-2',
+      'top-right': 'fixed top-4 right-4 z-50 flex flex-col items-end space-y-2',
+      'bottom-left': 'fixed bottom-4 left-4 z-50 flex flex-col-reverse items-start space-y-2',
+      'bottom-center': 'fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 flex flex-col-reverse items-center space-y-2',
+      'bottom-right': 'fixed bottom-4 right-4 z-50 flex flex-col-reverse items-end space-y-2'
+    }
+
+    return map[pos] || map['bottom-left']
+  }
+
+  function itemsByPosition(pos: string) {
+    return props.state.active.filter(s => s.position === pos)
+  }
+
+  function handleClose(id: string) {
+    // emit an event into plugin state by calling global metho on window? We'll call provided state manipulation by pushing an event
+    // The plugin exposed functions via app.config.globalProperties but this instance doens't have direct access. We'll dispatch a custom event.
+
+    const e = new CustomEvent('snackbar-close', { detail: { id } })
+    window.dispatchEvent(e)
+  }
+</script>
+
+<style>
+  /* basis transiction styles for group */
+  .snack-list-move {
+    transition: transform 0.2s ease;
+  }
+</style>

package/src/pgo-components/plugins/SnackBarPlugin.ts

@@ -0,0 +1,136 @@
+import { App, createApp, reactive, readonly } from 'vue'
+import SnackBarContainer from './SnackBarContainer.vue'
+import type { SnackOptions, SnackInternal } from './types.ts'
+
+const DEFAULT_GLOBAL_OPTIONS = {
+  position: 'bottom-center', // top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
+  timeout: 4000,
+  transition: 'slide-up', // fade, slide-up, slide-down, slide-left, slide-right
+  mode: 'stack', //default mode
+  pauseOnHover: true,
+  closeOnClick: true,
+  rtl: false
+}
+
+export function SnackBarPlugin(app: App, options: Partial<typeof DEFAULT_GLOBAL_OPTIONS> = {}) {
+  const config = { ...DEFAULT_GLOBAL_OPTIONS, ...options }
+
+  const state = reactive({
+    //visible snack items
+    active: [] as SnackInternal[],
+
+    // queued snack items when using mode: 'queue'
+    queue: [] as SnackInternal[]
+  })
+
+  function generateId() {
+    return Math.random().toString(36).slice(2, 9)
+  }
+
+  function show(payload: SnackOptions) {
+    const id = payload.id ?? generateId()
+    const item: SnackInternal = {
+      id,
+      message: payload.message || '',
+      variant: payload.variant || 'default',
+      timeout: typeof payload.timeout === 'number' ? payload.timeout : config.timeout,
+      actions: payload.actions || [],
+      position: payload.position || config.position,
+      transition: payload.transition || config.transition,
+      closeOnClick: payload.closeOnClick ?? config.closeOnClick,
+      pauseOnHover: payload.pauseOnHover ?? config.pauseOnHover,
+      mode: payload.mode || config.mode,
+      onClose: payload.onClose ?? (() => {}),
+      color: payload.color,
+      icon: payload.icon,
+      rtl: payload.rtl ?? config.rtl,
+      meta: payload.meta ?? null
+    }
+
+    if (item.mode === 'queue') {
+        // if queue and there is an active, push to queue
+
+        if (state.active.length > 0){
+            state.queue.push(item)
+        } else {
+            state.active.push(item)
+        }
+    } else {
+        // stack
+        state.active.push(item)
+    }
+
+    return id
+
+  }
+
+  function close(id?: string) {
+    if (!id) return
+    const idx = state.active.findIndex((s) => s.id === id)
+    if (idx >= 0) {
+      state.active.splice(idx, 1)
+      // if we were using queue mode and there is something queue, push next
+      if (state.queue.length > 0) {
+        const next = state.queue.shift()!
+        state.active.push(next)
+      } else {
+        // maybe it's in queue, remove there too
+        const qidx = state.queue.findIndex(s => s.id === id)
+        if (qidx >= 0) state.queue.splice(qidx, 1)
+      }
+    }
+  }
+
+  function clear() {
+    state.active.splice(0)
+    state.queue.splice(0)
+  }
+
+  function success(message: string | SnackOptions, opts: Partial<SnackOptions> = {}) {
+    const payload = typeof message === 'string' ? { message, ...opts } : message
+    return show({ ...payload, variant: 'success' })
+  }
+
+  function error(message: string | SnackOptions, opts: Partial<SnackOptions> = {}) {
+    const payload = typeof message === 'string' ? { message, ...opts } : message
+    return show({ ...payload, variant: 'error' })
+  }
+
+  function info(message: string | SnackOptions, opts: Partial<SnackOptions> = {}) {
+    const payload = typeof message === 'string' ? { message, ...opts } : message
+    return show({ ...payload, variant: 'info' })
+  }
+
+  function warning(message: string | SnackOptions, opts: Partial<SnackOptions> = {}) {
+    const payload = typeof message === 'string' ? { message, ...opts } : message
+    return show({ ...payload, variant: 'warning' })
+  }
+
+  const api = {
+    state: readonly(state),
+    show,
+    success,
+    error,
+    info,
+    warning,
+    close,
+    clear,
+    config
+  }
+
+  // provide to app and globalProperties
+  app.provide('snackbar', api)
+  app.config.globalProperties.$snackbar = api
+
+  ;(window as any).__snackbar_api__ = api
+  window.addEventListener('snackbar-close', (ev: any) => {
+    const id = ev.detail?.id
+    if (id) api.close(id)
+  })
+
+  // mount container automatically to body
+  const mountEl = document.createElement('div')
+  document.body.appendChild(mountEl)
+  const vm = createApp(SnackBarContainer, { state, config })
+  vm.mount(mountEl)
+}