@indielayer/ui 1.2.0 → 1.3.0

package/src/components/popover/Popover.vue

@@ -1,37 +1,62 @@
 <script lang="ts">
 const validators = {
-  align: ['bottom', 'center', 'left', 'right', 'top'] as const,
-  position: ['bottom', 'left', 'right', 'top'] as const,
+  placement: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'] as const,
 }
 
+export type PopoverPlacement = Placement
+export type PopoverTriggerEvent = TriggerEvent
+
 const popoverProps = {
-  align: {
-    type: String as PropType<PopoverAlign>,
-    default: 'center',
-    validator: (value: string) => validators.align.includes(value as PopoverAlign),
+  disabled: Boolean,
+  positioningDisabled: Boolean,
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    default: 'bottom-start',
   },
-  position: {
-    type: String as PropType<PopoverPosition>,
-    default: 'bottom',
-    validator: (value: string) => validators.position.includes(value as PopoverPosition),
+  delay: {
+    type: [String, Number, Object] as PropType<string | number | { show: number; hide: number; }>,
+    default: 0,
   },
-  dismissOnClick: {
-    type: Boolean,
+  distance: [Number, String],
+  skidding: [Number, String],
+  triggers: {
+    type: Array as PropType<Array<PopoverTriggerEvent>>,
+    default: () => ['click'],
+  },
+  showTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
+  hideTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
+  popperTriggers: Array as PropType<Array<PopoverTriggerEvent>>,
+  popperShowTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
+  popperHideTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
+  container: {
+    type: [String, Object, Element, Boolean],
+    default: 'body',
+  },
+  boundary: [String, Element],
+  strategy: {
+    type: String as PropType<'absolute' | 'fixed'>,
+    default: 'absolute',
+  },
+  autoHide: {
+    type: [Boolean, Function] as PropType<boolean | ((event: Event) => boolean)>,
     default: true,
   },
-  autoAlign: {
+  shown: Boolean,
+  handleResize: {
     type: Boolean,
     default: true,
   },
-  disabled: Boolean,
-  hover: Boolean,
-  block: Boolean,
+  instantMove: Boolean,
+  eagerMount: Boolean,
+  popperClass: [String, Array, Object],
+  computeTransformOrigin: Boolean,
 }
 
-export type PopoverAlign = typeof validators.align[number]
-export type PopoverPosition = typeof validators.position[number]
 export type PopoverProps = ExtractPublicPropTypes<typeof popoverProps>
 
+type InternalClasses = 'wrapper' | 'content'
+export interface PopoverTheme extends ThemeComponent<PopoverProps, InternalClasses> {}
+
 export default {
   name: 'XPopover',
   validators,
@@ -39,218 +64,142 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, useCssModule, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
-import { onClickOutside, useEventListener } from '@vueuse/core'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Popover.theme'
+import { type PropType, type ExtractPublicPropTypes, ref } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { Dropdown as VDropdown, type Placement, type TriggerEvent } from 'floating-vue'
 
 const props = defineProps(popoverProps)
 
-const emit = defineEmits(['open', 'close', 'toggle'])
-
-const elRef = ref<HTMLElement | null>(null)
-const contentRef = ref<HTMLElement | null>(null)
-const isOpen = ref(false)
-
-let stopClickOutside: undefined | (() => void) = undefined
-
-watch(isOpen, (newValue) => {
-  if (props.hover) return
-
-  if (newValue) {
-    checkVisibility()
-  } else {
-    resetOutbounds()
-  }
-
-  if (stopClickOutside) {
-    stopClickOutside()
-    stopClickOutside = undefined
-  }
-
-  if (newValue) {
-    setTimeout(() => {
-      stopClickOutside = onClickOutside(elRef, close)
-    })
-  }
-})
-
-const $style = useCssModule()
-const isOutLeft = ref(false)
-const isOutRight = ref(false)
-const isOutTop = ref(false)
-const isOutBottom = ref(false)
-const contentClasses = computed(() => {
-  const c = []
-
-  let align = props.align
-  let position = props.position
-
-  if (isOutTop.value) {
-    if (position === 'top') position = 'bottom'
-    else if ((position === 'left' || position === 'right')) align = 'top'
-  }
-
-  if (isOutBottom.value) {
-    if (position === 'bottom') position = 'top'
-    else if ((position === 'left' || position === 'right')) align = 'bottom'
-  }
-
-  if (isOutLeft.value) {
-    if (position === 'left') position = 'right'
-    else if ((position === 'top' || position === 'bottom')) align = 'left'
-  }
-
-  if (isOutRight.value) {
-    if (position === 'right') position = 'left'
-    else if ((position === 'top' || position === 'bottom')) align = 'right'
-  }
-
-  if (position === 'top') c.push(`bottom-full ${$style['popover-top']}`)
-  if (position === 'bottom') c.push(`top-full bottom-0 ${$style['popover-bottom']}`)
-  if (position === 'right') c.push(`left-full ${$style['popover-right']}`)
-  if (position === 'left') c.push(`right-full left-auto ${$style['popover-left']}`)
-
-  if (align === 'left' && ['bottom', 'top'].includes(position)) c.push('left-0 right-auto')
-  if (align === 'center' && ['bottom', 'top'].includes(position)) c.push('left-1/2 right-auto -translate-x-1/2')
-  if (align === 'right' && ['bottom', 'top'].includes(position)) c.push('right-0 left-auto')
-  if (align === 'top' && ['left', 'right'].includes(position)) c.push('top-0 bottom-auto')
-  if (align === 'center' && ['left', 'right'].includes(position)) c.push('-translate-y-1/2 top-1/2 bottom-auto')
-  if (align === 'bottom' && ['left', 'right'].includes(position)) c.push('bottom-0')
-
-  if (props.block) c.push('min-w-full')
-
-  return c
-})
-
-if (props.hover) {
-  useEventListener(elRef, 'mouseenter', checkVisibility)
-  useEventListener(elRef, 'mouseleave', resetOutbounds)
-}
+const elRef = ref<InstanceType<typeof VDropdown> | null>(null)
 
-function resetOutbounds() {
-  isOutLeft.value = false
-  isOutRight.value = false
-  isOutTop.value = false
-  isOutBottom.value = false
-}
-
-function checkVisibility() {
-  if (!contentRef.value) return
-  const clientRect = contentRef.value.getBoundingClientRect()
+defineEmits(['show', 'hide', 'update:shown', 'apply-show', 'apply-hide', 'close-group', 'close-directive', 'auto-hide', 'resize'])
 
-  isOutLeft.value = clientRect.left < 0
-  isOutRight.value = clientRect.right > (window.innerWidth || document.documentElement.clientWidth)
-  isOutTop.value = clientRect.top < 0
-  isOutBottom.value = clientRect.bottom > (window.innerHeight || document.documentElement.clientHeight)
+function show(): void {
+  elRef.value?.show()
 }
 
-function close() {
-  if (props.disabled) return
-  isOpen.value = false
-  emit('close')
+function hide(): void {
+  elRef.value?.hide()
 }
 
-function open() {
-  if (props.disabled) return
-  isOpen.value = true
-  emit('open')
+function toggle(): void {
+  if (isOpen.value) hide()
+  else show()
 }
 
-function toggle() {
-  if (props.disabled) return
-  isOpen.value = !isOpen.value
-  emit('toggle', isOpen.value)
-}
+const isOpen = ref(false)
 
-const { styles, classes, className } = useTheme('popover', theme, props)
+defineExpose({ show, hide, toggle, isOpen })
 
-defineExpose({ open, close, toggle, isOpen })
+const { styles, classes, className } = useTheme('Popover', {}, props)
 </script>
 
 <template>
-  <div
+  <v-dropdown
     ref="elRef"
-    class="inline-block relative"
     :style="styles"
-    :class="[
-      className,
-      classes.wrapper,
-      $style.popover,
-      [hover ? $style.hover : ''],
-      [isOpen ? $style['is-open'] : ''],
-      { 'w-full': block }
+    :class="[className, classes.wrapper]"
+    :positioning-disabled="positioningDisabled"
+    :placement="placement"
+    :disabled="disabled"
+    :delay="delay"
+    :shown="shown"
+    :distance="distance"
+    :skidding="skidding"
+    :triggers="triggers"
+    :show-triggers="showTriggers"
+    :hide-triggers="hideTriggers"
+    :popper-triggers="popperTriggers"
+    :popper-show-triggers="popperShowTriggers"
+    :popper-hide-triggers="popperHideTriggers"
+    :container="container"
+    :boundary="boundary"
+    :strategy="strategy"
+    :auto-hide="autoHide"
+    :handle-resize="handleResize"
+    :instant-move="instantMove"
+    :eager-mount="eagerMount"
+    :popper-class="[
+      classes.content,
+      popperClass
     ]"
+    :compute-transform-origin="computeTransformOrigin"
+    @show="() => { isOpen = true; $emit('show') }"
+    @hide="() => { isOpen = false; $emit('hide') }"
+    @update:shown="(shown) => $emit('update:shown', shown)"
+    @apply-show="() => $emit('apply-show')"
+    @apply-hide="() => $emit('apply-hide')"
+    @close-group="() => $emit('close-group')"
+    @close-directive="() => $emit('close-directive')"
+    @auto-hide="() => $emit('auto-hide')"
+    @resize="() => $emit('resize')"
   >
-    <div class="flex" @click="!hover ? toggle() : null">
-      <slot></slot>
-    </div>
-
-    <div
-      ref="contentRef"
-      class="absolute transform transition-transform z-40 h-fit"
-      :class="[
-        $style['popover-content'],
-        contentClasses,
-        classes.content
-      ]"
-      @click="dismissOnClick ? close() : null"
-    >
+    <slot></slot>
+    <template #popper>
       <slot name="content"></slot>
-    </div>
-  </div>
+    </template>
+  </v-dropdown>
 </template>
 
-<style lang="postcss" module>
-.popover {
-  .popover-content {
-    visibility: hidden;
-    transition-duration: 0.1s;
-    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-  }
-
-  .popover-top {
-    --tw-translate-y: 0.5rem;
-  }
-
-  .popover-right {
-    --tw-translate-x: -0.5rem;
+<style lang="postcss">
+.resize-observer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  pointer-events: none;
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+
+  object {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
   }
-
-  .popover-bottom {
-    --tw-translate-y: -0.5rem;
-  }
-
-  .popover-left {
-    --tw-translate-x: 0.5rem;
+}
+/* stylelint-disable selector-class-pattern */
+.v-popper__popper {
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  outline: none;
+
+  &.v-popper__popper--hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s, visibility 0.15s;
+    pointer-events: none;
   }
 
-  &.is-open .popover-content,
-  &.hover:hover .popover-content {
+  &.v-popper__popper--shown {
     visibility: visible;
-    transition-duration: 0.15s;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-
-  &.is-open .popover-top,
-  &.hover:hover .popover-top {
-    --tw-translate-y: -0.25rem;
+    opacity: 1;
+    transition: opacity 0.15s;
   }
 
-  &.is-open .popover-right,
-  &.hover:hover .popover-right {
-    --tw-translate-x: 0.25rem;
-  }
-
-  &.is-open .popover-bottom,
-  &.hover:hover .popover-bottom {
-    --tw-translate-y: 0.25rem;
+  &.v-popper__popper--skip-transition,
+  &.v-popper__popper.v-popper__popper--skip-transition > .v-popper__wrapper {
+    transition: none !important;
   }
+}
 
-  &.is-open .popover-left,
-  &.hover:hover .popover-left {
-    --tw-translate-x: -0.25rem;
-  }
+.v-popper__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
 }
 </style>

package/src/components/popover/PopoverContainer.vue

@@ -8,18 +8,19 @@ const popoverContainerProps = {
 
 export type PopoverContainerProps = ExtractPublicPropTypes<typeof popoverContainerProps>
 
+type InternalClasses = 'wrapper'
+export interface PopoverContainerTheme extends ThemeComponent<PopoverContainerProps, InternalClasses> {}
+
 export default { name: 'XPopoverContainer' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useTheme } from '../../composables/theme'
-
-import theme from './PopoverContainer.theme'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(popoverContainerProps)
 
-const { styles, classes, className } = useTheme('popover-container', theme, props)
+const { styles, classes, className } = useTheme('PopoverContainer', {}, props)
 </script>
 
 <template>

package/src/components/popover/index.ts

@@ -1,7 +1,5 @@
 export { default as XPopover } from './Popover.vue'
-export type { PopoverProps, PopoverAlign, PopoverPosition } from './Popover.vue'
-export type { PopoverTheme } from './Popover.theme'
+export type { PopoverProps, PopoverPlacement, PopoverTriggerEvent, PopoverTheme } from './Popover.vue'
 
 export { default as XPopoverContainer } from './PopoverContainer.vue'
-export type { PopoverContainerProps } from './PopoverContainer.vue'
-export type { PopoverContainerTheme } from './PopoverContainer.theme'
+export type { PopoverContainerProps, PopoverContainerTheme } from './PopoverContainer.vue'

package/src/components/popover/theme/Popover.base.theme.ts

@@ -0,0 +1,11 @@
+import type { PopoverTheme } from '../Popover.vue'
+
+const theme: PopoverTheme = {
+  classes: {
+    wrapper: 'relative',
+
+    content: 'max-w-xs',
+  },
+}
+
+export default theme

package/src/components/popover/theme/Popover.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { PopoverTheme } from '../Popover.vue'
+
+import BaseTheme from './Popover.base.theme'
+
+const theme: PopoverTheme = BaseTheme
+
+export default theme

package/src/components/popover/theme/PopoverContainer.base.theme.ts

@@ -0,0 +1,9 @@
+import type { PopoverContainerTheme } from '../PopoverContainer.vue'
+
+const theme: PopoverContainerTheme = {
+  classes: {
+    wrapper: 'block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800',
+  },
+}
+
+export default theme

package/src/components/popover/theme/PopoverContainer.carbon.theme.ts

@@ -0,0 +1,9 @@
+import type { PopoverContainerTheme } from '../PopoverContainer.vue'
+
+const theme: PopoverContainerTheme = {
+  classes: {
+    wrapper: 'block w-full bg-gray-100 dark:bg-gray-700 shadow-lg border border-gray-200 dark:border-gray-800 text-sm',
+  },
+}
+
+export default theme

package/src/components/progress/Progress.vue

@@ -16,19 +16,20 @@ const progressProps = {
 
 export type ProgressProps = ExtractPublicPropTypes<typeof progressProps>
 
+type InternalClasses = 'wrapper' | 'list' | 'item'
+export interface ProgressTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
+
 export default { name: 'XProgress' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
-
-import theme from './Progress.theme'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 const props = defineProps(progressProps)
 
-const { styles, classes, className } = useTheme('progress', theme, props)
+const { styles, classes, className } = useTheme('Progress', {}, props)
 </script>
 
 <template>

package/src/components/progress/index.ts

@@ -1,3 +1,2 @@
 export { default as XProgress } from './Progress.vue'
-export type { ProgressProps } from './Progress.vue'
-export type { ProgressTheme } from './Progress.theme'
+export type { ProgressProps, ProgressTheme } from './Progress.vue'

package/src/components/progress/{Progress.theme.ts → theme/Progress.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { ProgressProps } from './Progress.vue'
+import type { ProgressTheme } from '../Progress.vue'
 
-type InternalClasses = 'wrapper' | 'list' | 'item'
-
-interface InternalTheme extends ThemeComponent<ProgressProps, InternalClasses> {}
-export interface ProgressTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<ProgressProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: ProgressTheme = {
   classes: {
     wrapper: ({ props }) => `relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none ${props.thick ? 'h-1.5' : 'h-1'}`,
 

package/src/components/progress/theme/Progress.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { ProgressTheme } from '../Progress.vue'
+
+import BaseTheme from './Progress.base.theme'
+
+const theme: ProgressTheme = BaseTheme
+
+export default theme

package/src/components/radio/Radio.vue

@@ -12,6 +12,10 @@ const radioProps = {
 
 export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
 
+type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
+type InternalExtraData = { selected: Ref<boolean>; }
+export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XRadio',
   validators: {
@@ -21,17 +25,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, type ExtractPublicPropTypes } from 'vue'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useInteractive } from '../../composables/interactive'
-import { useInputtable } from '../../composables/inputtable'
+import { computed, ref, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
 
 import XSpinner from '../../components/spinner/Spinner.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Radio.theme'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(radioProps)
 
@@ -57,7 +59,7 @@ const {
   setError,
 } = useInputtable(props, { focus, emit, withListeners: false })
 
-const { styles, classes, className } = useTheme('radio', theme, props, { selected })
+const { styles, classes, className } = useTheme('Radio', {}, props, { selected })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
@@ -123,7 +125,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </div>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 

package/src/components/radio/index.ts

@@ -1,3 +1,2 @@
 export { default as XRadio } from './Radio.vue'
-export type { RadioProps } from './Radio.vue'
-export type { RadioTheme } from './Radio.theme'
+export type { RadioProps, RadioTheme } from './Radio.vue'

package/src/components/radio/{Radio.theme.ts → theme/Radio.base.theme.ts}

@@ -1,16 +1,6 @@
-import type { Ref } from 'vue'
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { RadioProps } from './Radio.vue'
+import type { RadioTheme } from '../Radio.vue'
 
-type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
-type InternalExtraData = { selected: Ref<boolean>; }
-
-interface InternalTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
-export interface RadioTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<RadioProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
+const theme: RadioTheme = {
   classes: {
     wrapper: 'inline-block relative cursor-pointer focus:outline-none group',
 
@@ -37,7 +27,7 @@ const theme: InternalTheme = {
       return c
     },
 
-    label: ({ props, data }) => {
+    label: ({ props }) => {
       let c = 'font-medium text-gray-800 dark:text-gray-200 pl-2'
 
       if (props.size === 'xs') c += ' text-xs'