@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/src/components/tag/Tag.vue

@@ -1,29 +1,73 @@
+<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-block leading-none"
+    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="
       [
-        [`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',
-        },
+        sizeClasses,
+        outlined ? 'border' : 'bg-[color:var(--x-bg)]',
+        rounded ? 'rounded-full' : 'rounded'
       ]"
   >
     <span
@@ -41,10 +85,9 @@
         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')"
+        @click="(e) => $emit('remove', e)"
       >
-        <line x1="18" y1="6" x2="6" y2="18" />
-        <line x1="6" y1="6" x2="18" y2="18" />
+        <path d="M6 18L18 6M6 6l12 12" />
       </svg>
     </span>
 
@@ -53,41 +96,3 @@
     </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,5 +1,106 @@
+<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 mb-1 relative">
+  <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"
@@ -13,24 +114,24 @@
     ></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"
+      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-200 dark:bg-gray-800 cursor-not-allowed' : 'bg-white dark:bg-gray-900',
+        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
-          '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-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-6 py-6 text-xl': size === 'xl',
+          'px-5 py-4 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,
+          'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
         },
         inputClass,
       ]"
@@ -43,124 +144,13 @@
       :name="name"
       :placeholder="placeholder"
       :readonly="readonly"
-      :value="modelValue"
+      :value="modelValue?.toString()"
       v-on="inputListeners"
-      @keydown="onKeyDown"
+      @keydown.enter="onEnter"
       @input="onInput"
     ></textarea>
 
-    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
+    <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>
-
-<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 }),
-    }
-  },
-
-  watch: {
-    modelValue() {
-      setTimeout(this.resize)
-    },
-    size() {
-      setTimeout(this.resize)
-    },
-  },
-
-  mounted() {
-    this.resize()
-    window.addEventListener('resize', this.resize)
-  },
-
-  beforeUnmount() {
-    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/toggle/Toggle.vue

@@ -1,58 +1,129 @@
+<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 relative pb-2"
+    class="inline-block mb-1 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,
-          }
-        ]"
+        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,
+        }"
       >
-        <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="relative 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,
-            },
+              'w-6': size === 'sm' || size === 'xs',
+              'w-8': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+              'w-10': size === 'lg',
+              'w-12': size === 'xl',
+            }
           ]"
-        ></div>
+        >
+          <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"
@@ -66,63 +137,8 @@
         v-text="label"
       >
       </span>
+      <x-spinner v-if="loading" :size="size" class="ml-1" />
     </div>
-    <p v-if="errorInternal" class="text-sm text-error-500 mt-1" v-text="errorInternal"></p>
+    <p v-if="errorInternal" class="text-sm text-red-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 +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" v-bind="$attrs">
+  <x-popover hover class="dark">
     <slot></slot>
     <template #content>
-      <x-popover-container class="p-2 text-gray-300 text-sm">
+      <x-popover-container class="p-2 text-white 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>