@indielayer/ui 0.2.4 → 1.0.0-alpha.0

package/src/components/tag/Tag.vue

@@ -1,93 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="inline-block leading-none"
-    :class="
-      [
-        [`bg-${color}-200 text-${color}-900 border-${color}-900`],
-        {
-          // variant
-          '!bg-transparent border': outlined,
-
-          // 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',
-
-          // radius
-          'rounded-full': radius === 'full',
-          'rounded-lg': radius === 'lg',
-          'rounded-md': radius === 'md',
-          'rounded-sm': radius === 'sm',
-          'rounded': radius === 'rounded',
-        },
-      ]"
-  >
-    <span
-      v-if="removable"
-      class="flex items-center"
-    >
-      <slot></slot>
-      <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-4 h-4 ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150 ease-in-out flex-shrink-0"
-        @click="$emit('remove')"
-      >
-        <line x1="18" y1="6" x2="6" y2="18" />
-        <line x1="6" y1="6" x2="18" y2="18" />
-      </svg>
-    </span>
-
-    <template v-else>
-      <slot></slot>
-    </template>
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'XTag',
-
-  props: {
-    color: {
-      type: String,
-      default: 'gray',
-    },
-
-    radius: {
-      type: String,
-      default: 'full',
-    },
-
-    removable: {
-      type: Boolean,
-      default: false,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
-    tag: {
-      type: String,
-      default: 'span',
-    },
-
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>

package/src/components/textarea/Textarea.vue

@@ -1,175 +0,0 @@
-<template>
-  <label class="inline-block mb-1 relative">
-    <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>
-
-    <textarea
-      ref="focusRef"
-      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 resize-none overflow-hidden"
-      :class="[
-        disabled ? 'bg-gray-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
-        {
-          // 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',
-        },
-        flat ? '!p-0 !bg-transparent' : 'border shadow',
-        {
-          // 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"
-      :value="modelValue"
-      v-on="inputListeners"
-      @keydown="onKeyDown"
-      @input="onInput"
-    ></textarea>
-
-    <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'
-
-export default {
-  name: 'XTextarea',
-
-  validator: withValidator(),
-
-  props: {
-    ...withProps(),
-
-    label: {
-      type: String,
-      default: '',
-    },
-
-    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,
-    },
-
-    placeholder: {
-      type: String,
-      default: null,
-    },
-
-    adjustToText: {
-      type: Boolean,
-      default: true,
-    },
-
-    preventEnter: {
-      type: Boolean,
-      default: false,
-    },
-
-    inputClass: {
-      type: String,
-      default: '',
-    },
-  },
-
-  emits: withEmits(),
-
-  setup(props, { attrs, emit }) {
-    return {
-      ...useInputtable(props, { attrs, emit }),
-    }
-  },
-
-  data() {
-    return {
-      observer: null,
-    }
-  },
-
-  watch: {
-    modelValue() {
-      setTimeout(this.resize)
-    },
-    size() {
-      setTimeout(this.resize)
-    },
-  },
-
-  mounted() {
-    this.observer = new ResizeObserver(this.resize)
-    this.observer.observe(this.$refs.focusRef)
-
-    window.addEventListener('resize', this.resize)
-  },
-
-  beforeUnmount() {
-    this.observer.disconnect()
-    window.removeEventListener('resize', this.resize)
-  },
-
-  methods: {
-    onInput() {
-      this.resize()
-    },
-    onKeyDown(e) {
-      if (this.preventEnter && e.keyCode === 13) {
-        e.preventDefault()
-        e.stopPropagation()
-
-        return
-      }
-    },
-    resize() {
-      if (this.adjustToText) {
-        const { focusRef } = this.$refs
-
-        focusRef.style.height = '1px'
-        focusRef.style.height = (2 + focusRef.scrollHeight) + 'px'
-      }
-    },
-  },
-}
-</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/components/toggle/Toggle.vue

@@ -1,128 +0,0 @@
-<template>
-  <label
-    class="inline-block mb-1 relative pb-2"
-    :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
-  >
-    <div class="flex items-center">
-      <div
-        class="rounded-full transition-colors duration-300"
-        :class="[
-          {
-            // shadow
-            'border shadow': !flat,
-            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && modelValue,
-
-            'w-8': size === 'sm' || size === 'xs',
-            'w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
-            'w-12': size === 'lg',
-            'w-14': size === 'xl',
-            'bg-gray-300 dark:bg-gray-600': disabled && !checked,
-            'bg-gray-400 dark:bg-gray-400': disabled && checked,
-            'bg-gray-200 dark:bg-gray-600': !disabled && !checked,
-            [`bg-${color}-200  border-${color}-200`]: !disabled && checked,
-          }
-        ]"
-      >
-        <input
-          :id="id"
-          v-model="checked"
-          :aria-checked="checked ? 'true' : 'false'"
-          :aria-disabled="disabled ? 'true' : null"
-          type="checkbox"
-          class="hidden"
-          :disabled="disabled || loading"
-          :name="name"
-          :required="required"
-          :value="modelValue"
-        />
-
-        <x-spinner v-if="loading" :size="size" :class="{'translate-x-full': checked}" />
-        <div
-          v-else
-          class="rounded-full shadow transform transition duration-300 flex-shrink-0"
-          :class="[
-            {
-              'h-4 w-4': size === 'sm' || size === 'xs',
-              'h-5 w-5': !['xs', 'sm', 'lg', 'xl'].includes(size),
-              'h-6 w-6': size === 'lg',
-              'h-7 w-7': size === 'xl',
-              'translate-x-full': checked,
-              'bg-gray-200 dark:bg-gray-200': disabled,
-              'bg-white': !disabled && !checked,
-              [`bg-${color}-500`]: !disabled && checked,
-            },
-          ]"
-        ></div>
-      </div>
-      <span
-        v-if="label"
-        class="pl-2 font-medium text-gray-800 dark:text-gray-200"
-        :class="{
-          'text-xs': size === 'xs',
-          'text-sm': size === 'sm',
-          'text-lg': size === 'lg',
-          'text-xl': size === 'xl',
-        }"
-        v-text="label"
-      >
-      </span>
-    </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: 'XToggle',
-
-  components: {
-    XSpinner,
-  },
-
-  validator: {
-    ...withValidator(),
-  },
-
-  props: {
-    ...withProps(),
-
-    id: {
-      type: String,
-      default: null,
-    },
-
-    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)
-      },
-    },
-  },
-}
-</script>

package/src/components/tooltip/Tooltip.vue

@@ -1,22 +0,0 @@
-<template>
-  <x-popover hover class="dark" v-bind="$attrs">
-    <slot></slot>
-    <template #content>
-      <x-popover-container class="p-2 text-gray-300 text-sm">
-        <slot name="tooltip"></slot>
-      </x-popover-container>
-    </template>
-  </x-popover>
-</template>
-
-<script>
-import XPopover from '../popover/Popover.vue'
-import XPopoverContainer from '../popover/PopoverContainer.vue'
-
-export default {
-  components: {
-    XPopover,
-    XPopoverContainer,
-  },
-}
-</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