Select Field with Search - AlpineJs + Tailwind

AlpineJS

@AlexP

Carousel with only Tailwind CSS + Alpine.js Image gallery Lightbox modal Alpinejs store accessible from outside Select Field with Search - AlpineJs + Tailwind

#alpinejs #tailwind

Back to top button alpineJS + TailwindCSS

<button x-cloak x-data="{scroll : false}" @scroll.window="document.documentElement.scrollTop > 20 ? scroll = true : scroll = false" x-show="scroll" @click="window.scrollTo({top: 0, behavior: 'smooth'})" type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" class="fixed inline-block p-3 text-xs font-medium leading-tight text-white uppercase transition duration-150 ease-in-out bg-blue-600 rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg bottom-5 right-5" id="btn-back-to-top" x-transition.opacity>
        <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="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
</button>

#html #alpinejs

Set boolean to true after scrolling on page using Alpine.js

<div
    class="justify-between py-6 md:flex"
    x-data="{
        open: false,
        hasScrolled: false,
        reactOnScroll() {
            if (this.$el.getBoundingClientRect().top < 120 && window.scrollY > 120) {
                this.hasScrolled = true;
            } else {
                this.hasScrolled = false;
            }
        } 
    }"
    x-init="reactOnScroll()"
    @scroll.window="reactOnScroll()"
>

#shop #alpinejs

Carousel with only Tailwind CSS + Alpine.js

<div class="bg-teal-100 h-screen flex flex-col justify-center items-center">
  
  <div 
    class="max-w-4xl mx-auto relative"
    x-data="{ activeSlide: 1, slides: [1, 2, 3, 4, 5] }"
   >
    <!-- Slides -->
    <template x-for="slide in slides" :key="slide">
      <div
         x-show="activeSlide === slide"
         class="p-24 font-bold text-5xl h-64 flex items-center bg-teal-500 text-white rounded-lg">
        <span class="w-12 text-center" x-text="slide"></span>
        <span class="text-teal-300">/</span>
        <span class="w-12 text-center" x-text="slides.length"></span>
      </div>
    </template>
    
    <!-- Prev/Next Arrows -->
    <div class="absolute inset-0 flex">
      <div class="flex items-center justify-start w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow-lg rounded-full w-12 h-12 -ml-6"
          x-on:click="activeSlide = activeSlide === 1 ? slides.length : activeSlide - 1">
          &#8592;
         </button>
      </div>
      <div class="flex items-center justify-end w-1/2">
        <button 
          class="bg-teal-100 text-teal-500 hover:text-orange-500 font-bold hover:shadow rounded-full w-12 h-12 -mr-6"
          x-on:click="activeSlide = activeSlide === slides.length ? 1 : activeSlide + 1">
          &#8594;
        </button>
      </div>        
    </div>

    <!-- Buttons -->
    <div class="absolute w-full flex items-center justify-center px-4">
      <template x-for="slide in slides" :key="slide">
        <button
          class="flex-1 w-4 h-2 mt-4 mx-2 mb-0 rounded-full overflow-hidden transition-colors duration-200 ease-out hover:bg-teal-600 hover:shadow-lg"
          :class="{ 
              'bg-orange-600': activeSlide === slide,
              'bg-teal-300': activeSlide !== slide 
          }" 
          x-on:click="activeSlide = slide"
        ></button>
      </template>
    </div>
  </div>
  
  </div>
</div>

#shop #alpinejs

Image gallery

<!-- component -->
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
		<script defer src="https://unpkg.com/alpinejs@3.7.0/dist/cdn.min.js"></script>
	</head>
	<body>
        <div class="flex-shrink-0">
            <div x-data="photoGalleryApp" class="max-w-xl flex flex-col">
                <div class="flex items-center sm:h-80">
                    <div :class="{'cursor-not-allowed opacity-50': ! hasPrevious()}"  class="hidden sm:block cursor-pointer">
                        <svg version="1.0" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" class="h-8" x-on:click="previousPhoto()">
                            <path d="m42.166 55.31-24.332-25.31 24.332-25.31v50.62z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.125"/>
                        </svg>
                    </div>
                    <div class="w-full sm:w-108 flex justify-center">
                        <img x-ref="mainImage" class="w-full sm:w-auto sm:h-80" src="" loading="lazy" />
                    </div>
                    <div :class="{'cursor-not-allowed opacity-50': ! hasNext()}"  class="hidden sm:block cursor-pointer">
                        <svg version="1.0" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" class="h-8" x-on:click="nextPhoto()">
                            <path d="m17.834 55.31 24.332-25.31-24.332-25.31v50.62z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.125"/>
                        </svg>
                    </div>
                </div>
                <div class="flex justify-center mt-1 space-x-1">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/58049699/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 0}" class="h-16 w-16" x-on:click="pickPhoto(0)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/100821385/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 1}" class="h-16 w-16" x-on:click="pickPhoto(1)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/75873313/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 2}" class="h-16 w-16" x-on:click="pickPhoto(2)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/65267550/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 3}" class="h-16 w-16" x-on:click="pickPhoto(3)">
                    <img src="https://inaturalist-open-data.s3.amazonaws.com/photos/58914463/square.jpg" :class="{'ring-2 opacity-50': currentPhoto == 4}" class="h-16 w-16" x-on:click="pickPhoto(4)">
                </div>
            </div>
        </div>

        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('photoGalleryApp', () => ({
                currentPhoto: 0,
                photos: [
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/58049699/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/100821385/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/75873313/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/65267550/medium.jpg",
                    "https://inaturalist-open-data.s3.amazonaws.com/photos/58914463/medium.jpg"
                ],
                init() { this.changePhoto(); },
                nextPhoto() {
                    if ( this.hasNext() ) {
                        this.currentPhoto++;
                        this.changePhoto();
                    }
                },
                previousPhoto() {
                    if ( this.hasPrevious() ) {
                        this.currentPhoto--;
                        this.changePhoto();
                    }
                },
                changePhoto() {
                    this.$refs.mainImage.src = this.photos[this.currentPhoto];
                },
                pickPhoto(index) {
                    this.currentPhoto = index;
                    this.changePhoto();
                },
                hasPrevious() {
                    return this.currentPhoto > 0;
                },
                hasNext() {
                    return this.photos.length > (this.currentPhoto + 1);
                }
                }))
            })
        </script>
    </body>
</html>

#shop #alpinejs

Lightbox modal

<!-- component -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
    <div x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }">
        <template @img-modal.window="imgModal = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;" x-if="imgModal">
          <div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" x-on:click.away="imgModalSrc = ''" class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75">
            <div @click.away="imgModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto">
              <div class="z-50">
                <button @click="imgModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none">
                  <svg class="fill-current text-white " xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                    </path>
                  </svg>
                </button>
              </div>
              <div class="p-2">
                <img :alt="imgModalSrc" class="object-contain h-1/2-screen" :src="imgModalSrc">
                <p x-text="imgModalDesc" class="text-center text-white"></p>
              </div>
            </div>
          </div>
        </template>
      </div>
      
      <div x-data="{}" class="px-2">
        <div class="flex -mx-2">
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: 'Random Image One Description' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
      
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: 'This one has description' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
          <div class="w-1/6 px-2">
            <div class="bg-gray-400">
              <a @click="$dispatch('img-modal', {  imgModalSrc: 'https://picsum.photos/640/480', imgModalDesc: '' })" class="cursor-pointer">
                <img alt="Placeholder" class="object-fit w-full" src="https://picsum.photos/640/480">
              </a>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

#js #alpinejs

Alpinejs store accessible from outside

<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
        items: [],
        notify(message) {
            this.items.push(message)
        }
    })
})
</script>

#alpinejs #select #tailwind

Select Field with Search - AlpineJs + Tailwind

https://codepen.io/dixie0704/pen/jOVxGXL

#blade #php #laravel #html #livewire #alpinejs

Date Input Field using Pikaday

<input                       
    type="text" 
    placeholder="Start date" 
    class="px-2 py-1 text-sm rounded text-gray-800" 
    x-init="new Pikaday({ field: $el })"
    x-on:change="$wire.startDate = formatDateToYYYYMMDD(new Date($el.value))"
/>

#psql #like #select #where

(LIKE) Fetching Some table data where we don't know how the exactly data is written/spelled in table

# so the scenario is we have table called employees
# in employees table there is column called department 
# there are different departments are included in table
# now we want some department which we dont know how its spelled there so we are just
# trying to fetch the data in column which matched or containes 
# ex: word 'Clothing' is in stored in table but we dont know exactly how data spelled there
# so we try to match something like '% clo %'
# or 'C% thing %'

SELECT * FROM emploees  WHERE department like '% thing %';
# or 
SELECT * FROM employees WHERE department like 'C% thing %';

#psql #like #select #where

Retrive data which column containes the data Using LIKE in PSQL

# here we use WHERE column_name but we don't know what is the data 
# To fetch result of given string to match in column_data we use LIKE
#syntax SELECT * FROM <table-name> WHERE <column_name> LIKE '%<data-to-fetch>%' with out
#space both sides

SELECT * FROM employees WHERE department LIKE '%Clo%';
# NOTE : %Clo% is departement feches related data which start with that string

#ref below
course_data=# SELECT * FROM employees WHERE department LIKE '%Clo%' LIMIT 10;
 employee_id | first_name | last_name  |             email             | hire_date  |    department     | gender | salary | region_id
-------------+------------+------------+-------------------------------+------------+-------------------+--------+--------+-----------
           3 | Sydney     | Symonds    | ssymonds2@hhs.gov             | 2010-05-17 | Clothing          | F      |  95313 |         4
           7 | Ardeen     | Curwood    | acurwood6@1und1.de            | 2006-02-19 | Clothing          | F      |  28995 |         7
          10 | Redford    | Roberti    |                               | 2008-07-21 | Clothing          | M      |  72225 |         7
          21 | Bernardo   | Davage     |                               | 2013-07-11 | Clothing          | M      | 124949 |         6
          38 | Edna       | Erwin      |                               | 2003-04-09 | Children Clothing | F      |  91397 |         5
          48 | Birgitta   | Stanbrooke | bstanbrooke1b@netvibes.com    | 2016-09-12 | Clothing          | F      |  77259 |         1
          54 | Verney     | McQuirk    | vmcquirk1h@ning.com           | 2012-06-17 | Clothing          | M      |  97156 |         2
          55 | Norina     | Yea        | nyea1i@cnet.com               | 2005-06-14 | Children Clothing | F      |  45959 |         1
          56 | Wilek      | Cossor     | wcossor1j@merriam-webster.com | 2014-09-17 | Children Clothing | M      |  91859 |         4
          62 | Lek        | Camplin    |                               | 2007-07-16 | Children Clothing | M      | 124190 |         6

#ios #swift #cell #select #collection #selection #collectionview

Multiple CollectionView cell Selection

var arrData = [String]() // This is your data array
var arrSelectedIndex = [IndexPath]() // This is selected cell Index array
var selectedSkills = [String]() // This is selected cell data array

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource
{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return arrData.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell : CollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
          if selectedSkills.contains(arrData[indexPath.row]) {
            cell.skillsView.backgroundColor = cell.skillsView.hexStringToUIColor(hex: "FEDA22")
        }
      return cell
    }
  
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("You selected cell #\(indexPath.item)!")
        
            if let cell = collectionView.cellForItem(at: indexPath) as? SkillsCollectionViewCell {

                let selectedCategory = subCategoriesPopUpArray[indexPath.item]

                if selectedSubCategories.contains(selectedCategory) {
                    cell.skillsView.backgroundColor = cell.skillsView.hexStringToUIColor(hex: "F0F0F0")
                    selectedSubCategories = selectedSubCategories.filter {
                        $0 != selectedCategory
                    }
                } else {
                    selectedSubCategories.append(selectedCategory)
                    cell.skillsView.backgroundColor = cell.skillsView.hexStringToUIColor(hex: "FEDA22")
                }
        }
    }
}

#powerautomate #multiselect #sharepoint #array #select

Update a multi select choice field in a SharePoint list with Power Automate

https://sharepains.com/2019/04/01/update-a-multi-select-choice-power-automate/

#ios #swift #cell #select #selection #single

Single TableView Cell Selection in ios swift

     let currentSelectedCell = playersTableView.cellForRow(at: indexPath) as! PlayerDetailsTableViewCell
        
        if selectedRow == -1 {
            currentSelectedCell.playerDetailsView.layer.borderColor = hexStringToUIColor(hex: "F34141").cgColor
            currentSelectedCell.playerDetailsView.layer.borderWidth = 1
            selectedRow = indexPath.row
        } else if indexPath.row == selectedRow {
            currentSelectedCell.playerDetailsView.layer.borderWidth = 0
            selectedRow = -1
        } else {
            currentSelectedCell.playerDetailsView.layer.borderColor = hexStringToUIColor(hex: "F34141").cgColor
            currentSelectedCell.playerDetailsView.layer.borderWidth = 1
            
            let newIndexPath = IndexPath(item: selectedRow, section: 0)
            if let cell = playersTableView.cellForRow(at: newIndexPath) as? PlayerDetailsTableViewCell {
                cell.playerDetailsView.layer.borderWidth = 0
            }
            selectedRow = indexPath.row
        }

#ios #swift #cell #selection #select #collection #collectionview

Single collection view cell Selection

extension ServiceProviderProfileViewController : UICollectionViewDelegate, UICollectionViewDataSource {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return categories.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = categoryCollectionView.dequeueReusableCell(withReuseIdentifier: "CategoryCollectionViewCell", for: indexPath) as! CategoryCollectionViewCell

            cell.categoryLabel.text = categories[indexPath.row]
        
            if indexPath.row == selectedCellIndex {
                cell.categoryView.layer.borderColor = UIColor.blue.cgColor
                cell.categoryLabel.textColor = UIColor.blue
            } else {
                cell.categoryView.layer.borderColor = UIColor.lightGray.cgColor
                cell.categoryLabel.textColor = UIColor.gray
            }
            return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        selectedCellIndex = indexPath.row
        self.categoryCollectionView.reloadData()
    }
    
}

#select #text #selection

Select Text

/** select-text.js
 * Set selected text to the element passed to the function.
 */
function selectText(el) {
	let sel, range;
	// Browser compatibility
	// older ie
	if (window.getSelection && document.createRange) {
		sel = window.getSelection();
		// creates range object
		// set range to elements range
		// remove window range
		// set window range
		window.setTimeout(function() {
			range = document.createRange();
			range.selectNodeContents(el);
			sel.removeAllRanges();
			sel.addRange(range);
		}, 1);
	} else if (document.selection) {
		sel = document.selection.createRange();
		// creates range object
		// set raselectnge
		// call  event listener
		if (sel.text == '') {
			range = document.body.createTextRange();
			range.moveToElementText(el);
			range.select();
		}
	} else {
		// do nothing
	}
	return;
}

Select Field with Search - AlpineJs + Tailwind

Save snippets that work from anywhere online with our extensions

Comments

More like this

AlpineJS

Browse more snippets >>

Select Field with Search - AlpineJs + Tailwind

Save snippets that work from anywhere online with our extensions

Comments

More like this

AlpineJS

Browse more snippets >>

Embed code snippet