@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/pagination/theme/Pagination.base.theme.ts

@@ -0,0 +1,29 @@
+import type { PaginationTheme } from '../Pagination.vue'
+
+const theme: PaginationTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      if (props.variant === 'simple') return 'flex items-center space-x-2'
+      else if (props.variant === 'dots') return 'flex space-x-6'
+
+      return 'flex items-center' // quick variant
+    },
+
+    dots: ({ props }) => {
+      if (props.size === 'xs') return 'h-2 w-2'
+      else if (props.size === 'sm') return 'h-3 w-3'
+      else if (props.size === 'lg') return 'h-4 w-4'
+      else if (props.size === 'xl') return 'h-5 w-5'
+
+      return 'h-3 w-3'
+    },
+  },
+
+  styles: ({ css, colors }) => {
+    const color = colors.getPalette('primary')
+
+    return css.get('bg', color[500])
+  },
+}
+
+export default theme

package/src/components/pagination/theme/Pagination.carbon.theme.ts

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

package/src/components/pagination/theme/PaginationItem.base.theme.ts

@@ -0,0 +1,16 @@
+import type { PaginationItemTheme } from '../PaginationItem.vue'
+
+const theme: PaginationItemTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      if (props.size === 'xs') return '!leading-none !p-1 min-w-[1.375rem]'
+      else if (props.size === 'sm') return '!leading-none !p-2 min-w-[2rem]'
+      else if (props.size === 'lg') return '!leading-none !p-3 min-w-[2.75rem]'
+      else if (props.size === 'xl') return '!leading-none !p-4 min-w-[3.375rem]'
+
+      return '!leading-none !p-2 min-w-[2.125rem]'
+    },
+  },
+}
+
+export default theme

package/src/components/pagination/theme/PaginationItem.carbon.theme.ts

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

package/src/components/popover/Popover.vue

@@ -0,0 +1,205 @@
+<script lang="ts">
+const validators = {
+  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 = {
+  disabled: Boolean,
+  positioningDisabled: Boolean,
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    default: 'bottom-start',
+  },
+  delay: {
+    type: [String, Number, Object] as PropType<string | number | { show: number; hide: number; }>,
+    default: 0,
+  },
+  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,
+  },
+  shown: Boolean,
+  handleResize: {
+    type: Boolean,
+    default: true,
+  },
+  instantMove: Boolean,
+  eagerMount: Boolean,
+  popperClass: [String, Array, Object],
+  computeTransformOrigin: Boolean,
+}
+
+export type PopoverProps = ExtractPublicPropTypes<typeof popoverProps>
+
+type InternalClasses = 'wrapper' | 'content'
+export interface PopoverTheme extends ThemeComponent<PopoverProps, InternalClasses> {}
+
+export default {
+  name: 'XPopover',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+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 elRef = ref<InstanceType<typeof VDropdown> | null>(null)
+
+defineEmits(['show', 'hide', 'update:shown', 'apply-show', 'apply-hide', 'close-group', 'close-directive', 'auto-hide', 'resize'])
+
+function show(): void {
+  elRef.value?.show()
+}
+
+function hide(): void {
+  elRef.value?.hide()
+}
+
+function toggle(): void {
+  if (isOpen.value) hide()
+  else show()
+}
+
+const isOpen = ref(false)
+
+defineExpose({ show, hide, toggle, isOpen })
+
+const { styles, classes, className } = useTheme('Popover', {}, props)
+</script>
+
+<template>
+  <v-dropdown
+    ref="elRef"
+    :style="styles"
+    :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')"
+  >
+    <slot></slot>
+    <template #popper>
+      <slot name="content"></slot>
+    </template>
+  </v-dropdown>
+</template>
+
+<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;
+  }
+}
+/* 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;
+  }
+
+  &.v-popper__popper--shown {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
+
+  &.v-popper__popper--skip-transition,
+  &.v-popper__popper.v-popper__popper--skip-transition > .v-popper__wrapper {
+    transition: none !important;
+  }
+}
+
+.v-popper__backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+}
+</style>

package/src/components/popover/PopoverContainer.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+const popoverContainerProps = {
+  tag: {
+    default: 'div',
+    type: String,
+  },
+}
+
+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, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(popoverContainerProps)
+
+const { styles, classes, className } = useTheme('PopoverContainer', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/popover/__tests__/Popover.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Popover from '../Popover.vue'
+
+describe('Popover', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Popover)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/popover/__tests__/PopoverContainer.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PopoverContainer from '../PopoverContainer.vue'
+
+describe('PopoverContainer', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(PopoverContainer)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/popover/index.ts

@@ -0,0 +1,5 @@
+export { default as XPopover } from './Popover.vue'
+export type { PopoverProps, PopoverPlacement, PopoverTriggerEvent, PopoverTheme } from './Popover.vue'
+
+export { default as XPopoverContainer } from './PopoverContainer.vue'
+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

@@ -0,0 +1,63 @@
+<script lang="ts">
+const progressProps = {
+  ...useColors.props('primary'),
+  percentage: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => value >= 0 && value <= 100,
+  },
+  gradient: Boolean,
+  animate: {
+    type: Boolean,
+    default: true,
+  },
+  thick: Boolean,
+}
+
+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/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(progressProps)
+
+const { styles, classes, className } = useTheme('Progress', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+  >
+    <div
+      class="h-full"
+      :class="[
+        gradient ? 'bg-gradient-to-r' : 'bg-[color:var(--x-progress-bg)]',
+        {
+          'duration-150 transition-[width]': animate
+        }
+      ]"
+      :style="[!gradient ? {width: `${percentage}%`} : '']"
+    >
+    </div>
+    <div
+      v-if="gradient"
+      class="absolute h-full bg-gray-100 dark:bg-gray-700 right-0 top-0"
+      :class="{ 'duration-150 transition-[width]': animate }"
+      :style="{
+        width: `${100 - percentage}%`
+      }"
+    ></div>
+  </div>
+</template>

package/src/components/progress/__tests__/Progress.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Progress from '../Progress.vue'
+
+describe('Progress', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Progress)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/progress/index.ts

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

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

@@ -0,0 +1,28 @@
+import type { ProgressTheme } from '../Progress.vue'
+
+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'}`,
+
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900',
+  },
+
+  styles: ({ props, colors, css }) => {
+    const color = colors.getPalette(props.color)
+    const vars = []
+
+    vars.push(css.variables({
+      bg: color[500],
+    }))
+
+    if (props.gradient) vars.push({
+      '--tw-gradient-stops': `${color[100]}, ${color[800]}`,
+    })
+
+    return vars
+  },
+}
+
+export default theme

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

@@ -0,0 +1,179 @@
+<script lang="ts">
+const radioProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  value: [String, Number],
+  glow: Boolean,
+}
+
+export type RadioProps = ExtractPublicPropTypes<typeof radioProps>
+
+type InternalClasses = 'wrapper' | 'circle' | 'circleIcon' | 'label' | 'content'
+type InternalExtraData = { selected: Ref<boolean>; isInsideForm: boolean; isInsideFormGroup: boolean; }
+export interface RadioTheme extends ThemeComponent<RadioProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XRadio',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, type ExtractPublicPropTypes, type Ref, unref } 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 XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(radioProps)
+
+const emit = defineEmits(useInputtable.emits(false))
+
+const elRef = ref<HTMLElement | null>(null)
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  isInsideFormGroup,
+  isFirstValidation,
+  formGroup,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+const selected = computed({
+  get() {
+    const formGroupValue = unref(formGroup.value)
+
+    if (isInsideFormGroup) return formGroupValue === props.value
+
+    return props.value === props.modelValue
+  },
+  set() {
+    emit('update:modelValue', props.value)
+    formGroup.setValue(props.value as any)
+  },
+})
+
+function select() {
+  emit('update:modelValue', props.value)
+  formGroup.setValue(props.value as any)
+}
+
+const listeners = {
+  input: () => {
+    if (isInsideFormGroup) return
+    setTimeout(() => {
+      if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+    }, 0)
+  },
+}
+
+const { styles, classes, className } = useTheme('Radio', {}, props, { selected, isInsideForm, isInsideFormGroup })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <label
+    ref="elRef"
+    tabindex="0"
+    :aria-selected="selected ? 'true' : 'false'"
+    :aria-disabled="(disabled || loading) ? 'true' : undefined"
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+    @keypress.prevent.stop.space="select"
+  >
+    <div
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+    >
+      <input
+        :id="id"
+        v-model="selected"
+        :name="name"
+        :required="required"
+        :disabled="disabled || loading"
+        type="radio"
+        class="invisible absolute"
+        v-on="listeners"
+      />
+      <div
+        :class="[
+          $style['radio'],
+          classes.circle,
+          [glow && !disabled && !loading ? $style['radio--glow'] : ''],
+        ]"
+      >
+        <x-spinner v-if="loading" :size="size" class="absolute" />
+        <svg
+          v-else
+          viewBox="0 0 20 20"
+          class="fill-current w-full"
+          :class="[
+            classes.circleIcon,
+            $style['radio_circle']
+          ]"
+        >
+          <circle cx="10" cy="10" r="10"/>
+        </svg>
+      </div>
+      <div>
+        <div
+          v-if="label"
+          :class="classes.label"
+          v-text="label"
+        ></div>
+
+        <div
+          v-if="$slots.default"
+          :class="classes.content"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </div>
+
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+  </label>
+</template>
+
+<style lang="postcss" module>
+  .radio {
+    border-color: var(--x-radio-border);
+    background-color: var(--x-radio-bg);
+
+    &_circle {
+      color: var(--x-radio-circle);
+    }
+
+    &--glow {
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-radio-glow), 0 4px 6px -4px var(--x-radio-glow);
+    }
+
+    :global(.dark) &,
+    &:global(.dark) {
+      border-color: var(--x-radio-dark-border);
+      background-color: var(--x-radio-dark-bg);
+
+      &_circle {
+        color: var(--x-radio-dark-circle);
+      }
+    }
+  }
+</style>

package/src/components/radio/__tests__/Radio.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Radio from '../Radio.vue'
+
+describe('Radio', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Radio)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})