@indielayer/ui 0.2.2 → 1.0.0-alpha.0

package/src/components/spacer/Spacer.vue

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

package/src/components/spinner/Spinner.vue

@@ -1,45 +0,0 @@
-<template>
-  <svg
-    :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',
-      },
-
-    ]"
-    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

@@ -1,41 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="inline-block relative"
-  >
-    <slot></slot>
-    <div
-      v-if="animate"
-      class="animate-ping opacity-75 absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10"
-      :class="[`bg-${color}-500`]"
-    >
-    </div>
-    <div
-      class="absolute -top-0.5 -right-0.5 rounded-full h-3 w-3 z-10"
-      :class="[`bg-${color}-500`]"
-    ></div>
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'XStatusDot',
-
-  props: {
-    animate: {
-      type: Boolean,
-      default: false,
-    },
-
-    color: {
-      type: String,
-      default: 'primary',
-    },
-
-    tag: {
-      type: String,
-      default: 'div',
-    },
-  },
-}
-</script>

package/src/components/table/Table.vue

@@ -1,157 +0,0 @@
-<template>
-  <table
-    class="w-full relative"
-    :class="[
-      {
-        'overflow-x-scroll sm:overflow-x-auto whitespace-wrap sm:whitespace-normal block sm:table': scrollable,
-        'relative': stickyHeader,
-        'table-fixed': fixed,
-      }
-    ]"
-  >
-    <table-head>
-      <table-header
-        v-for="(header, index) in headers"
-        :key="index"
-        :sticky-header="stickyHeader"
-        :text-align="header.align"
-        :sort="getSort(header.value, sort)"
-        :sortable="header.sortable"
-        @click="header.sortable ? sortHeader(header) : null"
-      >
-        {{ header.text }}
-      </table-header>
-    </table-head>
-    <table-body>
-      <table-row v-for="(item, index) in items" :key="index" clickable @click="$emit('click-row', item)">
-        <table-cell
-          v-for="(header, index2) in headers"
-          :key="index2"
-          :text-align="header.align"
-          :dense="dense"
-          :fixed="fixed"
-        >
-          <slot :name="`item-${header.value}`" :item="item">
-            {{ getPath(item, header.value) }}
-          </slot>
-        </table-cell>
-      </table-row>
-    </table-body>
-    <div
-      v-if="loading"
-      class="absolute inset-0 flex items-center justify-center z-40 bg-gray-300 rounded opacity-50"
-    >
-      <x-spinner size="lg"/>
-    </div>
-  </table>
-</template>
-
-<script>
-import TableHead from './TableHead.vue'
-import TableHeader from './TableHeader.vue'
-import TableBody from './TableBody.vue'
-import TableRow from './TableRow.vue'
-import TableCell from './TableCell.vue'
-import XSpinner from '../spinner/Spinner.vue'
-
-export default {
-  name: 'XTable',
-
-  components: {
-    TableHead,
-    TableHeader,
-    TableBody,
-    TableRow,
-    TableCell,
-    XSpinner,
-  },
-
-  props: {
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
-    headers: {
-      type: Array,
-      default: () => [],
-    },
-
-    items: {
-      type: Array,
-      default: () => [],
-    },
-
-    sort: {
-      type: Array,
-      default: () => [],
-    },
-
-    dense: {
-      type: Boolean,
-      default: false,
-    },
-
-    fixed: {
-      type: Boolean,
-      default: false,
-    },
-
-    scrollable: {
-      type: Boolean,
-      default: true,
-    },
-
-    stickyHeader: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  methods: {
-    getSort(headerValue, sort) {
-      for (let i = 0; i < sort.length; i++) {
-        const { 0: value, 1: order } = sort[i].split(',')
-
-        if (headerValue === value) return parseInt(order)
-      }
-
-      return null
-    },
-    sortHeader(header) {
-      // update sort array
-      const sort = this.sort.slice(0)
-      let exists = false
-
-      for (let i = 0; i < sort.length; i++) {
-        const { 0: value, 1: order } = sort[i].split(',')
-
-        if (value === header.value) {
-          exists = true
-
-          if (order === '-1') {
-            // update position to 1
-            sort.splice(i, 1, `${header.value},1`)
-            break
-          } else if (order === '1') {
-            // delete position
-            sort.splice(i, 1)
-            break
-          }
-        }
-      }
-
-      if (!exists) sort.push(`${header.value},-1`)
-
-      this.$emit('update:sort', sort)
-    },
-    getPath(obj, path, defValue) {
-      if (!path) return undefined
-      const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g)
-      const result = pathArray.reduce((prevObj, key) => prevObj && prevObj[key], obj)
-
-      return result === undefined ? defValue : result
-    },
-  },
-}
-</script>

package/src/components/table/TableBody.vue

@@ -1,11 +0,0 @@
-<template>
-  <tbody>
-    <slot></slot>
-  </tbody>
-</template>
-
-<script>
-export default {
-  name: 'XTableBody',
-}
-</script>

package/src/components/table/TableCell.vue

@@ -1,90 +0,0 @@
-<template>
-  <td
-    class="last:pr-0"
-    :class="[
-      {
-        // density
-        'py-1 pr-2': dense,
-        'py-2 pr-4': !dense,
-        // text-align
-        'text-left': textAlign === 'left',
-        'text-center': textAlign === 'center',
-        'text-right': textAlign === 'right',
-        'text-justify': textAlign === 'justify',
-        // vertical-align
-        'align-baseline': verticalAlign === 'baseline',
-        'align-bottom': verticalAlign === 'bottom',
-        'align-middle': verticalAlign === 'middle',
-        'align-text-bottom': verticalAlign === 'text-bottom',
-        'align-text-top': verticalAlign === 'text-top',
-        'align-top': verticalAlign === 'top',
-        // truncate
-        'truncate': truncate && fixed,
-      },
-    ]"
-  >
-    <slot></slot>
-  </td>
-</template>
-
-<script>
-const validator = {
-  textAlign: [
-    null,
-    'left',
-    'center',
-    'right',
-    'justify',
-  ],
-  verticalAlign: [
-    null,
-    'baseline',
-    'bottom',
-    'middle',
-    'text-bottom',
-    'text-top',
-    'top',
-  ],
-}
-
-export default {
-  name: 'XTableCell',
-
-  validator,
-
-  props: {
-    textAlign: {
-      default: null,
-      type: String,
-      validator: (value) => validator.textAlign.includes(value),
-    },
-
-    truncate: {
-      default: false,
-      type: Boolean,
-    },
-
-    dense: {
-      default: false,
-      type: Boolean,
-    },
-
-    fixed: {
-      default: false,
-      type: Boolean,
-    },
-
-    verticalAlign: {
-      default: null,
-      type: String,
-      validator: (value) => validator.verticalAlign.includes(value),
-    },
-  },
-
-  created() {
-    if (this.truncate && !this.fixed) {
-      console.warn('Table must have "fixed" property set to true when using TableCell "truncate" property')
-    }
-  },
-}
-</script>

package/src/components/table/TableHead.vue

@@ -1,13 +0,0 @@
-<template>
-  <thead class="align-bottom">
-    <tr class="text-sm text-gray-700 dark:text-gray-400">
-      <slot></slot>
-    </tr>
-  </thead>
-</template>
-
-<script>
-export default {
-  name: 'XTableHead',
-}
-</script>

package/src/components/table/TableHeader.vue

@@ -1,109 +0,0 @@
-<template>
-  <th
-    class="py-2 bg-gray-50 dark:bg-gray-800 font-medium tracking-wide uppercase text-xs pr-1 last:pr-0"
-    :class="[
-      {
-        //sort
-        'cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out': sortable,
-        //stickyHeader
-        'sticky top-0': stickyHeader,
-        // textAlign
-        'text-left': textAlign === 'left',
-        'text-center': textAlign === 'center',
-        'text-right': textAlign === 'right',
-        'text-justify': textAlign === 'justify',
-      },
-    ]"
-  >
-    <div
-      v-if="sortable"
-      class="flex items-center"
-    >
-      <slot></slot>
-
-      <svg
-        v-if="[1, -1].includes(sort)"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill="none"
-        role="presentation"
-        class="inline-block stroke-2 w-3 h-3 ml-0.5"
-      >
-        <template v-if="sort === -1">
-          <line
-            x1="12"
-            y1="5"
-            x2="12"
-            y2="19"
-          />
-          <polyline points="19 12 12 19 5 12" />
-        </template>
-
-        <template v-if="sort === 1">
-          <line
-            x1="12"
-            y1="19"
-            x2="12"
-            y2="5"
-          />
-          <polyline points="5 12 12 5 19 12" />
-        </template>
-      </svg>
-    </div>
-
-    <template v-else>
-      <slot></slot>
-    </template>
-  </th>
-</template>
-
-<script>
-const validator = {
-  sort: [
-    null,
-    1,
-    -1,
-  ],
-  textAlign: [
-    null,
-    'left',
-    'center',
-    'right',
-    'justify',
-  ],
-}
-
-export default {
-  name: 'XTableHeader',
-
-  validator,
-
-  props: {
-    sort: {
-      type: [Number, Boolean],
-      default: null,
-      validator: (value) => validator.sort.includes(value),
-    },
-
-    sortable: {
-      type: Boolean,
-      default: false,
-    },
-
-    textAlign: {
-      type: String,
-      default: 'left',
-      validator: (value) => validator.textAlign.includes(value),
-    },
-
-    stickyHeader: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>

package/src/components/table/TableRow.vue

@@ -1,51 +0,0 @@
-<template>
-  <tr
-    class="border-b border-gray-200 dark:border-gray-700"
-    :class="[
-      {
-        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': clickable,
-        // vertical-align
-        'align-baseline': verticalAlign === 'baseline',
-        'align-bottom': verticalAlign === 'bottom',
-        'align-middle': verticalAlign === 'middle',
-        'align-text-bottom': verticalAlign === 'text-bottom',
-        'align-text-top': verticalAlign === 'text-top',
-        'align-top': verticalAlign === 'top',
-      },
-    ]"
-  >
-    <slot></slot>
-  </tr>
-</template>
-
-<script>
-const validator = {
-  verticalAlign: [
-    'baseline',
-    'bottom',
-    'middle',
-    'text-bottom',
-    'text-top',
-    'top',
-  ],
-}
-
-export default {
-  name: 'XTableRow',
-
-  validator,
-
-  props: {
-    clickable: {
-      type: Boolean,
-      default: false,
-    },
-
-    verticalAlign: {
-      type: String,
-      default: 'top',
-      validator: (value) => validator.verticalAlign.includes(value),
-    },
-  },
-}
-</script>

package/src/components/tabs/Tab.vue

@@ -1,81 +0,0 @@
-<template>
-  <component
-    :is="to ? 'router-link' : tag"
-    :to="to"
-    class="pb-2 transition-colors duration-150 ease-in-out"
-    :class="[
-      {
-        [`border-b-2 border-${color}-500 text-${color}-500`]: selected,
-        'cursor-pointer': !disabled,
-        'cursor-not-allowed': disabled,
-        'cursor-not-allowed text-gray-500': disabled && !selected,
-      },
-    ]"
-    :aria-disabled="disabled ? 'true' : null"
-    :aria-selected="selected ? 'true' : 'false'"
-    @click="onClickTab"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-import { inject, reactive, computed, toRefs } from 'vue'
-
-export default {
-  name: 'XTab',
-
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    value: {
-      type: [String, Number],
-      default: null,
-    },
-
-    color: {
-      type: String,
-      default: 'primary',
-    },
-
-    tag: {
-      type: String,
-      default: 'li',
-    },
-
-    to: {
-      type: String,
-      default: undefined,
-    },
-  },
-
-  setup(props) {
-    const tabs = inject(
-      'tabs',
-      {
-        state: reactive({
-          active: null,
-        }),
-        activateTab: () => {},
-      },
-    )
-
-    const state = reactive({
-      selected: computed(() => tabs.state.active === props.value),
-    })
-
-    function onClickTab() {
-      tabs.activateTab(props.value)
-    }
-
-    return {
-      ...toRefs(state),
-      tabs,
-      onClickTab,
-    }
-  },
-}
-</script>

package/src/components/tabs/Tabs.vue

@@ -1,44 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="flex border-b border-gray-200 dark:border-gray-700 space-x-4"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-import { reactive, computed, provide } from 'vue'
-
-export default {
-  name: 'XTabs',
-
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: null,
-    },
-    tag: {
-      type: String,
-      default: 'ul',
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  setup(props, { emit }) {
-    const state = reactive({
-      active: computed(() => props.modelValue),
-    })
-
-    provide('tabs', {
-      state,
-      activateTab,
-    })
-
-    function activateTab(tab) {
-      emit('update:modelValue', tab)
-    }
-  },
-}
-</script>