@indielayer/ui 0.2.3 → 1.0.0-alpha.2

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>

package/src/components/toast/Toast.vue

@@ -1,139 +0,0 @@
-<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/composables/common.js

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

package/src/composables/interactive.js

@@ -1,36 +0,0 @@
-import { ref } from 'vue'
-import {
-  withValidator as withCommonValidator,
-  withProps as withCommonProps,
-} from './common'
-
-const validator = {
-  ...withCommonValidator(),
-}
-
-export const withProps = () => ({
-  ...withCommonProps(),
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-export const withValidator = () => validator
-
-export const useInteractive = () => {
-  const focusRef = ref(null)
-
-  const focus = () => {
-    if (focusRef.value) focusRef.value.focus()
-  }
-
-  return {
-    focusRef,
-    focus,
-  }
-}

package/src/index.js

@@ -1,16 +0,0 @@
-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/nuxt.js

@@ -1,13 +0,0 @@
-import { join } from 'pathe'
-import { defineNuxtModule } from '@nuxt/kit'
-
-export default defineNuxtModule((nuxt) => ({
-  async setup(options) {
-    nuxt.hook('components:dirs', (dirs) => {
-      dirs.push({
-        path: join(__dirname, 'components'),
-        prefix: options?.prefix ? options?.prefix : 'X',
-      })
-    })
-  },
-}))

package/src/tailwind.preset.js

@@ -1,24 +0,0 @@
-const { borderRadius } = require('tailwindcss/defaultTheme')
-const colors = require('tailwindcss/colors')
-
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        primary: colors.blue,
-        secondary: colors.slate,
-        success: colors.green,
-        warning: colors.yellow,
-        error: colors.red,
-      },
-      borderRadius: {
-        button: borderRadius.md,
-        form: borderRadius.md,
-      },
-      backgroundImage: {
-        'dark-image': 'linear-gradient(rgba(0, 0, 0, 0.15) 0 0)',
-        'darker-image': 'linear-gradient(rgba(0, 0, 0, 0.30) 0 0)',
-      },
-    },
-  },
-}