@indielayer/ui 0.1.0 → 0.2.2

package/src/components/input/Input.vue

@@ -0,0 +1,195 @@
+<template>
+  <label class="inline-block mb-1 relative">
+    <p
+      v-if="label"
+      class="font-medium text-gray-800 dark:text-gray-200 mb-1"
+      :class="{
+        'text-xs': size === 'xs',
+        'text-sm': size === 'sm',
+        'text-lg': size === 'lg',
+        'text-xl': size === 'xl',
+      }"
+      v-text="label"
+    ></p>
+
+    <div class="relative">
+      <span
+        v-if="$slots.icon"
+        class="flex items-center w-5 h-5 text-gray-500 absolute my-auto inset-y-0"
+        :class="[{
+          'ml-2 left-0': $slots.icon && !iconRight,
+          'mr-2 right-0': $slots.icon && iconRight,
+        }]"
+      >
+        <slot name="icon"></slot>
+      </span>
+
+      <input
+        ref="focusRef"
+        class="appearance-none block w-full text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 rounded-form leading-tight
+          focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700"
+        :class="[
+          disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
+          type === 'password' ? 'pr-9' : (flat ? '' : 'pr-4'),
+          flat ? 'p-0 bg-transparent' : {
+            // shadow
+            'border shadow': true,
+
+            // size
+            'py-1': size === 'auto',
+            'px-2 py-1 text-xs': size === 'xs',
+            'px-2 py-1 text-sm': size === 'sm',
+            'px-3 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
+            'px-4 py-3 text-lg': size === 'lg',
+            'px-6 py-6 text-xl': size === 'xl',
+          },
+          {
+            '!pl-9': $slots.icon && !iconRight,
+            '!pr-9': $slots.icon && iconRight,
+            // error
+            'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
+          },
+          inputClass,
+        ]"
+        :disabled="disabled"
+        :max="max"
+        :maxlength="maxlength"
+        :min="min"
+        :dir="dir"
+        :minlength="minlength"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :type="currentType"
+        :value="modelValue"
+        v-on="inputListeners"
+        @change="onChange"
+      />
+
+      <svg
+        v-if="type === 'password' && showPasswordToggle"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        class="text-gray-700 dark:text-gray-300 stroke-2 w-4 h-4 absolute my-auto mr-2 inset-y-0 right-1 cursor-pointer"
+        @click="togglePasswordVisibility()"
+      >
+        <template v-if="currentType === 'password'">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3"/>
+        </template>
+
+        <template v-else>
+          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+          <line x1="1" y1="1" x2="23" y2="23"/>
+        </template>
+      </svg>
+    </div>
+
+    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>
+
+<script>
+import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
+
+export default {
+  name: 'XInput',
+
+  validator: withValidator(),
+
+  props: {
+    ...withProps(),
+
+    showPasswordToggle: {
+      type: Boolean,
+      default: true,
+    },
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    iconRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    dir: {
+      type: String,
+      default: 'ltr',
+    },
+
+    max: {
+      type: Number,
+      default: null,
+    },
+
+    maxlength: {
+      type: Number,
+      default: null,
+    },
+
+    min: {
+      type: Number,
+      default: null,
+    },
+
+    minlength: {
+      type: Number,
+      default: null,
+    },
+
+    placeholder: {
+      type: String,
+      default: null,
+    },
+
+    type: {
+      type: String,
+      default: 'text',
+    },
+
+    inputClass: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: withEmits(),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit }),
+    }
+  },
+
+  data() {
+    return {
+      currentType: this.type,
+    }
+  },
+
+  methods: {
+    onChange(e) {
+      if (this.type === 'number') {
+        if (this.min !== null) {
+          if (e.target.value < this.min) e.target.value = this.min
+        }
+
+        if (this.max !== null) {
+          if (e.target.value > this.max) e.target.value = this.max
+        }
+      }
+    },
+    togglePasswordVisibility() {
+      this.currentType = this.currentType === 'password' ? 'text' : 'password'
+    },
+  },
+}
+</script>

package/src/components/link/Link.vue

@@ -0,0 +1,89 @@
+<template>
+  <component
+    :is="to ? 'router-link' : tag"
+    :to="to"
+    class="transition-colors duration-150 ease-in-out cursor-pointer"
+    :class="[
+      {
+        // color
+        'hover:text-gray-600 dark:hover:text-gray-300': color === 'gray',
+        'text-primary-500 hover:text-primary-600': color === 'primary',
+        'text-error-500 hover:text-error-600': color === 'error',
+        'text-warning-500 hover:text-warning-600': color === 'warning',
+        'text-success-500 hover:text-success-600': color === 'success',
+        // underline
+        'underline': underline
+      },
+    ]"
+  >
+    <span
+      v-if="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-md bg-white -top-4 -right-2 w-8 h-8 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,74 @@
+<template>
+  <component
+    :is="tag"
+    class="flex rounded-md p-2"
+    :class="filled ? [`bg-${color}-500 text-${color}-50`] : [`border text-${color}-500 border-${color}-500`]"
+  >
+    <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="color === 'primary'">
+        <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="color === '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="color === '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="color === '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>
+export default {
+  name: 'XNote',
+
+  props: {
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+
+    color: {
+      type: String,
+      default: 'primary',
+    },
+  },
+}
+</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="modelValue === 1"
+      class="mr-1"
+      @input="(value) => $emit('update:modelValue', value)"
+    />
+    <span v-if="totalPages > 3 && modelValue > 3">...</span>
+    <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)"
+    />
+    <span v-if="totalPages > 3 && modelValue < totalPages - 2">...</span>
+    <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)"
+    />
+  </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

@@ -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>