@indielayer/ui 0.1.0 → 0.1.1

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,256 @@
+<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>
+
+    <textarea
+      ref="input"
+      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',
+        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',
+        },
+        {
+          // error
+          'border-error-500 focus:border-error-500 dark:focus:border-error-500': errorInternal,
+        },
+        inputClass,
+      ]"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :name="name"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :value="value"
+
+      v-on="listeners"
+      @keydown="onKeyDown"
+    ></textarea>
+
+    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'XTextarea',
+
+  props: {
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+
+    validateOnInput: {
+      type: Boolean,
+      default: true,
+    },
+
+    hideDetails: {
+      type: Boolean,
+      default: false,
+    },
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    maxlength: {
+      type: Number,
+      default: null,
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    placeholder: {
+      type: String,
+      default: null,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    adjustToText: {
+      type: Boolean,
+      default: true,
+    },
+
+    preventEnter: {
+      type: Boolean,
+      default: false,
+    },
+
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    inputClass: {
+      type: String,
+      default: '',
+    },
+
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+
+    error: {
+      type: String,
+      default: '',
+    },
+
+    rules: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      isFirstValidation: true,
+      currentType: this.type,
+      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.resize()
+          this.$emit('input', event.target.value)
+        },
+        change: (event) => this.$emit('change', event),
+      }
+    },
+  },
+
+  watch: {
+    error(val) {
+      this.errorInternal = val
+    },
+    value() {
+      setTimeout(this.resize)
+    },
+    size() {
+      setTimeout(this.resize)
+    },
+  },
+
+  mounted() {
+    this.resize()
+    window.addEventListener('resize', this.resize)
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('resize', this.resize)
+  },
+
+  methods: {
+    onKeyDown(e) {
+      if (this.preventEnter && e.keyCode === 13) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        return
+      }
+    },
+    resize() {
+      if (this.adjustToText) {
+        const { input } = this.$refs
+
+        input.style.height = '1px'
+        input.style.height = (2 + input.scrollHeight) + 'px'
+      }
+    },
+    reset() {
+      this.errorInternal = ''
+      this.isFirstValidation = true
+      this.$emit('input', '')
+    },
+    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/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,131 @@
+<template>
+  <label
+    :class="[
+      !disabled ? 'cursor-pointer' : 'cursor-not-allowed',
+      label ? 'flex items-center' : 'inline-block',
+    ]"
+  >
+    <div
+      class="rounded-full transition-colors duration-300"
+      :class="[
+        {
+          // shadow
+          'border shadow': !flat,
+
+          '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-primary-200  border-primary-200': !disabled && checked,
+        }
+      ]"
+    >
+      <input
+        :id="id"
+        v-model="checked"
+        :aria-checked="checked ? 'true' : 'false'"
+        :aria-disabled="disabled ? 'true' : null"
+        :disabled="disabled"
+        :name="name"
+        :required="required"
+        type="checkbox"
+        class="hidden"
+      />
+
+      <div
+        class="rounded-full shadow transform transition duration-300"
+        :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-primary-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>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'XToggle',
+
+  model: {
+    prop: 'option',
+    event: 'change',
+  },
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    id: {
+      type: String,
+      default: null,
+    },
+
+    option: {
+      type: Boolean,
+      default: false,
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    label: {
+      type: String,
+      default: null,
+    },
+
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    flat: {
+      type: Boolean,
+      default: false,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    checked: {
+      get() {
+        return this.option
+      },
+      set(val) {
+        this.$emit('change', 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/index.js

@@ -0,0 +1,16 @@
+import * as components from './components'
+
+const install = (Vue, config = {}) => {
+  Object.entries(components).forEach(([name, component]) => {
+    const prefix = config.prefix ? config.prefix : 'X'
+
+    Vue.component(`${prefix}${name}`, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default install
+export * from './components'

package/src/tailwind.preset.js

@@ -0,0 +1,61 @@
+const { borderRadius } = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  // purge: [
+  //   './**/*.vue',
+  // ],
+  darkMode: 'class',
+  variants: {},
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.blue,
+        secondary: colors.blueGray,
+        success: colors.green,
+        warning: colors.orange,
+        error: colors.red,
+
+        transparent: 'transparent',
+        current: 'currentColor',
+
+        // black: '#000',
+        // white: '#fff',
+
+        // blue: colors.lightBlue,
+        // gray: colors.gray,
+        // green: colors.green,
+        // indigo: colors.indigo,
+        // orange: colors.orange,
+        // pink: colors.pink,
+        // purple: colors.purple,
+        // red: colors.rose,
+        // teal: colors.teal,
+        // yellow: colors.amber,
+      },
+      borderRadius: {
+        button: borderRadius.md,
+        form: borderRadius.md,
+      },
+      transitionTimingFunction: {
+        'in-fudi': 'cubic-bezier(0.7, 0, 0.84, 0)',
+        'out-fudi': 'cubic-bezier(0.16, 1, 0.3, 1)',
+        'in-out-fudi': 'cubic-bezier(0.87, 0, 0.13, 1)',
+      },
+    },
+  },
+  plugins: [
+    ({ addBase, config }) => {
+      addBase({
+        html: {
+          color: config('theme.colors.gray.900'),
+          backgroundColor: config('theme.colors.gray.50'),
+        },
+        'html.dark': {
+          color: config('theme.colors.gray.50'),
+          backgroundColor: config('theme.colors.gray.900'),
+        },
+      })
+    },
+  ],
+}