@indielayer/ui 0.1.0 → 0.2.2

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-fit 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,28 @@
+<template>
+  <component
+    :is="tag"
+    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,65 @@
+<template>
+  <component
+    :is="tag"
+    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': variant === 'base' && !disabled,
+        'hover:text-error-500 hover:bg-error-50': variant === 'error' && !disabled,
+        'opacity-70': disabled,
+        'cursor-pointer': !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>

package/src/components/progress/Progress.vue

@@ -0,0 +1,120 @@
+<template>
+  <component :is="tag" class="w-full">
+    <div
+      v-if="variant === 'bar'"
+      class="rounded-lg bg-gray-200 dark:bg-gray-700 overflow-hidden"
+    >
+      <div
+        class="h-2 rounded-lg transition-all duration-200"
+        :class="[`bg-${color}-500`]"
+        :style="{
+          width: `${percentage}%`,
+        }"
+      ></div>
+    </div>
+
+    <svg
+      v-if="variant === 'circle'"
+      class="transform -rotate-90"
+      viewBox="0 0 100 100"
+    >
+      <circle
+        class="text-gray-200 dark:text-gray-700"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="4"
+        fill="none"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+      <circle
+        class="transition-all duration-200"
+        :class="[`text-${color}-500`]"
+        :style="{ strokeDasharray: `${circleProgress} 252` }"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="4"
+        fill="none"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+    </svg>
+
+    <div
+      v-if="variant === 'score'"
+      class="space-x-1 inline-block"
+    >
+      <div
+        v-for="index in scoreLength"
+        :key="index"
+        class="rounded-sm h-2 w-3 inline-block"
+        :class="isScoreActive(index) ? [`bg-${color}-500`]: ['bg-gray-200 dark:bg-gray-700']"
+      ></div>
+    </div>
+  </component>
+</template>
+
+<script>
+const validator = {
+  variant: [
+    'bar',
+    'circle',
+    'score',
+  ],
+}
+
+export default {
+  name: 'XProgress',
+
+  validator,
+
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+    },
+
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0 && val <= 100,
+    },
+
+    scoreLength: {
+      type: Number,
+      default: 3,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+
+    variant: {
+      type: String,
+      default: 'bar',
+      validator: (value) => validator.variant.includes(value),
+    },
+  },
+
+  computed: {
+    circleProgress() {
+      const progressLimit = 251
+
+      return (progressLimit / 100) * this.percentage
+    },
+  },
+
+  methods: {
+    isScoreActive(item) {
+      if (this.percentage > (item - 1) * (100 / this.scoreLength)) return true
+
+      return false
+    },
+  },
+}
+</script>

package/src/components/radio/Radio.vue

@@ -0,0 +1,151 @@
+<template>
+  <label
+    ref="focusRef"
+    class="inline-block mb-1 relative cursor-pointer focus:outline-none"
+    :class="{
+      ['rounded border p-2 hover:border-gray-500 dark:hover:border-gray-500 transition-colors duration-150 ease-in-out']: bordered,
+      [`border-gray-300 dark:border-gray-700`]: bordered && !selected,
+      [`border-${color}-500 dark:border-${color}-500`]: bordered && selected && !disabled,
+    }"
+    :aria-checked="selected ? 'true' : 'false'"
+    :aria-disabled="disabled ? 'true' : null"
+    :tabindex="0"
+    @keypress.prevent.stop.enter.space="$emit('update:modelValue', value)"
+  >
+    <div
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+    >
+      <input
+        v-model="selected"
+        type="radio"
+        class="invisible absolute"
+        :disabled="disabled || loading"
+        :name="name"
+        :required="required"
+        :value="modelValue"
+      />
+      <div
+        class="rounded-full flex justify-center items-center flex-shrink-0"
+        :class="[
+          {
+            // shadow
+            'shadow': !flat && !loading,
+            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && selected,
+
+            'h-4 w-4': size === 'sm' || size === 'xs',
+            'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
+            'h-6 w-6': size === 'xl',
+          },
+          disabled ? {
+            'bg-gray-500 border-gray-600 dark:border-gray-400': selected,
+            'bg-gray-200 border-gray-300 dark:border-gray-700': !selected,
+          } :
+          {
+            [`bg-${color}-500 border-${color}-500`]: selected && !loading,
+            'border bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !selected && !loading,
+          }
+        ]"
+      >
+        <x-spinner v-if="loading" :size="size" class="absolute" />
+        <svg
+          v-else
+          class="fill-current text-gray-100"
+          :class="{
+            'opacity-0': !selected,
+            'h-2 w-2': size === 'sm' || size === 'xs',
+            'h-3 w-3': !['xs', 'sm', 'xl'].includes(size),
+            'h-4 w-4': size === 'xl',
+          }"
+          viewBox="0 0 20 20"
+        >
+          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+        </svg>
+      </div>
+      <span
+        v-if="label"
+        class="font-medium text-gray-800 dark:text-gray-200 pl-2"
+        :class="{
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-lg': size === 'lg',
+          'text-xl': size === 'xl',
+        }"
+        v-text="label"
+      ></span>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      :class="{
+        'text-xs pl-6': size === 'xs',
+        'text-sm pl-6': size === 'sm',
+        'pl-7': !['xs', 'sm', 'lg', 'xl'].includes(size),
+        'text-lg pl-7': size === 'lg',
+        'text-lg pl-8': size === 'xl',
+      }"
+    >
+      <slot></slot>
+    </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'
+import XSpinner from '../spinner/Spinner.vue'
+
+export default {
+  name: 'XRadio',
+  components: {
+    XSpinner,
+  },
+
+  validator: {
+    ...withValidator(),
+  },
+
+  props: {
+    ...withProps(),
+    bordered: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: [String, Number, Boolean, Function, Object, Array],
+      default: null,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    glow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: withEmits(false),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit, useListeners: false }),
+    }
+  },
+
+  computed: {
+    selected: {
+      get() {
+        return this.value === this.modelValue
+      },
+
+      set() {
+        this.$emit('update:modelValue', this.value)
+      },
+    },
+  },
+}
+</script>

package/src/components/select/Select.vue

@@ -0,0 +1,155 @@
+<template>
+  <label class="inline-block mb-1 relative pb-2">
+    <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">
+      <select
+        ref="focusRef"
+        v-model="selected"
+        class="block appearance-none w-full border border-gray-300 dark:border-gray-700 pr-8 rounded-form leading-tight
+          focus:outline-none focus:border-primary-500 dark:focus:border-primary-500 transition-colors duration-150 ease-in-out"
+        :class="[
+          disabled
+            ? 'bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 cursor-not-allowed'
+            : 'bg-white dark:bg-gray-900',
+          {
+            // shadow
+            'shadow': !flat,
+
+            // 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',
+          },
+          {
+            'text-gray-400 dark:text-gray-500': modelValue === '' || modelValue === null,
+
+            // error
+            'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
+          },
+        ]"
+        :disabled="disabled || loading"
+        :name="name"
+        :readonly="readonly"
+        :value="modelValue"
+        v-on="inputListeners"
+      >
+        <option
+          v-if="placeholder"
+          disabled
+          value=""
+        >
+          {{ placeholder }}
+        </option>
+        <option
+          v-for="(option, index) in options"
+          :key="index"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
+        <slot></slot>
+      </select>
+
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+        <x-spinner v-if="loading" :size="size" />
+        <svg
+          v-else
+          class="stroke-2"
+          :class="[
+            disabled ? 'text-gray-600 dark:text-gray-400': 'text-gray-700 dark:text-gray-300',
+            {
+              'h-3 w-3': size === 'sm' || size === 'xs',
+              'h-4 w-4': !['xs', 'sm', 'xl'].includes(size),
+              'h-5 w-5': size === 'xl',
+            }
+          ]"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          fill="none"
+        >
+          <path d="M18 8L12 2L6 8" />
+          <path d="M18 16L12 22L6 16" />
+        </svg>
+      </div>
+    </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'
+import XSpinner from '../spinner/Spinner.vue'
+
+export default {
+  name: 'XSelect',
+  components: {
+    XSpinner,
+  },
+
+  validator: {
+    ...withValidator(),
+  },
+
+  props: {
+    ...withProps(),
+
+    placeholder: {
+      type: String,
+      default: null,
+    },
+
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    options: {
+      type: Array,
+      default: null,
+    },
+  },
+
+  emits: withEmits(false),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit, useListeners: false }),
+    }
+  },
+
+  computed: {
+    selected: {
+      get() {
+        return this.modelValue
+      },
+
+      set(val) {
+        this.$emit('update:modelValue', val)
+      },
+    },
+  },
+}
+</script>

package/src/components/skeleton/Skeleton.vue

@@ -0,0 +1,21 @@
+<template>
+  <component
+    :is="tag"
+    class="animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md"
+  >
+    &#8203;
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XSkeleton',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>