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

package/src/components/menu/Menu.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+
+import XMenuItem from './MenuItem.vue'
+import XCollapse from '../../components/collapse/Collapse.vue'
+import XDivider from '../../components/divider/Divider.vue'
+
+export default defineComponent({
+  name: 'XMenu',
+
+  components: {
+    XDivider,
+    XCollapse,
+    XMenuItem,
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    items: Array as PropType<Array<any>>,
+    collapsible: {
+      type: Boolean,
+      default: true,
+    },
+    collapseIcon: String,
+    expanded: Boolean,
+    disabled: Boolean,
+    rounded: Boolean,
+    filled: Boolean,
+  },
+
+  emits: ['expand'],
+})
+</script>
+
+<template>
+  <div v-if="items">
+    <template v-for="(item, index) in items" :key="index">
+      <template v-if="item.items">
+        <x-collapse
+          v-if="item.collapsible !== false"
+          :icon="item.collapseIcon || collapseIcon"
+          :expanded="item.expanded || expanded"
+          :disabled="disabled || item.disabled"
+          class="x-menu-inner"
+          @expand="$emit('expand')"
+        >
+          <template #default="{ }">
+            <x-menu-item
+              :item="item"
+              :color="item.color || color"
+              :size="item.size || size"
+              :rounded="rounded"
+              :filled="filled"
+              :disabled="disabled || item.disabled"
+              class="pr-10 font-medium"
+            />
+          </template>
+          <template #content="{ expand }">
+            <x-menu
+              class="border-l ml-4 border-gray-100 dark:border-gray-700 mt-2 mb-1"
+              :class="{ 'pl-1': filled }"
+              :items="item.items"
+              :color="item.color || color"
+              :size="item.size || size"
+              :collapsible="collapsible"
+              :collapse-icon="item.collapseIcon || collapseIcon"
+              :expanded="item.expanded || expanded"
+              :disabled="disabled || item.disabled"
+              :rounded="rounded"
+              :filled="filled"
+              @expand="expand(false)"
+            />
+          </template>
+        </x-collapse>
+        <template v-else>
+          <x-menu-item
+            :item="item"
+            :rounded="rounded"
+            :color="item.color || color"
+            :size="item.size || size"
+            :disabled="disabled || item.disabled"
+            class="font-medium"
+            inactive
+          />
+          <x-menu
+            class="x-menu-inner ml-4 border-l border-gray-100 dark:border-gray-700"
+            :class="{ 'pl-1': filled }"
+            :items="item.items"
+            :color="item.color || color"
+            :size="item.size || size"
+            :collapsible="collapsible"
+            :collapse-icon="item.collapseIcon || collapseIcon"
+            :expanded="item.expanded || expanded"
+            :disabled="disabled || item.disabled"
+            :rounded="rounded"
+            :filled="filled"
+            @expand="$emit('expand')"
+          />
+        </template>
+      </template>
+      <component
+        :is="item.divider ? 'x-divider' : 'x-menu-item'"
+        v-else
+        :color="item.color || color"
+        :size="item.size || size"
+        :item="item"
+        :disabled="disabled || item.disabled"
+        :filled="filled"
+        :rounded="rounded"
+        :class="{ 'my-2': item.divider }"
+        @active="$emit('expand')"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,175 @@
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from 'vue'
+
+import { onClickOutside, useEventListener } from '@vueuse/core'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+export default defineComponent({
+  name: 'XModal',
+
+  components: {
+    XScroll,
+  },
+
+  props: {
+    size: {
+      type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>,
+      default: 'md',
+    },
+    modelValue: Boolean,
+    showClose: Boolean,
+    backdrop: Boolean,
+  },
+
+  emits: ['update:modelValue'],
+
+  expose: ['open', 'close'],
+
+  setup(props, { emit }) {
+    const value = ref(props.modelValue)
+    const visible = ref(false)
+    const modalRef = ref<HTMLElement | null>(null)
+
+    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'
+    })
+
+    let stopClickOutside: undefined | (()=> void) = undefined
+
+    watch(value, (val) => {
+      if (stopClickOutside) {
+        stopClickOutside()
+        stopClickOutside = undefined
+      }
+
+      if (val) {
+        setTimeout(() => {
+          stopClickOutside = onClickOutside(modalRef, close)
+        })
+      }
+    })
+
+    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>