@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/menu/MenuItem.vue

@@ -0,0 +1,277 @@
+<script lang="ts">
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+
+import XSpinner from '../../components/spinner/Spinner.vue'
+import XLink from '../../components/link/Link.vue'
+
+export default defineComponent({
+  name: 'XMenuItem',
+
+  components: {
+    XSpinner,
+    XLink,
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    active: Boolean,
+    onClick: Function,
+    inactive: Boolean,
+    value: [Number,String],
+    to: String,
+    exact: Boolean,
+    href: String,
+    target: String,
+    label: String,
+    icon: String,
+    iconRight: String,
+    loading: Boolean,
+    rounded: Boolean,
+    filled: Boolean,
+    selected: Boolean,
+    disabled: Boolean,
+  },
+
+  emits: ['active', 'click'],
+
+  setup(props, { emit }) {
+    const elRef = ref()
+    const isActive = ref(false)
+
+    const filled = computed(() => props.filled || props.item.filled)
+    const cItem = computed(() => ({
+      ...props,
+      ...props.item,
+    }))
+
+    const htmlTag = cItem.value.to || cItem.value.href ? 'x-link' : 'div'
+    const isSupported = window && 'MutationObserver' in window
+    const classObserver = isSupported ? new MutationObserver(check) : null
+
+    onMounted(() => {
+      if (!elRef.value) return
+
+      check()
+
+      if (isSupported && htmlTag === 'x-link') classObserver?.observe(elRef.value.$el, {
+        attributes: true,
+        attributeFilter: ['class'],
+      })
+    })
+
+    onBeforeUnmount(() => {
+      if (classObserver) classObserver.disconnect()
+    })
+
+    function onItemClick(e: Event) {
+      cItem.value.onClick && cItem.value.onClick(e)
+      emit('click', e)
+    }
+
+    function check() {
+      if (elRef.value && elRef.value.$el && (cItem.value.href || cItem.value.to)) {
+        const active = elRef.value.$el.classList.contains(cItem.value.exact ? 'router-link-exact-active' : 'router-link-active')
+
+        isActive.value = active
+      } else {
+        isActive.value = cItem.value.active
+      }
+    }
+
+    watch(() => isActive.value, (val) => {
+      if (val) emit('active')
+    })
+
+    watch(() => cItem.value.active, (val) => {
+      isActive.value = val
+    })
+
+    const css = useCSS()
+    const colors = useColors()
+    const cssVariables = computed(() => {
+      const color = colors.getPalette(cItem.value.color || 'gray')
+      const gray = colors.getPalette('gray')
+
+      if (cItem.value.disabled) return css.get('text', gray[300])
+
+      if (filled.value) {
+        if (isActive.value) {
+          return css.variables({
+            bg: props.selected ? color[100] : color[50],
+            text: color[500],
+            hover: {
+              bg: props.selected ? color[100] : color[50],
+              text: color[500],
+            },
+            dark: {
+              bg: props.selected ? color[800] : color[700],
+              text: color[100],
+              hover: {
+                bg: props.selected ? color[800] : color[700],
+                text: color[100],
+              },
+            },
+          })
+        }
+
+        return css.variables({
+          bg: props.selected ? gray[50] : 'transparent',
+          text: gray[800],
+          hover: {
+            bg: gray[50],
+            text: gray[900],
+          },
+          dark: {
+            bg: props.selected ? gray[800] : 'transparent',
+            text: gray[200],
+            hover: {
+              bg: gray[800],
+              text: gray[100],
+            },
+          },
+        })
+      }
+
+      if (isActive.value) {
+        return css.variables({
+          text: color[500],
+          hover: {
+            text: color[500],
+            border: color[500],
+          },
+          dark: {
+            text: color[500],
+            hover: {
+              text: color[500],
+              border: color[500],
+            },
+          },
+        })
+      }
+
+      return css.variables({
+        text: gray[800],
+        hover: {
+          text: gray[900],
+          border: gray[300],
+        },
+        dark: {
+          text: gray[300],
+          hover: {
+            text: gray[200],
+            border: gray[800],
+          },
+        },
+      })
+    })
+
+    return {
+      elRef,
+      cItem,
+      htmlTag,
+      isActive,
+      cssVariables,
+      onItemClick,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="htmlTag"
+    ref="elRef"
+    :to="cItem.to"
+    :href="cItem.href"
+    :target="cItem.target"
+    :color="cItem.color"
+    class="relative flex items-center whitespace-nowrap px-3 mt-1"
+    :style="cssVariables"
+    :class="[
+      $style['menu-item'],
+      [isActive ? $style['menu-item--active'] : ''],
+      {
+        'font-medium': isActive,
+        'flex items-center': $slots.prefix || $slots.suffix,
+        'cursor-pointer': !cItem.disabled && !inactive,
+
+        // size
+        'py-1 text-xs': cItem.size === 'xs',
+        'py-2 text-sm': cItem.size === 'sm',
+        'py-1.5': !cItem.size || !['xs', 'sm', 'lg', 'xl'].includes(cItem.size),
+        'py-3': cItem.size === 'lg',
+        'py-4 text-lg': cItem.size === 'xl',
+
+        'rounded my-[1px]': rounded
+      },
+    ]"
+    :title="cItem.label"
+    :alt="cItem.label"
+    @click="onItemClick"
+  >
+    <span v-if="$slots.prefix" class="mr-2 shrink-0">
+      <slot name="prefix"></slot>
+    </span>
+    <x-icon v-else-if="cItem.icon" :size="cItem.size" :icon="cItem.icon" class="mr-2 shrink-0"/>
+
+    <span class="flex-1 truncate">
+      <slot>{{ cItem.label }}</slot>
+    </span>
+
+    <span class="ml-1 shrink-0">
+      <x-spinner v-if="cItem.loading" :size="cItem.size" />
+      <template v-else>
+        <span v-if="$slots.suffix">
+          <slot name="suffix"></slot>
+        </span>
+        <x-icon v-else-if="cItem.iconRight" :size="cItem.size" :icon="cItem.iconRight"/>
+      </template>
+    </span>
+  </component>
+</template>
+
+<style lang="postcss" module scoped>
+  .menu-item {
+    color: var(--x-text);
+    background-color: var(--x-bg);
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: -1px;
+      height: 100%;
+      width: 1px;
+      background-color: transparent;
+    }
+
+    &:hover {
+      color: var(--x-text-hover, var(--x-text));
+      background-color: var(--x-bg-hover, var(--x-bg));
+    }
+
+    :global(.dark) & {
+      color: var(--x-dark-text);
+      background: var(--x-dark-bg);
+      &:hover {
+        color: var(--x-dark-text-hover, var(--x-dark-text));
+        background-color: var(--x-dark-bg-hover, var(--x-dark-bg));
+      }
+    }
+  }
+
+  :global(.x-menu-inner) {
+    .menu-item {
+      &:hover:before, &--active:before {
+        background-color: var(--x-border-hover);
+      }
+    }
+  }
+</style>

package/src/components/modal/Modal.vue

@@ -1,111 +1,175 @@
-<template>
-  <div
-    class="fixed z-40 inset-0 overflow-y-auto transition-all"
-    :class="[
-      isOpen ? 'visible' : 'invisible ease-in duration-100'
-    ]"
-  >
-    <div
-      class="fixed inset-0 bg-gray-500 dark:bg-gray-600 transition-opacity"
-      :class="[
-        isOpen ? 'ease-out duration-200 opacity-75' : 'ease-in duration-100 opacity-0',
-      ]"
-      @click.self="close()"
-    ></div>
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from 'vue'
 
-    <div class="flex items-end sm:items-center justify-center min-h-full p-4 sm:p-6">
-      <div
-        class="relative inline-block bg-white dark:bg-gray-900 rounded-lg shadow-xl transform transition-all"
-        :class="[
-          {
-            'w-full': size === 'auto',
-            'sm:max-w-xs w-full': size === 'xs',
-            'sm:max-w-sm w-full': size === 'sm',
-            'sm:max-w-lg w-full': !['auto', 'full', 'xs', 'sm', 'lg', 'xl'].includes(size),
-            'sm:max-w-xl w-full': size === 'lg',
-            'sm:max-w-3xl w-full': size === 'xl',
-            'w-full': size === 'full',
-          },
-          isOpen ?
-            'ease-out duration-200 opacity-100 translate-y-0 sm:scale-100'
-            : 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-        ]"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="modal-headline"
-      >
-        <slot></slot>
-        <div v-if="showClose" class="absolute rounded-md bg-white -top-4 -right-2 w-8 h-8 shadow-md flex items-center justify-center cursor-pointer" @click="close()">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            stroke-linecap="round"
-            fill="none"
-            role="presentation"
-            class="stroke-2 w-4 h-4"
-          >
-            <line x1="18" y1="6" x2="6" y2="18"/>
-            <line x1="6" y1="6" x2="18" y2="18"/>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
+import { onClickOutside, useEventListener } from '@vueuse/core'
 
-<script>
-export default {
+import XScroll from '../../components/scroll/Scroll.vue'
+
+export default defineComponent({
   name: 'XModal',
 
+  components: {
+    XScroll,
+  },
+
   props: {
     size: {
-      type: String,
-      default: null,
-    },
-    showClose: {
-      type: Boolean,
-      default: false,
+      type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>,
+      default: 'md',
     },
+    modelValue: Boolean,
+    showClose: Boolean,
+    backdrop: Boolean,
   },
 
-  data() {
-    return {
-      isOpen: false,
-    }
-  },
+  emits: ['update:modelValue'],
 
-  beforeMount() {
-    document.addEventListener('keydown', this.onKeydown)
-  },
+  expose: ['open', 'close'],
 
-  beforeUnmount() {
-    document.removeEventListener('keydown', this.onKeydown)
-  },
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+    const visible = ref(false)
+    const modalRef = ref<HTMLElement | null>(null)
 
-  methods: {
-    close() {
-      this.isOpen = false
-      this.$emit('close')
-    },
+    const classes = computed(() => {
+      if (props.size === 'full') return 'w-full'
+      else if (props.size === 'xs') return 'sm:max-w-xs w-full'
+      else if (props.size === 'sm') return 'sm:max-w-sm w-full'
+      else if (props.size === 'lg') return 'sm:max-w-xl w-full'
+      else if (props.size === 'xl') return 'sm:max-w-3xl w-full'
+
+      return 'sm:max-w-lg w-full'
+    })
 
-    onKeydown(event) {
-      if (event.keyCode === 27 && this.isOpen) {
-        this.close()
+    let stopClickOutside: undefined | (()=> void) = undefined
+
+    watch(value, (val) => {
+      if (stopClickOutside) {
+        stopClickOutside()
+        stopClickOutside = undefined
       }
-    },
 
-    open() {
-      this.isOpen = true
-      this.$emit('open')
-    },
+      if (val) {
+        setTimeout(() => {
+          stopClickOutside = onClickOutside(modalRef, close)
+        })
+      }
+    })
 
-    toggle() {
-      this.isOpen = !this.isOpen
-      this.$emit('toggle', this.isOpen)
-    },
+    watch(() => props.modelValue, (val) => {
+      if (val) {
+        value.value = val
+
+        setTimeout(() => {
+          visible.value = val
+        })
+      } else {
+        visible.value = val
+
+        setTimeout(() => {
+          value.value = val
+        }, 150)
+      }
+    })
+
+    useEventListener(document, 'keydown', onKeyDown)
+
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape' && value.value) close()
+    }
+
+    function close() {
+      visible.value = false
+
+      setTimeout(() => {
+        value.value = false
+        emit('update:modelValue', false)
+      }, 150)
+    }
+
+    function open() {
+      value.value = true
+      emit('update:modelValue', true)
+
+      setTimeout(() => {
+        visible.value = true
+      })
+    }
+
+    const closeIcon = '<path d="M6 18L18 6M6 6l12 12" />'
+
+    return {
+      closeIcon,
+      modalRef,
+      classes,
+      visible,
+      value,
+      close,
+      open,
+    }
   },
-}
+})
 </script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="value"
+      class="fixed z-40 inset-0 overflow-y-auto transition-all"
+      :class="[
+        visible ? 'visible' : 'invisible ease-in duration-100'
+      ]"
+    >
+      <div
+        v-if="backdrop"
+        class="fixed inset-0 bg-gray-500 dark:bg-black transition-opacity"
+        :class="[
+          visible ? 'ease-out duration-200 opacity-30 dark:opacity-70' : 'ease-in duration-100 opacity-0',
+        ]"
+      ></div>
+
+      <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
+        <div
+          ref="modalRef"
+          class="relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full"
+          :class="[
+            classes,
+            visible ?
+              'ease-out duration-200 opacity-100 translate-y-0 sm:scale-100'
+              : 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+          ]"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-headline"
+        >
+          <div
+            v-if="showClose"
+            class="absolute p-1 top-4 right-4 rounded-full bg-opacity-10 hover:bg-opacity-30 cursor-pointer"
+            :class="[
+              $slots.image ? 'bg-gray-900 text-white' : 'bg-gray-500 text-gray-800 dark:text-gray-300'
+            ]"
+            @click="close"
+          >
+            <x-icon :icon="closeIcon"/>
+          </div>
+          <slot name="image"></slot>
+          <div v-if="$slots.header" class="text-lg font-semibold px-6 py-4 border-b">
+            <slot name="header"></slot>
+          </div>
+          <x-scroll
+            v-if="$slots.default"
+            :scrollbar="false"
+            vertical
+          >
+            <div class="px-6 py-4">
+              <slot></slot>
+            </div>
+          </x-scroll>
+          <div v-if="$slots.actions" class="bg-slate-50 dark:bg-gray-800 p-4">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>