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

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,205 @@
+<script lang="ts">
+import { defineComponent, ref, watch, computed, type StyleValue } 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: 'XCheckbox',
+
+  components: {
+    XSpinner,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    label: String,
+    glow: Boolean,
+  },
+
+  emits: useInputtable.emits(false),
+
+  expose: ['toggle'],
+
+  setup(props, { attrs, emit }) {
+    const elRef = ref<HTMLElement>()
+    const checked = ref(false)
+
+    watch(() => props.modelValue, (value) => {
+      checked.value = !!value
+    })
+
+    watch(() => checked.value, (value) => {
+      emit('update:modelValue', value)
+    })
+
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs' || props.size === 'sm') return 'h-4 w-4'
+      else if (props.size === 'xl') return 'h-6 w-6'
+
+      return 'h-5 w-5'
+    })
+
+    const iconSizeClasses = computed(() => {
+      if (props.size === 'xs' || props.size === 'sm') return 'h-2 w-2'
+      else if (props.size === 'xl') return 'h-4 w-4'
+
+      return 'h-3 w-3'
+    })
+
+    const css = useCSS()
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+
+    const cssVariables = computed(() => {
+      const color = colors.getPalette(props.color)
+      const vars: (object | string)[] = []
+
+      if (props.loading) {
+        return css.variables({
+          bg: 'transparent',
+          border: 'transparent',
+          dark: {
+            bg: 'transparent',
+            border: 'transparent',
+          },
+        })
+      }
+
+      if (props.disabled) {
+        vars.push(css.variables({
+          bg: gray[100],
+          border: gray[200],
+          dark: {
+            bg: gray[800],
+            border: gray[700],
+          },
+        }))
+      } else {
+        if (checked.value) {
+          vars.push(css.variables({
+            bg: color[500],
+            border: color[500],
+            dark: {
+              bg: color[500],
+              border: 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[400],
+            },
+          }))
+        }
+
+        if (props.glow) {
+          vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+        }
+      }
+
+      return vars as StyleValue
+    })
+
+    function toggle() {
+      checked.value = !checked.value
+    }
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
+      elRef,
+      checked,
+      sizeClasses,
+      iconSizeClasses,
+      cssVariables,
+      toggle,
+    }
+  },
+})
+</script>
+
+<template>
+  <label class="inline-block relative cursor-pointer align-middle mb-1 pb-2">
+    <div
+      ref="elRef"
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+      tabindex="0"
+      @keypress.prevent.stop.space="toggle"
+    >
+      <input
+        v-model="checked"
+        :aria-checked="checked ? 'true' : 'false'"
+        :aria-disabled="disabled ? 'true' : undefined"
+        type="checkbox"
+        class="invisible absolute"
+        :disabled="disabled || loading"
+        :name="name"
+        :required="required"
+      />
+      <div
+        class="rounded 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="cssVariables"
+        :class="[
+          [(glow && !disabled && !loading) ? $style['checkbox--glow'] : ''],
+          sizeClasses,
+        ]"
+      >
+        <x-spinner v-if="loading" :size="size" class="absolute" />
+        <svg
+          v-else
+          class="fill-current text-gray-100 dark:text-gray-900"
+          :class="[iconSizeClasses, {
+            'opacity-0': !checked,
+          }]"
+          viewBox="0 0 20 20"
+        >
+          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+        </svg>
+      </div>
+      <div
+        class="inline-block 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',
+        }"
+      >
+        <span v-if="label" v-text="label"></span>
+        <slot v-else></slot>
+      </div>
+    </div>
+    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>
+
+<style lang="postcss" module scoped>
+  .checkbox {
+    &--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/collapse/Collapse.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+export default defineComponent({
+  name: 'XCollapse',
+
+  components: {
+    XIcon,
+  },
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    disabled: Boolean,
+    expanded: Boolean,
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
+    icon: String,
+    color: String,
+  },
+
+  emits: ['expand'],
+
+  expose: ['toggle', 'open', 'close'],
+
+  setup(props, { emit }) {
+    const collapsed = ref(!props.expanded)
+    const animated = ref(true)
+
+    watch(() => props.expanded, () => {
+      collapsed.value = !props.expanded
+    })
+
+    function onBeforeEnter(el: HTMLElement) {
+      if (animated.value) el.style.height = '0px'
+    }
+
+    function onEnter(el: HTMLElement, done: ()=> void) {
+      if (!animated.value) done()
+      else {
+        el.addEventListener('transitionend', done)
+        setTimeout(() => {
+          el.style.height = `${el.scrollHeight}px`
+        }, 1)
+      }
+    }
+
+    function onAfterEnter(el: HTMLElement) {
+      if (!animated.value) {
+        animated.value = true
+      } else {
+        el.style.removeProperty('height')
+      }
+    }
+
+    function onBeforeLeave(el: HTMLElement) {
+      if (!animated.value) return
+      el.style.height = `${el.scrollHeight}px`
+    }
+
+    function onLeave(el: HTMLElement ,done: ()=> void) {
+      if (!animated.value) done()
+      else {
+        el.addEventListener('transitionend', done)
+        setTimeout(() => {
+          el.style.height = '0px'
+        }, 1)
+      }
+    }
+
+    function onAfterLeave(el: HTMLElement) {
+      if (!animated.value) {
+        animated.value = true
+      } else {
+        el.style.removeProperty('height')
+      }
+    }
+
+    function open(anim = true) {
+      animated.value = anim
+      collapsed.value = false
+    }
+
+    function close(anim = true) {
+      animated.value = anim
+      collapsed.value = true
+    }
+
+    function toggle() {
+      if (!props.disabled) collapsed.value = !collapsed.value
+    }
+
+    function onExpand(anim = true) {
+      open(anim)
+      emit('expand')
+    }
+
+    return {
+      collapsed,
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave,
+      onExpand,
+      toggle,
+      close,
+      open,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :aria-disabled="disabled"
+    :aria-expanded="collapsed ? 'false' : 'true'"
+  >
+    <div
+      class="flex items-center relative"
+      :class="{
+        'cursor-pointer' : !disabled,
+        'flex-row-reverse': icon,
+      }"
+      @click="toggle"
+    >
+      <div class="flex-1 overflow-hidden">
+        <slot :collapsed="collapsed"></slot>
+      </div>
+
+      <div v-if="showIcon" class="absolute top-1/2 transform -translate-y-1/2 right-3">
+        <span
+          class="flex transform transition-transform duration-150"
+          :class="[
+            {
+              'rotate-180': !collapsed,
+              'text-gray-300': disabled
+            }
+          ]"
+        >
+          <x-icon v-if="icon" :icon="icon" />
+          <svg
+            v-else
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            fill="none"
+            role="presentation"
+            class="stroke-2 w-5 h-5"
+          >
+            <path d="M19 9l-7 7-7-7" />
+          </svg>
+        </span>
+      </div>
+    </div>
+
+    <template v-if="$slots.summary">
+      <slot name="summary"></slot>
+    </template>
+
+    <Transition
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+    >
+      <div v-show="!collapsed" class="transition-[height] duration-150 overflow-y-hidden">
+        <slot name="content" :expand="onExpand" :collapsed="collapsed"></slot>
+      </div>
+    </Transition>
+  </component>
+</template>

package/src/components/container/Container.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XContainer',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="max-w-screen-2xl mx-auto px-4"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/divider/Divider.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XDivider',
+
+  props: {
+    label: String,
+    vertical: Boolean,
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      {
+        'h-full flex-col': vertical,
+        'w-full': !vertical
+      },
+    ]"
+    class="flex justify-center items-center"
+  >
+    <div
+      class="bg-gray-200 dark:bg-slate-700 flex-grow"
+      :style="[
+        {
+          width: vertical ? '1px' : 'auto',
+          height: !vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+    <div
+      v-if="label"
+      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      :class="[{
+        'my-2': vertical,
+        'mx-4': !vertical
+      }]"
+      v-text="label"
+    ></div>
+    <div
+      class="bg-gray-200 dark:bg-slate-700 flex-grow"
+      :style="[
+        {
+          width: vertical ? '1px' : 'auto',
+          height: !vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+  </div>
+</template>

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,244 @@
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, watch, watchEffect, type PropType } from 'vue'
+import { breakpointsTailwind, SwipeDirection, useBreakpoints, useEventListener, useSwipe, type Breakpoints } from '@vueuse/core'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+export default defineComponent({
+  name: 'XDrawer',
+
+  components: {
+    XScroll,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    modelValue: Boolean,
+    position: {
+      type: String as PropType<'left' | 'right' | 'top' | 'bottom'>,
+      default: 'left',
+    },
+    to: {
+      type: [String, Object] as PropType<string | HTMLElement>,
+      default: 'body',
+    },
+    width: {
+      type: [String, Number],
+      default: 320,
+    },
+    height: {
+      type: [String, Number],
+      default: 320,
+    },
+    breakpoint: [String, Number],
+    backdrop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  expose: ['open', 'close'],
+
+  setup(props, { emit }) {
+    const detached = ref<boolean>(true)
+    const visible = ref<boolean>(true)
+    const value = ref<boolean>(props.modelValue)
+    const backdropRef = ref<HTMLElement | null>(null)
+    const drawerRef = ref<HTMLElement | null>(null)
+
+    const isTailwindBreakpoint = typeof props.breakpoint === 'string'
+    const breakpoints = useBreakpoints(isTailwindBreakpoint ? breakpointsTailwind : { md: props.breakpoint || 768 } as Breakpoints)
+    const point = breakpoints.smaller(isTailwindBreakpoint ? props.breakpoint : 'md')
+
+    watchEffect(() => {
+      if (props.breakpoint) {
+        close()
+        detached.value = point.value
+      }
+    })
+
+    useEventListener(backdropRef, 'pointerdown', close)
+
+    watch(() => props.modelValue, (val) => {
+      value.value = val
+    })
+
+    useEventListener(document, 'keydown', onKeyDown)
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape' && value.value) close()
+    }
+
+    const { lengthX, lengthY } = useSwipe(drawerRef, {
+      // passive: false,
+      // onSwipe(e: TouchEvent) {
+      //   if (lengthX.value < 0) {
+      //     const length = Math.abs(lengthX.value)
+      //     left.value = `${length}px`
+      //   } else {
+      //     left.value = '0'
+      //   }
+      // },
+      // onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+      //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
+      //     left.value = '100%'
+      //   } else {
+      //     left.value = '0'
+      //   }
+      // },
+      onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+        if (detached.value) {
+          if (
+            (props.position === 'left' && direction === 'LEFT') ||
+            (props.position === 'right' && direction === 'RIGHT') ||
+            (props.position === 'top' && direction === 'UP') ||
+            (props.position === 'bottom' && direction === 'DOWN')
+          ) close()
+        }
+      },
+    })
+
+    function close(e?: PointerEvent) {
+      if (e && e.target !== backdropRef.value) return
+      value.value = false
+      emit('update:modelValue', false)
+    }
+
+    function open() {
+      value.value = true
+      emit('update:modelValue', true)
+    }
+
+    const styles = computed(() => {
+      const styles: Record<string, string> = {}
+
+      if (props.position === 'left' || props.position === 'right') styles['width'] = props.width + 'px'
+      else if (props.position === 'top' || props.position === 'bottom') styles['height'] = props.height + 'px'
+
+      return styles
+    })
+
+    const classes = computed(() => {
+      const classes = []
+
+      if (detached.value) {
+        classes.push('absolute shadow-lg')
+
+        if (props.position === 'top') classes.push('top-0 inset-x-0')
+        else if (props.position === 'bottom') classes.push('bottom-0 inset-x-0')
+        else if (props.position === 'left') classes.push('left-0 inset-y-0')
+        else if (props.position === 'right') classes.push('right-0 inset-y-0')
+      }
+
+      return classes
+    })
+
+    function onBeforeEnter(el: HTMLElement) {
+      if (props.position === 'top') el.style.top = `-${props.height}px`
+      else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
+      else if (props.position === 'left') el.style.left = `-${props.width}px`
+      else if (props.position === 'right') el.style.right = `-${props.width}px`
+    }
+
+    function onEnter(el: HTMLElement, done: ()=> void) {
+      if (!detached.value) {
+        done()
+
+        return
+      }
+      el.addEventListener('transitionend', done)
+      setTimeout(() => {
+        if (props.backdrop) el.classList.add('bg-gray-500/30')
+        if (props.position === 'top') el.style.top = '0'
+        else if (props.position === 'bottom') el.style.bottom = '0'
+        else if (props.position === 'left') el.style.left = '0'
+        else if (props.position === 'right') el.style.right = '0'
+      }, 1)
+    }
+
+    function onBeforeLeave(el: HTMLElement) {}
+
+    function onLeave(el: HTMLElement, done: ()=> void) {
+      el.addEventListener('transitionend', done)
+      setTimeout(() => {
+        if (props.backdrop) el.classList.remove('bg-gray-500/30')
+        if (props.position === 'top') el.style.top = `-${props.height}px`
+        else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
+        else if (props.position === 'left') el.style.left = `-${props.width}px`
+        else if (props.position === 'right') el.style.right = `-${props.width}px`
+      }, 1)
+    }
+
+    const deferShow = ref<boolean>(!!(props.to && (props.to instanceof HTMLElement || document.querySelector(props.to))))
+
+    onMounted(() => {
+      deferShow.value = true
+    })
+
+    return {
+      deferShow,
+      backdropRef,
+      drawerRef,
+      visible,
+      classes,
+      styles,
+      detached,
+      value,
+      open,
+      close,
+      onBeforeEnter,
+      onEnter,
+      onBeforeLeave,
+      onLeave,
+    }
+  },
+})
+</script>
+
+<template>
+  <Teleport v-if="deferShow" :to="to" :disabled="!detached">
+    <Transition
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div
+        v-if="!detached || (detached && value)"
+        ref="backdropRef"
+        :class="[
+          $attrs.class,
+          {
+            'absolute z-40 inset-0 duration-150 ease-in-out': detached,
+          },
+        ]"
+      >
+        <div
+          v-if="detached && value"
+          ref="swipeRef"
+          class="flex flex-col max-h-full"
+        ></div>
+        <div
+          ref="drawerRef"
+          class="flex flex-col max-h-full bg-white dark:bg-gray-800"
+          :class="classes"
+          :style="styles"
+        >
+          <slot name="header"></slot>
+          <x-scroll
+            :scrollbar="false"
+            vertical
+            class="flex-1"
+          >
+            <slot></slot>
+          </x-scroll>
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>