Copy<template>
  <div class="tuff-demo-row">
    <TxButton size="sm">Action</TxButton>
    <TuffSwitch :model-value="true" />
    <TxStatusBadge text="Online" status="success" />
    <TxTag label="Focus" />
    <TxProgressBar :percentage="62" style="width: 140px;" />
  </div>
</template>

 Copy<script setup lang="ts">
import { ref } from 'vue'

const query = ref('')
const selectedKeys = ref([1])
const automationEnabled = ref(true)
</script>

<template>
  <section class="workflow-panel">
    <header>
      <h3>Release workspace</h3>
      <TxButton variant="primary" size="sm" icon="i-carbon-rocket">Deploy</TxButton>
    </header>
    <TuffInput v-model="query" placeholder="Search tasks" prefix-icon="i-carbon-search" clearable />
    <TuffSwitch v-model="automationEnabled" />
    <TxProgressBar :percentage="84" status="success" show-text />
    <TxStatusBadge text="Reviewing" status="warning" />
    <TxDataTable v-model:selected-keys="selectedKeys" :columns="columns" :data="rows" row-key="id" selectable />
  </section>
</template>

 Copy<script setup lang="ts">
import DashboardSparklineChart from '~/components/dashboard/DashboardSparklineChart.client.vue'
</script>

<template>
  <DashboardSparklineChart
    :values="[18, 24, 21, 36, 42, 38, 54]"
    :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    color="var(--tx-color-primary, #409eff)"
    show-grid
  />
</template>

 Copy<template>
  <section class="grid gap-3">
    <TxStatCard
      variant="progress"
      value="99.9%"
      label="API availability"
      meta="Normal"
      :progress="99"
      icon-class="i-carbon-cloud-monitoring text-[var(--tx-color-success)]"
    />
    <TxStatusBadge text="Review done" status="success" size="sm" />
    <TxProgressBar :percentage="86" status="success" show-text />
  </section>
</template>

 Copy<template>
  <section class="grid gap-3">
    <TxLoadingState title="Loading rules" surface="card" />
    <TxEmptyState variant="no-data" title="No automation rules yet" surface="card" />
    <TxErrorState title="Rules failed to load" surface="card" />
  </section>
</template>

 Copy<script setup lang="ts">
import { toast } from '@talex-touch/tuffex/utils'
import { ref } from 'vue'

const syncing = ref(true)
</script>

<template>
  <section class="grid gap-3">
    <TxToastHost />
    <TxTooltip content="Tooltip explains the current action only.">
      <TxButton @click="toast({ title: 'Sync task queued', duration: 0 })">Send toast</TxButton>
    </TxTooltip>
    <TxLoadingOverlay :loading="syncing" text="Refreshing task queue…">
      <TxSpinner :size="16" />
    </TxLoadingOverlay>
  </section>
</template>

 Copy<script setup lang="ts">
import { computed, ref } from 'vue'

const query = ref('')
const selectedScope = ref<string | number>('all')
const scopeOptions = [
  { value: 'all', label: 'All' },
  { value: 'docs', label: 'Docs' },
  { value: 'tasks', label: 'Tasks' },
]
const filteredRecords = computed(() => (query.value ? [] : scopeOptions))
</script>

<template>
  <section class="grid gap-3">
    <TxSearchInput v-model="query" remote placeholder="Search plugins / docs / tasks" />
    <TxSearchSelect v-model="selectedScope" :options="scopeOptions" placeholder="Filter scope" />
    <TxSearchEmpty v-if="!filteredRecords.length" surface="card" />
  </section>
</template>

 Copy<template>
  <section class="grid gap-3">
    <TxDataTable :columns="columns" :data="pagedRows" row-key="id" selectable />
    <TxPagination v-model:current-page="page" :total="rows.length" :page-size="4" show-info />
    <TxSkeleton :loading="true" :lines="3" />
  </section>
</template>

 Copy<script setup lang="ts">
import { ref } from 'vue'

const selectedScope = ref<string | number>('release')
const ownerTeam = ref<string | number | undefined>('docs')
const assignedKeys = ref<Array<string | number>>(['read-docs'])
</script>

<template>
  <section class="grid gap-3">
    <TxTree v-model="selectedScope" :nodes="scopeNodes" />
    <TxTreeSelect v-model="ownerTeam" :nodes="teamNodes" placeholder="Owner team" />
    <TxTransfer v-model="assignedKeys" :data="resources" />
    <TxTimeline>
      <TxTimelineItem title="Assign resources" time="10:20" color="success" active />
    </TxTimeline>
  </section>
</template>

 Copy<script setup lang="ts">
import { ref } from 'vue'

const releasePath = ref(['desktop', 'stable', 'macos'])
const packageFormat = ref('signed')
const rolloutMode = ref('phased')
const riskLevel = ref(2)
const traffic = ref(35)
const labels = ref(['nexus', 'verified'])
const scopeOptions = [
  {
    value: 'desktop',
    label: 'Desktop',
    children: [
      {
        value: 'stable',
        label: 'Stable',
        children: [{ value: 'macos', label: 'macOS', leaf: true }],
      },
    ],
  },
]
const riskSegments = [
  { value: 1, label: 'Low' },
  { value: 2, label: 'Med' },
  { value: 3, label: 'High' },
  { value: 4, label: 'Freeze' },
]
</script>

<template>
  <section class="grid gap-3">
    <TxCascader v-model="releasePath" :options="scopeOptions" placeholder="Release scope" />
    <TxFlatSelect v-model="packageFormat" placeholder="Package format">
      <TxFlatSelectItem value="signed" label="Signed build" />
    </TxFlatSelect>
    <TxFlatSelect v-model="rolloutMode" placeholder="Rollout mode">
      <TxFlatSelectItem value="phased" label="Phased" />
    </TxFlatSelect>
    <TxSegmentedSlider v-model="riskLevel" :segments="riskSegments" />
    <TxSlider v-model="traffic" :min="5" :max="100" :step="5" show-value />
    <TxTagInput v-model="labels" placeholder="Press Enter to add tags" />
  </section>
</template>

 Copy<template>
  <section class="grid gap-3">
    <TxDropdownMenu>
      <template #trigger>
        <TxButton>Release actions</TxButton>
      </template>
      <TxDropdownItem>Quick release</TxDropdownItem>
    </TxDropdownMenu>
    <TxPopover>
      <template #reference>
        <TxButton variant="secondary">Policy notes</TxButton>
      </template>
      Keep popovers short and action-light.
    </TxPopover>
    <TxTabs placement="left" indicator-variant="pill">
      <TxTabItem name="Overview" activation>Overview settings</TxTabItem>
    </TxTabs>
    <TxDrawer :visible="false" title="Release policy" />
  </section>
</template>