@indielayer/ui 0.2.3 → 1.0.0-alpha.2

package/src/components/radio/Radio.vue

@@ -1,16 +1,141 @@
+<script lang="ts">
+import { defineComponent, computed, ref } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useInteractive } from '../../composables/interactive'
+import { useInputtable } from '../../composables/inputtable'
+
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+export default defineComponent({
+  name: 'XRadio',
+
+  components: {
+    XSpinner,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    value: [String, Number, Boolean, Function, Object, Array],
+    label: String,
+    glow: Boolean,
+  },
+
+  emits: useInputtable.emits(false),
+
+  setup(props, { attrs, emit }) {
+    const elRef = ref<HTMLElement>()
+
+    const selected = computed({
+      get() {
+        return props.value === props.modelValue
+      },
+      set() {
+        emit('update:modelValue', props.value)
+      },
+    })
+
+    const css = useCSS()
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+      const vars = []
+
+      if (props.loading) {
+        return css.variables({
+          bg: 'transparent',
+          border: 'transparent',
+          dark: {
+            bg: 'transparent',
+            border: 'transparent',
+          },
+        })
+      }
+
+      if (props.disabled) {
+        if (selected.value) {
+          vars.push(css.variables({
+            bg: 'transparent',
+            border: gray[200],
+            circle: gray[200],
+            dark: {
+              bg: 'transparent',
+              border: gray[700],
+              circle: gray[700],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: gray[200],
+            border: gray[200],
+            dark: {
+              bg: gray[700],
+              border: gray[700],
+            },
+          }))
+        }
+      } else {
+        if (selected.value) {
+          vars.push(css.variables({
+            bg: 'transparent',
+            border: color[500],
+            circle: color[500],
+            dark: {
+              bg: 'transparent',
+              border: color[500],
+              circle: color[500],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: '#fff',
+            border: props.glow ? color[300] : gray[300],
+            dark: {
+              bg: gray[900],
+              border: props.glow ? color[300] : gray[300],
+            },
+          }))
+        }
+
+        if (props.glow) {
+          vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+        }
+      }
+
+      return vars
+    })
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
+      selected,
+      styles,
+      elRef,
+    }
+  },
+})
+</script>
+
 <template>
   <label
-    ref="focusRef"
+    ref="elRef"
     class="inline-block mb-1 relative cursor-pointer focus:outline-none"
-    :class="{
-      ['rounded border p-2 hover:border-gray-500 dark:hover:border-gray-500 transition-colors duration-150 ease-in-out']: bordered,
-      [`border-gray-300 dark:border-gray-700`]: bordered && !selected,
-      [`border-${color}-500 dark:border-${color}-500`]: bordered && selected && !disabled,
-    }"
-    :aria-checked="selected ? 'true' : 'false'"
-    :aria-disabled="disabled ? 'true' : null"
-    :tabindex="0"
-    @keypress.prevent.stop.enter.space="$emit('update:modelValue', value)"
+    :aria-selected="selected ? 'true' : 'false'"
+    :aria-disabled="(disabled || loading) ? 'true' : undefined"
+    tabindex="0"
+    @keypress.prevent.stop.space="$emit('update:modelValue', value)"
   >
     <div
       class="flex items-center"
@@ -18,48 +143,43 @@
     >
       <input
         v-model="selected"
-        type="radio"
-        class="invisible absolute"
-        :disabled="disabled || loading"
         :name="name"
         :required="required"
-        :value="modelValue"
+        :disabled="disabled || loading"
+        type="radio"
+        class="invisible absolute"
       />
       <div
-        class="rounded-full flex justify-center items-center flex-shrink-0"
+        class="rounded-full flex justify-center items-center flex-shrink-0 border-2
+          border-[color:var(--x-border)]
+          bg-[color:var(--x-bg)]
+          dark:border-[color:var(--x-dark-border)]
+          dark:bg-[color:var(--x-dark-bg)]
+        "
+        :style="styles"
         :class="[
+          [glow && !disabled && !loading ? $style['radio--glow'] : ''],
           {
-            // shadow
-            'shadow': !flat && !loading,
-            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && selected,
-
             'h-4 w-4': size === 'sm' || size === 'xs',
-            'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
+            'h-5 w-5': !size || !['xs', 'sm', 'xl'].includes(size),
             'h-6 w-6': size === 'xl',
           },
-          disabled ? {
-            'bg-gray-500 border-gray-600 dark:border-gray-400': selected,
-            'bg-gray-200 border-gray-300 dark:border-gray-700': !selected,
-          } :
-          {
-            [`bg-${color}-500 border-${color}-500`]: selected && !loading,
-            'border bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-700': !selected && !loading,
-          }
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
         <svg
           v-else
-          class="fill-current text-gray-100"
+          class="fill-current text-[color:var(--x-circle)] dark:text-[color:var(--x-dark-circle)] w-full"
           :class="{
             'opacity-0': !selected,
-            'h-2 w-2': size === 'sm' || size === 'xs',
-            'h-3 w-3': !['xs', 'sm', 'xl'].includes(size),
-            'h-4 w-4': size === 'xl',
+            'h-2': size === 'sm' || size === 'xs',
+            'h-[0.6rem]': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+            'h-2.5': size === 'lg',
+            'h-3': size === 'xl',
           }"
           viewBox="0 0 20 20"
         >
-          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+          <circle cx="10" cy="10" r="10"/>
         </svg>
       </div>
       <span
@@ -80,72 +200,21 @@
       :class="{
         'text-xs pl-6': size === 'xs',
         'text-sm pl-6': size === 'sm',
-        'pl-7': !['xs', 'sm', 'lg', 'xl'].includes(size),
+        'pl-7': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
         'text-lg pl-7': size === 'lg',
         'text-lg pl-8': size === 'xl',
       }"
     >
       <slot></slot>
     </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: 'XRadio',
-  components: {
-    XSpinner,
-  },
-
-  validator: {
-    ...withValidator(),
-  },
-
-  props: {
-    ...withProps(),
-    bordered: {
-      type: Boolean,
-      default: false,
-    },
-
-    value: {
-      type: [String, Number, Boolean, Function, Object, Array],
-      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 }),
+<style lang="postcss" module scoped>
+  .radio {
+    &--glow {
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow);
     }
-  },
-
-  computed: {
-    selected: {
-      get() {
-        return this.value === this.modelValue
-      },
-
-      set() {
-        this.$emit('update:modelValue', this.value)
-      },
-    },
-  },
-}
-</script>
+  }
+</style>

package/src/components/scroll/Scroll.vue

@@ -0,0 +1,143 @@
+<script lang="ts">
+import { defineComponent, ref, toRefs } from 'vue'
+import { useScroll, useResizeObserver, useEventListener } from '@vueuse/core'
+
+export default defineComponent({
+  name: 'XScroll',
+
+  props: {
+    shadow: Boolean,
+    horizontal: Boolean,
+    mousewheel: Boolean,
+    scrollbar: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props) {
+    const scrollEl = ref<HTMLElement | null>(null)
+
+    const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollEl)
+    const { left, right, top, bottom } = toRefs(arrivedState)
+
+    useResizeObserver(scrollEl, triggerScroll)
+
+    if (props.horizontal && props.mousewheel)
+      useEventListener(scrollEl, 'wheel', (e: WheelEvent) => {
+        if (!scrollEl.value) return
+
+        e.preventDefault()
+        scrollEl.value.scrollLeft += e.deltaY + e.deltaX
+      })
+
+    function triggerScroll() {
+      scrollEl.value?.dispatchEvent(new CustomEvent('scroll'))
+    }
+
+    return {
+      scrollEl,
+      left,
+      right,
+      top,
+      bottom,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    class="flex relative overflow-hidden"
+    :class="[
+      $style.scrollWrap,
+      horizontal ? [
+        $style.horizontal,
+        {
+          [$style['shadow-left']]: !left,
+          [$style['shadow-right']]: !right,
+        }
+      ] : [
+        $style.vertical,
+        {
+          [$style['shadow-top']]: !top,
+          [$style['shadow-bottom']]: !bottom,
+        }
+      ]
+    ]"
+  >
+    <div
+      ref="scrollEl"
+      class="relative overflow-auto w-full"
+      :class="[
+        [horizontal ? 'overflow-x-auto' : 'overflow-y-auto'],
+        {
+          [$style.hideScroll]: !scrollbar,
+        }
+      ]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped module>
+.scrollWrap {
+  &:before, &:after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    transition: box-shadow .2s;
+  }
+
+  &.horizontal:before, &.horizontal:after {
+    top: 0;
+    bottom: 0;
+    width: 20px;
+  }
+
+  &.vertical:before, &.vertical:after {
+    right: 0;
+    left: 0;
+    height: 20px;
+  }
+
+  &.horizontal:before {
+    left: 0;
+  }
+  &.horizontal:after {
+    right: 0;
+  }
+  &.vertical:before {
+    top: 0;
+  }
+  &.vertical:after {
+    bottom: 0;
+  }
+
+  &.shadow-left:before {
+    box-shadow: inset 12px 0 10px -10px rgb(0 0 0 / 7%);
+  }
+
+  &.shadow-right:after {
+    box-shadow: inset -12px 0 10px -10px rgb(0 0 0 / 7%);
+  }
+
+  &.shadow-top:before {
+    box-shadow: inset 0 12px 10px -10px rgb(0 0 0 / 7%);
+  }
+
+  &.shadow-bottom:after {
+    box-shadow: inset 0 -12px 10px -10px rgb(0 0 0 / 7%);
+  }
+}
+
+.hideScroll {
+  -ms-overflow-style: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>