@indielayer/ui 0.1.0 → 0.1.1

package/src/components/link/Link.vue

@@ -0,0 +1,90 @@
+<template>
+  <component
+    :is="$props.to ? 'router-link' : $props.tag"
+    v-bind="$attrs"
+    :to="$props.to"
+    class="transition-colors duration-150 ease-in-out cursor-pointer"
+    :class="[
+      {
+        // color
+        'hover:text-gray-600 dark:hover:text-gray-300': $props.color === 'gray',
+        'text-primary-500 hover:text-primary-700': $props.color === 'primary',
+        'text-error-500 hover:text-error-700': $props.color === 'error',
+        'text-warning-500 hover:text-warning-700': $props.color === 'warning',
+        'text-success-500 hover:text-success-700': $props.color === 'success',
+        // underline
+        'underline': $props.underline
+      },
+    ]"
+  >
+    <span
+      v-if="$props.external"
+      class="inline-flex items-center"
+    >
+      <slot></slot>
+      <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 ml"
+      >
+        <line x1="7" y1="17" x2="17" y2="7" />
+        <polyline points="7 7 17 7 17 17" />
+      </svg>
+    </span>
+    <template v-else>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<script>
+const validator = {
+  color: [
+    'error',
+    'gray',
+    'primary',
+    'success',
+    'warning',
+  ],
+}
+
+export default {
+  name: 'XLink',
+
+  validator,
+
+  props: {
+    color: {
+      default: 'gray',
+      type: String,
+      validator: (value) => validator.color.includes(value),
+    },
+
+    external: {
+      default: false,
+      type: Boolean,
+    },
+
+    tag: {
+      default: 'a',
+      type: String,
+    },
+
+    to: {
+      type: String,
+      default: undefined,
+    },
+
+    underline: {
+      default: false,
+      type: Boolean,
+    },
+  },
+}
+</script>

package/src/components/modal/Modal.vue

@@ -0,0 +1,111 @@
+<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>
+
+    <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-full bg-white -top-4 -right-4 w-10 h-10 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>
+
+<script>
+export default {
+  name: 'XModal',
+
+  props: {
+    size: {
+      type: String,
+      default: null,
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+
+  beforeMount() {
+    document.addEventListener('keydown', this.onKeydown)
+  },
+
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.onKeydown)
+  },
+
+  methods: {
+    close() {
+      this.isOpen = false
+      this.$emit('close')
+    },
+
+    onKeydown(event) {
+      if (event.keyCode === 27 && this.isOpen) {
+        this.close()
+      }
+    },
+
+    open() {
+      this.isOpen = true
+      this.$emit('open')
+    },
+
+    toggle() {
+      this.isOpen = !this.isOpen
+      this.$emit('toggle', this.isOpen)
+    },
+  },
+}
+</script>

package/src/components/note/Note.vue

@@ -0,0 +1,101 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="flex rounded-md p-2"
+    :class="[
+      {
+        'border': !$props.filled,
+        'text-blue-500 border-blue-500': !$props.filled && $props.variant === 'info',
+        'text-success-500 border-success-500': !$props.filled && $props.variant === 'success',
+        'text-error-500 border-error-500': !$props.filled && $props.variant === 'error',
+        'text-warning-500 border-warning-500': !$props.filled && $props.variant === 'warning',
+        // filled
+        'bg-blue-500 text-blue-50': $props.filled && $props.variant === 'info',
+        'bg-success-500 text-success-50': $props.filled && $props.variant === 'success',
+        'bg-error-500 text-error-50': $props.filled && $props.variant === 'error',
+        'bg-warning-500 text-warning-50': $props.filled && $props.variant === 'warning',
+      },
+
+    ]"
+  >
+    <svg
+      v-if="!$slots.icon"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+      fill="none"
+      role="presentation"
+      class="flex-none stroke-2 w-4 h-4 mt-1 mr-2"
+    >
+      <template v-if="$props.variant === 'info'">
+        <circle cx="12" cy="12" r="10"/>
+        <line x1="12" y1="8" x2="12" y2="12"/>
+        <line x1="12" y1="16" x2="12" y2="16"/>
+      </template>
+
+      <template v-if="$props.variant === 'success'">
+        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
+        <path d="M16 10L10.5 15L8 12.7273" />
+      </template>
+
+      <template v-if="$props.variant === 'error'">
+        <path d="M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z" />
+        <path d="M9 9L15 15" />
+        <path d="M15 9L9 15" />
+      </template>
+      <template v-if="$props.variant === 'warning'">
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+        <path d="M12 9v2m0 4v.01"/>
+        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"/>
+      </template>
+    </svg>
+
+    <div
+      v-if="$slots.icon"
+      class="flex-none pr-2"
+    >
+      <slot name="icon"></slot>
+    </div>
+
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+const validator = {
+  variant: [
+    'info',
+    'error',
+    'success',
+    'warning',
+  ],
+}
+
+export default {
+  name: 'XNote',
+
+  validator,
+
+  props: {
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+
+    variant: {
+      type: String,
+      default: 'info',
+      validator: (value) => validator.variant.includes(value),
+    },
+  },
+}
+</script>

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,74 @@
+<template>
+  <ul class="flex items-end">
+    <x-pagination-item
+      :value="1"
+      :links="links"
+      :size="size"
+      :selected="value === 1"
+      class="mr-1"
+      @input="(value) => $emit('input', value)"
+    />
+    <span v-if="totalPages > 3 && value > 3">...</span>
+    <x-pagination-item
+      v-for="i in pages"
+      :key="i"
+      class="mx-1"
+      :value="i"
+      :links="links"
+      :size="size"
+      :selected="value === i"
+      @input="(value) => $emit('input', value)"
+    />
+    <span v-if="totalPages > 3 && value < totalPages - 2">...</span>
+    <x-pagination-item
+      v-if="totalPages > 1"
+      :value="totalPages"
+      :links="links"
+      :size="size"
+      class="ml-1"
+      :selected="value === totalPages"
+      @input="(value) => $emit('input', value)"
+    />
+  </ul>
+</template>
+
+<script>
+import XPaginationItem from './PaginationItem.vue'
+
+export default {
+  components: {
+    XPaginationItem,
+  },
+  props: {
+    totalPages: {
+      type: Number,
+      default: 1,
+    },
+    value: {
+      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.value === 1 || this.value === 2) return [2, 3]
+        if (this.value === this.totalPages || this.value === this.totalPages - 1) return [this.totalPages - 2, this.totalPages - 1]
+
+        return [this.value - 1, this.value, this.value + 1]
+      }
+
+      return []
+    },
+  },
+}
+</script>

package/src/components/pagination/PaginationItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <li>
+    <x-button
+      :to="links ? `?page=${value}` : null"
+      :size="size"
+      class="mx-1 min-w-[32px]"
+      :outlined="!selected"
+      :color="selected ? 'primary' : 'none'"
+      @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>

package/src/components/popover/Popover.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    class="inline-block relative xpopover"
+    :class="[
+      { 'hover': hover,
+        'is-open': isOpen,
+      },
+      $attrs.class,
+      $attrs.staticClass,
+    ]"
+  >
+    <div class="flex" @click="!hover ? toggle() : null">
+      <slot></slot>
+    </div>
+
+    <div
+      v-if="!hover"
+      class="fixed inset-0 opacity-0 z-40"
+      :class="[isOpen ? 'visible' : 'invisible']"
+      @click.self="close()"
+    ></div>
+
+    <div
+      class="absolute w-auto bottom-0 left-0 right-0 sm:p-0 transform transition-transform z-50 xpopover-content whitespace-nowrap max-w-xs"
+      :class="[
+        {
+          // align-left
+          'left-0 right-auto': align === 'left' && ['bottom', 'top'].includes(position),
+          // align-center
+          'left-1/2 right-auto -translate-x-1/2': align === 'center' && ['bottom', 'top'].includes(position),
+          // align-right
+          'right-0 left-auto': align === 'right' && ['bottom', 'top'].includes(position),
+          // align-top
+          'top-0 bottom-auto': align === 'top' && ['left', 'right'].includes(position),
+          // align-middle
+          '-translate-y-1/2 top-1/2 bottom-auto': align === 'center' && ['left', 'right'].includes(position),
+          // align-bottom
+          'bottom-0': align === 'bottom' && ['left', 'right'].includes(position),
+
+          // position-top
+          'xpopover-top bottom-full pb-2': position === 'top',
+          // position-right
+          'xpopover-right left-full pl-2': position === 'right',
+          // position-bottom
+          'xpopover-bottom top-full bottom-0': position === 'bottom',
+          // position-left
+          'xpopover-left right-full left-auto pr-2': position === 'left',
+        }
+      ]"
+      @click="dismissible ? close() : null"
+    >
+      <slot name="content"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const validator = {
+  align: [
+    'bottom',
+    'center',
+    'left',
+    'right',
+    'top',
+  ],
+  position: [
+    'bottom',
+    'left',
+    'right',
+    'top',
+  ],
+}
+
+export default {
+  name: 'XPopover',
+
+  validator,
+
+  props: {
+    align: {
+      type: String,
+      default: 'center',
+      validator: (value) => validator.align.includes(value),
+    },
+
+    hover: {
+      type: Boolean,
+      default: false,
+    },
+
+    dismissible: {
+      type: Boolean,
+      default: true,
+    },
+
+    position: {
+      default: 'bottom',
+      type: String,
+      validator: (value) => validator.position.includes(value),
+    },
+  },
+
+  data() {
+    return {
+      isOpen: false,
+    }
+  },
+
+  methods: {
+    close() {
+      this.isOpen = false
+      this.$emit('close')
+    },
+
+    open() {
+      this.isOpen = true
+      this.$emit('open')
+    },
+
+    toggle() {
+      this.isOpen = !this.isOpen
+      this.$emit('toggle', this.isOpen)
+    },
+  },
+}
+</script>
+
+<style lang="css">
+.xpopover-content {
+  visibility: hidden;
+  transition-duration: .1s;
+  transition-timing-function: cubic-bezier(.4,0,1,1);
+}
+.xpopover-top {
+  --tw-translate-y: 0.5rem;
+}
+.xpopover-right {
+  --tw-translate-x: -0.5rem;
+}
+.xpopover-bottom {
+  --tw-translate-y: -0.25rem;
+}
+.xpopover-left {
+  --tw-translate-x: 0.5rem;
+}
+
+.xpopover.hover:hover .xpopover-content,
+.xpopover.is-open .xpopover-content {
+  visibility: visible;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(0,0,.2,1);
+}
+
+.xpopover.hover:hover .xpopover-top,
+.xpopover.is-open .xpopover-top {
+  --tw-translate-y: 0.25rem;
+}
+
+.xpopover.hover:hover .xpopover-right,
+.xpopover.is-open .xpopover-right {
+  --tw-translate-x: 0px;
+}
+
+.xpopover.hover:hover .xpopover-bottom,
+.xpopover.is-open .xpopover-bottom {
+  --tw-translate-y: 0.25rem;
+}
+
+.xpopover.hover:hover .xpopover-left,
+.xpopover.is-open .xpopover-left {
+  --tw-translate-x: 0px;
+}
+</style>

package/src/components/popover/PopoverContainer.vue

@@ -0,0 +1,29 @@
+<template>
+  <component
+    :is="tag"
+    v-bind="$attrs"
+    class="inline-block w-full bg-white dark:bg-gray-700 shadow-lg rounded-md border-t border border-gray-200 dark:border-gray-800"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XPopoverContainer',
+
+  props: {
+    tag: {
+      default: 'div',
+      type: String,
+    },
+  },
+
+  created() {
+    if (this.$parent.$options.name !== 'XPopover') {
+      this.$destroy()
+      throw new Error('PopoverContainer must be wrap with Popover')
+    }
+  },
+}
+</script>

package/src/components/popover/PopoverItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="px-2 py-1 block rounded transition-colors duration-100 ease-in-out whitespace-nowrap"
+    :class="[
+      {
+        'flex items-center': $slots.prefix || $slots.suffix,
+        'hover:bg-gray-100 dark:hover:bg-gray-800': $props.variant === 'base' && !$props.disabled,
+        'hover:text-error-500 hover:bg-error-50': $props.variant === 'error' && !$props.disabled,
+        'opacity-70': $props.disabled,
+        'cursor-pointer': !$props.disabled,
+      },
+
+    ]"
+  >
+    <span
+      v-if="$slots.prefix"
+      class="inline-flex items-center mr-2"
+    >
+      <slot name="prefix"></slot>
+    </span>
+    <span :class="{ 'flex-1': $slots.prefix || $slots.suffix }">
+      <slot></slot>
+    </span>
+    <span
+      v-if="$slots.suffix"
+      class="inline-flex items-center ml-1"
+    >
+      <slot name="suffix"></slot>
+    </span>
+  </component>
+</template>
+
+<script>
+const validator = {
+  variant: [
+    'base',
+    'error',
+  ],
+}
+
+export default {
+  name: 'XPopoverItem',
+
+  validator,
+
+  props: {
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+
+    variant: {
+      default: 'base',
+      type: String,
+      validator: (value) => validator.variant.includes(value),
+    },
+
+    tag: {
+      default: 'div',
+      type: String,
+    },
+  },
+}
+</script>