pgo-uiux2 1.0.0

package/src/components/examples/TextFieldExample.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="space-y-6 mx-auto max-w-4xl">
+    <h3 class="text-xl font-semibold">TextField Examples</h3>
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <!-- Basic field with validation and clearable -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2"
+          >Basic (required, clearable, rules)</label
+        >
+        <TextField
+          v-model="modelBasic"
+          label="ފުރިހަމަ ނަން"
+          required
+          clearable
+          :rules="[
+            (v) => !!v || 'ނަމެއް ބޭނުން ވާނެ',
+            (v) => (v && v.length >= 3) || 'މަދުވެގެން 3 އަކުރު އިންނަންވާނެ',
+          ]"
+        />
+        <div class="mt-2 text-sm text-gray-500">Value: {{ modelBasic }}</div>
+      </div>
+
+      <!-- Variant examples -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2"
+          >Variants</label
+        >
+        <div class="space-y-3">
+          <div v-for="v in variants" :key="v">
+            <TextField
+              v-model="variantValues[v]"
+              :variant="v"
+              :label="`Variant: ${v}`"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- Density examples -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2"
+          >Density</label
+        >
+        <div class="space-y-3">
+          <TextField v-model="modelDensityDefault" label="Default density" />
+          <TextField
+            v-model="modelDensityCompact"
+            label="Compact"
+            density="compact"
+          />
+          <TextField
+            v-model="modelDensityComfortable"
+            label="Comfortable"
+            density="comfortable"
+          />
+          <!-- <TextField label="With slot prepend">
+            <template #prepend>
+              <span class="text-blue-500">💡</span>
+              <HeroIcon name="light-bulb" />
+            </template>
+          </TextField> -->
+        </div>
+      </div>
+
+      <!-- Icons & slots -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2"
+          >Icons & Slots</label
+        >
+        <div class="space-y-3">
+          <TextField v-model="modelIconSlot" label="With slot prepend">
+            <template #prepend>
+              <HeroIcon name="search" />
+            </template>
+          </TextField>
+
+          <TextField v-model="value" label="Custom control">
+            <template #control="{ attrs, events }">
+              <div class="flex items-center">
+                <HeroIcon name="user" />
+                <input v-bind="attrs" v-on="events" />
+                <HeroIcon name="check" />
+              </div>
+            </template>
+          </TextField>
+
+          <TextField v-model="modelAppend" label="With append" clearable>
+            <template #append>
+              <button class="ml-2 text-gray-600" @click="onAppendClick">
+                Go
+              </button>
+              asdf
+            </template>
+          </TextField>
+
+          <TextField v-model="modelInnerIcons" label="Inner icons">
+            <template #control="{ attrs, events }">
+              <div class="flex items-center gap-2">
+                <HeroIcon name="user" />
+                <input
+                  class="w-full bg-transparent outline-none"
+                  v-bind="attrs"
+                  v-on="events"
+                />
+                <HeroIcon name="check" />
+              </div>
+            </template>
+          </TextField>
+        </div>
+      </div>
+
+      <!-- Usage with messages and hints -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2"
+          >Hints & Messages</label
+        >
+        <div class="space-y-3">
+          <TextField
+            v-model="modelHint"
+            label="With hint"
+            hint="This is a hint"
+            persistentHint
+          />
+          <!-- <TextField v-model="modelMessage" label="With message" hint="asdf" messages="We have a message" /> -->
+          <!-- <TextField v-model="modelError" label="With error" :error="true" errorMessages="Invalid name" /> -->
+        </div>
+      </div>
+
+      <!-- Disabled and readonly -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-2"
+          >State (disabled, readonly)</label
+        >
+        <div class="space-y-3">
+          <TextField
+            v-model="modelDisabled"
+            label="Disabled"
+            size="lg"
+            disabled
+          />
+          <TextField v-model="modelReadonly" label="Readonly" readonly />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import TextField from "../pgo/inputs/TextField.vue";
+import HeroIcon from "../pgo/HeroIcon.vue";
+
+const modelBasic = ref("");
+const variants = ["outlined", "filled"];
+const variantValues = reactive({});
+variants.forEach((v) => (variantValues[v] = ""));
+
+const modelDensityDefault = ref("");
+const modelDensityCompact = ref("");
+const modelDensityComfortable = ref("");
+
+const modelIconSlot = ref("");
+const modelAppend = ref("");
+const modelInnerIcons = ref("");
+
+const modelHint = ref("");
+const modelMessage = ref("");
+const modelError = ref("");
+
+const modelDisabled = ref("Disabled text");
+const modelReadonly = ref("Readonly text");
+
+function onAppendClick() {
+  alert("Append button clicked");
+}
+</script>
+
+<style scoped>
+/* Add small layout tweaks */
+</style>

package/src/components/examples/TextareaExample.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="p-6 max-w-4xl mx-auto space-y-8">
+    <h2 class="text-3xl font-bold text-gray-800 mb-6">Textarea Components</h2>
+
+    <Card title="Basic Textarea">
+      <div class="space-y-6 grid grid-cols-3 gap-6 items-start">
+        <!-- Default -->
+        <Textarea
+          v-model="basicValue"
+          label="Default Textarea"
+          placeholder="Enter your text here..."
+          hint="This is a hint text"
+        />
+
+        <!-- With character count -->
+        <Textarea
+          v-model="countValue"
+          label="With Character Count"
+          placeholder="Type something..."
+          :maxlength="200"
+          show-count
+          rows="4"
+        />
+
+        <!-- Required field -->
+        <Textarea
+          v-model="requiredValue"
+          label="Required Field"
+          placeholder="This field is required"
+          required
+          :error="requiredError"
+        />
+      </div>
+    </Card>
+
+    <Card title="Variants">
+      <div class="space-y-6 grid grid-cols-3 gap-6 items-start">
+        <!-- Default variant -->
+        <Textarea
+          v-model="variantValue"
+          label="Default Variant"
+          placeholder="Default style"
+          variant="default"
+        />
+
+        <!-- Outlined variant -->
+        <Textarea
+          v-model="variantValue"
+          label="Outlined Variant"
+          placeholder="Outlined style"
+          variant="outlined"
+        />
+
+        <!-- Filled variant -->
+        <Textarea
+          v-model="variantValue"
+          label="Filled Variant"
+          placeholder="Filled style"
+          variant="filled"
+        />
+      </div>
+    </Card>
+
+    <Card title="Sizes">
+      <div class="space-y-6 grid grid-cols-3 gap-6 items-start">
+        <Textarea
+          v-model="sizeValue"
+          label="Small Size"
+          placeholder="Small textarea"
+          size="sm"
+        />
+
+        <Textarea
+          v-model="sizeValue"
+          label="Medium Size (Default)"
+          placeholder="Medium textarea"
+          size="md"
+        />
+
+        <Textarea
+          v-model="sizeValue"
+          label="Large Size"
+          placeholder="Large textarea"
+          size="lg"
+        />
+      </div>
+    </Card>
+
+    <Card title="States">
+      <div class="space-y-6 grid grid-cols-3 gap-6 items-start">
+        <!-- Disabled -->
+        <Textarea
+          v-model="stateValue"
+          label="Disabled"
+          placeholder="This is disabled"
+          disabled
+        />
+
+        <!-- Readonly -->
+        <Textarea
+          v-model="readonlyValue"
+          label="Readonly"
+          placeholder="This is readonly"
+          readonly
+        />
+
+        <!-- Error state -->
+        <Textarea
+          v-model="errorValue"
+          label="With Error"
+          placeholder="This has an error"
+          error="This field is required"
+        />
+      </div>
+    </Card>
+
+    <Card title="With Slots">
+      <div class="space-y-6 grid grid-cols-3 gap-6 items-start">
+        <!-- Custom label -->
+        <Textarea v-model="slotValue" placeholder="Custom label slot">
+          <template #label>
+            <span class="flex items-center gap-2">
+              📝 Custom Label
+            </span>
+          </template>
+        </Textarea>
+
+        <!-- Custom hint -->
+        <Textarea v-model="slotValue" label="Custom Hint" placeholder="Type here">
+          <template #hint>
+            <span class="flex items-center gap-1">
+              💡 This is a custom hint with icon
+            </span>
+          </template>
+        </Textarea>
+      </div>
+    </Card>
+
+    <!-- Preview -->
+    <Card title="Live Preview">
+      <div class="p-4 bg-muted rounded-lg">
+        <h3 class="font-semibold mb-2">Output:</h3>
+        <pre class="text-sm whitespace-pre-wrap">{{ basicValue || 'Type something above...' }}</pre>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import Card from '../pgo/Card.vue'
+import Textarea from '../pgo/inputs/Textarea.vue'
+
+const basicValue = ref('')
+const countValue = ref('')
+const requiredValue = ref('')
+const requiredError = ref('')
+const variantValue = ref('This is a sample text showing different variants.')
+const sizeValue = ref('Sample text for different sizes.')
+const stateValue = ref('This textarea is disabled')
+const readonlyValue = ref('This content is readonly')
+const errorValue = ref('')
+const slotValue = ref('')
+
+// Validate required field
+watch(requiredValue, (val) => {
+  if (!val) {
+    requiredError.value = 'This field is required'
+  } else {
+    requiredError.value = ''
+  }
+})
+</script>

package/src/components/examples/ThemeToggle.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="vts-toggle">
+    <label>
+      Variant
+      <select v-model="selected" @change="apply">
+        <option v-for="o in options" :key="o.value" :value="o.value">{{ o.label }}</option>
+      </select>
+    </label>
+
+    <label style="margin-left: 1rem">
+      Theme
+      <select v-model="themeName" @change="applyName">
+        <option v-for="k in themeKeys" :key="k" :value="k">{{ k }}</option>
+      </select>
+    </label>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed } from 'vue'
+
+  const options = [
+    { label: 'System', value: 'system' },
+    { label: 'Light', value: 'light' },
+    { label: 'Dark', value: 'dark' }
+  ]
+
+  // read global plugin getter (using window if dev demo) OR require app.config.globalProperties
+  const themeKeys = typeof window !== 'undefined' && window.__VTS_THEMES__ ? window.__VTS_THEMES__ : ['default', 'classic']
+
+  const selected = ref('system')
+  const themeName = ref(themeKeys[0])
+
+  function apply() {
+    if (window.__VTS_PLUGIN__) window.__VTS_PLUGIN__.setTheme(themeName.value, selected.value)
+    else console.warn('[vts] plugin not available on window')
+  }
+
+  function applyName() {
+    if (window.__VTS_PLUGIN__) window.__VTS_PLUGIN__.setTheme(themeName.value, selected.value)
+  }
+</script>
+
+<style>
+  .vts-toggle {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+</style>

package/src/components/examples/TimelineExample.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import Timeline, { type TimelineItem } from '../pgo/Timeline.vue'
+  import { ref } from 'vue'
+
+  const items = ref<TimelineItem[]>([
+    { id: 1, title: 'Project Kickoff', time: '2025-01-05', content: 'Initial meeting and scope alignment.', status: 'primary' },
+    { id: 2, title: 'Design Phase', time: '2025-01-20', content: 'Wireframes and visual design completed.', status: 'info' },
+    { id: 3, title: 'Development', time: '2025-02-10', content: 'Core features implemented and tested.', status: 'success' },
+    { id: 4, title: 'UAT', time: '2025-03-01', content: 'User acceptance tests and fixes.', status: 'warning' },
+    { id: 5, title: 'Launch', time: '2025-03-15', content: 'Production release and monitoring.', status: 'primary' }
+  ])
+
+  const dhivehiItems = ref<TimelineItem[]>([
+    { id: 1, title: 'ފުރަތަމަ މަރުހަލާ', time: '2025-01-05', content: 'ފުރަތަމަ މަރުހަލާގެ ހިންގިކަންކަން', status: 'success' },
+    { id: 2, title: 'ދެވަނަ މަރުހަލާ', time: '2025-01-20', content: 'ދެވަނަ މަރުހަލާގެ ހިންގިކަންކަން', status: 'success' },
+    { id: 3, title: 'ތިންވަނަ މަރުހަލާ', time: '2025-02-10', content: 'ތިންވަނަ މަރުހަލާގެ ހިންގިކަންކަން', status: 'success' },
+    { id: 4, title: 'ހަތަރުވަނަ މަރުހަލާ', time: '2025-03-01', content: 'ހަތަރުވަނަ މަރުހަލާގެ ހިންގިކަންކަން', status: 'success' },
+    { id: 5, title: 'ފަސްވަނަ މަރުހަލާ', time: '2025-03-15', content: 'ފަސްވަނަ މަރުހަލާގެ ހިންގިކަންކަން', status: 'success' }
+  ])
+</script>
+
+<template>
+  <div class="p-6 space-y-10">
+    <h2 class="text-xl font-semibold text-center">Timeline</h2>
+
+    <!-- Horizontal -->
+    <section>
+      <h3 class="mb-2 font-medium text-center">Horizontal</h3>
+      <Timeline :items="items" direction="horizontal" align="center" :elevation="1" clickable />
+    </section>
+
+    <!-- Vertical, both sides (alternate) -->
+    <div class="mb-20">
+      <h3 class="mb-2 font-medium text-center">Vertical (Both sides, alternate)</h3>
+      <Timeline :items="items" direction="vertical" side="both" :alternate="true" :elevation="0" clickable />
+    </div>
+
+    <!-- Custom Card Slot -->
+    <section>
+      <h3 class="mb-2 font-medium text-center">Custom Card Slot</h3>
+      <Timeline :items="items" direction="vertical" side="both" :alternate="true" :elevation="1">
+        <template #default="{ item, index }">
+          <div>
+            <div class="timeline-title">#{{ index + 1 }} — {{ item.title }}</div>
+            <div v-if="item.time" class="timeline-time">{{ item.time }}</div>
+            <div class="timeline-content">Custom slot content: {{ item.content }}</div>
+          </div>
+        </template>
+      </Timeline>
+    </section>
+
+    <!-- Vertical, one side (LTR/RTL aware) -->
+    <section>
+      <h3 class="mb-2 font-medium">Vertical (One side)</h3>
+      <Timeline :items="items" direction="vertical" side="one" :elevation="3" clickable condensed />
+    </section>
+
+    <!-- Vertical, one side (LTR/RTL aware) -->
+    <section dir="rtl">
+      <h3 class="mb-2 font-medium">Vertical (One side)</h3>
+      <Timeline class="faruma"  :items="dhivehiItems" direction="vertical" side="one" :elevation="1" clickable condensed />
+    </section>
+  </div>
+</template>
+
+<style scoped></style>

package/src/components/examples/TipTapEditorExample.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <TipTapEditor v-model="editorContent" :maximumLength="500" />
+  </div>
+</template>
+
+<script>
+  import TipTapEditor from '../pgo/TipTapEditor.vue'
+
+  export default {
+    components: {
+      TipTapEditor
+    },
+    data() {
+      return {
+        editorContent: ''
+      }
+    }
+  }
+</script>

package/src/components/examples/TooltipExample.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="grid grid-cols-4 justify-center gap-20">
+    <!-- <Tooltip v-model="open" placement="bottom" :offset="{ x: 0, y: 8 }" :arrow="true">
+      <template #activator="{ props }">
+        <Button @mouseenter="props.open()" @mouseleave="props.close()">Hover me</Button>
+      </template>
+      Hovered
+    </Tooltip>
+
+    <Tooltip placement="right" :open-on-hover="true" :arrow="true">
+      <template #activator="{ props }">
+        <Button @click="props.open()">Hover again</Button>
+      </template>
+      Hovered
+    </Tooltip>
+
+    <Tooltip placement="top" :open-on-hover="true" :arrow="true">
+      <template #activator="{ props }">
+        <Button class="faruma" @click="props.open()">ބަޓަން</Button>
+      </template>
+      <p class="faruma">މިއީ އެހީތެރިކަމެއް</p>
+    </Tooltip>
+
+    <Tooltip placement="left" :open-on-hover="true" :arrow="true">
+      <template #activator="{ props }">
+        <Button class="faruma" @click="props.open()">ފިތް</Button>
+      </template>
+      <p class="faruma">މިއީވެސް އެހީތެރިކަމެއް</p>
+    </Tooltip> -->
+
+    <!-- Directive-based tooltips -->
+
+    <!-- Simple text tooltip -->
+    <Button v-tooltip.bottom="{en: 'Bottom', dv: 'ދެން'}">Bottom</Button>
+
+    <Button v-tooltip.top="'Top'">Top</Button>
+
+    <!-- Placement and offset options -->
+    <Button v-tooltip.left="'Left side'">Left</Button>
+
+    <!-- RTL text demonstrates left/right flipping -->
+    <Button v-tooltip.right="{en: 'Right', dv: 'ރައިޓް'}"></Button>
+    <div v-tooltip="{en: 'Hello', dv: 'ހެލޯ'}">Hover me</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import Tooltip from '../pgo/Tooltip.vue'
+  import Button from '../pgo/Button.vue'
+
+  const open = ref(false)
+</script>