@indielayer/ui 0.1.0 → 0.1.1

package/src/components/progress/Progress.vue

@@ -0,0 +1,143 @@
+<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-primary-500': color === 'primary',
+          'bg-success-500': color === 'success',
+          'bg-error-500': color === 'error',
+          'bg-warning-500': color === 'warning',
+        }"
+        :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="8"
+        fill="none"
+        cx="50"
+        cy="50"
+        r="40"
+      />
+      <circle
+        class="transition-all duration-200"
+        :class="{
+          'text-primary-500': color === 'primary',
+          'text-success-500': color === 'success',
+          'text-error-500': color === 'error',
+          'text-warning-500': color === 'warning',
+        }"
+        :style="{ strokeDasharray: `${circleProgress} 252` }"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        stroke-width="8"
+        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="{
+          'bg-gray-200 dark:bg-gray-700': !isScoreActive(index),
+          'bg-primary-500': isScoreActive(index) && color === 'primary',
+          'bg-success-500': isScoreActive(index) && color === 'success',
+          'bg-error-500': isScoreActive(index) && color === 'error',
+          'bg-warning-500': isScoreActive(index) && color === 'warning',
+        }"
+      ></div>
+    </div>
+  </component>
+</template>
+
+<script>
+const validator = {
+  color: [
+    'primary',
+    'error',
+    'success',
+    'warning',
+  ],
+  variant: [
+    'bar',
+    'circle',
+    'score',
+  ],
+}
+
+export default {
+  name: 'XProgress',
+
+  validator,
+
+  props: {
+    color: {
+      default: 'primary',
+      type: String,
+      validator: (value) => validator.color.includes(value),
+    },
+
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0 && val <= 100,
+    },
+
+    scoreLength: {
+      type: Number,
+      default: 3,
+    },
+
+    tag: {
+      default: 'div',
+      type: String,
+    },
+
+    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,161 @@
+<template>
+  <label
+    class="inline-block cursor-pointer focus:outline-none"
+    :class="{
+      'rounded border border-gray-300 dark:border-gray-700 p-2 hover:border-primary-500 dark:hover:border-primary-500': bordered,
+      'transition-colors duration-150 ease-in-out': bordered,
+      'border-primary-500 dark:border-primary-500': checked && !disabled,
+    }"
+    :aria-checked="checked ? 'true' : 'false'"
+    :aria-disabled="disabled ? 'true' : null"
+    :tabindex="0"
+  >
+    <div
+      class="flex items-center"
+      :class="{ 'cursor-not-allowed': disabled }"
+    >
+      <input
+        ref="input"
+        v-model="selected"
+        type="radio"
+        class="invisible absolute"
+        :disabled="disabled"
+        :name="name"
+        :required="required"
+        :value="value"
+      />
+      <div
+        class="border rounded-full flex justify-center items-center flex-none"
+        :class="[
+          {
+            // shadow
+            'shadow': !flat,
+
+            'h-4 w-4': size === 'sm' || size === 'xs',
+            'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
+            'h-6 w-6': size === 'xl',
+
+            'hover:border-primary-500': !disabled,
+            'bg-primary-500 border-primary-500': checked && !disabled,
+            'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !checked && !disabled,
+            // disabled
+            'bg-gray-500 border-gray-600 dark:border-gray-400': checked && disabled,
+            'bg-gray-200 border-gray-300 dark:border-gray-700': !checked && disabled,
+          }
+        ]"
+      >
+        <svg
+          class="fill-current text-primary-100"
+          :class="{
+            'opacity-0': !checked,
+            '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>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'XRadio',
+
+  model: {
+    prop: 'options',
+    event: 'change',
+  },
+
+  props: {
+    bordered: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    options: {
+      type: [String, Number, Boolean, Function, Object, Array],
+      default: null,
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: [String, Number, Boolean, Function, Object, Array],
+      default: null,
+    },
+  },
+
+  computed: {
+    checked() {
+      return this.options === this.value
+    },
+
+    selected: {
+      get() {
+        return this.options
+      },
+
+      set(val) {
+        this.$emit('change', val)
+      },
+    },
+  },
+
+  methods: {
+    focus() {
+      this.$refs.input.focus()
+    },
+  },
+}
+</script>

package/src/components/select/Select.vue

@@ -0,0 +1,230 @@
+<template>
+  <label
+    class="block mb-1 relative"
+    :class="hideDetails ? 'pb-2' : 'pb-6'"
+  >
+    <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="input"
+        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
+            'border 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-700 dark:text-gray-200': value === '' || value === null,
+
+            // error
+            'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
+          },
+        ]"
+        :disabled="disabled"
+        :name="name"
+        :readonly="readonly"
+        :value="value"
+
+        v-on="listeners"
+      >
+        <option
+          v-if="placeholder"
+          disabled
+          value=""
+        >
+          {{ placeholder }}
+        </option>
+        <slot></slot>
+      </select>
+
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+        <svg
+          class="h-4 w-4 stroke-2"
+          :class="[disabled ? 'text-gray-600 dark:text-gray-400': 'text-gray-700 dark:text-gray-300']"
+          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>
+export default {
+  name: 'XSelect',
+
+  props: {
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    validateOnInput: {
+      type: Boolean,
+      default: true,
+    },
+
+    hideDetails: {
+      type: Boolean,
+      default: false,
+    },
+
+    placeholder: {
+      type: String,
+      default: null,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
+
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+
+    error: {
+      type: String,
+      default: '',
+    },
+
+    rules: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      isFirstValidation: true,
+      errorInternal: this.error,
+    }
+  },
+
+  computed: {
+    listeners() {
+      return {
+        // Add listeners from parent
+        ...this.$attrs,
+        // Ensure that the component works with v-model
+        blur: (event) => this.$emit('blur', event),
+        focus: (event) => this.$emit('focus', event),
+        input: (event) => {
+          if (this.validateOnInput && !this.isFirstValidation) this.validate(event.target.value)
+          this.$emit('input', event.target.value)
+          this.$emit('select', event.target.value)
+        },
+      }
+    },
+  },
+
+  watch: {
+    error(val) {
+      this.errorInternal = val
+    },
+  },
+
+  methods: {
+    reset() {
+      this.errorInternal = ''
+      this.isFirstValidation = true
+      this.$emit('input', '')
+      this.$emit('select', '')
+    },
+    focus() {
+      this.$refs.input.focus()
+    },
+    validate(val) {
+      val = val || this.value
+
+      this.isFirstValidation = false
+
+      for (let i = 0; i < this.rules.length; i++) {
+        const item = this.rules[i]
+
+        let isValid = true
+
+        // Direct Function
+        if (typeof item === 'function') {
+          const rule = item
+
+          isValid = rule(val)
+        } else if (Array.isArray(item) && item.length === 2) {
+          // Rule array [function, options]
+          const { 0: rule, 1: options } = item
+
+          isValid = rule(val, options)
+        } else {
+          // Rule object { fn, options }
+          const rule = item.fn
+          const { options } = item
+
+          isValid = rule(val, options)
+        }
+
+        if (isValid !== true) {
+          this.errorInternal = isValid
+
+          return false
+        }
+      }
+
+      this.errorInternal = ''
+
+      return true
+    },
+  },
+}
+</script>

package/src/components/skeleton/Skeleton.vue

@@ -0,0 +1,30 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="animate-pulse bg-gray-300 dark:bg-gray-600"
+    :class="[
+      $props.rounded ? 'rounded-full' : 'rounded-sm',
+    ]"
+  >
+    &#8203;
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XSkeleton',
+
+  props: {
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>

package/src/components/spacer/Spacer.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="flex-grow"></div>
+</template>

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg
+    :class="[
+      {
+        'h-3 w-3': $props.size === 'xs',
+        'h-4 w-4': $props.size === 'sm',
+        'h-5 w-5': !['xs', 'sm', 'xl'].includes($props.size),
+        'h-6 w-6': $props.size === 'xl',
+      },
+
+    ]"
+    viewBox="0 0 38 38"
+    xmlns="http://www.w3.org/2000/svg"
+    style="stroke: currentColor"
+  >
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" stroke-width="2">
+        <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="0.5s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'XSpinner',
+
+  props: {
+    size: {
+      type: String,
+      default: null,
+    },
+  },
+}
+</script>

package/src/components/status/StatusDot.vue

@@ -0,0 +1,69 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    class="inline-block relative h-3 w-3"
+  >
+    <div
+      v-if="$props.animate"
+      class="animate-ping absolute h-full w-full rounded-full opacity-75"
+      :class="[
+        {
+          // status
+          'bg-primary-400': $props.status === 'primary',
+          'bg-error-400': $props.status === 'error',
+          'bg-success-400': $props.status === 'success',
+          'bg-warning-400': $props.status === 'warning',
+        },
+      ]"
+    ></div>
+
+    <div
+      class="absolute rounded-full h-full w-full"
+      :class="[
+        {
+          // status
+          'bg-primary-500': $props.status === 'primary',
+          'bg-error-500': $props.status === 'error',
+          'bg-success-500': $props.status === 'success',
+          'bg-warning-500': $props.status === 'warning',
+        },
+      ]"
+    ></div>
+  </component>
+</template>
+
+<script>
+const validator = {
+  status: [
+    'primary',
+    'error',
+    'success',
+    'warning',
+  ],
+}
+
+export default {
+  name: 'XStatusDot',
+
+  validator,
+
+  props: {
+    animate: {
+      type: Boolean,
+      default: false,
+    },
+
+    status: {
+      type: String,
+      default: 'primary',
+      validator: (value) => validator.status.includes(value),
+    },
+
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>