@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/button/Button.vue

@@ -1,156 +1,433 @@
+<script lang="ts">
+import { defineComponent, computed, ref, inject } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInteractive } from '../../composables/interactive'
+import { injectButtonGroupKey } from '../../composables/keys'
+
+import XSpinner from '../../components/spinner/Spinner.vue'
+import XIcon from '../../components/icon/Icon.vue'
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
+
+export default defineComponent({
+  name: 'XButton',
+
+  components: {
+    XIcon,
+    XSpinner,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props(),
+    ...useInteractive.props(),
+    tag: {
+      type: String,
+      default: 'button',
+    },
+    type: {
+      type: String,
+      default: 'button',
+    },
+    icon: String,
+    iconRight: String,
+    to: String,
+    outlined: Boolean,
+    rounded: Boolean,
+    glow: Boolean,
+    ghost: Boolean,
+    light: Boolean,
+    block: Boolean,
+    flat: Boolean,
+  },
+  setup(props, { slots, attrs }) {
+    const elRef = ref<HTMLElement>()
+
+    // Button group props
+    const buttonGroup = inject(injectButtonGroupKey, {
+      isButtonGroup: false,
+      groupProps: {
+        size: undefined,
+        flat: undefined,
+        color: undefined,
+        ghost: undefined,
+        light: undefined,
+        outlined: undefined,
+        disabled: undefined,
+      },
+    })
+    const { isButtonGroup } = buttonGroup
+
+    const computedSize = computed(() => buttonGroup.groupProps.size || props.size)
+    const computedFlat = computed(() => buttonGroup.groupProps.flat || props.flat)
+    const computedColor = computed(() => props.color || buttonGroup.groupProps.color)
+    const computedGhost = computed(() => props.ghost || buttonGroup.groupProps.ghost)
+    const computedLight = computed(() => props.light || buttonGroup.groupProps.light)
+    const computedOutlined = computed(() => props.outlined || buttonGroup.groupProps.outlined)
+    const computedDisabled = computed(() => props.disabled || buttonGroup.groupProps.disabled)
+    const isLight = computed(() => computedColor.value && computedLight.value)
+    const isDefault = computed(() => !computedColor.value && !computedGhost.value)
+    const htmlTag = computed(() => (attrs.href ? 'a' : props.to ? 'router-link' : props.tag))
+
+    const css = useCSS('button')
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+
+    const styles = computed(() => {
+      const color = computedColor.value ? colors.getPalette(computedColor.value) : gray
+      const vars: (object | string)[] = []
+
+      if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(computedColor.value ? color[500] : gray[500], 0.5)))
+
+      if (isDefault.value) {
+        if (computedDisabled.value) {
+          vars.push(css.variables({
+            bg: gray[50],
+            text: gray[300],
+            border: gray[200],
+            dark: {
+              bg: gray[900],
+              text: gray[600],
+              border: gray[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: 'white',
+            text: gray[800],
+            border: gray[300],
+            hover: { bg: !props.loading ? gray[100] : '' },
+            active: { bg: !props.loading ? gray[200] : '' },
+            dark: {
+              bg: gray[900],
+              text: 'white',
+              border: gray[600],
+              hover: { bg: !props.loading ? gray[800] : '' },
+              active: { bg: !props.loading ? gray[700] : '' },
+            },
+          }))
+        }
+      }
+
+      // light
+      else if (isLight.value) {
+        if (!computedOutlined.value || computedDisabled.value) vars.push(css.get('border', 'transparent'))
+
+        if (computedDisabled.value) {
+          vars.push(css.variables({
+            bg: color[50],
+            text: color[200],
+            border: 'transparent',
+            dark: {
+              bg: color[900],
+              text: color[600],
+              border: 'transparent',
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: color[50],
+            text: color[600],
+            border: computedOutlined.value ? color[500] : 'transparent',
+            hover: { bg: !props.loading ? color[100] : '' },
+            active: { bg: !props.loading ? color[200] : '' },
+            dark: {
+              bg: color[200],
+              text: color[800],
+              border: computedOutlined.value ? color[500] : 'transparent',
+              hover: { bg: !props.loading ? color[100] : '' },
+              active: { bg: !props.loading ? color[50] : '' },
+            },
+          }))
+        }
+      }
+
+      // ghost
+      else if (computedGhost.value) {
+        if (!computedOutlined.value) vars.push(css.get('border', 'transparent'))
+
+        if (computedColor.value) {
+          if (computedDisabled.value) {
+            vars.push(css.variables({
+              text: color[200],
+              dark: {
+                text: color[700],
+              },
+            }))
+          } else {
+            vars.push(css.variables({
+              text: color[600],
+              dark: {
+                text: color[200],
+              },
+            }))
+            if (!props.loading) {
+              vars.push(css.variables({
+                hover: { bg: color[50] },
+                active: { bg: color[100] },
+                dark: {
+                  hover: { bg: color[900] },
+                  active: { bg: color[800] },
+                },
+              }))
+            }
+          }
+        } else {
+          if (computedDisabled.value) {
+            vars.push(css.variables({
+              text: gray[200],
+              dark: {
+                text: gray[700],
+              },
+            }))
+          } else {
+            vars.push(css.variables({
+              text: gray[800],
+              dark: {
+                text: 'white',
+              },
+            }))
+            if (!props.loading) {
+              vars.push(css.variables({
+                hover: { bg: gray[100] },
+                active: { bg: gray[200] },
+                dark: {
+                  hover: { bg: gray[800] },
+                  active: { bg: gray[700] },
+                },
+              }))
+            }
+          }
+        }
+      }
+
+      // outlined / filled
+      else {
+        if (computedOutlined.value) {
+          if (computedDisabled.value) {
+            vars.push(css.variables({
+              text: color[200],
+              border: color[200],
+              dark: {
+                text: color[700],
+                border: color[700],
+              },
+            }))
+          } else {
+            vars.push(css.variables({
+              text: color[600],
+              border: color[600],
+              dark: {
+                text: color[300],
+                border: color[300],
+              },
+            }))
+            if (!props.loading) {
+              vars.push(css.variables({
+                hover: { bg: color[100] },
+                active: { bg: color[200] },
+                dark: {
+                  hover: { bg: color[800] },
+                  active: { bg: color[700] },
+                },
+              }))
+            }
+          }
+        } else {
+          vars.push(css.variables({
+            text: '#fff',
+            border: !isButtonGroup ? 'transparent' : color[600],
+            dark: {
+              text: '#fff',
+              border: !isButtonGroup ? 'transparent' : color[500],
+            },
+          }))
+          if (computedDisabled.value) {
+            vars.push(css.variables({
+              bg: color[100],
+              dark: {
+                bg: color[900],
+              },
+            }))
+          } else {
+            vars.push(css.variables({
+              bg: color[500],
+              hover: { bg: !props.loading ? color[600] : '' },
+              active: { bg: !props.loading ? color[800] : '' },
+              dark: {
+                bg: color[600],
+                hover: { bg: !props.loading ? color[500] : '' },
+                active: { bg: !props.loading ? color[400] : '' },
+              },
+            }))
+          }
+        }
+      }
+
+      return vars
+    })
+
+    const sizeClasses = computed(() => {
+      if (slots.default) {
+        switch (computedSize.value) {
+        case 'xs':
+          return `py-1 text-xs ${props.icon ? 'px-2' : 'px-3'}`
+        case 'sm':
+          return `py-2 text-sm ${props.icon ? 'px-3' : 'px-4'}`
+        case 'lg':
+          return `py-3 text-lg ${props.icon ? 'px-4' : 'px-6'}`
+        case 'xl':
+          return `py-4 text-xl ${props.icon ? 'px-6' : 'px-6'}`
+        default:
+          return `py-2 ${props.icon ? 'px-4' : 'px-5'}`
+        }
+      } else {
+        switch (computedSize.value) {
+        case 'xs':
+          return 'leading-none p-1'
+        case 'lg':
+          return 'leading-none p-3'
+        case 'xl':
+          return 'leading-none p-4'
+        default:
+          return 'leading-none p-2'
+        }
+      }
+    })
+
+    return {
+      ...useInteractive(elRef),
+      elRef,
+      sizeClasses,
+      styles,
+      htmlTag,
+      isButtonGroup,
+      computedSize,
+      computedFlat,
+      computedGhost,
+      computedLight,
+      computedOutlined,
+      computedDisabled,
+    }
+  },
+})
+</script>
+
 <template>
   <component
-    :is="to ? 'router-link' : tag"
-    ref="focusRef"
+    :is="htmlTag"
+    ref="elRef"
     :to="to"
-    class="relative leading-tight transition-colors duration-150 cursor-pointer focus:outline-none inline-block items-center justify-center font-medium"
+    class="relative transition duration-150 focus:outline-none inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border-y"
+    :style="styles"
     :class="[
+      $style['button'],
+      (glow && !computedDisabled && !loading) ? $style['button--glow'] : '',
+      sizeClasses,
       {
-        '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,
+        'rounded-none border-r border-l-0': isButtonGroup,
+        'rounded-full': rounded && !isButtonGroup,
+        'rounded-md': !rounded && !isButtonGroup,
+        'border-x': !isButtonGroup,
 
-        // group
-        'rounded-button': group === false,
-        'rounded-l-button': group === 'first',
-        'rounded-r-button': group === 'last',
+        // shadow
+        'shadow-sm':
+          !computedFlat &&
+          !computedLight &&
+          !computedGhost &&
+          !computedDisabled &&
+          !loading &&
+          !isButtonGroup,
 
-        '!rounded-full': rounded,
-
-        // loading
+        // cursor
+        'cursor-not-allowed': computedDisabled,
         'cursor-default': loading,
+        'cursor-pointer': !loading && !computedDisabled,
 
-        // content
-        'flex items-center justify-center': loading,
-        'flex-row-reverse': icon && iconRight
+        // size
+        'w-full': block,
       },
-
     ]"
-
     :aria-busy="loading ? 'true' : null"
-    :aria-disabled="tag !== 'button' && disabled ? 'true' : null"
-    :disabled="disabled || loading"
+    :aria-disabled="tag !== 'button' && computedDisabled ? 'true' : null"
+    :disabled="computedDisabled || loading"
     :type="tag === 'button' ? type : null"
   >
-    <x-spinner v-if="loading" :size="size" class="absolute" />
-    <span
+    <x-spinner v-if="loading" :size="computedSize" class="absolute" />
+    <x-icon
       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 }">
+      :size="computedSize"
+      :icon="icon"
+      class="shrink-0"
+      :class="[
+        [$slots.default ? 'mr-2' : 'm-0.5'],
+        {
+          invisible: loading,
+        },
+      ]"
+    />
+    <span :class="{ invisible: loading }">
       <slot></slot>
     </span>
+    <x-icon
+      v-if="iconRight"
+      :size="computedSize"
+      :icon="iconRight"
+      class="shrink-0"
+      :class="[
+        [$slots.default ? 'mr-2' : 'm-0.5'],
+        {
+          invisible: loading,
+        },
+      ]"
+    />
   </component>
 </template>
 
-<script>
-import { withProps, withValidator, useInteractive } from '../../composables/interactive'
-import XSpinner from '../spinner/Spinner.vue'
-import XIcon from '../icon/Icon.vue'
+<style lang="postcss" module scoped>
+.button {
+  color: var(--x-button-text);
+  background-color: var(--x-button-bg);
+  border-color: var(--x-button-border);
 
-const validator = {
-  group: [false, true, '', 'first', 'last'],
-}
+  &--glow {
+    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-button-glow), 0 4px 6px -4px var(--x-button-glow);
+  }
 
-export default {
-  name: 'XButton',
-  components: {
-    XSpinner,
-    XIcon,
-  },
-
-  validator: {
-    ...withValidator(),
-    ...validator,
-  },
+  &:hover {
+    color: var(--x-button-text-hover, var(--x-button-text));
+    background-color: var(--x-button-bg-hover, var(--x-button-bg));
+    border-color: var(--x-button-border-hover, var(--x-button-border));
+  }
 
-  props: {
-    ...withProps(),
+  &:active {
+    color: var(--x-button-text-active, var(--x-button-text));
+    background-color: var(--x-button-bg-active, var(--x-button-bg));
+    border-color: var(--x-button-border-active, var(--x-button-border));
+  }
 
-    group: {
-      default: false,
-      type: [String, Boolean],
-      validator: (value) => validator.group.includes(value),
-    },
+  :global(.dark) & {
+    color: var(--x-dark-button-text, var(--x-button-text));
+    background-color: var(--x-dark-button-bg, var(--x-button-bg));
+    border-color: var(--x-dark-button-border, var(--x-button-border));
 
-    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,
-    },
-  },
+    &:hover {
+      color: var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));
+      background-color: var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));
+      border-color: var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)));
+    }
 
-  setup() {
-    return {
-      ...useInteractive(),
+    &:active {
+      color: var(--x-dark-button-text-active, var(--x-dark-button-text));
+      background-color: var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));
+      border-color: var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)));
     }
-  },
+  }
 }
-</script>
+</style>

package/src/components/button/ButtonGroup.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent, provide } from 'vue'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInteractive } from '../../composables/interactive'
+import { injectButtonGroupKey } from '../../composables/keys'
+
+export default defineComponent({
+  name: 'XButtonGroup',
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props(),
+    ...useInteractive.props(),
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    outlined: Boolean,
+    rounded: Boolean,
+    ghost: Boolean,
+    light: Boolean,
+  },
+
+  setup(props) {
+    provide(injectButtonGroupKey, {
+      groupProps: props,
+      isButtonGroup: true,
+    })
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="inline-flex align-middle relative"
+    :class="[
+      $style['button-group'],
+      rounded ? $style['button-group--rounded'] : ''
+    ]"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<style lang="postcss" module>
+.button-group {
+  &:not(&--rounded) {
+    > :first-child {
+      @apply rounded-l-md border-l
+    }
+
+    > :last-child {
+      @apply rounded-r-md
+    }
+  }
+
+  &--rounded {
+    > :first-of-type {
+      @apply rounded-l-full border-l
+    }
+
+    > :last-child {
+      @apply rounded-r-full
+    }
+  }
+}
+</style>

package/src/components/card/Card.vue

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