@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/src/components/checkbox/Checkbox.vue

@@ -1,54 +1,179 @@
+<script lang="ts">
+import { defineComponent, ref, watch, computed, type StyleValue } 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: 'XCheckbox',
+
+  components: {
+    XSpinner,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    ...useInteractive.props(),
+    ...useInputtable.props(),
+    label: String,
+    glow: Boolean,
+  },
+
+  emits: useInputtable.emits(false),
+
+  expose: ['toggle'],
+
+  setup(props, { attrs, emit }) {
+    const elRef = ref<HTMLElement>()
+    const checked = ref(false)
+
+    watch(() => props.modelValue, (value) => {
+      checked.value = !!value
+    })
+
+    watch(() => checked.value, (value) => {
+      emit('update:modelValue', value)
+    })
+
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs' || props.size === 'sm') return 'h-4 w-4'
+      else if (props.size === 'xl') return 'h-6 w-6'
+
+      return 'h-5 w-5'
+    })
+
+    const iconSizeClasses = computed(() => {
+      if (props.size === 'xs' || props.size === 'sm') return 'h-2 w-2'
+      else if (props.size === 'xl') return 'h-4 w-4'
+
+      return 'h-3 w-3'
+    })
+
+    const css = useCSS()
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+
+    const cssVariables = computed(() => {
+      const color = colors.getPalette(props.color)
+      const vars: (object | string)[] = []
+
+      if (props.loading) {
+        return css.variables({
+          bg: 'transparent',
+          border: 'transparent',
+          dark: {
+            bg: 'transparent',
+            border: 'transparent',
+          },
+        })
+      }
+
+      if (props.disabled) {
+        vars.push(css.variables({
+          bg: gray[100],
+          border: gray[200],
+          dark: {
+            bg: gray[800],
+            border: gray[700],
+          },
+        }))
+      } else {
+        if (checked.value) {
+          vars.push(css.variables({
+            bg: color[500],
+            border: color[500],
+            dark: {
+              bg: color[500],
+              border: 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[400],
+            },
+          }))
+        }
+
+        if (props.glow) {
+          vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+        }
+      }
+
+      return vars as StyleValue
+    })
+
+    function toggle() {
+      checked.value = !checked.value
+    }
+
+    const interactive = useInteractive(elRef)
+
+    return {
+      ...interactive,
+      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
+      elRef,
+      checked,
+      sizeClasses,
+      iconSizeClasses,
+      cssVariables,
+      toggle,
+    }
+  },
+})
+</script>
+
 <template>
-  <label class="inline-block mb-1 relative cursor-pointer pb-2">
+  <label class="inline-block relative cursor-pointer align-middle mb-1 pb-2">
     <div
-      ref="focusRef"
+      ref="elRef"
       class="flex items-center"
       :class="{ 'cursor-not-allowed': disabled }"
-      :tabindex="0"
-      @keypress.prevent.stop.enter.space="toggle"
+      tabindex="0"
+      @keypress.prevent.stop.space="toggle"
     >
       <input
         v-model="checked"
         :aria-checked="checked ? 'true' : 'false'"
-        :aria-disabled="disabled ? 'true' : null"
+        :aria-disabled="disabled ? 'true' : undefined"
         type="checkbox"
         class="invisible absolute"
         :disabled="disabled || loading"
         :name="name"
         :required="required"
-        :value="modelValue"
       />
       <div
-        class="rounded flex justify-center items-center flex-shrink-0"
+        class="rounded 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="cssVariables"
         :class="[
-          {
-            'shadow': !flat && !loading,
-            [`shadow-lg shadow-${color}-500/50`]: !flat && glow && modelValue,
-
-            'h-4 w-4': size === 'sm' || size === 'xs',
-            'h-5 w-5': !['xs', 'sm', 'xl'].includes(size),
-            'h-6 w-6': size === 'xl',
-          },
-          disabled ? {
-            'bg-gray-500 border-gray-600 dark:border-gray-400': modelValue,
-            'bg-gray-200 border-gray-300 dark:border-gray-700': !modelValue,
-          } :
-          {
-            [`bg-${color}-500 border-${color}-500`]: modelValue && !loading,
-            'border bg-white dark:bg-gray-900 border-gray-300 hover:border-gray-900 dark:border-gray-700': !modelValue && !loading,
-          }
+          [(glow && !disabled && !loading) ? $style['checkbox--glow'] : ''],
+          sizeClasses,
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
         <svg
           v-else
-          class="fill-current text-gray-100"
-          :class="{
-            'opacity-0': !modelValue,
-            'h-2 w-2': size === 'sm' || size === 'xs',
-            'h-3 w-3': !['xs', 'sm', 'xl'].includes(size),
-            'h-4 w-4': size === 'xl',
-          }"
+          class="fill-current text-gray-100 dark:text-gray-900"
+          :class="[iconSizeClasses, {
+            'opacity-0': !checked,
+          }]"
           viewBox="0 0 20 20"
         >
           <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
@@ -67,62 +192,14 @@
         <slot v-else></slot>
       </div>
     </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: 'XCheckbox',
-  components: {
-    XSpinner,
-  },
-
-  validator: {
-    ...withValidator(),
-  },
-
-  props: {
-    ...withProps(),
-
-    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>
+  .checkbox {
+    &--glow {
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow);
     }
-  },
-
-  computed: {
-    checked: {
-      get() {
-        return this.modelValue
-      },
-
-      set(val) {
-        this.$emit('update:modelValue', val)
-      },
-    },
-  },
-
-  methods: {
-    toggle() {
-      this.$emit('update:modelValue', !this.modelValue)
-    },
-  },
-}
-</script>
+  }
+</style>

package/src/components/collapse/Collapse.vue

@@ -1,3 +1,123 @@
+<script lang="ts">
+import { defineComponent, ref, watch } from 'vue'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+export default defineComponent({
+  name: 'XCollapse',
+
+  components: {
+    XIcon,
+  },
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    disabled: Boolean,
+    expanded: Boolean,
+    showIcon: {
+      type: Boolean,
+      default: true,
+    },
+    icon: String,
+    color: String,
+  },
+
+  emits: ['expand'],
+
+  expose: ['toggle', 'open', 'close'],
+
+  setup(props, { emit }) {
+    const collapsed = ref(!props.expanded)
+    const animated = ref(true)
+
+    watch(() => props.expanded, () => {
+      collapsed.value = !props.expanded
+    })
+
+    function onBeforeEnter(el: HTMLElement) {
+      if (animated.value) el.style.height = '0px'
+    }
+
+    function onEnter(el: HTMLElement, done: ()=> void) {
+      if (!animated.value) done()
+      else {
+        el.addEventListener('transitionend', done)
+        setTimeout(() => {
+          el.style.height = `${el.scrollHeight}px`
+        }, 1)
+      }
+    }
+
+    function onAfterEnter(el: HTMLElement) {
+      if (!animated.value) {
+        animated.value = true
+      } else {
+        el.style.removeProperty('height')
+      }
+    }
+
+    function onBeforeLeave(el: HTMLElement) {
+      if (!animated.value) return
+      el.style.height = `${el.scrollHeight}px`
+    }
+
+    function onLeave(el: HTMLElement ,done: ()=> void) {
+      if (!animated.value) done()
+      else {
+        el.addEventListener('transitionend', done)
+        setTimeout(() => {
+          el.style.height = '0px'
+        }, 1)
+      }
+    }
+
+    function onAfterLeave(el: HTMLElement) {
+      if (!animated.value) {
+        animated.value = true
+      } else {
+        el.style.removeProperty('height')
+      }
+    }
+
+    function open(anim = true) {
+      animated.value = anim
+      collapsed.value = false
+    }
+
+    function close(anim = true) {
+      animated.value = anim
+      collapsed.value = true
+    }
+
+    function toggle() {
+      if (!props.disabled) collapsed.value = !collapsed.value
+    }
+
+    function onExpand(anim = true) {
+      open(anim)
+      emit('expand')
+    }
+
+    return {
+      collapsed,
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave,
+      onExpand,
+      toggle,
+      close,
+      open,
+    }
+  },
+})
+</script>
+
 <template>
   <component
     :is="tag"
@@ -8,32 +128,36 @@
       class="flex items-center relative"
       :class="{
         'cursor-pointer' : !disabled,
-        'flex-row-reverse': iconLeft,
+        'flex-row-reverse': icon,
       }"
-      @click="toggleExpand()"
+      @click="toggle"
     >
-      <div class="flex-1">
+      <div class="flex-1 overflow-hidden">
         <slot :collapsed="collapsed"></slot>
       </div>
 
-      <div class="absolute top-1/2 transform -translate-y-1/2 right-2">
-        <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-5 h-5 transform transition-transform duration-200"
+      <div v-if="showIcon" class="absolute top-1/2 transform -translate-y-1/2 right-3">
+        <span
+          class="flex transform transition-transform duration-150"
           :class="[
-            iconLeft ? 'mr-2' : 'ml-2',
-            { 'rotate-180': !collapsed }
+            {
+              'rotate-180': !collapsed,
+              'text-gray-300': disabled
+            }
           ]"
         >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
+          <x-icon v-if="icon" :icon="icon" />
+          <svg
+            v-else
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            fill="none"
+            role="presentation"
+            class="stroke-2 w-5 h-5"
+          >
+            <path d="M19 9l-7 7-7-7" />
+          </svg>
+        </span>
       </div>
     </div>
 
@@ -41,81 +165,17 @@
       <slot name="summary"></slot>
     </template>
 
-    <div
-      class="overflow-y-hidden transition-all duration-300 ease-in-out"
-      :style="{ maxHeight: maxHeight + 'px' }"
+    <Transition
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
     >
-      <div ref="content">
-        <slot name="content"></slot>
+      <div v-show="!collapsed" class="transition-[height] duration-150 overflow-y-hidden">
+        <slot name="content" :expand="onExpand" :collapsed="collapsed"></slot>
       </div>
-    </div>
+    </Transition>
   </component>
 </template>
-
-<script>
-export default {
-  name: 'XCollapse',
-
-  props: {
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
-
-    expanded: {
-      default: false,
-      type: Boolean,
-    },
-
-    iconLeft: {
-      default: false,
-      type: Boolean,
-    },
-
-    tag: {
-      default: 'div',
-      type: String,
-    },
-  },
-
-  data() {
-    return {
-      collapsed: !this.expanded,
-      maxHeight: !this.expanded ? 0 : 'auto',
-      observer: null,
-    }
-  },
-
-  beforeMount() {
-    window.addEventListener('resize', this.onResize)
-  },
-
-  beforeUnmount() {
-    this.observer.disconnect()
-    window.removeEventListener('resize', this.onResize)
-  },
-
-  mounted() {
-    this.observer = new ResizeObserver(this.onResize)
-    this.observer.observe(this.$refs.content)
-  },
-
-  methods: {
-    toggleExpand() {
-      if (this.disabled) return
-
-      this.collapsed = !this.collapsed
-      this.$emit('toggle', this.collapsed)
-      this.onResize()
-    },
-
-    onResize() {
-      if (this.collapsed) {
-        this.maxHeight = 0
-      } else {
-        this.maxHeight = this.$refs.content.offsetHeight
-      }
-    },
-  },
-}
-</script>

package/src/components/container/Container.vue

@@ -1,14 +1,7 @@
-<template>
-  <component
-    :is="tag"
-    class="container mx-auto px-4"
-  >
-    <slot></slot>
-  </component>
-</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
 
-<script>
-export default {
+export default defineComponent({
   name: 'XContainer',
 
   props: {
@@ -17,5 +10,14 @@ export default {
       default: 'div',
     },
   },
-}
+})
 </script>
+
+<template>
+  <component
+    :is="tag"
+    class="container mx-auto px-4"
+  >
+    <slot></slot>
+  </component>
+</template>

package/src/components/divider/Divider.vue

@@ -1,3 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'XDivider',
+
+  props: {
+    label: String,
+    vertical: Boolean,
+  },
+})
+</script>
+
 <template>
   <div
     :class="[
@@ -9,7 +22,7 @@
     class="flex justify-center items-center"
   >
     <div
-      class="bg-gray-200 dark:bg-gray-600 flex-grow"
+      class="bg-gray-200 dark:bg-slate-700 flex-grow"
       :style="[
         {
           width: vertical ? '1px' : 'auto',
@@ -27,7 +40,7 @@
       v-text="label"
     ></div>
     <div
-      class="bg-gray-200 dark:bg-gray-600 flex-grow"
+      class="bg-gray-200 dark:bg-slate-700 flex-grow"
       :style="[
         {
           width: vertical ? '1px' : 'auto',
@@ -37,20 +50,3 @@
     ></div>
   </div>
 </template>
-
-<script>
-export default {
-  name: 'XDivider',
-
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-  },
-}
-</script>