@indielayer/ui 0.0.0-dev-20240125104319

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

@@ -0,0 +1,60 @@
+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-70 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-gray-200 dark:bg-gray-900 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-0 z-10 right-0',
+
+    header: 'text-lg pl-4 pt-4 pr-12',
+
+    content: ({ props }) => {
+      const classes = ['pb-8']
+
+      if (!props.fluid) classes.push('px-4')
+
+      return classes
+    },
+
+    actions: ({ props, slots }) => {
+      const classes = ['grid grid-flow-col gap-[1px]']
+
+      if (slots['tertiary-action'] || slots['cancel-action']) classes.push('grid-cols-4')
+      else classes.push('grid-cols-2')
+
+      return classes
+    },
+
+    label: 'text-xs text-gray-500 mb-1',
+
+    title: 'text-xl mb-4',
+
+    description: 'text-sm mb-4',
+  },
+}
+
+export default theme

package/src/components/notifications/Notifications.vue

@@ -0,0 +1,318 @@
+<script lang="ts">
+const notificationsProps = {
+  ...useColors.props('primary'),
+  align: {
+    type: String as PropType<NotificationsAlign>,
+    default: 'right',
+    validator: (value: string) => validators.align.includes(value as NotificationsAlign),
+  },
+  position: {
+    type: String as PropType<NotificationsPosition>,
+    default: 'bottom',
+    validator: (value: string) => validators.position.includes(value as NotificationsPosition),
+  },
+  timeout: {
+    type: Number,
+    default: 3500,
+  },
+  removable: {
+    type: Boolean,
+    default: true,
+  },
+  injectKey: {
+    type: [Symbol, String],
+    default: injectNotificationKey,
+  },
+}
+
+const validators = {
+  align: ['left', 'right'] as const,
+  position: ['bottom', 'top'] as const,
+}
+
+export type NotificationsProps = ExtractPublicPropTypes<typeof notificationsProps>
+
+export type NotificationsAlign = typeof validators.align[number]
+export type NotificationsPosition = typeof validators.position[number]
+export type NotificationsAction = {
+  onClick: () => void;
+  label: string;
+  color?: string;
+}
+export type NotificationEvent = {
+  id?: number;
+  icon?: string;
+  action?: NotificationsAction;
+  iconColor?: string;
+  title?: string;
+  style?: string;
+  message?: string;
+  timeout?: number;
+  removable?: boolean;
+  align?: NotificationsAlign;
+  position?: NotificationsPosition;
+}
+
+export type NotificationInjection = {
+  log: (notification: NotificationEvent | string) => void;
+  info: (notification: NotificationEvent | string) => void;
+  warn: (notification: NotificationEvent | string) => void;
+  error: (notification: NotificationEvent | string) => void;
+  warning: (notification: NotificationEvent | string) => void;
+  success: (notification: NotificationEvent | string) => void;
+}
+
+type InternalClasses = 'wrapper' | 'list' | 'item'
+export interface NotificationsTheme extends ThemeComponent<NotificationsProps, InternalClasses> {}
+
+export default {
+  name: 'XNotifications',
+  validators,
+}
+</script>
+
+<script setup lang="ts">
+import { ref, provide, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { injectNotificationKey } from '../../composables/keys'
+import { useColors } from '../../composables/useColors'
+import { useCSS } from '../../composables/useCSS'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { closeIcon } from '../../common/icons'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XSpacer from '../spacer/Spacer'
+
+const props = defineProps(notificationsProps)
+
+const internalAlign = ref(props.align)
+const internalPosition = ref(props.position)
+const notifications = ref<NotificationEvent []>([])
+const listRef = ref<HTMLElement | null>(null)
+const css = useCSS('notification')
+const colors = useColors()
+
+provide<NotificationInjection>(props.injectKey, {
+  log,
+  info,
+  warn,
+  error,
+  warning: warn,
+  success,
+})
+
+watch(() => props.align, (align) => { internalAlign.value = align })
+watch(() => props.position, (position) => { internalPosition.value = position })
+
+function log(notification: NotificationEvent | string) {
+  const isMessage = typeof notification === 'string'
+  const preset = {
+    message: isMessage ? notification : undefined,
+  }
+
+  add(isMessage ? preset : {
+    ...preset,
+    ...notification,
+  })
+}
+
+function info(notification: NotificationEvent | string) {
+  const isMessage = typeof notification === 'string'
+  const preset = {
+    icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
+    iconColor: 'sky',
+    message: isMessage ? notification : undefined,
+  }
+
+  add(isMessage ? preset : {
+    ...preset,
+    ...notification,
+  })
+}
+
+function success(notification: NotificationEvent | string) {
+  const isMessage = typeof notification === 'string'
+  const preset = {
+    icon: '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />',
+    iconColor: 'success',
+    message: isMessage ? notification : undefined,
+  }
+
+  add(isMessage ? preset : {
+    ...preset,
+    ...notification,
+  })
+}
+
+function warn(notification: NotificationEvent | string) {
+  const isMessage = typeof notification === 'string'
+  const preset = {
+    icon: '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
+    iconColor: 'warning',
+    message: isMessage ? notification : undefined,
+  }
+
+  add(isMessage ? preset : {
+    ...preset,
+    ...notification,
+  })
+}
+
+function error(notification: NotificationEvent | string) {
+  const isMessage = typeof notification === 'string'
+  const preset = {
+    icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
+    iconColor: 'error',
+    message: isMessage ? notification : undefined,
+  }
+
+  add(isMessage ? preset : {
+    ...preset,
+    ...notification,
+  })
+}
+
+function add(notification: NotificationEvent) {
+  const mergeProps = {
+    id: Date.now(),
+    iconColor: props.color,
+    timeout: props.timeout,
+    align: internalAlign.value,
+    position: internalPosition.value,
+    removable: props.removable,
+  }
+
+  const merged = {
+    ...mergeProps,
+    ...notification,
+  }
+
+  internalAlign.value = merged.align
+  internalPosition.value = merged.position
+
+  const color = colors.getPalette(merged.iconColor)
+  const colorAction = colors.getPalette(merged.action?.color || 'primary')
+
+  const cssVariables = css.variables({
+    icon: color[400],
+    action: colorAction[400],
+    hover: {
+      action: colorAction[500],
+    },
+    dark: {
+      icon: color[500],
+      action: colorAction[500],
+      hover: {
+        action: colorAction[600],
+      },
+    },
+  })
+
+  merged.style = Object.keys(cssVariables).map((key) => `${key}: ${cssVariables[key]}`).join(';')
+
+  notifications.value.push(merged)
+
+  listRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+
+  if (merged.timeout) setTimer(merged, merged.timeout)
+}
+
+function remove(event: NotificationEvent) {
+  notifications.value = notifications.value.filter((e) => e.id !== event.id)
+}
+
+function setTimer(notification: NotificationEvent, timeout: number) {
+  setTimeout(() => {
+    remove(notification)
+  }, timeout)
+}
+
+const { styles, classes, className } = useTheme('Notifications', {}, props)
+
+defineExpose({ log, info, success, warn, warning: warn, error })
+</script>
+
+<template>
+  <slot></slot>
+  <teleport to="body">
+    <div
+      ref="listRef"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper,
+        {
+          // align
+          'left-0': internalAlign === 'left',
+          'right-0': internalAlign === 'right',
+          // position
+          'top-0': internalPosition === 'top',
+          'bottom-0': internalPosition === 'bottom',
+        }]"
+    >
+      <transition-group
+        tag="ul"
+        :class="[
+          classes.list,
+          { 'flex-col-reverse': internalPosition }
+        ]"
+        enter-active-class="transition ease-out duration-200"
+        leave-active-class="transition ease-out duration-100"
+        enter-from-class="transform translate-y-2 opacity-0"
+        enter-to-class="transform translate-y-0 opacity-100"
+        leave-from-class="transform translate-y-0 opacity-100"
+        leave-to-class="transform translate-y-2 opacity-0"
+        move-class="ease-in-out duration-200"
+      >
+        <li
+          v-for="notification in notifications"
+          :key="notification.id"
+          :class="[
+            classes.item,
+            {
+              'mb-2': internalPosition === 'bottom',
+              'mt-2': internalPosition === 'top',
+            }]"
+          :style="notification.style"
+        >
+          <x-icon
+            v-if="notification.icon"
+            filled
+            :icon="notification.icon"
+            class="
+                mr-4
+                text-[color:var(--x-notification-icon)]
+                dark:text-[color:var(--x-notification-dark-icon)]
+              "
+            viewBox="0 0 20 20"
+          />
+          <div class="flex items-center flex-wrap">
+            <span v-if="notification.title" class="font-medium mr-2">{{ notification.title }}</span>
+            <span>{{ notification.message }}</span>
+          </div>
+          <x-spacer/>
+          <button
+            v-if="notification.action"
+            class="
+                ml-3
+                font-medium
+                cursor-pointer
+                text-[color:var(--x-notification-action)]
+                hover:text-[color:var(--x-notification-action-hover)]
+                dark:text-[color:var(--x-notification-dark-action)]
+                dark:hover:text-[color:var(--x-notification-dark-action-hover)]
+              "
+            @click="() => { notification.action?.onClick(); remove(notification); }"
+          >
+            {{ notification.action.label }}
+          </button>
+          <x-icon
+            v-if="notification.removable"
+            :icon="closeIcon"
+            class="text-gray-400 hover:text-gray-500 ml-3 cursor-pointer"
+            @click="() => {remove(notification)}"
+          />
+        </li>
+      </transition-group>
+    </div>
+  </teleport>
+</template>

package/src/components/notifications/__tests__/Notifications.spec.ts

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

package/src/components/notifications/index.ts

@@ -0,0 +1,9 @@
+export { default as XNotifications } from './Notifications.vue'
+export type {
+  NotificationsProps,
+  NotificationEvent,
+  NotificationsAction,
+  NotificationsAlign,
+  NotificationsPosition,
+  NotificationsTheme,
+} from './Notifications.vue'

package/src/components/notifications/theme/Notifications.base.theme.ts

@@ -0,0 +1,13 @@
+import type { NotificationsTheme } from '../Notifications.vue'
+
+const theme: NotificationsTheme = {
+  classes: {
+    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
+
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: 'w-full flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border border-gray-700 dark:border-gray-100',
+  },
+}
+
+export default theme

package/src/components/notifications/theme/Notifications.carbon.theme.ts

@@ -0,0 +1,17 @@
+import type { NotificationsTheme } from '../Notifications.vue'
+
+const theme: NotificationsTheme = {
+  classes: {
+    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
+
+    list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
+
+    item: () => {
+      const classes = ['w-full flex items-center px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900 border-l-2 border-[color:var(--x-notification-icon)]']
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+const paginationVariant = ['simple', 'quick', 'dots'] as const
+const paginationProps = {
+  ...useCommon.props(),
+  links: Boolean,
+  totalPages: {
+    type: Number,
+    default: 1,
+  },
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  variant: {
+    type: String as PropType<PaginationVariant>,
+    default: 'simple',
+  },
+}
+
+export type PaginationVariant = typeof paginationVariant[number]
+export type PaginationProps = ExtractPublicPropTypes<typeof paginationProps>
+
+type InternalClasses = 'wrapper' | 'dots'
+export interface PaginationTheme extends ThemeComponent<PaginationProps, InternalClasses> {}
+
+export default {
+  name: 'XPagination',
+  validators: {
+    ...useCommon.validators(),
+    variant: paginationVariant,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { dotsIcon, prevIcon, nextIcon } from '../../common/icons'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XInput from '../../components/input/Input.vue'
+import XButton from '../button/Button.vue'
+import XPaginationItem from './PaginationItem.vue'
+
+const props = defineProps(paginationProps)
+
+const emit = defineEmits(['update:modelValue'])
+
+const pages = computed(() => {
+  if (props.totalPages === 3) return [2]
+  if (props.totalPages > 2) {
+    if (props.modelValue === 1 || props.modelValue === 2) return [2, 3]
+    if (props.modelValue === props.totalPages || props.modelValue === props.totalPages - 1) return [props.totalPages - 2, props.totalPages - 1]
+
+    return [props.modelValue - 1, props.modelValue, props.modelValue + 1]
+  }
+
+  return []
+})
+
+const quickInput = ref<string>(props.modelValue + '')
+
+function onQuickInput() {
+  const number = parseInt(quickInput.value)
+
+  if (number >= 0 && number <= props.totalPages) {
+    emit('update:modelValue', number)
+  } else {
+    quickInput.value = props.modelValue + ''
+  }
+}
+
+watch(() => props.modelValue, (value) => {
+  quickInput.value = props.modelValue + ''
+})
+
+function prevPage() {
+  if (props.modelValue > 1) emit('update:modelValue', props.modelValue - 1)
+}
+
+function nextPage() {
+  if (props.modelValue < props.totalPages) emit('update:modelValue', props.modelValue + 1)
+}
+
+const quickButtonSize = computed(() => {
+  if (props.size === 'xs') return 'xs'
+  else if (props.size === 'sm') return 'sm'
+  else if (props.size === 'lg') return 'md'
+  else if (props.size === 'xl') return 'lg'
+
+  return 'sm'
+})
+
+const { styles, classes, className } = useTheme('Pagination', {}, props)
+</script>
+
+<template>
+  <ul
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <template v-if="variant === 'quick'">
+      <x-button
+        :icon-left="prevIcon"
+        :size="quickButtonSize"
+        :disabled="modelValue <= 1"
+        @click="prevPage"
+      />
+      <div class="mx-9 flex items-center">
+        <span class="text-gray-600 mr-2">Page</span>
+        <x-input
+          v-model="quickInput"
+          :size="size"
+          class="text-center w-16"
+          hide-footer
+          @keydown.enter="onQuickInput"
+        />
+        <span class="text-gray-600 ml-2">of {{ totalPages }}</span>
+      </div>
+      <x-button
+        :icon-left="nextIcon"
+        :size="quickButtonSize"
+        :disabled="modelValue >= totalPages"
+        @click="nextPage"
+      />
+    </template>
+    <template v-else-if="variant === 'simple'">
+      <x-pagination-item
+        :value="1"
+        :links="links"
+        :size="size"
+        :selected="modelValue === 1"
+        @input="(value: Event) => $emit('update:modelValue', value)"
+      />
+      <x-icon v-if="totalPages > 3 && modelValue > 3" class="mx-1" :icon="dotsIcon" :size="size"/>
+      <x-pagination-item
+        v-for="i in pages"
+        :key="i"
+        :value="i"
+        :links="links"
+        :size="size"
+        :selected="modelValue === i"
+        @input="(value: Event) => $emit('update:modelValue', value)"
+      />
+      <x-icon v-if="totalPages > 3 && modelValue < totalPages - 2" class="mx-1" :icon="dotsIcon" :size="size"/>
+      <x-pagination-item
+        v-if="totalPages > 1"
+        :value="totalPages"
+        :links="links"
+        :size="size"
+        :selected="modelValue === totalPages"
+        @input="(value: Event) => $emit('update:modelValue', value)"
+      />
+    </template>
+    <template v-else-if="variant === 'dots'">
+      <li
+        v-for="i in totalPages"
+        :key="i"
+        class="rounded-full cursor-pointer"
+        :class="[
+          classes.dots,
+          i === modelValue ? 'bg-[color:var(--x-pagination-bg)]': 'bg-gray-100 hover:bg-gray-200'
+        ]"
+        @click="$emit('update:modelValue', i)"
+      ></li>
+    </template>
+  </ul>
+</template>

package/src/components/pagination/PaginationItem.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+const paginationItemProps = {
+  ...useCommon.props(),
+  value: {
+    type: Number,
+    default: 0,
+  },
+  selected: Boolean,
+  links: Boolean,
+}
+
+export type PaginationItemProps = ExtractPublicPropTypes<typeof paginationItemProps>
+
+type InternalClasses = 'wrapper'
+export interface PaginationItemTheme extends ThemeComponent<PaginationItemProps, InternalClasses> {}
+
+export default {
+  name: 'XPaginationItem',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+
+import XButton from '../button/Button.vue'
+
+import type { ExtractPublicPropTypes } from 'vue'
+
+const props = defineProps(paginationItemProps)
+
+defineEmits(['input'])
+
+const { styles, classes, className } = useTheme('PaginationItem', {}, props)
+</script>
+
+<template>
+  <li>
+    <x-button
+      :to="links ? `?page=${value}` : undefined"
+      :size="size"
+      :style="styles"
+      :class="[
+        className,
+        classes.wrapper
+      ]"
+      :outlined="!selected"
+      :color="selected ? 'primary' : undefined"
+      @click="!selected ? $emit('input', value) : null"
+    >
+      {{ value }}
+    </x-button>
+  </li>
+</template>

package/src/components/pagination/__tests__/Pagination.spec.ts

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

package/src/components/pagination/__tests__/PaginationItem.spec.ts

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

package/src/components/pagination/index.ts

@@ -0,0 +1,5 @@
+export { default as XPagination } from './Pagination.vue'
+export type { PaginationProps, PaginationVariant, PaginationTheme } from './Pagination.vue'
+
+export { default as XPaginationItem } from './PaginationItem.vue'
+export type { PaginationItemProps, PaginationItemTheme } from './PaginationItem.vue'