SEO Select

<script setup lang="ts">
import { SeoSelect, SeoSelectSearch } from 'seo-select/vue';
import 'seo-select/styles';

const options = [
  { value: 'vue', label: 'Vue 3' },
  { value: 'nuxt', label: 'Nuxt 3' },
  { value: 'vite', label: 'Vite' }
];

const handleSelect = (detail: { label: string; value: string }) => {
  console.log('Selected:', detail);
};
</script>

<template>
  <SeoSelect
    name="framework"
    theme="float"
    :optionItems="options"
    @select="handleSelect"
  />
</template>

// With Search and Multiple Selection
<script setup lang="ts">
import { ref } from 'vue';
import { SeoSelectSearch } from 'seo-select/vue';

const selectRef = ref();
const handleReset = () => selectRef.value?.reset();
</script>

<template>
  <SeoSelectSearch
    ref="selectRef"
    name="city"
    multiple
    showReset
    :optionItems="[
      { value: 'seoul', label: 'Seoul' },
      { value: 'tokyo', label: 'Tokyo' }
    ]"
    @select="(detail) => console.log('Selected:', detail)"
    @searchChange="(detail) => console.log('Search:', detail.searchText)"
  />
</template>

import { Component } from '@angular/core';
import { SeoSelectComponent, SeoSelectSearchComponent } from 'seo-select/angular';
import 'seo-select/styles';

@Component({
  selector: 'app-select-demo',
  standalone: true,
  imports: [SeoSelectComponent, SeoSelectSearchComponent],
  template: `
    <app-seo-select
      name="framework"
      theme="float"
      [optionItems]="options"
      (selectEvent)="onSelect($event)"
      (resetEvent)="onReset($event)"
    />
  `
})
export class SelectDemoComponent {
  options = [
    { value: 'angular', label: 'Angular' },
    { value: 'ionic', label: 'Ionic' },
    { value: 'ngrx', label: 'NgRx' }
  ];

  onSelect(detail: { label: string; value: string }) {
    console.log('Selected:', detail);
  }

  onReset(detail: any) {
    console.log('Reset:', detail);
  }
}

// With Search
@Component({
  selector: 'app-search-demo',
  standalone: true,
  imports: [SeoSelectSearchComponent],
  template: `
    <app-seo-select-search
      name="city"
      [multiple]="true"
      [showReset]="true"
      [optionItems]="options"
      (selectEvent)="onSelect($event)"
      (searchChangeEvent)="onSearchChange($event)"
    />
  `
})
export class SearchDemoComponent {
  // ...
}

import { SeoSelect, SeoSelectSearch } from 'seo-select/solid';
import 'seo-select/styles';

export default function MyComponent() {
  const options = [
    { value: 'solid', label: 'Solid.js' },
    { value: 'start', label: 'SolidStart' }
  ];

  return (
    <SeoSelect
      name="framework"
      theme="float"
      optionItems={options}
      onSelect={(e) => console.log('Selected:', e.detail)}
    />
  );
}

// With Ref
export default function SearchExample() {
  let selectEl;

  const handleReset = () => {
    selectEl?.reset?.();
  };

  return (
    <>
      <SeoSelectSearch
        ref={(el) => { selectEl = el; }}
        name="city"
        multiple
        optionItems={[
          { value: 'seoul', label: 'Seoul' },
          { value: 'tokyo', label: 'Tokyo' }
        ]}
        onSelect={(e) => console.log('Selected:', e.detail)}
        onSearchChange={(e) => console.log('Search:', e.detail.searchText)}
      />
      <button onClick={handleReset}>Reset</button>
    </>
  );
}

import { component$ } from '@builder.io/qwik';
import { SeoSelect, SeoSelectSearch } from 'seo-select/qwik';
import 'seo-select/styles';

export const SelectDemo = component$(() => {
  const options = [
    { value: 'qwik', label: 'Qwik' },
    { value: 'qwikcity', label: 'QwikCity' }
  ];

  return (
    <SeoSelect
      name="framework"
      theme="float"
      optionItems={options}
      onSelect$={(e) => console.log('Selected:', e.detail)}
    />
  );
});

// With Search
export const SearchDemo = component$(() => {
  return (
    <SeoSelectSearch
      name="city"
      multiple
      showReset
      optionItems={[
        { value: 'seoul', label: 'Seoul' },
        { value: 'tokyo', label: 'Tokyo' }
      ]}
      onSelect$={(e) => console.log('Selected:', e.detail)}
      onSearchChange$={(e) => console.log('Search:', e.detail.searchText)}
    />
  );
});

import 'seo-select/types';
import 'seo-select/styles';
import 'seo-select/components/seo-select-search';

const select = document.createElement('seo-select-search');

select.optionItems = [
  { value: 'vanilla', label: 'Vanilla JS' },
  { value: 'typescript', label: 'TypeScript' }
];
select.theme = 'float';
select.multiple = true;

select.addEventListener('onSelect', (event) => {
  console.log('Selected:', event.detail);
});

select.addEventListener('onSearchChange', (event) => {
  console.log('Search:', event.detail.searchText);
});

document.body.appendChild(select);