@indielayer/ui 0.2.4 → 1.0.0-alpha.0

package/src/components/input/Input.vue

@@ -1,195 +0,0 @@
-<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

@@ -1,89 +0,0 @@
-<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

@@ -1,111 +0,0 @@
-<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

@@ -1,74 +0,0 @@
-<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

@@ -1,74 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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>