@indielayer/ui 0.2.4 → 1.0.0-alpha.0

package/src/components/avatar/Avatar.vue

@@ -1,120 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="inline-flex items-center justify-center overflow-hidden"
-    :class="[
-      // color
-      { [`bg-${color}-500 text-${color}-50`]: !source && !outlined },
-      {
-        // border
-        'border border-gray-400 dark:border-gray-500': !source && outlined,
-
-        // size
-        'h-6 w-6 text-xs': size === 'xs',
-        'h-7 w-7 text-sm': size === 'sm',
-        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
-        'h-12 w-12 text-lg': size === 'lg',
-        'h-20 w-20 text-2xl': size === 'xl',
-        'h-36 w-36 text-2xl': size === '2xl',
-      },
-      squared ? 'rounded-md' : 'rounded-full'
-    ]"
-  >
-    <span
-      v-if="!source && name"
-      class="leading-none"
-    >{{ initials }}</span>
-
-    <img
-      v-if="source"
-      :alt="alt"
-      :src="src"
-      class="h-full w-full"
-    />
-  </component>
-</template>
-
-<script>
-const validator = {
-  variant: [
-    'rounded',
-    'squared',
-  ],
-}
-
-export default {
-  name: 'XAvatar',
-
-  validator,
-
-  props: {
-    alt: {
-      type: String,
-      default: null,
-    },
-
-    color: {
-      type: String,
-      default: 'primary',
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-
-    src: {
-      type: String,
-      default: null,
-    },
-
-    tag: {
-      type: String,
-      default: 'span',
-    },
-
-    squared: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      source: null,
-    }
-  },
-
-  computed: {
-    initials() {
-      if (this.name) {
-        const initials = this.name.match(/\b\w/g) || []
-
-        return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
-      }
-
-      return ''
-    },
-  },
-
-  mounted() {
-    if (this.src) {
-      const img = new Image()
-
-      img.onload = () => { this.source = this.src }
-      img.onerror = () => { }
-      img.src = this.src
-    }
-  },
-}
-</script>

package/src/components/button/Button.vue

@@ -1,156 +0,0 @@
-<template>
-  <component
-    :is="to ? 'router-link' : tag"
-    ref="focusRef"
-    :to="to"
-    class="relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium"
-    :class="[
-      {
-        'shadow': !flat && !glow,
-        [`shadow-lg shadow-${color}-500/50`]: !flat && glow,
-      },
-      disabled ?
-        // disabled
-        'border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 cursor-not-allowed'
-        : {
-          // not disabled
-          [`border border-${color}-500 text-${color}-500`]: outlined,
-
-          // colors
-          [`border border-transparent text-${color}-50 bg-${color}-500`]: !outlined,
-
-          // colors hovers | actives
-          'hover:bg-dark-image active:bg-darker-image active:shadow-none': !loading && !outlined,
-          [`hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:hover:active:bg-gray-600`]: !loading && outlined,
-        },
-      $slots.default ? {
-        // size
-        'py-1': size === 'auto',
-        'px-2 py-1 text-xs': size === 'xs',
-        'px-2 py-1 text-sm': size === 'sm',
-        'px-4 py-2': !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
-        'px-6 py-3 text-lg': size === 'lg',
-        'px-10 py-6 text-xl': size === 'xl',
-      } : 'px-3 py-2',
-      {
-        // icon
-        'inline-flex items-center': icon,
-
-        // group
-        'rounded-button': group === false,
-        'rounded-l-button': group === 'first',
-        'rounded-r-button': group === 'last',
-
-        '!rounded-full': rounded,
-
-        // loading
-        'cursor-default': loading,
-
-        // content
-        'flex items-center justify-center': loading,
-        'flex-row-reverse': icon && iconRight
-      },
-
-    ]"
-
-    :aria-busy="loading ? 'true' : null"
-    :aria-disabled="tag !== 'button' && disabled ? 'true' : null"
-    :disabled="disabled || loading"
-    :type="tag === 'button' ? type : null"
-  >
-    <x-spinner v-if="loading" :size="size" class="absolute" />
-    <span
-      v-if="icon"
-      class="flex"
-      :class="[{
-        'mr-2': $slots.default && !iconRight,
-        'ml-2': $slots.default && iconRight,
-        'invisible': loading
-      }]"
-    >
-      <x-icon :size="size" :icon="icon" />
-    </span>
-    <span :class="{ 'invisible': loading }">
-      <slot></slot>
-    </span>
-  </component>
-</template>
-
-<script>
-import { withProps, withValidator, useInteractive } from '../../composables/interactive'
-import XSpinner from '../spinner/Spinner.vue'
-import XIcon from '../icon/Icon.vue'
-
-const validator = {
-  group: [false, true, '', 'first', 'last'],
-}
-
-export default {
-  name: 'XButton',
-  components: {
-    XSpinner,
-    XIcon,
-  },
-
-  validator: {
-    ...withValidator(),
-    ...validator,
-  },
-
-  props: {
-    ...withProps(),
-
-    group: {
-      default: false,
-      type: [String, Boolean],
-      validator: (value) => validator.group.includes(value),
-    },
-
-    icon: {
-      type: String,
-      default: null,
-    },
-
-    iconRight: {
-      type: Boolean,
-      default: false,
-    },
-
-    to: {
-      type: String,
-      default: undefined,
-    },
-
-    tag: {
-      type: String,
-      default: 'button',
-    },
-
-    type: {
-      type: String,
-      default: 'button',
-    },
-
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-
-    rounded: {
-      type: Boolean,
-      default: false,
-    },
-
-    glow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  setup() {
-    return {
-      ...useInteractive(),
-    }
-  },
-}
-</script>

package/src/components/card/Card.vue

@@ -1,30 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="rounded bg-white dark:bg-gray-800"
-    :class="[
-      {
-        'shadow': !flat,
-      },
-    ]"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'XCard',
-  props: {
-    flat: {
-      type: Boolean,
-      default: false,
-    },
-
-    tag: {
-      type: String,
-      default: 'div',
-    },
-  },
-}
-</script>

package/src/components/checkbox/Checkbox.vue

@@ -1,128 +0,0 @@
-<template>
-  <label class="inline-block mb-1 relative cursor-pointer pb-2">
-    <div
-      ref="focusRef"
-      class="flex items-center"
-      :class="{ 'cursor-not-allowed': disabled }"
-      :tabindex="0"
-      @keypress.prevent.stop.enter.space="toggle"
-    >
-      <input
-        v-model="checked"
-        :aria-checked="checked ? 'true' : 'false'"
-        :aria-disabled="disabled ? 'true' : null"
-        type="checkbox"
-        class="invisible absolute"
-        :disabled="disabled || loading"
-        :name="name"
-        :required="required"
-        :value="modelValue"
-      />
-      <div
-        class="rounded flex justify-center items-center flex-shrink-0"
-        :class="[
-          {
-            'shadow': !flat && !loading,
-            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && modelValue,
-
-            'h-4 w-4': size === 'sm' || size === 'xs',
-            'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
-            'h-6 w-6': size === 'xl',
-          },
-          disabled ? {
-            'bg-gray-500 border-gray-600 dark:border-gray-400': modelValue,
-            'bg-gray-200 border-gray-300 dark:border-gray-700': !modelValue,
-          } :
-          {
-            [`bg-${color}-500 border-${color}-500`]: modelValue && !loading,
-            'border bg-white dark:bg-gray-900 border-gray-300 hover:border-gray-900 dark:border-gray-700': !modelValue && !loading,
-          }
-        ]"
-      >
-        <x-spinner v-if="loading" :size="size" class="absolute" />
-        <svg
-          v-else
-          class="fill-current text-gray-100"
-          :class="{
-            'opacity-0': !modelValue,
-            'h-2 w-2': size === 'sm' || size === 'xs',
-            'h-3 w-3': !['xs', 'sm', 'xl'].includes(size),
-            'h-4 w-4': size === 'xl',
-          }"
-          viewBox="0 0 20 20"
-        >
-          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
-        </svg>
-      </div>
-      <div
-        class="inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"
-        :class="{
-          'text-xs': size === 'xs',
-          'text-sm': size === 'sm',
-          'text-lg': size === 'lg',
-          'text-xl': size === 'xl',
-        }"
-      >
-        <span v-if="label" v-text="label"></span>
-        <slot v-else></slot>
-      </div>
-    </div>
-    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
-  </label>
-</template>
-
-<script>
-import { withProps, withValidator, withEmits, useInputtable } from '../../composables/inputtable'
-import XSpinner from '../spinner/Spinner.vue'
-
-export default {
-  name: 'XCheckbox',
-  components: {
-    XSpinner,
-  },
-
-  validator: {
-    ...withValidator(),
-  },
-
-  props: {
-    ...withProps(),
-
-    label: {
-      type: String,
-      default: null,
-    },
-
-    glow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: withEmits(false),
-
-  setup(props, { attrs, emit }) {
-    return {
-      ...useInputtable(props, { attrs, emit, useListeners: false }),
-    }
-  },
-
-  computed: {
-    checked: {
-      get() {
-        return this.modelValue
-      },
-
-      set(val) {
-        this.$emit('update:modelValue', val)
-      },
-    },
-  },
-
-  methods: {
-    toggle() {
-      this.$emit('update:modelValue', !this.modelValue)
-    },
-  },
-}
-</script>

package/src/components/collapse/Collapse.vue

@@ -1,121 +0,0 @@
-<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',
-      observer: null,
-    }
-  },
-
-  beforeMount() {
-    window.addEventListener('resize', this.onResize)
-  },
-
-  beforeUnmount() {
-    this.observer.disconnect()
-    window.removeEventListener('resize', this.onResize)
-  },
-
-  mounted() {
-    this.observer = new ResizeObserver(this.onResize)
-    this.observer.observe(this.$refs.content)
-  },
-
-  methods: {
-    toggleExpand() {
-      if (this.disabled) return
-
-      this.collapsed = !this.collapsed
-      this.$emit('toggle', this.collapsed)
-      this.onResize()
-    },
-
-    onResize() {
-      if (this.collapsed) {
-        this.maxHeight = 0
-      } else {
-        this.maxHeight = this.$refs.content.offsetHeight
-      }
-    },
-  },
-}
-</script>