shadcn_phlexcomponents 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c58d65f96139c65cf3ae55605ec361a7eaa506df6c6bab8fdd67132fc47f50e3
-  data.tar.gz: a5d2e0e553ec1d540f8cb9447f4155a6046ddd59fe4603bbe47c68bd0fc00878
+  metadata.gz: b5a7961ff2a344236185487eb3c083149bbe1bb134507a157dbd78ce0c28fafd
+  data.tar.gz: c9937557a99ba2f970f8ec5debe80d8fb645684f3f747d13bea75b39f78b5761
 SHA512:
-  metadata.gz: 4d1331caf33e5bc9f84c4bd0568d3d7fcb23d59179f7ebc34b08c55a115963b43d6e330b0038de36ffea482b5128fcca48cf34b17eec9c1a1ed4563913e82478
-  data.tar.gz: e0d13bab547ef003d9716ba3525ed2a581c0039a596660b8731c362fe76508be22a542f436998e5e7da691a1551318cecfa68fac57e4218fe665ec00b802f154
+  metadata.gz: 8b33c092d55a544be3aad9739c9ed6e2b9115fb880de97fc1f53cb93cc0afaff6f3eafab9b56767f24a5c2cca95fafab1622da77489144e2b8efeea65fd1265e
+  data.tar.gz: fdb7904d95124983ae4ea8e2139610c094ef09b4661a15f360c1df3fcd212348976c2ebc23924e847ceae8ec2396ab5a44779c2a9f119b352c4cd96f0d591988

data/app/assets/tailwind/choices.css

@@ -0,0 +1,324 @@
+.choices {
+  position: relative;
+  overflow: hidden;
+
+  @apply rounded-md  focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1;
+}
+.choices:focus {
+  outline: 0;
+}
+.choices:last-child {
+  margin-bottom: 0;
+}
+.choices.is-open {
+  overflow: visible;
+}
+.choices.is-disabled {
+  @apply opacity-50;
+}
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  @apply cursor-not-allowed select-none hover:bg-background;
+}
+.choices.is-disabled .choices__item {
+  cursor: not-allowed;
+}
+.choices [hidden] {
+  @apply hidden;
+}
+.choices[data-type*='select-one'] {
+  @apply cursor-pointer;
+}
+.choices[data-type*='select-one'] .choices__button {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.25;
+}
+.choices[data-type*='select-one'] .choices__button:focus,
+.choices[data-type*='select-one'] .choices__button:hover {
+  opacity: 1;
+}
+.choices[data-type*='select-one'] .choices__button:focus {
+  box-shadow: 0 0 0 2px #005f75;
+}
+.choices[data-type*='select-one']
+  .choices__item[data-placeholder]
+  .choices__button {
+  display: none;
+}
+
+.choices[data-type*='select-one']::after {
+  @apply bg-accent-foreground h-4 w-4 opacity-50 top-1/2 -translate-y-1/2 right-4;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
+  mask-repeat: no-repeat;
+  position: absolute;
+  content: '';
+  mask-size: auto 16px;
+  mask-position: center;
+}
+
+.choices[data-type*='select-one'][dir='rtl']::after {
+  left: 11.5px;
+  right: auto;
+}
+.choices[data-type*='select-one'][dir='rtl'] .choices__button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0;
+}
+.choices[data-type*='select-multiple'] .choices__inner,
+.choices[data-type*='text'] .choices__inner {
+  cursor: text;
+}
+.choices[data-type*='select-multiple'] .choices__button,
+.choices[data-type*='text'] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin: 0-4px 0 8px;
+  padding-left: 16px;
+  border-left: 1px solid #003642;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0;
+}
+.choices[data-type*='select-multiple'] .choices__button:focus,
+.choices[data-type*='select-multiple'] .choices__button:hover,
+.choices[data-type*='text'] .choices__button:focus,
+.choices[data-type*='text'] .choices__button:hover {
+  opacity: 1;
+}
+.choices__inner {
+  @apply inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm w-full;
+  @apply font-medium transition-colors disabled:pointer-events-none disabled:opacity-50;
+  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input;
+  @apply bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2;
+}
+
+.is-focused .choices__inner,
+.is-open .choices__inner {
+  @apply ring-ring outline-none ring-1;
+}
+.is-open .choices__inner {
+  /* border-radius: 2.5px 2.5px 0 0; */
+}
+.is-flipped.is-open .choices__inner {
+  /* border-radius: 0 0 2.5px 2.5px; */
+}
+.choices__list {
+  /* margin: 0;
+  padding-left: 0;
+  list-style: none; */
+}
+.choices__list--single {
+  /* display: inline-block;
+  padding: 4px 16px 4px 4px;
+  width: 100%; */
+}
+[dir='rtl'] .choices__list--single {
+  /* padding-right: 4px;
+  padding-left: 16px; */
+}
+.choices__list--single .choices__item {
+  width: 100%;
+}
+.choices__list--multiple {
+  display: inline;
+}
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #005f75;
+  border: 1px solid #004a5c;
+  color: #fff;
+  word-break: break-all;
+  box-sizing: border-box;
+}
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px;
+}
+[dir='rtl'] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px;
+}
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #004a5c;
+  border: 1px solid #003642;
+}
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaa;
+  border: 1px solid #919191;
+}
+.choices__list--dropdown,
+.choices__list[aria-expanded] {
+  z-index: 1;
+  position: absolute;
+  @apply hidden top-full w-full z-50 rounded-md border bg-popover text-popover-foreground shadow-md;
+  @apply mt-2 outline-none animate-in fade-in-0 
+  zoom-in-95 slide-in-from-top-2;
+}
+.is-active.choices__list--dropdown,
+.is-active.choices__list[aria-expanded] {
+  display: block;
+}
+
+.is-flipped .choices__list--dropdown,
+.is-flipped .choices__list[aria-expanded] {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.choices__list--dropdown .choices__list,
+.choices__list[aria-expanded] .choices__list {
+  @apply relative max-h-80 overflow-auto p-1 text-foreground;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+}
+.choices__list--dropdown .choices__item,
+.choices__list[aria-expanded] .choices__item {
+  @apply relative flex cursor-default gap-2 select-none items-center rounded-sm min-h-8;
+  @apply px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none;
+  @apply data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground;
+  @apply data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+}
+
+.choices__list--dropdown .choices__item.is-selected::after {
+  @apply bg-accent-foreground h-4 w-4 top-1/2 -translate-y-1/2 right-2;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>');
+  mask-repeat: no-repeat;
+  position: absolute;
+  content: '';
+  mask-size: auto 16px;
+  mask-position: center;
+}
+
+[dir='rtl'] .choices__list--dropdown .choices__item,
+[dir='rtl'] .choices__list[aria-expanded] .choices__item {
+  text-align: right;
+}
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable[data-select-text],
+  .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
+    padding-right: 100px;
+  }
+  .choices__list--dropdown .choices__item--selectable[data-select-text]::after,
+  .choices__list[aria-expanded]
+    .choices__item--selectable[data-select-text]::after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  [dir='rtl']
+    .choices__list--dropdown
+    .choices__item--selectable[data-select-text],
+  [dir='rtl']
+    .choices__list[aria-expanded]
+    .choices__item--selectable[data-select-text] {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px;
+  }
+  [dir='rtl']
+    .choices__list--dropdown
+    .choices__item--selectable[data-select-text]::after,
+  [dir='rtl']
+    .choices__list[aria-expanded]
+    .choices__item--selectable[data-select-text]::after {
+    right: auto;
+    left: 10px;
+  }
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted,
+.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+  @apply bg-accent data-[selected=true]:text-accent-foreground;
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
+/* .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
+  opacity: 0.5;
+} */
+.choices__item {
+  cursor: default;
+}
+.choices__item--selectable {
+  cursor: pointer;
+}
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  user-select: none;
+  opacity: 0.5;
+}
+.choices__heading {
+  @apply px-2 py-1.5 text-sm font-bold;
+}
+
+.choices__button {
+  text-indent: -9999px;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+.choices__button:focus,
+.choices__input:focus {
+  outline: 0;
+}
+.choices__input {
+  @apply flex w-full rounded-md bg-transparent p-3 text-sm outline-none;
+  @apply placeholder:text-muted-foreground h-9 border-b;
+}
+.choices__input::-webkit-search-cancel-button,
+.choices__input::-webkit-search-decoration,
+.choices__input::-webkit-search-results-button,
+.choices__input::-webkit-search-results-decoration {
+  display: none;
+}
+.choices__input::-ms-clear,
+.choices__input::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+[dir='rtl'] .choices__input {
+  padding-right: 2px;
+  padding-left: 0;
+}
+
+.choices__item[data-value='']::after {
+  @apply hidden;
+}
+
+.choices__placeholder {
+  @apply text-muted-foreground;
+}
+
+.choices__item.has-no-results {
+  @apply text-muted-foreground;
+}

data/app/assets/tailwind/vanilla-calendar-pro.css

@@ -1,6 +1,11 @@
 /* Layout */
 [data-vc='calendar'] {
   @apply relative border box-border min-w-[272px] flex flex-col p-3 rounded-xl opacity-100 transition-opacity;
+  @apply animate-in fade-in-0 zoom-out-95 slide-in-from-top-2 w-[278px] sm:w-auto;
+}
+
+[data-vc='calendar'][data-vc-calendar-hidden] {
+  @apply animate-out fade-out-0 zoom-out-95;
 }
 
 [data-vc='calendar']:focus-visible,

data/app/javascript/controllers/combobox_controller.js

@@ -1,291 +1,34 @@
 import { Controller } from '@hotwired/stimulus'
-import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-} from '@floating-ui/dom'
-
+import Choices from 'choices.js'
 export default class extends Controller {
-  static targets = [
-    'trigger',
-    'contentWrapper',
-    'content',
-    'item',
-    'triggerText',
-    'itemCheckIcon',
-    'select',
-    'searchInput',
-  ]
-
-  static values = {
-    selected: String,
-  }
+  static targets = ['select']
 
   connect() {
-    this.contentTarget.dataset.state = this.isOpen() ? 'open' : 'closed'
-    this.clickOutsideListener = this.onClickOutside.bind(this)
-    this.comboboxKeydownListener = this.onComboboxKeydown.bind(this)
-    this.searchInputKeydownListener = this.debounce(
-      this.onSearchInputKeydown.bind(this),
-      100,
-    )
-
-    this.items = [
-      ...this.element.querySelectorAll(
-        '[data-shadcn-phlexcomponents--combobox-target="item"]:not([data-disabled])',
-      ),
-    ]
-  }
-
-  // Methods
-  toggle() {
-    if (this.isOpen()) {
-      this.close()
-    } else {
-      this.open()
-    }
-  }
-
-  open() {
-    const triggerWidth = this.triggerTarget.offsetWidth
-    this.contentWrapperTarget.classList.remove('hidden')
-
-    const contentWrapperWidth = this.contentWrapperTarget.offsetWidth
-
-    if (contentWrapperWidth < triggerWidth) {
-      this.contentWrapperTarget.style.width = `${triggerWidth}px`
-    }
-
-    this.searchInputTarget.focus()
-
-    if (this.selectedValue) {
-      const item = this.itemTargets.find(
-        (i) => i.dataset.value === this.selectedValue,
+    if (this.element.dataset.value) {
+      const option = this.selectTarget.querySelector(
+        `[value=${this.element.dataset.value}]`,
       )
-      const index = this.items.indexOf(item)
-      if (index > -1) {
-        this.highlightItem(index)
-      }
-    } else {
-      this.highlightItem(0)
-    }
 
-    this.triggerTarget.ariaExpanded = true
-    this.contentTarget.dataset.state = 'open'
-
-    if (window.innerHeight < document.documentElement.scrollHeight) {
-      document.body.dataset.scrollLocked = 1
-    }
-    this.setupEventListeners()
-
-    this.cleanup = autoUpdate(
-      this.triggerTarget,
-      this.contentWrapperTarget,
-      () => {
-        computePosition(this.triggerTarget, this.contentWrapperTarget, {
-          placement: 'bottom',
-          strategy: 'fixed',
-          middleware: [flip(), shift(), offset(4)],
-        }).then(({ x, y }) => {
-          Object.assign(this.contentWrapperTarget.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          })
-        })
-      },
-    )
-  }
-
-  close() {
-    this.contentTarget.dataset.state = 'closed'
-    this.triggerTarget.ariaExpanded = false
-    this.cleanup()
-    this.cleanupEventListeners()
-    delete document.body.dataset.scrollLocked
-
-    setTimeout(() => {
-      this.contentWrapperTarget.classList.add('hidden')
-    }, 100)
-
-    if (this.triggerTarget.nodeName === 'DIV') {
-      this.triggerTarget.firstElementChild.focus()
-    } else {
-      this.triggerTarget.focus()
+      if (option) {
+        option.selected = true
+      }
     }
-  }
 
-  isOpen() {
-    return this.triggerTarget.ariaExpanded === 'true'
-  }
-
-  highlightItem(selectedIndex) {
-    const item = this.items[selectedIndex]
-    console.log('this.highlightItem', item)
-    item.dataset.selected = true
-
-    this.items.forEach((item, index) => {
-      if (index !== selectedIndex) item.dataset.selected = false
+    this.choices = new Choices(this.selectTarget, {
+      itemSelectText: '',
+      placeholderValue: this.element.dataset.placeholder,
     })
-  }
-
-  currentHighlightedIndex() {
-    console.log('item')
-    const item = this.items.find((i) => i.dataset.selected === 'true')
-    return this.items.indexOf(item)
-    console.log('item', item)
-
-    // if (item) {
-    //   return this.items.indexOf(item)
-    // }
-
-    // return 0
-  }
-
-  debounce(callback, wait) {
-    let timeoutId = null
-    return (...args) => {
-      window.clearTimeout(timeoutId)
-      timeoutId = window.setTimeout(() => {
-        callback.apply(null, args)
-      }, wait)
-    }
-  }
-
-  onSearchInputKeydown(event) {
-    // console.log('search ecet', event)
-    this.filterItems()
-  }
-
-  onArrowUpKeydown(event) {
-    const index = this.currentHighlightedIndex()
-    console.log('onArrowUpKeydown index', index)
-
-    if (index > 0) {
-      this.highlightItem(index - 1)
-    }
 
-    event.preventDefault()
-  }
-
-  onArrowDownKeydown(event) {
-    const index = this.currentHighlightedIndex()
-
-    console.log('onArrowDownKeydown index', index)
-
-    console.log('index + 1 < this.items.length', index + 1 < this.items.length)
-    if (index + 1 < this.items.length) {
-      this.highlightItem(index + 1)
+    if (this.element.dataset.includeBlank === 'false') {
+      this.choices.removeChoice('')
     }
 
-    event.preventDefault()
-  }
-
-  selectItem(event) {
-    const index = this.currentHighlightedIndex()
-    const item = this.items[index]
-    item.click()
-    event.preventDefault()
-  }
-
-  filterItems = () => {
-    const search = this.searchInputTarget.value
-    const filteredItems = this.items.filter((i) =>
-      i.innerText.toLowerCase().includes(search),
+    this.selectTarget.addEventListener(
+      'hideDropdown',
+      function () {
+        this.choices.containerOuter.element.focus()
+      }.bind(this),
+      false,
     )
-
-    this.items.forEach((i) => {
-      if (filteredItems.includes(i)) {
-        i.classList.remove('hidden')
-      } else {
-        i.classList.add('hidden')
-      }
-    })
-
-    this.highlightItem(this.filterItems[0])
-  }
-
-  onItemClick(event) {
-    const item = event.currentTarget
-    const value = item.dataset.value
-    this.selectedValue = value
-    this.close()
-  }
-
-  onMouseOver(event) {
-    const item = event.currentTarget
-    const index = this.items.indexOf(item)
-    this.highlightItem(index)
-  }
-
-  selectedValueChanged(value) {
-    const item = this.itemTargets.find((i) => i.dataset.value === value)
-
-    this.itemCheckIconTargets.forEach((i) => {
-      i.classList.add('hidden')
-    })
-
-    if (item) {
-      this.triggerTextTarget.innerText = item.innerText
-
-      const checkIcon = item.querySelector(
-        '[data-shadcn-phlexcomponents--combobox-target="itemCheckIcon"]',
-      )
-      if (value.length > 0) checkIcon.classList.remove('hidden')
-
-      this.itemTargets.forEach((i) => {
-        if (i.dataset.value === value) {
-          i.setAttribute('aria-selected', 'true')
-        } else {
-          i.setAttribute('aria-selected', 'false')
-        }
-      })
-
-      this.selectTarget.value = value
-    }
-
-    delete this.triggerTarget.dataset.placeholder
-    const hasPlaceholder = this.triggerTarget.dataset.placeholderText
-
-    if (hasPlaceholder) {
-      if (!value || value.length === 0) {
-        this.triggerTarget.dataset.placeholder = true
-        this.triggerTextTarget.innerText = hasPlaceholder
-      }
-    }
-  }
-
-  // Global listeners
-  onClickOutside(event) {
-    const htmlFor = event.target.htmlFor
-
-    if (htmlFor === this.triggerTarget.id) return
-    if (event.target) if (this.element.contains(event.target)) return
-
-    this.close()
-  }
-
-  onComboboxKeydown(event) {
-    if (!this.isOpen()) return
-
-    const key = event.key
-    if (key === 'Tab') event.preventDefault()
-
-    if (key === 'Escape') {
-      this.close()
-    }
-  }
-
-  setupEventListeners() {
-    document.addEventListener('click', this.clickOutsideListener)
-    document.addEventListener('keydown', this.comboboxKeydownListener)
-    document.addEventListener('keydown', this.searchInputKeydownListener)
-  }
-
-  cleanupEventListeners() {
-    document.removeEventListener('click', this.clickOutsideListener)
-    document.removeEventListener('keydown', this.comboboxKeydownListener)
-    document.removeEventListener('keydown', this.searchInputKeydownListener)
   }
 }