@indielayer/ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/src/components/table/TableRow.vue

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+const validators = {
+  verticalAlign: ['baseline','bottom','middle','text-bottom','text-top','top'],
+}
+
+export default defineComponent({
+  name: 'XTableRow',
+
+  validators,
+
+  props: {
+    pointer: Boolean,
+    striped: Boolean,
+    verticalAlign: {
+      type: String as PropType<'baseline' | 'bottom' | 'middle' | 'text-bottom' | 'text-top' | 'top'>,
+      default: 'top',
+      validator: (value: string) => validators.verticalAlign.includes(value),
+    },
+  },
+})
+</script>
+
+<template>
+  <tr
+    :class="[
+      striped ? 'odd:bg-gray-50 dark:odd:bg-gray-800' : 'border-b border-gray-200 dark:border-gray-700',
+      {
+        'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer': pointer,
+        // 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>

package/src/components/tag/Tag.vue

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useColors } from '../../composables/colors'
+import { useCommon } from '../../composables/common'
+
+export default defineComponent({
+  name: 'XTag',
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('gray'),
+    tag: {
+      type: String,
+      default: 'span',
+    },
+    rounded: Boolean,
+    removable: Boolean,
+    outlined: Boolean,
+  },
+
+  emits: ['remove'],
+
+  setup(props) {
+    const css = useCSS()
+    const colors = useColors()
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+
+      return css.variables({
+        bg: color[100],
+        text: color[800],
+        border: color[800],
+        dark: {
+          text: props.outlined ? color[200] : color[800],
+        },
+      })
+    })
+
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs') return 'px-2 py-1 text-xs'
+      else if (props.size === 'sm') return 'px-2 py-1 text-sm'
+      else if (props.size === 'lg') return 'px-4 py-3 text-lg'
+      else if (props.size === 'xl') return 'px-6 py-6 text-xl'
+
+      return 'px-3 py-2'
+    })
+
+    return {
+      styles,
+      sizeClasses,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="inline-flex items-center leading-none whitespace-nowrap
+      text-[color:var(--x-text)]
+      dark:text-[color:var(--x-dark-text)]
+      border-[color:var(--x-border)
+      "
+    :style="styles"
+    :class="
+      [
+        sizeClasses,
+        outlined ? 'border' : 'bg-[color:var(--x-bg)]',
+        rounded ? 'rounded-full' : '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="(e) => $emit('remove', e)"
+      >
+        <path d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </span>
+
+    <template v-else>
+      <slot></slot>
+    </template>
+  </component>
+</template>

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,156 @@
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInputtable } from '../../composables/inputtable'
+import { useInteractive } from '../../composables/interactive'
+
+export default defineComponent({
+  name: 'XTextarea',
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    helper: String,
+    label: String,
+    dir: {
+      type: String,
+      default: 'ltr',
+    },
+    max: Number,
+    maxlength: Number,
+    min: Number,
+    minlength: Number,
+    placeholder: String,
+    adjustToText: {
+      type: Boolean,
+      default: true,
+    },
+    preventEnter: Boolean,
+    inputClass: String,
+  },
+
+  emits: useInputtable.emits(),
+
+  setup(props, { emit }) {
+    const elRef = ref<HTMLTextAreaElement>()
+    let observer: ResizeObserver | null = null
+
+    onMounted(() => {
+      if (elRef.value) {
+        observer = new ResizeObserver(resize)
+        observer.observe(elRef.value)
+        window.addEventListener('resize', resize)
+      }
+    })
+
+    onBeforeUnmount(() => {
+      if (observer) observer.disconnect()
+      window.removeEventListener('resize', resize)
+    })
+
+    watch([() => props.modelValue, () => props.size], () => {
+      setTimeout(resize)
+    })
+
+    const css = useCSS('textarea')
+    const colors = useColors()
+    const color = colors.getPalette('primary')
+    const style = css.get('border', color[500])
+
+    function onInput() {
+      resize()
+    }
+
+    function onEnter(e: KeyboardEvent) {
+      if (props.preventEnter) e.preventDefault()
+      e.stopPropagation()
+
+      return
+    }
+
+    function resize() {
+      if (props.adjustToText && elRef.value) {
+        elRef.value.style.height = '1px'
+        elRef.value.style.height = (2 + elRef.value.scrollHeight) + 'px'
+      }
+    }
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit }),
+      elRef,
+      style,
+      onInput,
+      onEnter,
+    }
+  },
+})
+</script>
+
+<template>
+  <label
+    class="inline-block relative align-bottom text-left"
+    :class="{ 'mb-3': isInsideForm }"
+  >
+    <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="elRef"
+      class="appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700 resize-none overflow-hidden border shadow-sm rounded-md
+      focus:border-[color:var(--x-textarea-border)]
+      "
+      :style="style"
+      :class="[
+        disabled ? 'bg-gray-100 dark:bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200',
+        {
+          // size
+          'px-2 py-1 text-xs': size === 'xs',
+          'px-2 py-2 text-sm': size === 'sm',
+          'px-3 py-2': !size || !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
+          'px-4 py-3 text-lg': size === 'lg',
+          'px-5 py-4 text-xl': size === 'xl',
+        },
+        {
+          // error
+          'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
+        },
+        inputClass,
+      ]"
+      :disabled="disabled"
+      :max="max"
+      :maxlength="maxlength"
+      :min="min"
+      :dir="dir"
+      :minlength="minlength"
+      :name="name"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :value="modelValue?.toString()"
+      v-on="inputListeners"
+      @keydown.enter="onEnter"
+      @input="onInput"
+    ></textarea>
+
+    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+    <p v-else-if="helper" class="text-sm text-gray-500 mt-1" v-text="helper"></p>
+  </label>
+</template>

package/src/components/toggle/Toggle.vue

@@ -0,0 +1,144 @@
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInputtable } from '../../composables/inputtable'
+import { useInteractive } from '../../composables/interactive'
+
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+export default defineComponent({
+  name: 'XToggle',
+
+  components: {
+    XSpinner,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    id: String,
+    label: String,
+    glow: Boolean,
+  },
+
+  emits: useInputtable.emits(false),
+
+  setup(props, { emit }) {
+    const elRef = ref<HTMLElement>()
+    const checked = computed({
+      get(): boolean {
+        return !!props.modelValue
+      },
+      set(val: boolean) {
+        emit('update:modelValue', val)
+      },
+    })
+
+    const css = useCSS()
+    const colors = useColors()
+
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+
+      return css.variables({
+        bg: color[500],
+        dark: {
+          bg: color[600],
+        },
+      })
+    })
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
+      elRef,
+      checked,
+      styles,
+    }
+  },
+})
+</script>
+
+<template>
+  <label
+    class="inline-block mb-1 pb-2"
+    :class="[!disabled ? 'cursor-pointer' : 'cursor-not-allowed']"
+  >
+    <div class="flex items-center">
+      <div
+        class="flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 border-transparent"
+        :style="styles"
+        :class="{
+          [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
+          'bg-gray-300 dark:bg-gray-500': !disabled && !checked && !loading,
+          'bg-gray-100 dark:bg-gray-700': disabled || loading,
+          'bg-[color:var(--x-bg)]': !disabled && checked,
+        }"
+      >
+        <div
+          class="relative shrink-0"
+          :class="[
+            {
+              'w-6': size === 'sm' || size === 'xs',
+              'w-8': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+              'w-10': size === 'lg',
+              'w-12': size === 'xl',
+            }
+          ]"
+        >
+          <input
+            :id="id"
+            ref="elRef"
+            v-model="checked"
+            :aria-checked="checked ? 'true' : 'false'"
+            :aria-disabled="disabled ? 'true' : undefined"
+            type="checkbox"
+            class="hidden"
+            :disabled="disabled || loading"
+            :name="name"
+            :required="required"
+            :value="modelValue"
+          />
+          <div
+            class="rounded-full shadow transform transition duration-300 flex-shrink-0"
+            :class="[
+              {
+                'h-3 w-3': size === 'sm' || size === 'xs',
+                'h-4 w-4': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+                'h-5 w-5': size === 'lg',
+                'h-6 w-6': size === 'xl',
+                'translate-x-full': checked,
+                'bg-gray-shadow-md': !disabled
+              },
+              [disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800']
+            ]"
+          ></div>
+        </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>
+      <x-spinner v-if="loading" :size="size" class="ml-1" />
+    </div>
+    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+  </label>
+</template>

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import XPopover from '../../components/popover/Popover.vue'
+import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
+
+export default defineComponent({
+  name: 'XTooltip',
+
+  components: {
+    XPopover,
+    XPopoverContainer,
+  },
+})
+</script>
+
+<template>
+  <x-popover hover class="dark">
+    <slot></slot>
+    <template #content>
+      <x-popover-container class="p-2 text-white text-sm">
+        <slot name="tooltip"></slot>
+      </x-popover-container>
+    </template>
+  </x-popover>
+</template>