@indielayer/ui 0.1.0 → 0.2.2

package/src/components/colors.vue

@@ -0,0 +1,396 @@
+<template>
+  <div
+    :class="[
+      'bg-primary-50',
+      'bg-primary-200',
+      'bg-primary-500',
+      'bg-primary-600',
+      'bg-primary-800',
+      'border-primary-200',
+      'border-primary-500',
+      'border-primary-600',
+      'border-primary-700',
+      'border-primary-900',
+      'text-primary-50',
+      'text-primary-500',
+      'text-primary-600',
+      'text-primary-900',
+      'shadow-primary-500/50',
+      'bg-secondary-50',
+      'bg-secondary-200',
+      'bg-secondary-500',
+      'bg-secondary-600',
+      'bg-secondary-800',
+      'border-secondary-200',
+      'border-secondary-500',
+      'border-secondary-600',
+      'border-secondary-700',
+      'border-secondary-900',
+      'text-secondary-50',
+      'text-secondary-500',
+      'text-secondary-600',
+      'text-secondary-900',
+      'shadow-secondary-500/50',
+      'bg-error-50',
+      'bg-error-200',
+      'bg-error-500',
+      'bg-error-600',
+      'bg-error-800',
+      'border-error-200',
+      'border-error-500',
+      'border-error-600',
+      'border-error-700',
+      'border-error-900',
+      'text-error-50',
+      'text-error-500',
+      'text-error-600',
+      'text-error-900',
+      'shadow-error-500/50',
+      'bg-warning-50',
+      'bg-warning-200',
+      'bg-warning-500',
+      'bg-warning-600',
+      'bg-warning-800',
+      'border-warning-200',
+      'border-warning-500',
+      'border-warning-600',
+      'border-warning-700',
+      'border-warning-900',
+      'text-warning-50',
+      'text-warning-500',
+      'text-warning-600',
+      'text-warning-900',
+      'shadow-warning-500/50',
+      'bg-success-50',
+      'bg-success-200',
+      'bg-success-500',
+      'bg-success-600',
+      'bg-success-800',
+      'border-success-200',
+      'border-success-500',
+      'border-success-600',
+      'border-success-700',
+      'border-success-900',
+      'text-success-50',
+      'text-success-500',
+      'text-success-600',
+      'text-success-900',
+      'shadow-success-500/50',
+      'bg-rose-50',
+      'bg-rose-200',
+      'bg-rose-500',
+      'bg-rose-600',
+      'bg-rose-800',
+      'border-rose-200',
+      'border-rose-500',
+      'border-rose-600',
+      'border-rose-700',
+      'border-rose-900',
+      'text-rose-50',
+      'text-rose-500',
+      'text-rose-600',
+      'text-rose-900',
+      'shadow-rose-500/50',
+      'bg-zinc-50',
+      'bg-zinc-200',
+      'bg-zinc-500',
+      'bg-zinc-600',
+      'bg-zinc-800',
+      'border-zinc-200',
+      'border-zinc-500',
+      'border-zinc-600',
+      'border-zinc-700',
+      'border-zinc-900',
+      'text-zinc-50',
+      'text-zinc-500',
+      'text-zinc-600',
+      'text-zinc-900',
+      'shadow-zinc-500/50',
+      'bg-neutral-50',
+      'bg-neutral-200',
+      'bg-neutral-500',
+      'bg-neutral-600',
+      'bg-neutral-800',
+      'border-neutral-200',
+      'border-neutral-500',
+      'border-neutral-600',
+      'border-neutral-700',
+      'border-neutral-900',
+      'text-neutral-50',
+      'text-neutral-500',
+      'text-neutral-600',
+      'text-neutral-900',
+      'shadow-neutral-500/50',
+      'bg-stone-50',
+      'bg-stone-200',
+      'bg-stone-500',
+      'bg-stone-600',
+      'bg-stone-800',
+      'border-stone-200',
+      'border-stone-500',
+      'border-stone-600',
+      'border-stone-700',
+      'border-stone-900',
+      'text-stone-50',
+      'text-stone-500',
+      'text-stone-600',
+      'text-stone-900',
+      'shadow-stone-500/50',
+      'bg-pink-50',
+      'bg-pink-200',
+      'bg-pink-500',
+      'bg-pink-600',
+      'bg-pink-800',
+      'border-pink-200',
+      'border-pink-500',
+      'border-pink-600',
+      'border-pink-700',
+      'border-pink-900',
+      'text-pink-50',
+      'text-pink-500',
+      'text-pink-600',
+      'text-pink-900',
+      'shadow-pink-500/50',
+      'bg-fuchsia-50',
+      'bg-fuchsia-200',
+      'bg-fuchsia-500',
+      'bg-fuchsia-600',
+      'bg-fuchsia-800',
+      'border-fuchsia-200',
+      'border-fuchsia-500',
+      'border-fuchsia-600',
+      'border-fuchsia-700',
+      'border-fuchsia-900',
+      'text-fuchsia-50',
+      'text-fuchsia-500',
+      'text-fuchsia-600',
+      'text-fuchsia-900',
+      'shadow-fuchsia-500/50',
+      'bg-purple-50',
+      'bg-purple-200',
+      'bg-purple-500',
+      'bg-purple-600',
+      'bg-purple-800',
+      'border-purple-200',
+      'border-purple-500',
+      'border-purple-600',
+      'border-purple-700',
+      'border-purple-900',
+      'text-purple-50',
+      'text-purple-500',
+      'text-purple-600',
+      'text-purple-900',
+      'shadow-purple-500/50',
+      'bg-violet-50',
+      'bg-violet-200',
+      'bg-violet-500',
+      'bg-violet-600',
+      'bg-violet-800',
+      'border-violet-200',
+      'border-violet-500',
+      'border-violet-600',
+      'border-violet-700',
+      'border-violet-900',
+      'text-violet-50',
+      'text-violet-500',
+      'text-violet-600',
+      'text-violet-900',
+      'shadow-violet-500/50',
+      'bg-indigo-50',
+      'bg-indigo-200',
+      'bg-indigo-500',
+      'bg-indigo-600',
+      'bg-indigo-800',
+      'border-indigo-200',
+      'border-indigo-500',
+      'border-indigo-600',
+      'border-indigo-700',
+      'border-indigo-900',
+      'text-indigo-50',
+      'text-indigo-500',
+      'text-indigo-600',
+      'text-indigo-900',
+      'shadow-indigo-500/50',
+      'bg-blue-50',
+      'bg-blue-200',
+      'bg-blue-500',
+      'bg-blue-600',
+      'bg-blue-800',
+      'border-blue-200',
+      'border-blue-500',
+      'border-blue-600',
+      'border-blue-700',
+      'border-blue-900',
+      'text-blue-50',
+      'text-blue-500',
+      'text-blue-600',
+      'text-blue-900',
+      'shadow-blue-500/50',
+      'bg-sky-50',
+      'bg-sky-200',
+      'bg-sky-500',
+      'bg-sky-600',
+      'bg-sky-800',
+      'border-sky-200',
+      'border-sky-500',
+      'border-sky-600',
+      'border-sky-700',
+      'border-sky-900',
+      'text-sky-50',
+      'text-sky-500',
+      'text-sky-600',
+      'text-sky-900',
+      'shadow-sky-500/50',
+      'bg-cyan-50',
+      'bg-cyan-200',
+      'bg-cyan-500',
+      'bg-cyan-600',
+      'bg-cyan-800',
+      'border-cyan-200',
+      'border-cyan-500',
+      'border-cyan-600',
+      'border-cyan-700',
+      'border-cyan-900',
+      'text-cyan-50',
+      'text-cyan-500',
+      'text-cyan-600',
+      'text-cyan-900',
+      'shadow-cyan-500/50',
+      'bg-teal-50',
+      'bg-teal-200',
+      'bg-teal-500',
+      'bg-teal-600',
+      'bg-teal-800',
+      'border-teal-200',
+      'border-teal-500',
+      'border-teal-600',
+      'border-teal-700',
+      'border-teal-900',
+      'text-teal-50',
+      'text-teal-500',
+      'text-teal-600',
+      'text-teal-900',
+      'shadow-teal-500/50',
+      'bg-emerald-50',
+      'bg-emerald-200',
+      'bg-emerald-500',
+      'bg-emerald-600',
+      'bg-emerald-800',
+      'border-emerald-200',
+      'border-emerald-500',
+      'border-emerald-600',
+      'border-emerald-700',
+      'border-emerald-900',
+      'text-emerald-50',
+      'text-emerald-500',
+      'text-emerald-600',
+      'text-emerald-900',
+      'shadow-emerald-500/50',
+      'bg-green-50',
+      'bg-green-200',
+      'bg-green-500',
+      'bg-green-600',
+      'bg-green-800',
+      'border-green-200',
+      'border-green-500',
+      'border-green-600',
+      'border-green-700',
+      'border-green-900',
+      'text-green-50',
+      'text-green-500',
+      'text-green-600',
+      'text-green-900',
+      'shadow-green-500/50',
+      'bg-lime-50',
+      'bg-lime-200',
+      'bg-lime-500',
+      'bg-lime-600',
+      'bg-lime-800',
+      'border-lime-200',
+      'border-lime-500',
+      'border-lime-600',
+      'border-lime-700',
+      'border-lime-900',
+      'text-lime-50',
+      'text-lime-500',
+      'text-lime-600',
+      'text-lime-900',
+      'shadow-lime-500/50',
+      'bg-yellow-50',
+      'bg-yellow-200',
+      'bg-yellow-500',
+      'bg-yellow-600',
+      'bg-yellow-800',
+      'border-yellow-200',
+      'border-yellow-500',
+      'border-yellow-600',
+      'border-yellow-700',
+      'border-yellow-900',
+      'text-yellow-50',
+      'text-yellow-500',
+      'text-yellow-600',
+      'text-yellow-900',
+      'shadow-yellow-500/50',
+      'bg-amber-50',
+      'bg-amber-200',
+      'bg-amber-500',
+      'bg-amber-600',
+      'bg-amber-800',
+      'border-amber-200',
+      'border-amber-500',
+      'border-amber-600',
+      'border-amber-700',
+      'border-amber-900',
+      'text-amber-50',
+      'text-amber-500',
+      'text-amber-600',
+      'text-amber-900',
+      'shadow-amber-500/50',
+      'bg-orange-50',
+      'bg-orange-200',
+      'bg-orange-500',
+      'bg-orange-600',
+      'bg-orange-800',
+      'border-orange-200',
+      'border-orange-500',
+      'border-orange-600',
+      'border-orange-700',
+      'border-orange-900',
+      'text-orange-50',
+      'text-orange-500',
+      'text-orange-600',
+      'text-orange-900',
+      'shadow-orange-500/50',
+      'bg-red-50',
+      'bg-red-200',
+      'bg-red-500',
+      'bg-red-600',
+      'bg-red-800',
+      'border-red-200',
+      'border-red-500',
+      'border-red-600',
+      'border-red-700',
+      'border-red-900',
+      'text-red-50',
+      'text-red-500',
+      'text-red-600',
+      'text-red-900',
+      'shadow-red-500/50',
+      'bg-gray-50',
+      'bg-gray-200',
+      'bg-gray-500',
+      'bg-gray-600',
+      'bg-gray-800',
+      'border-gray-200',
+      'border-gray-500',
+      'border-gray-600',
+      'border-gray-700',
+      'border-gray-900',
+      'text-gray-50',
+      'text-gray-500',
+      'text-gray-600',
+      'text-gray-900',
+      'shadow-gray-500/50',
+    ]"
+  ></div>
+</template>

package/src/components/container/Container.vue

@@ -0,0 +1,21 @@
+<template>
+  <component
+    :is="tag"
+    class="container mx-auto px-4"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XContainer',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+}
+</script>

package/src/components/divider/Divider.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="[
+      {
+        'h-full flex-col': vertical,
+        'w-full': !vertical
+      },
+    ]"
+    class="flex justify-center items-center"
+  >
+    <div
+      class="bg-gray-200 dark:bg-gray-600 flex-grow"
+      :style="[
+        {
+          width: vertical ? '1px' : 'auto',
+          height: !vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+    <div
+      v-if="label"
+      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      :class="[{
+        'my-2': vertical,
+        'mx-4': !vertical
+      }]"
+      v-text="label"
+    ></div>
+    <div
+      class="bg-gray-200 dark:bg-gray-600 flex-grow"
+      :style="[
+        {
+          width: vertical ? '1px' : 'auto',
+          height: !vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'XDivider',
+
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

package/src/components/form/Form.vue

@@ -0,0 +1,101 @@
+<template>
+  <form @submit="submit" @keypress.enter="submit">
+    <fieldset :disabled="disabled">
+      <slot></slot>
+    </fieldset>
+  </form>
+</template>
+
+<script>
+import { provide, onMounted, watch, nextTick } from 'vue'
+
+export default {
+  name: 'XForm',
+  inheritAttrs: false,
+  props: {
+    autoValidate: {
+      type: Boolean,
+      default: true,
+    },
+    autoFocus: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    errors: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  setup(props, { emit }) {
+    const inputs = []
+
+    provide('form', {
+      registerInput: (name, { focus, validate, setError }) => {
+        const exists = inputs.find((i) => i.name === name)
+
+        if (exists) {
+          exists.focus = focus
+          exists.validate = validate
+          exists.setError = setError
+        }
+        else inputs.push({ name, focus, validate, setError })
+      },
+      unregisterInput: (name) => {
+        const index = inputs.findIndex((i) => i.name === name)
+
+        inputs.splice(index, 1)
+      },
+    })
+
+    onMounted(() => {
+      if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+    })
+
+    watch(() => props.errors, (errors) => {
+      nextTick(() => {
+        errors.forEach((error) => {
+          const input = inputs.find((i) => i.name === error.field)
+
+          if (input) input.setError(error.msg)
+        })
+      })
+    })
+
+    const validate = () => {
+      let isFormValid = true
+
+      inputs.forEach((input) => {
+        const isInputValid = input.validate()
+
+        if (!isInputValid && isFormValid) {
+          isFormValid = false
+
+          // focus on input error
+          if (input.focus) input.focus()
+        }
+      })
+
+      return isFormValid
+    }
+
+    const submit = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      const isFormValid = props.autoValidate ? validate() : true
+
+      emit('submit', isFormValid)
+    }
+
+    return {
+      validate,
+      submit,
+    }
+  },
+}
+</script>

package/src/components/icon/Icon.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg
+    class="stroke-2 inline-block"
+    :class="[
+      {
+        'h-3 w-3': size === 'xs',
+        'h-4 w-4': size === 'sm',
+        'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
+        'h-6 w-6': size === 'xl',
+      },
+    ]"
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g v-html="icons[icon] ? icons[icon] : icon" />
+  </svg>
+</template>
+
+<script>
+import { withProps, withValidator } from '../../composables/common'
+
+export default {
+  name: 'XIcon',
+
+  validator: withValidator(),
+
+  props: {
+    ...withProps(),
+
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    icons() {
+      return this.$icons ? this.$icons : {}
+    },
+  },
+}
+</script>

package/src/components/image/Image.vue

@@ -0,0 +1,30 @@
+<template>
+  <img :src="source" />
+</template>
+
+<script>
+const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      source: fallback,
+    }
+  },
+
+  mounted() {
+    const img = new Image()
+
+    img.onload = () => { this.source = this.src }
+    img.onerror = () => { }
+    img.src = this.src
+  },
+}
+</script>

package/src/components/index.js

@@ -0,0 +1,40 @@
+export { default as Avatar } from './avatar/Avatar.vue'
+export { default as Button } from './button/Button.vue'
+export { default as Card } from './card/Card.vue'
+export { default as Checkbox } from './checkbox/Checkbox.vue'
+export { default as Collapse } from './collapse/Collapse.vue'
+export { default as Container } from './container/Container.vue'
+export { default as Divider } from './divider/Divider.vue'
+export { default as Form } from './form/Form.vue'
+export { default as Icon } from './icon/Icon.vue'
+export { default as Image } from './image/Image.vue'
+export { default as Input } from './input/Input.vue'
+export { default as Link } from './link/Link.vue'
+export { default as Modal } from './modal/Modal.vue'
+export { default as Note } from './note/Note.vue'
+export { default as Pagination } from './pagination/Pagination.vue'
+export { default as PaginationItem } from './pagination/PaginationItem.vue'
+export { default as Popover } from './popover/Popover.vue'
+export { default as PopoverContainer } from './popover/PopoverContainer.vue'
+export { default as PopoverItem } from './popover/PopoverItem.vue'
+export { default as Progress } from './progress/Progress.vue'
+export { default as Radio } from './radio/Radio.vue'
+export { default as Select } from './select/Select.vue'
+export { default as Spacer } from './spacer/Spacer.vue'
+export { default as Spinner } from './spinner/Spinner.vue'
+export { default as Skeleton } from './skeleton/Skeleton.vue'
+export { default as StatusDot } from './status/StatusDot.vue'
+export { default as Table } from './table/Table.vue'
+export { default as TableBody } from './table/TableBody.vue'
+export { default as TableCell } from './table/TableCell.vue'
+export { default as TableHead } from './table/TableHead.vue'
+export { default as TableHeader } from './table/TableHeader.vue'
+export { default as TableRow } from './table/TableRow.vue'
+export { default as Tab } from './tabs/Tab.vue'
+export { default as Tabs } from './tabs/Tabs.vue'
+export { default as Tag } from './tag/Tag.vue'
+export { default as Textarea } from './textarea/Textarea.vue'
+export { default as Toast } from './toast/Toast.vue'
+export { default as Toggle } from './toggle/Toggle.vue'
+export { default as Tooltip } from './tooltip/Tooltip.vue'
+export { default as Colors } from './colors.vue'