@indielayer/ui 0.2.4 → 1.0.0-alpha.3

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>

package/src/components/form/Form.vue

@@ -1,17 +1,19 @@
-<template>
-  <form @submit="submit" @keypress.enter="submit">
-    <fieldset :disabled="disabled">
-      <slot></slot>
-    </fieldset>
-  </form>
-</template>
-
-<script>
-import { provide, onMounted, watch, nextTick } from 'vue'
+<script lang="ts">
+import { defineComponent, provide, onMounted, watch, nextTick } from 'vue'
+import { injectFormKey } from '../../composables/keys'
+
+export type Form = {
+  name: string,
+  focus: ()=> void,
+  validate: ()=> boolean,
+  setError: (val: string)=> void,
+}
 
-export default {
+export default defineComponent({
   name: 'XForm',
+
   inheritAttrs: false,
+
   props: {
     autoValidate: {
       type: Boolean,
@@ -21,21 +23,20 @@ export default {
       type: Boolean,
       default: true,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
+    disabled: Boolean,
     errors: {
       type: Array,
       default: () => [],
     },
   },
 
+  emits: ['submit'],
+
   setup(props, { emit }) {
-    const inputs = []
+    const inputs: Form[] = []
 
-    provide('form', {
-      registerInput: (name, { focus, validate, setError }) => {
+    provide(injectFormKey, {
+      registerInput: (name: string, focus: ()=> void, validate: ()=> boolean, setError: (val: string)=> void) => {
         const exists = inputs.find((i) => i.name === name)
 
         if (exists) {
@@ -45,11 +46,12 @@ export default {
         }
         else inputs.push({ name, focus, validate, setError })
       },
-      unregisterInput: (name) => {
+      unregisterInput: (name: string) => {
         const index = inputs.findIndex((i) => i.name === name)
 
         inputs.splice(index, 1)
       },
+      isInsideForm: true,
     })
 
     onMounted(() => {
@@ -58,7 +60,7 @@ export default {
 
     watch(() => props.errors, (errors) => {
       nextTick(() => {
-        errors.forEach((error) => {
+        errors.forEach((error: any) => {
           const input = inputs.find((i) => i.name === error.field)
 
           if (input) input.setError(error.msg)
@@ -83,7 +85,7 @@ export default {
       return isFormValid
     }
 
-    const submit = (e) => {
+    const submit = (e: Event) => {
       e.preventDefault()
       e.stopPropagation()
 
@@ -97,5 +99,13 @@ export default {
       submit,
     }
   },
-}
+})
 </script>
+
+<template>
+  <form @submit="submit">
+    <fieldset :disabled="disabled">
+      <slot></slot>
+    </fieldset>
+  </form>
+</template>

package/src/components/icon/Icon.vue

@@ -1,46 +1,56 @@
-<template>
-  <svg
-    class="stroke-2 inline-block"
-    :class="[
-      {
-        'h-3 w-3': size === 'xs',
-        'h-4 w-4': size === 'sm',
-        'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
-        'h-6 w-6': size === 'xl',
-      },
-    ]"
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g v-html="icons[icon] ? icons[icon] : icon" />
-  </svg>
-</template>
-
-<script>
-import { withProps, withValidator } from '../../composables/common'
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue'
+import { useCommon } from '../../composables/common'
+import { injectIconsKey } from '../../composables/keys'
 
-export default {
+export default defineComponent({
   name: 'XIcon',
 
-  validator: withValidator(),
+  validators: {
+    ...useCommon.validators(),
+  },
 
   props: {
-    ...withProps(),
-
+    ...useCommon.props(),
     icon: {
       type: String,
       required: true,
     },
+    filled: Boolean,
+    viewBox: {
+      type: String,
+      default: '0 0 24 24',
+    },
   },
 
-  computed: {
-    icons() {
-      return this.$icons ? this.$icons : {}
-    },
+  setup(props) {
+    const icons: any = inject(injectIconsKey, {})
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs') return 'h-3 w-3'
+      else if (props.size === 'sm') return 'h-4 w-4'
+      else if (props.size === 'lg') return 'h-6 w-6'
+      else if (props.size === 'xl') return 'h-9 w-9'
+
+      return 'h-5 w-5'
+    })
+
+    return {
+      icons,
+      sizeClasses,
+    }
   },
-}
+})
 </script>
+
+<template>
+  <svg
+    :class="[sizeClasses, { 'stroke-2': !filled}]"
+    :fill="filled ? 'currentColor' : 'none'"
+    :stroke="filled ? undefined : 'currentColor'"
+    :viewBox="viewBox"
+    :stroke-linecap="filled ? undefined : 'round'"
+    :stroke-linejoin="filled ? undefined : 'round'"
+    xmlns="http://www.w3.org/2000/svg"
+    v-html="icons[icon] ? icons[icon] : icon"
+  />
+</template>

package/src/components/image/Image.vue

@@ -1,30 +1,36 @@
-<template>
-  <img :src="source" />
-</template>
+<script lang="ts">
+import { defineComponent, watch, ref } from 'vue'
 
-<script>
 const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 
-export default {
+export default defineComponent({
+  name: 'XImage',
+
   props: {
-    src: {
-      type: String,
-      default: '',
-    },
+    src: String,
   },
 
-  data() {
-    return {
-      source: fallback,
-    }
-  },
+  setup(props) {
+    const source = ref<string | undefined>(fallback)
 
-  mounted() {
-    const img = new Image()
+    watch(() => props.src, (src) => {
+      if (!src) return
+      const img = new Image()
 
-    img.onload = () => { this.source = this.src }
-    img.onerror = () => { }
-    img.src = this.src
+      img.onload = () => { source.value = props.src }
+      img.onerror = () => { }
+      img.src = src
+    }, {
+      immediate: true,
+    })
+
+    return {
+      source,
+    }
   },
-}
+})
 </script>
+
+<template>
+  <img :src="source" />
+</template>

package/src/components/index.ts

@@ -0,0 +1,45 @@
+export { default as XAlert } from './alert/Alert.vue'
+export { default as XAvatar } from './avatar/Avatar.vue'
+export { default as XBadge } from './badge/Badge.vue'
+export { default as XBreadcrumbs } from './breadcrumbs/Breadcrumbs.vue'
+export { default as XButton } from './button/Button.vue'
+export { default as XButtonGroup } from './button/ButtonGroup.vue'
+export { default as XCard } from './card/Card.vue'
+export { default as XCheckbox } from './checkbox/Checkbox.vue'
+export { default as XCollapse } from './collapse/Collapse.vue'
+export { default as XContainer } from './container/Container.vue'
+export { default as XDivider } from './divider/Divider.vue'
+export { default as XDrawer } from './drawer/Drawer.vue'
+export { default as XForm } from './form/Form.vue'
+export { default as XIcon } from './icon/Icon.vue'
+export { default as XImage } from './image/Image.vue'
+export { default as XInput } from './input/Input.vue'
+export { default as XLink } from './link/Link.vue'
+export { default as XMenu } from './menu/Menu.vue'
+export { default as XMenuItem } from './menu/MenuItem.vue'
+export { default as XModal } from './modal/Modal.vue'
+export { default as XNotifications } from './notifications/Notifications.vue'
+export { default as XPagination } from './pagination/Pagination.vue'
+export { default as XPaginationItem } from './pagination/PaginationItem.vue'
+export { default as XPopover } from './popover/Popover.vue'
+export { default as XPopoverContainer } from './popover/PopoverContainer.vue'
+export { default as XProgress } from './progress/Progress.vue'
+export { default as XRadio } from './radio/Radio.vue'
+export { default as XScroll } from './scroll/Scroll.vue'
+export { default as XSelect } from './select/Select.vue'
+export { default as XSkeleton } from './skeleton/Skeleton.vue'
+export { default as XSlider } from './slider/Slider.vue'
+export { default as XSpacer } from './spacer/Spacer.vue'
+export { default as XSpinner } from './spinner/Spinner.vue'
+export { default as XTable } from './table/Table.vue'
+export { default as XTableBody } from './table/TableBody.vue'
+export { default as XTableCell } from './table/TableCell.vue'
+export { default as XTableHead } from './table/TableHead.vue'
+export { default as XTableHeader } from './table/TableHeader.vue'
+export { default as XTableRow } from './table/TableRow.vue'
+export { default as XTab } from './tab/Tab.vue'
+export { default as XTabGroup } from './tab/TabGroup.vue'
+export { default as XTag } from './tag/Tag.vue'
+export { default as XTextarea } from './textarea/Textarea.vue'
+export { default as XToggle } from './toggle/Toggle.vue'
+export { default as XTooltip } from './tooltip/Tooltip.vue'