@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/colors.vue

@@ -1,396 +0,0 @@
-<template>
-  <div
-    :class="[
-      'bg-primary-50',
-      'bg-primary-200',
-      'bg-primary-500',
-      'bg-primary-600',
-      'bg-primary-800',
-      'border-primary-200',
-      'border-primary-500',
-      'border-primary-600',
-      'border-primary-700',
-      'border-primary-900',
-      'text-primary-50',
-      'text-primary-500',
-      'text-primary-600',
-      'text-primary-900',
-      'shadow-primary-500/50',
-      'bg-secondary-50',
-      'bg-secondary-200',
-      'bg-secondary-500',
-      'bg-secondary-600',
-      'bg-secondary-800',
-      'border-secondary-200',
-      'border-secondary-500',
-      'border-secondary-600',
-      'border-secondary-700',
-      'border-secondary-900',
-      'text-secondary-50',
-      'text-secondary-500',
-      'text-secondary-600',
-      'text-secondary-900',
-      'shadow-secondary-500/50',
-      'bg-error-50',
-      'bg-error-200',
-      'bg-error-500',
-      'bg-error-600',
-      'bg-error-800',
-      'border-error-200',
-      'border-error-500',
-      'border-error-600',
-      'border-error-700',
-      'border-error-900',
-      'text-error-50',
-      'text-error-500',
-      'text-error-600',
-      'text-error-900',
-      'shadow-error-500/50',
-      'bg-warning-50',
-      'bg-warning-200',
-      'bg-warning-500',
-      'bg-warning-600',
-      'bg-warning-800',
-      'border-warning-200',
-      'border-warning-500',
-      'border-warning-600',
-      'border-warning-700',
-      'border-warning-900',
-      'text-warning-50',
-      'text-warning-500',
-      'text-warning-600',
-      'text-warning-900',
-      'shadow-warning-500/50',
-      'bg-success-50',
-      'bg-success-200',
-      'bg-success-500',
-      'bg-success-600',
-      'bg-success-800',
-      'border-success-200',
-      'border-success-500',
-      'border-success-600',
-      'border-success-700',
-      'border-success-900',
-      'text-success-50',
-      'text-success-500',
-      'text-success-600',
-      'text-success-900',
-      'shadow-success-500/50',
-      'bg-rose-50',
-      'bg-rose-200',
-      'bg-rose-500',
-      'bg-rose-600',
-      'bg-rose-800',
-      'border-rose-200',
-      'border-rose-500',
-      'border-rose-600',
-      'border-rose-700',
-      'border-rose-900',
-      'text-rose-50',
-      'text-rose-500',
-      'text-rose-600',
-      'text-rose-900',
-      'shadow-rose-500/50',
-      'bg-zinc-50',
-      'bg-zinc-200',
-      'bg-zinc-500',
-      'bg-zinc-600',
-      'bg-zinc-800',
-      'border-zinc-200',
-      'border-zinc-500',
-      'border-zinc-600',
-      'border-zinc-700',
-      'border-zinc-900',
-      'text-zinc-50',
-      'text-zinc-500',
-      'text-zinc-600',
-      'text-zinc-900',
-      'shadow-zinc-500/50',
-      'bg-neutral-50',
-      'bg-neutral-200',
-      'bg-neutral-500',
-      'bg-neutral-600',
-      'bg-neutral-800',
-      'border-neutral-200',
-      'border-neutral-500',
-      'border-neutral-600',
-      'border-neutral-700',
-      'border-neutral-900',
-      'text-neutral-50',
-      'text-neutral-500',
-      'text-neutral-600',
-      'text-neutral-900',
-      'shadow-neutral-500/50',
-      'bg-stone-50',
-      'bg-stone-200',
-      'bg-stone-500',
-      'bg-stone-600',
-      'bg-stone-800',
-      'border-stone-200',
-      'border-stone-500',
-      'border-stone-600',
-      'border-stone-700',
-      'border-stone-900',
-      'text-stone-50',
-      'text-stone-500',
-      'text-stone-600',
-      'text-stone-900',
-      'shadow-stone-500/50',
-      'bg-pink-50',
-      'bg-pink-200',
-      'bg-pink-500',
-      'bg-pink-600',
-      'bg-pink-800',
-      'border-pink-200',
-      'border-pink-500',
-      'border-pink-600',
-      'border-pink-700',
-      'border-pink-900',
-      'text-pink-50',
-      'text-pink-500',
-      'text-pink-600',
-      'text-pink-900',
-      'shadow-pink-500/50',
-      'bg-fuchsia-50',
-      'bg-fuchsia-200',
-      'bg-fuchsia-500',
-      'bg-fuchsia-600',
-      'bg-fuchsia-800',
-      'border-fuchsia-200',
-      'border-fuchsia-500',
-      'border-fuchsia-600',
-      'border-fuchsia-700',
-      'border-fuchsia-900',
-      'text-fuchsia-50',
-      'text-fuchsia-500',
-      'text-fuchsia-600',
-      'text-fuchsia-900',
-      'shadow-fuchsia-500/50',
-      'bg-purple-50',
-      'bg-purple-200',
-      'bg-purple-500',
-      'bg-purple-600',
-      'bg-purple-800',
-      'border-purple-200',
-      'border-purple-500',
-      'border-purple-600',
-      'border-purple-700',
-      'border-purple-900',
-      'text-purple-50',
-      'text-purple-500',
-      'text-purple-600',
-      'text-purple-900',
-      'shadow-purple-500/50',
-      'bg-violet-50',
-      'bg-violet-200',
-      'bg-violet-500',
-      'bg-violet-600',
-      'bg-violet-800',
-      'border-violet-200',
-      'border-violet-500',
-      'border-violet-600',
-      'border-violet-700',
-      'border-violet-900',
-      'text-violet-50',
-      'text-violet-500',
-      'text-violet-600',
-      'text-violet-900',
-      'shadow-violet-500/50',
-      'bg-indigo-50',
-      'bg-indigo-200',
-      'bg-indigo-500',
-      'bg-indigo-600',
-      'bg-indigo-800',
-      'border-indigo-200',
-      'border-indigo-500',
-      'border-indigo-600',
-      'border-indigo-700',
-      'border-indigo-900',
-      'text-indigo-50',
-      'text-indigo-500',
-      'text-indigo-600',
-      'text-indigo-900',
-      'shadow-indigo-500/50',
-      'bg-blue-50',
-      'bg-blue-200',
-      'bg-blue-500',
-      'bg-blue-600',
-      'bg-blue-800',
-      'border-blue-200',
-      'border-blue-500',
-      'border-blue-600',
-      'border-blue-700',
-      'border-blue-900',
-      'text-blue-50',
-      'text-blue-500',
-      'text-blue-600',
-      'text-blue-900',
-      'shadow-blue-500/50',
-      'bg-sky-50',
-      'bg-sky-200',
-      'bg-sky-500',
-      'bg-sky-600',
-      'bg-sky-800',
-      'border-sky-200',
-      'border-sky-500',
-      'border-sky-600',
-      'border-sky-700',
-      'border-sky-900',
-      'text-sky-50',
-      'text-sky-500',
-      'text-sky-600',
-      'text-sky-900',
-      'shadow-sky-500/50',
-      'bg-cyan-50',
-      'bg-cyan-200',
-      'bg-cyan-500',
-      'bg-cyan-600',
-      'bg-cyan-800',
-      'border-cyan-200',
-      'border-cyan-500',
-      'border-cyan-600',
-      'border-cyan-700',
-      'border-cyan-900',
-      'text-cyan-50',
-      'text-cyan-500',
-      'text-cyan-600',
-      'text-cyan-900',
-      'shadow-cyan-500/50',
-      'bg-teal-50',
-      'bg-teal-200',
-      'bg-teal-500',
-      'bg-teal-600',
-      'bg-teal-800',
-      'border-teal-200',
-      'border-teal-500',
-      'border-teal-600',
-      'border-teal-700',
-      'border-teal-900',
-      'text-teal-50',
-      'text-teal-500',
-      'text-teal-600',
-      'text-teal-900',
-      'shadow-teal-500/50',
-      'bg-emerald-50',
-      'bg-emerald-200',
-      'bg-emerald-500',
-      'bg-emerald-600',
-      'bg-emerald-800',
-      'border-emerald-200',
-      'border-emerald-500',
-      'border-emerald-600',
-      'border-emerald-700',
-      'border-emerald-900',
-      'text-emerald-50',
-      'text-emerald-500',
-      'text-emerald-600',
-      'text-emerald-900',
-      'shadow-emerald-500/50',
-      'bg-green-50',
-      'bg-green-200',
-      'bg-green-500',
-      'bg-green-600',
-      'bg-green-800',
-      'border-green-200',
-      'border-green-500',
-      'border-green-600',
-      'border-green-700',
-      'border-green-900',
-      'text-green-50',
-      'text-green-500',
-      'text-green-600',
-      'text-green-900',
-      'shadow-green-500/50',
-      'bg-lime-50',
-      'bg-lime-200',
-      'bg-lime-500',
-      'bg-lime-600',
-      'bg-lime-800',
-      'border-lime-200',
-      'border-lime-500',
-      'border-lime-600',
-      'border-lime-700',
-      'border-lime-900',
-      'text-lime-50',
-      'text-lime-500',
-      'text-lime-600',
-      'text-lime-900',
-      'shadow-lime-500/50',
-      'bg-yellow-50',
-      'bg-yellow-200',
-      'bg-yellow-500',
-      'bg-yellow-600',
-      'bg-yellow-800',
-      'border-yellow-200',
-      'border-yellow-500',
-      'border-yellow-600',
-      'border-yellow-700',
-      'border-yellow-900',
-      'text-yellow-50',
-      'text-yellow-500',
-      'text-yellow-600',
-      'text-yellow-900',
-      'shadow-yellow-500/50',
-      'bg-amber-50',
-      'bg-amber-200',
-      'bg-amber-500',
-      'bg-amber-600',
-      'bg-amber-800',
-      'border-amber-200',
-      'border-amber-500',
-      'border-amber-600',
-      'border-amber-700',
-      'border-amber-900',
-      'text-amber-50',
-      'text-amber-500',
-      'text-amber-600',
-      'text-amber-900',
-      'shadow-amber-500/50',
-      'bg-orange-50',
-      'bg-orange-200',
-      'bg-orange-500',
-      'bg-orange-600',
-      'bg-orange-800',
-      'border-orange-200',
-      'border-orange-500',
-      'border-orange-600',
-      'border-orange-700',
-      'border-orange-900',
-      'text-orange-50',
-      'text-orange-500',
-      'text-orange-600',
-      'text-orange-900',
-      'shadow-orange-500/50',
-      'bg-red-50',
-      'bg-red-200',
-      'bg-red-500',
-      'bg-red-600',
-      'bg-red-800',
-      'border-red-200',
-      'border-red-500',
-      'border-red-600',
-      'border-red-700',
-      'border-red-900',
-      'text-red-50',
-      'text-red-500',
-      'text-red-600',
-      'text-red-900',
-      'shadow-red-500/50',
-      'bg-gray-50',
-      'bg-gray-200',
-      'bg-gray-500',
-      'bg-gray-600',
-      'bg-gray-800',
-      'border-gray-200',
-      'border-gray-500',
-      'border-gray-600',
-      'border-gray-700',
-      'border-gray-900',
-      'text-gray-50',
-      'text-gray-500',
-      'text-gray-600',
-      'text-gray-900',
-      'shadow-gray-500/50',
-    ]"
-  ></div>
-</template>

package/src/components/index.js

@@ -1,40 +0,0 @@
-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 Image } from './image/Image.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'
-export { default as Colors } from './colors.vue'

package/src/components/note/Note.vue

@@ -1,74 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="flex rounded-md p-2"
-    :class="filled ? [`bg-${color}-500 text-${color}-50`] : [`border text-${color}-500 border-${color}-500`]"
-  >
-    <svg
-      v-if="!$slots.icon"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-linejoin="round"
-      stroke-linecap="round"
-      fill="none"
-      role="presentation"
-      class="flex-none stroke-2 w-4 h-4 mt-1 mr-2"
-    >
-      <template v-if="color === 'primary'">
-        <circle cx="12" cy="12" r="10"/>
-        <line x1="12" y1="8" x2="12" y2="12"/>
-        <line x1="12" y1="16" x2="12" y2="16"/>
-      </template>
-
-      <template v-if="color === 'success'">
-        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" />
-        <path d="M16 10L10.5 15L8 12.7273" />
-      </template>
-
-      <template v-if="color === 'error'">
-        <path d="M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86L7.86 2Z" />
-        <path d="M9 9L15 15" />
-        <path d="M15 9L9 15" />
-      </template>
-      <template v-if="color === 'warning'">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-        <path d="M12 9v2m0 4v.01"/>
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"/>
-      </template>
-    </svg>
-
-    <div
-      v-if="$slots.icon"
-      class="flex-none pr-2"
-    >
-      <slot name="icon"></slot>
-    </div>
-
-    <slot></slot>
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'XNote',
-
-  props: {
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-
-    tag: {
-      type: String,
-      default: 'div',
-    },
-
-    color: {
-      type: String,
-      default: 'primary',
-    },
-  },
-}
-</script>

package/src/components/popover/PopoverItem.vue

@@ -1,65 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="px-2 py-1 block rounded transition-colors duration-100 ease-in-out whitespace-nowrap"
-    :class="[
-      {
-        'flex items-center': $slots.prefix || $slots.suffix,
-        'hover:bg-gray-100 dark:hover:bg-gray-800': variant === 'base' && !disabled,
-        'hover:text-error-500 hover:bg-error-50': variant === 'error' && !disabled,
-        'opacity-70': disabled,
-        'cursor-pointer': !disabled,
-      },
-
-    ]"
-  >
-    <span
-      v-if="$slots.prefix"
-      class="inline-flex items-center mr-2"
-    >
-      <slot name="prefix"></slot>
-    </span>
-    <span :class="{ 'flex-1': $slots.prefix || $slots.suffix }">
-      <slot></slot>
-    </span>
-    <span
-      v-if="$slots.suffix"
-      class="inline-flex items-center ml-1"
-    >
-      <slot name="suffix"></slot>
-    </span>
-  </component>
-</template>
-
-<script>
-const validator = {
-  variant: [
-    'base',
-    'error',
-  ],
-}
-
-export default {
-  name: 'XPopoverItem',
-
-  validator,
-
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
-
-    variant: {
-      default: 'base',
-      type: String,
-      validator: (value) => validator.variant.includes(value),
-    },
-
-    tag: {
-      default: 'div',
-      type: String,
-    },
-  },
-}
-</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/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>