@indielayer/ui 1.0.0-alpha.0 → 1.0.0-alpha.5

package/src/components/popover/Popover.vue

@@ -0,0 +1,194 @@
+<script lang="ts">
+import { computed, defineComponent, ref, useCssModule, watch, type PropType } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const validators = {
+  align: ['bottom','center','left','right','top'],
+  position: ['bottom','left','right','top'],
+}
+
+export default defineComponent({
+  name: 'XPopover',
+
+  validators,
+
+  props: {
+    align: {
+      type: String as PropType<'bottom' | 'center' | 'left' | 'right' | 'top'>,
+      default: 'center',
+      validator: (value: string) => validators.align.includes(value),
+    },
+    position: {
+      type: String as PropType<'bottom' | 'left' | 'right' | 'top'>,
+      default: 'bottom',
+      validator: (value: string) => validators.position.includes(value),
+    },
+    dismissOnClick: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: Boolean,
+    hover: Boolean,
+    block: Boolean,
+  },
+
+  emits: ['open', 'close', 'toggle'],
+
+  expose: ['open', 'close', 'toggle', 'isOpen'],
+
+  setup(props, { emit }) {
+    const elRef = ref<HTMLElement>()
+    const isOpen = ref(false)
+
+    let stopClickOutside: undefined | (()=> void) = undefined
+
+    watch(isOpen, (newValue, oldValue) => {
+      if (props.hover) return
+
+      if (stopClickOutside) {
+        stopClickOutside()
+        stopClickOutside = undefined
+      }
+
+      if (newValue) {
+        setTimeout(() => {
+          stopClickOutside = onClickOutside(elRef, close)
+        })
+      }
+    })
+
+    const $style = useCssModule()
+    const classes = computed(() => {
+      const c = []
+
+      c.push({
+        // align-left
+        'left-0 right-auto': props.align === 'left' && ['bottom', 'top'].includes(props.position),
+        // align-center
+        'left-1/2 right-auto -translate-x-1/2': props.align === 'center' && ['bottom', 'top'].includes(props.position),
+        // align-right
+        'right-0 left-auto': props.align === 'right' && ['bottom', 'top'].includes(props.position),
+        // align-top
+        'top-0 bottom-auto': props.align === 'top' && ['left', 'right'].includes(props.position),
+        // align-middle
+        '-translate-y-1/2 top-1/2 bottom-auto': props.align === 'center' && ['left', 'right'].includes(props.position),
+        // align-bottom
+        'bottom-0': props.align === 'bottom' && ['left', 'right'].includes(props.position),
+      })
+
+      if (props.position === 'top') c.push(`bottom-full pb-2 ${$style.popoverTop}`)
+      if (props.position === 'right') c.push(`left-full pl-2 ${$style.popoverRight}`)
+      if (props.position === 'bottom') c.push(`top-full bottom-0 ${$style.popoverBottom}`)
+      if (props.position === 'left') c.push(`right-full left-auto pr-2 ${$style.popoverLeft}`)
+
+      if (props.block) c.push('min-w-full')
+
+      return c
+    })
+
+    function close() {
+      if (props.disabled) return
+      isOpen.value = false
+      emit('close')
+    }
+
+    function open() {
+      if (props.disabled) return
+      isOpen.value = true
+      emit('open')
+    }
+
+    function toggle() {
+      if (props.disabled) return
+      isOpen.value = !isOpen.value
+      emit('toggle', isOpen.value)
+    }
+
+    return {
+      elRef,
+      isOpen,
+      classes,
+      close,
+      open,
+      toggle,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    ref="elRef"
+    class="inline-block relative"
+    :class="[
+      $style.popover,
+      [hover ? $style.hover : ''],
+      [isOpen ? $style['is-open'] : ''],
+      { 'w-full': block }
+    ]"
+  >
+    <div class="flex" @click="!hover ? toggle() : null">
+      <slot></slot>
+    </div>
+
+    <div
+      class="absolute w-fit bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-40 max-w-xs"
+      :class="[
+        $style.popoverContent,
+        classes
+      ]"
+      @click="dismissOnClick ? close() : null"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" module>
+.popover {
+  .popoverContent {
+    visibility: hidden;
+    transition-duration: .1s;
+    transition-timing-function: cubic-bezier(.4,0,1,1);
+  }
+  .popoverTop {
+    --tw-translate-y: 0.5rem;
+  }
+  .popoverRight {
+    --tw-translate-x: -0.5rem;
+  }
+  .popoverBottom {
+    --tw-translate-y: -0.25rem;
+  }
+  .popoverLeft {
+    --tw-translate-x: 0.5rem;
+  }
+
+  &.hover:hover .popoverContent,
+  &.is-open .popoverContent {
+    visibility: visible;
+    transition-duration: .15s;
+    transition-timing-function: cubic-bezier(0,0,.2,1);
+  }
+
+  &.hover:hover .popoverTop,
+  &.is-open .popoverTop {
+    --tw-translate-y: 0.25rem;
+  }
+
+  &.hover:hover .popoverRight,
+  &.is-open .popoverRight {
+    --tw-translate-x: 0px;
+  }
+
+  &.hover:hover .popoverBottom,
+  &.is-open .popoverBottom {
+    --tw-translate-y: 0.25rem;
+  }
+
+  &.hover:hover .popoverLeft,
+  &.is-open .popoverLeft {
+    --tw-translate-x: 0px;
+  }
+}
+</style>

package/src/components/popover/PopoverContainer.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XPopoverContainer',
+
+  props: {
+    tag: {
+      default: 'div',
+      type: String,
+    },
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border  border-gray-200 dark:border-gray-800"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/progress/Progress.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
+
+// const validators = {
+//   variant: ['bar','score'],
+// }
+
+export default defineComponent({
+  name: 'XProgress',
+
+  // validators,
+
+  props: {
+    ...useColors.props('primary'),
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (value: number) => value >= 0 && value <= 100,
+    },
+    // variant: {
+    //   type: String as PropType<'bar' | 'score'>,
+    //   default: 'bar',
+    //   validator: (value: string) => validators.variant.includes(value),
+    // },
+    gradient: Boolean,
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+    thick: Boolean,
+  },
+
+  setup(props) {
+    const css = useCSS('progress')
+    const colors = useColors()
+    const style = computed(() => {
+      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
+    })
+
+    return {
+      style,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="relative rounded bg-gray-100 dark:bg-gray-700 overflow-hidden pointer-events-none"
+    :class="[thick ? 'h-1.5' : 'h-1']"
+    :style="style"
+  >
+    <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/radio/Radio.vue

@@ -0,0 +1,220 @@
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInteractive } from '../../composables/interactive'
+import { useInputtable } from '../../composables/inputtable'
+
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+export default defineComponent({
+  name: 'XRadio',
+
+  components: {
+    XSpinner,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    value: [String, Number, Boolean, Function, Object, Array],
+    label: String,
+    glow: Boolean,
+  },
+
+  emits: useInputtable.emits(false),
+
+  setup(props, { attrs, emit }) {
+    const elRef = ref<HTMLElement>()
+
+    const selected = computed({
+      get() {
+        return props.value === props.modelValue
+      },
+      set() {
+        emit('update:modelValue', props.value)
+      },
+    })
+
+    const css = useCSS()
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+      const vars = []
+
+      if (props.loading) {
+        return css.variables({
+          bg: 'transparent',
+          border: 'transparent',
+          dark: {
+            bg: 'transparent',
+            border: 'transparent',
+          },
+        })
+      }
+
+      if (props.disabled) {
+        if (selected.value) {
+          vars.push(css.variables({
+            bg: 'transparent',
+            border: gray[200],
+            circle: gray[200],
+            dark: {
+              bg: 'transparent',
+              border: gray[700],
+              circle: gray[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: gray[200],
+            border: gray[200],
+            dark: {
+              bg: gray[700],
+              border: gray[700],
+            },
+          }))
+        }
+      } else {
+        if (selected.value) {
+          vars.push(css.variables({
+            bg: 'transparent',
+            border: color[500],
+            circle: color[500],
+            dark: {
+              bg: 'transparent',
+              border: color[500],
+              circle: color[500],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: '#fff',
+            border: props.glow ? color[300] : gray[300],
+            dark: {
+              bg: gray[900],
+              border: props.glow ? color[300] : gray[300],
+            },
+          }))
+        }
+
+        if (props.glow) {
+          vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+        }
+      }
+
+      return vars
+    })
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
+      selected,
+      styles,
+      elRef,
+    }
+  },
+})
+</script>
+
+<template>
+  <label
+    ref="elRef"
+    class="inline-block mb-1 relative cursor-pointer focus:outline-none"
+    :aria-selected="selected ? 'true' : 'false'"
+    :aria-disabled="(disabled || loading) ? 'true' : undefined"
+    tabindex="0"
+    @keypress.prevent.stop.space="$emit('update:modelValue', value)"
+  >
+    <div
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+    >
+      <input
+        v-model="selected"
+        :name="name"
+        :required="required"
+        :disabled="disabled || loading"
+        type="radio"
+        class="invisible absolute"
+      />
+      <div
+        class="rounded-full flex justify-center items-center flex-shrink-0 border-2
+          border-[color:var(--x-border)]
+          bg-[color:var(--x-bg)]
+          dark:border-[color:var(--x-dark-border)]
+          dark:bg-[color:var(--x-dark-bg)]
+        "
+        :style="styles"
+        :class="[
+          [glow && !disabled && !loading ? $style['radio--glow'] : ''],
+          {
+            'h-4 w-4': size === 'sm' || size === 'xs',
+            'h-5 w-5': !size || !['xs', 'sm', 'xl'].includes(size),
+            'h-6 w-6': size === 'xl',
+          },
+        ]"
+      >
+        <x-spinner v-if="loading" :size="size" class="absolute" />
+        <svg
+          v-else
+          class="fill-current text-[color:var(--x-circle)] dark:text-[color:var(--x-dark-circle)] w-full"
+          :class="{
+            'opacity-0': !selected,
+            'h-2': size === 'sm' || size === 'xs',
+            'h-[0.6rem]': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+            'h-2.5': size === 'lg',
+            'h-3': size === 'xl',
+          }"
+          viewBox="0 0 20 20"
+        >
+          <circle cx="10" cy="10" r="10"/>
+        </svg>
+      </div>
+      <span
+        v-if="label"
+        class="font-medium text-gray-800 dark:text-gray-200 pl-2"
+        :class="{
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-lg': size === 'lg',
+          'text-xl': size === 'xl',
+        }"
+        v-text="label"
+      ></span>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      :class="{
+        'text-xs pl-6': size === 'xs',
+        'text-sm pl-6': size === 'sm',
+        'pl-7': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+        'text-lg pl-7': size === 'lg',
+        'text-lg pl-8': size === 'xl',
+      }"
+    >
+      <slot></slot>
+    </div>
+    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>
+
+<style lang="postcss" module scoped>
+  .radio {
+    &--glow {
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow);
+    }
+  }
+</style>

package/src/components/scroll/Scroll.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+import { defineComponent, ref, toRefs } from 'vue'
+import { useScroll, useResizeObserver, useEventListener } from '@vueuse/core'
+
+export default defineComponent({
+  name: 'XScroll',
+
+  props: {
+    shadow: Boolean,
+    horizontal: Boolean,
+    mousewheel: Boolean,
+    scrollbar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props) {
+    const scrollEl = ref<HTMLElement | null>(null)
+
+    const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollEl)
+    const { left, right, top, bottom } = toRefs(arrivedState)
+
+    useResizeObserver(scrollEl, triggerScroll)
+
+    if (props.horizontal && props.mousewheel)
+      useEventListener(scrollEl, 'wheel', (e: WheelEvent) => {
+        if (!scrollEl.value) return
+
+        e.preventDefault()
+        scrollEl.value.scrollLeft += e.deltaY + e.deltaX
+      })
+
+    function triggerScroll() {
+      scrollEl.value?.dispatchEvent(new CustomEvent('scroll'))
+    }
+
+    return {
+      scrollEl,
+      left,
+      right,
+      top,
+      bottom,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="flex relative overflow-hidden"
+    :class="[
+      $style.scrollWrap,
+      horizontal ? [
+        $style.horizontal,
+        {
+          [$style['shadow-left']]: !left,
+          [$style['shadow-right']]: !right,
+        }
+      ] : [
+        $style.vertical,
+        {
+          [$style['shadow-top']]: !top,
+          [$style['shadow-bottom']]: !bottom,
+        }
+      ]
+    ]"
+  >
+    <div
+      ref="scrollEl"
+      class="relative overflow-auto w-full"
+      :class="[
+        [horizontal ? 'overflow-x-auto' : 'overflow-y-auto'],
+        {
+          [$style.hideScroll]: !scrollbar,
+        }
+      ]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped module>
+.scrollWrap {
+  &:before, &:after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    transition: box-shadow .2s;
+  }
+
+  &.horizontal:before, &.horizontal:after {
+    top: 0;
+    bottom: 0;
+    width: 20px;
+  }
+
+  &.vertical:before, &.vertical:after {
+    right: 0;
+    left: 0;
+    height: 20px;
+  }
+
+  &.horizontal:before {
+    left: 0;
+  }
+  &.horizontal:after {
+    right: 0;
+  }
+  &.vertical:before {
+    top: 0;
+  }
+  &.vertical:after {
+    bottom: 0;
+  }
+
+  &.shadow-left:before {
+    box-shadow: inset 12px 0 10px -10px rgb(0 0 0 / 7%);
+  }
+
+  &.shadow-right:after {
+    box-shadow: inset -12px 0 10px -10px rgb(0 0 0 / 7%);
+  }
+
+  &.shadow-top:before {
+    box-shadow: inset 0 12px 10px -10px rgb(0 0 0 / 7%);
+  }
+
+  &.shadow-bottom:after {
+    box-shadow: inset 0 -12px 10px -10px rgb(0 0 0 / 7%);
+  }
+}
+
+.hideScroll {
+  -ms-overflow-style: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>