@indielayer/ui 0.2.2 → 1.0.0-alpha.0

package/src/components/popover/Popover.vue

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

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

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

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

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

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

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