ChangeTimeDurationDropdown

src/components/ChangeTimeDurationDropdown.vue

Navigation low 8 usos Funcional

Dropdown funcional (stateless) para seleção de período de tempo em dashboards. Exibe trigger fixo "Last 7 days" + ícone ChevronDown e oferece 3 opções: Last 28 days, Last Month, Last Year. Sem props nem slots — emite apenas o evento timeDurationChanged.

Dropdown (Fechado / Aberto)

Trigger minimalista: texto <small>Last 7 days</small> + ícone ChevronDown 16px em flex. Dropdown com largura fixa w-32 (128px) e 3 itens.

Fechado

Last 7 days

Aberto

Last 7 days

<vx-card title="Sessions By Device">
  <template slot="actions">
    <change-time-duration-dropdown />
  </template>
  <!-- conteúdo do card -->
</vx-card>

Em Contexto — Slot Actions do VxCard

Padrão de uso dominante: inserido no slot actions do vx-card, aparece ao lado direito do título. Herda classes externas via data.staticClass (padrão Vue 2 funcional).

Sessions By Device

Last 7 days

<div class="vx-col w-full lg:w-1/2 flex flex-col">
  <change-time-duration-dropdown class="self-end" />
  <vue-apex-charts
    type="bar"
    height="200"
    :options="chartOptions"
    :series="series"
  />
</div>

Limitações conhecidas

⚠

Label "Last 7 days" hardcoded

Não pode ser customizado via prop. Não reflete a opção selecionada — sempre mostra "Last 7 days" mesmo após selecionar outro período.

⚠

Evento não escutado em nenhum uso real

Em todos os 8 usos do admin, @timeDurationChanged nunca é escutado. O componente funciona como elemento visual decorativo nas páginas demo do Vuexy.

⚠

Opções fixas em inglês

Last 28 days, Last Month, Last Year — sem i18n, sem prop para customizar a lista. O valor 'last-7-days' não está nas opções do dropdown (apenas no trigger).

ℹ

Candidato a substituição

Para uso real no Pedbot, considerar substituir por um vs-select ou VsDropdownCustom configurável com opções em português.

API

<!-- Sem props. Trigger e opções são hardcoded. -->

<!-- Uso básico (como no código real — sem listener): -->
<change-time-duration-dropdown />

<!-- Com listener (como deveria ser usado): -->
<change-time-duration-dropdown @timeDurationChanged="onPeriodChange" />

<!-- Com classe de posicionamento (herdada via data.staticClass): -->
<change-time-duration-dropdown class="self-end" />

Props

Componente funcional — sem props. Trigger e opções são hardcoded no template.

Eventos

Evento	Payload	Valores possíveis	Descrição
`@timeDurationChanged`	String	`'last-28-days'` \| `'last-month'` \| `'last-year'`	Emitido ao selecionar um período. Acessado via `listeners.timeDurationChanged` no contexto funcional Vue 2.

Dependências

Vuesax: vs-dropdown (vs-trigger-click), vs-dropdown-menu (class='w-32'), vs-dropdown-item

Custom: feather-icon (ChevronDownIcon, svgClasses='h-4 w-4')

Onde é usado

src/views/DashboardECommerce.vue

src/views/report/Report.vue

src/views/report/ReportNPS.vue

src/views/analytics/Analytics.vue

src/views/report/PlatformUsageReport.vue