shadcn_phlexcomponents 0.1.9 → 0.1.11

data/app/javascript/utils.js

@@ -1,184 +0,0 @@
-import {
-  computePosition,
-  flip,
-  shift,
-  offset,
-  autoUpdate,
-} from '@floating-ui/dom'
-
-const ANIMATION_OUT_DELAY = 125
-const FOCUS_DELAY = 100
-
-const getScrollbarWidth = () => {
-  // Create a temporary div container and append it into the body
-  const outer = document.createElement('div')
-  outer.style.visibility = 'hidden'
-  outer.style.overflow = 'scroll' // force scrollbars
-  outer.style.msOverflowStyle = 'scrollbar' // needed for some older versions of Edge
-  outer.style.width = '100px'
-  outer.style.position = 'absolute'
-  outer.style.top = '-9999px'
-  document.body.appendChild(outer)
-
-  // Create an inner div and place it inside the outer div
-  const inner = document.createElement('div')
-  inner.style.width = '100%'
-  outer.appendChild(inner)
-
-  // Calculate the scrollbar width
-  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
-
-  // Clean up
-  outer.remove()
-
-  return scrollbarWidth
-}
-
-const showOverlay = (classNames = '') => {
-  const element = document.createElement('div')
-  let defaultClassNames = [
-    'fixed',
-    'inset-0',
-    'z-50',
-    'bg-black/80',
-    'data-[state=open]:animate-in',
-    'data-[state=closed]:animate-out',
-    'data-[state=closed]:fade-out-0',
-    'data-[state=open]:fade-in-0',
-    'pointer-events-auto',
-  ]
-  defaultClassNames = defaultClassNames.concat(
-    classNames.split(' ').filter((c) => !!c),
-  )
-
-  element.classList.add(...defaultClassNames)
-  element.dataset.state = 'open'
-  element.dataset.shadcnPhlexcomponentsOverlay = true
-  element.ariaHidden = true
-  document.body.appendChild(element)
-}
-
-const hideOverlay = () => {
-  const element = document.querySelector(
-    '[data-shadcn-phlexcomponents-overlay]',
-  )
-
-  if (element) {
-    element.dataset.state = 'closed'
-
-    setTimeout(() => {
-      element.remove()
-    }, ANIMATION_OUT_DELAY)
-  }
-}
-
-const lockScroll = () => {
-  if (window.innerHeight < document.documentElement.scrollHeight) {
-    document.body.dataset.scrollLocked = 1
-    const style = getComputedStyle(document.body)
-    const originalMarginRight = style.marginRight
-    document.body.dataset.marginRight = originalMarginRight
-    document.body.style.marginRight = `${getScrollbarWidth()}px`
-  }
-}
-
-const unlockScroll = () => {
-  if (document.body.dataset.scrollLocked) {
-    delete document.body.dataset.scrollLocked
-    const originalMarginRight = document.body.dataset.marginRight
-
-    if (parseInt(originalMarginRight) === 0) {
-      document.body.style.marginRight = ''
-    } else {
-      document.body.style.marginRight = originalMarginRight
-    }
-
-    delete document.body.dataset.marginRight
-  }
-}
-
-const addInert = (ignoredElements = []) => {
-  Array.from(document.body.children)
-    .filter((el) => !ignoredElements.includes(el))
-    .forEach((el) => el.setAttribute('inert', ''))
-}
-
-const removeInert = () => {
-  Array.from(document.body.children)
-    .filter((el) => el.hasAttribute('inert'))
-    .forEach((el) => el.removeAttribute('inert'))
-}
-
-const openWithOverlay = (ignoredElements = []) => {
-  showOverlay()
-  lockScroll()
-  addInert(ignoredElements)
-}
-
-const closeWithOverlay = () => {
-  hideOverlay()
-  unlockScroll()
-  removeInert()
-}
-
-const hideOnEsc = {
-  name: 'hideOnEsc',
-  defaultValue: true,
-  fn({ hide }) {
-    function onKeyDown(event) {
-      if (event.keyCode === 27) {
-        hide()
-      }
-    }
-
-    return {
-      onShow() {
-        document.addEventListener('keydown', onKeyDown)
-      },
-      onHide() {
-        document.removeEventListener('keydown', onKeyDown)
-      },
-    }
-  },
-}
-
-const initFloatingUi = (referenceElement, floatingElement, side) => {
-  return autoUpdate(referenceElement, floatingElement, () => {
-    computePosition(referenceElement, floatingElement, {
-      placement: side,
-      strategy: 'fixed',
-      middleware: [flip(), shift(), offset(4)],
-    }).then(({ x, y }) => {
-      Object.assign(floatingElement.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-      })
-    })
-  })
-}
-
-const focusTrigger = (triggerTarget) => {
-  setTimeout(() => {
-    if (triggerTarget.dataset.asChild === 'false') {
-      triggerTarget.firstElementChild.focus()
-    } else {
-      triggerTarget.focus()
-    }
-  }, FOCUS_DELAY)
-}
-
-export {
-  ANIMATION_OUT_DELAY,
-  FOCUS_DELAY,
-  hideOnEsc,
-  showOverlay,
-  hideOverlay,
-  lockScroll,
-  unlockScroll,
-  addInert,
-  removeInert,
-  openWithOverlay,
-  closeWithOverlay,
-  initFloatingUi,
-  focusTrigger,
-}

data/app/stylesheets/choices.css

@@ -1,324 +0,0 @@
-.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;
-}