@indielayer/ui 0.1.0 → 0.2.2

package/src/components/tag/Tag.vue

@@ -0,0 +1,93 @@
+<template>
+  <component
+    :is="tag"
+    class="inline-block leading-none"
+    :class="
+      [
+        [`bg-${color}-200 text-${color}-900 border-${color}-900`],
+        {
+          // variant
+          '!bg-transparent border': outlined,
+
+          // 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',
+
+          // radius
+          'rounded-full': radius === 'full',
+          'rounded-lg': radius === 'lg',
+          'rounded-md': radius === 'md',
+          'rounded-sm': radius === 'sm',
+          'rounded': radius === 'rounded',
+        },
+      ]"
+  >
+    <span
+      v-if="removable"
+      class="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-1 cursor-pointer hover:text-gray-700 transition-colors duration-150 ease-in-out flex-shrink-0"
+        @click="$emit('remove')"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </span>
+
+    <template v-else>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XTag',
+
+  props: {
+    color: {
+      type: String,
+      default: 'gray',
+    },
+
+    radius: {
+      type: String,
+      default: 'full',
+    },
+
+    removable: {
+      type: Boolean,
+      default: false,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    tag: {
+      type: String,
+      default: 'span',
+    },
+
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,166 @@
+<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>
+
+    <textarea
+      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 resize-none overflow-hidden"
+      :class="[
+        disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
+        {
+          // 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',
+        },
+        flat ? '!p-0 !bg-transparent' : 'border shadow',
+        {
+          // 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"
+      :value="modelValue"
+      v-on="inputListeners"
+      @keydown="onKeyDown"
+      @input="onInput"
+    ></textarea>
+
+    <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: 'XTextarea',
+
+  validator: withValidator(),
+
+  props: {
+    ...withProps(),
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    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,
+    },
+
+    adjustToText: {
+      type: Boolean,
+      default: true,
+    },
+
+    preventEnter: {
+      type: Boolean,
+      default: false,
+    },
+
+    inputClass: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: withEmits(),
+
+  setup(props, { attrs, emit }) {
+    return {
+      ...useInputtable(props, { attrs, emit }),
+    }
+  },
+
+  watch: {
+    modelValue() {
+      setTimeout(this.resize)
+    },
+    size() {
+      setTimeout(this.resize)
+    },
+  },
+
+  mounted() {
+    this.resize()
+    window.addEventListener('resize', this.resize)
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('resize', this.resize)
+  },
+
+  methods: {
+    onInput() {
+      this.resize()
+    },
+    onKeyDown(e) {
+      if (this.preventEnter && e.keyCode === 13) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        return
+      }
+    },
+    resize() {
+      if (this.adjustToText) {
+        const { focusRef } = this.$refs
+
+        focusRef.style.height = '1px'
+        focusRef.style.height = (2 + focusRef.scrollHeight) + 'px'
+      }
+    },
+  },
+}
+</script>

package/src/components/toast/Toast.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="fixed z-40 w-full sm:w-96"
+    :class="{
+      // align
+      'left-0': align === 'left',
+      'right-0': align === 'right',
+      // position
+      'bottom-0': position === 'bottom',
+      'top-0': position === 'top',
+    }"
+  >
+    <transition-group
+      tag="ul"
+      enter-active-class="transition ease-out duration-500"
+      leave-active-class="transition ease-out duration-500"
+      enter-class="transform translate-y-2 opacity-0"
+      enter-to-class="transform translate-y-0 opacity-100"
+      leave-class="transform translate-y-0 opacity-100"
+      leave-to-class="transform translate-y-2 opacity-0"
+      move-class="ease-in-out duration-200"
+    >
+      <li
+        v-for="event in events"
+        :key="event.id"
+        :class="[
+          'px-4',
+          {
+            'pb-2': position === 'bottom',
+            'pt-2': position === 'top',
+          }
+        ]"
+      >
+        <div
+          :class="[
+            'rounded px-4 py-3 cursor-pointer w-full',
+            {
+              // type
+              'bg-gray-900 dark:bg-white text-white dark:text-gray-900 border border-gray-700 dark:border-gray-200':
+                !event.type || (event.type && !['success', 'error', 'warn'].includes(event.type)),
+              'bg-success-500 text-success-50': event.type && event.type === 'success',
+              'bg-error-500 text-error-50': event.type && event.type === 'error',
+              'bg-warning-500 text-warning-50': event.type && event.type === 'warn',
+            }
+          ]"
+          @click="remove(event)"
+        >
+          {{ event.content }}
+        </div>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+const validator = {
+  align: [
+    'left',
+    'right',
+  ],
+  position: [
+    'bottom',
+    'top',
+  ],
+}
+
+export default {
+  name: 'XToast',
+
+  validator,
+
+  props: {
+    align: {
+      type: String,
+      default: 'right',
+      validator: (value) => validator.align.includes(value),
+    },
+
+    position: {
+      default: 'bottom',
+      type: String,
+      validator: (value) => validator.position.includes(value),
+    },
+
+    timeout: {
+      type: Number,
+      default: 3500,
+    },
+  },
+
+  data() {
+    return {
+      events: [],
+    }
+  },
+
+  methods: {
+    log(content) {
+      this.add(content)
+    },
+
+    success(content) {
+      this.add(content, 'success')
+    },
+
+    warn(content) {
+      this.add(content, 'warn')
+    },
+
+    error(content) {
+      this.add(content, 'error')
+    },
+
+    add(content, type = null) {
+      const event = {
+        id: Date.now(),
+        content,
+        type,
+      }
+
+      this.events.push(event)
+      this.setTimer(event)
+    },
+
+    remove(event) {
+      this.events = this.events.filter((e) => e.id !== event.id)
+    },
+
+    setTimer(event) {
+      setTimeout(
+        () => {
+          this.remove(event)
+        },
+        this.timeout,
+      )
+    },
+  },
+}
+</script>

package/src/components/toggle/Toggle.vue

@@ -0,0 +1,128 @@
+<template>
+  <label
+    class="inline-block mb-1 relative pb-2"
+    :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
+  >
+    <div class="flex items-center">
+      <div
+        class="rounded-full transition-colors duration-300"
+        :class="[
+          {
+            // shadow
+            'border shadow': !flat,
+            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && modelValue,
+
+            'w-8': size === 'sm' || size === 'xs',
+            'w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
+            'w-12': size === 'lg',
+            'w-14': size === 'xl',
+            'bg-gray-300 dark:bg-gray-600': disabled && !checked,
+            'bg-gray-400 dark:bg-gray-400': disabled && checked,
+            'bg-gray-200 dark:bg-gray-600': !disabled && !checked,
+            [`bg-${color}-200  border-${color}-200`]: !disabled && checked,
+          }
+        ]"
+      >
+        <input
+          :id="id"
+          v-model="checked"
+          :aria-checked="checked ? 'true' : 'false'"
+          :aria-disabled="disabled ? 'true' : null"
+          type="checkbox"
+          class="hidden"
+          :disabled="disabled || loading"
+          :name="name"
+          :required="required"
+          :value="modelValue"
+        />
+
+        <x-spinner v-if="loading" :size="size" :class="{'translate-x-full': checked}" />
+        <div
+          v-else
+          class="rounded-full shadow transform transition duration-300 flex-shrink-0"
+          :class="[
+            {
+              'h-4 w-4': size === 'sm' || size === 'xs',
+              'h-5 w-5': !['xs', 'sm', 'lg', 'xl'].includes(size),
+              'h-6 w-6': size === 'lg',
+              'h-7 w-7': size === 'xl',
+              'translate-x-full': checked,
+              'bg-gray-200 dark:bg-gray-200': disabled,
+              'bg-white': !disabled && !checked,
+              [`bg-${color}-500`]: !disabled && checked,
+            },
+          ]"
+        ></div>
+      </div>
+      <span
+        v-if="label"
+        class="pl-2 font-medium text-gray-800 dark:text-gray-200"
+        :class="{
+          'text-xs': size === 'xs',
+          'text-sm': size === 'sm',
+          'text-lg': size === 'lg',
+          'text-xl': size === 'xl',
+        }"
+        v-text="label"
+      >
+      </span>
+    </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: 'XToggle',
+
+  components: {
+    XSpinner,
+  },
+
+  validator: {
+    ...withValidator(),
+  },
+
+  props: {
+    ...withProps(),
+
+    id: {
+      type: String,
+      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: {
+    checked: {
+      get() {
+        return this.modelValue
+      },
+
+      set(val) {
+        this.$emit('update:modelValue', val)
+      },
+    },
+  },
+}
+</script>

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,22 @@
+<template>
+  <x-popover hover class="dark" v-bind="$attrs">
+    <slot></slot>
+    <template #content>
+      <x-popover-container class="p-2 text-gray-300 text-sm">
+        <slot name="tooltip"></slot>
+      </x-popover-container>
+    </template>
+  </x-popover>
+</template>
+
+<script>
+import XPopover from '../popover/Popover.vue'
+import XPopoverContainer from '../popover/PopoverContainer.vue'
+
+export default {
+  components: {
+    XPopover,
+    XPopoverContainer,
+  },
+}
+</script>

package/src/composables/common.js

@@ -0,0 +1,21 @@
+const validator = {
+  size: ['auto', 'xs', 'sm', 'md', 'lg', 'xl'],
+}
+
+export const withProps = () => ({
+  size: {
+    type: String,
+    default: null,
+    validator: (value) => validator.size.includes(value),
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  flat: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+export const withValidator = () => validator