@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/menu/MenuItem.vue

@@ -0,0 +1,209 @@
+<script lang="ts">
+const menuItemProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  item: {
+    type: Object as PropType<MenuArrayItem>,
+    default: () => {},
+  },
+  active: Boolean,
+  attrs: {
+    type: Object,
+    default: () => {},
+  },
+  onClick: Function,
+  value: [Number, String],
+  to: String,
+  exact: Boolean,
+  href: String,
+  target: String,
+  label: String,
+  icon: String,
+  iconRight: String,
+  loading: Boolean,
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  filled: {
+    type: Boolean,
+    default: true,
+  },
+  selected: Boolean,
+  disabled: Boolean,
+}
+
+export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
+
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isActive: Ref<boolean>; }
+export interface MenuItemTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XMenuItem',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, type ExtractPublicPropTypes, type PropType, type Ref } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+import type { MenuArrayItem } from './Menu.vue'
+
+const props = defineProps(menuItemProps)
+
+const emit = defineEmits(['active', 'click'])
+
+const elRef = ref()
+const isActive = ref(false)
+
+const computedProps = computed(() => ({
+  ...props,
+  ...props.item,
+} as MenuItemProps))
+
+const htmlTag = computed(() => {
+  if (computedProps.value.to) return 'router-link'
+  if (computedProps.value.href) return 'a'
+
+  return 'div'
+})
+
+onMounted(() => {
+  if (!elRef.value) return
+
+  check()
+
+  if (htmlTag.value === 'router-link') useMutationObserver(elRef.value.$el, check, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+})
+
+function onItemClick(e: Event) {
+  if (computedProps.value.disabled) {
+    e.stopPropagation()
+    e.preventDefault()
+
+    return
+  }
+
+  computedProps.value.onClick && computedProps.value.onClick(e)
+  emit('click', e)
+}
+
+function check() {
+  if (elRef.value && elRef.value.$el && (computedProps.value.href || computedProps.value.to)) {
+    const active = elRef.value.$el.classList.contains(computedProps.value.exact ? 'router-link-exact-active' : 'router-link-active') || false
+
+    isActive.value = active
+  } else {
+    isActive.value = !!computedProps.value.active
+  }
+}
+
+watch(() => isActive.value, (val) => {
+  if (val) emit('active')
+})
+
+watch(() => computedProps.value.active, (val) => {
+  isActive.value = !!val
+})
+
+const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, { isActive })
+</script>
+
+<template>
+  <component
+    :is="htmlTag"
+    ref="elRef"
+    v-bind="computedProps.attrs"
+    :to="computedProps.to"
+    :href="computedProps.href"
+    :target="computedProps.target"
+    :color="computedProps.color"
+    :style="styles"
+    :class="[
+      className,
+      $style['menu-item'],
+      [isActive ? $style['menu-item--active'] : ''],
+      classes.wrapper,
+      {
+        'flex items-center': $slots.prefix || $slots.suffix
+      }
+    ]"
+    :title="computedProps.label"
+    :alt="computedProps.label"
+    @click="onItemClick"
+  >
+    <span v-if="$slots.prefix" class="mr-2 shrink-0">
+      <slot name="prefix"></slot>
+    </span>
+    <x-icon v-else-if="computedProps.icon" :size="computedProps.size" :icon="computedProps.icon" class="mr-2"/>
+
+    <span class="flex-1 truncate">
+      <slot>{{ computedProps.label }}</slot>
+    </span>
+
+    <span class="ml-1 shrink-0">
+      <x-spinner v-if="computedProps.loading" :size="computedProps.size" />
+      <template v-else>
+        <span v-if="$slots.suffix">
+          <slot name="suffix"></slot>
+        </span>
+        <x-icon v-else-if="computedProps.iconRight" :size="computedProps.size" :icon="computedProps.iconRight"/>
+      </template>
+    </span>
+  </component>
+</template>
+
+<style lang="postcss" module scoped>
+  .menu-item {
+    color: var(--x-menu-item-text);
+    background-color: var(--x-menu-item-bg);
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: -1px;
+      height: 100%;
+      width: 1px;
+      background-color: transparent;
+    }
+
+    &:hover {
+      color: var(--x-menu-item-text-hover, var(--x-menu-item-text));
+      background-color: var(--x-menu-item-bg-hover, var(--x-menu-item-bg));
+    }
+
+    :global(.dark) &,
+    &:global(.dark) {
+      color: var(--x-menu-item-dark-text);
+      background: var(--x-menu-item-dark-bg);
+
+      &:hover {
+        color: var(--x-menu-item-dark-text-hover, var(--x-menu-item-dark-text));
+        background-color: var(--x-menu-item-dark-bg-hover, var(--x-menu-item-dark-bg));
+      }
+    }
+  }
+
+  :global(.x-menu-inner) {
+    /* stylelint-disable-next-line no-descending-specificity */
+    .menu-item {
+      &:hover::before,
+      &--active::before {
+        background-color: var(--x-menu-item-border-hover);
+      }
+    }
+  }
+</style>

package/src/components/menu/__tests__/Menu.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Menu from '../Menu.vue'
+
+describe('Menu', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Menu)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/menu/__tests__/MenuItem.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MenuItem from '../MenuItem.vue'
+
+describe('MenuItem', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(MenuItem)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/menu/index.ts

@@ -0,0 +1,5 @@
+export { default as XMenu } from './Menu.vue'
+export type { MenuProps, MenuArrayItem, MenuTheme } from './Menu.vue'
+
+export { default as XMenuItem } from './MenuItem.vue'
+export type { MenuItemProps, MenuItemTheme } from './MenuItem.vue'

package/src/components/menu/theme/Menu.base.theme.ts

@@ -0,0 +1,9 @@
+import type { MenuTheme } from '../Menu.vue'
+
+const theme: MenuTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

package/src/components/menu/theme/Menu.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { MenuTheme } from '../Menu.vue'
+
+import BaseTheme from './Menu.base.theme'
+
+const theme: MenuTheme = BaseTheme
+
+export default theme

package/src/components/menu/theme/MenuItem.base.theme.ts

@@ -0,0 +1,109 @@
+import type { MenuItemTheme } from '../MenuItem.vue'
+
+const theme: MenuItemTheme = {
+  classes: {
+    wrapper: ({ props, data }) => {
+      const classes: any[] = ['relative !flex items-center whitespace-nowrap px-3']
+
+      classes.push({
+        'font-medium': data.isActive,
+        'cursor-pointer': !props.disabled,
+
+        // size
+        'py-1 text-xs': props.size === 'xs',
+        'py-2 text-sm': props.size === 'sm',
+        'py-1.5': !props.size || !['xs', 'sm', 'lg', 'xl'].includes(props.size),
+        'py-3': props.size === 'lg',
+        'py-4 text-lg': props.size === 'xl',
+
+        'rounded': props.rounded,
+      })
+
+      return classes
+    },
+  },
+
+  styles: ({ colors, props, css, data }) => {
+    const color = colors.getPalette(props.color || 'gray')
+    const gray = colors.getPalette('gray')
+
+    if (props.disabled) return css.variables({
+      text: gray[300],
+      dark: {
+        text: gray[600],
+      },
+    })
+
+    if (props.filled) {
+      if (data.isActive) {
+        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[700] : color[700],
+            text: color[100],
+            hover: {
+              bg: props.selected ? color[700] : 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 (data.isActive) {
+      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],
+        },
+      },
+    })
+  },
+}
+
+export default theme

package/src/components/menu/theme/MenuItem.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { MenuItemTheme } from '../MenuItem.vue'
+
+import BaseTheme from './MenuItem.base.theme'
+
+const theme: MenuItemTheme = BaseTheme
+
+export default theme

package/src/components/modal/Modal.vue

@@ -0,0 +1,226 @@
+<script lang="ts">
+const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
+const modalProps = {
+  size: {
+    type: String as PropType<ModalSize>,
+    default: 'xl',
+  },
+  modelValue: Boolean,
+  showClose: Boolean,
+  backdrop: Boolean,
+  hasActions: {
+    type: Boolean,
+    default: true,
+  },
+  hasHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: String,
+  description: String,
+  label: String,
+  loading: Boolean,
+  loadingText: String,
+  fluid: Boolean,
+
+  // form props
+  isForm: Boolean,
+  formDisabled: Boolean,
+  formDescription: String,
+  formTitle: String,
+  formAutoValidate: {
+    type: Boolean,
+    default: true,
+  },
+  formErrors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
+}
+
+export type ModalSize = typeof modalSize[number]
+export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
+
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label'
+type InternaData = {
+  visible: boolean;
+}
+export interface ModalTheme extends ThemeComponent<ModalProps, InternalClasses, InternaData> {}
+
+export default {
+  name: 'XModal',
+  validators: {
+    size: modalSize,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch, type PropType, type ExtractPublicPropTypes, computed, nextTick, onMounted } from 'vue'
+import { onClickOutside, useEventListener } from '@vueuse/core'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useFocusTrap } from '../../composables/useFocusTrap'
+import { closeIcon } from '../../common/icons'
+
+import XButton from '../button/Button.vue'
+import XScroll from '../scroll/Scroll.vue'
+import XForm, { type FormError } from '../form/Form.vue'
+import { useSlots } from 'vue'
+
+const props = defineProps(modalProps)
+
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const value = ref(props.modelValue)
+const visible = ref(false)
+const modalRef = ref<HTMLElement | null>(null)
+const modalWrapperRef = ref<HTMLElement | null>(null)
+
+const { initFocusTrap, clearFocusTrap } = useFocusTrap()
+
+let stopClickOutside: undefined | (() => void) = undefined
+
+watch(value, (val) => {
+  if (stopClickOutside) {
+    stopClickOutside()
+    stopClickOutside = undefined
+  }
+
+  if (val) {
+    setTimeout(() => {
+      stopClickOutside = onClickOutside(modalRef, close)
+    })
+  }
+})
+
+watch(() => props.modelValue, checkVisibiliy, { immediate: true })
+
+async function checkVisibiliy() {
+  const val = props.modelValue
+
+  if (val) {
+    value.value = val
+
+    await nextTick()
+
+    visible.value = val
+
+    await nextTick()
+
+    initFocusTrap(modalRef)
+    document.body.style.overflow = 'hidden'
+  } else {
+    visible.value = val
+    value.value = val
+    clearFocusTrap()
+    document.body.style.overflow = 'auto'
+  }
+}
+
+if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
+
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && value.value) close()
+}
+
+function close() {
+  visible.value = false
+  setTimeout(() => {
+    emit('update:modelValue', false)
+  }, 150)
+}
+
+function open() {
+  emit('update:modelValue', true)
+  visible.value = true
+}
+
+const slots = useSlots()
+
+const hasPlaceholder = computed(() => {
+  if (slots['tertiary-action'] || slots['cancel-action']) return true
+
+  return false
+})
+
+const { styles, classes, className } = useTheme('Modal', {}, props, {
+  visible,
+})
+
+defineExpose({ open, close })
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      v-if="value"
+      ref="modalWrapperRef"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+        visible ? 'visible' : 'invisible ease-in duration-100'
+      ]"
+    >
+      <div
+        v-if="backdrop"
+        :class="classes.backdrop"
+      ></div>
+
+      <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
+        <component
+          :is="isForm ? XForm : 'div'"
+          ref="modalRef"
+          :disabled="formDisabled"
+          :auto-validate="formAutoValidate"
+          :title="formTitle"
+          :description="formDescription"
+          :errors="formErrors"
+          :class="classes.modal"
+          auto-focus
+          :has-footer="false"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-headline"
+          @submit="$emit('submit')"
+        >
+          <slot name="image"></slot>
+          <div v-if="hasHeader" :class="classes.header">
+            <slot name="header">
+              <div v-if="label" :class="classes.label">{{ label }}</div>
+              <div v-if="title" :class="classes.title">{{ title }}</div>
+            </slot>
+          </div>
+          <x-scroll
+            v-if="$slots.default"
+            :scrollbar="false"
+            vertical
+          >
+            <div :class="classes.content">
+              <div v-if="description" :class="classes.description">{{ description }}</div>
+              <slot></slot>
+            </div>
+          </x-scroll>
+          <x-button
+            v-if="showClose"
+            ghost
+            size="lg"
+            tabindex="-1"
+            :icon="closeIcon"
+            :class="classes.closeIcon"
+            @click="close"
+          />
+          <div v-if="hasActions" :class="classes.actions">
+            <slot name="actions">
+              <slot name="cancel-action"></slot>
+              <div v-if="hasPlaceholder"></div>
+              <slot name="tertiary-action"></slot>
+              <slot name="secondary-action"></slot>
+              <slot name="primary-action"></slot>
+            </slot>
+          </div>
+        </component>
+      </div>
+    </div>
+  </teleport>
+</template>

package/src/components/modal/__tests__/Modal.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Modal from '../Modal.vue'
+
+describe('Modal', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(Modal)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/modal/index.ts

@@ -0,0 +1,2 @@
+export { default as XModal } from './Modal.vue'
+export type { ModalProps, ModalSize, ModalTheme } from './Modal.vue'

package/src/components/modal/theme/Modal.base.theme.ts

@@ -0,0 +1,47 @@
+import type { ModalTheme } from '../Modal.vue'
+
+const theme: ModalTheme = {
+  classes: {
+    wrapper: 'fixed z-40 inset-0 overflow-y-auto transition-all',
+
+    backdrop: ({ data }) => {
+      const classes = ['fixed inset-0 bg-gray-500 dark:bg-black transition-opacity']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-30 dark:opacity-70')
+      else classes.push('ease-in duration-100 opacity-0')
+
+      return classes
+    },
+
+    modal: ({ props, data }) => {
+      const classes = ['relative flex flex-col z-10 bg-white dark:bg-gray-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full']
+
+      if (data.visible) classes.push('ease-out duration-200 opacity-100 translate-y-0 sm:scale-100')
+      else classes.push('ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95')
+
+      if (props.size === 'xs') classes.push('sm:max-w-xs')
+      else if (props.size === 'sm') classes.push('sm:max-w-sm')
+      else if (props.size === 'lg') classes.push('sm:max-w-xl')
+      else if (props.size === 'xl') classes.push('sm:max-w-3xl')
+      else classes.push('sm:max-w-lg')
+
+      return classes
+    },
+
+    closeIcon: '!absolute top-2 z-10 right-2',
+
+    header: 'text-lg pl-6 py-4 border-b pr-12',
+
+    content: 'px-6 py-4',
+
+    actions: 'bg-slate-50 dark:bg-gray-800 p-4 grid grid-flow-col gap-4',
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl font-semibold mb-4',
+
+    description: 'text-sm',
+  },
+}
+
+export default theme