@indielayer/ui 0.1.0 → 0.1.1

package/src/components/collapse/Collapse.vue

@@ -0,0 +1,118 @@
+<template>
+  <component
+    :is="tag"
+    :aria-disabled="disabled"
+    :aria-expanded="collapsed ? 'false' : 'true'"
+  >
+    <div
+      class="flex items-center relative"
+      :class="{
+        'cursor-pointer' : !disabled,
+        'flex-row-reverse': iconLeft,
+      }"
+      @click="toggleExpand()"
+    >
+      <div class="flex-1">
+        <slot :collapsed="collapsed"></slot>
+      </div>
+
+      <div class="absolute top-1/2 transform -translate-y-1/2 right-2">
+        <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-5 h-5 transform transition-transform duration-200"
+          :class="[
+            iconLeft ? 'mr-2' : 'ml-2',
+            { 'rotate-180': !collapsed }
+          ]"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </div>
+    </div>
+
+    <template v-if="$slots.summary">
+      <slot name="summary"></slot>
+    </template>
+
+    <div
+      class="overflow-y-hidden transition-all duration-300 ease-in-out"
+      :style="{ maxHeight: maxHeight + 'px' }"
+    >
+      <div ref="content">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'XCollapse',
+
+  props: {
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+
+    expanded: {
+      default: false,
+      type: Boolean,
+    },
+
+    iconLeft: {
+      default: false,
+      type: Boolean,
+    },
+
+    tag: {
+      default: 'div',
+      type: String,
+    },
+  },
+
+  data() {
+    return {
+      collapsed: !this.expanded,
+      maxHeight: !this.expanded ? 0 : 'auto',
+    }
+  },
+
+  beforeMount() {
+    window.addEventListener('resize', this.resizeContent)
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('resize', this.resizeContent)
+  },
+
+  mounted() {
+    this.resizeContent()
+  },
+
+  methods: {
+    toggleExpand() {
+      if (this.disabled) return
+
+      this.collapsed = !this.collapsed
+      this.$emit('toggle', this.collapsed)
+      this.resizeContent()
+    },
+
+    resizeContent() {
+      if (this.collapsed) {
+        this.maxHeight = 0
+      } else {
+        this.maxHeight = this.$refs.content.offsetHeight
+      }
+    },
+  },
+}
+</script>

package/src/components/container/Container.vue

@@ -0,0 +1,22 @@
+<template>
+  <component
+    :is="$props.tag"
+    v-bind="$attrs"
+    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,57 @@
+<template>
+  <div
+    v-bind="$attrs"
+    :class="[
+      {
+        'h-full flex-col': $props.vertical,
+        'w-full': !$props.vertical
+      },
+    ]"
+    class="flex justify-center items-center"
+  >
+    <div
+      class="bg-gray-200 dark:bg-gray-600 flex-grow"
+      :style="[
+        {
+          width: $props.vertical ? '1px' : 'auto',
+          height: !$props.vertical ? '1px' : 'auto'
+        }
+      ]"
+    ></div>
+    <div
+      v-if="$props.label"
+      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      :class="[{
+        'my-2': $props.vertical,
+        'mx-4': !$props.vertical
+      }]"
+      v-text="$props.label"
+    ></div>
+    <div
+      class="bg-gray-200 dark:bg-gray-600 flex-grow"
+      :style="[
+        {
+          width: $props.vertical ? '1px' : 'auto',
+          height: !$props.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,93 @@
+<template>
+  <form @submit="submit" @keypress.enter="submit">
+    <fieldset :disabled="disabled">
+      <slot></slot>
+    </fieldset>
+  </form>
+</template>
+
+<script>
+export default {
+  props: {
+    autoValidate: {
+      type: Boolean,
+      default: true,
+    },
+    autoFocus: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    apiErrors: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    apiErrors(errors) {
+      this.$nextTick(() => {
+        errors.forEach((error) => {
+          this.$slots.default().every((vNode) => {
+            const vInstance = vNode.componentInstance
+
+            if (vInstance) {
+              vInstance.errorInternal = error.msg
+
+              return false
+            }
+
+            return true
+          })
+        })
+      })
+    },
+  },
+  mounted() {
+    if (this.autoFocus) {
+      this.$slots.default().every((vNode) => {
+        const vInstance = vNode.componentInstance
+
+        if (vInstance && typeof vInstance.focus === 'function') {
+          vInstance.focus()
+
+          return false
+        }
+
+        return true
+      })
+    }
+  },
+  methods: {
+    submit(e) {
+      e.preventDefault()
+
+      const isFormValid = this.autoValidate ? this.validate() : true
+
+      this.$emit('submit', isFormValid)
+    },
+    validate() {
+      let isFormValid = true
+
+      this.$slots.default().forEach((vNode) => {
+        const vInstance = vNode.componentInstance
+
+        if (vInstance && typeof vInstance.validate === 'function') {
+          const isInputValid = vInstance.validate()
+
+          if (!isInputValid && isFormValid) {
+            isFormValid = false
+
+            // focus on input error
+            if (vInstance.focus) vInstance.focus()
+          }
+        }
+      })
+
+      return isFormValid
+    },
+  },
+}
+</script>

package/src/components/icon/Icon.vue

@@ -0,0 +1,46 @@
+<template>
+  <svg
+    class="stroke-2 inline-block"
+    v-bind="$attrs"
+    :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',
+      },
+    ]"
+    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[$props.icon] ? icons[$props.icon] : $props.icon" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'XIcon',
+
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    icons() {
+      return this.$icons ? this.$icons : {}
+    },
+  },
+}
+</script>

package/src/components/index.js

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

package/src/components/input/Input.vue

@@ -0,0 +1,307 @@
+<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">
+      <span
+        v-if="$slots.icon"
+        class="flex items-center w-5 h-5 text-gray-500 absolute my-auto ml-2 inset-y-0"
+        :class="[{
+          'mr-2 left-0': $slots.icon && !iconRight,
+          'ml-2 right-0': $slots.icon && iconRight,
+        }]"
+      >
+        <slot name="icon"></slot>
+      </span>
+
+      <input
+        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"
+        :class="[
+          disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
+          type === 'password' ? 'pr-9' : (flat ? '' : 'pr-4'),
+          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',
+          },
+          {
+            '!pl-9': $slots.icon && !iconRight,
+            '!pr-9': $slots.icon && iconRight,
+            // 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"
+        :type="currentType"
+        :value="value"
+        v-bind="$attrs"
+        @change="onChange"
+      />
+
+      <svg
+        v-if="type === 'password' && showPasswordToggle"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        class="text-gray-700 dark:text-gray-300 stroke-2 w-4 h-4 absolute my-auto mr-2 inset-y-0 right-1 cursor-pointer"
+        @click="togglePasswordVisibility()"
+      >
+        <template v-if="currentType === 'password'">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+          <circle cx="12" cy="12" r="3"/>
+        </template>
+
+        <template v-else>
+          <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+          <line x1="1" y1="1" x2="23" y2="23"/>
+        </template>
+      </svg>
+    </div>
+
+    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'XInput',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    showPasswordToggle: {
+      type: Boolean,
+      default: true,
+    },
+
+    validateOnInput: {
+      type: Boolean,
+      default: true,
+    },
+
+    hideDetails: {
+      type: Boolean,
+      default: false,
+    },
+
+    label: {
+      type: String,
+      default: '',
+    },
+
+    iconRight: {
+      type: Boolean,
+      default: false,
+    },
+
+    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,
+    },
+
+    name: {
+      type: String,
+      default: null,
+    },
+
+    placeholder: {
+      type: String,
+      default: null,
+    },
+
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
+
+    size: {
+      type: String,
+      default: null,
+    },
+
+    type: {
+      type: String,
+      default: 'text',
+    },
+
+    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.$emit('input', event.target.value)
+        },
+        change: (event) => this.$emit('change', event),
+      }
+    },
+  },
+
+  watch: {
+    error(val) {
+      this.errorInternal = val
+    },
+  },
+
+  methods: {
+    onChange(e) {
+      if (this.type === 'number') {
+        if (this.min !== null) {
+          if (e.target.value < this.min) e.target.value = this.min
+        }
+
+        if (this.max !== null) {
+          if (e.target.value > this.max) e.target.value = this.max
+        }
+      }
+    },
+    togglePasswordVisibility() {
+      this.currentType = this.currentType === 'password' ? 'text' : 'password'
+      // this.$refs.input.setAttribute('type', this.currentType)
+    },
+    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>