@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/notifications/Notifications.vue

@@ -0,0 +1,318 @@
+<script lang="ts">
+import { defineComponent, ref, provide, watch, type PropType } from 'vue'
+import { injectNotificationKey } from '../../composables/keys'
+import { useColors } from '../../composables/colors'
+import { useCSS } from '../../composables/css'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+const validators = {
+  align: ['left','right'],
+  position: ['bottom','top'],
+}
+
+export type NotificationAlign = 'left' | 'right'
+export type NotificationPosition = 'bottom' | 'top'
+export type NotificationAction = {
+  onClick: ()=> void,
+  label: string,
+  color?: string
+}
+export type NotificationEvent = {
+  id?: number,
+  icon?: string,
+  action?: NotificationAction,
+  iconColor?: string,
+  title?: string,
+  style?: string,
+  message?: string,
+  timeout?: number,
+  removable?: boolean,
+  align?: NotificationAlign,
+  position?: NotificationPosition
+}
+
+export default defineComponent({
+  name: 'XNotifications',
+
+  components: {
+    XIcon,
+  },
+
+  validators,
+
+  props: {
+    ...useColors.props('primary'),
+    align: {
+      type: String as PropType<NotificationAlign>,
+      default: 'right',
+      validator: (value: string) => validators.align.includes(value),
+    },
+    position: {
+      type: String as PropType<NotificationPosition>,
+      default: 'bottom',
+      validator: (value: string) => validators.position.includes(value),
+    },
+    timeout: {
+      type: Number,
+      default: 3500,
+    },
+    removable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  expose: ['log', 'info', 'success', 'warn', 'warning', 'error'],
+
+  setup(props) {
+    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()
+
+    const removeIcon = '<path d="M6 18L18 6M6 6l12 12" />'
+
+    provide(injectNotificationKey, {
+      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)
+    }
+
+    return {
+      notifications,
+      listRef,
+      remove,
+      log,
+      info,
+      warn,
+      error,
+      warning: warn,
+      success,
+      removeIcon,
+      internalAlign,
+      internalPosition,
+    }
+  },
+
+})
+</script>
+
+<template>
+  <slot></slot>
+  <Teleport to="body">
+    <div
+      ref="listRef"
+      class="fixed z-40 w-full sm:w-auto overflow-y-auto max-h-screen"
+      :class="{
+        // align
+        'left-0': internalAlign === 'left',
+        'right-0': internalAlign === 'right',
+        // position
+        'top-0': internalPosition === 'top',
+        'bottom-0': internalPosition === 'bottom',
+      }"
+    >
+      <transition-group
+        tag="ul"
+        class="flex flex-col items-end"
+        :class="{ 'flex-col-reverse': internalPosition }"
+        enter-active-class="transition ease-out duration-200"
+        leave-active-class="transition ease-out duration-100"
+        enter-class="transform translate-y-2 opacity-0"
+        enter-to-class="transform translate-y-0 opacity-100"
+        leave-class="transform translate-y-0 opacity-100"
+        leave-to-class="transform translate-y-2 opacity-0"
+        move-class="ease-in-out duration-200"
+        mode="out-in"
+      >
+        <li
+          v-for="notification in notifications"
+          :key="notification.id"
+          class="w-full sm:w-[520px]"
+          :class="[
+            'px-4',
+            {
+              'pb-2': internalPosition === 'bottom',
+              'pt-2': internalPosition === 'top',
+            }
+          ]"
+          :style="notification.style"
+        >
+          <div
+            class="flex items-center rounded-md px-4 py-3 bg-gray-800 dark:bg-gray-50 text-white dark:text-gray-900"
+          >
+            <x-icon
+              v-if="notification.icon"
+              filled
+              :icon="notification.icon"
+              class="
+                mr-4 shrink-0
+                text-[color:var(--x-notification-icon)]
+                dark:text-[color:var(--x-dark-notification-icon)]
+              "
+              viewBox="0 0 20 20"
+            />
+            <div class="flex items-center flex-wrap">
+              <span v-if="notification.title" class="font-semibold mr-2">{{ notification.title }}</span>
+              <span>{{ notification.message }}</span>
+            </div>
+            <x-spacer/>
+            <div
+              v-if="notification.action"
+              class="
+                ml-3
+                font-semibold
+                cursor-pointer
+                text-[color:var(--x-notification-action)]
+                hover:text-[color:var(--x-notification-action-hover)]
+                dark:text-[color:var(--x-dark-notification-action)]
+                dark:hover:text-[color:var(--x-dark-notification-action-hover)]
+              "
+              @click="notification.action.onClick"
+            >
+              {{ notification.action.label }}
+            </div>
+            <x-icon
+              v-if="notification.removable"
+              :icon="removeIcon"
+              class="text-gray-400 hover:text-gray-500 ml-3 shrink-0 cursor-pointer"
+              @click="() => {remove(notification)}"
+            />
+          </div>
+        </li>
+      </transition-group>
+    </div>
+  </Teleport>
+</template>

package/src/components/pagination/Pagination.vue

@@ -1,74 +1,181 @@
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XButton from '../../components/button/Button.vue'
+import XPaginationItem from './PaginationItem.vue'
+
+export default defineComponent({
+  name: 'XPagination',
+
+  components: {
+    XIcon,
+    XButton,
+    XPaginationItem,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    links: Boolean,
+    totalPages: {
+      type: Number,
+      default: 1,
+    },
+    modelValue: {
+      type: Number,
+      default: 1,
+    },
+    variant: {
+      type: String as PropType<'simple' | 'quick' | 'dots'>,
+      default: 'simple',
+    },
+  },
+
+  emits: ['update:modelValue'],
+
+  setup(props, { emit }) {
+    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 dotsClass = computed(() => {
+      if (props.size === 'xs') return 'h-2 w-2'
+      else if (props.size === 'sm') return 'h-3 w-3'
+      else if (props.size === 'lg') return 'h-4 w-4'
+      else if (props.size === 'xl') return 'h-5 w-5'
+
+      return 'h-3 w-3'
+    })
+
+    const css = useCSS('pagination')
+    const colors = useColors()
+    const color = colors.getPalette('primary')
+    const style = css.get('bg', color[500])
+
+    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 dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />'
+    const prevIcon = '<path d="M15 19l-7-7 7-7" />'
+    const nextIcon = '<path d="M9 5l7 7-7 7" />'
+
+    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'
+    })
+
+    return {
+      pages,
+      dotsIcon,
+      dotsClass,
+      prevIcon,
+      nextIcon,
+      quickInput,
+      quickButtonSize,
+      style,
+      onQuickInput,
+      prevPage,
+      nextPage,
+    }
+  },
+})
+</script>
+
 <template>
-  <ul class="flex items-end">
+  <ul v-if="variant === 'quick'" class="flex items-center">
+    <x-button
+      :icon="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="w-[2.75rem] text-center" @keydown.enter="onQuickInput" />
+      <span class="text-gray-600 ml-2">of {{ totalPages }}</span>
+    </div>
+    <x-button
+      :icon="nextIcon"
+      :size="quickButtonSize"
+      :disabled="modelValue >= totalPages"
+      @click="nextPage"
+    />
+  </ul>
+  <ul v-else-if="variant === 'simple'" class="flex items-center space-x-2">
     <x-pagination-item
       :value="1"
       :links="links"
       :size="size"
       :selected="modelValue === 1"
-      class="mr-1"
-      @input="(value) => $emit('update:modelValue', value)"
+      @input="(value: Event) => $emit('update:modelValue', value)"
     />
-    <span v-if="totalPages > 3 && modelValue > 3">...</span>
+    <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"
-      class="mx-1"
       :value="i"
       :links="links"
       :size="size"
       :selected="modelValue === i"
-      @input="(value) => $emit('update:modelValue', value)"
+      @input="(value: Event) => $emit('update:modelValue', value)"
     />
-    <span v-if="totalPages > 3 && modelValue < totalPages - 2">...</span>
+    <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"
-      class="ml-1"
       :selected="modelValue === totalPages"
-      @input="(value) => $emit('update:modelValue', value)"
+      @input="(value: Event) => $emit('update:modelValue', value)"
     />
   </ul>
+  <ul v-else-if="variant === 'dots'" class="flex space-x-6" :style="style">
+    <li
+      v-for="i in totalPages"
+      :key="i"
+      class="rounded-full cursor-pointer"
+      :class="[dotsClass, i === modelValue ? 'bg-[color:var(--x-pagination-bg)]': 'bg-gray-100 hover:bg-gray-200']"
+      @click="$emit('update:modelValue', i)"
+    ></li>
+  </ul>
 </template>
-
-<script>
-import XPaginationItem from './PaginationItem.vue'
-
-export default {
-  components: {
-    XPaginationItem,
-  },
-  props: {
-    totalPages: {
-      type: Number,
-      default: 1,
-    },
-    modelValue: {
-      type: Number,
-      default: 1,
-    },
-    size: {
-      type: String,
-      default: null,
-    },
-    links: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    pages() {
-      if (this.totalPages === 3) return [2]
-      if (this.totalPages > 2) {
-        if (this.modelValue === 1 || this.modelValue === 2) return [2, 3]
-        if (this.modelValue === this.totalPages || this.modelValue === this.totalPages - 1) return [this.totalPages - 2, this.totalPages - 1]
-
-        return [this.modelValue - 1, this.modelValue, this.modelValue + 1]
-      }
-
-      return []
-    },
-  },
-}
-</script>

package/src/components/pagination/PaginationItem.vue

@@ -1,35 +1,58 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useCommon } from '../../composables/common'
+
+import XButton from '../../components/button/Button.vue'
+
+export default defineComponent({
+  name: 'XPaginationItem',
+
+  components: {
+    XButton,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    value: {
+      type: Number,
+      default: 0,
+    },
+    selected: Boolean,
+    links: Boolean,
+  },
+
+  emits: ['input'],
+
+  setup(props) {
+    const classes = computed(() => {
+      if (props.size === 'xs') return '!leading-none !p-1 min-w-[1.375rem]'
+      else if (props.size === 'sm') return '!leading-none !p-2 min-w-[2rem]'
+      else if (props.size === 'lg') return '!leading-none !p-3 min-w-[2.75rem]'
+      else if (props.size === 'xl') return '!leading-none !p-4 min-w-[3.375rem]'
+
+      return '!leading-none !p-2 min-w-[2.125rem]'
+    })
+
+    return {
+      classes,
+    }
+  },
+})
+</script>
+
 <template>
   <li>
     <x-button
-      :to="links ? `?page=${value}` : null"
+      :to="links ? `?page=${value}` : undefined"
       :size="size"
-      class="mx-1 min-w-[32px]"
+      :class="classes"
       :outlined="!selected"
-      :color="selected ? 'primary' : 'none'"
+      :color="selected ? 'primary' : undefined"
       @click="!selected ? $emit('input', value) : null"
     >{{ value }}</x-button>
   </li>
 </template>
-
-<script>
-export default {
-  props: {
-    value: {
-      type: Number,
-      default: 0,
-    },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: null,
-    },
-    links: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>